/* ============================================================
   CYRBER GUI v5 — shared base layer
   Design tokens + page chrome (nav, statusbar, agent bar)
   used by every v5 tab (kokpit excluded — uses kokpit-v5.css
   for historical reasons + tighter viewport grid).
   ============================================================ */

:root {
  --bg-canvas:      #0a0a0a;
  --bg-panel:       #0f0f0f;
  --bg-elevated:    #141414;
  --bg-interactive: #1a1a1a;

  --fg-primary:     #fafafa;
  --fg-secondary:   #A7B2BD;   /* G-P3: chłodny ink, 8.9:1 na --bg-panel */
  --fg-tertiary:    #8593A0;   /* G-P3: AA body 6.1:1 (było #6b6b6b = 3.6:1, poniżej AA) */
  --fg-dimmed:      #3f3f3f;   /* G-P3: TYLKO nie-tekst (hairline/disabled), nie na treści */

  --border-subtle:  rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.08);
  --border-strong:  rgba(255, 255, 255, 0.12);

  /* G-P3 palette-trim: 8 neonów → 3 znaczące akcenty (kanon: base-v5.css). */
  --accent-ratio:    #5b7fa6;
  --accent-animus:   #c76b62;
  --accent-fatum:    #9a86c4;

  --accent-signal:   #e4e8e9;
  --accent-live:     var(--accent-signal);

  --sev-critical:    #d16565;
  --sev-high:        #d1a15a;
  --sev-ok:          #5fa07f;
  --accent-critical: var(--sev-critical);
  --accent-high:     var(--sev-high);
  --accent-warning:  var(--sev-high);

  --accent-seal:     #8a2a1c;
  --accent-gold:     #c9a23f;

  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  10px;
  --radius-lg:  12px;

  --ls-brand:   0.14em;
  --ls-label:   0.1em;
  --ls-heading: 0.1em;
  --ls-nav:     0.06em;

  /* --page-max i --page-pad-x definiuje WYŁĄCZNIE base-v5.css. Duplikat
     stał tu do 2026-09-02 z tą samą wartością; każda strona ładująca ten
     arkusz ładuje też base-v5.css (sprawdzone), więc kopia była zbędna,
     a dwa miejsca do zmiany to zaproszenie do dryfu. Patrz brama
     scripts/check_layout_tokens.sh. */

  --font-microlabel: clamp(11px, 0.7vw, 11px);
  --font-body-small: clamp(11px, 0.82vw, 12px);
  --font-body:       clamp(11px, 0.9vw, 13px);
  --font-body-plus:  clamp(12px, 0.95vw, 14px);
  --font-number:     clamp(18px, 1.6vw, 26px);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg-canvas);
  color: var(--fg-primary);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
}

button, input, textarea, select { font: inherit; color: inherit; background: none; border: 0; padding: 0; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
code, kbd { font-family: var(--font-code); }

@keyframes v5-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes v5-pulse {
  /* #2176 PR3: teal-puls świeci światłem, nie tylko przezroczystością.
     Współdzielone z base-v5.css — te same wartości. */
  0%, 100% { opacity: 0.9; box-shadow: 0 0 5px rgba(var(--signal-rgb, 228, 232, 233), .28); }
  50%      { opacity: 0.5; box-shadow: 0 0 10px rgba(var(--signal-rgb, 228, 232, 233), .50); }
}

/* ============================================================
   NAV (top navigation)
   Structure:
     <header class="nav">
       <div class="nav-section nav-left">  brand
       <nav class="nav-section nav-mid">    tabs (KOKPIT · MISJE · …)
       <div class="nav-section nav-right"> search, lang, user
   ============================================================ */

.nav {
  display: grid;
  /* #2653: boczne tory NIE kurczą się poniżej swojej zawartości. Przy
     `1fr auto 1fr` oba tory były z definicji równe, więc tor prawy dostawał
     (nav - środek)/2. Grupa narzędzi potrzebuje ~258px, a przy oknie 1440
     tor dawał 216px, więc wychodziła poza tor i dociskała ostatnią pozycję
     paska do zera na całym paśmie 1241-1560. Ta sama usterka co #1362, tylko
     przy 9 pozycjach zamiast 7; tamten fix zwęził odstępy w 901-1366 i pasmo
     wyżej zostawił. `minmax(max-content, 1fr)` domyka to strukturalnie:
     przy zapasie oba tory dostają równy udział i środek jest wyśrodkowany
     dokładnie jak dotąd (1600 i 1920 zmierzone bez zmian co do piksela),
     a przy ciasnocie kurczy się tor lewy. column-gap gwarantuje prześwit. */
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  column-gap: clamp(16px, 1.5vw, 32px);
  align-items: center;
  height: clamp(48px, 5vh, 64px);
  padding: 0 var(--page-pad-x);
  max-width: var(--page-max);
  width: 100%;
  margin: 0 auto;
  /* #2176 fix: prawdziwy nav to header.nav (.nav), NIE .cyrber-nav (martwy).
     Neutralna głębia na granicy nav/treść. ZERO teal (design #1932).
     Tło przezroczyste: nieprzezroczyste --bg-canvas zabijało poświatę
     body::before (#2309) dokładnie pod paskiem, przez co nav czytał się
     jako czarna płyta doklejona nad stroną. Granicę niesie sam włos. */
  box-shadow: var(--border-subtle) 0 -1px 0 0 inset;
  background: transparent;
  animation: v5-fade-in 240ms ease both;
  position: relative;
  z-index: 10;
}
.nav-section { display: flex; align-items: center; }
.nav-left  { justify-content: flex-start; gap: 12px; }
.nav-mid   { gap: 32px; justify-self: center; }
.nav-right { justify-content: flex-end; gap: 12px; }

.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-wm {
  font-family: var(--font-brand);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: var(--ls-brand);
  color: var(--fg-primary);
}
.brand-dots { display: inline-flex; gap: 3px; }
.bd { width: 5px; height: 5px; border-radius: 50%; display: inline-block; opacity: 0.9; }
.bd-ratio  { background: var(--accent-ratio); }
.bd-animus { background: var(--accent-animus); }
.bd-fatum  { background: var(--accent-fatum); }

/* Cross-link back to marketing site (cyrber.com) — nav-left aux */
.nv-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: 0;
  color: var(--fg-tertiary);
  text-decoration: none;
  padding: 6px 8px;
  border-radius: var(--radius-xs);
  margin-right: 14px;
  transition: color 160ms cubic-bezier(0.2, 0, 0, 1),
              background 160ms cubic-bezier(0.2, 0, 0, 1);
}
.nv-back:hover {
  color: var(--fg-secondary);
  background: var(--bg-elevated);
}
.nv-back:focus-visible {
  outline: 2px solid var(--accent-warning);
  outline-offset: 2px;
}
/* #1384: back-link chowany <1440 (nie <900) — app-nav nie mieści się na 1280/1366,
   nav-right wychodził poza viewport. Marka CYRBER pozostaje klikalna. */
@media (max-width: 1440px) {
  .nv-back { display: none; }
}

.nv {
  /* #3204: pozycje nawigacji Interem. Wielkie litery zostaja (konwencja
     #2241: top-level nav wielkimi), krój marki tylko w znaku CYRBER. */
  font-family: var(--font-data);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--fg-tertiary);
  padding: 14px 2px;
  position: relative;
  transition: color 200ms ease;
  /* #3999: etykieta grupy nigdy nie lamie sie na dwie linie (dzwonek na https). */
  white-space: nowrap;
}
.nv:hover { color: var(--fg-primary); }
.nv.active { color: var(--fg-primary); }
.nv.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent-live);
}

