:root {
  color-scheme: dark;
  font: 1rem/1.6 system-ui, sans-serif;
  --bg: #0b0b0d; --text: #f5f5f7; --control-bg: #101013;
  --input-border: #383840; --border: #29292f; --muted: #b2b2ba;
  --accent: #ff4a2e; --accent-hover: #ff6a4d; --on-accent: #101013; --link: #f0a088;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #fafafa; --text: #18181b; --control-bg: #ffffff;
  --input-border: #a8a8a8; --border: #dbdbdb; --muted: #4f4f58;
  --accent: #b81f0c; --accent-hover: #94180a; --on-accent: #ffffff; --link: #87351e;
}
body { margin: 0; background: var(--bg); color: var(--text); }
main { box-sizing: border-box; max-width: 38rem; margin: 8vh auto; padding: 1.5rem; }
h1 { font-size: clamp(1.7rem, 5vw, 2.25rem); line-height: 1.2; }
.brand { letter-spacing: .12em; font-weight: 750; }
button, input { box-sizing: border-box; font: inherit; padding: .85rem 1rem; border-radius: .6rem; width: 100%; }
button { border: 0; background: var(--accent); color: var(--on-accent); cursor: pointer; }
button:disabled { opacity: .55; cursor: default; }
input { border: 1px solid var(--input-border); background: var(--control-bg); color: inherit; }
label { display: block; margin-top: 1rem; font-weight: 650; }
section { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--border); }
section button { margin-top: 1rem; }
ul { padding: 0; list-style: none; }
li { margin: .7rem 0; padding: .8rem; border: 1px solid var(--border); border-radius: .6rem; }
li button { width: auto; margin: .5rem 0 0; padding: .5rem .7rem; }
.help { color: var(--muted); font-size: .9rem; }
a { display: inline-block; margin-top: 1.5rem; color: var(--link); padding: .5rem 0; }
:focus-visible { outline: 3px solid var(--accent-hover); outline-offset: 4px; }
#status { min-height: 3.2rem; }