:root { --ink: #1F2A37; --ink-f: #5D6875; --sage: #46644C; --sage-d: #2F5136; --mist: #EAF1EB; --linen: #E3E8E4; --warm: #F7F8F6; --white: #FFFFFF; --red: #A8432F; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--warm); color: var(--ink); font-family: Raleway, Helvetica, Arial, sans-serif; }
header { background: #1F2A37; color: #F3F1EA; padding: 22px 16px; }
header .brand { font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #B9C9BC; }
header h1 { font-family: "Playfair Display", Georgia, serif; font-weight: 400; font-size: 26px; margin: 6px 0 0; }
main { max-width: 520px; margin: 0 auto; padding: 20px 16px 60px; }
.card { background: var(--white); border: 0.5px solid var(--linen); border-radius: 16px; padding: 18px 20px; margin-bottom: 16px; }
h2 { font-family: "Playfair Display", Georgia, serif; font-weight: 400; font-size: 20px; margin: 0 0 6px; }
p { line-height: 1.5; }
.sub, .note { color: var(--ink-f); font-size: 14px; }
label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--ink-f); margin-top: 12px; }
input { font: inherit; font-size: 16px; padding: 11px 12px; border: 1px solid #CBD3CD; border-radius: 10px; background: #fff; color: var(--ink); width: 100%; }
button, .btn { font: inherit; font-weight: 600; font-size: 15px; padding: 11px 18px; border-radius: 10px; border: 1px solid #CBD3CD; background: #fff; color: var(--ink); cursor: pointer; text-decoration: none; display: inline-block; margin-top: 14px; }
button.dark, .btn.dark { background: var(--sage-d); border-color: var(--sage-d); color: #fff; }
.err { color: var(--red); font-size: 14px; margin-top: 10px; }
.ok { color: var(--sage-d); font-size: 14px; margin-top: 10px; }
.check { flex-direction: row; align-items: center; gap: 10px; font-size: 15px; color: var(--ink); }
.check input { width: auto; }
[hidden] { display: none !important; }