:root{
  color-scheme:light dark;
  --bg:#f8fafc; --surface:#fff; --surface-2:#f1f5f9; --border:#e2e8f0;
  --text:#0f172a; --muted:#64748b;
  --primary:#4f46e5; --primary-hover:#4338ca; --primary-fg:#fff;
  --danger:#dc2626; --danger-hover:#b91c1c; --danger-fg:#fff;
  --success:#059669;
  --ok-bg:#ecfdf5; --ok-border:#a7f3d0;
  --err-bg:#fef2f2; --err-border:#fecaca;
  --ring:rgba(79,70,229,.4);
  --radius:12px; --radius-sm:8px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow:0 1px 3px rgba(15,23,42,.1),0 1px 2px rgba(15,23,42,.06);
  --font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#020617; --surface:#0f172a; --surface-2:#1e293b; --border:#1e293b;
  --text:#e2e8f0; --muted:#94a3b8;
  --primary:#6366f1; --primary-hover:#818cf8;
  --danger:#f87171; --danger-hover:#fca5a5; --success:#34d399;
  --ok-bg:rgba(16,185,129,.12); --ok-border:rgba(16,185,129,.4);
  --err-bg:rgba(248,113,113,.12); --err-border:rgba(248,113,113,.4);
  --ring:rgba(129,140,248,.45);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 4px 16px rgba(0,0,0,.45);
}}

/* base */
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.6}
.container{width:100%;max-width:44rem;margin-inline:auto;padding-inline:1.25rem}
main.container{padding-block:2rem 4rem}
h1{font-size:1.55rem;font-weight:700;letter-spacing:-.02em;line-height:1.2}
h2{font-size:1.1rem;font-weight:600;letter-spacing:-.01em}
h1+p,.lead{color:var(--muted)}
p{margin-top:.5rem}
a{color:var(--primary);font-weight:500}
a:hover{text-decoration:underline}
strong{font-weight:600}
small,.muted{color:var(--muted);font-size:.875rem}
hr{border:0;border-top:1px solid var(--border);margin-block:1.5rem}
code{font-family:var(--mono);font-size:.85em;background:var(--surface-2);padding:.12em .4em;border-radius:5px;word-break:break-word}
pre{font-family:var(--mono);font-size:.8125rem;line-height:1.55;background:var(--surface-2);border:1px solid var(--border);padding:.85rem 1rem;border-radius:var(--radius-sm);overflow-x:auto;white-space:pre-wrap;word-break:break-all;margin-top:.5rem}
pre code{background:none;padding:0}
pre[hidden]{display:none}

/* top bar */
.topbar{background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10;backdrop-filter:saturate(1.2)}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.8rem}
.brand{display:inline-flex;align-items:center;gap:.55rem;font-weight:700;letter-spacing:-.01em}
.brand__dot{width:.7rem;height:.7rem;border-radius:50%;background:linear-gradient(135deg,var(--primary),#22d3ee);box-shadow:0 0 0 3px var(--ring)}
.topbar__handle{font-family:var(--mono);font-size:.85rem;color:var(--muted)}

/* surfaces */
.card,section,.step{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem 1.4rem;margin-block:1rem;box-shadow:var(--shadow-sm)}
.card>:first-child,section>:first-child,.step>:first-child{margin-top:0}
.step[hidden]{display:none}
section h2,.step h2,.card h2{margin-bottom:.5rem}

/* actions */
button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:550;font-size:.95rem;line-height:1.1;padding:.6rem 1.05rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm);transition:background .12s,border-color .12s,box-shadow .12s,opacity .12s}
button:hover,.btn:hover{background:var(--surface-2)}
button:disabled,.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--primary);border-color:var(--primary);color:var(--primary-fg)}
.btn-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.btn-danger{background:var(--danger);border-color:var(--danger);color:var(--danger-fg)}
.btn-danger:hover{background:var(--danger-hover);border-color:var(--danger-hover)}
.btn-ghost{background:transparent;border-color:transparent;box-shadow:none}
.btn-ghost:hover{background:var(--surface-2)}
.btn-block{width:100%}

/* inputs */
input[type=text],input[type=password],input:not([type]),textarea{width:100%;font-size:.95rem;padding:.55rem .7rem;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm)}
input::placeholder,textarea::placeholder{color:var(--muted)}
textarea{min-height:8rem;font-family:var(--mono);font-size:.8125rem;resize:vertical}
label{display:inline-flex;align-items:center;gap:.5rem}
input[type=checkbox]{width:1.05rem;height:1.05rem;accent-color:var(--primary)}

:where(button,.btn,a,input,textarea):focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring)}

/* feedback */
.ok,.err,.alert{border:1px solid var(--border);border-left-width:3px;border-radius:var(--radius-sm);padding:.6rem .85rem;font-size:.925rem}
.ok{color:var(--success);background:var(--ok-bg);border-color:var(--ok-border);border-left-color:var(--success)}
.err{color:var(--danger);background:var(--err-bg);border-color:var(--err-border);border-left-color:var(--danger)}
h2.ok{font-size:1.1rem}
.badge{display:inline-flex;align-items:center;gap:.35rem;font-size:.75rem;font-weight:600;padding:.2rem .55rem;border-radius:999px;background:var(--surface-2);color:var(--muted);border:1px solid var(--border)}

/* layout helpers */
.stack>*+*{margin-top:.75rem}
.cluster{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.codes{display:grid;grid-template-columns:repeat(2,1fr);gap:.45rem .8rem}
.codes code{background:var(--surface-2);border:1px solid var(--border);padding:.45rem .6rem;border-radius:6px;text-align:center;font-size:.85rem}

/* standalone auth screen (/login): centered lockup, no app chrome */
.auth{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:1.5rem}
.auth__lockup{width:100%;max-width:22rem;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.85rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:2.25rem 1.75rem;box-shadow:var(--shadow)}
.auth__avatar{width:64px;height:64px;border-radius:50%;border:2px solid var(--border);background:linear-gradient(135deg,var(--primary),#22d3ee);display:grid;place-items:center;overflow:hidden;box-shadow:var(--shadow-sm)}
.auth__avatar img{width:100%;height:100%;object-fit:cover}
.auth__title{font-size:1.4rem;font-weight:700;letter-spacing:-.02em;word-break:break-all}
.auth__subtitle{color:var(--muted);font-size:.95rem}
.auth__lockup .btn-block{margin-top:.4rem}
.auth__lockup #msg{width:100%}

/* forms: block field label + avatar dropzone */
.field-label{display:block;font-weight:600;margin-bottom:.35rem}
.dropzone{display:flex;align-items:center;gap:1rem;border:1.5px dashed var(--border);border-radius:var(--radius-sm);padding:1rem;background:var(--surface-2);transition:border-color .12s,box-shadow .12s}
.dropzone--over{border-color:var(--primary);box-shadow:0 0 0 3px var(--ring)}
.dropzone__preview{width:56px;height:56px;border-radius:50%;border:2px solid var(--border);object-fit:cover;flex:0 0 auto;background:var(--surface)}
.dropzone__hint{font-size:.9rem}
.dropzone__hint p{margin-top:.15rem}
.signout-row{margin-top:2rem;text-align:center}