.nv-btn {
  display: inline-flex; align-items: center; gap: 4px;
  height: 28px; padding: 0 10px;
  border-radius: var(--radius-xs);
  box-shadow: var(--border-subtle) 0 0 0 1px inset;
  background: transparent;
  font-family: var(--font-data);
  font-size: 12px;
  color: var(--fg-secondary);
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.nv-btn:hover {
  background: var(--bg-elevated);
  box-shadow: var(--border-default) 0 0 0 1px inset;
  color: var(--fg-primary);
}
.nv-icon { width: 28px; padding: 0; justify-content: center; font-size: 14px; }
.cmd-g { font-family: 'Inter', sans-serif; font-size: 13px; }

.nv-user-wrap { position: relative; display: inline-flex; }
.nv-user {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 10px 0 12px;
  border-radius: var(--radius-xs);
  font-family: var(--font-data);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--fg-secondary);
  background: transparent; cursor: pointer;
  transition: color 200ms ease, background 160ms;
}
.nv-user:hover,
.nv-user[aria-expanded="true"] {
  color: var(--fg-primary);
  background: var(--bg-elevated);
}
.chev {
  font-size: 11px; color: var(--fg-tertiary); margin-top: 1px;
  transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
.nv-user[aria-expanded="true"] .chev { transform: rotate(180deg); color: var(--fg-primary); }

/* .nv-user-menu canon lives in base-v5.css — DO NOT duplicate here. */

/* ============================================================
   STATUSBAR (bottom — kontekstowe liczniki + MENS peek + actions)
   ============================================================ */

.statusbar {
  /* Vertical padding only — body owns horizontal --page-pad-x.
     See .agent-bar comment above for reasoning. */
  padding: clamp(11px, 1vh, 14px) 0;
  max-width: var(--page-max);
  width: 100%;
  margin: 0 auto;
  display: flex; align-items: center; gap: 10px;
  box-shadow: var(--border-subtle) 0 1px 0 0 inset;
  font-family: var(--font-data);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--fg-tertiary);
  animation: v5-fade-in 300ms 500ms ease both;
}
.sb-live {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--accent-live);
}
.sb-live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-live);
  animation: v5-pulse 2s ease-in-out infinite;
}
.sb-sep { color: var(--fg-tertiary); margin: 0 4px; }
.sb-counter { color: var(--fg-secondary); }
.sb-counter strong { color: var(--fg-primary); font-weight: 500; }
.sb-counter.critical { color: var(--accent-critical); }
.sb-counter.critical strong { color: var(--accent-critical); }

.sb-peek {
  flex: 1;
  text-align: center;
  color: var(--fg-tertiary);
  font-style: italic;
  opacity: 0;
  transition: opacity 240ms ease;
}
.sb-peek.active { opacity: 1; }
.sb-peek.critical { color: var(--accent-animus); font-style: normal; }

.sb-actions {
  display: inline-flex; gap: 8px; margin-left: auto;
}
.sb-action {
  font-family: var(--font-data);
  font-size: 11px; letter-spacing: 0.08em;
  color: var(--fg-secondary);
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  box-shadow: var(--border-subtle) 0 0 0 1px inset;
  transition: color 160ms, background 160ms, box-shadow 160ms;
}
.sb-action:hover {
  color: var(--fg-primary);
  background: var(--bg-elevated);
  box-shadow: var(--border-default) 0 0 0 1px inset;
}

/* ============================================================
   AGENT BAR (bottom — persistent MENS input, glassmorphism)
   Placeholder varies per tab — JS sets it on boot.
   ============================================================ */

.agent-bar {
  max-width: var(--page-max);
  width: 100%;
  margin: 0 auto;
  /* Vertical padding only — horizontal padding is OWNED by body's
     --page-pad-x. Adding horizontal padding HERE doubles the inset and
     makes the agent-bar narrower than the statusbar/EKG (which don't
     have this rule). Kokpit canon (kokpit-v5.css:1004) has padding:0
     for exactly this reason. */
  padding: clamp(11px, 1vh, 14px) 0;
  animation: v5-fade-in 300ms 400ms ease both;
  position: relative;
}
.agent-bar-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  height: clamp(44px, 5vh, 56px);
  padding: 0 clamp(12px, 1vw, 18px);
  border-radius: var(--radius-md);
  background: rgba(var(--ink-rgb, 255, 255, 255), 0.025);
  backdrop-filter: blur(8px);
  box-shadow: var(--border-default) 0 0 0 1px inset;
}
.agent-bar-icon {
  color: var(--accent-ratio);
  font-family: var(--font-data);
  font-size: 13px;
}
.agent-bar-input {
  flex: 1;
  outline: none;
  font-family: 'Inter', sans-serif;
  font-size: var(--font-body);
  color: var(--fg-primary);
}
.agent-bar-input::placeholder {
  color: var(--fg-tertiary);
}
.agent-bar-send {
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--fg-tertiary);
  padding: 4px 10px;
  border-radius: var(--radius-xs);
  transition: color 160ms, background 160ms;
}
.agent-bar-send:hover { color: var(--accent-ratio); background: rgba(91, 127, 166, 0.08); }

/* ============================================================
   SHARED UTILITIES
   ============================================================ */

.mono { font-family: var(--font-data); }
.orbitron { font-family: var(--font-brand); }
.microlabel {
  font-family: var(--font-data);
  font-size: var(--font-microlabel);
  letter-spacing: 0.1em;
  color: var(--fg-tertiary);
  text-transform: uppercase;
}

/* ============================================================
   Scroll-to-top button — injected by utils.js into every page
   except kokpit (fixed-viewport grid). Without explicit styling
   it renders as a naked "↑" in body flow; v5 tabs don't load
   theme.css so we restyle it here.
   ============================================================ */
#cyrberScrollTop {
  position: fixed;
  right: 20px;
  bottom: 92px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(15, 15, 15, 0.8);
  color: var(--fg-tertiary);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--border-default) 0 0 0 1px inset,
              rgba(0, 0, 0, 0.35) 0 4px 12px -2px;
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 180ms ease, transform 180ms ease,
              color 160ms ease, box-shadow 160ms ease;
  z-index: 60;
  cursor: pointer;
}
#cyrberScrollTop.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
#cyrberScrollTop:hover {
  color: var(--fg-primary);
  box-shadow: var(--border-strong) 0 0 0 1px inset,
              rgba(0, 0, 0, 0.4) 0 6px 16px -2px;
}

/* Loading bar — also injected by utils.js. */
#cyrberLoadingBar {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: var(--accent-live);
  box-shadow: 0 0 8px rgba(var(--signal-rgb, 228, 232, 233), 0.4);
  transition: width 300ms ease, opacity 200ms ease;
  opacity: 0;
  z-index: 200;
  pointer-events: none;
}
#cyrberLoadingBar.active { opacity: 1; }

/* ============================================================
   Mobile fallback — prevents horizontal body scroll on narrow
   viewports (≤720px). Nav-mid becomes horizontally scrollable
   so all top-level sections remain reachable without a burger
   menu. Page-specific v5 CSS already defines its own 720px
   breakpoint for content grids.
   ============================================================ */
@media (max-width: 720px) {
  html, body { overflow-x: hidden; max-width: 100vw; }

  .nav {
    padding: 8px 12px;
    gap: 8px;
    flex-wrap: nowrap;
  }
  .nav-left  { flex-shrink: 0; }
  .nav-right { flex-shrink: 0; gap: 6px; }

  .nav-mid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    min-width: 0;
    justify-content: flex-start;
    gap: 6px;
    padding: 2px 4px;
  }
  .nav-mid::-webkit-scrollbar { display: none; }
  .nav-mid .nv {
    flex-shrink: 0;
    font-size: 11px;
    padding: 4px 8px;
    letter-spacing: 0.12em;
  }

  .statusbar {
    padding: 6px 12px;
    font-size: 11px;
    flex-wrap: wrap;
    gap: 6px;
  }
  .sb-left, .sb-right, .sb-mid { min-width: 0; }
  .sb-mid { flex: 1 1 100%; order: 3; font-size: 11px; }
}

/* ============================================================
   App footer — cross-link row injected by nav.js on every v5 page.
   Static-flow below statusbar. Minimal mono type, no background.
   ============================================================ */
.app-footer {
  max-width: var(--page-max);
  width: 100%;
  margin: 0 auto;
  padding: clamp(11px, 1.2vh, 18px) var(--page-pad-x) clamp(14px, 1.6vh, 24px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--font-data);
  font-size: var(--font-microlabel);
  color: var(--fg-tertiary);
  letter-spacing: 0.08em;
  box-shadow: inset 0 1px 0 var(--border-subtle);
  animation: v5-fade-in 300ms 700ms ease both;
}
.app-footer-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.af-copy { color: var(--fg-tertiary); }
.af-slogan {
  color: var(--fg-tertiary);
  font-style: italic;
}
.af-sep {
  color: var(--fg-tertiary);
  user-select: none;
  margin: 0 2px;
}
.app-footer-links {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
}
.app-footer-links a {
  color: var(--fg-tertiary);
  text-decoration: none;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  transition: color 160ms cubic-bezier(0.2, 0, 0, 1),
              background 160ms cubic-bezier(0.2, 0, 0, 1);
}
.app-footer-links a:hover {
  color: var(--accent-warning);
  background: var(--bg-elevated);
}
.app-footer-links a:focus-visible {
  outline: 2px solid var(--accent-warning);
  outline-offset: 2px;
}
@media (max-width: 640px) {
  .app-footer { flex-direction: column; align-items: flex-start; }
  .af-slogan { display: none; }
}

