:root {
  --bg:#f6f7f9; --card:#fff; --ink:#14181f; --muted:#667085; --line:#e3e6ec; --field:#fff;
  --accent:#1f4fd8; --accent-ink:#fff; --red:#d92d20; --red-bg:#fdecea; --key:#f1f3f7; --green:#067647; --green-bg:#e6f6ec;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#0e1116; --card:#161b22; --ink:#e8ecf2; --muted:#94a0b4; --line:#262d38; --field:#0f141b;
          --accent:#6d8dff; --accent-ink:#0b1020; --red:#ff6b5e; --red-bg:#3a1714; --key:#1d242e; --green:#4cd68a; --green-bg:#11301f; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; min-height:100vh; }
a { color: var(--accent); text-decoration:none; } a:hover { text-decoration: underline; }
.center { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px 16px; }
.panel { width:100%; max-width:360px; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:22px 20px 20px; }
.panel h1 { margin:0 0 4px; font-size:20px; letter-spacing:-.01em; }
.sub { color:var(--muted); font-size:14px; margin:0 0 16px; }
label.lbl { display:block; font-size:13px; color:var(--muted); margin:0 0 4px; font-weight:550; }
input[type=text], input[type=password] { width:100%; min-height:46px; padding:9px 12px; font:inherit; font-size:16px; color:var(--ink); background:var(--field); border:1px solid var(--line); border-radius:10px; outline:none; }
input:focus { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.dots { display:flex; justify-content:center; gap:12px; margin:16px 0 12px; min-height:20px; }
.dots i { width:14px; height:14px; border-radius:50%; border:2px solid var(--muted); display:block; }
.dots i.on { background:var(--ink); border-color:var(--ink); }
.pad { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.pad button { min-height:58px; font:inherit; font-size:22px; font-weight:600; color:var(--ink); background:var(--key); border:1px solid var(--line); border-radius:12px; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; user-select:none; }
.pad button:active { filter:brightness(.92); transform:scale(.98); }
.pad button.fn { font-size:15px; color:var(--muted); }
.err { color:var(--red); background:var(--red-bg); border-radius:10px; padding:9px 12px; font-size:14px; margin:12px 0 0; }
.err:empty { display:none; }
.go { margin-top:14px; width:100%; min-height:48px; font:inherit; font-weight:650; border:0; border-radius:10px; background:var(--accent); color:var(--accent-ink); cursor:pointer; }
.go[disabled] { opacity:.45; cursor:not-allowed; }
.wrap { max-width: 860px; margin:0 auto; padding: 18px 16px 60px; }
.head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:22px; }
.head h1 { margin:0; font-size:22px; letter-spacing:-.01em; }
.cards { display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
.pcard { display:block; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px; color:var(--ink); min-height:120px; }
.pcard:hover { text-decoration:none; border-color:var(--accent); }
.pcard h2 { margin:0 0 6px; font-size:17px; } .pcard p { margin:0; color:var(--muted); font-size:14.5px; }
.badge { display:inline-block; margin-top:12px; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:700; background:var(--green-bg); color:var(--green); text-transform:uppercase; letter-spacing:.05em; }
.btn { min-height:42px; padding:0 14px; font:inherit; font-weight:600; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer; }