:root{--bg:#0B0F1A;--bg2:#0F172A;--p:#8B5CF6;--p2:#6366F1;--cy:#22D3EE;--txt:#F8FAFC;--mut:#94A3B8;--line:rgba(139,92,246,.22);--card:rgba(255,255,255,.035);--ok:#34D399;--bad:#F87171}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--txt);font:14px/1.5 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.demo{background:linear-gradient(90deg,#6366F1,#8B5CF6,#0891b2);color:#fff;text-align:center;font-size:12.5px;padding:7px 12px;font-weight:600;position:sticky;top:0;z-index:30}
.app{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
aside{border-inline-end:1px solid var(--line);background:var(--bg2);padding:18px 14px;position:sticky;top:33px;height:calc(100vh - 33px)}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:17px;margin-bottom:6px}
.brand i{width:28px;height:28px;border-radius:9px;background:linear-gradient(135deg,#6366F1,#8B5CF6 60%,#22D3EE);display:block}
.org{color:var(--mut);font-size:12px;margin:0 0 20px 37px}
aside a{display:flex;gap:10px;align-items:center;color:var(--mut);text-decoration:none;padding:9px 11px;border-radius:10px;margin-bottom:2px;font-weight:500}
aside a:hover,aside a.on{background:rgba(139,92,246,.14);color:var(--txt)}
main{padding:22px 26px 60px;min-width:0}
.top{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:18px}
.top h1{font-size:22px;font-weight:700}.top p{color:var(--mut);font-size:13px}
.ctrl{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.seg{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg button,.lt button{background:none;border:0;color:var(--mut);padding:7px 12px;cursor:pointer;font:600 12.5px Inter,sans-serif}
.seg button.on,.lt button.on{background:var(--p);color:#fff}
.lt{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.badge{font-size:11px;font-weight:700;color:var(--cy);border:1px solid rgba(34,211,238,.4);padding:4px 9px;border-radius:999px;letter-spacing:.04em}
.grid{display:grid;gap:14px}.k4{grid-template-columns:repeat(4,1fr)}.g2{grid-template-columns:2fr 1fr}.g11{grid-template-columns:1fr 1fr}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;min-width:0}
.card h3{font-size:14px;font-weight:600;margin-bottom:12px;display:flex;justify-content:space-between;gap:8px;align-items:center}
.card h3 small{color:var(--mut);font-weight:400;font-size:12px}
.kpi .l{color:var(--mut);font-size:12.5px}.kpi .v{font-size:26px;font-weight:700;margin:4px 0 2px;letter-spacing:-.02em}
.up{color:var(--ok);font-weight:600;font-size:12.5px}.dn{color:var(--bad);font-weight:600;font-size:12.5px}
section{margin-top:26px;scroll-margin-top:50px}section>h2{font-size:17px;margin-bottom:12px}
svg text{fill:var(--mut);font-size:10px;font-family:Inter,sans-serif}
.hm{display:grid;gap:2px}.hm div{height:18px;border-radius:3px}.hm span{font-size:9.5px;color:var(--mut);text-align:center}
table{width:100%;border-collapse:collapse;font-size:13px}td,th{padding:8px 6px;border-bottom:1px solid rgba(255,255,255,.06);text-align:start}th{color:var(--mut);font-weight:500}
.bar{height:8px;border-radius:5px;background:linear-gradient(90deg,#6366F1,#22D3EE)}
.rev{border-bottom:1px solid rgba(255,255,255,.06);padding:10px 0}.rev b{color:#FBBF24}.rev p{color:var(--mut);margin:3px 0}
.ai{background:rgba(139,92,246,.1);border:1px dashed var(--line);border-radius:10px;padding:8px 10px;font-size:12.5px;margin-top:6px}
.act{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06);cursor:pointer}
.act input{margin-top:3px;accent-color:var(--p);width:17px;height:17px}.act.done span{text-decoration:line-through;color:var(--mut)}
.pri{font-size:10.5px;padding:2px 7px;border-radius:6px;background:rgba(248,113,113,.15);color:var(--bad);margin-inline-start:6px}
label.f{display:block;color:var(--mut);font-size:12.5px;margin:10px 0 4px}
input.t,select{background:var(--bg2);border:1px solid var(--line);color:var(--txt);border-radius:9px;padding:8px 10px;width:100%;font:inherit}
.btn{background:var(--p);border:0;color:#fff;border-radius:9px;padding:9px 14px;font-weight:600;cursor:pointer;margin-top:12px}
.foot{color:var(--mut);font-size:12px;margin-top:30px;text-align:center}
.big{font-size:40px;font-weight:700}.stars{color:#FBBF24;letter-spacing:2px}
@media(max-width:1000px){.k4{grid-template-columns:1fr 1fr}.g2,.g11{grid-template-columns:1fr}}
@media(max-width:760px){.app{grid-template-columns:1fr}aside{position:sticky;top:33px;height:auto;z-index:20;padding:8px;display:flex;overflow-x:auto;gap:4px;border:0;border-bottom:1px solid var(--line)}
aside .brand,aside .org{display:none}aside a{white-space:nowrap;margin:0;padding:7px 10px;font-size:13px}main{padding:16px 12px 60px}.kpi .v{font-size:21px}}
[dir=rtl] .org{margin:0 37px 20px 0}
/* purple brand accent */
.top{position:relative;padding:16px 18px;border-radius:16px;border:1px solid rgba(139,92,246,.45);background:linear-gradient(135deg,rgba(99,102,241,.95),rgba(139,92,246,.92) 60%,rgba(124,58,237,.9));box-shadow:0 14px 40px -18px rgba(139,92,246,.7);overflow:hidden}
.top:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 100% 0,rgba(34,211,238,.22),transparent 55%)}
.top>*{position:relative;z-index:1}.top h1{color:#fff}.top p{color:rgba(255,255,255,.82)}
.top .seg,.top .lt{border-color:rgba(255,255,255,.3);background:rgba(15,23,42,.22)}
.top .seg button,.top .lt button{color:rgba(255,255,255,.8)}
.top .seg button.on,.top .lt button.on{background:#fff;color:#5B21B6}
.top .badge{color:#fff;border-color:rgba(255,255,255,.55);background:rgba(15,23,42,.2)}
.seg button.on{background:linear-gradient(135deg,#6366F1,#8B5CF6)}
aside{border-top:3px solid #8B5CF6}
aside a.on{background:linear-gradient(135deg,rgba(99,102,241,.9),rgba(139,92,246,.9));color:#fff;box-shadow:0 6px 18px -8px rgba(139,92,246,.8)}
.org{color:#c4b5fd}
@media(max-width:760px){.top{padding:14px}aside{border-top:0}}
.top{scroll-margin-top:50px}@media(max-width:760px){.top{scroll-margin-top:110px}}
/* premium polish */
body{font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;letter-spacing:-.005em}
h1,h2,h3{letter-spacing:-.025em}