:root { --bg:#f6f7fb; --card:#fff; --ink:#1b1f2a; --muted:#6b7280; --line:#e5e7eb; --brand:#2f6df6; --bad:#d23c3c; --ok:#1f9d55; }
* { box-sizing:border-box }
body { margin:0; font:16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color:var(--ink); background:var(--bg) }
.top { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; background:var(--card); border-bottom:1px solid var(--line) }
.logo { font-weight:700; text-decoration:none; color:var(--ink); font-size:18px }
nav a, nav button { margin-left:14px; color:var(--brand); background:none; border:0; font:inherit; cursor:pointer; text-decoration:none }
.wrap { max-width:460px; margin:40px auto; padding:0 16px }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:24px }
.card + .card { margin-top:16px }
h1 { font-size:22px; margin:0 0 16px }
h2 { font-size:17px; margin:0 0 12px }
label { display:block; margin:12px 0 6px; font-size:14px; color:var(--muted) }
input { width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:10px; font:inherit }
input:focus { outline:2px solid var(--brand); border-color:transparent }
.btn { display:inline-block; width:100%; margin-top:16px; padding:12px; border:0; border-radius:10px; background:var(--brand); color:#fff; font:inherit; font-weight:600; cursor:pointer }
.btn.secondary { background:#eef2ff; color:var(--brand) }
.btn:disabled { opacity:.6; cursor:default }
.links { margin-top:14px; font-size:14px; display:flex; flex-wrap:wrap; gap:6px 16px }
.links a { color:var(--brand); cursor:pointer; text-decoration:none }
.err { color:var(--bad); font-size:14px; min-height:20px; margin-top:10px }
.ok { color:var(--ok); font-size:14px; margin-top:10px }
.muted { color:var(--muted); font-size:14px }
.row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--line); font-size:14px }
.row:first-of-type { border-top:0 }
.pill { font-size:12px; padding:2px 8px; border-radius:99px; background:#eef2ff; color:var(--brand) }
.small { font-size:13px; color:var(--muted); background:none; border:0; cursor:pointer }
.tabs { display:flex; gap:8px; margin-bottom:14px }
.tabs button { flex:1; padding:9px; border:1px solid var(--line); background:#fff; border-radius:10px; font:inherit; cursor:pointer }
.tabs button.on { border-color:var(--brand); color:var(--brand); font-weight:600 }