:root { color-scheme: dark; }
  :root.light { color-scheme: light; filter: invert(0.88) hue-rotate(180deg); }
  .site-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding-bottom: 20px; margin-bottom: 4px;
    border-bottom: 1px solid #161b22;
  }
  .header-left h1 {
    color: #79c0ff; font-size: 20px; margin: 0 0 6px;
    letter-spacing: 0.6px; font-weight: 700;
  }
  .header-left .subtitle {
    color: #6e7681; font-size: 12px; margin: 0;
  }
  .header-toolbar {
    display: flex; gap: 6px; align-items: center;
    padding-top: 2px;
  }
  .header-toolbar .divider {
    width: 1px; height: 18px; background: #21262d; margin: 0 8px;
  }
  h2 { color: #7c8894; font-size: 13px; margin: 18px 0 10px; font-weight: 600; letter-spacing: 0.4px; }
  .subtitle { color: #8b949e; font-size: 13px; margin-bottom: 18px; }
  .summary { font-size: 13px; margin: 14px 0 12px; color: #8b949e; line-height: 1.7; }
  .summary .fresh { color: #3fb950; }
  .summary .idle  { color: #8b949e; }
  .summary .stale { color: #f85149; }
  .alert-banner {
    display: none; position: relative; flex-shrink: 0;
  }
  .alert-banner.visible { display: inline-flex; }
  .alert-summary {
    display: inline-flex; align-items: center; gap: 5px;
    background: #da363312; border: 1px solid #da363350; border-radius: 6px;
    padding: 4px 10px; font-size: 11px; color: #f85149; font-weight: 600;
    cursor: default; white-space: nowrap; letter-spacing: 0.3px;
    transition: background 0.15s;
  }
  .alert-summary:hover { background: #da363320; }
  .alert-detail {
    display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    margin-top: 6px; padding: 10px 14px; min-width: 280px; z-index: 100;
    background: #161b22; border: 1px solid #8b949e; border-radius: 8px;
    font-size: 12px; color: #f85149; line-height: 1.7; white-space: nowrap;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  }
  .alert-banner:hover .alert-detail { display: block; }
  .alert-detail .alert-proj { color: #ff7b72; font-weight: 600; }
  .alert-detail .alert-countdown { color: #d29922; font-weight: 600; }

  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Every panel that renders a raw <table> scrolls horizontally instead of
     forcing the whole page wider than the viewport (critical on phones).
     Harmless on desktop — no scrollbar appears unless the table overflows. */
  #healthStatus, #healthCooldowns, #healthMonitor,
  #sessions, #tokensProjects, #tokensMachines {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  table { width: 100%; border-collapse: collapse; font-size: 13px; }
  th { text-align: left; padding: 7px 10px; border-bottom: 1px solid #161b22; color: #6e7681; font-weight: 500; font-size: 12px; white-space: nowrap; letter-spacing: 0.3px; }
  td { padding: 7px 10px; border-bottom: 1px solid #161b22; vertical-align: top; line-height: 1.5; }
  tr:hover td { background: #0d1117; }
  .proj { color: #c9d1d9; font-weight: 600; }
  .item { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .host { color: #8b949e; font-size: 13px; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fresh { color: #3fb950; }
  .idle  { color: #8b949e; }
  .stale { color: #f85149; }
  .state-dot { font-size: 16px; text-align: center; cursor: default; }
  .trend-up { color: #3fb950; font-size: 11px; }
  .trend-down { color: #f85149; font-size: 11px; }
  .sparkline-svg { display: block; opacity: 0.6; }
  .tok  { text-align: right; white-space: nowrap; color: #8b949e; font-size: 13px; }
  .pull { text-align: center; color: #8b949e; }
  .pull-nonzero { text-align: center; color: #d2a8ff; font-weight: 600; }
  .diff-link { color: #79c0ff; text-decoration: none; font-size: 13px; }
  .diff-link:hover { text-decoration: underline; }

  /* Driver SHA + skew indicator (D1 telemetry) */
  .sha { font-size: 12px; color: #8b949e; white-space: nowrap; }
  .sha-code { font-family: inherit; }
  .sha.skew { color: #d29922; }
  .sha .skew-mark { color: #d29922; font-weight: 600; margin-right: 3px; }
  /* Heartbeat freshness */
  .hb { white-space: nowrap; font-size: 12px; }
  .hb.fresh { color: #3fb950; }
  .hb.idle  { color: #8b949e; }
  .hb.stale { color: #f85149; }
  .hb-none { color: #6e7681; }
  /* Live agent activity — pulse the dot of a daemon that's actively heartbeating */
  @keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
  .state-dot.live { animation: livePulse 1.8s ease-in-out infinite; }

  .activity-line { padding: 6px 10px; border-bottom: 1px solid #161b22; display: flex; gap: 12px; align-items: baseline; font-size: 13px; }
  .act-ts { color: #6e7681; min-width: 56px; text-align: right; font-size: 12px; }
  .act-who { color: #8b949e; min-width: 130px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .act-what { color: #c9d1d9; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .act-idle { color: #8b949e; }
  .act-commit { flex: none; font-size: 12px; white-space: nowrap; }
  .act-tok { color: #8b949e; min-width: 65px; text-align: right; font-size: 12px; }

  .pending-section { padding: 10px 10px 4px; color: #6e7681; font-size: 12px; font-weight: 600; letter-spacing: 0.5px; }
  .pending-item { padding: 5px 10px 5px 24px; color: #c9d1d9; font-size: 13px; border-bottom: 1px solid #161b22; font-family: inherit; }
  .pending-proj-header {
    padding: 10px 10px; cursor: pointer; user-select: none;
    border-bottom: 1px solid #1a2028;
    font-size: 14px; font-weight: 600; color: #79c0ff;
    display: flex; justify-content: space-between; align-items: center;
    transition: background 0.15s;
  }
  .pending-proj-header:hover { background: #0d1117; }
  .pending-proj-header .toggle { font-size: 12px; color: #6e7681; transition: transform 0.15s; }
  .pending-proj-header.collapsed .toggle { transform: rotate(-90deg); }
  .pending-proj-body.collapsed { display: none; }
  .pending-proj-empty { cursor: default; color: #6e7681; font-weight: 500; }
  .pending-proj-empty:hover { background: transparent; }
  .pending-item.thinking { color: #6e7681; font-style: italic; }
  .pending-section.section-thinking { color: #8b949e; }
  .pending-empty-note { font-size: 12px; font-weight: 400; color: #6e7681; }

  .pending-q-separator {
    border-top: 1px solid #1a2028; margin: 6px 10px;
    font-size: 10px; color: #8b949e; letter-spacing: 0.5px;
    padding-top: 4px;
  }

  .tab-filter {
    width: 100%; padding: 7px 10px; margin-bottom: 10px;
    background: #0d1117; border: 1px solid #161b22; border-radius: 6px;
    color: #c9d1d9; font-family: inherit; font-size: 13px; outline: none;
    transition: border-color 0.15s;
  }
  .tab-filter:focus { border-color: #79c0ff; }
  .tab-filter::placeholder { color: #8b949e; }

  .tab-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; color: #8b949e; margin: -4px 0 12px;
    cursor: pointer; user-select: none;
  }
  .tab-toggle input { cursor: pointer; margin: 0; }
  .tab-toggle:hover { color: #c9d1d9; }

  .filter-pills { display: flex; gap: 5px; margin-bottom: 10px; flex-wrap: wrap; }

  .controls-bar {
    display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
    flex-wrap: wrap;
  }
  .controls-bar .filter-pills { margin-bottom: 0; }
  .controls-bar .tab-filter { width: auto; flex: 1; min-width: 150px; max-width: 420px; margin-bottom: 0; }
  .controls-bar .tab-toggle { margin: 0; white-space: nowrap; }

  .stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 200px)); gap: 10px; margin-bottom: 18px; }
  .stat-card {
    background: #0d1117; border: 1px solid #161b22; border-radius: 8px;
    padding: 12px 14px; display: flex; align-items: center; gap: 10px;
  }
  .stat-card .stat-icon {
    width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .stat-card .stat-icon svg { width: 13px; height: 13px; }
  .stat-card .stat-icon.ticks { background: #1a2d3d; color: #79c0ff; }
  .stat-card .stat-icon.tokens { background: #2a1f1a; color: #e3b341; }
  .stat-card .stat-icon.done { background: #1a2d1f; color: #56d364; }
  .stat-card .stat-body { min-width: 0; }
  .stat-card .stat-value { font-size: 17px; font-weight: 700; color: #c9d1d9; line-height: 1.2; }
  .stat-card .stat-label { font-size: 10px; color: #6e7681; letter-spacing: 0.6px; text-transform: uppercase; margin-top: 2px; }
  .sessions-table { font-size: 13px; }
  .filter-pill {
    background: transparent; border: 1px solid #21262d; border-radius: 6px;
    color: #6e7681; padding: 3px 10px; font-size: 11px; font-weight: 600;
    cursor: pointer; font-family: inherit; letter-spacing: 0.3px;
    white-space: nowrap; user-select: none;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
  }
  .filter-pill:hover { color: #8b949e; border-color: #8b949e; }
  .filter-pill.active { color: #0d1117; background: #79c0ff; border-color: #79c0ff; }
  .filter-pill.blocked.active { color: #0d1117; background: #f85149; border-color: #f85149; }
  .filter-pill.progress.active { color: #0d1117; background: #d29922; border-color: #d29922; }
  .filter-pill.thinking.active { color: #0d1117; background: #6e7681; border-color: #6e7681; }
  .filter-pill.fresh.active  { color: #0d1117; background: #3fb950; border-color: #3fb950; }
  .filter-pill.idle.active   { color: #0d1117; background: #8b949e; border-color: #8b949e; }
  .filter-pill.stale.active  { color: #0d1117; background: #f85149; border-color: #f85149; }

  .proj-col-label.thinking { color: #8b949e; }
  .proj-col-label.blocked  { color: #f85149; }
  .proj-col-label.progress { color: #d29922; }
  .proj-col-label.open     { color: #3fb950; }

  .pending-status-block { margin-bottom: 18px; }
  .pending-status-header {
    padding: 8px 12px; border-radius: 4px;
    font-size: 13px; font-weight: 600; cursor: default;
    border: 1px solid #21262d; margin-bottom: 6px;
  }
  .pending-status-header.thinking  { color: #6e7681; background: #161b22; }
  .pending-status-header.open      { color: #3fb950; background: #161b22; border-color: #8b949e; }
  .pending-status-header.progress  { color: #d29922; background: #161b22; border-color: #8b949e; }
  .pending-status-header.blocked   { color: #f85149; background: #161b22; border-color: #8b949e; }

  .loading { color: #8b949e; }
  .footer { margin-top: 24px; font-size: 12px; color: #6e7681; }
  .footer a { color: #6e7681; }

  @media (max-width: 600px) {
    body { padding: 16px 12px; }
    .site-header { padding-bottom: 14px; }
    .header-left h1 { font-size: 18px; }
    .item, .act-what { max-width: 140px; }
    .act-who { display: none; }
    th, td { padding: 5px 7px; font-size: 12px; }
    /* Activity rows: keep the timestamp/token gutters narrow so the item
       text gets the room on a phone. */
    .activity-line { gap: 8px; }
    .act-ts { min-width: 44px; }
    .act-tok { min-width: 48px; }
    /* Stat cards fill the width two-up instead of being capped at 200px. */
    .stat-cards { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
    .stat-card { padding: 10px 12px; }
    /* Tab bars scroll sideways rather than overflowing the viewport. */
    .tabs, .sub-tabs {
      flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .tabs::-webkit-scrollbar, .sub-tabs::-webkit-scrollbar { display: none; }
    .tab-btn { padding: 10px 12px; flex-shrink: 0; letter-spacing: 0.3px; }
    .sub-tab-btn { flex-shrink: 0; }
    /* Cooldown alert popover: pin to the screen edges so it can't push the
       page wider than the viewport. */
    .alert-detail {
      position: fixed; left: 8px; right: 8px; transform: none;
      min-width: 0; white-space: normal;
    }
    /* Keep the keyboard-shortcuts modal inside the viewport. */
    .help-box { max-width: calc(100vw - 24px); padding: 20px 18px; }
  }
  .tb-btn {
    width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid transparent; border-radius: 6px;
    color: #6e7681; cursor: pointer; padding: 0;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
  }
  .tb-btn:hover { color: #c9d1d9; background: #161b22; border-color: #21262d; }
  .tb-btn svg { width: 16px; height: 16px; fill: currentColor; }
  .tb-btn.active { color: #79c0ff; background: #1f293718; border-color: #1f2937; }
  .tb-btn.paused { color: #f85149; }
  .tb-btn.muted { color: #6e7681; }
  .tb-btn.muted:hover { color: #8b949e; }
  .tb-btn.spinning svg { animation: spin 0.8s linear infinite; }
  @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

  .tabs {
    display: flex; gap: 0; margin: 0 0 18px;
    border-bottom: 1px solid #161b22;
  }
  .tab-btn {
    background: none; border: none; border-bottom: 2px solid transparent;
    color: #6e7681; padding: 10px 20px; font-size: 13px; font-weight: 600;
    cursor: pointer; font-family: inherit; letter-spacing: 0.6px;
    margin-bottom: -1px; transition: color 0.15s, border-color 0.15s;
  }
  .tab-btn:hover { color: #8b949e; }
  .tab-btn.active { color: #79c0ff; border-bottom-color: #79c0ff; }
  .tab-btn .tab-count {
    color: #6e7681; font-weight: 400; margin-left: 4px; font-size: 13px;
  }
  .tab-btn.active .tab-count { color: #8b949e; }
  .tab-panel { display: none; }
  .tab-panel.active { display: block; }
  .tab-panel h2 { margin-top: 0; border-bottom: none; padding-bottom: 0; }

  .sub-tabs {
    display: flex; gap: 4px; margin: 0 0 14px;
    border-bottom: 1px solid #161b22; padding-bottom: 8px;
  }
  .sub-tab-btn {
    background: transparent; border: 1px solid transparent; border-radius: 6px;
    color: #6e7681; padding: 5px 12px; font-size: 12px; font-weight: 600;
    cursor: pointer; font-family: inherit; letter-spacing: 0.3px;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
  }
  .sub-tab-btn:hover { color: #8b949e; background: #161b22; }
  .sub-tab-btn.active { color: #79c0ff; border-color: #1f2937; background: #161b22; }
  .sub-panel { display: none; }
  .sub-panel.active { display: block; }

  /* FLEET tab — collapsible per-machine panels, each listing the
     project-agents homed on that machine. */
  .fleet-machine { border: 1px solid #161b22; border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
  .fleet-machine-header {
    display: flex; align-items: baseline; gap: 10px;
    padding: 10px 14px; cursor: pointer; user-select: none;
    background: #0d1117; border-bottom: 1px solid #161b22;
    transition: background 0.15s;
  }
  .fleet-machine-header:hover { background: #111820; }
  .fleet-machine-header.collapsed { border-bottom: none; }
  .fm-toggle { color: #8b949e; font-size: 12px; transition: transform 0.15s; }
  .fleet-machine-header.collapsed .fm-toggle { transform: rotate(-90deg); }
  .fm-name { color: #79c0ff; font-weight: 600; font-size: 15px; letter-spacing: 0.5px; }
  .fm-summary { color: #8b949e; font-size: 12px; flex: 1; }
  .fleet-machine-body { padding: 2px 6px 6px; }
  .fleet-machine-body.collapsed { display: none; }
  .fleet-agents th { font-size: 12px; }

  /* (a) Expandable fleet rows — inline Open/In progress/Blocked items */
  .fleet-caret {
    display: inline-block; cursor: pointer; color: #8b949e;
    font-size: 11px; margin-right: 6px; transition: transform 0.15s;
  }
  .fleet-caret:hover { color: #c9d1d9; }
  .fleet-caret.open { transform: rotate(90deg); }
  .fleet-detail-row > td { background: #0b0f14; padding: 0; }
  .fleet-detail {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px; padding: 10px 16px 14px;
  }
  .detail-col-label {
    font-size: 11px; font-weight: 600; letter-spacing: 0.5px; color: #6e7681;
    margin-bottom: 5px; border-bottom: 1px solid #161b22; padding-bottom: 3px;
  }
  .detail-item { font-size: 13px; color: #c9d1d9; padding: 3px 0; line-height: 1.4; }
  .detail-empty { font-size: 13px; color: #6e7681; padding: 3px 0; }

  /* (b) Per-project collapsible panels — one panel per project, mirroring the
     FLEET tab's per-machine panels. Header summarises counts; body holds the
     Open/In progress/Blocked columns. Collapse state persists in localStorage. */
  .proj-panel { border: 1px solid #161b22; border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
  .proj-panel-header {
    display: flex; align-items: baseline; gap: 10px;
    padding: 10px 14px; cursor: pointer; user-select: none;
    background: #0d1117; border-bottom: 1px solid #161b22;
    transition: background 0.15s;
  }
  .proj-panel-header:hover { background: #111820; }
  .proj-panel-header.collapsed { border-bottom: none; }
  .pp-toggle { color: #6e7681; font-size: 12px; transition: transform 0.15s; }
  .proj-panel-header.collapsed .pp-toggle { transform: rotate(-90deg); }
  .pp-name { color: #79c0ff; font-weight: 600; font-size: 15px; }
  .pp-summary { color: #8b949e; font-size: 12px; flex: 1; }
  .proj-panel-body { padding: 12px 14px; }
  .proj-panel-body.collapsed { display: none; }
  .proj-card-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
  .proj-col-label {
    font-size: 11px; font-weight: 600; letter-spacing: 0.5px; color: #6e7681;
    margin-bottom: 5px; border-bottom: 1px solid #161b22; padding-bottom: 3px;
  }
  .proj-col-item { font-size: 13px; color: #c9d1d9; padding: 3px 0; line-height: 1.4; }
  .proj-col-empty { font-size: 13px; color: #6e7681; padding: 3px 0; }
  .item-age { font-size: 11px; color: #d29922; margin-left: 4px; font-weight: 500; }
  /* SEARCH tab — project/section tags inline with each matched item or commit. */
  .search-proj { color: #79c0ff; font-size: 12px; font-weight: 500; margin-right: 4px; }
  .search-sec { color: #8b949e; font-size: 10px; letter-spacing: 0.5px; border: 1px solid #21262d; border-radius: 4px; padding: 0 4px; margin-right: 6px; }

  @media (max-width: 700px) {
    .fleet-detail, .proj-card-cols { grid-template-columns: 1fr; }
  }

  /* ARTIFACTS tab — files present locally but not pushed to origin */
  .artifact-proj {
    padding: 10px 10px 4px; border-bottom: 1px solid #21262d;
    font-size: 14px; font-weight: 600; color: #58a6ff;
    display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  }
  .artifact-proj .meta { font-size: 12px; font-weight: 400; color: #8b949e; }
  .artifact-proj.clean { color: #6e7681; font-weight: 500; }
  .artifact-proj.clean .meta { color: #6e7681; }
  .artifact-file {
    padding: 4px 10px 4px 24px; border-bottom: 1px solid #161b22;
    display: flex; gap: 12px; align-items: baseline; font-size: 13px;
  }
  .artifact-code { min-width: 70px; font-size: 12px; color: #8b949e; flex-shrink: 0; }
  .artifact-code.untracked { color: #3fb950; }
  .artifact-code.modified  { color: #d29922; }
  .artifact-code.deleted   { color: #f85149; }
  .artifact-code.added     { color: #58a6ff; }
  .artifact-path { color: #c9d1d9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .help-overlay {
    display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.7); z-index: 999; justify-content: center; align-items: center;
  }
  .help-overlay.visible { display: flex; }
  .help-box {
    background: #161b22; border: 1px solid #8b949e; border-radius: 8px;
    padding: 24px 28px; max-width: 420px; font-size: 13px; color: #c9d1d9;
    max-height: 86vh; overflow-y: auto;
  }
  .help-box h2 { margin: 0 0 14px; font-size: 15px; color: #79c0ff; }
  .help-box h3 {
    margin: 18px 0 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; color: #79c0ff;
  }
  .help-box h3:first-of-type { margin-top: 4px; }
  .help-box .kb-row { display: flex; justify-content: space-between; padding: 4px 0; gap: 16px; }
  .help-box .kb-key { color: #d29922; font-weight: 600; min-width: 40px; white-space: nowrap; }
  .help-box .kb-desc { color: #8b949e; text-align: right; }
  .help-box .kb-divider { border-bottom: 1px solid #21262d; margin: 8px 0 6px; }
  /* Concept rows: term on its own line, plain-language gloss beneath. */
  .help-box .cn-row { padding: 5px 0; line-height: 1.5; }
  .help-box .cn-term { color: #c9d1d9; font-weight: 600; }
  .help-box .cn-mark {
    color: #d29922; font-weight: 600;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  }
  .help-box .cn-desc { color: #8b949e; }
  .help-box .help-hint { margin-top: 16px; font-size: 11px; color: #6e7681; }

  /* ── Home / Today: fleet-control banner ── */
  .control-banner {
    display: none; padding: 11px 16px; border-radius: 8px; margin-bottom: 16px;
    font-size: 13px; line-height: 1.6;
  }
  .control-banner.visible { display: block; }
  .control-banner .cb-mode { font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; }
  .control-banner .cb-meta { color: inherit; opacity: 0.85; }
  .control-banner.freeze { background: #1f293733; border: 1px solid #3b82f6; color: #93c5fd; }
  .control-banner.pause  { background: #2a1f1a; border: 1px solid #d29922; color: #e3b341; }
  .control-banner.stop   { background: #da363312; border: 1px solid #f85149; color: #f85149; }

  /* ── FLEET STATUS tab — verdict tags (needs-you vs daemon-drainable) ── */
  .fb-tag { display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:600; letter-spacing:0.3px; white-space:nowrap; }
  .fb-needsyou { background:#da363320; color:#f85149; border:1px solid #da363350; }
  .fb-daemon   { background:#3fb95020; color:#3fb950; border:1px solid #3fb95050; }
  .fb-running  { background:#79c0ff20; color:#79c0ff; border:1px solid #79c0ff50; }
  .fb-clear    { background:#21262d; color:#8b949e; border:1px solid #8b949e; }

  /* ── Home / Today: fleet-control action buttons ── */
  .control-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
  .control-actions .ca-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: #8b949e; margin-right: 2px; }
  .ctl-btn {
    background: #161b22; color: #c9d1d9; border: 1px solid #8b949e; border-radius: 6px;
    padding: 5px 12px; font-size: 12px; cursor: pointer; transition: border-color 0.15s, background 0.15s;
  }
  .ctl-btn:hover:not(:disabled) { border-color: #8b949e; }
  .ctl-btn:disabled { opacity: 0.5; cursor: not-allowed; }
  .ctl-btn.active { font-weight: 700; }
  .ctl-btn.freeze.active { border-color: #3b82f6; color: #93c5fd; background: #1f293733; }
  .ctl-btn.pause.active  { border-color: #d29922; color: #e3b341; background: #2a1f1a; }
  .ctl-btn.stop.active   { border-color: #f85149; color: #f85149; background: #da363312; }
  .ctl-btn.cooldown      { border-color: #d29922; color: #e3b341; }
  .control-actions .ca-note { font-size: 11px; color: #6e7681; }
  .control-actions .ca-note.locked { color: #d29922; }

  /* ── Home / Today: stat cards (clickable, reuse .stat-cards grid) ── */
  .stat-card.linkable { cursor: pointer; transition: border-color 0.15s, background 0.15s; }
  .stat-card.linkable:hover { border-color: #8b949e; background: #0f141b; }
  .stat-card .stat-icon.needs { background: #3d1a1a; color: #f85149; }
  .stat-card .stat-icon.fleet { background: #1a2d1f; color: #56d364; }
  .stat-card .stat-icon.fleet.degraded { background: #3d2a1a; color: #e3b341; }
  .stat-card .stat-icon.fleet.down { background: #3d1a1a; color: #f85149; }
  .stat-card .stat-sub { font-size: 11px; color: #8b949e; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .stat-card .stat-icon.triage { background: #3d2a1a; color: #e3b341; }
  .stat-card .stat-icon.triage.danger { background: #3d1a1a; color: #f85149; }
  .stat-card .stat-icon.triage.ok { background: #1a2d1f; color: #56d364; }

  /* ── Home / Today: triage feed (thrash / stuck / held — wasted spend) ── */
  .triage-feed { margin-bottom: 18px; }
  .triage-feed .tf-count { color: #8b949e; font-weight: 500; font-size: 12px; }
  .triage-empty { padding: 10px; color: #3fb950; font-size: 13px; }
  .triage-row {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 10px; border-bottom: 1px solid #161b22; font-size: 13px;
  }
  .triage-row .tf-badge {
    font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase;
    border: 1px solid; border-radius: 4px; padding: 1px 6px; flex-shrink: 0;
  }
  .triage-row .tf-proj { color: #79c0ff; font-weight: 600; min-width: 124px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .triage-row .tf-host { color: #8b949e; font-size: 12px; min-width: 70px; flex-shrink: 0; }
  .triage-row .tf-item { color: #c9d1d9; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .triage-row .tf-item.tf-dim { color: #8b949e; }
  .triage-row .tf-detail { color: #8b949e; font-size: 12px; flex-shrink: 0; }
  @media (max-width: 600px) {
    .triage-row .tf-proj { min-width: 90px; }
    .triage-row .tf-host { display: none; }
  }

  /* ── Home / Today: recap (completed items by usage window) ── */
  .recap-window { margin-bottom: 16px; }
  .recap-window-header {
    padding: 7px 12px; border-radius: 6px; margin-bottom: 4px;
    font-size: 12px; font-weight: 600; color: #56d364; background: #161b22;
    border: 1px solid #21262d; display: flex; justify-content: space-between; gap: 10px;
  }
  .recap-window-header .rw-count { color: #8b949e; font-weight: 500; }
  .recap-item {
    padding: 6px 10px 6px 16px; border-bottom: 1px solid #161b22;
    font-size: 13px; display: flex; gap: 10px; align-items: baseline;
  }
  .recap-item .ri-ts { color: #6e7681; min-width: 56px; font-size: 12px; flex-shrink: 0; }
  .recap-item .ri-proj { color: #79c0ff; font-weight: 600; min-width: 124px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .recap-item .ri-title { color: #c9d1d9; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .recap-item .ri-link { flex-shrink: 0; }
  .recap-empty { padding: 12px 10px; color: #6e7681; font-size: 13px; }
  @media (max-width: 600px) {
    .recap-item .ri-proj { min-width: 90px; }
    .recap-item .ri-ts { min-width: 44px; }
  }
  /* ── Reporting: velocity leaderboard (completed items per project) ── */
  .velo-head { font-size: 12px; color: #8b949e; margin: 2px 0 12px; }
  .velo-row { display: flex; align-items: center; gap: 10px; padding: 5px 4px; font-size: 13px; }
  .velo-rank { min-width: 22px; text-align: center; color: #8b949e; font-size: 12px; flex-shrink: 0; }
  .velo-proj { color: #79c0ff; font-weight: 600; min-width: 150px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .velo-bar { flex: 1; height: 14px; background: #161b22; border-radius: 4px; overflow: hidden; min-width: 40px; }
  .velo-fill { display: block; height: 100%; background: #3fb950; border-radius: 4px; }
  .velo-count { min-width: 28px; text-align: right; color: #c9d1d9; font-weight: 600; flex-shrink: 0; }
  @media (max-width: 600px) { .velo-proj { min-width: 90px; } }
  /* ── Reporting: backlog burndown / age (current-state snapshot) ── */
  .bd-section { margin-bottom: 22px; }
  .bd-h { font-size: 13px; color: #c9d1d9; font-weight: 600; margin: 0 0 8px; letter-spacing: .3px; }
  .bd-h .bd-sub { color: #6e7681; font-weight: 400; font-size: 12px; margin-left: 6px; }
  .bd-head { font-size: 12px; color: #8b949e; margin: 2px 0 10px; }
  .bd-row { display: flex; align-items: center; gap: 10px; padding: 4px 4px; font-size: 13px; }
  .bd-age { min-width: 48px; text-align: right; color: #8b949e; font-size: 12px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
  .bd-age.old { color: #f85149; font-weight: 600; }
  .bd-proj { color: #79c0ff; font-weight: 600; min-width: 150px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bd-title { color: #c9d1d9; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bd-more { font-size: 12px; color: #6e7681; padding: 6px 4px 0; }
  @media (max-width: 600px) { .bd-proj { min-width: 90px; } }

/* ===== Error banner ===== */
.error-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: #3d1f1f; color: #f85149; padding: 12px 20px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; border-bottom: 1px solid #f85149; }
.error-banner.hidden { display: none; }
.error-banner-close { background: none; border: none; color: #f85149; font-size: 18px; cursor: pointer; padding: 0 4px; line-height: 1; }

/* ===== Loading spinner ===== */
.loading { display: none; justify-content: center; align-items: center; gap: 6px; padding: 40px 0; opacity: 0; transition: opacity .3s; }
.loading.visible { display: flex; opacity: 1; }
.loading-dot { width: 8px; height: 8px; border-radius: 50%; background: #58a6ff; animation: loadingBounce 1.2s ease-in-out infinite; }
.loading-dot:nth-child(2) { animation-delay: .2s; }
.loading-dot:nth-child(3) { animation-delay: .4s; }
@keyframes loadingBounce { 0%,80%,100%{transform:scale(.6);opacity:.4} 40%{transform:scale(1);opacity:1} }

/* ===== Freshness indicator ===== */
.stale-data { opacity: .7; transition: opacity .5s; }

/* ===== Collapsible section headers ===== */
.section-collapse { cursor: pointer; user-select: none; }
.section-collapse::before { content: "BE"; display: inline-block; margin-right: 6px; transition: transform .2s; font-size: 12px; vertical-align: middle; }
.section-collapse.collapsed::before { content: "B8"; }
.section-collapse.collapsed + * { display: none; }

/* ===== Sort indicators ===== */
.sort-asc::after { content: " B2"; font-size: 10px; }
.sort-desc::after { content: " BC"; font-size: 10px; }

/* ===== Settings panel ===== */
.settings-panel { position: fixed; top: 0; right: -360px; width: 340px; height: 100vh; background: #0d1117; border-left: 1px solid #21262d; z-index: 999; overflow-y: auto; transition: right .3s ease; box-shadow: -4px 0 16px rgba(0,0,0,.5); }
.settings-panel.open { right: 0; }
.settings-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid #21262d; }
.settings-header h2 { font-size: 16px; color: #c9d1d9; }
.settings-header button { background: none; border: none; color: #8b949e; font-size: 20px; cursor: pointer; }
.settings-body { padding: 16px 20px; }
.settings-body h3 { font-size: 13px; color: #58a6ff; margin: 16px 0 8px; text-transform: uppercase; letter-spacing: .5px; }
.settings-body label { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #c9d1d9; padding: 6px 0; }
.settings-body input[type=number], .settings-body select { background: #161b22; border: 1px solid #30363d; border-radius: 4px; color: #c9d1d9; font-family: inherit; font-size: 12px; padding: 4px 8px; width: 120px; }
.settings-body input[type=range] { padding: 0; width: 100px; accent-color: #58a6ff; }
.settings-body button { margin-top: 16px; background: #21262d; border: 1px solid #30363d; color: #f85149; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-family: inherit; font-size: 12px; }

/* ===== Sparklines ===== */
.sparkline { display: inline-flex; align-items: flex-end; gap: 2px; height: 24px; vertical-align: middle; margin-left: 8px; }
.sparkline.up svg { stroke: #3fb950; }
.sparkline.down svg { stroke: #f85149; }
.sparkline.neutral svg { stroke: #8b949e; }

/* ===== Focus-ring ===== */
.tab-btn:focus-visible,.sub-tab-btn:focus-visible,.filter-pill:focus-visible,.tb-btn:focus-visible,input:focus-visible,select:focus-visible,button:focus-visible { outline: 2px solid #58a6ff; outline-offset: 2px; }

/* ===== Project comparison ===== */
.comparison-panel { position: fixed; bottom: 0; left: 0; right: 0; max-height: 40vh; background: #0d1117; border-top: 2px solid #58a6ff; z-index: 998; overflow-y: auto; box-shadow: 0 -4px 16px rgba(0,0,0,.5); }
.comparison-header { display: flex; align-items: center; gap: 12px; padding: 10px 20px; border-bottom: 1px solid #21262d; font-size: 13px; }
.comparison-header h2 { font-size: 14px; color: #c9d1d9; margin-right: auto; }
.comparison-header select { background: #161b22; border: 1px solid #30363d; border-radius: 4px; color: #79c0ff; font-family: inherit; font-size: 12px; padding: 4px 8px; }
.comparison-header button { background: none; border: none; color: #8b949e; font-size: 18px; cursor: pointer; }
.comparison-table { padding: 12px 20px; }
.comparison-table table { width: 100%; border-collapse: collapse; font-size: 13px; }
.comparison-table th { text-align: left; color: #58a6ff; padding: 6px 12px; border-bottom: 1px solid #21262d; }
.comparison-table td { padding: 6px 12px; border-bottom: 1px solid #161b22; }

/* ===== Deep dive overlay ===== */
.deep-dive-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.7); z-index: 1001; display: flex; justify-content: center; align-items: center; }
.deep-dive-panel { background: #0d1117; border: 1px solid #30363d; border-radius: 8px; width: 80vw; max-width: 900px; max-height: 80vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(0,0,0,.6); }
.deep-dive-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid #21262d; }
.deep-dive-header h2 { font-size: 16px; color: #79c0ff; }
.deep-dive-header button { background: none; border: none; color: #8b949e; font-size: 20px; cursor: pointer; }
.deep-dive-body { padding: 20px; }
.deep-dive-stats table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.deep-dive-stats td { padding: 4px 0; font-size: 13px; }
.deep-dive-stats td:first-child { color: #8b949e; width: 140px; }
.deep-dive-backlog h3 { font-size: 13px; color: #58a6ff; margin: 12px 0 4px; }
.deep-dive-backlog ul { list-style: none; padding: 0; }
.deep-dive-backlog li { font-size: 13px; padding: 2px 0; color: #c9d1d9; }
.deep-dive-acts { width: 100%; border-collapse: collapse; font-size: 12px; }
.deep-dive-acts td { padding: 3px 8px; border-bottom: 1px solid #161b22; }

.bd-audit { flex-shrink: 0; opacity: 0; font-size: 12px; cursor: pointer; margin-left: 4px; transition: opacity 0.15s; }
.bd-row:hover .bd-audit { opacity: 0.5; }
.bd-audit:hover { opacity: 1 !important; }

.audit-summary { padding: 8px 0 16px; font-size: 13px; color: #c9d1d9; border-bottom: 1px solid #21262d; margin-bottom: 16px; }
.audit-summary span { margin-right: 12px; }
.audit-timeline { font-size: 13px; }
.audit-attempt { padding: 10px 0; border-bottom: 1px solid #161b22; }
.audit-attempt-header { color: #58a6ff; font-weight: 600; margin-bottom: 4px; }
.audit-attempt div { color: #8b949e; font-size: 12px; padding: 1px 0; }
.audit-attempt code { color: #79c0ff; background: #161b22; padding: 1px 4px; border-radius: 3px; font-size: 11px; }