/* ============================================================
   EKG heartbeat — kokpit-style sweep mask (comet effect)
   nav.js injects .cyrber-ekg > .ekg-wrapper > svg on any page that
   doesn't already have an inline .ekg-wrapper (e.g., kokpit has its
   own). Watermark (Orthrus img) was removed globally 2026-04-24 —
   Michał preference: "wywal watermark, EKG delikatne jak kokpit".
   ============================================================ */
.cyrber-ekg {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(56px, 6vh, 84px);
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
  opacity: 0.35;
  mix-blend-mode: screen;
}
.cyrber-ekg .ekg-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  animation: v5-fade-in 600ms 500ms ease both;
}
.cyrber-ekg .ekg-svg {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
}
.cyrber-ekg .ekg-waveform {
  stroke: var(--accent-signal, #e4e8e9);
  stroke-width: 1.5;
  fill: none;
  filter: drop-shadow(0 0 3px rgba(var(--signal-rgb, 228, 232, 233), 0.5));
  vector-effect: non-scaling-stroke;
  transition: stroke 1.2s ease, filter 1.2s ease;
}
.cyrber-ekg .ekg-mask-window {
  animation: ekg-sweep 4.5s linear infinite;
  will-change: transform;
}
.cyrber-ekg .ekg-wrapper.ekg-fast .ekg-mask-window { animation-duration: 2.4s; }
@keyframes ekg-sweep {
  from { transform: translateX(-600px); }
  to   { transform: translateX(1500px); }
}
@media (max-width: 640px) {
  .cyrber-ekg { display: none; }
}
/* CYRBER nav-v5.css — extracted from theme.css 2026-04-28
 * Source rules: 146 nav-related + 8 keyframes
 * Used by Wave 3+4 v5 pages + executive.html (loaded via nav.js).
 * Includes: .cyrber-nav, .nav-*, .nv-*, .nvu-*, .cyr-vital* (PAIN/VIGOR/AURUM strip),
 *           .cyr-vh*, .cyr-{ratio,animus,fatum}*, .cyrber-ekg, .cyrber-breath.
 * Replaces theme.css for nav layout. */

/* ── Keyframes referenced by nav animations ── */
@keyframes navRingPulse {
  0%, 100% { opacity: .6; }
  50% { opacity: 1; }
}

@keyframes vhDotPulse {
  0%, 100% { opacity: .6; box-shadow: 0 0 0 0 transparent; }
  50% { opacity: 1; box-shadow: 0 0 4px currentColor; }
}

@keyframes vitalBump {
  0% { text-shadow: 0 0 8px currentColor; transform: scale(1.15); }
  100% { text-shadow: none; transform: scale(1); }
}

@keyframes fatumPulse {
  0%, 100% { text-shadow: 0 0 0 transparent; }
  50% { text-shadow: 0 0 8px rgba(154,134,196,.3); }
}

@keyframes navDropFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

@keyframes nav-pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@keyframes nav-dropdown-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes navPulseRed {
  0% { box-shadow: 0 0 0 0 rgba(209, 101, 101, 0.5); }
  70% { box-shadow: 0 0 0 6px rgba(209, 101, 101, 0); }
  100% { box-shadow: 0 0 0 0 rgba(209, 101, 101, 0); }
}

/* ── Nav layout + components ── */
/* (Removed legacy `.cyrber-ekg { height: 100vh }` override — was
   stretching the global EKG sweep across the full viewport on every
   page, producing a "big EKG across the page" the user reported.
   The canonical short-strip rule lives earlier in this file and in
   base-v5.css with height: clamp(56px, 6vh, 84px).) */

.nav-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-brand);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: var(--text-primary);
  text-decoration: none;
}

.nav-brand span {
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--accent);
  letter-spacing: 0.1em;
  display: block;
  margin-top: -2px;
}

.nav-ring {overflow:hidden;
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: navRingPulse 3s ease-in-out infinite;
  flex-shrink: 0;
}

.nav-ring::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--accent-muted);
  animation: navRingPulse 3s ease-in-out infinite .5s;
}

.nav-ring svg {
  width: 16px;
  height: 16px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.nav-link {
  font-family: var(--font-data);
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--text-secondary);
  text-decoration: none;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-sm);
  transition: all .2s;
}

.nav-link:hover {
  color: var(--text-primary);
  background: var(--accent-muted);
}

.nav-link.active {
  color: var(--accent);
  background: var(--accent-muted);
}

.btn:focus-visible, .nav-link:focus-visible, .tab-btn:focus-visible, .theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.nav-ring img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.cyr-vitals-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 24px;
  background: rgba(10,10,10,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(91,127,166,.1);
  font-family: var(--font-mono, 'Inter', system-ui, sans-serif), monospace;
  font-size: 11px;
  position: sticky;
  top: var(--nav-height, 48px);
  z-index: 99;
  overflow: hidden;
}

.cyr-vital-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  height: 28px;
  white-space: nowrap;
}

.cyr-vital-label {
  font-family: var(--font-display, 'Unbounded'), monospace;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--text-muted, var(--fg-tertiary));
}

.cyr-vital-value {
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  transition: color var(--dur-base, 200ms) var(--ease-out, ease-out);
}

.cyr-vital-pain .cyr-vital-value { color: var(--organ-pain, var(--sev-critical)); }

.cyr-vital-vigor .cyr-vital-value { color: var(--organ-vigor, var(--accent-live)); }

.cyr-vital-aurum .cyr-vital-value { color: var(--organ-aurum, var(--accent-gold)); font-weight: 600; }

.cyr-vital-phase .cyr-vital-value { color: var(--accent, var(--accent-ratio)); text-transform: uppercase; font-size: 11px; }

.cyr-vital-state .cyr-vital-value { color: var(--text-secondary); text-transform: uppercase; font-size: 11px; }

.cyr-vital-sep {
  width: 1px;
  height: 14px;
  background: rgba(91,127,166,.1);
  margin: 0 4px;
  flex-shrink: 0;
}

.cyr-vital-heads {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cyr-vital-head {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-secondary);
}

.cyr-vh-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  animation: vhDotPulse 3s ease-in-out infinite;
}

.cyr-vital-bump {
  animation: vitalBump 0.5s ease-out;
}

.cyr-fatum-chip {
  color: var(--fatum-color, var(--accent-fatum));
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  animation: fatumPulse 3s ease-in-out infinite;
  white-space: nowrap;
}

html[data-theme="light"] .cyr-vitals-strip {
  background: color-mix(in oklab, var(--bg-panel) 92%, transparent);
  border-bottom-color: rgba(var(--ink-rgb), .06);
}

html[data-theme="light"] .cyr-vital-sep { background: rgba(var(--ink-rgb), .08); }

.cyrber-nav {
  font-size: 16px;  /* fixed base — immune to per-page html font-size overrides */
  height: 56px;
  background: var(--nav-bg);
  /* #2176 PR2: czerwona łuna (209,101,101 = severity-critical) pod paskiem
     na każdej stronie była niespójna z kanonem (czerwień = realny danger).
     Neutralny warstwowy cień daje głębię, teal-hairline zostawia jeden sygnał. */
  border-bottom: 1px solid var(--accent-signal);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 20px;
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.nav-logo-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
  padding: 6px 4px;
}

.nav-logo-circle {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1.5px solid var(--accent, var(--accent-ratio));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: visible;
  animation: navRingPulse 3s ease-in-out infinite;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.nav-logo-circle::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--accent-muted, rgba(91,127,166,0.3));
  animation: navRingPulse 3s ease-in-out infinite .5s;
  pointer-events: none;
}

.nav-logo-link:hover .nav-logo-circle {
  border-color: var(--accent, var(--accent-ratio));
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent, var(--accent-ratio)) 40%, transparent);
}

.nav-logo-img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  display: block;
  border-radius: 50%;
}

