:root { --brand:#1E90FF; --ink:#1f2734; --muted:#6b7686; --line:#e7ebf0; --bg:#f5f7fa; }
* { box-sizing:border-box; }
body { margin:0; font-family:'Inter',system-ui,sans-serif; background:var(--bg); color:var(--ink); }
.hero { text-align:center; padding:40px 20px 28px; background:linear-gradient(160deg,var(--brand),#5aa9ff); color:#fff; }
.hero .logo { width:54px; height:54px; border-radius:15px; background:rgba(255,255,255,.18); display:inline-grid; place-items:center; font-size:26px; font-weight:800; margin-bottom:10px; }
.hero h1 { margin:0; font-size:24px; font-weight:700; }
.hero p { margin:6px 0 0; opacity:.9; font-size:14px; }
.wrap { max-width:460px; margin:-20px auto 0; padding:0 16px 40px; }
.tabs { display:flex; background:#fff; border-radius:12px; padding:5px; box-shadow:0 4px 16px rgba(16,24,40,.06); margin-bottom:16px; }
.tabs a { flex:1; text-align:center; padding:10px; border-radius:9px; text-decoration:none; color:var(--muted); font-weight:600; font-size:14px; }
.tabs a.on { background:var(--brand); color:#fff; }
.card { background:#fff; border-radius:14px; padding:20px; box-shadow:0 1px 2px rgba(16,24,40,.04),0 4px 16px rgba(16,24,40,.06); }
.card label { display:block; font-size:13px; color:var(--muted); font-weight:600; margin:12px 0 6px; }
.card label:first-of-type { margin-top:0; }
.card .opt { color:#aab3c0; font-weight:400; }
.card input { width:100%; border:1px solid var(--line); border-radius:10px; padding:12px 14px; font-size:16px; color:var(--ink); }
.card input:focus { outline:none; border-color:var(--brand); }
.or { text-align:center; color:#aab3c0; font-size:12px; margin:14px 0; position:relative; }
.btn { width:100%; margin-top:18px; background:var(--brand); color:#fff; border:none; border-radius:10px; padding:14px; font-size:15px; font-weight:700; }
.btn.ghost { display:block; text-align:center; text-decoration:none; background:#eef2f7; color:var(--ink); margin-top:16px; }
.slip { background:#fff; border-radius:14px; padding:22px; box-shadow:0 4px 16px rgba(16,24,40,.06); border-top:4px solid var(--brand); }
.slip-name { font-size:20px; font-weight:700; margin-bottom:14px; }
.slip-row { display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px dashed var(--line); font-size:14px; }
.slip-row span { color:var(--muted); }
.msg { padding:12px 16px; border-radius:10px; margin-bottom:16px; font-size:14px; }
.msg.err { background:#fdecec; color:#b42318; }
.msg.ok { background:#eafaf0; color:#15803d; text-align:center; font-weight:600; }
.fine { text-align:center; color:#aab3c0; font-size:12px; margin-top:22px; }