:root { font-family: system-ui, sans-serif; color: #16213e; background: #f7f8fb; }
* { box-sizing: border-box; }
main { max-width: 42rem; margin: auto; padding: 1.25rem; }
header, form { margin-bottom: 1rem; }
form { background: white; padding: 1.25rem; border-radius: 1rem; box-shadow: 0 4px 24px #16213e0d; }
label { display: block; margin: 1rem 0; }
input, select, textarea, button { font: inherit; padding: .75rem; border-radius: .5rem; border: 1px solid #8390aa; }
input, textarea { display: block; width: 100%; margin-top: .35rem; }
button { min-height: 44px; background: #2148a0; color: white; cursor: pointer; }
button:disabled { opacity: .6; cursor: wait; }
:focus-visible { outline: 3px solid #3976ec; outline-offset: 3px; }
[hidden] { display: none !important; }
#status { min-height: 1.5rem; }
.card { background: white; padding: 1.25rem; border-radius: 1rem; margin-bottom: 1rem; box-shadow: 0 4px 24px #16213e0d; }
nav, .actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
nav button[aria-pressed="false"], .secondary { background: white; color: #2148a0; }
.multiline { white-space: pre-wrap; }
p, li, h2, h3, a { overflow-wrap: anywhere; }
textarea { resize: vertical; }
select { max-width: 100%; min-height: 44px; }
fieldset { min-width: 0; border: 1px solid #8390aa; border-radius: .5rem; margin: 1rem 0; }
.hint { color: #455570; line-height: 1.5; }
a { color: #2148a0; }
ul { padding-left: 1.25rem; }
li { margin-bottom: .5rem; }
@media (min-width: 640px) { .columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
@media (max-width: 360px) { main { padding: .75rem; } form, .card { padding: 1rem; } }