[data-theme="light"] .nav-logo-circle {
  background: var(--bg-interactive);
  border-color: var(--accent, var(--accent-ratio));
}

.nav-logo-name {
  font-family: var(--font-mono, monospace);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-primary);
}

.cyrber-nav .nav-links {
  display: flex;
  gap: 2px;
  flex: 1;
  overflow: visible;
}

.cyrber-nav .nav-links a {
  font-family: var(--font-data);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  letter-spacing: 0.08em;
  transition: all 0.15s;
  white-space: nowrap;
}

.cyrber-nav .nav-links a:hover {
  color: var(--text-primary);
  background: var(--accent-muted);
}

.cyrber-nav .nav-links a.active {
  color: var(--accent-red);
  background: rgba(209,101,101,0.1);
}

.cyrber-nav .nav-user {
  font-family: var(--font-data);
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  white-space: nowrap;
}

.cyrber-nav .nav-links { gap: 0; }

.nav-item {
  position: relative;
}

.nav-item > a, .nav-item > span {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  height: 48px;
  font-family: var(--font-data);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 16px;
  color: var(--text-secondary);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}

.nav-icon { display: inline-flex; align-items: center; opacity: .65; transition: opacity .15s; flex-shrink: 0; }

.nav-item.active .nav-icon, .nav-item:hover .nav-icon { opacity: 1; }

.nav-item > a:hover, .nav-item > span:hover {
  color: var(--text-primary);
  background: rgba(var(--ink-rgb, 255, 255, 255), 0.03);
}

.nav-item.active > a, .nav-item.active > span {
  color: var(--accent-red);
  border-bottom-color: var(--accent-red);
}

.nav-item.ratio.active > a, .nav-item.ratio.active > span     { color: var(--accent-blue); border-bottom-color: var(--accent-blue); }

.nav-item.animus.active > a, .nav-item.animus.active > span   { color: var(--animus-color, var(--accent-animus)); border-bottom-color: var(--animus-color, var(--accent-animus)); }

.nav-item.fatum.active > a, .nav-item.fatum.active > span     { color: var(--fatum-color, var(--accent-fatum)); border-bottom-color: var(--fatum-color, var(--accent-fatum)); }

.cyrber-nav { overflow: visible !important; position: relative; z-index: 1000; }

.nav-item { position: relative !important; overflow: visible !important; }

.nav-group { position: relative; }

.nav-group-trigger {
  display: flex; align-items: center; gap: 5px;
  padding: 0 14px; height: 56px;
  font-family: var(--font-data);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  cursor: pointer; white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: all 0.15s; background: none; border-top: none; border-left: none; border-right: none;
}

.nav-group-trigger:hover { color: var(--text-primary); background: rgba(var(--ink-rgb, 255, 255, 255), 0.03); }

.nav-group.active > .nav-group-trigger { color: var(--accent-red); border-bottom-color: var(--accent-red); }

.nav-arrow { font-size: 0.75em; transition: transform 0.2s; }

.nav-group.open .nav-arrow { transform: rotate(180deg); }

.nav-group .nav-dropdown { display: none !important; }

.nav-group.open .nav-dropdown {
  display: block !important; position: fixed; z-index: 10001;
  min-width: 200px;
  background: var(--bg-raised, var(--bg-elevated)); border: 1px solid var(--border-strong, #2e2e5a);
  border-top: 2px solid var(--accent-red);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 12px 36px rgba(var(--shade-rgb, 0, 0, 0), 0.6);
  padding: 4px 0;
  max-height: 70vh;
  overflow-y: auto;
  animation: navDropFade 0.15s ease;
}

html[data-theme="light"] .nav-group.open .nav-dropdown {
  background: var(--panel); border-color: var(--border-strong);
  box-shadow: 0 12px 36px rgba(var(--shade-rgb, 0, 0, 0), 0.12);
}

html[data-theme="light"] .nav-group-trigger:hover { background: rgba(var(--ink-rgb), 0.04); }

.nav-group-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 10px 18px;
  font-family: var(--font-data);
  font-size: 12px; letter-spacing: 0.04em;
  color: var(--text-secondary); text-decoration: none;
  transition: all 0.15s; white-space: nowrap;
}

/* #421/#422/#424/#425: Shared page header — unified design language.
   Eyebrow (Inter, system-ui, sans-serif · breadcrumb-ish) → Title (Unbounded caps) →
   Tagline (Inter italic, Latin/PL one-liner). Used by every section
   sub-page so the system speaks one voice. */
.cy-page-head {
  width: 100%;
  max-width: var(--kk-max, var(--page-max, 1400px));
  margin: 0 auto 24px;
  /* #2261: bez poziomego paddingu. Reset main w app-shell-v5.css oddaje padding
     stronie (body), więc własne wcięcie nagłówka odsuwało tytuł o 24px w prawo
     od kart pod nim i od własnej linii border-bottom. Zmierzone na 58 stronach. */
  padding: 32px 0 20px;
  border-bottom: 1px solid var(--border-subtle, rgba(var(--ink-rgb, 255, 255, 255), 0.06));
}
/* width:100% jest konieczne w kontekście flex-column main (missions, forum,
   testimonium, testis, forum-admin). Bez definite width automatyczne marginesy
   poziome flexa kurczą nagłówek do treści i centrują go zamiast wyrównać do
   lewej jak na stronach blokowych. Refs #1122. */
