:root{--bg:#0b1120;--bg2:#0f172a;--card:#131c31;--card2:#1a2540;--border:#243049;--text:#e2e8f0;--muted:#8395b3;--accent:#38bdf8;--accent2:#34d399;--warn:#fbbf24;--danger:#fb7185;font-family:Segoe UI,system-ui,-apple-system,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text)}.app{min-height:100vh}.topbar{z-index:20;border-bottom:1px solid var(--border);background:linear-gradient(90deg,#0c1426,#0f1d35);flex-wrap:wrap;align-items:center;gap:16px 20px;min-height:60px;padding:10px 22px;display:flex;position:sticky;top:0}.tab{white-space:nowrap}.brand{letter-spacing:.3px;align-items:center;gap:10px;font-size:17px;font-weight:700;display:flex}.brand .dot{background:var(--accent);width:11px;height:11px;box-shadow:0 0 12px var(--accent);border-radius:50%}.brand small{color:var(--muted);font-size:12px;font-weight:400}.tabs{gap:6px;margin-left:8px;display:flex}.tab{cursor:pointer;color:var(--muted);background:0 0;border:1px solid #0000;border-radius:8px;padding:8px 16px;font-size:14px}.tab:hover{color:var(--text);background:#16223c}.tab.active{color:#06283d;background:var(--accent);font-weight:600}.filters{align-items:center;gap:8px;margin-left:auto;display:flex}.filters label{color:var(--muted);font-size:12px}.filters input,.filters select{background:var(--card2);color:var(--text);border:1px solid var(--border);border-radius:7px;padding:6px 9px;font-size:13px}.chip{cursor:pointer;background:var(--card2);border:1px solid var(--border);color:var(--muted);border-radius:7px;padding:6px 12px;font-size:12px}.chip:hover{color:var(--text)}.chip.active{border-color:var(--accent);color:var(--accent);background:#0e3a52}.content{padding:22px 24px 60px}.grid{gap:16px;display:grid}.cols-4{grid-template-columns:repeat(4,1fr)}.cols-3{grid-template-columns:repeat(3,1fr)}.cols-2{grid-template-columns:repeat(2,1fr)}@media (width<=1100px){.cols-4{grid-template-columns:repeat(2,1fr)}.cols-3,.cols-2{grid-template-columns:1fr}}.card{background:linear-gradient(180deg, var(--card), #111a2e);border:1px solid var(--border);border-radius:14px;padding:16px 18px;transition:transform .18s,border-color .18s,box-shadow .18s;animation:.5s cubic-bezier(.2,.7,.3,1) both fadeInUp}.card:hover{border-color:#2f4a6b;transform:translateY(-3px);box-shadow:0 12px 30px -12px #0009}@keyframes fadeInUp{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}.grid>.card:first-child{animation-delay:20ms}.grid>.card:nth-child(2){animation-delay:80ms}.grid>.card:nth-child(3){animation-delay:.14s}.grid>.card:nth-child(4){animation-delay:.2s}.grid>.card:nth-child(5){animation-delay:.26s}.grid>.card:nth-child(6){animation-delay:.32s}.card h3{color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin:0 0 14px;font-size:13px;font-weight:600}.card h3 .badge{text-transform:none}.kpi{flex-direction:column;gap:6px;display:flex}.kpi .label{color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-size:12px}.kpi .value{font-size:26px;font-weight:700;line-height:1.1}.kpi .sub{color:var(--muted);font-size:12px}.kpi.accent .value{color:var(--accent)}.kpi.green .value{color:var(--accent2)}.kpi.warn .value{color:var(--warn)}.kpi.danger .value{color:var(--danger)}.kpi2{flex-direction:column;gap:6px;min-height:120px;animation:.5s cubic-bezier(.2,.7,.3,1) both fadeInUp;display:flex;position:relative;overflow:hidden}.kpi2:before{content:"";background:var(--accent);opacity:.8;width:3px;position:absolute;top:0;bottom:0;left:0}.kpi2.accent:before{background:var(--accent)}.kpi2.green:before{background:var(--accent2)}.kpi2.warn:before{background:var(--warn)}.kpi2.danger:before{background:var(--danger)}.kpi2.violet:before{background:#a78bfa}.kpi2-top{justify-content:space-between;align-items:center;display:flex}.kpi2-top .label{color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-size:11px}.kpi2-icon{opacity:.7;font-size:16px}.kpi2 .value{letter-spacing:-.5px;font-size:27px;font-weight:700;line-height:1.05}.kpi2.accent .value{color:var(--accent)}.kpi2.green .value{color:var(--accent2)}.kpi2.warn .value{color:var(--warn)}.kpi2.danger .value{color:var(--danger)}.kpi2.violet .value{color:#a78bfa}.kpi2-bottom{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.kpi2-bottom .sub{color:var(--muted);font-size:11.5px}.kpi2-spark{opacity:.9;margin:6px -18px -16px}.delta{border-radius:20px;align-items:center;gap:3px;padding:1px 7px;font-size:12px;font-weight:600;display:inline-flex}.delta.up{color:#34d399;background:#34d3991f}.delta.down{color:#fb7185;background:#fb71851f}.delta.neutral{color:var(--muted)}.gauge-center{pointer-events:none;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.gauge-val{font-size:30px;font-weight:700}.gauge-lbl{color:var(--muted);font-size:12px}.sec-head{color:var(--muted);letter-spacing:.8px;align-items:center;gap:8px;margin:4px 0 12px;font-size:12.5px;font-weight:600;display:flex}.sec-head:before{content:"";background:var(--accent);width:7px;height:7px;box-shadow:0 0 8px var(--accent);border-radius:50%}.var-row{flex-wrap:wrap;gap:28px;display:flex}.var-item{flex-direction:column;gap:5px;display:flex}.var-lbl{color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-size:11px}.var-val{font-size:20px;font-weight:700}table.tbl{border-collapse:collapse;width:100%;font-size:13px}table.tbl th{text-align:left;color:var(--muted);border-bottom:1px solid var(--border);text-transform:uppercase;padding:7px 8px;font-size:11px;font-weight:500}table.tbl td{border-bottom:1px solid #1b2740;padding:8px}table.tbl td.num,table.tbl th.num{text-align:right;font-variant-numeric:tabular-nums}table.tbl tr:hover td{background:#16223c}.bar-cell{position:relative}.bar-cell .bar{background:#38bdf81f;border-radius:4px;position:absolute;top:0;bottom:0;left:0}.bar-cell span{position:relative}.loading,.err{color:var(--muted);text-align:center;padding:40px}.err{color:var(--danger)}.note{color:var(--muted);margin-top:4px;font-size:12px}.footer-note{color:var(--muted);border-top:1px solid var(--border);margin-top:20px;padding-top:14px;font-size:12px}.badge{color:var(--accent);background:#0e3a52;border-radius:20px;margin-left:8px;padding:2px 8px;font-size:11px;display:inline-block}.recharts-default-tooltip{border:1px solid var(--border)!important;background:#0c1426!important;border-radius:8px!important}.login-wrap{background:radial-gradient(1200px 600px at 50% -10%,#16284a,#0b1120);justify-content:center;align-items:center;min-height:100vh;display:flex}.login-card{background:linear-gradient(180deg, var(--card), #111a2e);border:1px solid var(--border);border-radius:16px;flex-direction:column;width:340px;padding:28px 26px;display:flex}.login-logo{width:210px;margin:4px auto 2px;display:block}.login-sub{text-align:center;color:var(--muted);margin:0 0 20px;font-size:12px}.brand-logo{height:34px;display:block}.login-card label{color:var(--muted);margin:10px 0 5px;font-size:12px}.login-card input{background:var(--card2);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:10px 12px;font-size:14px}.login-card input:focus{border-color:var(--accent);outline:none}.login-card button{background:var(--accent);color:#06283d;cursor:pointer;border:none;border-radius:8px;margin-top:20px;padding:11px;font-size:14px;font-weight:600}.login-card button:disabled{opacity:.5;cursor:default}.login-err{color:var(--danger);text-align:center;margin-top:14px;font-size:13px}.user-box{border-left:1px solid var(--border);align-items:center;gap:10px;margin-left:14px;padding-left:14px;display:flex}.user-name{flex-direction:column;font-size:13px;line-height:1.1;display:flex}.user-name small{color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-size:10px}.logout{border:1px solid var(--border);color:var(--muted);cursor:pointer;background:0 0;border-radius:7px;padding:7px 12px;font-size:12px}.logout:hover{color:var(--danger);border-color:var(--danger)}