body { margin:0; padding:2rem 1rem; }
body > div { max-width:48rem; margin:auto; background:var(--as-surface); border:1px solid var(--as-border); border-radius:.5rem; overflow:hidden; }
* { box-sizing:border-box; }
.form-header { padding:2rem; text-align:center; }
.form-header img { display:block; margin:0 auto 1rem; }
#formContainer,#successMessage { padding:2rem; }
.hidden { display:none; }
form > div, form > p { margin-bottom:1.5rem; }
label { display:block; font-weight:600; margin-bottom:.5rem; }
.form-input { display:block; width:100%; padding:.75rem; border:1px solid var(--as-border); border-radius:var(--as-radius); font:inherit; background:var(--as-surface); color:var(--as-text); }
input[type=radio],input[type=checkbox] { width:1.25rem; height:1.25rem; accent-color:var(--as-primary); }
.flex { display:flex; gap:1rem; }
.items-center { align-items:center; }
.flex-col { flex-direction:column; }
.grid { display:grid; gap:1.5rem; }
button { padding:.75rem 1.5rem; background:var(--as-primary); color:var(--as-on-primary); border:0; border-radius:var(--as-radius); font:inherit; cursor:pointer; }
button:hover { background:var(--as-primary-hover); }
.text-red-500 { color:var(--as-danger); }
.border-red-500 { border-color:var(--as-danger); }
.text-xs { font-size:.85rem; }
#successMessage svg { width:3rem; height:3rem; color:var(--as-success); }
@media(min-width:40rem) { .grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .grid:first-child,.grid:nth-child(2) { grid-template-columns:1fr; } }
@media(max-width:30rem) { #formContainer,.form-header { padding:1rem; } .flex { gap:.5rem; flex-wrap:wrap; } }