:root { color-scheme:dark; --bg:#0b0f14; --card:#121924; --surface:#0e1520; --primary:#05080c; --line:#1f2a3a; --fg:#e6edf3; --fg2:#c9d1d9; --muted:#8b9bb4; --dim:#566579; --accent:#3fb950; --accent2:#58a6ff; --warn:#d29922; --bad:#f85149; --btn-fg:#04101e; --logo-a:#1f6feb; --logo-b:#3fb950; --shadow:none; --hover:rgba(255,255,255,.04) }
:root[data-theme="light"] { color-scheme:light; --bg:#f6f8fa; --card:#ffffff; --surface:#f0f3f7; --primary:#e8f0fb; --line:#d0d7de; --fg:#1f2328; --fg2:#3b444d; --muted:#59636e; --dim:#8b949e; --accent:#1a7f37; --accent2:#0969da; --warn:#9a6700; --bad:#cf222e; --btn-fg:#ffffff; --logo-a:#0969da; --logo-b:#1a7f37; --shadow:0 1px 2px rgba(31,35,40,.06); --hover:rgba(31,35,40,.045) }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme:light; --bg:#f6f8fa; --card:#ffffff; --surface:#f0f3f7; --primary:#e8f0fb; --line:#d0d7de; --fg:#1f2328; --fg2:#3b444d; --muted:#59636e; --dim:#8b949e; --accent:#1a7f37; --accent2:#0969da; --warn:#9a6700; --bad:#cf222e; --btn-fg:#ffffff; --logo-a:#0969da; --logo-b:#1a7f37; --shadow:0 1px 2px rgba(31,35,40,.06); --hover:rgba(31,35,40,.045) } }
* { box-sizing:border-box }
html { background:var(--bg) }
body { margin:0 auto; width:1200px; background:var(--bg); color:var(--fg); font:15px/1.45 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; padding:0 20px 40px }
header { display:flex; justify-content:space-between; align-items:center; padding:22px 0 10px; flex-wrap:nowrap; gap:12px }
.brand { display:flex; gap:14px; align-items:center; min-width:0; flex:1 1 auto }
.headright { flex:0 0 auto }
.logo { width:52px; height:52px; display:grid; place-items:center; background:linear-gradient(135deg,var(--logo-a),var(--logo-b)); border-radius:14px }
h1 { margin:0; font-size:26px; letter-spacing:.3px }
.sub { color:var(--muted); font-size:13px }
.headright { display:flex; align-items:center; gap:10px }
.pill { display:flex; gap:8px; align-items:center; border:1px solid var(--line); border-radius:999px; padding:6px 12px; font-size:13px; color:var(--muted) }
.pill .dot { width:9px; height:9px; border-radius:50%; background:var(--warn); box-shadow:0 0 8px var(--warn) }
.pill.ok .dot { background:var(--accent); box-shadow:0 0 10px var(--accent) }
.pill.busy .dot { background:var(--accent2); box-shadow:0 0 10px var(--accent2); animation:pulse 1.2s infinite }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
button.hbtn { font-weight:400 }
.themebtn, a.hbtn { background:transparent; color:var(--muted); border:1px solid var(--line); padding:5px 10px; border-radius:999px; font-size:13px; font-weight:400; cursor:pointer; text-decoration:none }
.themebtn:hover, a.hbtn:hover { color:var(--fg); text-decoration:none }
.tabs { display:flex; gap:6px; margin:4px 0 12px; border-bottom:1px solid var(--line) }
.tabs a { padding:8px 14px; color:var(--muted); text-decoration:none; border:1px solid transparent; border-bottom:0; border-radius:8px 8px 0 0; font-weight:600; font-size:14px }
.tabs a.active { color:var(--fg); background:var(--card); border-color:var(--line); margin-bottom:-1px }
.tabs a:hover { color:var(--fg); text-decoration:none }
.sectionhead { margin:22px 0 4px; font-size:13px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.8px }
.counters { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:12px; margin:10px 0 16px }
.counter { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 12px; text-align:center; box-shadow:var(--shadow) }
.counter .n { font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; letter-spacing:-.2px }
.counter .l { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.6px; margin-top:2px }
.counter .d { font-size:12px; margin-top:4px; color:var(--muted) }
.grid { display:grid; grid-template-columns:1fr; gap:14px; margin-bottom:14px }
.grid + .sectionhead { margin-top:8px }
.grid.three { grid-template-columns:1fr 1fr 1fr }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; box-shadow:var(--shadow); min-width:0 }
.card.wide { grid-column:1 / -1 }
h2 { margin:0 0 10px; font-size:16px }
.muted { color:var(--muted); font-weight:400 } .small { font-size:12px }
.kv { display:grid; grid-template-columns:minmax(150px,max-content) 1fr; gap:5px 14px; font-size:13.5px }
.kv .k { color:var(--muted) } .kv .v { font-variant-numeric:tabular-nums }
.ok { color:var(--accent) } .bad { color:var(--bad) } .warn { color:var(--warn) }
.tag { display:inline-block; font-size:11px; padding:1px 8px; border-radius:999px; border:1px solid var(--line); color:var(--muted) }
.tag.ok { color:var(--accent); border-color:var(--accent) } .tag.bad { color:var(--bad); border-color:var(--bad) }
.notice { border:1px solid var(--warn); color:var(--warn); border-radius:8px; padding:8px 12px; font-size:13px; margin:0 0 12px }
a { color:var(--accent2); text-decoration:none } a:hover { text-decoration:underline }
code, .mono { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px }
.tbl { position:relative; overflow-y:auto; overflow-x:hidden; background:var(--surface); border:1px solid var(--line); border-radius:8px }
.kv + .tbl, p + .tbl { margin-top:14px }
.card .sectionhead { margin:18px 0 8px; padding-top:14px; border-top:1px solid var(--line) }
table { width:100%; border-collapse:collapse; font-size:12.5px }
.tbl:has(table.metric) { background:var(--primary) } .tbl:has(table.metric) th { background:var(--primary) }
table.metric { table-layout:fixed } table.metric td { padding:7px 10px }
table.metric th:first-child, table.metric td:first-child { width:34% }
th, td { text-align:left; padding:6px 10px; border-bottom:1px solid var(--line); vertical-align:top }
tbody tr:last-child td { border-bottom:0 }
tbody tr:hover td { background:var(--hover) }
th { color:var(--muted); font-weight:500; background:var(--surface); position:sticky; top:0; z-index:1 }
td.n, th.n { text-align:right; font-variant-numeric:tabular-nums }
td.prior { color:var(--muted) }
.zero { color:var(--dim) }
.tier-weak { font-style:italic; color:var(--fg2) }
.tbl.capped { box-shadow:inset 0 -14px 12px -12px rgba(0,0,0,.35) }
.charts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px }
.arrchart { margin:14px 0 4px; height:300px; padding:12px; background:var(--surface); border:1px solid var(--line); border-radius:10px }
.charts .chart { background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:12px; height:280px }
.notes { margin:12px 0 0; padding-left:18px; font-size:13px; color:var(--fg2) } .notes li { margin:4px 0 }
details summary { cursor:pointer; list-style:none } details summary::-webkit-details-marker { display:none }
details summary h2 { margin:0; display:inline } details summary h2::before { content:"\25B8"; display:inline-block; width:16px; color:var(--muted) }
details[open] summary h2::before { content:"\25BE" }
textarea { width:100%; min-height:300px; font:12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; background:var(--surface); color:var(--fg); border:1px solid var(--line); border-radius:8px; padding:12px }
input { background:var(--surface); border:1px solid var(--line); color:var(--fg); padding:8px 10px; border-radius:8px; min-width:220px; font:inherit }
button { background:var(--accent2); color:var(--btn-fg); border:0; padding:9px 14px; border-radius:8px; font-weight:600; cursor:pointer; font:inherit }
button.secondary { background:transparent; color:var(--muted); border:1px solid var(--line) }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:10px }
.rendered { font-size:14px; line-height:1.55 } .rendered h3 { font-size:18px } .rendered h4 { font-size:15px; margin:18px 0 6px } .rendered h5 { font-size:14px; margin:14px 0 6px }
.login { width:420px; margin:14vh auto 0 } .login input { width:100%; margin:10px 0 }
footer { display:flex; justify-content:space-between; color:var(--muted); font-size:12px; margin-top:18px; flex-wrap:wrap; gap:8px }