:root{
  --bg:#06070f; --ink:#eef1ff; --muted:#9098c8; --line:rgba(255,255,255,0.10);
  --glass:rgba(255,255,255,0.05);
  --cyan:#5ce0ff; --blue:#4d72ff; --deepblue:#1b2a8c; --violet:#8a6bff; --purple:#7c5cff;
  --green:#6cffb0; --amber:#ffc24b; --red:#ff6b6b;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:ui-sans-serif,-apple-system,system-ui,sans-serif;color:var(--ink);min-height:100vh;padding:18px;
  background:
    radial-gradient(130% 95% at 100% -10%, rgba(124,92,255,0.34), transparent 55%),
    radial-gradient(120% 90% at -10% 110%, rgba(40,70,255,0.30), transparent 55%),
    radial-gradient(90% 70% at 50% 120%, rgba(20,30,120,0.40), transparent 60%),
    var(--bg);}
.frame{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:212px 1fr;gap:16px}
.side{background:linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.02));border:1px solid var(--line);border-radius:18px;padding:16px 12px;backdrop-filter:blur(10px);height:fit-content}
.brand{display:flex;align-items:center;gap:9px;padding:4px 8px 14px}
.logo{width:30px;height:30px;border-radius:9px;background:conic-gradient(from 200deg,#5ce0ff,#4d72ff,#7c5cff,#5ce0ff);box-shadow:0 0 18px rgba(77,114,255,.6)}
.brand b{font-size:13px;letter-spacing:.5px}.brand span{display:block;font-size:9px;color:var(--muted);letter-spacing:2px;text-transform:uppercase}
.nav{display:flex;flex-direction:column;gap:3px;margin-top:6px}
.nav a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:11px;font-size:12.5px;color:var(--muted);text-decoration:none;border:1px solid transparent;cursor:pointer}
.nav a.on{color:#fff;background:rgba(77,114,255,0.18);border-color:rgba(124,92,255,0.45);box-shadow:0 0 18px rgba(77,114,255,.25) inset}
.nav a:hover{color:#fff}
.dot{width:7px;height:7px;border-radius:50%}
.side-foot{margin-top:14px;padding:10px;border-radius:12px;background:var(--glass);border:1px solid var(--line);font-size:10px;color:var(--muted)}
.main{display:flex;flex-direction:column;gap:16px}
.top{display:flex;align-items:center;justify-content:space-between}
.top h1{font-size:20px;font-weight:600;letter-spacing:.3px}.top .sub{font-size:11px;color:var(--muted)}
.pill{font-size:10px;padding:5px 11px;border-radius:20px;border:1px solid var(--line);background:var(--glass);color:var(--muted)}
.agentbtn{margin-left:8px;font-size:11px;padding:7px 13px;border-radius:11px;border:1px solid rgba(124,92,255,.5);background:linear-gradient(90deg,rgba(92,224,255,.18),rgba(124,92,255,.22));color:#fff;cursor:pointer}
.hero{display:grid;grid-template-columns:240px 1fr;gap:16px}
.card{background:linear-gradient(180deg,rgba(255,255,255,0.07),rgba(255,255,255,0.025));border:1px solid var(--line);border-radius:18px;padding:16px;backdrop-filter:blur(10px)}
.ring-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.ring{width:140px;height:140px;border-radius:50%;display:grid;place-items:center;box-shadow:0 0 40px rgba(77,114,255,.40)}
.ring .hole{width:108px;height:108px;border-radius:50%;background:#0a0915;display:grid;place-items:center}
.ring .pct{font-size:30px;font-weight:700;background:linear-gradient(90deg,#8affff,#9aa8ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.lbl{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);text-align:center}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.kpi{background:var(--glass);border:1px solid var(--line);border-radius:14px;padding:13px}
.kpi .n{font-size:24px;font-weight:650;margin-top:3px}.kpi .d{font-size:10px;color:var(--muted);letter-spacing:.5px;text-transform:uppercase}.kpi .meta{font-size:10px;margin-top:5px}
.status-ok{color:var(--green)}.status-warn{color:var(--amber)}.status-down{color:var(--red)}
.sec-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.sec-h h3{font-size:13px;font-weight:600}.sec-h .more{font-size:10px;color:var(--cyan);cursor:pointer}
.apps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.apps-wide{grid-template-columns:repeat(3,1fr)}
.app{background:var(--glass);border:1px solid var(--line);border-radius:13px;padding:11px}
.app.coming-soon{opacity:.5}
.app .row1{display:flex;align-items:center;justify-content:space-between}
.app .nm{font-size:12px;font-weight:600}.app .hs{font-size:9px;color:var(--muted)}
.app .stat{font-size:9px;display:flex;align-items:center;gap:5px;margin-top:8px}
.app .ver{font-size:9px;color:var(--muted);margin-top:3px}
.spark{display:flex;align-items:flex-end;gap:2px;height:18px;margin-top:8px}
.spark i{flex:1;background:linear-gradient(180deg,var(--cyan),transparent);border-radius:2px;display:block}
.split{display:grid;grid-template-columns:1.4fr 1fr;gap:16px}
.init{display:flex;flex-direction:column;gap:9px}
.it{display:flex;align-items:center;gap:11px;padding:10px;border-radius:12px;background:var(--glass);border:1px solid var(--line)}
.it .bar{width:3px;min-height:34px;align-self:stretch;border-radius:3px}.it .body{flex:1}
.it .t{font-size:12px;font-weight:600}.it .s{font-size:10px;color:var(--muted);margin-top:2px}
.tag{font-size:9px;padding:3px 8px;border-radius:20px;border:1px solid var(--line)}
.feed{display:flex;flex-direction:column;gap:11px}
.fe{display:flex;gap:9px;font-size:11px}.fe .tm{color:var(--muted);font-size:9px;min-width:54px}.fe .tx{color:#d4d8f4}
.view-inner{display:flex;flex-direction:column;gap:16px}