.cy-page-eyebrow {
  display: block;
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-tertiary, rgba(var(--ink-rgb, 255, 255, 255), 0.4));
  margin-bottom: 10px;
}
.cy-page-title {
  font-family: var(--font-brand);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-primary, #ffffff);
  margin: 0;
  line-height: 1.1;
}
.cy-page-tagline {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-style: italic;
  color: var(--fg-secondary, rgba(var(--ink-rgb, 255, 255, 255), 0.72));
  margin: 10px 0 0;
  max-width: 760px;
  line-height: 1.5;
}
@media (max-width: 760px) {
  .cy-page-head { padding: 20px 0 14px; margin-bottom: 16px; }
  .cy-page-eyebrow { font-size: 11px; }
}
.nav-group-item-count {
  color: var(--text-tertiary, rgba(var(--ink-rgb, 255, 255, 255), 0.4));
  font-size: 11px; letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.nav-group-item:hover { color: var(--text-primary); background: rgba(var(--ink-rgb, 255, 255, 255), 0.04); }
.nav-group-item:hover .nav-group-item-count { color: var(--text-secondary); }

html[data-theme="light"] .nav-group-item:hover { background: rgba(var(--ink-rgb), 0.05); }

.nav-group-item.active { color: var(--text-primary); background: rgba(var(--ink-rgb, 255, 255, 255), 0.06); }
.nav-group-item.active .nav-group-item-count { color: var(--text-primary); }

.nav-dropdown-divider {
  height: 1px;
  margin: 4px 12px;
  background: var(--border, rgba(var(--ink-rgb, 255, 255, 255), 0.08));
}

.nav-group.theatrum.active > .nav-group-trigger { color: var(--accent-blue, var(--accent-ratio)); border-bottom-color: var(--accent-blue, var(--accent-ratio)); }

.nav-group.theatrum.open .nav-dropdown { border-top-color: var(--accent-blue, var(--accent-ratio)); }

.nav-group.intelligence.active > .nav-group-trigger { color: var(--accent-teal, var(--accent-signal)); border-bottom-color: var(--accent-teal, var(--accent-signal)); }

.nav-group.intelligence.open .nav-dropdown { border-top-color: var(--accent-teal, var(--accent-signal)); }

.nav-group.compliance.active > .nav-group-trigger { color: var(--accent-gold, #c9a23f); border-bottom-color: var(--accent-gold, #c9a23f); }

.nav-group.compliance.open .nav-dropdown { border-top-color: var(--accent-gold, #c9a23f); }

.nav-gear-trigger { font-size: 16px; opacity: 0.6; padding: 0 10px !important; }

.nav-gear-trigger:hover { opacity: 1; }

.nav-admin-gear.active > .nav-gear-trigger { opacity: 1; color: var(--accent-gold, #c9a23f); }

.nav-admin-gear.open .nav-dropdown { border-top-color: var(--accent-gold, #c9a23f); }

.nav-dropdown-right { right: 0; left: auto; }

.nav-admin-icon {
  padding: 0 12px;
  height: 56px;
  display: flex;
  align-items: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s;
  text-decoration: none;
  font-size: 18px;
}

.nav-admin-icon:hover { color: var(--text-primary); }

.cyrber-nav-client .nav-links { gap: 0; }

.cyrber-nav-client .nav-item.client-item > a {
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 18px;
  font-family: var(--font-brand);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
}

.cyrber-nav-client .nav-item.client-item > a:hover {
  color: var(--text-primary);
}

.cyrber-nav-client .nav-item.client-item.active > a {
  color: var(--accent-red);
  border-bottom-color: var(--accent-red);
}

.nav-mode-toggle {
  background: none;
  border: 1px solid var(--card-border);
  border-radius: 4px;
  padding: 4px 10px;
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: .08em;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.nav-mode-toggle.nav-mode-expert {
  color: var(--text-muted);
  border-color: var(--card-border);
}

.nav-mode-toggle.nav-mode-expert:hover {
  color: var(--text-secondary);
  border-color: var(--text-muted);
}

.nav-mode-toggle.nav-mode-client {
  color: var(--accent-red);
  border-color: var(--accent-red);
}

.nav-mode-toggle.nav-mode-client:hover {
  background: rgba(209,101,101,0.08);
}

.nav-silence-btn { background: none; border: none; cursor: pointer; font-size: 16px; padding: 4px 6px; opacity: 0.7; transition: opacity 0.15s; }

.nav-silence-btn:hover { opacity: 1; }

.nav-protection-counter {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-data);
  font-size: var(--text-xs);
  color: var(--text-muted);
  letter-spacing: .04em;
}

.nav-protection-counter .anim-pulse-dot {
  width: 6px; height: 6px;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-shrink: 0;
}

.nav-divider {
  width: 1px;
  height: 20px;
  background: var(--border-strong);
  opacity: 0.5;
  flex-shrink: 0;
}

.nav-protection-counter {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-data);
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  letter-spacing: .04em;
}

.nav-protection-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-live);
  box-shadow: 0 0 6px rgba(var(--signal-rgb, 228, 232, 233), .5);
  animation: nav-pulse-dot 2s infinite;
  flex-shrink: 0;
}

.nav-lang-toggle {
  display: flex;
  align-items: center;
  gap: 1px;
  background: var(--bg-overlay);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px;
  flex-shrink: 0;
}

.nav-lang-btn {
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 3px 7px;
  border-radius: 4px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: background .15s, color .15s;
  line-height: 1;
}

.nav-lang-btn:hover {
  color: var(--text-primary);
}

.nav-lang-btn.active {
  background: var(--accent);
  color: #fff;
}

.nav-fullscreen-btn {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 6px;
  background: transparent; border: 1px solid var(--border);
  color: var(--text-muted); cursor: pointer;
  transition: color .15s, background .15s;
  flex-shrink: 0; padding: 0;
}

.nav-fullscreen-btn:hover {
  color: var(--text-primary);
  background: var(--bg-overlay);
}

.nav-theme-switch {
  display: flex;
  align-items: center;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-overlay);
  overflow: hidden;
  flex-shrink: 0;
}

.nav-theme-opt {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: color .15s, background .15s;
  padding: 0;
}

.nav-theme-opt:hover { color: var(--text-primary); }

.nav-theme-opt.active {
  color: var(--accent);
  background: var(--accent-muted);
}

.nav-theme-opt svg { width: 14px; height: 14px; }

.nav-theme-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-overlay);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
  padding: 0;
  flex-shrink: 0;
}

.nav-theme-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.nav-theme-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.nav-theme-btn .theme-icon-sun,
.nav-theme-btn .theme-icon-moon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-user-menu {
  position: relative;
}

.nav-user-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-overlay);
  color: var(--text-secondary);
  font-size: 12px;
  font-family: var(--font-data);
  cursor: pointer;
  transition: border-color .15s, color .15s;
  white-space: nowrap;
  letter-spacing: .04em;
}

.nav-user-btn:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}

.nav-user-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-live);
  flex-shrink: 0;
}

.nav-user-name {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-user-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 190px;
  background: var(--card-bg);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 8px 24px rgba(var(--shade-rgb, 0, 0, 0), .25);
  z-index: 10002;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.nav-user-dropdown.open {
  display: block;
  animation: nav-dropdown-in .15s ease;
}

.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-family: var(--font-data);
  color: var(--text-secondary);
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  letter-spacing: .04em;
  transition: background .12s, color .12s;
}

.nav-dropdown-item:hover {
  background: var(--accent-muted);
  color: var(--text-primary);
}

.nav-dropdown-logout {
  color: var(--red);
}

.nav-dropdown-logout:hover {
  background: rgba(209,101,101,.08);
  color: var(--red);
}

.nav-dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

.nav-view-as-active {
  color: var(--accent) !important;
  background: var(--accent-muted);
}

.nav-view-as-active svg { stroke: var(--accent); }

.nav-view-as-banner {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 10003;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 6px 16px;
  background: var(--accent-muted, rgba(91,127,166,.12));
  border-top: 1px solid var(--accent, var(--accent-ratio));
  font-family: var(--font-data);
  font-size: 11px; letter-spacing: 0.08em;
  color: var(--accent, var(--accent-ratio));
}

.nav-view-as-banner button {
  font-family: var(--font-data);
  font-size: 11px; letter-spacing: 0.06em;
  padding: 3px 12px; border-radius: 4px;
  border: 1px solid var(--accent, var(--accent-ratio));
  background: transparent; color: var(--accent);
  cursor: pointer; transition: all .15s;
}

.nav-view-as-banner button:hover {
  background: var(--accent, var(--accent-ratio)); color: #fff;
}

.nav-mission-pulse {
  display: none;
  align-items: center; gap: 6px;
  padding: 4px 10px; margin: 0 8px;
  border-radius: 4px; text-decoration: none;
  background: rgba(209, 101, 101, 0.1);
  border: 1px solid rgba(209, 101, 101, 0.3);
  transition: background 0.2s;
}

.nav-mission-pulse.active { display: flex; }

.nav-mission-pulse:hover { background: rgba(209, 101, 101, 0.2); }

.nav-mission-pulse.paused {
  background: rgba(209, 161, 90, 0.12);
  border-color: rgba(209, 161, 90, 0.4);
}
.nav-mission-pulse.paused:hover { background: rgba(209, 161, 90, 0.2); }
.nav-mission-pulse.paused .nav-pulse-dot,
.nav-mission-pulse.paused .nav-pulse-dot-red {
  background: var(--sev-high);
  animation: none;
}
.nav-mission-pulse.paused .nav-mission-count,
.nav-mission-pulse.paused .nav-mission-label {
  color: var(--sev-high);
}

.nav-pulse-dot,
.nav-pulse-dot-red {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sev-critical);
  animation: navPulseRed 1.5s infinite;
  flex-shrink: 0;
}

.nav-mission-count {
  font-family: var(--font-data);
  font-size: 13px; font-weight: 700;
  color: var(--sev-critical);
}

.nav-mission-label {
  font-family: var(--font-data);
  font-size: 11px; letter-spacing: 0.05em;
  color: var(--sev-critical); opacity: 0.85;
}

.nav-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--bg-overlay);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all .2s;
  padding: 0;
  flex-shrink: 0;
}

.nav-icon-btn:hover { border-color: var(--accent); }

.nav-icon-btn svg { width: 16px; height: 16px; }

body.cyrber-raw-mode .cyrber-ekg { display: none !important; }

body.cyrber-raw-mode .cyrber-breath-overlay { display: none !important; }

.nav-ctrl-btn {
  background: none; border: none;
  color: var(--text-muted, var(--fg-tertiary));
  font-size: 14px; cursor: pointer;
  padding: 2px 6px; transition: opacity .2s;
  line-height: 1;
}

