/* ═══════════════════════════════════════════════════════════════════════════
   PingMon — PIN-230 Redesign-Ebene  (rein grafisch, keine Funktionsänderung)
   ───────────────────────────────────────────────────────────────────────────
   Wird NACH style.css geladen → gewinnt bei gleicher Spezifität über die
   Quelltext-Reihenfolge. Nur auf Post-Login-Seiten verlinkt (Dashboard,
   Einstellungen, Agentur-Demo). Ändert KEIN Markup, KEINE IDs/Klassen, KEINE
   Logik — ausschließlich Optik.

   Richtung C (Mockups): dunkles technisches Monitoring-Tool, EIN Grün-Akzent
   (#2fd18a), Status immer als Form + Label + Farbe (WCAG 1.4.1), tabellarische
   Zahlen, Tiefe über gestufte Flächenhelligkeit statt harter Schatten.

   Voll reversibel: <link> entfernen → alter Stand. CVD-/Hoher-Kontrast-Modi aus
   style.css behalten Vorrang (höhere Spezifität) → Barrierefreiheit gewinnt.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Token-Palette ─────────────────────────────────────────────────────── */
:root {
  --bg:               #0d1210;   /* kein reines Schwarz (Halation) */
  --surface:          #141a17;
  --surface-2:        #1a221d;
  --surface-3:        #212b25;
  --border:           #232c27;   /* entsättigtes Chrome */
  --border-2:         #333e37;
  --text:             #e7ece9;   /* kein reines Weiß */
  --text-2:           #9aa8a0;
  --text-muted:       #6a776f;

  --green:            #2fd18a;    /* der EINE Eigenakzent */
  --green-dim:        rgba(47,209,138,.10);
  --red:              #e0655b;
  --red-dim:          rgba(224,101,91,.10);
  --yellow:           #e3a445;
  --yellow-dim:       rgba(227,164,69,.10);
  --blue:             #5ea6da;
  --blue-dim:         rgba(94,166,218,.10);

  /* Semantische Status-Familie — Default zeigt auf die neuen Marken-Farben.
     CVD/Hoher-Kontrast (body.cvd-* / body.contrast in style.css) überschreiben
     diese Vars weiterhin mit höherer Spezifität. */
  --st-up-glow:       rgba(47,209,138,.38);
  --st-down-glow:     rgba(224,101,91,.42);
  --st-degraded-glow: rgba(227,164,69,.38);
  --st-up-rgb:        47 209 138;
  --st-down-rgb:      224 101 91;
  --st-degraded-rgb:  227 164 69;
  --st-up-line:       #3ee0a0;
  --st-down-line:     #e0655b;
  --st-degraded-line: #e3a445;

  /* „Geplant" (Raute-Marker: Domain/Zahlung) — neu, semantisch blau */
  --st-planned:       #5ea6da;
  --st-planned-dim:   rgba(94,166,218,.12);

  --radius:           9px;
  --radius-lg:        13px;
  --shadow-card:      0 1px 2px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.03);
  --shadow-card-hover:0 10px 30px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06);

  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, 'Cascadia Mono', Consolas, 'Liberation Mono', monospace;
}

/* Light-Mode: nur den Grün-Akzent an die neue Marke angleichen (Rest bleibt) */
body.light {
  --green:     #0f9d63;
  --green-dim: rgba(15,157,99,.08);
  --st-up-line:#0f9d63;
}

/* ── 2. Grundflächen (ersetzt die Basis-Literale, gleiche Spezifität) ─────── */
body {
  background: var(--bg);   /* PIN-216: grünen Ambient-Glow raus (clean, überall gleich) */
}
body.light {
  background: #f6f8fa;      /* PIN-216: grünen Ambient-Glow raus */
}

header {
  background: rgba(13,18,16,.80);
  border-bottom: 1px solid rgba(255,255,255,.05);
  box-shadow: 0 1px 0 rgba(47,209,138,.05), 0 6px 20px rgba(0,0,0,.28);
}

/* Nur Fläche + Schatten neu — Rahmen/Radius/Status-Leiste NICHT anfassen (die
   Status-Karten setzen border-left via höher-spezifischem „Wumms"-Block; ein
   border-Shorthand hier würde die farbige linke Statuskante überschreiben). */
body.dark .card {
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  box-shadow: var(--shadow-card);
}
body.dark .card:hover { box-shadow: var(--shadow-card-hover); }

body.dark .sp-card,
body.dark .hb-card {
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 60%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

body.dark .metric-card {
  border: 1px solid var(--border);
  border-top: 1px solid rgba(47,209,138,.14);
  box-shadow: var(--shadow-card);
}

/* ── 3. Tabellarische / monospaced Zahlen ─────────────────────────────────── */
/* Premium entsteht aus Handwerk: Metriken stehen auf festem Raster. */
.metric-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.4px;
}
.uptime, .badge, .card-meta, .last-updated, .tier-chip,
.cockpit-uptime, .cockpit-exp, .response-time, .status-code,
.check-table td, .daily-bar-wrap, .metric-sub,
.hb-last, .expiry-days, .cg-uptime {
  font-variant-numeric: tabular-nums;
}
/* Stark-numerische Werte zusätzlich in Monospace (technischer Premium-Look) */
.stat-value, .check-table td, .uptime-badge, .cockpit-uptime {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.2px;
}
.stat-value { font-size: 16px; }   /* KPI-Zahlen im Endpunkt-Detail etwas größer */

