@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
/* =========================================================================
   ZEUS AI OS — Design-System (v2, Moritz-Command-Center-Stil + Foxx-Amber)
   Marke: FoxxBoard-Amber auf warmem Schwarz. Native-Windows-seriös.
   Ein zentrales Token-System für ALLE Zeus-Tools. Dark + Light.
   Anwenden: <link rel="stylesheet" href="/zeus-theme.css"> und Klassen zx-* nutzen.
   ========================================================================= */

/* ---- TOKENS: Standard = Dark (deine Signatur) ---- */
:root{
  /* Marken-Akzent (Foxx-Amber) */
  --zx-amber:        #F5A623;
  --zx-amber-bright: #FFB33E;
  --zx-amber-deep:   #E0951F;
  --zx-amber-soft:   rgba(245,166,35,.12);

  /* Grund & Flächen (warmes Schwarz, KEIN Navy-Blau) */
  --zx-bg:        #0A0805;
  --zx-surface:   #17130F;
  --zx-surface-2: #1F1914;
  --zx-line:      rgba(242,232,220,.09);
  --zx-line-soft: rgba(242,232,220,.05);

  /* Text (warmes Creme, wie Moritz) */
  --zx-text:  #F2E8DC;
  --zx-dim:   #C4B8A8;
  --zx-mute:  #8C8479;

  /* Semantik (getrennt vom Akzent) */
  --zx-success: #35C88E;
  --zx-info:    #5B9BFF;   /* Blau NUR für Status/Info, wie FoxxBoard */
  --zx-warn:    #F5A623;
  --zx-danger:  #F4795B;

  /* Form (native-desktop: dezente Rundung, flach) */
  --zx-radius:    8px;
  --zx-radius-lg: 11px;
  --zx-radius-pill: 40px;
  --zx-shadow: 0 1px 2px rgba(0,0,0,.35);
  --zx-focus:  0 0 0 2px var(--zx-bg), 0 0 0 4px var(--zx-amber);

  /* Typo — native Windows-Schrift */
  --zx-font: "Space Grotesk","Segoe UI",system-ui,-apple-system,sans-serif;
  --zx-mono: "JetBrains Mono",ui-monospace,Consolas,monospace;

  color-scheme:dark;
}

/* Marken-Standard = DUNKEL (CI/CD: alle Kunden sehen dieselbe Kino-Signatur).
   Hell NICHT mehr automatisch bei OS-Hell — Light nur noch per explizitem
   Toggle (data-theme="light"). Dunkel bleibt so IMMER der Erst-Eindruck.
   (Auto-Light-Block bewusst deaktiviert 18.07.2026 — Backup: zeus-theme.css.vor_darkdefault_*)
@media (prefers-color-scheme: light){
  :root{
    --zx-bg:        #FAF8F3;
    --zx-surface:   #FFFFFF;
    --zx-surface-2: #F4F1EA;
    --zx-line:      #E7E2D6;
    --zx-line-soft: #EEE9DE;
    --zx-text:  #1B1712;
    --zx-dim:   #6B6459;
    --zx-mute:  #A79E90;
    --zx-amber-soft: rgba(224,149,31,.12);
    --zx-shadow: 0 1px 2px rgba(60,45,15,.08);
    color-scheme:light;
  }
}
*/

/* Expliziter Toggle gewinnt über OS-Präferenz (beide Richtungen) */
:root[data-theme="dark"]{
  --zx-bg:#0A0805; --zx-surface:#17130F; --zx-surface-2:#1F1914;
  --zx-line:rgba(242,232,220,.09); --zx-line-soft:rgba(242,232,220,.05);
  --zx-text:#F2E8DC; --zx-dim:#C4B8A8; --zx-mute:#8C8479;
  --zx-amber-soft:rgba(245,166,35,.12);
  --zx-shadow:0 1px 2px rgba(0,0,0,.35);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --zx-bg:#FAF8F3; --zx-surface:#FFFFFF; --zx-surface-2:#F4F1EA;
  --zx-line:#E7E2D6; --zx-line-soft:#EEE9DE;
  --zx-text:#1B1712; --zx-dim:#6B6459; --zx-mute:#A79E90;
  --zx-amber-soft:rgba(224,149,31,.12);
  --zx-shadow:0 1px 2px rgba(60,45,15,.08);
  color-scheme:light;
}