.nav-ctrl-btn:hover { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════
   EXTENDED DESIGN TOKENS — added 2026-04-28 (DZIEŃ 1A++)
   Mathematical precision: 8px grid · golden ratio (φ=1.618) · cubic-bezier
   Single source of truth for motion, shadow, scale, z-index.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  /* Motion tiers — natural cubic-bezier (Apple-style ease) */
  --motion-fast:    150ms cubic-bezier(.2,.6,.2,1);
  --motion-medium:  250ms cubic-bezier(.2,.6,.2,1);
  --motion-slow:    450ms cubic-bezier(.2,.6,.2,1);
  --motion-spring:  500ms cubic-bezier(.34,1.56,.64,1);

  /* Shadow tiers — glass-aware, builds depth without weight */
  --shadow-sm:  0 1px 2px rgba(var(--shade-rgb, 0, 0, 0), .18), 0 1px 3px rgba(var(--shade-rgb, 0, 0, 0), .10);
  --shadow-md:  0 4px 8px rgba(var(--shade-rgb, 0, 0, 0), .20), 0 2px 4px rgba(var(--shade-rgb, 0, 0, 0), .12);
  --shadow-lg:  0 12px 28px rgba(var(--shade-rgb, 0, 0, 0), .30), 0 6px 12px rgba(var(--shade-rgb, 0, 0, 0), .16);
  --shadow-glow-ratio:    0 0 24px rgba(91,127,166,.25);
  --shadow-glow-animus:   0 0 24px rgba(199,107,98,.25);
  --shadow-glow-fatum:    0 0 24px rgba(154,134,196,.25);
  --shadow-glow-live:     0 0 18px rgba(228, 232, 233,.30);
  --shadow-glow-critical: 0 0 24px rgba(209,101,101,.40);

  /* Golden ratio sizing scale (φ=1.618) — for harmonic typography & spacing */
  --scale-0:    0.618rem;
  --scale-1:    1rem;
  --scale-phi:  1.618rem;
  --scale-phi2: 2.618rem;
  --scale-phi3: 4.236rem;
  --scale-phi4: 6.854rem;

  /* Spacing tokens — strict 8px grid (sp-1 = 4px micro for tight chips) */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* Z-index tiers — ordered, no magic numbers in components */
  --z-base:        1;
  --z-page:        10;
  --z-sticky:      50;
  --z-shell-vital: 90;
  --z-shell-nav:   100;
  --z-overlay:     500;
  --z-drawer:      600;
  --z-modal:       700;
  --z-toast:       800;
  --z-tooltip:     900;
  --z-skiplink:    9999;

  /* Glass primitives — backdrop blur + border ring */
  --glass-blur-sm: blur(6px);
  --glass-blur-md: blur(12px);
  --glass-blur-lg: blur(20px);
  --glass-bg-soft: rgba(15, 15, 15, 0.55);
  --glass-bg-firm: rgba(15, 15, 15, 0.78);
  --glass-ring:    inset 0 0 0 1px rgba(255,255,255,.05);
}

/* ═══════════════════════════════════════════════════════════════════
   ACCESSIBILITY — sr-only correct, focus rings WCAG AA
   ═══════════════════════════════════════════════════════════════════ */
.cy-skip-link {
  position: absolute;
  left: -9999px; top: 0;
  padding: var(--sp-2) var(--sp-3);
  background: var(--accent-ratio);
  color: #fff;
  font-weight: 600;
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  font-size: var(--font-body-small);
  z-index: var(--z-skiplink);
  border-radius: 0 0 var(--radius-sm) 0;
  transition: left var(--motion-fast);
}
.cy-skip-link:focus,
.cy-skip-link:focus-visible {
  left: 0;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.tabular-nums { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
  border: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   AGENT-FIRST SHELL COMPONENTS — MENS as primary interface
   Mount points wired up by nav.js / mens-window.js (Sprint MENS-3).
   ═══════════════════════════════════════════════════════════════════ */
/* In-flow page composer (kokpit canon).
   IMPORTANT: place inside the page's <main> so the strip inherits the
   main's content padding — the strip itself has no max-width or padding,
   so it always matches the width of sibling content rows (KPI tiles,
   timeline, lists, etc.) regardless of viewport size or page wrapper.
   Use: <section class="agent-strip"><div id="mens-agent-bar-mount"></div></section> */
.agent-strip {
  width: 100%;
  margin: var(--sp-4) 0 var(--sp-3);
  padding: 0;
  box-sizing: border-box;
}
.mens-agent-bar {
  display: flex; align-items: center; gap: 12px;
  padding: clamp(14px, 1.6vh, 22px) clamp(18px, 1.5vw, 28px);
  background: rgba(var(--ink-rgb, 255, 255, 255), 0.02);
  border: 0;
  border-radius: var(--radius-md);
  box-shadow:
    rgba(var(--ink-rgb, 255, 255, 255), 0.06) 0 1px 0 0 inset,
    rgba(var(--ink-rgb, 255, 255, 255), 0.12) 0 0 0 1px inset,
    rgba(0, 0, 0, 0.3) 0 4px 20px -4px;
  font-family: 'Inter', system-ui, sans-serif;
  transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mens-agent-bar:focus-within {
  background: rgba(20, 20, 20, 0.85);
  box-shadow:
    rgba(var(--ink-rgb, 255, 255, 255), 0.04) 0 1px 0 0 inset,
    rgba(91, 127, 166, 0.25) 0 0 0 1px inset,
    rgba(0, 0, 0, 0.4) 0 4px 24px -4px;
}
/* Prompt glyph "C" — kokpit uses ">" mono. Here we keep the dual-accent
   ratio→fatum chip as the agent identity badge. */
.mens-agent-bar__icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-ratio), var(--accent-fatum));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-data);
  font-size: 14px; font-weight: 700; color: #fff;
  flex-shrink: 0;
  letter-spacing: 0;
}
.mens-agent-bar__input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  font-family: 'Inter', sans-serif;
  font-size: clamp(13px, 1.1vh, 16px);
  color: var(--fg-primary);
  padding: 4px 0;
  min-width: 0;
  caret-color: var(--accent-live);
}
.mens-agent-bar__input::placeholder { color: var(--fg-tertiary); font-weight: 400; }
.mens-agent-bar__hint {
  padding: 8px 12px;
  border-radius: 5px;
  background: rgba(var(--ink-rgb, 255, 255, 255), 0.04);
  box-shadow: rgba(var(--ink-rgb, 255, 255, 255), 0.08) 0 0 0 1px inset;
  color: var(--fg-secondary);
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 200ms, color 200ms, box-shadow 200ms;
}
.mens-agent-bar__hint:hover {
  background: rgba(var(--ink-rgb, 255, 255, 255), 0.08);
  color: var(--fg-primary);
  box-shadow: rgba(var(--ink-rgb, 255, 255, 255), 0.18) 0 0 0 1px inset;
}
.mens-agent-bar__send {
  padding: 8px 14px;
  border-radius: 5px;
  background: rgba(var(--ink-rgb, 255, 255, 255), 0.04);
  box-shadow: rgba(var(--ink-rgb, 255, 255, 255), 0.08) 0 0 0 1px inset;
  color: var(--fg-secondary);
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.04em;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 200ms, color 200ms, box-shadow 200ms;
}
.mens-agent-bar__send:hover {
  background: rgba(var(--ink-rgb, 255, 255, 255), 0.08);
  color: var(--fg-primary);
  box-shadow: rgba(var(--ink-rgb, 255, 255, 255), 0.18) 0 0 0 1px inset;
}
.mens-agent-bar__send:disabled { opacity: 0.4; cursor: not-allowed; }

/* EKG sweep line is provided globally by base-v5.css `.cyrber-ekg`
   (fixed bottom, small green pulse). Login keeps its own .lp-ekg.
   Do NOT add a second .cyrber-ekg-strip here — that duplicated the
   EKG visually and was reported as a "big EKG across the page". */

/* Kokpit-canon inline overlay (slide-up panel above agent-strip).
   Replaces legacy full-screen modal — mirrors kokpit `.agent-chat`
   pattern so mens-window matches the inline conversation UX. */
