:root { color-scheme: dark; --bg:#101419; --panel:#181e26; --raised:#202833; --line:#2c3542; --text:#edf2f7; --muted:#9ba9ba; --blue:#71adff; --green:#55dbb2; --red:#ff8894; --amber:#f3c274; font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-size:15px; line-height:1.6; }
button,input,select,textarea { font:inherit; color:inherit; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { opacity:.5; cursor:wait; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:2px solid var(--blue); outline-offset:4px; }
a { color:var(--blue); text-decoration:none; }
button,input,select,textarea { background:var(--raised); border:1px solid var(--line); border-radius:9px; padding:9px 13px; }
input,select { max-width:100%; }
button:hover { border-color:var(--blue); }
.primary { background:var(--blue); color:#0b182a; font-weight:700; border-color:var(--blue); }
.notification-form { max-width:640px; display:grid; gap:16px; }.notification-form textarea { width:100%; resize:vertical; }.checkline { display:flex; gap:10px; align-items:center; }.checkline input { accent-color:var(--blue); width:18px; height:18px; }
.skip { position:fixed; top:-60px; right:20px; background:var(--panel); padding:10px; z-index:10; }.skip:focus { top:8px; }
.login { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(ellipse at 50% 15%,#1e324d 0,transparent 58%); }
.login-card { width:min(100%,430px); background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:34px; box-shadow:0 24px 80px #0003; }
.logo { width:40px; height:40px; display:grid; place-items:center; background:var(--blue); color:#0b182a; font-size:23px; border-radius:12px; font-weight:800; }
.eyebrow { color:var(--blue); font-size:12px; letter-spacing:.12em; margin:20px 0 8px; font-weight:650; }
h1,h2,h3,p { margin:0; }h1 { font-size:30px; letter-spacing:-.6px; line-height:1.3; }h2 { font-size:21px; }h3 { font-size:16px; }
.muted,.note { color:var(--muted); }.note { font-size:12px; }.login p { margin:12px 0 24px; }.login label { display:block; margin-bottom:6px; }.login input,.login .primary { width:100%; }.login .primary { margin-top:16px; }
.error { color:var(--red); padding:12px 0; white-space:pre-line; }.empty { padding:35px 18px; text-align:center; color:var(--muted); }.loading { color:var(--muted); padding:24px 0; }
.shell { display:grid; grid-template-columns:222px minmax(0,1fr); min-height:100vh; }
.sidebar { border-inline-end:1px solid var(--line); padding:30px 22px; display:flex; flex-direction:column; gap:32px; position:sticky; top:0; height:100vh; }
.brand { display:flex; gap:12px; align-items:center; font-weight:750; }.brand small { display:block; font-size:11px; font-weight:400; color:var(--muted); }
.nav { display:grid; gap:7px; }.nav a { color:var(--muted); padding:11px 12px; border-radius:9px; }.nav a:hover { background:var(--raised); color:var(--text); }.nav a:first-child { color:var(--blue); background:#71adff10; }.side-foot { margin-top:auto; font-size:12px; color:var(--muted); }
main { min-width:0; padding:32px 36px 60px; max-width:1600px; width:100%; margin:auto; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:32px; flex-wrap:wrap; }.topbar h1 { font-size:26px; }.topbar .muted { margin-top:5px; font-size:13px; }.actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.status { display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--green); }.status::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.section { margin-top:30px; scroll-margin-top:20px; }.section-head { display:flex; justify-content:space-between; gap:14px; align-items:center; margin-bottom:16px; flex-wrap:wrap; }.section-head p { color:var(--muted); font-size:13px; margin-top:3px; }
.toolbar { display:flex; gap:12px; align-items:end; flex-wrap:wrap; }.field { display:flex; flex-direction:column; gap:5px; }.field label { color:var(--muted); font-size:12px; }.field select { min-width:120px; }
.cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:18px 0; }.card,.panel { background:var(--panel); border:1px solid var(--line); border-radius:14px; }.card { padding:19px 21px; }.card .label { color:var(--muted); font-size:12px; }.value { font-size:30px; line-height:1.4; font-variant-numeric:tabular-nums; font-weight:650; margin-top:8px; direction:ltr; text-align:right; }.value small { font-size:13px; color:var(--muted); font-weight:400; margin-inline-start:5px; }.card .note { margin-top:5px; }
.panel { padding:22px; margin-top:14px; min-width:0; }.panel-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap; }.badge { display:inline-block; background:#55dbb212; color:var(--green); border:1px solid #55dbb235; padding:2px 9px; border-radius:20px; font-size:11px; }.badge.warn { color:var(--amber); background:#f3c27412; border-color:#f3c27440; }.badge.bad { color:var(--red); background:#ff889410; border-color:#ff889440; }
.chart { direction:ltr; position:relative; margin-top:10px; }.chart svg { display:block; width:100%; height:250px; overflow:visible; }.chart text { fill:var(--muted); font:11px system-ui,sans-serif; }.chart .grid { stroke:var(--line); stroke-dasharray:3 5; }.chart .cursor { stroke:var(--muted); stroke-dasharray:4 4; }.tooltip { position:absolute; top:6px; left:60px; background:var(--raised); color:var(--text); border:1px solid var(--line); padding:7px 12px; border-radius:8px; font-size:12px; pointer-events:none; white-space:pre-line; direction:rtl; box-shadow:0 4px 20px #0003; }.legend { display:flex; gap:18px; flex-wrap:wrap; font-size:12px; color:var(--muted); margin:12px 0 0; }.legend span { display:flex; align-items:center; gap:7px; }.swatch { width:8px; height:8px; border-radius:50%; background:var(--series); }.series-0 { --series:var(--blue); }.series-1 { --series:var(--green); }.series-2 { --series:var(--amber); }.series-3 { --series:var(--red); }
.table-scroll { overflow:auto; }table { width:100%; border-collapse:collapse; font-size:13px; }th { text-align:start; color:var(--muted); font-weight:500; white-space:nowrap; }td,th { padding:12px 10px; border-bottom:1px solid var(--line); }tr:last-child td { border-bottom:0; }td { vertical-align:middle; }td button { padding:5px 10px; font-size:12px; }.ltr { direction:ltr; unicode-bidi:plaintext; }.metric-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; }.metric-grid .card { text-align:start; }.metric-grid .card:hover { border-color:var(--blue); }.metric-grid button { width:100%; }.metric-grid .value { font-size:26px; }.metric-grid .badge { margin-top:10px; }.two-col { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
dialog { background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:18px; width:min(1100px,94vw); max-height:90vh; padding:26px; }dialog::backdrop { background:#000a; }.dialog-head { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:16px; }.dialog-head button { font-size:20px; padding:2px 12px; }.notice { background:#f3c2740e; border:1px solid #f3c27440; color:var(--amber); border-radius:9px; padding:10px 14px; margin-bottom:14px; font-size:13px; }details { margin-top:18px; }summary { cursor:pointer; color:var(--muted); }pre { direction:ltr; text-align:left; white-space:pre-wrap; overflow-wrap:anywhere; font-size:12px; max-height:300px; overflow:auto; background:var(--panel); padding:16px; border-radius:10px; }.foot { margin-top:28px; color:var(--muted); font-size:12px; }
@media(prefers-color-scheme:light) { :root { color-scheme:light; --bg:#f4f6fa; --panel:#fff; --raised:#edf1f7; --line:#dce3ed; --text:#18273b; --muted:#63738a; --blue:#246ac4; --green:#138362; --red:#bf364b; --amber:#946212; }.login { background:radial-gradient(ellipse at 50% 15%,#dce9fb,transparent 58%); }.primary,.logo { color:white; } }
@media(max-width:1100px) { .shell { grid-template-columns:180px minmax(0,1fr); }main { padding:26px 22px; }.cards { grid-template-columns:repeat(2,minmax(0,1fr)); }.two-col { grid-template-columns:1fr; } }
@media(max-width:720px) { .shell { display:block; }.sidebar { position:static; height:auto; padding:16px; border-inline-end:0; border-bottom:1px solid var(--line); gap:15px; }.nav { display:flex; flex-wrap:wrap; gap:0; }.nav a { padding:7px 12px; }.side-foot { display:none; }main { padding:22px 16px; }.topbar { margin-bottom:22px; }.topbar h1 { font-size:23px; }.card { padding:15px; }.value { font-size:25px; }.panel { padding:15px; }.toolbar { width:100%; }.field { flex:1; min-width:120px; }.chart svg { height:220px; }dialog { padding:16px; }.login-card { padding:26px; } }
@media(prefers-reduced-motion:no-preference) { html { scroll-behavior:smooth; }button,a { transition:background .15s,border-color .15s; } }