:root{--bg-base:#08090a;--bg-panel:#0f1011;--bg-elevated:#191a1b;--bg-surface:#28282c;--glass-bg:#ffffff06;--glass-border:#ffffff14;--glass-hover:#ffffff0d;--glass-blur:blur(20px) saturate(180%);--text-primary:#f7f8f8;--text-secondary:#d0d6e0;--text-tertiary:#8a8f98;--text-quaternary:#62666d;--accent:#7170ff;--accent-hover:#828fff;--accent-bg:#5e6ad2;--green:#10b981;--yellow:#f59e0b;--red:#ef4444;--border:#ffffff14;--border-subtle:#ffffff0d;--r-sm:6px;--r-md:8px;--r-lg:12px;--r-xl:22px;--r-pill:9999px;--font:"Inter", system-ui, -apple-system, sans-serif;--mono:"JetBrains Mono", ui-monospace, monospace}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font);background:var(--bg-base);color:var(--text-primary);font-feature-settings:"cv01", "ss03";-webkit-font-smoothing:antialiased;font-size:14px}.glass{background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);border:.5px solid var(--glass-border);border-radius:var(--r-lg);box-shadow:inset 0 1px #ffffff0f,0 4px 24px #0003}.app{height:100vh;display:flex;overflow:hidden}.sidebar{background:var(--bg-panel);border-right:.5px solid var(--border-subtle);flex-direction:column;flex-shrink:0;width:240px;height:100vh;display:flex}.sidebar-header{padding:20px 16px 16px}.logo{align-items:center;gap:10px;display:flex}.logo-text{letter-spacing:-.3px;font-size:16px;font-weight:600}.logo-badge{border-radius:var(--r-pill);background:var(--accent-bg);color:#fff;letter-spacing:.5px;padding:2px 6px;font-size:9px;font-weight:600}.sidebar-nav{flex-direction:column;flex:1;gap:2px;padding:8px;display:flex}.nav-item{border-radius:var(--r-sm);color:var(--text-tertiary);cursor:pointer;font-size:13px;font-weight:500;font-family:var(--font);text-align:left;background:0 0;border:none;align-items:center;gap:10px;width:100%;padding:8px 12px;text-decoration:none;transition:all .15s;display:flex}.nav-item:hover{background:var(--glass-hover);color:var(--text-secondary)}.nav-item.active{color:var(--accent);background:#7170ff1a}.nav-item svg{flex-shrink:0}.nav-item span:nth-child(2){flex:1}.nav-badge{border-radius:var(--r-pill);background:var(--bg-surface);color:var(--text-tertiary);padding:1px 8px;font-size:11px;font-weight:500}.nav-item.active .nav-badge{color:var(--accent);background:#7170ff33}.sidebar-footer{border-top:.5px solid var(--border-subtle);padding:12px 16px 16px}.user-chip{align-items:center;gap:10px;display:flex}.avatar{background:linear-gradient(135deg, var(--accent), var(--accent-bg));border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:13px;font-weight:600;display:flex}.user-info{flex-direction:column;display:flex}.user-name{font-size:13px;font-weight:500}.user-role{color:var(--text-tertiary);font-size:11px}.main{flex:1;height:100vh;overflow-y:auto}.tab-content{max-width:1400px;margin:0 auto;padding:24px 32px;display:none}.tab-content.active{display:block}.page-header{justify-content:space-between;align-items:flex-start;margin-bottom:24px;display:flex}.page-header h1{letter-spacing:-.5px;margin-bottom:4px;font-size:24px;font-weight:600}.page-sub{color:var(--text-tertiary);font-size:14px}.header-actions{gap:10px;display:flex}.btn-primary{background:var(--accent-bg);color:#fff;border-radius:var(--r-sm);cursor:pointer;font-size:13px;font-weight:500;font-family:var(--font);border:none;padding:8px 16px;transition:all .15s}.btn-primary:hover{background:var(--accent)}.btn-ghost{color:var(--text-secondary);border:.5px solid var(--border);border-radius:var(--r-sm);cursor:pointer;font-size:13px;font-weight:500;font-family:var(--font);background:#ffffff08;padding:8px 16px;transition:all .15s}.btn-ghost:hover{background:var(--glass-hover);color:var(--text-primary)}.btn-icon{border:.5px solid var(--border);border-radius:var(--r-sm);cursor:pointer;color:var(--text-tertiary);background:#ffffff08;padding:6px 8px;font-size:12px;transition:all .15s}.btn-icon:hover{background:var(--glass-hover);color:var(--text-primary)}.btn-icon.danger:hover{color:var(--red);background:#ef44441a;border-color:#ef44444d}.btn-icon.success:hover{color:var(--green);background:#10b9811a;border-color:#10b9814d}.stats-grid{grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px;display:grid}.stat-card{align-items:center;gap:14px;padding:18px 20px;display:flex}.stat-icon{border-radius:var(--r-md);border:.5px solid;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;font-size:20px;display:flex}.stat-body{flex-direction:column;display:flex}.stat-label{color:var(--text-tertiary);font-size:12px;font-weight:500}.stat-value{letter-spacing:-1px;font-size:28px;font-weight:600;line-height:1.1}.stat-sub{color:var(--text-quaternary);font-size:11px}.card{padding:18px 20px}.card-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.card-header h3{font-size:14px;font-weight:600}.card-badge{color:var(--text-tertiary);background:var(--bg-elevated);border-radius:var(--r-pill);padding:2px 8px;font-size:11px;font-weight:500}.charts-grid{grid-template-columns:1.2fr 1fr 1fr;gap:16px;margin-bottom:20px;display:grid}.bar-chart{flex-direction:column;gap:12px;display:flex}.bar-row{align-items:center;gap:10px;display:flex}.bar-label{width:100px;color:var(--text-tertiary);white-space:nowrap;text-overflow:ellipsis;flex-shrink:0;font-size:12px;overflow:hidden}.bar-track{border-radius:var(--r-pill);background:#ffffff0a;flex:1;height:8px;overflow:hidden}.bar-fill{border-radius:var(--r-pill);height:100%;transition:width .5s}.bar-value{color:var(--text-secondary);font-size:12px;font-weight:500;font-family:var(--mono);text-align:right;width:30px}.donut-chart{align-items:center;gap:20px;display:flex}.donut{flex-shrink:0;width:120px;height:120px;position:relative}.donut-center{flex-direction:column;align-items:center;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.donut-value{font-size:22px;font-weight:600}.donut-label{color:var(--text-tertiary);font-size:10px}.donut-legend{flex-direction:column;gap:8px;display:flex}.legend-item{color:var(--text-secondary);align-items:center;gap:8px;font-size:12px;display:flex}.legend-item span:nth-child(3){font-weight:600;font-family:var(--mono);color:var(--text-primary)}.dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.resource-bars{flex-direction:column;gap:16px;display:flex}.res-row{align-items:center;gap:10px;display:flex}.res-label{width:70px;color:var(--text-tertiary);flex-shrink:0;font-size:12px}.res-track{border-radius:var(--r-pill);background:#ffffff0a;flex:1;height:6px;overflow:hidden}.res-fill{border-radius:var(--r-pill);height:100%;transition:width .5s}.res-val{color:var(--text-secondary);font-size:11px;font-family:var(--mono);text-align:right;width:90px}.activity-list{flex-direction:column;gap:2px;display:flex}.activity-item{border-bottom:.5px solid var(--border-subtle);align-items:center;gap:12px;padding:10px 0;font-size:13px;display:flex}.activity-item:last-child{border-bottom:none}.activity-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.activity-text{color:var(--text-secondary);flex:1}.activity-time{color:var(--text-quaternary);font-size:11px;font-family:var(--mono)}.empty-state{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:48px 20px;display:flex}.empty-state.small{padding:24px 16px}.empty-icon{opacity:.3;font-size:48px}.empty-state h3{color:var(--text-secondary);font-size:16px;font-weight:600}.empty-state p{color:var(--text-tertiary);max-width:320px;font-size:13px}.servers-list{flex-direction:column;gap:12px;display:flex}.server-card{border:.5px solid var(--border);border-radius:var(--r-md);background:#ffffff05;align-items:center;gap:16px;padding:16px 20px;transition:all .15s;display:flex}.server-card:hover{background:var(--glass-hover);border-color:#ffffff1f}.server-status-dot{border-radius:50%;flex-shrink:0;width:10px;height:10px}.server-status-dot.active{background:var(--green);box-shadow:0 0 8px #10b98166}.server-status-dot.offline{background:var(--text-quaternary)}.server-status-dot.setup{background:var(--yellow);box-shadow:0 0 8px #f59e0b66}.server-status-dot.error{background:var(--red);box-shadow:0 0 8px #ef444466}.server-info{flex:1}.server-name{margin-bottom:2px;font-size:14px;font-weight:600}.server-meta{color:var(--text-tertiary);font-size:11px;font-family:var(--mono)}.server-stats{gap:20px;display:flex}.server-stat{flex-direction:column;align-items:center;display:flex}.server-stat-val{font-size:18px;font-weight:600}.server-stat-label{color:var(--text-tertiary);font-size:10px}.server-actions{gap:6px;display:flex}.data-table{border-collapse:collapse;width:100%}.data-table th{text-align:left;color:var(--text-tertiary);border-bottom:.5px solid var(--border-subtle);text-transform:uppercase;letter-spacing:.5px;padding:8px 12px;font-size:11px;font-weight:500}.data-table td{color:var(--text-secondary);border-bottom:.5px solid var(--border-subtle);padding:12px;font-size:13px}.data-table tr:hover td{background:#ffffff05}.table-empty{text-align:center;color:var(--text-tertiary);padding:32px!important}.status-pill{border-radius:var(--r-pill);padding:2px 10px;font-size:11px;font-weight:500;display:inline-block}.status-pill.running,.status-pill.active{color:var(--green);background:#10b9811f}.status-pill.stopped,.status-pill.offline{color:var(--text-tertiary);background:#ffffff0f}.status-pill.setup{color:var(--yellow);background:#f59e0b1f}.status-pill.error{color:var(--red);background:#ef44441f}.status-pill.creating{color:var(--accent);background:#7170ff1f}.settings-grid{grid-template-columns:1fr 1fr;gap:16px;display:grid}.card-footer{border-top:.5px solid var(--border-subtle);margin-top:16px;padding-top:16px}.form-grid{flex-direction:column;gap:14px;display:flex}.form-group{flex-direction:column;gap:6px;display:flex}.form-group label{color:var(--text-secondary);font-size:12px;font-weight:500}.input,.select{border:.5px solid var(--border);color:var(--text-primary);border-radius:var(--r-sm);font-size:13px;font-family:var(--font);background:#ffffff08;outline:none;width:100%;padding:8px 12px;transition:all .15s}.input:focus,.select:focus{border-color:var(--accent);background:#7170ff0d}.input::placeholder{color:var(--text-quaternary)}.form-hint{color:var(--text-tertiary);font-size:11px}.checkbox-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.check-item{color:var(--text-secondary);cursor:pointer;align-items:center;gap:6px;font-size:12px;display:flex}.check-item input{accent-color:var(--accent)}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:100;background:#000000b3;justify-content:center;align-items:center;display:none;position:fixed;inset:0}.modal-overlay.show{display:flex}.modal{width:480px;max-width:90vw;padding:0;overflow:hidden}.modal-header{border-bottom:.5px solid var(--border-subtle);justify-content:space-between;align-items:center;padding:20px 24px;display:flex}.modal-header h2{font-size:16px;font-weight:600}.modal-close{color:var(--text-tertiary);cursor:pointer;background:0 0;border:none;padding:0;font-size:24px;line-height:1}.modal-close:hover{color:var(--text-primary)}.modal-body{padding:24px}.modal-footer{border-top:.5px solid var(--border-subtle);justify-content:flex-end;gap:10px;padding:16px 24px;display:flex}.login-overlay{justify-content:center;align-items:center;height:100vh;display:flex}.login-box{width:400px;max-width:90vw;padding:32px}.login-box h2{margin-bottom:8px;font-size:20px;font-weight:600}.login-box p{color:var(--text-tertiary);margin-bottom:24px;font-size:14px}.login-error{color:var(--red);margin-top:8px;font-size:12px}.loading{color:var(--text-tertiary);justify-content:center;align-items:center;padding:48px;font-size:14px;display:flex}.toast{border-radius:var(--r-md);z-index:200;padding:12px 20px;font-size:13px;animation:.3s slideUp;position:fixed;bottom:20px;right:20px}.toast.success{color:var(--green);background:#10b98126;border:.5px solid #10b9814d}.toast.error{color:var(--red);background:#ef444426;border:.5px solid #ef44444d}.toast.info{color:var(--accent);background:#7170ff26;border:.5px solid #7170ff4d}@keyframes slideUp{0%{opacity:0;transform:translateY(100px)}to{opacity:1;transform:translateY(0)}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff14;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#ffffff1f}.setup-progress{margin-bottom:16px;padding:20px}.setup-progress-header{align-items:center;gap:12px;margin-bottom:12px;display:flex}.setup-spinner{border:2px solid #818cf833;border-top-color:#818cf8;border-radius:50%;flex-shrink:0;width:20px;height:20px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.setup-progress-message{color:#e0e0e8;flex:1;font-size:14px}.setup-progress-percent{color:#818cf8;font-size:14px;font-weight:600}.setup-progress-bar-bg{background:#ffffff0f;border-radius:4px;width:100%;height:8px;margin-bottom:8px;overflow:hidden}.setup-progress-bar-fill{background:linear-gradient(90deg,#818cf8,#a78bfa);border-radius:4px;height:100%;transition:width .3s;box-shadow:0 0 12px #818cf866}.setup-progress-step{color:#fff6;text-transform:uppercase;letter-spacing:.5px;font-size:12px}@media (width<=1024px){.stats-grid{grid-template-columns:repeat(2,1fr)}.charts-grid,.settings-grid{grid-template-columns:1fr}}@media (width<=768px){.sidebar{width:60px}.logo-text,.nav-item span:nth-child(2),.nav-badge,.user-info{display:none}.tab-content{padding:16px}.stats-grid{grid-template-columns:1fr}}