:root{--bg-0:#06080c;--bg-1:#0a0f14;--bg-2:#0f151c;--bg-3:#131b23;--panel:#0f151c94;--panel-strong:#0a0f15c2;--line:#ffffff14;--line-strong:#ffffff24;--text-1:#eef6fb;--text-2:#adc0cf;--text-3:#72869a;--accent:#20e3d9;--accent-glow:#20e3d93d}*{box-sizing:border-box}#root,body,html{background:#05080c;color:#eef6fb;font-family:Inter,Arial,sans-serif;margin:0;min-height:100%}body{overflow-x:hidden}body:before{background:linear-gradient(hsla(0,0%,100%,.015) 1px,#0000 0),linear-gradient(90deg,hsla(0,0%,100%,.015) 1px,#0000 0);background-size:36px 36px;content:"";inset:0;-webkit-mask-image:radial-gradient(circle at center,#000 42%,#0000 100%);mask-image:radial-gradient(circle at center,#000 42%,#0000 100%);opacity:.28;pointer-events:none;position:fixed}.app{background:radial-gradient(circle at 12% 8%,#20e3d91f,#0000 24%),radial-gradient(circle at 88% 8%,#00b2ff1a,#0000 22%),radial-gradient(circle at 50% 100%,#20e3d912,#0000 34%),linear-gradient(180deg,#05070a,#0b1016 46%,#070a0e);min-height:100vh}.topbar{align-items:center;backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);background:linear-gradient(180deg,#0e141cc7,#080c12db);border-bottom:1px solid #ffffff14;display:flex;gap:20px;justify-content:space-between;padding:18px 22px}.brand{font-size:20px;font-weight:800;letter-spacing:1.4px}.sub{color:#adc0cf;font-size:13px;margin-top:5px}.controls{align-items:center;display:flex;flex-wrap:wrap;gap:12px}.searchInput,select{background:#0e141c9e;border:1px solid #ffffff14;border-radius:10px;color:#f2f6ff;height:40px;min-width:130px;outline:none;padding:0 12px}.searchInput{min-width:170px}.status{align-items:center;border:1px solid #ffffff14;border-radius:999px;display:inline-flex;font-size:13px;font-weight:700;height:40px;letter-spacing:.6px;padding:0 12px;text-transform:uppercase}.status.live{background:#00d2961f;color:#8dffd5}.status.loading{background:#ffc4001a;color:#ffe28d}.status.disconnected,.status.error{background:#ff465a1f;color:#ff9cad}.error{background:#ff465a1a;border:1px solid #ff465a40;border-radius:12px;color:#ffc5ce;margin:16px 22px 0;padding:12px 14px}.content{grid-gap:18px;display:grid;gap:18px;grid-template-columns:minmax(0,1fr) 390px;padding:18px 22px 22px}.chartCard,.sideCard{background:linear-gradient(180deg,#131c26c7,#080c12b8);border:1px solid #ffffff12;border-radius:22px;box-shadow:0 16px 40px #00000061,inset 0 1px 0 #ffffff1a,inset 0 -1px 0 #ffffff08}.chartCard{padding:14px 14px 10px}.sideCard{padding:16px}.chartHeader{align-items:flex-end;display:flex;gap:12px;justify-content:space-between;padding:6px 6px 14px}.chartTitle{font-size:24px;font-weight:800}.chartMeta{color:#adc0cf;font-size:13px}.chartWrap{border-radius:14px;min-height:720px;overflow:hidden;width:100%}.panelTitle{font-size:16px;font-weight:800;margin-bottom:10px;margin-top:18px}.panelTitle:first-child{margin-top:0}.miniList{display:flex;flex-direction:column;gap:10px}.miniRow{grid-gap:10px;background:#0f151c8a;border:1px solid #ffffff0f;border-radius:12px;display:grid;gap:10px;grid-template-columns:1fr auto;padding:11px 12px}@media (max-width:1200px){.content{grid-template-columns:1fr}.chartWrap{min-height:620px}}@media (max-width:760px){.topbar{align-items:stretch;flex-direction:column}.controls{justify-content:space-between}.chartWrap{min-height:520px}}#root,body,html{height:100%}.main-content{display:flex;height:calc(100vh - 80px);min-height:0}.chart-area,.chart-panel,.chart-root,.chart-section,.chart-wrapper{flex:1 1 auto;height:calc(100vh - 140px);min-height:600px;position:relative}.chart,.chart-container,.chart-content,.heatmap-chart,.tv-chart-container{height:100%!important;min-height:600px;width:100%}.chart canvas,.chart-container canvas,.chart-content canvas,.heatmap-chart canvas,.tv-chart-container canvas{height:100%!important;width:100%!important}.right-sidebar,.side-panel,.sidebar{flex:0 0 320px;min-width:320px;width:320px}