:root { --bg:#f6f7f9; --panel:#fff; --text:#16181d; --muted:#5d6470; --border:#dfe3e8; --ok:#1f8a4c; --warn:#b7791f; --down:#c53030; --unknown:#718096; --accent:#2b6cb0; --radius:10px; color-scheme: light dark; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
@media (prefers-color-scheme: dark) { :root { --bg:#0f1115; --panel:#171a21; --text:#e6e8ec; --muted:#9aa3af; --border:#2a2f3a; --ok:#48bb78; --warn:#ecc94b; --down:#fc8181; --unknown:#a0aec0; --accent:#63b3ed; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-size:15px; line-height:1.45; }
a { color:var(--accent); }
header.top { display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:center; justify-content:space-between; padding:.75rem 1rem; background:var(--panel); border-bottom:1px solid var(--border); }
header.top .brand { color:inherit; text-decoration:none; font-weight:700; }
nav a { margin-right:1rem; color:var(--muted); text-decoration:none; }
nav a.active { color:var(--text); font-weight:600; }
main { max-width:1100px; margin:0 auto; padding:1rem; }
h1 { font-size:1.35rem; margin:.25rem 0 1rem; }
h2 { font-size:1.1rem; margin:1.5rem 0 .5rem; }
.panel { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; margin-bottom:1rem; }
.meta { color:var(--muted); font-size:.85rem; }
.dot { display:inline-block; width:.65rem; height:.65rem; border-radius:50%; background:var(--unknown); margin-right:.35rem; vertical-align:middle; }
.dot.ok { background:var(--ok); } .dot.warn { background:var(--warn); } .dot.down { background:var(--down); }
.badge { display:inline-block; padding:.05rem .45rem; border-radius:999px; font-size:.75rem; border:1px solid var(--border); color:var(--muted); white-space:nowrap; }
.badge.critical { color:var(--down); border-color:var(--down); } .badge.warning { color:var(--warn); border-color:var(--warn); }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.9rem; }
th, td { text-align:left; padding:.4rem .5rem; border-bottom:1px solid var(--border); vertical-align:top; }
th { color:var(--muted); font-weight:600; }
form.inline { display:inline; }
.actions { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
button, .button { font:inherit; padding:.35rem .7rem; border-radius:8px; border:1px solid var(--border); background:var(--panel); color:var(--text); cursor:pointer; text-decoration:none; }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
input, select, textarea { font:inherit; padding:.35rem .5rem; border:1px solid var(--border); border-radius:8px; background:var(--bg); color:var(--text); }
textarea.json { width:100%; min-height:420px; font-family: ui-monospace, Menlo, monospace; font-size:.85rem; }
.error { color:var(--down); } .notice { color:var(--muted); }
.login { max-width:360px; margin:10vh auto; }
.login label { display:block; margin:.75rem 0 .25rem; } .login input { width:100%; }
@media (max-width:600px) { .hide-sm { display:none; } }

/* Task G: Grafik-Übersicht (Statuswand). Klassen/Aufbau aus dem freigegebenen Entwurf
   übernommen; Farben ausschliesslich über die bestehenden CSS-Variablen, damit hell/dunkel
   automatisch stimmt. */
.wall { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.wall-head, .row { display:grid; grid-template-columns: minmax(170px, 1.3fr) 2.4fr 1.6fr 1.3fr; gap:.75rem 1rem; align-items:center; padding:.55rem .9rem; }
.wall-head { color:var(--muted); font-size:.75rem; letter-spacing:.04em; text-transform:uppercase; border-bottom:1px solid var(--border); }
.row { border-bottom:1px solid var(--border); color:inherit; text-decoration:none; border-left:5px solid var(--unknown); }
.row:last-child { border-bottom:0; }
.row.ok { border-left-color:var(--ok); } .row.warn { border-left-color:var(--warn); } .row.down { border-left-color:var(--down); background:color-mix(in srgb, var(--down) 7%, var(--panel)); }
.row:hover { background:color-mix(in srgb, var(--accent) 6%, var(--panel)); }
.name { display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.name strong { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.name .meta { display:flex; flex-wrap:wrap; gap:.3rem; align-items:center; }
.strip { display:flex; gap:2px; height:20px; }
.strip i { flex:1; border-radius:2px; background:var(--unknown); opacity:.35; }
.strip i.ok { background:var(--ok); opacity:.85; } .strip i.warn { background:var(--warn); opacity:1; } .strip i.down { background:var(--down); opacity:1; }
.axis { display:flex; justify-content:space-between; color:var(--muted); font-size:.7rem; margin-top:.2rem; }
.spark { display:flex; align-items:center; gap:.5rem; }
.spark svg { width:100%; max-width:140px; height:30px; overflow:visible; }
.spark .v { font-variant-numeric:tabular-nums; font-size:.85rem; white-space:nowrap; }
.spark .v.slow { color:var(--warn); } .spark .v.fail { color:var(--down); }
.stack { display:flex; height:10px; border-radius:999px; overflow:hidden; gap:2px; margin:.4rem 0 .2rem; }
.stack i { flex:1; } .stack i.ok { background:var(--ok); } .stack i.warn { background:var(--warn); } .stack i.down { background:var(--down); } .stack i.unknown { background:var(--unknown); }
.legend { display:flex; flex-wrap:wrap; gap:.4rem 1rem; color:var(--muted); font-size:.8rem; margin:.6rem 0 0; }
.legend i { display:inline-block; width:.8rem; height:.8rem; border-radius:2px; vertical-align:-2px; margin-right:.3rem; }
.big { font-size:1.05rem; }
@media (max-width:760px) {
  .wall-head { display:none; }
  .row { grid-template-columns: 1fr auto; grid-template-areas: "name spark" "d24 d24"; }
  .row .name { grid-area:name; } .row .d24 { grid-area:d24; } .row .d30 { display:none; } .row .spark { grid-area:spark; }
  .spark svg { max-width:90px; }
}