/* ============================================================
   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:   #a1a1a1;
  --fg-tertiary:    #6b6b6b;
  --fg-dimmed:      #3f3f3f;

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

  --accent-ratio:    #388BFD;
  --accent-animus:   #F85149;
  --accent-fatum:    #BC8CFF;
  --accent-live:     #3fb950;
  --accent-warning:  #f0b429;
  --accent-high:     #f97316;
  --accent-critical: #ef4444;

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

  --ls-brand:   0.22em;
  --ls-label:   0.24em;
  --ls-heading: 0.20em;
  --ls-nav:     0.14em;

  --page-max:   clamp(1680px, 95vw, 3200px);
  /* PIXEL PARITY z kokpit body literal padding (3vw/64). */
  --page-pad-x: clamp(24px, 3vw, 64px);

  --font-microlabel: clamp(9px, 0.7vw, 11px);
  --font-body-small: clamp(10px, 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: 'Share Tech Mono', monospace; }

@keyframes v5-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes v5-pulse {
  0%, 100% { opacity: 0.9; }
  50%      { opacity: 0.5; }
}

/* ============================================================
   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;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: clamp(48px, 5vh, 64px);
  padding: 0 var(--page-pad-x);
  max-width: var(--page-max);
  width: 100%;
  margin: 0 auto;
  box-shadow: var(--border-subtle) 0 -1px 0 0 inset;
  background: var(--bg-canvas);
  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: 'Orbitron', sans-serif;
  font-weight: 500;
  font-size: 13px;
  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: 'Share Tech Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  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;
}
@media (max-width: 900px) {
  .nv-back { display: none; }
}

.nv {
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  letter-spacing: var(--ls-nav);
  color: var(--fg-tertiary);
  padding: 14px 2px;
  position: relative;
  transition: color 200ms ease;
}
.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: 'Share Tech Mono', monospace;
  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: 'Orbitron', sans-serif;
  font-size: 10px;
  letter-spacing: 0.16em;
  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: 9px; 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(8px, 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: 'Share Tech Mono', monospace;
  font-size: var(--font-body-small);
  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-dimmed); 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: 'Share Tech Mono', monospace;
  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(8px, 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(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: 'Share Tech Mono', monospace;
  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: 'Share Tech Mono', monospace;
  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(86, 194, 255, 0.08); }

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

.mono { font-family: 'Share Tech Mono', monospace; }
.orbitron { font-family: 'Orbitron', sans-serif; }
.microlabel {
  font-family: 'Share Tech Mono', monospace;
  font-size: var(--font-microlabel);
  letter-spacing: 0.22em;
  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(63, 185, 80, 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: 10px; }
}

/* ============================================================
   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(10px, 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: 'Share Tech Mono', monospace;
  font-size: var(--font-microlabel);
  color: var(--fg-dimmed);
  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-dimmed);
  font-style: italic;
}
.af-sep {
  color: var(--fg-dimmed);
  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: rgb(74, 222, 128);
  stroke-width: 1.5;
  fill: none;
  filter: drop-shadow(0 0 3px rgba(74, 222, 128, 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(188,140,255,.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(239, 68, 68, 0.5); }
  70% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 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: 'Orbitron', sans-serif;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .15em;
  color: var(--text-primary);
  text-decoration: none;
}

.nav-brand span {
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--accent);
  letter-spacing: .3em;
  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: 'Share Tech Mono', monospace;
  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(6,10,20,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(74,143,212,.1);
  font-family: var(--font-mono, 'Share Tech Mono'), 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, 'Orbitron'), monospace;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--text-muted, #4a5568);
}

.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, #F85149); }

.cyr-vital-vigor .cyr-vital-value { color: var(--organ-vigor, #3FB950); }

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

.cyr-vital-phase .cyr-vital-value { color: var(--accent, #4a8fd4); text-transform: uppercase; font-size: 9px; }

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

.cyr-vital-sep {
  width: 1px;
  height: 14px;
  background: rgba(74,143,212,.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: 10px;
  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, #BC8CFF);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .04em;
  animation: fatumPulse 3s ease-in-out infinite;
  white-space: nowrap;
}

html[data-theme="light"] .cyr-vitals-strip {
  background: rgba(248,250,252,.92);
  border-bottom-color: rgba(15,23,42,.06);
}

html[data-theme="light"] .cyr-vital-sep { background: rgba(15,23,42,.08); }

.cyrber-nav {
  font-size: 16px;  /* fixed base — immune to per-page html font-size overrides */
  height: 56px;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--accent-red);
  box-shadow: 0 1px 20px rgba(193,18,31,0.15);
  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: #0d1420;
  border: 1.5px solid var(--accent, #FF6B35);
  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(255,107,53,0.3));
  animation: navRingPulse 3s ease-in-out infinite .5s;
  pointer-events: none;
}

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

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