/* ── 4. Buttons — technischer, ruhiger ────────────────────────────────────── */
.btn-primary {
  background: var(--green);
  color: #06231a;                /* dunkler Text auf Grün: klarer Kontrast */
  font-weight: 600;
  border-radius: var(--radius);
}
.btn-primary:hover { background: #3ee0a0; }
.btn-secondary {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  border-radius: var(--radius);
}
.btn-secondary:hover { background: var(--surface-3); border-color: var(--border-2); color: var(--text); }

/* ── 5. Nav — aktiver Tab bekommt die Grün-Kante ──────────────────────────── */
.nav-link.is-active {
  color: var(--text);
  background: var(--surface-2);
  box-shadow: inset 0 -2px 0 var(--green);
}

/* ── 6. Sektions-Überschriften — kleine, gesperrte Label ──────────────────── */
.section-header, .cockpit-title, .segment-title {
  letter-spacing: .2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. LILA-GLOW RE-CODIEREN  (README §7 + Checkliste A/B: „Sonder-Erkennung")
   Das violette „Predictive/schlau"-Signal ist AI-Startup-Kitsch (verboten im
   PingMon-Chrome). Bedeutung bleibt: ein Endpunkt mit Sonder-Erkennung sticht
   heraus. Neu codiert als technischer BLAUER Marker (wie „◆ Sonder-Erkennung"
   im Mockup), Dauer-Animationen beruhigt (Bewegung nur zweckgebunden).
   ═══════════════════════════════════════════════════════════════════════════ */
.anomaly-card {
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(94,166,218,.14), transparent 55%),
    linear-gradient(160deg, rgba(94,166,218,.12) 0%, rgba(94,166,218,.06) 52%, var(--surface) 100%);
  border: 1px solid rgba(94,166,218,.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);  /* PIN-216: blauen Glow raus, flach */
  animation: none;
}
.anomaly-glow {
  background: radial-gradient(circle, rgba(94,166,218,.28), transparent 66%);
  opacity: .4; animation: none;
}
.anomaly-icon { filter: none; animation: none; }  /* PIN-216: kein Glow */
.anomaly-title { color: var(--text); }
.anomaly-tag {
  color: #cfe6f6;
  background: rgba(94,166,218,.18);
  border: 1px solid rgba(94,166,218,.4);
}
.anomaly-ai { background: rgba(0,0,0,.28); border: 1px solid rgba(94,166,218,.2); }
.anomaly-ai-label { color: #9ec9e6; }
.anomaly-lock { background: rgba(0,0,0,.28); border: 1px dashed rgba(94,166,218,.4); }
.anomaly-lock:hover { border-color: rgba(94,166,218,.7); background: rgba(94,166,218,.1); }
.anomaly-lock-text { color: #cfe6f6; }
.anomaly-lock-cta {
  background: var(--green); color: #06231a;
  box-shadow: none;  /* PIN-216: flacher Button, kein Glow */
}
.card-anomaly-icon { filter: none; animation: none; opacity: .85; }  /* PIN-216: kein Glow */

/* Karte mit Sonder-Erkennung: blauer technischer Marker statt Voll-Lila.
   Status (up/down) bleibt an der linken Leiste sichtbar — der blaue Rahmen +
   ::before-Linie signalisieren „hier ist was Besonderes". Kein Dauer-Puls. */
.pm-card.has-anomaly,
body.dark .pm-card.has-anomaly {
  border: 1px solid rgba(94,166,218,.45);
  border-left: 3px solid var(--st-planned);
  background:
    radial-gradient(130% 100% at 50% -20%, rgba(94,166,218,.14), transparent 60%),
    linear-gradient(165deg, rgba(94,166,218,.06) 0%, var(--surface) 60%);
  animation: none;
}
.pm-card.has-anomaly::before {
  background: linear-gradient(90deg, transparent, var(--st-planned), transparent) !important;
  opacity: .7 !important;
}
.pm-card.has-anomaly .status-dot,
.pm-card.has-anomaly .status-dot.dot-up {
  background: var(--st-planned);
  box-shadow: 0 0 0 2px rgba(94,166,218,.22);  /* PIN-216: Dim-Ring statt Glow */
}
.pm-card.has-anomaly .card-status-label { color: #9ec9e6; }
.pm-card.has-anomaly .uptime-badge { background: rgba(94,166,218,.16); color: #9ec9e6; }

/* Pro-Trial-Banner: grüner Marken-Glow statt violett (Anti-Lila im Chrome) */
#trial-banner.trial-glow { animation: none; box-shadow: none; }  /* PIN-216: kein Glow */
#trial-chip { background: rgba(47,209,138,.14) !important; color: var(--green) !important; }

/* PRO-Tier-Chip war violett → auf Marken-Grün (kein Lila im Chrome).
   starter/business: Textfarbe an die migrierte Chip-Fläche angleichen (Hue-Versatz). */
.tier-chip.tier-pro     { background: rgba(47,209,138,.12); color: var(--green); border-color: rgba(47,209,138,.28); }
.tier-chip.tier-starter { color: #8fc4e6; }
.tier-chip.tier-business{ color: #edb968; }

/* ═══════════════════════════════════════════════════════════════════════════
   8. STATUS = FORM + LABEL + FARBE  (WCAG 1.4.1)  — Mockup: ▲ Risiko, ◆ geplant
   Auf den Monitor-Karten bekommt der Status-Punkt eine unterscheidbare FORM,
   nicht nur Farbe: down/degraded = Dreieck (Risiko), Wartung = Raute (geplant),
   ok = Punkt. Label-Text bleibt zusätzlich erhalten. Farbenblind-fest.
   ═══════════════════════════════════════════════════════════════════════════ */
.card .status-dot.dot-down,
.card .status-dot.dot-slow {
  border-radius: 1px;
  clip-path: polygon(50% 4%, 96% 92%, 4% 92%);   /* Dreieck = Risiko */
  width: 11px; height: 11px;
  box-shadow: none;
  filter: none;                                    /* PIN-216: kein Glow — Form+Farbe reichen (WCAG bleibt) */
  animation: none;                                 /* kein Dauer-Puls */
}
.card .status-dot.dot-slow { filter: none; }  /* PIN-216: kein Glow */
.card .status-dot.dot-maintenance,
.card .status-dot.dot-planned {
  border-radius: 1px;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);  /* Raute = geplant */
  width: 10px; height: 10px; box-shadow: none;
  background: var(--st-planned);
  filter: none;  /* PIN-216: kein Glow */
}

@media (prefers-reduced-motion: reduce) {
  .anomaly-card, .anomaly-glow, .anomaly-icon, .card-anomaly-icon, .pm-card.has-anomaly { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. EBENE 1 (Mockup Richtung C): Wertzeile (Nordstern) + „Braucht dich heute"
   Beantwortet oben in <5 Sek „Ist alles okay / was bricht als Nächstes?", dann
   die aktionierbare Triage. Aus vorhandenen Daten, keine erfundenen Werte.
   ═══════════════════════════════════════════════════════════════════════════ */
.value-headline { display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  padding:18px 22px; margin:6px 0 12px; border-radius:var(--radius-lg);
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--border); border-top:1px solid rgba(47,209,138,.14); box-shadow:var(--shadow-card); }
.value-headline .vh-big { font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  font-size:30px; font-weight:700; letter-spacing:-1px; color:var(--text); line-height:1; }
.value-headline .vh-word  { color:var(--green); }
.value-headline .vh-slash { color:var(--text-muted); font-weight:400; }
.value-headline .vh-sub   { font-size:13px; color:var(--text-muted); }
.value-headline .vh-pills { display:flex; gap:8px; flex-wrap:wrap; }
.vh-pill { font-size:12px; font-weight:600; padding:3px 10px; border-radius:999px;
  border:1px solid var(--border); font-variant-numeric:tabular-nums; }
.vh-pill.sev-crit { color:var(--red);    background:var(--red-dim);    border-color:rgba(224,101,91,.30); }
.vh-pill.sev-warn { color:var(--yellow); background:var(--yellow-dim); border-color:rgba(227,164,69,.30); }
.vh-pill.sev-ok   { color:var(--green);  background:var(--green-dim);  border-color:rgba(47,209,138,.28); }

.triage { margin:2px 0 26px; }
.triage-head { display:flex; align-items:baseline; gap:10px; margin-bottom:10px; }
.triage-title { font-size:15px; font-weight:700; color:var(--text); letter-spacing:-.1px; }
.triage-sub { font-size:12.5px; color:var(--text-muted); }
.triage-count { margin-left:auto; font-size:12px; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.triage-list { display:flex; flex-direction:column; gap:8px; }
.triage-row { display:flex; align-items:center; gap:14px; padding:12px 16px; border-radius:var(--radius-lg);
  background:linear-gradient(180deg, var(--surface-2), var(--surface)); border:1px solid var(--border);
  border-left:3px solid var(--border-2); cursor:pointer;
  transition:border-color .15s, transform .1s, box-shadow .15s; }
.triage-row:hover { transform:translateY(-1px); box-shadow:var(--shadow-card-hover); }
.triage-row.sev-crit    { border-left-color:var(--red); }
.triage-row.sev-warn    { border-left-color:var(--yellow); }
.triage-row.sev-planned { border-left-color:var(--st-planned); }
.tr-shape { font-size:13px; width:16px; text-align:center; flex:none; }
.sev-crit .tr-shape    { color:var(--red); }
.sev-warn .tr-shape    { color:var(--yellow); }
.sev-planned .tr-shape { color:var(--st-planned); }
.tr-cat { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-muted); width:76px; flex:none; }
.tr-client { font-weight:700; color:var(--text); flex:none; min-width:120px; }
.tr-desc { color:var(--text-2); font-size:13.5px; flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tr-meta { font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:12px; color:var(--text-muted); flex:none; }
.tr-action { flex:none; }
.triage-more { font-size:12.5px; color:var(--text-muted); padding:4px 16px; }
.triage-calm { font-size:13px; color:var(--text-muted); padding:12px 16px;
  border:1px dashed var(--border); border-radius:var(--radius-lg); background:var(--surface); }
@media (max-width:720px){ .tr-cat, .tr-meta { display:none; } .tr-client { min-width:0; } }

/* ═══════════════════════════════════════════════════════════════════════════
   10. EBENE 3 (Endpunktdetail): Breadcrumb + Aktionsleiste + Marker-Zeile
   „Hier laufen ALLE Funktionen eines Endpunkts zusammen." (Mockup)
   ═══════════════════════════════════════════════════════════════════════════ */
.panel-breadcrumb { display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:16px 22px 0; font-size:12.5px; color:var(--text-muted); }
.panel-breadcrumb .pb-item { color:var(--text-muted); }
.panel-breadcrumb .pb-root, .panel-breadcrumb .pb-client { cursor:pointer; transition:color .12s; }
.panel-breadcrumb .pb-root:hover, .panel-breadcrumb .pb-client:hover { color:var(--text); }
.panel-breadcrumb .pb-current { color:var(--text-2); font-weight:600; }
.panel-breadcrumb .pb-sep { color:var(--border-2); }

.panel-actions { display:flex; flex-wrap:wrap; gap:8px; padding:14px 22px 6px; }
.panel-actions .btn-maintenance { width:auto; }
.panel-actions .btn-detail-del { width:auto; color:var(--red); border-color:rgba(224,101,91,.32); }
.panel-actions .btn-detail-del:hover { background:var(--red-dim); color:var(--red); border-color:var(--red); }

.panel-markers { display:flex; flex-wrap:wrap; gap:8px; padding:6px 22px 4px; }
.pm-marker { font-size:11.5px; font-weight:600; padding:3px 10px; border-radius:999px;
  border:1px solid var(--border); color:var(--text-2); background:var(--surface-2);
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.pm-marker.mk-special  { color:#9ec9e6;        background:rgba(94,166,218,.12); border-color:rgba(94,166,218,.35); }
.pm-marker.mk-warn     { color:var(--yellow);   background:var(--yellow-dim);    border-color:rgba(227,164,69,.30); }
.pm-marker.mk-paused   { color:var(--yellow);   background:var(--yellow-dim);    border-color:rgba(227,164,69,.30); }
/* PIN-309: Pausierte Endpunkt-Karte klar kennzeichnen — gelber „Pause"-Punkt
   (Hausfarbe wie ⏸-Button/Marker) + dezent gedimmte Karte. Der statusInfo-Wrapper
   (app.js) setzt cssCard=is-paused / cssDot=dot-paused. */
.status-dot.dot-paused { background:var(--yellow); box-shadow:0 0 0 3px var(--yellow-dim); }
.card.pm-card.is-paused:not(.has-anomaly) { opacity:.72; }
.card.pm-card.is-paused .status-dot.dot-paused { animation:none; }
.pm-marker.mk-ai       { color:var(--green);    background:var(--green-dim);     border-color:rgba(47,209,138,.28); }
.pm-marker.mk-internal { color:var(--text-muted); }

/* Multi-Region-Leiste im Detail-Panel (PIN-305) — sitzt unter der Meta-Zeile.
   Teil 1 (Bestätigungs-Chips) ist bewusst NEUTRAL (keine Farbe = keine Live-
   Ampel). Nur die „Letzte Weltprüfung"-Zeile trägt Grün/Rot — und die ist mit
   Zeitstempel klar als Vergangenheit markiert. */
/* Padding:0 → die 📍-Zeile fluchtet bündig mit der Meta-Zeile darüber (Dario 13.07.) */
.ep3-regions { display:flex; flex-direction:column; gap:6px; padding:0; margin-top:9px; }
.ep3-regions-row { display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
/* Analyse-ⓘ inline statt absolut (die Form-Variante ist top/right-gepinnt) + neutrale Box */
.ep3-regions .info-i.mr-info { position:static; margin-left:5px; vertical-align:middle; }
.ep3-regions .mr-analysis { border-left-color:var(--border); background:var(--surface-2); color:var(--text-2); border-radius:6px; max-width:80ch; }
.ep3-regions .mr-cap { font-size:12px; font-weight:600; color:var(--text-2); }
.ep3-regions .mr-cap .mr-cap-sub { font-weight:400; color:var(--text-muted); }
.ep3-regions .mr-dot { color:var(--text-muted); font-weight:400; margin:0 -2px; }
/* Neutrale Bestätigungs-Chips (etwas kompakter als die Marker-Chips) */
.ep3-regions .pm-marker.mr-chip { font-size:11px; padding:2px 9px; letter-spacing:.4px; }
/* Ergebnis-Chips der letzten Weltprüfung (dieselbe Zeile, gefärbt) */
.ep3-regions .pm-marker.mr-res { font-size:11px; padding:2px 9px; letter-spacing:.2px; }
.ep3-regions .pm-marker.mr-res-up   { color:var(--green);      background:var(--green-dim); border-color:rgba(47,209,138,.28); }
.ep3-regions .pm-marker.mr-res-down { color:var(--red);        background:var(--red-dim);   border-color:rgba(224,101,91,.30); }
.ep3-regions .pm-marker.mr-res-na   { color:var(--text-muted); background:var(--surface-2); }
.ep3-regions .mr-verdict { font-size:12px; font-weight:600; margin-left:2px; }
.ep3-regions .mr-verdict.mr-v-ok      { color:var(--green); }
.ep3-regions .mr-verdict.mr-v-partial { color:var(--yellow); }
.ep3-regions .mr-verdict.mr-v-down    { color:var(--red); }
/* PIN-311: On-Demand-Weltprüfung — Button + ehrlicher Kontingent-Hinweis, kompakt
   unter der Regionen-Zeile (eigene Flex-Zeile in der .ep3-regions-Spalte). Nutzt
   den bestehenden btn-secondary/btn-sm-Look, kein Sonder-Styling. */
.ep3-regions .ep3-worldtest { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:1px; }
.ep3-regions .mr-testbtn { line-height:1.15; }
.ep3-regions .mr-quota { font-size:11px; color:var(--text-muted); }

/* ═══════════════════════════════════════════════════════════════════════════
   11. EBENE 1: Kunden als schlanke, risiko-sortierte Liste (Mockup Richtung C)
   Klick öffnet die Kundenseite. Ersetzt optisch die alten Cockpit-Karten.
   ═══════════════════════════════════════════════════════════════════════════ */
#cockpit-grid { display:flex !important; flex-direction:column; gap:8px; }
/* #cockpit-grid-Präfix schlägt den hochspezifischen „Wumms"-Status-Block → neutrale
   Zeilen, Statusfarbe nur an der linken Kante der wirklich riskanten Kunden. */
#cockpit-grid .cockpit-row { display:flex; align-items:center; gap:16px; padding:13px 18px;
  border-radius:var(--radius-lg); background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--border); border-left:3px solid var(--border-2); box-shadow:none; animation:none;
  cursor:pointer; transition:border-color .15s, transform .1s, box-shadow .15s; }
#cockpit-grid .cockpit-row:hover { transform:translateY(-1px); box-shadow:var(--shadow-card-hover); }
/* Konsistente Zeilen: keine farbige Top-Akzentlinie (::before), Status nur an der
   linken Kante — und zwar nach dem TATSÄCHLICHEN Befund (auch „1 Befund" = warn). */
#cockpit-grid .cockpit-row::before { display:none !important; }
#cockpit-grid .cockpit-row.ci-ok   { border-left-color:var(--border-2); }
#cockpit-grid .cockpit-row.ci-warn { border-left-color:var(--yellow); }
#cockpit-grid .cockpit-row.ci-crit { border-left-color:var(--red); }
.cockpit-row .cr-mark { display:flex; align-items:center; gap:8px; flex:none; }
.cockpit-row .cockpit-dot, .cockpit-row .cockpit-logo { width:16px; height:16px; border-radius:5px;
  background-size:cover; background-position:center; flex:none; }
.cockpit-row .cr-name { font-weight:700; color:var(--text); flex:none; min-width:150px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cockpit-row .cr-ep { font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:12px;
  color:var(--text-muted); flex:none; width:56px; }
.cockpit-row .cr-issue { flex:1; min-width:0; font-size:13.5px; color:var(--text-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cockpit-row .cr-issue.ci-crit { color:var(--red); }
.cockpit-row .cr-issue.ci-warn { color:var(--yellow); }
.cockpit-row .cr-uptime { font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  font-size:13px; flex:none; width:64px; text-align:right; }
.cockpit-row .cr-chev { color:var(--text-muted); font-size:18px; flex:none; }
@media (max-width:720px){ .cockpit-row .cr-ep { display:none; } .cockpit-row .cr-name { min-width:0; } }

/* ═══════════════════════════════════════════════════════════════════════════
   12. EBENE 2 (Kundenseite): Breadcrumb-Rücksprung im Kundenkartei-Kopf
   ═══════════════════════════════════════════════════════════════════════════ */
.cust-breadcrumb { padding:0 0 10px; font-size:12.5px; color:var(--text-muted); }
.cust-breadcrumb .cust-bc-back { cursor:pointer; transition:color .12s; }
.cust-breadcrumb .cust-bc-back:hover { color:var(--text); }
/* Kundenseite: Befund-Erklärung + betroffene Endpunkte direkt in der Übersicht
   (nicht in die Kundenzeile gequetscht — Dario). */
.cust-ov-findings { margin:8px 0 4px; }
.cust-ov-down { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:10px 0 2px;
  padding:10px 13px; border-radius:10px; background:var(--red-dim); border:1px solid rgba(224,101,91,.25); }
.cust-ov-down-h { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--red); }
.cust-ov-down-ep { font-size:12.5px; color:var(--text); font-family:var(--font-mono); }

/* ═══════════════════════════════════════════════════════════════════════════
   13. RISIKO-VORSCHAU-ZEITACHSE (Ebene 1, Vorlage C) — „was kommt auf dich zu"
   SSL/Domain/Vertrag = echte Ablaufdaten · Engpass-Prognose = Predictive-Vorschau.
   ═══════════════════════════════════════════════════════════════════════════ */
.rt-sec { margin:2px 0 26px; }
.rt-head { display:flex; align-items:baseline; gap:10px; margin-bottom:12px; }
.rt-title { font-size:15px; font-weight:700; color:var(--text); letter-spacing:-.1px; }
.rt-sub { font-size:12.5px; color:var(--text-muted); }
.rt-wrap { background:linear-gradient(180deg, var(--surface-2), var(--surface)); border:1px solid var(--border);
  border-radius:14px; padding:18px 18px 8px; position:relative; overflow:hidden; }
.rt-bar { display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.rt-seg { display:flex; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.rt-seg button { background:transparent; border:0; color:var(--text-muted); font-family:inherit; font-size:12px; padding:5px 11px; cursor:pointer; }
.rt-seg button.on { background:var(--surface-3); color:var(--text); }
.rt-legend { margin-left:auto; display:flex; gap:14px; font-size:11px; color:var(--text-muted); }
.rt-legend span { display:flex; align-items:center; gap:6px; }
.rt-tri { width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent;
  border-bottom:11px solid var(--text-muted); flex:0 0 auto; }
.rt-tri.crit { border-bottom-color:var(--red); }
.rt-tri.warn { border-bottom-color:var(--yellow); }
.rt-rhomb { width:10px; height:10px; transform:rotate(45deg); flex:0 0 auto; background:var(--st-planned); }
.rt-rhomb.warn { background:var(--yellow); }
.rt-axis { position:relative; height:26px; margin:16px 0 4px 150px; }
.rt-g { position:absolute; top:0; bottom:-999px; width:1px; background:var(--border); }
.rt-tl { position:absolute; top:12px; font-family:var(--font-mono); font-size:10.5px; color:var(--text-muted); transform:translateX(-50%); }
.rt-now { position:absolute; top:-4px; bottom:-999px; width:1px; background:linear-gradient(var(--green), transparent); }
.rt-now b { position:absolute; top:-13px; left:-16px; font-family:var(--font-mono); font-size:9.5px; color:var(--green); }
.rt-lane { display:flex; align-items:center; min-height:56px; border-top:1px solid var(--border); }
.rt-name { width:150px; flex:0 0 auto; font-size:12px; color:var(--text-muted); padding-right:14px; }
.rt-track { position:relative; flex:1; height:46px; }
.rt-mk { position:absolute; top:50%; transform:translate(-50%,-50%); display:flex; align-items:center; gap:7px;
  cursor:pointer; padding:5px 6px; border-radius:8px; white-space:nowrap; }
.rt-mk:hover { background:var(--surface-3); }
.rt-mk.sel { background:var(--surface-3); outline:1px solid var(--border-2); }
.rt-t { font-size:11px; color:var(--text); }
.rt-t small { color:var(--text-muted); font-family:var(--font-mono); }
.rt-zzz { color:var(--text-muted); font-size:11.5px; padding:9px 0 4px 150px; }
.rt-detail { display:grid; grid-template-columns:1fr 480px; gap:20px; margin-top:14px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:14px; padding:20px; align-items:center; }
.rt-kind { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); }
.rt-d-title { font-size:17px; margin:6px 0 2px; font-weight:600; color:var(--text); }
.rt-d-client { color:var(--text-muted); font-size:13px; }
.rt-eta { font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:30px; margin:14px 0 2px; letter-spacing:-.02em; color:var(--text); }
.rt-eta.crit { color:var(--red); }
.rt-eta.warn { color:var(--yellow); }
.rt-eta small { font-size:14px; color:var(--text-muted); }
.rt-meta { font-size:13px; color:var(--text-muted); margin-top:8px; line-height:1.7; }
.rt-meta .rt-mi { color:var(--text); }   /* Namen in Bündel-Listen prominent (Dario-Feedback 08.07.) */
.rt-chart { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:12px; }
.rt-cap { font-size:11px; color:var(--text-muted); margin-bottom:8px; display:flex; justify-content:space-between; }
.rt-cap b { color:var(--text); }
.rt-side-note { font-size:11.5px; color:var(--text-muted); margin-top:8px; line-height:1.6; }
@media(max-width:820px){ .rt-detail { grid-template-columns:1fr; } .rt-axis, .rt-zzz { margin-left:110px; } .rt-name { width:110px; } }

/* ═══════════════════════════════════════════════════════════════════════════
   14. CLEAN-HOUSE-ÜBERSICHT (Ebene 1): flache Endpunkt-/Detail-Sektionen aus der
   Übersicht ausblenden (wie die Vorlage). Über #oc-toggle einblendbar → nichts
   geht verloren, es liegt nur eine Ebene tiefer / auf Abruf.
   ═══════════════════════════════════════════════════════════════════════════ */
.oc-toggle-wrap { margin:4px 0 22px; }
body.overview-clean #onboarding-card,
body.overview-clean .select-toolbar,
body.overview-clean #cards,
body.overview-clean .show-all-row,
body.overview-clean section[data-segment="heartbeats"],
body.overview-clean section[data-segment="expiry"],
body.overview-clean section[data-segment="systemstatus"] { display:none !important; }
#oc-toggle .oc-hide { display:none; }
body:not(.overview-clean) #oc-toggle .oc-show { display:none; }
body:not(.overview-clean) #oc-toggle .oc-hide { display:inline; }

/* KPI-Karten (Vorlage C): 4 Spalten + Detailzeile + Predictive-Vorschau-Tag */
.metrics-row.metrics-4 { grid-template-columns:repeat(3, 1fr); }  /* PIN-268: 3 echte KPIs (Predictive-Kachel entfernt) */
@media(max-width:640px){ .metrics-row.metrics-4 { grid-template-columns:1fr; } }
.metric-detail { font-size:11px; color:var(--text-muted); margin-top:6px; font-family:var(--font-mono); }
.metric-card .kpi-tag { font-size:9px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--st-planned); border:1px solid rgba(94,166,218,.3); border-radius:4px; padding:1px 5px; margin-left:6px; vertical-align:middle; }
.metric-card.kpi-preview .metric-value { color:var(--text-muted); }

/* Kopfzeile wie Vorlage .head: Health-Block links + KPIs rechts in EINER Reihe */
.dash-head { display:grid; grid-template-columns:1.05fr 2fr; gap:12px; align-items:stretch; margin:6px 0 8px; }
.dash-head .value-headline { margin:0; height:100%; }
.dash-head .metrics-row { margin:0; }
.dash-head .metric-card { padding:14px 15px; }
@media(max-width:900px){ .dash-head { grid-template-columns:1fr; } }
/* Kein Neon-Glow an den KPI-Kacheln (Anti-AI-Slop) — nur dezenter Standardschatten,
   Status trägt die Textfarbe, nicht ein leuchtender Rahmen. */
#metric-up, #metric-down { box-shadow:var(--shadow-card) !important; background-image:none !important; border:1px solid var(--border) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   15. KUNDENSEITE — Ebene 2 (PIN-230)
   Echte Vollseiten-Ansicht statt Modal. body.client-page-open blendet das
   Dashboard aus (alle direkten <main>-Kinder außer #client-page). Rein additiv:
   die Bearbeiten-Funktionen bleiben im bestehenden Kunden-Modal (Button „Bearbeiten").
   Status immer Form + Label + Farbe über die CVD-fähigen --st-*; ein Grün-Akzent.
   ═══════════════════════════════════════════════════════════════════════════ */

/* View-Swap: bei offener Kundenseite die übrige Übersicht ausblenden (Header + Modals
   liegen außerhalb <main> → unberührt; Endpunktdetail-Panel/Overlay ebenso). */
body.client-page-open main > *:not(#client-page) { display:none !important; }
#client-page.hidden,
body:not(.client-page-open) #client-page { display:none; }

/* DNS-Wächter-Karte (PIN-133): schlanke, KLICKBARE Karte → Ebene 3. Records kompakt
   einzeilig (erste Zeile + „+N weitere"); Volltext + Aktionen leben in der Ebene 3. */
.dns-card .dns-records { margin:2px 0 10px; display:flex; flex-direction:row; align-items:baseline;
  gap:8px; flex-wrap:wrap; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11.5px; color:var(--text-2); }
.dns-card .dns-rec-line { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }

/* Lokale Flächen-/Text-Variablen: Dunkel als Default, Hell überschrieben →
   Light-Mode bleibt lesbar. Statusfarben (--st-*) und Akzent (--green) adaptieren
   bereits per Modus (CVD/Hoher-Kontrast/Hell gewinnen). */
.client-page {
  --cp-s1:var(--surface); --cp-s2:var(--surface-2); --cp-s3:var(--surface-3);
  --cp-line:var(--border); --cp-line2:rgba(255,255,255,.05);
  --cp-text:var(--text); --cp-muted:var(--text-2); --cp-muted2:var(--text-muted);
  display:block; max-width:1180px; margin:0 auto; padding:2px 0 60px;
  animation:cp-in .18s ease-out;
}
@keyframes cp-in { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
body.light .client-page {
  --cp-s1:#ffffff; --cp-s2:#f6f8fa; --cp-s3:#eef1f4;
  --cp-line:#e4e8ec; --cp-line2:#eef1f4;
  --cp-text:#182420; --cp-muted:#5a6570; --cp-muted2:#8a94a0;
}
.client-page h1,.client-page h2,.client-page h3,.client-page h4 { margin:0; font-weight:600; letter-spacing:-.01em; color:var(--cp-text); }
.client-page .cp-mono { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

/* Breadcrumb — flacher Rücksprung zur Übersicht */
.cp-crumb { display:flex; align-items:center; gap:9px; font-size:13px; color:var(--cp-muted2); margin:12px 0 6px; }
.cp-back { color:var(--cp-muted); border:1px solid var(--cp-line); padding:5px 11px; border-radius:8px; cursor:pointer; }
.cp-back:hover { background:var(--cp-s1); color:var(--cp-text); }
.cp-crumb .cp-sep { color:var(--cp-muted2); }
.cp-crumb .cp-here { color:var(--cp-text); font-weight:600; }

/* Kopf: Identität links + KPI-Karten rechts */
.cp-head { display:grid; grid-template-columns:1.1fr 2fr; gap:14px; margin-top:8px; align-items:stretch; }
@media(max-width:860px){ .cp-head { grid-template-columns:1fr; } }
.cp-ident { background:var(--cp-s1); border:1px solid var(--cp-line); border-radius:var(--radius-lg); padding:18px 20px; display:flex; flex-direction:column; justify-content:center; }
.cp-ident-top { display:flex; align-items:center; gap:12px; }
.cp-ident-sw { width:18px; height:18px; border-radius:5px; flex:0 0 auto; background:var(--green); }
.cp-ident-logo { width:30px; height:30px; border-radius:7px; flex:0 0 auto; background-size:cover; background-position:center; border:1px solid var(--cp-line); }
.cp-ident h1 { font-size:22px; letter-spacing:-.02em; }
.cp-ident-sub { color:var(--cp-muted); font-size:13px; margin-top:9px; }
.cp-chips { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.cp-chip { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--cp-muted); border:1px solid var(--cp-line); border-radius:999px; padding:4px 10px; }
.cp-chip.warn { color:var(--st-degraded); } .cp-chip.crit { color:var(--st-down); } .cp-chip.ok { color:var(--cp-muted); }
.cp-ident-actions { margin-top:14px; display:flex; gap:8px; }
.cp-edit { font-size:12.5px; color:var(--cp-text); background:var(--cp-s2); border:1px solid var(--cp-line); border-radius:9px; padding:7px 14px; cursor:pointer; }
.cp-edit:hover { background:var(--cp-s3); }

.cp-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }  /* PIN-268: 3 KPIs (Forecast-Kachel entfernt) */
@media(max-width:640px){ .cp-metrics { grid-template-columns:1fr; } }
.cp-metric { background:var(--cp-s1); border:1px solid var(--cp-line); border-top:1px solid rgba(47,209,138,.14); border-radius:var(--radius-lg); padding:15px 16px; box-shadow:var(--shadow-card); }
.cp-metric .v { font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:22px; letter-spacing:-.02em; color:var(--cp-text); }
.cp-metric .v small { font-size:12px; color:var(--cp-muted); }
.cp-metric .l { font-size:12px; color:var(--cp-muted); margin-top:5px; }
.cp-metric.accent .v { color:var(--green); }
.cp-metric.preview .v { color:var(--cp-muted2); }
.cp-tag { font-size:9px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--st-planned); border:1px solid rgba(94,166,218,.3); border-radius:4px; padding:1px 5px; margin-left:6px; vertical-align:middle; }

/* Sektions-Kopf */
.cp-sec { margin-top:22px; }
.cp-sec-h { display:flex; align-items:baseline; gap:10px; margin-bottom:11px; }
.cp-sec-h h3 { font-size:14px; }
.cp-sec-h .sub { color:var(--cp-muted); font-size:12.5px; }
.cp-sec-h .cnt { margin-left:auto; font-family:var(--font-mono); font-size:11.5px; color:var(--cp-muted2); }

/* „Braucht Aufmerksamkeit" — Triage dieses Kunden */
.cp-triage { display:flex; flex-direction:column; gap:8px; }
.cp-trow { display:flex; align-items:center; gap:13px; background:var(--cp-s1); border:1px solid var(--cp-line); border-radius:var(--radius-lg); padding:12px 15px; cursor:pointer; }
.cp-trow:hover { background:var(--cp-s2); }
.cp-trow.warn { border-left:3px solid var(--st-degraded); }
.cp-trow.crit { border-left:3px solid var(--st-down); }
.cp-trow.planned { border-left:3px solid var(--st-planned); }
.cp-trow .shp { flex:0 0 auto; font-size:11px; line-height:1; }
.cp-trow.warn .shp,.cp-trow.crit .shp { color:var(--st-degraded); }
.cp-trow.crit .shp { color:var(--st-down); }
.cp-trow.planned .shp { color:var(--st-planned); }
.cp-trow .lbl { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--cp-muted2); width:66px; flex:0 0 auto; }
.cp-trow .what { color:var(--cp-muted); flex:1; font-size:13.5px; }
.cp-trow .what b { color:var(--cp-text); font-weight:600; }
.cp-trow .meta { font-family:var(--font-mono); font-size:11.5px; color:var(--cp-muted2); }
.cp-trow .act { font-size:12.5px; color:var(--green); border:1px solid var(--cp-line); border-radius:8px; padding:6px 12px; white-space:nowrap; background:transparent; cursor:pointer; }
.cp-trow .act:hover { background:var(--cp-s2); }

/* Split: Endpunkte + Seitenkarten */
.cp-split { display:grid; grid-template-columns:1fr 300px; gap:16px; align-items:start; margin-top:22px; }
@media(max-width:920px){ .cp-split { grid-template-columns:1fr; } }

/* Ansicht-Umschalter */
.cp-vtoggle { margin-left:auto; display:flex; border:1px solid var(--cp-line); border-radius:9px; overflow:hidden; }
.cp-vtoggle button { background:transparent; border:0; color:var(--cp-muted); font:inherit; font-size:12px; padding:6px 12px; cursor:pointer; }
.cp-vtoggle button.on { background:var(--cp-s2); color:var(--cp-text); }

/* Endpunkt-Tabelle */
.cp-tbl { border:1px solid var(--cp-line); border-radius:var(--radius-lg); overflow:hidden; }
.cp-th,.cp-tr { display:grid; grid-template-columns:150px 1fr 88px 84px 96px 22px; gap:12px; align-items:center; padding:11px 15px; }
.cp-th { background:var(--cp-s1); color:var(--cp-muted2); font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; border-bottom:1px solid var(--cp-line); }
.cp-th .r { text-align:right; }
.cp-tr { border-top:1px solid var(--cp-line); background:var(--cp-s1); cursor:pointer; }
.cp-tr:first-of-type { border-top:0; }
.cp-tr:hover { background:var(--cp-s2); }
.cp-tr .stt { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--cp-muted); }
.cp-tr .stt .shp { font-size:11px; line-height:1; }
.cp-tr .stt.ok { color:var(--cp-muted); } .cp-tr .stt.ok .shp { color:var(--st-up); }
.cp-tr .stt.warn { color:var(--st-degraded); } .cp-tr .stt.warn .shp { color:var(--st-degraded); }
.cp-tr .stt.crit { color:var(--st-down); } .cp-tr .stt.crit .shp { color:var(--st-down); }
.cp-tr .stt.planned { color:var(--st-planned); } .cp-tr .stt.planned .shp { color:var(--st-planned); }
.cp-tr .stt.paused { color:var(--cp-muted2); }
.cp-tr .ep b { font-weight:600; color:var(--cp-text); }
.cp-tr .ep small { display:block; color:var(--cp-muted2); font-family:var(--font-mono); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cp-tr .num { font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:12.5px; text-align:right; color:var(--cp-text); }
.cp-tr .num.dim { color:var(--cp-muted); }
.cp-tr .exp { font-family:var(--font-mono); font-size:11.5px; color:var(--cp-muted); }
.cp-tr .exp.warn { color:var(--st-degraded); } .cp-tr .exp.crit { color:var(--st-down); }
.cp-tr .go { color:var(--cp-muted2); text-align:right; }
.cp-tr:hover .go { color:var(--cp-text); }
.cp-quiet { padding:10px 15px; color:var(--cp-muted2); font-size:11.5px; background:var(--cp-s1); border-top:1px solid var(--cp-line); }
.cp-ep-empty { padding:16px; color:var(--cp-muted2); font-size:12.5px; background:var(--cp-s1); border:1px solid var(--cp-line); border-radius:var(--radius-lg); }

/* Kachel-Ansicht */
.cp-epcards { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media(max-width:920px){ .cp-epcards { grid-template-columns:1fr; } }
.cp-ecard { background:var(--cp-s1); border:1px solid var(--cp-line); border-left:3px solid var(--cp-line); border-radius:var(--radius-lg); padding:14px; cursor:pointer; transition:.14s; }
.cp-ecard:hover { background:var(--cp-s2); }
.cp-ecard.ok { border-left-color:var(--st-up); } .cp-ecard.warn { border-left-color:var(--st-degraded); } .cp-ecard.crit { border-left-color:var(--st-down); } .cp-ecard.paused { border-left-color:var(--cp-muted2); }
.cp-ecard .et { display:flex; align-items:center; gap:9px; margin-bottom:3px; }
.cp-ecard .et .shp { font-size:11px; }
.cp-ecard.ok .et .shp { color:var(--st-up); } .cp-ecard.warn .et .shp,.cp-ecard.crit .et .shp { color:var(--st-degraded); } .cp-ecard.crit .et .shp { color:var(--st-down); }
.cp-ecard .en { font-weight:600; font-size:14px; color:var(--cp-text); }
.cp-ecard .estar { margin-left:auto; color:var(--st-degraded); font-size:13px; }
.cp-ecard .eu { color:var(--cp-muted2); font-family:var(--font-mono); font-size:11px; margin-bottom:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cp-ecard .ebadge { display:inline-flex; align-items:center; gap:6px; font-size:11px; padding:3px 8px; border-radius:7px; margin-bottom:9px; color:var(--st-degraded); background:var(--yellow-dim); border:1px solid rgba(227,164,69,.25); }
.cp-ecard.crit .ebadge { color:var(--st-down); background:var(--red-dim); border-color:rgba(224,101,91,.25); }
.cp-espark { display:flex; align-items:flex-end; gap:2px; height:24px; margin-bottom:10px; }
.cp-espark i { flex:1; background:var(--green); opacity:.75; border-radius:1px; min-height:2px; }
.cp-espark.warn i { background:var(--st-degraded); }
.cp-espark i.down { background:var(--st-down); opacity:.9; }
.cp-ecard .ef { display:flex; align-items:center; gap:8px; font-size:12.5px; }
.cp-ecard .ef .s { display:flex; align-items:center; gap:7px; color:var(--cp-muted); }
.cp-ecard .ef .s.on { color:var(--st-up); }
.cp-ecard .ef .s.warn { color:var(--st-degraded); } .cp-ecard .ef .s.crit { color:var(--st-down); }
.cp-ecard .ef .up { margin-left:auto; font-family:var(--font-mono); font-variant-numeric:tabular-nums; color:var(--cp-muted); }
.cp-ecard .ef .ms { font-family:var(--font-mono); color:var(--cp-muted2); width:48px; text-align:right; }

/* Seitenkarten */
.cp-side { display:flex; flex-direction:column; gap:12px; }
.cp-card { background:var(--cp-s1); border:1px solid var(--cp-line); border-radius:var(--radius-lg); padding:15px; }
.cp-card h4 { font-size:12.5px; color:var(--cp-muted); margin-bottom:10px; display:flex; align-items:center; gap:7px; }
.cp-card .big { font-size:14px; font-weight:600; color:var(--cp-text); word-break:break-word; }
.cp-card .row { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12.5px; color:var(--cp-muted); padding:5px 0; }
.cp-card .row b { color:var(--cp-text); font-weight:600; font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.cp-card .live { margin-left:auto; font-size:11px; color:var(--st-up); display:flex; align-items:center; gap:5px; }
.cp-card .off { margin-left:auto; font-size:11px; color:var(--cp-muted2); }
.cp-card .btnrow { margin-top:11px; display:flex; gap:8px; flex-wrap:wrap; }
.cp-card .btn { display:inline-block; font-size:12.5px; border:1px solid var(--cp-line); border-radius:9px; padding:7px 13px; color:var(--cp-text); cursor:pointer; background:transparent; }
.cp-card .btn:hover { background:var(--cp-s2); }
.cp-card .btn.pri { background:var(--green); color:#062015; border-color:transparent; font-weight:600; }
.cp-card .btn.pri:hover { opacity:.92; background:var(--green); }
.cp-card .note { font-size:11.5px; color:var(--cp-muted2); margin-top:9px; }
.cp-exps { display:flex; flex-direction:column; gap:2px; }
.cp-exps .e { display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--cp-muted); padding:4px 0; }
.cp-exps .e .shp { font-size:10px; flex:0 0 auto; }
.cp-exps .e.warn .shp { color:var(--st-degraded); } .cp-exps .e.crit .shp { color:var(--st-down); } .cp-exps .e.planned .shp { color:var(--st-planned); }
.cp-exps .e .in { margin-left:auto; font-family:var(--font-mono); font-size:11px; color:var(--cp-muted2); }
.cp-hb-st { display:inline-flex; align-items:center; gap:6px; color:var(--cp-muted); }
.cp-hb-st .shp { font-size:10px; }
.cp-hb-st.ok { color:var(--st-up); } .cp-hb-st.ok .shp { color:var(--st-up); }
.cp-hb-st.crit { color:var(--st-down); } .cp-hb-st.crit .shp { color:var(--st-down); }

/* ═══════════════════════════════════════════════════════════════════════════
   16. ENDPUNKTDETAIL — Ebene 3 (PIN-230)
   Das bisherige Slide-in `#detail-panel` wird zur echten Vollseite. body.endpoint-
   page-open blendet <main> (Dashboard + Kundenseite) aus; das Panel (liegt außerhalb
   <main>) rendert als zentrierte Seite. Alle bestehenden IDs/Aktionen bleiben.
   ═══════════════════════════════════════════════════════════════════════════ */

body.endpoint-page-open main { display:none !important; }

/* Panel aus dem Slide-in-Modus lösen → Seitenfluss */
body.endpoint-page-open #detail-panel {
  position:static !important; transform:none !important; inset:auto !important;
  width:auto !important; max-width:1180px !important; height:auto !important; max-height:none !important;
  margin:0 auto !important; padding:2px 22px 70px !important;
  background:transparent !important; box-shadow:none !important; border:0 !important;
  overflow:visible !important; z-index:auto !important; border-radius:0 !important;
  animation:cp-in .18s ease-out;
  --cp-s1:var(--surface); --cp-s2:var(--surface-2); --cp-line:var(--border);
  --cp-text:var(--text); --cp-muted:var(--text-2); --cp-muted2:var(--text-muted);
}
body.light.endpoint-page-open #detail-panel {
  --cp-s1:#ffffff; --cp-s2:#f6f8fa; --cp-line:#e4e8ec;
  --cp-text:#182420; --cp-muted:#5a6570; --cp-muted2:#8a94a0;
}

/* Breadcrumb (mehrstufig, umbruchfähig) */
.ep3-crumb { display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-size:13px; color:var(--cp-muted2); margin:12px 0 6px; padding:0; border:0; }
.ep3-crumb .pb-item { color:var(--cp-muted); border:1px solid var(--cp-line); padding:5px 11px; border-radius:8px; cursor:pointer; }
.ep3-crumb .pb-item.pb-current { color:var(--cp-text); font-weight:600; border-color:transparent; padding-left:0; cursor:default; }
.ep3-crumb .pb-item:not(.pb-current):hover { background:var(--cp-s1); color:var(--cp-text); }
.ep3-crumb .pb-sep { color:var(--cp-muted2); }

/* Kopf: Titel/URL/Meta links, Aktionsleiste rechts, Schließen ganz rechts */
.ep3-head { margin-top:10px; }
.ep3-head-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.ep3-title { display:flex; align-items:center; gap:11px; }
.ep3-title h2 { font-size:23px; letter-spacing:-.02em; margin:0; color:var(--cp-text); }
.ep3-title .status-dot { width:10px; height:10px; }
.ep3-pill { display:inline-flex; align-items:center; gap:7px; font-size:12px; padding:4px 11px; border-radius:999px; border:1px solid var(--cp-line); }
.ep3-pill .shp { font-size:11px; }
.ep3-pill.warn { color:var(--st-degraded); border-color:rgba(227,164,69,.35); background:var(--yellow-dim); }
.ep3-pill.crit { color:var(--st-down); border-color:rgba(224,101,91,.35); background:var(--red-dim); }
.ep3-pill.paused { color:var(--yellow); border-color:rgba(227,164,69,.35); background:var(--yellow-dim); }
.ep3-url { display:block; color:var(--cp-muted); font-family:var(--font-mono); font-size:12.5px; margin-top:8px; word-break:break-all; }
.ep3-meta { color:var(--cp-muted2); font-size:12px; margin-top:6px; }
/* Aktionsleiste UNTER der Meta-Zeile (nicht rechts) — Dario-Wunsch, wie Template */
.ep3-actions { margin-top:15px; display:flex; gap:7px; flex-wrap:wrap; align-items:center; justify-content:flex-start; padding:0; border:0; }
/* Buttons auf Inhaltsbreite + linksbündig — hebt u.a. .btn-maintenance{flex:1} auf,
   das „Wartungsfenster" sonst riesig aufblähte. Keine Lücke, kein Dehnen. */
.ep3-actions > button { flex:0 0 auto; width:auto; }
.ep3-close { flex:0 0 auto; }

/* KPIs */
.ep3-kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; margin-top:18px; }
@media(max-width:900px){ .ep3-kpis { grid-template-columns:repeat(3,1fr); } }
@media(max-width:560px){ .ep3-kpis { grid-template-columns:repeat(2,1fr); } }
.ep3-kpi { background:var(--cp-s1); border:1px solid var(--cp-line); border-top:1px solid rgba(47,209,138,.14); border-radius:var(--radius-lg); padding:13px 14px; box-shadow:var(--shadow-card); }
.ep3-kpi .v { font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:19px; letter-spacing:-.02em; color:var(--cp-text); }
.ep3-kpi .l { font-size:11.5px; color:var(--cp-muted); margin-top:4px; }
.ep3-kpi-preview .v { color:var(--cp-muted2); }
.ep3-kpi-preview .cp-tag { margin-left:0; margin-top:5px; display:inline-block; }

/* Marker-Zeile — „Marker:"-Caption + Chips im Template-Stil (Symbol trägt die Farbe) */
.ep3-markers { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:16px;
  background:var(--cp-s1); border:1px solid var(--cp-line); border-radius:var(--radius-lg); padding:11px 15px; }
.ep3-mk-cap { font-size:11.5px; color:var(--cp-muted2); margin-right:3px; }
.ep3-markers .pm-marker { display:inline-flex; align-items:center; gap:7px; font-size:12px;
  padding:5px 11px; border-radius:8px; border:1px solid var(--cp-line); background:var(--cp-s2); }

/* Sektionen + Panels */
.ep3-sec { margin-top:22px; }
.ep3-sec-h { display:flex; align-items:baseline; gap:10px; margin-bottom:11px; }
.ep3-sec-h h3 { font-size:14px; color:var(--cp-text); margin:0; }
.ep3-sec-h .sub { color:var(--cp-muted); font-size:12.5px; }
.ep3-panel { background:var(--cp-s1); border:1px solid var(--cp-line); border-radius:14px; padding:16px; }
.ep3-cols { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:820px){ .ep3-cols { grid-template-columns:1fr; } }

/* Zertifikat/Domain KV */
.ep3-kv { padding:4px 16px; }
.ep3-kvrow { display:flex; justify-content:space-between; gap:12px; font-size:13px; padding:9px 0; border-top:1px solid var(--cp-line); }
.ep3-kvrow:first-child { border-top:0; }
.ep3-kvrow .k { color:var(--cp-muted); }
.ep3-kvrow .v { color:var(--cp-text); font-variant-numeric:tabular-nums; }

/* Vorfälle */
.ep3-li { display:flex; align-items:center; gap:12px; font-size:13px; padding:9px 0; border-top:1px solid var(--cp-line); }
.ep3-li:first-child { border-top:0; }
.ep3-li .when { font-size:11.5px; color:var(--cp-muted2); width:120px; flex:0 0 auto; }
.ep3-li .txt { color:var(--cp-muted); }
.ep3-empty { color:var(--cp-muted2); font-size:12.5px; padding:4px 0; }

/* Bestehende Panel-Blöcke (anomaly/ai/function/sparkline/history) im Seitenfluss:
   Abstand + volle Breite (die alten .panel-section-Ränder passen weiter). */
body.endpoint-page-open #detail-panel .panel-section { margin-top:22px; }

/* Heartbeat-Kunden-Tag (Dashboard-Karte) — dezente Pille wie bei Monitoren */
.hb-client-chip { font-size:10.5px; color:var(--text-2); background:var(--surface-2);
  border:1px solid var(--border); border-radius:999px; padding:2px 8px; margin-left:2px;
  white-space:nowrap; max-width:130px; overflow:hidden; text-overflow:ellipsis; }

/* DNS-Wächter (PIN-133): Record-Typ-Badge auf der Karte — monospace Mini-Pille */
.dns-type-badge { font-size:10px; font-weight:600; letter-spacing:.03em;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--text-2); background:var(--surface-2); border:1px solid var(--border);
  border-radius:6px; padding:1px 6px; margin-left:2px; white-space:nowrap; }

/* DNS-Karte: klickbar → Ebene 3 (wie Endpunkt) + kompakte Einzeiler-Records */
.dns-card { cursor:pointer; }
.dns-card .dns-rec-more { color:var(--text-muted); font-size:11px; margin-left:6px; }

/* ── DNS-Wächter Ebene 3 (PIN-133) — Detail als Vollseite, spiegelt #detail-panel ──
   Gleiche Mechanik wie body.endpoint-page-open: <main> aus, Panel wird zentrierte
   Seite; die --cp-*-Variablen MÜSSEN hier gesetzt sein (die .ep3-*-Klassen lesen sie). */
body.dns-page-open main { display:none !important; }
body.dns-page-open #dns-panel {
  position:static !important; transform:none !important; inset:auto !important;
  width:auto !important; max-width:1180px !important; height:auto !important; max-height:none !important;
  margin:0 auto !important; padding:2px 22px 70px !important;
  background:transparent !important; box-shadow:none !important; border:0 !important;
  overflow:visible !important; z-index:auto !important; border-radius:0 !important;
  animation:cp-in .18s ease-out;
  --cp-s1:var(--surface); --cp-s2:var(--surface-2); --cp-line:var(--border);
  --cp-text:var(--text); --cp-muted:var(--text-2); --cp-muted2:var(--text-muted);
}
body.light.dns-page-open #dns-panel {
  --cp-s1:#ffffff; --cp-s2:#f6f8fa; --cp-line:#e4e8ec;
  --cp-text:#182420; --cp-muted:#5a6570; --cp-muted2:#8a94a0;
}

/* Stabilitäts-Balken: grün=stabil (day-up) · rot=geändert (day-down) · grau=nicht
   auflösbar (dns-err) · leer=kein Datentag (day-empty). Nutzt die Endpunkt-Balken. */
.daily-bar.dns-err { background:var(--text-muted); opacity:.4; }
.dns-legend { display:flex; gap:16px; flex-wrap:wrap; margin-top:12px; font-size:11.5px; color:var(--cp-muted2); }
.dns-legend span { display:inline-flex; align-items:center; gap:6px; }
.dns-legend i { width:11px; height:11px; border-radius:3px; display:inline-block; }
.dns-legend i.lg-stable  { background:var(--st-up); }
.dns-legend i.lg-changed { background:var(--st-down); }
.dns-legend i.lg-error   { background:var(--text-muted); opacity:.4; }

/* Aktuelle Einträge (mono-Liste) */
.dns-rec-list { display:flex; flex-direction:column; gap:6px; font-family:var(--font-mono); font-size:13px; }
.dns-rec-list .r { color:var(--cp-text); word-break:break-all; }
.dns-rec-empty { color:var(--cp-muted2); font-size:12.5px; padding:2px 0; }

/* Änderungsverlauf */
.dns-chg { padding:10px 0; border-top:1px solid var(--cp-line); }
.dns-chg:first-child { border-top:0; }
.dns-chg .when { font-size:11.5px; color:var(--cp-muted2); margin-bottom:4px; }
.dns-chg .diff { font-size:12.5px; line-height:1.5; }
.dns-chg .old { color:var(--st-down); font-family:var(--font-mono); word-break:break-all; }
.dns-chg .new { color:var(--st-up);   font-family:var(--font-mono); word-break:break-all; }
.dns-chg .arrow { color:var(--cp-muted2); margin:0 4px; }

/* Prüf-Historie-Tabelle — gleiche Optik wie die Endpunkt-Check-Tabelle */
#dns-detail-table { width:100%; border-collapse:collapse; font-size:12.5px; }
#dns-detail-table th { text-align:left; color:var(--cp-muted2); font-weight:600; font-size:11px;
  text-transform:uppercase; letter-spacing:.5px; padding:6px 8px; border-bottom:1px solid var(--cp-line); }
#dns-detail-table td { padding:8px; border-bottom:1px solid var(--cp-line); color:var(--cp-text); }
#dns-detail-table td.td-up   { color:var(--st-up); }
#dns-detail-table td.td-down { color:var(--st-down); }

/* ═══════════════════════════════════════════════════════════════════════════
   17. EINSTELLUNGEN (settings.html) — nach Mockup „PingMon-Einstellungen.html"
   ───────────────────────────────────────────────────────────────────────────
   Reiner Reskin der BESTEHENDEN Blöcke (Konto/Erscheinungsbild/Alarme/Abo) auf
   die Redesign-Sprache. KEINE Markup-/Logik-Änderung — nur Optik. Die „neu"-
   Blöcke aus dem Mockup (Team, Branding-Vorlagen, Zeitzone, AVV/Export, Alarm-
   Schwellen, Nutzung, Rechnungsdaten) haben KEIN Backend und werden bewusst
   NICHT gebaut.

   Alle Selektoren sind mit `.settings-layout` (bzw. einer settings-eigenen ID)
   präfigiert: (a) scopt streng auf die Einstellungsseite (kein Bleed ins
   Dashboard/Agentur-Demo), (b) hebt die Spezifität über style.css UND über den
   Inline-<style> in settings.html (der NACH redesign.css lädt).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 17a. Layout: breiter, ruhiger, klebende Seitennavigation (nur Desktop) ── */
@media (min-width: 769px) {
  .settings-layout { max-width: 1140px; gap: 26px; }
  .settings-layout .settings-nav { width: 210px; position: sticky; top: 16px; align-self: flex-start; }
}

/* ── 17b. Seitennavigation: aktiver Tab neutral (Grün ist der EINE Akzent,
      Blau bleibt „Info/geplant" reserviert) — ersetzt den blauen/grünen Text ── */
.settings-layout .settings-nav-item { border: 1px solid transparent; border-radius: 10px; }
.settings-layout .settings-nav-item:hover { background: var(--surface); color: var(--text); }
.settings-layout .settings-nav-item.active {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
  font-weight: 600;
}

/* ── 17c. Blöcke: etwas weichere Ecken wie im Mockup; Gefahr-Block mit Kante ── */
.settings-layout .settings-section { border-radius: var(--radius-lg); }
.settings-layout .settings-section-danger { border-left: 3px solid var(--red); }

/* ── 17d. Profil-Zeilen (Konto): flache Liste mit Haarlinien statt Karten
      (Mockup .row). Der Alarm-Kanal-Block behält bewusst die Karten (.chan).
      #locale-overview (PIN-234) + #sessions-list (PIN-235) nutzen dieselbe Optik. ── */
#profile-overview .ch-row,
#locale-overview .ch-row,
#sessions-list .ch-row,
#team-list .ch-row {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  margin: 0;
  padding: 13px 2px;
}
#profile-overview .ch-row:first-child,
#locale-overview .ch-row:first-child,
#sessions-list .ch-row:first-child,
#team-list .ch-row:first-child { border-top: 0; padding-top: 2px; }
#profile-overview .ch-value,
#locale-overview .ch-value,
#sessions-list .ch-value,
#team-list .ch-value { color: var(--text-2); }

/* ── 17e. Alarm-Kanäle: Karten wie Mockup .chan (surface-2, weiche Ecke).
      Linke Status-Kante bleibt (etablierte Redesign-Sprache, Ebene 2/3). ── */
#alert-channels .ch-row { border-radius: 11px; }

/* ── 17f. Toggle-Schalter (Report / KI-Zusammenfassung) nach Mockup .tg:
      getönte Bahn + grüner Knopf statt Vollgrün/weißer Knopf. ── */
.settings-layout .wd-slider { background: var(--surface-3); border: 1px solid var(--border); }
.settings-layout .wd-slider::before { background: var(--text-muted); box-shadow: none; }
.settings-layout .wd-switch input:checked + .wd-slider { background: var(--green-dim); border-color: transparent; }
.settings-layout .wd-switch input:checked + .wd-slider::before { background: var(--green); }

/* ── 17g. Abo: der große Marken-Fix — Blau → das EINE Grün.
      Betrifft Tarif-Badge, „Beliebteste Wahl", Featured-Karte, Upgrade-Buttons. ── */
.settings-layout .billing-tier-badge { background: var(--green-dim); color: var(--green); }
.settings-layout .billing-limits { font-variant-numeric: tabular-nums; }
.settings-layout .billing-limits .limit-item + .limit-item::before {
  content: "·"; margin: 0 8px; color: var(--text-muted);
}

/* Preise mono/tabellarisch — die Redesign-Signatur */
.settings-layout .plan-price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* Featured-Karte (Pro): flach & technisch wie Mockup .plan.pop — NUR die grüne
   1px-Kante, KEIN Grün-Verlauf, KEIN Glow (Glow kommt aus style.css:2376). */
.settings-layout .billing-plan-card.billing-plan-featured {
  border: 1px solid var(--green);
  background: var(--surface);
  box-shadow: none;
}
.settings-layout .billing-plan-card.billing-plan-featured:hover { border-color: var(--green); }
.settings-layout .plan-badge { background: var(--green); color: #062015; }

/* Upgrade-Buttons: nur die hervorgehobene (Pro) grün, die anderen neutral
   (Mockup: Starter/Business = ruhiger .btn, Pro = .btn pri). Bleibt klar klickbar. */
.settings-layout .btn-checkout {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
}
.settings-layout .btn-checkout:hover { background: var(--surface-3); border-color: var(--border-2); opacity: 1; }
/* :not([disabled]) — sonst überstimmt der Featured-Hover (höhere Spezifität) den
   gedämpften „Aktueller Plan"-Button, wenn der Nutzer selbst auf Pro ist. */
.settings-layout .billing-plan-featured .btn-checkout:not([disabled]) { background: var(--green); color: #062015; border-color: transparent; }
.settings-layout .billing-plan-featured .btn-checkout:not([disabled]):hover { background: #28b978; }
/* Deaktivierter „Aktueller Plan"-Button bleibt eindeutig gedämpft */
.settings-layout .plan-btn[disabled] { background: var(--surface-2); color: var(--text-muted); border-color: var(--border); }

/* ── 17h. Technischer Feinschliff (Dario 06.07.): flach wie Mockup, KEIN grüner
      Glow. Der starke Grün-Glow an Buttons/Featured-Karte kommt aus style.css
      (Z.2369/2376) — hier scoped für /settings plattgemacht. ── */
/* Grüne Buttons flach (Passwort/2FA/Generieren/Speichern + alle Plan-/Upgrade-Buttons) */
.settings-layout .btn-primary,
.settings-layout .plan-btn,
.settings-layout .btn-checkout.plan-btn {
  box-shadow: none;
}
.settings-layout .btn-primary:hover,
.settings-layout .plan-btn:hover,
.settings-layout .btn-checkout.plan-btn:hover {
  box-shadow: none;
}
/* Boxen technischer: dünne kühle Kante, kein Schatten (Mockup .block/.plan) */
.settings-layout .settings-section:not(.settings-section-danger) { border-color: rgba(255,255,255,.07); }
.settings-layout .billing-plan-card {
  border-color: rgba(255,255,255,.08);
  border-radius: var(--radius-lg);
  box-shadow: none;
}

/* ── 17i. Nutzung (PIN-239): 3 Kacheln mit Verbrauchsbalken im Abo-Tab.
      Optik nach Mockup PingMon-Einstellungen.html (.usage/.ubar): Mono-Zahl,
      gedämpftes Label, 6px-Balken. Balken wird ab 90 % gelb (Limit in Sicht). ── */
.settings-layout .usage { display: flex; gap: 18px; flex-wrap: wrap; }
.settings-layout .usage .u { flex: 1; min-width: 150px; }
.settings-layout .usage .u .v {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 20px;
}
.settings-layout .usage .u .l { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.settings-layout .ubar {
  height: 6px; border-radius: 3px; background: var(--surface-3);
  overflow: hidden; margin-top: 8px;
}
.settings-layout .ubar i {
  display: block; height: 100%; background: var(--green);
  border-radius: 3px; transition: width .4s ease;
}
.settings-layout .ubar i.warn { background: var(--yellow); }

/* ── 17j. Alarm-Schwellen & Eskalation (PIN-238): Zahlen-Eingabe in der
      ch-row-Bearbeitungszeile schmal halten (Rest erbt das Kanal-Muster). ── */
.settings-layout .th-row .ch-input { max-width: 160px; }

/* ── 17k. Team & Zugriff (PIN-237): natives Rollen-Select im Redesign-Look
      (sonst rendert der Browser es hell); Reihen erben das 17d-Muster. ── */
.settings-layout #team-list .team-role-select {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border-2);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12.5px;
  font-family: inherit;
}
.settings-layout #team-list .team-role-select:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* ── 17l. Sitzungen einklappbar (Dario-Feedback 07.07.): dezenter
      Aufklapp-Link unter der Liste statt zehn Zeilen Dauerzustand. ── */
.settings-layout #sessions-list .sess-toggle {
  background: transparent;
  border: 0;
  color: var(--text-2);
  font-size: 12.5px;
  padding: 10px 2px 2px;
  cursor: pointer;
  font-family: inherit;
}
.settings-layout #sessions-list .sess-toggle:hover { color: var(--text); }

/* ── 18. PIN-159: Pending-Zustand „wird geprüft …" ─────────────────────────
      Frisch angelegte Endpunkte (Sofort-Check läuft noch): dezenter, flacher
      Dreh-Ring — bewusst KEIN Puls-Glow (Redesign-Linie bleibt flach). */
.pm-spin {
  display: inline-block;
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  border: 2px solid var(--border-2);
  border-top-color: var(--green);
  border-radius: 50%;
  vertical-align: -1px;
  animation: pm-spin .8s linear infinite;
}
@keyframes pm-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .pm-spin { animation: none; opacity: .55; }
}
.card-status-label .pm-spin { margin-right: 7px; }
.card-status-label.label-pending { color: var(--text-2); }
/* Ebene 2/3 (Kundenseite-Tabelle/-Karten + Endpunkt-Pill): Spinner sitzt im .shp */
.cp-tr .stt.pending { color: var(--cp-muted); }
.cp-tr .pm-spin, .cp-ecard .pm-spin, .ep3-pill .pm-spin { width: 10px; height: 10px; }
/* Kunden-Modal-Endpunktliste: Ring im Dot-Maß statt 11px-Standard */
.cust-ep-row .pm-spin { width: 8px; height: 8px; border-width: 1.5px; }

/* Lösch-Button links im Modal-Footer (Abstand zu Abbrechen/Speichern) */
.form-actions .modal-del-left { margin-right: auto; }
.ep3-pill.pending { color: var(--text-2); }

/* ── 19. PIN-155: Bestätigungs-Dialog (#modal-confirm) ─────────────────────
      Nutzt die bestehende .modal/.modal-box-Welt; hier nur die Feinheiten.
      danger:true bekommt zusätzlich .btn-danger-solid → voll roter
      Bestätigen-Button (--red #e0655b) statt der dezenten Ghost-Variante. */
/* Der Bestätigungs-Dialog kann AUS einem anderen Modal heraus geöffnet werden
   (Edit-/Kartei-Löschen) — er muss über allen .modal (z-index 30) liegen, sonst
   fängt das darunterliegende Modal die Klicks ab (DOM-Reihenfolge-Falle). */
#modal-confirm { z-index: 40; }
.modal-box-confirm { max-width: 420px; }
.modal-box-confirm h2 { margin-bottom: 12px; }
.modal-box-confirm .modal-hint { margin-bottom: 20px; white-space: pre-line; }
.modal-box-confirm .form-actions { margin-top: 0; }
.modal-box-confirm .btn-danger-solid {
  background: var(--red);
  color: #fff;
  border: 1px solid var(--red);
  width: auto;
  padding: 7px 16px;
}
.modal-box-confirm .btn-danger-solid:hover { background: #d1574d; border-color: #d1574d; }
.modal-box-confirm .btn-danger-solid:active { transform: scale(.97); }
.modal-box-confirm .btn-secondary:focus-visible,
.modal-box-confirm .btn-danger-solid:focus-visible,
.modal-box-confirm .btn-primary:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* ── 19. PIN-255: Übersicht-Listenansicht (Kacheln ⇄ Liste) ────────────────
      Nutzt die cp-Tabellen-Klassen der Kundenseite. Deren --cp-*-Variablen
      sind auf .client-page gescopet → hier für #cards.as-list gespiegelt
      (inkl. Light-Override, gleiches Muster wie .client-page). */
.ov-vtoggle { display:flex; flex:0 0 auto; border:1px solid var(--border); border-radius:9px; overflow:hidden; }
.ov-vtoggle button { background:transparent; border:0; color:var(--text-2); font:inherit; font-size:12px; padding:6px 12px; cursor:pointer; }
.ov-vtoggle button.on { background:var(--surface-2); color:var(--text); }
#cards.as-list {
  --cp-s1:var(--surface); --cp-s2:var(--surface-2); --cp-s3:var(--surface-3);
  --cp-line:var(--border); --cp-line2:rgba(255,255,255,.05);
  --cp-text:var(--text); --cp-muted:var(--text-2); --cp-muted2:var(--text-muted);
  display:block;
}
body.light #cards.as-list {
  --cp-s1:#ffffff; --cp-s2:#f6f8fa; --cp-s3:#eef1f4;
  --cp-line:#e4e8ec; --cp-line2:#eef1f4;
  --cp-text:#182420; --cp-muted:#5a6570; --cp-muted2:#8a94a0;
}
/* Extra-Spalte „Kunde" + Aktions-Spalte (Status | Endpunkt | Kunde | Antwort | Uptime | Ablauf | Aktionen).
   Letzte Spalte FEST (nicht `auto`): sonst resolvet der leere Header-`span` auf 0 und schiebt
   die Zeilen-Spalten gegen die Kopfzeile (PIN-292 Review). Manuell-Modus = breiter (zusätzlich ↑/↓);
   Header UND Zeilen tragen dieselbe .ov-manual-Klasse → identische Tracks → immer bündig. */
#cards.as-list .cp-th, #cards.as-list .cp-tr { grid-template-columns:150px 1fr 140px 88px 84px 96px 96px; }
#cards.as-list.ov-manual .cp-th, #cards.as-list.ov-manual .cp-tr { grid-template-columns:150px 1fr 140px 88px 84px 96px 148px; }
#cards.as-list .cp-tr .cust { font-size:12.5px; color:var(--cp-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#cards.as-list .cp-tr .cust.none { color:var(--cp-muted2); }
/* PIN-292: interaktive Zeilen-Aktionen (Öffnen / Favorit / Reorder / Kunde zuordnen).
   Ruhig per Default (halbtransparent), voll bei Hover/Fokus; ein gesetzter Favorit bleibt
   immer sichtbar (Marker). Touch (kein Hover) → immer voll. Tap-Ziel ≥24×24 (WCAG 2.5.8). */
#cards.as-list .cp-tr .ovl-actions { display:flex; align-items:center; justify-content:flex-end; gap:4px; }
#cards.as-list .cp-tr .ovl-actions > button {
  background:transparent; border:0; cursor:pointer; color:var(--cp-muted2);
  font-size:14px; line-height:1; min-width:24px; min-height:24px; padding:3px 4px; border-radius:6px;
  display:inline-flex; align-items:center; justify-content:center;
  opacity:.5; transition:opacity .12s ease, background .12s ease, color .12s ease;
}
#cards.as-list .cp-tr:hover .ovl-actions > button,
#cards.as-list .cp-tr:focus-within .ovl-actions > button { opacity:1; }
#cards.as-list .cp-tr .ovl-actions > button:hover { background:var(--cp-s3); color:var(--cp-text); }
#cards.as-list .cp-tr .ovl-fav.is-favorite { color:var(--st-degraded); opacity:1; }   /* Marker: immer sichtbar */
#cards.as-list .cp-tr .ovl-mv:disabled { opacity:.2; cursor:default; }                 /* erste ↑ / letzte ↓ */
#cards.as-list .cp-tr .ovl-mv:disabled:hover { background:transparent; color:var(--cp-muted2); }
#cards.as-list .cp-tr .go { font-size:16px; color:var(--cp-muted2); }
@media (hover:none) { #cards.as-list .cp-tr .ovl-actions > button { opacity:1; } }      /* Touch: keine Hover-Enthüllung */
#cards.as-list .cp-tr.card-filtered { display:none; }
#cards.as-list .cp-tr.is-selected { background:var(--cp-s2); box-shadow:inset 3px 0 0 var(--green); }
@media (max-width:900px) {
  /* Schmale Viewports: Antwort- und Ablauf-Spalte weglassen (Kunde bleibt — der Kern von PIN-255) */
  #cards.as-list .cp-th, #cards.as-list .cp-tr { grid-template-columns:100px minmax(0,1fr) 96px 56px 92px; }
  #cards.as-list.ov-manual .cp-th, #cards.as-list.ov-manual .cp-tr { grid-template-columns:100px minmax(0,1fr) 96px 56px 140px; }
  #cards.as-list .cp-th span:nth-child(4), #cards.as-list .cp-th span:nth-child(6),
  #cards.as-list .cp-tr .num.ms, #cards.as-list .cp-tr .exp { display:none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   20. PIN-256: BEARBEITEN ALS EBENE statt Modal
   a) Kundenkartei: body.customer-edit-open macht #modal-customer zur Vollseite
      im Ebenen-Fluss (gleiches Muster wie Ebene 3 / Sektion 16). Alle IDs und
      Listener bleiben — nur die Präsentation wechselt. #modal-confirm (z-40)
      und die übrigen Modale (z-30, fixed) liegen weiterhin DARÜBER.
   b) Endpunkt-Edit: #ep3-edit (ehemals #modal-edit) liegt inline im Ebene-3-
      Panel. Optik flach nach der 17h-Linie (dünne kühle Kanten, kein Glow).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── a) Kundenkartei-Ebene ── */
body.customer-edit-open main { display:none !important; }
body.customer-edit-open #detail-panel, body.customer-edit-open #overlay { display:none !important; }
/* Als Seite scrollt das Dokument selbst — Scroll-Sperre der Modal-Mechanik aufheben
   (der MutationObserver setzt body.modal-open, solange die Kartei sichtbar ist) */
body.customer-edit-open.modal-open { overflow:auto; }

body.customer-edit-open #modal-customer {
  position:static; display:block; z-index:auto;
  padding:6px 22px 70px; background:none; backdrop-filter:none;
  animation:cp-in .18s ease-out;
}
body.customer-edit-open #modal-customer .modal-box-kartei {
  margin:0 auto; width:100%; max-width:960px;
  /* Seitenfluss statt Binnen-Scroll: Karte wächst, das Dokument scrollt */
  max-height:none; overflow:visible;
  box-shadow:none; border:1px solid rgba(255,255,255,.07); border-radius:var(--radius-lg);
}
body.customer-edit-open #modal-customer .modal-box-kartei.is-studio { max-width:1180px; }
body.customer-edit-open #modal-customer #form-customer { overflow:visible; }
body.customer-edit-open #modal-customer .cust-panel { flex:none; overflow-y:visible; }
/* Dossier-Kopf flach (17h): kein Akzent-Radial — Kundenfarbe bleibt in Avatar/Farbbalken */
body.customer-edit-open #modal-customer .cust-dossier {
  background:var(--surface);
  border-bottom:1px solid rgba(255,255,255,.07);
}
/* Fußleiste klebt am Viewport-Boden, solange die Karte im Bild ist */
body.customer-edit-open #modal-customer .form-actions {
  position:sticky; bottom:0; z-index:2;
  border-top:1px solid rgba(255,255,255,.07);
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
}
body.light.customer-edit-open #modal-customer .modal-box-kartei { border-color:var(--border); }
body.light.customer-edit-open #modal-customer .cust-dossier,
body.light.customer-edit-open #modal-customer .form-actions { border-color:var(--border); }
@media (max-width:560px) {
  body.customer-edit-open #modal-customer { padding:2px 10px 50px; }
}

/* ── b) Endpunkt-Edit inline im Ebene-3-Panel ── */
.ep3-edit form { max-width:640px; }
.ep3-edit .ep3-panel { border-color:rgba(47,209,138,.28); }
.ep3-edit .ep3-sec-h { font-size:14px; color:var(--cp-text); margin:0 0 8px; }
.ep3-edit .form-actions { margin-top:16px; }

/* ── Reiche Telemetrie im Detail-Panel (PIN-266 / PIN-216) ── */
/* Antwortzeit-Verlauf (echtes Inline-SVG statt Fake-Prognose) */
.ep3-trend-svg { display:block; width:100%; height:auto; }
.ep3-trend-lg { display:flex; gap:18px; margin-top:6px; font-size:12px; color:var(--text-muted); }
.ep3-trend-lg i { display:inline-block; width:14px; height:0; border-top-width:2px; border-top-style:solid; vertical-align:middle; margin-right:5px; }
.ep3-trend-lg .tl-avg { border-top-color:var(--st-up-line,#3ee0a0); }
.ep3-trend-lg .tl-max { border-top-color:var(--st-degraded-line,#e3a445); border-top-style:dashed; opacity:.7; }

/* Kennzahlen-Chips über dem Verlauf-Chart */
.ep3-trend-stats { display:flex; gap:20px; flex-wrap:wrap; margin:0 0 12px; font-size:12.5px; color:var(--text-muted); }
.ep3-trend-stats b { color:var(--cp-text,#e6edf3); font-size:15px; font-variant-numeric:tabular-nums; margin:0 1px; }
.ep3-trend-stats .tc-k { font-style:normal; }

/* Verbindungsaufbau — EIN Balken je Metrik (Magnitude, KEIN 100%-Stapel; Metriken
   überlappen). Farben = validierte kategoriale Palette (CVD-geprüft, dark). */
.tm-list { display:flex; flex-direction:column; gap:9px; }
.tm-row { display:grid; grid-template-columns:120px 1fr auto; align-items:center; gap:12px; }
.tm-lbl { display:flex; align-items:center; font-size:13px; color:var(--cp-text,#c2ccd6); }
.tm-track { height:8px; border-radius:5px; background:rgba(148,148,148,.14); overflow:hidden; }
.tm-fill { display:block; height:100%; border-radius:5px; }
.tm-val { font-family:ui-monospace,monospace; font-size:13px; font-variant-numeric:tabular-nums; color:var(--cp-text,#e6edf3); }
.tm-row.tm-extra .tm-track { background:none; }
.tm-dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:8px; flex:none; }
.tm-c0 { background:#3987e5; } .tm-c1 { background:#199e70; } .tm-c2 { background:#c98500; }
.tm-c3 { background:#9085e9; } .tm-c4 { background:#d55181; }

/* Upgrade-Teaser für eine gesperrte Telemetrie-Schicht */
.ep3-lock { display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; border:1px dashed rgba(148,148,148,.35); border-radius:10px;
  text-decoration:none; color:var(--cp-text,inherit); background:rgba(148,148,148,.06); }
.ep3-lock:hover { border-color:var(--st-up-line,#3ee0a0); }
.ep3-lock-text { font-size:13.5px; }
.ep3-lock-cta { font-size:12.5px; font-weight:600; color:var(--st-up-line,#3ee0a0); white-space:nowrap; }

/* ═══════════════════════════════════════════════════════════════════════════
   18. NO-GLOW (PIN-216) — restliche Farb-Glows/Puls-Animationen aus style.css,
   die auf dem Dashboard durchschlagen, flach ziehen. Gleiche Spezifität wie die
   Quelle, redesign.css lädt danach → gewinnt (kein !important). „clean/erwachsen".
   ═══════════════════════════════════════════════════════════════════════════ */
/* Offline-Karte: roter Puls-Halo raus, roter Left-Border-Marker + neutraler
   Schatten bleiben (Status weiter klar erkennbar). */
body.dark .card.is-down:not(.has-anomaly),
body.light .card.is-down:not(.has-anomaly) {
  box-shadow: 0 2px 8px -6px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04);
  animation: none;
}
/* Hover: neutrale Anhebung statt farbigem Glow (alle Status). */
body.dark .card.is-up:not(.has-anomaly):hover,
body.dark .card.is-slow:not(.has-anomaly):hover,
body.light .card.is-up:not(.has-anomaly):hover,
body.light .card.is-slow:not(.has-anomaly):hover {
  box-shadow: 0 6px 18px -12px rgba(0,0,0,.4);
}
/* Heartbeat: Puls-Animation + grüner Glow raus. */
.heartbeat-icon { animation: none; }
.hb-card[data-status="up"] .heartbeat-icon { filter: none; }
/* Punkte in Cockpit-/Heartbeat-Zeilen: Blur-Glow-Anteil raus, Dim-Ring bleibt,
   roter Dauer-Puls raus. (Die Karten-Statuspunkte .card .status-dot sind separat
   höher spezifisch und schon flach.) */
.dot-up          { box-shadow: 0 0 0 3px var(--st-up-dim); }
.dot-down        { box-shadow: 0 0 0 3px var(--st-down-dim); animation: none; }
.dot-slow        { box-shadow: 0 0 0 3px var(--st-degraded-dim); }
.dot-maintenance { box-shadow: 0 0 0 3px var(--blue-dim); }
/* Ablauf-Cockpit-Karten: gleicher cardDownGlow-Puls + Farb-Glow wie die Offline-
   Karte → ebenfalls flach. Zustandsfarbe bleibt am Left-Border erhalten. */
body.dark .expiry-card.exp-critical, body.light .expiry-card.exp-critical,
body.dark .expiry-card.exp-warn,     body.light .expiry-card.exp-warn,
body.dark .expiry-card.exp-ok,       body.light .expiry-card.exp-ok {
  box-shadow: 0 2px 8px -6px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04);
  animation: none;
}
body.dark .expiry-card.exp-critical:hover, body.light .expiry-card.exp-critical:hover,
body.dark .expiry-card.exp-warn:hover,     body.light .expiry-card.exp-warn:hover,
body.dark .expiry-card.exp-ok:hover,       body.light .expiry-card.exp-ok:hover {
  box-shadow: 0 6px 18px -12px rgba(0,0,0,.4);
}
/* „LIVE"-Chrome-Punkt: grüner Glow raus, Blink (Opacity) bleibt. */
.sp-chrome-live::before { box-shadow: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   18) PIN-214: SEITEN-NAVIGATION (Hash-Routen)
   Der Aufbau der Blöcke bleibt UNVERÄNDERT — Routen steuern nur, welche
   Sektionen sichtbar sind. body[data-route] setzt der Router (app.js):
     dashboard    = heutige Übersicht (overview-clean wie gehabt)
     endpunkte    = Monitor-Grid + Heartbeats + Fällig demnächst + System-Status
     kunden       = Kunden-Cockpit (Kundenseite Ebene 2 via client-page-open)
     statusseiten = Statusseiten-Seite mit Editor-Direktzugang
   ═══════════════════════════════════════════════════════════════════════════ */

/* Endpunkte-Seite: die Übersichts-Blöcke ausblenden. Die technischen Segmente
   werden sichtbar, weil der Router dort overview-clean ENTFERNT (korrekte
   display-Werte bleiben Sache der Bestands-CSS — nichts wird erzwungen). */
body[data-route="endpunkte"] .dash-head,
body[data-route="endpunkte"] #value-headline,
body[data-route="endpunkte"] .metrics-footer,
body[data-route="endpunkte"] #dash-customize,
body[data-route="endpunkte"] #triage,
body[data-route="endpunkte"] #risk-timeline,
body[data-route="endpunkte"] #client-cockpit,
body[data-route="endpunkte"] .oc-toggle-wrap { display: none !important; }

/* Kunden-Seite: nur Cockpit + Leer-Hinweis (Ebene 2 liegt in #client-page). */
body[data-route="kunden"] main > *:not(#client-cockpit):not(#clients-empty):not(#client-page) { display: none !important; }

/* Statusseiten-Seite: nur die Statusseiten-Sektion. */
body[data-route="statusseiten"] main > *:not(#statuspages) { display: none !important; }
body:not([data-route="statusseiten"]) #statuspages { display: none !important; }

/* Kopf der Statusseiten-Seite im Stil der übrigen Sektions-Köpfe. */
.sp-page-head { margin: 6px 0 18px; }
.sp-page-title { font-size: 20px; font-weight: 700; margin: 0 0 4px; }
.sp-page-sub { color: var(--text-muted, #9ab0a4); font-size: 13.5px; margin: 0; }
#statuspages .manage-cust-list { margin-top: 4px; }

/* Mobile: Navigation nicht mehr verstecken (style.css:640px), sondern seitlich
   scrollbar machen — sonst wären die neuen Seiten mobil unerreichbar. */
@media (max-width: 640px) {
  .nav-center {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 8px;
  }
  .nav-center::-webkit-scrollbar { display: none; }
  .nav-center .nav-link { white-space: nowrap; }
}

/* PIN-214 Review-Fixes: Anlegen/Verwalten im Cockpit-Kopf — NUR auf der
   Kunden-Route (Dashboard-Aufbau bleibt unverändert). Betrachter (nur-lesend)
   sehen keine Anlege-CTAs — weder im Cockpit-Kopf noch im Leerzustand. */
.cockpit-route-actions { display: none; }
body[data-route="kunden"] .cockpit-route-actions { display: inline-flex; gap: 8px; }
body.pm-viewer #cockpit-add-customer,
body.pm-viewer #clients-empty-add { display: none !important; }

/* PIN-214 Feedback Dario 10.07.: Seiten-Tabs deutlich sichtbar — Segment-Container,
   flach (kein Glow), aktiver Tab = grün getönte Pille + kräftige Schrift. */
.nav-tabs {
  display: inline-flex; align-items: center; gap: 2px;
  flex: 0 0 auto;
  padding: 4px; margin-right: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
}
.nav-tabs .nav-link { padding: 6px 13px; border-radius: 7px; font-size: 13.5px; }
.nav-tabs .nav-link.is-active {
  color: var(--green, #2fd18a);
  background: rgba(47, 209, 138, .13);
  font-weight: 700;
  box-shadow: none;   /* ersetzt die Grün-Unterkante aus Sektion 5 innerhalb der Tabs */
}
body.light .nav-tabs { background: rgba(0,0,0,.045); border-color: rgba(0,0,0,.10); }
body.light .nav-tabs .nav-link.is-active { background: rgba(11,122,60,.12); color: #0b7a3c; }

/* ── 20. PIN-58/208: ⌘K-Befehls-Palette + KI-Copilot ────────────────────────
   Handgerollt nach Prototyp-Vorbild (copilot-input), auf die redesign-Tokens
   gemappt. z-index 60: über allen Modals (30/40), unter Tooltip/FAB (100).
   DOM hängt an <body> (überlebt den 30-s-Poll), Sichtbarkeit via .hidden. */
.cmdk-back {
  position: fixed; inset: 0;
  /* Dario 11.07.: erwachsene, cleane Box statt 3D-Popup — leichter Schleier
     OHNE Blur, der Inhalt dahinter bleibt erkennbar (nachlesen beim Endpunkt) */
  background: rgba(6, 9, 8, .45);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 13vh;
  z-index: 60;
}
.cmdk-back.hidden { display: none; }
.cmdk {
  width: min(680px, 94vw);
  max-height: min(600px, 78vh);
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);   /* flacher Karten-Look (Redesign) statt Schwebe-Schatten */
}
.cmdk input {
  width: 100%; border: 0; background: transparent;
  color: var(--text); font-size: 15px; font-family: inherit;
  padding: 15px 16px; outline: none;
  border-bottom: 1px solid var(--border);
}
.cmdk-res { overflow: auto; padding: 6px; flex: 1; }
.cmdk-res.hidden { display: none; }
.cmdk-sec {
  padding: 8px 11px 4px;
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted);
}
.cmdk-it {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 8px;
  cursor: pointer; font-size: 13px; color: var(--text);
}
.cmdk-it .cmdk-kind {
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--text-muted); min-width: 58px; flex: 0 0 auto;
}
.cmdk-it .cmdk-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-it .cmdk-meta { margin-left: auto; color: var(--text-muted); font-size: 11px; flex: 0 0 auto; }
.cmdk-it[aria-selected="true"] { background: var(--surface-2); }
.cmdk-it[aria-selected="true"] .cmdk-kind { color: var(--green); }
.cmdk-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-muted); flex: 0 0 auto;
}
.cmdk-dot.up { background: var(--green); }
.cmdk-dot.down { background: var(--red); }
.cmdk-dot.paused { background: var(--yellow); }
.cmdk-empty { padding: 16px; color: var(--text-2); font-size: 13px; text-align: center; }
.cmdk-foot {
  border-top: 1px solid var(--border);
  padding: 8px 12px;
  color: var(--text-muted); font-size: 11px; font-family: var(--font-mono);
  display: flex; gap: 16px;
}
.cmdk-foot .cmdk-foot-usage { margin-left: auto; }

/* Copilot-Antwort im selben Panel */
.cmdk-answer { overflow: auto; padding: 14px 16px; flex: 1; font-size: 13.5px; line-height: 1.55; color: var(--text); }
.cmdk-answer.hidden { display: none; }
.cmdk-a-q { color: var(--text-2); font-size: 12px; margin-bottom: 8px; }
.cmdk-a-text { white-space: pre-wrap; }
.cmdk-a-text.cmdk-err { color: var(--red); }
.cmdk-a-basis { margin-top: 10px; font-size: 11.5px; color: var(--text-muted); font-family: var(--font-mono); }
.cmdk-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cmdk-chip {
  border: 1px solid var(--border-2); background: var(--surface-2);
  color: var(--text); border-radius: 999px;
  padding: 5px 12px; font-size: 12px; cursor: pointer; font-family: inherit;
}
.cmdk-chip:hover { border-color: var(--green); color: var(--green); }
.cmdk-loading { display: flex; gap: 8px; align-items: center; color: var(--text-2); font-size: 13px; }
.cmdk-spin {
  width: 14px; height: 14px; flex: 0 0 auto;
  border: 2px solid var(--border-2); border-top-color: var(--green);
  border-radius: 50%;
  animation: cmdk-spin .8s linear infinite;
}
@keyframes cmdk-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cmdk-spin { animation: none; } }

/* Einmaliger Erster-Login-Hinweis („⌘K sucht, fragt & springt") */
.cmdk-hint {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 10px; align-items: center;
  background: var(--surface-2); border: 1px solid var(--border-2);
  border-radius: 999px; padding: 8px 14px;
  font-size: 12.5px; color: var(--text);
  z-index: 50; box-shadow: var(--shadow-card-hover);
}
.cmdk-hint kbd, .cmdk-foot kbd {
  font-family: var(--font-mono); font-size: 11px; color: var(--text);
  background: var(--surface-3); border: 1px solid var(--border-2);
  border-bottom-width: 2px; border-radius: 6px;
  padding: 1px 6px; min-width: 18px; text-align: center; display: inline-block;
}
.cmdk-hint button {
  border: 0; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 12.5px; color: var(--green); padding: 2px 4px;
}
.cmdk-hint .cmdk-hint-x { color: var(--text-muted); }

/* Light-Mode (redesign-Tokens sind dunkel definiert → explizite Overrides) */
body.light .cmdk-back { background: rgba(15,23,19,.35); }
body.light .cmdk { background: #ffffff; border-color: #dbe3de; box-shadow: 0 1px 2px rgba(20,40,30,.16), 0 0 0 1px rgba(20,40,30,.04); }
body.light .cmdk input { color: #15211b; border-bottom-color: #e3eae5; }
body.light .cmdk-it { color: #15211b; }
body.light .cmdk-it[aria-selected="true"] { background: #eef4f0; }
body.light .cmdk-foot { border-top-color: #e3eae5; }
body.light .cmdk-answer, body.light .cmdk-a-text { color: #15211b; }
body.light .cmdk-chip { background: #f0f5f2; border-color: #d7e0da; color: #15211b; }
body.light .cmdk-hint { background: #ffffff; border-color: #dbe3de; color: #15211b; }
body.light .cmdk-hint kbd { background: #f0f5f2; border-color: #d7e0da; color: #15211b; }

/* Dario 11.07. (2. Runde): Symbol = abstrahiertes PingMon-Logo (offener Ring +
   Punkt + Ping-Welle) statt ✦-Stern — Gemini-Abstand. Farben über die Tokens
   (grün/blau), bewusst statisch/clean. Irisierend bleibt nur die Frage-Modus-
   Unterkante am Eingabefeld. */
.pm-ask-mark { width: 15px; height: 15px; flex: 0 0 auto; vertical-align: -2px; }
.cmdk-it-ask .cmdk-kind { display: flex; align-items: center; justify-content: flex-start; }
.cmdk-it-ask .cmdk-kind .pm-ask-mark { width: 17px; height: 17px; }

/* Header-Button „Fragen": irisierender 1px-Rahmen (flach, kein Glow) —
   Dario-Feedback „zu versteckt/unscheinbar". */
#btn-copilot {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid transparent;
  background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box,
              linear-gradient(100deg, #2fd18a, #5ea6da, #b58cf0, #e3a445) border-box;
}
#btn-copilot:hover {
  background: linear-gradient(var(--surface-3), var(--surface-3)) padding-box,
              linear-gradient(100deg, #2fd18a, #5ea6da, #b58cf0, #e3a445) border-box;
}
body.light #btn-copilot {
  background: linear-gradient(#ffffff, #ffffff) padding-box,
              linear-gradient(100deg, #0f9d63, #3b82c4, #8b5cf6, #d08a2a) border-box;
}

/* Gesprächs-Verlauf im Antwort-Panel (Antworten bleiben nachlesbar) */
.cmdk-a-entry { padding: 4px 0; }
.cmdk-a-entry + .cmdk-a-entry { border-top: 1px solid var(--border); margin-top: 10px; padding-top: 12px; }
.cmdk-a-old { opacity: .6; }
.cmdk-a-old:hover { opacity: 1; }
/* Frage-Modus aktiv: feine irisierende Unterkante am Eingabefeld */
.cmdk.cmdk-askmode input {
  border-bottom-color: transparent;
  background: linear-gradient(90deg, rgba(47,209,138,.85), rgba(94,166,218,.85), rgba(181,140,240,.85), rgba(227,164,69,.85), rgba(47,209,138,.85)) bottom / 300% 2px no-repeat;
  animation: cmdk-iris-line 7s linear infinite alternate;
}
@keyframes cmdk-iris { to { background-position: 100% 0; } }
@keyframes cmdk-iris-line { to { background-position: 100% bottom; } }
@media (prefers-reduced-motion: reduce) {
  .cmdk-it-ask .cmdk-kind, .cmdk.cmdk-askmode input { animation: none; }
}

/* Palette-Scrollbar (Dario: Standard-Scrollbar zu grell/breit, schnitt Text an) */
.cmdk-res { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; padding-right: 10px; }
.cmdk-res::-webkit-scrollbar { width: 6px; }
.cmdk-res::-webkit-scrollbar-track { background: transparent; }
.cmdk-res::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }
.cmdk-res::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Antwort-Scrollbar dezent (Dario: Standard-Scrollbar zu grell/breit, schnitt Text an) */
.cmdk-answer { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; padding-right: 20px; }
.cmdk-answer::-webkit-scrollbar { width: 6px; }
.cmdk-answer::-webkit-scrollbar-track { background: transparent; }
.cmdk-answer::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }
.cmdk-answer::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Kunden-Zuordnung in der Palette sichtbar (Dario 11.07.: „zu unauffällig") */
.cmdk-meta-chip {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 10.5px;
  color: var(--text-2);
  white-space: nowrap;
}
body.light .cmdk-meta-chip { background: #f0f5f2; border-color: #d7e0da; color: #4a5a51; }

/* ═══════════════════════════════════════════════════════════════════════════
   21. PAKET 2 „CRAFT" — Lebendig-Puls · Ebenen-Übergang · Timeline-Reveal
   Design-DNA: FLACH, kein Glow (PIN-216), max 1–2 wahrgenommene Bewegungen pro
   Ansicht (PIN-93). NUR transform/opacity — modi-sicher (light/cvd/contrast).
   MUSS letzte Sektion bleiben (schlägt NO-GLOW + style.css per Reihenfolge).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 21a · Status-Puls: synchrones Atmen ALLER up-Dots ─────────────────────
   EIN Takt für alle Punkte (kein Stagger!) = wirkt als EIN ruhiges Element.
   opacity-only: Form (Sektion 8) + Farbe (--st-*, CVD/HC) bleiben unberührt,
   der flache Dim-Ring dimmt mit. Kein will-change (150 Karten = 150 Layer). */
/* Dario-Feedback-Runde 2 (12.07.): Opacity-Dimmen war die falsche Mechanik — der
   Punkt näherte sich beim Abdunkeln der Boxfarbe an und VERSCHWAND statt aufzufallen.
   Jetzt Größen-Atmen: volle Farbe bleibt, der Punkt pulsiert in der Größe. Funktioniert
   in JEDER Farbwelt (auch CVD-Blau), weil es nicht von Helligkeit abhängt.
   transform = compositor-only, verändert kein Layout. */
@keyframes pm-dot-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.35); }
}
.card:not(.has-anomaly) .status-dot.dot-up {
  animation: pm-dot-breathe 3.8s ease-in-out infinite;
}

/* Alter Erste-Karte-Ring (style.css:2419) ERSETZT: war willkürlich (nur
   Karte 1), brach in der Gruppen-Ansicht (#cards-Kinder = .client-group)
   und war auf der Agentur-Demo tot (motion.css dort nicht verlinkt). */
#cards > .card:first-child .status-dot.dot-up::after { content: none; animation: none; }

/* Ebene 3 (Endpunkt-Vollseite): der EINE Ping-Ring am Titel-Dot — „dieser
   Endpunkt wird live geprüft". transform/opacity-only, Farbe über den in
   ALLEN Modi definierten RGB-Kanal (style.css:62/98/131-161). */
.ep3-title .status-dot.dot-up { position: relative; }
.ep3-title .status-dot.dot-up::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  pointer-events: none;
  border: 2px solid rgb(var(--st-up-rgb) / .45);
  animation: pm-dot-ring 3.2s ease-out infinite;
}
@keyframes pm-dot-ring {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* Down-Dreieck: Doppel-Herzschlag (Dario-Feedback-Runde 3: „bei den roten passiert
   gar nichts"). KEIN Glow, kein Farbwechsel — nur Größe: zwei kurze Schläge, dann
   Ruhe. Dringlicher Rhythmus als das up-Atmen, Form-Codierung (Dreieck) bleibt.
   dot-slow (degraded) bleibt bewusst statisch — Alarm-Bewegung nur für echte Ausfälle. */
@keyframes pm-dot-alert {
  0%, 30%, 100% { transform: scale(1); }
  8%            { transform: scale(1.35); }
  16%           { transform: scale(1); }
  23%           { transform: scale(1.25); }
}
.card .status-dot.dot-down {
  animation: pm-dot-alert 2.8s ease-in-out infinite;
}

/* Kachel-Diagramm „lebt beim Anfassen": Balken steigen beim Hover gestaffelt kurz
   auf ihre echte Höhe (Endhöhen = echte Daten, keine Verfälschung — nur Einstiegs-
   Animation). transform-box: fill-box macht scaleY je Balken von der Basislinie aus. */
@keyframes pm-bar-rise {
  from { transform: scaleY(.5); opacity: .35; }
  to   { transform: scaleY(1);  opacity: .8; }
}
.card:hover .card-sparkline rect {
  transform-box: fill-box;
  transform-origin: bottom;
  animation: pm-bar-rise .28s ease-out backwards;
}
.card:hover .card-sparkline rect:nth-of-type(2)  { animation-delay: .022s; }
.card:hover .card-sparkline rect:nth-of-type(3)  { animation-delay: .044s; }
.card:hover .card-sparkline rect:nth-of-type(4)  { animation-delay: .066s; }
.card:hover .card-sparkline rect:nth-of-type(5)  { animation-delay: .088s; }
.card:hover .card-sparkline rect:nth-of-type(6)  { animation-delay: .11s; }
.card:hover .card-sparkline rect:nth-of-type(7)  { animation-delay: .132s; }
.card:hover .card-sparkline rect:nth-of-type(8)  { animation-delay: .154s; }
.card:hover .card-sparkline rect:nth-of-type(9)  { animation-delay: .176s; }
.card:hover .card-sparkline rect:nth-of-type(10) { animation-delay: .198s; }
.card:hover .card-sparkline rect:nth-of-type(11) { animation-delay: .22s; }
.card:hover .card-sparkline rect:nth-of-type(n+12) { animation-delay: .242s; }

/* Hoher Kontrast = maximale Klarheit: Statuszeichen werden NIE animiert/gedimmt. */
body.contrast .card .status-dot.dot-up { animation: none; opacity: 1; }
body.contrast .card .status-dot.dot-down { animation: none; }
body.contrast .ep3-title .status-dot.dot-up::after { content: none; }

/* ── 21b · Ebenen-Wechsel (View Transitions, app.js pmViewTransition) ──────
   Kurzer Root-Crossfade, an cp-in angelehnt. BEWUSST kein transform auf root:
   der fixe Header dürfte nie mitdriften. Den 4-px-Drift liefert weiterhin
   cp-in am einfliegenden Ebenen-Element (läuft im ::view-transition-new-
   Snapshot live mit) → Seitenwechsel = Fade, Drill-down = Fade + Drift. */
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .18s; animation-timing-function: ease-out; }

/* ── 21c · Risiko-Zeitachse: einmaliges „Aufziehen" ────────────────────────
   JS setzt .rt-reveal EINMALIG vor dem ersten Unhide (renderTimeline,
   Einmal-Flag) und entfernt sie nach 800 ms. Ohne Klasse: keine animation-
   Eigenschaft → 30-s-Poll-Rebuild (rtLayoutLanes: innerHTML='') und Routen-
   Rückkehr (display:none→block) feuern NICHT erneut. Nur echte Ablaufdaten
   — kein Prognose-Look, nur Einblend-Handwerk. */
#risk-timeline.rt-reveal .rt-lane { animation: rt-fade-in .3s ease-out both; }
#risk-timeline.rt-reveal .rt-lane:nth-child(2) { animation-delay: .06s; }
#risk-timeline.rt-reveal .rt-lane:nth-child(3) { animation-delay: .12s; }
#risk-timeline.rt-reveal .rt-now  { animation: rt-fade-in .4s ease-out both; }
@keyframes rt-fade-in { from { opacity: 0; } }

/* Marker: Fade + minimaler Scale. WICHTIG: Basis-transform translate(-50%,-50%)
   (Z. 411) muss in den Keyframes stehen, sonst springt die Position. */
#risk-timeline.rt-reveal .rt-mk { animation: rt-mk-in .34s ease-out both; animation-delay: .14s; }
#risk-timeline.rt-reveal .rt-mk:nth-child(2)   { animation-delay: .22s; }
#risk-timeline.rt-reveal .rt-mk:nth-child(n+3) { animation-delay: .30s; }
@keyframes rt-mk-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.85); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ── 21d · Bewegungs-Bremse (PIN-93): Neues + pmSnap-Nachrüstung ───────────
   Das globale Blanket (style.css-Ende) drückt alle Dauern auf 0.01ms; hier
   zusätzlich saubere End-Zustände (kein Ring-Rest) und die ::view-transition-
   Pseudos, die der *-Selektor des Blankets NICHT erfasst. */
@media (prefers-reduced-motion: reduce) {
  .card:not(.has-anomaly) .status-dot.dot-up { animation: none; }
  .card .status-dot.dot-down { animation: none; }
  .card:hover .card-sparkline rect { animation: none; }
  .ep3-title .status-dot.dot-up::after { content: none; }   /* kein statischer Ring-Rest */
  .card.pm-snap { animation: none; }                        /* pmSnap, style.css:3656 */
  #risk-timeline.rt-reveal .rt-lane,
  #risk-timeline.rt-reveal .rt-now,
  #risk-timeline.rt-reveal .rt-mk { animation: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   26. PIN-293: LIGHT-MODE — Tiefe & Ruhe (konsolidiert, am Dateiende → gewinnt).
   Ursache des „Weiß-auf-Weiß": Papier fast weiß (#f6f8fa), Karten weiß mit Verlaufs-
   Tönung, und weit gestreute -22px-„Glow"-Schatten, die auf Hell verschwinden.
   Fix: Papier klar unter Weiß (Karten heben ab), Karten solides Weiß + knackiger
   kleiner Schatten (kein Glow, Redesign-DNA), Marken-Emerald, lesbare Muted-Töne.
   Status bleibt über linke Kante + Punkt + Label (border-color NICHT im Shorthand
   → farbige Status-Kante erhalten). CVD/HC-Modi unberührt.
   ═══════════════════════════════════════════════════════════════════════════ */
body.light {
  --bg:         #dce1d8;   /* Papier ruhig unter Weiß, leicht gedämpft (weniger Leuchtkraft) */
  --surface:    #f8f9f5;   /* warmes Off-White statt reinweiß → blendet nicht (Dario: „zu grell") */
  --surface-2:  #eef1ea;
  --surface-3:  #dee3d9;
  --border:     #cbd2c6;   /* sichtbare Haarlinie */
  --border-2:   #b8c0b2;
  --text:       #18241d;   /* warmes Near-Black */
  --text-2:     #46554c;
  --text-muted: #5e6d64;   /* dunkel genug → Labels lesbar (~4.7:1 auf Weiß) */
  --green:      #0f9d63;
  --green-dim:  rgba(15,157,99,.10);
  --st-up-line: #0f9d63;
}
body.light { background: var(--bg); }

/* Karten/Kacheln: solides Weiß, kein muddy Verlauf, knackiger kleiner Schatten
   (ersetzt die auf Hell unsichtbaren Streuschatten). border-color statt border-
   Shorthand → die farbige linke Status-Kante (border-left) bleibt erhalten. */
body.light .card,
body.light .metric-card,
body.light .stat,
body.light .sp-card,
body.light .hb-card,
body.light .pm-card,
body.light .modal-box {
  background-color: var(--surface) !important;   /* Off-White, nicht reinweiß → augenschonend */
  background-image: none !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 1px 2px rgba(20,40,28,.05), 0 5px 14px rgba(20,40,28,.08) !important;
}
/* Header nicht reinweiß (der helle Balken oben trug zum „grell" bei) */
body.light header { background: rgba(247,249,244,.90) !important; border-bottom-color: var(--border) !important; }
/* Farbige linke Status-Kante NACH dem Border-Reset wieder setzen (sonst vom
   border:1px-Reset überschrieben). Status = Kante + Punkt + Label (Redesign-DNA). */
body.light .card.is-up    { border-left: 3px solid var(--st-up) !important; }
body.light .card.is-down  { border-left: 3px solid var(--st-down) !important; }
body.light .card.is-slow  { border-left: 3px solid var(--st-degraded) !important; }
body.light .card:hover,
body.light .metric-card:hover,
body.light .pm-card:hover,
body.light .hb-card:hover {
  box-shadow: 0 8px 22px rgba(24,45,32,.13) !important;
}

/* ═══ 27. PIN-277 — Volle Kopfzeile oben + einklappbare Nav-SIDEBAR links ═══════
   Ersetzt den überladenen 2-zeiligen Header: OBEN eine volle, fixierte Kopfzeile
   (Logo links, Aktionen + Konto rechts), LINKS darunter eine reine, einklappbare
   Nav-Sidebar. body:has(.app-sidebar) bekommt padding-top (Kopfzeile) + padding-left
   (Sidebar) → main UND Ebenen-Panels rücken sauber ein. Nur auf der Dashboard-Seite
   (settings.html hat keine .app-sidebar → 0 Bleed). ☰ klappt die Sidebar ein (gemerkt).
   Router/aktiver Zustand unverändert. Dark + Light + Mobil. */
:root { --sidebar-w: 210px; --topbar-h: 58px; }
body:has(.app-sidebar) { padding-top: var(--topbar-h); padding-left: var(--sidebar-w); }
body:has(.app-sidebar).sidebar-collapsed { padding-left: 0; }

/* Kopfzeile: volle Breite, fix oben (unter Modals). */
.app-topbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h); z-index: 25;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: nowrap; padding: 0 18px; border-bottom: 1px solid var(--border);
  background: var(--surface);
}
body.dark  .app-topbar { background: rgba(13,18,16,.86);  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
body.light .app-topbar { background: rgba(247,249,244,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.topbar-left  { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.topbar-logo  { gap: 9px; }
.topbar-logo .pm-logo { width: 32px; height: 32px; }
.topbar-logo .logo-text { font-size: 18px; }
.topbar-right { display: flex; align-items: center; gap: 7px; flex-wrap: nowrap; justify-content: flex-end; min-width: 0; }
.topbar-sep   { width: 1px; height: 24px; background: var(--border); margin: 0 3px; flex: 0 0 auto; }
.sb-toggle    { font-size: 17px; }

/* Sidebar: unter der Kopfzeile, fix links, reine Navigation. */
.app-sidebar {
  position: fixed; left: 0; top: var(--topbar-h); bottom: 0; width: var(--sidebar-w);
  display: flex; flex-direction: column; padding: 14px 12px; z-index: 20;
  background: rgba(255,255,255,.015); border-right: 1px solid var(--border);
  overflow-y: auto; transition: transform .16s ease;
}
body.light .app-sidebar { background: #eef1eb; }
body.sidebar-collapsed .app-sidebar { transform: translateX(-100%); }
.sb-nav { display: flex; flex-direction: column; align-items: stretch; gap: 2px; margin: 0; }
.sb-nav .nav-link {
  display: flex; align-items: center; padding: 9px 12px; border-radius: 8px;
  font-size: 13.5px; font-weight: 500; color: var(--text-2); white-space: nowrap;
}
.sb-nav .nav-link:hover { background: rgba(127,140,130,.12); color: var(--text); }
.sb-nav .nav-link.is-active {
  background: var(--green-dim); color: var(--green); font-weight: 600;
  box-shadow: inset 2px 0 0 var(--green);
}
.sb-sep { height: 1px; background: var(--border); margin: 9px 8px; }

/* Mobil: Kopfzeile in den Fluss (sticky, umbruchfähig), Sidebar wird horizontaler
   scrollbarer Nav-Balken darunter. Kein Off-Canvas, kein padding-Offset nötig. */
@media (max-width: 900px) {
  body:has(.app-sidebar) { padding-top: 0; padding-left: 0; }
  body:has(.app-sidebar).sidebar-collapsed { padding-left: 0; }
  .app-topbar { position: sticky; height: auto; flex-wrap: wrap; padding: 10px 14px; }
  .topbar-right { flex-wrap: wrap; }
  .app-sidebar {
    position: static; left: auto; top: auto; bottom: auto; width: auto; height: auto;
    flex-direction: row; overflow-x: auto; padding: 8px 12px;
    border-right: 0; border-bottom: 1px solid var(--border); transform: none !important;
  }
  .sb-nav { flex-direction: row; }
  .sb-nav .nav-link.is-active { box-shadow: inset 0 -2px 0 var(--green); }
  .sb-sep { width: 1px; height: 22px; margin: 0 4px; }
  .sb-toggle { display: none; }
}