.app-layout{flex-direction:column;min-height:100vh;display:flex}.app-header{z-index:var(--z-sticky);background:var(--glass-bg);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--glass-border);position:sticky;top:0}.header-inner{justify-content:space-between;align-items:center;gap:var(--space-3);height:60px;display:flex}.header-left{align-items:center;gap:var(--space-3);display:flex}.brand-link{color:var(--color-text);align-items:center;gap:10px;display:flex;text-decoration:none!important}.brand-glow{background:linear-gradient(90deg,#6366f1,#06b6d4);border-radius:.5em;padding:2px;display:inline-block}.brand-btn{color:#fff;width:32px;height:32px;font-size:1.1em;font-weight:800;font-family:var(--font-family);background:#000;border:none;border-radius:.35em;justify-content:center;align-items:center;display:flex}.brand-text{flex-direction:column;line-height:1.2;display:flex}.brand-name{font-weight:800;font-size:var(--text-base);background:linear-gradient(135deg, var(--color-primary), var(--color-secondary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.brand-by{color:var(--color-text-muted);letter-spacing:1px;text-transform:uppercase;font-size:10px;font-weight:500}.desktop-nav{align-items:center;gap:2px;display:none}@media (width>=900px){.desktop-nav{display:flex}}.nav-link{border-radius:var(--radius-md);color:var(--color-text-secondary);font-size:var(--text-xs);transition:all var(--transition-fast);white-space:nowrap;align-items:center;gap:5px;padding:6px 10px;font-weight:500;display:flex;text-decoration:none!important}.nav-link:hover{background:var(--color-primary-light);color:var(--color-text)}.nav-link.active{background:var(--color-primary-light);color:var(--color-primary);font-weight:600}.nav-icon{font-size:14px;line-height:1}.nav-label{line-height:1}.header-right{align-items:center;gap:var(--space-3);display:flex}.live-indicator{border-radius:var(--radius-full);letter-spacing:1px;text-transform:uppercase;color:var(--color-text-muted);border:1px solid #64748b4d;align-items:center;gap:6px;padding:4px 12px;font-size:10px;font-weight:700;display:flex}.live-indicator.connected{color:var(--color-success);border-color:#10b9814d}.live-text{line-height:1}.mobile-menu-btn{cursor:pointer;color:var(--color-text);background:0 0;border:none;justify-content:center;align-items:center;padding:8px;display:flex}@media (width>=900px){.mobile-menu-btn{display:none}}.hamburger{flex-direction:column;gap:4px;width:20px;display:flex}.hamburger span{background:var(--color-text);width:100%;height:2px;transition:all var(--transition-fast);border-radius:2px;display:block}.hamburger.open span:first-child{transform:rotate(45deg)translate(4px,4px)}.hamburger.open span:nth-child(2){opacity:0}.hamburger.open span:nth-child(3){transform:rotate(-45deg)translate(4px,-4px)}.mobile-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:calc(var(--z-modal) + 10);background:#020617cc;animation:.2s fadeIn;position:fixed;inset:0}.mobile-nav{background:var(--bg-base);border-right:1px solid var(--glass-border);width:280px;padding:var(--space-4);animation:.25s slideDown;position:fixed;top:0;bottom:0;left:0;overflow-y:auto}.mobile-nav-header{margin-bottom:var(--space-6);padding-bottom:var(--space-4);border-bottom:1px solid var(--glass-border);justify-content:space-between;align-items:center;display:flex}.mobile-close-btn{color:var(--color-text-muted);font-size:var(--text-xl);cursor:pointer;background:0 0;border:none;padding:4px}.mobile-close-btn:hover{color:var(--color-text)}.mobile-nav-link{align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);color:var(--color-text-secondary);font-size:var(--text-sm);transition:all var(--transition-fast);margin-bottom:2px;font-weight:500;display:flex;text-decoration:none!important}.mobile-nav-link:hover{background:var(--color-primary-light);color:var(--color-text)}.mobile-nav-link.active{background:var(--color-primary-light);color:var(--color-primary);font-weight:600}:root{--color-primary:#6366f1;--color-primary-hover:#4f46e5;--color-primary-light:#6366f126;--color-secondary:#06b6d4;--color-accent:#f59e0b;--color-success:#10b981;--color-danger:#ef4444;--color-warning:#f59e0b;--color-info:#3b82f6;--glass-bg:#0f172abf;--glass-bg-light:#1e293b99;--glass-bg-medium:#0f172ad9;--glass-border:#6366f133;--glass-border-hover:#6366f166;--glass-shadow:0 8px 32px #0000004d;--color-text:#e2e8f0;--color-text-secondary:#94a3b8;--color-text-muted:#64748b;--color-text-inverse:#0f172a;--bg-base:#020617;--bg-card:#0f172acc;--bg-input:#1e293b99;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono:"JetBrains Mono", "Fira Code", monospace;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:1.875rem;--text-4xl:2.25rem;--radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-2xl:1.25rem;--radius-full:9999px;--transition-fast:.15s ease;--transition-base:.2s ease;--transition-slow:.3s ease;--z-dropdown:100;--z-sticky:200;--z-modal:300;--z-toast:400;--chart-cyan:#22d3ee;--chart-purple:#818cf8;--chart-green:#22c55e;--chart-red:#ef4444;--chart-yellow:#eab308;--chart-orange:#f97316;--chart-pink:#ec4899}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;font-size:16px}body{font-family:var(--font-family);background:var(--bg-base);color:var(--color-text);-webkit-font-smoothing:antialiased;background-image:radial-gradient(at 20%,#6366f10d 0%,#0000 50%),radial-gradient(at 80%,#06b6d40d 0%,#0000 50%);min-height:100vh;line-height:1.6;overflow-x:hidden}#root{flex-direction:column;min-height:100vh;display:flex}a{color:var(--color-primary);transition:color var(--transition-fast);text-decoration:none}a:hover{color:var(--color-primary-hover)}.container{width:100%;max-width:1280px;padding:0 var(--space-4);margin:0 auto}.glass-header{background:var(--glass-bg);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--glass-border);z-index:var(--z-sticky);position:sticky;top:0}.glass-card{background:var(--glass-bg-light);-webkit-backdrop-filter:blur(8px);border:1px solid var(--glass-border);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--glass-shadow);transition:all var(--transition-base)}.glass-card:hover{border-color:var(--glass-border-hover);transform:translateY(-1px)}.glass-footer{background:var(--glass-bg);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--glass-border);padding:var(--space-8) var(--space-4);text-align:center;color:var(--color-text-muted);font-size:var(--text-sm);margin-top:auto}.gradient-text{background:linear-gradient(135deg, var(--color-primary), var(--color-secondary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.gradient-text-accent{background:linear-gradient(135deg, var(--color-primary), var(--color-secondary), var(--color-accent));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.glow{box-shadow:0 0 20px var(--color-primary-light)}.glow-success{box-shadow:0 0 20px #10b98133}.glow-danger{box-shadow:0 0 20px #ef444433}.glow-cyan{box-shadow:0 0 20px #22d3ee26}.status-dot{border-radius:var(--radius-full);width:10px;height:10px;margin-right:var(--space-2);display:inline-block}.status-dot.ok{background:var(--color-success);box-shadow:0 0 6px var(--color-success)}.status-dot.error{background:var(--color-danger);box-shadow:0 0 6px var(--color-danger)}.status-dot.warning{background:var(--color-warning);box-shadow:0 0 6px var(--color-warning)}.status-dot.info{background:var(--color-info);box-shadow:0 0 6px var(--color-info)}.glass-btn{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-5);border-radius:var(--radius-md);font-size:var(--text-sm);cursor:pointer;border:1px solid var(--glass-border);background:var(--glass-bg-light);color:var(--color-text);transition:all var(--transition-fast);font-weight:500;font-family:var(--font-family);white-space:nowrap;text-decoration:none;display:inline-flex}.glass-btn:hover{background:var(--color-primary-light);border-color:var(--color-primary);color:var(--color-primary);text-decoration:none;transform:translateY(-1px)}.glass-btn.primary{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.glass-btn.primary:hover{background:var(--color-primary-hover);opacity:.95}.glass-btn.success{background:var(--color-success);border-color:var(--color-success);color:#fff}.glass-btn.success:hover{background:#059669}.glass-btn.danger{border-color:var(--color-danger);color:var(--color-danger)}.glass-btn.danger:hover{background:#ef444426}.glass-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.glass-btn-sm{padding:var(--space-1) var(--space-3);font-size:var(--text-xs)}.badge{padding:2px var(--space-2);border-radius:var(--radius-full);font-size:var(--text-xs);border:1px solid var(--glass-border);align-items:center;font-weight:500;display:inline-flex}.badge.primary{background:var(--color-primary-light);color:var(--color-primary);border-color:#0000}.badge.success{color:var(--color-success);background:#10b98126}.badge.danger{color:var(--color-danger);background:#ef444426}.badge.warning{color:var(--color-warning);background:#f59e0b26}.badge.info{color:var(--color-info);background:#3b82f626}.grid{gap:var(--space-4);display:grid}.grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:1fr 1fr 1fr}.grid-4{grid-template-columns:1fr 1fr 1fr 1fr}.spinner{border:3px solid var(--glass-border);border-top-color:var(--color-primary);border-radius:50%;width:24px;height:24px;animation:.6s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.loading-state{padding:var(--space-12);color:var(--color-text-muted);justify-content:center;align-items:center;gap:var(--space-4);flex-direction:column;display:flex}.empty-state{text-align:center;padding:var(--space-10);color:var(--color-text-muted)}.empty-state .icon{margin-bottom:var(--space-4);opacity:.5;font-size:3rem}.empty-state h3{font-size:var(--text-lg);margin-bottom:var(--space-2);color:var(--color-text-secondary)}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes slideIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:.3s forwards fadeIn}.animate-slide-down{animation:.3s forwards slideDown}.page-body{padding:var(--space-6) 0;flex:1}.page-title{font-size:var(--text-2xl);margin-bottom:var(--space-2);font-weight:700}.page-subtitle{font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-6)}.toolbar{gap:var(--space-3);margin-bottom:var(--space-4);flex-wrap:wrap;align-items:center;display:flex}.toolbar-spacer{flex:1}.live-dot{border-radius:50%;width:8px;height:8px;animation:2s infinite pulse;display:inline-block}.live-dot.on{background:var(--color-success);box-shadow:0 0 8px #10b98180}.live-dot.off{background:var(--color-text-muted);animation:none}.glass-table{border-collapse:collapse;width:100%}.glass-table th{text-align:left;padding:var(--space-3) var(--space-4);font-size:var(--text-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--glass-border);font-weight:600}.glass-table td{padding:var(--space-3) var(--space-4);font-size:var(--text-sm);border-bottom:1px solid #6366f114}.glass-table tr:hover td{background:var(--color-primary-light)}.glass-table .no-hover:hover td{background:0 0}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--glass-border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--glass-border-hover)}@media (width<=1024px){.grid-4{grid-template-columns:1fr 1fr}}@media (width<=768px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.container{padding:0 var(--space-3)}.page-body{padding:var(--space-4) 0}.page-title{font-size:var(--text-xl)}.glass-card{padding:var(--space-4)}.glass-table thead{display:none}.glass-table tr{padding:var(--space-3);border-bottom:1px solid var(--glass-border);display:block}.glass-table td{padding:var(--space-2) 0;border:none;justify-content:space-between;display:flex}.glass-table td:before{content:attr(data-label);color:var(--color-text-muted);font-weight:600;font-size:var(--text-xs);flex:1}}@media (width<=480px){html{font-size:15px}.glass-btn{padding:var(--space-2) var(--space-3);font-size:var(--text-xs)}}