/* ---- BASIS ---- */
.zx, .zx *{box-sizing:border-box}
.zx-app{
  /* Film-Look: warmes Ambiente-Licht (rechts oben) auf der Grundfarbe — in beiden Themes */
  background:
    radial-gradient(72% 60% at 104% -5%, var(--zx-amber-soft), transparent 55%),
    radial-gradient(60% 50% at 0% 108%, var(--zx-amber-soft), transparent 55%),
    var(--zx-bg);
  color:var(--zx-text);
  font-family:var(--zx-font); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  transition:background .3s ease, color .3s ease;
}
.zx-num{font-variant-numeric:tabular-nums; font-feature-settings:"tnum"}
.zx-mono{font-family:var(--zx-mono)}
.zx-eyebrow{font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--zx-mute); font-weight:600}
.zx-h1{font-size:24px; font-weight:700; letter-spacing:-.01em; margin:0; text-wrap:balance}
.zx-h2{font-size:16px; font-weight:700; margin:0}
.zx-dimtext{color:var(--zx-dim)}

/* ---- BUTTONS (flach, native-desktop) ---- */
.zx-btn{
  font-family:inherit; font-size:13.5px; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 15px; border-radius:var(--zx-radius);
  border:1px solid var(--zx-line); background:var(--zx-surface-2); color:var(--zx-text);
  transition:background .15s, border-color .15s, color .15s;
}
.zx-btn:hover{border-color:var(--zx-amber); background:var(--zx-surface)}
.zx-btn:focus-visible{outline:none; box-shadow:var(--zx-focus)}
.zx-btn-primary{
  background:var(--zx-amber); color:#1a1205; border-color:var(--zx-amber-deep); font-weight:700;
}
.zx-btn-primary:hover{background:var(--zx-amber-bright); border-color:var(--zx-amber)}
.zx-btn-ghost{background:transparent; border-color:transparent; color:var(--zx-dim)}
.zx-btn-ghost:hover{background:var(--zx-surface-2); color:var(--zx-text); border-color:transparent}

/* ---- CARDS / FLÄCHEN (Film-Look: warmes Glas + Glow + Reflex) ---- */
.zx-card{
  position:relative; overflow:hidden;
  background:
    linear-gradient(180deg, rgba(255,232,190,.06), transparent 20%),   /* Glas-Reflex oben */
    radial-gradient(130% 92% at 50% 115%, var(--zx-amber-soft), transparent 60%),  /* warmes Innenglühen */
    var(--zx-surface);
  border:1px solid var(--zx-line);
  border-radius:var(--zx-radius-lg);
  box-shadow:inset 0 1px 0 rgba(255,232,190,.08), inset 0 0 34px var(--zx-amber-soft), var(--zx-shadow), 0 10px 26px rgba(0,0,0,.16);
}
.zx-pad{padding:18px}

/* ---- INPUT ---- */
.zx-input{
  font-family:inherit; font-size:13.5px; color:var(--zx-text);
  background:var(--zx-surface-2); border:1px solid var(--zx-line);
  border-radius:var(--zx-radius); padding:9px 12px; width:100%; outline:none;
  transition:border-color .15s;
}
.zx-input::placeholder{color:var(--zx-mute)}
.zx-input:focus{border-color:var(--zx-amber)}

