:root { color-scheme:dark; --bg:#0a0a0a; --surface:#141414; --line:#303034; --text:#ededed; --muted:#aaaab1; --focus:#a6c5ed; }
[hidden] { display:none !important; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.55 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input,select { font:inherit; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
button,.link-button { min-height:42px; border:1px solid var(--line); border-radius:9px; background:#202023; color:var(--text); padding:10px 16px; cursor:pointer; text-align:center; text-decoration:none; }
button:disabled { opacity:.45; cursor:wait; }
button:hover:enabled,.link-button:hover { border-color:#676770; }
button.primary,.primary.link-button { background:#f4f4f5; border-color:#f4f4f5; color:#111; font-weight:600; }
:focus-visible { outline:2px solid var(--focus); outline-offset:4px; }
.setup-shell { max-width:1024px; margin:auto; padding:0 32px; }
.setup-header { min-height:82px; display:flex; align-items:center; flex-wrap:wrap; gap:12px; border-bottom:1px solid var(--line); }
.brand { color:var(--text); text-decoration:none; font-size:18px; font-weight:650; letter-spacing:-.035em; }
#page-mode { color:var(--muted); margin-left:auto; font-size:13px; }
#sign-out { min-height:34px; padding:5px 12px; }
main { max-width:680px; margin:48px auto 72px; }
.page-heading { margin-bottom:30px; }
.page-heading p { color:var(--muted); margin:8px 0; }
h1 { font-size:clamp(27px,4vw,36px); line-height:1.2; letter-spacing:-.035em; margin:10px 0 14px; font-weight:600; }
h2 { font-size:23px; line-height:1.3; letter-spacing:-.025em; margin:0 0 14px; font-weight:600; }
h3 { font-size:15px; margin:0 0 5px; }
p { margin:8px 0 20px; }
.progress { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); list-style:none; gap:10px; margin:0 0 28px; padding:0; counter-reset:step; }
.progress li { counter-increment:step; border-top:2px solid var(--line); padding-top:9px; color:var(--muted); font-size:12px; overflow-wrap:anywhere; }
.progress li::before { content:counter(step) ". "; }
.progress li[aria-current="step"] { color:var(--text); border-color:#f4f4f5; }
.panel { padding:30px; border:1px solid var(--line); border-radius:16px; background:var(--surface); }
.panel>p,.hint,.optional p,.pairing p { color:var(--muted); }
form { display:flex; flex-direction:column; align-items:stretch; }
label { margin:14px 0 7px; font-weight:550; }
input,select { display:block; width:100%; max-width:100%; min-width:0; min-height:44px; border:1px solid #414147; border-radius:8px; background:#0e0e10; color:var(--text); padding:10px 12px; }
form>button { align-self:flex-start; margin-top:24px; }
.hint { font-size:13px; margin:8px 0 0; }
.actions { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:26px; }
.actions .primary { margin-left:auto; }
.diagnostics { margin:24px 0; }
.diagnostics div { display:flex; gap:16px; justify-content:space-between; padding:13px 0; border-bottom:1px solid var(--line); }
.diagnostics dt { color:var(--muted); }
.diagnostics dd { text-align:right; margin:0; max-width:60%; overflow-wrap:anywhere; }
.feedback { border-left:3px solid #e29090; padding:12px 15px; background:#271a1c; border-radius:4px; overflow-wrap:anywhere; }
.activity { color:var(--muted); }
.optional,.pairing { border-top:1px solid var(--line); margin-top:26px; padding-top:20px; }
.optional p { margin-bottom:0; font-size:14px; }
.complete-mark { font-size:28px; margin-bottom:15px; }
.back-link { display:inline-block; margin-top:26px; color:var(--text); }
footer { color:var(--muted); font-size:12px; border-top:1px solid var(--line); padding:20px 0 28px; }
@media(max-width:520px) {
 .setup-shell { padding:0 18px; }
 .setup-header { min-height:72px; gap:8px; }
 #page-mode { font-size:11px; }
 main { margin:30px auto 42px; }
 .panel { padding:22px 18px; }
 .progress { gap:7px; }
 .progress li { font-size:10px; }
 .actions { align-items:stretch; gap:10px; }
 .actions>* { flex:1 1 100%; }
 .actions .primary { margin-left:0; }
 .diagnostics div { flex-direction:column; gap:3px; }
 .diagnostics dd { max-width:100%; text-align:left; }
 form>button { width:100%; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; } }