:root{ --bg:#eaf3fb; --card:#fff; --text:#444; --muted:#666; --heading:#046fb7; --accent:#cead80; --accent-strong:#b8935f; --border:#e6e2d9; --err:#b04a46; }
@media (prefers-color-scheme: dark){
  :root{ --bg:#161513; --card:#1e1c19; --text:#e8e5de; --muted:#a39d8f; --heading:#5ea3d6; --accent:#ddbd8f; --accent-strong:#c9a774; --border:#34322b; --err:#e8a5a0; }
}
*{ box-sizing:border-box }
html,body{ margin:0; min-height:100%; background:var(--bg); color:var(--text); font-family:"Open Sans",-apple-system,Arial,sans-serif; -webkit-font-smoothing:antialiased }
body{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px }
.card{ width:100%; max-width:380px; background:var(--card); border:1px solid var(--border); border-radius:4px 32px 4px 4px; padding:36px 32px 30px; box-shadow:0 8px 28px rgba(0,0,0,.08) }
.mark{ font-size:28px; line-height:1; margin-bottom:14px }
h1{ font-family:"Barlow Condensed",Arial,sans-serif; font-weight:500; color:var(--heading); font-size:34px; margin:0 0 4px; letter-spacing:-.01em }
.sub{ margin:0 0 26px; color:var(--muted); font-size:14px }
label{ display:block; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 6px }
input{ width:100%; font:inherit; font-size:16px; color:var(--text); background:transparent; border:1px solid var(--border); border-radius:8px; padding:12px 14px; margin-bottom:18px; outline:none }
input:focus{ border-color:var(--heading); box-shadow:0 0 0 3px rgba(4,111,183,.12) }
button{ width:100%; font:inherit; font-size:15px; font-weight:500; color:#fff; background:var(--accent); border:0; border-radius:999px; padding:13px; cursor:pointer; margin-top:4px }
button:hover{ background:var(--accent-strong) }
.err{ color:var(--err); font-size:13px; margin:-4px 0 14px }