:root { font-family: system-ui, sans-serif; color: #17243b; background: #edf2f7; }
* { box-sizing: border-box; }
body { margin: 0; }
header { background: #14283f; color: white; padding: 22px max(24px, calc((100% - 1200px) / 2)); }
h1 { margin: 0; font-size: 30px; } h1 span { font-size: 20px; font-weight: 400; margin-left: 12px; }
header p { color: #cad7e6; margin-bottom: 0; }
main { max-width: 1248px; padding: 24px; margin: auto; }
section { background: white; border: 1px solid #d4dfeb; border-radius: 12px; padding: 24px; margin-bottom: 24px; }
h2 { margin-top: 0; } p { line-height: 1.6; }
form { display: flex; flex-wrap: wrap; align-items: end; gap: 16px; }
label { display: grid; gap: 7px; font-weight: 600; }
input, select, button { font: inherit; border-radius: 6px; padding: 10px 12px; }
input, select { border: 1px solid #9cadc1; max-width: 100%; }
button { cursor: pointer; border: 1px solid #215e9b; background: #215e9b; color: white; }
button:disabled { opacity: .5; cursor: not-allowed; }
button.danger { background: #a32626; border-color: #a32626; }
button.secondary { background: white; color: #215e9b; }
.check { flex-basis: 100%; display: flex; align-items: center; font-weight: 400; }
.check input { width: 20px; height: 20px; }
nav, .pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.pager { justify-content: end; margin-top: 16px; margin-bottom: 0; }
.scroll { overflow-x: auto; margin-top: 20px; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th, td { padding: 14px 10px; border-bottom: 1px solid #dce5ef; vertical-align: top; }
th { background: #f3f6fa; } td small { display: block; margin-top: 6px; overflow-wrap: anywhere; }
td button { margin: 2px 6px 6px 0; font-size: 14px; }
#message, #error { border-radius: 8px; padding: 16px; }
#message { background: #e2f5e8; color: #14522e; }
#error { background: #ffe8e5; color: #8e2323; }
li { margin-bottom: 10px; overflow-wrap: anywhere; }
#login-panel { max-width: 600px; margin: 24px auto; }
#login { display: grid; }
[hidden] { display: none !important; }
@media (max-width: 600px) { main { padding: 12px; } section { padding: 16px; } h1 span { display: block; margin-left: 0; } }