:root{
  --bg:#f4f5f7; --panel:#ffffff; --text:#1d2330; --muted:#667085; --line:#d9dde4; --code:#f7f8fa;
  --chassis:#3a3f47; --chassis-edge:#2a2e34; --label:#c9ced6; --empty:#565c66;
  --vlanA:#2f7ee8; --vlanB:#f08a24; --vlanX:#9aa0a8;
  --up:#35c46b; --off:#6b7280; --admin:#e5484d; --warn:#f5b301; --dev:#a77bff; --nac:#b42318;
  --accent:#2563eb;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#14171c; --panel:#1d2127; --text:#e6e8eb; --muted:#9aa3af; --line:#2f353d; --code:#171a1f;
    --chassis:#2b3038; --chassis-edge:#1a1d22; --label:#aeb5bf; --empty:#454b54; --accent:#5b8cff;
  }
}
:root[data-theme="dark"]{
  --bg:#14171c; --panel:#1d2127; --text:#e6e8eb; --muted:#9aa3af; --line:#2f353d; --code:#171a1f;
  --chassis:#2b3038; --chassis-edge:#1a1d22; --label:#aeb5bf; --empty:#454b54; --accent:#5b8cff;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:var(--accent)}
header.top{display:flex;align-items:center;gap:18px;padding:10px 20px;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap}
header.top h1{font-size:16px;margin:0}
header.top h1 a{color:inherit;text-decoration:none}
header.top nav{display:flex;gap:14px;flex-wrap:wrap}
header.top nav a{text-decoration:none;color:var(--muted)}
header.top nav a.on{color:var(--text);font-weight:600}
header.top .spacer{flex:1}
header.top .who{color:var(--muted);font-size:13px}
.banner{padding:8px 20px;font-weight:600}
.banner.ro{background:color-mix(in srgb,var(--warn) 25%,var(--panel));border-bottom:1px solid var(--warn)}
select,button,input,textarea{font:inherit;color:inherit}
select,input,textarea{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:5px 8px}
button,.btn{border:1px solid var(--line);background:var(--panel);border-radius:6px;padding:6px 12px;cursor:pointer;text-decoration:none;color:inherit;display:inline-block}
button.primary,.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
button.danger{border-color:var(--admin);color:var(--admin)}
button:disabled{opacity:.45;cursor:not-allowed}
.wrap{max-width:1400px;margin:0 auto;padding:16px 20px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px}
.card h3{margin:0 0 10px;font-size:14px}
.mb{margin-bottom:16px}
.devhead{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-end}
.devhead div small{display:block;color:var(--muted);font-size:12px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:16px 0;flex-wrap:wrap}
.tabs button{border:none;border-bottom:2px solid transparent;border-radius:0;background:none;padding:8px 14px;color:var(--muted)}
.tabs button.on{border-bottom-color:var(--accent);color:var(--text);font-weight:600}
.tab{display:none}.tab.on{display:block}
.grid{display:grid;grid-template-columns:1fr 390px;gap:16px}
@media (max-width:1000px){.grid{grid-template-columns:1fr}}
.cards3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.faceplate-wrap{overflow-x:auto}
svg.faceplate{display:block;min-width:780px;width:100%;height:auto}
.port{cursor:pointer}
.port:hover .body{filter:brightness(1.18)}
.port .ring{fill:none;stroke:none}
.port.sel .ring{stroke:var(--accent);stroke-width:3}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;color:var(--muted);font-size:13px;align-items:center}
.legend i{display:inline-block;width:14px;height:14px;border-radius:3px;margin-right:5px;vertical-align:-2px}
.filters{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.filters button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.toolbar{display:flex;gap:8px;align-items:center;margin-top:14px;flex-wrap:wrap}
.toolbar .sel-info{color:var(--muted);margin-right:auto}
.stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.stat{border:1px solid var(--line);border-radius:8px;padding:6px 12px;min-width:110px}
.stat b{font-size:18px;display:block}
.stat small{color:var(--muted)}
aside h2{font-size:15px;margin:0 0 2px}
.sub{color:var(--muted);margin-bottom:10px}
dl{display:grid;grid-template-columns:140px 1fr;gap:5px 10px;margin:0 0 14px}
dt{color:var(--muted)} dd{margin:0;word-break:break-word}
.pill{display:inline-block;padding:1px 8px;border-radius:99px;font-size:12px;color:#fff;margin-right:4px;white-space:nowrap}
.p-ok{background:var(--up)}.p-warn{background:var(--warn)}.p-crit{background:var(--admin)}.p-dev{background:var(--dev)}.p-off{background:var(--off)}.p-nac{background:var(--nac)}.p-info{background:var(--accent)}
.alert{border-radius:8px;padding:8px 10px;margin-bottom:8px;font-size:13px;border:1px solid}
.alert.crit{border-color:var(--admin);background:color-mix(in srgb,var(--admin) 12%,transparent)}
.alert.warn{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent)}
.alert.dev{border-color:var(--dev);background:color-mix(in srgb,var(--dev) 12%,transparent)}
.alert.ok{border-color:var(--up);background:color-mix(in srgb,var(--up) 12%,transparent)}
.alert.info{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.alert.nac{border-color:var(--nac);background:color-mix(in srgb,var(--nac) 14%,transparent)}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.empty{color:var(--muted);padding:30px 0;text-align:center}
.live{font-size:12px;color:var(--muted);margin-bottom:10px}
.spin{display:inline-block;width:12px;height:12px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:s .8s linear infinite;vertical-align:-2px;margin-right:6px}
@keyframes s{to{transform:rotate(360deg)}}
pre.cfg{background:var(--code);border:1px solid var(--line);border-radius:8px;padding:12px;max-height:620px;overflow:auto;font:12.5px/1.5 ui-monospace,Consolas,monospace;margin:0;white-space:pre}
pre.cfg mark{background:color-mix(in srgb,var(--warn) 45%,transparent);color:inherit}
pre.cfg .add{background:color-mix(in srgb,var(--up) 22%,transparent);display:inline-block;width:100%}
pre.cfg .del{background:color-mix(in srgb,var(--admin) 22%,transparent);display:inline-block;width:100%}
.cfgbar{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap;align-items:center}
.cfgbar input{flex:1;min-width:200px}
.gauge{height:10px;background:var(--line);border-radius:99px;overflow:hidden;margin:4px 0 10px}
.gauge span{display:block;height:100%}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--muted);font-weight:500}
.modal-bg{position:fixed;inset:0;background:#0008;display:none;align-items:center;justify-content:center;padding:16px;z-index:10}
.modal-bg.open{display:flex}
.modal{background:var(--panel);border-radius:10px;max-width:560px;width:100%;padding:20px;border:1px solid var(--line);max-height:90vh;overflow:auto}
.modal h3{margin-top:0}
.steps{margin:10px 0 16px;padding-left:20px}
.steps li{margin-bottom:6px}
.steps li.done{color:var(--up)}
.steps li.fail{color:var(--admin);font-weight:600}
.steps li.run{color:var(--accent);font-weight:600}
.note{font-size:12px;color:var(--muted)}
.searchbox{position:relative}
.searchres{position:absolute;top:100%;left:0;right:0;background:var(--panel);border:1px solid var(--line);border-radius:6px;z-index:5;max-height:300px;overflow:auto}
.searchres a{display:block;padding:6px 10px;text-decoration:none;color:var(--text)}
.searchres a:hover{background:var(--bg)}
.login{max-width:360px;margin:10vh auto}
.login input{width:100%;margin:4px 0 12px}
.msg{padding:8px 12px;border-radius:6px;margin-bottom:12px}
.msg.error{background:color-mix(in srgb,var(--admin) 15%,transparent)}
.msg.success{background:color-mix(in srgb,var(--up) 15%,transparent)}

/* ---- Dashboards (Statusfarben fest, nur mit Symbol + Text) ---- */
:root{--st-ok:#0ca30c;--st-warn:#fab219;--st-crit:#d03b3b;--series-1:#2a78d6;--track:#eef0f3}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--series-1:#3987e5;--track:#2a2f36}}
:root[data-theme="dark"]{--series-1:#3987e5;--track:#2a2f36}
.filterbar{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.filterbar label{display:flex;flex-direction:column;font-size:12px;color:var(--muted);gap:2px}
h2.sec{font-size:15px;margin:22px 0 10px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.kpi small{color:var(--muted);font-size:12px}
.kpi b{font-size:26px;line-height:1.15;font-variant-numeric:tabular-nums}
.kpi-status{display:flex;flex-direction:column;gap:3px;margin-top:4px;font-variant-numeric:tabular-nums}
.st{display:inline-block;width:16px;height:16px;border-radius:50%;color:#fff;font-style:normal;font-size:11px;font-weight:700;text-align:center;line-height:16px}
.st-ok,.st-bg-ok{background:var(--st-ok)}.st-warn,.st-bg-warn,.st-bg-fehler{background:var(--st-warn)}.st-crit,.st-bg-crit,.st-bg-rollback{background:var(--st-crit)}
.st-warn{color:#1d2330}
.dgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:16px}
@media (max-width:520px){.dgrid{grid-template-columns:1fr}}
.legend-s{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-bottom:10px}
.legend-s .sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.hrow{display:grid;grid-template-columns:minmax(120px,38%) 1fr 44px;gap:10px;align-items:center;padding:4px 0}
.hl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}
.hv{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted);font-size:13px}
.htrack{height:16px;display:block}
.bar{display:block;height:100%;background:var(--series-1);border-radius:0 4px 4px 0;min-width:2px;cursor:default}
.stack{display:flex;gap:2px;height:100%;min-width:2px}
.stack .seg{height:100%;min-width:3px}
.stack .seg:last-child{border-radius:0 4px 4px 0}
.cols{display:flex;align-items:flex-end;gap:2px;height:170px;padding-top:6px;border-bottom:1px solid var(--line)}
.col{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;position:relative;cursor:default}
.col:hover{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.cstack{display:flex;flex-direction:column-reverse;gap:2px;min-height:0}
.cstack .seg{min-height:2px;width:100%}
.cstack .seg:last-child{border-radius:4px 4px 0 0}
.cl{position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);font-size:10px;color:var(--muted);white-space:nowrap}
.cols + details{margin-top:24px}
details summary{cursor:pointer;margin-top:8px}
.tip{position:fixed;z-index:20;background:var(--text);color:var(--panel);padding:5px 9px;border-radius:6px;font-size:12px;pointer-events:none;max-width:320px}