:root { --bg:#f6f9fd; --ink:#16202b; --muted:#5c6773; --accent:#1a8fe3; --accent-dark:#1577bf; --card:#ffffff; --line:#cfd8e3; --err:#d64545; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#0f1418; --ink:#eef2f6; --muted:#9aa6b2; --card:#161d24; --line:#2f3b47; } }
:root[data-theme="dark"] { --bg:#0f1418; --ink:#eef2f6; --muted:#9aa6b2; --card:#161d24; --line:#2f3b47; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.5 -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:16px; }
main { width:100%; max-width:360px; display:flex; flex-direction:column; align-items:center; gap:22px; transition:transform .3s ease-in-out; will-change:transform; }
.logo { display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); }
.logo img { width:44px; height:44px; border-radius:11px; }
.logo span { font-size:28px; font-weight:700; letter-spacing:-.02em; }
.logo b { color:var(--accent); font-weight:700; }
.card { width:100%; }
/* grouped inputs: one bordered block, fields stacked, labels aligned in a fixed column */
.group { border:1px solid var(--line); border-radius:12px; background:var(--card); overflow:hidden; }
.group label { display:grid; grid-template-columns:96px 1fr; align-items:center; }
.group label + label { border-top:1px solid var(--line); }
.group label[hidden] { display:none; }
.group label span { padding:0 0 0 14px; font-size:14px; font-weight:600; color:var(--muted); }
.group input { font:inherit; color:var(--ink); background:transparent; border:0; padding:13px 14px 13px 4px; width:100%; min-width:0; }
.group input:focus { outline:none; }
.group label:focus-within { box-shadow:inset 0 0 0 2px var(--accent); border-radius:12px; }
.group input[aria-invalid="true"] { color:var(--err); }
button { font:inherit; font-weight:700; width:100%; margin-top:12px; padding:12px 16px; border-radius:12px; border:0; cursor:pointer; background:var(--accent); color:#fff; }
button:hover { background:var(--accent-dark); }
button[disabled] { opacity:.6; cursor:default; }
.notice { margin:12px 0 0; font-size:14px; color:var(--muted); background:rgba(26,143,227,.10); border-radius:10px; padding:10px 12px; }
.notice.err { color:var(--err); background:rgba(214,69,69,.10); }
.links { text-align:center; margin:16px 0 0; font-size:14px; }
.links a { color:var(--accent); text-decoration:none; font-weight:600; }