:root{--color-primary-50: #eff6ff;--color-primary-100: #dbeafe;--color-primary-200: #bfdbfe;--color-primary-300: #93c5fd;--color-primary-400: #60a5fa;--color-primary-500: #3b82f6;--color-primary-600: #2563eb;--color-primary-700: #1d4ed8;--color-primary-800: #1e40af;--color-primary-900: #1e3a8a;--color-slate-50: #f8fafc;--color-slate-100: #f1f5f9;--color-slate-200: #e2e8f0;--color-slate-300: #cbd5e1;--color-slate-400: #94a3b8;--color-slate-500: #64748b;--color-slate-600: #475569;--color-slate-700: #334155;--color-slate-800: #1e293b;--color-slate-900: #0f172a;--color-success: #10b981;--color-success-hover: #059669;--color-danger: #ef4444;--color-danger-hover: #dc2626;--color-warning: #f59e0b;--color-warning-hover: #d97706;--color-info: #0891b2;--color-info-hover: #0e7490;--color-status-up: #10b981;--color-status-down: #ef4444;--color-status-unknown: #64748b;--color-accent-cyan: #38bdf8;--color-accent-cyan-hover: #0ea5e9;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--line-height-tight: 1.25;--line-height-normal: 1.5;--line-height-relaxed: 1.625;--radius-none: 0;--radius-sm: 3px;--radius-md: 6px;--radius-lg: 8px;--radius-xl: 10px;--radius-2xl: 12px;--radius-3xl: 16px;--radius-full: 9999px;--border-width-thin: 1px;--border-width-medium: 2px;--border-width-thick: 4px;--border-color-subtle: var(--color-slate-700);--border-color-default: var(--color-slate-600);--border-color-focus: var(--color-accent-cyan);--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, .25);--shadow-card: 0 2px 8px rgba(0, 0, 0, .3);--shadow-card-hover: 0 8px 16px rgba(0, 0, 0, .4);--spacing-0: 0;--spacing-1: .25rem;--spacing-2: .5rem;--spacing-3: .75rem;--spacing-4: 1rem;--spacing-5: 1.25rem;--spacing-6: 1.5rem;--spacing-8: 2rem;--spacing-10: 2.5rem;--spacing-12: 3rem;--z-dropdown: 100;--z-sticky: 200;--z-modal-backdrop: 300;--z-modal: 301;--z-tooltip: 400;--transition-fast: .15s ease;--transition-normal: .2s ease;--transition-slow: .3s ease;--bg-primary: var(--color-slate-900);--bg-secondary: var(--color-slate-800);--bg-tertiary: var(--color-slate-700);--bg-input: var(--color-slate-900);--text-primary: var(--color-slate-50);--text-secondary: var(--color-slate-200);--text-muted: var(--color-slate-400);--text-subtle: var(--color-slate-500);--navbar-height: 70px;--navbar-bg: var(--color-slate-800);--navbar-border: var(--color-slate-700);--navbar-brand-color: var(--color-accent-cyan);--navbar-link-color: var(--color-slate-400);--navbar-link-hover-color: var(--color-slate-50);--navbar-link-hover-bg: var(--color-slate-700);--navbar-link-active-color: var(--color-slate-50);--navbar-link-active-bg: var(--color-slate-700)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-family);font-size:var(--font-size-base);line-height:var(--line-height-normal);background:var(--bg-primary);color:var(--text-primary);min-height:100vh}#app{min-height:100vh}.text-primary{color:var(--text-primary)}.text-secondary{color:var(--text-secondary)}.text-muted{color:var(--text-muted)}.text-subtle{color:var(--text-subtle)}.bg-primary{background-color:var(--bg-primary)}.bg-secondary{background-color:var(--bg-secondary)}.bg-tertiary{background-color:var(--bg-tertiary)}.border-subtle{border:var(--border-width-thin) solid var(--border-color-subtle)}.border-default{border:var(--border-width-thin) solid var(--border-color-default)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-md{border-radius:var(--radius-md)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:var(--radius-full)}.shadow-sm{box-shadow:var(--shadow-sm)}.shadow-md{box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:var(--shadow-lg)}.shadow-card{box-shadow:var(--shadow-card)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-4);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;-webkit-user-select:none;user-select:none;border:var(--border-width-thin) solid transparent;border-radius:var(--radius-md);transition:all var(--transition-normal)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--color-primary-500);color:#fff}.btn-primary:hover:not(:disabled){background:var(--color-primary-600)}.btn-success{background:var(--color-success);color:#fff}.btn-success:hover:not(:disabled){background:var(--color-success-hover)}.btn-danger{background:var(--color-danger);color:#fff}.btn-danger:hover:not(:disabled){background:var(--color-danger-hover)}.btn-info{background:var(--color-info);color:#fff}.btn-info:hover:not(:disabled){background:var(--color-info-hover)}.btn-secondary{background:var(--color-slate-600);color:var(--text-primary)}.btn-secondary:hover:not(:disabled){background:var(--color-slate-500)}.btn-outline{background:transparent;border-color:var(--border-color-default);color:var(--text-primary)}.btn-outline:hover:not(:disabled){background:var(--color-slate-700)}.btn-sm{padding:var(--spacing-1) var(--spacing-2);font-size:var(--font-size-xs)}.btn-lg{padding:var(--spacing-3) var(--spacing-6);font-size:var(--font-size-base)}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-6)}.header h2{color:var(--text-primary);font-size:var(--font-size-xl);margin:0}.header-buttons{display:flex;gap:var(--spacing-2)}.service-card,.playbook-card,.file-card,.proxy-card,.tunnel-card,.server-card,.session-card,.port-card{background:var(--bg-secondary);border:var(--border-width-thin) solid var(--border-color-subtle);border-radius:var(--radius-xl);padding:var(--spacing-5);transition:transform var(--transition-normal),box-shadow var(--transition-normal)}.service-card:hover,.playbook-card:hover,.file-card:hover,.proxy-card:hover,.tunnel-card:hover,.server-card:hover,.session-card:hover,.port-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.service-card.up,.tunnel-card.active,.session-card.active{border-left:var(--border-width-thick) solid var(--color-success)}.service-card.down,.tunnel-card.inactive,.file-card.expired{border-left:var(--border-width-thick) solid var(--color-danger)}.service-card.unknown{border-left:var(--border-width-thick) solid var(--color-status-unknown)}.session-card.inactive{opacity:.6}.modal-overlay,.stats-modal{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000d9;display:flex;justify-content:center;align-items:center;z-index:var(--z-modal-backdrop)}.modal,.stats-content{background:var(--bg-secondary);border:var(--border-width-thin) solid var(--border-color-subtle);border-radius:var(--radius-2xl);padding:var(--spacing-8);width:90%;max-width:600px;max-height:80vh;overflow-y:auto;box-shadow:var(--shadow-2xl)}.modal-large{max-width:1400px}.modal-terminal{max-width:1200px}.modal-header,.stats-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-4);padding-bottom:var(--spacing-4);border-bottom:var(--border-width-thin) solid var(--border-color-subtle)}.modal-header h3,.stats-header h3{color:var(--text-primary);margin:0;font-size:var(--font-size-lg)}.modal-body{padding:var(--spacing-4) 0}.btn-close{background:var(--color-slate-600);color:#fff;border:none;padding:var(--spacing-2) var(--spacing-4);border-radius:var(--radius-md);cursor:pointer;font-size:var(--font-size-base);transition:background var(--transition-fast)}.btn-close:hover{background:var(--color-slate-500)}.add-form,.form-group{display:flex;gap:var(--spacing-2);margin-bottom:var(--spacing-6);flex-wrap:wrap;align-items:center}.add-form{background:var(--bg-secondary);padding:var(--spacing-4);border-radius:var(--radius-lg);border:var(--border-width-thin) solid var(--border-color-subtle)}.add-form label,.form-group label{display:block;color:var(--text-secondary);font-size:var(--font-size-sm);margin-bottom:var(--spacing-1);margin-top:var(--spacing-3)}.add-form input[type=text],.add-form input[type=password],.add-form input:not([type]),.add-form select,.add-form textarea,.form-group input[type=text],.form-group input[type=password],.form-group input:not([type]),.form-group select,.form-group textarea{flex:1;min-width:150px;padding:var(--spacing-2);background:var(--bg-primary);border:var(--border-width-thin) solid var(--border-color-subtle);border-radius:var(--radius-md);color:var(--text-primary);font-size:var(--font-size-base)}.add-form input:disabled,.form-group input:disabled{opacity:.5;cursor:not-allowed}.add-form textarea,.form-group textarea{width:100%;resize:vertical}.checkbox-label{color:var(--text-secondary);font-size:var(--font-size-base);display:flex;align-items:center;gap:var(--spacing-2)}.checkbox-label input[type=checkbox]{margin:0}.form-actions{display:flex;justify-content:flex-end;gap:var(--spacing-3);margin-top:var(--spacing-6);padding-top:var(--spacing-4);border-top:var(--border-width-thin) solid var(--border-color-subtle)}.hint{color:var(--text-subtle);font-size:var(--font-size-xs);margin-top:var(--spacing-1);display:block}.badge-ssh{background:#3b82f61a;color:var(--color-primary-400)}.badge-rs{background:#e879f91a;color:#e879f9}.badge-alias{background:#10b98126;color:#34d399}.badge-public{background:#3b82f626;color:var(--color-primary-400)}.badge-protected{background:#e879f926;color:#e879f9}.badge-expiry{background:#f59e0b26;color:#fbbf24}.badge-auth{background:#6366f126;color:#a5b4fc}.badge-active{background:#10b98126;color:#86efac}.badge-inactive{background:#64748b26;color:#a8a29e}.services-grid,.playbooks-grid,.files-grid,.tunnels-grid,.servers-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--spacing-4)}.files-grid{grid-template-columns:repeat(auto-fill,minmax(350px,1fr))}.proxy-list,.checks-list{display:flex;flex-direction:column;gap:var(--spacing-3)}.bento-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(180px,auto);gap:var(--spacing-4)}.bento-card{border-radius:var(--radius-2xl);padding:var(--spacing-5);transition:all var(--transition-normal);position:relative;overflow:hidden;background:none;box-shadow:none;border:none;-webkit-backdrop-filter:none;backdrop-filter:none}.bento-card:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;transition:left .7s ease;pointer-events:none}.bento-card:hover:before{left:100%}.bento-card:hover{transform:translateY(-4px) scale(1.01)}.bento-card.bento-sm{grid-column:span 1;grid-row:span 1}.bento-card.bento-md{grid-column:span 2;grid-row:span 1}.bento-card.bento-lg{grid-column:span 2;grid-row:span 2}.bento-card.bento-tall{grid-column:span 1;grid-row:span 2}.bento-card.bento-wide{grid-column:span 4;grid-row:span 1}@media (max-width: 1200px){.bento-grid{grid-template-columns:repeat(3,1fr)}.bento-card.bento-wide{grid-column:span 3}}@media (max-width: 900px){.bento-grid{grid-template-columns:repeat(2,1fr)}.bento-card.bento-lg,.bento-card.bento-md,.bento-card.bento-wide{grid-column:span 2}}@media (max-width: 600px){.bento-grid{grid-template-columns:1fr}.bento-card,.bento-card.bento-sm,.bento-card.bento-md,.bento-card.bento-lg,.bento-card.bento-tall,.bento-card.bento-wide{grid-column:span 1;grid-row:auto}}.error-small{background:#ef44441a;color:#fca5a5;padding:var(--spacing-2);border-radius:var(--radius-md);font-size:var(--font-size-xs);margin-top:var(--spacing-2)}.empty-state,.empty,.no-sessions{text-align:center;padding:var(--spacing-12);color:var(--text-subtle)}.empty-state h3,.no-sessions h3{color:var(--text-secondary);margin-bottom:var(--spacing-2)}.svc-header,.file-header,.tunnel-header,.playbook-header,.proxy-header{display:flex;align-items:center;gap:var(--spacing-2);margin-bottom:var(--spacing-2)}.svc-header h3,.file-info h3,.tunnel-header h3,.playbook-header h3,.server-card h3,.session-card h3,.port-name{color:var(--text-primary);font-size:var(--font-size-base);margin:0}.svc-url,.svc-stats,.tunnel-detail,.file-stats,.playbook-meta,.proxy-description,.session-info,.file-meta{color:var(--text-secondary);font-size:var(--font-size-sm);margin-bottom:var(--spacing-2)}.svc-actions,.file-actions,.tunnel-actions,.playbook-actions,.proxy-actions,.server-actions,.session-actions,.port-actions{display:flex;gap:var(--spacing-2);flex-wrap:wrap;margin-top:var(--spacing-3)}.btn-add,.btn-refresh,.btn-script,.btn-ports,.btn-upload{background:var(--color-success);color:#fff;border:none;padding:var(--spacing-2) var(--spacing-4);border-radius:var(--radius-md);cursor:pointer;font-size:var(--font-size-sm);transition:background var(--transition-fast)}.btn-add:hover,.btn-refresh:hover,.btn-script:hover,.btn-ports:hover,.btn-upload:hover{background:var(--color-success-hover)}.btn-cancel{background:var(--color-slate-600);color:#fff;border:none;padding:var(--spacing-2) var(--spacing-4);border-radius:var(--radius-md);cursor:pointer;transition:background var(--transition-fast)}.btn-cancel:hover{background:var(--color-slate-500)}.btn-edit{background:var(--color-info);color:#fff;border:none;padding:var(--spacing-2) var(--spacing-4);border-radius:var(--radius-md);cursor:pointer;transition:background var(--transition-fast)}.btn-edit:hover{background:var(--color-info-hover)}.btn-open{background:var(--color-success);color:#fff;text-decoration:none;padding:var(--spacing-2) var(--spacing-4);border-radius:var(--radius-md);cursor:pointer;font-size:var(--font-size-sm);display:inline-flex;align-items:center;gap:var(--spacing-1);transition:background var(--transition-fast)}.btn-open:hover{background:var(--color-success-hover)}.btn-files{background:var(--color-warning);color:#fff;border:none;padding:var(--spacing-2) var(--spacing-4);border-radius:var(--radius-md);cursor:pointer;font-size:var(--font-size-sm);transition:background var(--transition-fast)}.btn-files:hover{background:var(--color-warning-hover)}.btn-connect{background:var(--color-primary-500);color:#fff;border:none;padding:var(--spacing-2) var(--spacing-4);border-radius:var(--radius-md);cursor:pointer;font-size:var(--font-size-sm);transition:background var(--transition-fast)}.btn-connect:hover{background:var(--color-primary-600)}.btn-disconnect{background:var(--color-danger);color:#fff;border:none;padding:var(--spacing-2) var(--spacing-4);border-radius:var(--radius-md);cursor:pointer;font-size:var(--font-size-sm);transition:background var(--transition-fast)}.btn-disconnect:hover{background:var(--color-danger-hover)}.btn-history{background:#8b5cf6;color:#fff;border:none;padding:var(--spacing-2) var(--spacing-4);border-radius:var(--radius-md);cursor:pointer;font-size:var(--font-size-sm);transition:background var(--transition-fast)}.btn-history:hover{background:#7c3aed}.btn-copy{background:var(--color-primary-500);color:#fff;border:none;padding:var(--spacing-2) var(--spacing-4);border-radius:var(--radius-md);cursor:pointer;font-size:var(--font-size-sm);transition:background var(--transition-fast)}.btn-copy:hover{background:var(--color-primary-600)}.btn-download{background:var(--color-success);color:#fff;border:none;padding:var(--spacing-2) var(--spacing-4);border-radius:var(--radius-md);cursor:pointer;font-size:var(--font-size-sm);transition:background var(--transition-fast)}.btn-download:hover{background:var(--color-success-hover)}.status-dot{display:inline-block;width:10px;height:10px;border-radius:var(--radius-full);background:var(--color-slate-500)}.status-dot.green,.status-dot.up{background:var(--color-success)}.status-dot.red,.status-dot.down{background:var(--color-danger)}.connected{color:var(--color-success)}.disconnected{color:var(--color-slate-500)}.green{color:var(--color-success)}.red{color:var(--color-danger)}.check-item,.port-detail{display:flex;gap:var(--spacing-4);padding:var(--spacing-2);background:var(--bg-primary);border-radius:var(--radius-sm);font-size:var(--font-size-sm);align-items:center}.check-time{color:var(--text-subtle);margin-left:auto}.method{font-weight:var(--font-weight-bold);color:var(--color-accent-cyan);min-width:50px}.terminal-container{background:var(--bg-primary);border:var(--border-width-thin) solid var(--border-color-subtle);border-radius:var(--radius-xl);overflow:hidden}.terminal-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-3) var(--spacing-4);background:var(--bg-secondary);border-bottom:var(--border-width-thin) solid var(--border-color-subtle);color:var(--text-secondary);font-size:var(--font-size-sm)}.terminal-body{height:500px;padding:var(--spacing-2)}.connecting-indicator{text-align:center;color:var(--text-muted);padding:var(--spacing-4)}.drop-zone{border:var(--border-width-medium) dashed var(--border-color-default);border-radius:var(--radius-lg);padding:var(--spacing-8);text-align:center;cursor:pointer;transition:border-color var(--transition-fast),background var(--transition-fast)}.drop-zone.dragging{border-color:var(--color-primary-500);background:#3b82f61a}.drop-zone-content{color:var(--text-secondary)}.drop-icon{font-size:var(--font-size-3xl);margin-bottom:var(--spacing-2)}.selected-file{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-2);color:var(--text-primary);position:relative}.file-size{color:var(--text-secondary);font-size:var(--font-size-sm)}.btn-remove-file{position:absolute;top:-10px;right:-10px;background:var(--color-danger);color:#fff;border:none;width:24px;height:24px;border-radius:var(--radius-full);cursor:pointer;font-size:var(--font-size-sm)}.script-info{background:var(--bg-primary);padding:var(--spacing-4);border-radius:var(--radius-md);margin-bottom:var(--spacing-4)}.script-info p{color:var(--text-primary);margin-bottom:var(--spacing-2)}.script-note{color:var(--text-secondary)!important;font-size:var(--font-size-sm)}.script-actions{display:flex;gap:var(--spacing-3)}.copied-message{color:var(--color-success);margin-top:var(--spacing-3);font-weight:var(--font-weight-medium)}.input{display:block;width:100%;padding:var(--spacing-3);font-size:var(--font-size-base);line-height:var(--line-height-normal);color:var(--text-primary);background:var(--bg-input);border:var(--border-width-thin) solid var(--border-color-subtle);border-radius:var(--radius-md);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.input::placeholder{color:var(--text-subtle)}.input:focus{outline:none;border-color:var(--border-color-focus);box-shadow:0 0 0 3px #38bdf81a}.input:disabled{opacity:.6;cursor:not-allowed}.card{background:var(--bg-secondary);border:var(--border-width-thin) solid var(--border-color-subtle);border-radius:var(--radius-xl);padding:var(--spacing-6);box-shadow:var(--shadow-card);transition:transform var(--transition-normal),box-shadow var(--transition-normal)}.card:hover{box-shadow:var(--shadow-card-hover)}.alert{padding:var(--spacing-3) var(--spacing-4);border-radius:var(--radius-md);font-size:var(--font-size-sm);line-height:var(--line-height-normal)}.alert-error{background:#ef44441a;color:#fca5a5;border:var(--border-width-thin) solid rgba(239,68,68,.2)}.alert-success{background:#10b9811a;color:#6ee7b7;border:var(--border-width-thin) solid rgba(16,185,129,.2)}.alert-warning{background:#f59e0b1a;color:#fcd34d;border:var(--border-width-thin) solid rgba(245,158,11,.2)}.alert-info{background:#38bdf81a;color:#7dd3fc;border:var(--border-width-thin) solid rgba(56,189,248,.2)}.badge{display:inline-flex;align-items:center;gap:var(--spacing-1);padding:var(--spacing-1) var(--spacing-2);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);border-radius:var(--radius-full)}.badge-success{background:#10b9811a;color:var(--color-success)}.badge-danger{background:#ef44441a;color:var(--color-danger)}.badge-warning{background:#f59e0b1a;color:var(--color-warning)}.badge-info{background:#38bdf81a;color:var(--color-accent-cyan)}.status-dot{display:inline-block;width:10px;height:10px;border-radius:var(--radius-full);background:var(--color-status-unknown)}.status-dot.up{background:var(--color-status-up)}.status-dot.down{background:var(--color-status-down)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;justify-content:center;align-items:center;z-index:var(--z-modal-backdrop)}.modal-content{background:var(--bg-secondary);border:var(--border-width-thin) solid var(--border-color-subtle);border-radius:var(--radius-2xl);padding:var(--spacing-8);width:90%;max-width:600px;max-height:80vh;overflow-y:auto;box-shadow:var(--shadow-2xl)}.grid{display:grid;gap:var(--spacing-4)}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-auto-fill-sm{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}.grid-auto-fill-md{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:var(--spacing-1)}.gap-2{gap:var(--spacing-2)}.gap-3{gap:var(--spacing-3)}.gap-4{gap:var(--spacing-4)}.gap-6{gap:var(--spacing-6)}.m-0{margin:var(--spacing-0)}.m-1{margin:var(--spacing-1)}.m-2{margin:var(--spacing-2)}.m-3{margin:var(--spacing-3)}.m-4{margin:var(--spacing-4)}.m-6{margin:var(--spacing-6)}.m-8{margin:var(--spacing-8)}.mt-0{margin-top:var(--spacing-0)}.mt-1{margin-top:var(--spacing-1)}.mt-2{margin-top:var(--spacing-2)}.mt-3{margin-top:var(--spacing-3)}.mt-4{margin-top:var(--spacing-4)}.mt-6{margin-top:var(--spacing-6)}.mb-0{margin-bottom:var(--spacing-0)}.mb-1{margin-bottom:var(--spacing-1)}.mb-2{margin-bottom:var(--spacing-2)}.mb-3{margin-bottom:var(--spacing-3)}.mb-4{margin-bottom:var(--spacing-4)}.mb-6{margin-bottom:var(--spacing-6)}.p-0{padding:var(--spacing-0)}.p-1{padding:var(--spacing-1)}.p-2{padding:var(--spacing-2)}.p-3{padding:var(--spacing-3)}.p-4{padding:var(--spacing-4)}.p-6{padding:var(--spacing-6)}.p-8{padding:var(--spacing-8)}.loading{text-align:center;color:var(--text-muted);padding:var(--spacing-8)}.error{background:#ef44441a;color:#fca5a5;padding:var(--spacing-3);border-radius:var(--radius-md);margin-bottom:var(--spacing-4)}:root{--gruvbox-bg: #1d2021;--gruvbox-bg-light: #282828;--gruvbox-bg-dark: #1b1b1b;--gruvbox-bg-glass: rgba(40, 40, 40, .7);--gruvbox-fg: #ebdbb2;--gruvbox-fg-dim: #bdae93;--gruvbox-comment: #928374;--gruvbox-red: #cc241d;--gruvbox-red-light: #fb4934;--gruvbox-green: #98971a;--gruvbox-green-light: #b8bb26;--gruvbox-yellow: #d79921;--gruvbox-yellow-light: #fabd2f;--gruvbox-blue: #458588;--gruvbox-blue-light: #83a598;--gruvbox-purple: #b16286;--gruvbox-purple-light: #d3869b;--gruvbox-aqua: #689d6a;--gruvbox-aqua-light: #8ec07c;--gruvbox-orange: #d65d0e;--gruvbox-orange-light: #fe8019;--glass-bg: rgba(35, 35, 35, .4);--glass-bg-light: rgba(40, 40, 40, .25);--glass-bg-strong: rgba(45, 45, 45, .6);--glass-border: rgba(235, 219, 178, .08);--glass-border-highlight: rgba(235, 219, 178, .2);--glass-border-glow: rgba(250, 189, 47, .3);--glass-blur: 40px;--glass-saturate: 120%;--gradient-primary: linear-gradient(135deg, rgba(215, 153, 33, .2), rgba(193, 125, 174, .15));--gradient-accent: linear-gradient(135deg, rgba(251, 73, 52, .2), rgba(250, 189, 47, .2));--gradient-success: linear-gradient(135deg, rgba(152, 151, 26, .85), rgba(184, 187, 38, .8));--gradient-danger: linear-gradient(135deg, rgba(204, 36, 29, .2), rgba(251, 73, 52, .2));--gradient-warning: linear-gradient(135deg, rgba(215, 153, 33, .8), rgba(254, 128, 25, .75));--gradient-glass: linear-gradient(135deg, rgba(235, 219, 178, .08), rgba(235, 219, 178, .02));--gradient-holographic: linear-gradient(135deg, rgba(251, 73, 52, .12) 0%, rgba(250, 189, 47, .12) 25%, rgba(184, 187, 38, .12) 50%, rgba(131, 165, 152, .12) 75%, rgba(251, 73, 52, .12) 100%);--shadow-glass-sm: 0 2px 12px rgba(0, 0, 0, .3);--shadow-glass-md: 0 8px 32px rgba(0, 0, 0, .4);--shadow-glass-lg: 0 12px 48px rgba(0, 0, 0, .5);--shadow-glass-xl: 0 20px 80px rgba(0, 0, 0, .6);--shadow-glow-red: 0 0 30px rgba(251, 73, 52, .35);--shadow-glow-yellow: 0 0 30px rgba(250, 189, 47, .35);--shadow-glow-green: 0 0 30px rgba(184, 187, 38, .35);--shadow-glow-aqua: 0 0 30px rgba(142, 192, 124, .35);--shadow-inner-glow: inset 0 0 20px rgba(235, 219, 178, .05);--bg-primary: var(--gruvbox-bg);--bg-secondary: var(--gruvbox-bg-light);--bg-tertiary: var(--gruvbox-bg-glass);--bg-input: rgba(29, 32, 33, .8);--bg-glass: var(--glass-bg);--text-primary: var(--gruvbox-fg);--text-secondary: var(--gruvbox-fg-dim);--text-muted: var(--gruvbox-comment);--text-subtle: var(--gruvbox-comment);--color-success: var(--gruvbox-green-light);--color-success-hover: var(--gruvbox-green);--color-danger: var(--gruvbox-red-light);--color-danger-hover: var(--gruvbox-red);--color-warning: var(--gruvbox-yellow-light);--color-warning-hover: var(--gruvbox-yellow);--color-info: var(--gruvbox-blue-light);--color-info-hover: var(--gruvbox-blue);--color-status-up: var(--gruvbox-green-light);--color-status-down: var(--gruvbox-red-light);--color-status-unknown: var(--gruvbox-comment);--color-accent-cyan: var(--gruvbox-aqua-light);--color-accent-cyan-hover: var(--gruvbox-aqua);--color-accent-pink: var(--gruvbox-purple-light);--color-accent-purple: var(--gruvbox-purple);--color-primary-500: var(--gruvbox-yellow-light);--color-primary-600: var(--gruvbox-yellow);--border-color-subtle: var(--glass-border);--border-color-default: var(--glass-border-highlight);--border-color-focus: var(--gruvbox-yellow-light);--navbar-bg: var(--glass-bg-strong);--navbar-border: var(--glass-border-highlight);--navbar-brand-color: var(--gruvbox-orange-light);--navbar-link-color: var(--gruvbox-fg-dim);--navbar-link-hover-color: var(--gruvbox-fg);--navbar-link-hover-bg: var(--glass-bg-light);--navbar-link-active-color: var(--gruvbox-fg);--navbar-link-active-bg: var(--glass-bg);--shadow-card: var(--shadow-glass-md);--shadow-card-hover: var(--shadow-glass-lg);--shadow-sm: var(--shadow-glass-sm);--shadow-md: var(--shadow-glass-md);--shadow-lg: var(--shadow-glass-lg);--shadow-xl: var(--shadow-glass-xl);--radius-sm: 8px;--radius-md: 10px;--radius-lg: 12px;--radius-xl: 14px;--radius-2xl: 16px;--radius-3xl: 20px;--radius-full: 9999px}body{background:var(--gruvbox-bg);overflow-x:hidden}.particles-container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;pointer-events:none;overflow:hidden}.particles-container:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at 20% 30%,rgba(215,153,33,.08) 0%,transparent 50%),radial-gradient(ellipse at 80% 70%,rgba(131,165,152,.06) 0%,transparent 50%),radial-gradient(ellipse at 40% 80%,rgba(251,73,52,.05) 0%,transparent 40%),radial-gradient(ellipse at 60% 20%,rgba(184,187,38,.04) 0%,transparent 45%);animation:bgSlowPulse 20s ease-in-out infinite}@keyframes bgSlowPulse{0%,to{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}.particles-container:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(rgba(250,189,47,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(250,189,47,.03) 1px,transparent 1px);background-size:60px 60px;background-position:center center;opacity:.6}.particle{position:absolute;width:3px;height:3px;background:var(--gruvbox-yellow-light);border-radius:50%;opacity:.8;box-shadow:0 0 15px var(--gruvbox-yellow-light)}.particle.color-yellow{background:var(--gruvbox-yellow-light);box-shadow:0 0 15px var(--gruvbox-yellow-light)}.particle.color-aqua{background:var(--gruvbox-aqua-light);box-shadow:0 0 15px var(--gruvbox-aqua-light)}.particle.color-purple{background:var(--gruvbox-purple-light);box-shadow:0 0 15px var(--gruvbox-purple-light)}.particle-connection{position:absolute;height:1.5px;background:linear-gradient(90deg,transparent 0%,rgba(250,189,47,.2) 10%,rgba(250,189,47,.5) 50%,rgba(250,189,47,.2) 90%,transparent 100%);transform-origin:left center;pointer-events:none}.particle-connection.color-aqua{background:linear-gradient(90deg,transparent 0%,rgba(142,192,124,.2) 10%,rgba(142,192,124,.5) 50%,rgba(142,192,124,.2) 90%,transparent 100%)}.particle-connection.color-purple{background:linear-gradient(90deg,transparent 0%,rgba(211,134,155,.2) 10%,rgba(211,134,155,.5) 50%,rgba(211,134,155,.2) 90%,transparent 100%)}.noise-overlay{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999;opacity:.03;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E")}.noise-overlay-css{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999;opacity:.04;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px),radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px),radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px);background-size:3px 3px,5px 5px,7px 7px;background-position:0 0,1px 1px,2px 2px;animation:noiseShift .5s steps(4) infinite}@keyframes noiseShift{0%,to{background-position:0 0,1px 1px,2px 2px}25%{background-position:1px 0,0 1px,3px 1px}50%{background-position:0 1px,2px 0,1px 3px}75%{background-position:2px 1px,1px 2px,0 0}}.main-content{position:relative;background:transparent}.card,.service-card,.playbook-card,.file-card,.proxy-card,.tunnel-card,.server-card,.session-card,.port-card,.bento-card{position:relative;overflow:hidden;background:linear-gradient(135deg,#2d2d2d99,#2d2d2d66);-webkit-backdrop-filter:blur(.5px);backdrop-filter:blur(.5px)}.card:hover,.service-card:hover,.playbook-card:hover,.file-card:hover,.proxy-card:hover,.tunnel-card:hover,.server-card:hover,.session-card:hover,.port-card:hover,.bento-card:hover{background:linear-gradient(135deg,#2d2d2d99 100%,#2d2d2d66 0%);border-color:#ebdbb226;border-top-color:#ebdbb240;box-shadow:var(--shadow-glass-lg),inset 0 0 40px #ebdbb208;transform:translateY(-4px) scale(1.01);-webkit-backdrop-filter:blur(13px);backdrop-filter:blur(13px)}.navbar{background:var(--glass-bg-strong);backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));border-bottom:1px solid var(--glass-border-highlight);box-shadow:var(--shadow-glass-md)}.nav-brand{color:var(--gruvbox-orange-light);text-shadow:0 0 20px rgba(254,128,25,.4)}.nav-links a:hover,.nav-links a.router-link-active{background:var(--gradient-glass);border:1px solid var(--glass-border)}.btn{position:relative;overflow:hidden;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(250,189,47,.08) 50%,transparent 100%);transition:left .5s ease;pointer-events:none}.btn:hover:before{left:100%}.btn svg{width:18px;height:18px;flex-shrink:0}.btn-primary{background:linear-gradient(135deg,#fabd2fbf,#d79921b3);border:1px solid rgba(235,219,178,.15);box-shadow:0 4px 15px #fabd2f4d,inset 0 0 20px #ebdbb214;color:#1d2021;font-weight:600}.btn-primary:hover:not(:disabled){background:linear-gradient(135deg,#fabd2fe6,#d79921d9);box-shadow:0 6px 25px #fabd2f73,0 0 30px #fabd2f40,inset 0 0 30px #ebdbb21f;transform:translateY(-2px)}.btn-success{background:linear-gradient(135deg,#b8bb26bf,#98971ab3);border:1px solid rgba(235,219,178,.15);box-shadow:0 4px 15px #b8bb264d,inset 0 0 20px #ebdbb214;color:#1d2021;font-weight:600}.btn-success:hover:not(:disabled){background:linear-gradient(135deg,#b8bb26e6,#98971ad9);box-shadow:0 6px 25px #b8bb2673,0 0 30px #b8bb2640,inset 0 0 30px #ebdbb21f;transform:translateY(-2px)}.btn-danger{background:linear-gradient(135deg,#fb4934bf,#cc241db3);border:1px solid rgba(235,219,178,.15);box-shadow:0 4px 15px #fb49344d,inset 0 0 20px #ebdbb214}.btn-danger:hover:not(:disabled){background:linear-gradient(135deg,#fb4934e6,#cc241dd9);box-shadow:0 6px 25px #fb493473,0 0 30px #fb493440,inset 0 0 30px #ebdbb21f;transform:translateY(-2px)}.btn-info{background:linear-gradient(135deg,#83a598b3,#458588a6);border:1px solid rgba(235,219,178,.15);box-shadow:0 4px 15px #83a5984d,inset 0 0 20px #ebdbb214}.btn-info:hover:not(:disabled){background:linear-gradient(135deg,#83a598d9,#458588cc);box-shadow:0 6px 25px #83a59866,0 0 30px #83a59840,inset 0 0 30px #ebdbb21f;transform:translateY(-2px)}.btn-secondary{background:var(--glass-bg);border:1px solid var(--glass-border);color:var(--gruvbox-fg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.btn-secondary:hover:not(:disabled){background:var(--glass-bg-strong);border-color:var(--glass-border-highlight);box-shadow:var(--shadow-inner-glow);transform:translateY(-2px)}.btn-outline{background:transparent;border:1px solid var(--glass-border);color:var(--gruvbox-fg);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.btn-outline:hover:not(:disabled){background:var(--gradient-glass);border-color:var(--glass-border-highlight);box-shadow:var(--shadow-inner-glow);transform:translateY(-2px)}.btn-add,.btn-refresh,.btn-script,.btn-ports,.btn-upload{background:linear-gradient(135deg,#b8bb26bf,#83a598a6,#b8bb26bf);background-size:200% 200%;border:1px solid rgba(235,219,178,.15);animation:holoShift 3s ease infinite;color:#1d2021;font-weight:600}.btn-add:hover,.btn-refresh:hover,.btn-script:hover,.btn-ports:hover,.btn-upload:hover{background:linear-gradient(135deg,#b8bb26e6,#83a598cc,#b8bb26e6);background-size:200% 200%;box-shadow:0 6px 25px #b8bb2673,0 0 30px #b8bb2640;transform:translateY(-2px)}@keyframes holoShift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.btn-edit{background:linear-gradient(135deg,#83a598b3,#458588a6);border:1px solid rgba(235,219,178,.15)}.btn-edit:hover{background:linear-gradient(135deg,#83a598d9,#458588cc);box-shadow:0 6px 25px #83a59866,0 0 30px #83a59840;transform:translateY(-2px)}.btn-files{background:linear-gradient(135deg,#fabd2fbf,#d79921a6);border:1px solid rgba(235,219,178,.15);color:#1d2021;font-weight:600}.btn-files:hover{background:linear-gradient(135deg,#fabd2fe6,#d79921d9);box-shadow:0 6px 25px #fabd2f66,0 0 20px #fabd2f33;transform:translateY(-2px)}.btn-history{background:linear-gradient(135deg,#d79921b3,#b1628699);border:1px solid rgba(235,219,178,.15)}.btn-history:hover{background:linear-gradient(135deg,#d79921d9,#b16286cc);box-shadow:0 6px 25px #d7992166,0 0 30px #d7992140;transform:translateY(-2px)}.btn-copy{background:#83a598b3;color:#1d2021;border:1px solid rgba(235,219,178,.15);font-weight:600}.btn-copy:hover{background:#83a598d9;box-shadow:0 6px 25px #83a59866,0 0 20px #83a59840;transform:translateY(-2px)}.btn-logout{background:linear-gradient(135deg,#fb4934bf,#cc241da6);border:1px solid rgba(235,219,178,.15)}.btn-logout:hover{background:linear-gradient(135deg,#ff5555e6,#ff79c6cc);box-shadow:0 6px 25px #ff555580,0 0 30px #ff55554d;transform:translateY(-2px)}.btn:active:not(:disabled){transform:translateY(0) scale(.98)}.add-form,.form-group{background:var(--glass-bg-light);border:1px solid var(--glass-border);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur))}.add-form input[type=text],.add-form input[type=password],.add-form input:not([type]),.add-form select,.add-form textarea,.form-group input[type=text],.form-group input[type=password],.form-group input:not([type]),.form-group select,.form-group textarea{background:var(--bg-input);border:1px solid var(--glass-border);color:var(--gruvbox-fg)}.add-form input:focus,.form-group input:focus,.add-form select:focus,.form-group select:focus,.add-form textarea:focus,.form-group textarea:focus{border-color:var(--gruvbox-purple);box-shadow:0 0 0 2px #bd93f933}.modal-overlay,.stats-modal{background:#191a21d9;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.modal,.stats-content{background:var(--glass-bg-strong);backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));border:1px solid var(--glass-border-highlight);box-shadow:var(--shadow-glass-xl)}.badge-success{background:#b8bb2626;color:var(--gruvbox-green-light);border:1px solid rgba(184,187,38,.3)}.badge-danger{background:#fb493426;color:var(--gruvbox-red-light);border:1px solid rgba(251,73,52,.3)}.badge-warning{background:#fabd2f26;color:var(--gruvbox-yellow-light);border:1px solid rgba(250,189,47,.3)}.badge-info{background:#83a59826;color:var(--gruvbox-blue-light);border:1px solid rgba(131,165,152,.3)}.badge-ssh{background:#d7992126;color:var(--gruvbox-yellow-light);border:1px solid rgba(215,153,33,.3)}.badge-rs{background:#fb493426;color:var(--gruvbox-red-light);border:1px solid rgba(251,73,52,.3)}.badge-active{background:#b8bb2633;color:var(--gruvbox-green-light);border:1px solid rgba(184,187,38,.4)}.badge-inactive{background:#92837433;color:var(--gruvbox-comment);border:1px solid rgba(146,131,116,.3)}.status-dot.green,.status-dot.up{background:var(--gruvbox-green-light);box-shadow:0 0 8px var(--gruvbox-green-light)}.status-dot.red,.status-dot.down{background:var(--gruvbox-red-light);box-shadow:0 0 8px var(--gruvbox-red-light)}.connected{color:var(--gruvbox-green-light);text-shadow:0 0 8px rgba(184,187,38,.4)}.disconnected{color:var(--gruvbox-comment)}.check-item,.port-detail{background:var(--glass-bg-light);border:1px solid var(--glass-border)}.error{background:#ff55551a;color:var(--gruvbox-red-light);border:1px solid rgba(255,85,85,.3)}.error-small{background:#ff55551a;color:var(--gruvbox-red-light);border:1px solid rgba(255,85,85,.2)}.loading{color:var(--gruvbox-aqua)}::-webkit-scrollbar-track{background:var(--gruvbox-bg)}::-webkit-scrollbar-thumb{background:var(--gruvbox-bg-light);border-radius:5px;border:2px solid var(--gruvbox-bg)}::-webkit-scrollbar-thumb:hover{background:var(--gruvbox-comment)}a{color:var(--gruvbox-aqua)}a:hover{color:var(--gruvbox-aqua-light)}code,pre{background:var(--gruvbox-bg-dark);border:1px solid var(--glass-border);color:var(--gruvbox-fg)}@keyframes glassPulse{0%,to{box-shadow:var(--shadow-glass-md)}50%{box-shadow:var(--shadow-glass-lg),var(--shadow-glow-purple)}}@keyframes glowPulse{0%,to{text-shadow:0 0 10px rgba(255,121,198,.3)}50%{text-shadow:0 0 20px rgba(255,121,198,.6)}}.nav-brand{animation:glowPulse 3s ease-in-out infinite}.card:hover{animation:glassPulse 1.5s ease-in-out}.icon{width:20px;height:20px;flex-shrink:0}.icon-sm{width:16px;height:16px}.icon-lg{width:24px;height:24px}.icon-xl{width:32px;height:32px}.icon-glow{filter:drop-shadow(0 0 8px currentColor)}.icon-spin{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.icon-pulse{animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.1)}}.add-form,.form-group{background:var(--glass-bg-light);border:1px solid var(--glass-border);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border-radius:var(--radius-xl)}.add-form input[type=text],.add-form input[type=password],.add-form input:not([type]),.add-form select,.add-form textarea,.form-group input[type=text],.form-group input[type=password],.form-group input:not([type]),.form-group select,.form-group textarea{background:var(--bg-input);border:1px solid var(--glass-border);color:var(--gruvbox-fg);border-radius:var(--radius-lg);transition:all var(--transition-normal)}.add-form input:focus,.form-group input:focus,.add-form select:focus,.form-group select:focus,.add-form textarea:focus,.form-group textarea:focus{border-color:var(--gruvbox-purple);box-shadow:0 0 0 2px #bd93f933,0 0 20px #bd93f91a;outline:none}.add-form input:hover,.form-group input:hover,.add-form select:hover,.form-group select:hover,.add-form textarea:hover,.form-group textarea:hover{border-color:var(--glass-border-highlight)}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--gruvbox-bg);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--gruvbox-purple),var(--gruvbox-purple));border-radius:var(--radius-full);border:2px solid var(--gruvbox-bg)}::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--gruvbox-purple-light),var(--gruvbox-purple-light))}::-webkit-scrollbar-corner{background:var(--gruvbox-bg)}::selection{background:var(--gruvbox-purple);color:var(--gruvbox-fg)}::-moz-selection{background:var(--gruvbox-purple);color:var(--gruvbox-fg)}a{color:var(--gruvbox-aqua);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--gruvbox-aqua-light);text-shadow:0 0 10px rgba(139,233,253,.5)}code,pre{background:var(--gruvbox-bg-dark);border:1px solid var(--glass-border);color:var(--gruvbox-fg);border-radius:var(--radius-lg);font-family:JetBrains Mono,Fira Code,Consolas,monospace}table{border-collapse:separate;border-spacing:0}th{background:var(--glass-bg-strong);border-bottom:1px solid var(--glass-border-highlight);color:var(--gruvbox-fg);font-weight:var(--font-weight-semibold)}td{border-bottom:1px solid var(--glass-border);color:var(--text-secondary)}tr:hover td{background:var(--glass-bg-light)}.spinner{width:40px;height:40px;border:3px solid var(--glass-border);border-top-color:var(--gruvbox-purple);border-radius:50%;animation:spin .8s linear infinite}.spinner-sm{width:24px;height:24px;border-width:2px}.spinner-lg{width:60px;height:60px;border-width:4px}.navbar{background:var(--glass-bg-strong);backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));margin:var(--spacing-4) var(--spacing-8);padding:0 var(--spacing-4);display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--glass-border-highlight);box-shadow:var(--shadow-glass-md);position:fixed;bottom:var(--spacing-4);left:var(--spacing-8);right:var(--spacing-8);z-index:var(--z-sticky);border-radius:40px}.nav-brand{display:flex;align-items:center;gap:var(--spacing-3);font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--gruvbox-fg-dim);text-shadow:var(--shadow-glow-yellow)}.nav-brand-icon{width:28px;height:28px;color:var(--dracula-pink);filter:drop-shadow(0 0 8px rgba(255,121,198,.6))}.nav-links{display:flex;gap:var(--spacing-2);align-items:center;position:relative}.nav-links-wrapper{position:relative;display:flex;align-items:center}.nav-link{display:flex;align-items:center;gap:var(--spacing-2);color:var(--navbar-link-color);text-decoration:none;padding:var(--spacing-2) var(--spacing-3);border-radius:var(--radius-lg);transition:all var(--transition-normal);font-weight:var(--font-weight-medium);border:1px solid transparent;position:relative;overflow:hidden}.nav-link:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--gradient-glass);opacity:0;transition:opacity var(--transition-normal)}.nav-link:hover:before,.nav-link.router-link-active:before{opacity:1}.nav-icon{width:18px;height:18px;position:relative;z-index:1;color:var(--gruvbox-fg)}.nav-link:hover .nav-icon{color:var(--gruvbox-fg-dim)}.nav-link span{position:relative;z-index:1}.nav-link:hover,.nav-link.router-link-active{color:var(--navbar-link-active-color);background:var(--glass-bg-light);border-color:var(--glass-border);box-shadow:var(--shadow-inner-glow)}.nav-link.router-link-active{border-color:var(--glass-border-highlight)}.nav-link.router-link-active .nav-icon{color:var(--dracula-pink);filter:drop-shadow(0 0 6px rgba(255,121,198,.5))}.btn-logout{display:flex;align-items:center;gap:var(--spacing-2);background:none;color:#fff;border:1px solid rgba(255,255,255,.2);padding:var(--spacing-2) var(--spacing-4);border-radius:var(--radius-lg);cursor:pointer;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);transition:all var(--transition-normal);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--dracula-red);border-color:none;box-shadow:none;border:none}.btn-logout:hover{background:none;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);box-shadow:0 6px 25px #ff555580,0 0 30px #ff55554d;transform:translateY(-2px)}.btn-logout .nav-icon{width:18px;height:18px}.btn-logout-text{white-space:nowrap}.nav-cursor-line{position:absolute;bottom:-8px;height:3px;background:var(--gruvbox-yellow-light);border-radius:2px;opacity:0;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 0 10px var(--gruvbox-yellow-light),0 0 20px var(--gruvbox-yellow-light);animation:cursorBlink 2s ease-in-out infinite;pointer-events:none}@keyframes cursorBlink{0%,to{opacity:1}50%{opacity:.5}}.main-content{min-height:100vh;padding:var(--spacing-6);padding-bottom:100px;position:relative}.main-content:has(.full-page){padding:0;height:calc(100vh - var(--navbar-height));overflow:hidden}