:root {
  --bg: #f8fafc; --brass: #6366f1; --brass-ink: #4f46e5; --accent-2: #8b5cf6;
  --brass-tint: rgba(99,102,241,.12); --loss: #e11d48; --loss-tint: rgba(244,63,94,.1);
  --ink: #1e293b; --ink-soft: #64748b;
}
* { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 1.2rem;
  font-family: 'Inter', system-ui, sans-serif; background: var(--bg); color: var(--ink); font-size: 1rem;
}
.card { width: 100%; max-width: 420px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 2.6rem 2.3rem; box-shadow: 0 20px 50px -20px rgba(15,23,42,.18); }
h1 { font-family: 'Inter', sans-serif; font-size: 1.6rem; font-weight: 700; letter-spacing: -.01em; margin: 0 0 .3rem; display: flex; align-items: center; gap: .6rem; color: var(--ink); }
.mark { width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(135deg, var(--brass), var(--accent-2)); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 1.1rem; box-shadow: 0 3px 10px -3px rgba(99,102,241,.5); }
p.sub { color: var(--ink-soft); font-size: 1rem; margin: 0 0 1.9rem; }
label { font-size: .92rem; font-weight: 600; display: block; margin-bottom: .4rem; color: var(--ink); }
input { width: 100%; padding: .8rem .95rem; border-radius: 9px; border: 1.5px solid #e2e8f0; background: #f8fafc; color: var(--ink); font: inherit; font-size: 1rem; outline: none; margin-bottom: .4rem; transition: border-color .15s, box-shadow .15s; }
input:focus { border-color: var(--brass); background: #fff; box-shadow: 0 0 0 4px var(--brass-tint); }
.check-row { display: flex; align-items: center; gap: .55rem; font-size: .93rem; color: var(--ink-soft); margin: 1.1rem 0 1.6rem; }
.check-row input { width: auto; margin: 0; accent-color: var(--brass-ink); }
button { width: 100%; padding: .85rem; border-radius: 9px; border: 0; background: linear-gradient(135deg, var(--brass), var(--accent-2)); color: #fff; font: inherit; font-size: 1.02rem; font-weight: 600; cursor: pointer; box-shadow: 0 4px 14px -4px rgba(99,102,241,.5); transition: filter .15s; }
button:hover { filter: brightness(1.06); }
.err { background: var(--loss-tint); color: var(--loss); border-radius: 9px; padding: .75rem .95rem; font-size: .93rem; margin-bottom: 1.2rem; }
.form-error { color: var(--loss); font-size: .85rem; margin: -.15rem 0 .9rem; }