:root { --bg:#f6f5f2; --card:#ffffff; --ink:#1c1b19; --muted:#6b6862; --line:#e4e1da; --accent:#1f3a2e; --accent-ink:#ffffff; --bad:#a3271d; --ok:#1f6b3a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#141413; --card:#1d1c1a; --ink:#f2f0eb; --muted:#a29e96; --line:#34322e; --accent:#cfe3d6; --accent-ink:#11201a; --bad:#ff8a7e; --ok:#86d3a2; } }
:root[data-theme="dark"] { --bg:#141413; --card:#1d1c1a; --ink:#f2f0eb; --muted:#a29e96; --line:#34322e; --accent:#cfe3d6; --accent-ink:#11201a; --bad:#ff8a7e; --ok:#86d3a2; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; display:grid; place-items:center; background:var(--bg); color:var(--ink); font:15px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; padding:24px 16px; }
.card { width:100%; max-width:400px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:28px; }
.brand { font-weight:700; letter-spacing:.02em; margin:0 0 4px; } .brand span { color:var(--muted); font-weight:500; }
h1 { font-size:20px; margin:18px 0 6px; } p.sub { color:var(--muted); margin:0 0 18px; }
label { display:block; font-size:13px; color:var(--muted); margin:12px 0 4px; }
input { width:100%; font:inherit; padding:10px 12px; border:1px solid var(--line); border-radius:9px; background:transparent; color:var(--ink); }
button { font:inherit; font-weight:600; padding:10px 14px; border-radius:9px; border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink); cursor:pointer; width:100%; margin-top:18px; }
button.ghost { background:transparent; color:var(--ink); border-color:var(--line); }
button:disabled { opacity:.6; cursor:default; }
.row { display:flex; gap:10px; } .row button { margin-top:18px; }
.msg { margin-top:14px; font-size:14px; } .msg.bad { color:var(--bad); } .msg.ok { color:var(--ok); }
ul.scopes { margin:8px 0 0; padding-left:18px; color:var(--muted); }
.box { border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin-top:10px; font-size:14px; }