:root { color-scheme: dark; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background: #0d1320; color: #e7edf6; }
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 1220px; margin: auto; padding: 28px 20px 70px; }
header, .section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
header { margin-bottom: 22px; align-items: center; }
.header-actions { display: flex; gap: 8px; }
.login-wrap { max-width: 440px; padding-top: min(15vh, 120px); }
.login-form { grid-template-columns: 1fr; }
h1 { margin: 2px 0; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.1; }
h2 { margin: 0; font-size: 1.22rem; }
p { margin: 5px 0; }
.eyebrow { color: #76c8ee; letter-spacing: .15em; font-size: .72rem; font-weight: 700; }
.muted, .section-heading p, .cards span { color: #9dabbd; }
button, input, select { font: inherit; }
[hidden] { display: none !important; }
button { border: 1px solid #4e647d; background: #1d2a3d; color: #e7edf6; border-radius: 9px; padding: 9px 13px; cursor: pointer; }
button:hover { background: #293d55; }
button:disabled { opacity: .45; cursor: default; }
button.primary { background: #286f9a; border-color: #388bb9; font-weight: 700; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 18px 0 22px; }
.cards article, .panel { background: #172232; border: 1px solid #2b3d52; border-radius: 14px; box-shadow: 0 5px 25px #050a1240; }
.cards article { padding: 17px 20px; }
.cards span { display: block; font-size: .85rem; }
.cards strong { display: block; margin-top: 8px; font-size: 1.5rem; }
.panel { padding: 22px; margin: 18px 0; }
.section-heading { margin-bottom: 18px; }
.section-heading p { font-size: .86rem; }
form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: end; }
label { display: grid; gap: 6px; font-size: .84rem; color: #c8d5e4; }
input, select { width: 100%; padding: 10px 11px; color: #e7edf6; background: #0d1725; border: 1px solid #40556c; border-radius: 8px; }
input:focus, select:focus { outline: 2px solid #4aa0cf; outline-offset: 1px; }
.routing-choice { grid-column: 1 / -1; display: grid; gap: 9px; min-width: 0; margin: 0; padding: 12px; border: 1px solid #40556c; border-radius: 10px; }
.routing-choice legend { padding: 0 5px; color: #c8d5e4; font-size: .9rem; font-weight: 700; }
.routing-option { display: flex; align-items: flex-start; gap: 10px; padding: 10px; border: 1px solid #354b63; border-radius: 8px; cursor: pointer; }
.routing-option:has(input:checked) { border-color: #4aa0cf; background: #183149; }
.routing-option input { width: auto; margin: 3px 0 0; padding: 0; }
.routing-option span { display: grid; gap: 3px; }
.routing-option small { color: #9dabbd; line-height: 1.4; }
.model-picker { grid-column: 1 / -1; min-width: 0; margin: 0; padding: 12px; border: 1px solid #40556c; border-radius: 10px; }
.model-picker legend { padding: 0 5px; color: #c8d5e4; font-size: .9rem; font-weight: 700; }
.model-picker > label { max-width: 440px; }
.model-selected { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; margin: 10px 0; }
.model-selected button { padding: 5px 8px; border-color: #4aa0cf; background: #183149; font-size: .8rem; overflow-wrap: anywhere; }
.model-options { max-height: 220px; overflow-y: auto; border: 1px solid #354b63; border-radius: 8px; }
.model-option { display: flex; align-items: center; gap: 9px; padding: 9px 11px; cursor: pointer; overflow-wrap: anywhere; }
.model-option + .model-option { border-top: 1px solid #293b50; }
.model-option:hover { background: #22374d; }
.model-option input { width: auto; margin: 0; padding: 0; }
.model-picker [data-model-status] { margin-top: 8px; font-size: .8rem; }
.secret { margin-top: 20px; padding: 15px; border: 1px solid #3e987c; border-radius: 10px; background: #12332d; }
.secret code { display: block; overflow-wrap: anywhere; margin: 10px 0; padding: 10px; background: #0a1d1a; }
.table-wrap { overflow-x: auto; }
table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: .88rem; }
th, td { text-align: left; padding: 11px 9px; border-bottom: 1px solid #293b50; vertical-align: top; }
th { color: #a6bdd1; font-weight: 600; }
td.actions { min-width: 210px; }
.actions button { margin: 0 5px 5px 0; padding: 6px 8px; font-size: .78rem; }
.state-on { color: #80d2ae; }
.state-off, .bad { color: #ffa3a3; }
.good { color: #94dfb8; }
#notice { min-height: 1.5rem; }
@media (max-width: 760px) { main { padding: 20px 12px 50px; } header { align-items: flex-start; } .cards { grid-template-columns: 1fr; } form { grid-template-columns: 1fr; } .panel { padding: 16px; } }