:root { --bg:#0b1220; --card:#121b2e; --text:#e7ecff; --muted:#aab3d6; --line:#243155; --good:#2ecc71; --bad:#ff5c5c; }
*{ box-sizing:border-box; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; }
body{ margin:0; background:linear-gradient(180deg,#0b1220,#070b14); color:var(--text); }
.top{ padding:16px 18px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); }
.title{ font-size:20px; font-weight:800; }
.subtitle{ color:var(--muted); font-size:13px; margin-top:4px; }
.wrap{ padding:16px 18px 40px; max-width:1100px; margin:0 auto; }
.tabs{ display:flex; gap:8px; padding:8px 18px; border-bottom:1px solid var(--line); position:sticky; top:0; background:rgba(11,18,32,.9); backdrop-filter: blur(10px); }
.tab{ background:transparent; color:var(--muted); border:1px solid var(--line); padding:8px 12px; border-radius:10px; cursor:pointer; }
.tab.active{ color:var(--text); border-color:#3a4f86; }
.panel{ display:none; }
.panel.show{ display:block; }
.grid2{ display:grid; grid-template-columns:1fr; gap:12px; }
@media(min-width:900px){ .grid2{ grid-template-columns:1fr 1fr; } }
.card{ background:rgba(18,27,46,.9); border:1px solid var(--line); border-radius:16px; padding:14px; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
h2{ margin:8px 0 12px; }
h3{ margin:0 0 8px; }
hr{ border:none; border-top:1px solid var(--line); margin:12px 0; }
.row{ display:flex; gap:10px; align-items:center; }
.grow{ flex:1; }
.btn{ background:#1a2642; color:var(--text); border:1px solid var(--line); padding:10px 12px; border-radius:12px; cursor:pointer; }
.btn.primary{ background:#27408a; border-color:#3a4f86; font-weight:700; }
select, input{ width:100%; margin-top:6px; padding:10px 10px; border-radius:12px; border:1px solid var(--line); background:#0e1628; color:var(--text); }
.form{ display:grid; grid-template-columns:1fr; gap:10px; margin-top:10px; }
@media(min-width:700px){ .form{ grid-template-columns:1fr 1fr; } }
.small{ color:var(--muted); font-size:13px; }
.msg{ color:var(--muted); font-size:13px; }
.kpi{ display:grid; grid-template-columns:1fr; gap:12px; margin-top:10px; }
@media(min-width:700px){ .kpi{ grid-template-columns:1fr 1fr; } }
.kpiLabel{ color:var(--muted); font-size:13px; }
.kpiValue{ font-size:28px; font-weight:900; margin:4px 0; }
.bar{ height:10px; background:#0e1628; border:1px solid var(--line); border-radius:999px; overflow:hidden; }
.bar.big{ height:16px; }
.fill{ height:100%; width:0%; background:#3a4f86; }
.status.good{ color:var(--good); font-weight:700; }
.status.bad{ color:var(--bad); font-weight:700; }
.list{ display:flex; flex-direction:column; gap:8px; }
.item{ padding:10px; border:1px solid var(--line); border-radius:12px; background:#0e1628; display:flex; justify-content:space-between; gap:10px; }
.badge{ padding:4px 8px; border-radius:999px; font-size:12px; border:1px solid var(--line); }
.badge.good{ border-color:rgba(46,204,113,.4); color:var(--good); }
.badge.bad{ border-color:rgba(255,92,92,.4); color:var(--bad); }