:root {
  color-scheme: light dark;
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1.45;
  --bg: #f5f6f7;
  --surface: #fff;
  --text: #17202a;
  --muted: #5d6873;
  --accent: #176b52;
  --border: #c8ced3;
  --danger: #a52a2a;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--text); background: var(--bg); }
main { width: min(100%, 46rem); margin: 0 auto; padding: max(1rem, env(safe-area-inset-top)) 1rem max(2rem, env(safe-area-inset-bottom)); }
header, nav, .status-line, .row { display: flex; align-items: center; gap: .75rem; }
header, .status-line { justify-content: space-between; }
h1 { font-size: 1.45rem; }
h2 { font-size: 1.1rem; margin-top: 0; }
h3 { font-size: 1rem; }
section { background: var(--surface); border: 1px solid var(--border); border-radius: .5rem; padding: 1rem; margin: 1rem 0; }
label { display: block; font-weight: 650; margin: .8rem 0 .3rem; }
select, textarea, input[type=file] { display: block; width: 100%; font: inherit; }
select, textarea { border: 1px solid var(--border); border-radius: .35rem; padding: .7rem; background: var(--surface); color: var(--text); }
textarea { resize: vertical; }
button { min-height: 2.75rem; border: 0; border-radius: .35rem; padding: .6rem .9rem; background: var(--accent); color: white; font: inherit; font-weight: 650; }
button.secondary { color: var(--text); background: transparent; border: 1px solid var(--border); }
button.danger { background: var(--danger); }
button:disabled { opacity: .5; }
button:focus-visible, select:focus-visible, textarea:focus-visible, input:focus-visible { outline: 3px solid #4f9ee8; outline-offset: 2px; }
a { color: var(--accent); }
.setup { max-width: 42rem; }
.setup section { margin-bottom: 1rem; }
.setup code { overflow-wrap: anywhere; }
.setup pre { min-height: auto; }
.row { flex-wrap: wrap; margin-top: 1rem; }
.state { font-weight: 700; }
.muted { color: var(--muted); overflow-wrap: anywhere; }
pre { min-height: 7rem; max-height: 30rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; padding: .75rem; border: 1px solid var(--border); border-radius: .35rem; background: var(--bg); }
fieldset { border: 1px solid var(--border); margin: 1rem 0; }
.file-option { display: flex; align-items: start; gap: .5rem; margin: .45rem 0; overflow-wrap: anywhere; }
.file-option input { margin-top: .25rem; }
@media (max-width: 28rem) {
  .row button { flex: 1 1 10rem; }
  header { align-items: baseline; }
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #11161b; --surface: #1b2229; --text: #eef2f4; --muted: #adb7bf; --border: #44505a; --accent: #2d8b6f; }
}