  :root {
    /* W-mpmwxkrw000872ec — global dashboard font-size scale. Driven by
       [data-font-size] on <html>. 'small' is the historic default (1.0) so
       existing users see no change. Body-level CSS `zoom` is the cheapest
       way to scale every px/em/rem rule across the SPA (typography tokens
       below, slim.html, and the many inline font-size Npx styles) without
       rewriting every rule. Scales modals, drawers, and fixed-position
       elements because they all live inside <body>. */
    --minions-font-scale: 1;
    --bg: #0d1117; --surface: #161b22; --surface2: #21262d; --border: #30363d;
    --text: #e6edf3; --muted: #8b949e; --green: #3fb950; --yellow: #d29922;
    --blue: #58a6ff; --purple: #bc8cff; --red: #f85149; --orange: #e3b341;

    /* Spacing scale */
    --space-1: 2px; --space-2: 4px; --space-3: 6px; --space-4: 8px;
    --space-5: 10px; --space-6: 12px; --space-7: 16px; --space-8: 20px; --space-9: 24px;

    /* Typography — size primitives. Source of truth for the
       ~700 callsites migrated in PR #66; do NOT introduce new raw `Npx`
       font-sizes outside this block. Tripwire:
       test/unit/dashboard-font-size-tokens.test.js

       W-mq71mqtx00060fa9 — every primitive is scaled by --minions-text-scale
       so the whole dashboard's real text size can be nudged from one knob
       (currently +5%, a slight bump). This is an actual font-size change,
       not a zoom. The base px values below stay the source of truth and
       MUST match dashboard/slim/styles.css verbatim — slim multiplies by
       its own (un-scaled) factor of 1, so the slim UI is excluded from the
       bump by construction. */
    --minions-text-scale: 1.05;
    --text-xs: calc(10px * var(--minions-text-scale)); --text-sm: calc(11px * var(--minions-text-scale)); --text-base: calc(12px * var(--minions-text-scale));
    --text-md: calc(13px * var(--minions-text-scale)); --text-lg: calc(14px * var(--minions-text-scale)); --text-xl: calc(16px * var(--minions-text-scale)); --text-2xl: calc(18px * var(--minions-text-scale));
    --text-stat: calc(22px * var(--minions-text-scale)); --text-stat-lg: calc(28px * var(--minions-text-scale)); --text-display: calc(32px * var(--minions-text-scale));

    /* Typography — role aliases (W-mq1c8og40003a7cf). Prefer these for
       NEW code: the role names survive a size-scale redesign while the
       primitives do not. Existing callsites that still reference the
       size primitives directly are kept (they're correct by
       construction — every role alias is just an indirection). See
       dashboard/docs/typography.md for the role → primitive map and
       intended use. */
    --text-role-display:    var(--text-display);  /* 32px — hero / page title */
    --text-heading:         var(--text-2xl);      /* 18px — section + modal headers */
    --text-subheading:      var(--text-xl);       /* 16px — secondary headers, card titles */
    --text-body:            var(--text-lg);       /* 14px — default body text */
    --text-meta:            var(--text-md);       /* 13px — captions, timestamps, secondary metadata */
    --text-caption:         var(--text-base);     /* 12px — small labels, table cells */
    --text-micro:           var(--text-sm);       /* 11px — chip / tag pill labels */
    --text-code:            0.9em;                /* inline code; relative so it scales with the surrounding text */

    /* Border radius */
    --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 10px; --radius-full: 50%;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.2);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.3);
    --shadow-lg: 0 4px 16px rgba(0,0,0,0.4);

    /* Transitions */
    --transition-fast: 0.15s; --transition-base: 0.2s; --transition-slow: 0.3s;
  }
  /* W-mpmwxkrw000872ec — font-size scale overrides. Values picked so the
     largest tier (~1.30) tops out near 18px effective for the default 14px
     body without overflowing chips/badges/tables at /, /pull-requests, /qa,
     /settings (spot-checked). */
  :root[data-font-size="small"]  { --minions-font-scale: 1; }
  :root[data-font-size="medium"] { --minions-font-scale: 1.08; }
  :root[data-font-size="large"]  { --minions-font-scale: 1.18; }
  :root[data-font-size="xlarge"] { --minions-font-scale: 1.30; }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { height: 100%; margin: 0; overflow: hidden; }
  body { background: var(--bg); color: var(--text); font-family: 'Segoe UI', system-ui, sans-serif; font-size: var(--text-xl); display: flex; flex-direction: column; zoom: var(--minions-font-scale, 1); }

  /* Typography utility classes (W-mq1c8og40003a7cf).
     One class per role token. Apply directly on any element
     (`<span class="text-meta">`) so JS/HTML callsites don't need to
     hand-roll inline `style="font-size:var(--text-*)"`. The classes
     ONLY set font-size — weight, color, line-height stay with the
     caller. Mirrors the `.btn-add` consolidation in spirit. */
  .text-display    { font-size: var(--text-role-display); }
  .text-heading    { font-size: var(--text-heading); }
  .text-subheading { font-size: var(--text-subheading); }
  .text-body       { font-size: var(--text-body); }
  .text-meta       { font-size: var(--text-meta); }
  .text-caption    { font-size: var(--text-caption); }
  .text-micro      { font-size: var(--text-micro); }
  .text-code       { font-size: var(--text-code); }

  header {
    background: var(--surface); border-bottom: 1px solid var(--border);
    padding: var(--space-6) 14px; display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 100;
  }
  header h1 { font-size: var(--text-2xl); font-weight: 600; color: var(--blue); letter-spacing: 0.5px; }
  header h1 span { color: var(--muted); font-weight: 400; font-size: var(--text-lg); margin-left: var(--space-4); }
  .pulse { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--green); display: inline-block; margin-right: var(--space-3); animation: pulse 2s infinite; }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
  .timestamp { color: var(--muted); font-size: var(--text-md); font-variant-numeric: tabular-nums; }

  .layout { display: none; } /* Replaced by page-layout */
  section { padding: var(--space-8) var(--space-9); border-bottom: 1px solid var(--border); overflow: visible; min-width: 0; }

  /* Sidebar navigation */
  .page-layout { display: flex; flex: 1; min-height: 0; overflow: hidden; }
  .sidebar { width: 150px; min-width: 150px; background: var(--surface); border-right: 1px solid var(--border); padding: var(--space-4) 0; overflow-y: auto; position: sticky; top: 0; }
  .sidebar-link { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; color: var(--muted); text-decoration: none; font-size: var(--text-sm); border-left: 3px solid transparent; transition: all var(--transition-fast); cursor: pointer; position: relative; }
  .sidebar-link .notif-badge.done { top: 50%; right: 6px; transform: translateY(-50%); width: 6px; height: 6px; }
  .sidebar-link:hover { color: var(--text); background: var(--surface2); }
  .sidebar-link.active { color: var(--blue); border-left-color: var(--blue); background: var(--surface2); font-weight: 600; }
  .sidebar-count { font-size: var(--text-xs); color: var(--muted); background: var(--surface2); padding: 1px 5px; border-radius: 8px; min-width: 16px; text-align: center; }
  .page-content { flex: 1; overflow-y: auto; min-width: 0; }
  .page { display: none; }
  .page.active { display: block; }
  section h2 { font-size: var(--text-base); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 14px; display: flex; align-items: center; gap: var(--space-4); }
  section h2 .count { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--space-1) 7px; font-size: var(--text-base); color: var(--text); }

  .agents { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
  .agent-card {
    background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-7); transition: all var(--transition-slow); cursor: pointer;
  }
  .agent-card:hover { border-color: var(--blue); transform: translateY(-1px); box-shadow: var(--shadow-md); }
  .agent-card.working { border-color: var(--yellow); }
  .agent-card.done { border-color: var(--green); }
  .agent-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
  .agent-name { font-weight: 600; font-size: var(--text-xl); }
  .agent-role { font-size: var(--text-base); color: var(--muted); margin-bottom: var(--space-4); }
  .status-badge { font-size: var(--text-sm); font-weight: 600; padding: var(--space-1) var(--space-4); border-radius: var(--radius-xl); text-transform: uppercase; letter-spacing: 0.5px; }
  .status-badge.idle { background: var(--surface); color: var(--muted); border: 1px solid var(--border); }
  .status-badge.working { background: rgba(210,153,34,0.15); color: var(--yellow); border: 1px solid var(--yellow); animation: pulse 1.5s infinite; }
  .status-badge.done { background: rgba(63,185,80,0.15); color: var(--green); border: 1px solid var(--green); }
  .agent-action { font-size: var(--text-base); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .modal-qa { border-top: 1px solid var(--border); padding: var(--space-5) var(--space-8); }
  .modal-qa-thread { max-height: 200px; overflow-y: auto; margin-bottom: var(--space-4); }
  .modal-qa-q { font-size: var(--text-md); color: var(--blue); margin-bottom: var(--space-2); font-weight: 600; }
  .modal-qa-q .selection-ref { font-weight: 400; color: var(--muted); font-style: italic; display: block; font-size: var(--text-sm); margin-top: var(--space-1); }
  .modal-qa-a { font-size: var(--text-md); color: var(--text); margin-bottom: var(--space-6); padding: var(--space-4) var(--space-5); background: var(--surface2); border-radius: var(--radius-md); border-left: 2px solid var(--blue); white-space: pre-wrap; word-break: break-word; line-height: 1.5; position: relative; }
  .llm-copy-btn { position:absolute;bottom:4px;right:4px;background:none;border:none;color:var(--muted);cursor:pointer;font-size:var(--text-lg);padding:2px 4px;line-height:1 }
  .llm-copy-btn:hover { color:var(--text) }
  .modal-qa-loading { font-size: var(--text-base); color: var(--muted); padding: var(--space-4) var(--space-5); display: flex; align-items: center; gap: var(--space-4); }
  .modal-qa-loading .dot-pulse { display: inline-flex; gap: 3px; }
  .modal-qa-loading .dot-pulse span { width: 5px; height: 5px; background: var(--blue); border-radius: 50%; animation: dotPulse 1.2s infinite; }
  .modal-qa-loading .dot-pulse span:nth-child(2) { animation-delay: 0.2s; }
  .modal-qa-loading .dot-pulse span:nth-child(3) { animation-delay: 0.4s; }
  @keyframes dotPulse { 0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } }
  .modal-qa-selection-pill { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); margin-bottom: var(--space-3); background: rgba(88,166,255,0.08); border: 1px solid rgba(88,166,255,0.25); border-radius: var(--radius-sm); font-size: var(--text-base); }
  .modal-qa-selection-pill .pill-label { color: var(--blue); font-weight: 600; white-space: nowrap; }
  .modal-qa-selection-pill .pill-text { color: var(--muted); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: italic; }
  .modal-qa-selection-pill .pill-clear { background: none; border: none; color: var(--muted); cursor: pointer; font-size: var(--text-xl); padding: 0 2px; line-height: 1; }
  .modal-qa-selection-pill .pill-clear:hover { color: var(--red); }
  .modal-qa-input-wrap { display: flex; gap: 6px; }
  .modal-qa-input { flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-5); font-size: var(--text-md); color: var(--text); font-family: inherit; }
  .modal-qa-input:focus { border-color: var(--blue); outline: none; }
  .modal-qa-btn { background: var(--blue); color: #fff; border: none; border-radius: var(--radius-sm); padding: var(--space-3) var(--space-7); font-size: var(--text-md); cursor: pointer; }
  .modal-qa-btn:hover { opacity: 0.9; }
  .modal-qa-btn:disabled { opacity: 0.4; cursor: not-allowed; }
  .ask-selection-btn { display: none; position: fixed; z-index: 500; background: var(--blue); color: #fff; font-size: var(--text-base); padding: 5px var(--space-6); border-radius: var(--radius-sm); cursor: pointer; box-shadow: var(--shadow-md); }
  .ask-selection-btn:hover { opacity: 0.9; }
  .plan-card { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-6); margin-bottom: var(--space-4); transition: border-color var(--transition-base); }
  .plan-card:hover { border-color: var(--blue); }
  .plan-card.awaiting { border-left: 3px solid var(--yellow); }
  .plan-card.approved { border-left: 3px solid var(--green); }
  .plan-card.rejected { border-left: 3px solid var(--red); opacity: 0.6; }
  .plan-card.working { border-left: 3px solid var(--blue); animation: planPulse 2s infinite; }
  @keyframes planPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(88,166,255,0); } 50% { box-shadow: 0 0 0 4px rgba(88,166,255,0.2); } }
  @keyframes wipPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
  .plan-card.completed { border-left: 3px solid var(--green); }
  .plan-card.revision-requested { border-left: 3px solid var(--purple); }
  .plan-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); }
  .plan-card-title { font-size: var(--text-lg); font-weight: 600; color: var(--text); }
  .plan-card-meta { font-size: var(--text-sm); color: var(--muted); margin-top: var(--space-2); display: flex; gap: var(--space-4); flex-wrap: wrap; }
  .plan-card-actions { display: flex; gap: var(--space-2); margin-top: var(--space-4); flex-wrap: wrap; }
  .plan-btn { font-size: var(--text-base); padding: var(--space-2) var(--space-5); border-radius: var(--radius-sm); cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text); transition: all var(--transition-fast); position: relative; z-index: 1; }
  .plan-btn:hover { border-color: var(--text); }
  .plan-btn.approve { color: var(--green); border-color: var(--green); }
  .plan-btn.approve:hover { background: rgba(63,185,80,0.1); }
  .plan-btn.revise { color: var(--yellow); border-color: var(--yellow); }
  .plan-btn.revise:hover { background: rgba(210,153,34,0.1); }
  .plan-btn.reject { color: var(--red); border-color: var(--red); }
  .plan-btn.reject:hover { background: rgba(248,81,73,0.1); }
  .plan-feedback-input { width: 100%; margin-top: var(--space-3); padding: var(--space-3) var(--space-4); font-size: var(--text-base); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: inherit; resize: vertical; min-height: 50px; }
  .token-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); }
  .token-tile { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-5) var(--space-6); }
  .token-tile-label { font-size: var(--text-sm); color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
  .token-tile-value { font-size: var(--text-stat); font-weight: 700; color: var(--text); margin-top: var(--space-1); }
  .token-tile-sub { font-size: var(--text-sm); color: var(--muted); margin-top: var(--space-1); }
  .token-chart { display: flex; align-items: flex-end; gap: 3px; height: 80px; margin: 8px 0; }
  .token-bar { flex: 1; min-width: 8px; max-width: 24px; background: var(--blue); border-radius: 2px 2px 0 0; position: relative; cursor: default; transition: background 0.15s; }
  .token-bar:hover { background: var(--green); }
  .token-bar-tip { display: none; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 3px 6px; font-size: var(--text-xs); white-space: nowrap; z-index: 10; color: var(--text); }
  .token-bar:hover .token-bar-tip { display: block; }
  .token-chart-labels { display: flex; gap: 3px; }
  .token-chart-labels span { flex: 1; min-width: 8px; max-width: 24px; font-size: var(--text-xs); color: var(--muted); text-align: center; overflow: hidden; }
  /* Schedule calendar */
  .sched-cal { display: grid; grid-template-columns: 50px repeat(7, 1fr); gap: 1px; background: var(--border); border-radius: var(--radius-md); overflow: hidden; }
  .sched-cal-header { background: var(--surface2); padding: 6px 4px; text-align: center; font-size: var(--text-sm); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
  .sched-cal-hour { background: var(--surface); padding: 6px 6px 6px 0; font-size: var(--text-sm); color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; display: flex; align-items: flex-start; justify-content: flex-end; }
  .sched-cal-cell { background: var(--surface); padding: 3px; min-height: 44px; display: flex; flex-direction: column; gap: 2px; }
  .sched-cal-slot { padding: 3px 6px; border-radius: 3px; font-size: var(--text-sm); cursor: pointer; border-left: 3px solid; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: filter 0.15s; }
  .sched-cal-slot:hover { filter: brightness(1.2); }

  .token-agent-table { width: 100%; margin-top: var(--space-5); }
  .token-agent-table th { text-align: right; font-size: var(--text-sm); color: var(--muted); font-weight: 500; padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--border); white-space: nowrap; }
  .token-agent-table th:first-child { text-align: left; }
  .token-agent-table td { font-size: var(--text-base); padding: var(--space-2) var(--space-4); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
  .token-agent-table td:first-child { text-align: left; }
  .kb-tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); }
  .kb-tab { background: var(--surface2); border: 1px solid var(--border); color: var(--muted); font-size: var(--text-base); cursor: pointer; padding: var(--space-1) var(--space-5); border-radius: var(--radius-sm); transition: all var(--transition-base); }
  .kb-tab:hover { color: var(--text); border-color: var(--text); }
  .kb-tab.active { color: var(--blue); border-color: var(--blue); background: rgba(88,166,255,0.08); }
  .kb-tab .badge { background: var(--border); color: var(--text); font-size: var(--text-xs); padding: 0 5px; border-radius: var(--radius-lg); margin-left: var(--space-2); }
  .kb-list { max-height: 400px; overflow-y: auto; padding: var(--space-3) var(--space-4) 0 0; }
  .kb-item { display: flex; align-items: flex-start; gap: var(--space-5); padding: var(--space-4) 0; border-bottom: 1px solid var(--border); cursor: pointer; transition: background var(--transition-fast); }
  .kb-item:hover { background: var(--surface2); }
  .kb-item:last-child { border-bottom: none; }
  .kb-item.item-pinned { border-left: 3px solid var(--yellow); padding-left: var(--space-4); background: rgba(210, 153, 34, 0.05); }
  .kb-item-body { flex: 1; min-width: 0; }
  .kb-item-title { font-size: var(--text-md); color: var(--text); font-weight: 500; }
  .kb-item-meta { font-size: var(--text-sm); color: var(--muted); margin-top: var(--space-1); display: flex; gap: var(--space-4); }
  .kb-item-preview { font-size: var(--text-sm); color: var(--muted); margin-top: var(--space-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .agent-result { font-size: var(--text-sm); color: var(--text); background: var(--surface2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); margin-top: var(--space-3); white-space: pre-wrap; word-break: break-word; max-height: 80px; overflow-y: auto; line-height: 1.4; border-left: 2px solid var(--blue); }
  .agent-card { min-width: 0; }
  .agent-emoji { font-size: var(--text-stat); margin-right: var(--space-2); }
  .click-hint { font-size: var(--text-sm); color: var(--border); margin-top: var(--space-3); }

  .inbox-list { display: flex; flex-direction: column; gap: var(--space-4); max-height: 320px; overflow-y: auto; padding: var(--space-3) var(--space-4) 0 0; }

  /* PRD Progress */
  .prd-progress-bar { width: 100%; height: 20px; background: var(--bg); border-radius: var(--radius-xl); overflow: hidden; display: flex; margin-bottom: var(--space-6); border: 1px solid var(--border); }
  .prd-progress-bar .seg { height: 100%; transition: width 0.5s ease; }
  .prd-progress-bar .seg.complete { background: var(--green); }
  .prd-progress-bar .seg.in-progress { background: var(--yellow); }
  .prd-progress-bar .seg.updated { background: var(--purple); }
  .prd-progress-bar .seg.paused { background: var(--muted); opacity: 0.5; }
  .prd-progress-bar .seg.missing { background: var(--border); }
  .prd-progress-pct { font-size: var(--text-stat); font-weight: 700; color: var(--green); margin-bottom: var(--space-4); }
  .prd-progress-legend { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-bottom: var(--space-6); }
  .prd-legend-item { display: flex; align-items: center; gap: 5px; font-size: var(--text-base); color: var(--muted); }
  .prd-legend-dot { width: 10px; height: 10px; border-radius: 2px; }
  .prd-legend-dot.complete { background: var(--green); }
  .prd-legend-dot.in-progress { background: var(--yellow); }
  .prd-legend-dot.updated { background: var(--purple); }
  .prd-legend-dot.missing { background: var(--border); }

  /* Pipeline Step-Progress */
  .pl-progress-wrap { margin-top: 8px; }
  .pl-progress-bar { width: 100%; height: 6px; background: var(--bg); border-radius: 3px; overflow: hidden; display: flex; border: 1px solid var(--border); }
  .pl-prog-seg { height: 100%; transition: background 0.3s ease; }
  .pl-prog-seg.complete { background: var(--green); }
  .pl-prog-seg.running { background: var(--blue); animation: plSegPulse 1.5s ease-in-out infinite; }
  .pl-prog-seg.failed { background: var(--red); }
  .pl-prog-seg.waiting { background: var(--yellow); }
  .pl-prog-seg.pending { background: transparent; }
  @keyframes plSegPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
  .pl-progress-label { display: flex; gap: 8px; align-items: center; margin-top: 4px; font-size: var(--text-sm); }
  .pl-node-chain { display: flex; align-items: flex-start; gap: 2px; overflow-x: auto; padding: 8px 0; }
  .pl-node { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
  .pl-node-box { padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface2); text-align: center; font-size: var(--text-sm); transition: border-color 0.2s; white-space: nowrap; }
  .pl-node-box.complete { border-color: var(--green); background: rgba(63,185,80,0.08); }
  .pl-node-box.running { border-color: var(--blue); animation: plSegPulse 1.5s ease-in-out infinite; }
  .pl-node-box.failed { border-color: var(--red); background: rgba(248,81,73,0.08); }
  .pl-node-box.waiting { border-color: var(--yellow); }
  .pl-node-box.pending { border-color: var(--border); opacity: 0.6; }
  .pl-node-box.condition { border-style: dashed; }
  .pl-node-box.pl-node-stop { border-style: dotted; border-color: var(--muted); opacity: 0.7; }
  .pl-node-arrow { display: flex; align-items: center; padding: 0 2px; color: var(--muted); font-size: var(--text-md); flex-shrink: 0; margin-top: 8px; }
  .pl-node-meta { font-size: var(--text-xs); color: var(--muted); margin-top: 2px; text-align: center; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
  .pl-node-loop { font-size: var(--text-sm); color: var(--muted); margin-top: 6px; display: flex; align-items: center; gap: 6px; }
  .pipeline-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px 16px; margin-bottom: var(--space-4); cursor: pointer; transition: border-color var(--transition-fast), transform var(--transition-fast); }
  .pipeline-card:hover { border-color: var(--blue); transform: translateY(-1px); }
  .pipeline-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-6); }
  .pipeline-card-main { min-width: 0; flex: 1; }
  .pipeline-card-title { display: block; font-size: var(--text-lg); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pipeline-card-meta { margin-top: var(--space-2); display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--text-sm); color: var(--muted); }
  .pipeline-card-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--space-4); flex-shrink: 0; }
  .pipeline-empty-runs { border: 1px dashed var(--border); border-radius: var(--radius-md); padding: var(--space-6); color: var(--muted); font-size: var(--text-md); background: rgba(139,148,158,0.04); }
  .prd-items-list { display: flex; flex-direction: column; gap: 3px; max-height: 400px; overflow-y: auto; padding: 0 8px; }
  .prd-item-row { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: var(--radius-sm); font-size: var(--text-base); background: var(--surface2); border: 1px solid var(--border); border-left: 3px solid var(--border); }
  .prd-item-row.st-done { border-left-color: var(--green); }
  .prd-item-row.st-in-progress { border-left-color: var(--yellow); animation: prdWipPulse 2s infinite; }
  @keyframes prdWipPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(210,153,34,0); } 50% { box-shadow: 0 0 0 4px rgba(210,153,34,0.2); } }
  .prd-item-row.st-failed { border-left-color: var(--red); }
  .prd-item-row.st-needs-human-review { border-left-color: var(--orange); }
  .prd-item-row.st-updated { border-left-color: var(--purple); }
  .prd-item-row.st-paused { border-left-color: var(--muted); opacity: 0.5; }
  .prd-item-id { font-family: Consolas, monospace; color: var(--muted); min-width: 36px; font-size: var(--text-code); }
  .prd-item-name { flex: 1; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .prd-item-priority { font-size: var(--text-sm); padding: var(--space-1) var(--space-3); border-radius: var(--radius-lg); }
  .prd-item-priority.high { background: rgba(248,81,73,0.15); color: var(--red); }
  .prd-item-priority.medium { background: rgba(210,153,34,0.15); color: var(--yellow); }
  .prd-item-priority.low { background: rgba(139,148,158,0.15); color: var(--muted); }
  .prd-project-badge { font-size: var(--text-xs); padding: var(--space-1) 5px; border-radius: var(--radius-md); background: rgba(56,139,253,0.12); color: var(--blue); border: 1px solid rgba(56,139,253,0.25); white-space: nowrap; }

  .notes-preview { max-height: 400px; overflow-y: auto; font-size: var(--text-md); line-height: 1.6; color: var(--muted); font-family: 'Segoe UI', system-ui, sans-serif; white-space: normal; word-wrap: break-word; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-6) var(--space-7); cursor: pointer; transition: border-color var(--transition-base); }
  .notes-preview:hover { border-color: var(--blue); }
  .notes-preview > .notif-badge { top: var(--space-2); right: var(--space-4); }
  .inbox-item { background: var(--surface2); border: 1px solid var(--border); border-left: 3px solid var(--purple); border-radius: var(--radius-sm); padding: var(--space-5) var(--space-6); cursor: pointer; }
  .inbox-item:hover { border-color: var(--blue); border-left-color: var(--blue); }
  .item-pinned { border-left-color: var(--yellow); background: rgba(210, 153, 34, 0.05); }
  .item-pinned:hover { border-left-color: var(--yellow); }
  .pin-btn { color: var(--muted); border-color: var(--border); }
  .pin-btn.pinned { color: var(--yellow); border-color: var(--yellow); }
  .inbox-name { font-weight: 500; font-size: var(--text-md); color: var(--purple); margin-bottom: var(--space-2); display: flex; justify-content: space-between; }
  .inbox-preview { font-size: var(--text-base); color: var(--muted); line-height: 1.5; max-height: 60px; overflow: hidden; }

  .prd-panel, .pr-panel { border-bottom: 1px solid var(--border); overflow: visible; min-width: 0; }
  .prd-inner { display: flex; gap: 16px; align-items: flex-start; }
  .prd-stats { display: flex; gap: 16px; }
  .prd-stat { text-align: center; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-8); }
  .prd-stat-num { font-size: var(--text-stat-lg); font-weight: 700; color: var(--blue); }
  .prd-stat-num.green { color: var(--green); }
  .prd-stat-num.red { color: var(--red); }
  .prd-stat-num.orange { color: var(--orange); }
  .prd-stat-label { font-size: var(--text-base); color: var(--muted); margin-top: var(--space-1); }
  .prd-summary { flex: 1; font-size: var(--text-lg); color: var(--muted); line-height: 1.6; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px; }
  .prd-pending { color: var(--yellow); font-style: italic; }

  /* PR Tracker */
  .pr-table-wrap { overflow-x: auto; }
  .pr-table { width: 100%; border-collapse: collapse; font-size: var(--text-md); table-layout: auto; }
  .pr-table th:last-child, .pr-table td:last-child { width: 36px; min-width: 36px; text-align: center; }

  /* PR-page table variant (W-mpmwxn9h000bd2c2): fixed column widths with
     ellipsis overflow, and the horizontal scrollbar is pinned inside the
     viewport via a bounded-height container on the standalone /prs page so
     it stays reachable without scrolling to the bottom of a tall table. */
  .pr-table--prs { table-layout: fixed; width: 100%; min-width: 1420px; }
  .pr-table--prs th, .pr-table--prs td { overflow: hidden; text-overflow: ellipsis; }
  .pr-table--prs th:last-child, .pr-table--prs td:last-child { width: auto; min-width: 0; }
  .pr-table--prs .pr-title { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pr-table--prs .pr-agent { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; white-space: nowrap; }
  .pr-table--prs .pr-branch { max-width: 100%; }
  .pr-table--prs .pr-desc { max-width: 100%; }
  .pr-table--prs .pr-date { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }

  /* Standalone /prs page only: bound the table-wrap height so the horizontal
     scrollbar (bottom of the wrap) and the table header (sticky inside the
     wrap) stay visible while the user is on this page. The modal "see all"
     view uses the same colgroup but is unaffected — modal-body handles its
     own scrolling. */
  #pr-content .pr-table-wrap--prs { max-height: calc(100vh - 200px); overflow: auto; }
  #pr-content .pr-table--prs thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
  .pr-table th { text-align: left; color: var(--muted); font-weight: 500; font-size: var(--text-base); text-transform: uppercase; letter-spacing: 0.5px; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); }
  .pr-table td { padding: var(--space-5); border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
  .pr-table tr:last-child td { border-bottom: none; }
  .pr-table tr:hover { background: var(--surface2); }
  .pr-title { color: var(--blue); text-decoration: none; font-weight: 500; }
  .pr-title:hover { text-decoration: underline; }
  .pr-desc { color: var(--muted); font-size: var(--text-sm); font-weight: 400; margin-top: 2px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 400px; }
  .pr-id { color: var(--muted); font-family: Consolas, monospace; font-size: var(--text-base); }
  .pr-agent { font-size: var(--text-base); color: var(--text); }
  .pr-branch { display: inline-block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; font-family: Consolas, monospace; font-size: var(--text-sm); color: var(--muted); background: var(--bg); padding: var(--space-1) var(--space-3); border-radius: 3px; border: 1px solid var(--border); }
  .pr-branch.branch-missing { color: var(--red); border-color: var(--red); background: rgba(248,81,73,0.12); }
  .pr-badge { font-size: var(--text-sm); font-weight: 600; padding: var(--space-1) var(--space-4); border-radius: var(--radius-xl); text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }
  .pr-badge.draft { background: rgba(139,148,158,0.15); color: var(--muted); border: 1px solid var(--border); }
  .pr-badge.active { background: rgba(88,166,255,0.15); color: var(--blue); border: 1px solid var(--blue); }
  .pr-badge.approved { background: rgba(63,185,80,0.15); color: var(--green); border: 1px solid var(--green); }
  .pr-badge.rejected { background: rgba(248,81,73,0.15); color: var(--red); border: 1px solid var(--red); }
  .pr-badge.needs-review { background: rgba(227,179,65,0.15); color: var(--orange); border: 1px solid var(--orange); }
  .pr-badge.review-escalated { background: rgba(227,179,65,0.22); color: var(--orange); border: 1px dashed var(--orange); font-weight: 700; }
  .pr-badge.merged { background: rgba(188,140,255,0.15); color: var(--purple); border: 1px solid var(--purple); }
  .pr-badge.building { background: rgba(210,153,34,0.15); color: var(--yellow); border: 1px solid var(--yellow); animation: pulse 1.5s infinite; }
  .pr-badge.build-pass { background: rgba(63,185,80,0.15); color: var(--green); border: 1px solid var(--green); }
  .pr-badge.build-fail { background: rgba(248,81,73,0.15); color: var(--red); border: 1px solid var(--red); }
  .pr-badge.no-build { background: var(--surface); color: var(--muted); border: 1px solid var(--border); }
  .pr-badge.build-stale { background: rgba(210,153,34,0.15); color: var(--orange); border: 1px dashed var(--orange); }
  .pr-badge.build-escalated { background: rgba(248,81,73,0.25); color: var(--red); border: 2px solid var(--red); font-weight: 600; }
  /* W-mq08kuog001110a6 — Needs-Attention chip for stuck pending work items. */
  .pr-badge.needs-attention { background: rgba(210,153,34,0.15); color: var(--yellow); border: 1px solid var(--yellow); font-weight: 600; cursor: help; }
  .error-details-btn { font-size: var(--text-xs); padding: var(--space-1) var(--space-3); margin-left: var(--space-2); background: rgba(248,81,73,0.15); color: var(--red); border: 1px solid var(--red); border-radius: var(--radius-lg); cursor: pointer; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
  .error-details-btn:hover { background: rgba(248,81,73,0.3); }
  .pr-empty { color: var(--muted); font-style: italic; font-size: var(--text-md); padding: var(--space-6) 0; }
  .pr-pager { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
  .pr-pager-btns { display: flex; gap: 6px; }
  .pr-pager-btn {
    background: var(--surface2); border: 1px solid var(--border); color: var(--muted);
    font-size: var(--text-base); padding: var(--space-2) var(--space-5); border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition-base);
  }
  .pr-pager-btn:hover { color: var(--text); border-color: var(--text); }
  .pr-pager-btn.disabled { opacity: 0.3; pointer-events: none; }
  .pr-pager-btn.see-all { color: var(--blue); border-color: var(--blue); }
  .pr-pager-btn.see-all:hover { background: rgba(88,166,255,0.1); }
  .pr-page-info { font-size: var(--text-base); color: var(--muted); }
  .pr-date { font-size: var(--text-base); color: var(--muted); }

  /* PR row auto-observe toggle switch (W-mpof8qam000h62fb).
     Semantic <input type=checkbox> hidden but focusable; the visible track
     is a sibling span styled via the .pr-observe-on/off class on the
     wrapping <label>. Knob slides via left position + transition. */
  .pr-observe-switch {
    display: inline-flex; align-items: center; cursor: pointer;
    position: relative; user-select: none; vertical-align: middle;
  }
  .pr-observe-switch:has(.pr-observe-switch__input:disabled) { cursor: wait; opacity: 0.6; }
  .pr-observe-switch__input {
    position: absolute; opacity: 0; pointer-events: none;
    width: 1px; height: 1px; margin: 0; padding: 0;
  }
  .pr-observe-switch__track {
    display: inline-block; position: relative;
    width: 26px; height: 14px; border-radius: 999px;
    background: var(--surface2); border: 1px dashed var(--border);
    box-sizing: border-box; transition: all var(--transition-base);
  }
  .pr-observe-switch__knob {
    position: absolute; top: 1px; left: 1px;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--muted); transition: all var(--transition-base);
  }
  .pr-observe-switch.pr-observe-on .pr-observe-switch__track {
    background: rgba(63,185,80,0.18); border: 1px solid var(--green);
  }
  .pr-observe-switch.pr-observe-on .pr-observe-switch__knob {
    left: 14px; background: var(--green);
  }
  .pr-observe-switch.pr-observe-on:hover .pr-observe-switch__track { background: rgba(63,185,80,0.32); }
  .pr-observe-switch.pr-observe-off:hover .pr-observe-switch__track { border-color: var(--text); }
  .pr-observe-switch.pr-observe-off:hover .pr-observe-switch__knob { background: var(--text); }
  .pr-observe-switch__input:focus-visible ~ .pr-observe-switch__track {
    outline: 2px solid var(--blue); outline-offset: 2px;
  }

  .archive-btn {
    background: var(--surface2); border: 1px solid var(--border); color: var(--muted);
    font-size: var(--text-base); padding: var(--space-2) var(--space-5); border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition-base); margin-left: auto;
  }
  .archive-btn:hover { color: var(--purple); border-color: var(--purple); }
  .archive-list { display: flex; flex-direction: column; gap: var(--space-4); }
  .archive-card { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-6) var(--space-7); cursor: pointer; transition: all var(--transition-base); }
  .archive-card:hover { border-color: var(--purple); }
  .archive-card h4 { color: var(--purple); font-size: var(--text-lg); margin-bottom: var(--space-3); }
  .archive-card p { font-size: var(--text-base); color: var(--muted); line-height: 1.5; }
  .archive-detail-section { margin-bottom: var(--space-7); }
  .archive-detail-section h4 { color: var(--blue); font-size: var(--text-lg); margin-bottom: var(--space-4); font-family: 'Segoe UI', sans-serif; }
  .archive-feature { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-5) var(--space-6); margin-bottom: var(--space-3); }
  .archive-feature .feat-id { font-family: Consolas, monospace; color: var(--blue); font-size: var(--text-base); }
  .archive-feature .feat-name { font-weight: 600; font-size: var(--text-md); color: var(--text); margin: var(--space-2) 0; }
  .archive-feature .feat-desc { font-size: var(--text-base); color: var(--muted); line-height: 1.5; }
  .archive-feature .feat-meta { font-size: var(--text-sm); color: var(--muted); margin-top: var(--space-3); display: flex; gap: var(--space-6); }
  .archive-question { background: var(--surface2); border: 1px solid var(--border); border-left: 3px solid var(--orange); border-radius: var(--radius-sm); padding: var(--space-5) var(--space-6); margin-bottom: var(--space-3); }
  .archive-question .q-id { font-family: Consolas, monospace; color: var(--orange); font-size: var(--text-base); }
  .archive-question .q-text { font-size: var(--text-md); color: var(--text); margin: var(--space-2) 0; }
  .archive-question .q-context { font-size: var(--text-base); color: var(--muted); line-height: 1.5; }

  /* ── Base component classes ────────────────────────────────────────── */

  /* Card — unified card base */
  .card {
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: var(--space-6) var(--space-7);
    transition: border-color var(--transition-base);
  }
  .card:hover { border-color: var(--blue); }
  .card.clickable { cursor: pointer; }

  /* Button — unified button base */
  .btn {
    font-size: var(--text-base); padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-sm); border: 1px solid var(--border);
    background: var(--surface); color: var(--text); cursor: pointer;
    transition: all var(--transition-fast);
  }
  .btn:hover { border-color: var(--text); }
  .btn:disabled { opacity: 0.4; cursor: not-allowed; }
  .btn-primary { background: var(--blue); color: #fff; border: none; }
  .btn-primary:hover { opacity: 0.9; }
  .btn-sm { font-size: var(--text-xs); padding: var(--space-1) var(--space-3); }
  .btn-success { color: var(--green); border-color: var(--green); }
  .btn-danger { color: var(--red); border-color: var(--red); }
  .btn-warning { color: var(--yellow); border-color: var(--yellow); }

  /* W-mq10dtaw000l7ad5 — "+ Add" / "+ New" button family. Single source of
     truth for the green-bordered, green-text, "+" buttons used across the
     dashboard: section-header creators (work, plans, prs, knowledge, inbox,
     schedules, pipelines, watches, meetings, home pin/note) AND inline
     form-row adders ("+ Add step", "+ Add requirement"). Change the green
     hex / border / padding / hover once here and every "+ X" button updates.
     Variant:
       .btn-add        — compact text-xs / 1px 6px (section-header default)
       .btn-add-lg     — text-sm / 2px 8px (form rows + larger header buttons)
     Positional spacing (e.g. margin-left:8px after an h2 count) lives at
     the callsite, not on the button itself. Do NOT re-create the green
     inline style for a new "+ X" button — extend this primitive instead. */
  .btn-add {
    background: var(--surface2);
    border: 1px solid var(--green);
    color: var(--green);
    font-size: var(--text-xs);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-base);
  }
  .btn-add:hover { background: rgba(63,185,80,0.1); }
  .btn-add:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
  .btn-add:disabled,
  .btn-add.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
  .btn-add.btn-add-lg { font-size: var(--text-sm); padding: 2px 8px; }

  /* W-mq57qetc0009ed48 — green-bordered action button family WITHOUT a
     leading "+" glyph (Approve / Verify / Resume / Save / Run Now /
     Continue / Create / New Plan / Trigger Verify / etc). Sibling to
     .btn-add — same green/surface2 visual identity, but semantically a
     verb-action rather than a creator. Three padding+size variants cover
     every callsite that was previously inline `style="font-size:…;
     padding:…;color:var(--green);border-color:var(--green)"` on top of
     .pr-pager-btn:
       .btn-action            — compact text-xs / 1px 6px (inline PRD
                                 chips, work-item feedback)
       .btn-action.btn-action-md — text-xs / 2px 8px (meetings, pipelines,
                                 watches resume, schedule run-now chip)
       .btn-action.btn-action-lg — text-sm / 2px 10px (modal Save, watch
                                 Create, charter Save, schedule modal Run
                                 now)
     Positional/layout-only inline styles (e.g. margin-left:8px, margin-
     right:4px, margin-top:6px) stay at the callsite. Do NOT re-create the
     green inline blob — extend this primitive instead. */
  .btn-action {
    background: var(--surface2);
    border: 1px solid var(--green);
    color: var(--green);
    font-size: var(--text-xs);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-base);
  }
  .btn-action:hover { background: rgba(63,185,80,0.1); }
  .btn-action:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
  .btn-action:disabled,
  .btn-action.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
  .btn-action.btn-action-md { padding: 2px 8px; }
  .btn-action.btn-action-lg { font-size: var(--text-sm); padding: 2px 10px; }

  /* W-mq57qetc0009ed48 — red-bordered destructive button family (Delete /
     Abort / Remove / Unpin / unlink-x). Visual sibling to .btn-action —
     same surface2 background, same padding scale, same hover-tint pattern,
     just swapped to var(--red). Three size variants:
       .btn-destructive            — compact text-xs / 1px 6px (work-item
                                     delete, watch delete, schedule delete,
                                     unpin, unlink-x in PR row)
       .btn-destructive.btn-destructive-md — text-xs / 2px 8px (pipelines
                                     Abort + Delete)
       .btn-destructive.btn-destructive-lg — text-sm / 2px 10px (watch
                                     builder Remove step / Remove
                                     requirement)
     Positional / outlier inline overrides (padding:1px 5px on the PR
     unlink-x chip, padding:6px 8px on the requirement-row Remove) stay
     at the callsite. Do NOT re-create the red inline blob — extend this
     primitive instead. */
  .btn-destructive {
    background: var(--surface2);
    border: 1px solid var(--red);
    color: var(--red);
    font-size: var(--text-xs);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-base);
  }
  .btn-destructive:hover { background: rgba(248,81,73,0.1); }
  .btn-destructive:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
  .btn-destructive:disabled,
  .btn-destructive.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
  .btn-destructive.btn-destructive-md { padding: 2px 8px; }
  .btn-destructive.btn-destructive-lg { font-size: var(--text-sm); padding: 2px 10px; }

  /* W-mq57qetc0009ed48 — solid-blue primary CTA. Single source of truth
     for the filled-blue rectangle that gates submission flows (QA "Start
     QA Session", "+ New runbook", "Save" in the QA runbook editor, FRE
     "+ Add Project"). Replaces the standalone .qa-btn-primary (now
     removed — all callsites migrated) and the ad-hoc
     `background:var(--blue);color:#fff;border:none;…` style blob in
     fre.js. */
  .btn-primary-solid {
    background: var(--blue);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-7);
    font-size: var(--text-md);
    font-weight: 600;
    cursor: pointer;
    transition: opacity var(--transition-base);
  }
  .btn-primary-solid:hover { opacity: 0.9; }
  .btn-primary-solid:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
  .btn-primary-solid:disabled,
  .btn-primary-solid.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

  /* W-mq57qetc0009ed48 — solid-blue modal CTA. Lighter-weight sibling to
     .btn-primary-solid: same filled-blue rectangle, padding:6px 16px, but
     without the font-weight:600 used by qa/fre primary CTAs. Used for the
     "Save" / "Create Plan" / "Re-execute" / "Save Note" buttons inside
     dashboard modals (render-inbox, render-kb, render-plans) and the
     "Retry" button in the agent-detail error state. Replaces the ad-hoc
     `background:var(--blue);color:#fff;border:none;border-radius:sm;
     padding:6px 16px` blob that was duplicated across five callsites. */
  .btn-primary-lg {
    background: var(--blue);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 6px 16px;
    font-size: var(--text-md);
    cursor: pointer;
    transition: opacity var(--transition-base);
  }
  .btn-primary-lg:hover { opacity: 0.9; }
  .btn-primary-lg:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
  .btn-primary-lg:disabled,
  .btn-primary-lg.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

  /* W-mq57qetc0009ed48 — muted ghost button. Transparent background,
     bordered, muted text. Used for secondary actions next to a primary
     CTA (QA Cancel / Edit / Dismiss / "− remove artifact row" / "+ Add
     artifact"). Replaces the standalone .qa-btn-ghost (now removed —
     all callsites migrated). */
  .btn-ghost {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-5);
    font-size: var(--text-base);
    cursor: pointer;
    transition: color var(--transition-base), background var(--transition-base);
  }
  .btn-ghost:hover { color: var(--text); background: var(--surface); }
  .btn-ghost:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
  .btn-ghost:disabled,
  .btn-ghost.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

  /* W-mq57qetc0009ed48 — dashed empty-state chip ("+ Add Project" in
     the projects empty-state). Same chip footprint as the project chips
     in render-other.js, but with a dashed border + green text to read as
     a placeholder/call-to-action. */
  .empty-state-add {
    display: inline-block;
    background: var(--surface2);
    border: 1px dashed var(--border);
    color: var(--green);
    font-weight: 500;
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-base);
  }
  .empty-state-add:hover { background: rgba(63,185,80,0.1); }
  .empty-state-add:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
  .empty-state-add:disabled,
  .empty-state-add.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
  /* Muted variant used when the chip sits next to existing project chips
     (so it reads as a secondary "add another" affordance rather than the
     primary empty-state CTA). */
  .empty-state-add.empty-state-add-muted { color: var(--muted); }
  .empty-state-add.empty-state-add-muted:hover { background: var(--surface); }
  /* Blue variant used for the "Scan" affordance that sits next to "+ Add
     Project" in the projects empty-state — same dashed chip, but text-sm and
     blue text instead of green. */
  .empty-state-add.empty-state-add-blue { color: var(--blue); font-size: var(--text-sm); }
  .empty-state-add.empty-state-add-blue:hover { background: rgba(88,166,255,0.1); }

  /* Badge — unified badge/pill base */
  .badge {
    font-size: var(--text-sm); font-weight: 600;
    padding: var(--space-1) var(--space-4);
    border-radius: var(--radius-xl); text-transform: uppercase; white-space: nowrap;
  }
  .badge-blue { background: rgba(88,166,255,0.15); color: var(--blue); border: 1px solid var(--blue); }
  .badge-green { background: rgba(63,185,80,0.15); color: var(--green); border: 1px solid var(--green); }
  .badge-red { background: rgba(248,81,73,0.15); color: var(--red); border: 1px solid var(--red); }
  .badge-yellow { background: rgba(210,153,34,0.15); color: var(--yellow); border: 1px solid var(--yellow); }
  .badge-purple { background: rgba(188,140,255,0.15); color: var(--purple); border: 1px solid var(--purple); }
  .badge-muted { background: var(--surface); color: var(--muted); border: 1px solid var(--border); }

  /* Table — unified table base */
  .table { width: 100%; border-collapse: collapse; font-size: var(--text-md); }
  .table th { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); padding: var(--space-4); border-bottom: 1px solid var(--border); text-align: left; font-weight: 500; }
  .table td { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); }
  .table tr:hover { background: var(--surface2); }

  /* ── Utility classes ───────────────────────────────────────────────── */
  .text-muted { color: var(--muted); }
  .text-sm { font-size: var(--text-sm); }
  .text-xs { font-size: var(--text-xs); }
  .text-md { font-size: var(--text-md); }
  .text-green { color: var(--green); }
  .text-red { color: var(--red); }
  .text-blue { color: var(--blue); }
  .text-yellow { color: var(--yellow); }
  .text-purple { color: var(--purple); }
  .flex-row { display: flex; gap: var(--space-4); align-items: center; }
  .flex-col { display: flex; flex-direction: column; gap: var(--space-4); }
  .flex-wrap { flex-wrap: wrap; }
  .mono { font-family: Consolas, monospace; }
  .font-bold { font-weight: 600; }
  .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  ::-webkit-scrollbar { width: 6px; }
  ::-webkit-scrollbar-track { background: var(--bg); }
  ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
  .empty { color: var(--muted); font-style: italic; font-size: var(--text-md); padding: var(--space-4) 0; }

  /* Command Center — Unified Input */
  .cmd-center { overflow: visible !important; }
  .cmd-input-wrap {
    position: relative; display: flex; align-items: flex-start; gap: 0;
    background: var(--bg); border: 2px solid var(--border); border-radius: var(--radius-xl);
    transition: border-color var(--transition-base), box-shadow var(--transition-base); padding: 0;
  }
  .cmd-input-wrap:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(88,166,255,0.12); }
  .cmd-highlight-layer {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    padding: 14px 16px; font-size: var(--text-xl); font-family: inherit; line-height: 1.5;
    white-space: pre-wrap; word-wrap: break-word; overflow: hidden;
    pointer-events: none; color: transparent; border-radius: 10px;
  }
  .cmd-highlight-layer .hl-cmd { color: transparent; background: rgba(88,166,255,0.18); border-radius: 3px; }
  .cmd-highlight-layer .hl-mention { color: transparent; background: rgba(63,185,80,0.18); border-radius: 3px; }
  .cmd-highlight-layer .hl-priority { color: transparent; background: rgba(210,153,34,0.18); border-radius: 3px; }
  .cmd-highlight-layer .hl-project { color: transparent; background: rgba(188,140,255,0.18); border-radius: 3px; }
  .cmd-highlight-layer .hl-flag { color: transparent; background: rgba(248,81,73,0.18); border-radius: 3px; }
  .cmd-input-wrap textarea {
    position: relative; z-index: 1;
    flex: 1; background: transparent; border: none; color: var(--text);
    padding: 14px 16px; font-size: var(--text-xl); font-family: inherit; resize: none;
    outline: none; line-height: 1.5; min-height: 48px; max-height: 200px;
  }
  .cmd-input-wrap textarea::placeholder { color: var(--muted); }
  .cmd-send-btn {
    background: transparent; color: var(--blue); border: 1px solid var(--blue); padding: var(--space-5) 18px;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0; font-size: var(--text-lg); font-weight: 600; cursor: pointer;
    transition: opacity var(--transition-base); white-space: nowrap; align-self: stretch; min-height: 48px;
    display: flex; align-items: center; gap: var(--space-3);
  }
  .cmd-send-btn:hover { background: rgba(88,166,255,0.1); }
  .cmd-send-btn:disabled { opacity: 0.4; cursor: not-allowed; }
  .cmd-send-btn kbd { font-size: var(--text-sm); opacity: 0.7; font-family: inherit; }

  /* Intent & meta chips */
  .cmd-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; align-items: center; min-height: 0; }
  .cmd-chip {
    display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-5);
    border-radius: var(--radius-xl); font-size: var(--text-base); font-weight: 500; border: 1px solid var(--border);
    background: var(--surface2); color: var(--muted); cursor: default; transition: all var(--transition-base);
  }
  .cmd-chip.intent { color: var(--blue); border-color: rgba(88,166,255,0.3); background: rgba(88,166,255,0.08); }
  .cmd-chip.agent-chip { color: var(--purple); border-color: rgba(188,140,255,0.3); background: rgba(188,140,255,0.08); }
  .cmd-chip.fanout { color: var(--orange); border-color: rgba(227,179,65,0.3); background: rgba(227,179,65,0.08); }
  .cmd-chip.priority-high { color: var(--red); border-color: rgba(248,81,73,0.3); background: rgba(248,81,73,0.08); }
  .cmd-chip.priority-medium { color: var(--yellow); border-color: rgba(210,153,34,0.3); background: rgba(210,153,34,0.08); }
  .cmd-chip.priority-low { color: var(--muted); }
  .cmd-chip.project-chip { color: var(--green); border-color: rgba(63,185,80,0.3); background: rgba(63,185,80,0.08); }
  .cmd-chip .chip-x { cursor: pointer; opacity: 0.5; margin-left: 2px; font-size: var(--text-lg); }
  .cmd-chip .chip-x:hover { opacity: 1; }
  .cmd-chip select {
    background: transparent; border: none; color: inherit; font-size: var(--text-base);
    font-weight: 500; font-family: inherit; cursor: pointer; outline: none;
    -webkit-appearance: none; appearance: none; padding-right: 2px;
  }
  .cmd-chip select option { background: var(--surface); color: var(--text); }

  /* @ mention autocomplete */
  .cmd-mention-popup {
    display: none; position: relative; left: 0; margin-top: var(--space-2);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: var(--space-2) 0; min-width: 280px; box-shadow: var(--shadow-lg);
    z-index: 200; max-height: 320px; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: var(--border) transparent;
  }
  .cmd-mention-popup::-webkit-scrollbar { width: 4px; }
  .cmd-mention-popup::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
  .cmd-mention-popup.visible { display: block; }
  .cmd-mention-item {
    padding: var(--space-4) var(--space-7); font-size: var(--text-md); cursor: pointer; display: flex;
    align-items: center; gap: var(--space-4); transition: background var(--transition-fast);
  }
  .cmd-mention-item:hover { background: var(--surface2); }
  .cmd-mention-item.active { background: rgba(88,166,255,0.15); border-left: 2px solid var(--blue); }
  .cmd-mention-item .mention-emoji { font-size: var(--text-2xl); }
  .cmd-mention-item .mention-name { font-weight: 600; color: var(--purple); }
  .cmd-mention-item .mention-role { color: var(--muted); font-size: var(--text-base); }

  /* Hints bar */
  .cmd-hints {
    display: flex; gap: var(--space-6); margin-top: var(--space-2); font-size: var(--text-sm); color: var(--muted);
    letter-spacing: 0.2px; padding: 0 var(--space-2); overflow-x: auto; white-space: nowrap;
    scrollbar-width: thin; scrollbar-color: var(--border) transparent;
  }
  .cmd-hints::-webkit-scrollbar { height: 3px; }
  .cmd-hints::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
  .cmd-hints code { color: var(--blue); font-size: var(--text-sm); background: var(--surface2); padding: var(--space-1) 5px; border-radius: 3px; }

  .cmd-history-btn {
    background: none; border: 1px solid var(--border); color: var(--muted); font-size: var(--text-base);
    cursor: pointer; padding: var(--space-1) var(--space-5); border-radius: var(--radius-sm); transition: all var(--transition-base);
  }
  .cmd-history-btn:hover { color: var(--text); border-color: var(--text); }
  .cmd-history-list { list-style: none; padding: 0; margin: 0; }
  .cmd-history-item {
    display: flex; align-items: flex-start; gap: 10px; padding: 10px 0;
    border-bottom: 1px solid var(--border);
  }
  .cmd-history-item:last-child { border-bottom: none; }
  .cmd-history-item-body { flex: 1; min-width: 0; }
  .cmd-history-item-text { font-size: var(--text-md); color: var(--text); white-space: pre-wrap; word-break: break-word; font-family: Consolas, monospace; }
  .cmd-history-item-meta { font-size: var(--text-sm); color: var(--muted); margin-top: var(--space-1); display: flex; gap: var(--space-4); }
  .cmd-history-item-meta .chip { background: var(--surface2); padding: var(--space-1) var(--space-3); border-radius: 3px; }
  .cmd-history-resubmit {
    background: var(--surface2); border: 1px solid var(--border); color: var(--blue);
    font-size: var(--text-base); cursor: pointer; padding: var(--space-2) var(--space-5); border-radius: var(--radius-sm); white-space: nowrap;
    transition: all var(--transition-base); flex-shrink: 0;
  }
  .cmd-history-resubmit:hover { background: rgba(88,166,255,0.1); border-color: var(--blue); }
  .cmd-history-empty { color: var(--muted); font-size: var(--text-md); padding: var(--space-8) 0; text-align: center; }
  .cmd-toast {
    display: none; position: fixed; top: 16px; right: 16px; z-index: 10000;
    padding: var(--space-4) var(--space-7); border-radius: var(--radius-sm); font-size: var(--text-md);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    max-width: min(420px, calc(100vw - 32px)); pointer-events: auto;
    animation: fadeIn 0.3s;
  }
  .cmd-toast.success { display: block; background: rgba(63,185,80,0.15); color: var(--green); border: 1px solid var(--green); }
  .cmd-toast.error { display: block; background: rgba(248,81,73,0.15); color: var(--red); border: 1px solid var(--red); }
  /* Inline variant — overrides the floating top-right default for callers that want feedback in the local UI. */
  .cmd-toast.cmd-toast-inline { position: static; box-shadow: none; max-width: 100%; }
  .cmd-toast.cmd-toast-inline.success, .cmd-toast.cmd-toast-inline.error { display: block; }
  @keyframes fadeIn { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:translateY(0)} }

  /* "Try new Slim UX" — flashy gradient-shimmer pill that flips the slim-ux flag */
  @keyframes trySlimShimmer { to { background-position: 200% 50%; } }
  @keyframes trySlimPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(188,140,255,0.0); }
    50% { box-shadow: 0 0 10px 2px rgba(188,140,255,0.55); }
  }
  .try-slim-ux-btn {
    cursor: pointer; border: none; color: #fff; font-weight: 700;
    font-size: var(--text-base); padding: var(--space-2) var(--space-7);
    border-radius: var(--radius-xl); letter-spacing: 0.3px; white-space: nowrap;
    background: linear-gradient(90deg, var(--blue), var(--purple), var(--blue));
    background-size: 200% auto;
    animation: trySlimShimmer 3s linear infinite, trySlimPulse 2.4s ease-in-out infinite;
  }
  .try-slim-ux-btn:hover { filter: brightness(1.12); }
  .try-slim-ux-btn:active { transform: translateY(1px); }
  .try-slim-ux-btn:disabled { opacity: 0.6; cursor: default; animation: none; }
  @media (prefers-reduced-motion: reduce) { .try-slim-ux-btn { animation: none; } }

  /* Engine Status */
  .engine-badge { padding: var(--space-2) var(--space-6); border-radius: var(--radius-xl); font-size: var(--text-base); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-right: var(--space-6); }
  .engine-badge.running { background: rgba(63,185,80,0.15); color: var(--green); border: 1px solid var(--green); }
  .engine-badge.paused { background: rgba(210,153,34,0.15); color: var(--yellow); border: 1px solid var(--yellow); }
  .engine-badge.stopped { background: rgba(248,81,73,0.15); color: var(--red); border: 1px solid var(--red); }
  .test-mode-badge {
    display: inline-block; margin-left: var(--space-6); padding: var(--space-1) var(--space-5);
    background: var(--orange); color: #1a1a1a; font-size: var(--text-md); font-weight: 700;
    letter-spacing: 0.5px; border-radius: var(--radius-sm); vertical-align: middle;
  }
  body.minions-test-mode > header { box-shadow: inset 0 -3px 0 var(--orange); }
  .engine-alert {
    display: none; margin: 8px 24px 0; padding: 8px 10px; border: 1px solid rgba(248,81,73,0.45);
    background: rgba(248,81,73,0.1); border-radius: var(--radius-sm); font-size: var(--text-base); color: var(--text);
    align-items: center; gap: 8px; flex-wrap: wrap;
  }
  .engine-alert .engine-alert-msg { color: var(--red); font-weight: 600; }
  .engine-alert .engine-alert-action {
    color: var(--blue); cursor: pointer; font-size: var(--text-sm); padding: 2px 8px;
    border: 1px solid rgba(56,139,253,0.35); border-radius: 4px; background: rgba(56,139,253,0.08);
    transition: opacity 0.2s;
  }
  .engine-alert .engine-alert-action.clicked {
    opacity: 0.5; pointer-events: none; cursor: default;
  }

  /* Dispatch Queue */
  .dispatch-stats { display: flex; gap: var(--space-7); margin-bottom: 14px; }
  .dispatch-stat { text-align: center; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5) 18px; }
  .dispatch-stat-num { font-size: var(--text-stat-lg); font-weight: 700; }
  .dispatch-stat-num.blue { color: var(--blue); }
  .dispatch-stat-num.green { color: var(--green); }
  .dispatch-stat-num.yellow { color: var(--yellow); }
  .dispatch-stat-num.muted { color: var(--muted); }
  .dispatch-stat-label { font-size: var(--text-sm); color: var(--muted); margin-top: var(--space-1); text-transform: uppercase; letter-spacing: 0.5px; }
  .dispatch-list { display: flex; flex-direction: column; gap: var(--space-3); }
  .dispatch-item { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-md); font-size: var(--text-md); }
  .dispatch-type { font-size: var(--text-sm); font-weight: 600; padding: var(--space-1) var(--space-4); border-radius: var(--radius-lg); text-transform: uppercase; white-space: nowrap; }
  .dispatch-type.implement { background: rgba(88,166,255,0.15); color: var(--blue); }
  .dispatch-type.implement\:large { background: rgba(88,166,255,0.25); color: var(--blue); }
  .dispatch-type.review { background: rgba(188,140,255,0.15); color: var(--purple); }
  .dispatch-type.fix { background: rgba(210,153,34,0.15); color: var(--yellow); }
  .dispatch-type.analyze { background: rgba(63,185,80,0.15); color: var(--green); }
  .dispatch-type.explore { background: rgba(139,148,158,0.15); color: var(--muted); }
  .dispatch-type.test { background: rgba(227,179,65,0.15); color: var(--orange); }
  .dispatch-type.plan { background: rgba(168,85,247,0.15); color: #a855f7; }
  .dispatch-type.plan-to-prd { background: rgba(168,85,247,0.1); color: #a855f7; }
  .dispatch-type.ask { background: rgba(63,185,80,0.15); color: var(--green); }
  .dispatch-type.evaluate { background: rgba(248,81,73,0.15); color: var(--red); }
  .dispatch-type.verify { background: rgba(63,185,80,0.2); color: var(--green); }
  .dispatch-type.meeting { background: rgba(88,166,255,0.2); color: var(--blue); }
  .dispatch-type.decompose { background: rgba(188,140,255,0.2); color: var(--purple); }
  .dispatch-type.manual { background: rgba(139,148,158,0.15); color: var(--muted); }
  .dispatch-type.docs { background: rgba(56,189,248,0.15); color: #38bdf8; }
  .dispatch-type.setup { background: rgba(20,184,166,0.15); color: #14b8a6; }
  .dispatch-agent { font-weight: 600; color: var(--text); }
  .dispatch-task { flex: 1; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dispatch-time { font-size: var(--text-sm); color: var(--border); }
  .dispatch-stuck { font-size: var(--text-xs); font-weight: 700; padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); text-transform: uppercase; letter-spacing: 0.3px; background: rgba(248,81,73,0.18); color: var(--red); border: 1px dashed var(--red); margin-left: var(--space-2); animation: pulse 1.5s infinite; cursor: help; }

  /* Engine Log */
  .log-list { max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-1); }
  .log-entry { font-size: var(--text-base); padding: var(--space-2) var(--space-4); border-bottom: 1px solid rgba(48,54,61,0.4); font-family: Consolas, monospace; }
  .log-ts { color: var(--muted); }
  .log-level-info { color: var(--blue); }
  .log-level-warn { color: var(--yellow); }
  .log-level-error { color: var(--red); }

  /* Agent Detail Panel (slide-in) */
  .detail-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 300; }
  .detail-overlay.open { display: block; }
  .detail-panel {
    position: fixed; top: 0; right: 0; width: 55%; max-width: 750px; height: 100vh;
    background: var(--surface); border-left: 1px solid var(--border);
    z-index: 301; display: flex; flex-direction: column;
    transform: translateX(100%); transition: transform 0.25s ease;
  }
  .detail-panel.open { transform: translateX(0); }
  .detail-header {
    padding: var(--space-7) var(--space-8); border-bottom: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;
  }
  .detail-header h3 { font-size: var(--text-2xl); color: var(--blue); display: flex; align-items: center; gap: var(--space-4); }
  .detail-close { background: none; border: 1px solid var(--border); color: var(--muted); font-size: var(--text-md); cursor: pointer; padding: var(--space-2) var(--space-6); border-radius: var(--radius-sm); }
  .detail-close:hover { color: var(--text); border-color: var(--text); }
  .detail-body { flex: 1; overflow-y: auto; padding: 0; }
  .detail-tabs { display: flex; border-bottom: 1px solid var(--border); flex-shrink: 0; background: var(--bg); }
  .detail-tab {
    padding: var(--space-5) var(--space-7); font-size: var(--text-md); font-weight: 500; color: var(--muted);
    cursor: pointer; border-bottom: 2px solid transparent; transition: all var(--transition-base);
  }
  .detail-tab:hover { color: var(--text); }
  .detail-tab.active { color: var(--blue); border-bottom-color: var(--blue); }
  .detail-content {
    padding: var(--space-7) var(--space-8); font-size: var(--text-md); line-height: 1.7;
    white-space: pre-wrap; word-wrap: break-word; font-family: Consolas, monospace; color: var(--muted);
  }
  .detail-content h4 { color: var(--text); font-size: var(--text-lg); margin: var(--space-6) 0 var(--space-3) 0; font-family: 'Segoe UI', sans-serif; }
  .detail-content .section { margin-bottom: var(--space-7); padding: var(--space-6); background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-md); }

  /* Markdown content — consistent styling everywhere renderMd() is used */
  .md-content { font-family: 'Segoe UI', system-ui, sans-serif; font-size: var(--text-md); line-height: 1.6; white-space: normal; word-break: break-word; overflow-x: auto; }
  .md-content pre { font-family: Consolas, 'Courier New', monospace; white-space: pre-wrap; }
  .md-content code { font-family: Consolas, 'Courier New', monospace; }
  .md-content table { border-collapse: collapse; margin: 6px 0; width: max-content; min-width: 100%; }
  .md-content .md-table-wrap { overflow-x: auto; margin: 6px 0; }
  .md-content th, .md-content td { padding: 4px 8px; border: 1px solid var(--border); text-align: left; font-size: var(--text-base); white-space: nowrap; }
  .md-content td { white-space: normal; min-width: 60px; }
  .md-content th { background: var(--surface); font-weight: 600; }
  .status-line { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-5) var(--space-7); background: var(--bg); border-bottom: 1px solid var(--border); font-size: var(--text-md); }

  /* Modal for inbox detail */
  .modal-bg { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 400; align-items: center; justify-content: center; }
  .modal-bg.open { display: flex; }
  .modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); width: 95%; max-width: 1100px; max-height: 80vh; display: flex; flex-direction: column; }
  .modal.modal-wide { width: 98vw; max-width: 1500px; }
  .modal-header { padding: var(--space-7) var(--space-8); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
  .modal-header h3 { font-size: var(--text-xl); color: var(--blue); }
  .modal-header-actions { display: flex; align-items: center; gap: var(--space-4); }
  .modal-copy { background: var(--surface2); border: 1px solid var(--border); color: var(--muted); font-size: var(--text-base); cursor: pointer; padding: var(--space-2) var(--space-5); border-radius: var(--radius-sm); display: flex; align-items: center; gap: var(--space-2); transition: all var(--transition-base); }
  .modal-copy:hover { color: var(--text); border-color: var(--text); }
  .modal-copy.copied { color: var(--green); border-color: var(--green); }
  .modal-copy.is-success { color: var(--green); border-color: var(--green); }
  .modal-copy.is-danger { color: var(--red); border-color: var(--red); }
  .modal-close { background: none; border: none; color: var(--muted); font-size: var(--text-2xl); cursor: pointer; padding: var(--space-2) var(--space-4); }
  .modal-close:hover { color: var(--text); }

  /* Custom confirm dialog (W-mq5dk1lq) — promise-based replacement for
     native window.confirm(). Scaffold in layout.html (#confirm-dialog),
     behavior in dashboard/js/confirm-dialog.js. Reuses .modal-bg / .modal
     for backdrop + card chrome; the rules below size the card down to a
     compact "are you sure?" footprint and style the action row. */
  .confirm-dialog-bg { z-index: 500; }
  .modal.confirm-card { width: auto; max-width: 480px; min-width: 320px; }
  .confirm-message { white-space: normal; font-family: 'Segoe UI', system-ui, sans-serif; font-size: var(--text-md); color: var(--text); line-height: 1.5; }
  .confirm-actions { display: flex; justify-content: flex-end; gap: var(--space-4); padding: var(--space-5) var(--space-8) var(--space-7); }
  .confirm-actions .btn { min-width: 80px; }
  .confirm-actions .btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
  .notif-badge { position: absolute; top: -5px; right: -5px; pointer-events: none; }
  .notif-badge.done { width: 8px; height: 8px; background: var(--red); border-radius: 50%; animation: notifPulse 2s infinite; }
  .notif-badge.processing { display: flex; gap: 2px; align-items: center; }
  .notif-badge.processing span { width: 3px; height: 3px; background: var(--blue); border-radius: 50%; animation: dotPulse 1.2s infinite; }
  .notif-badge.processing span:nth-child(2) { animation-delay: 0.2s; }
  .notif-badge.processing span:nth-child(3) { animation-delay: 0.4s; }
  @keyframes notifPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }

  /* Command Center action chips: tight stack between consecutive chips,
     normal spacing relative to non-action neighbors (parent flex gap:10px). */
  #cc-messages > .cc-msg-action + .cc-msg-action { margin-top: -8px; }

  /* Command Center tab bar */
  .cc-tab-scroll { display: flex; gap: 4px; align-items: center; overflow-x: auto; overflow-y: hidden; flex: 1 1 auto; min-width: 0; scrollbar-width: thin; }
  .cc-tab { padding: 4px 10px; font-size: var(--text-sm); border: 1px solid var(--border); border-bottom: none; border-radius: 6px 6px 0 0; background: var(--surface2); color: var(--muted); cursor: grab; white-space: nowrap; max-width: 140px; display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; margin-bottom: -1px; position: relative; }
  .cc-tab:active { cursor: grabbing; }
  .cc-tab.cc-tab-dragging { opacity: 0.5; cursor: grabbing; }
  .cc-tab.cc-tab-drop-target { box-shadow: inset 2px 0 0 0 var(--blue); }
  .cc-tab-new { color: var(--muted); padding: 4px 8px; cursor: pointer; }
  .cc-tab-text { overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
  .cc-tab.active { color: var(--text); background: var(--bg); border-color: var(--border); z-index: 1; font-weight: 600; }
  .cc-tab.working { border-color: var(--blue); }
  .cc-tab.working::before { content: ''; position: absolute; top: 3px; left: 5px; width: 4px; height: 4px; border-radius: 50%; background: var(--blue); animation: pulse 1.5s infinite; }
  .cc-tab.working.active::before { background: var(--blue); }
  .cc-tab .notif-badge.done { top: 3px; left: 5px; right: auto; width: 4px; height: 4px; }
  .cc-tab-close { flex-shrink: 0; margin-left: 4px; opacity: 0; cursor: pointer; font-size: var(--text-md); line-height: 1; }
  .cc-tab:hover .cc-tab-close { opacity: 0.5; }
  .cc-tab-close:hover { opacity: 1; color: var(--red); }

  /* Command Center resize handle */
  .cc-resize-handle { position: absolute; top: 0; left: -3px; bottom: 0; width: 6px; cursor: col-resize; z-index: 301; }
  .cc-resize-handle::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 2px; height: 32px; background: var(--border); border-radius: 2px; opacity: 0; transition: opacity 0.15s; }
  .cc-resize-handle:hover::after, .cc-resize-handle.active::after { opacity: 1; background: var(--blue); }
  body.cc-resizing { cursor: col-resize !important; user-select: none !important; }

  .modal-body { padding: var(--space-7) var(--space-8); overflow-y: auto; overflow-x: auto; white-space: pre-wrap; font-size: var(--text-md); line-height: 1.7; color: var(--muted); font-family: Consolas, monospace; }

  /* ── Settings: left-rail tabbed layout (W-mpmwxkcn000646cc) ─────────────
     Replaces the prior flat scroll of every engine.* knob with a Slack/VS-Code-style
     vertical nav + per-tab pane. Search input filters control rows across all tabs
     by data-search attribute. .modal.modal-wide is added by openSettings() so the
     rail + content fit comfortably side-by-side. */
  /* Lock the settings body so the dialog dimensions stay constant across tabs.
     `overflow: hidden` on the body suppresses the inherited `.modal-body`
     scroll-y; only `.settings-content` should ever show a scrollbar. The
     layout is pinned to a single fixed height (was min/max range) so empty
     tabs don't shrink the dialog and full tabs don't stretch it. */
  .modal-body.settings-body { padding: 0; white-space: normal; font-size: var(--text-md); line-height: 1.45; color: var(--text); font-family: 'Segoe UI', system-ui, sans-serif; overflow: hidden; }
  .settings-layout { display: flex; height: calc(80vh - 64px); }
  .settings-rail { width: 220px; min-width: 220px; background: var(--surface2); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; }
  .settings-search-wrap { padding: var(--space-5) var(--space-5) var(--space-4); border-bottom: 1px solid var(--border); }
  .settings-search { width: 100%; padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: var(--text-md); font-family: inherit; }
  .settings-search:focus { outline: none; border-color: var(--blue); }
  .settings-rail-nav { flex: 1; overflow-y: auto; padding: var(--space-3) 0; }
  .settings-rail-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--space-3) var(--space-6); background: transparent; border: none; border-left: 3px solid transparent; color: var(--muted); font-size: var(--text-md); font-weight: 400; font-family: inherit; cursor: pointer; text-align: left; transition: all var(--transition-fast); }
  .settings-rail-btn:hover { color: var(--text); background: var(--surface); }
  .settings-rail-btn.active { color: var(--blue); border-left-color: var(--blue); background: var(--surface); font-weight: 600; }
  .settings-rail-btn.no-match { opacity: 0.3; }
  .settings-rail-btn .match-count { font-size: var(--text-xs); color: var(--blue); background: var(--bg); border-radius: var(--radius-xl); padding: 1px 6px; min-width: 18px; text-align: center; }
  .settings-content { flex: 1; overflow-y: auto; padding: var(--space-7) var(--space-8); min-width: 0; }
  .settings-pane { display: none; }
  .settings-pane.active { display: block; }
  .settings-pane h3 { font-size: var(--text-xl); color: var(--blue); margin-bottom: var(--space-3); font-weight: 600; }
  .settings-pane .settings-pane-sub { font-size: var(--text-base); color: var(--muted); margin-bottom: var(--space-7); }
  .settings-pane h4 { font-size: var(--text-lg); color: var(--text); margin: var(--space-7) 0 var(--space-4); font-weight: 600; }
  .settings-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .settings-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-4); }
  .settings-stack { display: flex; flex-direction: column; gap: var(--space-3); }
  .settings-row { padding: 2px 0; }
  .settings-row.no-match { display: none; }
  .settings-row.match-highlight { background: rgba(88,166,255,0.08); border-left: 2px solid var(--blue); padding-left: var(--space-3); border-radius: var(--radius-sm); }
  .settings-body.searching .settings-pane { display: block; }
  .settings-body.searching .settings-pane.no-match { display: none; }
  .settings-pane-empty { font-size: var(--text-base); color: var(--muted); padding: var(--space-6) 0; font-style: italic; }

  /* Responsive: tablet / narrow window */
  @media (max-width: 1100px) {
    .layout { grid-template-columns: 1fr; }
    section:nth-child(odd) { border-right: none; }
    .prd-inner { flex-direction: column; }
    .prd-stats { flex-wrap: wrap; }
    .dispatch-stats { flex-wrap: wrap; }
    .agents { grid-template-columns: 1fr 1fr; }
  }

  /* Responsive: mobile / very narrow */
  @media (max-width: 640px) {
    header { padding: 10px 14px; flex-wrap: wrap; gap: 6px; }
    header h1 { font-size: var(--text-xl); }
    header h1 span { display: none; }
    section { padding: 14px 12px; }
    .agents { grid-template-columns: 1fr; }
    .prd-stats { gap: 8px; }
    .prd-stat { padding: 8px 12px; }
    .dispatch-stats { gap: 8px; }
    .dispatch-stat { padding: 8px 12px; flex: 1; min-width: 80px; }
    .dispatch-stat-num { font-size: var(--text-2xl); }
    .pr-table { font-size: var(--text-base); }
    .pr-table td { padding: 8px 6px; }
    .pr-table th { padding: 6px; font-size: var(--text-sm); }
    .cmd-input-wrap { flex-direction: column; }
    .cmd-send-btn { width: 100%; }
    .cmd-hints { gap: 8px; }
    .modal { width: 95vw; max-height: 80vh; }
    #projects-bar { flex-wrap: wrap; padding: 6px 12px; }
  }

  /* Ensure all tables scroll horizontally on narrow screens */
  .pr-table-wrap, #pr-content, #completed-content, #work-items-content { overflow-x: auto; min-width: 0; }

  /* Project chip — current git branch indicator.
   * max-width + ellipsis truncation prevents pathological branch names
   * (e.g. `pipeline/daily-issue-fix/...`) from widening the inline-flex chip
   * past the viewport. Full text remains available via the title attribute
   * added in render-other.js _renderProjectBranch. (W-mpayac6d000b7d33) */
  .project-branch {
    font-size: var(--text-sm); color: var(--muted); font-weight: 400;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    display: inline-block; max-width: 240px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
  }
  .project-branch .muted { color: var(--muted); }
  .project-branch .dot-dirty { color: var(--yellow); margin-left: 2px; }
  /* Ahead/behind compact chip (W-mpg3whgp000d09ec, #2732). Renders as
   * "↑N ↓M" next to the branch chip when local diverges from origin/<main>. */
  .project-ab {
    font-size: var(--text-sm); color: var(--muted); font-weight: 400;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    margin-left: 4px; white-space: nowrap;
  }
  .project-warn {
    font-size: var(--text-sm); color: var(--yellow); font-style: italic; font-weight: 400;
    display: inline-block; max-width: 240px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
  }
  .project-muted {
    font-size: var(--text-sm); color: var(--muted); font-style: italic; font-weight: 400;
    display: inline-block; max-width: 240px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
  }

  /* QA tab (W-mpeiwz6k0005bf34-d) — targets / runbooks / runs sections.
   * Reuses surface/border/text tokens defined in :root so the QA page
   * blends with the rest of the dashboard. */
  .qa-section { padding: var(--space-7) var(--space-9); }
  .qa-section h2 { display: flex; align-items: baseline; gap: var(--space-4); }
  .qa-section-subtitle {
    font-size: var(--text-sm); color: var(--muted);
    font-weight: 400; text-transform: none; letter-spacing: 0;
  }
  .qa-engine-link { color: var(--blue); text-decoration: none; }
  .qa-engine-link:hover { text-decoration: underline; }

  /* Targets list — slim row per dedup'd target. */
  .qa-targets-list {
    display: flex; flex-direction: column; gap: var(--space-2);
    border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--surface2); padding: var(--space-4);
  }
  .qa-target-row {
    display: flex; align-items: center; gap: var(--space-5);
    padding: var(--space-3) var(--space-4);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm); font-size: var(--text-md);
  }
  .qa-target-main { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .qa-target-name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; color: var(--text); }
  .qa-target-project { color: var(--muted); font-size: var(--text-base); }
  .qa-target-source {
    display: inline-block; margin-left: var(--space-3);
    font-size: var(--text-xs); color: var(--muted);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 1px var(--space-3); text-transform: uppercase;
  }
  .qa-target-meta { font-size: var(--text-base); color: var(--muted); white-space: nowrap; }
  .qa-target-link {
    font-size: var(--text-sm); color: var(--blue); text-decoration: none;
    padding: var(--space-1) var(--space-4); border: 1px solid var(--border);
    border-radius: var(--radius-sm); background: var(--surface2);
  }
  .qa-target-link:hover { background: var(--bg); }
  .qa-health-dot { font-size: var(--text-md); }
  .qa-health-ok { color: var(--green); }
  .qa-health-warn { color: var(--yellow); }
  .qa-health-down { color: var(--muted); }

  /* Runbooks list + inline new-runbook form. */
  .qa-runbooks-actions { margin-bottom: var(--space-5); }
  .qa-runbook-form {
    border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--surface2); padding: var(--space-5);
    margin-bottom: var(--space-5);
  }
  .qa-form-row { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
  .qa-form-label { font-size: var(--text-base); color: var(--muted); font-weight: 600; }
  .qa-form-input {
    background: var(--bg); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4); font-size: var(--text-md);
    font-family: inherit;
  }
  .qa-form-input:focus { border-color: var(--blue); outline: none; }
  .qa-form-textarea { min-height: 88px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical; }
  .qa-artifacts-repeater { display: flex; flex-direction: column; gap: var(--space-2); }
  .qa-artifact-row { display: flex; gap: var(--space-3); align-items: center; }
  .qa-artifact-input { flex: 1; }
  .qa-add-artifact-btn { align-self: flex-start; margin-top: var(--space-2); }
  .qa-form-actions { flex-direction: row; align-items: center; gap: var(--space-4); }
  .qa-form-msg { font-size: var(--text-base); margin-left: var(--space-3); }
  /* .qa-btn-primary and .qa-btn-ghost were removed in W-mq57qetc0009ed48
     (PR #80 follow-up). All callsites migrated to the shared .btn-primary-solid
     and .btn-ghost primitives defined near .btn-add. .qa-btn-danger is kept
     as a color-only modifier composable with .btn-ghost. */

  .qa-runbooks-list { display: flex; flex-direction: column; gap: var(--space-3); }
  .qa-runbook-row {
    display: flex; align-items: center; gap: var(--space-5);
    padding: var(--space-4) var(--space-5);
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: var(--radius-sm);
  }
  .qa-runbook-main { flex: 1; min-width: 0; }
  .qa-runbook-name { font-weight: 600; color: var(--text); font-size: var(--text-md); }
  .qa-runbook-meta { font-size: var(--text-base); color: var(--muted); margin-top: var(--space-1); }

  /* Runs list — status badge + inline artifact previews. */
  .qa-runs-list { display: flex; flex-direction: column; gap: var(--space-4); }
  .qa-run-row {
    border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--surface2); padding: var(--space-4) var(--space-5);
  }
  .qa-run-head { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; font-size: var(--text-md); }
  .qa-run-status {
    display: inline-block; font-size: var(--text-xs); font-weight: 700;
    padding: 2px var(--space-3); border-radius: var(--radius-sm);
    text-transform: uppercase; letter-spacing: 0.5px;
    background: var(--surface); color: var(--muted); border: 1px solid var(--border);
  }
  .qa-status-passed, .qa-status-success { color: var(--green); border-color: var(--green); }
  .qa-status-failed, .qa-status-error { color: var(--red); border-color: var(--red); }
  .qa-status-running, .qa-status-dispatched { color: var(--blue); border-color: var(--blue); }
  .qa-status-pending { color: var(--yellow); border-color: var(--yellow); }
  .qa-run-name { font-weight: 600; color: var(--text); }
  .qa-run-target { color: var(--muted); font-size: var(--text-base); }
  .qa-run-ts { color: var(--muted); font-size: var(--text-base); margin-left: auto; }
  .qa-run-actions { margin-left: var(--space-5); }
  .qa-run-link { color: var(--blue); text-decoration: none; font-size: var(--text-base); }
  .qa-run-link:hover { text-decoration: underline; }

  .qa-run-artifacts {
    display: flex; flex-wrap: wrap; gap: var(--space-4);
    margin-top: var(--space-4); padding-top: var(--space-4);
    border-top: 1px solid var(--border);
  }
  .qa-artifact {
    display: flex; flex-direction: column; gap: var(--space-2);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: var(--space-3);
    max-width: 320px;
  }
  .qa-artifact img, .qa-artifact video {
    max-width: 100%; max-height: 200px; border-radius: var(--radius-sm);
    background: var(--bg);
  }
  .qa-artifact-caption {
    font-size: var(--text-xs); color: var(--muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    word-break: break-all;
  }
  .qa-artifact-fulllink { color: var(--blue); text-decoration: none; margin-left: var(--space-3); }
  .qa-artifact-fulllink:hover { text-decoration: underline; }
  .qa-artifact-log-preview {
    background: var(--bg); color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--text-xs); padding: var(--space-3);
    border-radius: var(--radius-sm); margin: 0;
    max-height: 160px; overflow: auto; white-space: pre;
  }
  .qa-artifact-log { max-width: 480px; }

  /* ── P-h7e4f9b2: QA Sessions section ───────────────────────────────── */
  .qa-session-form-wrap {
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: var(--space-5);
    margin-bottom: var(--space-6);
  }
  .qa-form-row--grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5);
  }
  .qa-form-row--inline {
    display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: flex-end;
  }
  .qa-form-row--inline > div { display: flex; flex-direction: column; gap: var(--space-2); }
  .qa-session-target-fields { gap: var(--space-3); }
  .qa-session-target-sub { display: flex; flex-direction: column; gap: var(--space-2); }
  .qa-session-capture-group { display: flex; flex-direction: column; gap: var(--space-2); }
  .qa-session-capture-item {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-size: var(--text-base); color: var(--text);
  }

  .qa-sessions-list { display: flex; flex-direction: column; gap: var(--space-4); }
  .qa-session-card {
    border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--surface2); padding: var(--space-4) var(--space-5);
    display: flex; flex-direction: column; gap: var(--space-3);
  }
  .qa-session-state-failed { border-left: 3px solid var(--red); }
  .qa-session-state-killed { border-left: 3px solid var(--muted); }
  .qa-session-state-done   { border-left: 3px solid var(--green); }
  .qa-session-state-awaiting-approval { border-left: 3px solid var(--yellow); }
  .qa-session-state-executing,
  .qa-session-state-drafting,
  .qa-session-state-spawning { border-left: 3px solid var(--blue); }
  .qa-session-head {
    display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
    font-size: var(--text-md);
  }
  .qa-session-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text); }
  .qa-session-state {
    display: inline-block; font-size: var(--text-xs); font-weight: 700;
    padding: 2px var(--space-3); border-radius: var(--radius-sm);
    text-transform: uppercase; letter-spacing: 0.5px;
    background: var(--surface); color: var(--muted); border: 1px solid var(--border);
  }
  .qa-session-state-done   .qa-session-state { color: var(--green); border-color: var(--green); }
  .qa-session-state-failed .qa-session-state { color: var(--red); border-color: var(--red); }
  .qa-session-state-killed .qa-session-state { color: var(--muted); }
  .qa-session-state-awaiting-approval .qa-session-state { color: var(--yellow); border-color: var(--yellow); }
  .qa-session-state-executing .qa-session-state,
  .qa-session-state-drafting .qa-session-state,
  .qa-session-state-spawning .qa-session-state { color: var(--blue); border-color: var(--blue); }

  .qa-session-phases {
    display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
    font-size: var(--text-base);
  }
  .qa-phase-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px var(--space-3); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--muted);
    border: 1px solid var(--border);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--text-xs);
  }
  .qa-phase-chip--pending { opacity: 0.5; }
  .qa-phase-chip--active {
    color: var(--blue); border-color: var(--blue); font-weight: 600;
    background: rgba(56, 139, 253, 0.08);
  }
  .qa-phase-chip--done { color: var(--green); border-color: var(--green); }
  .qa-phase-chip--failed { color: var(--red); border-color: var(--red); }
  .qa-phase-chip--killed { color: var(--muted); border-color: var(--muted); }
  .qa-phase-arrow { color: var(--muted); font-size: var(--text-xs); }

  .qa-session-meta {
    display: flex; flex-wrap: wrap; gap: var(--space-4);
    font-size: var(--text-base); color: var(--muted);
  }
  .qa-session-meta-ts { margin-left: auto; }
  .qa-session-flows {
    font-size: var(--text-base); color: var(--text);
    background: var(--surface); padding: var(--space-3);
    border-radius: var(--radius-sm); border: 1px solid var(--border);
  }
  .qa-session-error {
    font-size: var(--text-base); color: var(--red);
    background: rgba(248, 81, 73, 0.08); padding: var(--space-3);
    border-radius: var(--radius-sm); border-left: 3px solid var(--red);
  }
  .qa-session-summary {
    font-size: var(--text-base); color: var(--text);
    background: var(--surface); padding: var(--space-3);
    border-radius: var(--radius-sm);
  }
  .qa-session-actions {
    display: flex; gap: var(--space-3); flex-wrap: wrap;
    padding-top: var(--space-3); border-top: 1px solid var(--border);
  }
  .qa-btn-danger { color: var(--red); }
  .qa-btn-danger:hover { background: rgba(248, 81, 73, 0.08); }

  /* W-mpmwxni2000c25c7-d - Command Center / doc-chat typed error bubble. */
  /* Token-only styling so dark/light themes stay consistent; the inline */
  /* styles emitted by command-center.js use the same vars and are kept */
  /* for backward compat with existing render paths. */
  .cc-error { padding: 8px 12px; background: rgba(248, 81, 73, 0.08);
    border-left: 3px solid var(--red); border-radius: var(--radius-sm);
    color: var(--red); font-size: var(--text-sm); }
  .cc-error strong { color: var(--red); }
  .cc-error code { font-family: monospace; font-size: var(--text-xs);
    color: var(--muted); }
