:root { --bg:#f6f7fb; --card:#fff; --ink:#15161a; --mute:#6b7080; --line:#e3e5ec; --pri:#b8172e; --pri2:#1f3b8a; --ok:#15803d; --bad:#b91c1c; --s0:#1f3b8a; --s1:#b8172e; --s2:#15803d; --s3:#a16207; --r:12px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#0f1117; --card:#181b24; --ink:#eef0f6; --mute:#9aa0b2; --line:#2a2e3b; --s0:#7aa2ff; --s1:#ff6b81; --s2:#4ade80; --s3:#fbbf24; } }
:root[data-theme="dark"] { --bg:#0f1117; --card:#181b24; --ink:#eef0f6; --mute:#9aa0b2; --line:#2a2e3b; --s0:#7aa2ff; --s1:#ff6b81; --s2:#4ade80; --s3:#fbbf24; }
* { box-sizing:border-box } [hidden] { display:none !important }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.5 -apple-system, "Segoe UI", Inter, Roboto, sans-serif; }
a { color:var(--pri2) } .wrap { max-width:1180px; margin:0 auto; padding:0 16px }
.ahead { background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10 }
.ahin { display:flex; align-items:center; gap:14px; min-height:56px; flex-wrap:wrap }
.brand { font-weight:800; color:var(--ink); text-decoration:none; font-size:17px }
.ahead nav { display:flex; gap:4px; flex-wrap:wrap } .ahead nav a { padding:6px 10px; border-radius:8px; text-decoration:none; color:var(--ink); font-weight:600; font-size:14px }
.ahead nav a.on, .ahead nav a:hover { background:rgba(184,23,46,.09); color:var(--pri) }
.aright { margin-left:auto; display:flex; gap:8px; align-items:center } .me { font-weight:700; text-decoration:none }
select, input, textarea { font:inherit; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:7px 9px }
.btn { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:9px; border:1px solid var(--line); background:var(--card); color:var(--ink); font-weight:700; cursor:pointer; font-size:14px; text-decoration:none }
.btn.pri { background:var(--pri); border-color:var(--pri); color:#fff } .btn.blue { background:var(--pri2); border-color:var(--pri2); color:#fff } .btn.ghost { background:transparent } .btn.sm { padding:5px 10px; font-size:13px } .btn[disabled] { opacity:.5 }
main { padding:20px 0 60px } h1 { font-size:26px; margin:6px 0 4px } h2 { font-size:17px; margin:0 0 10px }
.muted { color:var(--mute) } .small { font-size:12.5px } .row { display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.panel { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:16px; margin:14px 0 }
.tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:10px; margin:12px 0 }
.tile { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:12px 14px } .tile .k { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--mute) } .tile .v { font-size:22px; font-weight:800 } .tile .s { font-size:12.5px; color:var(--mute) }
.up { color:var(--ok) } .down { color:var(--bad) }
table { width:100%; border-collapse:collapse; font-size:14px } th, td { padding:7px 8px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle } th { font-size:12px; color:var(--mute); text-transform:uppercase; letter-spacing:.04em; cursor:pointer; white-space:nowrap } td.m, th.m { text-align:right; font-variant-numeric:tabular-nums }
.tablewrap { overflow:auto }
.cimg { display:inline-block; border-radius:5px; background-color:#eee; background-repeat:no-repeat; vertical-align:middle; box-shadow:0 1px 2px rgba(0,0,0,.15) } .cimg.ph { background:repeating-linear-gradient(45deg,#ddd,#ddd 6px,#eee 6px,#eee 12px) }
.chart { width:100%; height:auto } .chart .grid { stroke:var(--line) } .chart .ax { fill:var(--mute); font-size:11px }
.legend { display:flex; gap:14px; font-size:12.5px; color:var(--mute); flex-wrap:wrap } .legend i { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; vertical-align:-1px }
.grid2 { display:grid; grid-template-columns:1fr; gap:14px } @media (min-width:900px) { .grid2 { grid-template-columns:1fr 1fr } }
.cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px }
.cardbox { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:8px; display:flex; flex-direction:column; gap:4px; font-size:13px }
.cardbox b { font-size:13.5px } .cardbox .btns { margin-top:auto; display:flex; gap:6px; flex-wrap:wrap }
.dlg { border:1px solid var(--line); border-radius:14px; padding:0; background:var(--card); color:var(--ink); max-width:460px; width:92vw } .dlg::backdrop { background:rgba(0,0,0,.45) }
.dlgin { padding:18px; display:flex; flex-direction:column; gap:10px } .dlgin label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--mute) }
.empty { padding:30px; text-align:center; color:var(--mute) }
.pill { display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:700; background:rgba(31,59,138,.1); color:var(--pri2) } .pill.ok { background:rgba(21,128,61,.12); color:var(--ok) } .pill.bad { background:rgba(185,28,28,.12); color:var(--bad) }
#toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px); background:#111; color:#fff; padding:10px 16px; border-radius:10px; opacity:0; transition:.2s; z-index:50; font-weight:600 } #toast.show { opacity:1; transform:translateX(-50%) }
.searchres { max-height:320px; overflow:auto; border:1px solid var(--line); border-radius:10px; margin-top:6px; background:var(--card) }
.searchres button { display:flex; gap:10px; align-items:center; width:100%; text-align:left; padding:6px 8px; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer }
.searchres button:hover { background:rgba(31,59,138,.06) }