:root{--bg:#f6f7f9;--panel:#fff;--ink:#1b1f24;--muted:#5b6470;--line:#e3e6ea;--accent:#1565c0;--pos:#2e7d32;--neg:#d32f2f;--neu:#8a94a0;--warn:#c9a800}@media (prefers-color-scheme:dark){:root{--bg:#0f1216;--panel:#171b21;--ink:#e8ebef;--muted:#9aa4af;--line:#262c34;--accent:#5aa0f2;--neu:#7c8691}}*{box-sizing:border-box}body{background:var(--bg);color:var(--ink);margin:0;font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}header.top{background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:16px;padding:12px 20px;display:flex}header.top h1{letter-spacing:.2px;margin:0;font-size:18px}header.top h1 span{color:var(--accent)}main{max-width:1400px;margin:0 auto;padding:16px 20px 40px}.grid{grid-template-columns:repeat(12,1fr);gap:16px;display:grid}.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;min-width:0;padding:14px 16px}.card h2{text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:0 0 10px;font-size:13px;font-weight:600}.span-3{grid-column:span 3}.span-4{grid-column:span 4}.span-5{grid-column:span 5}.span-7{grid-column:span 7}.span-9{grid-column:span 9}.span-8{grid-column:span 8}.span-12{grid-column:span 12}@media (max-width:1000px){.grid>*{grid-column:span 12!important}}.kpi{font-size:44px;font-weight:700;line-height:1}.kpi small{color:var(--muted);font-size:14px;font-weight:500}.pill{color:#fff;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:600;display:inline-block}.status{color:var(--muted);align-items:center;gap:6px;font-size:12px;display:flex}.dot{background:var(--neu);border-radius:50%;width:8px;height:8px}.dot.live{background:var(--pos);box-shadow:0 0 0 3px color-mix(in srgb, var(--pos) 25%, transparent)}.dot.offline{background:var(--neg)}select,input,button{font:inherit;color:inherit;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:6px 10px}button{cursor:pointer;background:var(--accent);color:#fff;border-color:var(--accent)}button.ghost{color:var(--accent);background:0 0}.feed{max-height:520px;margin:0;padding:0;list-style:none;overflow:auto}.feed li{border-bottom:1px solid var(--line);padding:10px 0}.feed .meta{color:var(--muted);flex-wrap:wrap;gap:8px;font-size:12px;display:flex}.feed a{color:inherit;text-decoration:none}.feed a:hover{text-decoration:underline}.tag{border:1px solid;border-radius:4px;padding:1px 6px;font-size:11px}.tag.negative{color:var(--neg)}.tag.positive{color:var(--pos)}.tag.neutral{color:var(--neu)}.tag.severe{color:#fff;background:var(--neg);border-color:var(--neg)}table{border-collapse:collapse;width:100%;font-size:13px}th,td{text-align:left;border-bottom:1px solid var(--line);padding:6px 4px}th{color:var(--muted);font-weight:600}td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}.drivers{grid-template-columns:1fr auto;gap:6px 12px;font-size:13px;display:grid}.bar{background:var(--line);border-radius:3px;height:6px;margin-top:3px;overflow:hidden}.bar>div{height:100%}form.new{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.empty{color:var(--muted);text-align:center;padding:24px 0}.muted{color:var(--muted)}button:disabled{opacity:.5;cursor:default}dialog.survey{width:min(860px,100vw - 32px);max-height:calc(100vh - 48px);color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:12px;flex-direction:column;padding:0;display:flex}dialog.survey:not([open]){display:none}dialog.survey::backdrop{background:#00000073}dialog.survey header,dialog.survey footer{flex-shrink:0;align-items:center;gap:8px;padding:12px 16px;display:flex}dialog.survey header{border-bottom:1px solid var(--line);justify-content:space-between}dialog.survey header h2{margin:0;font-size:16px}dialog.survey .meta{color:var(--muted);font-size:12px}dialog.survey footer{border-top:1px solid var(--line);flex-wrap:wrap}.steps{border-bottom:1px solid var(--line);flex-shrink:0;gap:6px;padding:10px 16px;display:flex;overflow-x:auto}.steps button{color:var(--ink);border:1px solid var(--line);white-space:nowrap;background:0 0;border-bottom-width:3px;flex-shrink:0;font-size:13px}.steps button.on{background:color-mix(in srgb, var(--accent) 12%, transparent);font-weight:600}.steps small{color:var(--muted);margin-left:4px}.steps small.warn,.error{color:var(--neg)}dialog.survey .body{flex:1;padding:8px 16px 16px;overflow-y:auto}.intro{color:var(--muted);font-size:13px}dialog.survey fieldset{border:0;border-bottom:1px solid var(--line);margin:0;padding:12px 0}dialog.survey fieldset.missing legend{color:var(--neg)}dialog.survey legend{padding:0;font-weight:600}dialog.survey .sub{color:var(--muted);margin-top:2px;font-size:12px}.options{flex-wrap:wrap;gap:6px;margin-top:8px;display:flex}.options label{border:1px solid var(--line);cursor:pointer;border-radius:8px;align-items:center;gap:6px;padding:5px 10px;font-size:13px;display:flex}.options label.on{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 10%, transparent)}.options input{accent-color:var(--accent);margin:0}.login{place-items:center;min-height:100vh;padding:16px;display:grid}.login form{flex-direction:column;gap:12px;width:min(360px,100%);padding:24px;display:flex}.login h1{margin:0;font-size:22px}.login h1 span,header.top h1 span{color:var(--accent)}.login p{margin:0}.login label,.stack label{color:var(--muted);flex-direction:column;gap:4px;font-size:13px;display:flex}.login input,.stack input{color:var(--ink)}.account{flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;display:flex}.ok{color:var(--pos)}.stack{flex-direction:column;gap:12px;display:flex}dialog.modal{width:min(420px,100vw - 32px);color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:0}dialog.modal::backdrop{background:#00000073}dialog.modal header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding:12px 16px;display:flex}dialog.modal header h2{margin:0;font-size:16px}dialog.modal .body{padding:16px;overflow-x:auto}dialog.modal h3{margin:18px 0 8px;font-size:14px}dialog.modal .row{flex-wrap:wrap;gap:8px;display:flex}dialog.modal td.actions{white-space:nowrap;text-align:right}.account button.ghost,td.actions button.ghost{border-color:#0000}button.danger{color:var(--neg)}