.mens-window-overlay {
  position: fixed;
  inset: auto 0 clamp(24px, 4vh, 48px) 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: var(--z-modal);
  display: none;
  pointer-events: none;
}
.mens-window-overlay.is-open {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
@keyframes mensWindowRise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mens-window {
  pointer-events: auto;
  width: min(1200px, calc(100vw - 48px));
  max-height: clamp(240px, 50vh, 560px);
  margin: 0;
  background: color-mix(in srgb, var(--bg-panel) 94%, transparent); /* #4106: oba motywy */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow:
    rgba(var(--ink-rgb, 255, 255, 255), 0.06) 0 1px 0 0 inset,
    rgba(var(--ink-rgb, 255, 255, 255), 0.12) 0 0 0 1px inset,
    rgba(0, 0, 0, 0.5) 0 18px 42px -12px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  animation: mensWindowRise 260ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.mens-window__header {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: clamp(11px, 1.2vh, 14px) clamp(14px, 1.4vw, 20px);
  box-shadow: var(--border-subtle) 0 -1px 0 0 inset;
  border-bottom: 0;
  font-family: var(--font-brand);
  font-size: clamp(11px, 0.9vh, 12px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-secondary);
}
.mens-window__thread {
  padding: clamp(12px, 1.4vh, 18px) clamp(14px, 1.4vw, 20px);
  overflow-y: auto;
  display: flex; flex-direction: column;
  gap: clamp(11px, 1vh, 14px);
}
.mens-window__msg {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--sp-3);
  align-items: start;
}
.mens-window__msg--user { color: var(--fg-primary); }
.mens-window__msg--mens {
  color: var(--fg-primary);
  border-left: 2px solid var(--accent-fatum);
  padding-left: var(--sp-3);
}
.mens-window__msg-content { line-height: 1.55; font-size: var(--font-body); }
.mens-window__msg-content code {
  background: var(--bg-elevated); padding: 2px 6px; border-radius: var(--radius-xs);
  font-family: 'JetBrains Mono', monospace; font-size: 0.9em;
}
.mens-window__msg-content pre {
  background: var(--bg-elevated); padding: var(--sp-3); border-radius: var(--radius-sm);
  overflow-x: auto; font-family: 'JetBrains Mono', monospace; font-size: 0.85em;
  border-left: 2px solid var(--accent-ratio);
}
.mens-window__footer {
  padding: clamp(11px, 1.2vh, 14px) clamp(14px, 1.4vw, 20px);
  box-shadow: var(--border-subtle) 0 1px 0 0 inset;
  border-top: 0;
  display: flex; align-items: center; gap: var(--sp-3);
}

/* Reply peek: in-flow band directly ABOVE the composer. cyrber-mens-bar.js
   inserts it before section.agent-bar (a flex child of the shell column), so
   it must live in that flow — the old position:fixed top/right detached it into
   a floating top-right window (the "nowe okienko" bug). #1410 follow-up. */
.mens-thread-peek {
  max-width: var(--kk-max, var(--page-max));
  width: 100%;
  margin: 0 auto 8px;
  flex-shrink: 0;
  box-sizing: border-box;
  /* Kolorystyka 1:1 z KOKPIT .agent-chat (zmierzone): neutralne tło, brak
     navy glass-tint, inset-hairline zamiast border, ten sam blur. #1475. */
  background: color-mix(in srgb, var(--bg-panel) 94%, transparent); /* #4106: oba motywy */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 0;
  border-radius: var(--radius-lg);
  padding: var(--sp-3) var(--sp-4);
  box-shadow:
    rgba(var(--ink-rgb, 255, 255, 255), 0.06) 0 1px 0 0 inset,
    rgba(var(--ink-rgb, 255, 255, 255), 0.12) 0 0 0 1px inset,
    rgba(0, 0, 0, 0.5) 0 18px 42px -12px;
  font-size: var(--font-body-small);
  display: none;
}
.mens-thread-peek.is-visible { display: block; }
/* #1773: slide-in tylko przy pierwszym pokazaniu (is-entering); powrót po ×
   (toggle is-visible) jest natychmiastowy - dokowanie, nie pop-in "nowego okna". */
.mens-thread-peek.is-entering { animation: mensPeekSlide var(--motion-medium); }
@keyframes mensPeekSlide {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* #1775: JEDNO okno rozmowy. Gdy wątek jest otwarty, section.agent-bar staje się
   pojedynczym panelem (rozmowa NAD polem, jeden obrys), a dzieci tracą własną
   ramkę/tło/cień - inaczej czytają się jak dwa osobne okna ("CYRBER · OPERATOR"
   osobno + pasek "zapytaj CYRBER" osobno). Jeden agent, jedno okno, spójne. */
section.agent-bar.has-thread {
  background: color-mix(in srgb, var(--bg-panel) 94%, transparent); /* #4106: oba motywy */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-lg);
  box-shadow:
    rgba(var(--ink-rgb, 255, 255, 255), 0.06) 0 1px 0 0 inset,
    rgba(var(--ink-rgb, 255, 255, 255), 0.12) 0 0 0 1px inset,
    rgba(0, 0, 0, 0.5) 0 18px 42px -12px;
  overflow: hidden;
}
section.agent-bar.has-thread .mens-thread-peek {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0;
  margin: 0;
  max-width: none;
}
section.agent-bar.has-thread .agent-input-wrapper,
section.agent-bar.has-thread .agent-input-wrapper:focus-within {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.mens-thread-peek__title {
  font-family: var(--font-brand);
  letter-spacing: var(--ls-heading); text-transform: uppercase;
  font-size: var(--font-microlabel); color: var(--fg-secondary);
  margin-bottom: var(--sp-1);
}
.mens-thread-peek__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
/* Scope "· owner/operator/client" — jak KOKPIT .agent-chat-scope. */
.mens-thread-peek__scope { color: var(--accent-ratio); font-style: normal; }
/* Meta: clear + close (jak KOKPIT .agent-chat-meta). */
.mens-thread-peek__meta { display: inline-flex; gap: 10px; align-items: center; }
.mens-thread-peek__clear {
  border: 0; background: transparent;
  font-family: var(--font-data); font-size: var(--font-microlabel);
  color: var(--fg-tertiary); letter-spacing: 0.08em;
  padding: 2px 6px; border-radius: 4px; cursor: pointer;
  transition: color .15s, background .15s;
}
.mens-thread-peek__clear:hover { color: var(--fg-primary); background: rgba(var(--ink-rgb, 255, 255, 255), 0.04); }
.mens-thread-peek__close {
  border: 0; background: transparent; color: var(--fg-tertiary);
  font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px;
  transition-property: color; transition-duration: .15s;
}
.mens-thread-peek__close:hover { color: var(--fg-primary); }
/* Scrollable turn list — the one agent's conversation, newest at bottom. */
.mens-thread-peek__body {
  color: var(--fg-secondary); line-height: 1.5;
  max-height: 42vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
}
/* Chat bubbles, unified with the KOKPIT conversation (.chat-bubble): user
   right-aligned/accent, CYRBER left-aligned/elevated, so it reads as a real
   conversation on every page's MENS bar. #1426. */
.mens-thread-turn {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  line-height: 1.5;
  word-wrap: break-word;
  animation: mensBubbleIn 160ms ease both;
}
@keyframes mensBubbleIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Alignment + colour carry the speaker identity (like KOKPIT); the label is
   kept in the DOM for assistive tech but not shown. */
.mens-thread-turn__label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mens-thread-turn__text { white-space: pre-wrap; color: var(--fg-primary); }
.mens-thread-turn--cyrber,
.mens-thread-turn--info,
.mens-thread-turn--wait {
  align-self: flex-start;
  background: var(--bg-elevated);
  box-shadow: var(--border-default) 0 0 0 1px inset;
  border-bottom-left-radius: 4px;
}
.mens-thread-turn--user {
  align-self: flex-end;
  background: color-mix(in oklab, var(--accent-ratio) 14%, transparent);
  box-shadow: color-mix(in oklab, var(--accent-ratio) 28%, transparent) 0 0 0 1px inset;
  border-bottom-right-radius: 4px;
}
.mens-thread-turn--error {
  align-self: flex-start;
  background: color-mix(in oklab, var(--accent-critical) 12%, transparent);
  box-shadow: color-mix(in oklab, var(--accent-critical) 30%, transparent) 0 0 0 1px inset;
}
.mens-thread-turn--error .mens-thread-turn__text { color: var(--accent-critical); }
.mens-thread-turn--deny {
  align-self: flex-start;
  background: color-mix(in oklab, var(--accent-warning) 12%, transparent);
  box-shadow: color-mix(in oklab, var(--accent-warning) 30%, transparent) 0 0 0 1px inset;
}
.mens-thread-turn--deny .mens-thread-turn__text { color: var(--accent-warning); }
/* Rich content inside bubbles (code fence / inline code / bold). */
.mens-thread-turn .mens-code {
  margin: 6px 0 0; padding: 8px 10px;
  background: rgba(0, 0, 0, 0.35); border-radius: 6px; overflow-x: auto;
}
.mens-thread-turn .mens-code code {
  font-family: var(--font-code); font-size: 0.9em;
  color: var(--accent-ratio); white-space: pre; background: none;
}
.mens-thread-turn .mens-inline-code {
  font-family: var(--font-data); font-size: 0.9em;
  background: rgba(0, 0, 0, 0.35); padding: 1px 5px; border-radius: 3px;
  color: var(--accent-ratio);
}
.mens-thread-turn strong { font-weight: 600; color: var(--fg-primary); }
/* "MENS myśli…" — zunifikowany indicator z KOKPIT (tekst italic + kropki). */
.mens-thread-turn--wait .mens-thread-turn__text {
  display: inline-flex; align-items: center; gap: 8px;
}
.mens-thinking-text {
  font-style: italic; color: var(--fg-tertiary);
  animation: mensThinkPulse 1.4s ease-in-out infinite;
}
@keyframes mensThinkPulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
.mens-typing { display: inline-flex; gap: 4px; align-items: center; height: 1em; }
.mens-typing span {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent-signal);
  animation: mensTypingBounce 1.2s ease-in-out infinite;
}
.mens-typing span:nth-child(2) { animation-delay: 0.2s; }
.mens-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes mensTypingBounce {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .mens-thinking-text, .mens-typing span { animation: none; }
}

.channel-origin-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  font-size: var(--font-microlabel);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  font-family: 'JetBrains Mono', monospace;
  background: var(--bg-elevated);
  color: var(--fg-tertiary);
  border: 1px solid var(--border-subtle);
}
.channel-origin-badge--matrix  { color: var(--accent-fatum); border-color: rgba(154,134,196,.3); }
.channel-origin-badge--element { color: var(--accent-ratio); border-color: rgba(91,127,166,.3); }
.channel-origin-badge--gui     { color: var(--accent-live);  border-color: rgba(var(--signal-rgb, 228, 232, 233), .3); }