/* ---- NAV ---- */
.zx-nav-item{
  display:flex; align-items:center; gap:11px; padding:9px 12px;
  border-radius:var(--zx-radius); color:var(--zx-dim);
  text-decoration:none; font-size:13.5px; font-weight:500; cursor:pointer;
  border:1px solid transparent; transition:.13s;
}
.zx-nav-item:hover{color:var(--zx-text); background:var(--zx-surface-2)}
.zx-nav-item.on{color:var(--zx-text); background:var(--zx-surface-2); border-color:var(--zx-line)}
.zx-nav-item.on::before{content:""; width:3px; height:15px; border-radius:2px; background:var(--zx-amber); margin:0 3px 0 -5px}
.zx-nav-label{padding:13px 12px 5px; font-size:9.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--zx-mute); font-weight:700}

/* ---- PILLS / BADGES / STATUS ---- */
.zx-pill{display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:600;
  color:var(--zx-dim); border:1px solid var(--zx-line); background:var(--zx-surface);
  padding:5px 11px; border-radius:var(--zx-radius-pill)}
.zx-badge{font-size:10px; font-weight:700; color:var(--zx-amber); background:var(--zx-amber-soft);
  padding:1px 7px; border-radius:var(--zx-radius-pill)}
.zx-dot{width:7px; height:7px; border-radius:50%; background:var(--zx-success)}
.zx-dot.info{background:var(--zx-info)} .zx-dot.warn{background:var(--zx-warn)} .zx-dot.danger{background:var(--zx-danger)}
.zx-up{color:var(--zx-success)} .zx-down{color:var(--zx-danger)}

/* ---- Scrollbar (dezent, desktop) ---- */
.zx-app ::-webkit-scrollbar{width:10px; height:10px}
.zx-app ::-webkit-scrollbar-thumb{background:var(--zx-line); border-radius:6px; border:2px solid var(--zx-bg)}
.zx-app ::-webkit-scrollbar-thumb:hover{background:var(--zx-mute)}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce){ .zx-app *{transition:none !important; animation:none !important} }

