:root { color-scheme: light dark; --bg:#0f172a; --card:#1e293b; --fg:#f1f5f9;
  --muted:#94a3b8; --blue:#2563eb; --blue2:#1d4ed8; --amber:#b45309; --ok:#16a34a; --err:#dc2626; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:var(--bg); color:var(--fg); font-family:system-ui,-apple-system,sans-serif; padding:1rem; }
main { width:min(92vw,26rem); }
.card { background:var(--card); border-radius:1.25rem; padding:1.5rem; display:flex;
  flex-direction:column; gap:1rem; box-shadow:0 10px 30px rgba(0,0,0,.35); }
h1 { margin:.2rem 0; font-size:1.5rem; }
h2 { margin:0; font-size:1rem; font-weight:600; opacity:.9; }
.muted { color:var(--muted); font-size:.9rem; margin:.2rem 0; }
button { font-size:1.15rem; padding:1rem; border:none; border-radius:.9rem; color:#fff;
  cursor:pointer; width:100%; transition:filter .15s, opacity .15s; }
button:disabled { opacity:.55; cursor:default; }
button:active { filter:brightness(.9); }
.blue { background:var(--blue); } .amber { background:var(--amber); }
.ghost { background:#334155; }
.row { display:flex; gap:.7rem; }
.row > button { width:auto; flex:1; }
.section { display:flex; flex-direction:column; gap:.6rem; padding-top:.4rem;
  border-top:1px solid #334155; }
.status { min-height:1.3em; font-size:.92rem; text-align:center; }
.status.ok { color:var(--ok); } .status.err { color:var(--err); }
.pill { display:inline-block; font-size:.75rem; background:#334155; color:var(--muted);
  padding:.15rem .5rem; border-radius:1rem; }