:root { --ink:#20232d; --muted:#777b88; --paper:#faf9f7; --accent:#6959f5; --accent-soft:#eeeaff; }
* { box-sizing:border-box; }
body { min-height:100vh; margin:0; display:grid; place-items:center; padding:24px; color:var(--ink); background:#f2f1f5; font-family:'DM Sans',system-ui,sans-serif; }
.card { width:min(100%,420px); padding:32px 28px; border-radius:24px; background:var(--paper); box-shadow:0 25px 80px #17152222; }
.eyebrow { margin:0 0 8px; color:#9a98a2; font-size:11px; font-weight:700; letter-spacing:.13em; }
h1 { margin:0 0 8px; font-size:28px; letter-spacing:-.04em; }
.muted { margin:0 0 18px; color:var(--muted); font-size:14px; line-height:1.45; }
.tabs { display:flex; gap:8px; margin-bottom:18px; border-bottom:1px solid #e8e7ec; }
.tab { flex:1; padding:12px 8px; border:0; background:transparent; color:var(--muted); font:inherit; font-weight:700; text-align:center; text-decoration:none; min-height:44px; }
.tab.active { color:var(--accent); border-bottom:3px solid var(--accent); }
label { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; color:var(--muted); font-size:12px; font-weight:700; }
input { width:100%; padding:12px 13px; border:1px solid #e8e7ec; border-radius:11px; outline:0; color:var(--ink); background:#fff; font:inherit; font-weight:400; min-height:44px; }
button, .primary { width:100%; margin-top:8px; padding:13px 17px; border:0; border-radius:12px; color:#28223d; background:var(--accent-soft); font:inherit; font-weight:700; min-height:44px; cursor:pointer; text-align:center; text-decoration:none; display:block; }
.ghost { background:transparent; color:var(--accent); margin-top:6px; }
.error { margin:0 0 14px; color:#c35e7b; font-size:13px; }
.ok { margin:0 0 14px; color:#38a66a; font-size:13px; }
.links { margin-top:16px; text-align:center; }
.links a { color:var(--accent); font-size:13px; font-weight:700; text-decoration:none; }
.hint { margin:0 0 12px; color:var(--muted); font-size:12px; }
.panel[hidden] { display:none; }