[data-theme="light"] .nav-logo-circle {
  background: #1a2035;
  border-color: var(--accent, #FF6B35);
}

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

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

.cyrber-nav .nav-links a {
  font-family: 'Share Tech Mono', monospace;
  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(193,18,31,0.1);
}

.cyrber-nav .nav-user {
  font-family: 'Share Tech Mono', monospace;
  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: 'Share Tech Mono', monospace;
  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(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, #F85149); border-bottom-color: var(--animus-color, #F85149); }

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

.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: 'Share Tech Mono', monospace;
  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(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, #0f0f1a); 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(0,0,0,0.6);
  padding: 4px 0;
  max-height: 70vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
  animation: navDropFade 0.15s ease;
}

.nav-group.open .nav-dropdown::-webkit-scrollbar { width: 4px; }

.nav-group.open .nav-dropdown::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

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

html[data-theme="light"] .nav-group-trigger:hover { background: rgba(0,0,0,0.03); }

.nav-group-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 10px 18px;
  font-family: 'Share Tech Mono', monospace;
  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 (Share Tech Mono · breadcrumb-ish) → Title (Orbitron caps) →
   Tagline (Inter italic, Latin/PL one-liner). Used by every section
   sub-page so the system speaks one voice. */
.cy-page-head {
  max-width: var(--kk-max, 1400px);
  margin: 0 auto 24px;
  padding: 32px 24px 20px;
  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
}
.cy-page-eyebrow {
  display: block;
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-tertiary, rgba(255,255,255,0.4));
  margin-bottom: 10px;
}
.cy-page-title {
  font-family: 'Orbitron', sans-serif;
  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(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 16px 14px; margin-bottom: 16px; }
  .cy-page-eyebrow { font-size: 9px; }
}
.nav-group-item-count {
  color: var(--text-tertiary, rgba(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(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(0,0,0,0.04); }

.nav-group-item.active { color: var(--text-primary); background: rgba(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(255,255,255,0.08));
}

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

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

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

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

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

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

.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, #c9a84c); }

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

.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: 'Orbitron', sans-serif;
  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: 'Share Tech Mono', monospace;
  font-size: 10px;
  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(193,18,31,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: 'Share Tech Mono', monospace;
  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: 'Share Tech Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  letter-spacing: .04em;
}

.nav-protection-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34,197,94,.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: 'Share Tech Mono', monospace;
  font-size: 10px;
  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: 'Share Tech Mono', monospace;
  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: #22c55e;
  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(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: 'Share Tech Mono', monospace;
  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(255,68,68,.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(74,143,212,.12));
  border-top: 1px solid var(--accent, #4a8fd4);
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px; letter-spacing: 0.08em;
  color: var(--accent, #4a8fd4);
}

.nav-view-as-banner button {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px; letter-spacing: 0.06em;
  padding: 3px 12px; border-radius: 4px;
  border: 1px solid var(--accent, #4a8fd4);
  background: transparent; color: var(--accent);
  cursor: pointer; transition: all .15s;
}

.nav-view-as-banner button:hover {
  background: var(--accent); 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(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  transition: background 0.2s;
}

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

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

.nav-pulse-dot-red {
  width: 8px; height: 8px; border-radius: 50%;
  background: #ef4444;
  animation: navPulseRed 1.5s infinite;
  flex-shrink: 0;
}

.nav-mission-count {
  font-family: 'Share Tech Mono', monospace;
  font-size: 13px; font-weight: 700;
  color: #ef4444;
}

.nav-mission-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px; letter-spacing: 0.05em;
  color: #ef4444; 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, #5a7a9f);
  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(0,0,0,.18), 0 1px 3px rgba(0,0,0,.10);
  --shadow-md:  0 4px 8px rgba(0,0,0,.20), 0 2px 4px rgba(0,0,0,.12);
  --shadow-lg:  0 12px 28px rgba(0,0,0,.30), 0 6px 12px rgba(0,0,0,.16);
  --shadow-glow-ratio:    0 0 24px rgba(56,139,253,.25);
  --shadow-glow-animus:   0 0 24px rgba(248,81,73,.25);
  --shadow-glow-fatum:    0 0 24px rgba(188,140,255,.25);
  --shadow-glow-live:     0 0 18px rgba(63,185,80,.30);
  --shadow-glow-critical: 0 0 24px rgba(218,54,51,.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, 20, 35, 0.55);
  --glass-bg-firm: rgba(15, 20, 35, 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(255, 255, 255, 0.02);
  border: 0;
  border-radius: var(--radius-md);
  box-shadow:
    rgba(255, 255, 255, 0.06) 0 1px 0 0 inset,
    rgba(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(255, 255, 255, 0.04) 0 1px 0 0 inset,
    rgba(86, 194, 255, 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: 'Share Tech Mono', monospace;
  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(255, 255, 255, 0.04);
  box-shadow: rgba(255, 255, 255, 0.08) 0 0 0 1px inset;
  color: var(--fg-secondary);
  font-family: 'Share Tech Mono', monospace;
  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(255, 255, 255, 0.08);
  color: var(--fg-primary);
  box-shadow: rgba(255, 255, 255, 0.18) 0 0 0 1px inset;
}
.mens-agent-bar__send {
  padding: 8px 14px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: rgba(255, 255, 255, 0.08) 0 0 0 1px inset;
  color: var(--fg-secondary);
  font-family: 'Share Tech Mono', monospace;
  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(255, 255, 255, 0.08);
  color: var(--fg-primary);
  box-shadow: rgba(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: rgba(15, 15, 15, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow:
    rgba(255, 255, 255, 0.06) 0 1px 0 0 inset,
    rgba(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(10px, 1.2vh, 14px) clamp(14px, 1.4vw, 20px);
  box-shadow: var(--border-subtle) 0 -1px 0 0 inset;
  border-bottom: 0;
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(10px, 0.9vh, 12px);
  letter-spacing: 0.18em;
  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(8px, 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(10px, 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);
}

.mens-thread-peek {
  position: fixed;
  top: 96px; right: var(--sp-5);
  width: 320px;
  background: var(--glass-bg-firm);
  backdrop-filter: var(--glass-blur-md);
  -webkit-backdrop-filter: var(--glass-blur-md);
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--accent-fatum);
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4);
  box-shadow: var(--shadow-md);
  z-index: var(--z-toast);
  font-size: var(--font-body-small);
  display: none;
  animation: mensPeekSlide var(--motion-medium);
}
.mens-thread-peek.is-visible { display: block; }
@keyframes mensPeekSlide {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.mens-thread-peek__title {
  font-family: 'Orbitron', sans-serif;
  letter-spacing: var(--ls-heading); text-transform: uppercase;
  font-size: var(--font-microlabel); color: var(--accent-fatum);
  margin-bottom: var(--sp-1);
}
.mens-thread-peek__body { color: var(--fg-secondary); line-height: 1.5; }

.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(188,140,255,.3); }
.channel-origin-badge--element { color: var(--accent-ratio); border-color: rgba(56,139,253,.3); }
.channel-origin-badge--gui     { color: var(--accent-live);  border-color: rgba(63,185,80,.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(--accent-live); }
.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: 'Orbitron', sans-serif;
  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: 'Orbitron', sans-serif;
  font-size: var(--font-number);
  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"] {
  --bg-canvas:      #fafafa;
  --bg-panel:       #ffffff;
  --bg-elevated:    #f4f4f5;
  --bg-interactive: #e9e9ea;

  --fg-primary:     #0a0a0a;
  --fg-secondary:   #404040;
  --fg-tertiary:    #6b6b6b;
  --fg-dimmed:      #a1a1a1;

  --border-subtle:  rgba(0, 0, 0, 0.06);
  --border-default: rgba(0, 0, 0, 0.10);
  --border-strong:  rgba(0, 0, 0, 0.16);

  --glass-bg-soft:  rgba(255, 255, 255, 0.65);
  --glass-bg-firm:  rgba(255, 255, 255, 0.86);
  --glass-ring:     inset 0 0 0 1px rgba(0,0,0,.06);
}