:root{ --bg:#0b0f13; --card:#141a21; --ink:#e6edf3; --muted:#9fb3c8; --accent:#54d6a1; --warn:#f0c43c; --bad:#e06b6b; }
*{ box-sizing:border-box }
html,body{ height:100%; margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif; color:var(--ink); background:radial-gradient(1200px 800px at 20% -10%,#18202a 0%,#0b0f13 55%); }
.container{ max-width:960px; margin:0 auto; padding:24px }
header{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px }
h1{ font-size:28px; margin:0; letter-spacing:1px }
.brand{ display:flex; align-items:center; gap:12px }
.badge{ font-size:12px; background:#1c2430; color:var(--muted); padding:4px 8px; border-radius:999px }
.card{ background:var(--card); border:1px solid #1e2733; border-radius:16px; padding:16px; box-shadow:0 10px 30px rgba(0,0,0,.25) }
.controls{ display:flex; gap:8px; margin:12px 0 }
input[type="text"]{ flex:1; padding:12px 14px; background:#10161d; border:1px solid #202a38; border-radius:12px; color:var(--ink) }
button{ padding:12px 16px; border:0; border-radius:12px; cursor:pointer; background:linear-gradient(180deg,#3ad0bb,#23a18d); color:#071a17; font-weight:700 }
button.secondary{ background:#1b2330; color:var(--ink); border:1px solid #2a3545 }
table{ width:100%; border-collapse:collapse; margin-top:12px }
th,td{ text-align:left; padding:10px 8px; border-bottom:1px solid #1f2733 }
th{ color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.06em }
.kpi{ display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; color:var(--muted) }
.kpi b{ color:var(--ink) }
.tag{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; border:1px solid #2b384a; color:#b9c7d9; background:#10161d }
footer{ margin-top:18px; color:var(--muted); font-size:12px }
hr{ border:0; border-top:1px solid #1f2733; margin:12px 0 }
.notice{ font-size:13px; color:var(--muted) }
.toast{ margin-top:8px; min-height:20px; }
.ok{ color:var(--accent) } .warn{ color:var(--warn) } .bad{ color:var(--bad) }
small.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:11px; opacity:.9 }
summary{ cursor:pointer }
dialog{ background:var(--card); border:1px solid #202a38; border-radius:12px; padding:16px; color:var(--ink) }
dialog::backdrop{ background:rgba(0,0,0,.55) }
.share{ white-space:pre-wrap; background:#0f151c; border:1px dashed #2a3444; padding:8px; border-radius:8px; margin-top:8px }
a{ color:#72e2b8 }