:root { color-scheme: light; font-family: system-ui, sans-serif; background: #f4f6f8; color: #15202b; }
* { box-sizing: border-box; }
body { margin: 0; }
header { display: flex; align-items: center; gap: 1.5rem; padding: 1rem 5vw; background: #153e54; color: white; }
header a { color: white; text-decoration: none; }
.brand { font-size: 1.25rem; font-weight: 700; }
nav { display: flex; gap: 1rem; flex: 1; }
main { width: min(1100px, 92vw); margin: 2rem auto; }
.panel, .card { background: white; border: 1px solid #dce3e8; border-radius: .6rem; padding: 1.2rem; margin-bottom: 1rem; box-shadow: 0 2px 8px #173b4f12; }
.narrow { max-width: 430px; margin: 8vh auto; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
.stack { display: grid; gap: 1rem; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .9rem; align-items: end; }
label { display: grid; gap: .35rem; font-weight: 600; }
input, select, button { font: inherit; padding: .65rem .75rem; border: 1px solid #b8c5cc; border-radius: .35rem; }
button { cursor: pointer; background: #087e8b; border-color: #087e8b; color: white; font-weight: 650; }
button:hover { background: #056874; }
.danger { background: #a83232; border-color: #a83232; }
.inline { display: inline; }
.link-button { border: 0; padding: 0; background: transparent; }
.check { display: flex; align-items: center; gap: .45rem; }
.check input { width: auto; }
.checks { display: flex; flex-wrap: wrap; gap: 1rem; margin: .6rem 0 1rem; }
.checks label { display: flex; align-items: center; gap: .35rem; }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.actions form { display: flex; gap: .4rem; }
.state-on { color: #087b35; }.state-off { color: #555; }.state-unavailable { color: #a83232; }
.notice { background: #e2f4f1; border-left: 4px solid #087e8b; padding: .8rem 1rem; }
.error { background: #ffe9e9; color: #8c2222; padding: .8rem; }
.muted { color: #65747c; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .7rem; border-bottom: 1px solid #dde4e8; vertical-align: top; }
code { font-size: .85em; }
@media (max-width: 700px) { header { align-items: flex-start; flex-wrap: wrap; } nav { order: 3; width: 100%; overflow-x: auto; } }