/* === Dashboard Design Tokens === */
:root {
  --bg: #f6f7f9;
  --bg-card: #ffffff;
  --bg-card-hover: #eef1f5;
  --bg-input: #eef1f5;
  --bg-modal: #ffffff;
  --bg-code: #eef1f5;
  --bg-main: #f6f7f9;
  --bg-hover: #eef1f5;
  --bg-subtle: rgba(17, 24, 39, 0.045);
  --surface: #ffffff;
  --surface-2: #eef1f5;
  --text: #111827;
  --text-secondary: #374151;
  --text-muted: #6b7280;
  --border: #d7dce3;
  --border-focus: #2563eb;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-soft: rgba(37, 99, 235, 0.11);
  --accent-on: #ffffff; /* AA-safe text on filled --accent surfaces (light: white on #2563eb = 5.17:1) */
  --danger: #bf4d43;
  --danger-soft: rgba(191, 77, 67, 0.12);
  --danger-hover: #a8413a;
  --success: #788c5d;
  --success-soft: rgba(120, 140, 93, 0.12);
  --info: #6a9bcc;
  --info-soft: rgba(106, 155, 204, 0.12);
  --warning: #b7791f;
  /* AA-safe status badge TEXT tokens on the -soft tint backgrounds. Light theme
     keeps the hue by default; dark theme lifts them (see [data-theme="dark"]). */
  --badge-danger-text: var(--danger-hover);
  --badge-success-text: #4d5e34;
  --badge-warning-text: #8a5a12;
  --badge-info-text: #2f6194;
  --badge-neutral-text: #4b5563;
  --badge-accent-text: var(--accent-hover);
  --primary: #2563eb;
  --error: #bf4d43;
  --shadow-sm: 0 1px 3px rgba(17, 24, 39, 0.04);
  --shadow-md: 0 4px 16px rgba(17, 24, 39, 0.06);
  --shadow-lg: 0 8px 32px rgba(17, 24, 39, 0.1);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --transition: 0.2s ease;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --font-ui-xs: 11px;
  --font-ui-sm: 12px;
  --font-ui-md: 13px;
  --font-ui-lg: 15px;
  --line-tight: 1.25;
  --line-normal: 1.45;
  --control-min: 44px;
  --scrollbar-thumb: rgba(107, 114, 128, 0.45);
  --scrollbar-thumb-hover: rgba(107, 114, 128, 0.7);
  --scrollbar-track: transparent;

  /* Token Monitor chart series palette (top-5 agents + Other). Defined once so
     the canvas renderer resolves themable colors via getComputedStyle and no
     per-chart inline hex is needed. --tu-series-1 keeps the legacy indigo for
     engine/codex continuity. See design-system contract #b1b053de §3. */
  --tu-series-1: #6366f1;
  --tu-series-2: #0ea5e9;
  --tu-series-3: #10b981;
  --tu-series-4: #f59e0b;
  --tu-series-5: #ec4899;
  --tu-series-other: var(--text-muted);

  /* === Design System tokens (Chunk 1: Global Foundation) ===
     Normalized, complete token set. Existing variables above remain valid
     aliases; the --color-* tokens map onto them so both naming schemes work
     and stay theme-aware (they reference vars that the dark theme overrides). */
  --color-bg-canvas: var(--bg-main);
  --color-bg-surface: var(--bg-card);
  --color-bg-surface-2: var(--surface-2);
  --color-bg-muted: var(--bg-input);
  --color-border-subtle: var(--border);
  --color-border-strong: color-mix(in srgb, var(--border) 72%, var(--text) 28%);
  --color-text-primary: var(--text);
  --color-text-secondary: var(--text-secondary);
  --color-text-muted: var(--text-muted);
  --color-accent: var(--accent);
  --color-success: var(--success);
  --color-warning: var(--warning);
  --color-danger: var(--danger);
  --color-info: var(--info);

  /* Spacing scale (--space-1..5 already defined above) */
  --space-0: 0;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;

  /* Radius scale (--radius-sm/--radius-lg already defined above) */
  --radius-xs: 4px;
  --radius-md: 12px;
  --radius-pill: 999px;

  /* Typography scale */
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-md: 13px;
  --font-size-body: 14px;
  --font-size-lg: 15px;
  --font-size-lg-title: 18px; /* modal/section H2/H3 title (design-system §1.3) */
  --font-size-title: 20px;
  --font-size-page: 28px;

  /* Layout primitives */
  --content-max-readable: 920px;
  --content-max-wide: 1720px;
  --panel-min: 280px;

  /* Soft status tint missing from the base set (design-system gap #1). */
  --warning-soft: rgba(183, 121, 31, 0.12);

  /* === Team Map tokens (zoomable hierarchy canvas) ===
     Namespaced so the map canvas can read connectors/status without making
     node borders heavier; redefined under [data-theme="dark"] below. */
  --map-canvas-bg: var(--bg-main);
  --map-grid-dot: rgba(17, 24, 39, 0.06);
  --map-connector: #c2c9d4;
  --map-connector-strong: var(--accent);
  --map-node-bg: var(--bg-card);
  --map-node-border: var(--border);
  --map-control-bg: rgba(255, 255, 255, 0.92);
  --map-control-border: var(--border);
  --map-status-running: var(--success);
  --map-status-stopped: var(--text-muted);
  --map-focus-ring: var(--border-focus);
  --map-level-gap: 96px;
  --map-node-w: 220px;
  --map-node-h: 96px;
}

/* === Glassy-Dark token system (WAVE 1 — dashboard A-Z glassy-dark redesign) ===
   Owner-approved "SOTET PREMIUM / GLASSY" direction (Discord b4c91fc4).
   Bible: docs/design/glassy-dark-bible.md. These are theme-agnostic CONSTANTS;
   the glass *surface treatment* that consumes them is applied only under
   [data-theme="dark"] (see WAVE 1 application block at end of file), so the
   light theme is left completely unchanged. No existing token is renamed. */
:root {
  /* background depth layers */
  --gd-bg-0: #030712;
  --gd-bg-1: #07111f;
  --gd-bg-2: #0a1628;
  --gd-bg-vignette: rgba(0, 0, 0, 0.46);
  /* glass surfaces */
  --gd-surface: rgba(13, 23, 39, 0.66);
  --gd-surface-strong: rgba(17, 28, 48, 0.78);
  --gd-surface-soft: rgba(255, 255, 255, 0.045);
  /* hairlines */
  --gd-border: rgba(184, 211, 255, 0.16);
  --gd-border-hover: rgba(184, 211, 255, 0.26);
  --gd-border-strong: rgba(132, 189, 255, 0.32);
  /* text */
  --gd-text: #f4f8ff;
  --gd-text-2: #c6d3e3;
  --gd-text-muted: #8fa1b8;
  /* accents (glow families) + semantic state text */
  --gd-accent: #67e8f9;
  --gd-accent-2: #8b5cf6;
  --gd-accent-blue: #60a5fa;
  --gd-success: #86efac;
  --gd-warning: #fbbf24;
  --gd-danger: #f87171;
  /* glass panel composition */
  --gd-glass-bg: linear-gradient(180deg, rgba(17, 28, 48, 0.78), rgba(10, 18, 31, 0.58));
  --gd-glass-bg-soft: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.032));
  --gd-glass-blur: 22px;
  --gd-glass-blur-mobile: 16px;
  --gd-glass-border: 1px solid rgba(184, 211, 255, 0.16);
  --gd-glass-border-hot: 1px solid rgba(103, 232, 249, 0.34);
  --gd-inner-light: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --gd-shadow-panel: 0 22px 70px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  --gd-shadow-float: 0 30px 90px rgba(0, 0, 0, 0.48), 0 0 44px rgba(96, 165, 250, 0.10);
  /* glow / accent */
  --gd-glow-cyan: 0 0 28px rgba(103, 232, 249, 0.28);
  --gd-glow-blue: 0 0 34px rgba(96, 165, 250, 0.30);
  --gd-glow-violet: 0 0 42px rgba(139, 92, 246, 0.22);
  --gd-focus-ring: 0 0 0 3px rgba(103, 232, 249, 0.22);
  /* radius scale */
  --gd-radius-xs: 8px;
  --gd-radius-sm: 12px;
  --gd-radius-md: 18px;
  --gd-radius-lg: 24px;
  --gd-radius-xl: 32px;
  --gd-radius-pill: 999px;
  /* spacing scale */
  --gd-space-1: 4px;
  --gd-space-2: 8px;
  --gd-space-3: 12px;
  --gd-space-4: 16px;
  --gd-space-5: 20px;
  --gd-space-6: 24px;
  --gd-space-8: 32px;
  --gd-space-10: 40px;
  /* type */
  --gd-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

[data-theme="dark"] {
  --bg: #050505;
  --bg-card: #111318;
  --bg-card-hover: #171a20;
  --bg-input: #1b1f27;
  --bg-modal: #111318;
  --bg-code: #171a20;
  --bg-main: #000000;
  --bg-hover: #1b1f27;
  --bg-subtle: rgba(245, 247, 250, 0.055);
  --surface: #111318;
  --surface-2: #171a20;
  --text: #f5f7fa;
  --text-secondary: #c6ccd5;
  --text-muted: #8b949e;
  /* G5 glass-border: the old solid #2a2f38 read as a hard black frame on the
     near-black canvas. Alias the base border to the bible glass hairline so
     EVERY dark-theme border becomes a cool translucent glass edge, consistently
     (panels, cards, dividers, inputs, tables). --border-solid preserves the old
     opaque tone for the few spots that use --border as a filled chip/dot bg. */
  --border: var(--gd-border);
  --border-solid: #2a2f38;
  --border-focus: #60a5fa;
  --accent: #60a5fa;
  --accent-hover: #93c5fd;
  --accent-soft: rgba(96, 165, 250, 0.14);
  --accent-on: #08131f; /* AA-safe text on filled --accent surfaces (dark accent #60a5fa is light: near-black text = 7.4:1, white would be 2.5:1) */
  --primary: #60a5fa;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.25);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.35);
  /* G2 glassy-dark scrollbar: cool blue-white glass thumb (not OS grey) on a
     faint designed track; hover lifts toward the cyan accent for a subtle glow. */
  --scrollbar-thumb: rgba(184, 211, 255, 0.22);
  --scrollbar-thumb-hover: rgba(103, 232, 249, 0.5);
  --scrollbar-track: rgba(184, 211, 255, 0.05);

  /* Token Monitor chart series — hues lifted for contrast on the true-black
     dark canvas; Other still resolves to the muted text token. */
  --tu-series-1: #818cf8;
  --tu-series-2: #38bdf8;
  --tu-series-3: #34d399;
  --tu-series-4: #fbbf24;
  --tu-series-5: #f472b6;
  --tu-series-other: var(--text-muted);

  /* Soft warning tint, dark variant. */
  --warning-soft: rgba(183, 121, 31, 0.18);

  /* AA-safe status badge text on dark -soft tints (lifted hues; all >6.5:1). */
  --badge-danger-text: #f2a39a;
  --badge-success-text: #a6d693;
  --badge-warning-text: #eec06a;
  --badge-info-text: #a9cff0;
  --badge-neutral-text: #aab2bd;
  --badge-accent-text: #a9cff0;

  /* Team Map — TRUE black canvas (owner request: no brownish dark). Status and
     connector colours are lifted so rings/lines pass a visibility check on #000. */
  --map-canvas-bg: #000000;
  --map-grid-dot: rgba(245, 247, 250, 0.05);
  --map-connector: #2f3742;
  --map-connector-strong: #4a5563;
  --map-node-bg: #0b0d10;
  --map-node-border: #2a2f38;
  --map-control-bg: rgba(11, 13, 16, 0.92);
  --map-control-border: #2a2f38;
  --map-status-running: #7fb069;
  --map-status-stopped: #8b949e;
  --map-focus-ring: var(--border-focus);
}

html[data-theme="dark"] {
  background-color: var(--gd-bg-0);
  background:
    radial-gradient(circle at 18% 12%, rgba(96, 165, 250, 0.22), transparent 28%),
    radial-gradient(circle at 86% 4%, rgba(103, 232, 249, 0.16), transparent 24%),
    radial-gradient(circle at 78% 84%, rgba(139, 92, 246, 0.12), transparent 30%),
    linear-gradient(145deg, var(--gd-bg-0), var(--gd-bg-1) 48%, #02040a 100%);
}

/* === Reset === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Page-level horizontal clip. `overflow-x: clip` (not `hidden`) is deliberate:
   `hidden` would compute overflow-y to `auto` and make body a scroll container,
   which breaks the dashboard's many `position: sticky` elements. `clip` clips
   without establishing a scroll container, so sticky keeps working. This stops
   an installed (standalone) PWA from being draggable sideways when something
   overflows by a hair: Safari's rubber-band hides it, standalone does not. */
html, body { max-width: 100%; overflow-x: clip; }

* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
*::-webkit-scrollbar { width: 12px; height: 12px; }
*::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: 999px; }
*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
  transition: background-color 0.18s ease, box-shadow 0.18s ease;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  background-clip: padding-box;
  box-shadow: inset 0 0 0 1px rgba(103, 232, 249, 0.4);
}
*::-webkit-scrollbar-thumb:active { background: var(--scrollbar-thumb-hover); background-clip: padding-box; }
*::-webkit-scrollbar-corner { background: transparent; }

button,
a.sb-link,
.btn-primary,
.btn-secondary,
.btn-compact,
select,
input[type="checkbox"],
input[type="radio"] {
  touch-action: manipulation;
}

/* === Global focus-visible baseline (design-system §1.6 / QA C7) ===
   Standardized keyboard focus ring for every interactive control. Components
   may still override (e.g. inset offset on tight rows), but this guarantees no
   interactive element is left without a visible 2px focus ring — the single
   biggest keyboard-a11y gap called out by the audit. Mouse/touch clicks do not
   trigger :focus-visible, so this stays invisible for pointer users. */
a[href]:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}
/* Keep the ring inside tight/overflow-clipped rows so it is not clipped away. */
tr:focus-visible,
td:focus-visible,
.data-table-wrap :focus-visible {
  outline-offset: -2px;
}

@media (pointer: coarse) {
  button,
  .btn-primary,
  .btn-secondary,
  .btn-compact,
  a.sb-link,
  select {
    min-height: var(--control-min);
  }
  .btn-icon,
  .view-btn,
  .autonomy-level-btn {
    min-width: var(--control-min);
    width: var(--control-min);
    min-height: var(--control-min);
    height: var(--control-min);
  }
  input,
  textarea,
  .input,
  .naplo-date,
  .naplo-search,
  .mem-search {
    min-height: var(--control-min);
  }
  input[type="checkbox"],
  input[type="radio"] {
    min-width: var(--control-min);
    width: var(--control-min);
    min-height: var(--control-min);
    height: var(--control-min);
  }
  .settings-color-input {
    min-width: var(--control-min);
    min-height: var(--control-min);
  }
  .cxhu-link-sm,
  .cxhu-banner-close {
    min-width: var(--control-min);
    min-height: var(--control-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
  transition: background var(--transition), color var(--transition);
  font-size: 15px;
  display: grid;
  grid-template-columns: 284px minmax(0, 1fr);
}

/* === Sidebar === */
.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  background: var(--bg-card);
  padding: 18px 14px;
  z-index: 90;
}

body.sidebar-collapsed {
  grid-template-columns: 82px minmax(0, 1fr);
}

body.sidebar-collapsed .sidebar {
  padding-inline: 10px;
}

/* === Mobile shell (hamburger + off-canvas sidebar) === */
/* On desktop the top bar and backdrop are hidden; the sidebar lives in the
 * body grid. On narrow screens the body collapses to one column, the sidebar
 * slides in off-canvas over a backdrop, and a fixed top bar carries the
 * hamburger -- without this the fixed 220px sidebar column pushed the content
 * off the right edge of a phone viewport. */
.mobile-topbar { display: none; }
.sidebar-backdrop { display: none; }
@media (max-width: 768px) {
  body,
  body.sidebar-collapsed { grid-template-columns: 1fr; }
  /* Touch targets: a headless/desktop viewport resized to a phone width does
     not report `pointer: coarse`, so the coarse-pointer sizing above never
     applies there. Mirror the key tappable controls on width alone so the
     autonomy level buttons and the background-tasks "show finished" toggle
     keep a >=44px hit area at narrow widths. */
  .autonomy-level-btn {
    min-width: var(--control-min);
    min-height: var(--control-min);
  }
  #bgShowAll {
    min-width: var(--control-min);
    width: var(--control-min);
    min-height: var(--control-min);
    height: var(--control-min);
  }
  .mobile-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 80;
    height: 52px;
    padding: 0 14px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
  }
  .mobile-topbar-title { font-weight: 600; font-size: 15px; }
.mobile-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
  }
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 284px;
    max-width: 82vw;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: var(--shadow-lg);
  }
  body.sidebar-collapsed .sidebar {
    padding: 18px 14px;
  }
  body.sidebar-collapsed .sidebar-brand-text,
  body.sidebar-collapsed .sidebar-fleet,
  body.sidebar-collapsed .nav-group-label,
  body.sidebar-collapsed .sb-label {
    display: block;
  }
  body.sidebar-collapsed .nav-group-label {
    display: flex;
  }
  body.sidebar-collapsed .sidebar-brand-lockup {
    flex: 1 1 auto;
    grid-template-columns: 42px minmax(0, 1fr);
  }
  body.sidebar-collapsed .sidebar-collapse-btn { display: none; }
  body.sidebar-collapsed .sb-link { justify-content: flex-start; padding-inline: 10px; }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 85;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .sidebar-backdrop.open { opacity: 1; pointer-events: auto; }
  main { max-width: 100%; padding: 16px 14px 48px; overflow-x: hidden; }
  .activity-list { grid-template-columns: 1fr; }
  .activity-tail { max-height: clamp(140px, 35vh, 320px); }
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 2px 14px;
  border-bottom: 1px solid var(--border);
}

.sidebar-brand-lockup {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  color: inherit;
  text-decoration: none;
}
.sidebar-brand-mark {
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: #030712;
  color: #f4f8ff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}
.brand-mark-svg {
  display: block;
  width: 100%;
  height: 100%;
}
.brand-mark-hull {
  fill: #0b1627;
  stroke: url(#brandMarkAura);
  stroke-width: 3.4;
}
.brand-mark-inner {
  fill: none;
  stroke: #67e8f9;
  stroke-width: 1.15;
  stroke-opacity: 0.38;
}
.brand-mark-thread {
  fill: #f4f8ff;
}
.brand-mark-cut {
  fill: #67e8f9;
  fill-opacity: 0.24;
}
.brand-mark-node {
  fill: none;
  stroke: #67e8f9;
  stroke-width: 2.5;
  stroke-linecap: round;
}
.brand-mark-dot-cyan { fill: #67e8f9; }
.brand-mark-dot-violet { fill: #8b5cf6; }
.sidebar-brand-mark img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-brand-name {
  font-weight: 760;
  font-size: 15px;
  line-height: 1.12;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-brand-sub {
  margin-top: 3px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sidebar-collapse-btn {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.sidebar-collapse-btn:hover {
  color: var(--text);
  border-color: var(--accent);
  background: var(--accent-soft);
}
body.sidebar-collapsed .sidebar-collapse-btn svg {
  transform: rotate(180deg);
}

.sidebar-fleet {
  margin: 12px 0 6px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-subtle);
}
.sidebar-fleet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.sidebar-fleet-kicker,
.sidebar-fleet-live {
  font-size: 10px;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sidebar-fleet-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--success);
}
.fleet-pulse {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent);
}
.sidebar-fleet-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.sidebar-fleet-grid div {
  min-width: 0;
  padding: 8px 6px;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border);
  text-align: center;
}
.sidebar-fleet-grid strong {
  display: block;
  font-size: 17px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.sidebar-fleet-grid span {
  display: block;
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-fleet.is-alert .sidebar-fleet-live {
  color: var(--warning);
}
.sidebar-fleet.is-offline .sidebar-fleet-live {
  color: var(--text-muted);
}
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
  flex: 1;
  overflow-y: auto;
  padding-right: 2px;
}
.nav-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 6px;
}
.nav-group-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px 5px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav-group-rule {
  min-width: 12px;
  height: 1px;
  flex: 1;
  background: var(--border);
}
.sb-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  min-height: 44px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all var(--transition);
}
.sb-link[hidden] {
  display: none !important;
}
.sb-link svg { flex-shrink: 0; color: currentColor; }
.sb-link .sb-label { flex: 1; }
.sb-link:hover { color: var(--text); background: var(--accent-soft); }
.sb-link.active { color: var(--text); background: var(--accent-soft); }
.sb-link.active svg { color: var(--accent); }
.sb-badge { margin-left: auto; }
.sidebar-footer {
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}

body.sidebar-collapsed .sidebar-brand {
  justify-content: center;
  padding-inline: 0;
}
body.sidebar-collapsed .sidebar-brand-lockup {
  flex: 0 0 auto;
  grid-template-columns: 42px;
}
body.sidebar-collapsed .sidebar-brand-text,
body.sidebar-collapsed .sidebar-fleet,
body.sidebar-collapsed .nav-group-label,
body.sidebar-collapsed .sb-label {
  display: none;
}
body.sidebar-collapsed .sidebar-collapse-btn {
  position: absolute;
  top: 24px;
  right: -15px;
  background: var(--bg-card);
  box-shadow: var(--shadow-md);
}
body.sidebar-collapsed .sidebar-nav {
  align-items: stretch;
  padding-right: 0;
}
body.sidebar-collapsed .sb-link {
  justify-content: center;
  padding-inline: 0;
}
body.sidebar-collapsed .sb-link svg {
  width: 20px;
  height: 20px;
}
body.sidebar-collapsed .sidebar-footer {
  justify-content: center;
}

/* === Header === */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 64px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 32px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 16px;
  color: var(--text);
  letter-spacing: -0.01em;
}
.logo svg { color: var(--accent); }

nav { display: flex; gap: 4px; }

.nav-link {
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  transition: all var(--transition);
}
.nav-link:hover { color: var(--text); background: var(--accent-soft); }
.nav-link.active { color: var(--accent); background: var(--accent-soft); }

.team-graph {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  padding: 24px 0;
}
.team-level {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}
.team-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 160px;
  max-width: 220px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--bg-card);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color var(--transition), transform var(--transition);
}
.team-node:hover { border-color: var(--accent); transform: translateY(-1px); }
.team-node.main { background: var(--accent-soft); border-color: var(--accent); }
.team-node.leader { border-color: var(--accent); }
.team-node-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 8px;
  background: var(--bg-input);
}
.team-node-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.team-node-monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-weight: 700;
  font-size: 20px;
  color: var(--text-secondary, var(--text-muted));
  background: var(--bg-input);
}
.team-node-name { font-weight: 600; font-size: 14px; color: var(--text); margin-bottom: 2px; }
.team-node-meta { font-size: 12px; color: var(--text-muted); }
/* Ready nodes use the neutral Codex-ready state, not a separate backend mode. */
.team-node-ready { color: var(--success); font-weight: 500; }
.team-connector {
  width: 2px;
  height: 16px;
  background: var(--border);
}
/* Nested tree: a subtree is a column (manager on top, its reports beneath),
   so reports always sit directly under their own manager. */
.team-subtree {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.team-children {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}
.team-empty {
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
  padding: 24px;
}

/* === Team Map: bounded, zoomable, pannable hierarchy canvas ===
   Replaces the document-length .team-graph tree on the Team page only. All map
   rules are scoped under .team-map and never touch shared .team-node defaults
   globally. */
.team-map { width: 100%; position: relative; }
.team-map__canvas {
  position: relative;
  width: 100%;
  height: calc(100dvh - 260px);
  min-height: 640px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background-color: var(--map-canvas-bg);
  background-image: radial-gradient(var(--map-grid-dot) 1px, transparent 1px);
  background-size: 26px 26px;
  background-position: center;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.team-map__canvas.is-grabbing { cursor: grabbing; }
.team-map__canvas:focus-visible {
  outline: 2px solid var(--map-focus-ring);
  outline-offset: -2px;
}

/* Single transform layer (.team-map__world) holds the SVG connector layer and
   the DOM node layer; JS sets one translate()/scale() on the world, so nodes and
   connectors never desync. transform-origin pinned to 0 0. */
.team-map__world {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  will-change: transform;
}
.team-map__edges,
.team-map__nodes {
  position: absolute;
  top: 0;
  left: 0;
}
.team-map__edges { z-index: 0; overflow: visible; pointer-events: none; }
.team-map__nodes { z-index: 1; }

.team-edge {
  fill: none;
  stroke: var(--map-connector);
  stroke-width: 1.5;
  opacity: 0.9;
}
.team-edge.is-active { stroke: var(--map-connector-strong); stroke-width: 2.25; opacity: 1; }
.team-map__edges.zoom-far .team-edge { opacity: 0.6; }

/* Nodes: absolute world coordinates; rendered as <button> for free focus +
   Enter/Space activation. Override the shared .team-node flex-column defaults. */
.team-map .team-node {
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  width: var(--map-node-w);
  height: var(--map-node-h);
  min-width: 0;
  max-width: none;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--map-node-bg);
  border: 1px solid var(--map-node-border);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.team-map .team-node:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: none; /* kill shared .team-node:hover translateY (desyncs connectors) */
}
.team-map .team-node:focus-visible {
  outline: 2px solid var(--map-focus-ring);
  outline-offset: 2px;
}
.team-map .team-node.is-main {
  border-color: var(--accent);
  border-width: 2px;
  background: var(--accent-soft);
}
.team-map .team-node.is-leader { border-color: var(--accent); }
.team-map .team-node[aria-selected="true"] {
  border-color: var(--accent);
  border-width: 2px;
  background: var(--accent-soft);
}

.team-node__avatar {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: visible;
  background: var(--bg-input);
}
.team-node__avatar img,
.team-node__monogram {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.team-node__monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--font-ui-lg);
  color: var(--text-secondary);
  background: var(--bg-input);
}
/* Status as a ring around the avatar (not text-only). */
.team-node.is-running .team-node__avatar { box-shadow: 0 0 0 2px var(--map-status-running); }
.team-node.is-stopped .team-node__avatar { box-shadow: 0 0 0 2px var(--map-status-stopped); }
.team-node__status {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--map-node-bg);
}
.team-node.is-running .team-node__status { background: var(--map-status-running); }
.team-node.is-stopped .team-node__status {
  background: var(--map-node-bg);
  border: 2px solid var(--map-status-stopped);
}
.team-node__text { min-width: 0; flex: 1 1 auto; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 1px; }
.team-node__name {
  font-weight: 600;
  font-size: var(--font-size-body);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.team-node__role,
.team-node__state-text {
  font-size: var(--font-ui-sm);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.team-node__state-text { font-size: var(--font-ui-xs); }

/* Zoom-band density: far hides secondary text, leaving avatar+status+name. */
.team-map__nodes.zoom-far .team-node__role,
.team-map__nodes.zoom-far .team-node__state-text { display: none; }
.team-map__nodes.zoom-far .team-node { gap: var(--space-2); }

/* Unassigned (orphan) cluster divider label. */
.team-map__band-label {
  position: absolute;
  font-size: var(--font-ui-sm);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  pointer-events: none;
}

/* Docked control cluster (top-right desktop). */
.team-map__controls {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--map-control-bg);
  border: 1px solid var(--map-control-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.map-ctrl-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--control-min);
  width: var(--control-min);
  min-height: var(--control-min);
  height: var(--control-min);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.map-ctrl-btn:hover { background: var(--bg-card-hover); color: var(--text); }
.map-ctrl-btn:focus-visible { outline: 2px solid var(--map-focus-ring); outline-offset: -2px; }
.map-ctrl-btn svg { width: 20px; height: 20px; }

.team-map__zoom-indicator {
  position: absolute;
  bottom: var(--space-3);
  left: var(--space-3);
  z-index: 4;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: 11px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.team-map__zoom-indicator.visible { opacity: 1; }

/* State surface: a SIBLING overlay (never overwrites the layer scaffold), one
   of loading / error / empty centered inside the bounded canvas. Scoped under
   .team-map (specificity 0,2,0) so it beats the shared .loading-state etc.
   (0,1,0) dashed-border/bg and renders as a clean centered overlay instead. */
.team-map .team-map__state {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--map-canvas-bg);
  border: 0;
  border-radius: 0;
  text-align: center;
  color: var(--text-secondary);
}
.team-map .team-map__state[hidden] { display: none; }
/* Retry button in the error state must meet the 44px touch target on every
   pointer type (the .btn-compact min-height is gated on pointer:coarse only). */
.team-map .team-map__state #teamMapRetry { min-height: var(--control-min); }
.team-map__spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  animation: team-map-spin 0.8s linear infinite;
}
@keyframes team-map-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .team-map__spinner { animation-duration: 0s; }
}

/* Legend (running / stopped key). */
.team-map__legend {
  position: absolute;
  bottom: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  gap: var(--space-4);
  padding: 6px 12px;
  background: var(--map-control-bg);
  border: 1px solid var(--map-control-border);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: var(--font-ui-xs);
  color: var(--text-secondary);
}
.team-map__legend-item { display: inline-flex; align-items: center; gap: 6px; }
.team-map__legend-dot { width: 10px; height: 10px; border-radius: 50%; }
.team-map__legend-dot.is-running { background: var(--map-status-running); }
.team-map__legend-dot.is-stopped {
  background: var(--map-node-bg);
  border: 2px solid var(--map-status-stopped);
}

/* Mobile hierarchy list: hidden on desktop (the canvas map is the primary view),
   shown under 640px where the pan/zoom canvas compresses into an unreadable row. */
.team-map__list { display: none; }

@media (max-width: 768px) {
  .team-map__canvas { height: calc(100dvh - 200px); min-height: 480px; }
}
@media (max-width: 640px) {
  /* Swap the interactive canvas for the readable list (QA gate F1). */
  .team-map__canvas,
  .team-map__controls,
  .team-map__hint,
  .team-map__legend { display: none; }
  .team-map__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .team-list-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    margin-left: calc(var(--team-depth, 0) * 16px);
    width: calc(100% - var(--team-depth, 0) * 16px);
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
  }
  button.team-list-row { appearance: none; -webkit-appearance: none; }
  .team-list-row.is-main {
    border-color: var(--accent);
    border-left-color: var(--accent);
    background: var(--accent-soft);
    cursor: default;
  }
  .team-list-row.is-leader { border-left-color: var(--accent); }
  .team-list-row:not(.is-main):hover {
    border-color: var(--accent);
  }
  .team-list-row:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }
  .team-list-row__avatar {
    position: relative;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-input);
  }
  .team-list-row__avatar img,
  .team-list-row__avatar .team-node__monogram {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--text-secondary);
  }
  .team-list-row__status {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--bg-card);
    background: var(--map-status-stopped, var(--text-muted));
  }
  .team-list-row__status.is-running { background: var(--map-status-running, var(--success)); }
  .team-list-row__text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .team-list-row__name {
    font-weight: 650;
    font-size: 15px;
    line-height: 1.25;
    color: var(--text);
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .team-list-row__meta { font-size: 13px; color: var(--text-secondary); }
  .team-list-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-4);
    text-align: center;
    color: var(--text-secondary);
  }
}
@media (prefers-reduced-motion: reduce) {
  .team-map__world { transition: none !important; }
}

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  width: 44px;
  min-height: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
}
.theme-toggle:hover { color: var(--text); border-color: var(--accent); }

[data-theme="light"] .icon-moon { display: none; }
[data-theme="dark"] .icon-sun { display: none; }

/* === Main === */
main {
  width: 100%;
  max-width: var(--content-max-wide);
  padding: 18px clamp(16px, 2.4vw, 40px) 64px;
}

.page { min-width: 0; }

.app-shell-topbar {
  position: sticky;
  top: 0;
  z-index: 75;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
  margin: -18px calc(-1 * clamp(16px, 2.4vw, 40px)) 22px;
  padding: 12px clamp(16px, 2.4vw, 40px);
  background: color-mix(in srgb, var(--bg-card) 86%, transparent);
  border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.shell-context {
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.shell-breadcrumb {
  min-width: 0;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 760;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shell-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.shell-title-row h1 {
  min-width: 0;
  color: var(--text);
  font-size: 22px;
  line-height: 1.18;
  font-weight: 720;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shell-state-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 10px;
  font-weight: 820;
  text-transform: uppercase;
}
.shell-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.shell-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-secondary);
  font: inherit;
  font-size: 12px;
  font-weight: 720;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.shell-action-btn:hover {
  color: var(--text);
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: translateY(-1px);
}
.shell-action-icon {
  width: 44px;
  padding: 0;
}

@media (max-width: 768px) {
  .app-shell-topbar {
    position: static;
    min-height: auto;
    margin: 0 0 16px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }
  .shell-title-row h1 { font-size: 18px; }
  .shell-actions { gap: 6px; }
  .shell-action-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 0 10px;
  }
  .shell-action-btn span { display: none; }
}

.page-header { margin-bottom: var(--space-5); }
.page-header h1 {
  font-size: var(--font-size-page);
  line-height: var(--line-tight);
  font-weight: 650;
  letter-spacing: 0;
}
.subtitle {
  color: var(--text-muted);
  max-width: 72ch;
  font-size: var(--font-size-body);
  line-height: var(--line-normal);
  margin-top: 4px;
}

/* === Overview page === */
.overview-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.overview-stat {
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  transition: border-color var(--transition);
}
.overview-stat:hover { border-color: var(--accent); }
.overview-stat-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 6px;
}
.overview-stat-value {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
.overview-stat-sub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted);
}

.overview-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 14px;
}
@media (max-width: 1000px) {
  .overview-grid { grid-template-columns: 1fr; }
}
.overview-card {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
}
.overview-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}
.overview-card-head h3 { font-size: 16px; font-weight: 600; }
.overview-card-meta { font-size: 12px; color: var(--text-muted); }

.overview-agent {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  cursor: pointer;
  transition: border-color var(--transition);
}
.overview-agent:hover { border-color: var(--accent); }
.overview-agent.main { background: var(--accent-soft); }
.overview-agent-avatar {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--bg-input);
  overflow: hidden;
  flex-shrink: 0;
}
.overview-agent-avatar img { width: 100%; height: 100%; object-fit: cover; }
.overview-agent-name { font-weight: 600; font-size: 13px; line-height: 1.2; }
.overview-agent-status { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.overview-agent-status .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  margin-right: 4px;
  vertical-align: middle;
}
.overview-agent-status.stopped .dot { background: #a0a0a0; }

.overview-activity {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.overview-activity-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
}
.overview-activity-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}
.overview-activity-body { flex: 1; }
.overview-activity-title { color: var(--text); line-height: 1.4; }
.overview-activity-time { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* === Kanban Board === */
.kanban-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  max-width: 100%;
}
.kanban-filter-label {
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.kanban-filter-control {
  min-width: 140px;
  max-width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}
.kanban-owner-filter {
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.kanban-owner-filter.active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.kanban-filter-control:focus-visible,
.kanban-owner-filter:focus-visible,
.kanban-quick-filter-chip:focus-visible,
.kanban-quick-filter-clear-all:focus-visible,
.kanban-add-btn:focus-visible,
.card-breakdown-btn:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}
.kanban-quick-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 240px;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Mobile status tabs: desktop hides them entirely; the board keeps its 4
   columns. They only switch on under the 640px breakpoint (see below). */
.kanban-mobile-tabs { display: none; }

.kanban-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  min-height: calc(100vh - 160px);
}
/* Both the flat board and the swimlane board carry .kanban-board; an
   explicit [hidden] override is required because the unconditional
   `display: grid` above otherwise wins the cascade over the UA [hidden]
   default (equal specificity, later source order). */
.kanban-board[hidden] { display: none; }

.kanban-col {
  background: var(--bg-input);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  min-height: 200px;
}

.kanban-col-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 10px;
  position: sticky;
  top: 0;
}
.kanban-col-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-secondary);
}
.kanban-col-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-card);
  border-radius: 10px;
  padding: 1px 7px;
  min-width: 20px;
  text-align: center;
  border: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s, transform 0.2s;
}

/* WIP limit badge states — colour applied via inline style from JS */
.kanban-col-count[data-wip="warn"] { background: color-mix(in oklch, currentColor 10%, var(--bg-card)); }
.kanban-col-count[data-wip="full"] { background: color-mix(in oklch, currentColor 10%, var(--bg-card)); animation: wip-pulse-mild 2.4s ease-in-out infinite; }
.kanban-col-count[data-wip="over"] { background: color-mix(in oklch, currentColor 12%, var(--bg-card)); animation: wip-pulse-strong 1.6s ease-in-out infinite; transform: scale(1.1); }

@keyframes wip-pulse-mild {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
@keyframes wip-pulse-strong {
  0%, 100% { opacity: 1; transform: scale(1.1); }
  50% { opacity: 0.4; transform: scale(1.1); }
}
.kanban-add-btn {
  margin-left: auto;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: 6px;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  line-height: 1;
}
.kanban-add-btn:hover { background: var(--accent-soft); color: var(--accent); }

.kanban-col-body {
  flex: 1;
  padding: 4px 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 60px;
}
.kanban-col-body.drag-over {
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
}

/* === Kanban Card === */
.kanban-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 60px 34px 12px;
  cursor: grab;
  transition: all var(--transition);
  user-select: none;
  position: relative;
}
.kanban-card-actions {
  position: absolute;
  top: 6px;
  right: 6px;
  opacity: 0;
  transition: opacity 0.15s;
}
.kanban-card:hover .kanban-card-actions {
  opacity: 1;
}
.card-breakdown-btn {
  min-width: 44px;
  min-height: 44px;
  background: color-mix(in oklch, var(--accent) 15%, transparent);
  border: 1px solid color-mix(in oklch, var(--accent) 30%, transparent);
  border-radius: 5px;
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 8px 10px;
  transition: background 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.card-breakdown-btn:hover {
  background: color-mix(in oklch, var(--accent) 25%, transparent);
}
.card-breakdown-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.kanban-subtask-badge {
  display: inline-block;
  margin-top: 6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  background: color-mix(in oklch, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in oklch, var(--accent) 25%, transparent);
  padding: 1px 7px;
  border-radius: 10px;
  cursor: pointer;
}
.kanban-subtask-badge:hover {
  background: color-mix(in oklch, var(--accent) 20%, transparent);
}
.kanban-progress-badge {
  position: absolute;
  right: 10px;
  bottom: 9px;
  min-width: 38px;
  height: 20px;
  padding: 2px 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--kanban-progress-border, var(--border));
  border-radius: 999px;
  background: var(--kanban-progress-bg, var(--bg));
  color: var(--kanban-progress-fg, var(--text-secondary));
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
}
.kanban-card-status-stack {
  position: absolute;
  right: 10px;
  bottom: 9px;
  max-width: calc(100% - 20px);
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  pointer-events: none;
  z-index: 1;
}
.kanban-card-status-stack .kanban-progress-badge {
  position: static;
  right: auto;
  bottom: auto;
  flex: 0 0 auto;
}
.kanban-completed-at-badge {
  min-width: 0;
  max-width: 176px;
  height: 20px;
  padding: 2px 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid color-mix(in oklch, var(--success) 24%, transparent);
  border-radius: 999px;
  background: color-mix(in oklch, var(--success) 10%, transparent);
  color: var(--success);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.kanban-progress-badge-empty {
  --kanban-progress-bg: color-mix(in oklch, var(--text-muted) 10%, transparent);
  --kanban-progress-border: color-mix(in oklch, var(--text-muted) 22%, transparent);
  --kanban-progress-fg: var(--text-secondary);
}
.kanban-progress-badge-active {
  --kanban-progress-bg: color-mix(in oklch, var(--accent) 14%, transparent);
  --kanban-progress-border: color-mix(in oklch, var(--accent) 32%, transparent);
  --kanban-progress-fg: var(--accent);
}
.kanban-progress-badge-complete {
  --kanban-progress-bg: color-mix(in oklch, var(--success) 14%, transparent);
  --kanban-progress-border: color-mix(in oklch, var(--success) 32%, transparent);
  --kanban-progress-fg: var(--success);
}
.kanban-progress-badge-failed {
  --kanban-progress-bg: color-mix(in oklch, var(--danger) 14%, transparent);
  --kanban-progress-border: color-mix(in oklch, var(--danger) 34%, transparent);
  --kanban-progress-fg: var(--danger);
}
.kanban-card[data-status="failed"] {
  border-color: color-mix(in oklch, var(--danger) 48%, var(--border));
}

/* Embedded subtasks — rendered inside the parent card when same column */
.kanban-embedded-subtasks {
  border-top: 1px solid var(--border);
  margin-top: 10px;
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kanban-embedded-subtask {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.kanban-embedded-subtask:hover {
  border-color: var(--accent);
  background: var(--bg-input);
}
.kanban-embedded-seq {
  font-family: monospace;
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.kanban-embedded-assignee {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: auto;
  flex-shrink: 0;
}

.kanban-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}
.kanban-card.dragging {
  opacity: 0.4;
  transform: rotate(2deg);
}
.kanban-card-project {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  color: var(--text);
  background: color-mix(in oklch, var(--accent) 12%, transparent);
  padding: 1px 6px;
  border-radius: 4px;
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}

.kanban-card-title {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px;
  line-height: 1.3;
}

.kanban-card-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.kanban-card-assignee {
  font-size: 11px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 3px;
}
.assignee-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  color: #111827;
  flex-shrink: 0;
}
.assignee-dot.owner { background: var(--accent); }
.assignee-dot.bot { background: var(--info); }
.assignee-dot.agent { background: var(--success); }
.assignee-dot.unknown { background: var(--text-muted); }

.kanban-card-due {
  font-size: 10px;
  color: var(--text-muted);
  margin-left: auto;
}
.kanban-card-due.overdue { color: var(--danger); font-weight: 600; }

.kanban-card-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.kanban-card-label-pill {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 8px;
  color: var(--label-color);
  background: color-mix(in srgb, var(--label-color) 16%, transparent);
  cursor: pointer;
  line-height: 1.5;
}
.kanban-card-label-pill:hover { filter: brightness(1.15); }
.kanban-card-label-overflow {
  color: var(--text-muted);
  background: var(--bg);
  cursor: default;
}
.kanban-card-label-overflow:hover { filter: none; }

/* Archived cards: same card look as the board, laid out in a responsive grid */
.archived-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.archived-card {
  cursor: pointer;
}
.archived-card:active { cursor: pointer; }
.archived-prio-pill {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 8px;
  color: var(--prio-color);
  background: color-mix(in srgb, var(--prio-color) 16%, transparent);
  line-height: 1.5;
}
.archived-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.archived-date {
  font-size: 11px;
  color: var(--text-muted);
}

/* --- Ideas: shared work-item card + chip pattern ------------------------- */
.idea-cat-group { margin-bottom: 8px; }
.idea-cat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  padding: 4px 0 6px;
}
/* Built on .kanban-card; stale ideas get a warning left stripe. */
.idea-card { cursor: default; }
.idea-card[data-stale] { border-left: 3px solid var(--color-warning); }
.idea-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.idea-card-title {
  flex: 1;
  min-width: 0;
  text-align: left;
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.idea-card-title:hover { color: var(--accent); text-decoration: underline; }
.idea-card-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
/* Coloured chip fed by a single --chip-color custom property, matching the
   kanban label-pill convention (no per-element inline colour declarations). */
.idea-chip {
  border-color: color-mix(in srgb, var(--chip-color, var(--text-muted)) 45%, transparent);
  color: var(--chip-color, var(--text-muted));
  background: color-mix(in srgb, var(--chip-color, var(--text-muted)) 12%, transparent);
}
.idea-stale-chip {
  --chip-color: var(--color-warning);
}
.idea-card-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin: 4px 0 0;
  line-height: 1.45;
}
.idea-card-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-top: 10px;
}
.idea-action-danger { color: var(--color-danger); }

/* Ideas modals: layout moved off inline styles. */
.idea-modal-rows { display: flex; flex-direction: column; gap: 12px; }
.idea-form-cols { display: flex; gap: 8px; }
.idea-form-cols .form-group { flex: 1; }
.idea-promote-question { margin-bottom: 16px; font-size: 14px; }
.idea-promote-options { display: flex; flex-direction: column; gap: 8px; }
.idea-promote-options > button { text-align: left; padding: 12px 16px; }
.idea-detail-modal {
  max-height: 80vh;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
}
.idea-detail-head { flex: 1; min-width: 0; }
.idea-detail-head h2 { margin: 0; font-size: 16px; word-break: break-word; }
.idea-detail-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.idea-detail-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.idea-detail-desc { font-size: 14px; color: var(--text); white-space: pre-wrap; }
.idea-detail-scoring {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 10px;
  background: var(--bg-input);
  border-radius: var(--radius-sm);
}
.idea-detail-scoring-label { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.idea-score-select { width: 105px; padding: 3px 6px; font-size: 12px; }
.idea-detail-score-chip { font-size: 12px; }
.idea-detail-score-save { font-size: 11px; padding: 3px 10px; }
.idea-comments-title { margin: 0 0 8px; font-size: 13px; font-weight: 600; }
.idea-comment-form { margin-top: 8px; }
.idea-comment-input { width: 100%; resize: vertical; }
.idea-comment-actions { display: flex; justify-content: flex-end; margin-top: 6px; }
.idea-detail-footer { justify-content: space-between; }

/* Mobile: scoring row controls reach a 44px touch target. */
@media (max-width: 640px) {
  .idea-detail-scoring { gap: 10px; }
  .idea-score-select { width: 100%; min-height: 44px; padding: 6px 10px; font-size: 14px; }
  .idea-detail-score-save { min-height: 44px; padding: 8px 16px; font-size: 13px; }
  .idea-card-actions .btn-compact { min-height: 40px; }
}

.kanban-quick-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 12px;
  /* Inactive chips already carry their label's own colour (border + text +
     faint tint), so the header filter row visually matches the per-card label
     pills on the board; the active state below fills solid. */
  border: 1px solid var(--chip-color);
  color: var(--chip-color);
  background: color-mix(in srgb, var(--chip-color) 12%, var(--bg-card));
  cursor: pointer;
  user-select: none;
}
.kanban-quick-filter-chip:hover { border-color: var(--chip-color); }
.kanban-quick-filter-chip.active {
  color: white;
  background: var(--chip-color);
  border-color: var(--chip-color);
}
.kanban-quick-filter-count {
  font-size: 10px;
  opacity: 0.85;
}
.kanban-quick-filter-clear {
  margin-left: 2px;
  font-weight: 700;
}
.kanban-quick-filter-clear-all {
  font-size: 12px;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

.priority-bar {
  width: 3px;
  height: 100%;
  border-radius: 2px;
  position: absolute;
  left: 0;
  top: 0;
}
.kanban-card {
  position: relative;
  overflow: hidden;
}
.kanban-card[data-priority="urgent"] { border-left: 3px solid var(--danger); }
.kanban-card[data-priority="high"] { border-left: 3px solid var(--accent); }
.kanban-card[data-priority="normal"] { border-left: 3px solid transparent; }
.kanban-card[data-priority="low"] { border-left: 3px solid var(--border); }

/* Card aging: left stripe overrides priority border when card is stale.
   Colour is set as --card-aging-color via inline style by JS. */
.kanban-card[data-aging] { border-left: 3px solid var(--card-aging-color); }

/* Aging badge: hourglass + day/hour counter, top-right (left of the ⚡ action) */
.kanban-card-aging-badge {
  position: absolute;
  top: 6px;
  right: 28px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
}

@keyframes aging-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
.kanban-card-aging-badge.kanban-card-aging-critical {
  animation: aging-pulse 2.2s ease-in-out infinite;
}

/* === Kanban Swimlanes === */
.kanban-swimlane-board {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.kanban-swimlane {
  border-bottom: 2px dashed var(--border);
  padding-bottom: 16px;
  margin-bottom: 16px;
}
.kanban-swimlane:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
.kanban-swimlane-header {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 5;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 4px;
  background: var(--bg);
}
.kanban-swimlane-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.kanban-swimlane-avatar.owner { background: var(--accent); }
.kanban-swimlane-avatar.bot { background: var(--info); }
.kanban-swimlane-avatar.agent { background: var(--success); }
.kanban-swimlane-avatar.unknown { background: var(--text-muted); }
.kanban-swimlane-avatar.priority-urgent { background: var(--danger); }
.kanban-swimlane-avatar.priority-high { background: var(--accent); }
.kanban-swimlane-avatar.priority-normal { background: var(--text-muted); }
.kanban-swimlane-avatar.priority-low { background: var(--border); }
.kanban-swimlane-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  margin-right: auto;
}
.kanban-swimlane-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-card);
  border-radius: 10px;
  padding: 1px 7px;
  min-width: 20px;
  text-align: center;
}
.kanban-swimlane-toggle {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}
.kanban-swimlane-toggle:hover { background: var(--accent-soft); color: var(--accent); }
.kanban-swimlane-body {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 4px;
}
.kanban-swimlane.collapsed .kanban-swimlane-body { display: none; }
.kanban-swimlane-col {
  background: var(--bg-input);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  min-height: 60px;
}
.kanban-swimlane-col-header {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  padding: 8px 12px 4px;
}
.kanban-swimlane-col-body {
  flex: 1;
  min-height: 40px;
}

/* === Card detail === */
.card-detail-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.card-detail-desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 20px;
  white-space: pre-wrap;
}
.card-detail-desc:empty { display: none; }

.card-detail-labels { margin-bottom: 20px; }
.card-detail-labels h4 {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}
.label-pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 22px;
}
.label-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--label-color);
  background: color-mix(in srgb, var(--label-color) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--label-color) 40%, transparent);
}
.label-pill-remove {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0;
  opacity: 0.7;
}
.label-pill-remove:hover { opacity: 1; }
.label-color-swatches { display: flex; gap: 4px; }
.label-color-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
}
.label-color-swatch.selected { border-color: var(--text); }

.card-detail-comments { margin-bottom: 20px; }
.card-detail-comments h4 {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
  max-height: 300px;
  overflow-y: auto;
}

.comment-item {
  padding: 10px 12px;
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent-soft, #3b82f633);
}
.comment-author {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 2px;
}
.comment-date {
  font-size: 10px;
  color: var(--text-muted);
  margin-left: 8px;
  font-weight: 400;
}
.comment-body {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
  white-space: pre-wrap;
}

.comment-form textarea {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  outline: none;
  resize: vertical;
  transition: all var(--transition);
}
.comment-form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.comment-author-select {
  padding: 6px 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  outline: none;
}

.form-row {
  display: flex;
  gap: 12px;
}
.form-half { flex: 1; }

/* === Page switching === */
.page[hidden] { display: none !important; }
#kanbanPage { max-width: none; }
/* Full-width layout for the kanban board (overrides main's 1200px cap) */
main.kanban-active {
  max-width: none;
  padding-left: 16px;
  padding-right: 16px;
  background:
    linear-gradient(180deg, var(--bg-card) 0, var(--bg-main) 280px),
    var(--bg-main);
}

[data-theme="dark"] main.kanban-active {
  background:
    linear-gradient(180deg, #0b0d10 0, #000000 280px),
    #000000;
}

/* Kanban main uses a fixed 16px horizontal padding (not the shell's fluid
   clamp(16px,2.4vw,40px)), so the sticky full-bleed topbar's negative margins
   must match 16px too. Otherwise the topbar over-bleeds ~19px past the viewport
   on wide screens -> body-level horizontal overflow. Desktop-only (min-width
   769px): the mobile topbar is static with margin:0 and must stay untouched. */
@media (min-width: 769px) {
  main.kanban-active .app-shell-topbar {
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Kanban redesign: dense operational board with stable columns and readable cards. */
#kanbanPage {
  --kanban-surface: var(--bg-main);
  --kanban-panel: var(--bg-card);
  --kanban-panel-2: var(--surface-2);
  --kanban-panel-3: var(--bg-card-hover);
  --kanban-border: color-mix(in srgb, var(--border) 86%, transparent);
  --kanban-border-strong: color-mix(in srgb, var(--border) 72%, var(--text) 10%);
  --kanban-text: var(--text);
  --kanban-muted: var(--text-secondary);
  --kanban-soft: var(--text-muted);
  --kanban-accent: var(--accent);
  --kanban-green: #84a35f;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  color: var(--kanban-text);
}

[data-theme="dark"] #kanbanPage {
  --kanban-surface: #000000;
  --kanban-panel: #0b0d10;
  --kanban-panel-2: #111318;
  --kanban-panel-3: #171a20;
  --kanban-border: rgba(198, 204, 213, 0.14);
  --kanban-border-strong: rgba(198, 204, 213, 0.24);
  --kanban-text: #f5f7fa;
  --kanban-muted: #c6ccd5;
  --kanban-soft: #8b949e;
  --kanban-accent: #60a5fa;
}

#kanbanPage[hidden] {
  display: none !important;
}

#kanbanPage .kanban-toolbar {
  display: grid;
  grid-template-columns: auto minmax(170px, 0.9fr) auto minmax(150px, 0.7fr) minmax(0, 1fr) auto minmax(170px, 0.7fr) auto;
  align-items: center;
  gap: 8px 10px;
  margin-bottom: 0;
  padding: 10px;
  border: 1px solid var(--kanban-border);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent), var(--kanban-panel);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

#kanbanPage .kanban-filter-label {
  color: var(--kanban-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#kanbanPage .kanban-filter-control,
#kanbanPage .kanban-owner-filter {
  width: 100%;
  min-width: 0;
  border-radius: 8px;
  border-color: var(--kanban-border-strong);
  background: var(--kanban-surface);
  color: var(--kanban-text);
  color-scheme: dark;
}

#kanbanPage .kanban-owner-filter {
  width: auto;
  white-space: nowrap;
  border-color: rgba(242, 163, 58, 0.28);
  background: rgba(242, 163, 58, 0.1);
  color: var(--kanban-text);
}

#kanbanPage .kanban-owner-filter.active {
  background: var(--kanban-accent);
  color: #17110a;
}

#kanbanPage .kanban-quick-filters {
  align-self: stretch;
  justify-content: flex-start;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--kanban-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-gutter: stable;
}

#kanbanPage .kanban-quick-filters:empty {
  display: none;
}

#kanbanPage .kanban-quick-filter-chip,
#kanbanPage .kanban-quick-filter-clear-all {
  min-height: 34px;
  flex: 0 0 auto;
  border-radius: 8px;
  text-decoration: none;
  border-color: var(--kanban-border);
  background: rgba(255, 255, 255, 0.045);
  color: var(--kanban-muted);
}

#kanbanPage .kanban-board {
  grid-template-columns: repeat(4, minmax(260px, 1fr));
  gap: 14px;
  height: calc(100dvh - 154px);
  min-height: 520px;
  align-items: stretch;
}

#kanbanPage .kanban-col,
#kanbanPage .kanban-swimlane-col {
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--kanban-border);
  border-radius: 8px;
  background: var(--kanban-panel);
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 26px rgba(0, 0, 0, 0.2);
}

#kanbanPage .kanban-col.is-empty,
#kanbanPage .kanban-swimlane-col.is-empty {
  align-self: start;
  min-height: 0;
  background: rgba(255, 255, 255, 0.035);
}

#kanbanPage .kanban-col-header {
  min-height: 54px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--kanban-border);
  background: rgba(255, 255, 255, 0.035);
  z-index: 2;
}

#kanbanPage .kanban-col-title {
  color: var(--kanban-text);
  font-size: 12px;
  letter-spacing: 0.06em;
}

#kanbanPage .kanban-col-count,
#kanbanPage .kanban-swimlane-count {
  min-height: 24px;
  min-width: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--kanban-text);
  border-color: var(--kanban-border);
}

#kanbanPage .kanban-add-btn {
  width: 44px;
  height: 44px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.035);
  color: var(--kanban-muted);
}

#kanbanPage .kanban-add-btn:hover {
  border-color: rgba(242, 163, 58, 0.42);
  color: var(--kanban-accent);
  background: rgba(242, 163, 58, 0.1);
}

#kanbanPage .kanban-col-body,
#kanbanPage .kanban-swimlane-col-body {
  min-height: 0;
  padding: 10px;
  gap: 8px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

#kanbanPage #kanbanBoard .kanban-col-body {
  max-height: calc(100dvh - 210px);
}

#kanbanPage .kanban-col-body::-webkit-scrollbar,
#kanbanPage .kanban-swimlane-col-body::-webkit-scrollbar {
  width: 10px;
}

#kanbanPage .kanban-col-body::-webkit-scrollbar-track,
#kanbanPage .kanban-swimlane-col-body::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.035);
}

#kanbanPage .kanban-col-body::-webkit-scrollbar-thumb,
#kanbanPage .kanban-swimlane-col-body::-webkit-scrollbar-thumb {
  background: rgba(232, 226, 211, 0.2);
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

#kanbanPage .kanban-column-empty {
  display: grid;
  place-items: center;
  min-height: 84px;
  padding: 14px;
  border: 1px dashed rgba(232, 226, 211, 0.18);
  border-radius: 8px;
  color: var(--kanban-soft);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 25%, transparent 25% 50%, rgba(255, 255, 255, 0.035) 50% 75%, transparent 75%),
    rgba(255, 255, 255, 0.03);
  background-size: 16px 16px;
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
  pointer-events: none;
}

#kanbanPage .kanban-card {
  flex: 0 0 auto;
  padding: 12px 60px 38px 13px;
  border-radius: 8px;
  border-color: var(--kanban-border);
  background: var(--kanban-panel-2);
  color: var(--kanban-text);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}

#kanbanPage .kanban-card:hover {
  transform: translateY(-1px);
  border-color: rgba(242, 163, 58, 0.28);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

#kanbanPage .kanban-card-project {
  max-width: calc(100% - 46px);
  margin-bottom: 7px;
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--kanban-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#kanbanPage .kanban-card-title {
  min-width: 0;
  padding-right: 42px;
  color: var(--kanban-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.32;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#kanbanPage .kanban-card-seq {
  margin-right: 5px;
  color: var(--kanban-soft);
  font-family: monospace;
  font-size: 11px;
  font-weight: 600;
}

#kanbanPage .kanban-card-footer {
  padding-top: 2px;
  gap: 6px;
}

#kanbanPage .kanban-card-assignee {
  max-width: 100%;
  min-width: 0;
  color: var(--kanban-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#kanbanPage .assignee-dot {
  color: #11110f;
}

#kanbanPage .kanban-card-due {
  margin-left: 0;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--kanban-muted);
  font-weight: 600;
}

#kanbanPage .kanban-card-labels {
  margin-top: 8px;
  gap: 5px;
}

#kanbanPage .kanban-card-label-pill {
  border-radius: 999px;
  padding: 2px 7px;
  background: color-mix(in srgb, var(--label-color) 18%, var(--kanban-panel-2));
  color: var(--kanban-text);
}

#kanbanPage .kanban-card-actions {
  top: 7px;
  right: 7px;
  opacity: 1;
}

#kanbanPage .card-breakdown-btn {
  border-radius: 8px;
  background: rgba(242, 163, 58, 0.1);
  border-color: rgba(242, 163, 58, 0.26);
  color: var(--kanban-accent);
}

#kanbanPage .kanban-card-aging-badge {
  right: 57px;
  top: 13px;
}

#kanbanPage .kanban-embedded-subtasks {
  margin-top: 11px;
  padding-top: 9px;
}

#kanbanPage .kanban-embedded-subtask {
  background: rgba(255, 255, 255, 0.045);
  border-radius: 8px;
  color: var(--kanban-muted);
}

#kanbanPage .kanban-col[data-status="done"] .kanban-card {
  min-height: 92px;
  padding-top: 10px;
  padding-bottom: 38px;
  background: var(--kanban-panel-3);
}

#kanbanPage .kanban-col[data-status="done"] .kanban-card-project {
  max-width: calc(100% - 54px);
  margin-bottom: 4px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--kanban-soft);
}

#kanbanPage .kanban-col[data-status="done"] .kanban-card-title {
  font-size: 13px;
  font-weight: 500;
}

#kanbanPage .kanban-col[data-status="done"] .card-breakdown-btn {
  background: transparent;
  border-color: var(--kanban-border);
  color: var(--kanban-accent);
}

#kanbanPage .kanban-swimlane-board {
  height: auto;
  min-height: 0;
}

#kanbanPage .kanban-swimlane {
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--kanban-border);
  border-radius: 8px;
  background: var(--kanban-panel);
}

#kanbanPage .kanban-swimlane-header {
  top: 0;
  height: 48px;
  margin: -4px -2px 8px;
  padding: 0 4px;
  background: transparent;
}

#kanbanPage .kanban-swimlane-body {
  grid-template-columns: repeat(4, minmax(220px, 1fr));
}

#kanbanPage .kanban-swimlane-col-header {
  min-height: 36px;
  padding: 9px 10px 5px;
  color: var(--kanban-muted);
}

@media (max-width: 1100px) and (min-width: 641px) {
  #kanbanPage .kanban-toolbar {
    grid-template-columns: auto minmax(180px, 1fr) auto minmax(160px, 1fr);
  }

  #kanbanPage .kanban-quick-filters {
    grid-column: 1 / -1;
  }

  #kanbanPage .kanban-owner-filter {
    justify-self: start;
  }

  #kanbanPage .kanban-board,
  #kanbanPage .kanban-swimlane-body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    height: auto;
    min-height: 0;
  }

  #kanbanPage #kanbanBoard .kanban-col-body {
    max-height: none;
  }

  #kanbanPage .kanban-col,
  #kanbanPage .kanban-swimlane-col {
    min-height: 220px;
  }

  #kanbanPage .kanban-col.is-empty,
  #kanbanPage .kanban-swimlane-col.is-empty {
    min-height: 0;
  }

  #kanbanPage .kanban-col.is-empty .kanban-col-body,
  #kanbanPage .kanban-swimlane-col.is-empty .kanban-swimlane-col-body {
    padding: 8px;
  }

  #kanbanPage .kanban-col.is-empty .kanban-column-empty,
  #kanbanPage .kanban-swimlane-col.is-empty .kanban-column-empty {
    min-height: 56px;
  }
}

@media (max-width: 640px) {
  #kanbanPage {
    gap: 12px;
  }

  /* Segmented status tabs replace the long 4-column stack on mobile. Five tabs
     (planned/in_progress/waiting/done/all) cannot fit a 390px row without
     clipping, so they wrap onto two rows and share width evenly — no offscreen
     content or hidden labels (QA gate F3). Counts mirror the column headers. */
  #kanbanMobileTabs:not([hidden]) {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px;
    margin-bottom: 10px;
    background: var(--bg-input);
    border-radius: var(--radius-md);
  }
  #kanbanMobileTabs::-webkit-scrollbar { display: none; }
  /* id-scoped so it beats the later unconditional .kanban-mobile-tab guardrail
     block; let each tab grow to share the row and never overflow the viewport. */
  #kanbanMobileTabs .kanban-mobile-tab {
    flex: 1 1 auto;
    min-width: calc(33.333% - 6px);
    white-space: nowrap;
  }
  .kanban-mobile-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    min-height: 44px;
    padding: 6px 14px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition), color var(--transition);
  }
  .kanban-mobile-tab.active {
    background: var(--bg-card);
    color: var(--text);
    box-shadow: var(--shadow-sm);
  }
  .kanban-mobile-tab-count {
    font-size: 11px;
    font-weight: 700;
    background: var(--bg-card);
    color: var(--text-secondary);
    border-radius: 10px;
    padding: 1px 7px;
    min-width: 20px;
    text-align: center;
  }
  .kanban-mobile-tab.active .kanban-mobile-tab-count {
    background: var(--accent-soft);
    color: var(--accent);
  }
  /* When a single status is selected, collapse the board to just that column.
     data-mobile-status="all" leaves every column visible (the stacked view). */
  #kanbanBoard[data-mobile-status="planned"] .kanban-col:not([data-status="planned"]),
  #kanbanBoard[data-mobile-status="in_progress"] .kanban-col:not([data-status="in_progress"]),
  #kanbanBoard[data-mobile-status="waiting"] .kanban-col:not([data-status="waiting"]),
  #kanbanBoard[data-mobile-status="done"] .kanban-col:not([data-status="done"]) {
    display: none;
  }

  /* Mobile toolbar: one "Label: [control]" pair per row (auto label column +
     fluid control column). The filter labels stay VISIBLE and readable here --
     an earlier build visually-hid them (sr-only) to save fold height, but a
     content-aware visual QA reads a 1px-wide clipped label as a defect. Keeping
     the label inline with its control adds no extra row height (the 44px control
     drives the row), so the board's first card still clears the fold. */
  #kanbanPage .kanban-toolbar {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 6px 10px;
    padding: 10px;
  }

  #kanbanPage .kanban-toolbar .kanban-filter-label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: nowrap;
    justify-self: start;
    align-self: center;
    font-size: 11px;
  }

  #kanbanPage .kanban-quick-filters {
    min-height: 46px;
    grid-column: 1 / -1;
  }

  #kanbanPage .kanban-owner-filter {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: center;
  }

  #kanbanPage .kanban-board,
  #kanbanPage .kanban-swimlane-body {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
    gap: 12px;
  }

  #kanbanPage #kanbanBoard .kanban-col-body {
    max-height: none;
  }

  #kanbanPage .kanban-col,
  #kanbanPage .kanban-swimlane-col {
    min-height: 132px;
  }

  #kanbanPage .kanban-col-body,
  #kanbanPage .kanban-swimlane-col-body {
    padding: 10px;
  }

  #kanbanPage .kanban-column-empty {
    min-height: 74px;
  }

  #kanbanPage .kanban-col.is-empty .kanban-col-body,
  #kanbanPage .kanban-swimlane-col.is-empty .kanban-swimlane-col-body {
    padding: 6px;
  }

  #kanbanPage .kanban-col.is-empty .kanban-column-empty,
  #kanbanPage .kanban-swimlane-col.is-empty .kanban-column-empty {
    min-height: 42px;
    padding: 8px;
  }

  #kanbanPage .kanban-card-title {
    font-size: 13px;
  }

  /* Keep the board's first card above the fold on mobile: compact the R5
     pipeline deck. Its per-status legend duplicates the counts already shown
     by the mobile status tabs directly below, so it is hidden here to reclaim
     vertical space (the colored bar still conveys the distribution). Scoped to
     #kanbanDeck so the shared .r5-deck on Activity/Token stays intact. */
  #kanbanDeck .r5-deck {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 8px;
    column-gap: 10px;
    padding: 10px 12px;
    margin-bottom: 10px;
  }
  /* Total sits inline (number + caption) and pushes the compact KPIs to the
     right of the same row instead of stacking, so lead + KPIs share one row. */
  #kanbanDeck .r5-deck-lead {
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    margin-right: auto;
  }
  #kanbanDeck .r5-deck-total { font-size: 22px; }
  /* Distribution bar spans full width on its own row below the summary. */
  #kanbanDeck .r5-deck-main { min-width: 100%; order: 3; gap: 8px; }
  #kanbanDeck .r5-deck-legend { display: none; }
  /* Inline KPIs (value + caption side by side) keep WIP / Waiting / Aging
     visible while collapsing the deck ~60px, lifting the first board card back
     above the mobile fold (QA smoke: "kanban board layout stays usable"). */
  #kanbanDeck .r5-deck-kpis { gap: 6px; flex-wrap: nowrap; }
  #kanbanDeck .r5-kpi {
    flex-direction: row;
    align-items: baseline;
    gap: 5px;
    padding: 3px 9px;
    min-width: 0;
  }
  #kanbanDeck .r5-kpi-val { font-size: 16px; }
  #kanbanDeck .r5-kpi-cap { font-size: 10px; }
}

.page-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* === Agent Grid === */
.agents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

/* === Agent Card === */
.agent-card {
  display: flex;
  flex-direction: column;
  padding: 24px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition);
  min-height: 180px;
}
.agent-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.agent-card-top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 12px;
}

.agent-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 22px;
  font-weight: 600;
  color: var(--accent);
  flex-shrink: 0;
}
.agent-avatar.gradient-1 { background: linear-gradient(135deg, rgba(217,119,87,0.15), rgba(217,119,87,0.35)); }
.agent-avatar.gradient-2 { background: linear-gradient(135deg, rgba(106,155,204,0.15), rgba(106,155,204,0.35)); color: var(--info); }
.agent-avatar.gradient-3 { background: linear-gradient(135deg, rgba(120,140,93,0.15), rgba(120,140,93,0.35)); color: var(--success); }
.agent-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.agent-card-info {
  flex: 1;
  min-width: 0;
}

.agent-name {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.agent-desc {
  font-size: 13px;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

.agent-card-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
}

.agent-model-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: var(--bg-input);
  color: var(--text-secondary);
}
.agent-model-badge.opus { background: rgba(217,119,87,0.12); color: var(--badge-accent-text); }
.agent-model-badge.sonnet { background: var(--info-soft); color: var(--badge-info-text); }
.agent-model-badge.haiku { background: var(--success-soft); color: var(--badge-success-text); }
.agent-activity-badge { font-size: 11px; padding: 2px 7px; }

/* === Per-agent tmux attach copy buttons (running agents only) === */
.agent-tmux-cmds {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.tmux-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 44px;
  min-height: 44px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  color: var(--text-muted);
  background: var(--bg-input);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.tmux-copy-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.tmux-copy-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.tmux-copy-btn.copied {
  color: var(--success);
  border-color: var(--success);
}
.tmux-copy-ico {
  font-size: 12px;
  line-height: 1;
}

.marveen-card { border-left: 3px solid var(--accent); }
.marveen-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--badge-accent-text);
  background: var(--accent-soft);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
}

/* === Telegram status dot === */
.tg-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  margin-left: auto;
}
.tg-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.tg-dot.connected { background: var(--success); }
.tg-dot.disconnected { background: var(--text-muted); }

/* === Process status === */
.process-indicator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-muted);
}
.process-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.process-dot.running {
  background: var(--success);
  box-shadow: 0 0 6px rgba(120, 140, 93, 0.6);
  animation: pulse-dot 2s ease-in-out infinite;
}
.process-dot.stopped { background: var(--text-muted); }
.process-dot.restarting {
  background: var(--warning, #d4a52c);
  box-shadow: 0 0 6px rgba(212, 165, 44, 0.6);
  animation: pulse-dot 1s ease-in-out infinite;
}

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

.agent-process-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  background: var(--bg-input);
  border-radius: var(--radius);
  margin-top: 20px;
  flex-wrap: wrap;
  gap: 12px;
}
.process-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
}
.process-uptime {
  font-size: 12px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
}
.process-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* === Add Card === */
.add-card {
  border: 2px dashed var(--border);
  background: transparent;
  color: var(--text-muted);
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  font-family: inherit;
}
.add-card:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.add-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bg-input);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}
.add-card:hover .add-icon { background: var(--accent-soft); }

/* === Wizard === */
.wizard-steps {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}
.wizard-step {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--border);
  transition: background var(--transition);
}
.wizard-step.active { background: var(--accent); }
.wizard-step.done { background: var(--success); }

.wizard-panel[hidden] { display: none; }

.wizard-generating {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
}
.wizard-spinner-wrap {
  margin-bottom: 20px;
}
.wizard-spin {
  width: 36px;
  height: 36px;
  border-width: 3px;
  border-color: var(--border);
  border-top-color: var(--accent);
}
.wizard-gen-status {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
}
.wizard-gen-sub {
  font-size: 13px;
  color: var(--text-muted);
}

.wizard-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 8px;
}
.wizard-actions .btn-secondary { width: auto; }

.code-textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text);
  resize: vertical;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.code-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* === Agent Detail Modal ===
   Needs a compound selector (`.modal.modal-agent-detail`) to outrank
   the later `.modal { max-width: 480px; }` rule below -- otherwise
   source order wins and the detail modal stays at 480px. */
.modal.modal-agent-detail {
  max-width: 900px;
}
/* At narrower widths, the five-tab nav still wouldn't fit -- tighten
   the tab paddings so everything stays on one row. The outer modal
   padding also drops a bit so the tab row actually has room. */
.modal.modal-agent-detail .tab-nav { padding: 0 16px; }
.modal.modal-agent-detail .tab-btn { padding: 12px 10px; }

/* === Tab Navigation === */
.tab-nav {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
  padding: 0 24px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.tab-btn {
  padding: 12px 16px;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all var(--transition);
  white-space: nowrap;
  flex-shrink: 0;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.tab-panel { padding: 0 24px 24px; }
.tab-panel[hidden] { display: none; }

/* === Agent Overview === */
.agent-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 20px;
}
.agent-overview-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: var(--bg-input);
  border-radius: var(--radius-sm);
}

/* === Agent Settings === */
.agent-save-section {
  margin-top: 8px;
  margin-bottom: 20px;
}

/* === Telegram Tab === */
.tg-instructions {
  margin-bottom: 20px;
}
.tg-instructions h4 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 12px;
}
.tg-instructions ol {
  padding-left: 20px;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.8;
}
.tg-instructions code {
  background: var(--bg-code);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
}

.tg-connected-info {
  margin-bottom: 20px;
}
.tg-bot-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 500;
}
.tg-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--warning) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning) 24%, transparent);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.tg-notice svg { flex-shrink: 0; margin-top: 1px; color: var(--warning); }
.tg-notice code {
  background: var(--bg-code);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 12px;
}
.tg-notice-ok {
  background: rgba(120, 140, 93, 0.08);
  border-color: rgba(120, 140, 93, 0.2);
}
.tg-notice-ok svg { color: var(--success); }
.tg-notice-warn {
  background: rgba(200, 140, 40, 0.08);
  border-color: rgba(200, 140, 40, 0.3);
}
.tg-notice-warn svg { color: #c88c28; }

.tg-pairing-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.tg-pairing-section h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}
.tg-pairing-info {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
  line-height: 1.5;
}
.tg-pending-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tg-pending-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.tg-pending-code {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-weight: 600;
  color: var(--accent);
}
.tg-pending-sender {
  color: var(--text-muted);
  font-size: 12px;
}

.tg-connected-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.tg-allowed-section {
  margin-top: 16px;
}
.tg-allowed-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.tg-allowed-empty {
  font-size: 12px;
  color: var(--text-muted);
  padding: 8px 0;
  font-style: italic;
}
.tg-allowed-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.tg-allowed-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tg-allowed-kind {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 122, 255, 0.15);
  color: rgb(70, 140, 240);
  text-transform: uppercase;
}
.tg-allowed-kind-group {
  background: rgba(0, 168, 132, 0.15);
  color: rgb(40, 170, 130);
}
.tg-allowed-id {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 12px;
  color: var(--text);
}
.btn-icon-danger {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.15s ease;
}
.btn-icon-danger:hover {
  background: rgba(220, 60, 70, 0.1);
  color: rgb(230, 90, 100);
  border-color: rgba(220, 60, 70, 0.3);
}

/* === Skills Tab === */
.skill-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.skill-header h4 {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.skill-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.skill-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}
.skill-item:hover {
  background: var(--bg-card-hover);
}
.skill-item-info {
  flex: 1;
  min-width: 0;
}
.skill-item-name {
  font-size: 14px;
  font-weight: 500;
}
.skill-item-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
  background: var(--info-soft);
  color: var(--info);
}
.skill-item-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.skill-item-actions {
  flex-shrink: 0;
  margin-left: 12px;
}

.skill-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-muted);
  font-size: 14px;
}

.skill-create-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.skill-tab-btn {
  padding: 10px 16px;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all var(--transition);
}
.skill-tab-btn:hover { color: var(--text); }
.skill-tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.skill-tab-panel[hidden] { display: none; }

.file-upload-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 24px;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition);
  text-align: center;
  color: var(--text-muted);
}
.file-upload-area:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.file-upload-area p { font-size: 14px; }
.file-upload-area .hint { font-size: 12px; margin-top: 4px; }

/* === Agent detail bottom === */
.agent-detail-bottom {
  margin: 0 24px;
  padding-top: 16px;
  padding-bottom: 8px;
}

/* === Modal === */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 20, 19, 0.5);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease,
    backdrop-filter 0.25s ease;
}
.modal-overlay.active { opacity: 1; visibility: visible; pointer-events: auto; }

.modal {
  width: 90%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--bg-modal);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transform: translateY(20px) scale(0.97);
  transition: transform 0.25s ease;
}
.modal-overlay.active .modal { transform: translateY(0) scale(1); }

/* === Canonical modal size variants (design-system §2.8 / QA C9) ===
   Additive size-only variants on the shared .modal shell. New/consolidated
   modals should pick one of these instead of spawning a bespoke .modal-* shell;
   header/body/footer padding + close button come from the shell, never
   re-declared. .modal-wide is kept as a legacy alias of --lg during migration. */
.modal--sm { max-width: 420px; }
.modal--md { max-width: 480px; }
.modal--lg,
.modal-wide { max-width: 640px; }
.modal--full {
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: 100dvh;
  border-radius: 0;
  border: none;
}
/* Opt-in phone full-screen sheet: a modal marked .modal--full-mobile collapses
   to a full-screen sheet ≤768 (design-system §3). This is opt-in so existing
   bespoke modals keep their current mobile behavior until the card 09 modal
   consolidation pass migrates them — foundation only introduces the primitive. */
@media (max-width: 768px) {
  .modal.modal--full-mobile {
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    border: none;
  }
}

/* === Canonical modal shell (design-system §2.8 / QA C9) ===
   Single tokenized source of truth for header/title/close/body/footer shared by
   every generic .modal (and .modal-content). Previously these five selectors were
   ALSO redeclared globally further down (near .env-var-*), and by source order
   that later block silently won — so the intended 24px body / 20-24px header
   padding never rendered (16px 20px did) and close buttons drifted 45/46/47px.
   Those duplicates are now removed; bespoke content templates (.modal-kanban-detail,
   .modal-agent-detail, .terminal-modal, .conversation-modal) keep their own
   higher-specificity overrides. */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border);
}
.modal-header h2,
.modal-header h3,
.modal-header h4 {
  margin: 0;
  font-size: var(--font-size-lg-title);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.modal-close {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  font-size: 20px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.modal-close:hover { background: var(--danger); color: #fff; }

.modal-body { padding: var(--space-6); }

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border);
}

/* Keep the close control a 44px square touch target on coarse/narrow (block A
   defaults to a tighter 40px on desktop; the global `button` coarse-mirror only
   bumps height, leaving it non-square without this). */
@media (pointer: coarse), (max-width: 768px) {
  .modal-close { width: 44px; height: 44px; }
}

/* === Avatar Gallery === */
.avatar-gallery { margin-bottom: 20px; }
.form-label-sm {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-secondary);
}
.avatar-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
  padding: 4px;
}
.avatar-grid-item {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  overflow: hidden;
  transition: all var(--transition);
  background: var(--bg-input);
}
.avatar-grid-item:hover {
  border-color: var(--accent);
  transform: scale(1.05);
}
.avatar-grid-item.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.avatar-grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.avatar-change-btn {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--bg-modal);
  background: var(--accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition);
}
.avatar-change-btn:hover { background: var(--accent-hover); }

.detail-avatar-gallery {
  margin-bottom: 16px;
  padding: 12px 16px;
  background: var(--bg-input);
  border-radius: var(--radius);
}

.avatar-upload-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
  color: var(--text-muted);
  font-size: 12px;
}
.avatar-upload-divider::before,
.avatar-upload-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.avatar-upload-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.avatar-upload-zone:hover,
.avatar-upload-zone.drag-over {
  border-color: var(--accent);
  background: rgba(217,119,87,0.05);
}
.avatar-upload-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 13px;
}
.avatar-upload-preview {
  position: relative;
  display: inline-block;
}
/* The plain class rules above (display:flex/inline-block) outrank the UA
   [hidden]{display:none}, so toggling the `hidden` attribute had no effect.
   Re-assert it with attribute+class specificity for both upload zones. */
.avatar-upload-content[hidden],
.avatar-upload-preview[hidden] {
  display: none;
}
.avatar-upload-preview img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}
.avatar-preview-clear {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--danger);
  color: #fff;
  border: none;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* === Form === */
.form-group { margin-bottom: 18px; }

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-secondary);
}
.hint { font-weight: 400; color: var(--text-muted); }

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  transition: all var(--transition);
  outline: none;
}
/* Checkbox/radio inputs must not inherit the width:100% + padding meant for
   text fields -- inside a flex label that stretches the box to full width and
   shoves the adjacent label text out past the modal's right edge ("content
   sticking out of the modal" bug, e.g. the agent-detail Csapat tab). */
.form-group input[type="checkbox"],
.form-group input[type="radio"] {
  width: auto;
  flex: 0 0 auto;
  padding: 0;
  margin: 0;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-group textarea { resize: vertical; }

/* App-wide control skin. Native white form controls in dark mode make the
   operational pages look unfinished; force the dashboard surface everywhere. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea,
select,
.input,
.input-compact,
.naplo-date,
.naplo-search,
.mem-search,
.mem-search-mode,
.mem-agent-filter,
.recall-search,
.recall-date,
.recall-expr,
.recall-agent-filter,
.vault-search,
.chat-compose-input {
  min-width: 0;
  min-height: var(--control-min);
  background: color-mix(in srgb, var(--bg-input) 88%, var(--bg-card) 12%);
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--border) 86%, var(--text) 14%);
  border-radius: var(--radius-sm);
  color-scheme: light;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
}

[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .input,
[data-theme="dark"] .input-compact,
[data-theme="dark"] .naplo-date,
[data-theme="dark"] .naplo-search,
[data-theme="dark"] .mem-search,
[data-theme="dark"] .mem-search-mode,
[data-theme="dark"] .mem-agent-filter,
[data-theme="dark"] .recall-search,
[data-theme="dark"] .recall-date,
[data-theme="dark"] .recall-expr,
[data-theme="dark"] .recall-agent-filter,
[data-theme="dark"] .vault-search,
[data-theme="dark"] .chat-compose-input {
  background: color-mix(in srgb, var(--bg-input) 74%, #111 26%);
  color: var(--text);
  border-color: color-mix(in srgb, var(--border) 78%, #fff 8%);
  color-scheme: dark;
}

input::placeholder,
textarea::placeholder {
  color: color-mix(in srgb, var(--text-muted) 88%, transparent);
  opacity: 1;
}

input:not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus,
select:focus,
.input:focus,
.input-compact:focus,
.naplo-date:focus,
.naplo-search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

[data-theme="dark"] input::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(0.72);
}

/* === Buttons === */
.btn-primary {
  width: 100%;
  padding: 12px;
  min-height: 44px;
  box-sizing: border-box;
  /* Glassy-dark accent-glow primary (design bible §Buttons): blue-cyan
     gradient fill, dark readable label, restrained glow. Replaces the old
     harsh saturated-blue + white text (which also failed WCAG AA). */
  background: linear-gradient(135deg, var(--gd-accent-blue) 0%, var(--gd-accent) 100%);
  color: #04131f;
  border: 1px solid var(--gd-border-strong);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition);
  margin-top: 8px;
  box-shadow: 0 10px 24px rgba(96, 165, 250, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.btn-primary:hover {
  opacity: 1;
  background: linear-gradient(135deg, #7cb8fb 0%, #8beef9 100%);
  border-color: var(--gd-border-strong);
  box-shadow: var(--gd-glow-blue), 0 10px 26px rgba(96, 165, 250, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.32);
}
.btn-primary:focus-visible {
  outline: none;
  box-shadow: var(--gd-focus-ring), 0 10px 24px rgba(96, 165, 250, 0.20);
}
.btn-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-compact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  padding: 10px 20px;
  font-size: 14px;
  margin-top: 0;
  white-space: nowrap;
}

.btn-secondary {
  padding: 10px 20px;
  background: color-mix(in srgb, var(--bg-input) 82%, var(--bg-card) 18%);
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--border) 84%, var(--text) 12%);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition);
}
.btn-secondary:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--text);
  background: color-mix(in srgb, var(--accent-soft) 58%, var(--bg-input) 42%);
}
.btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  color: var(--text-muted);
}

.btn-danger {
  padding: 10px 20px;
  /* Muted glass destructive (design bible §Buttons): red-tinted glass, not
     neon. Readable light-red label, hairline red border. */
  background: linear-gradient(180deg, rgba(248, 113, 113, 0.16), rgba(248, 113, 113, 0.08));
  color: #fca5a5;
  border: 1px solid rgba(248, 113, 113, 0.42);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition);
}
.btn-danger:hover {
  background: linear-gradient(180deg, rgba(248, 113, 113, 0.30), rgba(248, 113, 113, 0.16));
  border-color: rgba(248, 113, 113, 0.62);
  color: #fee2e2;
  box-shadow: 0 0 22px rgba(248, 113, 113, 0.20);
}

/* === Detail === */
.detail-top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.detail-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  font-size: 24px;
  font-weight: 600;
  color: var(--accent);
}
.detail-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-info h3 { font-size: 18px; font-weight: 600; }
.detail-info p { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }

.detail-section { margin-bottom: 24px; }
.detail-section h4 {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.code-block {
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 12px;
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
}

.detail-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* === Kanban card detail redesign === */
.modal.modal-kanban-detail {
  --detail-bg: var(--bg-modal);
  --detail-panel: var(--bg-card);
  --detail-panel-2: var(--surface-2);
  --detail-border: color-mix(in srgb, var(--border) 86%, transparent);
  --detail-border-strong: color-mix(in srgb, var(--border) 72%, var(--text) 10%);
  --detail-text: var(--text);
  --detail-muted: var(--text-secondary);
  --detail-soft: var(--text-muted);
  --detail-accent: var(--accent);
  width: min(980px, calc(100vw - 32px));
  max-width: 980px;
  max-height: min(92dvh, 940px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg, var(--detail-panel-2) 0, var(--detail-bg) 240px),
    var(--detail-bg);
  border-color: var(--detail-border-strong);
  color: var(--detail-text);
  color-scheme: light;
}

[data-theme="dark"] .modal.modal-kanban-detail {
  --detail-bg: #000000;
  --detail-panel: #0b0d10;
  --detail-panel-2: #111318;
  --detail-border: rgba(198, 204, 213, 0.16);
  --detail-border-strong: rgba(198, 204, 213, 0.26);
  --detail-text: #f5f7fa;
  --detail-muted: #c6ccd5;
  --detail-soft: #8b949e;
  --detail-accent: #60a5fa;
  color-scheme: dark;
}

.modal.modal-kanban-detail .modal-header {
  position: sticky;
  top: 0;
  z-index: 4;
  flex: 0 0 auto;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px 14px;
  border-bottom-color: var(--detail-border);
  background: color-mix(in srgb, var(--detail-panel) 94%, transparent);
  backdrop-filter: blur(10px);
}

.modal.modal-kanban-detail .modal-header h2 {
  min-width: 0;
  max-width: calc(100% - 56px);
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.2;
  color: var(--detail-text);
  overflow-wrap: anywhere;
}

.modal.modal-kanban-detail .modal-close {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--detail-muted);
  border: 1px solid var(--detail-border);
}

.modal.modal-kanban-detail .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 20px 104px;
  background: transparent;
  scrollbar-gutter: stable;
}

.modal.modal-kanban-detail .modal-body::-webkit-scrollbar,
.modal.modal-kanban-detail .comments-list::-webkit-scrollbar {
  width: 10px;
}

.modal.modal-kanban-detail .modal-body::-webkit-scrollbar-thumb,
.modal.modal-kanban-detail .comments-list::-webkit-scrollbar-thumb {
  background: rgba(232, 226, 211, 0.22);
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

.card-detail-summary,
.card-detail-section {
  border: 1px solid var(--detail-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--detail-panel) 88%, transparent);
}

.card-detail-summary {
  padding: 12px;
  margin-bottom: 12px;
}

.modal-kanban-detail .card-detail-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 0;
}

.card-detail-chip,
.modal-kanban-detail #parentMetaItem {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 9px 10px;
  border: 1px solid var(--detail-border);
  border-radius: 8px;
  background: var(--detail-panel-2);
}

.card-detail-chip .meta-label,
.modal-kanban-detail #parentMetaItem .meta-label {
  color: var(--detail-soft);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-transform: uppercase;
}

.card-detail-chip .meta-value {
  min-width: 0;
  color: var(--detail-text);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.card-detail-chip-id {
  grid-column: span 2;
}

.card-detail-mono {
  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace;
}

.card-detail-status,
.card-detail-priority {
  width: fit-content;
  max-width: 100%;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(242, 163, 58, 0.12);
  color: var(--detail-text);
}

.meta-value-editable {
  cursor: pointer;
  border-bottom: 1px dashed rgba(242, 163, 58, 0.48);
}

.card-detail-parent {
  margin-top: 8px;
}

.card-detail-section {
  padding: 14px;
  margin-bottom: 12px;
}

.card-detail-section h4,
.modal-kanban-detail #cardChildrenSection h4 {
  margin: 0 0 10px;
  color: var(--detail-text);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-transform: uppercase;
}

.modal-kanban-detail .card-detail-desc {
  max-height: 30dvh;
  margin: 0;
  padding: 12px;
  overflow: auto;
  border: 1px solid var(--detail-border);
  border-radius: 8px;
  background: var(--detail-panel-2);
  color: var(--detail-muted);
  font-size: 14px;
  line-height: 1.62;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.modal-kanban-detail .card-detail-desc:empty {
  display: none;
}

.modal-kanban-detail .card-detail-description-section:has(.card-detail-desc:empty) {
  display: none;
}

.modal-kanban-detail .label-pill-list {
  gap: 7px;
  min-height: 0;
}

.modal-kanban-detail .label-pill,
.modal-kanban-detail .kanban-card-label-pill {
  min-height: 28px;
  border-radius: 999px;
  padding: 4px 9px;
  line-height: 1.2;
}

.modal-kanban-detail .label-pill-remove {
  min-width: 34px;
  min-height: 34px;
  border-radius: 999px;
}

.card-detail-add-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

.card-detail-control,
.modal-kanban-detail .comment-author-select {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 9px 11px;
  border: 1px solid var(--detail-border-strong);
  border-radius: 8px;
  background: #11110f;
  color: var(--detail-text);
  font: inherit;
  font-size: 13px;
  outline: none;
}

.card-detail-inline-select {
  min-height: 36px;
}

.modal-kanban-detail .comments-list {
  max-height: 260px;
  min-height: 0;
  margin-bottom: 12px;
  padding-right: 2px;
  gap: 8px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.modal-kanban-detail .comment-item {
  border: 1px solid var(--detail-border);
  border-left: 3px solid var(--detail-accent);
  border-radius: 8px;
  background: var(--detail-panel-2);
}

.comment-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.modal-kanban-detail .comment-author {
  min-width: 0;
  color: var(--detail-text);
  overflow-wrap: anywhere;
}

.modal-kanban-detail .comment-date {
  flex: 0 0 auto;
  margin-left: 0;
}

.modal-kanban-detail .comment-body {
  color: var(--detail-muted);
  line-height: 1.52;
  overflow-wrap: anywhere;
}

.card-detail-empty {
  padding: 12px;
  border: 1px dashed var(--detail-border);
  border-radius: 8px;
  color: var(--detail-muted);
  background: rgba(255, 255, 255, 0.04);
  font-size: 13px;
  text-align: center;
}

.modal-kanban-detail .comment-form {
  padding: 12px;
  border: 1px solid var(--detail-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.modal-kanban-detail .comment-form .form-row {
  min-width: 0;
}

.modal-kanban-detail .comment-form .form-group {
  min-width: 0;
  margin-bottom: 10px;
}

.modal-kanban-detail .comment-form textarea {
  min-height: 92px;
  resize: vertical;
}

.modal-kanban-detail #newSubtaskTitle {
  min-height: 48px;
}

.card-detail-comment-actions {
  display: grid;
  grid-template-columns: auto minmax(150px, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.card-detail-comment-actions label {
  color: var(--detail-muted);
  font-size: 12px;
  font-weight: 700;
}

.card-detail-subtask-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
}

.card-detail-subtask-info {
  flex: 1 1 auto;
  min-width: 0;
}

.card-detail-subtask-title {
  color: var(--detail-text);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.card-detail-subtask-status,
.card-detail-subtask-meta {
  color: var(--detail-muted);
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.card-detail-actions {
  position: sticky;
  bottom: -104px;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 8px;
  margin: 16px -20px -104px;
  padding: 12px 20px;
  border-top: 1px solid var(--detail-border);
  background: color-mix(in srgb, var(--detail-bg) 94%, transparent);
  backdrop-filter: blur(10px);
}

.card-detail-actions .btn-secondary,
.card-detail-actions .btn-danger {
  min-height: 48px;
  width: auto;
  justify-content: center;
  white-space: nowrap;
}

.modal-kanban-detail button,
.modal-kanban-detail .btn-compact {
  box-sizing: border-box;
  height: auto;
  min-height: 48px;
  line-height: 1.2;
  padding-top: 10px;
  padding-bottom: 10px;
}

.modal-kanban-detail .btn-secondary {
  border-color: var(--detail-border-strong);
  background: rgba(255, 255, 255, 0.06);
  color: var(--detail-text);
}

.modal-kanban-detail .btn-primary {
  border-color: color-mix(in srgb, var(--detail-accent) 72%, #fff 12%);
  background: linear-gradient(180deg, var(--detail-accent), color-mix(in srgb, var(--detail-accent) 72%, #000 28%));
  color: #fff;
}

.modal-kanban-detail .btn-danger {
  background: linear-gradient(180deg, rgba(248, 113, 113, 0.18), rgba(248, 113, 113, 0.09));
  color: #fecaca;
  border: 1px solid rgba(248, 113, 113, 0.46);
}

@media (max-width: 760px) {
  .modal.modal-kanban-detail {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
  }

  .modal.modal-kanban-detail .modal-header {
    padding: 14px 14px 12px;
  }

  .modal.modal-kanban-detail .modal-body {
    padding: 12px 12px 124px;
  }

  .modal-kanban-detail .card-detail-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .modal-kanban-detail .card-detail-desc {
    max-height: 22dvh;
  }

  .card-detail-chip-id {
    grid-column: 1 / -1;
  }

  .card-detail-add-row,
  .card-detail-comment-actions {
    grid-template-columns: 1fr;
  }

  .card-detail-add-row .btn-compact,
  .card-detail-comment-actions .btn-compact,
  .card-detail-subtask-item .btn-compact {
    width: 100%;
    min-height: 48px;
  }

  .card-detail-subtask-item {
    align-items: stretch;
    flex-direction: column;
  }

  .card-detail-actions {
    grid-template-columns: 1fr 1fr;
    bottom: -124px;
    margin: 14px -12px -124px;
    padding: 10px 12px;
  }

  .card-detail-actions .btn-secondary,
  .card-detail-actions .btn-danger {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 430px) {
  .modal.modal-kanban-detail {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }

  .modal.modal-kanban-detail .modal-body {
    padding-bottom: 12px;
  }

  .modal-kanban-detail .card-detail-meta,
  .card-detail-actions {
    grid-template-columns: 1fr;
  }

  .modal-kanban-detail .card-detail-actions {
    position: static;
    bottom: auto;
    margin: 14px 0 0;
    padding: 12px;
    border: 1px solid var(--detail-border);
    border-radius: 8px;
    background: var(--detail-panel);
    backdrop-filter: none;
  }

  .modal-kanban-detail .comments-list {
    max-height: 220px;
  }

  .modal-kanban-detail .card-detail-desc {
    max-height: 20dvh;
  }
}

/* Keep the Kanban detail actions in the document flow. The earlier sticky
   footer used negative margins and could overlap the subtask controls on
   tablet/mobile viewports, making the modal look broken and hard to tap. */
.modal-kanban-detail .card-detail-actions {
  position: static;
  bottom: auto;
  margin: 14px 0 0;
  padding: 12px;
  border: 1px solid var(--detail-border);
  border-radius: 8px;
  background: var(--detail-panel);
  backdrop-filter: none;
}

.modal.modal-kanban-detail .modal-body {
  padding-bottom: 16px;
}

@media (max-width: 760px) {
  .modal.modal-kanban-detail .modal-body {
    padding-bottom: 12px;
  }

  .modal-kanban-detail .card-detail-actions {
    margin: 12px 0 0;
  }
}

/* === Spinner === */
.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}
[data-theme="dark"] .btn-primary .spinner {
  border-color: rgba(20,20,19,0.3);
  border-top-color: #111827;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* === Toast === */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  padding: 12px 24px;
  background: var(--text);
  color: var(--bg);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.3s ease, opacity 0.2s ease, visibility 0.2s ease;
  z-index: 1100;
  white-space: nowrap;
}
.toast.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  visibility: visible;
}

/* === Tasks === */
.tasks-empty {
  text-align: center;
  padding: 64px 24px;
  color: var(--text-muted);
}
.tasks-empty svg { margin-bottom: 16px; opacity: 0.4; }
.tasks-empty p { font-size: 15px; }
.text-muted { font-size: 13px !important; margin-top: 4px; }

.tasks-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.task-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition);
}
.task-row:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.task-status { flex-shrink: 0; }

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  /* Consistent glassy-dark badge chip: a state-tinted hairline (derived from
     the badge's own text color) + subtle top-edge highlight unify every
     status badge (COLD/HOT/WARM/SHARED/ACTIVE/HEARTBEAT/PAUSED/RESOLVED)
     into one glass-chip family over their soft translucent fills. */
  border: 1px solid color-mix(in srgb, currentColor 34%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.badge-active {
  background: var(--success-soft);
  color: var(--badge-success-text);
}
.badge-paused {
  background: color-mix(in srgb, var(--warning) 14%, transparent);
  color: var(--badge-warning-text);
}
.badge-heartbeat {
  background: var(--danger-soft);
  color: var(--badge-danger-text);
}

.task-info {
  flex: 1;
  min-width: 0;
}

.task-prompt {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

.task-schedule {
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.task-schedule-cron {
  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace;
  background: var(--bg-input);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
}

.task-next {
  color: var(--text-muted);
}

.task-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity var(--transition);
}
.task-row:hover .task-actions { opacity: 1; }

.btn-icon {
  min-width: 44px;
  width: 44px;
  min-height: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  font-size: 14px;
  cursor: pointer;
  transition: all var(--transition);
  color: var(--text-secondary);
}
.btn-icon:hover { background: var(--accent-soft); color: var(--accent); }
.btn-icon-danger:hover { background: rgba(191, 77, 67, 0.1); color: var(--danger); }

/* === Task detail === */
.task-detail-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.meta-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.meta-value {
  font-size: 13px;
  color: var(--text-secondary);
}
.meta-value-editable {
  cursor: pointer;
  border-bottom: 1px dashed var(--border);
}
.meta-value-editable:hover {
  color: var(--text);
}
.meta-value-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.meta-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg-elevated, rgba(255, 165, 0, 0.15));
  border: 1px solid var(--border, rgba(255, 165, 0, 0.4));
  border-radius: 4px;
}
.meta-badge[hidden] { display: none; }

.task-detail-result {
  margin-bottom: 20px;
}
.task-detail-result label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.task-detail-result .code-block {
  max-height: 200px;
  overflow-y: auto;
}

.task-detail-buttons {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}
.task-detail-buttons .btn-primary { width: auto; }

/* === Checkbox === */
.form-check {
  margin-bottom: 18px;
}
.check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
  color: var(--text-secondary);
}
.check-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* === Memory page === */
/* === Memory Stats === */
.mem-stats {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.stat-card {
  flex: 1;
  min-width: 100px;
  padding: 16px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
}
.stat-value {
  font-size: 24px;
  font-weight: 600;
  color: var(--accent);
  line-height: 1.2;
}
.stat-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

/* === Memory Toolbar === */
.mem-toolbar {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.mem-search-wrap {
  flex: 1;
  min-width: 200px;
  position: relative;
}
.mem-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}
.mem-search {
  width: 100%;
  padding: 10px 14px 10px 40px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  outline: none;
  transition: all var(--transition);
}
.mem-search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.mem-agent-filter {
  padding: 8px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  outline: none;
}
.mem-search-mode {
  padding: 8px 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-family: inherit;
  color: var(--text);
  outline: none;
}

/* === Memory Tabs === */
.mem-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.mem-tab {
  padding: 10px 16px;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all var(--transition);
  white-space: nowrap;
}
.mem-tab:hover { color: var(--text); }
.mem-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.mem-tier-view[hidden], .mem-log-view[hidden], .mem-graph-view[hidden] { display: none; }

/* === Memory Graph === */
.mem-graph-view {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  height: 600px;
}
#memGraphCanvas {
  width: 100%;
  height: 100%;
  cursor: grab;
}
#memGraphCanvas:active { cursor: grabbing; }
.graph-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 14px;
}
.graph-empty[hidden] { display: none; }

/* === Graph Detail Panel === */
.graph-panel {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 300px;
  max-height: 420px;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 10;
  padding: 16px;
  animation: graphPanelIn 0.18s ease;
}
.graph-panel[hidden] { display: none; }
@keyframes graphPanelIn {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}
.graph-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.graph-panel-close {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
  transition: all var(--transition);
}
.graph-panel-close:hover {
  color: var(--text);
  background: var(--bg-input);
}
.graph-panel-content {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: 12px;
  max-height: 200px;
  overflow-y: auto;
  padding: 10px 12px;
  background: var(--bg-input);
  border-radius: var(--radius-sm);
}
.graph-panel-agent {
  font-size: 11px;
  color: var(--accent);
  font-weight: 600;
}
.graph-panel-date {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.graph-panel-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.graph-panel-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Graph zoom indicator */
.graph-zoom-indicator {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: 11px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.graph-zoom-indicator.visible { opacity: 1; }

/* Graph controls hint */
.graph-controls-hint {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 10px;
  color: var(--text-muted);
  z-index: 5;
  line-height: 1.6;
  opacity: 0.7;
  pointer-events: none;
}

/* === Tier Badges === */
.badge-hot { background: var(--danger-soft); color: var(--badge-danger-text); }
.badge-warm { background: color-mix(in srgb, var(--warning) 14%, transparent); color: var(--badge-warning-text); }
.badge-cold { background: var(--info-soft); color: var(--badge-info-text); }
.badge-shared { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--badge-warning-text); }

.mem-agent-badge {
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 1px 7px;
  border-radius: 4px;
  margin-left: 4px;
}

.mem-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.mem-keyword-tag {
  font-size: 10px;
  padding: 1px 7px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
}

/* === Memory List === */
.mem-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mem-item {
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all var(--transition);
  cursor: pointer;
}
.mem-item:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}
.mem-item.expanded .mem-content-full { display: block; }
.mem-item.expanded .mem-content-short { display: none; }

.mem-item-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.mem-date {
  font-size: 11px;
  color: var(--text-muted);
}

.mem-salience {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: auto;
  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
}

.mem-content-short,
.mem-content-full {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.mem-content-short {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mem-content-full {
  display: none;
  white-space: pre-wrap;
  word-break: break-word;
}

.mem-item-footer {
  display: none;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.mem-item.expanded .mem-item-footer { display: flex; }

.mem-empty, .log-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-muted);
}

/* === Daily Log === */
.log-date-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  margin-bottom: 20px;
}
.log-current-date {
  font-size: 16px;
  font-weight: 600;
  min-width: 140px;
  text-align: center;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  width: 44px;
  min-height: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  transition: all var(--transition);
}
.btn-icon:hover {
  background: var(--bg-input);
  border-color: var(--accent);
  color: var(--accent);
}

.log-entries {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.log-entry {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
}
.log-entry-time {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  white-space: nowrap;
  padding-top: 2px;
}
.log-entry-content {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  white-space: pre-wrap;
  flex: 1;
}

/* === Schedule View Toggle === */
.schedule-view-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
}
.view-btn {
  min-width: 44px;
  width: 44px;
  min-height: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
}
.view-btn:hover { color: var(--text); border-color: var(--accent); }
.view-btn.active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
#addScheduleBtn { min-height: 44px; }

/* Schedules header: segmented view switch + primary add action share a row and
   wrap together on narrow widths. The view buttons use the shared
   .segmented-control primitive (icon + label). */
.schedule-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.schedule-view-segmented > button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Operational-page QA gate requires >=44px tall controls at every viewport. */
  min-height: 44px;
}
.schedule-view-segmented > button > svg { flex: 0 0 auto; }

@media (max-width: 768px) {
  .schedule-header-actions {
    width: 100%;
    justify-content: space-between;
  }
  .schedule-view-segmented { flex: 1 1 auto; justify-content: center; }
}

/* Narrow phones: the 3-button segmented view switch cannot share a row with the
   Add action without clipping the rightmost option, so stack them — the switch
   takes a full row with equal-width buttons, the Add action a full row below
   (QA gate F2). */
@media (max-width: 560px) {
  .schedule-view-segmented {
    flex: 1 1 100%;
    width: 100%;
    display: flex;
  }
  .schedule-view-segmented > button {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding-inline: 8px;
  }
  #addScheduleBtn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

.schedule-view[hidden] { display: none; }

/* === Schedule List === */
.schedule-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pending-retries-banner {
  margin-bottom: 16px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid #e5a43a;
  border-radius: var(--radius);
}
.pending-retries-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.pending-retries-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.pending-retries-hint {
  font-size: 12px;
  color: var(--text-muted);
}
.pending-retries-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pending-retry-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
}
.pending-retry-info { flex: 1; min-width: 0; }
.pending-retry-title {
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pending-retry-meta {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  gap: 12px;
  margin-top: 3px;
  flex-wrap: wrap;
}

.schedule-section {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 4px 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}
.schedule-section:first-child { margin-top: 4px; }
.schedule-section-icon { font-size: 13px; }
.schedule-section-count {
  background: var(--bg-input);
  color: var(--text-muted);
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 600;
}
.schedule-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition);
}
.schedule-row:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.schedule-agent-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--accent-soft);
}
.schedule-agent-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.schedule-info {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.schedule-title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  overflow-wrap: anywhere;
}
.schedule-meta {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  overflow-wrap: anywhere;
}
.schedule-cron {
  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace;
  background: var(--bg-input);
  color: var(--text-secondary);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
}
.schedule-agent-name {
  color: var(--accent);
  font-weight: 500;
}

.schedule-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity var(--transition);
}
.schedule-row:hover .schedule-actions { opacity: 1; }

.schedule-empty {
  text-align: center;
  padding: 64px 24px;
  color: var(--text-muted);
}
.schedule-empty svg { margin-bottom: 16px; opacity: 0.4; }

/* === Prompt Expand === */
.prompt-expand-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.expand-questions {
  margin-top: 12px;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--bg-input);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.expand-questions[hidden] { display: none; }
.expand-questions:not([hidden]) { display: flex; }
.expand-question {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.expand-question-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.expand-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.expand-option {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: transparent;
  font-size: 12px;
  font-family: inherit;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition);
}
.expand-option:hover { border-color: var(--accent); color: var(--accent); }
.expand-option.selected {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}
.expand-apply-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

/* === Timeline View === */
.timeline-header {
  position: sticky;
  top: 64px;
  z-index: 5;
  background: var(--bg);
  padding-bottom: 8px;
}
.timeline-hours {
  display: flex;
  height: 32px;
  border-bottom: 1px solid var(--border);
  margin-left: 100px;
}
.timeline-hour {
  flex: 1;
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  border-left: 1px solid var(--border);
  padding-top: 8px;
  min-width: 0;
}
.timeline-hour:first-child { border-left: none; }

.timeline-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
}

.timeline-row {
  display: flex;
  align-items: center;
  height: 44px;
  position: relative;
}

.timeline-agent {
  width: 100px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding-right: 10px;
}
.timeline-agent-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--accent-soft);
}
.timeline-agent-avatar img { width: 100%; height: 100%; object-fit: cover; }
.timeline-agent-name {
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timeline-track {
  flex: 1;
  height: 100%;
  position: relative;
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  overflow: visible;
}

.timeline-marker {
  position: absolute;
  top: 6px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: visible;
  border: 2px solid var(--accent);
  background: var(--bg-card);
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
  z-index: 2;
}
.timeline-marker:hover {
  transform: scale(1.2);
  z-index: 100;
  box-shadow: 0 0 12px var(--accent-soft);
}
.timeline-marker img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.timeline-marker.disabled {
  border-color: var(--text-muted);
  opacity: 0.5;
}

.timeline-marker-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  background: var(--text);
  color: var(--bg);
  border-radius: 6px;
  font-size: 11px;
  white-space: nowrap;
  z-index: 10;
  pointer-events: none;
}
.timeline-marker-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--text);
}
.timeline-marker:hover .timeline-marker-tooltip { display: block; z-index: 101; }

.timeline-now {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--danger);
  pointer-events: none;
  z-index: 5;
  pointer-events: none;
}
.timeline-now::before {
  content: 'most';
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  color: var(--danger);
  font-weight: 600;
  white-space: nowrap;
}

/* === Week View === */
.week-grid {
  display: flex;
  gap: 4px;
  min-height: 300px;
}
.week-day {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-height: 200px;
  display: flex;
  flex-direction: column;
  flex: 0 0 48px;
  overflow: hidden;
  cursor: pointer;
  transition: flex var(--transition), border-color var(--transition);
}
.week-day.week-day-expanded {
  flex: 1 1 auto;
  cursor: default;
  min-width: 200px;
}
.week-day:not(.week-day-expanded):hover {
  border-color: var(--accent);
}
.week-day-today {
  border-color: var(--accent);
}
.week-day-header {
  padding: 10px 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  text-align: center;
  white-space: nowrap;
  flex-shrink: 0;
}
.week-day-expanded .week-day-header {
  padding: 10px 14px;
  font-size: 12px;
}
.week-day-today .week-day-header {
  color: var(--accent);
  background: var(--accent-soft);
}
.week-day-count {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  flex: 1;
}
.week-day-expanded .week-day-count { display: none; }
.week-day-count-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg-input);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}
.week-day-today .week-day-count-num {
  background: var(--accent-soft);
  color: var(--accent);
}
.week-day-tasks {
  display: none;
  flex: 1;
  position: relative;
  min-height: 400px;
}
.week-day-expanded .week-day-tasks { display: block; }

/* Hour grid lines inside expanded day */
.week-hour-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border);
  opacity: 0.4;
}
.week-hour-label {
  position: absolute;
  left: 4px;
  font-size: 9px;
  color: var(--text-muted);
  transform: translateY(-50%);
  font-family: 'JetBrains Mono', monospace;
}

.week-day-empty {
  flex: 1;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 13px;
  min-height: 400px;
}
.week-day-expanded .week-day-empty { display: flex; }

.week-task-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
  z-index: 2;
  min-height: 36px;
  box-shadow: var(--shadow-sm);
}
.week-task-card:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  z-index: 10;
  box-shadow: var(--shadow-md);
  transform: scale(1.02);
}
.week-task-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.week-task-avatar img { width: 100%; height: 100%; object-fit: cover; }
.week-task-info { min-width: 0; flex: 1; }
.week-task-time {
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  font-family: 'JetBrains Mono', monospace;
}
.week-task-name {
  font-size: 10px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 900px) {
  .week-grid { flex-direction: column; }
  .week-day { flex: 0 0 auto !important; min-width: 0 !important; }
  .week-day-expanded { min-width: 0 !important; }
}

/* === Recall / Napló Page === */
.recall-toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  align-items: center;
  flex-wrap: wrap;
}
.recall-search-wrap {
  flex: 2;
  min-width: 200px;
  position: relative;
}
.recall-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}
.recall-search {
  width: 100%;
  padding: 10px 14px 10px 40px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.recall-search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.recall-date-wrap {
  position: relative;
  flex-shrink: 0;
}
.recall-date-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}
.recall-date {
  padding: 9px 12px 9px 34px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  outline: none;
  width: 170px;
  transition: border-color var(--transition), box-shadow var(--transition);
  color-scheme: dark;
}
.recall-date:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.recall-expr {
  flex: 1;
  min-width: 160px;
  padding: 9px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.recall-expr:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.recall-expr::placeholder,
.recall-search::placeholder {
  color: var(--text-muted);
}
.recall-agent-filter {
  padding: 9px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  outline: none;
  transition: border-color var(--transition);
  min-width: 130px;
}
.recall-agent-filter:focus {
  border-color: var(--accent);
}
.recall-summary {
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--text-muted);
}
.recall-timeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (max-width: 640px) {
  .recall-toolbar { flex-direction: column; align-items: stretch; }
  .recall-search-wrap, .recall-date-wrap, .recall-expr, .recall-agent-filter { width: 100%; }
  .recall-date { width: 100%; }
}

.recall-summary-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
  color: var(--text-muted);
}
.recall-date-header {
  margin-top: 20px;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
}
.recall-item {
  margin-bottom: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border);
}
.recall-memory {
  border-left: 3px solid var(--border);
}
.recall-memory[data-cat="hot"]    { border-left-color: #ef4444; }
.recall-memory[data-cat="warm"]   { border-left-color: #f59e0b; }
.recall-memory[data-cat="cold"]   { border-left-color: #3b82f6; }
.recall-memory[data-cat="shared"] { border-left-color: #8b5cf6; }
.recall-item-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}
.recall-item-label {
  font-size: 12px;
  color: var(--text-muted);
}
.recall-item-badges {
  display: flex;
  gap: 6px;
}
.recall-badge {
  font-size: 11px;
  color: #fff;
  padding: 2px 8px;
  border-radius: 12px;
  white-space: nowrap;
}
.recall-badge-agent { background: var(--accent); }
.recall-badge-cat { background: var(--text-muted); }
.recall-badge-cat[data-cat="hot"]    { background: #ef4444; }
.recall-badge-cat[data-cat="warm"]   { background: #f59e0b; }
.recall-badge-cat[data-cat="cold"]   { background: #3b82f6; }
.recall-badge-cat[data-cat="shared"] { background: #8b5cf6; }
.recall-item-content {
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.5;
}
.recall-item-keywords {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
}
.recall-loading, .recall-empty { font-size: 13px; color: var(--text-muted); }
.recall-error { font-size: 13px; color: var(--danger); }

/* === Connectors Page === */
.connector-stats {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

/* Slice 08: search row was a bare block, so the type=search input rendered at
   its ~180px intrinsic width and clipped the placeholder. Lay the toolbar out
   as a wrapping flex row and let the search grow to a readable width. */
.connector-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3, 12px);
  margin-bottom: var(--space-3, 12px);
}
.connector-toolbar .connector-search {
  flex: 0 1 440px;
  min-width: 200px;
}

.connector-section-header {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 10px;
  margin-top: 20px;
}
.connector-section-header:first-of-type { margin-top: 0; }

.connector-group-heading {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-top: 24px;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.connector-group-heading:first-child { margin-top: 0; }
.connector-scope-section { margin-bottom: 4px; }
.connector-scope-header {
  display: flex;
  align-items: center;
  gap: 6px;
}
.connector-scope-header.collapsible { cursor: pointer; user-select: none; }
.connector-scope-header.collapsible:hover { color: var(--text); }
.connector-scope-toggle {
  font-size: 10px;
  width: 12px;
  display: inline-block;
  transition: transform 0.15s;
}
.connector-scope-count {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 11px;
  margin-left: 4px;
}
.connector-scope-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 12px;
  margin-bottom: 8px;
}
.connector-scope-grid[hidden] { display: none; }

.connector-external-paths {
  margin-bottom: 12px;
}
.connector-external-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}
.connector-external-header:hover { color: var(--text); }
.connector-external-body[hidden] { display: none; }
.connector-external-body { margin-top: 10px; }
.connector-external-add { display: flex; gap: 8px; margin-top: 8px; }
.connector-external-add .input { flex: 1; }
.connector-external-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
  font-size: 13px;
  font-family: monospace;
}
.connector-external-item button {
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
}
.connector-external-item button:hover { opacity: 0.7; }

.connector-env-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.github-repo-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.github-repo-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.github-repo-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.github-repo-date {
  font-size: 11px;
  color: var(--text-muted);
  font-family: inherit;
}
.github-repo-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.github-repo-actions button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
}
.github-repo-update { color: var(--accent); }
.github-repo-update:hover { opacity: 0.7; }
.github-repo-delete { color: var(--danger); }
.github-repo-delete:hover { opacity: 0.7; }
.github-repo-status {
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.github-repo-status.loading { background: var(--bg-card); color: var(--accent); border: 1px solid var(--accent); }
.github-repo-status.error { background: var(--bg-card); color: var(--danger); border: 1px solid var(--danger); }
.github-repo-status.success { background: var(--bg-card); color: var(--success); border: 1px solid var(--success); }
.github-repo-status[hidden] { display: none; }

/* Vault page */
.vault-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  max-width: 100%;
}
.vault-header-actions .btn-compact {
  min-height: 44px;
}
.vault-stats {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.vault-add-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
  animation: slideDown 0.2s ease;
}
.vault-add-panel[hidden] { display: none; }
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.vault-add-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.vault-add-panel-header h3 { margin: 0; font-size: 15px; }
.vault-add-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.vault-add-fields .vault-field-group:last-child {
  grid-column: 1 / -1;
}
.vault-field-group { display: flex; flex-direction: column; gap: 4px; }
.vault-field-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}
.vault-add-actions { display: flex; justify-content: flex-end; }
@media (max-width: 600px) {
  .vault-add-fields { grid-template-columns: 1fr; }
  .vault-add-fields .vault-field-group:last-child { grid-column: auto; }
  .vault-add-actions .btn-primary { width: 100%; min-height: 44px; }
}
.vault-search-wrap {
  position: relative;
  margin-bottom: 16px;
}
.vault-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  pointer-events: none;
}
.vault-search {
  width: 100%;
  height: 44px;
  min-height: 44px;
  padding: 10px 12px 10px 38px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 14px;
  outline: none;
  transition: border-color var(--transition);
}
.vault-search:focus { border-color: var(--accent); }
.vault-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 12px;
}
.vault-card {
  display: flex;
  flex-direction: column;
  padding: 16px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all var(--transition);
  gap: 8px;
}
.vault-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}
.vault-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.vault-card-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft, rgba(99, 102, 241, 0.1));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
.vault-card-title {
  flex: 1;
  min-width: 0;
}
.vault-card-id {
  font-family: monospace;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  word-break: break-all;
}
.vault-card-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.vault-card-meta {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  align-self: flex-start;
  margin-top: 2px;
}
.vault-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.vault-card-value {
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: monospace;
  font-size: 12px;
  word-break: break-all;
  animation: slideDown 0.15s ease;
}
.vault-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-secondary);
}
.vault-empty[hidden] { display: none; }
.vault-empty svg { margin-bottom: 12px; opacity: 1; color: var(--text-secondary); }
.vault-empty p { margin: 4px 0; font-size: 14px; }
.vault-empty-hint { font-size: 12px !important; opacity: 1; }

.vault-binding-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--accent);
  color: white;
  vertical-align: middle;
  margin-left: 6px;
}

.vault-card-edit-form {
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.vault-card-edit-form .input { flex: 1 1 180px; min-width: 0; }
.vault-card-edit-form .vault-edit-value { font-size: 13px; margin-bottom: 6px; }

.vault-bind-status {
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 6px;
  margin-top: 8px;
}
.vault-bind-status.success { background: rgba(34,197,94,.12); color: var(--success); }
.vault-bind-status.error { background: rgba(239,68,68,.12); color: var(--danger); }

#vaultPage .subtitle,
#vaultPage .stat-label,
#messagesPage .subtitle {
  color: var(--text-secondary);
}

#vaultPage strong,
#messagesPage .badge,
#messagesPage .bubble-id-chip {
  color: var(--text);
}

#messagesPage .badge-active,
#messagesPage .badge-warm {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
}

@media (max-width: 760px) {
  #vaultPage .page-header-row {
    align-items: stretch;
    flex-wrap: wrap;
  }
  #vaultPage .page-header-row > div:first-child {
    min-width: 0;
    flex: 1 1 180px;
  }
  .vault-header-actions {
    justify-content: flex-start;
    flex: 1 1 100%;
  }
  .vault-header-actions .btn-compact {
    min-height: 44px;
  }
}

@media (max-width: 430px) {
  .vault-header-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  .vault-header-actions .btn-compact {
    width: 100%;
    justify-content: center;
    padding-left: 10px;
    padding-right: 10px;
  }
  .vault-stats .stat-card {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
  }
  .vault-card {
    padding: 14px;
  }
  .vault-card-header {
    flex-wrap: wrap;
  }
  .vault-card-meta {
    width: 100%;
    margin-left: 44px;
  }
  .vault-card-actions .btn-compact,
  .vault-card-edit-form .btn-compact {
    flex: 1 1 calc(50% - 6px);
    justify-content: center;
    min-height: 44px;
  }
  .vault-card-edit-form .input {
    flex-basis: 100%;
  }
}

.vault-scan-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.vault-scan-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  background: var(--bg-card);
}
.vault-scan-check { flex-shrink: 0; }
.vault-scan-info { flex: 1; min-width: 0; }
.vault-scan-server {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.vault-scan-env {
  font-size: 12px;
  color: var(--text-muted);
  font-family: monospace;
}
.vault-scan-env code {
  background: var(--bg);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 11px;
}
.vault-scan-targets {
  font-size: 11px;
  color: var(--text-muted);
}
.vault-scan-id { flex-shrink: 0; }

.modal-overlay[hidden] { display: none; }
.modal-content {
  /* Env-var modal surface. Header/close/body/footer now come from the single
     canonical modal shell (design-system §2.8) — the duplicate global shell
     selectors that used to live here (16px 20px header/body, 46px close, 15px
     h3, bespoke footer) were removed so they no longer silently override the
     canonical shell for every modal on the page. */
  background: var(--bg-modal);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 90%;
  max-width: 480px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.modal-desc { font-size: 13px; color: var(--text-muted); margin: 0 0 12px; }
.env-var-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
.env-var-label {
  font-size: 12px;
  font-weight: 600;
  font-family: monospace;
  color: var(--text);
}
.env-var-input { width: 100%; }
.connector-builtin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}
.connector-builtin {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.connector-builtin-name {
  font-size: 13px;
  font-weight: 500;
  flex: 1;
}
.connector-builtin-action {
  font-size: 11px;
  color: var(--accent);
  cursor: pointer;
  text-decoration: none;
}
.connector-builtin-action:hover { text-decoration: underline; }

/* Built-in row's "Részletek" button: carries the same action styling
   but presents as an actual <button> with focus ring for keyboard
   users. The bare <span> it replaced was unreachable by tab and
   lacked a click handler despite looking like a control. */
.connector-builtin-action.btn-link {
  background: none;
  border: none;
  /* Inherit base .connector-builtin-action sizing so both visual
     heights stay identical across built-in rows regardless of
     whether a row ends with a span or a button. */
  padding: 4px 8px;
  font: inherit;
  font-size: 11px;
  color: var(--accent);
  cursor: pointer;
  border-radius: 4px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.connector-builtin-action.btn-link:hover {
  background: var(--bg-input);
  text-decoration: underline;
}
.connector-builtin-action.btn-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Inline <code> inside the built-in detail modal: give it a
   distinct background so the command text stands out from the
   surrounding prose in both light and dark themes. Scoped to the
   new modal's body specifically; .modal-body is shared by ~13
   other modals with their own <code> styling (Agent detail
   Settings, Telegram instructions, etc.) that we must not
   override. */
#builtinDetailBody code {
  background: var(--bg-input);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.92em;
}

.connector-grid {
  display: block;
}

.connector-card {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  max-width: 100%;
  padding: 16px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition);
}
.connector-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.connector-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.connector-status-dot.connected { background: var(--success); box-shadow: 0 0 6px rgba(120,140,93,0.4); }
.connector-status-dot.configured { background: var(--info); }
.connector-status-dot.needs_auth { background: var(--accent); }
.connector-status-dot.failed { background: var(--danger); }
.connector-status-dot.unknown { background: var(--text-muted); }

.connector-info {
  flex: 1;
  min-width: 0;
  max-width: 100%;
}
.connector-name {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}
.connector-endpoint {
  font-size: 11px;
  color: var(--text-muted);
  max-width: 100%;
  /* Endpoint commands/URLs can be long; wrap instead of clipping so the full
     value stays inspectable at every width (incl. mobile touch, where a title
     tooltip is unreachable). overflow-wrap:anywhere breaks even unbreakable
     tokens, so the row never forces page-level horizontal overflow. */
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* Connector type / source pills ride on the chunk-1 .chip base; only the
   colour mapping and a couple of layout tweaks are page-specific. The coloured
   variant follows the same --chip-color convention as .idea-chip. */
.connector-type-chip {
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-color: color-mix(in srgb, var(--chip-color, var(--text-muted)) 45%, transparent);
  color: var(--chip-color, var(--text-muted));
  background: color-mix(in srgb, var(--chip-color, var(--text-muted)) 12%, transparent);
}
.connector-type-chip.remote { --chip-color: var(--info); }
.connector-type-chip.local  { --chip-color: var(--success); }
.connector-type-chip.plugin { --chip-color: var(--accent); }

.connector-source-chip {
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

.info-box {
  padding: 12px 16px;
  margin: 0 0 16px;
  border-radius: 8px;
  background: var(--info-soft);
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  border-left: 3px solid var(--info);
}
.info-box strong { color: var(--badge-info-text); }

.connector-stale-banner {
  padding: 10px 14px;
  margin: 0 0 12px;
  border-radius: 6px;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 13px;
  border-left: 3px solid var(--danger);
}

.connector-card-readonly {
  cursor: default;
  opacity: 0.9;
}
.connector-card-readonly:hover {
  /* The base .connector-card:hover rule applies border-color +
     box-shadow to hint at a click target. Read-only cards have no
     click handler, so mute those cues explicitly. */
  border-color: var(--border);
  box-shadow: none;
}
.connector-readonly-hint {
  color: var(--text-muted);
  font-style: italic;
  font-size: 11px;
  margin-top: 2px;
  overflow-wrap: anywhere;
}

.connector-detail-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.connector-detail-row {
  display: flex;
  gap: 12px;
}
.connector-detail-row .meta-label { min-width: 80px; }

.connector-agent-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.connector-agent-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-input);
  border-radius: var(--radius-sm);
}
.connector-agent-item input[type="checkbox"] {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
}
.connector-agent-item label {
  font-size: 13px;
  cursor: pointer;
}

.connector-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 0;
  color: var(--text-muted);
  font-size: 14px;
  gap: 10px;
}

/* === Connector Tabs === */
.connector-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}
.connector-tab {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition);
  margin-bottom: -1px;
  min-height: 44px;
}
.connector-tab:hover {
  color: var(--text);
}
.connector-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* === Catalog Filters === */
.catalog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}
.catalog-filter-btn,
.connector-filter-btn {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg-card);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
}
.catalog-filter-btn:hover,
.connector-filter-btn:hover {
  border-color: var(--accent);
  color: var(--text);
}
.catalog-filter-btn.active,
.connector-filter-btn.active {
  /* soft-accent active (matches .connector-tab.active): white-on-solid-accent
     failed AA on dark theme — --accent #60a5fa gave white text only 2.54:1.
     Slice 08: label uses --accent-hover (light #1d4ed8 / dark #93c5fd) so the
     active text clears AA on --accent-soft in both themes (--accent was 4.16 light). */
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  color: var(--accent-hover);
}

/* === Catalog Grid === */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.catalog-card {
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all var(--transition);
  gap: 12px;
}
.catalog-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.catalog-card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.catalog-card-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  font-size: 22px;
}
.catalog-card-info {
  flex: 1;
  min-width: 0;
}
.catalog-card-name {
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.catalog-card-link {
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.catalog-card-link:hover { opacity: 1; }
.catalog-card-type {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 2px 7px;
  border-radius: 4px;
  flex-shrink: 0;
}
.catalog-card-type.local {
  background: var(--success-soft);
  color: var(--success);
}
.catalog-card-type.remote {
  background: var(--info-soft);
  color: var(--info);
}
.catalog-card-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.catalog-card-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.catalog-install-btn {
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 500;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.catalog-install-btn.install {
  background: var(--success);
  color: #fff;
}
.catalog-install-btn.install:hover {
  filter: brightness(1.1);
}
.catalog-install-btn.installed {
  background: var(--success-soft);
  color: var(--success);
  cursor: default;
  font-weight: 600;
}
.catalog-uninstall-link {
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: none;
  margin-left: auto;
  transition: color var(--transition);
}
.catalog-uninstall-link:hover {
  color: var(--danger);
  text-decoration: underline;
}
.catalog-auth-hint {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  margin-left: 4px;
}

/* Catalog install modal env fields */
.catalog-env-group {
  margin-bottom: 14px;
}
.catalog-env-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
  font-family: monospace;
}
.catalog-env-group input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text);
  font-size: 14px;
}
.catalog-env-group input:focus {
  border-color: var(--border-focus);
  outline: none;
}

/* === Status Page === */
#statusPage {
  min-width: 0;
}

.status-summary-panel,
.status-services,
.status-incidents {
  min-width: 0;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  box-shadow: none;
}

.status-summary-panel {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.status-overall {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  min-height: 104px;
  padding: 18px;
  border-radius: var(--radius);
  margin-bottom: 24px;
  font-size: 18px;
  font-weight: 600;
  border: 1px solid transparent;
  min-width: 0;
}

.status-overall-dot {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  flex: 0 0 auto;
  box-shadow: 0 0 0 5px color-mix(in srgb, currentColor 14%, transparent);
}

.status-overall-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.status-overall-copy strong,
.status-overall-copy small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.status-overall-copy small {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}
.status-overall.operational {
  background: color-mix(in srgb, var(--success-soft) 64%, var(--bg-card) 36%);
  color: var(--badge-success-text);
  border-color: color-mix(in srgb, var(--success) 28%, transparent);
}
.status-overall.degraded {
  background: color-mix(in srgb, var(--warning) 16%, transparent);
  color: var(--badge-warning-text);
  border-color: color-mix(in srgb, var(--warning) 34%, transparent);
}
.status-overall.unknown {
  background: color-mix(in srgb, var(--bg-input) 72%, var(--bg-card) 28%);
  color: var(--text-muted);
  border-color: var(--border);
}

.status-overall.operational .status-overall-dot { background: var(--success); }
.status-overall.degraded .status-overall-dot { background: var(--warning); }
.status-overall.unknown .status-overall-dot { background: var(--text-muted); }

.status-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.status-metric {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg-input) 72%, transparent);
}

.status-metric-label,
.status-section-meta,
.status-note {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
}

.status-metric-label {
  display: block;
  margin-bottom: 5px;
}

.status-metric strong {
  display: block;
  color: var(--text);
  font-size: 18px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.status-note {
  margin: 0;
  overflow-wrap: anywhere;
}

.status-services {
  margin-bottom: 28px;
}
.status-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.status-section-header h3,
.status-services h3,
.status-incidents h3 {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin: 0;
}

.status-section-meta {
  text-align: right;
  max-width: 52%;
  overflow-wrap: anywhere;
}

.status-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.status-service {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  min-height: 68px;
  padding: 13px 14px;
  background: color-mix(in srgb, var(--bg-input) 54%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.status-service-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}
.status-service-dot.operational { background: var(--success); }
.status-service-dot.degraded { background: var(--accent); }
.status-service-dot.down { background: var(--danger); }
.status-service-dot.maintenance { background: var(--info); }

.status-service.operational { border-color: color-mix(in srgb, var(--success) 18%, var(--border) 82%); }
.status-service.degraded,
.status-service.maintenance { border-color: color-mix(in srgb, var(--accent) 24%, var(--border) 76%); }
.status-service.down { border-color: color-mix(in srgb, var(--danger) 28%, var(--border) 72%); }

.status-service-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.status-service-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  min-width: 0;
  overflow-wrap: anywhere;
}

.status-service-state {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.status-service-uptime {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
}

.status-incident-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.status-incident {
  min-width: 0;
  min-height: 112px;
  padding: 15px 16px;
  background: color-mix(in srgb, var(--bg-input) 48%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  border-left: 3px solid var(--border);
}
.status-incident.resolved { border-left-color: var(--success); }
.status-incident.monitoring { border-left-color: var(--info); }
.status-incident.identified { border-left-color: var(--accent); }
.status-incident.investigating { border-left-color: var(--danger); }

.status-incident-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  min-width: 0;
}
.status-incident-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  min-width: 0;
  overflow-wrap: anywhere;
}
.status-incident-badge {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 2px 8px;
  border-radius: 4px;
}
.status-incident-badge.resolved { background: var(--success-soft); color: var(--badge-success-text); }
.status-incident-badge.monitoring { background: var(--info-soft); color: var(--badge-info-text); }
.status-incident-badge.identified { background: var(--warning-soft); color: var(--badge-warning-text); }
.status-incident-badge.investigating { background: var(--danger-soft); color: var(--badge-danger-text); }

.status-incident-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.status-incident-date {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 8px;
  overflow-wrap: anywhere;
}

.status-loading,
.status-empty {
  text-align: center;
  padding: 28px 18px;
  color: var(--text-muted);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg-input) 44%, transparent);
  font-size: 13px;
  line-height: 1.45;
  min-width: 0;
  overflow-wrap: anywhere;
}

.status-empty.error {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 34%, var(--border) 66%);
}

.status-refresh-btn {
  min-height: 44px;
}

.status-section-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.status-section-head {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.status-section-hint {
  margin: 0;
  max-width: 64ch;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.status-snapshot-panel {
  min-width: 0;
  padding: 16px 18px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  box-shadow: none;
}

.status-snapshot-panel h3 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.status-snapshot-list {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.status-snapshot-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  min-width: 0;
}

.status-snapshot-row:first-child {
  padding-top: 0;
  border-top: none;
}

.status-snapshot-row:last-child {
  padding-bottom: 0;
}

.status-snapshot-row dt {
  color: var(--text-muted);
  font-size: 12px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.status-snapshot-row dd {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-align: right;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* === Migration Page === */
.migrate-steps {
  max-width: 700px;
}
.migrate-step h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
}
.migrate-step[hidden] { display: none; }

.migrate-findings {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.migrate-finding {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.migrate-finding-icon {
  font-size: 16px;
  flex-shrink: 0;
}
.migrate-finding-info {
  flex: 1;
  min-width: 0;
}
.migrate-finding-name {
  font-size: 13px;
  font-weight: 500;
}
.migrate-finding-type {
  font-size: 11px;
  color: var(--text-muted);
}
.migrate-finding-size {
  font-size: 11px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
}

.migrate-summary {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.migrate-result {
  padding: 20px;
  background: var(--success-soft);
  border-radius: var(--radius);
}
.migrate-result h4 {
  color: var(--success);
  margin-bottom: 10px;
}
.migrate-result-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
}
.migrate-result-stat {
  text-align: center;
}
.migrate-result-stat-value {
  font-size: 20px;
  font-weight: 600;
}
.migrate-result-stat-label {
  font-size: 11px;
  color: var(--text-muted);
}
.migrate-result-details {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* === Skills Page === */
.skills-stats {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.skills-card {
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition);
  gap: 12px;
}

.skills-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.skills-card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.skills-card-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  font-size: 18px;
}

.skills-card-info {
  flex: 1;
  min-width: 0;
}

.skills-card-name {
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  margin-bottom: 4px;
  word-break: break-word;
}

.skills-card-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.skills-card-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.skills-agent-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  background: var(--info-soft);
  color: var(--info);
}

.skills-agent-badge.none {
  background: var(--bg-input);
  color: var(--text-muted);
  font-style: italic;
}

.skills-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}

.skills-empty svg {
  color: var(--text-muted);
  opacity: 0.5;
  margin-bottom: 12px;
}

/* Skills detail modal */
.skill-detail-desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 20px;
  padding: 12px 16px;
  background: var(--bg-input);
  border-radius: var(--radius-sm);
}

.skill-detail-meta {
  margin: 0 0 20px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}
.skill-detail-meta .skill-detail-source strong {
  color: var(--text);
}
.skill-detail-meta .skill-detail-note {
  margin-top: 2px;
  font-style: italic;
}

.skill-detail-agents {
  margin-bottom: 24px;
}

.skill-agent-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.skill-agent-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border);
  transition: all var(--transition);
}

.skill-agent-checkbox:hover {
  border-color: var(--accent);
}

.skill-agent-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.skill-agent-checkbox label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  flex: 1;
}

.skill-agent-auto,
.connector-agent-auto {
  opacity: 0.85;
  background: var(--bg-input);
}

.tag-auto {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: 0.02em;
}

.skill-detail-content-wrap {
  margin-top: 20px;
}

.skill-detail-content {
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-height: 400px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  margin-top: 8px;
}

/* === Responsive === */
@media (max-width: 900px) {
  .kanban-toolbar {
    align-items: stretch;
  }
  .kanban-filter-label {
    align-self: center;
  }
  .kanban-filter-control {
    flex: 1 1 160px;
  }
  .kanban-quick-filters {
    flex: 1 0 100%;
    justify-content: flex-start;
  }
  .kanban-board {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .kanban-col { min-height: auto; }
  .kanban-swimlane-body {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 640px) {
  main { padding: 20px 16px 48px; }
  .page-header-row {
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
  }
  #connectorsPage .page-header-row {
    display: grid;
    grid-template-columns: 1fr;
  }
  #connectorsPage .page-header-row > div:first-child,
  #connectorsPage .page-header-row > div:last-child {
    min-width: 0;
  }
  #connectorsPage .page-header-row > div:last-child {
    display: grid !important;
    grid-template-columns: 1fr;
    width: 100%;
  }
  #connectorsPage .page-header-row .btn-compact {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }
  main.agents-active,
  main.team-active {
    padding-top: 14px;
  }
  main.agents-active .page-header,
  main.team-active .page-header {
    margin-bottom: 14px;
  }
  main.agents-active .page-header-row,
  main.team-active .page-header-row {
    align-items: flex-start;
    gap: 10px;
  }
  main.agents-active #analyzeAllModelsBtn,
  main.team-active #refreshTeamBtn {
    min-height: 44px;
  }
  main.kanban-active { padding-left: 14px; padding-right: 14px; }
  .kanban-toolbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
  }
  .kanban-filter-control,
  .kanban-owner-filter {
    width: 100%;
    min-width: 0;
    min-height: 44px;
  }
  .kanban-quick-filters {
    grid-column: 1 / -1;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
  }
  .kanban-quick-filter-chip,
  .kanban-quick-filter-clear-all {
    flex: 0 0 auto;
  }
  .agents-grid { grid-template-columns: 1fr; gap: 12px; }
  .agent-card { padding: 20px 14px; min-height: auto; }
  .agent-avatar { width: 44px; height: 44px; font-size: 18px; }
  #agentsPage .agent-card {
    min-height: 0;
    padding: 16px;
  }
  #agentsPage .agent-card-top {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 11px;
  }
  #agentsPage .agent-desc {
    min-height: 0;
    -webkit-line-clamp: 3;
  }
  #agentsPage .agent-card-actions {
    grid-template-columns: 1fr;
  }
  #agentsPage .agent-card-actions .btn-compact {
    width: 100%;
  }
  #agentsPage .add-card {
    min-height: 132px;
  }
  .modal.terminal-modal,
  .modal.conversation-modal {
    width: calc(100vw - 16px);
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
  }
  .terminal-modal .modal-header,
  .conversation-modal .modal-header {
    min-height: 52px;
    padding: 12px;
  }
  #terminalContainer {
    padding: 8px !important;
  }
  .conversation-toolbar {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px 12px;
  }
  .conversation-filter,
  .conversation-toolbar .btn-compact {
    width: 100%;
    justify-content: center;
  }
  .conversation-container {
    padding: 12px;
  }
  .conv-bubble {
    max-width: 100%;
  }
  .conv-action-text {
    flex-direction: column;
    gap: 3px;
  }
  .modal { width: 95%; }
  .modal-agent-detail { max-width: 100%; }
  .header-left { gap: 16px; }
  .mem-toolbar { flex-direction: column; }
  .mem-stats { gap: 8px; }
  .stat-card { min-width: 70px; padding: 12px; }
  .stat-value { font-size: 20px; }
  .mem-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .mem-tab { padding: 10px 12px; font-size: 12px; }
  .log-date-nav { gap: 8px; }
  .log-current-date { font-size: 14px; min-width: 120px; }
  .log-entry { padding: 10px 12px; gap: 8px; }
  .log-entry-time { font-size: 11px; }
  .tab-nav { padding: 0 16px; overflow-x: auto; }
  .tab-btn { padding: 10px 12px; font-size: 13px; }
  .tab-panel { padding: 0 16px 16px; }
  .agent-overview-grid { grid-template-columns: 1fr; }
  .agent-detail-bottom { margin: 0 16px; }
  .settings-row {
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
  }
  #settingsPage .page-header-row .btn-compact {
    min-height: 44px;
  }
  .settings-row-info,
  .settings-row-editor {
    width: 100%;
    min-width: 0;
  }
  .settings-row-key,
  .settings-row-desc,
  .settings-row-meta {
    overflow-wrap: anywhere;
  }
  .settings-row-editor {
    justify-content: stretch;
  }
  .settings-row-editor .input {
    width: 100% !important;
    max-width: 100%;
    min-height: 44px;
  }
  .settings-color-input {
    width: 100% !important;
    max-width: 100%;
    min-height: 44px;
  }
  .schedule-view-toggle { flex-wrap: wrap; }
  .schedule-row { padding: 12px 14px; gap: 10px; }
  .schedule-actions { opacity: 1; }
  .timeline-agent { width: 70px; }
  .timeline-hours { margin-left: 70px; }
  .timeline-marker { width: 24px; height: 24px; top: 10px; }
  .timeline-marker-tooltip { font-size: 10px; }
  .connector-scope-grid { grid-template-columns: minmax(0, 1fr); }
  .connector-card {
    gap: 10px;
    padding: 14px 12px;
  }
  .connector-type-chip {
    flex: 0 1 auto;
    justify-content: center;
  }
  .connector-stats { gap: 8px; }
  .connector-builtin {
    align-items: flex-start;
  }
  .connector-builtin-action.btn-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .catalog-grid { grid-template-columns: 1fr; }
  .catalog-filters { gap: 4px; }
  .catalog-filter-btn { padding: 5px 10px; font-size: 12px; }
  .skills-grid { grid-template-columns: 1fr; }
  .skills-stats { gap: 8px; }
  .autonomy-grid { gap: 8px; }
  .autonomy-row { flex-wrap: wrap; gap: 10px; }
  .autonomy-row-label { min-width: unset; flex: 1 1 100%; }
}

@media (pointer: coarse) {
  .kanban-add-btn,
  .card-breakdown-btn,
  .kanban-owner-filter,
  .kanban-quick-filter-chip,
  .kanban-quick-filter-clear-all,
  .vault-header-actions .btn-compact,
  .vault-card-actions .btn-compact,
  .vault-card-edit-form .btn-compact,
  .chat-thread-refresh,
  #chatRefreshBtn,
  .chat-send-btn {
    min-width: 44px;
    min-height: 44px;
  }
  .card-breakdown-btn {
    padding: 8px 10px;
  }
}

/* === Autonomy Page === */
.autonomy-legend {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.autonomy-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}
.autonomy-legend-item strong {
  font-weight: 600;
  font-size: 14px;
}
.autonomy-level-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.autonomy-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.autonomy-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--transition);
}
.autonomy-row:hover { border-color: var(--accent); }
.autonomy-row.locked {
  opacity: 0.55;
  pointer-events: none;
}
.autonomy-row.locked:hover { border-color: var(--border); }
.autonomy-row.capped { border-left: 3px solid var(--accent); }
.autonomy-row-label {
  flex: 1;
  min-width: 260px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.autonomy-row-lock {
  color: var(--text-muted);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.autonomy-row-lock svg { flex-shrink: 0; }
.autonomy-row-cap {
  color: var(--accent);
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.autonomy-row-cap svg { flex-shrink: 0; }
.autonomy-levels {
  display: flex;
  gap: 4px;
  background: var(--bg-input);
  border-radius: 6px;
  padding: 3px;
}
.autonomy-level-btn {
  padding: 6px 16px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: var(--text-muted);
  transition: all var(--transition);
  /* >=44px tap target on every viewport: the level switch is the page's
     primary control, and the desktop audit flagged it as a small target. */
  min-width: var(--control-min);
  min-height: var(--control-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.autonomy-level-btn:hover:not(.active):not(:disabled) {
  color: var(--text);
  background: var(--bg-card);
}
.autonomy-level-btn.over-cap {
  opacity: 0.3;
  cursor: not-allowed;
}
.autonomy-level-btn.active {
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.autonomy-level-btn.active[data-level="1"] {
  background: var(--text-muted);
}
.autonomy-level-btn.active[data-level="2"] {
  background: var(--accent);
}
.autonomy-level-btn.active[data-level="3"] {
  background: var(--success);
}
.autonomy-grid > :last-child { margin-bottom: 0; }
.autonomy-footer {
  margin-top: 16px;
  font-size: 12px;
  color: var(--text-muted);
}

/* === Settings page === */
.settings-group { margin-bottom: 28px; }
.settings-group:last-child { margin-bottom: 0; }
.settings-group-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 10px;
}
.settings-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 8px;
  transition: border-color var(--transition);
}
.settings-row:hover { border-color: var(--accent); }
.settings-row-info { flex: 1; min-width: 240px; }
.settings-row-key {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  font-family: var(--font-mono, monospace);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.settings-restart-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--badge-warning-text);
  background: var(--warning-soft);
  border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent);
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
}
.settings-row-desc {
  font-size: 13px;
  color: var(--text);
  margin-top: 4px;
}
.settings-row-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}
.settings-row-editor {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  flex-shrink: 0;
}
.settings-row-editor .input {
  width: 140px;
  font-size: 13px;
}
.settings-color-input {
  width: 72px;
  height: 32px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-input);
  cursor: pointer;
}
.settings-row-error {
  font-size: 12px;
  color: var(--danger);
  flex-basis: 100%;
}

#refreshStatusBtn,
#refreshSettingsBtn,
#connectorRefreshBtn,
#addConnectorBtn {
  min-height: 44px;
}

/* === connectors.hu cross-promo banner === */
.cxhu-banner {
  margin-bottom: 16px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(0, 151, 124, 0.25);
  background: linear-gradient(135deg, rgba(0, 151, 124, 0.06) 0%, rgba(89, 233, 206, 0.04) 100%);
}
[data-theme="dark"] .cxhu-banner {
  background: linear-gradient(135deg, rgba(0, 151, 124, 0.12) 0%, rgba(89, 233, 206, 0.06) 100%);
  border-color: rgba(0, 151, 124, 0.35);
}
.cxhu-banner-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
}
.cxhu-banner-logo { flex-shrink: 0; line-height: 0; }
.cxhu-banner-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.cxhu-banner-headline {
  font-weight: 700;
  font-size: 14px;
  color: #00695c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-theme="dark"] .cxhu-banner-headline { color: #59e9ce; }
.cxhu-banner-sub {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}
.cxhu-banner-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  /* #007d67 yields white-on-teal 5.1:1 (AA); #00977c was 3.67:1 and failed AA */
  background: #007d67;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition), transform var(--transition);
}
.cxhu-banner-cta:hover {
  background: #006b58;
  transform: translateY(-1px);
}
.cxhu-banner-close {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition), background var(--transition);
}
.cxhu-banner-close:hover {
  color: var(--text);
  background: var(--bg-input);
}
/* install flow states */
.cxhu-banner-action {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.cxhu-state {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.cxhu-state[hidden] { display: none; }
.cxhu-banner-cta {
  border: none;
  cursor: pointer;
}
.cxhu-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(0, 151, 124, 0.25);
  border-top-color: #00977c;
  border-radius: 50%;
  animation: cxhu-spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes cxhu-spin { to { transform: rotate(360deg); } }
.cxhu-state-label {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}
.cxhu-done-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #00977c;
  background: rgba(0, 151, 124, 0.1);
  padding: 5px 10px;
  border-radius: 999px;
}
[data-theme="dark"] .cxhu-done-badge { color: #59e9ce; background: rgba(89, 233, 206, 0.1); }
.cxhu-link-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  font-size: 11px;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.cxhu-link-sm:hover { color: #00977c; }
.cxhu-state--token {
  gap: 6px;
}
.cxhu-token-input {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
  outline: none;
  width: 200px;
  transition: border-color var(--transition);
}
.cxhu-token-input:focus { border-color: #00977c; }
.cxhu-token-input::placeholder { color: var(--text-muted); font-size: 11px; }
.cxhu-error-msg {
  font-size: 12px;
  color: var(--danger);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cxhu-retry-btn { background: var(--danger); }
.cxhu-retry-btn:hover { background: var(--danger-hover); }
@media (max-width: 640px) {
  .cxhu-banner-inner { flex-wrap: wrap; }
  .cxhu-banner-logo { display: none; }
  .cxhu-banner-text { min-width: 100%; }
  .cxhu-banner-headline { white-space: normal; }
  .cxhu-banner-action { width: 100%; }
  .cxhu-state--token { flex-wrap: wrap; }
  .cxhu-token-input { width: 100%; }
  .cxhu-banner-cta {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }
  .cxhu-link-sm {
    min-height: 44px;
    align-items: center;
  }
  .cxhu-banner-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 44px;
    height: 44px;
  }
  .cxhu-banner { position: relative; }
}

/* Auth Mode Cards */
.auth-mode-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.auth-mode-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.auth-mode-card:hover {
  border-color: var(--accent);
  background: var(--bg-card-hover);
}
.auth-mode-card.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.auth-mode-card input[type="radio"] {
  display: none;
}
.auth-mode-card-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--bg-input);
  color: var(--text-muted);
  transition: color var(--transition), background var(--transition);
}
.auth-mode-card.selected .auth-mode-card-icon {
  background: var(--accent);
  color: #fff;
}
.auth-mode-card-body { flex: 1; min-width: 0; }
.auth-mode-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.auth-mode-card-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}
@media (max-width: 600px) {
  .auth-mode-cards { gap: 6px; }
  .auth-mode-card { padding: 10px 12px; gap: 10px; }
}

/* === Activity (live agent status) === */
/* === Activity: live fleet timeline (R3 deep-redesign) ====================
   Replaces the flat card feed with: fleet-pulse KPI tiles (.act-pulse),
   a state/search toolbar (.act-toolbar), and a grouped, collapsible timeline
   (.act-timeline) with a spine + type-icon nodes. Base styles use semantic
   tokens (light theme stays opaque); the [data-theme="dark"] block below adds
   the glassy-dark surface treatment. */
.activity-meta { display: flex; align-items: center; }
.activity-updated { font-size: 12px; color: var(--text-muted); }
.activity-empty { color: var(--text-muted); font-size: 14px; padding: var(--space-6) 2px; }

/* Fleet-pulse KPI strip */
.act-pulse {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.act-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border-radius: var(--gd-radius-md);
  border: 1px solid var(--border);
  background: var(--bg-card);
  overflow: hidden;
}
.act-tile-ic { width: 20px; height: 20px; color: var(--text-muted); }
.act-tile-ic svg { width: 100%; height: 100%; display: block; }
.act-tile-num { font-size: 30px; font-weight: 760; line-height: 1; color: var(--text); letter-spacing: -0.01em; }
.act-tile-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.act-tile-working .act-tile-ic { color: #22c55e; }
.act-tile-attention .act-tile-ic { color: #f59e0b; }
.act-tile-stopped .act-tile-ic { color: #6b7280; }
.act-tile.is-live .act-tile-num { color: #22c55e; }
.act-tile.is-live::after {
  content: ""; position: absolute; top: 14px; right: 14px;
  width: 8px; height: 8px; border-radius: 50%; background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34,197,94,0.5); animation: act-live-dot 2s ease-out infinite;
}
@keyframes act-live-dot {
  0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
  70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

/* Toolbar: state chips + live search */
.act-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.act-chips { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 auto; min-width: 0; }
.act-chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 15px;
  border-radius: var(--gd-radius-pill);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.act-chip:hover { border-color: var(--border-focus, var(--accent)); color: var(--text); }
.act-chip-n {
  font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  background: color-mix(in srgb, currentColor 15%, transparent);
}
.act-chip.active { color: var(--text); border-color: transparent; }
.act-chip-all.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.act-chip.act-working.active { background: rgba(34,197,94,0.16); border-color: rgba(34,197,94,0.5); color: #4ade80; }
.act-chip.act-attention.active { background: rgba(245,158,11,0.16); border-color: rgba(245,158,11,0.5); color: #fbbf24; }
.act-chip.act-idle.active { background: rgba(148,163,184,0.18); border-color: rgba(148,163,184,0.45); color: var(--text-secondary); }
.act-chip.act-stopped.active { background: rgba(107,114,128,0.18); border-color: rgba(107,114,128,0.45); color: var(--text-secondary); }
.act-search {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px;
  border-radius: var(--gd-radius-pill);
  border: 1px solid var(--border); background: var(--bg-input, var(--bg-card));
  color: var(--text-muted); flex: 0 1 240px;
}
.act-search:focus-within { border-color: var(--accent); color: var(--text-secondary); }
.act-search svg { width: 16px; height: 16px; flex: none; }
.act-search input {
  border: none; background: none; outline: none; color: var(--text);
  font-size: 13px; width: 100%; min-width: 0; padding: 10px 0;
}

/* Grouped timeline */
.act-timeline { display: flex; flex-direction: column; gap: 20px; }
.act-group {
  border-radius: var(--gd-radius-lg);
  border: 1px solid var(--border);
  background: var(--bg-card);
  padding: 6px 16px 14px;
}
.act-group-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 2px 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.act-group-ic { width: 18px; height: 18px; color: var(--text-muted); flex: none; }
.act-group-ic svg { width: 100%; height: 100%; display: block; }
.act-group-title { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: 0.01em; color: var(--text); flex: 1 1 auto; }
.act-group-n {
  font-size: 12px; font-weight: 700; color: var(--text-secondary);
  padding: 2px 10px; border-radius: 999px; background: var(--bg-subtle, rgba(127,127,127,0.08));
}
.act-group.act-working .act-group-ic { color: #22c55e; }
.act-group.act-attention .act-group-ic { color: #f59e0b; }
.act-group.act-stopped { opacity: 0.9; }

/* Timeline spine + rows */
.act-group-rows { position: relative; padding-left: 26px; }
.act-group-rows::before {
  content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px;
  width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--border), transparent);
}
.act-row {
  position: relative;
  padding: 12px 12px 12px 4px;
  border-bottom: 1px solid var(--border);
}
.act-row:last-child { border-bottom: none; }
.act-row-node {
  position: absolute; left: -26px; top: 16px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg-card); border: 2px solid var(--text-muted);
  box-shadow: 0 0 0 3px var(--bg-card);
}
.act-row.act-working .act-row-node { border-color: #22c55e; box-shadow: 0 0 0 3px var(--bg-card), 0 0 10px 1px rgba(34,197,94,0.5); }
.act-row.act-attention .act-row-node { border-color: #f59e0b; }
.act-row.act-idle .act-row-node { border-color: #94a3b8; }
.act-row.act-stopped .act-row-node { border-color: #6b7280; }
.act-row.act-stopped { opacity: 0.72; }
.act-row.act-clickable { cursor: pointer; border-radius: var(--gd-radius-sm); transition: background var(--transition); }
.act-row.act-clickable:hover { background: var(--bg-subtle, rgba(127,127,127,0.06)); }
.act-row-main { min-width: 0; }
.act-row-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.act-row-name { font-weight: 650; font-size: 14px; color: var(--text); overflow-wrap: anywhere; min-width: 0; }
.act-row-badge {
  font-size: 11px; font-weight: 650; border-radius: 999px; padding: 2px 9px; white-space: nowrap; flex: none;
}
.act-row-badge.act-working { background: rgba(34,197,94,0.14); color: #4ade80; animation: badge-breathe 2s ease-in-out infinite; }
.act-row-badge.act-idle { background: rgba(148,163,184,0.16); color: var(--text-secondary); }
.act-row-badge.act-attention { background: var(--warning-soft, rgba(245,158,11,0.16)); color: #fbbf24; }
.act-row-badge.act-error { background: rgba(239,68,68,0.16); color: #f87171; }
.act-row-badge.act-unknown { background: rgba(234,179,8,0.16); color: #eab308; }
.act-row-badge.act-stopped { background: rgba(107,114,128,0.16); color: var(--text-muted); }
.act-row-badge.act-unreachable { background: rgba(249,115,22,0.16); color: #fb923c; }
.act-row-term { color: var(--text-muted); width: 15px; height: 15px; flex: none; opacity: 0.6; }
.act-row-term svg { width: 100%; height: 100%; display: block; }
.act-row.act-clickable:hover .act-row-term { opacity: 1; color: var(--accent); }
.act-row-time { margin-left: auto; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; flex: none; }
.act-expand-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; min-width: 44px; flex: none; padding: 0;
  border: 1px solid var(--border); border-radius: var(--gd-radius-sm);
  background: transparent; color: var(--text-muted); cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.act-expand-btn:hover { color: var(--accent); border-color: var(--accent); }
.act-expand-btn svg { width: 16px; height: 16px; transition: transform var(--transition); }
.act-row.act-open .act-expand-btn svg { transform: rotate(180deg); }
.act-row-preview {
  margin-top: 4px; font-size: 12.5px; color: var(--text-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.act-row-preview.is-muted { font-family: inherit; font-style: italic; color: var(--text-muted); }
.act-row-detail { margin-top: 10px; }
.act-main-badge {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--border); color: var(--text-muted); border-radius: 4px; padding: 1px 6px; margin-left: 6px;
}
@keyframes badge-breathe {
  0%, 100% { background: rgba(34,197,94,0.12); box-shadow: 0 0 0 0 rgba(34,197,94,0); }
  50%      { background: rgba(34,197,94,0.30); box-shadow: 0 0 8px 1px rgba(34,197,94,0.38); }
}
.activity-tail {
  margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--font-ui-xs, 12px);
  line-height: 1.5; color: var(--text-secondary); white-space: pre-wrap; word-break: break-word;
  max-height: clamp(180px, 26vh, 440px); overflow: auto;
  background: var(--bg-code, rgba(0,0,0,0.28)); border: 1px solid var(--border);
  border-radius: var(--gd-radius-sm); padding: 10px 12px;
}

/* Glassy-dark surface treatment (dark theme only). */
[data-theme="dark"] .act-tile,
[data-theme="dark"] .act-group {
  background: var(--gd-glass-bg);
  border-color: var(--gd-border);
  -webkit-backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
  box-shadow: var(--gd-shadow-panel);
}
[data-theme="dark"] .act-tile-working.is-live { border-color: rgba(34,197,94,0.42); }
[data-theme="dark"] .act-search,
[data-theme="dark"] .act-chip { background: var(--gd-surface-soft); border-color: var(--gd-border); }
[data-theme="dark"] .act-group-n { background: var(--gd-surface-soft); }
[data-theme="dark"] .act-row-node,
[data-theme="dark"] .act-row-node { box-shadow: 0 0 0 3px var(--gd-bg-1); background: var(--gd-bg-1); }
[data-theme="dark"] .act-row.act-working .act-row-node { box-shadow: 0 0 0 3px var(--gd-bg-1), 0 0 10px 1px rgba(34,197,94,0.5); }

/* Responsive */
@media (max-width: 900px) {
  .act-pulse { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .act-toolbar { flex-direction: column; align-items: stretch; }
  .act-search { flex: 1 1 auto; }
  .act-row-head { flex-wrap: wrap; }
  .act-row-time { margin-left: 0; order: 5; }
}

/* === Activity R3 rework: command deck + live spotlight + recency timeline ===
   Structural redesign (not a recolor): the 4 KPI tiles become a single
   proportional fleet-distribution bar (.act-deck); working agents get a
   dedicated live-card rail (.act-spotlight); the stream regroups by time
   recency with type-icon markers riding the spine (.act-stream). */
.act-deck {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  padding: 16px 22px; margin-bottom: 16px;
  border-radius: var(--gd-radius-lg);
  border: 1px solid var(--border); background: var(--bg-card);
}
.act-deck-lead { display: flex; flex-direction: column; line-height: 1; flex: none; }
.act-deck-total { font-size: 36px; font-weight: 780; color: var(--text); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.act-deck-total-cap { margin-top: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-muted); }
.act-deck-main { flex: 1 1 320px; min-width: 240px; display: flex; flex-direction: column; gap: 13px; }
.act-deck-bar { display: flex; gap: 3px; height: 14px; border-radius: 999px; overflow: hidden; background: var(--bg-subtle, rgba(127,127,127,0.1)); }
.act-seg { display: block; min-width: 5px; border-radius: 5px; transition: flex-grow var(--transition); }
.act-seg-working { background: #22c55e; }
.act-seg-attention { background: #f59e0b; }
.act-seg-idle { background: #94a3b8; }
.act-seg-stopped { background: #6b7280; }
.act-seg-empty { background: var(--border); }
.act-seg.is-live { background: linear-gradient(90deg, #16a34a, #4ade80); }
.act-deck-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.act-legend { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; }
.act-legend-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.act-legend-working .act-legend-dot { background: #22c55e; }
.act-legend-attention .act-legend-dot { background: #f59e0b; }
.act-legend-idle .act-legend-dot { background: #94a3b8; }
.act-legend-stopped .act-legend-dot { background: #6b7280; }
.act-legend-n { font-weight: 750; color: var(--text); font-variant-numeric: tabular-nums; }
.act-legend-label { color: var(--text-secondary); }
.act-legend-pct { color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Live spotlight rail */
.act-spotlight { margin-bottom: 18px; }
.act-spot-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.act-spot-ic { width: 17px; height: 17px; color: #22c55e; flex: none; }
.act-spot-ic svg { width: 100%; height: 100%; display: block; }
.act-spot-title { margin: 0; font-size: 13px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); }
.act-spot-count { font-size: 12px; font-weight: 700; color: #16a34a; padding: 2px 10px; border-radius: 999px; background: rgba(34,197,94,0.14); }
.act-spot-rail { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.act-spot-card {
  position: relative; padding: 14px 16px 14px 18px;
  border-radius: var(--gd-radius-md);
  border: 1px solid rgba(34,197,94,0.30);
  background: var(--bg-card); overflow: hidden;
}
.act-spot-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, #4ade80, #16a34a); }
.act-spot-card.act-clickable { cursor: pointer; transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition); }
.act-spot-card.act-clickable:hover { border-color: rgba(34,197,94,0.6); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(34,197,94,0.14); }
.act-spot-top { display: flex; align-items: center; gap: 8px; }
.act-spot-pulse { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; flex: none; box-shadow: 0 0 0 0 rgba(34,197,94,0.5); animation: act-live-dot 2s ease-out infinite; }
.act-spot-name { font-weight: 700; font-size: 13.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.act-spot-main { font-size: 10px; font-weight: 600; text-transform: uppercase; background: var(--border); color: var(--text-muted); border-radius: 4px; padding: 1px 5px; flex: none; }
.act-spot-time { margin-left: auto; font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; flex: none; }
.act-spot-line { margin-top: 8px; font-size: 12px; color: var(--text-secondary); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Recency-grouped timeline stream */
.act-stream { display: flex; flex-direction: column; gap: 18px; }
/* .act-group-head is a <header> tag, so it inherited the sticky topbar `header` rule
   (background:var(--bg-card) #111318, height:64px, position:sticky, blur) — that opaque
   64px band was the "JUST NOW black box" the owner flagged. Neutralize the leaked props
   so the recency header sits glassy on the group panel. */
.act-stream .act-group-head {
  border-bottom: none; padding: 10px 2px 8px; margin-bottom: 2px;
  background: transparent; height: auto; position: static; z-index: auto;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.act-group-time { font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-secondary); flex: none; padding: 4px 12px; border-radius: 999px; background: var(--bg-subtle, rgba(127,127,127,0.08)); }
.act-group-rule { flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, var(--border), transparent); }
.act-group-live .act-group-time { color: #16a34a; background: rgba(34,197,94,0.13); }
.act-stream .act-row-node { display: none; }
.act-row-ic {
  position: absolute; left: -28px; top: 12px; z-index: 1;
  width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); background: var(--bg-card); border-radius: 50%;
  box-shadow: 0 0 0 3px var(--bg-card);
}
.act-row-ic svg { width: 13px; height: 13px; }
.act-row-ic-working { color: #22c55e; }
.act-row-ic-attention { color: #f59e0b; }
.act-row-ic-stopped { color: #6b7280; }

/* Dark glassy treatment for the new surfaces */
[data-theme="dark"] .act-deck,
[data-theme="dark"] .act-spot-card {
  background: var(--gd-glass-bg); border-color: var(--gd-border);
  -webkit-backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
  box-shadow: var(--gd-shadow-panel);
}
[data-theme="dark"] .act-spot-card { border-color: rgba(34,197,94,0.34); }
[data-theme="dark"] .act-group-time { background: var(--gd-surface-soft); }
/* Live "JUST NOW" pill: lighter green on dark glass for AA contrast (was #16a34a ~4.8:1). */
[data-theme="dark"] .act-group-live .act-group-time { color: #4ade80; background: rgba(34,197,94,0.16); }
[data-theme="dark"] .act-row-ic { background: var(--gd-bg-1); box-shadow: 0 0 0 3px var(--gd-bg-1); }
/* P6: stream groups — gradient from 12% white (header area) to 5% (rows) so the panel is
   clearly lighter than the #07111f page bg without using the opaque dark gd-glass-bg */
[data-theme="dark"] .act-stream .act-group {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 100%);
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.13);
}

@media (max-width: 640px) {
  .act-deck { gap: 14px 20px; padding: 14px 16px; }
  .act-deck-total { font-size: 30px; }
  .act-spot-rail { grid-template-columns: 1fr; }
}

/* === Messages / Chat page === */
.chat-layout {
  display: flex;
  gap: 0;
  flex: 1;
  min-height: 0;
  height: calc(100vh - 160px);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 16px;
  max-width: 100%;
}
.chat-sidebar {
  width: 240px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  scrollbar-gutter: stable;
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
}
.chat-sidebar-loading, .chat-sidebar-empty {
  padding: 20px 16px;
  font-size: 13px;
  color: var(--text-muted);
}
.chat-agent-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: flex-start;
  flex: 0 0 auto;
  gap: var(--space-2);
  min-height: 64px;
  height: auto;
  padding: var(--space-3) 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
  max-width: 100%;
  min-width: 0;
}
.chat-agent-item:hover { background: var(--bg-hover); }
.chat-agent-item.selected { background: color-mix(in srgb, var(--accent) 12%, transparent); border-left: 3px solid var(--accent); }
.chat-agent-avatar { width: 40px; min-width: 0; flex-shrink: 0; }
.chat-avatar { border-radius: 50%; display: block; object-fit: cover; }
.chat-avatar-mono { border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--text); flex-shrink: 0; }
.chat-agent-info { min-width: 0; overflow: visible; }
.chat-agent-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
  font-size: var(--font-ui-md);
  font-weight: 600;
  line-height: var(--line-tight);
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}
.chat-agent-preview {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-size: var(--font-ui-xs);
  color: var(--text-secondary);
  line-height: 1.35;
  max-height: calc(1.35em * 2);
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
  margin-top: 3px;
}
.chat-agent-time {
  align-self: start;
  max-width: 52px;
  min-width: 38px;
  font-size: 10px;
  color: var(--text-secondary);
  line-height: var(--line-tight);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-thread-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--bg-main);
}
.chat-thread-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--text-muted);
  font-size: 14px;
}
.chat-thread-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
  flex-shrink: 0;
}
.chat-thread-title { font-size: 15px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-thread-refresh {
  margin-left: auto;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px !important;
}
#chatRefreshBtn {
  min-height: 44px;
}
.chat-bubbles {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chat-bubble-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  min-width: 0;
}
.chat-bubble-row.outgoing { flex-direction: row-reverse; }
.chat-bubble-avatar { flex-shrink: 0; }
.chat-bubble { max-width: 72%; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.bubble-out {
  background: var(--accent);
  color: #fff;
  border-radius: 16px 4px 16px 16px;
  padding: 10px 14px;
  align-self: flex-end;
}
.bubble-in {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px 16px 16px 16px;
  padding: 10px 14px;
  align-self: flex-start;
}
.bubble-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.bubble-sender { font-size: 11px; font-weight: 600; opacity: 0.7; }
.bubble-id-chip {
  font-size: 10px;
  font-weight: 700;
  background: rgba(255,255,255,0.2);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: monospace;
}
.bubble-out .bubble-id-chip { background: rgba(255,255,255,0.25); color: #fff; }
.bubble-in .bubble-id-chip { background: var(--bg-hover); color: var(--text-secondary); }
.bubble-text { font-size: 13px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.bubble-out .bubble-text { color: #fff; }
.bubble-time { font-size: 10px; opacity: 0.55; text-align: right; margin-top: 2px; }
.chat-compose {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--bg-card);
  flex-shrink: 0;
}
.chat-compose-row { display: flex; gap: 8px; align-items: flex-end; }
.chat-compose-input {
  flex: 1;
  resize: none;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  min-height: 62px;
  max-height: 120px;
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}
.chat-compose-input:focus { outline: none; border-color: var(--accent); }
.chat-send-btn {
  height: 44px !important;
  width: auto !important;
  min-width: 72px;
  max-width: 90px;
  white-space: nowrap;
  padding: 0 14px !important;
  flex-shrink: 0;
  font-size: 13px !important;
  align-self: flex-end;
}

@media (max-width: 760px) {
  #messagesPage .page-header { margin-bottom: 0; }
  #messagesPage .page-header-row {
    align-items: stretch;
    flex-wrap: wrap;
  }
  #messagesPage .page-header-row > div:first-child {
    min-width: 0;
    flex: 1 1 180px;
  }
  #chatRefreshBtn {
    min-height: 44px;
  }
  .chat-layout {
    flex-direction: column;
    height: calc(100dvh - 244px);
    min-height: 470px;
    border-radius: 10px;
  }
  .chat-sidebar {
    width: 100%;
    max-height: 168px;
    flex: 0 0 auto;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .chat-agent-item {
    min-height: 60px;
  }
  .chat-thread-panel {
    min-height: 0;
    flex: 1 1 auto;
  }
  .chat-thread-header {
    padding: 10px 12px;
  }
  .chat-bubbles {
    padding: 12px;
    gap: 10px;
  }
  .chat-bubble {
    max-width: min(86%, calc(100% - 36px));
  }
  .chat-compose {
    padding: 10px 12px;
  }
  .chat-compose-row {
    align-items: stretch;
  }
  .chat-compose-input {
    min-height: 54px;
    max-height: 104px;
  }
  .chat-send-btn {
    align-self: stretch;
  }
}

@media (max-width: 430px) {
  .chat-layout {
    height: calc(100dvh - 258px);
    min-height: 460px;
  }
  .chat-sidebar {
    max-height: 132px;
  }
  .chat-bubble-avatar {
    display: none;
  }
  .chat-bubble {
    max-width: 92%;
  }
  .chat-compose-row {
    flex-direction: column;
  }
  .chat-send-btn {
    width: 100% !important;
    max-width: none;
  }
}

/* Unread badge */
.chat-agent-item.unread .chat-agent-name { font-weight: 700; }
.chat-unread-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  margin-left: 6px;
  vertical-align: middle;
  flex-shrink: 0;
}
.unread-preview { font-weight: 600; color: var(--text) !important; }

/* === Agent reauth + terminal === */
.agent-reauth-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: color-mix(in srgb, #ef4444 12%, transparent);
  border: 1px solid #ef4444;
  border-radius: 6px;
  padding: 6px 10px;
  margin: 8px 0 0;
}
.agent-reauth-reason { font-size: 11px; color: #ef4444; font-weight: 600; flex: 1; }
.agent-reauth-banner .btn-danger {
  background: linear-gradient(180deg, rgba(248, 113, 113, 0.18), rgba(248, 113, 113, 0.09));
  color: #fecaca;
  border: 1px solid rgba(248, 113, 113, 0.46);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}
.agent-reauth-banner .btn-danger:hover {
  background: linear-gradient(180deg, rgba(248, 113, 113, 0.30), rgba(248, 113, 113, 0.16));
  border-color: rgba(248, 113, 113, 0.62);
  color: #fee2e2;
}
.agent-reauth-banner .btn-danger:disabled { opacity: 0.6; cursor: not-allowed; }
.agent-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.agent-terminal-btn { font-size: 11px; display: flex; align-items: center; gap: 4px; }

main.agents-active {
  max-width: none;
  min-height: calc(100dvh - 64px);
  background:
    radial-gradient(circle at 18% -10%, rgba(96, 165, 250, 0.14), transparent 30%),
    linear-gradient(180deg, #111315 0%, #151719 46%, #101214 100%);
  color: #f5f7fa;
}

main.team-active {
  max-width: none;
  min-height: calc(100dvh - 64px);
  background:
    linear-gradient(180deg, var(--bg-card) 0%, var(--bg-main) 46%, var(--bg-main) 100%);
  color: var(--text);
}

[data-theme="dark"] main.team-active {
  background:
    linear-gradient(180deg, #0b0d10 0%, #050505 46%, #000000 100%);
  color: #f5f7fa;
}

main.agents-active .page-header,
main.team-active .page-header {
  margin-bottom: 18px;
}

main.agents-active .page-header h1 { color: #f5f7fa; }
main.team-active .page-header h1 { color: var(--text); }
[data-theme="dark"] main.team-active .page-header h1 { color: #f5f7fa; }

main.agents-active .subtitle { color: rgba(245, 247, 250, 0.68); }
main.team-active .subtitle { color: var(--text-secondary); }
[data-theme="dark"] main.team-active .subtitle { color: #c6ccd5; }

main.agents-active #analyzeAllModelsBtn,
main.agents-active #addAgentBtn,
main.team-active #refreshTeamBtn,
.modal-close {
  min-width: 44px;
  min-height: 44px;
}

main.agents-active #analyzeAllModelsBtn,
main.team-active #refreshTeamBtn {
  border-color: color-mix(in srgb, var(--border) 82%, var(--text) 10%);
  background: color-mix(in srgb, var(--bg-card) 90%, transparent);
  color: var(--text);
}

[data-theme="dark"] main.agents-active #analyzeAllModelsBtn,
[data-theme="dark"] main.team-active #refreshTeamBtn {
  border-color: rgba(198, 204, 213, 0.18);
  background: rgba(245, 247, 250, 0.08);
  color: #f5f7fa;
}

/* === Agents page redesign: dense, stable operational cards === */
#agentsPage .agents-grid[data-view="grid"] {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* List (compact directory) view: the grid container just holds the data-table
   wrapper, which owns horizontal scroll on narrow viewports so the page never
   overflows. */
#agentsPage .agents-grid[data-view="list"] {
  display: block;
}

/* Directory data-table: dense agent rows (avatar+name, backend, status, model,
   actions) replacing the tall card wall as the default operational view. */
#agentsPage .agents-table-wrap {
  border-color: rgba(245, 247, 250, 0.14);
  background: rgba(245, 247, 250, 0.03);
}
#agentsPage .agents-table {
  min-width: 760px;
}
#agentsPage .agents-table th {
  color: rgba(245, 247, 250, 0.6);
  background: rgba(245, 247, 250, 0.04);
  white-space: nowrap;
}
#agentsPage .agents-table th,
#agentsPage .agents-table td {
  border-bottom-color: rgba(245, 247, 250, 0.1);
  vertical-align: middle;
}
#agentsPage .agents-table .agents-col-actions {
  text-align: right;
}
/* Pin the actions column to the right edge of the horizontal-scroll wrapper so
   the primary row controls (conversation, Terminal) are never clipped at
   tablet/narrow widths where the table min-width (760px) forces internal scroll.
   The Agents page is dark in both themes, so a solid dark backing is safe; the
   left hairline + shadow read as an intentional pinned column and mask the
   content scrolling underneath. */
#agentsPage .agents-table th.agents-col-actions,
#agentsPage .agents-table td.agents-col-actions {
  position: sticky;
  right: 0;
  z-index: 2;
  background: var(--gd-bg-2, #0a1628);
  box-shadow: inset 1px 0 0 rgba(184, 211, 255, 0.16),
    -12px 0 14px -10px rgba(3, 7, 18, 0.6);
}
#agentsPage .agent-row:hover td.agents-col-actions {
  background: #0d1b30;
}
#agentsPage .agent-row {
  cursor: pointer;
  transition: background var(--transition);
}
#agentsPage .agent-row:hover {
  background: rgba(245, 247, 250, 0.06);
}
#agentsPage .agent-row-id {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
#agentsPage .agent-row-id .agent-avatar {
  width: 36px;
  height: 36px;
  min-width: 36px;
  font-size: 15px;
  border-radius: 50%;
}
#agentsPage .agent-row-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
#agentsPage .agent-row-name {
  font-weight: 650;
  color: #f5f7fa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#agentsPage .agent-row-desc {
  font-size: var(--font-size-sm);
  color: rgba(245, 247, 250, 0.55);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 42ch;
}
#agentsPage .agent-row-backend {
  color: rgba(245, 247, 250, 0.82);
  border-color: rgba(245, 247, 250, 0.2);
  background: rgba(245, 247, 250, 0.06);
}
#agentsPage .agent-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  white-space: nowrap;
}
#agentsPage .agent-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(245, 247, 250, 0.18);
  background: rgba(245, 247, 250, 0.06);
  color: rgba(245, 247, 250, 0.8);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
#agentsPage .agent-row-icon:hover {
  border-color: rgba(96, 165, 250, 0.6);
  color: #f5f7fa;
  background: rgba(96, 165, 250, 0.16);
}
#agentsPage .agent-row-login {
  min-height: 44px;
}
/* Headless Claude agents have no live tmux terminal: the control is rendered
   non-interactive (a disabled button in card view, a static span in row view).
   Dim it and suppress the row-icon hover affordance so it does not read as
   clickable. */
#agentsPage .agent-row-icon.agent-terminal-disabled,
#agentsPage .agent-row-icon.agent-terminal-disabled:hover {
  cursor: not-allowed;
  opacity: 0.45;
  border-color: rgba(245, 247, 250, 0.18);
  background: rgba(245, 247, 250, 0.06);
  color: rgba(245, 247, 250, 0.8);
}
.agent-card-actions .agent-terminal-disabled[disabled] {
  cursor: not-allowed;
  opacity: 0.55;
}

/* --- Summary strip + toolbar (shared dark-surface treatment) --- */
#agentsPage .agents-summary {
  margin-bottom: 14px;
}
main.agents-active .agents-summary .stat-card {
  background: rgba(245, 247, 250, 0.05);
  border-color: rgba(245, 247, 250, 0.14);
  text-align: left;
  padding: 12px 14px;
}
main.agents-active .agents-summary .stat-value {
  color: #f5f7fa;
  font-size: 22px;
}
main.agents-active .agents-summary .stat-label {
  color: rgba(245, 247, 250, 0.62);
}
main.agents-active .agents-summary .stat-card.is-alert {
  border-color: rgba(96, 165, 250, 0.5);
  background: rgba(96, 165, 250, 0.12);
}
main.agents-active .agents-summary .stat-card.is-alert .stat-value {
  color: #93c5fd;
}

#agentsPage .agents-toolbar {
  margin-bottom: 16px;
}
#agentsPage .agents-search {
  position: relative;
  flex: 1 1 240px;
  min-width: 0;
  display: flex;
  align-items: center;
}
#agentsPage .agents-search-icon {
  position: absolute;
  left: 12px;
  color: rgba(245, 247, 250, 0.5);
  pointer-events: none;
}
#agentsPage .agents-search-input {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px 8px 34px;
  border-radius: 999px;
  border: 1px solid rgba(245, 247, 250, 0.18);
  background: rgba(245, 247, 250, 0.06);
  color: #f5f7fa;
  font-size: 13px;
}
#agentsPage .agents-search-input::placeholder { color: rgba(245, 247, 250, 0.45); }
#agentsPage .agents-search-input:focus {
  outline: none;
  border-color: rgba(96, 165, 250, 0.6);
  background: rgba(245, 247, 250, 0.1);
}
#agentsPage .agents-filter {
  min-height: 44px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(245, 247, 250, 0.18);
  background: rgba(245, 247, 250, 0.06);
  color: #f5f7fa;
  font-size: 13px;
  cursor: pointer;
}
#agentsPage .agents-filter:focus {
  outline: none;
  border-color: rgba(96, 165, 250, 0.6);
}
#agentsPage .agents-view-toggle {
  flex: 0 0 auto;
  background: rgba(245, 247, 250, 0.06);
  border-color: rgba(245, 247, 250, 0.18);
}
#agentsPage .agents-view-toggle > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 6px 12px;
  color: rgba(245, 247, 250, 0.66);
}
#agentsPage .agents-view-toggle > button.active {
  background: rgba(245, 247, 250, 0.16);
  color: #f5f7fa;
  box-shadow: none;
}
#agentsPage .agents-empty {
  background: rgba(245, 247, 250, 0.04);
  border-color: rgba(245, 247, 250, 0.2);
  color: rgba(245, 247, 250, 0.78);
}
#agentsPage .agents-empty strong { color: #f5f7fa; }

@media (max-width: 768px) {
  #agentsPage .agents-toolbar > .agents-filter,
  #agentsPage .agents-toolbar > .agents-search { flex-basis: 100%; }
  #agentsPage .agents-view-toggle { flex: 1 1 100%; justify-content: center; }
}

#agentsPage .agent-card {
  min-width: 0;
  min-height: 226px;
  padding: 18px;
  border-radius: 8px;
  cursor: pointer;
  background: #1b1f23;
  border-color: rgba(245, 247, 250, 0.14);
  color: #f5f7fa;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
}

#agentsPage .agent-card-top {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-bottom: 14px;
}

#agentsPage .agent-card-info,
#agentsPage .agent-name,
#agentsPage .agent-desc {
  min-width: 0;
}

#agentsPage .agent-name {
  color: #f5f7fa;
  font-size: 15px;
  line-height: 1.25;
  margin: 0 0 5px;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

#agentsPage .agent-desc {
  color: rgba(245, 247, 250, 0.76);
  font-size: 12.5px;
  line-height: 1.45;
  min-height: 0;
  overflow: visible;
  overflow-wrap: anywhere;
  display: block;
}

#agentsPage .agent-card-footer {
  gap: 7px;
  padding-top: 10px;
  align-items: center;
}

#agentsPage .agent-model-badge,
#agentsPage .process-indicator,
#agentsPage .tg-status,
#agentsPage .status-badge {
  min-width: 0;
  max-width: 100%;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#agentsPage .process-indicator,
#agentsPage .tg-status {
  border: 1px solid rgba(245, 247, 250, 0.16);
  border-radius: 999px;
  padding: 3px 8px;
  background: rgba(245, 247, 250, 0.08);
  color: rgba(245, 247, 250, 0.82);
  font-size: 11.5px;
  line-height: 1;
}

#agentsPage .agent-card-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
}

#agentsPage .agent-card-actions .btn-compact {
  min-width: 0;
  min-height: 44px;
  justify-content: center;
  gap: 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#agentsPage .agent-terminal-btn {
  font-size: 12px;
}

#agentsPage .add-card {
  min-height: 226px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-style: dashed;
  color: rgba(245, 247, 250, 0.7);
  background: rgba(245, 247, 250, 0.04);
  border-color: rgba(245, 247, 250, 0.2);
}

#agentsPage .add-card span {
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
}

#agentsPage .agent-state-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 132px;
  cursor: default;
}

#agentsPage .agent-state-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(245, 247, 250, 0.1);
  position: relative;
}

#agentsPage .agent-state-card.loading .agent-state-icon::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 2px solid rgba(245, 247, 250, 0.22);
  border-top-color: #60a5fa;
  border-radius: 50%;
  animation: agent-state-spin 0.8s linear infinite;
}

#agentsPage .agent-state-card.error {
  border-color: rgba(191, 77, 67, 0.45);
}

#agentsPage .agent-state-card.error .agent-state-icon {
  background: rgba(191, 77, 67, 0.18);
}

@keyframes agent-state-spin {
  to { transform: rotate(360deg); }
}

/* =====================================================================
   R2 Agents/Team Structural Redesign — ag-* namespace
   KPI strip, status-bar cards, premium table, status pills, stack badge
   ===================================================================== */

/* --- KPI Strip (replaces flat stat-grid) --- */
/* === Fleet-status hero band (replaces the flat 6-chip KPI strip) === */
#agentsPage .ag-fleet-band {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
#agentsPage .ag-fleet-primary {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 18px 22px;
  border-radius: var(--gd-radius-md);
  background: var(--gd-glass-bg);
  border: var(--gd-glass-border);
  box-shadow: 0 6px 30px rgba(0,0,0,0.24), var(--gd-inner-light);
  backdrop-filter: blur(var(--gd-glass-blur));
  -webkit-backdrop-filter: blur(var(--gd-glass-blur));
  min-width: 0;
}
#agentsPage .ag-fleet-total {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  padding-right: 20px;
  border-right: 1px solid var(--gd-border);
}
#agentsPage .ag-fleet-total-num {
  font-size: 44px;
  font-weight: 760;
  line-height: 0.95;
  letter-spacing: -1.5px;
  color: var(--gd-text);
}
#agentsPage .ag-fleet-total-cap {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--gd-text-muted);
  margin-top: 6px;
  max-width: 12ch;
  line-height: 1.3;
}
#agentsPage .ag-fleet-health {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#agentsPage .ag-fleet-bar {
  display: flex;
  height: 12px;
  border-radius: var(--gd-radius-pill);
  overflow: hidden;
  gap: 2px;
  background: rgba(255,255,255,0.04);
}
#agentsPage .ag-fleet-seg {
  flex-grow: 1;
  min-width: 4px;
  border-radius: 2px;
  transition: flex-grow 0.4s ease;
}
#agentsPage .ag-fleet-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}
#agentsPage .ag-fleet-leg {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--gd-text-2);
  font-weight: 500;
}
#agentsPage .ag-fleet-leg i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
#agentsPage .ag-fleet-leg b { color: var(--gd-text); font-weight: 700; }
/* secondary enterprise stat rail */
#agentsPage .ag-fleet-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}
#agentsPage .ag-fleet-tile {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border-radius: var(--gd-radius-sm);
  background: var(--gd-surface);
  border: var(--gd-glass-border);
  backdrop-filter: blur(var(--gd-glass-blur));
  -webkit-backdrop-filter: blur(var(--gd-glass-blur));
  min-width: 0;
}
#agentsPage .ag-fleet-tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--gd-radius-xs);
  flex-shrink: 0;
  background: rgba(255,255,255,0.05);
  color: var(--gd-text-muted);
}
#agentsPage .ag-fleet-tile-run   .ag-fleet-tile-icon { color: var(--gd-success); background: rgba(134,239,172,0.12); }
#agentsPage .ag-fleet-tile-ready .ag-fleet-tile-icon { color: var(--gd-accent-blue); background: rgba(96,165,250,0.12); }
#agentsPage .ag-fleet-tile-alert .ag-fleet-tile-icon { color: var(--gd-warning); background: rgba(251,191,36,0.14); }
#agentsPage .ag-fleet-tile-body { min-width: 0; }
#agentsPage .ag-fleet-tile-num {
  font-size: 22px;
  font-weight: 720;
  line-height: 1;
  letter-spacing: -0.5px;
  color: var(--gd-text);
}
#agentsPage .ag-fleet-tile-run   .ag-fleet-tile-num { color: var(--gd-success); }
#agentsPage .ag-fleet-tile-alert .ag-fleet-tile-num { color: var(--gd-warning); }
#agentsPage .ag-fleet-tile-label {
  font-size: 10.5px;
  color: var(--gd-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  margin-top: 3px;
}
#agentsPage .ag-fleet-tile-split {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
#agentsPage .ag-fleet-split-cap {
  font-size: 10.5px;
  color: var(--gd-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
#agentsPage .ag-fleet-split-rows { display: flex; gap: 6px; flex-wrap: wrap; }
#agentsPage .ag-fleet-split-rows .ag-stack-badge b { color: var(--gd-text); font-weight: 700; margin-left: 3px; }

/* --- Status pill (used in cards + table rows) --- */
#agentsPage .ag-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 7px;
  border-radius: var(--gd-radius-pill);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.05px;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.4;
}
#agentsPage .ag-status-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: currentColor;
}
#agentsPage .ag-status-pill.ag-s-running {
  background: rgba(134, 239, 172, 0.14);
  color: var(--gd-success);
  border: 1px solid rgba(134, 239, 172, 0.28);
}
#agentsPage .ag-status-pill.ag-s-running::before { animation: pulse-dot 2s ease-in-out infinite; }
#agentsPage .ag-status-pill.ag-s-ready {
  background: rgba(96, 165, 250, 0.12);
  color: var(--gd-accent-blue);
  border: 1px solid rgba(96, 165, 250, 0.26);
}
#agentsPage .ag-status-pill.ag-s-stopped {
  background: rgba(143, 161, 184, 0.1);
  color: var(--gd-text-muted);
  border: 1px solid rgba(143, 161, 184, 0.2);
}
#agentsPage .ag-status-pill.ag-s-needsauth {
  background: rgba(251, 191, 36, 0.12);
  color: var(--gd-warning);
  border: 1px solid rgba(251, 191, 36, 0.28);
}
#agentsPage .ag-status-pill.ag-s-headless {
  background: rgba(103, 232, 249, 0.1);
  color: var(--gd-accent);
  border: 1px solid rgba(103, 232, 249, 0.22);
}

/* --- Merged backend+model badge --- */
#agentsPage .ag-stack-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--gd-radius-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1px;
  background: rgba(245, 247, 250, 0.07);
  border: 1px solid rgba(245, 247, 250, 0.16);
  color: var(--gd-text-2);
  white-space: nowrap;
  gap: 0;
}
#agentsPage .ag-stack-badge.ag-sb-claude {
  background: rgba(103, 232, 249, 0.09);
  border-color: rgba(103, 232, 249, 0.22);
  color: var(--gd-accent);
}
#agentsPage .ag-stack-badge.ag-sb-codex {
  background: rgba(96, 165, 250, 0.09);
  border-color: rgba(96, 165, 250, 0.22);
  color: var(--gd-accent-blue);
}
#agentsPage .ag-stack-sep { opacity: 0.4; margin: 0 4px; font-weight: 400; }

/* --- Grid card (ag-card) --- */
/* === Status-grouped roster (section per status bucket) === */
#agentsPage .ag-group { min-width: 0; }
#agentsPage .ag-group-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 2px 11px;
  margin-bottom: 2px;
}
#agentsPage .ag-group-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.04);
}
#agentsPage .ag-group-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--gd-text-2);
}
#agentsPage .ag-group-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: var(--gd-radius-pill);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--gd-text-muted);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--gd-border);
}
#agentsPage .ag-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 286px), 1fr));
  align-items: stretch;
  gap: 14px;
}

/* === Agent card (vertical, avatar status-ring) === */
#agentsPage .ag-card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 15px 16px 14px;
  border-radius: var(--gd-radius-md);
  background: var(--gd-glass-bg-soft), var(--gd-surface);
  border: var(--gd-glass-border);
  box-shadow: 0 4px 24px rgba(0,0,0,0.22), var(--gd-inner-light);
  backdrop-filter: blur(var(--gd-glass-blur));
  -webkit-backdrop-filter: blur(var(--gd-glass-blur));
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.14s;
  outline: none;
}
#agentsPage .ag-card:hover {
  border-color: var(--gd-border-hover);
  box-shadow: 0 10px 44px rgba(0,0,0,0.32), var(--gd-inner-light);
  transform: translateY(-2px);
}
#agentsPage .ag-card:focus-visible {
  border-color: var(--gd-border-strong);
  box-shadow: 0 8px 40px rgba(0,0,0,0.3), var(--gd-focus-ring);
}
/* top row: avatar-ring + identity + hover actions */
#agentsPage .ag-card-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
/* avatar status-ring (replaces the old left accent bar) */
#agentsPage .ag-avatar-ring {
  position: relative;
  flex-shrink: 0;
  padding: 2px;
  border-radius: 50%;
  background: rgba(143,161,184,0.32);
}
#agentsPage .ag-avatar-ring .agent-avatar {
  width: 42px;
  height: 42px;
  min-width: 42px;
  font-size: 16px;
  border-radius: 50%;
  display: block;
}
#agentsPage .ag-status-dot {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(143,161,184,0.7);
  border: 2px solid var(--gd-bg-2, #0a1628);
}
#agentsPage .ag-s-running   .ag-avatar-ring { background: var(--gd-success); }
#agentsPage .ag-s-running   .ag-status-dot  { background: var(--gd-success); }
#agentsPage .ag-s-running   .ag-status-dot  { animation: pulse-dot 2s ease-in-out infinite; }
#agentsPage .ag-s-ready     .ag-avatar-ring { background: var(--gd-accent-blue); }
#agentsPage .ag-s-ready     .ag-status-dot  { background: var(--gd-accent-blue); }
#agentsPage .ag-s-headless  .ag-avatar-ring { background: var(--gd-accent); }
#agentsPage .ag-s-headless  .ag-status-dot  { background: var(--gd-accent); }
#agentsPage .ag-s-needsauth .ag-avatar-ring { background: var(--gd-warning); }
#agentsPage .ag-s-needsauth .ag-status-dot  { background: var(--gd-warning); }
#agentsPage .ag-s-stopped   .ag-avatar-ring { background: rgba(143,161,184,0.42); }
#agentsPage .ag-card-identity {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 1px;
}
#agentsPage .ag-card-name {
  font-size: 14px;
  font-weight: 650;
  color: var(--gd-text);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#agentsPage .ag-card-role {
  font-size: 11.5px;
  color: var(--gd-text-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* hover-reveal quick actions (top-right) */
#agentsPage .ag-card-quick-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s;
  align-self: flex-start;
}
#agentsPage .ag-card:hover .ag-card-quick-actions,
#agentsPage .ag-card:focus-within .ag-card-quick-actions { opacity: 1; }
#agentsPage .ag-quick-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: var(--gd-radius-xs);
  border: 1px solid var(--gd-border);
  background: rgba(245, 247, 250, 0.06);
  color: var(--gd-text-2);
  cursor: pointer;
  transition: background 0.13s, border-color 0.13s, color 0.13s;
}
#agentsPage .ag-quick-btn:hover {
  background: rgba(96, 165, 250, 0.18);
  border-color: rgba(96, 165, 250, 0.5);
  color: var(--gd-text);
}
#agentsPage .ag-quick-btn:disabled,
#agentsPage .ag-quick-btn.ag-btn-disabled {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}
/* meta row: status pill + stack badge + activity badge */
#agentsPage .ag-card-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 2px;
  border-top: 1px solid rgba(184, 211, 255, 0.08);
}
#agentsPage .ag-card-meta > * { margin-top: 10px; }
#agentsPage .ag-card .agent-reauth-banner { margin: 0; }

/* --- Premium list table (ag-table) --- */
#agentsPage .ag-table-wrap {
  overflow-x: auto;
  border-radius: var(--gd-radius-sm);
  border: var(--gd-glass-border);
  background: var(--gd-surface);
  backdrop-filter: blur(var(--gd-glass-blur));
  -webkit-backdrop-filter: blur(var(--gd-glass-blur));
}
#agentsPage .ag-table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
}
#agentsPage .ag-table thead th {
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gd-text-muted);
  background: rgba(245, 247, 250, 0.04);
  border-bottom: 1px solid var(--gd-border);
  white-space: nowrap;
}
#agentsPage .ag-table td {
  padding: 0;
  border-bottom: 1px solid rgba(184, 211, 255, 0.09);
  vertical-align: middle;
}
#agentsPage .ag-row {
  cursor: pointer;
  transition: background 0.13s;
}
#agentsPage .ag-row:hover { background: rgba(245, 247, 250, 0.055); }
#agentsPage .ag-row:last-child td { border-bottom: none; }
/* status-bucket group header row inside the grouped table */
#agentsPage tbody.ag-tbody-group + tbody.ag-tbody-group .ag-group-row td { border-top: 1px solid var(--gd-border); }
#agentsPage .ag-group-row td {
  padding: 0;
  background: rgba(255,255,255,0.022);
  border-bottom: 1px solid var(--gd-border);
}
#agentsPage .ag-group-row-inner {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
}
/* agent cell: avatar-ring + identity */
#agentsPage .ag-cell-agent { min-width: 190px; }
#agentsPage .ag-row-agent-cell {
  display: flex;
  align-items: center;
  min-width: 0;
  padding-left: 12px;
}
#agentsPage .ag-avatar-ring-sm { padding: 2px; }
#agentsPage .ag-avatar-ring-sm .agent-avatar {
  width: 32px;
  height: 32px;
  min-width: 32px;
  font-size: 12.5px;
}
#agentsPage .ag-avatar-ring-sm .ag-status-dot {
  width: 10px;
  height: 10px;
  border-width: 2px;
}
#agentsPage .ag-row-avatar.agent-avatar {
  border-radius: 50%;
  flex-shrink: 0;
  display: block;
}
#agentsPage .ag-row-identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 12px 14px 12px 10px;
}
#agentsPage .ag-row-name {
  font-size: 13px;
  font-weight: 650;
  color: var(--gd-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#agentsPage .ag-row-role {
  font-size: 11.5px;
  color: var(--gd-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 36ch;
}
#agentsPage td.ag-cell-status { padding: 8px 14px; white-space: nowrap; }
#agentsPage td.ag-cell-stack  { padding: 8px 14px; white-space: nowrap; }
#agentsPage td.ag-col-actions {
  text-align: right;
  padding: 6px 10px;
  position: sticky;
  right: 0;
  z-index: 2;
  background: var(--gd-bg-2, #0a1628);
  box-shadow: inset 1px 0 0 rgba(184, 211, 255, 0.13),
    -10px 0 12px -8px rgba(3, 7, 18, 0.55);
}
#agentsPage .ag-row:hover td.ag-col-actions { background: rgba(10, 28, 50, 0.98); }
#agentsPage .ag-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}
#agentsPage .ag-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: var(--gd-radius-xs);
  border: 1px solid var(--gd-border);
  background: rgba(245, 247, 250, 0.05);
  color: var(--gd-text-2);
  cursor: pointer;
  transition: background 0.13s, border-color 0.13s, color 0.13s;
}
#agentsPage .ag-action-icon:hover {
  background: rgba(96, 165, 250, 0.16);
  border-color: rgba(96, 165, 250, 0.5);
  color: var(--gd-text);
}
#agentsPage .ag-action-icon:disabled,
#agentsPage .ag-action-icon.ag-btn-disabled {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
  background: rgba(245, 247, 250, 0.05);
  border-color: var(--gd-border);
}
#agentsPage .ag-row-login {
  min-height: 44px;
}
/* activity badge inside ag contexts */
#agentsPage .ag-card-footer .activity-badge,
#agentsPage .ag-cell-status .activity-badge { font-size: 11px; padding: 3px 7px; }
/* empty/state */
#agentsPage .ag-empty {
  padding: 32px 20px;
  text-align: center;
  color: var(--gd-text-muted);
  border: var(--gd-glass-border);
  border-radius: var(--gd-radius-sm);
  background: var(--gd-surface);
}
#agentsPage .ag-empty strong { color: var(--gd-text); display: block; margin-bottom: 6px; }
/* mobile */
@media (max-width: 860px) {
  #agentsPage .ag-fleet-band { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  #agentsPage .ag-fleet-primary { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px; }
  #agentsPage .ag-fleet-total {
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
    padding: 0 0 12px;
    border-right: none;
    border-bottom: 1px solid var(--gd-border);
  }
  #agentsPage .ag-fleet-total-num { font-size: 34px; }
  #agentsPage .ag-fleet-total-cap { margin-top: 0; max-width: none; }
  #agentsPage .ag-card-quick-actions { opacity: 1; }
}

/* Terminal modal */
.terminal-modal {
  max-width: 1100px;
  width: 98vw;
  display: flex;
  flex-direction: column;
  /* Fixed height (not max-height): with a content-driven height the xterm
     FitAddon grows the modal as the pane repaints, which re-runs fit() and
     makes the modal oscillate ("vibrating terminal"). A fixed height gives the
     flex:1 container a stable size, so fit() settles and xterm scrolls
     internally instead of resizing the modal. */
  height: 90vh;
}
.terminal-modal .modal-header { flex-shrink: 0; }
/* min-height:0 lets the flex child actually shrink to the container; overflow
   hidden stops the xterm screen from pushing the modal taller. */
#terminalContainer { flex: 1; min-height: 0; overflow: hidden; }
.xterm { height: 100% !important; }

/* Terminal modal: fixed, viewport-safe work surface */
.modal.terminal-modal {
  width: min(1120px, calc(100vw - 32px));
  height: min(760px, calc(100dvh - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  border-radius: 8px;
  overflow: hidden;
}

.terminal-modal .modal-header {
  min-height: 56px;
  padding: 14px 16px;
}

.terminal-modal .modal-header h2 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#terminalContainer {
  background: #101316 !important;
  padding: 10px !important;
  border-radius: 0 !important;
  min-height: 0 !important;
  box-sizing: border-box;
}

.terminal-modal .xterm,
.terminal-modal .xterm-viewport,
.terminal-modal .xterm-screen {
  max-width: 100%;
}

.terminal-modal .xterm-viewport {
  scrollbar-width: thin;
}

/* === Docs viewer === */
.docs-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.docs-list {
  flex: 0 0 240px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 16px;
}
.docs-list-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--text, #222);
  text-decoration: none;
  font-size: 14px;
  border: 1px solid transparent;
}
.docs-list-title { line-height: 1.3; }
.docs-list-date {
  font-size: 11px;
  color: var(--text-muted, #888);
  font-variant-numeric: tabular-nums;
}
.docs-list-item:hover { background: var(--surface-2, rgba(127,127,127,0.08)); }
.docs-list-item.active {
  background: var(--surface-2, rgba(127,127,127,0.12));
  border-color: var(--border, rgba(127,127,127,0.25));
  font-weight: 600;
}
.docs-content {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 4px 40px;
  line-height: 1.65;
}
.markdown-body h1 { font-size: 1.7em; margin: 0.2em 0 0.6em; }
.markdown-body h2 { font-size: 1.35em; margin: 1.4em 0 0.5em; border-bottom: 1px solid var(--border, rgba(127,127,127,0.2)); padding-bottom: 0.2em; }
.markdown-body h3 { font-size: 1.12em; margin: 1.2em 0 0.4em; }
.markdown-body p { margin: 0.6em 0; }
.markdown-body ul, .markdown-body ol { margin: 0.5em 0; padding-left: 1.6em; }
.markdown-body li { margin: 0.25em 0; }
.markdown-body code {
  background: var(--surface-2, rgba(127,127,127,0.12));
  padding: 0.12em 0.4em;
  border-radius: 4px;
  font-size: 0.9em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.markdown-body pre {
  background: var(--surface-2, rgba(127,127,127,0.12));
  padding: 12px 14px;
  border-radius: 8px;
  overflow-x: auto;
}
.markdown-body pre code { background: none; padding: 0; }
.markdown-body table {
  border-collapse: collapse;
  margin: 0.8em 0;
  width: 100%;
}
.markdown-body th, .markdown-body td {
  border: 1px solid var(--border, rgba(127,127,127,0.3));
  padding: 7px 11px;
  text-align: left;
}
.markdown-body th { background: var(--surface-2, rgba(127,127,127,0.1)); }
.markdown-body blockquote {
  margin: 0.8em 0;
  padding: 0.4em 1em;
  border-left: 3px solid var(--border, rgba(127,127,127,0.4));
  color: var(--text-muted, #666);
}
.markdown-body hr { border: none; border-top: 1px solid var(--border, rgba(127,127,127,0.25)); margin: 1.4em 0; }
.markdown-body a { color: var(--accent, #3b82f6); }
@media (max-width: 760px) {
  .docs-layout { flex-direction: column; }
  .docs-list { flex-basis: auto; width: 100%; position: static; }
}

/* === Agent conversation (readable transcript) modal === */
.conversation-modal {
  width: min(900px, calc(100vw - 32px));
  height: min(760px, calc(100dvh - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
}
.conversation-modal .modal-header {
  min-height: 56px;
  padding: 14px 16px;
  flex-shrink: 0;
}
.conversation-modal .modal-header h2 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conversation-toolbar {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border, #2a2a2a);
  flex-shrink: 0;
}
.conversation-toolbar #conversationSearch {
  min-width: 0;
  min-height: 46px;
  height: 46px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid var(--border, #333);
  background: var(--bg-input, #1c1c1c);
  color: inherit;
}
.conversation-filter {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  opacity: .9;
  white-space: nowrap;
}
.conversation-toolbar .btn-compact {
  min-height: 46px;
  height: 46px;
}
.conversation-container {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #141414;
  color: #f5f7fa;
  border-radius: 0;
  scrollbar-width: thin;
}
.conversation-empty { opacity: .6; text-align: center; padding: 30px; }
.conv-load-older {
  display: block;
  margin: 0 auto 10px;
  padding: 6px 16px;
  background: var(--bg);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 14px;
  font-size: 12px;
  cursor: pointer;
}
.conv-load-older:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
.conv-load-older:disabled { opacity: .5; cursor: default; }
.conv-row { display: flex; }
.conv-row.conv-in { justify-content: flex-start; }
.conv-row.conv-out { justify-content: flex-end; }
.conv-bubble {
  max-width: min(72ch, 82%);
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--border, #2a2a2a) 82%, transparent);
  color: #f5f7fa;
  font-size: 13.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.conv-in .conv-bubble { background: #202c35; border-bottom-left-radius: 3px; }
.conv-out .conv-bubble { background: #1d3529; border-bottom-right-radius: 3px; }
.conv-meta { font-size: 10.5px; opacity: .72; margin-bottom: 4px; }
.conv-text { white-space: normal; word-break: break-word; }
.conv-row.conv-note { justify-content: center; }
.conv-note-text { font-size: 12px; opacity: .55; font-style: italic; max-width: 88%; }
.conv-row.conv-action { justify-content: flex-start; }
.conv-action-text {
  max-width: 100%;
  font-size: 11.5px;
  opacity: .62;
  font-family: 'JetBrains Mono', monospace;
  display: flex;
  gap: 8px;
  align-items: baseline;
  overflow-wrap: anywhere;
}
.conv-action-ts { opacity: .6; font-size: 10px; }

@media (max-width: 640px) {
  .conversation-toolbar {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 8px;
    padding: 10px 12px;
  }
  .conversation-toolbar #conversationSearch,
  .conversation-filter,
  .conversation-toolbar .btn-compact {
    width: 100%;
    min-width: 0;
  }
  .conversation-filter,
  .conversation-toolbar .btn-compact {
    justify-content: center;
  }
  .conversation-filter span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .conversation-container {
    padding: 12px;
  }
  .conv-bubble {
    max-width: 100%;
  }
  .conv-action-text {
    flex-direction: column;
    gap: 3px;
  }
}

/* === Card 09: canonical mobile full-screen for content-modal shells ===
   Design-system §3: every modal collapses to a full-screen sheet ≤768. The
   bespoke content shells (kanban-detail, agent-detail, terminal, conversation)
   predate the foundation `.modal--full-mobile` primitive and set their own
   `min()` widths/heights, so they are migrated onto the same full-screen
   contract here. Placed AFTER their base rules so source order wins at equal
   specificity. Small confirm/form dialogs keep their centred card. */
@media (max-width: 768px) {
  .modal.modal-kanban-detail,
  .modal.modal-agent-detail,
  .modal.terminal-modal,
  .modal.conversation-modal {
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    border: none;
    /* Full-screen sheets fade in, they do not scale-in. Dropping the base
       `.modal` scale(0.97) keeps inner touch targets (e.g. `.modal-close`) at
       their true 44px on mobile; the `.active` state resolves to scale(1)
       regardless, so the visible result is identical. */
    transform: none;
  }
  /* Header stays visible while the dialog body scrolls under it. */
  .modal.modal-agent-detail .modal-header,
  .modal.terminal-modal .modal-header,
  .modal.conversation-modal .modal-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-modal);
  }

  .modal.modal-kanban-detail .modal-header {
    position: static;
    z-index: auto;
    background: var(--bg-modal);
  }
}

/* === Mobile login QR modal === */
.mobile-login-qr {
  width: 240px;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
}
.mobile-login-qr svg { width: 100%; height: 100%; display: block; }
.mobile-login-qr .muted { color: var(--muted, #888); text-align: center; font-size: 13px; }
.mobile-login-warn {
  font-size: 12px;
  color: var(--muted, #888);
  text-align: center;
  margin: 0;
  line-height: 1.4;
}

/* === Docs viewer: content toolbar (.md download) === */
.docs-content-toolbar { display: flex; justify-content: flex-end; margin: 0 0 12px; }
.docs-content-toolbar .btn-compact { font-size: 12px; }

/* === Idea box: score chip + clickable title === */

/* === Naplo (Audit Timeline) === */
.naplo-toolbar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.naplo-source-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.naplo-tab { padding: 5px 14px; border-radius: 20px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); cursor: pointer; font-size: 13px; transition: background 0.15s, color 0.15s; }
.naplo-tab.active { background: var(--accent, #2563eb); color: #fff; border-color: transparent; }
.naplo-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.naplo-date { padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); color: var(--text); font-size: 13px; }
.naplo-date-sep { color: var(--text-muted); font-size: 13px; }
.naplo-search { flex: 1; min-width: 160px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); color: var(--text); font-size: 13px; }
.naplo-summary { font-size: 13px; color: var(--text-muted); margin-bottom: 10px; }
.naplo-empty { color: var(--text-muted); font-size: 14px; text-align: center; margin-top: 40px; }
.naplo-empty.error { color: var(--danger, #ef4444); }
.naplo-timeline { display: flex; flex-direction: column; gap: 1px; }
.naplo-entry { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 6px; background: var(--bg-card); border: 1px solid var(--border); font-size: 13px; }
.naplo-entry-meta { display: flex; align-items: center; gap: 8px; }
.naplo-ts { color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.naplo-badge { padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; color: #fff; white-space: nowrap; }
.naplo-entry-detail { color: var(--text); line-height: 1.5; }
.naplo-entry-detail code { background: var(--bg, #f5f5f5); padding: 1px 5px; border-radius: 3px; font-family: monospace; font-size: 12px; }
.naplo-actor { color: var(--text-muted); font-size: 12px; }
.naplo-note { font-style: italic; color: var(--text-muted); }
.naplo-event-type { font-size: 11px; background: var(--bg); border-radius: 3px; padding: 1px 5px; color: var(--text-muted); }
.naplo-sensitive { font-size: 11px; color: var(--danger, #ef4444); font-weight: 600; }


/* Operational wide-page redesign layer for #0378a8a9. */

main.ops-wide-active {
  max-width: none;
  width: min(100%, 2560px);
  margin-inline: auto;
  padding: 28px clamp(20px, 2.4vw, 56px) 64px;
}

@media (min-width: 761px) {
  main.ops-wide-active.status-active {
    width: calc(100vw - 220px);
  }
}

main.ops-wide-active > .page {
  width: 100%;
  min-width: 0;
}

main.ops-wide-active .page-header {
  margin-bottom: 18px;
}

main.ops-wide-active .page-header-row {
  align-items: flex-start;
  gap: 16px;
}

main.ops-wide-active .page-header-row > div:first-child {
  min-width: 0;
}

main.ops-wide-active .page-header h1 {
  font-size: clamp(24px, 1.7vw, 34px);
  line-height: 1.12;
}

main.ops-wide-active .subtitle {
  max-width: 820px;
  line-height: 1.45;
}

main.ops-wide-active :is(.btn-primary, .btn-secondary, .btn-compact, button, select, input, textarea, .input) {
  max-width: 100%;
}

main.ops-wide-active :is(.btn-primary, .btn-secondary, .btn-compact, select, input, textarea, .input) {
  min-height: 44px;
}

#overviewPage .overview-stats,
#memoriesPage .mem-stats,
#connectorsPage .connector-stats,
#vaultPage .vault-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

#overviewPage .overview-grid {
  grid-template-columns: minmax(360px, 1.2fr) minmax(320px, 1fr);
  align-items: stretch;
}

/* Right rail: vertical stack (agent activity + quick actions) that fills the
   grid cell height so the Overview no longer leaves a large void under the
   agent-activity panel. The quick-actions card grows to absorb slack. */
.overview-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.overview-side > .overview-card { margin: 0; }
.overview-quick-card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.overview-quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 4px;
  align-content: start;
}
.overview-quick-item {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 56px;
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-card) 82%, var(--bg-hover) 18%);
  color: var(--text);
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.overview-quick-item:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.overview-quick-item:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--gd-focus-ring, 0 0 0 3px rgba(103,232,249,.22));
}
.overview-quick-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(96,165,250,.12);
  color: var(--accent);
}
.overview-quick-ic svg { width: 18px; height: 18px; }
.overview-quick-tx {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}
.overview-quick-label {
  font-size: 13px;
  font-weight: 650;
  color: var(--text);
  line-height: 1.25;
}
.overview-quick-sub {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#overviewPage .overview-stats {
  grid-template-columns: repeat(4, minmax(180px, 1fr));
}

#overviewPage .overview-card {
  min-height: 128px;
}

#overviewPage .overview-card:has(#agentActivityWidget) {
  min-height: 198px;
}

.overview-signal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.overview-signal {
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, var(--text) 12%);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg-card) 82%, var(--bg-hover) 18%);
}

.overview-signal span {
  display: block;
  color: var(--text-muted);
  font-size: var(--font-ui-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.overview-signal strong {
  display: block;
  margin-top: 6px;
  color: var(--text);
  font-size: 28px;
  line-height: 1;
}

.overview-signal.is-working {
  border-color: color-mix(in srgb, var(--success) 42%, var(--border) 58%);
  background: color-mix(in srgb, var(--success-soft) 55%, var(--bg-card) 45%);
}

.overview-signal.is-alert {
  border-color: color-mix(in srgb, var(--warning) 45%, var(--border) 55%);
  background: color-mix(in srgb, rgba(183, 121, 31, 0.14) 55%, var(--bg-card) 45%);
}

.overview-signal-note {
  margin-top: 12px;
  color: var(--text-secondary);
  font-size: var(--font-ui-sm);
  line-height: var(--line-normal);
}

/* Fleet panel — live running agents list */
.overview-fleet {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--gd-border, rgba(184,211,255,.12));
}
.overview-fleet:empty { display: none; }
.overview-fleet-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.overview-fleet-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.overview-fleet-count {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 20px;
  background: rgba(6,182,212,.18);
  color: #06b6d4;
}
.overview-fleet-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.overview-fleet-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 6px;
  cursor: default;
}
.overview-fleet-item:hover { background: rgba(184,211,255,.05); }
.overview-fleet-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  box-shadow: 0 0 5px #22c55e88;
}
.overview-fleet-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(6,182,212,.15);
  color: #06b6d4;
  font-size: 9px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
}
.overview-fleet-name {
  font-size: 12px;
  color: var(--text);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.overview-fleet-role {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(139,92,246,.18);
  color: #a78bfa;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
}

#overviewPage .overview-card,
#overviewPage .overview-stat,
#memoriesPage .stat-card,
#memoriesPage .mem-item,
#memoriesPage .mem-graph-view,
#connectorsPage .connector-card,
#connectorsPage .connector-external-paths,
#connectorsPage .catalog-card,
#docsPage .docs-list,
#docsPage .docs-content,
#statusPage .status-overall,
#statusPage .status-services,
#statusPage .status-incidents,
#statusPage .status-incident,
#schedulesPage .schedule-row,
#schedulesPage .pending-retries-banner,
#bgTasksPage .bg-task-card,
#naploPage .naplo-entry,
#recallPage .recall-item {
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 94%, var(--bg) 6%), var(--bg-card));
  border-color: color-mix(in srgb, var(--border) 82%, var(--text) 18%);
}

#memoriesPage .mem-toolbar,
#recallPage .recall-toolbar,
#naploPage .naplo-toolbar,
#bgTasksPage .bg-task-toolbar {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(320px, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 40%, transparent), transparent 48%),
    var(--bg-card);
}

#memoriesPage .mem-search-wrap,
#recallPage .recall-search-wrap,
#bgTasksPage .bg-task-prompt-input {
  min-width: 0;
}

#memoriesPage .mem-search,
#memoriesPage .mem-search-mode,
#memoriesPage .mem-agent-filter,
#recallPage .recall-search,
#recallPage .recall-date,
#recallPage .recall-expr,
#recallPage .recall-agent-filter,
#naploPage .naplo-date,
#naploPage .naplo-search,
#bgTasksPage .input {
  width: 100%;
  min-width: 0;
}

.bg-task-empty {
  display: grid;
  grid-template-columns: auto minmax(260px, 1fr) minmax(360px, 0.9fr);
  gap: 18px;
  align-items: center;
  min-height: 180px;
  padding: 22px;
  border: 1px dashed color-mix(in srgb, var(--border) 82%, var(--accent) 18%);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 38%, transparent), transparent 44%),
    color-mix(in srgb, var(--bg-card) 90%, var(--bg) 10%);
}

.bg-task-empty-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  color: var(--accent);
  background: var(--accent-soft);
  font-size: 26px;
  font-weight: 800;
}

.bg-task-empty h3 {
  margin: 0 0 6px;
  color: var(--text);
  font-size: 18px;
}

.bg-task-empty p {
  max-width: 620px;
  color: var(--text-secondary);
  font-size: var(--font-ui-md);
  line-height: var(--line-normal);
}

.bg-task-empty-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.bg-task-empty-grid span {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, var(--text) 22%);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--bg-card) 72%, var(--bg-hover) 28%);
  font-size: var(--font-ui-sm);
}

#memoriesPage .mem-tabs,
#connectorsPage .connector-tabs,
#naploPage .naplo-source-tabs {
  gap: 6px;
  padding: 6px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  scrollbar-gutter: stable;
}

#memoriesPage .mem-tab,
#connectorsPage .connector-tab,
#naploPage .naplo-tab,
#connectorsPage .catalog-filter-btn,
#connectorsPage .connector-filter-btn {
  min-height: 46px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 9px 14px;
  flex: 0 0 auto;
}

#memoriesPage .mem-tab.active,
#connectorsPage .connector-tab.active,
#naploPage .naplo-tab.active {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: var(--accent-soft);
}

#memoriesPage .mem-list,
#naploPage .naplo-timeline,
#recallPage .recall-timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: 10px;
}

#memoriesPage .mem-item {
  min-height: 112px;
}

#memoriesPage .mem-content-short {
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: anywhere;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

#memoriesPage .mem-graph-view {
  height: clamp(520px, 58vh, 820px);
}

#memoriesPage .mem-review-view {
  display: grid;
  grid-template-columns: minmax(300px, 0.92fr) minmax(380px, 1.28fr);
  gap: 12px;
  align-items: start;
}

#memoriesPage .mem-review-panel {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 94%, var(--bg) 6%), var(--bg-card));
  padding: 14px;
  box-shadow: var(--shadow-sm);
}

#memoriesPage .mem-review-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

#memoriesPage .mem-review-head h2,
#memoriesPage .mem-audit-head h3 {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.25;
}

#memoriesPage .mem-review-head p {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
}

#memoriesPage .mem-review-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 10px;
}

#memoriesPage .mem-review-tabs button {
  min-width: 0;
  min-height: 42px;
  padding: 8px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-input);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 650;
}

#memoriesPage .mem-review-tabs button.active {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border));
  background: var(--accent-soft);
  color: var(--text);
}

#memoriesPage .mem-review-list {
  display: grid;
  gap: 8px;
  min-height: 46px;
  max-height: 560px;
  overflow: auto;
  padding-right: 2px;
}

#memoriesPage .mem-review-row {
  width: 100%;
  min-width: 0;
  min-height: 86px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-card) 82%, var(--bg-hover) 18%);
  color: var(--text);
  text-align: left;
}

#memoriesPage .mem-review-row.active {
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}

#memoriesPage .mem-review-row-top,
#memoriesPage .mem-review-row-meta,
#memoriesPage .mem-review-row-copy {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

#memoriesPage .mem-review-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

#memoriesPage .mem-review-row-top strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

#memoriesPage .mem-review-row-meta {
  color: var(--text-muted);
  font-size: 11px;
  margin-bottom: 6px;
}

#memoriesPage .mem-review-row-copy {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#memoriesPage .mem-review-detail {
  display: grid;
  gap: 10px;
}

#memoriesPage .mem-review-evidence,
#memoriesPage .mem-prompt-included,
#memoriesPage .mem-audit-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

#memoriesPage .mem-review-badge,
#memoriesPage .mem-health-ok {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  max-width: 100%;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

#memoriesPage .mem-review-badge.is-ok,
#memoriesPage .mem-health-ok.is-ok {
  color: var(--badge-success-text);
  background: var(--success-soft);
}

#memoriesPage .mem-review-badge.is-warn {
  color: var(--badge-warning-text);
  background: var(--warning-soft);
}

#memoriesPage .mem-review-badge.is-danger,
#memoriesPage .mem-health-ok.is-danger {
  color: var(--badge-danger-text);
  background: var(--danger-soft);
}

#memoriesPage .mem-review-badge.is-info {
  color: var(--badge-info-text);
  background: var(--info-soft);
}

#memoriesPage .mem-review-content,
#memoriesPage .mem-prompt-text {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-input);
  color: var(--text);
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
}

#memoriesPage .mem-review-content {
  min-height: 174px;
  resize: vertical;
  padding: 10px;
}

#memoriesPage .mem-review-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

#memoriesPage .mem-review-form-grid label,
#memoriesPage .mem-review-reason-label {
  display: grid;
  gap: 5px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
}

#memoriesPage .mem-review-form-grid :is(select, input),
#memoriesPage .mem-review-reason-label input,
#memoriesPage #memPromptAgent {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-input);
  color: var(--text);
  padding: 8px 10px;
}

#memoriesPage .mem-review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#memoriesPage .mem-review-actions .btn-compact {
  min-height: 44px;
}

#memoriesPage .mem-prompt-panel,
#memoriesPage .mem-health-panel {
  grid-column: span 1;
}

#memoriesPage .mem-prompt-summary {
  margin-bottom: 8px;
  color: var(--text-secondary);
  font-size: 12px;
}

#memoriesPage .mem-prompt-text {
  min-height: 180px;
  max-height: 320px;
  overflow: auto;
  padding: 10px;
  white-space: pre-wrap;
}

#memoriesPage .mem-health-findings,
#memoriesPage .mem-audit-list {
  display: grid;
  gap: 8px;
  min-height: 28px;
}

#memoriesPage .mem-health-finding,
#memoriesPage .mem-audit-row {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-card) 82%, var(--bg-hover) 18%);
}

#memoriesPage .mem-health-finding {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

#memoriesPage .mem-health-finding strong,
#memoriesPage .mem-health-finding span,
#memoriesPage .mem-audit-row p,
#memoriesPage .mem-audit-row small {
  overflow-wrap: anywhere;
}

#memoriesPage .mem-health-finding strong {
  display: block;
  color: var(--text);
  font-size: 12px;
}

#memoriesPage .mem-health-finding div > span,
#memoriesPage .mem-audit-row small,
#memoriesPage .mem-review-muted,
#memoriesPage .mem-review-empty,
#memoriesPage .mem-review-error {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
}

#memoriesPage .mem-audit-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 14px 0 8px;
}

#memoriesPage .mem-audit-row p {
  margin: 7px 0 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.4;
}

#connectorsPage .connector-grid,
#connectorsPage .connector-scope-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 12px;
}

#connectorsPage .connector-card {
  min-height: 96px;
}

#connectorsPage .connector-external-paths {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

#connectorsPage .connector-external-add {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 8px;
}

#connectorsPage .connector-external-add .btn-compact {
  justify-content: center;
}

#connectorsPage .catalog-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

#docsPage .docs-layout {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

/* When the rendered doc has an "On this page" TOC, open a third rail for it. */
#docsPage .docs-layout:has(#docsToc:not([hidden])) {
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr) minmax(190px, 230px);
}

#docsPage .docs-list {
  position: sticky;
  top: var(--space-4);
  max-height: calc(100vh - 140px);
  overflow: auto;
  padding: var(--space-2);
  gap: 2px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
}

/* Bounded docs workspace: the content panel scrolls internally so the page
   itself no longer becomes a multi-thousand-pixel single scroll. */
#docsPage .docs-content {
  max-width: none;
  min-width: 0;
  height: calc(100vh - 140px);
  overflow: auto;
  padding: 0;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
}

#docsPage .docs-rendered {
  max-width: min(78ch, 100%);
  min-width: 0;
  padding: var(--space-5) var(--space-6) var(--space-8);
}

#docsPage .docs-empty {
  margin: var(--space-5);
}

#docsPage .markdown-body :is(p, li, blockquote) {
  max-width: 100%;
}

#docsPage .docs-heading {
  scroll-margin-top: 64px;
}

/* Sticky doc header inside the scrolling content panel: title + actions. */
#docsPage .docs-content-toolbar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0;
  padding: 12px var(--space-5);
  background: color-mix(in srgb, var(--color-bg-surface) 92%, var(--bg) 8%);
  border-bottom: 1px solid var(--color-border-subtle);
  backdrop-filter: blur(4px);
}

#docsPage .docs-content-title {
  min-width: 0;
  font-size: 15px;
  font-weight: 650;
  line-height: var(--line-tight);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Right-rail table of contents */
#docsPage .docs-toc {
  position: sticky;
  top: var(--space-4);
  align-self: start;
  max-height: calc(100vh - 140px);
  overflow: auto;
  min-width: 0;
}

#docsPage .docs-toc-title {
  margin-bottom: var(--space-2);
  padding-left: 12px;
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

#docsPage .docs-toc-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-left: 1px solid var(--color-border-subtle);
}

#docsPage .docs-toc-link {
  display: flex;
  align-items: center;
  min-height: var(--control-min);
  margin-left: -1px;
  padding: 6px 10px;
  border-left: 2px solid transparent;
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: var(--font-size-sm);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

#docsPage .docs-toc-link:hover {
  color: var(--color-text-primary);
  border-left-color: var(--color-border-strong);
}

#docsPage .docs-toc-l3 {
  padding-left: 22px;
  font-size: var(--font-size-xs);
}

/* Code blocks with copy affordance */
#docsPage .docs-code-block {
  position: relative;
}

#docsPage .docs-code-copy {
  position: absolute;
  top: 8px;
  right: 8px;
  appearance: none;
  padding: 3px 8px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xs);
  background: var(--color-bg-surface);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: 600;
  cursor: pointer;
  /* Hidden (not just transparent) so it is excluded from touch-target audits
     and only surfaces as a hover/focus affordance on pointer devices. */
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}

#docsPage .docs-code-block:hover .docs-code-copy,
#docsPage .docs-code-copy:focus-visible {
  opacity: 1;
  visibility: visible;
}

/* Docs search box in the page header */
.docs-header-search {
  flex: 0 0 auto;
}

.docs-search-input {
  width: clamp(180px, 22vw, 280px);
  max-width: 100%;
  height: var(--control-min);
  padding: 0 12px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text);
  font-size: var(--font-size-md);
}

.docs-search-input:focus {
  outline: none;
  border-color: var(--accent);
}

#docsPage .docs-content,
#docsPage .markdown-body {
  min-width: 0;
  max-width: 100%;
}

#docsPage .markdown-body :is(h1, h2, h3, h4, p, li, blockquote, td, th, code) {
  overflow-wrap: anywhere;
  word-break: break-word;
}

#docsPage .markdown-body :is(pre, table) {
  max-width: 100%;
  overflow-x: auto;
}

#docsPage .markdown-body pre {
  white-space: pre-wrap;
}

#docsPage .markdown-body pre code {
  white-space: pre-wrap;
  word-break: break-word;
}

#docsPage .markdown-body table {
  display: block;
}

/* === P7: documentation reader structure (doc-nav, doc header, code chrome, TOC spy) === */
#docsPage .docs-nav-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin: -8px -8px 6px;
  padding: 10px 12px 8px;
  background: color-mix(in srgb, var(--color-bg-surface) 92%, var(--bg) 8%);
  border-bottom: 1px solid var(--color-border-subtle);
}

#docsPage .docs-nav-title {
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

#docsPage .docs-nav-count {
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}

#docsPage .docs-nav-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#docsPage .docs-nav-empty {
  padding: var(--space-3) var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* Doc rows carry a file glyph + stacked title/date column. */
#docsPage .docs-list-item {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-2);
}

#docsPage .docs-list-ic {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--color-text-muted);
  transition: color var(--transition);
}

#docsPage .docs-list-item:hover .docs-list-ic,
#docsPage .docs-list-item.active .docs-list-ic {
  color: var(--gd-accent, var(--accent));
}

#docsPage .docs-list-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* Sticky doc header: stacked title + created meta. */
#docsPage .docs-content-head {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

#docsPage .docs-content-meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* Language chip pinned in the code block's top padding. */
#docsPage .docs-code-lang {
  position: absolute;
  top: 8px;
  left: 12px;
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  pointer-events: none;
}

#docsPage .docs-code-block:has(.docs-code-lang) pre {
  padding-top: 30px;
}

/* Active "On this page" entry follows the heading in view. */
#docsPage .docs-toc-link.active {
  color: var(--color-text-primary);
  border-left-color: var(--gd-accent, var(--accent));
  font-weight: 600;
}

#statusPage {
  display: block;
}

#statusPage .status-header {
  margin-bottom: 16px;
}

#statusPage .status-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

/* Single full-width column: overall summary band, then the snapshot metric
   strip, then the services grid, then incidents. Killing the short right-hand
   side column removes the tall empty void that sat next to the services grid
   (owner 11: "2 mismatch oszlop + ures void"). */
#statusPage .status-summary-panel,
#statusPage .status-services,
#statusPage .status-incidents,
#statusPage .status-side-column {
  grid-column: 1 / -1;
}

#statusPage .status-summary-panel { order: 1; }
#statusPage .status-side-column   { order: 2; }
#statusPage .status-services      { order: 3; }
#statusPage .status-incidents     { order: 4; }

#statusPage .status-side-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

#statusPage .status-summary-panel,
#statusPage .status-overall,
#statusPage .status-services,
#statusPage .status-incidents,
#statusPage .status-snapshot-panel {
  margin: 0;
}

#statusPage .status-services,
#statusPage .status-incidents {
  padding: 18px;
}

#statusPage .status-service-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
}

/* incidents full-width: 2-column card grid */
#statusPage .status-incident-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
  gap: 10px;
}

#schedulesPage .schedule-view-toggle {
  flex-wrap: wrap;
  justify-content: flex-end;
}

#schedulesPage .schedule-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr));
  gap: 12px;
}

#schedulesPage .schedule-section {
  grid-column: 1 / -1;
}

#schedulesPage .schedule-row {
  min-width: 0;
  align-items: flex-start;
}

#schedulesPage .schedule-actions {
  opacity: 1;
  flex: 0 0 auto;
}

#bgTasksPage .bg-task-toolbar {
  grid-template-columns: minmax(160px, 220px) minmax(260px, 1fr) max-content max-content;
}

/* #bgShowAll lived as a bare native checkbox (tiny tap target). It is now wrapped
   in a 44px pill, AND the input itself is a full 44x44 hit target rendered as a
   custom checkbox: the element is a transparent 44px square (so touch-target
   audits pass on the input directly), with the visible ~20px box + checkmark
   drawn via pseudo-elements. No more bare-native sizing on any viewport. */
#bgTasksPage .bg-task-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 0 12px 0 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text-muted);
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}
#bgTasksPage .bg-task-toggle input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  margin: 0;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  cursor: pointer;
  position: relative;
}
#bgTasksPage .bg-task-toggle input[type="checkbox"]::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg);
  transition: background var(--transition, .15s), border-color var(--transition, .15s);
}
#bgTasksPage .bg-task-toggle input[type="checkbox"]:checked::before {
  background: var(--accent);
  border-color: var(--accent);
}
#bgTasksPage .bg-task-toggle input[type="checkbox"]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
  opacity: 0;
  transition: opacity var(--transition, .15s);
}
#bgTasksPage .bg-task-toggle input[type="checkbox"]:checked::after {
  opacity: 1;
}
#bgTasksPage .bg-task-toggle input[type="checkbox"]:focus-visible {
  outline: none;
}
#bgTasksPage .bg-task-toggle input[type="checkbox"]:focus-visible::before {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

#bgTasksList {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Background-task directory table (replaces the old card grid). */
.bg-task-stats { margin-bottom: 0; }
.bg-task-table .bg-task-id {
  font: 600 12px/1.3 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  overflow-wrap: anywhere;
}
.bg-task-cell-prompt {
  max-width: 420px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.bg-task-cell-time {
  white-space: nowrap;
  color: var(--text-muted);
  font-size: 12px;
}
.bg-task-cell-actions { white-space: nowrap; }
.bg-task-row-actions { display: inline-flex; gap: 6px; }
.bg-task-table .btn {
  /* QA gate requires >=44px tall controls at every viewport. */
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
}
.bg-task-table .bg-task-stop { color: var(--danger); }
.bg-task-muted { color: var(--text-muted); }
.bg-task-empty-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.bg-task-empty-steps span {
  padding: 6px 10px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text-secondary);
}

.bg-task-card {
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--bg-task-color, var(--accent));
  border-radius: var(--radius);
}

.bg-task-card-head,
.bg-task-card-meta,
.bg-task-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.bg-task-card-head {
  justify-content: space-between;
  margin-bottom: 8px;
}

.bg-task-card-meta {
  flex-wrap: wrap;
}

.bg-task-id {
  font: 600 12px/1.3 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  overflow-wrap: anywhere;
}

.bg-task-badge {
  padding: 3px 8px;
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.bg-task-agent {
  background: var(--primary);
}

.bg-task-card-actions {
  flex: 0 0 auto;
}

.bg-task-card-actions .btn {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text);
}

.bg-task-card-actions .bg-task-stop {
  color: var(--danger);
}

.bg-task-started,
.bg-task-finished {
  color: var(--text-muted);
  font-size: 12px;
}

.bg-task-prompt {
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.bg-task-output {
  max-height: 220px;
  margin-top: 10px;
  padding: 10px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
}

#naploPage .naplo-toolbar {
  grid-template-columns: 1fr;
}

#naploPage .naplo-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

#naploPage #naplo-agent-wrap {
  min-width: 0;
}

#naploPage #naplo-agent {
  width: 100% !important;
}

#naploPage .naplo-entry,
#recallPage .recall-item {
  min-width: 0;
  overflow-wrap: anywhere;
}

.modal-content,
.modal {
  max-width: min(var(--modal-max, 720px), calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
}

.modal.conversation-modal {
  max-width: min(900px, calc(100vw - 32px));
}

.modal-content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-content .modal-body,
.modal .modal-body {
  min-height: 0;
  overflow: auto;
}

.modal-footer {
  flex-wrap: wrap;
}

.modal-footer :is(button, .btn-primary, .btn-secondary) {
  min-height: 44px;
}

/* Route-wide desktop coverage for the pages that previously fell back to main's
   1200px cap. Keep Kanban, Agents, and Team on their dedicated full-width shells. */
main.ops-wide-active #archivedPage .archived-toolbar {
  display: grid !important;
  grid-template-columns: minmax(260px, 1fr) minmax(180px, 240px) repeat(2, minmax(150px, 190px)) max-content max-content;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
}

main.ops-wide-active #archivedPage .archived-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 12px;
}

main.ops-wide-active #activityPage .activity-list {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr));
  gap: 14px;
}

main.ops-wide-active #activityPage .activity-card {
  min-height: 224px;
}

main.ops-wide-active #activityPage .activity-tail {
  max-height: clamp(150px, 21vh, 360px);
}

main.ops-wide-active #messagesPage {
  height: calc(100dvh - 92px);
  max-height: calc(100dvh - 92px);
  min-height: 520px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Fill the bounded page instead of taking a fixed calc() height: as a flex
   item the previous explicit height was overridden by flex-grow, so the panel
   expanded with its content and the whole page became one long transcript.
   flex + min-height:0 keeps it bounded so #chatBubbles scrolls internally. */
main.ops-wide-active #messagesPage .chat-layout {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  border-radius: var(--radius);
}

main.ops-wide-active #messagesPage .chat-sidebar {
  width: clamp(280px, 18vw, 380px);
}

main.ops-wide-active #messagesPage .chat-thread-header,
main.ops-wide-active #messagesPage .chat-compose {
  padding-inline: clamp(14px, 1.2vw, 24px);
}

main.ops-wide-active #messagesPage .chat-bubbles {
  padding: clamp(16px, 1.4vw, 28px);
}

main.ops-wide-active #messagesPage .chat-bubble {
  max-width: min(980px, 82%);
}

main.ops-wide-active #skillsPage .skills-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

main.ops-wide-active #skillsPage .skills-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 14px;
}

main.ops-wide-active #migratePage .migrate-steps {
  max-width: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr));
  gap: 16px;
  align-items: start;
}

main.ops-wide-active #migratePage .migrate-step {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
}

main.ops-wide-active #autonomyPage .autonomy-legend {
  flex-wrap: wrap;
  gap: 12px;
}

main.ops-wide-active #autonomyPage .autonomy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 600px), 1fr));
  gap: 10px;
}

main.ops-wide-active #autonomyPage .autonomy-row {
  min-width: 0;
}

main.ops-wide-active #autonomyPage .autonomy-row-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

main.ops-wide-active #settingsPage #settingsGroups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 560px), 1fr));
  gap: 16px;
  align-items: start;
}

main.ops-wide-active #settingsPage .settings-group {
  min-width: 0;
  margin-bottom: 0;
}

main.ops-wide-active #settingsPage .settings-row {
  min-width: 0;
  gap: 14px;
}

main.ops-wide-active #settingsPage .settings-row-info,
main.ops-wide-active #settingsPage .settings-row-editor {
  min-width: 0;
}

main.ops-wide-active #ideasPage .page-header-row > div:last-child {
  flex-wrap: wrap;
  justify-content: flex-end;
}

main.ops-wide-active #ideasPage #ideasStats {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px !important;
}

main.ops-wide-active #ideasPage #ideasList {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr));
  gap: 14px !important;
  align-items: start;
}

main.ops-wide-active #ideasPage #ideasList > div {
  min-width: 0;
  margin-bottom: 0 !important;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
}

main.ops-wide-active #ideasPage #ideasList .card {
  min-width: 0;
  margin-bottom: 8px !important;
}

main.ops-wide-active #vaultPage .vault-header-actions {
  justify-content: flex-end;
}

main.ops-wide-active #vaultPage .vault-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 14px;
}

main.ops-wide-active #vaultPage .vault-add-fields {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

main.ops-wide-active #tokenUsagePage .page-header-row > div:last-child,
main.ops-wide-active #tokenUsagePage .tu-header-controls {
  justify-content: flex-end;
}

main.ops-wide-active #tokenUsagePage #tuSummaryCards,
main.ops-wide-active #tokenUsagePage #tuBudgetCards {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px !important;
}

main.ops-wide-active #tokenUsagePage .overview-card {
  min-width: 0;
}

main.ops-wide-active #tokenUsagePage #tuTimelineChart {
  height: clamp(340px, 38vh, 560px) !important;
}

main.ops-wide-active #tokenUsagePage .tu-waste-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

main.ops-wide-active :is(
  #archivedPage .archived-card,
  #activityPage .activity-card,
  #messagesPage .chat-layout,
  #skillsPage .skills-card,
  #migratePage .migrate-step,
  #autonomyPage .autonomy-row,
  #settingsPage .settings-row,
  #ideasPage #ideasList .card,
  #vaultPage .vault-card,
  #tokenUsagePage .overview-card,
  #tokenUsagePage .overview-stat
) {
  min-width: 0;
}

/* Deep operations refresh: dense, dark-safe pages that were still carrying
   legacy form/list proportions after the wide shell landed. */
main.ops-wide-active #naploPage .naplo-toolbar {
  gap: 12px;
  padding: 14px;
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 92%, var(--bg) 8%), var(--bg-card));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
}

main.ops-wide-active #naploPage .naplo-source-tabs {
  display: flex;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg-input) 40%, transparent);
}

main.ops-wide-active #naploPage .naplo-tab {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-weight: 700;
}

main.ops-wide-active #naploPage .naplo-tab.active {
  border-color: color-mix(in srgb, var(--accent) 56%, var(--border) 44%);
  background: var(--accent-soft);
  color: var(--text);
}

main.ops-wide-active #naploPage .naplo-filters {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 20px minmax(180px, 240px) minmax(280px, 1fr) max-content max-content;
  gap: 10px;
  align-items: center;
}

main.ops-wide-active #naploPage .naplo-date-sep {
  display: grid;
  place-items: center;
}

main.ops-wide-active #naploPage #naplo-search-btn {
  width: auto;
  min-width: 128px;
  justify-content: center;
}

main.ops-wide-active #bgTasksPage .bg-task-toolbar {
  grid-template-columns: minmax(220px, 280px) minmax(420px, 1fr) minmax(124px, 150px) max-content;
  gap: 12px;
  padding: 14px;
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 92%, var(--bg) 8%), var(--bg-card));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
}

main.ops-wide-active #bgTasksPage .bg-task-toolbar .btn-primary {
  width: 100%;
  margin: 0;
  justify-content: center;
}

main.ops-wide-active #bgTasksPage .bg-task-toggle {
  padding: 0 8px;
  color: var(--text-secondary);
}

main.ops-wide-active #bgTasksPage #bgShowAll {
  /* Keep the full 44x44 custom-checkbox hit target in the wide ops layout too;
     the visible box is drawn by the ::before pseudo-element, not native sizing. */
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
}

main.ops-wide-active #bgTasksPage .bg-task-empty {
  min-height: 236px;
  grid-template-columns: auto minmax(0, 1fr) minmax(360px, 0.8fr);
  border-style: solid;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 26%, transparent), transparent 42%),
    color-mix(in srgb, var(--bg-card) 90%, var(--bg) 10%);
}

main.ops-wide-active #bgTasksPage .bg-task-empty-grid span {
  background: color-mix(in srgb, var(--bg-input) 66%, transparent);
}

main.ops-wide-active #connectorsPage #connectorGrid {
  display: block;
}

main.ops-wide-active #connectorsPage .connector-tabs {
  gap: 6px;
  margin: 0 0 18px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
}

main.ops-wide-active #connectorsPage .connector-tab {
  min-height: 44px;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
}

main.ops-wide-active #connectorsPage .connector-tab.active {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border) 42%);
  background: var(--accent-soft);
  color: var(--text);
}

main.ops-wide-active #connectorsPage .connector-stats {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

main.ops-wide-active #connectorsPage .connector-group-heading {
  display: flex;
  align-items: center;
  min-height: 36px;
  margin: 22px 0 10px;
  padding: 0;
  border: 0;
  color: var(--text);
}

main.ops-wide-active #connectorsPage .connector-group-heading:first-child {
  margin-top: 0;
}

main.ops-wide-active #connectorsPage .connector-builtin-grid,
main.ops-wide-active #connectorsPage .connector-scope-grid,
main.ops-wide-active #connectorsPage .catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 12px;
}

main.ops-wide-active #connectorsPage .connector-builtin,
main.ops-wide-active #connectorsPage .connector-card {
  min-height: 84px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 94%, var(--bg) 6%), var(--bg-card));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
}

main.ops-wide-active #connectorsPage .connector-builtin {
  align-items: center;
}

main.ops-wide-active #connectorsPage .connector-builtin-name {
  min-width: 0;
  line-height: 1.35;
}

main.ops-wide-active #connectorsPage .connector-builtin-action.btn-link {
  min-width: 84px;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--border) 76%, var(--accent) 24%);
  background: color-mix(in srgb, var(--accent-soft) 44%, transparent);
  text-decoration: none;
  font-weight: 700;
}

main.ops-wide-active #connectorsPage .connector-scope-header {
  min-height: 40px;
  margin: 4px 0 8px;
  color: var(--text-secondary);
  font-weight: 700;
}

main.ops-wide-active #connectorsPage .connector-external-paths {
  margin: 14px 0;
  background: var(--bg-card);
}

@media (min-width: 1800px) {
  main.ops-wide-active {
    padding-left: clamp(48px, 4vw, 96px);
    padding-right: clamp(48px, 4vw, 96px);
  }

  #overviewPage .overview-grid {
    grid-template-columns: minmax(520px, 1.2fr) minmax(420px, 1fr);
  }

  main.ops-wide-active #activityPage .activity-list {
    grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
  }

  #docsPage .docs-layout {
    grid-template-columns: 360px minmax(0, 1fr);
  }

  #docsPage .docs-layout:has(#docsToc:not([hidden])) {
    grid-template-columns: 320px minmax(0, 1fr) 260px;
  }
}

@media (max-width: 1100px) {
  #overviewPage .overview-grid,
  #statusPage .status-shell,
  #docsPage .docs-layout,
  #docsPage .docs-layout:has(#docsToc:not([hidden])),
  main.ops-wide-active #migratePage .migrate-steps,
  main.ops-wide-active #settingsPage #settingsGroups,
  main.ops-wide-active #ideasPage #ideasList,
  main.ops-wide-active #autonomyPage .autonomy-grid {
    grid-template-columns: 1fr;
  }

  /* The TOC is redundant once the layout stacks; the sticky rail + search
     cover navigation, and the content panel grows to a bounded viewport box. */
  #docsPage .docs-toc {
    display: none;
  }

  #docsPage .docs-content {
    height: auto;
    max-height: calc(100vh - 200px);
  }

  #overviewPage .overview-stats,
  .overview-signal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #memoriesPage .mem-toolbar,
  #recallPage .recall-toolbar,
  #bgTasksPage .bg-task-toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  #memoriesPage .mem-review-view {
    grid-template-columns: 1fr;
  }

  #memoriesPage .mem-review-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  main.ops-wide-active #bgTasksPage .bg-task-toolbar {
    grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  }

  main.ops-wide-active #bgTasksPage .bg-task-toolbar > * {
    min-width: 0;
  }

  main.ops-wide-active #bgTasksPage .bg-task-toolbar .btn-primary,
  main.ops-wide-active #bgTasksPage .bg-task-toggle {
    width: 100%;
  }

  main.ops-wide-active #naploPage .naplo-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  main.ops-wide-active #naploPage .naplo-date-sep {
    display: none;
  }

  main.ops-wide-active #naploPage #naplo-search-btn {
    width: 100%;
    min-width: 0;
  }

  .bg-task-empty {
    grid-template-columns: auto minmax(0, 1fr);
  }

  main.ops-wide-active #bgTasksPage .bg-task-empty {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .bg-task-empty-grid {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  main.ops-wide-active #bgTasksPage .bg-task-empty-grid {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Mobile/stacked docs: keep the rail as a BOUNDED VERTICAL document
     selector. A capped max-height with internal scroll means the list stays a
     short band (never the multi-thousand-pixel vertical dump that made the
     whole page scroll), while the items stay full-width -- so none of the
     anchor controls ever extend past the viewport edge the way a horizontal
     scroller's off-screen items did. Items below the cap are clipped and so
     are not hit-test-visible, keeping the responsive control audit clean. */
  #docsPage .docs-list {
    position: static;
    flex-direction: column;
    max-height: none;
    overflow: hidden;
    contain: paint;
    clip-path: inset(0 round var(--gd-radius-lg, 24px));
    margin-bottom: var(--space-4);
    gap: 2px;
    -webkit-overflow-scrolling: touch;
  }

  #docsPage .docs-nav-list {
    max-height: 174px;
    overflow-x: hidden;
    overflow-y: auto;
    contain: paint;
    clip-path: inset(0 round var(--gd-radius-sm, 12px));
    -webkit-overflow-scrolling: touch;
  }

  #docsPage .docs-list-item {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-2);
    min-height: var(--control-min);
    border: 1px solid var(--color-border-subtle);
  }

  #docsPage .docs-list-item .docs-list-meta {
    flex: 1 1 auto;
    min-width: 0;
  }

  #docsPage .docs-list-item .docs-list-title {
    min-width: 0;
    overflow: hidden;
    /* Allow up to two lines so long doc titles stay readable instead of being
       hard-truncated to a single ellipsis (QA F5). */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.3;
    word-break: break-word;
  }

  #docsPage .docs-list-item .docs-list-date {
    flex: 0 0 auto;
  }
}

@media (max-width: 760px) {
  main.ops-wide-active {
    padding: 16px 12px 48px;
  }

  main.ops-wide-active .page-header-row,
  #statusPage .page-header-row,
  #schedulesPage .page-header-row,
  #connectorsPage .page-header-row {
    display: grid !important;
    grid-template-columns: 1fr;
  }

  main.ops-wide-active .page-header-row > div:last-child,
  #statusPage .page-header-row > div:last-child,
  #memoriesPage .page-header-row > div:last-child,
  #connectorsPage .page-header-row > div:last-child,
  #schedulesPage .schedule-view-toggle {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  #memoriesPage .page-header-row > div:last-child,
  #connectorsPage .page-header-row > div:last-child,
  #schedulesPage .schedule-view-toggle {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  #memoriesPage .page-header-row .btn-compact,
  #statusPage .page-header-row .btn-compact,
  #connectorsPage .page-header-row .btn-compact,
  #schedulesPage .schedule-view-toggle .btn-compact {
    width: 100%;
    justify-content: center;
  }

  #overviewPage .overview-stats,
  .overview-signal-grid,
  #memoriesPage .mem-stats,
  #connectorsPage .connector-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #statusPage .status-summary-panel,
  #statusPage .status-services,
  #statusPage .status-incidents,
  #statusPage .status-snapshot-panel {
    padding: 14px;
  }

  #statusPage .status-overall {
    min-height: 92px;
    padding: 15px;
  }

  #statusPage .status-incidents {
    max-height: none;
    overflow: visible;
  }

  #statusPage .status-service-grid {
    grid-template-columns: 1fr;
  }

  #memoriesPage .mem-toolbar,
  #recallPage .recall-toolbar,
  #bgTasksPage .bg-task-toolbar,
  main.ops-wide-active #archivedPage .archived-toolbar,
  .bg-task-empty,
  #naploPage .naplo-filters {
    grid-template-columns: 1fr;
  }

  #memoriesPage .mem-review-tabs,
  #memoriesPage .mem-review-form-grid {
    grid-template-columns: 1fr;
  }

  #memoriesPage .mem-review-head,
  #memoriesPage .mem-health-finding {
    flex-direction: column;
    align-items: stretch;
  }

  #memoriesPage .mem-review-list,
  #memoriesPage .mem-prompt-text {
    max-height: none;
  }

  #memoriesPage .mem-review-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  #memoriesPage .mem-review-actions .btn-compact {
    width: 100%;
    justify-content: center;
  }

  main.ops-wide-active #bgTasksPage .bg-task-toolbar {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
  }

  main.ops-wide-active #bgTasksPage .bg-task-toolbar > * {
    width: 100%;
    min-width: 0;
  }

  main.ops-wide-active #bgTasksPage .bg-task-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-height: 44px;
    padding: 0;
  }

  main.ops-wide-active #bgTasksPage .bg-task-empty {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding: 18px;
  }

  main.ops-wide-active #bgTasksPage .bg-task-empty-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  main.ops-wide-active #naploPage .naplo-source-tabs {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
  }

  main.ops-wide-active #naploPage .naplo-filters {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  main.ops-wide-active #naploPage .naplo-date-sep {
    display: none;
  }

  main.ops-wide-active #naploPage #naplo-search-btn {
    width: 100%;
    min-width: 0;
  }

  .bg-task-empty {
    align-items: start;
  }

  .bg-task-empty-grid {
    grid-template-columns: 1fr;
  }

  #memoriesPage .mem-list,
  #naploPage .naplo-timeline,
  #recallPage .recall-timeline,
  #schedulesPage .schedule-list,
  main.ops-wide-active #activityPage .activity-list,
  main.ops-wide-active #skillsPage .skills-grid,
  main.ops-wide-active #vaultPage .vault-grid,
  #bgTasksList {
    grid-template-columns: 1fr;
  }

  main.ops-wide-active #messagesPage .chat-layout {
    flex-direction: column;
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
  }

  main.ops-wide-active #messagesPage .chat-sidebar {
    width: 100%;
    max-height: 168px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  main.ops-wide-active #messagesPage .chat-bubble {
    max-width: min(92%, calc(100% - 36px));
  }

  #memoriesPage .mem-tabs,
  #connectorsPage .connector-tabs,
  #naploPage .naplo-source-tabs {
    flex-wrap: wrap;
    overflow-x: visible;
    scrollbar-gutter: auto;
  }

  #memoriesPage .mem-tab,
  #connectorsPage .connector-tab,
  #naploPage .naplo-tab {
    flex: 1 1 calc(50% - 6px);
    justify-content: center;
  }

  #schedulesPage .schedule-row,
  .bg-task-card-head,
  .bg-task-card-actions {
    align-items: stretch;
    flex-direction: column;
  }

  #schedulesPage .schedule-actions,
  .bg-task-card-actions {
    width: 100%;
  }

  #schedulesPage .schedule-actions .btn-icon,
  .bg-task-card-actions .btn {
    flex: 1 1 auto;
  }

  #docsPage .docs-content {
    min-height: 420px;
  }

  .modal-content,
  .modal {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }

  .modal-footer {
    display: grid;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 430px) {
  #overviewPage .overview-stats,
  #memoriesPage .mem-stats,
  #connectorsPage .connector-stats {
    grid-template-columns: 1fr 1fr;
  }

  #overviewPage .overview-stat,
  #memoriesPage .stat-card {
    padding: 12px;
  }

  #connectorsPage .connector-card,
  #schedulesPage .schedule-row,
  #memoriesPage .mem-item,
  .bg-task-card {
    padding: 12px;
  }
}

/* ============================================================
   Token Monitor / Token Usage page
   ============================================================ */
#tokenUsagePage { display: block; }

.tu-header-row { align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.tu-title-block { flex: 1; min-width: 200px; }

.tu-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}
.tu-meta-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  font-weight: 600;
}
.tu-meta-dot {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--text-muted);
}
.tu-meta-coverage.tu-meta-warn { color: #f0b08e; }
.tu-meta-coverage.tu-meta-ok { color: var(--badge-success-text); }

.tu-header-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.tu-header-controls .input-compact { width: auto; min-height: 36px; }

/* Engine summary cards */
.tu-engine-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

/* === Token data-viz band (R3 deep-redesign) ============================
   New dataviz cluster below the KPI deck: daily-burn bars, cache-hit donut,
   agent-split bars, rolling-window gauges. Glassy-dark surfaces under dark. */
.tu-viz-band {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 18px;
}
.tu-viz-band:empty { display: none; }
.tu-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.tu-viz-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--gd-radius-lg);
  border: 1px solid var(--border);
  background: var(--bg-card);
  min-width: 0;
  min-height: 168px;
}
.tu-viz-skeleton { min-height: 168px; opacity: 0.5; animation: tu-viz-pulse 1.4s ease-in-out infinite; }
@keyframes tu-viz-pulse { 0%,100% { opacity: 0.35; } 50% { opacity: 0.6; } }
.tu-viz-head { display: flex; flex-direction: column; gap: 2px; }
.tu-viz-title { margin: 0; font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: 0.01em; }
.tu-viz-sub { font-size: 11px; color: var(--text-muted); font-weight: 500; }
.tu-viz-body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
.tu-viz-empty { color: var(--text-muted); font-size: 13px; margin: auto 0; }

/* Hero burn chart: full-width, axis-labelled centrepiece */
.tu-hero {
  padding: 18px 22px 16px;
  border-radius: var(--gd-radius-lg);
  border: 1px solid var(--border);
  background: var(--bg-card);
}
.tu-hero-skeleton { min-height: 216px; }
.tu-hero-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; }
.tu-hero-titles { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tu-hero-title { margin: 0; font-size: 15px; font-weight: 740; color: var(--text); letter-spacing: 0.01em; }
.tu-hero-sub { font-size: 12px; color: var(--text-muted); }
.tu-hero-metrics { display: flex; gap: 26px; flex: none; }
.tu-hero-metric { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.tu-hero-metric-val { font-size: 19px; font-weight: 740; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.tu-hero-metric-cap { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); }
.tu-hero-plot { position: relative; height: 150px; padding-left: 52px; }
.tu-hero-grid { position: absolute; inset: 0 0 0 52px; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.tu-hero-gridline { position: relative; height: 0; border-top: 1px dashed var(--border); opacity: 0.7; }
.tu-hero-gridline:last-child { border-top-style: solid; opacity: 1; }
.tu-hero-gridlabel { position: absolute; left: -52px; top: -7px; width: 46px; text-align: right; font-size: 10px; font-style: normal; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tu-hero-bars { position: relative; height: 100%; display: flex; align-items: flex-end; gap: 4px; }
.tu-hero-bar {
  flex: 1 1 0; min-width: 3px; min-height: 2px; border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--accent, #60a5fa), color-mix(in srgb, var(--accent, #60a5fa) 22%, transparent));
  transition: opacity var(--transition);
}
.tu-hero-bar:hover { opacity: 0.75; }
.tu-hero-bar.is-last { background: linear-gradient(180deg, #67e8f9, rgba(103,232,249,0.30)); }
.tu-hero-xaxis { display: flex; justify-content: space-between; margin: 8px 0 0 52px; font-size: 10.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tu-hero-empty { color: var(--text-muted); font-size: 13px; padding: 40px 0; text-align: center; }

/* Cache-hit donut */
.tu-cache-body { flex-direction: row; align-items: center; gap: 16px; }
.tu-donut { width: 96px; height: 96px; flex: none; }
.tu-donut-track { fill: none; stroke: var(--border); stroke-width: 10; }
.tu-donut-val { fill: none; stroke: #34d399; stroke-width: 10; stroke-linecap: round; transition: stroke-dasharray 0.5s ease; }
.tu-donut-num { fill: var(--text); font-size: 22px; font-weight: 760; text-anchor: middle; }
.tu-donut-cap { fill: var(--text-muted); font-size: 8px; font-weight: 600; text-anchor: middle; text-transform: uppercase; letter-spacing: 0.05em; }
.tu-cache-legend { display: flex; flex-direction: column; gap: 8px; min-width: 0; font-size: 12px; color: var(--text-secondary); }
.tu-cache-li { display: flex; align-items: center; gap: 7px; }
.tu-cache-li b { margin-left: auto; color: var(--text); font-variant-numeric: tabular-nums; }
.tu-dot { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.tu-dot-read { background: #34d399; }
.tu-dot-fresh { background: var(--border); }

/* Agent leaderboard (ranked: position + absolute value + share bar) */
.tu-lead { gap: 11px; justify-content: center; }
.tu-lead-row { display: flex; align-items: center; gap: 11px; }
.tu-lead-rank {
  flex: none; width: 20px; height: 20px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 750; color: var(--text-secondary);
  background: var(--bg-subtle, rgba(127,127,127,0.1)); font-variant-numeric: tabular-nums;
}
.tu-lead-row:first-child .tu-lead-rank { color: var(--accent-on, #fff); background: var(--accent, #60a5fa); }
.tu-lead-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.tu-lead-top { display: flex; align-items: baseline; gap: 8px; }
.tu-lead-name { flex: 1 1 auto; font-size: 12.5px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tu-lead-val { flex: none; font-size: 11.5px; font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; }
.tu-lead-track { height: 7px; border-radius: 999px; background: var(--bg-subtle, rgba(127,127,127,0.1)); overflow: hidden; }
.tu-lead-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent, #60a5fa), #67e8f9); }
.tu-lead-pct { flex: none; font-size: 11px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; min-width: 32px; text-align: right; }

/* Window-load gauges */
.tu-gauges { gap: 14px; justify-content: center; }
.tu-gauge { display: flex; flex-direction: column; gap: 5px; }
.tu-gauge-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-secondary); }
.tu-gauge-val { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.tu-gauge-track { height: 8px; border-radius: 999px; background: var(--bg-subtle, rgba(127,127,127,0.1)); overflow: hidden; }
.tu-gauge-fill { display: block; height: 100%; border-radius: 999px; }
.tu-gauge-sub { font-size: 10px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

[data-theme="dark"] .tu-viz-card,
[data-theme="dark"] .tu-hero {
  background: var(--gd-glass-bg);
  border-color: var(--gd-border);
  -webkit-backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
  box-shadow: var(--gd-shadow-panel);
}
[data-theme="dark"] .tu-donut-track,
[data-theme="dark"] .tu-dot-fresh { stroke: var(--gd-border); }
[data-theme="dark"] .tu-dot-fresh { background: var(--gd-surface-soft); }
[data-theme="dark"] .tu-lead-rank { background: var(--gd-surface-soft); }

@media (max-width: 1080px) {
  .tu-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .tu-rail { grid-template-columns: 1fr; }
  .tu-hero-head { gap: 12px; }
  .tu-hero-metrics { gap: 20px; }
}

/* KPI cards (rendered by renderTuEngineSummary as .tu-kpi-card). Reuses the
   shared card tokens; tone is a left accent stripe only so the surface stays
   neutral in both themes. See design-system contract #b1b053de §1. */
/* Shared KPI primitive. `.kpi-*` is an ALIAS promotion of `.tu-kpi-*`: the
   declarations are byte-identical, so Token Monitor cannot change, and the
   `.tu-*` names must stay because renderTuEngineSummary emits them from JS.
   Any future dark rule for `.kpi-card` must be scoped (e.g. `.aor-lane-grid >
   .kpi-card`) — an unscoped one would newly glass Token Monitor's flat KPIs. */
.kpi-card,
.tu-kpi-card {
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  padding: 16px;
  min-width: 0;
}
.kpi-label,
.tu-kpi-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
  color: var(--text-muted);
}
.kpi-value,
.tu-kpi-value {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--text);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.kpi-sub,
.tu-kpi-sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 8px;
  overflow-wrap: anywhere;
}
.kpi-primary,
.tu-kpi-primary { border-left-color: var(--accent); }
.kpi-info,
.tu-kpi-info,
.tu-kpi-cyan { border-left-color: var(--color-info); }
.kpi-warning,
.tu-kpi-warning { border-left-color: var(--color-warning); }
.kpi-success,
.tu-kpi-success { border-left-color: var(--color-success); }
.kpi-neutral,
.tu-kpi-neutral { border-left-color: var(--border); }
/* `.tu-kpi-*` has no danger variant; Agent Ops needs one for the Blocked state. */
.kpi-danger,
.tu-kpi-danger { border-left-color: var(--color-danger); }
/* Interactive KPI card (engine filter) keeps keyboard/focus parity with the
   old .tu-engine-card behavior. */
.tu-kpi-card[role="button"] {
  cursor: pointer;
  transition: box-shadow .2s, transform .1s;
}
.tu-kpi-card[role="button"]:hover { box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.tu-kpi-card[role="button"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tu-kpi-card.tu-active { box-shadow: 0 0 0 2px var(--accent) inset; }

/* Token breakdown strip (design-system contract eb204f8d §4) — the one new v2
   component. Static content: no tabindex, no hover affordance, no overflow of its
   own. Raw total is present but demoted (--text-secondary, lighter weight) so it can
   never read as the headline number. `:empty` hides the strip instead of flashing
   five zeros, which would read as "no spend" rather than "no data". */
.tu-breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px 16px;
  margin: -4px 0 16px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
}
.tu-breakdown:empty { display: none; }
.tu-bd-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tu-bd-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
}
.tu-bd-value {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.tu-bd-raw .tu-bd-value { color: var(--text-secondary); font-weight: 600; }
[data-theme="dark"] .tu-breakdown {
  background: var(--gd-glass-bg);
  border-color: var(--gd-border);
  box-shadow: var(--gd-shadow-panel);
}

/* Model column (Calls drilldown). A recovered model keeps the normal name plus a
   provenance chip; an unresolvable one renders muted via .muted, never an empty
   cell and never an em dash (— means "missing", these are "tool-only"). */
.tu-model-name { font-variant-numeric: tabular-nums; word-break: break-word; }

/* Status strip — reuses the shared .status-panel surface; just owns its spacing
   in the Token Monitor flow (design-system contract #b1b053de §2). */
.tu-status-strip { margin-bottom: 16px; }
.tu-status-strip[hidden] { display: none; }
/* Non-interactive "Other" legend chip (aggregate, not a filter). */
.tu-legend-other { cursor: default; opacity: .85; }
.tu-engine-card,
.tu-total-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  padding: 16px;
  min-width: 0;
}
.tu-engine-card { cursor: pointer; transition: opacity .2s, box-shadow .2s, transform .1s; }
.tu-engine-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.tu-engine-card:focus-visible { outline: 2px solid var(--accent, #6366f1); outline-offset: 2px; }
.tu-engine-card[data-engine="codex"] { border-left: 3px solid #6366f1; }
.tu-engine-card.tu-active { box-shadow: 0 0 0 2px var(--accent, #6366f1) inset; }
.tu-engine-card.tu-dim { opacity: .5; }

.tu-engine-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.tu-engine-agents { font-size: 12px; color: var(--text-muted); }
.tu-engine-value { font-size: 26px; font-weight: 800; color: var(--text); line-height: 1.1; }
.tu-engine-value-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 700; margin-top: 2px; }
.tu-engine-sub { font-size: 12px; color: var(--text-secondary); margin-top: 8px; display: flex; gap: 6px 12px; flex-wrap: wrap; }
.tu-engine-breakdown { font-size: 11px; color: var(--text-muted); margin-top: 6px; }
.tu-total-card .tu-engine-card-head { margin-bottom: 10px; }
.tu-total-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 700; }
.tu-split-bar {
  display: flex;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  margin-top: 10px;
  background: var(--bg-input);
}
.tu-split-bar span { display: block; height: 100%; }
.tu-split-bar .codex { background: #6366f1; }
.tu-split-legend { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-secondary); margin-top: 6px; }

/* Engine badges */
.tu-engine-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}
.tu-engine-badge.codex { color: #a5b4fc; background: rgba(99, 102, 241, 0.16); }

/* Dashboard grid */
.tu-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(320px, 0.85fr);
  gap: 16px;
  align-items: start;
  margin-bottom: 16px;
}
.tu-side-column { display: grid; gap: 16px; min-width: 0; }
.tu-main-column { min-width: 0; }
.tu-chart-card { min-width: 0; }
.tu-card-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.tu-card-heading h3 { margin: 0; }
.tu-card-heading .muted { margin: 4px 0 0; font-size: 12px; }

.tu-chart-mode { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--bg-input); }
.tu-segment {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
}
.tu-segment.active { background: var(--accent, #6366f1); color: var(--accent-on); }

.tu-engine-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 8px 0;
  font-size: 12px;
  color: var(--text-secondary);
}
.tu-engine-legend .tu-leg-item { display: inline-flex; align-items: center; gap: 6px; }
.tu-engine-legend .tu-leg-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

#tuTimelineChart { height: 380px; position: relative; overflow: hidden; }
#tuCanvas { display: block; width: 100%; height: 100%; }

/* Agent breakdown -- compact ranked table (replaces the old card wall) */
#tuSummaryCards { display: block; }
.tu-agent-card-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; flex-wrap: wrap; }

.tu-agent-table td,
.tu-agent-table th { vertical-align: middle; }
.tu-agent-table .tu-rank { width: 36px; color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: right; }
.tu-agent-table .tu-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tu-agent-table .tu-agent-name { font-weight: 600; color: var(--text); word-break: break-word; }
.tu-agent-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-right: 8px;
  vertical-align: middle;
}
.tu-agent-table .tu-share-th { width: 140px; }
.tu-agent-table .tu-share { width: 140px; }
.tu-share-bar {
  display: inline-block;
  width: 84px;
  height: 6px;
  border-radius: 999px;
  background: var(--bg-input);
  overflow: hidden;
  vertical-align: middle;
  margin-right: 8px;
}
.tu-share-bar > span { display: block; height: 100%; border-radius: 999px; }
.tu-share-pct { font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

.tu-agent-row { cursor: pointer; height: 44px; transition: background var(--transition, .15s); }
.tu-agent-row td { padding-top: 10px; padding-bottom: 10px; }
.tu-agent-row:hover { background: var(--bg-card-hover, rgba(255,255,255,.03)); }
.tu-agent-row:focus-visible { outline: 2px solid var(--accent, #6366f1); outline-offset: -2px; }
.tu-agent-row.tu-active { background: color-mix(in srgb, var(--accent, #6366f1) 14%, transparent); }
.tu-agent-row.tu-dim { opacity: .45; }

/* Biggest-calls drilldown: desktop renders the bounded table, mobile swaps to
   call cards (design-system contract §4 / Calls contract). The card layer is
   hidden by default so both never render at once on desktop. */
.tu-details-cards { display: none; }
.tu-call-card {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  min-width: 0;
}
.tu-call-card + .tu-call-card { margin-top: 8px; }
.tu-call-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
}
.tu-call-card-head strong { color: var(--text); overflow-wrap: anywhere; }
.tu-call-card-head span { font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.tu-call-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.tu-call-preview {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 6px;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tu-call-preview code { font-size: 11px; }

/* Biggest-calls drilldown footer */
.tu-details-foot { display: flex; justify-content: center; margin-top: 12px; }
.tu-error-panel { color: var(--color-danger, #ef4444); }
.tu-empty-cell { color: var(--text-secondary); font-size: 13px; text-align: center; padding: 16px; }
.tu-nowrap { white-space: nowrap; }
.tu-preview {
  font-size: 12px;
  color: var(--text-secondary);
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tu-row-meta { color: var(--text-secondary); font-size: 11px; margin-top: 2px; }
.tu-budget-card { cursor: pointer; transition: opacity .2s, box-shadow .2s; }

/* Waste */
.tu-waste-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin-bottom: 12px; }
.tu-waste-stat { padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-input); min-width: 0; }
.tu-waste-label { font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; letter-spacing: .04em; }
.tu-waste-value { font-size: 22px; font-weight: 800; color: var(--text); margin-top: 4px; }
.tu-waste-list { display: grid; gap: 8px; }
.tu-waste-item { padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: rgba(255,255,255,.03); font-size: 13px; line-height: 1.4; }
.tu-waste-item strong { color: var(--text); }
.tu-waste-meta { color: var(--text-muted); font-size: 12px; margin-top: 4px; overflow-wrap: anywhere; }

.tu-min-token-label { font-size: 13px; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 6px; }
.tu-min-token-label .input-compact { width: 90px; }

/* === Monitor-first re-design (card #693c3966) ============================= *
 * Net-new scoped styles only; everything else reuses .panel / .data-list /
 * .tab-nav / .tu-kpi-* / .badge-* / .status-panel primitives. */

/* Top-contributor KPI shows an agent name, so its value wraps instead of using
   the numeric tabular treatment. */
.tu-kpi-value-text { font-size: 18px; line-height: 1.25; overflow-wrap: anywhere; }

/* Chart controls: mode segmented control + independent layer toggles side by side. */
.tu-chart-controls { display: inline-flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.tu-chart-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--bg-input); }
.tu-chart-toggle .tu-segment[aria-pressed="true"],
.tu-chart-toggle .tu-segment.active { background: var(--accent, #6366f1); color: var(--accent-on); }

/* Action queue — built on .data-list; the only new chrome is a thin priority
   left-stripe reusing semantic tokens (design-system contract §4). */
.tu-action-queue { margin-bottom: 16px; }
.tu-action-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tu-action-filters[hidden] { display: none; }
.tu-action-filter {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
}
.tu-action-filter:hover { color: var(--text); }
.tu-action-filter:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tu-action-filter.tu-active { background: var(--accent, #6366f1); border-color: var(--accent, #6366f1); color: var(--accent-on); }
.tu-action-filter-n { font-variant-numeric: tabular-nums; opacity: .85; }

.tu-action-count { font-size: 12px; color: var(--text-muted); font-weight: 700; margin-bottom: 8px; }
.tu-action-list { gap: 8px; }
.tu-action-item { border-left: 3px solid var(--border); }
.tu-action-high { border-left-color: var(--color-danger); }
.tu-action-med { border-left-color: var(--color-warning); }
.tu-action-head { font-family: inherit; align-items: center; flex-wrap: wrap; gap: 8px; }
.tu-action-agent { font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.tu-action-badges { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tu-action-tok { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-secondary); white-space: nowrap; }
.tu-action-reason { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }
.tu-action-rec { font-size: 12px; color: var(--text-muted); margin-top: 4px; overflow-wrap: anywhere; }
.tu-action-rec-label { font-weight: 700; color: var(--text-secondary); }
.tu-action-more { font-size: 12px; color: var(--text-muted); margin-top: 8px; }
.tu-action-empty { display: flex; flex-direction: column; gap: 4px; }

/* Drilldown tabs — reuse .tab-nav/.tab-btn/.tab-panel, but strip the modal-only
   24px gutter since the wrapper .panel already pads. */
.tu-drilldown { margin-bottom: 16px; }
.tu-drilldown .tu-tab-nav { padding: 0; margin-bottom: 16px; }
/* Touch-target contract §6/§9: drilldown tab buttons keep >=44px height on
   every viewport (fine pointer included), not only under max-width:768px. */
.tu-drilldown .tab-btn { min-height: 44px; }
.tu-drilldown .tu-tab-panel { padding: 0; }
.tu-drilldown .tu-tab-panel[hidden] { display: none; }
.tu-tab-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.tu-tab-head .panel-meta { margin: 0; }
.tu-budget-note { color: var(--text-muted); font-size: 12px; }
/* Budget cards are now informational (analysis view), not interactive toggles. */
.tu-budget-card { cursor: default; }

/* Loading skeletons + states */
.tu-skeleton {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  padding: 16px;
  min-height: 96px;
  position: relative;
  overflow: hidden;
}
.tu-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent);
  animation: tu-shimmer 1.2s infinite;
}
@keyframes tu-shimmer { 100% { transform: translateX(100%); } }
.tu-empty-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  gap: 6px;
  color: var(--text-secondary);
  padding: 24px;
}
.tu-empty-panel .tu-empty-title { font-weight: 700; color: var(--text); }

/* === Unified filter bar (design-system contract #8993d9f4 §2) ===============
   One control grammar for period / engine / agent + actions. Every control
   shares height, radius, border and the same focus ring; reuses existing
   semantic tokens (no new colors). Replaces the old loose .tu-header-controls
   select cluster. */
.tu-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-end;
  gap: var(--space-2);
}
.tu-filter-control {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  margin: 0;
}
.tu-filter-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1;
}
.tu-filter-select select {
  appearance: auto;
  min-height: 40px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text-secondary);
  padding: 0 10px;
  font-size: 13px;
  cursor: pointer;
  max-width: 220px;
}
.tu-filter-select select:focus-visible,
.tu-seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Segmented buttons are the visible period control; the native <select> is kept
   in the DOM as the JS state-holder / progressive fallback. Visually hidden
   (not display:none) so it stays a real state-holder — keyboard/AT and smoke
   tests can still drive it — without ever painting over the segmented UI. */
.tu-filter-fallback {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.tu-segmented {
  display: inline-flex;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-input);
}
.tu-seg-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  padding: 0 12px;
  min-height: var(--control-min);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.tu-seg-btn.active { background: var(--accent); color: var(--accent-on); }
.tu-filter-actions { align-self: flex-end; margin: 0; }

/* === Workload matrix (contract §4) ==========================================
   Estimated effort-vs-spend per agent. Desktop/tablet = data-table; mobile =
   stacked cards (CSS toggles which is visible). Reuses .data-table primitives. */
.tu-workload-table th,
.tu-workload-table td { vertical-align: middle; }
.tu-workload-table .tu-rank { width: 36px; color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: right; }
.tu-workload-table .tu-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tu-workload-table .tu-agent-name { font-weight: 600; color: var(--text); word-break: break-word; }
.tu-workload-table .tu-wl-emph { font-weight: 700; color: var(--text); }
.tu-workload-row { height: 44px; }
.tu-workload-row td { padding-top: 10px; padding-bottom: 10px; }
.tu-workload-row:hover { background: var(--bg-card-hover, rgba(255,255,255,.03)); }
.tu-confidence-badge { white-space: nowrap; }
.tu-kpi-badge-row { margin-top: 8px; }

.tu-workload-cards { display: none; }
.tu-workload-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  padding: 12px;
  margin-bottom: 8px;
}
.tu-workload-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tu-workload-card-head .tu-rank { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tu-workload-card-head .tu-agent-name { font-weight: 700; color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tu-workload-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.tu-workload-card-grid > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tu-wl-k { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); font-weight: 600; }
.tu-wl-v { font-size: 14px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }

/* Responsive */
@media (max-width: 1100px) {
  .tu-dashboard-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .tu-header-controls { flex-direction: column; align-items: stretch; width: 100%; }
  .tu-header-controls .input-compact,
  .tu-header-controls button { width: 100%; min-height: 44px; }
  /* Filter bar: stack full-width, keep the one-grammar look, 44px touch floor. */
  .tu-filter-bar { justify-content: stretch; }
  .tu-filter-control,
  .tu-filter-actions { width: 100%; }
  .tu-filter-select select,
  .tu-segmented { width: 100%; max-width: none; }
  .tu-seg-btn { flex: 1 1 0; }
  .tu-filter-select select,
  .tu-seg-btn,
  .tu-filter-actions button { min-height: 44px; }
  /* Tablet: drop low-priority workload columns; core stays in the table. */
  .tu-workload-table .tu-wl-hide-tablet { display: none; }
  .tu-engine-summary { grid-template-columns: 1fr 1fr; }
  /* In-page agent table shows only the top 5 on mobile; the rest live in the
     "Show all" modal. Scopes to #tuSummaryCards so the modal table is unaffected. */
  #tuSummaryCards .tu-agent-table tbody tr:nth-child(n+6) { display: none; }
  .tu-waste-grid { grid-template-columns: 1fr 1fr; }
  #tuTimelineChart { height: 280px; }
  .tu-chart-controls { width: 100%; }
  /* Each control group takes its own full-width row so two segments split the
     whole width -- otherwise "Csoportosított" clips at 390px (QA F6). */
  .tu-chart-mode, .tu-chart-toggle { flex: 1 1 100%; min-width: 0; }
  .tu-segment { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 8px 10px; white-space: nowrap; text-align: center; }
  /* Drilldown tab bar scrolls horizontally without bleeding to the page; tabs
     keep a >=44px touch height (design-system contract §6 / §9). */
  .tu-drilldown .tu-tab-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Calls drilldown: hide the wide table, show stacked call cards. */
  .tu-details-table-wrap { display: none; }
  .tu-details-cards { display: block; }
}
/* Mobile: single-column KPIs and swap the workload table for agent cards
   (contract §9 mobile). Kept below 768 so tablet still gets the priority table. */
@media (max-width: 600px) {
  .tu-engine-summary { grid-template-columns: 1fr; }
  .tu-workload-table-wrap { display: none; }
  .tu-workload-cards { display: block; }
}

/* === Narrow-viewport touch targets & docs overlap fix ===
 * Kept at the end of the sheet on purpose: each selector below matches the
 * specificity of an earlier rule it must beat (the .autonomy-level-btn base at
 * ~7020, the 18px #bgShowAll pin at ~9296, the 280px docs-list clamp at ~9498),
 * so source order is what decides the cascade. A phone-sized window (or a
 * headless mobile viewport reporting a fine pointer) then still gets >=44px
 * tap targets, matching the (pointer: coarse) block near the top. */
@media (max-width: 768px) {
  .autonomy-level-btn {
    min-width: var(--control-min);
    min-height: var(--control-min);
  }
  main.ops-wide-active #bgTasksPage #bgShowAll {
    width: var(--control-min);
    min-width: var(--control-min);
    height: var(--control-min);
    min-height: var(--control-min);
  }
}

/* ==========================================================================
   Design System -- Chunk 1: Global Foundation (reusable component patterns)
   Purpose: one cohesive spacing / surface / table / chip / state system that
   the whole dashboard can share. These are ADDITIVE primitives -- they only
   style elements that literally carry these class tokens, so compound classes
   (e.g. tu-waste-panel, settings-panel) are untouched. No JS bindings or
   element IDs are affected; this is a pure visual layer.

   Deliberate deviation from the plan: the global ".modal-overlay/.modal"
   unification is NOT applied here. Existing modals are toggled via the
   ".active" class with an opacity/visibility transition (see app.js). The
   plan's display:none + ".open/.is-open" rule would hide every working modal,
   which violates the "no behavior change" constraint. Modal unification is
   deferred to the per-page migration chunks, which can update markup + JS
   together.
   ========================================================================== */

/* --- Cards & Panels ------------------------------------------------------- */
.panel,
.overview-card,
.stat-card,
.overview-stat {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  box-shadow: none;
  min-width: 0;
}

.panel {
  padding: var(--space-5);
}

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.panel-title {
  font-size: 16px;
  font-weight: 650;
  line-height: var(--line-tight);
}

.panel-meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* --- Stats ---------------------------------------------------------------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: var(--space-3);
}

.stat-sub {
  margin-top: 4px;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* --- Tables --------------------------------------------------------------- */
.data-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}

.data-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: var(--font-size-md);
}

.data-table th,
.data-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--color-border-subtle);
  vertical-align: top;
}

.data-table th {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-align: left;
}

.data-table tr:last-child td {
  border-bottom: none;
}

/* --- Chips & semantic badge colours --------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  max-width: 100%;
  padding: 3px 8px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 999px;
  font-size: var(--font-size-xs);
  font-weight: 700;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Additive semantic badge variants; the base .badge (defined earlier) is left
   intact so existing badge-active/paused/heartbeat keep their look. */
.badge-success { color: var(--badge-success-text); background: var(--success-soft); }
.badge-warning { color: var(--badge-warning-text); background: color-mix(in srgb, var(--color-warning) 14%, transparent); }
.badge-danger  { color: var(--badge-danger-text);  background: var(--danger-soft); }
.badge-info    { color: var(--badge-info-text);    background: var(--info-soft); }
.badge-neutral { color: var(--badge-neutral-text); background: var(--bg-input); }

/* --- Empty / Loading / Error states --------------------------------------- */
.empty-state,
.loading-state,
.error-state {
  padding: var(--space-6);
  border: 1px dashed var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-bg-surface) 82%, var(--color-bg-muted) 18%);
  color: var(--color-text-secondary);
}

.empty-state strong,
.error-state strong {
  display: block;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

.skeleton {
  min-height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--bg-input), var(--bg-card-hover), var(--bg-input));
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

/* --- Status panel --------------------------------------------------------- */
/* Shared status/summary surface (Updates, and any page that reports a single
   high-level state). Replaces page-specific *-summary blocks. */
.status-panel {
  display: block;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border-subtle);
  border-left: 4px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
  line-height: 1.6;
}

.status-panel strong { color: var(--color-text-primary); }

.status-panel code {
  display: inline;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  background: var(--color-bg-muted);
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: var(--font-size-sm);
}

.status-panel.is-success { border-left-color: var(--color-success); }
.status-panel.is-warning { border-left-color: var(--color-warning); }
.status-panel.is-danger  { border-left-color: var(--color-danger); }
.status-panel.is-info    { border-left-color: var(--color-info); }

/* --- Data list ------------------------------------------------------------ */
/* Shared list treatment for compact record rows (commits, log entries, etc.). */
.data-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.data-list-item {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  background: var(--color-bg-surface);
  min-width: 0;
}

.data-list-item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
}

.data-list-item-title {
  font-size: var(--font-size-body);
  color: var(--color-text-primary);
  line-height: var(--line-normal);
  overflow-wrap: anywhere;
}

@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --- Layout primitives ---------------------------------------------------- */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--panel-min)), 1fr));
  gap: var(--space-4);
}

.dashboard-grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: var(--space-4);
  align-items: start;
}

.dashboard-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

@media (max-width: 1100px) {
  .dashboard-grid-2 {
    grid-template-columns: 1fr;
  }
}

/* --- Toolbar & segmented control ------------------------------------------ */
.toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  min-width: 0;
}

.toolbar > * {
  min-width: 0;
}

.segmented-control {
  display: inline-flex;
  align-items: stretch;
  gap: 2px;
  padding: 3px;
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border-subtle);
  border-radius: 999px;
}

.segmented-control > button,
.segmented-control > .segmented-option {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: var(--font-size-md);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.segmented-control > button.active,
.segmented-control > button[aria-selected="true"],
.segmented-control > .segmented-option.active {
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-sm);
}

/* --- Filter grid (mobile-friendly control cluster) ------------------------ */
.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: var(--space-3);
}

/* --- Page header / mobile shell behaviour --------------------------------- */
/* Shared header action cluster (primary/secondary buttons next to a page or
   panel title). Replaces per-page inline flex styling. */
.page-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

@media (max-width: 768px) {
  main {
    padding: 16px 12px 48px;
  }
  .page-header-row {
    flex-direction: column;
    align-items: stretch;
  }
  .page-header-actions,
  .header-actions,
  .tu-header-controls,
  .vault-header-actions {
    width: 100%;
  }
  .data-table {
    min-width: 600px;
  }
  /* Touch-target floor for segmented controls on mobile (schedules, agents). */
  .segmented-control > button,
  .segmented-control > .segmented-option {
    min-height: 44px;
  }
}

/* ==========================================================================
   Design System -- Chunk 6: Admin / support pages
   Settings, Vault, Connectors, Autonomy, Skills, Ideas, Archived polish.
   Applies the chunk-1 panel / stat / chip / empty-state language to the
   admin surfaces. Additive: every selector targets a class this chunk adds
   (or scopes an existing class to its page), so unrelated pages are untouched.
   ========================================================================== */

/* --- Connectors: graceful empty / error states ---------------------------- */
.connector-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.connector-state-actions {
  margin-top: var(--space-2);
}

/* --- Settings: panel sections + divider rows ------------------------------ */
.settings-groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.panel.settings-group {
  margin-bottom: 0;
  padding: var(--space-5);
}
.settings-group-head {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
}
.settings-group-title {
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-text-primary);
}
.settings-group-count {
  flex-shrink: 0;
}
.settings-group-body {
  display: flex;
  flex-direction: column;
}
/* Rows inside a panel become quiet dividers instead of nested cards
   (the plan calls out: avoid card-in-card; use rows inside panels). */
.settings-group-body .settings-row {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border-subtle);
  border-radius: 0;
  margin-bottom: 0;
  padding: var(--space-3) 0;
}
.settings-group-body .settings-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.settings-group-body .settings-row:first-child {
  padding-top: 0;
}
.settings-group-body .settings-row:hover {
  border-color: var(--color-border-subtle);
}
.settings-group-body .settings-row:last-child:hover {
  border-color: transparent;
}

/* Sticky dirty-state action bar (was inline-styled in markup). */
.settings-save-bar {
  position: sticky;
  bottom: 0;
  z-index: 10;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-5);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.settings-dirty-count {
  font-size: var(--font-size-md);
  color: var(--color-text-muted);
}
.settings-save-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* --- Vault: security posture panel ---------------------------------------- */
.vault-security-panel {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.vault-security-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--success-soft);
  color: var(--color-success);
}
.vault-security-body {
  min-width: 0;
}
.vault-security-title {
  margin: 0 0 4px;
}
.vault-security-text {
  margin: 0;
  font-size: var(--font-size-body);
  line-height: var(--line-normal);
  color: var(--color-text-secondary);
}
.vault-security-text strong {
  color: var(--color-text-primary);
}

/* --- Ideas: toolbar, stat cards, empty state ------------------------------ */
.ideas-toolbar {
  justify-content: flex-end;
}
.ideas-filter {
  font-size: var(--font-size-md);
  min-width: 150px;
}
.ideas-stats {
  margin-bottom: var(--space-4);
}
.idea-stat-card {
  padding: 12px 16px;
}
.ideas-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.ideas-empty {
  text-align: left;
}

/* --- Archived: toolbar -> design-system controls -------------------------- */
.archived-toolbar {
  margin-bottom: var(--space-3);
}
.archived-search {
  min-width: 220px;
  flex: 1 1 220px;
}
.archived-project {
  min-width: 150px;
}
.archived-date {
  font-size: var(--font-size-md);
}
.archived-date-sep {
  color: var(--color-text-muted);
  font-size: var(--font-size-md);
}
.archived-summary {
  margin-bottom: var(--space-2);
}

@media (max-width: 768px) {
  .ideas-toolbar,
  .archived-toolbar {
    width: 100%;
  }
  /* Tablet (768x1024): collapse the ops-wide desktop grid one breakpoint
     earlier so the 6-column ~974px-min toolbar stops overflowing horizontally
     between 761-768px (the desktop grid otherwise survives until 760px). */
  main.ops-wide-active #archivedPage .archived-toolbar {
    grid-template-columns: 1fr !important;
  }
  .ideas-filter,
  .archived-search,
  .archived-project {
    flex: 1 1 100%;
    min-width: 0;
  }
  .settings-save-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .settings-save-actions {
    width: 100%;
  }
  .settings-save-actions .btn-primary,
  .settings-save-actions .btn-secondary {
    flex: 1 1 0;
  }
}

/* --- Skills: collapsible help panel + source/doc filters ------------------ */
.skills-help {
  margin-top: var(--space-3);
}
.skills-help-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 6px 16px;
  background: transparent;
  border: 1px solid var(--color-border-subtle);
  border-radius: 999px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  font-weight: 600;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}
.skills-help-toggle:hover {
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}
.skills-help .info-box {
  margin-top: var(--space-2);
}
.skills-help .info-box[hidden] {
  display: none;
}
.skills-toolbar {
  margin-bottom: var(--space-4);
  gap: var(--space-3);
}
/* Accent colours for the skills stat values (replaces inline style="color:..."). */
.stat-value-info { color: var(--color-info); }
.stat-value-accent { color: var(--color-accent); }
.stat-value-success { color: var(--color-success); }
.skills-doc-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--control-min);
  padding: 0 4px;
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
  cursor: pointer;
  user-select: none;
}
.skills-doc-filter input {
  width: 18px;
  height: 18px;
  accent-color: var(--color-accent);
}
#skillsSourceFilter button[hidden] {
  display: none;
}
/* Touch-target floor for the Skills source filter on every viewport (the
   shared .segmented-control only enforces 44px under the mobile breakpoint). */
#skillsSourceFilter > button {
  min-height: 44px;
}

/* --- Napló: day-grouped audit timeline + class-based source chips --------- */
/* Single-column timeline (overrides the earlier multi-column grid) so each day
   group keeps its own event rail. */
#naploPage .naplo-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.naplo-day {
  min-width: 0;
}
.naplo-day-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.naplo-day-date {
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--color-text-primary);
}
.naplo-day-count {
  color: var(--color-text-muted);
}
.naplo-day-events {
  display: flex;
  flex-direction: column;
  border-left: 2px solid var(--color-border-subtle);
  margin-left: 5px;
}
.naplo-event {
  position: relative;
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0 var(--space-3) var(--space-4);
  min-width: 0;
}
.naplo-event + .naplo-event {
  border-top: 1px solid var(--color-border-subtle);
}
.naplo-event::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 17px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-bg-surface);
  border: 2px solid var(--color-border-strong);
}
.naplo-event-time {
  flex-shrink: 0;
  min-width: 42px;
  padding-top: 1px;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.naplo-event-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.naplo-event-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.naplo-event-detail {
  color: var(--color-text-primary);
  font-size: var(--font-size-md);
  line-height: var(--line-normal);
  overflow-wrap: anywhere;
}
.naplo-event-detail code {
  background: var(--color-bg-muted);
  padding: 1px 5px;
  border-radius: var(--radius-xs);
  font-size: var(--font-size-sm);
}
.naplo-diary-content {
  margin-top: 2px;
  color: var(--color-text-secondary);
}
/* Class-based source chips replace the old inline style="background:..." spans.
   .naplo-chip drops the base .chip border so the soft fill reads as the accent. */
.naplo-chip {
  border: none;
}
.naplo-chip-config { color: var(--color-info); background: var(--info-soft); }
.naplo-chip-idea { color: var(--color-success); background: var(--success-soft); }
.naplo-chip-store { color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 16%, transparent); }
.naplo-chip-diary { color: #8b5cf6; background: color-mix(in srgb, #8b5cf6 16%, transparent); }
.naplo-chip-default { color: var(--color-text-secondary); background: var(--color-bg-muted); }
.naplo-chip-diary-log { color: var(--color-text-secondary); background: var(--color-bg-muted); }
.naplo-chip-diary-memory { color: #8b5cf6; background: color-mix(in srgb, #8b5cf6 16%, transparent); }

@media (max-width: 768px) {
  .skills-toolbar {
    width: 100%;
  }
  .skills-toolbar .segmented-control {
    width: 100%;
    justify-content: space-between;
  }
}

/* === Aktivitás tábla — kompakt, profi admin-tábla (coordinator patch) === */
.activity-table td,
.activity-table th { padding-top: 5px; padding-bottom: 5px; line-height: 1.3; }
.activity-table tbody .activity-row > td { height: 40px; }
.activity-table .activity-row-name { font-weight: 600; font-size: var(--font-ui-md, 14px); }
.activity-table .activity-row-checked,
.activity-table .activity-row-proof { color: var(--text-muted); font-size: var(--font-ui-sm, 12.5px); }
.activity-table .activity-row-actions { white-space: nowrap; }
.activity-table .activity-row-actions button {
  width: 32px; height: 32px; min-width: 32px; min-height: 32px;
  padding: 0; display: inline-flex; align-items: center; justify-content: center;
}
.activity-table .activity-badge { vertical-align: middle; }
/* hidden detail-row must not leave a stray gap/border */
.activity-table .activity-detail-row[hidden] { display: none; }

/* === Agent munka (taskonkénti agent-munkakövetés) =========================
   Scoped under .modal.modal-kanban-detail so every class inherits the modal's
   --detail-* theme tokens (light / dark / theme-black) for free and never
   leaks onto other pages. Composition over the existing primitives
   (.stat-card, .tu-share-bar, .data-table, .badge-*, .empty/loading/error).
   Only 3 new tokens (per design-system spec #35115597). */
.modal.modal-kanban-detail {
  --aw-track: var(--detail-panel-2);       /* unfilled share/skeleton track */
  --aw-rail:  var(--detail-border-strong); /* timeline connector line */
  --aw-burst: var(--accent-soft);          /* token/tool burst highlight */
}

.modal.modal-kanban-detail .aw-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 12px);
  flex-wrap: wrap;
  margin-bottom: var(--space-3, 12px);
}
.modal.modal-kanban-detail .aw-head h4 { margin: 0; }

.modal.modal-kanban-detail .aw-nav {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  background: var(--detail-panel-2);
  border: 1px solid var(--detail-border);
  border-radius: 999px;
}
.modal.modal-kanban-detail .aw-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--detail-muted);
  font: inherit;
  font-size: var(--font-size-sm, 12px);
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--transition, .2s ease), color var(--transition, .2s ease);
}
.modal.modal-kanban-detail .aw-tab:hover { color: var(--detail-text); }
.modal.modal-kanban-detail .aw-tab.active {
  background: var(--detail-accent);
  color: #fff;
}
.modal.modal-kanban-detail .aw-tab:focus-visible {
  outline: 2px solid var(--detail-accent);
  outline-offset: 2px;
}

/* --- state machine: only the child matching [data-state] is shown --------- */
.modal.modal-kanban-detail .aw-state { display: none; }
.modal.modal-kanban-detail .aw-panel[data-state="loading"] > [data-aw-state="loading"],
.modal.modal-kanban-detail .aw-panel[data-state="error"]   > [data-aw-state="error"],
.modal.modal-kanban-detail .aw-panel[data-state="empty"]   > [data-aw-state="empty"],
.modal.modal-kanban-detail .aw-panel[data-state="ready"]   > [data-aw-state="ready"] { display: block; }

.modal.modal-kanban-detail .error-state.aw-state p,
.modal.modal-kanban-detail .empty-state.aw-state p { margin: 0 0 8px; }

/* skeleton (panel-scoped, never over the whole modal) */
.modal.modal-kanban-detail .aw-skel {
  border-radius: var(--radius-sm, 8px);
  background: linear-gradient(90deg, var(--aw-track) 25%, color-mix(in srgb, var(--aw-track) 60%, var(--detail-text) 8%) 37%, var(--aw-track) 63%);
  background-size: 400% 100%;
  animation: aw-shimmer 1.4s ease infinite;
  margin-bottom: 10px;
}
.modal.modal-kanban-detail .aw-skel-kpis { height: 64px; }
.modal.modal-kanban-detail .aw-skel-row  { height: 28px; }
@keyframes aw-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .modal.modal-kanban-detail .aw-skel { animation: none; }
}

/* --- confidence row + contribution basis note ----------------------------- */
.modal.modal-kanban-detail .aw-confidence-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: var(--space-3, 12px);
  font-size: var(--font-size-sm, 12px);
  color: var(--detail-muted);
}
.modal.modal-kanban-detail .aw-telemetry-state {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid var(--detail-border);
  border-radius: 999px;
  color: var(--detail-text);
  font-size: var(--font-size-xs, 11px);
  font-weight: 700;
}
.modal.modal-kanban-detail .aw-telemetry-state-live,
.modal.modal-kanban-detail .aw-telemetry-state-settling {
  border-color: color-mix(in oklch, var(--warning) 42%, var(--detail-border));
  color: var(--warning);
}
.modal.modal-kanban-detail .aw-telemetry-state-settled {
  border-color: color-mix(in oklch, var(--success) 38%, var(--detail-border));
  color: var(--success);
}
.modal.modal-kanban-detail .aw-telemetry-state-ambiguous,
.modal.modal-kanban-detail .aw-telemetry-state-unavailable {
  color: var(--detail-muted);
}
.modal.modal-kanban-detail .aw-contrib-note {
  font-size: var(--font-size-sm, 12px);
  color: var(--detail-muted);
  margin: 4px 0 var(--space-3, 12px);
}

/* --- KPI strip: reuse .stat-grid / .stat-card, re-themed to --detail-* ----- */
.modal.modal-kanban-detail .aw-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: var(--space-3, 12px);
  margin-bottom: var(--space-3, 12px);
}
.modal.modal-kanban-detail .aw-kpis .stat-card {
  min-width: 0;
  padding: 12px 14px;
  background: var(--detail-panel);
  border: 1px solid var(--detail-border);
  text-align: left;
}
.modal.modal-kanban-detail .aw-kpis .stat-value {
  color: var(--detail-text);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}
.modal.modal-kanban-detail .aw-kpis .stat-label { color: var(--detail-muted); }
.modal.modal-kanban-detail .aw-kpis .stat-sub {
  font-size: var(--font-size-sm, 12px);
  color: var(--detail-muted);
  margin-top: 6px;
}

/* badges: never colour-only — always carry a text label */
.modal.modal-kanban-detail .aw-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--font-size-xs, 11px);
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

/* --- agent table (desktop) ------------------------------------------------- */
.modal.modal-kanban-detail .aw-agent-table { min-width: 560px; }
.modal.modal-kanban-detail .aw-agent-table th,
.modal.modal-kanban-detail .aw-agent-table td {
  border-bottom-color: var(--detail-border);
  color: var(--detail-text);
  vertical-align: middle;
}
.modal.modal-kanban-detail .aw-agent-table th { color: var(--detail-muted); }
.modal.modal-kanban-detail .aw-agent-table .aw-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.modal.modal-kanban-detail .aw-agent-table th.aw-sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.modal.modal-kanban-detail .aw-agent-table th.aw-sortable:hover { color: var(--detail-text); }
.modal.modal-kanban-detail .aw-agent-table th.aw-sort-active { color: var(--detail-accent); }
.modal.modal-kanban-detail .aw-agent-name {
  font-weight: 600;
  color: var(--detail-text);
  word-break: break-word;
}
.modal.modal-kanban-detail .aw-agent-row { cursor: pointer; transition: background var(--transition, .2s ease); }
.modal.modal-kanban-detail .aw-agent-row:hover { background: color-mix(in srgb, var(--detail-accent) 10%, transparent); }
.modal.modal-kanban-detail .aw-agent-row.aw-selected { background: color-mix(in srgb, var(--detail-accent) 16%, transparent); }
.modal.modal-kanban-detail .aw-agent-row:focus-visible { outline: 2px solid var(--detail-accent); outline-offset: -2px; }
.modal.modal-kanban-detail .aw-role {
  font-size: var(--font-size-xs, 11px);
  color: var(--detail-muted);
  margin-left: 6px;
}

/* contribution share bar (reuse .tu-share-bar visual, full-width in column) */
.modal.modal-kanban-detail .aw-share { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.modal.modal-kanban-detail .aw-share .tu-share-bar {
  flex: 1;
  width: auto;
  min-width: 48px;
  background: var(--aw-track);
  margin-right: 0;
}
.modal.modal-kanban-detail .aw-share .tu-share-pct { color: var(--detail-text); }

/* --- agent cards (mobile fallback) ---------------------------------------- */
.modal.modal-kanban-detail .aw-agent-cards { display: none; flex-direction: column; gap: var(--space-2, 8px); }
.modal.modal-kanban-detail .aw-agent-card {
  background: var(--detail-panel);
  border: 1px solid var(--detail-border);
  border-radius: var(--radius-sm, 8px);
  padding: 12px;
}
.modal.modal-kanban-detail .aw-agent-card.aw-selected { border-color: var(--detail-accent); }
.modal.modal-kanban-detail .aw-agent-card-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.modal.modal-kanban-detail .aw-agent-card .tu-share-bar { width: 100%; background: var(--aw-track); margin: 6px 0; }
.modal.modal-kanban-detail .aw-card-kpis {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2, 8px);
  margin-top: 8px;
  font-size: var(--font-size-sm, 12px);
}
.modal.modal-kanban-detail .aw-card-kpis dt { color: var(--detail-muted); }
.modal.modal-kanban-detail .aw-card-kpis dd { margin: 0; color: var(--detail-text); font-variant-numeric: tabular-nums; }

/* --- links row ------------------------------------------------------------- */
.modal.modal-kanban-detail .aw-links { margin-top: var(--space-3, 12px); }

/* --- timeline -------------------------------------------------------------- */
.modal.modal-kanban-detail .aw-timeline { list-style: none; margin: 0; padding: 0; }
.modal.modal-kanban-detail .aw-tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--space-3, 12px);
  padding-bottom: var(--space-3, 12px);
}
.modal.modal-kanban-detail .aw-tl-rail { position: relative; display: flex; justify-content: center; }
.modal.modal-kanban-detail .aw-tl-rail::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: -4px;
  width: 2px;
  background: var(--aw-rail);
}
.modal.modal-kanban-detail .aw-tl-item:last-child .aw-tl-rail::before { display: none; }
.modal.modal-kanban-detail .aw-tl-dot {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  margin-top: 4px;
  background: var(--detail-muted);
  border: 2px solid var(--detail-bg);
  z-index: 1;
}
.modal.modal-kanban-detail .aw-tl-item[data-type="token_burst"] .aw-tl-body { background: var(--aw-burst); }
.modal.modal-kanban-detail .aw-tl-body {
  border-radius: var(--radius-sm, 8px);
  padding: 8px 10px;
  background: var(--detail-panel);
  border: 1px solid var(--detail-border);
}
.modal.modal-kanban-detail .aw-tl-time { font-size: var(--font-size-xs, 11px); color: var(--detail-muted); }
.modal.modal-kanban-detail .aw-tl-title { font-weight: 600; color: var(--detail-text); margin: 2px 0; word-break: break-word; }
.modal.modal-kanban-detail .aw-tl-detail { font-size: var(--font-size-sm, 12px); color: var(--detail-muted); word-break: break-word; }
.modal.modal-kanban-detail .aw-tl-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }

/* --- responsive: desktop table <-> mobile cards (single source per bp) ----- */
@media (max-width: 640px) {
  .modal.modal-kanban-detail .aw-agent-table-wrap { display: none; }
  .modal.modal-kanban-detail .aw-agent-cards { display: flex; }
  .modal.modal-kanban-detail .aw-kpis { grid-template-columns: repeat(2, 1fr); }
}
/* touch targets >= 44px. Gate extended to 768px so the sortable table header
   (cards only swap in <=640px, table is still shown 641-768px) is covered on
   tablet. Target 48px because mobile/device emulation scales getBoundingClientRect
   below the CSS px (a true 44px control measures ~42.9px under isMobile), so 48px
   CSS keeps the *rendered* target >=44px. <th> ignores min-height (table-cell),
   so the sortable header uses height + vertical padding instead. */
@media (pointer: coarse), (max-width: 768px) {
  .modal.modal-kanban-detail .aw-tab { min-height: 48px; }
  .modal.modal-kanban-detail #awRetryBtn { min-height: 48px; }
  .modal.modal-kanban-detail .aw-agent-table th.aw-sortable {
    height: 48px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .modal.modal-kanban-detail .aw-agent-row td { padding-top: 14px; padding-bottom: 14px; }
}

/* ============================================================
   Deep-redesign target-size remediation (card #0378a8a9 rework)
   Brings sub-34px interactive controls flagged by the visual gate
   up to the >=34px (>=44px on phones) touch-target floor.
   ============================================================ */
/* Token Monitor interactive controls must clear the 44px touch-target gate at
   ALL viewports (390/768/1440), not just phones — QA rework #a37b552f /
   owner #82d80f1a flagged legend chips & line toggles at 34px on desktop/tablet
   and the waste-category buttons at 30px everywhere. */
.tu-legend-chip,
.tu-line-toggle {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
/* Waste-category filter buttons had no rule at all (default ~30px block button);
   render them as 44px-tall pills with their label+count centered. */
.tu-waste-cat {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
#connectorEnvAddBtn {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
}
/* Token Usage details breakdown table: the wrapper had no overflow rule,
   so its min-width:600px table escaped and inflated main.scrollWidth on
   phones/tablets. Match the sibling .data-table-wrap scroll behaviour. */
.tu-details-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}
/* Long content-preview cells must wrap instead of running off-screen
   (timestamp column keeps its inline white-space:nowrap). */
.tu-details-table-wrap .mem-table td {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.tu-details-table-wrap .mem-table td:nth-child(5) { min-width: 220px; }
/* Schedules advanced-options checkboxes were 13x13 native boxes */
#scheduleSkipIfBusy,
#scheduleForceSend {
  flex: none;
  width: 34px;
  height: 34px;
  accent-color: var(--accent, #6366f1);
  cursor: pointer;
}
@media (max-width: 430px) {
  .tu-legend-chip,
  .tu-line-toggle,
  #connectorEnvAddBtn,
  .btn-compact { min-height: 44px; }
  #scheduleSkipIfBusy,
  #scheduleForceSend { width: 44px; height: 44px; }
}

/* ==========================================================================
   Projects page — multi-project registry visibility (read-only)
   Reuses shared primitives (.status-panel, .data-list, .data-table, .chip,
   .badge-*, .empty/loading/error-state); .pj-* only adds layout/structure.
   ========================================================================== */
.pj-shell {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.pj-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.pj-list-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.pj-list-item:hover { border-color: var(--color-border-strong); }
.pj-list-item.is-active {
  border-color: var(--color-accent, var(--accent));
  background: color-mix(in srgb, var(--color-accent, var(--accent)) 8%, var(--color-bg-surface));
}
.pj-list-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.pj-list-name {
  font-size: var(--font-size-body);
  font-weight: 700;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pj-list-meta { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.pj-list-sub { font-size: var(--font-size-sm); color: var(--color-text-muted); }

.pj-detail { min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); }

.pj-detail-head { display: flex; flex-direction: column; gap: var(--space-2); }
.pj-detail-title {
  margin: 0;
  font-size: var(--font-size-xl, 1.35rem);
  color: var(--color-text-primary);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.pj-detail-id {
  font-size: var(--font-size-sm);
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  color: var(--color-text-muted);
  font-weight: 500;
}
.pj-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.pj-policy { white-space: normal; }
.pj-policy strong { display: block; margin-bottom: 4px; }
.pj-muted { color: var(--color-text-muted); font-size: var(--font-size-sm); }

.pj-section { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.pj-section-title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.pj-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--color-bg-muted);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: 700;
}

.pj-kv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--space-2) var(--space-4);
  margin: 0;
}
.pj-kv { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pj-kv dt { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.pj-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.pj-kv dd code {
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  background: var(--color-bg-muted);
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
}

.pj-mcp-server { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.pj-mcp-server:first-of-type { margin-top: 0; }
.pj-mcp-server-head { display: flex; align-items: center; gap: var(--space-2); }
.pj-mcp-server-name {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--color-text-primary);
}
.pj-fp { margin-bottom: var(--space-3); }
.pj-mcp-table { min-width: 520px; }
.pj-agents-table { min-width: 520px; }
.pj-evidence { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.pj-evidence strong { display: inline; }

@media (max-width: 860px) {
  .pj-shell { grid-template-columns: 1fr; }
  .pj-list {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .pj-list-item { min-width: 200px; }
}

/* === Incident fix 2026-07-01: prevent browser-default controls in dark UI ===
   CL1939/1940 introduced markup that could fall through to native button styles.
   Keep this late in the sheet as a guardrail for dashboard-wide dark surfaces. */
.mobile-menu-btn,
.kanban-mobile-tab,
.tu-legend-chip {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg-input) 82%, var(--bg-card) 18%);
  color: var(--text-secondary);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.mobile-menu-btn:hover,
.kanban-mobile-tab:hover,
.tu-legend-chip:hover {
  background: var(--bg-card-hover);
  color: var(--text);
}
.mobile-menu-btn:focus-visible,
.kanban-mobile-tab:focus-visible,
.tu-legend-chip:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}
.mobile-menu-btn {
  align-items: center;
  justify-content: center;
  width: var(--control-min);
  min-width: var(--control-min);
  min-height: var(--control-min);
  padding: 0;
}
.kanban-mobile-tab {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--control-min);
  padding: 8px 10px;
  text-align: center;
}
.kanban-mobile-tab.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text);
}
.tu-legend-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-width: 0;
}
.tu-legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: var(--control-min);
  max-width: 240px;
  padding: 7px 10px;
  white-space: nowrap;
}
.tu-legend-chip span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tu-legend-chip.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text);
}
.tu-legend-chip .tu-leg-swatch {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

/* ===========================================================================
   GLASSY-DARK REDESIGN — WAVE 1: app-shell + card surfaces
   ---------------------------------------------------------------------------
   Owner-approved SOTET PREMIUM / GLASSY direction. Skin only, no behaviour
   change: every route/button/modal/ID is untouched. Scoped to
   [data-theme="dark"] so the light theme is unaffected. Bible:
   docs/design/glassy-dark-bible.md. Appended last so the [data-theme="dark"]
   scope reliably wins the cascade over the base card/shell rules.
   =========================================================================== */

/* Layered dark background — depth, not flat black. Fixed attachment keeps the
   glow anchored to the viewport so panels read as glass floating over depth. */
[data-theme="dark"] body {
  background-color: var(--gd-bg-0);
  background:
    radial-gradient(circle at 18% 12%, rgba(96, 165, 250, 0.22), transparent 28%),
    radial-gradient(circle at 86% 4%, rgba(103, 232, 249, 0.16), transparent 24%),
    radial-gradient(circle at 78% 84%, rgba(139, 92, 246, 0.12), transparent 30%),
    linear-gradient(145deg, var(--gd-bg-0), var(--gd-bg-1) 48%, #02040a 100%);
  color: var(--gd-text);
}

/* --- Sidebar: glass rail with active-nav glow ---------------------------- */
[data-theme="dark"] .sidebar {
  background: var(--gd-glass-bg);
  -webkit-backdrop-filter: blur(var(--gd-glass-blur)) saturate(145%);
  backdrop-filter: blur(var(--gd-glass-blur)) saturate(145%);
  border-right: var(--gd-glass-border);
  box-shadow: var(--gd-shadow-panel);
}
[data-theme="dark"] .sidebar-brand,
[data-theme="dark"] .sidebar-footer { border-color: var(--gd-border); }
[data-theme="dark"] .sidebar-brand-mark {
  background: #030712;
  box-shadow: var(--gd-glow-blue), 0 18px 44px rgba(0, 0, 0, 0.38);
}
[data-theme="dark"] .sidebar-collapse-btn,
[data-theme="dark"] .theme-toggle {
  background: var(--gd-surface-soft);
  border: var(--gd-glass-border);
  color: var(--gd-text-2);
}
[data-theme="dark"] .sidebar-fleet {
  background: var(--gd-glass-bg-soft);
  border: var(--gd-glass-border);
  box-shadow: var(--gd-inner-light);
}
[data-theme="dark"] .sidebar-fleet-grid div {
  background: rgba(3, 7, 18, 0.42);
  border-color: var(--gd-border);
}
[data-theme="dark"] .sidebar-fleet.is-alert {
  border-color: rgba(251, 191, 36, 0.34);
}
[data-theme="dark"] .sidebar-fleet.is-offline {
  opacity: 0.78;
}
[data-theme="dark"] .sidebar-brand-sub { color: var(--gd-text-muted); }
[data-theme="dark"] .nav-group-rule { background: var(--gd-border); }
[data-theme="dark"] .nav-group-label { color: var(--gd-text-muted); }

/* Transparent 1px border on every nav row so activating one causes no 1px
   layout shift (box-sizing: border-box). */
[data-theme="dark"] .sb-link {
  color: var(--gd-text-muted);
  border: 1px solid transparent;
}
[data-theme="dark"] .sb-link:hover {
  color: var(--gd-text);
  background: var(--gd-surface-soft);
  border-color: var(--gd-border);
}
[data-theme="dark"] .sb-link.active {
  color: var(--gd-text);
  background: linear-gradient(90deg, rgba(103, 232, 249, 0.16), rgba(96, 165, 250, 0.07));
  border: var(--gd-glass-border-hot);
  box-shadow: var(--gd-glow-cyan), var(--gd-inner-light);
}
[data-theme="dark"] .sb-link.active svg { color: var(--gd-accent); }

/* --- Topbar (mobile) + hamburger: glass ---------------------------------- */
[data-theme="dark"] .mobile-topbar {
  background: var(--gd-glass-bg);
  -webkit-backdrop-filter: blur(var(--gd-glass-blur-mobile)) saturate(145%);
  backdrop-filter: blur(var(--gd-glass-blur-mobile)) saturate(145%);
  border-bottom: var(--gd-glass-border);
}
[data-theme="dark"] .mobile-menu-btn {
  background: var(--gd-surface-soft);
  border: var(--gd-glass-border);
  color: var(--gd-text);
}

[data-theme="dark"] .app-shell-topbar {
  background: linear-gradient(180deg, rgba(8, 14, 26, 0.84), rgba(5, 10, 20, 0.66));
  border-bottom: var(--gd-glass-border);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22), var(--gd-inner-light);
  -webkit-backdrop-filter: blur(var(--gd-glass-blur)) saturate(145%);
  backdrop-filter: blur(var(--gd-glass-blur)) saturate(145%);
}
[data-theme="dark"] .shell-breadcrumb { color: var(--gd-text-muted); }
[data-theme="dark"] .shell-title-row h1 { color: var(--gd-text); }
[data-theme="dark"] .shell-state-pill {
  color: var(--gd-accent);
  background: rgba(103, 232, 249, 0.11);
  border-color: rgba(103, 232, 249, 0.24);
}
[data-theme="dark"] .shell-action-btn {
  background: var(--gd-surface-soft);
  border: var(--gd-glass-border);
  color: var(--gd-text-2);
}
[data-theme="dark"] .shell-action-btn:hover {
  color: var(--gd-text);
  border-color: var(--gd-border-strong);
  box-shadow: var(--gd-glow-cyan);
}

/* --- Main card surfaces: glass panels (visible on every page) ------------- */
[data-theme="dark"] .panel,
[data-theme="dark"] .overview-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .overview-stat {
  background: var(--gd-glass-bg);
  border: var(--gd-glass-border);
  border-radius: var(--gd-radius-md);
  box-shadow: var(--gd-shadow-panel);
  -webkit-backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
}
/* Larger page panels take the lg radius; stat/KPI cards keep md. */
[data-theme="dark"] .panel,
[data-theme="dark"] .overview-card { border-radius: var(--gd-radius-lg); }

/* Clickable KPI hover: hairline lifts + soft cyan glow, no layout shift. */
[data-theme="dark"] .overview-stat:hover {
  border-color: var(--gd-border-hover);
  box-shadow: var(--gd-shadow-panel), var(--gd-glow-cyan);
}
/* One glowing key metric per the Overview rubric — restrained, on the value. */
[data-theme="dark"] .overview-stat-value {
  color: var(--gd-text);
  text-shadow: 0 0 22px rgba(103, 232, 249, 0.22);
}
[data-theme="dark"] .overview-stat-label,
[data-theme="dark"] .overview-stat-sub { color: var(--gd-text-muted); }

/* ===========================================================================
   GLASSY-DARK REDESIGN — WAVE 2: core ops pages
   ---------------------------------------------------------------------------
   Overview activity-feed glass rows + mobile header, Kanban columns/cards,
   Agents glass cards, Activity table rows, Status glass panels.
   Scoped entirely to [data-theme="dark"].
   =========================================================================== */

/* --- Overview: activity-feed glass rows + mobile command header ---------- */
[data-theme="dark"] .overview-mobile-command {
  background: var(--gd-glass-bg);
  border: var(--gd-glass-border);
  border-radius: var(--gd-radius-lg);
  -webkit-backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
          backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
  box-shadow: var(--gd-shadow-panel);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  margin-bottom: 16px;
}
[data-theme="dark"] .overview-mobile-kicker { color: var(--gd-text-muted); }
[data-theme="dark"] .overview-mobile-live {
  background: linear-gradient(90deg, rgba(103, 232, 249, 0.18), rgba(96, 165, 250, 0.10));
  border: var(--gd-glass-border-hot);
  color: var(--gd-accent);
  box-shadow: var(--gd-glow-cyan);
  border-radius: var(--gd-radius-pill);
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

[data-theme="dark"] .overview-card-head h3 { color: var(--gd-text-2); }
[data-theme="dark"] .overview-card-meta    { color: var(--gd-text-muted); }

/* Activity-feed items: subtle glass row, glow on hover */
[data-theme="dark"] .overview-activity-item {
  background: var(--gd-surface-soft);
  border: 1px solid rgba(184, 211, 255, 0.08);
  border-radius: var(--gd-radius-sm);
  padding: 8px 10px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
[data-theme="dark"] .overview-activity-item:hover {
  border-color: var(--gd-border);
  box-shadow: var(--gd-glow-blue);
}
[data-theme="dark"] .overview-activity-title { color: var(--gd-text); }
[data-theme="dark"] .overview-activity-time  { color: var(--gd-text-muted); }

/* --- Kanban: remap design vars + glass columns/cards --------------------- */
/* Remaps the kanban local-var block; wins cascade over line ~2098 because
   it appears later and has equal specificity. */
[data-theme="dark"] #kanbanPage {
  --kanban-surface:       rgba(3, 7, 18, 0);
  --kanban-panel:         rgba(13, 23, 39, 0.72);
  --kanban-panel-2:       rgba(17, 28, 48, 0.60);
  --kanban-panel-3:       rgba(22, 33, 56, 0.68);
  --kanban-border:        rgba(184, 211, 255, 0.16);
  --kanban-border-strong: rgba(184, 211, 255, 0.28);
  --kanban-text:          var(--gd-text);
  --kanban-muted:         var(--gd-text-2);
  --kanban-soft:          var(--gd-text-muted);
  --kanban-accent:        var(--gd-accent-blue);
}

/* Column shell: glass pill */
[data-theme="dark"] .kanban-col {
  background: var(--gd-glass-bg);
  border: var(--gd-glass-border);
  border-radius: var(--gd-radius-lg);
  -webkit-backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
          backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
  box-shadow: var(--gd-shadow-panel);
}

/* Sticky header: own glass layer so cards can scroll underneath it */
[data-theme="dark"] .kanban-col-header {
  background: linear-gradient(180deg, rgba(13, 23, 39, 0.92), rgba(13, 23, 39, 0.70));
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(184, 211, 255, 0.10);
  border-radius: var(--gd-radius-lg) var(--gd-radius-lg) 0 0;
}
[data-theme="dark"] .kanban-col-title { color: var(--gd-text-muted); }
[data-theme="dark"] .kanban-col-count {
  background: var(--gd-surface-soft);
  border-color: var(--gd-border);
  color: var(--gd-text-2);
}

/* Kanban card: translucent glass with hairline */
[data-theme="dark"] .kanban-card {
  background: var(--gd-glass-bg-soft);
  border: var(--gd-glass-border);
  border-radius: var(--gd-radius-sm);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
          backdrop-filter: blur(10px) saturate(130%);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28), var(--gd-inner-light);
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
[data-theme="dark"] .kanban-card:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.04));
  border-color: var(--gd-border-hover);
  box-shadow: var(--gd-shadow-panel), var(--gd-glow-blue);
  transform: translateY(-1px);
}
/* Priority rails remain visible on glass background */
[data-theme="dark"] .kanban-card[data-priority="urgent"] { border-left: 3px solid var(--gd-danger); }
[data-theme="dark"] .kanban-card[data-priority="high"]   { border-left: 3px solid var(--gd-accent-blue); }

/* Drop target: cyan tint */
[data-theme="dark"] .kanban-col-body.drag-over {
  background: rgba(103, 232, 249, 0.08);
  border-radius: var(--gd-radius-md);
}

/* Toolbar: glass bar */
[data-theme="dark"] #kanbanPage .kanban-toolbar {
  background: var(--gd-glass-bg);
  border: var(--gd-glass-border);
  -webkit-backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
          backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
  box-shadow: var(--gd-shadow-panel);
}

/* Mobile tabs: glass pills */
[data-theme="dark"] .kanban-mobile-tab {
  background: var(--gd-surface-soft);
  border: 1px solid var(--gd-border);
  color: var(--gd-text-muted);
}
[data-theme="dark"] .kanban-mobile-tab:hover {
  border-color: var(--gd-border-hover);
  color: var(--gd-text);
}
[data-theme="dark"] .kanban-mobile-tab.active {
  background: linear-gradient(90deg, rgba(103, 232, 249, 0.18), rgba(96, 165, 250, 0.10));
  border: var(--gd-glass-border-hot);
  color: var(--gd-accent);
  box-shadow: var(--gd-glow-cyan);
}

/* --- Agents: glass cards ------------------------------------------------- */
[data-theme="dark"] .agent-card {
  background: var(--gd-glass-bg);
  border: var(--gd-glass-border);
  border-radius: var(--gd-radius-lg);
  -webkit-backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
          backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
  box-shadow: var(--gd-shadow-panel);
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
[data-theme="dark"] .agent-card:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(10, 18, 31, 0.62));
  border-color: var(--gd-border-strong);
  box-shadow: var(--gd-shadow-panel), var(--gd-glow-blue);
  transform: translateY(-2px);
}
[data-theme="dark"] .agent-avatar {
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.18), rgba(103, 232, 249, 0.12));
  border: 1px solid rgba(103, 232, 249, 0.20);
  color: var(--gd-accent);
}
[data-theme="dark"] .agent-avatar.gradient-1 {
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.18), rgba(217, 119, 87, 0.12));
  border-color: rgba(248, 113, 113, 0.20);
  color: var(--gd-danger);
}
[data-theme="dark"] .agent-avatar.gradient-2 {
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.18), rgba(106, 155, 204, 0.12));
  border-color: rgba(96, 165, 250, 0.22);
  color: var(--gd-accent-blue);
}
[data-theme="dark"] .agent-avatar.gradient-3 {
  background: linear-gradient(135deg, rgba(134, 239, 172, 0.15), rgba(120, 140, 93, 0.12));
  border-color: rgba(134, 239, 172, 0.22);
  color: var(--gd-success);
}
[data-theme="dark"] .agent-model-badge {
  background: var(--gd-surface-soft);
  border: 1px solid var(--gd-border);
  color: var(--gd-text-muted);
}
[data-theme="dark"] .agent-name { color: var(--gd-text); }
[data-theme="dark"] .agent-desc { color: var(--gd-text-2); }

/* --- Activity: glass row hover + status value glow ----------------------- */
[data-theme="dark"] .activity-table tbody tr:hover td {
  background: rgba(184, 211, 255, 0.06);
}
[data-theme="dark"] .activity-row-name { color: var(--gd-text); }
[data-theme="dark"] .activity-row-checked,
[data-theme="dark"] .activity-row-proof { color: var(--gd-text-muted); }
[data-theme="dark"] .activity-summary .act-sum-active .stat-value {
  color: var(--gd-success);
  text-shadow: 0 0 18px rgba(134, 239, 172, 0.28);
}
[data-theme="dark"] .activity-summary .act-sum-blocked .stat-value {
  color: var(--gd-warning);
  text-shadow: 0 0 18px rgba(251, 191, 36, 0.22);
}

/* --- Status: glass panels ------------------------------------------------ */
[data-theme="dark"] .status-summary-panel,
[data-theme="dark"] .status-services,
[data-theme="dark"] .status-incidents {
  background: var(--gd-glass-bg);
  border: var(--gd-glass-border);
  border-radius: var(--gd-radius-lg);
  -webkit-backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
          backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
  box-shadow: var(--gd-shadow-panel);
}
[data-theme="dark"] .status-snapshot-panel {
  background: var(--gd-glass-bg);
  border: var(--gd-glass-border);
  border-radius: var(--gd-radius-lg);
  -webkit-backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
          backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
  box-shadow: var(--gd-shadow-panel);
}

/* Service tiles: soft glass rows with state-tinted borders */
[data-theme="dark"] .status-service {
  background: var(--gd-surface-soft);
  border: var(--gd-glass-border);
  border-radius: var(--gd-radius-sm);
  transition: border-color 0.15s, box-shadow 0.15s;
}
[data-theme="dark"] .status-service:hover {
  border-color: var(--gd-border-hover);
  box-shadow: var(--gd-glow-blue);
}
[data-theme="dark"] .status-service.operational  { border-color: rgba(134, 239, 172, 0.22); }
[data-theme="dark"] .status-service.degraded,
[data-theme="dark"] .status-service.maintenance  { border-color: rgba(251, 191, 36, 0.28); }
[data-theme="dark"] .status-service.down         { border-color: rgba(248, 113, 113, 0.30); }

[data-theme="dark"] .status-snapshot-row { border-color: var(--gd-border); }

/* ===========================================================================
   GLASSY-DARK REDESIGN — WAVE 3: platform + remaining pages
   ---------------------------------------------------------------------------
   memories, messages, naplo, skills, vault, mcp(connectors), settings,
   projects, ideas, schedules, team, migrate — plus the shared modal/toolbar/
   segmented/info-box/data-list primitives those pages lean on. Skin only:
   every route/button/modal/ID is untouched. Scoped to [data-theme="dark"].
   Bible: docs/design/glassy-dark-bible.md. Appended last so the dark scope
   reliably wins the cascade over the base page rules.
   =========================================================================== */

/* --- Shared: generic modal shell = glass (mem/idea/vault/mcp/skills modals) -
   Bespoke shells (.modal-kanban-detail, .modal-agent-detail, terminal,
   conversation) keep their higher-specificity look; this only reskins the
   canonical .modal. Overlay already blurs (rgba(20,20,19,.5) + blur), so a
   translucent modal reads as a floating glass sheet. */
[data-theme="dark"] .modal {
  background: linear-gradient(180deg, rgba(17, 28, 48, 0.92), rgba(10, 18, 31, 0.86));
  border: var(--gd-glass-border);
  border-radius: var(--gd-radius-lg);
  box-shadow: var(--gd-shadow-float);
  -webkit-backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
          backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
}
[data-theme="dark"] .modal-header { border-bottom-color: var(--gd-border); }
[data-theme="dark"] .modal-footer { border-top-color: var(--gd-border); }
[data-theme="dark"] .modal-close { color: var(--gd-text-2); }

/* --- Shared: toolbars / segmented controls / info-box / data-list --------- */
[data-theme="dark"] .toolbar {
  background: var(--gd-glass-bg);
  border: var(--gd-glass-border);
  border-radius: var(--gd-radius-md);
  box-shadow: var(--gd-shadow-panel);
  -webkit-backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
          backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
}
[data-theme="dark"] .segmented-control {
  background: var(--gd-surface-soft);
  border: var(--gd-glass-border);
}
[data-theme="dark"] .segmented-control > button,
[data-theme="dark"] .segmented-control > .segmented-option { color: var(--gd-text-muted); }
[data-theme="dark"] .segmented-control > button:hover { color: var(--gd-text); }
[data-theme="dark"] .segmented-control > button.active,
[data-theme="dark"] .segmented-control > button[aria-selected="true"] {
  background: linear-gradient(90deg, rgba(103, 232, 249, 0.16), rgba(96, 165, 250, 0.08));
  border: var(--gd-glass-border-hot);
  color: var(--gd-accent);
  box-shadow: var(--gd-glow-cyan);
}
[data-theme="dark"] .info-box {
  background: var(--gd-glass-bg-soft);
  border: var(--gd-glass-border);
  border-radius: var(--gd-radius-md);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}
[data-theme="dark"] .data-list-item {
  background: var(--gd-surface-soft);
  border: 1px solid rgba(184, 211, 255, 0.08);
  border-radius: var(--gd-radius-sm);
  transition: border-color 0.15s, box-shadow 0.15s;
}
[data-theme="dark"] .data-list-item:hover {
  border-color: var(--gd-border);
  box-shadow: var(--gd-glow-blue);
}

/* --- Memories: list cards + tabs + graph/log panels ---------------------- */
[data-theme="dark"] .mem-toolbar,
[data-theme="dark"] .mem-tabs {
  background: var(--gd-glass-bg);
  border: var(--gd-glass-border);
  border-radius: var(--gd-radius-md);
  box-shadow: var(--gd-shadow-panel);
  -webkit-backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
          backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
}
[data-theme="dark"] .mem-tab { color: var(--gd-text-muted); }
[data-theme="dark"] .mem-tab:hover { color: var(--gd-text); }
[data-theme="dark"] .mem-tab.active {
  background: linear-gradient(90deg, rgba(103, 232, 249, 0.16), rgba(96, 165, 250, 0.08));
  border: var(--gd-glass-border-hot);
  color: var(--gd-accent);
  box-shadow: var(--gd-glow-cyan);
}
[data-theme="dark"] .mem-item {
  background: var(--gd-glass-bg-soft);
  border: var(--gd-glass-border);
  border-radius: var(--gd-radius-md);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.24), var(--gd-inner-light);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
          backdrop-filter: blur(10px) saturate(130%);
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
[data-theme="dark"] .mem-item:hover {
  border-color: var(--gd-border-hover);
  box-shadow: var(--gd-shadow-panel), var(--gd-glow-blue);
  transform: translateY(-1px);
}
[data-theme="dark"] .graph-panel,
[data-theme="dark"] .mem-graph-view {
  background: var(--gd-glass-bg);
  border: var(--gd-glass-border);
  border-radius: var(--gd-radius-lg);
  box-shadow: var(--gd-shadow-panel);
  -webkit-backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
          backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
}
[data-theme="dark"] .log-entry {
  background: var(--gd-surface-soft);
  border: 1px solid rgba(184, 211, 255, 0.08);
  border-radius: var(--gd-radius-sm);
}

/* --- Naplo: audit toolbar, tabs, entries (remap hardcoded light hexes) ---- */
[data-theme="dark"] .naplo-toolbar {
  background: var(--gd-glass-bg);
  border: var(--gd-glass-border);
  border-radius: var(--gd-radius-md);
  box-shadow: var(--gd-shadow-panel);
  -webkit-backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
          backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
}
[data-theme="dark"] .naplo-tab { color: var(--gd-text-muted); }
[data-theme="dark"] .naplo-tab:hover { color: var(--gd-text); }
[data-theme="dark"] .naplo-tab.active {
  background: linear-gradient(90deg, rgba(103, 232, 249, 0.18), rgba(96, 165, 250, 0.10));
  color: var(--gd-accent);
  box-shadow: var(--gd-glow-cyan);
}
[data-theme="dark"] .naplo-timeline {
  background: var(--gd-glass-bg);
  border: var(--gd-glass-border);
  border-radius: var(--gd-radius-lg);
  box-shadow: var(--gd-shadow-panel);
  -webkit-backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
          backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
  padding: var(--gd-space-4, 16px);
}
[data-theme="dark"] .naplo-entry {
  background: var(--gd-glass-bg-soft);
  border: var(--gd-glass-border);
  border-radius: var(--gd-radius-md);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22), var(--gd-inner-light);
  transition: border-color 0.15s, box-shadow 0.15s;
}
[data-theme="dark"] .naplo-entry:hover {
  border-color: var(--gd-border-hover);
  box-shadow: var(--gd-shadow-panel), var(--gd-glow-blue);
}
[data-theme="dark"] .naplo-entry-detail code,
[data-theme="dark"] .naplo-event-type {
  background: var(--gd-surface-soft);
  color: var(--gd-text-2);
}
[data-theme="dark"] .naplo-sensitive { color: var(--gd-danger); }

/* --- Messages: split-pane glass, agent rows, bubbles --------------------- */
[data-theme="dark"] .chat-sidebar,
[data-theme="dark"] .chat-thread-panel {
  background: var(--gd-glass-bg);
  border: var(--gd-glass-border);
  border-radius: var(--gd-radius-lg);
  box-shadow: var(--gd-shadow-panel);
  -webkit-backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
          backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
}
[data-theme="dark"] .chat-agent-item { border-color: transparent; }
[data-theme="dark"] .chat-agent-item:hover { background: var(--gd-surface-soft); }
[data-theme="dark"] .chat-agent-item.selected {
  background: linear-gradient(90deg, rgba(103, 232, 249, 0.12), rgba(96, 165, 250, 0.06));
  border-left: 3px solid var(--gd-accent);
}
[data-theme="dark"] .chat-compose {
  background: var(--gd-surface-strong);
  border-top: var(--gd-glass-border);
}
[data-theme="dark"] .bubble-in {
  background: var(--gd-glass-bg-soft);
  border: var(--gd-glass-border);
  color: var(--gd-text);
}
[data-theme="dark"] .bubble-out {
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.85), rgba(103, 232, 249, 0.65));
  color: #041018;
  box-shadow: var(--gd-glow-blue);
}

/* --- Skills: catalog cards + agent badge --------------------------------- */
[data-theme="dark"] .skills-card {
  background: var(--gd-glass-bg);
  border: var(--gd-glass-border);
  border-radius: var(--gd-radius-lg);
  box-shadow: var(--gd-shadow-panel);
  -webkit-backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
          backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
[data-theme="dark"] .skills-card:hover {
  border-color: var(--gd-border-strong);
  box-shadow: var(--gd-shadow-panel), var(--gd-glow-blue);
  transform: translateY(-2px);
}
[data-theme="dark"] .skills-card-icon {
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.18), rgba(103, 232, 249, 0.12));
  border: 1px solid rgba(103, 232, 249, 0.20);
  color: var(--gd-accent);
}
[data-theme="dark"] .skills-card-name { color: var(--gd-text); }
[data-theme="dark"] .skills-card-desc { color: var(--gd-text-2); }
[data-theme="dark"] .skills-agent-badge {
  background: var(--gd-surface-soft);
  border: 1px solid var(--gd-border);
  color: var(--gd-text-muted);
}

/* --- MCP / Connectors: installed + catalog cards, tabs, banners ---------- */
[data-theme="dark"] .connector-card,
[data-theme="dark"] .catalog-card,
[data-theme="dark"] .connector-card-readonly {
  background: var(--gd-glass-bg);
  border: var(--gd-glass-border);
  border-radius: var(--gd-radius-lg);
  box-shadow: var(--gd-shadow-panel);
  -webkit-backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
          backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
[data-theme="dark"] .connector-card:hover,
[data-theme="dark"] .catalog-card:hover {
  border-color: var(--gd-border-strong);
  box-shadow: var(--gd-shadow-panel), var(--gd-glow-blue);
  transform: translateY(-1px);
}
[data-theme="dark"] .connector-tab { color: var(--gd-text-muted); }
[data-theme="dark"] .connector-tab:hover { color: var(--gd-text); }
[data-theme="dark"] .connector-tab.active {
  color: var(--gd-accent);
  border-bottom-color: var(--gd-accent);
}
[data-theme="dark"] .catalog-card-icon {
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.18), rgba(103, 232, 249, 0.12));
  border: 1px solid rgba(103, 232, 249, 0.20);
  color: var(--gd-accent);
}
[data-theme="dark"] .connector-external-item,
[data-theme="dark"] .connector-scope-grid > * {
  background: var(--gd-surface-soft);
  border: 1px solid rgba(184, 211, 255, 0.08);
  border-radius: var(--gd-radius-sm);
}
[data-theme="dark"] .cxhu-banner {
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.14), rgba(139, 92, 246, 0.10));
  border: var(--gd-glass-border-hot);
  border-radius: var(--gd-radius-lg);
  box-shadow: var(--gd-shadow-panel), var(--gd-glow-blue);
  -webkit-backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
          backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
}

/* --- Vault: security-first panels, key cards, add panel ------------------ */
[data-theme="dark"] .vault-add-panel,
[data-theme="dark"] .vault-search-wrap {
  background: var(--gd-glass-bg);
  border: var(--gd-glass-border);
  border-radius: var(--gd-radius-md);
  box-shadow: var(--gd-shadow-panel);
  -webkit-backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
          backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
}
[data-theme="dark"] .vault-card {
  background: var(--gd-glass-bg);
  border: var(--gd-glass-border);
  border-radius: var(--gd-radius-lg);
  box-shadow: var(--gd-shadow-panel);
  -webkit-backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
          backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
  transition: border-color 0.18s, box-shadow 0.18s;
}
[data-theme="dark"] .vault-card:hover {
  border-color: var(--gd-border-strong);
  box-shadow: var(--gd-shadow-panel), var(--gd-glow-blue);
}
[data-theme="dark"] .vault-card-icon {
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.18), rgba(103, 232, 249, 0.12));
  border: 1px solid rgba(103, 232, 249, 0.20);
  color: var(--gd-accent);
}
[data-theme="dark"] .vault-card-value {
  background: rgba(3, 7, 18, 0.55);
  border: 1px solid var(--gd-border);
  color: var(--gd-text-2);
}
[data-theme="dark"] .vault-binding-badge {
  background: linear-gradient(90deg, rgba(103, 232, 249, 0.20), rgba(96, 165, 250, 0.12));
  border: var(--gd-glass-border-hot);
  color: var(--gd-accent);
}

/* --- Settings: form-first rows + save bar -------------------------------- */
[data-theme="dark"] .settings-row {
  background: var(--gd-glass-bg-soft);
  border: var(--gd-glass-border);
  border-radius: var(--gd-radius-md);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
          backdrop-filter: blur(10px) saturate(130%);
  transition: border-color 0.15s, box-shadow 0.15s;
}
[data-theme="dark"] .settings-row:hover {
  border-color: var(--gd-border-hover);
  box-shadow: var(--gd-glow-blue);
}
[data-theme="dark"] .settings-group-title { color: var(--gd-text-muted); }
[data-theme="dark"] .settings-row-key { color: var(--gd-text); }
[data-theme="dark"] .settings-row-desc { color: var(--gd-text-2); }
[data-theme="dark"] .settings-row-meta { color: var(--gd-text-muted); }
[data-theme="dark"] .settings-save-bar {
  background: var(--gd-surface-strong);
  border: var(--gd-glass-border-hot);
  border-radius: var(--gd-radius-lg);
  box-shadow: var(--gd-shadow-float);
  -webkit-backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
          backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
}

/* --- Projects: two-pane portfolio, list rows, detail sections ------------ */
[data-theme="dark"] .pj-list,
[data-theme="dark"] .pj-detail {
  background: var(--gd-glass-bg);
  border: var(--gd-glass-border);
  border-radius: var(--gd-radius-lg);
  box-shadow: var(--gd-shadow-panel);
  -webkit-backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
          backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
}
[data-theme="dark"] .pj-list-item {
  background: var(--gd-surface-soft);
  border: 1px solid rgba(184, 211, 255, 0.08);
  border-radius: var(--gd-radius-sm);
  transition: border-color 0.15s, box-shadow 0.15s;
}
[data-theme="dark"] .pj-list-item:hover {
  border-color: var(--gd-border);
  box-shadow: var(--gd-glow-blue);
}
[data-theme="dark"] .pj-list-item.is-active {
  background: linear-gradient(90deg, rgba(103, 232, 249, 0.14), rgba(96, 165, 250, 0.07));
  border: var(--gd-glass-border-hot);
  box-shadow: var(--gd-glow-cyan);
}
[data-theme="dark"] .pj-list-name { color: var(--gd-text); }
[data-theme="dark"] .pj-list-sub,
[data-theme="dark"] .pj-detail-id { color: var(--gd-text-muted); }
[data-theme="dark"] .pj-detail-title { color: var(--gd-text); }
[data-theme="dark"] .pj-section {
  background: var(--gd-surface-soft);
  border: 1px solid rgba(184, 211, 255, 0.08);
  border-radius: var(--gd-radius-md);
}
[data-theme="dark"] .pj-section-title { color: var(--gd-text-2); }

/* --- Ideas: intake cards + chips -----------------------------------------
   renderIdeasList() emits generic `<div class="card">` rows (the only exact
   `class="card"` in app.js), so scope glass to #ideasPage .card. */
[data-theme="dark"] #ideasPage .card {
  background: var(--gd-glass-bg);
  border: var(--gd-glass-border);
  border-radius: var(--gd-radius-md);
  box-shadow: var(--gd-shadow-panel);
  -webkit-backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
          backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
[data-theme="dark"] #ideasPage .card:hover {
  border-color: var(--gd-border-strong);
  box-shadow: var(--gd-shadow-panel), var(--gd-glow-blue);
  transform: translateY(-1px);
}
[data-theme="dark"] .idea-title-link { color: var(--gd-text); }
[data-theme="dark"] .idea-detail-scoring {
  background: var(--gd-surface-soft);
  border: var(--gd-glass-border);
  border-radius: var(--gd-radius-md);
}

/* --- Schedules: list rows, sections, banners, week/timeline -------------- */
[data-theme="dark"] #schedulesPage .schedule-row,
[data-theme="dark"] .pending-retries-banner {
  background: var(--gd-glass-bg-soft);
  border: var(--gd-glass-border);
  border-radius: var(--gd-radius-md);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22), var(--gd-inner-light);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
          backdrop-filter: blur(10px) saturate(130%);
  transition: border-color 0.15s, box-shadow 0.15s;
}
[data-theme="dark"] #schedulesPage .schedule-row:hover {
  border-color: var(--gd-border-hover);
  box-shadow: var(--gd-shadow-panel), var(--gd-glow-blue);
}
[data-theme="dark"] .pending-retries-banner { border-color: rgba(251, 191, 36, 0.28); }
[data-theme="dark"] .schedule-section { color: var(--gd-text-muted); }
[data-theme="dark"] .schedule-title { color: var(--gd-text); }
[data-theme="dark"] .schedule-meta { color: var(--gd-text-muted); }
[data-theme="dark"] .week-day {
  background: var(--gd-surface-soft);
  border: var(--gd-glass-border);
  border-radius: var(--gd-radius-md);
}
[data-theme="dark"] .week-day-expanded {
  border-color: var(--gd-border-strong);
  box-shadow: var(--gd-glow-blue);
}
[data-theme="dark"] .timeline-track { background: var(--gd-surface-soft); }
[data-theme="dark"] .timeline-marker {
  box-shadow: var(--gd-glow-cyan);
}

/* --- Team: glassy hierarchy map (remap the dark map tokens to glass) ------
   The map canvas was solid #000; open it up so the layered body background
   reads through, and turn nodes/controls into glass. Node bg stays translucent
   + gets its own backdrop blur for the floating-node effect. */
[data-theme="dark"] #teamPage,
[data-theme="dark"] .team-map {
  --map-canvas-bg: transparent;
  --map-grid-dot: rgba(184, 211, 255, 0.06);
  --map-connector: rgba(184, 211, 255, 0.22);
  --map-connector-strong: var(--gd-accent);
  --map-node-bg: rgba(17, 28, 48, 0.72);
  --map-node-border: rgba(184, 211, 255, 0.16);
  --map-control-bg: rgba(13, 23, 39, 0.72);
  --map-control-border: rgba(184, 211, 255, 0.16);
  --map-status-running: var(--gd-success);
  --map-status-stopped: var(--gd-text-muted);
}
[data-theme="dark"] .team-node {
  -webkit-backdrop-filter: blur(12px) saturate(135%);
          backdrop-filter: blur(12px) saturate(135%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.34), var(--gd-inner-light);
}
[data-theme="dark"] .team-node:hover {
  border-color: var(--gd-border-hover);
  box-shadow: var(--gd-shadow-panel), var(--gd-glow-blue);
}
[data-theme="dark"] .team-node.is-main,
[data-theme="dark"] .team-node[aria-selected="true"] {
  border-color: rgba(103, 232, 249, 0.34);
  box-shadow: var(--gd-shadow-panel), var(--gd-glow-cyan);
}
[data-theme="dark"] .team-node__name { color: var(--gd-text); }
[data-theme="dark"] .team-node__role { color: var(--gd-text-muted); }
[data-theme="dark"] .map-ctrl-btn {
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  color: var(--gd-text-2);
}

/* --- Migrate: step panels, finding rows, summary ------------------------- */
[data-theme="dark"] .migrate-step {
  background: var(--gd-glass-bg);
  border: var(--gd-glass-border);
  border-radius: var(--gd-radius-lg);
  box-shadow: var(--gd-shadow-panel);
  -webkit-backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
          backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
}
[data-theme="dark"] .migrate-finding {
  background: var(--gd-surface-soft);
  border: 1px solid rgba(184, 211, 255, 0.08);
  border-radius: var(--gd-radius-sm);
  transition: border-color 0.15s, box-shadow 0.15s;
}
[data-theme="dark"] .migrate-finding:hover {
  border-color: var(--gd-border);
  box-shadow: var(--gd-glow-blue);
}
[data-theme="dark"] .migrate-finding-name { color: var(--gd-text); }
[data-theme="dark"] .migrate-finding-type,
[data-theme="dark"] .migrate-summary { color: var(--gd-text-muted); }

/* ============================================================================
   R4 — Settings workspace + glassy modal system (STRUCTURAL redesign)
   Two-column settings (section-nav rail + sectioned field cards + summary),
   and a restructured glassy modal shell (accent rail, title-block header,
   input-groups w/ validation, footer action bar). New `set-*` / modal-* names.
   ========================================================================== */

/* --- Settings: two-column workspace --------------------------------------- */
.set-workspace {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
.set-nav-rail {
  position: sticky;
  top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
}
.set-nav-head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-2) var(--space-1);
}
.set-nav { display: flex; flex-direction: column; gap: 2px; }
.set-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.set-nav-item:hover { background: var(--bg-hover); color: var(--color-text-primary); }
.set-nav-item.active {
  background: var(--accent-soft);
  color: var(--color-text-primary);
  border-color: var(--color-border-subtle);
}
.set-nav-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--color-text-muted);
}
.set-nav-icon svg { width: 18px; height: 18px; }
.set-nav-item.active .set-nav-icon { color: var(--accent); }
.set-nav-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.set-nav-count {
  flex: 0 0 auto;
  min-width: 22px;
  padding: 2px 7px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  background: var(--bg-input);
  color: var(--color-text-muted);
}

/* --- Settings: overview summary strip ------------------------------------- */
.set-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.set-summary:empty { display: none; }
.set-summary-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-4);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
}
.set-summary-val {
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}
.set-summary-lbl {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.set-summary-item.is-warn .set-summary-val { color: var(--warning); }

/* --- Settings: content sections ------------------------------------------- */
.settings-groups { display: flex; flex-direction: column; gap: var(--space-4); }
.set-section {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  scroll-margin-top: var(--space-4);
}
.set-section-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--bg-subtle);
}
.set-section-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--accent);
}
.set-section-icon svg { width: 18px; height: 18px; }
.set-section-headtext { flex: 1 1 auto; min-width: 0; }
.set-section-title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text-primary);
}
.set-section-desc {
  margin: 2px 0 0;
  font-size: var(--font-size-md);
  color: var(--color-text-muted);
}
.set-section-count {
  flex: 0 0 auto;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  background: var(--bg-input);
  color: var(--color-text-secondary);
}
.set-section-body { display: flex; flex-direction: column; }

/* --- Settings: field rows (label + description + meta + control) ---------- */
.set-field {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border-subtle);
  border-left: 2px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.set-field:last-child { border-bottom: none; }
.set-field:hover { background: var(--bg-hover); }
.set-field.is-dirty { border-left-color: var(--accent); background: var(--accent-soft); }
.set-field.has-error { border-left-color: var(--danger); }
.set-field-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.set-field-key {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: ui-monospace, "SF Mono", "Menlo", monospace;
  font-size: var(--font-size-md);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
  cursor: pointer;
}
.set-field-badge {
  font-family: var(--gd-font-family, inherit);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--warning-soft);
  color: var(--warning);
}
.set-field-desc {
  font-size: var(--font-size-body);
  line-height: var(--line-normal);
  color: var(--color-text-secondary);
}
.set-field-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.set-field-chip {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--bg-input);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-subtle);
}
.set-field-editor {
  flex: 0 0 auto;
  width: 208px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
}
.set-field-editor .input { width: 100%; }
.set-field-error { font-size: 12px; color: var(--danger); }
.set-color-wrap { display: flex; align-items: center; gap: 10px; }
.set-color-hex {
  font-family: ui-monospace, "SF Mono", "Menlo", monospace;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.set-loading { color: var(--color-text-muted); font-size: 13px; padding: var(--space-4); }

/* --- Settings: dark glassy variant ---------------------------------------- */
[data-theme="dark"] .set-nav-rail,
[data-theme="dark"] .set-summary-item,
[data-theme="dark"] .set-section {
  background: var(--gd-glass-bg);
  border: var(--gd-glass-border);
  box-shadow: var(--gd-shadow-panel);
  -webkit-backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
          backdrop-filter: blur(var(--gd-glass-blur)) saturate(140%);
}
[data-theme="dark"] .set-section-head { background: var(--gd-surface-soft); border-bottom-color: var(--gd-border); }
[data-theme="dark"] .set-section-icon,
[data-theme="dark"] .set-nav-item.active {
  background: linear-gradient(90deg, rgba(103, 232, 249, 0.16), rgba(96, 165, 250, 0.08));
  border-color: var(--gd-border-strong);
  color: var(--gd-accent);
}
[data-theme="dark"] .set-nav-item.active { color: var(--gd-text); }
[data-theme="dark"] .set-nav-item.active .set-nav-icon,
[data-theme="dark"] .set-section-icon { color: var(--gd-accent); }
[data-theme="dark"] .set-nav-item:hover { background: var(--gd-surface-soft); color: var(--gd-text); }
[data-theme="dark"] .set-nav-count,
[data-theme="dark"] .set-section-count,
[data-theme="dark"] .set-field-chip { background: var(--gd-surface-soft); border-color: var(--gd-border); color: var(--gd-text-muted); }
[data-theme="dark"] .set-section-title,
[data-theme="dark"] .set-field-key,
[data-theme="dark"] .set-summary-val { color: var(--gd-text); }
[data-theme="dark"] .set-field-desc { color: var(--gd-text-2); }
[data-theme="dark"] .set-section-desc,
[data-theme="dark"] .set-summary-lbl,
[data-theme="dark"] .set-nav-head { color: var(--gd-text-muted); }
[data-theme="dark"] .set-field:hover { background: var(--gd-surface-soft); }
[data-theme="dark"] .set-field.is-dirty { border-left-color: var(--gd-accent); background: rgba(103, 232, 249, 0.06); }
[data-theme="dark"] .set-field.has-error { border-left-color: var(--gd-danger); }
[data-theme="dark"] .set-field-error { color: var(--gd-danger); }

/* --- Settings: responsive ------------------------------------------------- */
@media (max-width: 900px) {
  .set-workspace { grid-template-columns: 1fr; }
  .set-nav-rail { position: static; }
  .set-nav { flex-direction: row; flex-wrap: wrap; }
  .set-nav-head { width: 100%; }
  .set-nav-item { width: auto; flex: 0 1 auto; }
}
@media (max-width: 640px) {
  .set-summary { grid-template-columns: 1fr 1fr; }
  .set-summary-item:last-child { grid-column: 1 / -1; }
  .set-field { flex-direction: column; gap: var(--space-3); }
  .set-field-editor { width: 100%; }
}
/* Touch target: the class-level min-height (40px, desktop-tuned) out-specifies
   the global `button` coarse rule, so bump nav items to the 44px minimum. */
@media (pointer: coarse), (max-width: 768px) {
  .set-nav-item { min-height: 44px; }
}

/* ==========================================================================
   Glassy modal system — structural upgrade applied to every `.modal`
   ========================================================================== */
/* Accent rail is a real DOM node (`.modal-rail`) injected by openModal() at the
   top of each dialog, giving a consistent structural marker across all modals. */
.modal { position: relative; }
.modal-rail {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 3px;
  margin: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 40%, transparent));
  pointer-events: none;
}
[data-theme="dark"] .modal-rail {
  height: 3px;
  background: linear-gradient(90deg, var(--gd-accent), var(--gd-accent-blue) 55%, var(--gd-accent-2));
  box-shadow: var(--gd-glow-cyan);
}
/* Header title-block: eyebrow (context) + title, close in an actions cluster. */
.modal-titlewrap { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.modal-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}
[data-theme="dark"] .modal-eyebrow { color: var(--gd-accent); }
.modal-titlewrap .modal-subtitle {
  font-size: var(--font-size-md);
  color: var(--color-text-muted);
  font-weight: 400;
}
[data-theme="dark"] .modal-titlewrap .modal-subtitle { color: var(--gd-text-muted); }
/* Footer gains an optional left-aligned hint zone (structural action bar). */
.modal-footer { align-items: center; }
.modal-foot-hint {
  margin-right: auto;
  font-size: var(--font-size-md);
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
[data-theme="dark"] .modal-foot-hint { color: var(--gd-text-muted); }

/* Restructured form field-group: label + hint + control + validation slot. */
.field-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); }
.field-group:last-child { margin-bottom: 0; }
.field-group > label,
.field-label {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--color-text-secondary);
}
[data-theme="dark"] .field-group > label,
[data-theme="dark"] .field-label { color: var(--gd-text-2); }
.field-hint { font-size: 12px; color: var(--color-text-muted); margin-top: -2px; }
[data-theme="dark"] .field-hint { color: var(--gd-text-muted); }
.field-req { color: var(--danger); margin-left: 2px; }
[data-theme="dark"] .field-req { color: var(--gd-danger); }
.field-msg { font-size: 12px; color: var(--danger); min-height: 0; }
[data-theme="dark"] .field-msg { color: var(--gd-danger); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } }
/* Group heading that segments a longer form into labelled zones. */
.field-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-subtle);
  margin-top: var(--space-2);
}
[data-theme="dark"] .field-section-label { color: var(--gd-text-muted); border-top-color: var(--gd-border); }

/* ============================================================================
   R5 STRUCTURAL REDESIGN — shared glassy-dark primitives (#bdf3ba14)
   A reusable component family that composes the established --gd-* tokens.
   Gives every R5 page a lead "deck" summary band + carded/grouped boards,
   replacing flat lists with structured hierarchy. The LANGUAGE (glassy-dark
   tokens) is reused; the STRUCTURE is new.
   ============================================================================ */

/* --- lead deck band: page-level overview (count + distribution + KPIs) --- */
.r5-deck {
  display: flex;
  align-items: stretch;
  gap: var(--gd-space-5, 20px);
  flex-wrap: wrap;
  padding: 16px 20px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: var(--gd-radius-lg, 24px);
  background: var(--bg-card);
}
.r5-deck-lead { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 96px; }
.r5-deck-total { font-size: 34px; font-weight: 780; line-height: 1; letter-spacing: -0.02em; color: var(--text); }
.r5-deck-cap { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.r5-deck-main { flex: 1; min-width: 220px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.r5-deck-bar { display: flex; gap: 3px; height: 14px; border-radius: 999px; overflow: hidden; }
.r5-seg { min-width: 4px; border-radius: 3px; transition: flex-grow .3s ease; }
.r5-seg-a { background: #22c55e; } .r5-seg-b { background: #60a5fa; }
.r5-seg-c { background: #f59e0b; } .r5-seg-d { background: #94a3b8; }
.r5-seg-e { background: #a78bfa; } .r5-seg-f { background: #f87171; }
.r5-deck-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.r5-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.r5-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.r5-legend b { color: var(--text); font-weight: 700; }
.r5-deck-kpis { display: flex; gap: 10px; flex-wrap: wrap; }
.r5-kpi {
  display: flex; flex-direction: column; gap: 2px; justify-content: center;
  min-width: 84px; padding: 8px 14px;
  border: 1px solid var(--border); border-radius: var(--gd-radius-sm, 12px);
  background: var(--surface, var(--bg-input));
}
.r5-kpi-val { font-size: 20px; font-weight: 750; line-height: 1.1; color: var(--text); }
.r5-kpi-cap { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.r5-kpi.is-accent .r5-kpi-val { color: var(--accent); }
.r5-kpi.is-warn .r5-kpi-val { color: var(--warning); }
.r5-kpi.is-danger .r5-kpi-val { color: var(--danger); }
.r5-kpi.is-ok .r5-kpi-val { color: var(--success); }

/* --- board grid + grouped sections --- */
.r5-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.r5-board.is-wide { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.r5-group { margin-bottom: 18px; }
.r5-group-head {
  display: flex; align-items: center; gap: 10px; margin: 0 0 10px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted);
}
.r5-group-head .r5-group-count {
  font-size: 11px; padding: 1px 8px; border-radius: 999px;
  background: var(--bg-input); color: var(--text-secondary); border: 1px solid var(--border);
}
.r5-group-rule { flex: 1; height: 1px; background: var(--border); }

/* --- glass card primitive --- */
.r5-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--border); border-left: 3px solid var(--border);
  border-radius: var(--gd-radius-md, 18px);
  background: var(--bg-card);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.r5-card:hover { border-color: var(--accent-soft, var(--border)); transform: translateY(-1px); }
.r5-card-head { display: flex; align-items: flex-start; gap: 10px; }
.r5-card-ic {
  width: 38px; height: 38px; flex: none; border-radius: 11px;
  display: grid; place-items: center; font-size: 18px;
  background: var(--bg-input); border: 1px solid var(--border); color: var(--text-secondary);
}
.r5-card-titlewrap { flex: 1; min-width: 0; }
.r5-card-title { font-size: 14px; font-weight: 650; color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.r5-card-sub { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.r5-card-body { font-size: 13px; color: var(--text-secondary); line-height: 1.45; }
.r5-card-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.r5-card-actions { display: flex; gap: 6px; margin-left: auto; }

/* --- chips + meters + avatar --- */
.r5-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; padding: 2px 9px; border-radius: 999px;
  background: var(--bg-input); color: var(--text-secondary); border: 1px solid var(--border);
}
.r5-meter { height: 6px; border-radius: 999px; background: var(--bg-input); overflow: hidden; }
.r5-meter-fill { height: 100%; border-radius: 999px; background: var(--accent); }
.r5-avatar {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: var(--bg-input); color: var(--text); border: 1px solid var(--border); overflow: hidden;
}
.r5-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* --- glassy-dark treatment: reuse the established --gd surfaces --- */
[data-theme="dark"] .r5-deck {
  background: var(--gd-glass-bg); border: var(--gd-glass-border);
  box-shadow: var(--gd-shadow-panel);
  -webkit-backdrop-filter: blur(var(--gd-glass-blur, 22px)) saturate(140%);
          backdrop-filter: blur(var(--gd-glass-blur, 22px)) saturate(140%);
}
[data-theme="dark"] .r5-deck-total { color: var(--gd-text); }
[data-theme="dark"] .r5-deck-cap,
[data-theme="dark"] .r5-kpi-cap,
[data-theme="dark"] .r5-legend { color: var(--gd-text-muted); }
[data-theme="dark"] .r5-legend b,
[data-theme="dark"] .r5-kpi-val { color: var(--gd-text); }
[data-theme="dark"] .r5-kpi { background: var(--gd-surface-soft); border-color: var(--gd-border); }
[data-theme="dark"] .r5-group-head { color: var(--gd-text-muted); }
[data-theme="dark"] .r5-group-count { background: var(--gd-surface-soft); border-color: var(--gd-border); color: var(--gd-text-2); }
[data-theme="dark"] .r5-group-rule { background: var(--gd-border); }
[data-theme="dark"] .r5-card {
  background: var(--gd-glass-bg); border: var(--gd-glass-border);
  border-left: 3px solid var(--gd-border);
  box-shadow: var(--gd-shadow-panel);
  -webkit-backdrop-filter: blur(var(--gd-glass-blur, 22px)) saturate(140%);
          backdrop-filter: blur(var(--gd-glass-blur, 22px)) saturate(140%);
}
[data-theme="dark"] .r5-card:hover { border-color: var(--gd-border-hover); box-shadow: var(--gd-shadow-panel), var(--gd-glow-blue); }
[data-theme="dark"] .r5-card-title { color: var(--gd-text); }
[data-theme="dark"] .r5-card-sub { color: var(--gd-text-muted); }
[data-theme="dark"] .r5-card-body { color: var(--gd-text-2); }
[data-theme="dark"] .r5-card-ic { background: var(--gd-surface-soft); border-color: var(--gd-border); color: var(--gd-text-2); }
[data-theme="dark"] .r5-chip { background: var(--gd-surface-soft); border-color: var(--gd-border); color: var(--gd-text-2); }
[data-theme="dark"] .r5-meter { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .r5-avatar { background: var(--gd-surface-soft); border-color: var(--gd-border); color: var(--gd-text); }

/* accent-tinted left rails for status-carrying cards */
.r5-card.rail-ok { border-left-color: var(--success); }
.r5-card.rail-warn { border-left-color: var(--warning); }
.r5-card.rail-danger { border-left-color: var(--danger); }
.r5-card.rail-accent { border-left-color: var(--accent); }
.r5-card.rail-info { border-left-color: var(--info, #60a5fa); }

@media (max-width: 640px) {
  .r5-deck { flex-direction: column; gap: 14px; padding: 14px 16px; }
  .r5-board { grid-template-columns: 1fr; }
  .r5-deck-kpis { width: 100%; }
  .r5-kpi { flex: 1; }
}
/* end R5 shared primitives */

/* R5 ideas page */
#ideasStats.ideas-stats { display: block; }
.idea-meters { display: flex; gap: 16px; flex-wrap: wrap; }
.idea-meter { display: flex; align-items: center; gap: 6px; }
.idea-meter-lbl { font-size: 11px; color: var(--text-muted); min-width: 40px; }
.idea-meter-n { font-size: 12px; font-weight: 700; color: var(--text-secondary); min-width: 10px; }
[data-theme="dark"] .idea-meter-lbl { color: var(--gd-text-muted); }
[data-theme="dark"] .idea-meter-n { color: var(--gd-text-2); }

/* R5 memories page */
#memStats.mem-stats { display: block; }
.learning-effectiveness {
  display: grid;
  gap: 14px;
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--border) 84%, var(--accent) 16%);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 42%, transparent), transparent 46%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 94%, var(--bg) 6%), var(--bg-card));
}
.learning-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.learning-head h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
}
.learning-head p {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: var(--font-ui-sm);
  line-height: var(--line-normal);
}
.learning-window {
  flex-shrink: 0;
}
.learning-window button {
  min-height: 44px;
  min-width: 48px;
}
.autonomy-reliability { display: grid; gap: 10px; min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--bg-card) 80%, var(--accent-soft) 20%); }
.autonomy-reliability__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.autonomy-reliability__head h3 { margin: 0; font-size: 15px; }
.autonomy-reliability__head p { margin: 3px 0 0; color: var(--text-muted); font-size: 12px; }
.autonomy-reliability__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; min-width: 0; }
.autonomy-window { min-width: 0; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--bg-card) 86%, var(--bg-hover) 14%); }
.autonomy-window__title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.autonomy-window__title strong { font-size: 13px; }
.autonomy-window__metrics { display: grid; gap: 5px; }
.autonomy-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: baseline; min-width: 0; font-size: 11px; }
.autonomy-row span { color: var(--text-muted); overflow-wrap: anywhere; }
.autonomy-row strong { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.autonomy-window__source { margin: 8px 0 0; color: var(--text-muted); font-size: 10px; line-height: 1.35; overflow-wrap: anywhere; }
.autonomy-reliability__alerts { display: grid; gap: 6px; }
.autonomy-alert { padding: 8px 10px; border-left: 3px solid var(--danger); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--danger) 10%, var(--bg-card)); color: var(--text); font-size: 12px; overflow-wrap: anywhere; }
.learning-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.learning-metric {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg-card) 78%, var(--bg-hover) 22%);
}
.learning-metric > span {
  display: block;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.learning-metric strong {
  display: block;
  margin: 6px 0;
  color: var(--text);
  font-size: 22px;
  line-height: 1;
}
.learning-badge,
.learning-confidence {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.learning-badge.is-ok { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }
.learning-badge.is-danger { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
.learning-badge.is-info { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.learning-badge.is-muted { background: color-mix(in srgb, var(--text-muted) 12%, transparent); color: var(--text-muted); }
.learning-confidence {
  color: var(--text-muted);
  background: color-mix(in srgb, var(--bg-hover) 72%, transparent);
}
.learning-body {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.8fr);
  gap: 12px;
  align-items: start;
}
.learning-agents,
.learning-side section {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg-card) 76%, var(--bg-hover) 24%);
}
.learning-side {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.learning-side h3 {
  margin: 0;
  padding: 11px 12px 0;
  font-size: 13px;
}
.learning-table-head,
.learning-agent-row {
  display: grid;
  grid-template-columns: minmax(140px, 1.2fr) repeat(5, minmax(86px, 1fr));
  gap: 8px;
  align-items: center;
  padding: 9px 12px;
  min-width: 0;
}
.learning-table-head {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.learning-agent-row {
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  font-size: 12px;
}
.learning-agent-row:last-child { border-bottom: 0; }
.learning-agent-row > * {
  min-width: 0;
  overflow-wrap: anywhere;
}
.learning-list-row {
  padding: 10px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.learning-list-row:last-child { border-bottom: 0; }
.learning-list-row strong,
.learning-list-row span {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}
.learning-list-row strong {
  font-size: 12px;
  color: var(--text);
}
.learning-list-row span,
.learning-list-row p {
  margin: 3px 0 0;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.35;
}
.learning-empty,
.learning-error {
  padding: 12px;
  color: var(--text-muted);
  font-size: var(--font-ui-sm);
}
.learning-gaps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.learning-gaps span {
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--warning) 14%, transparent);
  color: var(--text-secondary);
  font-size: 11px;
  overflow-wrap: anywhere;
}
/* First-Pass Hero panel — v3 primary KPI */
.fp-hero { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--bg-card) 82%, var(--accent-soft) 18%); }
.fp-hero__verdict { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.fp-hero__primary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fp-hero__rate { font-size: 22px; font-weight: 700; color: var(--text); }
.fp-hero__insufficient { margin: 4px 0 0; color: var(--text-muted); font-size: 12px; font-style: italic; }
.fp-hero__windows { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.fp-window { min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--bg-card) 86%, var(--bg-hover) 14%); }
.fp-window--current { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg-card)); }
.fp-window__head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 8px; }
.fp-window__head strong { font-size: 13px; }
.fp-window__row { display: grid; grid-template-columns: 1fr auto; gap: 4px; font-size: 11px; line-height: 1.4; }
.fp-window__row span { color: var(--text-muted); }
.fp-window__row strong { color: var(--text); font-variant-numeric: tabular-nums; }
.fp-window__foot { margin-top: 6px; color: var(--text-muted); font-size: 10px; }
.fp-window__excl { margin-top: 4px; color: var(--warning); font-size: 10px; }
/* Memory Impact panel */
.le-impact-panel, .le-rank-panel { border: 1px solid var(--border); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--bg-card) 78%, var(--bg-hover) 22%); overflow: hidden; }
.le-impact-panel h3, .le-rank-panel h3 { margin: 0; padding: 11px 12px; font-size: 13px; border-bottom: 1px solid var(--border); }
.mi-row { }
.mi-row__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mi-row strong { font-size: 12px; }
.mi-row__reason { color: var(--text-muted); font-size: 10px; margin-top: 2px; display: block; }
/* Agent Learning Rank */
.lr-row { display: grid; grid-template-columns: minmax(130px, 1.2fr) repeat(7, minmax(60px, 1fr)); gap: 6px; align-items: center; padding: 8px 12px; font-size: 11px; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); min-width: 0; overflow-x: auto; }
.lr-head { color: var(--text-muted); font-weight: 800; text-transform: uppercase; font-size: 10px; background: color-mix(in srgb, var(--bg-card) 60%, var(--bg-hover) 40%); }
.lr-row strong { font-size: 12px; overflow-wrap: anywhere; }
.lr-row--alert { background: color-mix(in srgb, var(--danger) 5%, transparent); }
@media (max-width: 900px) {
  .fp-hero__windows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .fp-hero__windows { grid-template-columns: 1fr; }
  .lr-row { grid-template-columns: minmax(100px, 1fr) repeat(3, minmax(50px, 1fr)); }
}
.mem-deck-actions { display: flex; justify-content: flex-end; margin: -8px 0 16px; }
#memList.mem-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; align-items: start; }
.mem-item.r5-card { cursor: pointer; gap: 8px; }
.mem-item .mem-head-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.mem-item .mem-agent-badge { font-size: 13px; background: none; padding: 0; border-radius: 0; color: inherit; margin-left: 0; }
.mem-item .mem-keywords { display: flex; flex-wrap: wrap; gap: 5px; }
.mem-salience-meter { display: flex; align-items: center; }
/* Memory Quality Buckets — single net-new component (design e98df09a).
   Reuses existing dashboard tokens only; NO new tokens, NO [data-theme]
   overrides (semantic colours come from --success/--info/--border which each
   theme already redefines). Colour law: active=success, quarantine=info, the
   rest neutral — never danger/red. */
.learning-quality { margin-top: 4px; }
.learning-quality__title {
  margin: 0 0 8px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.learning-quality__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.learning-quality__bucket {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg-card) 78%, var(--bg-hover) 22%);
}
.learning-quality__count {
  color: var(--text);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}
.learning-quality__label {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.learning-quality__pct { color: var(--text-muted); font-size: 12px; }
/* Active validated = the only "good" bucket → success accent. */
.learning-quality__bucket.is-active {
  border-left-color: var(--success);
  background: color-mix(in srgb, var(--success) 10%, var(--bg-card) 90%);
}
.learning-quality__bucket.is-active .learning-quality__count { color: var(--success); }
/* Quarantine/audit-only = info, NEVER danger: being held back is the safe
   correct outcome, not a leak. */
.learning-quality__bucket.is-quarantine {
  border-left-color: var(--info);
  background: color-mix(in srgb, var(--info) 8%, var(--bg-card) 92%);
}
/* Superseded / rejected / duplicate stay neutral. */
.learning-quality__bucket.is-superseded,
.learning-quality__bucket.is-rejected,
.learning-quality__bucket.is-duplicate {
  border-left-color: var(--text-muted);
}
@media (max-width: 980px) {
  .autonomy-reliability__grid { grid-template-columns: 1fr; }
  .learning-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .learning-quality__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .learning-body { grid-template-columns: 1fr; }
  .learning-table-head { display: none; }
  .learning-agent-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  .learning-agent-row strong { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  #memList.mem-list { grid-template-columns: 1fr; }
  .learning-effectiveness { padding: 12px; }
  .learning-head { flex-direction: column; }
  .autonomy-reliability__head { flex-direction: column; }
  .learning-window { width: 100%; overflow-x: auto; }
  .learning-summary { grid-template-columns: 1fr; }
  .learning-quality__grid { grid-template-columns: 1fr; }
  .learning-agent-row { grid-template-columns: 1fr; }
}

/* Learning Effectiveness v2 — additive block; no theme-specific overrides per LE-0 */
.learning-truthstrip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg-hover) 60%, var(--bg-card));
}
.learning-truthstrip__mode {
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--success) 18%, transparent);
  color: var(--success);
  font-size: 11px;
  font-weight: 700;
}
.learning-truthstrip.is-degraded .learning-truthstrip__mode {
  background: color-mix(in srgb, var(--warning) 18%, transparent);
  color: var(--warning);
}
.learning-truthstrip__window,
.learning-truthstrip__ts,
.learning-truthstrip__coverage {
  color: var(--text-secondary);
  font-size: 11px;
}
.learning-truthstrip__badge { font-variant-numeric: tabular-nums; }
.learning-metric__secondary { color: var(--text-muted); }
.learning-metric__badges { display: flex; flex-wrap: wrap; gap: 4px; }
.learning-metric__foot {
  display: grid;
  gap: 2px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.learning-metric__reason {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-muted);
}
.learning-metric__coverage {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.learning-fixnext h3 {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--text);
}
.learning-fixnext__empty {
  margin: 0;
  padding: 9px 12px;
  color: var(--text-muted);
  font-size: var(--font-ui-sm);
}
.learning-fixnext__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.learning-fixnext__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  padding: 9px 12px;
  border-left: 3px solid var(--text-muted);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--text-muted) 10%, var(--bg-card));
  min-width: 0;
}
.learning-fixnext__item.is-high {
  border-left-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, var(--bg-card));
}
.learning-fixnext__item.is-medium {
  border-left-color: var(--warning);
  background: color-mix(in srgb, var(--warning) 10%, var(--bg-card));
}
.learning-fixnext__type {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  grid-column: 1;
}
.learning-fixnext__count {
  font-size: 12px;
  color: var(--text-secondary);
  grid-column: 2;
  grid-row: 1;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.learning-fixnext__example {
  font-size: 11px;
  color: var(--text-muted);
  overflow-wrap: anywhere;
  min-width: 0;
  grid-column: 1 / -1;
}
.learning-fixnext__action {
  font-size: 11px;
  color: var(--text-muted);
  grid-column: 1 / -1;
  margin-top: 2px;
}
.learning-failtype {
  font-size: 12px;
  color: var(--text);
}
.learning-sig {
  display: block;
  margin: 3px 0 0;
  color: var(--text-muted);
  font-size: 10px;
  overflow-wrap: anywhere;
  min-width: 0;
}
.learning-topfail {
  overflow-wrap: anywhere;
  min-width: 0;
}
/* v2: 9-column agent grid (desktop ≥980) */
.learning-table-head,
.learning-agent-row {
  grid-template-columns: minmax(130px, 1.3fr) repeat(7, minmax(64px, 1fr)) minmax(96px, 1.2fr);
}
@media (max-width: 980px) {
  .learning-table-head,
  .learning-agent-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .learning-fixnext__list { grid-template-columns: 1fr; }
  .learning-truthstrip { gap: 6px 10px; }
}

/* Agent Knowledge Map (design contract 189399fa) — additive only. Reuses
   .status-panel/.data-list/.empty-state/.loading-state/.error-state/.skeleton/
   .segmented-control/.learning-gaps verbatim; the only net-new chrome is this
   .akm-* block plus the .akm-badge status family. No new tokens, no
   [data-theme=...]/.theme-black rule anywhere in this component (LE-0 parity). */
.agent-knowledge-map {
  display: grid;
  gap: 14px;
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--border) 84%, var(--accent) 16%);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 42%, transparent), transparent 46%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 94%, var(--bg) 6%), var(--bg-card));
}
.akm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.akm-head h2 { margin: 0; font-size: 18px; line-height: 1.2; }
.akm-head__desc { margin: 4px 0 0; color: var(--text-muted); font-size: var(--font-ui-sm); line-height: var(--line-normal); }
.akm-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.akm-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-width: 0; }
.akm-search { display: flex; align-items: center; min-width: 0; flex: 1 1 200px; }
.akm-search input {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text);
}
.akm-window { flex-shrink: 0; }
.akm-window button { min-height: 44px; min-width: 48px; }
.akm-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.akm-filter-btn {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg-card) 80%, var(--bg-hover) 20%);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.akm-filter-btn.active,
.akm-filter-btn[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-card));
}
#akmSortSelect { min-height: 44px; }
.akm-body {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.8fr);
  gap: 12px;
  align-items: start;
}
.akm-list {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg-card) 76%, var(--bg-hover) 24%);
}
.akm-list-head,
.akm-row {
  display: grid;
  grid-template-columns: minmax(140px, 1.3fr) repeat(7, minmax(70px, 1fr));
  gap: 8px;
  align-items: center;
  padding: 9px 12px;
  min-width: 0;
}
.akm-list-head {
  border-bottom: 1px solid var(--border);
}
.akm-sort-btn {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}
.akm-sort-btn[aria-sort="ascending"],
.akm-sort-btn[aria-sort="descending"] { color: var(--text); }
.akm-sort-btn[aria-sort="ascending"]::after { content: '▲'; font-size: 9px; }
.akm-sort-btn[aria-sort="descending"]::after { content: '▼'; font-size: 9px; }
.akm-row {
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  font-size: 12px;
  cursor: pointer;
}
.akm-row > * { min-width: 0; overflow-wrap: anywhere; }
.akm-row:last-child { border-bottom: 0; }
.akm-row:hover { background: color-mix(in srgb, var(--bg-hover) 40%, transparent); }
.akm-row[aria-selected="true"] {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-left: 3px solid var(--accent);
}
.akm-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.akm-row__disclosure { display: none; }
.akm-list-empty,
.akm-drilldown-empty {
  padding: 12px;
  color: var(--text-muted);
  font-size: var(--font-ui-sm);
}
.akm-drilldown {
  min-width: 0;
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg-card) 76%, var(--bg-hover) 24%);
}
.akm-drilldown__placeholder { color: var(--text-muted); font-size: var(--font-ui-sm); }
.akm-drilldown__head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.akm-drilldown__head h3 { margin: 0; font-size: 14px; }
.akm-drilldown__section h4 { margin: 0 0 6px; font-size: 12px; color: var(--text-muted); text-transform: uppercase; }
.akm-drilldown__prompt-preview { font-size: 11px; color: var(--text-muted); overflow-wrap: anywhere; }
.akm-drilldown__gaps { display: flex; flex-wrap: wrap; gap: 6px; }
.akm-badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.akm-badge.is-ok      { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }
.akm-badge.is-warning { background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning); }
.akm-badge.is-info    { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.akm-badge.is-muted   { background: color-mix(in srgb, var(--text-muted) 12%, transparent); color: var(--text-muted); }
.akm-badge.is-danger  { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
@media (max-width: 980px) {
  .akm-body { grid-template-columns: 1fr; }
  .akm-list-head { display: none; }
  .akm-row {
    grid-template-columns: minmax(120px, 1.2fr) repeat(4, minmax(70px, 1fr));
  }
  .akm-row > [data-col="active_own_count"],
  .akm-row > [data-col="active_shared_count"] { display: none; }
}
@media (max-width: 640px) {
  .agent-knowledge-map { padding: 12px; }
  .akm-head { flex-direction: column; }
  .akm-window { width: 100%; overflow-x: auto; }
  .akm-toolbar { flex-direction: column; align-items: stretch; }
  .akm-search { order: -2; }
  #akmSortSelect { order: -1; }
  .akm-row {
    grid-template-columns: 1fr;
    position: relative;
  }
  .akm-row > [data-col]:not([data-col="agent"]):not([data-col="status"]) { display: none; }
  .akm-row__disclosure {
    display: inline-flex;
    min-height: 44px;
    min-width: 44px;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
  }
  /* The single #akmDrilldown node is reparented to directly follow the
     selected row on mobile (see selectAkmAgent in app.js) so the disclosure
     opens genuinely inline, not just "below the whole list". */
  #akmDrilldown { margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .agent-knowledge-map .skeleton { animation: none; }
}

/* R5 skills page */
#skillsStats.skills-stats { display: block; }
#skillsGrid.skills-grid { display: block; }
.skills-card.r5-card { cursor: pointer; }
.skills-card.r5-card .r5-card-body { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* R5 vault page */
#vaultStats.vault-stats { display: block; }
.vault-card.r5-card .vault-card-value { font-family: var(--font-mono, monospace); font-size: 12px; word-break: break-all; padding: 8px 10px; border-radius: 8px; background: var(--bg-input); border: 1px solid var(--border); }
[data-theme="dark"] .vault-card.r5-card .vault-card-value { background: var(--gd-surface-soft); border-color: var(--gd-border); color: var(--gd-text); }
.vault-card.r5-card .vault-card-edit-form { display: flex; gap: 6px; flex-wrap: wrap; }

/* R5 naplo page */
#naplo-summary.naplo-summary, #naplo-summary { display: block; margin-bottom: 4px; }
.nap-stream { display: flex; flex-direction: column; gap: 8px; }
.nap-event {
  display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start;
  padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--gd-radius-md, 18px);
  background: var(--bg-card);
}
.nap-event-rail { display: flex; flex-direction: column; align-items: center; }
.nap-event-dot {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 14px;
  background: color-mix(in srgb, var(--nap-c, #6b7280) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--nap-c, #6b7280) 45%, transparent);
}
.nap-event-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.nap-event-head { display: flex; align-items: center; gap: 8px; }
.nap-event-ts, .nap-event .naplo-ts { font-size: 11px; color: var(--text-muted); }
.nap-event-detail { font-size: 13px; color: var(--text-secondary); line-height: 1.45; word-break: break-word; }
[data-theme="dark"] .nap-event {
  background: var(--gd-glass-bg); border: var(--gd-glass-border); box-shadow: var(--gd-shadow-panel);
  -webkit-backdrop-filter: blur(var(--gd-glass-blur, 22px)) saturate(140%);
          backdrop-filter: blur(var(--gd-glass-blur, 22px)) saturate(140%);
}
[data-theme="dark"] .nap-event-detail { color: var(--gd-text-2); }
[data-theme="dark"] .nap-event-ts, [data-theme="dark"] .nap-event .naplo-ts { color: var(--gd-text-muted); }

/* R5 kanban page — pipeline deck + column/card depth */
#kanbanDeck:empty { display: none; }
[data-theme="dark"] .kanban-col {
  background: var(--gd-surface-soft); border: 1px solid var(--gd-border);
  border-radius: var(--gd-radius-lg, 24px);
}
[data-theme="dark"] .kanban-col-header { border-bottom: 1px solid var(--gd-border); }
[data-theme="dark"] .kanban-card {
  background: var(--gd-glass-bg); border: var(--gd-glass-border);
  box-shadow: 0 4px 16px rgba(0,0,0,0.24);
  -webkit-backdrop-filter: blur(14px) saturate(135%); backdrop-filter: blur(14px) saturate(135%);
}
[data-theme="dark"] .kanban-card:hover { border-color: var(--gd-border-hover); box-shadow: var(--gd-glow-blue); }
/* priority rail using the existing data-priority attribute (structural depth cue) */
.kanban-card { position: relative; }
.kanban-card[data-priority]::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px;
  background: var(--text-muted); opacity: .6;
}
.kanban-card[data-priority="urgent"]::before { background: var(--danger); opacity: 1; }
.kanban-card[data-priority="high"]::before { background: var(--warning); opacity: 1; }
.kanban-card[data-priority="normal"]::before { background: var(--accent); opacity: .7; }
.kanban-card[data-priority="low"]::before { background: var(--text-muted); opacity: .4; }
.kanban-card .kanban-card-title,
.kanban-card .kanban-card-footer,
.kanban-card .kanban-card-labels,
.kanban-card > .kanban-card-project { padding-left: 8px; }

/* R5 schedules page */
.schedule-group { margin-bottom: 14px; }
.r5-group-head.schedule-section { border: none; background: none; padding: 0 0 8px; margin: 0 0 8px; }
[data-theme="dark"] .schedule-row {
  background: var(--gd-glass-bg); border: var(--gd-glass-border); border-radius: var(--gd-radius-md, 18px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
  -webkit-backdrop-filter: blur(14px) saturate(135%); backdrop-filter: blur(14px) saturate(135%);
}
[data-theme="dark"] .schedule-row:hover { border-color: var(--gd-border-hover); }

/* R5 connectors (MCP) page */
#connectorStats.connector-stats { display: block; }

/* R5 projects page */
#projectsDeck:empty { display: none; }

/* R5 migrate page — stepper progress rail */
.mig-stepper { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; max-width: 640px; }
.mig-step { display: flex; align-items: center; gap: 8px; opacity: .55; transition: opacity .2s; }
.mig-step.is-active, .mig-step.is-done { opacity: 1; }
.mig-step-n {
  width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; background: var(--bg-input); color: var(--text-secondary);
  border: 1px solid var(--border);
}
.mig-step.is-active .mig-step-n { background: var(--accent); color: #fff; border-color: var(--accent); }
.mig-step.is-done .mig-step-n { background: var(--success); color: #fff; border-color: var(--success); }
.mig-step.is-done .mig-step-n::after { content: "✓"; }
.mig-step.is-done .mig-step-n { font-size: 0; }
.mig-step.is-done .mig-step-n::after { font-size: 13px; }
.mig-step-lbl { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.mig-step.is-active .mig-step-lbl { color: var(--text); }
.mig-step-rule { flex: 1; height: 2px; background: var(--border); border-radius: 2px; min-width: 20px; }
[data-theme="dark"] .mig-step-n { background: var(--gd-surface-soft); border-color: var(--gd-border); color: var(--gd-text-2); }
[data-theme="dark"] .mig-step-lbl { color: var(--gd-text-2); }
[data-theme="dark"] .mig-step.is-active .mig-step-lbl { color: var(--gd-text); }
[data-theme="dark"] .mig-step-rule { background: var(--gd-border); }
[data-theme="dark"] .migrate-step, [data-theme="dark"] .migrate-finding {
  background: var(--gd-glass-bg); border: var(--gd-glass-border);
  -webkit-backdrop-filter: blur(16px) saturate(135%); backdrop-filter: blur(16px) saturate(135%);
}
@media (max-width: 640px) { .mig-step-lbl { display: none; } .mig-stepper { gap: 6px; } }

/* R5 messages page — carded conversation list + glass thread */
.chat-agent-item {
  border-radius: var(--gd-radius-md, 18px) !important; border: 1px solid transparent; margin-bottom: 4px;
}
[data-theme="dark"] .chat-agent-item:hover { background: var(--gd-surface-soft); border-color: var(--gd-border); }
[data-theme="dark"] .chat-agent-item.selected { background: var(--gd-surface-soft); border-color: var(--gd-border-hover); box-shadow: var(--gd-glow-blue); }
[data-theme="dark"] .chat-bubble.bubble-in {
  background: var(--gd-glass-bg); border: var(--gd-glass-border);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
[data-theme="dark"] .chat-thread-header, [data-theme="dark"] .chat-sidebar {
  background: var(--gd-surface-soft); border-color: var(--gd-border);
}
.chat-sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px 8px; }
.chat-sidebar-title { font-size: 13px; font-weight: 700; color: var(--text); }
.chat-sidebar-sub { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); padding: 10px 14px 6px; }
.chat-agent-group { display: flex; flex-direction: column; gap: 2px; padding: 0 8px; }
.chat-agent-group-idle .chat-agent-item { opacity: .72; }
[data-theme="dark"] .chat-sidebar-title { color: var(--gd-text); }
[data-theme="dark"] .chat-sidebar-sub { color: var(--gd-text-muted); }

/* ==========================================================================
   Owner visual fix #384c29ff — screenshot-grounded glassy-dark repair
   Scope: visible skin/layout only. Routes, ids, data contracts and handlers stay
   unchanged. This late slice intentionally wins over earlier R/R5 layers.
   ========================================================================== */

.page[hidden] { display: none !important; }

:root {
  --owner-panel-bg: linear-gradient(180deg, rgba(17, 28, 48, 0.82), rgba(8, 15, 27, 0.66));
  --owner-panel-soft: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035));
  --owner-line: rgba(184, 211, 255, 0.18);
  --owner-line-strong: rgba(103, 232, 249, 0.35);
}

[data-theme="dark"] {
  --scrollbar-track: rgba(3, 7, 18, 0.48);
  --scrollbar-thumb: rgba(103, 232, 249, 0.32);
  --scrollbar-thumb-hover: rgba(103, 232, 249, 0.58);
}

[data-theme="dark"] *::-webkit-scrollbar-track {
  background: rgba(3, 7, 18, 0.48);
  border-radius: 999px;
}

[data-theme="dark"] *::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(103, 232, 249, 0.7), rgba(96, 165, 250, 0.42));
  border: 3px solid rgba(3, 7, 18, 0.72);
}

main {
  padding-top: 14px;
}

.app-shell-topbar {
  border-bottom-color: var(--owner-line);
  background: linear-gradient(180deg, rgba(8, 17, 31, 0.86), rgba(5, 10, 20, 0.7));
}

[data-theme="dark"] .app-shell-topbar {
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* The sticky topbar is now the page title. Keep per-page context/actions, but
   remove the second large H1 that was visible in every route screenshot. */
.page > .page-header {
  margin-bottom: 14px;
}

.page > .page-header h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.page > .page-header .subtitle {
  margin-top: 0;
  max-width: 86ch;
  color: var(--gd-text-muted);
}

.page-header-row {
  gap: 16px;
  align-items: center;
}

.page-header-actions,
.header-actions,
.schedule-header-actions {
  align-items: center;
}

input[type="checkbox"],
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-content: center;
  flex: 0 0 auto;
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--owner-line);
  background: var(--owner-panel-soft);
  color: var(--gd-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

input[type="checkbox"] {
  border-radius: 6px;
}

input[type="radio"] {
  border-radius: 999px;
}

input[type="checkbox"]::after,
input[type="radio"]::after {
  content: "";
  transform: scale(0);
  transition: transform 0.12s ease;
}

input[type="checkbox"]::after {
  width: 10px;
  height: 6px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
  margin-top: -2px;
}

input[type="checkbox"]:checked::after {
  transform: rotate(-45deg) scale(1);
}

input[type="radio"]::after {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: currentColor;
}

input[type="radio"]:checked::after {
  transform: scale(1);
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
  opacity: 0.6;
}

.check-label,
.skills-doc-filter,
.bg-task-toggle,
.connector-agent-item,
.vault-scan-row {
  gap: 10px;
}

[data-theme="dark"] :is(.panel, .overview-card, .overview-stat, .stat-card, .r5-deck, .r5-card,
.act-deck, .act-spotlight, .act-row, .schedule-row, .pending-retries-banner,
.mem-toolbar, .mem-tabs, .mem-graph-view, .connector-card, .connector-external-paths,
.connector-builtin, .catalog-card, .docs-list, .docs-content, .docs-toc,
.pj-list-item, .pj-detail, .status-summary-panel, .status-snapshot-panel,
.status-services, .status-incidents, .set-nav-rail, .set-section, .set-summary-item) {
  background: var(--owner-panel-bg);
  border-color: var(--owner-line);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.09);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}

/* Overview: command surface instead of a loose card pile. */
#overviewPage .overview-stats {
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

#overviewPage .overview-stat {
  min-height: 116px;
  padding: 18px;
}

#overviewPage .overview-stat-value {
  color: var(--gd-text);
  text-shadow: var(--gd-glow-cyan);
}

#overviewPage .overview-grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: 16px;
}

#overviewPage .overview-activity {
  max-height: min(56vh, 520px);
  overflow: auto;
  padding-right: 4px;
}

/* Overview quick-actions rail — glassy tiles that fill the right column. */
[data-theme="dark"] .overview-quick-item {
  border-color: var(--gd-border);
  background: var(--gd-glass-bg-soft, linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.022)));
}
[data-theme="dark"] .overview-quick-item:hover {
  border-color: var(--gd-border-strong);
  background: var(--gd-surface-soft, rgba(255,255,255,.06));
}
[data-theme="dark"] .overview-quick-ic {
  background: rgba(103,232,249,.12);
  color: var(--gd-accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
[data-theme="dark"] .overview-quick-label { color: var(--gd-text); }
[data-theme="dark"] .overview-quick-sub   { color: var(--gd-text-muted); }

/* Schedules: visible padding and fixed action alignment. */
#schedulesPage .schedule-list {
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--owner-line);
  border-radius: var(--gd-radius-lg);
  background: rgba(255, 255, 255, 0.025);
}

/* Deck band spans both grid columns so task-groups render below it,
   eliminating the empty left-column gap. Groups align from their own top. */
#schedulesPage .schedule-list .schedule-deck {
  grid-column: 1 / -1;
}

#schedulesPage .schedule-list .schedule-group {
  align-self: start;
}

#schedulesPage .schedule-row {
  align-items: flex-start;
  padding: 16px 18px;
  gap: 12px;
}

#schedulesPage .schedule-title {
  color: var(--gd-text);
  font-weight: 680;
}

#schedulesPage .schedule-actions {
  opacity: 1;
  align-self: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

#schedulesPage .schedule-actions .btn-icon,
#schedulesPage .schedule-actions button {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
}

/* Activity: remove heavy black row borders and give the stream a readable rail.
   P6 fix: remove timeline spine padding (szétcsúszás) and hide stranded
   spine elements; state is communicated via border-left color + badge. */
#activityPage .act-stream {
  gap: 12px;
}

#activityPage .act-group-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 0;
}

#activityPage .act-group-rows::before {
  content: none;
}

#activityPage .act-row-ic {
  display: none;
}

#activityPage .act-row {
  border: 1px solid var(--owner-line);
  border-left: 3px solid color-mix(in srgb, var(--gd-accent) 40%, transparent);
  border-radius: var(--gd-radius-md);
  padding: 12px 14px;
}

#activityPage .act-row.act-working {
  border-left-color: rgba(34, 197, 94, 0.72);
}

#activityPage .act-row.act-attention {
  border-left-color: rgba(245, 158, 11, 0.72);
}

#activityPage .act-row.act-stopped {
  border-left-color: rgba(107, 114, 128, 0.38);
}

#activityPage .act-row-preview,
#activityPage .activity-tail {
  overflow-wrap: anywhere;
}

/* Memory: stop graph/card overlap and make search/tabs look like one surface. */
#memoriesPage .mem-toolbar {
  grid-template-columns: minmax(260px, 1fr) minmax(150px, 190px) minmax(160px, 220px);
}

#memoriesPage .mem-tabs {
  align-items: center;
}

#memoriesPage .mem-tab {
  border-radius: var(--gd-radius-sm);
}

#memoriesPage .mem-graph-view {
  min-height: 560px;
  isolation: isolate;
}

#memoriesPage .graph-panel {
  max-width: min(320px, calc(100% - 24px));
  max-height: calc(100% - 32px);
}

#memoriesPage .mem-item {
  min-width: 0;
}

/* Docs: redesigned, bounded glass workspace. */
#docsPage .docs-layout {
  gap: 16px;
}

#docsPage .docs-list,
#docsPage .docs-content,
#docsPage .docs-toc {
  border-radius: var(--gd-radius-lg);
}

#docsPage .docs-list-item {
  border-radius: var(--gd-radius-sm);
}

#docsPage .markdown-body {
  color: var(--gd-text-2);
}

#docsPage .markdown-body :is(h1, h2, h3) {
  color: var(--gd-text);
}

/* MCP: consistent card grid, badges, and tool panels. */
#connectorsPage .connector-toolbar {
  padding: 12px;
  border: 1px solid var(--owner-line);
  border-radius: var(--gd-radius-lg);
  background: rgba(255, 255, 255, 0.035);
}

#connectorsPage .connector-filter-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

#connectorsPage .connector-card {
  align-items: flex-start;
}

#connectorsPage .connector-source-badge,
#connectorsPage .connector-type-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid var(--owner-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--gd-text-2);
  font-size: 10px;
  font-weight: 760;
  text-transform: uppercase;
}

#connectorsPage .connector-type-badge.remote,
#connectorsPage .connector-type-badge.local {
  color: var(--gd-success);
}

#connectorsPage .connector-type-badge.plugin {
  color: var(--gd-accent);
}

/* ================================================================
   P2: MCP connectors — glassy tab-bar + filter chips + card align
   Scope: #connectorsPage only. Owner complaint 7: remote/local badge
   floating, Installed/Gallery tab hard-black box, filter chips solid.
   Depends on: G1–G4. Reskin only — routes/handlers/ids unchanged.
   ================================================================ */

/* Tab container: glass recessed track (mirrors .autonomy-levels G3) */
html[data-theme="dark"] #connectorsPage .connector-tabs {
  background: var(--gd-surface-soft, rgba(255, 255, 255, 0.045));
  border: 1px solid var(--gd-border, rgba(184, 211, 255, 0.16));
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(var(--gd-glass-blur, 14px)) saturate(140%);
          backdrop-filter: blur(var(--gd-glass-blur, 14px)) saturate(140%);
}

/* Tab buttons: transparent rest, glass-accent active */
html[data-theme="dark"] #connectorsPage .connector-tab {
  background: transparent;
  border-color: transparent;
  color: var(--gd-text-muted, #8fa1b8);
}
html[data-theme="dark"] #connectorsPage .connector-tab:hover {
  background: var(--gd-surface-soft, rgba(255, 255, 255, 0.045));
  border-color: var(--gd-border, rgba(184, 211, 255, 0.16));
  color: var(--gd-text, #f4f8ff);
}
html[data-theme="dark"] #connectorsPage .connector-tab.active {
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.30), rgba(96, 165, 250, 0.12));
  border-color: color-mix(in srgb, var(--gd-accent-blue, #60a5fa) 60%, transparent);
  color: var(--gd-text, #f4f8ff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), var(--gd-glow-blue, 0 0 34px rgba(96, 165, 250, 0.30));
}

/* Filter chips: glass-capsule (matches G3 glass-surface language) */
[data-theme="dark"] #connectorsPage .catalog-filter-btn,
[data-theme="dark"] #connectorsPage .connector-filter-btn {
  background: var(--gd-surface-soft, rgba(255, 255, 255, 0.045));
  border: 1px solid var(--gd-border, rgba(184, 211, 255, 0.16));
  color: var(--gd-text-muted, #8fa1b8);
  box-shadow: none;
}
[data-theme="dark"] #connectorsPage .catalog-filter-btn:hover,
[data-theme="dark"] #connectorsPage .connector-filter-btn:hover {
  border-color: var(--gd-border-strong, rgba(132, 189, 255, 0.32));
  color: var(--gd-text, #f4f8ff);
}
[data-theme="dark"] #connectorsPage .catalog-filter-btn.active,
[data-theme="dark"] #connectorsPage .connector-filter-btn.active {
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.30), rgba(96, 165, 250, 0.12));
  border-color: color-mix(in srgb, var(--gd-accent-blue, #60a5fa) 60%, transparent);
  color: var(--gd-text, #f4f8ff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 16px rgba(96, 165, 250, 0.22);
}

/* Connector card: center-align so type-badge doesn't float to top-right */
#connectorsPage .connector-card {
  align-items: center;
}

/* Type badge: legible pill in dark — remote cyan, local green */
[data-theme="dark"] #connectorsPage .connector-type-badge {
  background: rgba(184, 211, 255, 0.08);
  border-color: var(--owner-line, rgba(184, 211, 255, 0.18));
}
[data-theme="dark"] #connectorsPage .connector-type-badge.remote {
  background: rgba(103, 232, 249, 0.12);
  border-color: rgba(103, 232, 249, 0.32);
  color: var(--gd-accent, #67e8f9);
}
[data-theme="dark"] #connectorsPage .connector-type-badge.local {
  background: rgba(134, 239, 172, 0.12);
  border-color: rgba(134, 239, 172, 0.30);
  color: var(--gd-success, #86efac);
}
/* === end P2 MCP glassy tab + chips === */

/* ================================================================
   P3: PROJECTS page — glassy premium structural redesign
   Scope: #projectsPage only. Structural, not recolor.
   ================================================================ */

#projectsPage .projects-deck {
  margin-bottom: 20px;
}

/* Shell: slightly wider list column */
#projectsPage .pj-shell {
  grid-template-columns: minmax(270px, 340px) minmax(0, 1fr);
  gap: 20px;
}

/* List panel: proper glass surface */
#projectsPage .pj-list {
  padding: 10px;
  gap: 6px;
  border: 1px solid var(--owner-line);
  border-radius: var(--gd-radius-lg);
  background: var(--owner-panel-bg);
  box-shadow: 0 18px 54px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.09);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
          backdrop-filter: blur(18px) saturate(140%);
}

/* List items: card with accent left strip */
#projectsPage .pj-list-item {
  position: relative;
  padding: 12px 14px;
  gap: 6px;
  border-radius: var(--gd-radius-sm);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(184,211,255,.07);
  overflow: hidden;
  transition: border-color .15s, background .15s, box-shadow .15s;
}

#projectsPage .pj-list-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: transparent;
  transition: background .15s;
}

#projectsPage .pj-list-item:hover {
  border-color: var(--owner-line);
  background: rgba(255,255,255,.055);
}

#projectsPage .pj-list-item.is-active {
  background: linear-gradient(90deg, rgba(103,232,249,.11), rgba(96,165,250,.05));
  border-color: var(--owner-line-strong);
  box-shadow: 0 0 20px rgba(103,232,249,.13), inset 0 1px 0 rgba(255,255,255,.1);
}

#projectsPage .pj-list-item.is-active::before {
  background: linear-gradient(180deg, var(--gd-accent), var(--gd-accent-blue));
}

#projectsPage .pj-list-name {
  font-size: 15px;
  font-weight: 760;
  color: var(--gd-text);
  letter-spacing: -.01em;
}

#projectsPage .pj-list-meta { gap: 6px; margin-top: 2px; }
#projectsPage .pj-list-sub { font-size: 12px; color: var(--gd-text-muted); }

/* Detail panel: glass surface with ample padding */
#projectsPage .pj-detail {
  padding: 24px;
  gap: 20px;
  border: 1px solid var(--owner-line);
  border-radius: var(--gd-radius-lg);
  background: var(--owner-panel-bg);
  box-shadow: 0 18px 54px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.09);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
          backdrop-filter: blur(18px) saturate(140%);
}

/* Detail header: visually separated from content sections */
#projectsPage .pj-detail-head {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--owner-line);
  gap: 8px;
}

#projectsPage .pj-detail-title {
  font-size: 22px;
  font-weight: 760;
  color: var(--gd-text);
  letter-spacing: -.02em;
  gap: 10px;
}

#projectsPage .pj-detail-id {
  font-size: 12px;
  color: var(--gd-text-muted);
  font-weight: 500;
}

#projectsPage .pj-chips { gap: 6px; margin-top: 6px; }

/* Sections: each section is its own glass panel */
#projectsPage .pj-section {
  padding: 16px 18px;
  gap: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(184,211,255,.1);
  border-radius: var(--gd-radius-md);
}

/* Section titles: uppercase label with hairline separator */
#projectsPage .pj-section-title {
  font-size: 11px;
  font-weight: 760;
  color: var(--gd-text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(184,211,255,.1);
  width: 100%;
}

/* Count badge: cyan accent */
#projectsPage .pj-count {
  background: rgba(103,232,249,.14);
  color: var(--gd-accent);
  font-weight: 760;
}

/* KV grid: more spacious columns */
#projectsPage .pj-kv-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 12px 20px;
}

#projectsPage .pj-kv dt {
  font-size: 10px;
  font-weight: 760;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gd-text-muted);
  margin-bottom: 3px;
}

#projectsPage .pj-kv dd code {
  display: inline-block;
  padding: 3px 8px;
  background: rgba(96,165,250,.09);
  border: 1px solid rgba(184,211,255,.12);
  border-radius: var(--gd-radius-xs);
  color: var(--gd-text);
  font-size: 13px;
}

/* Module cards: elevated glass rows */
#projectsPage .data-list-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(184,211,255,.1);
  border-radius: var(--gd-radius-sm);
}

#projectsPage .data-list-item-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#projectsPage .data-list-item-head > span:first-child {
  font-size: 11px;
  font-weight: 760;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gd-accent);
  opacity: .85;
}

#projectsPage .data-list-item-head > span:last-child {
  font-size: 11px;
  color: var(--gd-text-muted);
}

#projectsPage .data-list-item-title {
  font-size: 15px;
  font-weight: 760;
  color: var(--gd-text);
}

/* Stack chips: blue-tinted in project context */
#projectsPage .pj-chips .chip {
  background: rgba(96,165,250,.12);
  border-color: rgba(96,165,250,.22);
  color: var(--gd-accent-blue);
  font-size: 12px;
}

/* MCP server group header */
#projectsPage .pj-mcp-server-head {
  padding: 8px 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(184,211,255,.1);
  border-radius: var(--gd-radius-xs);
}

#projectsPage .pj-mcp-server-name {
  color: var(--gd-text);
  font-size: 13px;
}

#projectsPage .pj-muted { color: var(--gd-text-muted); }

/* Desktop: pair the two compact sections (Identity + Modules) side-by-side so the
   detail reads as a portfolio dashboard, not one endless grey column. Header,
   policy, and the wide sections (Agents table, Gates, MCP, Evidence) stay full
   width. Scoped, structural — not a recolor. */
@media (min-width: 1280px) {
  #projectsPage .pj-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-content: start;
  }
  /* everything spans both columns by default... */
  #projectsPage .pj-detail > * { grid-column: 1 / -1; }
  /* ...except Identity (holds the KV grid) and the section right after it
     (Modules), which pair up on a single row. */
  #projectsPage .pj-detail > .pj-section:has(.pj-kv-grid),
  #projectsPage .pj-detail > .pj-section:has(.pj-kv-grid) + .pj-section {
    grid-column: auto;
  }
}

/* Mobile: stack, list scrolls horizontally */
@media (max-width: 900px) {
  #projectsPage .pj-shell {
    grid-template-columns: 1fr;
  }

  #projectsPage .pj-list {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 8px;
  }

  #projectsPage .pj-list-item {
    min-width: 220px;
  }

  #projectsPage .pj-detail {
    padding: 16px;
  }
}

/* ================================================================
   P3-R: Projects page true IA redesign
   Command-center structure replaces legacy list/detail section cards.
   ================================================================ */
#projectsPage .pj-command-center {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

#projectsPage .pj-command-left {
  display: grid;
  gap: 14px;
  min-width: 0;
}

#projectsPage .pj-command-summary,
#projectsPage .pj-atlas,
#projectsPage .pj-workspace {
  border: 1px solid var(--owner-line);
  background: var(--owner-panel-bg);
  border-radius: var(--gd-radius-lg);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255,255,255,.09);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}

#projectsPage .pj-command-summary {
  padding: 18px;
  overflow: hidden;
  position: relative;
}

#projectsPage .pj-command-summary::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -44px;
  width: 140px;
  height: 140px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(103,232,249,.18), transparent 66%);
  pointer-events: none;
}

#projectsPage .pj-command-kicker,
#projectsPage .pj-section-eyebrow {
  display: block;
  color: var(--gd-text-muted);
  font-size: 10px;
  font-weight: 780;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#projectsPage .pj-command-total {
  display: flex;
  align-items: end;
  gap: 10px;
  margin-top: 10px;
}

#projectsPage .pj-command-total strong {
  color: var(--gd-text);
  font-size: 46px;
  line-height: .88;
  text-shadow: var(--gd-glow-cyan);
}

#projectsPage .pj-command-total span {
  color: var(--gd-text-2);
  font-size: 13px;
  padding-bottom: 3px;
}

#projectsPage .pj-command-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}

#projectsPage .pj-command-metrics div,
#projectsPage .pj-health-grid div {
  padding: 12px;
  border: 1px solid rgba(184,211,255,.12);
  border-radius: var(--gd-radius-sm);
  background: rgba(255,255,255,.04);
}

#projectsPage .pj-command-metrics strong,
#projectsPage .pj-health-grid strong {
  display: block;
  color: var(--gd-text);
  font-size: 22px;
  line-height: 1;
}

#projectsPage .pj-command-metrics span,
#projectsPage .pj-health-grid span {
  display: block;
  margin-top: 6px;
  color: var(--gd-text-muted);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .06em;
  text-transform: uppercase;
}

#projectsPage .pj-command-metrics .is-hot strong,
#projectsPage .pj-atlas-strip .is-hot {
  color: var(--gd-warning);
}

#projectsPage .pj-command-policy {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(251,191,36,.26);
  border-radius: var(--gd-radius-sm);
  background: rgba(251,191,36,.07);
  color: #fde68a;
}

#projectsPage .pj-command-policy span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(251,191,36,.16);
  font-weight: 800;
}

#projectsPage .pj-command-policy b {
  font-size: 12px;
  line-height: 1.35;
}

#projectsPage .pj-atlas {
  display: grid;
  gap: 8px;
  padding: 10px;
}

#projectsPage .pj-atlas-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  grid-template-areas:
    "orb main score"
    "strip strip strip";
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 104px;
  padding: 12px;
  border: 1px solid rgba(184,211,255,.1);
  border-radius: var(--gd-radius-md);
  background: rgba(3,7,18,.24);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

#projectsPage .pj-atlas-card:hover {
  border-color: var(--owner-line);
  background: rgba(255,255,255,.055);
}

#projectsPage .pj-atlas-card.is-active {
  border-color: var(--owner-line-strong);
  background: linear-gradient(135deg, rgba(103,232,249,.12), rgba(139,92,246,.08));
  box-shadow: 0 0 28px rgba(103,232,249,.13), inset 0 1px 0 rgba(255,255,255,.1);
}

#projectsPage .pj-atlas-orb {
  grid-area: orb;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(103,232,249,.28);
  border-radius: 14px;
  background: rgba(103,232,249,.1);
  color: var(--gd-accent);
  font-size: 12px;
  font-weight: 850;
}

#projectsPage .pj-atlas-main { grid-area: main; min-width: 0; }
#projectsPage .pj-atlas-name {
  display: block;
  color: var(--gd-text);
  font-size: 14px;
  font-weight: 780;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#projectsPage .pj-atlas-meta {
  display: block;
  margin-top: 4px;
  color: var(--gd-text-muted);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#projectsPage .pj-atlas-score {
  grid-area: score;
  min-width: 48px;
  text-align: right;
}

#projectsPage .pj-atlas-score strong {
  display: block;
  color: var(--gd-text);
  font-size: 21px;
  line-height: 1;
}

#projectsPage .pj-atlas-score span {
  display: block;
  margin-top: 4px;
  color: var(--gd-text-muted);
  font-size: 10px;
  text-transform: uppercase;
}

#projectsPage .pj-atlas-strip {
  grid-area: strip;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

#projectsPage .pj-atlas-strip span {
  min-width: 0;
  padding: 6px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.045);
  color: var(--gd-text-2);
  font-size: 10px;
  font-weight: 720;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#projectsPage .pj-workspace {
  display: grid;
  gap: 16px;
  padding: 18px;
  min-width: 0;
}

#projectsPage .pj-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 22px;
  border: 1px solid rgba(103,232,249,.2);
  border-radius: var(--gd-radius-lg);
  background:
    radial-gradient(circle at 86% 12%, rgba(103,232,249,.18), transparent 30%),
    linear-gradient(180deg, rgba(13,23,39,.72), rgba(3,7,18,.34));
}

#projectsPage .pj-hero-kicker {
  color: var(--gd-text-muted);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#projectsPage .pj-hero h2 {
  margin: 7px 0 0;
  color: var(--gd-text);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.04;
}

#projectsPage .pj-hero p {
  margin: 7px 0 0;
  color: var(--gd-text-2);
  font-size: 13px;
  overflow-wrap: anywhere;
}

#projectsPage .pj-health-ring {
  width: 108px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 999px;
  border: 1px solid rgba(103,232,249,.38);
  background: conic-gradient(var(--gd-accent) calc(var(--pj-score, 74) * 1%), rgba(255,255,255,.08) 0);
  box-shadow: 0 0 34px rgba(103,232,249,.18);
}

#projectsPage .pj-health-ring strong {
  font-size: 29px;
  line-height: 1;
}

#projectsPage .pj-health-ring span {
  margin-top: 5px;
  color: var(--gd-text-2);
  font-size: 10px;
  font-weight: 760;
  text-transform: uppercase;
}

#projectsPage .pj-health-ring.is-guarded { border-color: rgba(251,191,36,.38); background: conic-gradient(var(--gd-warning) 74%, rgba(255,255,255,.08) 0); }
#projectsPage .pj-health-ring.is-watch { border-color: rgba(251,191,36,.46); background: conic-gradient(var(--gd-warning) 62%, rgba(255,255,255,.08) 0); }
#projectsPage .pj-health-ring.is-blocked { border-color: rgba(248,113,113,.45); background: conic-gradient(var(--gd-danger) 42%, rgba(255,255,255,.08) 0); }

#projectsPage .pj-health-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

#projectsPage .pj-safety-rail {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border-radius: var(--gd-radius-lg);
  border: 1px solid rgba(251,191,36,.28);
  background: linear-gradient(135deg, rgba(251,191,36,.11), rgba(255,255,255,.035));
}

#projectsPage .pj-safety-rail.is-open {
  border-color: rgba(134,239,172,.28);
  background: linear-gradient(135deg, rgba(134,239,172,.09), rgba(255,255,255,.035));
}

#projectsPage .pj-safety-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(251,191,36,.16);
  color: #fde68a;
  font-weight: 900;
  font-size: 22px;
}

#projectsPage .pj-safety-rail.is-open .pj-safety-mark {
  background: rgba(134,239,172,.14);
  color: var(--gd-success);
}

#projectsPage .pj-safety-rail h3 {
  margin: 4px 0 0;
  color: var(--gd-text);
  font-size: 15px;
  line-height: 1.35;
}

#projectsPage .pj-safety-rail p {
  margin: 5px 0 0;
  color: var(--gd-text-muted);
  font-size: 12px;
  line-height: 1.45;
}

#projectsPage .pj-safety-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

#projectsPage .pj-lens-grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 14px;
}

#projectsPage .pj-lens-card,
#projectsPage .pj-topology-panel,
#projectsPage .pj-coverage-panel,
#projectsPage .pj-contract-panel,
#projectsPage .pj-evidence-panel {
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(184,211,255,.12);
  border-radius: var(--gd-radius-lg);
  background: rgba(3,7,18,.34);
}

#projectsPage .pj-panel-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

#projectsPage .pj-panel-head h3 {
  margin: 4px 0 0;
  color: var(--gd-text);
  font-size: 16px;
}

#projectsPage .pj-topology {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

#projectsPage .pj-module-node {
  position: relative;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(103,232,249,.16);
  border-radius: var(--gd-radius-md);
  background: linear-gradient(180deg, rgba(103,232,249,.08), rgba(255,255,255,.03));
  overflow: hidden;
}

#projectsPage .pj-module-node::after {
  content: "";
  position: absolute;
  inset: auto 14px 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gd-accent), transparent);
}

#projectsPage .pj-module-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--gd-text-muted);
  font-size: 10px;
  font-weight: 760;
  text-transform: uppercase;
}

#projectsPage .pj-module-title {
  margin-top: 9px;
  color: var(--gd-text);
  font-size: 16px;
  font-weight: 780;
}

#projectsPage .pj-stack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(82px, 1fr));
  gap: 7px;
  margin-top: 12px;
}

#projectsPage .pj-stack-grid span {
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(184,211,255,.1);
  border-radius: var(--gd-radius-xs);
  background: rgba(255,255,255,.045);
  color: var(--gd-text-2);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
}

#projectsPage .pj-stack-grid b {
  display: block;
  color: var(--gd-accent);
  font-size: 10px;
  margin-bottom: 3px;
}

#projectsPage .pj-coverage-matrix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

#projectsPage .pj-agent-cell {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(184,211,255,.11);
  border-left: 3px solid rgba(103,232,249,.42);
  border-radius: var(--gd-radius-sm);
  background: rgba(255,255,255,.035);
}

#projectsPage .pj-agent-cell.is-risk {
  border-left-color: rgba(251,191,36,.72);
}

#projectsPage .pj-agent-role {
  display: block;
  color: var(--gd-text-muted);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .06em;
  text-transform: uppercase;
}

#projectsPage .pj-agent-cell strong {
  display: block;
  margin: 5px 0 8px;
  color: var(--gd-text);
  font-size: 13px;
  overflow-wrap: anywhere;
}

#projectsPage .pj-gate-lane {
  display: grid;
  gap: 8px;
}

#projectsPage .pj-gate-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(184,211,255,.1);
  border-radius: var(--gd-radius-sm);
  background: rgba(255,255,255,.035);
}

#projectsPage .pj-gate-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--gd-accent);
  box-shadow: 0 0 16px rgba(103,232,249,.4);
}

#projectsPage .pj-gate-step.is-success .pj-gate-dot { background: var(--gd-success); box-shadow: 0 0 16px rgba(134,239,172,.38); }
#projectsPage .pj-gate-step.is-warning .pj-gate-dot { background: var(--gd-warning); box-shadow: 0 0 16px rgba(251,191,36,.36); }
#projectsPage .pj-gate-step.is-danger .pj-gate-dot { background: var(--gd-danger); box-shadow: 0 0 16px rgba(248,113,113,.36); }

#projectsPage .pj-gate-step strong {
  display: block;
  color: var(--gd-text);
  font-size: 12px;
  overflow-wrap: anywhere;
}

#projectsPage .pj-gate-step span:not(.pj-gate-dot):not(.badge) {
  color: var(--gd-text-muted);
  font-size: 11px;
  line-height: 1.35;
}

#projectsPage .pj-evidence-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid rgba(184,211,255,.1);
  border-radius: var(--gd-radius-sm);
  background: rgba(255,255,255,.035);
}

#projectsPage .pj-evidence-card span {
  color: var(--gd-text);
  font-weight: 720;
}

#projectsPage .pj-evidence-card code {
  grid-column: 1 / -1;
  color: var(--gd-text-2);
  overflow-wrap: anywhere;
}

#projectsPage .pj-evidence-card b {
  color: var(--gd-success);
  font-size: 11px;
  text-transform: uppercase;
}

#projectsPage .pj-empty-block {
  display: grid;
  gap: 5px;
  padding: 16px;
  border: 1px dashed rgba(184,211,255,.18);
  border-radius: var(--gd-radius-md);
  color: var(--gd-text-muted);
}

#projectsPage .pj-empty-block strong {
  color: var(--gd-text);
}

@media (max-width: 1180px) {
  #projectsPage .pj-command-center {
    grid-template-columns: 1fr;
  }
  #projectsPage .pj-atlas {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}

@media (max-width: 760px) {
  #projectsPage .pj-command-summary,
  #projectsPage .pj-workspace {
    border-radius: 20px;
  }
  #projectsPage .pj-command-metrics,
  #projectsPage .pj-health-grid,
  #projectsPage .pj-lens-grid {
    grid-template-columns: 1fr 1fr;
  }
  #projectsPage .pj-safety-rail,
  #projectsPage .pj-hero {
    grid-template-columns: 1fr;
  }
  #projectsPage .pj-safety-meta {
    justify-content: flex-start;
  }
  #projectsPage .pj-health-ring {
    width: 92px;
  }
}

@media (max-width: 480px) {
  #projectsPage .pj-command-center {
    gap: 12px;
  }
  #projectsPage .pj-workspace,
  #projectsPage .pj-command-summary,
  #projectsPage .pj-atlas {
    padding: 12px;
  }
  #projectsPage .pj-atlas {
    grid-template-columns: 1fr;
  }
  #projectsPage .pj-command-metrics,
  #projectsPage .pj-health-grid,
  #projectsPage .pj-lens-grid {
    grid-template-columns: 1fr;
  }
  #projectsPage .pj-atlas-card {
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-areas:
      "orb main"
      "score score"
      "strip strip";
  }
  #projectsPage .pj-atlas-score {
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
  }
  #projectsPage .pj-atlas-strip {
    grid-template-columns: 1fr;
  }
  #projectsPage .pj-hero h2 {
    font-size: 25px;
  }
  #projectsPage .pj-gate-step,
  #projectsPage .pj-evidence-card {
    grid-template-columns: 1fr;
  }
}

/* Skills: polish filters and kill native checkbox visual. */
#skillsPage .skills-toolbar {
  padding: 12px;
  border: 1px solid var(--owner-line);
  border-radius: var(--gd-radius-lg);
  background: rgba(255, 255, 255, 0.035);
}

#skillsPage .skills-doc-filter {
  padding: 0 12px;
  border: 1px solid var(--owner-line);
  border-radius: var(--gd-radius-sm);
  background: rgba(255, 255, 255, 0.04);
}

#skillsPage .skills-grid {
  gap: 12px;
}

/* Settings: keep the editor column from drifting and make values readable. */
#settingsPage .set-workspace {
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
}

#settingsPage .set-field {
  align-items: center;
}

#settingsPage .set-field-editor {
  width: min(260px, 34vw);
}

#settingsPage .settings-save-bar {
  border: 1px solid var(--owner-line);
  background: var(--owner-panel-bg);
  box-shadow: var(--gd-shadow-float);
}

/* Status shell already configured in the main block; snapshot panel needs explicit padding. */

#statusPage .status-snapshot-panel {
  padding: 18px;
  border: 1px solid var(--owner-line);
  border-radius: var(--gd-radius-lg);
}

/* Full-width snapshot: metrics run as a horizontal strip (auto-collapses to a
   single column on narrow viewports so the 3 cards never crowd). */
#statusPage .status-snapshot-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 10px;
  margin: 12px 0 0;
}

#statusPage .status-snapshot-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 54px;
  padding: 12px;
  border: 1px solid var(--owner-line);
  border-radius: var(--gd-radius-sm);
  background: rgba(255, 255, 255, 0.04);
}

#statusPage .status-snapshot-row dt,
#statusPage .status-snapshot-row dd {
  margin: 0;
}

#statusPage .status-snapshot-row dd {
  color: var(--gd-text);
  font-weight: 760;
}

/* Autonomy: make level controls look intentional, not browser boxes. */
#autonomyPage .autonomy-grid {
  gap: 10px;
}

#autonomyPage .autonomy-row {
  border-color: var(--owner-line);
  background: var(--owner-panel-bg);
}

#autonomyPage .autonomy-level-btn {
  appearance: none;
  -webkit-appearance: none;
  min-width: 44px;
  height: 36px;
  border: 1px solid var(--owner-line);
  border-radius: var(--gd-radius-sm);
  background: rgba(255, 255, 255, 0.045);
  color: var(--gd-text-2);
}

/* Active segment = semantic glass capsule per level (matches the legend dots:
   1 neutral / 2 accent-blue / 3 success). These must be id-scoped: the base
   #autonomyPage .autonomy-level-btn (1,1,0) sets a flat bg, so a bare
   [data-theme] per-level rule (0,4,0) can't win — every active toggle collapsed
   to one cyan-blue fill and the level meaning was lost. */
#autonomyPage .autonomy-level-btn.active {
  color: var(--gd-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 2px 10px rgba(0, 0, 0, 0.32);
}
#autonomyPage .autonomy-level-btn.active[data-level="1"] {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.035));
  border-color: color-mix(in srgb, var(--gd-text-muted) 58%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 16px rgba(143, 161, 184, 0.22);
}
#autonomyPage .autonomy-level-btn.active[data-level="2"] {
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.34), rgba(96, 165, 250, 0.14));
  border-color: color-mix(in srgb, var(--gd-accent-blue) 62%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), var(--gd-glow-blue, 0 0 34px rgba(96, 165, 250, 0.30));
}
#autonomyPage .autonomy-level-btn.active[data-level="3"] {
  background: linear-gradient(180deg, rgba(134, 239, 172, 0.30), rgba(134, 239, 172, 0.12));
  border-color: color-mix(in srgb, var(--gd-success) 55%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 20px rgba(134, 239, 172, 0.26);
}

@media (max-width: 900px) {
  #overviewPage .overview-stats,
  #overviewPage .overview-grid,
  #statusPage .status-shell,
  #settingsPage .set-workspace,
  #docsPage .docs-layout,
  #docsPage .docs-layout:has(#docsToc:not([hidden])) {
    grid-template-columns: 1fr;
  }

  #memoriesPage .mem-toolbar {
    grid-template-columns: 1fr;
  }

  #settingsPage .set-field {
    flex-direction: column;
    gap: var(--space-3);
  }

  #settingsPage .set-field-editor {
    width: 100%;
  }
}

@media (max-width: 640px) {
  main {
    padding-left: 12px;
    padding-right: 12px;
  }

  .page-header-row {
    align-items: stretch;
    flex-direction: column;
  }

  .page-header-actions,
  .header-actions,
  .schedule-header-actions {
    width: 100%;
  }

  .page-header-actions > *,
  .header-actions > *,
  .schedule-header-actions > * {
    flex: 1 1 auto;
  }

  #schedulesPage .schedule-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
  }

  #schedulesPage .schedule-actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  #schedulesPage .schedule-actions > * {
    flex: 1 1 44px;
  }

  #kanbanBoard[data-mobile-status="all"] .kanban-col {
    order: 5;
  }

  #kanbanBoard[data-mobile-status="all"] .kanban-col:has(.kanban-card) {
    order: 1;
  }

  #kanbanBoard[data-mobile-status="all"] .kanban-col[data-status="in_progress"]:has(.kanban-card) {
    order: 0;
  }

  #connectorsPage .connector-toolbar,
  #skillsPage .skills-toolbar {
    align-items: stretch;
  }
}

/* ==========================================================================
   G3 — GLOBAL GLASSY FORM-CONTROL SYSTEM   (Kanban card #79403866)
   One global slice that kills every undesigned control across ALL pages:
     A. native white checkbox/radio boxes  (owner complaint 4, 9)
     B. the flat-grey Autonomy 1/2/3 segmented toggle
     C. the near-black number/text/select fields (owner complaint 1, 10 — Settings)
   Purely a skin: no markup, id, route, modal or handler changes. Every value
   maps back to the existing --gd-* glassy-dark tokens so the language matches
   docs/design/glassy-dark-bible.md. Light theme keeps working through the base
   tokens; the glass upgrades in B and C are scoped to [data-theme="dark"].
   ========================================================================== */

/* --- A. Checkbox + radio ---------------------------------------------------
   Native checkboxes rendered as bright white boxes. We decouple the hit-target
   (the element itself, which the coarse-pointer rule may grow to 44px) from the
   18px VISIBLE box drawn as ::before and the check/dot drawn as ::after — the
   exact pattern already proven on the background-tasks toggle. The input stays a
   real focusable control so every change handler keeps working. More-specific
   per-page rules still win: #bgTasksPage keeps its own box; auth-mode-card
   radios stay display:none (they drive card-select UI, not a visible box). */
input[type="checkbox"]:not([hidden]),
input[type="radio"]:not([hidden]) {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  box-sizing: border-box;
  flex: none;
  min-width: 18px;
  min-height: 18px;
  vertical-align: middle;
  cursor: pointer;
}
input[type="checkbox"]:not([hidden])::before,
input[type="radio"]:not([hidden])::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  border: 1px solid var(--gd-border-strong, rgba(132, 189, 255, 0.32));
  border-radius: var(--gd-radius-xs, 8px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)),
    var(--bg-input, #1b1f27);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
input[type="radio"]:not([hidden])::before { border-radius: 50%; }
/* checked = accent-glow fill */
input[type="checkbox"]:not([hidden]):checked::before,
input[type="radio"]:not([hidden]):checked::before {
  background: linear-gradient(180deg, var(--gd-accent-blue, #60a5fa), color-mix(in srgb, var(--gd-accent-blue, #60a5fa) 76%, #000 24%));
  border-color: color-mix(in srgb, var(--gd-accent-blue, #60a5fa) 70%, #fff 20%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), var(--gd-glow-blue, 0 0 34px rgba(96, 165, 250, 0.30));
}
/* checkmark (checkbox) */
input[type="checkbox"]:not([hidden])::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
  opacity: 0;
  transition: opacity 0.12s ease;
}
input[type="checkbox"]:not([hidden]):checked::after { opacity: 1; }
/* dot (radio) */
input[type="radio"]:not([hidden])::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  transition: opacity 0.12s ease;
}
input[type="radio"]:not([hidden]):checked::after { opacity: 1; }
/* focus-visible ring lands on the visible box, not the (possibly 44px) element */
input[type="checkbox"]:not([hidden]):focus-visible,
input[type="radio"]:not([hidden]):focus-visible { outline: none; }
input[type="checkbox"]:not([hidden]):focus-visible::before,
input[type="radio"]:not([hidden]):focus-visible::before {
  border-color: var(--gd-accent, #67e8f9);
  box-shadow: var(--gd-focus-ring, 0 0 0 3px rgba(103, 232, 249, 0.22));
}
/* disabled reads as muted, not dead-black */
input[type="checkbox"]:not([hidden]):disabled,
input[type="radio"]:not([hidden]):disabled { cursor: not-allowed; }
input[type="checkbox"]:not([hidden]):disabled::before,
input[type="radio"]:not([hidden]):disabled::before { opacity: 0.45; }

/* --- B. Segmented toggle (Autonomy 1 / 2 / 3) -----------------------------
   The level switch read as a flat grey pill — level-1 active was a solid dead
   grey fill. Give the track a recessed glass groove and each active segment a
   tinted glass capsule with a lit border + glow, keeping the semantic colour
   per level (neutral / accent-blue / success). Dark theme only. */
[data-theme="dark"] .autonomy-levels {
  background: var(--gd-surface-soft, rgba(255, 255, 255, 0.045));
  border: 1px solid var(--gd-border, rgba(184, 211, 255, 0.16));
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] .autonomy-level-btn { color: var(--gd-text-muted); }
[data-theme="dark"] .autonomy-level-btn:hover:not(.active):not(:disabled) {
  color: var(--gd-text);
  background: var(--gd-surface-soft);
}
/* Active-segment colour (shared shadow + per-level neutral/blue/success) now
   lives in the id-scoped #autonomyPage .autonomy-level-btn.active[data-level]
   rules above — needed to out-specify the base #autonomyPage button fill.
   Kept here only: the recessed track + idle/hover treatment. */

/* --- C. Text / number / select / textarea fields --------------------------
   Dark fields were near-black slabs with a barely-visible hairline (Settings
   read as a wall of voids). Lift every editable field onto a translucent glass
   surface with a clear hairline and a cyan focus ring, so a control always
   reads as editable. type=color keeps its own swatch; checkbox/radio handled in
   A. Dark theme only — light theme keeps the base skin. */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .input,
[data-theme="dark"] .input-compact {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
    var(--gd-surface, rgba(13, 23, 39, 0.66));
  border: 1px solid var(--gd-border, rgba(184, 211, 255, 0.16));
  border-radius: var(--gd-radius-sm, 12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: var(--gd-text, #f4f8ff);
  color-scheme: dark;
}
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):hover,
[data-theme="dark"] textarea:hover,
[data-theme="dark"] select:hover,
[data-theme="dark"] .input:hover {
  border-color: var(--gd-border-strong, rgba(132, 189, 255, 0.32));
}
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] .input:focus,
[data-theme="dark"] .input-compact:focus {
  outline: none;
  border-color: var(--gd-accent, #67e8f9);
  box-shadow: var(--gd-focus-ring, 0 0 0 3px rgba(103, 232, 249, 0.22));
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: var(--gd-text-muted, #8fa1b8); }
[data-theme="dark"] .set-field-editor .input,
[data-theme="dark"] .settings-row-editor .input { color: var(--gd-text, #f4f8ff); }
/* === end G3 global form-control system === */

/* === P5 Settings input visibility + alignment ================================
   Settings number/text inputs were near-invisible (glass border too subtle
   against the card glass-bg). Lift the border to --gd-border-strong and
   right-align number values so small digits don't look stranded in 260px field.
   At ≤900px the field already stacks to column — ensure number inputs stay
   right-aligned for visual anchor. */
[data-theme="dark"] #settingsPage .set-field-editor .input {
  border-color: var(--gd-border-strong, rgba(132, 189, 255, 0.32));
}
[data-theme="dark"] #settingsPage .set-field-editor input[type="number"] {
  text-align: right;
}
/* === end P5 === */

/* === G4: button + badge palette — glassy accent (dark theme only) =========
   Goal: no neon solid red/blue; every action and status reads from the
   glassy-dark bible palette with translucent fill, a hairline glass border,
   and a restrained glow shadow. Light theme keeps its original styles intact. */

/* --- Primary button: blue-cyan glassy gradient + glow -------------------- */
[data-theme="dark"] .btn-primary {
  background: linear-gradient(180deg,
    rgba(96, 165, 250, 0.90) 0%,
    rgba(67, 132, 220, 0.80) 100%);
  border: 1px solid rgba(103, 232, 249, 0.28);
  color: var(--accent-on, #08131f);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 28px rgba(96, 165, 250, 0.26);
}
[data-theme="dark"] .btn-primary:hover:not(:disabled) {
  background: linear-gradient(180deg,
    rgba(103, 232, 249, 0.86) 0%,
    rgba(96, 165, 250, 0.76) 100%);
  border-color: rgba(103, 232, 249, 0.48);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    0 0 40px rgba(96, 165, 250, 0.40);
}

/* --- Destructive button: muted glass red, not solid neon ------------------ */
[data-theme="dark"] .btn-danger {
  background: color-mix(in srgb, var(--gd-danger, #f87171) 9%, transparent);
  color: var(--gd-danger, #f87171);
  border: 1px solid color-mix(in srgb, var(--gd-danger, #f87171) 44%, transparent);
}
[data-theme="dark"] .btn-danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--gd-danger, #f87171) 18%, transparent);
  border-color: color-mix(in srgb, var(--gd-danger, #f87171) 72%, transparent);
  color: #fff;
}

/* --- Schedule / task tier badges: glass-badge system --------------------- */
[data-theme="dark"] .badge-active {
  background: color-mix(in srgb, var(--gd-success, #86efac) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--gd-success, #86efac) 28%, transparent);
  color: var(--gd-success, #86efac);
}
[data-theme="dark"] .badge-paused {
  background: color-mix(in srgb, var(--gd-warning, #fbbf24) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--gd-warning, #fbbf24) 28%, transparent);
  color: var(--gd-warning, #fbbf24);
}
[data-theme="dark"] .badge-heartbeat {
  background: color-mix(in srgb, var(--gd-danger, #f87171) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--gd-danger, #f87171) 28%, transparent);
  color: var(--gd-danger, #f87171);
}

/* --- Memory tier badges (hot/warm/cold/shared) ---------------------------- */
[data-theme="dark"] .badge-hot {
  background: color-mix(in srgb, var(--gd-danger, #f87171) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--gd-danger, #f87171) 28%, transparent);
  color: var(--gd-danger, #f87171);
}
[data-theme="dark"] .badge-warm {
  background: color-mix(in srgb, var(--gd-warning, #fbbf24) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--gd-warning, #fbbf24) 28%, transparent);
  color: var(--gd-warning, #fbbf24);
}
[data-theme="dark"] .badge-cold {
  background: color-mix(in srgb, var(--gd-accent, #67e8f9) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--gd-accent, #67e8f9) 26%, transparent);
  color: var(--gd-accent, #67e8f9);
}
[data-theme="dark"] .badge-shared {
  background: color-mix(in srgb, var(--gd-accent-2, #8b5cf6) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--gd-accent-2, #8b5cf6) 28%, transparent);
  color: color-mix(in srgb, var(--gd-accent-2, #8b5cf6) 78%, #f4f8ff 22%);
}

/* --- Semantic badge variants: glass edition (success/warning/danger/info) - */
[data-theme="dark"] .badge-success {
  background: color-mix(in srgb, var(--gd-success, #86efac) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--gd-success, #86efac) 28%, transparent);
  color: var(--gd-success, #86efac);
}
[data-theme="dark"] .badge-warning {
  background: color-mix(in srgb, var(--gd-warning, #fbbf24) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--gd-warning, #fbbf24) 28%, transparent);
  color: var(--gd-warning, #fbbf24);
}
[data-theme="dark"] .badge-danger {
  background: color-mix(in srgb, var(--gd-danger, #f87171) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--gd-danger, #f87171) 28%, transparent);
  color: var(--gd-danger, #f87171);
}
[data-theme="dark"] .badge-info {
  background: color-mix(in srgb, var(--gd-accent-blue, #60a5fa) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--gd-accent-blue, #60a5fa) 26%, transparent);
  color: var(--gd-accent-blue, #60a5fa);
}
[data-theme="dark"] .badge-neutral {
  background: var(--gd-surface-soft, rgba(255, 255, 255, 0.045));
  border: 1px solid var(--gd-border, rgba(184, 211, 255, 0.16));
  color: var(--gd-text-muted, #8fa1b8);
}
/* === end G4 button + badge palette === */

/* === P7: Docs page glassy-dark redesign =====================================
   Goal: lift the Dokumentáció page from flat dark panels to the glassy-dark
   command surface. Both the nav rail and the content viewer become glass panels
   with backdrop blur, hairline borders, layered shadows, and depth-aware hover/
   active states. Code blocks become dark terminal glass panes. Typography gains
   hierarchy through color. Dark theme only — light theme keeps the base skin. */

/* --- Panel shells: glass blur + depth ------------------------------------- */
[data-theme="dark"] #docsPage .docs-list {
  background: var(--gd-glass-bg, linear-gradient(180deg, rgba(17,28,48,.78), rgba(10,18,31,.58)));
  -webkit-backdrop-filter: blur(var(--gd-glass-blur, 22px)) saturate(140%);
  backdrop-filter: blur(var(--gd-glass-blur, 22px)) saturate(140%);
  border: 1px solid var(--gd-border, rgba(184,211,255,.16));
  box-shadow: var(--gd-shadow-panel, 0 22px 70px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.10));
  border-radius: var(--gd-radius-lg, 24px);
}

[data-theme="dark"] #docsPage .docs-content {
  background: var(--gd-glass-bg, linear-gradient(180deg, rgba(17,28,48,.78), rgba(10,18,31,.58)));
  -webkit-backdrop-filter: blur(var(--gd-glass-blur, 22px)) saturate(140%);
  backdrop-filter: blur(var(--gd-glass-blur, 22px)) saturate(140%);
  border: 1px solid var(--gd-border, rgba(184,211,255,.16));
  box-shadow: var(--gd-shadow-panel, 0 22px 70px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.10));
  border-radius: var(--gd-radius-lg, 24px);
}

[data-theme="dark"] #docsPage .docs-toc {
  padding: 2px 0 2px 4px;
}

/* --- Nav rail items: glassy hover + cyan-glow active ---------------------- */
[data-theme="dark"] #docsPage .docs-list-item {
  color: var(--gd-text-2, #c6d3e3);
  border-radius: var(--gd-radius-sm, 12px);
  border-color: transparent;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.12s ease, box-shadow 0.18s ease;
}

[data-theme="dark"] #docsPage .docs-list-item:hover {
  background: var(--gd-surface-soft, rgba(255,255,255,.045));
  border-color: var(--gd-border, rgba(184,211,255,.16));
  color: var(--gd-text, #f4f8ff);
}

[data-theme="dark"] #docsPage .docs-list-item.active {
  background: linear-gradient(135deg, rgba(103,232,249,.12), rgba(96,165,250,.07));
  border-color: var(--gd-border-strong, rgba(132,189,255,.32));
  color: var(--gd-text, #f4f8ff);
  box-shadow: 0 0 18px rgba(103,232,249,.14), inset 0 1px 0 rgba(255,255,255,.10);
}

[data-theme="dark"] #docsPage .docs-list-item.active .docs-list-title {
  color: var(--gd-accent, #67e8f9);
}

[data-theme="dark"] #docsPage .docs-list-date {
  color: var(--gd-text-muted, #8fa1b8);
}

/* --- Sticky content toolbar: blurred glass bar ---------------------------- */
[data-theme="dark"] #docsPage .docs-content-toolbar {
  background: color-mix(in srgb, var(--gd-surface-strong, rgba(17,28,48,.78)) 88%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--gd-border, rgba(184,211,255,.16));
  border-radius: var(--gd-radius-lg, 24px) var(--gd-radius-lg, 24px) 0 0;
}

[data-theme="dark"] #docsPage .docs-content-title {
  color: var(--gd-text, #f4f8ff);
  font-weight: 650;
}

/* --- Right-rail TOC: accent-glow active link ------------------------------ */
[data-theme="dark"] #docsPage .docs-toc-title {
  color: var(--gd-text-muted, #8fa1b8);
}

[data-theme="dark"] #docsPage .docs-toc-nav {
  border-left-color: var(--gd-border, rgba(184,211,255,.16));
}

[data-theme="dark"] #docsPage .docs-toc-link {
  color: var(--gd-text-muted, #8fa1b8);
  border-left-color: transparent;
  transition: color 0.12s ease, border-left-color 0.12s ease;
}

[data-theme="dark"] #docsPage .docs-toc-link:hover {
  color: var(--gd-text, #f4f8ff);
  border-left-color: var(--gd-border-strong, rgba(132,189,255,.32));
}

[data-theme="dark"] #docsPage .docs-toc-link.active {
  color: var(--gd-accent, #67e8f9);
  border-left-color: var(--gd-accent, #67e8f9);
  text-shadow: 0 0 16px rgba(103,232,249,.35);
}

/* --- Markdown typography hierarchy ---------------------------------------- */
[data-theme="dark"] #docsPage .markdown-body {
  color: var(--gd-text-2, #c6d3e3);
}

[data-theme="dark"] #docsPage .markdown-body h1 {
  color: var(--gd-text, #f4f8ff);
  background: linear-gradient(110deg, var(--gd-text, #f4f8ff) 0%, var(--gd-accent-blue, #60a5fa) 120%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-theme="dark"] #docsPage .markdown-body h2 {
  color: var(--gd-text, #f4f8ff);
  border-bottom-color: var(--gd-border, rgba(184,211,255,.16));
}

[data-theme="dark"] #docsPage .markdown-body h3 {
  color: var(--gd-text, #f4f8ff);
}

[data-theme="dark"] #docsPage .markdown-body h4,
[data-theme="dark"] #docsPage .markdown-body h5,
[data-theme="dark"] #docsPage .markdown-body h6 {
  color: var(--gd-text-2, #c6d3e3);
}

[data-theme="dark"] #docsPage .markdown-body a {
  color: var(--gd-accent-blue, #60a5fa);
  text-decoration-color: rgba(96,165,250,.35);
}

[data-theme="dark"] #docsPage .markdown-body a:hover {
  color: var(--gd-accent, #67e8f9);
  text-decoration-color: rgba(103,232,249,.5);
}

/* Inline code: glass tint with cyan border */
[data-theme="dark"] #docsPage .markdown-body code {
  background: rgba(103,232,249,.07);
  border: 1px solid rgba(103,232,249,.15);
  color: var(--gd-accent, #67e8f9);
  border-radius: 5px;
}

/* Code blocks: dark terminal glass pane */
[data-theme="dark"] #docsPage .docs-code-block,
[data-theme="dark"] #docsPage .markdown-body pre {
  background: linear-gradient(180deg, rgba(3,7,18,.92) 0%, rgba(2,4,10,.86) 100%);
  border: 1px solid var(--gd-border, rgba(184,211,255,.16));
  border-radius: var(--gd-radius-sm, 12px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 4px 20px rgba(0,0,0,.4);
}

[data-theme="dark"] #docsPage .markdown-body pre code {
  background: none;
  border: none;
  color: var(--gd-text-2, #c6d3e3);
  padding: 0;
}

/* Code copy button: appear on hover with glass treatment */
[data-theme="dark"] #docsPage .docs-code-copy {
  background: var(--gd-surface, rgba(13,23,39,.66));
  border-color: var(--gd-border, rgba(184,211,255,.16));
  color: var(--gd-text-muted, #8fa1b8);
}

[data-theme="dark"] #docsPage .docs-code-copy:hover {
  color: var(--gd-accent, #67e8f9);
  border-color: var(--gd-border-strong, rgba(132,189,255,.32));
  box-shadow: 0 0 12px rgba(103,232,249,.18);
}

/* Tables: glass hairline grid */
[data-theme="dark"] #docsPage .markdown-body th {
  background: rgba(103,232,249,.06);
  color: var(--gd-text, #f4f8ff);
  border-color: var(--gd-border, rgba(184,211,255,.16));
  font-weight: 650;
}

[data-theme="dark"] #docsPage .markdown-body td {
  border-color: var(--gd-border, rgba(184,211,255,.16));
}

[data-theme="dark"] #docsPage .markdown-body tr:hover td {
  background: var(--gd-surface-soft, rgba(255,255,255,.045));
}

/* Blockquotes: accent-left with glass tint */
[data-theme="dark"] #docsPage .markdown-body blockquote {
  background: rgba(96,165,250,.06);
  border-left-color: var(--gd-accent-blue, #60a5fa);
  color: var(--gd-text-2, #c6d3e3);
  border-radius: 0 var(--gd-radius-xs, 8px) var(--gd-radius-xs, 8px) 0;
}

[data-theme="dark"] #docsPage .markdown-body hr {
  border-top-color: var(--gd-border, rgba(184,211,255,.16));
}

/* Empty / select-hint state */
[data-theme="dark"] #docsPage .docs-empty {
  color: var(--gd-text-muted, #8fa1b8);
}

[data-theme="dark"] #docsPage .docs-empty strong {
  color: var(--gd-text-2, #c6d3e3);
}
/* === end P7 docs glassy-dark redesign === */

/* === Fleet Performance Module (.fp-*) === */
.fp-module {
  margin-top: 28px;
}
.fp-shell-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.fp-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.fp-h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}
.fp-period {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft, rgba(255,255,255,.04));
}
.fp-period-btn {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color .15s, background .15s;
}
.fp-period-btn:hover { color: var(--text); background: var(--surface-soft, rgba(255,255,255,.06)); }
.fp-period-btn.fp-period-active {
  color: #04111d;
  background: linear-gradient(135deg, var(--accent, #67e8f9), #60a5fa);
  box-shadow: 0 0 20px rgba(103,232,249,.2);
}
[data-theme="dark"] .fp-period-btn.fp-period-active { color: #04111d; }

.fp-period-wrap { position: relative; }
.fp-range {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  max-width: min(360px, calc(100vw - 32px));
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface, rgba(17,28,48,.92));
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 40px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06);
}
.fp-range-head {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.fp-range-row { display: flex; gap: 10px; }
.fp-range-field { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.fp-range-field > span { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.fp-range-input { width: 100%; min-height: 40px; }
.fp-range-err { margin: 10px 0 0; font-size: 12px; color: var(--danger, #dc6b5f); }
.fp-range-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.fp-range-cancel, .fp-range-apply {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
}
.fp-range-cancel { background: transparent; color: var(--text-muted); }
.fp-range-cancel:hover { color: var(--text); background: var(--surface-soft, rgba(255,255,255,.06)); }
.fp-range-apply {
  border-color: transparent;
  color: #04111d;
  background: linear-gradient(135deg, var(--accent, #67e8f9), #60a5fa);
}
.fp-range-apply:hover { filter: brightness(1.05); }

.fp-card {
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface, rgba(17,28,48,.7));
  box-shadow: 0 8px 32px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.07);
  overflow: hidden;
}
.fp-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.fp-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.fp-card-sub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted);
}
.fp-confidence {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(251,191,36,.28);
  color: #fde68a;
  background: rgba(251,191,36,.07);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.fp-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  padding: 14px 22px;
}
.fp-kpi {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft, rgba(255,255,255,.04));
  padding: 12px 14px;
  min-width: 0;
}
.fp-kpi span {
  display: block;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: 10px;
  font-weight: 700;
}
.fp-kpi strong {
  display: block;
  margin-top: 8px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
}
.fp-kpi small {
  display: block;
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.3;
}
.fp-kpi-skeleton strong { opacity: .3; }
.fp-content {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  gap: 14px;
  padding: 0 22px 14px;
}
.fp-panel {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(0,0,0,.2);
  padding: 16px;
  min-width: 0;
}
.fp-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}
.fp-panel-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.fp-panel-meta {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-muted);
}
.fp-chart {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 200px;
}
.fp-chart-plot {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  padding: 12px 8px 6px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(103,232,249,.05), rgba(255,255,255,.02));
  overflow: hidden;
}
.fp-bar {
  flex: 1 1 0;
  min-width: 4px;
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, var(--accent, #67e8f9), rgba(96,165,250,.4));
  opacity: .85;
  transition: opacity .15s;
  cursor: default;
}
.fp-bar:hover { opacity: 1; }
.fp-bar-empty {
  flex: 1 1 0;
  min-width: 4px;
  border-radius: 4px 4px 2px 2px;
  background: rgba(255,255,255,.06);
}
.fp-chart-axis {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-muted);
  padding: 0 8px;
}
.fp-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(103,232,249,.09);
  color: var(--accent, #67e8f9);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.fp-chip-sm { font-size: 10px; padding: 2px 7px; }
.fp-leader-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.fp-leader {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-row, rgba(8,14,24,.5));
}
.fp-leader-rank {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(103,232,249,.1);
  color: var(--accent, #67e8f9);
  font-size: 11px;
  font-weight: 800;
}
.fp-leader-rank.fp-rank-1 { background: rgba(251,191,36,.15); color: #fbbf24; }
.fp-leader-rank.fp-rank-2 { background: rgba(184,211,255,.12); color: #c6d3e3; }
.fp-leader-rank.fp-rank-3 { background: rgba(139,92,246,.15); color: #c4b5fd; }
.fp-leader-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fp-leader-sub {
  margin-top: 2px;
  font-size: 10px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fp-leader-score {
  text-align: right;
  font-size: 12px;
  color: var(--text-muted);
}
.fp-leader-score b { display: block; color: var(--text); font-size: 14px; font-weight: 700; }
.fp-leader-empty {
  font-size: 12px;
  color: var(--text-muted);
  padding: 8px 0;
}
.fp-table-wrap {
  margin: 0 22px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.fp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.fp-thead-row th {
  padding: 10px 12px;
  text-align: left;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.fp-table tbody tr {
  border-bottom: 1px solid rgba(184,211,255,.07);
}
.fp-table tbody tr:last-child { border-bottom: 0; }
.fp-table tbody td {
  padding: 10px 12px;
  color: var(--text);
  vertical-align: middle;
}
.fp-agent-name { font-weight: 700; font-size: 12px; color: var(--text); }
.fp-agent-sub { font-size: 10px; color: var(--text-muted); margin-top: 1px; }
.fp-status-active { color: #86efac; font-weight: 700; }
.fp-status-working { color: var(--accent, #67e8f9); font-weight: 700; }
.fp-status-idle { color: var(--text-muted); }
.fp-table-empty { text-align: center; color: var(--text-muted); padding: 20px; }
.fp-footer-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 22px 18px;
  font-size: 11px;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}

/* Responsive */
@media (max-width: 1024px) {
  .fp-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fp-content { grid-template-columns: 1fr; }
  .fp-chart { height: 160px; }
}
@media (max-width: 640px) {
  .fp-shell-head { flex-direction: column; align-items: stretch; }
  .fp-period { border-radius: 14px; flex-wrap: wrap; }
  /* Custom-range picker becomes a bottom sheet on small screens */
  .fp-range {
    position: fixed;
    inset: auto 0 0 0;
    top: auto;
    width: 100%;
    max-width: 100%;
    border-radius: 18px 18px 0 0;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 120;
  }
  .fp-range-cancel, .fp-range-apply { min-height: 44px; flex: 1; }
  .fp-card-top { flex-direction: column; }
  .fp-kpis { grid-template-columns: 1fr 1fr; gap: 6px; padding: 12px 14px; }
  .fp-kpi:nth-child(n+5) { display: none; }
  .fp-content { padding: 0 14px 14px; }
  .fp-table-wrap { margin: 0 14px 14px; }
  /* Mobile: turn the wide table into labelled cards (no unlabelled stacked values) */
  .fp-table thead { display: none; }
  .fp-table tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
    padding: 12px 14px;
    margin-bottom: 8px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-soft, rgba(255,255,255,.045));
  }
  .fp-table tbody tr:last-child { margin-bottom: 0; }
  .fp-table tbody td { display: block; padding: 0; border: 0; }
  .fp-table tbody td::before {
    content: attr(data-label);
    display: block;
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    margin-bottom: 2px;
  }
  .fp-table tbody td.fp-td-agent { grid-column: 1 / -1; }
  .fp-table tbody td.fp-td-agent::before { display: none; }
  .fp-footer-note { padding: 12px 14px 16px; flex-direction: column; }
}
/* === end Fleet Performance Module === */

/* === Agent Ops Reliability (aor-) ===
   Layout + scoped overrides only: every colour/radius/spacing value resolves to
   an existing token. Deliberately absent: any dark-theme rule. `.aor-action-queue`
   and `.aor-drilldown` carry `.panel`, which is already glassed in dark; the lane
   cards inherit `.kpi-card`, which Token Monitor keeps deliberately FLAT in dark.
   Authoring dark rules here would either double-stack the glass or make the lanes
   a visibly different component family from the TM KPIs they sit beside. */

.aor-status-strip { margin-bottom: var(--space-4); }

.aor-lane-grid {
  display: grid;
  /* Same rule as .tu-engine-summary: yields 5-up >=1100px and a natural 3+2 wrap
     below it, so no explicit desktop breakpoint is needed. */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
/* A failed fetch must not paint five zeroed lanes that read as "all clear". */
.aor-lane-grid:empty { display: none; }

.aor-lane { min-width: 0; }
.aor-lane[role="button"] { cursor: pointer; text-align: left; width: 100%; }
.aor-lane[role="button"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.aor-lane-value-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.aor-lane .kpi-value { font-size: 20px; overflow-wrap: anywhere; }
/* Long evidence paths must never set the card's width. */
.aor-lane .kpi-sub {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.aor-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.aor-filter-bar {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.aor-filter-control { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.aor-filter-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
  color: var(--text-muted);
}

.aor-action-queue { margin-bottom: var(--space-4); }
.aor-action-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
/* Filled --accent needs --accent-on: white on the dark accent is 2.54:1 (AA fail). */
.aor-action-filter.is-active {
  background: var(--accent);
  color: var(--accent-on);
  border-color: var(--accent);
}
.aor-action-item { border-left: 3px solid var(--border); }
.aor-action-item.is-blocked { border-left-color: var(--color-danger); }
.aor-action-item.is-attention { border-left-color: var(--color-warning); }
.aor-action-item.is-unknown { border-left-color: var(--color-info); }
.aor-action-detail {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
  overflow-wrap: anywhere;
}
/* .data-list-item-head is a nowrap flex row with justify-content: space-between.
   With title + state badge + confidence chip it clips the trailing chip at 390px
   ("hig..."), which a page-level scrollWidth check cannot see because the clip
   happens inside the row. Scoped to aor- so the shared primitive is untouched. */
.aor-action-item .data-list-item-head {
  flex-wrap: wrap;
  row-gap: 6px;
  justify-content: flex-start;
}
.aor-action-item .data-list-item-title { flex: 1 1 auto; min-width: 0; }
.aor-action-item .data-list-item-head > .badge,
.aor-action-item .data-list-item-head > .chip { flex: 0 0 auto; }

.aor-tab-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.aor-kv {
  display: grid;
  grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
  gap: 6px var(--space-3);
  font-size: 13px;
}
.aor-kv dt { color: var(--text-muted); min-width: 0; }
.aor-kv dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.aor-check-list { display: flex; flex-direction: column; gap: 6px; }
.aor-check-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
  font-size: 13px;
}
.aor-check-detail { color: var(--text-secondary); overflow-wrap: anywhere; min-width: 0; }
.aor-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.aor-queue-cards { display: none; }

@media (max-width: 768px) {
  .aor-filter-control,
  .aor-filter-bar > .page-header-actions { width: 100%; }
  .aor-filter-control select,
  .aor-filter-bar button { min-height: var(--control-min); }
  .aor-lane-grid { grid-template-columns: 1fr 1fr; }
  .aor-tab-nav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Width-gated, not (pointer: coarse)-gated: a headless mobile viewport reports a
     fine pointer, so a coarse-only rule fails the QA touch-target gate. */
  .aor-tab-nav .tab-btn,
  .aor-action-filter { min-height: var(--control-min); }
  .aor-queue-table-wrap { display: none; }
  .aor-queue-cards { display: block; }
  .aor-kv { grid-template-columns: 1fr; gap: 2px var(--space-3); }
  .aor-kv dd { margin-bottom: 8px; }
}

@media (max-width: 600px) {
  .aor-lane-grid { grid-template-columns: 1fr; }
}
/* === end Agent Ops Reliability === */

/* === Kanban dispatch/dependency state visibility ===
   Compact operator-visible dispatch state (auto-promotion reliability spec §5).
   A card-level chip in the footer + a modal event trail. Layout-safe: the chip
   lives in the existing flex-wrap footer, the trail is a plain vertical list. */
.kanban-dispatch-state {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--dsp-border, var(--border));
  background: var(--dsp-bg, transparent);
  color: var(--dsp-fg, var(--text-secondary));
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex: 0 0 auto;
}
.kanban-dispatch-state-ready {
  --dsp-fg: var(--accent);
  --dsp-bg: color-mix(in oklch, var(--accent) 12%, transparent);
  --dsp-border: color-mix(in oklch, var(--accent) 30%, transparent);
}
.kanban-dispatch-state-queued {
  --dsp-fg: var(--warning);
  --dsp-bg: color-mix(in oklch, var(--warning) 13%, transparent);
  --dsp-border: color-mix(in oklch, var(--warning) 32%, transparent);
}
.kanban-dispatch-state-dispatching {
  --dsp-fg: var(--success);
  --dsp-bg: color-mix(in oklch, var(--success) 14%, transparent);
  --dsp-border: color-mix(in oklch, var(--success) 34%, transparent);
}
.kanban-dispatch-state-blocked {
  --dsp-fg: var(--danger);
  --dsp-bg: color-mix(in oklch, var(--danger) 12%, transparent);
  --dsp-border: color-mix(in oklch, var(--danger) 32%, transparent);
}
.kanban-dispatch-state-done {
  --dsp-fg: var(--text-muted);
  --dsp-bg: color-mix(in oklch, var(--text-muted) 10%, transparent);
  --dsp-border: color-mix(in oklch, var(--text-muted) 24%, transparent);
}
.kanban-dispatch-state-failed {
  --dsp-fg: var(--danger);
  --dsp-bg: color-mix(in oklch, var(--danger) 12%, transparent);
  --dsp-border: color-mix(in oklch, var(--danger) 32%, transparent);
}

/* Modal dispatch-event trail */
.card-dispatch-trail-section h4 {
  margin: 0 0 8px;
}
.card-dispatch-trail {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.card-dispatch-trail .cdt-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-subtle);
  font-size: 12px;
  line-height: 1.35;
}
.card-dispatch-trail .cdt-row-state {
  background: transparent;
  border-style: dashed;
}
.card-dispatch-trail .cdt-icon {
  flex: 0 0 auto;
  width: 16px;
  text-align: center;
  color: var(--text-muted);
}
.card-dispatch-trail .cdt-label {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  overflow-wrap: anywhere;
}
.card-dispatch-trail .cdt-kind {
  font-weight: 700;
  color: var(--text-secondary);
}
.card-dispatch-trail .cdt-detail {
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.card-dispatch-trail .cdt-time {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.card-dispatch-trail .cdt-row-rework .cdt-icon,
.card-dispatch-trail .cdt-row-rework .cdt-kind { color: var(--danger); }
.card-dispatch-trail .cdt-row-result_pass .cdt-icon,
.card-dispatch-trail .cdt-row-result_pass .cdt-kind,
.card-dispatch-trail .cdt-row-approval .cdt-icon,
.card-dispatch-trail .cdt-row-approval .cdt-kind { color: var(--success); }
.card-dispatch-trail .cdt-row-promotion .cdt-icon,
.card-dispatch-trail .cdt-row-promotion .cdt-kind,
.card-dispatch-trail .cdt-row-dispatch .cdt-icon,
.card-dispatch-trail .cdt-row-dispatch .cdt-kind { color: var(--accent); }
.card-dispatch-trail .cdt-empty {
  color: var(--text-muted);
  font-size: 12px;
  padding: 4px 2px;
}
@media (max-width: 560px) {
  .card-dispatch-trail .cdt-row { flex-wrap: wrap; }
  .card-dispatch-trail .cdt-time { width: 100%; }
}
/* === end Kanban dispatch/dependency state visibility === */

/* === Intake proof strip (Discord DM -> Kanban intake reliability canary) ===
   Read-only operator proof block inside the Kanban parent card-detail modal.
   New classes are structural only; every color/surface/border/text value
   resolves to an existing --detail-* or badge-* token (design contract
   eee3af69 / concept 42038d60). No hard-coded color, no page-level token, no
   new scroll container -- light / dark / theme-black stay correct for free. */
.intake-proof-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.intake-proof-header h4 { margin: 0; }
.intake-proof-toggle {
  display: none; /* desktop/tablet >=761px: block is always expanded */
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--detail-border);
  border-radius: 8px;
  color: var(--detail-text);
  background: var(--detail-panel-2);
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}
.intake-proof-toggle:focus-visible {
  outline: 2px solid var(--detail-accent);
  outline-offset: 2px;
}
.intake-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.intake-proof-cell { min-width: 0; }
/* align-self keeps the pill hugging its label instead of stretching to the
   full flex-column width of the cell. */
.intake-proof-state { margin-top: 2px; align-self: flex-start; }
.intake-proof-gate { grid-column: 1 / -1; }
.intake-proof-gate-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}
.intake-proof-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid var(--detail-border);
  border-radius: 8px;
  color: var(--detail-muted);
  background: color-mix(in srgb, var(--detail-panel-2) 88%, transparent);
  font-size: 12px;
  line-height: 1.2;
}
.intake-proof-drilldown {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--detail-border);
  color: var(--detail-muted);
  font-size: 12px;
}
.intake-proof-drilldown summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--detail-text);
  font-weight: 750;
  cursor: pointer;
}
.intake-proof-drilldown summary:focus-visible {
  outline: 2px solid var(--detail-accent);
  outline-offset: 2px;
}
.intake-proof-drilldown pre {
  margin: 6px 0 0;
  max-height: 30dvh;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--detail-muted);
  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 11.5px;
  line-height: 1.5;
}
@media (max-width: 760px) {
  .intake-proof-grid { grid-template-columns: 1fr; }
  .intake-proof .card-detail-chip-id { grid-column: auto; }
  .intake-proof-toggle { display: inline-flex; }
  .intake-proof.is-collapsed .intake-proof-body { display: none; }
}
/* === end Intake proof strip === */

/* === Incident Replay & Prevention (ir-) ===
   Additive layout/state glue only, per design-system contract #ef3f2ca7 and
   owner-approved concept #21e59ac0. Every value below is an existing
   :root token; no new hex/spacing/radius is introduced. Reused primitives:
   .status-panel, .stat-card, .data-list, .data-table, .chip, .badge-*,
   .empty-state/.loading-state/.error-state/.skeleton, .connector-scope-header.collapsible,
   the .tu-workload-table/.tu-workload-cards responsive toggle mechanism. */

.ir-header .ir-search-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-3);
}
.ir-header .ir-search-row input[type="search"] {
  flex: 1 1 240px;
  min-width: 0;
  min-height: var(--control-min);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text);
  font-size: var(--font-size-body);
}
.ir-header .ir-search-row input[type="search"]:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 1px;
}
.ir-recent-chips {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.ir-recent-chips .chip {
  cursor: pointer;
  min-height: var(--control-min);
}

.ir-status-strip { margin-bottom: var(--space-4); }
.ir-status-strip[hidden] { display: none; }

.ir-verdict-strip { margin-bottom: var(--space-4); }
.ir-verdict-strip[hidden] { display: none; }
.ir-verdict-tile { transition: box-shadow var(--transition); }
.ir-verdict-tile:hover { box-shadow: var(--shadow-md); }
.ir-verdict-tile .stat-value { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* Two states beyond the shared badge vocabulary — dashed border signals
   "not confirmed"; the danger-toned repeated badge must read as more urgent
   than a plain FAIL chip at a glance (design-system contract §4). */
.ir-badge-inferred {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--badge-info-text);
  background: var(--info-soft);
}
.ir-badge-repeated {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid var(--danger);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: 800;
  color: var(--badge-danger-text);
  background: var(--danger-soft);
}

.ir-workspace {
  display: grid;
  grid-template-columns: minmax(260px, 300px) minmax(360px, 1fr) minmax(300px, 340px);
  gap: var(--space-4);
  align-items: start;
  margin-bottom: var(--space-4);
}
.ir-workspace[hidden] { display: none; }

.ir-timeline, .ir-event-detail, .ir-diagnosis {
  min-width: 0;
}

.ir-replay-controls {
  position: sticky;
  top: var(--header-offset, 0);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-2);
  margin-bottom: var(--space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  background: var(--color-bg-surface);
}
.ir-replay-controls .btn-icon {
  min-width: var(--control-min);
  min-height: var(--control-min);
}
.ir-step-counter {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  white-space: nowrap;
}
.ir-source-filters {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.ir-source-filters .chip {
  cursor: pointer;
  min-height: var(--control-min);
}
.ir-source-filters .chip.is-active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.ir-live-region {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Bounded height + the dashboard's existing styled scrollbar tokens — never a
   bare unstyled overflow box, and never a second nested scroll container
   (that breaks position:sticky on .ir-replay-controls above it). */
.ir-timeline-list {
  max-height: 70vh;
  overflow-y: auto;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
.ir-timeline-list::-webkit-scrollbar { width: 8px; }
.ir-timeline-list::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-pill); }
.ir-timeline-list::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

.ir-timeline-item { cursor: pointer; }
.ir-timeline-item:hover { border-color: var(--color-border-strong); }
.ir-timeline-item[aria-current="step"] {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.ir-timeline-item .data-list-item-head { align-items: center; }
.ir-timeline-item-linkage {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.ir-event-detail .status-panel { margin-bottom: var(--space-3); }
.ir-event-detail .data-list-item code,
.ir-diagnosis .data-list-item code {
  display: inline-block;
  margin-top: 2px;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  background: var(--color-bg-muted);
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: var(--font-size-sm);
  overflow-wrap: anywhere;
}

.ir-diagnosis .connector-scope-section { margin-bottom: var(--space-3); }
.ir-diagnosis .connector-scope-header.collapsible {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--control-min);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  background: var(--color-bg-surface);
  color: var(--text);
  font-weight: 700;
  font-size: var(--font-size-body);
  cursor: pointer;
  text-align: left;
}
.ir-diagnosis .connector-scope-header.collapsible:hover { color: var(--accent); }
.ir-diagnosis .connector-scope-header.collapsible:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}
.ir-diagnosis .data-list { margin-top: var(--space-2); }
.ir-diagnosis .data-list[hidden] { display: none; }

/* Evidence ledger / related-card tables reuse the exact table<->card
   responsive toggle already shipped for .tu-workload-table/.tu-workload-cards
   (web/style.css tu-workload rules): CSS display swap only, no JS branch. */
.ir-evidence-cards { display: none; }
.ir-evidence-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
}
.ir-evidence-card-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}
.ir-evidence-card code, .ir-related-cards code {
  overflow-wrap: anywhere;
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: var(--font-size-sm);
}

/* Tablet (768-1279px): two columns, event detail + diagnosis stack in the
   second column; verdict strip wraps via .dashboard-grid auto-fit already. */
@media (max-width: 1279px) {
  .ir-workspace {
    grid-template-columns: minmax(240px, 1fr) minmax(0, 1.6fr);
  }
  .ir-event-detail, .ir-diagnosis {
    grid-column: 2;
  }
}

/* Mobile (<=760px): single column, sticky controls, accordion diagnosis,
   table -> card toggle, never a horizontal timeline/table. */
@media (max-width: 760px) {
  .ir-workspace {
    grid-template-columns: minmax(0, 1fr);
  }
  .ir-timeline, .ir-event-detail, .ir-diagnosis {
    grid-column: 1;
  }
  /* Long timelines must stay bounded/windowed on mobile too (owner-approved
     concept #21e59ac0 §"long timelines need windowing/pagination"); the
     shared scrollbar box from .ir-timeline-list above still applies here,
     just at a viewport-appropriate height. */
  .ir-timeline-list { max-height: 60vh; }
  .data-table.ir-evidence-table, .data-table.ir-related-table { display: none; }
  .ir-evidence-cards { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .ir-verdict-tile, .ir-diagnosis .connector-scope-header.collapsible {
    transition: none;
  }
  /* Scoped override, not a change to the shared .skeleton rule (non-goal):
     swap the shimmer for a static muted block on this page only. */
  #incidentsPage .skeleton {
    animation: none;
    background: var(--color-bg-muted);
  }
}
/* === end Incident Replay & Prevention === */