:root { color-scheme: dark; --bg: #101010; --card: #171717; --line: rgba(255,255,255,.09); --line2: rgba(255,255,255,.16);
  --t1: #edecec; --t2: #b8b8b8; --t3: #858585; --accent: #3b82f6; }
@media (prefers-color-scheme: light) {
  :root { color-scheme: light; --bg: #eef0f3; --card: #ffffff; --line: rgba(0,0,0,.08); --line2: rgba(0,0,0,.16);
    --t1: #111216; --t2: #474b55; --t3: #7a7f8a; }
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { display: grid; place-items: center; min-height: 100vh; padding: 24px 16px; background: var(--bg); color: var(--t2);
  font: 400 15px/1.5 Inter, system-ui, sans-serif; }
.card { width: 100%; max-width: 400px; padding: 32px 28px 24px; border-radius: 18px; background: var(--card); box-shadow: 0 0 0 1px var(--line); }
.brand { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; font-weight: 600; color: var(--t1); }
.mark { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font: 700 13px/1 Inter, sans-serif; color: #fff; background: var(--accent); }
h1 { margin: 0 0 6px; font-size: 22px; font-weight: 500; letter-spacing: -0.02em; color: var(--t1); }
.sub { margin: 0 0 22px; color: var(--t3); font-size: 14px; }
.sub b { color: var(--t1); font-weight: 500; }
label { display: block; margin-bottom: 14px; font-size: 13px; color: var(--t2); }
input { display: block; width: 100%; margin-top: 6px; height: 42px; padding: 0 14px; border: 0; border-radius: 10px;
  font: 400 15px/1 Inter, sans-serif; color: var(--t1); background: transparent; box-shadow: inset 0 0 0 1px var(--line2); }
input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--t1); }
.primary { width: 100%; height: 42px; margin-top: 6px; border: 0; border-radius: 999px; cursor: pointer;
  font: 500 14.5px/1 Inter, sans-serif; color: var(--bg); background: var(--t1); }
.primary:disabled { opacity: .65; cursor: default; }
.alt { margin: 16px 0 0; text-align: center; font-size: 14px; color: var(--t3); }
.link { border: 0; padding: 0; background: none; cursor: pointer; font: inherit; color: var(--t1); text-decoration: underline; text-underline-offset: 3px; }
.err { margin-top: 16px; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; color: var(--t1); box-shadow: inset 0 0 0 1px rgba(239,68,68,.5); }
.fine { margin: 22px 0 0; font-size: 12px; color: var(--t3); text-align: center; }
.fine a { color: var(--t2); }
.status { margin: 16px 0 0; font-size: 14px; color: var(--t2); }
.status a { color: var(--t1); }