:root { color-scheme: dark; --bg:#0b0f14; --card:#131a23; --line:#233041; --ok:#22c55e; --bad:#ef4444; --muted:#8b98a9; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background:var(--bg); color:#e6edf3; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:20px 24px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
h1 { margin:0; font-size:22px; } .muted{color:var(--muted);font-weight:400} .sub{margin:4px 0 0;color:var(--muted);font-size:13px}
.top-right{display:flex;align-items:center;gap:10px}
.countdown{font-size:13px;color:var(--muted);border:1px solid var(--line);padding:8px 12px;border-radius:999px}
.global{font-size:13px;font-weight:700;padding:8px 12px;border-radius:999px}
.global.ok{background:rgba(34,197,94,.15);color:var(--ok);border:1px solid var(--ok)}
.global.bad{background:rgba(239,68,68,.15);color:var(--bad);border:1px solid var(--bad)}
button{background:#1f6feb;border:0;color:#fff;padding:9px 14px;border-radius:8px;cursor:pointer;font-weight:600}
button:hover{filter:brightness(1.1)}
main{padding:24px;max-width:1100px;margin:0 auto}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;cursor:pointer}
.card.selected{outline:2px solid #1f6feb}
.card .row1{display:flex;align-items:center;gap:8px;justify-content:space-between}
.dot{width:11px;height:11px;border-radius:50%;display:inline-block}
.dot.ok{background:var(--ok);box-shadow:0 0 8px var(--ok)} .dot.bad{background:var(--bad);box-shadow:0 0 8px var(--bad)} .dot.unknown{background:#555}
.badge{font-size:11px;border:1px solid var(--line);border-radius:999px;padding:3px 8px;color:var(--muted)}
.badge.fast{color:#fbbf24;border-color:#fbbf24}
.card h3{margin:10px 0 2px;font-size:16px}
.card .url{color:var(--muted);font-size:12px;word-break:break-all}
.metrics{display:flex;gap:14px;margin-top:12px}
.metrics div span{display:block;font-size:11px;color:var(--muted)}
.metrics div b{font-size:18px}
.spark{display:flex;gap:2px;margin-top:12px;align-items:flex-end;height:26px}
.spark i{width:8px;border-radius:2px;display:block}
.spark i.ok{background:var(--ok)} .spark i.bad{background:var(--bad)}
.panel{margin-top:22px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px}
table{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px}
th,td{text-align:left;padding:8px;border-bottom:1px solid var(--line)}
.hint{color:var(--muted);font-size:13px;margin-top:16px}
.admin-auth{display:flex;gap:8px;align-items:center;margin:8px 0 12px;flex-wrap:wrap}
.admin-auth input{flex:1;min-width:220px}
input,select{background:#0b0f14;border:1px solid var(--line);color:#e6edf3;padding:9px 12px;border-radius:8px;font-size:14px}
.form-grid{display:grid;grid-template-columns:2fr 3fr 1fr 1fr auto;gap:8px;margin-bottom:12px}
@media(max-width:800px){.form-grid{grid-template-columns:1fr 1fr}}
.mrow{display:grid;grid-template-columns:2fr 3fr 1fr 1fr auto auto auto;gap:8px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
@media(max-width:800px){.mrow{grid-template-columns:1fr 1fr}}
.mrow input,.mrow select{width:100%;padding:7px 10px;font-size:13px}
.btn-danger{background:#7f1d1d} .btn-gray{background:#374151} .btn-green{background:#166534}
.card.paused{opacity:.55}
.paused-tag{font-size:11px;color:#fbbf24;border:1px solid #fbbf24;border-radius:999px;padding:3px 8px}
code{background:#00000055;padding:2px 6px;border-radius:6px}