/* ---- Global Mobile: gilt fuer ALLE Zeus-Seiten (Nav einklappen, volle Breite) ---- */
@media (max-width: 860px){
  .app{ grid-template-columns: 1fr !important; }
  .app > nav{ display: none !important; }
  .app > main{ padding: 16px !important; }
  .topbar{ flex-wrap: wrap; gap: 10px !important; }
  .kpis, .grid3, .stats, .cols, .row, .tools, .calc{ grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   FILM-LOOK GADGET-KIT (CI/CD #182–187) — wiederverwendbar, EINE Quelle.
   Nutzung: <link rel="stylesheet" href="/zeus-theme.css"> + diese Klassen.
   ═══════════════════════════════════════════════════════════════════ */
.zx-num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* Glas-Header (#185): durchscheinend + Blur + Konstellations-Akzent */
.zx-glass{position:relative;border:1px solid rgba(245,166,35,.30);border-radius:var(--zx-radius-lg);
  overflow:hidden;background:linear-gradient(180deg,rgba(245,166,35,.10),rgba(23,19,15,.62));
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:12px 16px;
  display:flex;align-items:center;gap:12px;
  box-shadow:inset 0 1px 0 rgba(255,232,190,.10),0 10px 30px rgba(0,0,0,.35)}
.zx-glass>h2,.zx-glass>.zx-h2{font-size:14px;font-weight:700;margin:0;letter-spacing:.02em}
.zx-glass .zx-dot{width:9px;height:9px;border-radius:50%;background:var(--zx-amber);box-shadow:0 0 12px var(--zx-amber)}
.zx-glass .zx-ctrls{margin-left:auto;display:flex;gap:7px}
.zx-glass .zx-ctrls i{width:11px;height:11px;border-radius:50%;border:1px solid rgba(245,166,35,.30);display:block}
.zx-constell{position:absolute;inset:0;opacity:.5;pointer-events:none}

/* Einheitlicher Chart/KPI (#182): eyebrow · grosse Zahl · Delta · aufsteigende Flaeche */
.zx-kpi .zx-kpi-top{display:flex;align-items:center;justify-content:space-between}
.zx-kpi .zx-kpi-zeit{font-family:var(--zx-mono);font-size:10.5px;color:var(--zx-mute)}
.zx-kpi .zx-kpi-big{font-size:30px;font-weight:800;letter-spacing:-.02em;margin:8px 0 2px;font-variant-numeric:tabular-nums}
.zx-kpi .zx-kpi-delta{font-family:var(--zx-mono);font-size:12px;font-weight:700}
.zx-kpi .zx-kpi-delta.up{color:var(--zx-success)}
.zx-kpi .zx-kpi-delta.down{color:var(--zx-danger)}
.zx-area{display:block;width:100%;height:52px;margin-top:8px}
.zx-area path.line{fill:none;stroke:var(--zx-amber);stroke-width:2;filter:drop-shadow(0 0 6px rgba(245,166,35,.6))}
.zx-area path.line.down{stroke:var(--zx-danger);filter:drop-shadow(0 0 6px rgba(244,121,91,.5))}

/* Ring-Gauge (#184): SVG-Ring + Bloom, Zahl in der Mitte */
.zx-gauge{position:relative;width:96px;height:96px;flex:none}
.zx-gauge svg{transform:rotate(-90deg)}
.zx-gauge .zx-gauge-track{fill:none;stroke:rgba(245,166,35,.12);stroke-width:8}
.zx-gauge .zx-gauge-bar{fill:none;stroke:var(--zx-amber);stroke-width:8;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(245,166,35,.6))}
.zx-gauge .zx-gauge-val{position:absolute;inset:0;display:grid;place-items:center;font-weight:800;font-size:20px}
.zx-gauge .zx-gauge-val small{display:block;font-family:var(--zx-mono);font-size:9px;color:var(--zx-mute);letter-spacing:.1em;margin-top:2px}

/* Orb (#Signatur): Amber-Kern + spinnende Ringe */
.zx-orbwrap{width:96px;height:96px;position:relative;display:grid;place-items:center;flex:none}
.zx-orb{width:60px;height:60px;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,var(--zx-amber-bright),var(--zx-amber) 42%,#7a4d09 78%,#2a1a05);
  box-shadow:0 0 26px rgba(245,166,35,.6),inset 0 0 18px rgba(255,214,120,.5);animation:zxOrbPulse 3.4s ease-in-out infinite}
@keyframes zxOrbPulse{0%,100%{filter:brightness(1);transform:scale(1)}50%{filter:brightness(1.12);transform:scale(1.04)}}
.zx-orbring{position:absolute;border-radius:50%;border:1px solid rgba(245,166,35,.30);pointer-events:none}
.zx-orbring.r2{inset:8px;animation:zxSpin 14s linear infinite}
.zx-orbring.r3{inset:0;border-style:dashed;border-color:rgba(245,166,35,.22);animation:zxSpin 9s linear infinite reverse}
@keyframes zxSpin{to{transform:rotate(360deg)}}

/* Histogramm/Range (#184) */
.zx-bars{display:flex;align-items:flex-end;gap:5px;height:52px;margin-top:10px}
.zx-bars i{flex:1;background:linear-gradient(180deg,var(--zx-amber),rgba(245,166,35,.25));border-radius:3px 3px 0 0;display:block;box-shadow:0 0 8px rgba(245,166,35,.25)}
@media (prefers-reduced-motion:reduce){.zx-orb,.zx-orbring{animation:none}}

/* ── Zeus Gadgets (#182) — wiederverwendbare Chart/Gadget-Komponenten fuer ALLE Seiten ── */
.zg-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 20px}
@media(max-width:820px){.zg-kpis{grid-template-columns:repeat(2,1fr)}}
.zg-gad{position:relative;border-radius:16px;padding:15px 16px;overflow:hidden;min-height:104px;
  background:radial-gradient(120% 90% at 15% 0%,rgba(245,166,35,.10),transparent 55%),linear-gradient(158deg,rgba(38,29,14,.92),rgba(18,14,8,.96));
  border:1px solid rgba(245,166,35,.22);box-shadow:0 10px 30px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.05),inset 0 0 26px rgba(245,166,35,.05)}
.zg-gad::before{content:'';position:absolute;top:0;left:14px;right:14px;height:1px;background:linear-gradient(90deg,transparent,rgba(245,166,35,.55),transparent)}
.zg-lab{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:#8b8173;font-weight:600}
.zg-num{font-family:var(--zx-mono,ui-monospace,monospace);font-size:24px;font-weight:600;margin-top:8px;letter-spacing:-.02em;color:#f3ece0}
.zg-num .zg-u{font-size:13px;color:#8b8173;margin-left:4px}
.zg-sub{font-size:11px;color:#8b8173;margin-top:3px}
.zg-gad.bad .zg-num{color:#e5765f} .zg-gad.ok .zg-num{color:#3ecf8e} .zg-gad.am .zg-num{color:#f5a623}
.zg-ring{position:absolute;top:15px;right:15px;width:52px;height:52px}
.zg-ring .zg-rt{font-family:var(--zx-mono,monospace);font-size:14px;font-weight:700;fill:#f3ece0}
.zg-track{fill:none;stroke:rgba(255,255,255,.09);stroke-width:5}
.zg-arc{fill:none;stroke-width:5;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;filter:drop-shadow(0 0 5px currentColor);transition:stroke-dashoffset 1s ease}
.zg-spark{margin-top:10px;height:26px;width:100%;display:block}
.zg-live{position:absolute;top:16px;right:16px;width:8px;height:8px;border-radius:50%;background:#f5a623;box-shadow:0 0 0 0 rgba(245,166,35,.6);animation:zgpulse 2.4s infinite}
@keyframes zgpulse{0%{box-shadow:0 0 0 0 rgba(245,166,35,.5)}70%{box-shadow:0 0 0 10px rgba(245,166,35,0)}100%{box-shadow:0 0 0 0 rgba(245,166,35,0)}}
.zg-area{width:100%;height:170px;display:block}
.zg-line{fill:none;stroke-width:2.4;filter:drop-shadow(0 3px 8px rgba(245,166,35,.35))}
.zg-ax{fill:#8b8173;font-size:10px;font-family:var(--zx-mono,monospace)}
.zg-donutwrap{display:flex;align-items:center;gap:16px;margin-top:6px}
.zg-donut{width:132px;height:132px;flex:none}
.zg-seg{fill:none;stroke-width:15;transform:rotate(-90deg);transform-origin:50% 50%}
.zg-dctr-n{font-family:var(--zx-mono,monospace);font-size:22px;font-weight:700;fill:#f3ece0}
.zg-dctr-l{font-size:8.5px;fill:#8b8173;letter-spacing:.08em}
.zg-dlegend{flex:1;font-size:12px}
.zg-drow{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.zg-drow:last-child{border:0}
.zg-dn{color:#c6bba8} .zg-dn i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:7px;vertical-align:-1px}
.zg-dv{font-family:var(--zx-mono,monospace);color:#f3ece0}

/* Mission Ring-Gauges (Cockpit) — Glow-Gauges gleichmaessig verteilt (#184) */
.zg-ringrow{display:flex;gap:6px;justify-content:space-around;align-items:flex-start;flex-wrap:nowrap}
.zg-ringcell{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1 1 0;min-width:0}
.zg-ringcell .zg-ring{position:static;top:auto;right:auto;width:54px;height:54px}
.zg-ringcell .zg-rl{position:static;text-align:center;font-size:11px;letter-spacing:.04em;color:var(--zx-muted,#9a9488);text-transform:uppercase}

/* Panel-Grid: Diagramm + KPI-Reihe nebeneinander (Lead-Zentrale u.a., #184) */
.zg-panelgrid{display:flex;gap:14px;align-items:stretch;flex-wrap:wrap}
.zg-panelgrid>.zx-card{flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.zg-panelgrid>.zg-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;min-width:260px}
@media(max-width:760px){.zg-panelgrid{flex-direction:column}.zg-panelgrid>.zx-card{width:100%}}