.recipe-runner-progress {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-3);
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--font-body-small);
}
.recipe-runner-progress__step {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: var(--sp-2);
  align-items: center;
}
.recipe-runner-progress__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--fg-dimmed);
}
.recipe-runner-progress__step--running .recipe-runner-progress__dot { background: var(--accent-warning); animation: vhDotPulse 1.2s infinite; }
.recipe-runner-progress__step--done    .recipe-runner-progress__dot { background: var(--sev-ok, #5fa07f); }
.recipe-runner-progress__step--failed  .recipe-runner-progress__dot { background: var(--accent-critical); }
.recipe-runner-progress__step--pending .recipe-runner-progress__dot { background: var(--fg-dimmed); opacity: .5; }
.recipe-runner-progress__step-name { color: var(--fg-secondary); }
.recipe-runner-progress__step-time { color: var(--fg-tertiary); font-size: var(--font-microlabel); }

.agent-action-confirm {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(440px, 90vw);
  background: var(--bg-panel);
  border-left: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-drawer);
  padding: var(--sp-5);
  display: none;
  flex-direction: column;
  gap: var(--sp-4);
  animation: agentConfirmSlide var(--motion-medium);
}
.agent-action-confirm.is-open { display: flex; }
@keyframes agentConfirmSlide {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
.agent-action-confirm__title {
  font-family: var(--font-brand);
  letter-spacing: var(--ls-heading); text-transform: uppercase;
  color: var(--accent-warning);
  font-size: var(--font-body-plus);
}
.agent-action-confirm__plan {
  background: var(--bg-elevated);
  padding: var(--sp-3); border-radius: var(--radius-sm);
  font-family: 'JetBrains Mono', monospace; font-size: var(--font-body-small);
  color: var(--fg-secondary); line-height: 1.6;
  border-left: 3px solid var(--accent-warning);
}
.agent-action-confirm__buttons {
  display: flex; gap: var(--sp-3); margin-top: auto;
}

.cyr-vital-chip.is-clickable { cursor: pointer; transition: transform var(--motion-fast), box-shadow var(--motion-fast); position: relative; }
.cyr-vital-chip.is-clickable:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }

/* ═══════════════════════════════════════════════════════════════════
   GLASS CARD PRIMITIVES — used across pages for KPI rows / sections
   ═══════════════════════════════════════════════════════════════════ */
.cy-card {
  background: var(--bg-panel);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-5);
  position: relative;
}
.cy-card--glass {
  background: var(--glass-bg-soft);
  backdrop-filter: var(--glass-blur-md);
  -webkit-backdrop-filter: var(--glass-blur-md);
  box-shadow: var(--glass-ring), var(--shadow-md);
}
.cy-card--ratio    { border-left: 3px solid var(--accent-ratio); }
.cy-card--animus   { border-left: 3px solid var(--accent-animus); }
.cy-card--fatum    { border-left: 3px solid var(--accent-fatum); }
.cy-card--live     { border-left: 3px solid var(--accent-live); }
.cy-card--warning  { border-left: 3px solid var(--accent-warning); }
.cy-card--critical { border-left: 3px solid var(--accent-critical); }

.cy-section {
  margin-block: var(--sp-7);
  scroll-margin-top: var(--sp-7);
}
.cy-section__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.cy-section__title {
  font-family: var(--font-brand);
  font-size: var(--font-number); font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-heading);
  text-transform: uppercase;
  color: var(--fg-primary);
}
.cy-section__subtitle {
  font-size: var(--font-body-small);
  color: var(--fg-tertiary);
  letter-spacing: var(--ls-nav);
}

.cy-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-4);
}

.cy-pulse-strip {
  display: flex; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--font-body-small);
  align-items: center;
}

/* ═══════════════════════════════════════════════════════════════════
   DATA-THEME LIGHT MODE OVERRIDES — opt-in via [data-theme="light"]
   ═══════════════════════════════════════════════════════════════════ */
[data-theme="light"] {
  /* #3213: kanon jasnego motywu jest w base-v5.css (:root[data-theme="light"]).
     Tu tylko tokeny szkla, ktorych base nie definiuje. */
  --glass-bg-soft:  rgba(247, 240, 227, 0.65);
  --glass-bg-firm:  rgba(247, 240, 227, 0.86);
  --glass-ring:     inset 0 0 0 1px rgba(42, 32, 22, .07);
}

/* #1362: mid-nav overflowed ~102px at 1280 (7 links @ 32px gap squeezed the
   1fr side columns of the `1fr auto 1fr` grid, pushing the user menu off-screen).
   Tighten nav spacing on 901-1366.

   #2653: górna granica podniesiona 1366 → 1560. Pozycji jest dziś 9, nie 7,
   więc pasek przy 32px odstępu potrzebuje 997px i przy oknie 1440-1560 nie
   zostawiał prześwitu na grupę narzędzi. Sam `minmax(max-content, 1fr)` na
   torach bocznych to domyka, ale dopiero zwężenie odstępu daje przy 1440
   prześwit 30px zamiast 3px. Powyżej 1560 odstęp zostaje 32px i układ jest
   nietknięty (1600 i 1920 zmierzone co do piksela). */
@media (min-width: 901px) and (max-width: 1560px) {
  header.nav .nav-mid   { gap: 16px; }
  header.nav .nav-left  { gap: 8px; }
  header.nav .nav-right { gap: 8px; }
}

/* #3289: LIVE tylko przy świeżych danych; utils.js ustawia data-state. */
.statusbar .sb-live[data-state="wait"],
.statusbar .sb-live[data-state="wait"] .sb-live-dot { color: var(--fg-tertiary); background-color: transparent; }
.statusbar .sb-live[data-state="wait"] .sb-live-dot { background: var(--fg-tertiary); animation: none; opacity: .5; }
.statusbar .sb-live[data-state="nostream"] { color: var(--accent-warning); }
.statusbar .sb-live[data-state="nostream"] .sb-live-dot { background: var(--accent-warning); animation: none; box-shadow: none; }
.statusbar .sb-live[data-state="down"] { color: var(--accent-critical); }
.statusbar .sb-live[data-state="down"] .sb-live-dot { background: var(--accent-critical); animation: none; box-shadow: none; }

/* #4094 etap 3: „kopiuj” pod odpowiedzią agenta (kokpit, pasek, okno MENS). */
.agent-copy-btn {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--fg-tertiary);
  background: transparent;
  border: 0;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--border-subtle);
  cursor: pointer;
  transition: color 120ms ease, box-shadow 120ms ease;
}
.agent-copy-btn:hover,
.agent-copy-btn:focus-visible {
  color: var(--fg-primary);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}