:root { --danger: #a33131; --danger-dark: #812424; }
body { display: grid; place-items: center; padding: 1.5rem; min-height: 100vh; }
main { width: min(100%, 34rem); }
.top { display: flex; justify-content: flex-end; margin-block-end: 1rem; }
.card { background: var(--parchment); border: 1px solid color-mix(in srgb, var(--ink-grey) 14%, transparent); border-radius: 22px; padding: clamp(1.75rem, 6vw, 2.75rem); }
.card h1 { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.25rem); font-weight: 500; margin: 1rem 0 .75rem; }
.card p { color: var(--ink-grey); margin: 0 0 1rem; }
.app-note { border-inline-start: 3px solid var(--sunrise-gold); padding-inline-start: .9rem; font-size: .9375rem; }
label { display: block; font-weight: 500; margin: 1.6rem 0 .5rem; color: var(--deep-ink); }
input[type="text"] { width: 100%; border: 1px solid color-mix(in srgb, var(--ink-grey) 25%, transparent); border-radius: 12px; background: #fff; color: var(--deep-ink); padding: .85rem .95rem; font: inherit; direction: ltr; text-align: left; }
input:focus { outline: 3px solid color-mix(in srgb, var(--sunrise-gold) 25%, transparent); border-color: var(--sunrise-gold); }
.check { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; margin: 1.1rem 0; color: var(--ink-grey); line-height: 1.45; }
.check input { margin-top: .25rem; accent-color: var(--danger); }
button[type="submit"] { width: 100%; border: 0; border-radius: 12px; background: var(--danger); color: #fff; padding: .85rem 1.1rem; font: 500 1rem var(--sans); cursor: pointer; }
button[type="submit"]:hover { background: var(--danger-dark); }
button:disabled { opacity: .55; cursor: not-allowed; }
#status { min-height: 1.5rem; margin: 1rem 0 0; font-weight: 500; }
#status.error { color: var(--danger); }
#status.success { color: var(--deep-olive); }
[hidden] { display: none !important; }
.mark { height: 34px; width: auto; }