:root { color-scheme: dark; --bg:#020617; --panel:#0f172a; --border:#334155; --text:#f8fafc; --muted:#cbd5e1; --accent:#86efac; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.6 system-ui,sans-serif; }
header { padding:24px max(24px,calc((100vw - 1120px)/2)); border-bottom:1px solid var(--border); display:flex; gap:24px; justify-content:space-between; flex-wrap:wrap; }
main { max-width:1168px; margin:40px auto; padding:0 24px; }
.brand { font-weight:700; } h1 { margin:4px 0 16px; font-size:30px; } h2 { margin:0; font-size:21px; }
.panel { background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:28px; margin:24px 0; }
.login { max-width:480px; margin:64px auto 24px; }
.eyebrow { color:var(--accent); font-size:14px; margin:0; } .muted { color:var(--muted); }
label { display:block; margin:20px 0 8px; } input { width:100%; min-height:48px; padding:12px; border:1px solid var(--border); background:var(--bg); border-radius:8px; color:var(--text); font:inherit; }
button { min-height:44px; padding:10px 20px; cursor:pointer; border:1px solid var(--border); border-radius:8px; background:var(--panel); color:var(--text); font:inherit; }
button:hover { border-color:var(--accent); } :focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
button:disabled { opacity:.5; cursor:wait; } #login-button { width:100%; margin-top:24px; background:var(--accent); color:var(--bg); font-weight:700; }
.heading { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.notice { padding:16px; border-left:3px solid var(--accent); background:var(--panel); }
.metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:16px; }
.metric { border:1px solid var(--border); padding:20px; border-radius:12px; } .metric strong { display:block; font-size:30px; font-variant-numeric:tabular-nums; }
table { width:100%; border-collapse:collapse; } th,td { text-align:left; padding:14px 12px; border-bottom:1px solid var(--border); overflow-wrap:anywhere; }
.table-scroll { overflow:auto; } #status { color:var(--muted); min-height:26px; } #status.error { color:#fda4af; }
[hidden] { display:none!important; } @media(max-width:480px) { main { padding:0 16px; } .panel { padding:20px; } header { padding:20px 16px; } h1 { font-size:26px; } th,td { padding:12px 6px; } }