:root{
  --bg:#0a1622; --bg2:#0f2135; --card:#122b42; --card2:#16344f; --line:#20456a;
  --ink:#e9f1f8; --muted:#9db3c8; --green:#2ecc71; --green-d:#1f9d55;
  --orange:#f28c28; --red:#e04f5f; --yellow:#f2c200; --blue:#4aa3ff;
  --r:14px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:"Be Vietnam Pro","Segoe UI",Roboto,Arial,sans-serif;
  background:linear-gradient(180deg,#0a1622,#0b1a2a 60%,#0a1622);
  color:var(--ink);line-height:1.55;font-size:15px;padding-bottom:20px;
}
.wrap{max-width:1180px;margin:0 auto;padding:0 18px}
h2{font-size:17px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px}
a{color:var(--blue);text-decoration:none}
code{background:#0c1f31;border:1px solid var(--line);border-radius:4px;padding:1px 5px;font-size:13px}

/* top */
.top{position:sticky;top:0;z-index:20;background:rgba(10,22,34,.96);backdrop-filter:blur(6px);border-bottom:3px solid var(--green-d)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 18px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand-mark{width:44px;height:44px;border-radius:11px;background:linear-gradient(135deg,#2ecc71,#1f9d55);color:#062b16;font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;flex:none}
.brand-name{font-size:16px;font-weight:800;letter-spacing:.6px;color:#fff}
.brand-sub{font-size:12.5px;color:var(--muted)}
.top-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.updated{font-size:12.5px;color:var(--muted)}

.pill{padding:6px 14px;border-radius:999px;font-size:13px;font-weight:700;letter-spacing:.3px;white-space:nowrap}
.pill-ok{background:rgba(46,204,113,.15);color:#5ff09a;border:1px solid rgba(46,204,113,.45)}
.pill-warn{background:rgba(242,194,0,.14);color:#ffd84a;border:1px solid rgba(242,194,0,.45)}
.pill-bad{background:rgba(224,79,95,.16);color:#ff8b97;border:1px solid rgba(224,79,95,.5)}
.pill-wait{background:rgba(157,179,200,.12);color:var(--muted);border:1px solid var(--line)}

/* kpis */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:12px;margin:18px 0}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.kpi .k{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px}
.kpi .v{font-size:22px;font-weight:800;line-height:1.15}
.kpi .s{font-size:12.5px;color:var(--muted);margin-top:4px}
.kpi.ok .v{color:var(--green)}
.kpi.warn .v{color:var(--yellow)}
.kpi.bad .v{color:var(--red)}

/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;margin:14px 0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid2 .card{margin:0}
@media(max-width:820px){.grid2{grid-template-columns:1fr}}

.badge{background:var(--card2);border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:1px 9px;font-size:12px;font-weight:700}
.problems{display:flex;flex-direction:column;gap:8px}
.problems .p{display:flex;gap:10px;align-items:flex-start;background:rgba(242,194,0,.08);border:1px solid rgba(242,194,0,.28);border-radius:10px;padding:10px 12px;font-size:14px}
.problems .p.bad{background:rgba(224,79,95,.09);border-color:rgba(224,79,95,.32)}
.problems .empty{color:var(--green);background:rgba(46,204,113,.08);border:1px solid rgba(46,204,113,.28);border-radius:10px;padding:10px 12px}

/* rows */
.row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed rgba(32,69,106,.55);font-size:14px}
.row:last-child{border-bottom:none}
.row .l{display:flex;align-items:center;gap:9px;min-width:0}
.row .r{color:var(--muted);font-size:13px;white-space:nowrap}
.dot{width:9px;height:9px;border-radius:50%;flex:none;display:inline-block}
.dot-green{background:var(--green);box-shadow:0 0 8px rgba(46,204,113,.7)}
.dot-red{background:var(--red);box-shadow:0 0 8px rgba(224,79,95,.7)}
.dot-yellow{background:var(--yellow)}
.dot-blue{background:var(--blue)}
.dot-gray{background:#5c7186}

/* bars */
.bar{height:8px;background:#0c2133;border-radius:999px;overflow:hidden;margin-top:6px}
.bar > i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#2ecc71,#7ce6a8)}
.bar.warn > i{background:linear-gradient(90deg,#f2c200,#ffdf6b)}
.bar.bad > i{background:linear-gradient(90deg,#e04f5f,#ff8b97)}
.mini{font-size:12.5px;color:var(--muted);margin-top:4px}

/* table */
.table-wrap{max-height:430px;overflow:auto;border:1px solid var(--line);border-radius:10px}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{padding:8px 10px;text-align:left;border-bottom:1px solid rgba(32,69,106,.5);vertical-align:top}
th{position:sticky;top:0;background:var(--card2);font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);z-index:2}
tr:last-child td{border-bottom:none}
td.st-ok{color:var(--green);font-weight:600}
td.st-bad{color:var(--red);font-weight:600}
td.st-off{color:#7d90a4}

/* charts */
.chart-box{position:relative;height:200px;margin:8px 0 4px}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-top:8px}
.legend i{margin-right:5px}
.notes{font-size:13.5px;color:var(--muted);padding-left:18px}
.notes li{margin:6px 0}
.foot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;color:#78909c;font-size:12.5px;padding:18px 18px 30px;border-top:1px solid rgba(32,69,106,.6);margin-top:20px}