:root{--bg-primary:#0a0a0f;--bg-secondary:#12121a;--bg-tertiary:#1a1a24;--glass-bg:rgba(20,20,30,0.8);--glass-border:rgba(139,92,246,0.2);--text-primary:#f8fafc;--text-secondary:#94a3b8;--text-muted:#64748b;--accent-primary:#8B5CF6;--accent-secondary:#06B6D4;--accent-gradient:linear-gradient(135deg,#8B5CF6 0%,#06B6D4 100%);--success:#10B981;--warning:#F59E0B;--error:#EF4444;--status-online:#10B981;--status-offline:#6B7280;--sidebar-width:260px;--shadow-glow:0 0 20px rgba(139,92,246,0.3);--transition-fast:150ms ease;--radius-md:10px;--radius-lg:16px;--radius-full:9999px}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',sans-serif;background:var(--bg-primary);color:var(--text-primary);min-height:100vh;line-height:1.6}
body::before{content:'';position:fixed;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at 20% 20%,rgba(139,92,246,0.1) 0%,transparent 50%),radial-gradient(ellipse at 80% 80%,rgba(6,182,212,0.1) 0%,transparent 50%);pointer-events:none;z-index:-1}
.glass{background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border)}
.page{display:none;min-height:100vh}.page.active{display:flex}
#login-page{align-items:center;justify-content:center;padding:20px}
.login-container{width:100%;max-width:420px}
.login-card{padding:48px;border-radius:var(--radius-lg);box-shadow:0 10px 15px rgba(0,0,0,0.5),var(--shadow-glow)}
.login-header{text-align:center;margin-bottom:40px}
.logo-container{display:flex;flex-direction:column;align-items:center;gap:12px}
.escape-icon{width:80px;height:80px;animation:float 3s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.logo-svg{width:100%;height:100%}
.login-header h1{font-size:2rem;font-weight:700;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.login-header .subtitle{color:var(--text-secondary);font-size:0.9rem;font-weight:500;text-transform:uppercase;letter-spacing:2px}
.form-group{margin-bottom:20px}
.form-group label{display:block;margin-bottom:8px;font-size:0.875rem;font-weight:500;color:var(--text-secondary)}
.form-group input,.form-group select{width:100%;padding:14px 16px;background:var(--bg-secondary);border:1px solid var(--glass-border);border-radius:var(--radius-md);color:var(--text-primary);font-size:1rem;transition:var(--transition-fast)}
.form-group input::placeholder{color:var(--text-muted)}
.form-group input:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 3px rgba(139,92,246,0.2)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;font-size:0.9rem;font-weight:600;border:none;border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-fast);text-decoration:none}
.btn-primary{background:var(--accent-gradient);color:white;box-shadow:0 1px 2px rgba(0,0,0,0.3),0 0 20px rgba(139,92,246,0.2)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 6px rgba(0,0,0,0.4),0 0 30px rgba(139,92,246,0.3)}
.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--glass-border)}
.btn-secondary:hover{background:rgba(139,92,246,0.1);border-color:var(--accent-primary)}
.btn-danger{background:var(--error);color:white}.btn-danger:hover{background:#DC2626}
.btn-success{background:var(--success);color:white}.btn-success:hover{background:#059669}
.btn-full{width:100%}.btn-sm{padding:8px 16px;font-size:0.8rem}
.btn-icon{padding:8px;background:transparent;border:none;color:var(--text-secondary);cursor:pointer;border-radius:6px;transition:var(--transition-fast)}
.btn-icon:hover{background:var(--bg-tertiary);color:var(--accent-primary)}
.btn-icon svg,.btn-icon-svg{width:18px;height:18px}
.btn-loader{width:16px;height:16px;border:2px solid transparent;border-top-color:currentColor;border-radius:50%;animation:spin 0.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.error-message{margin-top:16px;padding:12px;background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);border-radius:6px;color:var(--error);font-size:0.875rem;text-align:center}
.hidden{display:none!important}
#dashboard-page{flex-direction:row}
.sidebar{position:fixed;top:0;left:0;width:var(--sidebar-width);height:100vh;display:flex;flex-direction:column;padding:24px 16px;z-index:100;border-right:1px solid var(--glass-border)}
.sidebar-header{display:flex;align-items:center;gap:12px;padding:0 8px 24px;border-bottom:1px solid var(--glass-border);margin-bottom:24px}
.logo-small{width:36px;height:36px}.logo-svg-small{width:100%;height:100%}
.logo-text{font-size:1.25rem;font-weight:700;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.nav-menu{list-style:none;flex:1}
.nav-item{display:flex;align-items:center;gap:12px;padding:12px 16px;margin-bottom:4px;border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;transition:var(--transition-fast)}
.nav-item:hover{background:var(--bg-tertiary);color:var(--text-primary)}
.nav-item.active{background:rgba(139,92,246,0.15);color:var(--accent-primary)}
.nav-icon{width:20px;height:20px;flex-shrink:0}
.sidebar-footer{display:flex;align-items:center;justify-content:space-between;padding-top:16px;border-top:1px solid var(--glass-border)}
.user-info{display:flex;align-items:center;gap:10px}
.user-avatar{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--accent-gradient);color:white;font-weight:600;font-size:0.875rem;border-radius:var(--radius-full)}
.user-details{display:flex;flex-direction:column}
.user-name{font-size:0.875rem;font-weight:500;color:var(--text-primary)}
.user-role{font-size:0.75rem;color:var(--text-muted);text-transform:capitalize}
.main-content{flex:1;margin-left:var(--sidebar-width);padding:32px;min-height:100vh}
.content-section{display:none}.content-section.active{display:block;animation:fadeIn 0.3s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}
.section-header h2{font-size:1.75rem;font-weight:700}
.servers-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:20px}
.server-card{padding:24px;border-radius:var(--radius-lg);transition:250ms ease}
.server-card:hover{transform:translateY(-4px);box-shadow:0 10px 15px rgba(0,0,0,0.5),var(--shadow-glow)}
.server-card-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px}
.server-info h3{font-size:1.1rem;font-weight:600;margin-bottom:4px}
.server-provider{font-size:0.8rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px}
.server-status{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--radius-full);font-size:0.75rem;font-weight:600;text-transform:uppercase}
.status-online{background:rgba(16,185,129,0.15);color:var(--status-online)}
.status-offline{background:rgba(107,114,128,0.15);color:var(--status-offline)}
.status-stopping,.status-starting{background:rgba(245,158,11,0.15);color:var(--warning)}
.status-error{background:rgba(239,68,68,0.15);color:var(--error)}
.status-unknown{background:rgba(107,114,128,0.15);color:var(--text-muted)}
.status-indicator{width:8px;height:8px;border-radius:50%;background:currentColor}
.status-online .status-indicator{animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}
.server-details{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.server-detail{display:flex;align-items:center;gap:8px;font-size:0.875rem;color:var(--text-secondary)}
.server-detail svg{width:16px;height:16px;color:var(--text-muted)}
.server-actions{display:flex;gap:10px}.server-actions .btn{flex:1}
.server-card.available{border:2px dashed var(--glass-border);background:transparent}
.server-card.available:hover{border-color:var(--accent-primary);background:rgba(139,92,246,0.05)}
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;color:var(--text-muted)}
.empty-icon{width:80px;height:80px;margin-bottom:20px;opacity:0.5}
.empty-state p{font-size:1.1rem;margin-bottom:8px}
.empty-hint{font-size:0.9rem;color:var(--text-muted)}
.users-table-container{overflow-x:auto;border-radius:var(--radius-lg)}
.users-table{width:100%;border-collapse:collapse;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-lg);overflow:hidden}
.users-table th,.users-table td{padding:16px 20px;text-align:left}
.users-table th{background:var(--bg-tertiary);font-size:0.8rem;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-secondary)}
.users-table td{font-size:0.9rem;border-top:1px solid var(--glass-border)}
.users-table tr:hover td{background:rgba(139,92,246,0.05)}
.role-badge{display:inline-block;padding:4px 10px;border-radius:var(--radius-full);font-size:0.75rem;font-weight:600;text-transform:uppercase}
.role-admin{background:rgba(139,92,246,0.15);color:var(--accent-primary)}
.role-viewer{background:rgba(6,182,212,0.15);color:var(--accent-secondary)}
.status-badge.status-active{background:rgba(16,185,129,0.15);color:var(--success)}
.status-badge.status-inactive{background:rgba(107,114,128,0.15);color:var(--text-muted)}
.table-actions{display:flex;gap:8px}
.settings-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:24px}
.settings-card{padding:28px;border-radius:var(--radius-lg)}
.settings-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--glass-border)}
.settings-card-header h3{font-size:1.25rem;font-weight:600}
.settings-form .form-group{margin-bottom:16px}
.form-actions{display:flex;gap:12px;margin-top:24px}
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.75);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}
.modal{width:100%;max-width:480px;padding:32px;border-radius:var(--radius-lg);animation:modalIn 0.3s ease}
@keyframes modalIn{from{opacity:0;transform:scale(0.95) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.modal-header h3{font-size:1.25rem;font-weight:600}
.modal-close{padding:4px;background:transparent;border:none;color:var(--text-muted);cursor:pointer;transition:var(--transition-fast)}
.modal-close:hover{color:var(--text-primary)}
.modal-close svg{width:24px;height:24px}
.modal-body{margin-bottom:24px}
.modal-footer{display:flex;justify-content:flex-end;gap:12px}
.toast-container{position:fixed;top:24px;right:24px;z-index:2000;display:flex;flex-direction:column;gap:12px}
.toast{display:flex;align-items:center;gap:12px;padding:16px 20px;background:var(--bg-tertiary);border:1px solid var(--glass-border);border-radius:var(--radius-md);box-shadow:0 10px 15px rgba(0,0,0,0.5);animation:toastIn 0.3s ease;min-width:280px;max-width:400px}
@keyframes toastIn{from{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}
.toast.toast-out{animation:toastOut 0.3s ease forwards}
@keyframes toastOut{to{opacity:0;transform:translateX(100%)}}
.toast-icon{width:20px;height:20px;flex-shrink:0}
.toast-success .toast-icon{color:var(--success)}
.toast-error .toast-icon{color:var(--error)}
.toast-warning .toast-icon{color:var(--warning)}
.toast-info .toast-icon{color:#3B82F6}
.toast-message{flex:1;font-size:0.9rem}
.toast-close{padding:4px;background:transparent;border:none;color:var(--text-muted);cursor:pointer}
.toast-close:hover{color:var(--text-primary)}
@media (max-width:768px){.sidebar{position:fixed;left:-100%;width:280px;transition:250ms ease}.sidebar.active{left:0}.main-content{margin-left:0;padding:20px}.servers-grid{grid-template-columns:1fr}.settings-cards{grid-template-columns:1fr}.section-header{flex-direction:column;align-items:flex-start;gap:16px}}