:root { color-scheme: light; font-family: system-ui, sans-serif; color: #182e38; background: #eef2f3; }
* { box-sizing: border-box; }
body { margin: 0; }
main { width: min(100% - 2rem, 40rem); margin: 2rem auto; padding: 2rem; background: white; border: 1px solid #cbd8dc; border-radius: 1rem; }
.brand { font-size: 1.3rem; font-weight: 750; color: #00665d; margin-bottom: .25rem; }
header p, footer { color: #475f69; }
h1 { font-size: 1.8rem; } h2 { font-size: 1.2rem; margin-top: 2rem; }
form { display: grid; gap: .65rem; }
input, button { font: inherit; min-height: 2.8rem; border-radius: .4rem; }
input { width: 100%; border: 1px solid #718992; padding: .65rem; margin-bottom: .5rem; }
button { cursor: pointer; border: 0; padding: .65rem 1.1rem; color: white; background: #00665d; }
button:disabled { opacity: .6; cursor: wait; }
:focus-visible { outline: 3px solid #b34d00; outline-offset: 3px; }
dd { margin: .3rem 0 1rem; overflow-wrap: anywhere; } dt { font-weight: 650; }
#message { padding: .8rem; background: #edf5f4; border-left: 4px solid #00665d; overflow-wrap: anywhere; }
#message.error { background: #fff1ec; border-color: #a33416; color: #7a260f; }
footer { margin-top: 2rem; font-size: .85rem; line-height: 1.5; }
[hidden] { display: none !important; }
@media (max-width: 480px) { main { margin: .5rem auto; padding: 1rem; width: calc(100% - 1rem); } }
article { border-top: 1px solid #cbd8dc; padding: .75rem 0; overflow-wrap: anywhere; }
#admin p, #admin label { overflow-wrap: anywhere; }
#admin button { margin: .25rem; }
input[type="checkbox"] { width: 1.4rem; min-height: 1.4rem; margin-left: .5rem; vertical-align: middle; }