:root { color-scheme: dark; font: 16px/1.5 system-ui, sans-serif; background: #101824; color: #e9f0fa; }
* { box-sizing: border-box; }
body { margin: 0; }
header { display: flex; align-items: center; gap: .75rem; padding: 1rem max(1rem, calc((100vw - 1100px)/2)); background: #172337; border-bottom: 1px solid #304159; }
header strong, header small { display: block; }
header small, p, .note { color: #aebed1; }
main { max-width: 1100px; margin: 2rem auto; padding: 0 1rem; }
h1 { margin: 0 0 .5rem; font-size: 1.8rem; }
h2 { margin-top: 0; font-size: 1.15rem; }
.card { padding: 1.25rem; margin-bottom: 1rem; border: 1px solid #304159; border-radius: .8rem; background: #192638; }
.heading, .summary { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.summary .card { flex: 1; }
.summary strong { display: block; font-size: 2rem; }
.forms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.forms .card { margin: 0 0 1rem; }
form { display: grid; gap: .6rem; max-width: 420px; }
input, select { width: 100%; padding: .7rem; border: 1px solid #61718a; border-radius: .35rem; background: #101824; color: inherit; font: inherit; }
button { padding: .7rem 1rem; border: 0; border-radius: .35rem; background: #66b8ff; color: #101824; font: inherit; font-weight: 700; cursor: pointer; }
button.secondary { margin: .15rem; padding: .35rem .5rem; background: #314962; color: #e9f0fa; font-size: .85rem; }
button.danger { background: #8d3b45; }
button:disabled { opacity: .55; cursor: wait; }
button:focus-visible, input:focus-visible { outline: 3px solid #f9d36b; outline-offset: 2px; }
ul { padding-left: 1.3rem; }
li { margin: .25rem 0; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .6rem; text-align: left; border-bottom: 1px solid #304159; }
th { color: #aebed1; font-weight: 600; }
td small { display: block; color: #aebed1; }
.field-hint { color: #aebed1; }
.form-message:empty { display: none; }
.form-message { margin: .25rem 0 0; padding: .7rem; border-radius: .35rem; background: #48301d; color: #ffe1b0; }
.form-message[data-kind="success"] { background: #173d35; color: #bbf3db; }
.note { font-size: .9rem; }
@media (max-width: 850px) { .forms { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .heading, .summary { display: block; } .summary .card { display: inline-block; min-width: 45%; } }