:root{
  --page:#0A080A;--panel:#000;--sub:#4D0F28;--sub-2:#611433;--line:#7E2246;--line-soft:#2A1420;
  --accent:#E8829F;--txt:#F4EEF0;--txt-2:#D2AAB8;--txt-3:#96707F;
  --ok-bg:#123024;--ok-fg:#6FD3A6;--warn-bg:#3A2408;--warn-fg:#F59E2C;
  --btn-bg:#fff;--btn-fg:#000;--btn-hover:#F0D6DE;--radius:8px;
  --sans:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
:root[data-theme=light]{
  --page:#F4F1EA;--panel:#FCFAF6;--sub:#F7E8ED;--sub-2:#EFD8E1;--line:#DFC0CC;--line-soft:#E4DED4;
  --accent:#9C2B50;--txt:#1B1418;--txt-2:#5A464E;--txt-3:#7A6570;
  --ok-bg:#DFF0E5;--ok-fg:#1F6B45;--warn-bg:#FBEFD9;--warn-fg:#8A4D08;
  --btn-bg:#3A1020;--btn-fg:#fff;--btn-hover:#571830;
}
*{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--txt);font-family:var(--sans);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
.wrap{max-width:1100px;margin:0 auto;padding:26px 22px 70px}
.center{max-width:420px;margin:0 auto;padding:8vh 22px}
h1{font-size:22px;font-weight:600;margin:0 0 4px;letter-spacing:-.01em}
h2{font-size:17px;font-weight:500;margin:0 0 12px}
.sub{color:var(--txt-3);font-size:13.5px;margin:0 0 22px}
.panel{background:var(--panel);border:1px solid var(--line-soft);border-radius:14px;padding:22px;margin-bottom:14px}
.card{background:var(--sub);border:1px solid var(--line);border-radius:11px;padding:14px 16px;margin-bottom:10px}
label{display:block;font-size:12.5px;color:var(--txt-2);margin:12px 0 5px}
/* Text-like inputs only. Without the :not() guards this also stretched every
   radio and checkbox to 100% width with 10px padding, which pushed labels onto
   their own line and left a giant dot floating above the text. */
input:not([type=radio]):not([type=checkbox]),select{
  width:100%;background:var(--panel);color:var(--txt);border:1px solid var(--line);
  border-radius:var(--radius);font-family:inherit;font-size:14px;padding:10px 12px}
input:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px}
input[type=radio],input[type=checkbox]{
  width:15px;height:15px;padding:0;margin:0 9px 0 0;flex:none;
  accent-color:var(--accent);vertical-align:-2px;cursor:pointer}
button{background:var(--btn-bg);color:var(--btn-fg);border:0;border-radius:var(--radius);
  font-family:inherit;font-size:13.5px;font-weight:500;padding:10px 16px;cursor:pointer}
button:hover{background:var(--btn-hover)}
button.ghost{background:transparent;color:var(--txt-2);border:1px solid var(--line)}
button.ghost:hover{background:var(--sub);color:var(--txt)}
button.small{padding:6px 12px;font-size:12.5px}
button:disabled{opacity:.5;cursor:not-allowed}
.full{width:100%;margin-top:18px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.between{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.mono{font-family:var(--mono)}
.muted{color:var(--txt-3);font-size:12.5px}
.err{background:var(--warn-bg);color:var(--warn-fg);border:1px solid var(--warn-fg);
  border-radius:var(--radius);padding:9px 12px;font-size:13px;margin-top:14px}
.ok{background:var(--ok-bg);color:var(--ok-fg);border-radius:var(--radius);padding:9px 12px;font-size:13px;margin-top:14px}
.tag{display:inline-block;font-size:10.5px;font-weight:500;padding:2px 8px;border-radius:4px;background:var(--ok-bg);color:var(--ok-fg)}
.tag.grey{background:var(--sub-2);color:var(--txt-2)}
.hide{display:none}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.tile{background:var(--sub);border:1px solid var(--line);border-radius:12px;padding:16px;cursor:pointer;text-decoration:none;color:inherit;display:block}
.tile:hover{background:var(--sub-2)}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-weight:500;color:var(--txt-3);font-size:11.5px;text-transform:uppercase;
  letter-spacing:.03em;padding:8px 10px;border-bottom:1px solid var(--line)}
td{padding:9px 10px;border-bottom:1px solid var(--line-soft)}
.nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;gap:12px;flex-wrap:wrap}