.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(6px);z-index:calc(var(--z-modal) + 10);-webkit-tap-highlight-color:transparent;touch-action:pan-y;background:#020617d9;animation:.2s fadeIn;position:fixed;inset:0}.mobile-nav{background:linear-gradient(180deg, var(--bg-base) 0%, #0a0f2a 100%);border-right:1px solid var(--glass-border);width:290px;max-width:85vw;padding:var(--space-4);padding-top:env(safe-area-inset-top,var(--space-4));-webkit-overflow-scrolling:touch;overscroll-behavior:contain;animation:.3s cubic-bezier(.16,1,.3,1) slideInLeft;position:fixed;top:0;bottom:0;left:0;overflow:hidden auto;box-shadow:5px 0 30px #6366f11a}.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)}@keyframes slideInLeft{0%{opacity:0;transform:translate(-16px)}to{opacity:1;transform:translate(0)}}.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);-webkit-tap-highlight-color:transparent;touch-action:manipulation;min-height:44px;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:#6366f140;transform:scale(.98)}.mobile-nav-link.active{background:linear-gradient(135deg, var(--color-primary-light), #06b6d41a);color:var(--color-primary);border-left:3px solid var(--color-primary);padding-left:calc(var(--space-4) - 3px);font-weight:600}:root{--color-primary:#6366f1;--color-primary-hover:#4f46e5;--color-primary-glow:#6366f166;--color-primary-light:#6366f126;--color-secondary:#06b6d4;--color-accent:#f59e0b;--color-success:#10b981;--color-success-light:#10b98133;--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 #0006;--glow-blue:0 0 15px #6366f140, 0 0 30px #6366f11a;--glow-blue-strong:0 0 20px #6366f159, 0 0 40px #6366f126;--color-text:#f1f5f9;--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;--font-num:"JetBrains Mono", "Fira Code", monospace;--text-xs:.7rem;--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%;-moz-text-size-adjust:100%;-ms-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;-moz-osx-font-smoothing:grayscale;background-image:radial-gradient(at 20%,#6366f10d 0%,#0000 50%),radial-gradient(at 80%,#06b6d40d 0%,#0000 50%);background-attachment:fixed;min-height:100vh;line-height:1.6;overflow-x:hidden}.tabular-nums,.stat-value,.glass-table td[data-label*=P\&L],.glass-table td[data-label*=Price],.glass-table td[data-label*=Volume],.glass-table td[data-label*=Size],.price-value,.pnl-value{font-family:var(--font-num);font-variant-numeric:tabular-nums;letter-spacing:-.02em}.profit-text{color:var(--color-success)!important}.loss-text{color:var(--color-danger)!important}::selection{background:var(--color-primary-light);color:var(--color-text)}#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{-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), var(--glow-blue);transition:all var(--transition-base);background:linear-gradient(135deg,#0f172acc,#171f37b3)}.glass-card:hover{border-color:var(--glass-border-hover);box-shadow:var(--glass-shadow), var(--glow-blue-strong);transform:translateY(-2px)scale(1.005)}.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}.badge{border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.05em;background:var(--glass-bg-light);color:var(--color-text-secondary);border:1px solid var(--glass-border);align-items:center;gap:4px;padding:3px 10px;font-size:10px;font-weight:700;display:inline-flex}.badge.primary{background:var(--color-primary-light);color:var(--color-primary);border-color:#6366f14d}.badge.success{color:var(--color-success);background:#10b98126;border-color:#10b9814d}.badge.danger{color:var(--color-danger);background:#ef444426;border-color:#ef44444d}.badge.warning{color:var(--color-warning);background:#f59e0b26;border-color:#f59e0b4d}.badge.info{color:var(--color-info);background:#3b82f626;border-color:#3b82f64d}.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), 0 0 40px #6366f114}.glow-success{box-shadow:0 0 20px #10b98133}.glow-danger{box-shadow:0 0 20px #ef444433}.glow-blue{box-shadow:var(--glow-blue)}.glow-blue-strong{box-shadow:var(--glow-blue-strong)}.glass-btn{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border:1px solid var(--glass-border);border-radius:var(--radius-md);color:var(--color-text-secondary);font-size:var(--text-sm);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;background:linear-gradient(135deg,#0f172ab3,#171f3799);font-family:inherit;font-weight:500;line-height:1.4;display:inline-flex;box-shadow:0 0 8px #6366f11a;text-decoration:none!important}.glass-btn:hover{background:var(--color-primary-light);border-color:var(--glass-border-hover);color:var(--color-text);box-shadow:0 0 15px #6366f140}.glass-btn:active{transform:scale(.97)}.glass-btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important}.glass-btn.primary{background:var(--color-primary);border-color:var(--color-primary);color:#fff;font-weight:700;box-shadow:0 0 20px #6366f14d}.glass-btn.primary:hover{background:var(--color-primary-hover);box-shadow:0 0 30px #6366f166}.glass-btn.success{background:var(--color-success);border-color:var(--color-success);color:#fff;box-shadow:0 0 20px #10b9814d}.glass-btn.success:hover{box-shadow:0 0 30px #10b98166}.glass-btn.danger{background:var(--color-danger);border-color:var(--color-danger);color:#fff;box-shadow:0 0 20px #ef44444d}.glass-btn-sm{padding:var(--space-1) var(--space-3);font-size:var(--text-xs)}.stat-card{text-align:center;padding:var(--space-6);position:relative;overflow:hidden}.stat-card:before{content:"";pointer-events:none;background:radial-gradient(circle,#6366f108,#0000 60%);width:200%;height:200%;position:absolute;top:-50%;left:-50%}.stat-card .stat-value{font-family:var(--font-num);font-variant-numeric:tabular-nums;letter-spacing:-.04em;margin-bottom:var(--space-1);text-shadow:0 0 20px;font-weight:800;line-height:1.1}.stat-card .stat-label{font-size:var(--text-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:1.5px;font-weight:600}.status-dot{border-radius:50%;width:8px;height:8px;display:inline-block}.status-dot.info{background:var(--color-info);box-shadow:0 0 8px #3b82f680}.status-dot.success{background:var(--color-success);box-shadow:0 0 8px #10b98180}.status-dot.warning{background:var(--color-warning);box-shadow:0 0 8px #f59e0b80}.status-dot.danger{background:var(--color-danger);box-shadow:0 0 8px #ef444480}.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 #6366f126;border-top-color:var(--color-primary);border-right-color:var(--color-secondary);border-radius:50%;width:28px;height:28px;animation:.6s linear infinite spin;display:inline-block;box-shadow:0 0 15px #6366f126}@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}.loading-state .spinner{margin-bottom:var(--space-2)}.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);background:linear-gradient(135deg, var(--color-text) 30%, var(--color-primary) 70%, var(--color-secondary));-webkit-text-fill-color:transparent;letter-spacing:-.03em;-webkit-background-clip:text;background-clip:text;font-weight:800}.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>*{margin-bottom:0}.toolbar-spacer{flex:1}.toolbar .glass-btn{font-size:var(--text-xs);padding:var(--space-1) var(--space-3)}.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 thead{background:#6366f108}.glass-table th{text-align:left;padding:var(--space-3) var(--space-4);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--glass-border);white-space:nowrap;font-size:10px;font-weight:600}.glass-table td{padding:var(--space-3) var(--space-4);font-size:var(--text-sm);vertical-align:middle;border-bottom:1px solid #6366f10f}.glass-table tr:hover td{background:var(--color-primary-light)}.glass-table tbody tr{transition:background var(--transition-fast)}.glass-table .no-hover:hover td{background:0 0}.glass-table td:first-child{font-weight:500}::-webkit-scrollbar{background:0 0;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<=1100px){.grid-4{grid-template-columns:repeat(2,1fr)}}@media (width<=900px){.grid-3{grid-template-columns:repeat(2,1fr)}.page-title{font-size:var(--text-xl)}}@media (width<=768px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.container{padding:0 var(--space-3)}.page-body{padding:var(--space-3) 0}.page-title{font-size:var(--text-lg)}.glass-card{padding:var(--space-4)}.glass-card.stat-card{padding:var(--space-3)}.stat-card .stat-value{font-size:var(--text-2xl)!important}.glass-table thead{display:none}.glass-table tr{padding:var(--space-3);margin-bottom:var(--space-2);border:1px solid var(--glass-border);border-radius:var(--radius-md);background:#0f172a66;display:block}.glass-table td{padding:var(--space-2) 0;border:none;justify-content:space-between;align-items:center;display:flex}.glass-table td:before{content:attr(data-label);color:var(--color-text-muted);font-weight:600;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.05em}}@media (width<=480px){html{font-size:15px}.glass-btn{padding:var(--space-2) var(--space-3);font-size:var(--text-xs)}}@media print{.app-header,.glass-footer,.mobile-menu-btn{display:none}.glass-card{break-inside:avoid;box-shadow:none;border:1px solid #ccc}}.metric-card{align-items:center;gap:var(--space-4);padding:var(--space-4);display:flex}.metric-card .metric-icon{border-radius:var(--radius-md);background:var(--color-primary-light);border:1px solid var(--glass-border);flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-size:1.2rem;display:flex}.metric-card .metric-content{flex:1;min-width:0}.metric-card .metric-value{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:var(--text-base);font-weight:700;line-height:1.2}.metric-card .metric-label{font-size:var(--text-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;margin-top:2px;font-weight:600}.metric-card .metric-change{font-size:var(--text-xs);margin-top:2px;font-weight:600}.sparkline-container{width:100%;height:48px;margin-top:var(--space-2)}.sparkline-container svg{width:100%;height:100%}.status-bar{align-items:center;gap:var(--space-2);font-size:var(--text-xs);color:var(--color-text-muted);display:flex}.status-bar .status-dot-sm{border-radius:50%;width:6px;height:6px;display:inline-block}.status-bar .status-dot-sm.green{background:var(--color-success);box-shadow:0 0 6px #10b98166}.status-bar .status-dot-sm.yellow{background:var(--color-warning);box-shadow:0 0 6px #f59e0b66}.status-bar .status-dot-sm.red{background:var(--color-danger);box-shadow:0 0 6px #ef444466}.section-divider{align-items:center;gap:var(--space-3);margin:var(--space-4) 0;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.1em;font-size:10px;font-weight:700;display:flex}.section-divider:after{content:"";background:linear-gradient(90deg, var(--glass-border), transparent);flex:1;height:1px}@keyframes flash-green{0%{background-color:#10b98100}30%{background-color:#10b98140}70%{background-color:#10b98126}to{background-color:#10b98100}}@keyframes flash-red{0%{background-color:#ef444400}30%{background-color:#ef444440}70%{background-color:#ef444426}to{background-color:#ef444400}}.price-flash-green{border-radius:var(--radius-sm);animation:1.2s ease-out flash-green}.price-flash-red{border-radius:var(--radius-sm);animation:1.2s ease-out flash-red}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.skeleton{background:linear-gradient(90deg, var(--glass-bg-light) 25%, #6366f11a 50%, var(--glass-bg-light) 75%);border-radius:var(--radius-sm);background-size:200% 100%;animation:1.5s infinite shimmer}.skeleton-text{width:100%;height:14px;margin-bottom:8px}.skeleton-text-sm{width:60%;height:10px;margin-bottom:6px}.skeleton-stat{width:80px;height:48px;margin:0 auto}.skeleton-avatar{border-radius:50%;width:40px;height:40px}.skeleton-card{width:100%;height:120px}.skeleton-row{padding:var(--space-3) var(--space-4);gap:var(--space-4);display:flex}.skeleton-row .skeleton-cell{flex:1;height:16px}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.3)}}.pulse-dot{animation:2s ease-in-out infinite pulse-dot}.glow-border{position:relative}.glow-border:after{content:"";border-radius:inherit;-webkit-mask-composite:xor;pointer-events:none;background:linear-gradient(135deg,#6366f180,#06b6d44d) border-box;border:1px solid #0000;position:absolute;inset:-1px;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:padding-box,border-box;mask-clip:padding-box,border-box;-webkit-mask-origin:padding-box,border-box;mask-origin:padding-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}@keyframes countUp{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.count-up{animation:.4s forwards countUp}.slide-in-left{animation:.35s forwards slideInLeft}