:root {
    --bg: #0f1115;
    --panel: #171a21;
    --panel-2: #1e222b;
    --line: #2a2f3a;
    --text: #e7e9ee;
    --muted: #9098a8;
    --accent: #7aa7ff;
    --ok: #3ecf8e;
    --warn: #f3b44a;
    --danger: #e35d6a;
    --p0: #e35d6a;
    --p1: #f3b44a;
    --p2: #7aa7ff;
    --p3: #9098a8;
  }
  @media (prefers-color-scheme: light) {
    :root {
      --bg: #f6f7f9; --panel: #ffffff; --panel-2: #f0f2f6; --line: #e3e6ec;
      --text: #1a1d24; --muted: #5b6472; --accent: #3560c9;
    }
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }

  /* Global UI-locale picker — TWO physical instances bound to one
     state via the `data-ui-locale` attribute. Both share the same
     .ui-locale-wrap chrome but live in different DOM locations:
       1. #uiLocalePickerHdr — inline in the <header>, alongside the
          other toolbar buttons. This is the primary control in normal
          mode. Hidden by the header's own display:none in focus-lite/
          full (which is fine — see #2).
       2. #uiLocalePickerFocus — fixed top-right, only visible when
          focus-lite/full has hidden the header. Stays away from the
          focus-exit pill via right:170px.
     The shared .data-ui-locale handler keeps both selects in sync.
     CSS lives in the static head <style> so positioning applies on
     the first paint, before any JS or dynamic stylesheet runs. */
  .ui-locale-wrap {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--panel); border: 1px solid var(--line);
    border-radius: 6px; padding: 2px 4px 2px 8px;
  }
  .ui-locale-wrap:hover { border-color: var(--accent); }
  .ui-locale-icon { font-size: 14px; line-height: 1; opacity: 0.85; }
  .ui-locale-picker {
    background: transparent; color: var(--text);
    border: 0; padding: 4px 4px; font: inherit; font-size: 12px;
    cursor: pointer; appearance: menulist;
  }
  .ui-locale-picker:focus { outline: none; }
  /* Compact toggle used in the agent focus-lite status strip — just a flag +
     2-letter code, tightened padding so it reads as a small switch, not a
     full-width selector. */
  .ui-locale-compact { padding: 1px 2px 1px 4px; }
  .ui-locale-compact .ui-locale-picker { padding: 2px 2px; }
  /* In-header version: inherits the inline layout — no fixed-
     positioning. The .ui-locale-wrap base above is enough. */
  #uiLocalePickerHdr { /* placeholder for future header-specific overrides */ }
  /* Focus-mode floating version: hidden by default, only shows in
     focus-lite / focus-full. Fixed top-right with a box-shadow to
     stand off the bare-page background that focus mode reveals. */
  #uiLocalePickerFocus { display: none; }
  /* Shown in NON-agent focus only. In agent mode, focus-lite hosts the picker
     inside the status strip (#uiLocalePickerStrip) and focus-full is pill-only,
     so this floating copy is suppressed there to avoid a duplicate / overlap. */
  body.focus-lite:not(.mode-agent) #uiLocalePickerFocus,
  body.focus-full:not(.mode-agent) #uiLocalePickerFocus {
    display: inline-flex;
    position: fixed; top: 8px; right: 170px; z-index: 10004;
    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
  }

  /* Focus-mode header hide-rule mirrored from the dynamic agent-
     workspace stylesheet so it applies on the very first frame.
     Without this, there's a brief loading window where the header is
     still visible AND the focus-mode floating locale picker is
     visible → they overlap. With this rule active immediately,
     focus-lite/full hides the header from frame one and only the
     floating picker remains in the top-right. */
  body.focus-lite > header,
  body.focus-lite #appView > header,
  body.focus-full > header,
  body.focus-full #appView > header { display: none !important; }

  header { padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; position: sticky; top: 0; background: var(--bg); z-index: 10; }
  h1 { font-size: 18px; margin: 0; font-weight: 600; }
  .stats { color: var(--muted); font-size: 13px; }
  .spacer { flex: 1; }
  .btn { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; cursor: pointer; font-size: 13px; }
  .btn:hover { background: var(--panel-2); }
  .btn.active { background: var(--accent); color: white; border-color: var(--accent); }
  /* The view-mode toggle. flex-shrink:0 + flex-wrap:wrap means it never gets
     compressed by the .spacer next to it (which would clip the rightmost
     buttons on narrower viewports), and instead the whole bar wraps to a
     second row inside the (already-wrapping) header when there isn't space
     for all buttons in one line. overflow:visible so the wrapped second
     row isn't clipped by the rounded container. */
  .toggle { display: flex; gap: 0; border: 1px solid var(--line); border-radius: 8px; overflow: visible; flex-shrink: 0; flex-wrap: wrap; }
  .toggle .btn { border: 0; border-radius: 0; }
  /* Tasks sub-toolbar — visually subordinate to the main section toolbar.
     Slightly muted background so it reads as a secondary control row, with
     a left margin so it aligns under the parent "Tasks" button. Wraps with
     the rest of the header on narrow viewports. */
  .toggle.tasks-subtoggle { margin-left: 8px; background: var(--panel-2, var(--panel)); }
  .toggle.tasks-subtoggle .btn { font-size: 12px; padding: 4px 10px; color: var(--muted); }
  .toggle.tasks-subtoggle .btn.active { color: white; }
  /* Fraud Reviews view (migration 009). Versioned history of Diana's
     analyses. The top card opens expanded with the report iframe inline;
     prior cards stack as collapsible history entries. */
  .fraud-view { padding: 12px 0; }
  .fraud-header { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
  .fraud-trends { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:12px; margin-bottom:18px; }
  .fraud-trend, .fraud-trend-empty { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:10px 14px; }
  .fraud-trend-label { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:0.4px; }
  .fraud-trend-svg { width:100%; height:40px; margin:6px 0; }
  .fraud-trend-val { font-size:18px; font-weight:600; }
  .fraud-trend-sub { font-size:11px; color:var(--muted); }
  .fraud-card { border:1px solid var(--line); border-radius:10px; background:var(--panel); margin-bottom:14px; overflow:hidden; }
  .fraud-card-head { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; cursor:pointer; gap:14px; }
  .fraud-card-head:hover { background:var(--panel-2, var(--panel)); }
  .fraud-card-title { font-size:16px; font-weight:600; }
  .fraud-card-meta { font-size:12px; color:var(--muted); display:flex; gap:6px; flex-wrap:wrap; margin-top:3px; }
  .fraud-card-toggle { background:transparent; border:0; font-size:18px; color:var(--muted); cursor:pointer; padding:0 6px; }
  .fraud-card-body { padding:0 18px 18px; }
  .fraud-tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:10px; margin-bottom:14px; }
  .fraud-tile { background:var(--panel-2, var(--panel)); border:1px solid var(--line); border-radius:8px; padding:10px 12px; }
  .fraud-tile-label { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:0.4px; }
  .fraud-tile-val { font-size:16px; font-weight:600; margin:4px 0 2px; }
  .fraud-tile-sub { font-size:11px; color:var(--muted); }
  .fraud-summary { background:var(--panel-2, var(--panel)); border-left:3px solid var(--accent, #2563eb); padding:10px 14px; font-size:13px; line-height:1.55; margin:6px 0 14px; white-space:pre-wrap; }
  .fraud-actions-table { margin:18px 0; }
  .fraud-actions-table h4 { margin:0 0 8px; font-size:13px; text-transform:uppercase; letter-spacing:0.4px; color:var(--muted); }
  .fraud-actions-table table { width:100%; border-collapse:collapse; font-size:13px; }
  .fraud-actions-table th, .fraud-actions-table td { padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
  .fraud-actions-table th { text-align:left; font-weight:600; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:0.3px; }
  .fraud-actions-table tr:last-child td { border-bottom:0; }
  .fraud-iframe-wrap { margin-top:14px; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
  .fraud-iframe { width:100%; height:1400px; border:0; background:white; }
  .fraud-docx-link { margin:14px 0; }
  .fraud-docx-link a { color:var(--accent, #2563eb); text-decoration:none; }
  .fraud-docx-link a:hover { text-decoration:underline; }
  .fraud-history-h { margin:24px 0 12px; font-size:13px; text-transform:uppercase; letter-spacing:0.4px; color:var(--muted); }
  .fraud-task-link { color:var(--accent, #2563eb); cursor:pointer; }
  .status-pill { padding:2px 8px; border-radius:4px; font-size:11px; font-weight:600; background:var(--panel-2, var(--panel)); color:var(--muted); }
  .status-pill.live { background:#dcfce7; color:#15803d; }
  .status-pill.implementing { background:#dbeafe; color:#1e40af; }
  .status-pill.approved { background:#fef3c7; color:#92400e; }
  .status-pill.reverted, .status-pill.dismissed { background:#fee2e2; color:#991b1b; }
  /* Contracts view (migration 010). Vendor contract tracker with
     urgency-coded renewal deadlines and inline editing. */
  .contracts-view { padding: 12px 0; }
  .contracts-header { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
  .contracts-alerts { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:12px; margin-bottom:18px; }
  .contracts-alert { border-radius:8px; padding:12px 16px; border-left:4px solid; }
  .contracts-alert.urgent { background:#fef2f2; border-color:#ef4444; color:#991b1b; }
  .contracts-alert.warning { background:#fffbeb; border-color:#f59e0b; color:#92400e; }
  .contracts-alert.ok { background:#f0fdf4; border-color:#22c55e; color:#15803d; }
  .contracts-alert-title { font-weight:600; font-size:14px; margin-bottom:2px; }
  .contracts-alert-body { font-size:12px; }
  .contracts-stats { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:10px; margin-bottom:18px; }
  .contracts-stat { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:10px 14px; text-align:center; }
  .contracts-stat-val { font-size:22px; font-weight:700; }
  .contracts-stat-label { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:0.4px; }
  .contracts-table { width:100%; border-collapse:collapse; font-size:13px; }
  .contracts-table th { text-align:left; font-weight:600; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:0.3px; padding:10px 12px; border-bottom:2px solid var(--line); cursor:pointer; user-select:none; }
  .contracts-table th:hover { color:var(--text); }
  .contracts-table td { padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
  .contracts-table tr:hover td { background:var(--panel-2, var(--panel)); }
  .contracts-table tr.urgency-critical td { border-left:3px solid #ef4444; }
  .contracts-table tr.urgency-warning td { border-left:3px solid #f59e0b; }
  .contracts-table tr.urgency-ok td { border-left:3px solid #22c55e; }
  .contracts-table tr.urgency-unknown td { border-left:3px solid var(--line); }
  .contract-badge { display:inline-block; padding:2px 8px; border-radius:4px; font-size:11px; font-weight:600; }
  .contract-badge.active { background:#dcfce7; color:#15803d; }
  .contract-badge.expiring_soon { background:#fef3c7; color:#92400e; }
  .contract-badge.expired { background:#fee2e2; color:#991b1b; }
  .contract-badge.under_review { background:#dbeafe; color:#1e40af; }
  .contract-badge.unknown { background:var(--panel-2, var(--panel)); color:var(--muted); }
  .contract-badge.cancelled { background:#f3f4f6; color:#6b7280; }
  .contract-detail { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:16px; margin:8px 0; }
  .contract-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 24px; font-size:13px; }
  .contract-detail-grid dt { font-weight:600; color:var(--muted); font-size:11px; text-transform:uppercase; }
  .contract-detail-grid dd { margin:0 0 8px; }
  .contract-edit-btn { background:var(--accent, #2563eb); color:white; border:0; border-radius:6px; padding:6px 14px; font-size:12px; cursor:pointer; }
  .contract-edit-btn:hover { opacity:0.9; }
  .contracts-filter { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
  .contracts-filter .btn { font-size:12px; padding:4px 12px; border-radius:16px; background:var(--panel); border:1px solid var(--line); color:var(--muted); cursor:pointer; }
  .contracts-filter .btn.active { background:var(--accent, #2563eb); color:white; border-color:var(--accent, #2563eb); }
  input[type=search] { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: 13px; min-width: 180px; }
  main { padding: 16px 18px 40px; }
  .group { margin-bottom: 24px; }
  .group h2 { font-size: 15px; margin: 0 0 10px; display: flex; align-items: baseline; gap: 10px; }
  .group h2 .count { color: var(--muted); font-weight: 500; font-size: 13px; }
  .group h2 .pills { margin-left: auto; display: flex; gap: 6px; }
  .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; }
  .card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; display: flex; flex-direction: column; gap: 6px; }
  .card .row1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .card .title { font-weight: 600; font-size: 13.5px; line-height: 1.3; flex: 1 1 100%; }
  .card .meta { color: var(--muted); font-size: 12px; display: flex; gap: 10px; flex-wrap: wrap; }
  .id { font-family: ui-monospace, Menlo, monospace; color: var(--muted); font-size: 12px; }
  .pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); line-height: 1.6; }
  .pill.p0 { color: var(--p0); border-color: var(--p0); }
  .pill.p1 { color: var(--p1); border-color: var(--p1); }
  .pill.p2 { color: var(--p2); border-color: var(--p2); }
  .pill.p3 { color: var(--p3); border-color: var(--p3); }
  .pill.st-done, .pill.st-completed { color: var(--ok); border-color: var(--ok); }
  .pill.st-blocked { color: var(--warn); border-color: var(--warn); }
  .pill.st-cancelled { color: var(--muted); }
  .pill.st-draft { color: var(--muted); border-style: dashed; }
  .pill.st-assigned, .pill.st-in_progress { color: var(--accent); border-color: var(--accent); }
  .pill.st-acknowledged { color: var(--accent); border-color: var(--accent); }
  .pill.overdue { color: var(--danger); border-color: var(--danger); }
  .theme-sel { background: transparent; color: var(--muted); border: 1px dashed var(--line); border-radius: 999px; font-size: 11px; padding: 2px 6px; cursor: pointer; }
  .status-sel { background: transparent; color: inherit; border: 0; font-size: 11px; font-weight: 600; cursor: pointer; padding: 0; }
  .status-sel:focus { outline: 1px solid var(--accent); }
  .card .desc { color: var(--muted); font-size: 12.5px; white-space: pre-wrap; display: none; border-top: 1px dashed var(--line); padding-top: 6px; margin-top: 2px; }
  .card.expanded .desc { display: block; }
  .card .desc-actions { display: flex; gap: 8px; margin-top: 6px; align-items: center; }
  .card .desc-edit { display: none; flex-direction: column; gap: 6px; border-top: 1px dashed var(--line); padding-top: 6px; margin-top: 2px; }
  .card.editing-desc .desc { display: none; }
  .card.editing-desc .desc-edit { display: flex; }
  .desc-edit textarea { width: 100%; min-height: 90px; background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; font: inherit; font-size: 12.5px; resize: vertical; }
  .desc-edit textarea:focus { outline: none; border-color: var(--accent); }
  .btn-sm { font-size: 11px; padding: 3px 10px; border-radius: 6px; }
  .btn-sm.primary { background: var(--accent); color: white; border-color: var(--accent); }
  .btn-sm.primary:hover { opacity: 0.9; background: var(--accent); }
  /* Resolve split-button: ✓ Resolve + a ▾ caret revealing "Resolve &
     don't reopen today". The caret hugs the main button; the menu floats
     above so it isn't clipped by the worklist row. */
  .resolve-split { position: relative; display: inline-flex; }
  .resolve-split .resolve-caret { padding-left: 5px; padding-right: 5px; margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
  .resolve-split > [data-ticket-resolve] { border-top-right-radius: 0; border-bottom-right-radius: 0; }
  /* Anchor LEFT (not right): the action row sits near the left edge of the
     conversation card, which has overflow:hidden — a right-anchored menu
     extended leftward out of the card and got clipped ("✓ Resolv…"). Opening
     rightward keeps the menu inside the card's open space. */
  .resolve-menu { position: absolute; bottom: calc(100% + 4px); left: 0; z-index: 50; min-width: 250px; max-width: calc(100vw - 40px); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,0.28); padding: 4px; }
  .resolve-menu-item { display: block; width: 100%; text-align: left; background: transparent; border: 0; border-radius: 6px; padding: 7px 9px; cursor: pointer; color: var(--text); }
  .resolve-menu-item:hover { background: var(--panel-2); }
  .resolve-menu-title { display: block; font-size: 12px; font-weight: 600; }
  .resolve-menu-sub { display: block; font-size: 11px; color: var(--muted); margin-top: 1px; }
  .add-desc-link { color: var(--accent); font-size: 11px; cursor: pointer; text-decoration: none; border: 0; background: transparent; padding: 0; }
  .add-desc-link:hover { text-decoration: underline; }
  /* New-task modal form */
  .new-task-form { display: flex; flex-direction: column; gap: 12px; }
  .new-task-form .form-row { display: flex; gap: 10px; }
  .new-task-form .form-row > * { flex: 1; }
  .new-task-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
  .new-task-form label .req { color: var(--danger); }
  .new-task-form input[type=text], .new-task-form input[type=date], .new-task-form input[type=email], .new-task-form input[type=number], .new-task-form select, .new-task-form textarea {
    background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; font: inherit; font-size: 13px;
  }
  .new-task-form textarea { min-height: 80px; resize: vertical; }
  .new-task-form input:focus, .new-task-form select:focus, .new-task-form textarea:focus { outline: none; border-color: var(--accent); }
  .new-task-form .form-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
  .new-task-form .form-err { color: var(--danger); font-size: 12px; min-height: 16px; }
  .card .parent-link { font-size: 11px; color: var(--muted); }
  .card .last-reply { color: var(--muted); font-size: 12px; border-top: 1px dashed var(--line); padding-top: 6px; margin-top: 2px; display: flex; gap: 6px; align-items: flex-start; }
  .card .last-reply .lr-snippet { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .card .last-reply .lr-when { color: var(--muted); font-style: italic; white-space: nowrap; }
  .iconbtn { background: transparent; color: var(--muted); border: 0; cursor: pointer; padding: 2px 4px; border-radius: 4px; font-size: 13px; line-height: 1; }
  .iconbtn:hover { background: var(--panel-2); color: var(--text); }
  .iconbtn:disabled { opacity: 0.5; cursor: wait; }
  .iconbtn.busy { opacity: 0.5; }
  .toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--panel-2); color: var(--text); padding: 10px 16px; border-radius: 8px; border: 1px solid var(--line); font-size: 13px; z-index: 100; opacity: 0; transition: opacity .2s; pointer-events: none; }
  .toast.show { opacity: 1; }
  .toast.err { color: var(--danger); border-color: var(--danger); }
  /* z-index 6000 puts these user-initiated modals (profile-edit, new-task,
     thread, triage, drill-downs) above the admin "stay in Agent Mode"
     overlays at z-5500 (Contacts admin, Access & Mailboxes). Without
     this, clicking "+ New contact" inside the Contacts admin modal
     opened the form *behind* the list and looked like nothing happened. */
  .modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: none; align-items: flex-start; justify-content: center; padding: 40px 20px; z-index: 6000; overflow-y: auto; }
  .modal-bg.show { display: flex; }
  .modal { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; max-width: 720px; width: 100%; padding: 18px 20px; }
  .modal header { padding: 0 0 12px; border-bottom: 1px solid var(--line); display: flex; align-items: baseline; gap: 10px; position: static; background: none; }
  .modal header h2 { font-size: 15px; margin: 0; flex: 1; font-weight: 600; }
  .modal .modal-body { max-height: 60vh; overflow-y: auto; padding-top: 12px; }
  /* Edit-access modal — grouped capabilities */
  .modal .access-group { margin: 12px 0; padding: 10px 12px; background: var(--panel-2); border:1px solid var(--line); border-radius: 8px; }
  .modal .access-group-head { display:flex; align-items:center; gap:8px; margin-bottom:6px; padding-bottom:6px; border-bottom:1px dashed var(--line); }
  .modal .access-group-name { font-size:11px; text-transform:uppercase; letter-spacing:0.7px; color: var(--accent); font-weight:600; flex:1; }
  .modal .access-group-action { padding:2px 8px; font-size:10px; }
  .modal .access-row { display:flex; align-items:flex-start; gap:8px; padding:4px 0; }
  .modal .access-row input[type="checkbox"] { margin-top:3px; flex-shrink:0; }
  .modal .access-row strong { color: var(--text); }
  .modal .access-row .dim { color: var(--muted); font-size:12px; }
  /* Compact capability picker (profile-edit modal). Two-column grid so the
     whole permission set fits with minimal scroll; checkbox sits inline-left
     of a short label + one-line hint (never stacked above the text). */
  .cap-grid { display:grid; grid-template-columns:1fr 1fr; gap:2px 18px; }
  .cap-item { display:flex; align-items:flex-start; gap:7px; padding:2px 0; cursor:pointer; font-size:12px; line-height:1.25; }
  .cap-item input[type="checkbox"] { width:15px; height:15px; margin:1px 0 0; flex:none; accent-color:var(--accent); cursor:pointer; }
  .cap-item b { font-weight:600; color:var(--text); }
  .cap-item .cap-hint { color:var(--muted); }
  @media (max-width:620px) { .cap-grid { grid-template-columns:1fr; } }
  /* Tabbed capability editor (profile-edit modal). The Admin / Agent /
     Business groups become tabs so the admin doesn't scroll every section.
     Out-of-scope tabs (a scoped admin viewing caps they can't grant) render
     read-only: the tab carries a 🔒 and its checkboxes are disabled but
     still reflect the contact's current state. */
  .cap-tabs { display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom:10px; }
  .cap-tab { appearance:none; -webkit-appearance:none; background:none; border:none;
    border-bottom:2px solid transparent; margin-bottom:-1px; padding:6px 12px; font:inherit;
    font-size:11px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase;
    color:var(--muted); cursor:pointer; }
  .cap-tab:hover { color:var(--text); }
  .cap-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
  .cap-tab.locked { cursor:default; }
  .cap-tabpanel { display:none; }
  .cap-tabpanel.active { display:block; }
  .cap-readonly-note { font-size:11px; color:var(--muted); margin:0 0 7px; font-style:italic; }
  .cap-item input[type="checkbox"]:disabled { opacity:0.55; cursor:default; }
  .cap-tabpanel.is-readonly .cap-item { cursor:default; }
  /* Thread modal — chat-bubble style. Outbound (us) aligns right in accent
     blue; inbound (them) aligns left in panel-2 grey. Subject lines and
     email-type labels intentionally suppressed — the whole thread is one
     conversation and the labels just added visual noise. */
  .thread-item { display: flex; flex-direction: column; margin: 6px 0; max-width: 82%; }
  .thread-item.outbound { align-self: flex-end; align-items: flex-end; margin-left: auto; }
  .thread-item.inbound { align-self: flex-start; align-items: flex-start; margin-right: auto; }
  .thread-item .ti-bubble {
    padding: 8px 12px; border-radius: 14px; font-size: 13px; line-height: 1.45;
    white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere;
    box-shadow: 0 1px 1px rgba(0,0,0,0.08);
  }
  .thread-item.outbound .ti-bubble {
    background: var(--accent); color: #fff; border-bottom-right-radius: 4px;
  }
  .thread-item.inbound .ti-bubble {
    background: var(--panel-2); color: var(--text); border-bottom-left-radius: 4px;
  }
  .thread-item .ti-meta {
    font-size: 10px; color: var(--muted); margin: 3px 8px 0;
    display: flex; gap: 6px; align-items: center;
  }
  .thread-item.outbound .ti-meta { justify-content: flex-end; }
  /* System line — used for events with no real body content (e.g. the
     outbound "assignment sent" log entry, whose notes column is just
     operational boilerplate). Rendered as a small, centered, muted caption
     — "Darren sent the assignment · 2h ago" — so the user still sees the
     event on the timeline without a blank blue bubble. */
  .thread-item.system { align-self: center; align-items: center; max-width: 100%; margin: 8px 0; }
  .thread-item.system .ti-system {
    font-size: 11px; color: var(--muted); font-style: italic;
    padding: 2px 10px; background: transparent;
  }
  /* Day-change separator ("Tue, Apr 21") — a tiny centered pill between
     bubbles. Added only when the calendar date changes from the previous
     message, so same-day threads stay compact. */
  .thread-day-sep {
    align-self: center; margin: 14px 0 6px;
    font-size: 10px; font-weight: 600; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.05em;
    padding: 2px 10px; background: var(--panel-2);
    border-radius: 999px; border: 1px solid var(--line);
  }
  /* Speaker caption that sits ABOVE a bubble when the speaker changes
     from the previous bubble — like iMessage / Slack / Messenger. For
     consecutive bubbles from the same sender we suppress it so the
     thread doesn't repeat "Darren Manelski" on every line. The sender's
     email sits next to the name but only when it differs from the last
     speaker's (so a two-party thread is clean; a three-party thread
     surfaces who's who). */
  .thread-speaker {
    font-size: 11px; color: var(--muted); margin: 6px 8px 2px;
    display: flex; gap: 6px; align-items: center;
  }
  .thread-item.outbound + .thread-speaker,
  .thread-item.inbound + .thread-speaker,
  .thread-item.system + .thread-speaker { margin-top: 10px; }
  .thread-speaker.outbound { align-self: flex-end; }
  .thread-speaker.inbound { align-self: flex-start; }
  .thread-speaker strong { color: var(--text); font-weight: 600; }
  /* The outer .modal-body becomes the chat-history scroll container when it
     hosts thread-items, so we make the list a column flex so align-self
     left/right works on each bubble. */
  #threadBody { display: flex; flex-direction: column; }
  /* Thread action rail — the top-of-modal strip of buttons that replaces
     all the per-card action buttons. Lives outside the scrollable body so
     controls stay reachable while scrolling through a long conversation. */
  .thread-actions {
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
    margin-bottom: 6px;
  }
  .thread-actions .thread-actions-row {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  }
  .thread-actions .btn { font-size: 12px; padding: 4px 10px; }
  .thread-actions .thread-theme {
    margin-left: auto; display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--muted);
  }
  .thread-actions .thread-theme select {
    background: var(--card); color: var(--text); border: 1px solid var(--line);
    border-radius: 4px; padding: 3px 6px; font-size: 12px;
  }
  /* Task meta strip inside the modal — pills + description + blocker.
     Gives the user full task context since the card is now minimal. */
  .thread-meta {
    padding: 8px 0 12px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 6px;
  }
  .thread-meta .tm-pills {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    margin-bottom: 6px;
  }
  .thread-meta .tm-assignee {
    font-size: 12px; color: var(--muted); margin-left: 4px;
  }
  .thread-meta .tm-desc {
    font-size: 13px; color: var(--text); line-height: 1.5;
    white-space: pre-wrap; margin-top: 4px;
  }
  /* Minimalist card add-ons */
  .reply-badge {
    font-size: 11px; color: var(--muted); padding: 2px 6px;
    border: 1px solid var(--line); border-radius: 999px;
  }
  .theme-tag {
    font-size: 11px; color: var(--muted); padding: 2px 8px;
    border: 1px solid var(--line); border-radius: 999px;
  }
  /* Triage inbox — used by the "unmatched replies" modal. Each row is one
     unlinked inbound_replies row; the inline form writes matched_task_ids
     through query.js. */
  .triage-badge {
    display: inline-block; margin-left: 6px; padding: 0 6px; font-size: 11px;
    font-weight: 600; background: var(--danger, #8b1e1e); color: #fff;
    border-radius: 999px; min-width: 16px; text-align: center;
  }
  .triage-item { padding: 12px 0; border-bottom: 1px dashed var(--line); }
  .triage-item:last-child { border-bottom: 0; }
  .triage-item .tri-head { font-size: 11px; color: var(--muted); margin-bottom: 4px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
  .triage-item .tri-subject { font-weight: 600; color: var(--text); margin-bottom: 2px; }
  .triage-item .tri-body { font-size: 13px; color: var(--text); white-space: pre-wrap; margin-bottom: 8px; max-height: 140px; overflow: auto; padding: 6px 8px; background: rgba(0,0,0,0.08); border-radius: 4px; }
  .triage-item .tri-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .triage-item .tri-actions input[type="text"] { width: 180px; padding: 4px 8px; font-size: 12px; background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 4px; }
  .triage-item .tri-actions .tri-err { color: var(--danger, #c0392b); font-size: 11px; margin-left: 6px; }
  .triage-item .tri-actions .tri-ok { color: var(--ok, #2ecc71); font-size: 11px; margin-left: 6px; }
  /* Triage — inline "Create new task" form, toggled open per row so the user
     can convert an inbound reply into a fresh task without leaving the modal.
     Hidden by default; .show flips it on. */
  .triage-item .tri-create-form { display: none; margin-top: 10px; padding: 12px; background: rgba(0,0,0,0.06); border-radius: 6px; border: 1px solid var(--line); }
  .triage-item .tri-create-form.show { display: block; }
  .triage-item .tri-create-form label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--muted); }
  .triage-item .tri-create-form label > span { text-transform: uppercase; letter-spacing: 0.04em; }
  .triage-item .tri-create-form input[type="text"],
  .triage-item .tri-create-form input[type="date"],
  .triage-item .tri-create-form select,
  .triage-item .tri-create-form textarea {
    width: 100%; padding: 6px 8px; font-size: 13px;
    background: var(--card); color: var(--text);
    border: 1px solid var(--line); border-radius: 4px; box-sizing: border-box;
  }
  .triage-item .tri-create-form textarea { min-height: 70px; resize: vertical; font-family: inherit; }
  .triage-item .tc-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 8px; margin-bottom: 8px; }
  .triage-item .tc-grid-full { grid-column: 1 / -1; }
  .triage-item .tc-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
  .triage-item .tc-actions .tc-notify { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); cursor: pointer; margin-left: auto; text-transform: none; letter-spacing: 0; }
  .triage-item .tc-actions .tc-notify input { margin: 0; }
  .triage-item .tc-actions .tc-status { font-size: 11px; }
  .triage-item .tc-actions .tc-status.tri-err { color: var(--danger, #c0392b); }
  .triage-item .tc-actions .tc-status.tri-ok { color: var(--ok, #2ecc71); }
  /* Reply composer — lives at the bottom of the thread modal. Sits outside
     the scrollable body so the Send button is always visible while the user
     scrolls history. */
  .reply-composer {
    border-top: 1px solid var(--line); padding: 12px 0 0; margin-top: 6px;
    display: flex; flex-direction: column; gap: 8px;
  }
  .reply-composer .rc-head {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 12px; color: var(--muted);
  }
  .reply-composer .rc-head strong { color: var(--text); font-weight: 600; }
  .reply-composer .rc-hint { font-style: italic; }
  .reply-composer form { display: flex; flex-direction: column; gap: 8px; }
  .reply-composer label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--muted); }
  .reply-composer input[type="text"], .reply-composer textarea {
    background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
    border-radius: 6px; padding: 8px 10px; font: inherit; font-size: 13px; width: 100%;
  }
  .reply-composer textarea { resize: vertical; min-height: 100px; font-family: inherit; }
  .reply-composer .rc-actions {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
  }
  .reply-composer .rc-err { color: var(--err, #e66); font-size: 12px; }
  .reply-composer .btn.primary { background: var(--accent); color: white; border-color: var(--accent); }
  .reply-composer .btn.primary:disabled { opacity: 0.6; cursor: wait; }
  .theme-Growth { border-left: 3px solid #3ecf8e; }
  .theme-Efficiency { border-left: 3px solid #7aa7ff; }
  .theme-Service { border-left: 3px solid #f3b44a; }
  .theme-Governance { border-left: 3px solid #b47ddf; }
  /* Plans view — Pillar × Period matrix. Pillar cells reuse the four
     theme-* color stripes above so the matrix speaks the same color
     language as the By-goal view. Action cells are neutral with a
     status dot per cell. */
  .plans-view { padding: 4px 8px 24px; }
  .plans-toolbar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin: 4px 0 16px; }
  .plans-toolbar h2 { margin: 0; font-size: 18px; font-weight: 600; color: var(--text); }
  .plans-toolbar .plan-meta { color: var(--muted); font-size: 12px; }
  .plans-picker { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; }
  .plans-picker .btn[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
  .matrix { display: grid; gap: 8px; align-items: stretch; }
  .matrix-head { font-size: 11px; color: var(--muted); text-transform: uppercase;
                 letter-spacing: 0.04em; padding: 4px 12px; }
  .pillar-cell { background: var(--panel-2); border: 1px solid var(--line);
                 border-radius: 8px; padding: 12px; cursor: pointer;
                 transition: border-color .15s; display: flex; flex-direction: column; gap: 4px; }
  .pillar-cell:hover { border-color: var(--accent); }
  .pillar-cell .pillar-name { font-weight: 600; font-size: 14px; color: var(--text); line-height: 1.2; }
  .pillar-cell .pillar-meta { color: var(--muted); font-size: 11px; line-height: 1.3; }
  .pillar-cell.theme-Growth     { border-left: 3px solid #3ecf8e; }
  .pillar-cell.theme-Efficiency { border-left: 3px solid #7aa7ff; }
  .pillar-cell.theme-Service    { border-left: 3px solid #f3b44a; }
  .pillar-cell.theme-Governance { border-left: 3px solid #b47ddf; }
  .action-cell { background: var(--panel); border: 1px solid var(--line);
                 border-radius: 8px; padding: 12px; cursor: pointer;
                 display: flex; flex-direction: column; gap: 6px;
                 transition: border-color .15s; min-height: 64px; }
  .action-cell:hover { border-color: var(--accent); }
  .action-cell .action-text { font-size: 13px; color: var(--text); line-height: 1.4; }
  .action-cell .status-row { display: flex; align-items: center; gap: 6px; margin-top: auto; }
  .status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
  .status-dot.planned     { background: var(--muted); }
  .status-dot.in_progress { background: #7aa7ff; }
  .status-dot.done        { background: #3ecf8e; }
  .status-dot.at_risk     { background: #f3b44a; }
  .status-dot.dropped     { background: #555; }
  .status-label { font-size: 11px; color: var(--muted); text-transform: capitalize; }
  .task-count   { font-size: 11px; color: var(--muted); margin-left: auto; }
  .cell-empty   { color: var(--muted); font-style: italic; font-size: 12px; }
  /* Cell detail modal: action title + detail prose + linked tasks list. */
  .plan-cell-meta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
                    color: var(--muted); font-size: 12px; margin: 6px 0 12px; }
  .plan-cell-detail { font-size: 14px; line-height: 1.55; color: var(--text); white-space: pre-wrap; }
  .plan-cell-tasks { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
  .plan-cell-tasks h3 { font-size: 13px; margin: 0 0 8px; color: var(--muted); font-weight: 500; }
  .plan-cell-tasks ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
  .plan-cell-tasks li { padding: 6px 10px; background: var(--panel-2); border-radius: 6px;
                        border: 1px solid var(--line); font-size: 13px; }
  /* Subtask rollup — parent cards show a chip + collapsible children list */
  .subtask-toggle {
    background: var(--panel-2); color: var(--muted); border: 1px solid var(--line);
    border-radius: 999px; font-size: 11px; padding: 3px 10px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px; line-height: 1.3;
  }
  .subtask-toggle:hover { color: var(--text); border-color: var(--accent); }
  .subtask-toggle .caret { font-size: 9px; display: inline-block; transition: transform .15s; color: var(--muted); }
  .card.subs-open .subtask-toggle .caret { transform: rotate(90deg); }
  .subtask-toggle .st-count { font-weight: 600; color: var(--text); }
  .subtask-toggle .st-chip { padding: 0 6px; border-radius: 999px; font-size: 10px; font-weight: 600; border: 1px solid currentColor; }
  .subtask-toggle .st-chip.ok { color: var(--ok); }
  .subtask-toggle .st-chip.warn { color: var(--warn); }
  .subtask-toggle .st-chip.blue { color: var(--accent); }
  .subtask-toggle .st-chip.muted { color: var(--muted); }
  .subtasks-wrap { margin-top: 8px; border-top: 1px dashed var(--line); padding-top: 8px; display: none; flex-direction: column; gap: 6px; }
  .card.subs-open > .subtasks-wrap { display: flex; }
  .card.subtask { background: var(--panel-2); border-left-width: 2px; padding: 9px 11px; }
  .card.subtask .id { color: var(--accent); }
  .card.subtask.depth-2 { margin-left: 12px; }
  .login { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; gap: 18px; padding: 20px; text-align: center; }
  .login h1 { font-size: 22px; margin: 0; }
  .login .sub { color: var(--muted); font-size: 14px; max-width: 360px; }
  .login .err { color: var(--danger); font-size: 13px; min-height: 18px; max-width: 420px; }
  .login .g-container { min-height: 42px; }
  .user-chip { display: inline-flex; align-items: center; gap: 8px; padding: 3px 10px 3px 3px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); font-size: 12px; color: var(--muted); }
  .user-chip img { width: 24px; height: 24px; border-radius: 50%; }
  .user-chip .role-tag { font-size: 10px; background: var(--panel-2); padding: 1px 6px; border-radius: 999px; }
  .user-chip .role-tag.admin { color: var(--accent); border: 1px solid var(--accent); }
  /* Blocker callout on blocked cards */
  .blocker-banner {
    background: rgba(243, 180, 74, 0.08); border-left: 3px solid var(--warn);
    color: var(--text); padding: 7px 10px; font-size: 12px; border-radius: 4px;
    margin-top: 2px; display: flex; gap: 8px; align-items: flex-start; cursor: pointer;
  }
  .blocker-banner .bb-icon { color: var(--warn); }
  .blocker-banner .bb-label { font-weight: 600; color: var(--warn); margin-right: 4px; }
  .blocker-banner .bb-empty { color: var(--muted); font-style: italic; }
  .blocker-banner:hover { background: rgba(243, 180, 74, 0.14); }
  /* Latest status-change note */
  .status-note { color: var(--muted); font-size: 12px; font-style: italic; border-top: 1px dashed var(--line); padding-top: 6px; margin-top: 2px; display: flex; gap: 6px; }
  .status-note .sn-icon { color: var(--muted); }
  /* Status-change modal */
  .status-modal-body { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 8px; }
  .status-modal-body label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
  .status-modal-body select, .status-modal-body textarea {
    background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; font: inherit; font-size: 13px;
  }
  .status-modal-body textarea { min-height: 80px; resize: vertical; }
  .status-modal-body select:focus, .status-modal-body textarea:focus { outline: none; border-color: var(--accent); }
  .status-modal-body .req-note { color: var(--danger); font-size: 11px; }
  .status-modal-body .form-err { color: var(--danger); font-size: 12px; min-height: 16px; }
  /* Plan-doc link next to group header (By person view) */
  .plan-doc-link { font-size: 12px; color: var(--accent); text-decoration: none; margin-left: 8px; background: transparent; border: 0; cursor: pointer; padding: 0; font-family: inherit; }
  .plan-doc-link:hover { text-decoration: underline; }
  .plan-doc-edit { background: transparent; border: 0; color: var(--muted); font-size: 11px; cursor: pointer; padding: 2px 6px; border-radius: 4px; }
  .plan-doc-edit:hover { background: var(--panel-2); color: var(--text); }
  /* Plan modals (view + edit) */
  .plan-modal-body { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 8px; }
  .plan-modal-body label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
  .plan-modal-body input[type=text], .plan-modal-body input[type=url], .plan-modal-body textarea {
    background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; font: inherit; font-size: 13px;
  }
  .plan-modal-body textarea { min-height: 220px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
  .plan-modal-body input:focus, .plan-modal-body textarea:focus { outline: none; border-color: var(--accent); }
  .plan-modal-body .form-row { display: flex; gap: 10px; }
  .plan-modal-body .form-row > * { flex: 1; }
  .plan-modal-body .file-drop {
    border: 1.5px dashed var(--line); border-radius: 8px; padding: 16px; text-align: center;
    color: var(--muted); font-size: 12px; transition: border-color .15s, background .15s; cursor: pointer;
  }
  .plan-modal-body .file-drop:hover, .plan-modal-body .file-drop.dragover { border-color: var(--accent); background: rgba(74, 143, 243, 0.06); }
  .plan-modal-body .file-drop input[type=file] { display: none; }
  .plan-modal-body .file-drop.loaded { color: var(--text); border-style: solid; }
  .plan-modal-body .form-err { color: var(--danger); font-size: 12px; min-height: 16px; }
  .plan-modal-body .hint { font-size: 11px; color: var(--muted); }
  .plan-rendered { padding: 4px 0 8px; line-height: 1.55; color: var(--text); max-height: 60vh; overflow-y: auto; }
  .plan-rendered h1, .plan-rendered h2, .plan-rendered h3 { margin: 1em 0 0.4em; color: var(--text); }
  .plan-rendered h1 { font-size: 20px; } .plan-rendered h2 { font-size: 17px; } .plan-rendered h3 { font-size: 15px; }
  .plan-rendered p { margin: 0.6em 0; }
  .plan-rendered ul, .plan-rendered ol { margin: 0.5em 0; padding-left: 22px; }
  .plan-rendered li { margin: 0.2em 0; }
  .plan-rendered code { background: var(--panel-2); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
  .plan-rendered pre { background: var(--panel-2); padding: 10px; border-radius: 6px; overflow-x: auto; font-size: 12px; }
  .plan-rendered pre code { background: transparent; padding: 0; }
  .plan-rendered blockquote { border-left: 3px solid var(--line); margin: 0.6em 0; padding: 2px 12px; color: var(--muted); }
  .plan-rendered a { color: var(--accent); }
  .plan-rendered table { border-collapse: collapse; margin: 0.6em 0; }
  .plan-rendered th, .plan-rendered td { border: 1px solid var(--line); padding: 4px 8px; font-size: 12px; }
  .plan-rendered hr { border: 0; border-top: 1px solid var(--line); margin: 1em 0; }
  .plan-meta { font-size: 11px; color: var(--muted); padding-bottom: 8px; border-bottom: 1px dashed var(--line); margin-bottom: 10px; }
  .plan-empty { color: var(--muted); font-style: italic; padding: 20px 0; text-align: center; }
  /* Department subtitle under person name. Indented slightly so it visually
     hangs under the name rather than the chevron. */
  .person-dept { display: block; font-size: 11px; color: var(--muted); font-weight: 400; margin: -4px 0 8px 20px; letter-spacing: 0.02em; }
  /* Dashboard chips — shown next to the plan link in the person header */
  .dash-chip {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; color: var(--accent); text-decoration: none;
    padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line);
    background: var(--panel-2); margin-left: 6px; white-space: nowrap;
  }
  .dash-chip:hover { border-color: var(--accent); }
  .dash-chip .dash-ico { opacity: 0.8; }
  /* Dashboards editor inside the profile modal */
  .dash-list { display: flex; flex-direction: column; gap: 6px; }
  .dash-row { display: flex; gap: 6px; align-items: center; }
  .dash-row input[type=text], .dash-row input[type=url] { flex: 1; }
  .dash-row .dash-title { flex: 0 0 140px; }
  .dash-row button.remove-row {
    background: transparent; color: var(--muted); border: 1px solid var(--line);
    border-radius: 4px; padding: 5px 8px; font-size: 14px; cursor: pointer; line-height: 1;
  }
  .dash-row button.remove-row:hover { color: var(--danger); border-color: var(--danger); }
  button.add-dash-row {
    align-self: flex-start; background: transparent; color: var(--accent);
    border: 1px dashed var(--line); border-radius: 4px; padding: 4px 10px; font-size: 12px; cursor: pointer;
  }
  /* Contacts view — admin-only table to browse / add / edit contacts.
     Uses the same panel + line tokens as the rest of the dashboard so it
     feels native, not grafted on. */
  .contacts-view { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; }
  .contacts-header { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
  .contacts-header h2 { margin: 0; font-size: 18px; font-weight: 600; }
  .contacts-header .hint { font-size: 12px; color: var(--muted); flex: 1 1 320px; }
  .contacts-table { width: 100%; border-collapse: collapse; font-size: 12.5px; table-layout: auto; }
  .contacts-table th, .contacts-table td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
  .contacts-table th { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); background: var(--panel-2); }
  .contacts-table tbody tr:hover { background: var(--panel-2); }
  /* Tightened column widths — Name + Email get the bulk; Role/Dept stay narrow;
     Open is a tiny chip; Sign-in & Mailbox takes what it needs (system_email
     can be long); Actions hugs right with auto width. */
  .contacts-table th.c-name,   .contacts-table td.c-name   { font-weight: 600; white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
  .contacts-table th.c-email,  .contacts-table td.c-email  { color: var(--muted); max-width: 240px; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
  .contacts-table th.c-role,   .contacts-table td.c-role   { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
  .contacts-table th.c-dept,   .contacts-table td.c-dept   { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
  .contacts-table th.c-open,   .contacts-table td.c-open   { text-align: center; width: 56px; white-space: nowrap; }
  .contacts-table th.c-mailbox,.contacts-table td.c-mailbox{ font-size: 11px; }
  .contacts-table th.c-actions,.contacts-table td.c-actions{ text-align: right; white-space: nowrap; width: 1%; }
  .contacts-table td.c-actions .btn { margin-left: 4px; }
  .open-count {
    display: inline-block; min-width: 22px; padding: 2px 8px; border-radius: 999px;
    background: rgba(74, 143, 243, 0.15); color: var(--accent);
    font-size: 11px; font-weight: 600; text-align: center;
  }
  /* Access matrix — reuses the contacts-table layout for consistency. Each
     cell is a centered checkbox; admin rows show a lock-like "admin" chip
     with the boxes disabled since admins implicitly get everything. */
  .access-table th.c-perm, .access-table td.c-perm { text-align: center; width: 100px; }
  .access-table td.c-perm input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent); }
  .access-table td.c-perm input[type="checkbox"]:disabled { opacity: 0.5; cursor: not-allowed; }
  .access-row-admin td { background: rgba(74, 143, 243, 0.06); }
  .perm-admin-chip {
    display: inline-block; padding: 2px 8px; border-radius: 999px;
    background: rgba(74, 143, 243, 0.18); color: var(--accent);
    font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  }
  .perm-saving-chip {
    display: inline-block; padding: 1px 7px; border-radius: 999px;
    background: rgba(200, 200, 200, 0.15); color: var(--muted);
    font-size: 10px; font-weight: 500; margin-left: 6px;
  }
  .perm-saved-chip {
    display: inline-block; padding: 1px 7px; border-radius: 999px;
    background: rgba(38, 180, 115, 0.15); color: #26b473;
    font-size: 10px; font-weight: 500; margin-left: 6px;
  }
  .perm-error-chip {
    display: inline-block; padding: 1px 7px; border-radius: 999px;
    background: rgba(232, 86, 86, 0.15); color: #ff6b6b;
    font-size: 10px; font-weight: 500; margin-left: 6px;
  }
  /* "no access" warning chip — for non-admin contacts with zero
     capabilities granted. Amber so it pops next to admin chips without
     screaming "error". */
  .perm-noaccess-chip {
    display: inline-block; padding: 2px 8px; border-radius: 999px;
    background: rgba(245, 158, 11, 0.16); color: #f59e0b;
    font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
    text-transform: uppercase; margin-left: 6px;
  }
  .dim { color: var(--muted); }
  .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
  /* Per-person / per-goal group-header action buttons. The group summary is
     already a flex row inside an <h2>; these sit alongside "+ profile" and
     "📄 Plan". Keep them visually lightweight so they don't compete with
     the person's name. */
  .grp-action {
    font-size: 11px; padding: 2px 9px; border-radius: 6px;
    background: transparent; color: var(--muted);
    border: 1px solid var(--line); cursor: pointer;
    margin-left: 4px; white-space: nowrap; line-height: 1.4;
  }
  .grp-action:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
  .grp-action.primary-ish { color: var(--accent); border-color: var(--accent); }
  .grp-action.busy { opacity: 0.55; cursor: wait; }
  /* "When to notify" radio group inside the new-task modal */
  .notify-fieldset {
    border: 1px solid var(--line); border-radius: 8px;
    padding: 10px 12px; margin-top: 4px;
    display: flex; flex-direction: column; gap: 4px;
    background: var(--panel-2);
  }
  .notify-fieldset legend {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--muted); padding: 0 6px;
  }
  .notify-opt { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
  .notify-opt input[type=radio] { margin: 0; }
  .notify-opt em { color: var(--muted); font-style: normal; font-size: 11px; }
  .notify-hint { font-size: 11px; color: var(--muted); margin-top: 4px; }
  /* "Send email now" icon button on task cards, next to the ask-status ✉ */
  .iconbtn.re-send { color: var(--muted); }
  .iconbtn.re-send:hover { color: var(--accent); }
  button.add-dash-row:hover { border-color: var(--accent); background: rgba(74, 143, 243, 0.06); }
  /* Profile modal section dividers */
  .profile-section { padding: 8px 0; border-top: 1px dashed var(--line); }
  .profile-section:first-of-type { border-top: 0; padding-top: 2px; }
  .profile-section h3 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
  /* Profile-edit modal: top-level tab bar. Each section group is a tab so the
     admin doesn't scroll one long form. Bar sticks to the top of the scrolling
     modal-body so it stays reachable from a tall tab (Plan / Dashboards). */
  .profile-tabs { display:flex; flex-wrap:wrap; gap:2px; border-bottom:1px solid var(--line);
    margin:0 0 4px; position:sticky; top:0; background:var(--panel); z-index:2; }
  .profile-tab { appearance:none; -webkit-appearance:none; background:none; border:none;
    border-bottom:2px solid transparent; margin-bottom:-1px; padding:7px 11px; font:inherit;
    font-size:11.5px; font-weight:600; letter-spacing:0.3px; color:var(--muted); cursor:pointer; }
  .profile-tab:hover { color:var(--text); }
  .profile-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
  .profile-tabpanel { display:none; }
  .profile-tabpanel.active { display:block; }
  /* Task file attachments — chips row under the task description */
  .files-row {
    display: flex; flex-wrap: wrap; gap: 5px; align-items: center;
    padding-top: 6px; margin-top: 2px; border-top: 1px dashed var(--line);
  }
  .files-row .files-label { font-size: 11px; color: var(--muted); margin-right: 2px; }
  .file-chip {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; color: var(--text); text-decoration: none;
    padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line);
    background: var(--panel-2); max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .file-chip:hover { border-color: var(--accent); color: var(--accent); }
  .file-chip:active { transform: scale(0.97); }
  .file-chip .file-ico { opacity: 0.8; }
  /* Refresh button spin — activated by .spinning class while a refresh is in flight */
  #refreshBtn.spinning { animation: spin 0.7s linear infinite; pointer-events: none; opacity: 0.7; }
  @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
  .file-chip-add {
    font-size: 11px; color: var(--muted); cursor: pointer;
    padding: 2px 8px; border-radius: 999px; border: 1px dashed var(--line);
    background: transparent;
  }
  .file-chip-add:hover { color: var(--accent); border-color: var(--accent); }
  /* Completed-filter segmented control */
  .seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
  .seg .btn { border: 0; border-radius: 0; padding: 6px 10px; }
  .seg .btn.active { background: var(--accent); color: white; }
  .msg { color: var(--muted); padding: 20px; text-align: center; }
  .status-area { display: flex; align-items: center; gap: 8px; }
  /* ── Agent chat drawer ─────────────────────────────────────────────────
     Slides in from the right of the viewport when toggled. Positioned fixed
     so it floats above the main grid and stays put when the user scrolls.
     We keep `main` reachable via `body.chat-open` so an admin can still see
     their tasks while typing. */
  body.chat-open { --chat-width: 420px; }
  @media (max-width: 860px) { body.chat-open { --chat-width: 100vw; } }
  #chatDrawer {
    position: fixed; top: 0; right: 0; height: 100vh; width: var(--chat-width, 420px);
    background: var(--panel); border-left: 1px solid var(--line);
    display: none; flex-direction: column; z-index: 50;
    box-shadow: -6px 0 30px rgba(0,0,0,0.25);
  }
  body.chat-open #chatDrawer { display: flex; }
  #chatDrawer header.chat-head {
    padding: 12px 14px; border-bottom: 1px solid var(--line);
    display: flex; align-items: center; gap: 10px; position: static;
    background: var(--panel); flex-wrap: nowrap;
  }
  #chatDrawer .chat-head h2 { font-size: 14px; margin: 0; font-weight: 600; flex: 1; }
  #chatDrawer .chat-head .chat-sub { color: var(--muted); font-size: 11px; }
  #chatDrawer .chat-close {
    background: transparent; color: var(--muted); border: 0; font-size: 20px;
    cursor: pointer; padding: 2px 6px; line-height: 1;
  }
  #chatDrawer .chat-close:hover { color: var(--text); }
  #chatMessages {
    flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 14px;
  }
  .chat-msg { display: flex; flex-direction: column; gap: 4px; max-width: 92%; }
  .chat-msg.user { align-self: flex-end; }
  .chat-msg.assistant { align-self: flex-start; }
  .chat-msg .chat-bubble {
    padding: 8px 12px; border-radius: 10px; font-size: 13px; line-height: 1.45;
    white-space: pre-wrap; word-wrap: break-word;
  }
  .chat-msg.user .chat-bubble { background: var(--accent); color: white; border-top-right-radius: 3px; }
  .chat-msg.assistant .chat-bubble { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-top-left-radius: 3px; }
  .chat-msg .chat-tools {
    display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--muted);
    background: transparent; padding: 2px 6px;
  }
  .chat-tool {
    display: flex; align-items: center; gap: 6px; padding: 2px 0;
  }
  .chat-tool .chat-tool-name { font-family: ui-monospace, Menlo, monospace; color: var(--accent); }
  .chat-tool .chat-tool-summary { color: var(--muted); }
  .chat-tool.error .chat-tool-name { color: var(--danger); }
  .chat-typing {
    align-self: flex-start; padding: 6px 10px; font-size: 12px; color: var(--muted);
    background: var(--panel-2); border: 1px dashed var(--line); border-radius: 10px;
  }
  .chat-typing::after {
    content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px;
    background: var(--muted); border-radius: 50%;
    animation: chatPulse 1s infinite ease-in-out;
  }
  @keyframes chatPulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
  #chatInputWrap {
    border-top: 1px solid var(--line); padding: 10px 12px; display: flex;
    flex-direction: column; gap: 8px; background: var(--panel);
  }
  #chatInput {
    width: 100%; background: var(--panel-2); color: var(--text);
    border: 1px solid var(--line); border-radius: 8px;
    padding: 8px 10px; font: inherit; font-size: 13px;
    min-height: 56px; max-height: 200px; resize: vertical;
  }
  #chatInput:focus { outline: none; border-color: var(--accent); }
  #chatInputRow { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
  #chatInputRow .chat-hint { font-size: 11px; color: var(--muted); }
  #chatSendBtn, #tdChatSendBtn { background: var(--accent); color: white; border: 0; border-radius: 8px;
    padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
  #chatSendBtn:disabled, #tdChatSendBtn:disabled { opacity: 0.5; cursor: not-allowed; }
  #chatNewBtn { background: transparent; color: var(--muted); border: 1px solid var(--line);
    border-radius: 8px; padding: 5px 10px; font-size: 11px; cursor: pointer; }
  #chatNewBtn:hover { color: var(--text); border-color: var(--text); }
  #chatError { color: var(--danger); font-size: 12px; padding: 0 2px; }
  .chat-empty {
    color: var(--muted); font-size: 12.5px; text-align: center; padding: 40px 20px;
    display: flex; flex-direction: column; gap: 14px;
  }
  .chat-empty .chat-empty-title { font-size: 15px; color: var(--text); font-weight: 600; }
  .chat-empty .chat-examples { display: flex; flex-direction: column; gap: 6px; align-items: stretch; margin-top: 6px; }
  .chat-example {
    background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px;
    padding: 8px 10px; font-size: 12px; color: var(--text); text-align: left; cursor: pointer;
  }
  .chat-example:hover { border-color: var(--accent); color: var(--accent); }
  details.group-wrap > summary { cursor: pointer; list-style: none; user-select: none; }
  details.group-wrap > summary::-webkit-details-marker { display: none; }
  details.group-wrap > summary::before { content: "▾"; display: inline-block; width: 14px; color: var(--muted); transition: transform .15s; }
  details.group-wrap:not([open]) > summary::before { transform: rotate(-90deg); }
  /* By-department view — nested "department → person → tasks" hierarchy. The
     department wrapper is visually heavier; the person rows inside are lighter
     and default to collapsed so you can scan a department without drowning in
     every task card at once. */
  details.dept-wrap { margin-bottom: 22px; border-top: 1px solid var(--line); padding-top: 12px; }
  details.dept-wrap > summary { cursor: pointer; list-style: none; user-select: none; }
  details.dept-wrap > summary::-webkit-details-marker { display: none; }
  details.dept-wrap > summary::before { content: "▾"; display: inline-block; width: 14px; color: var(--muted); transition: transform .15s; }
  details.dept-wrap:not([open]) > summary::before { transform: rotate(-90deg); }
  .dept-title { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); display: inline-flex; align-items: baseline; gap: 10px; }
  .dept-title .dept-name { color: var(--text); }
  .dept-title .count { color: var(--muted); font-weight: 500; font-size: 12px; text-transform: none; letter-spacing: 0; }
  /* Inline headline — the short "what this team is trying to do" sentence next
     to the people/tasks count. Italic + muted so it reads as context, not a
     peer with the dept name. The "📄 Goals" / "+ Goals" button is tiny and
     low-contrast unless hovered. */
  .dept-title .dept-headline { color: var(--muted); font-weight: 400; font-size: 12px; text-transform: none; letter-spacing: 0; font-style: italic; }
  .dept-title .dept-headline.empty { opacity: 0.55; }
  .dept-goals-btn {
    display: inline-flex; align-items: center; gap: 4px;
    background: transparent; border: 1px solid var(--line);
    color: var(--muted); font-size: 11px; font-weight: 500;
    padding: 2px 8px; border-radius: 999px; cursor: pointer;
    text-transform: none; letter-spacing: 0;
    transition: color .12s, border-color .12s, background .12s;
  }
  .dept-goals-btn:hover { color: var(--text); border-color: var(--text); background: var(--line); }
  .dept-goals-btn.empty { opacity: 0.7; }
  /* Headline inside the goals view modal, above the rendered markdown. */
  .goals-headline { font-size: 15px; font-weight: 500; color: var(--text); margin-bottom: 14px; }
  .goals-headline:empty { display: none; }
  /* Multi-doc list in the goals view modal — slimmer than a plain <ul> and
     matches the sub-section chip style used elsewhere in the dashboard. */
  .goals-doc-list { margin: 0 0 18px; padding: 10px 14px; background: var(--panel-alt); border: 1px solid var(--line); border-radius: 8px; }
  .goals-doc-list strong { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 6px; }
  .goals-doc-list ul { margin: 0; padding-left: 18px; font-size: 14px; }
  .goals-doc-list li { margin: 2px 0; }
  .dept-body { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; padding-left: 18px; }
  details.person-row { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
  details.person-row > summary { cursor: pointer; list-style: none; user-select: none; padding: 8px 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  details.person-row > summary::-webkit-details-marker { display: none; }
  details.person-row > summary::before { content: "▸"; display: inline-block; width: 12px; color: var(--muted); transition: transform .15s; font-size: 11px; }
  details.person-row[open] > summary::before { transform: rotate(90deg); }
  details.person-row[open] > summary { border-bottom: 1px solid var(--line); }
  .person-row-name { font-weight: 600; font-size: 13.5px; }
  .person-row-email { color: var(--muted); font-size: 11.5px; }
  .person-row-count { margin-left: auto; color: var(--muted); font-size: 11.5px; }
  .person-row-count .pill-count { display: inline-block; padding: 1px 7px; border-radius: 999px; background: var(--panel-2); color: var(--accent); font-weight: 600; font-size: 11px; margin-left: 4px; }
  .person-row-body { padding: 10px 12px 12px; }
  .person-row-body .cards { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
  .kbd { font-family: ui-monospace, monospace; font-size: 11px; padding: 1px 5px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px; color: var(--muted); }

  /* ── Video calling ─────────────────────────────────────────────────────
     The call drawer slides in from the right. We keep the main dashboard
     visible on the left so you can screen-share the dashboard itself while
     talking about a task. `transform` on a pre-positioned fixed element is
     the cheap way to get a smooth slide without JS animations.

     Two size modes:
       .call-drawer          — sidebar (520px). Good for 1:1 chat while you
                                keep the dashboard visible alongside.
       .call-drawer.expanded — near-fullscreen. Needed when the other person
                                is screen-sharing — in sidebar width, the
                                prebuilt Daily UI renders the shared screen
                                as a small tile that's hard to read. The
                                Expand button flips into this mode and the
                                iframe auto-reflows. */
  .call-drawer {
    position: fixed; top: 0; right: 0; height: 100vh;
    width: min(520px, 95vw); max-width: 95vw;
    background: #0a0b0e; border-left: 1px solid var(--line);
    box-shadow: -8px 0 32px rgba(0,0,0,0.45);
    transform: translateX(100%);
    transition: transform 220ms ease, width 220ms ease;
    z-index: 1200; display: flex; flex-direction: column;
  }
  .call-drawer.open { transform: translateX(0); }
  .call-drawer.expanded { width: min(1600px, 96vw); }
  .call-drawer header {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-bottom: 1px solid var(--line);
    background: var(--panel);
  }
  .call-drawer header .call-drawer-title { font-weight: 600; font-size: 14px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .call-drawer header .call-sub { font-weight: 400; color: var(--muted); font-size: 12px; margin-left: 6px; }
  .call-drawer header .btn { font-size: 12px; padding: 4px 10px; }
  /* End-call needs to be immediately legible — users were missing it and
     didn't know how to hang up. Bigger, bolder, brighter. */
  .call-drawer header .btn.danger {
    background: #c62525; color: #fff; border-color: #a81f1f;
    font-size: 13px; font-weight: 600; padding: 6px 14px;
    box-shadow: 0 2px 6px rgba(198, 37, 37, 0.4);
  }
  .call-drawer header .btn.danger:hover { background: #e03030; border-color: #c62525; }
  /* Stop-share button: visually distinct from End-call so users don't
     confuse them. Amber border + dark fill. */
  #callDrawerStopShare {
    background: #2a2416; color: #ffd78a; border-color: #c9a35a;
    font-weight: 600;
  }
  #callDrawerStopShare:hover { background: #3a3220; }
  .call-drawer .call-body { flex: 1; position: relative; background: #000; }
  .call-drawer .call-body iframe { width: 100%; height: 100%; border: 0; display: block; }
  .call-drawer .call-body .call-placeholder {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 10px;
    color: var(--muted); font-size: 13px; text-align: center; padding: 20px;
  }
  .call-drawer .call-error {
    padding: 12px 14px; background: rgba(200,40,40,0.15); color: #ffb8b8;
    border-top: 1px solid rgba(255,100,100,0.3); font-size: 13px;
  }

  /* Incoming-call banner: fixed at the top, high z-index so it sits above
     modals. Slide-down animation on mount via keyframes. */
  .incoming-call-banner {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1300;
    background: linear-gradient(135deg, #1a4d8f, #0b74de);
    color: #fff; padding: 10px 16px;
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
    animation: icb-slide 180ms ease;
  }
  @keyframes icb-slide {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
  }
  .incoming-call-banner .icb-ring {
    display: inline-flex; width: 28px; height: 28px; border-radius: 50%;
    background: rgba(255,255,255,0.15); align-items: center; justify-content: center;
    animation: icb-pulse 1.6s ease-in-out infinite;
  }
  @keyframes icb-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.4); }
    50%      { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
  }
  .incoming-call-banner .icb-text { flex: 1; min-width: 200px; font-size: 14px; line-height: 1.35; }
  .incoming-call-banner .icb-text strong { font-weight: 600; }
  .incoming-call-banner .icb-text .icb-note { display: block; font-size: 12px; opacity: 0.85; margin-top: 2px; }
  .incoming-call-banner .icb-btn {
    font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 6px;
    border: 0; cursor: pointer;
  }
  .incoming-call-banner .icb-btn.accept { background: #2da44e; color: #fff; }
  .incoming-call-banner .icb-btn.accept:hover { background: #2c974b; }
  .incoming-call-banner .icb-btn.dismiss { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.4); }
  .incoming-call-banner .icb-btn.dismiss:hover { background: rgba(255,255,255,0.12); }

  /* The 📹 button on cards inherits .iconbtn styling; keep it slightly
     narrower since the glyph is wider than ✉. Active-call variant turns
     green so both sides can see the room is live. */
  .iconbtn.call-btn { font-size: 14px; }
  .iconbtn.call-btn.active { background: #2da44e; color: #fff; border-color: #2da44e; }

  /* "Join call" pill that appears on a task card when an active room is
     attached to that task (via the incoming poll). Clickable; opens the
     call drawer directly — no email roundtrip. */
  .join-call-pill {
    display: inline-flex; align-items: center; gap: 6px;
    background: #1f6e3a; color: #fff; font-size: 11px; font-weight: 600;
    padding: 2px 8px; border-radius: 999px; text-decoration: none; cursor: pointer;
    border: 0;
  }
  .join-call-pill:hover { background: #2da44e; }
  .join-call-pill::before { content: "📹"; font-size: 12px; }

  /* ────────────────────────────────────────────────────────────────────────
     Rates view ("Rates — Digital (SM)")
     Live competitor FX + fee snapshot from the rates Turso table. Sharemoney
     is always the first data column and highlighted so the eye goes there
     first. Rows are countries (ISO2 + currency + flag). The "Δ best" column
     is positive when Sharemoney beats the best competitor, negative when
     we're behind — color-coded green/red for fast scanning.
     ──────────────────────────────────────────────────────────────────────── */
  .rates-view, .signups-view {
    max-width: 1280px; margin: 16px auto; padding: 0 16px;
  }
  .rates-head, .signups-head {
    display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
    margin-bottom: 12px;
  }
  .rates-head h2, .signups-head h2 { margin: 0; font-size: 22px; }
  .rates-head .subtitle, .signups-head .subtitle {
    color: var(--muted); font-size: 13px;
  }
  .rates-head .stamp, .signups-head .stamp {
    color: var(--muted); font-size: 12px; margin-left: auto;
  }
  /* Rates controls — snapshot picker + country multi-select. Sits between
     the view heading and the AI panel. Flex-wrap so it collapses gracefully
     on narrow screens. */
  .rates-controls {
    display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
    margin: 0 0 12px 0; padding: 10px 14px;
    background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  }
  .rates-controls .control {
    display: inline-flex; align-items: center; gap: 8px; font-size: 13px;
  }
  .rates-controls .control > .label {
    color: var(--muted); font-size: 12px; font-weight: 500;
  }
  .rates-controls select {
    background: var(--panel-2); color: var(--text);
    border: 1px solid var(--line); border-radius: 6px;
    padding: 5px 8px; font-size: 13px; cursor: pointer;
  }
  .rates-controls .country-toggle {
    background: var(--panel-2); color: var(--text);
    border: 1px solid var(--line); border-radius: 6px;
    padding: 5px 10px; font-size: 13px; cursor: pointer;
  }
  .rates-controls .country-toggle:hover { background: var(--line); }
  .rates-controls .reset-link {
    color: var(--accent); background: none; border: 0; cursor: pointer;
    font-size: 12px; text-decoration: underline; padding: 0;
  }
  /* Popover for the country checkboxes — anchored under its button. */
  .country-picker {
    position: absolute; z-index: 20;
    background: var(--panel); border: 1px solid var(--line);
    border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    padding: 10px; min-width: 240px; max-height: 340px;
    display: flex; flex-direction: column; gap: 6px;
  }
  /* Our display:flex above outranks the UA's [hidden]{display:none},
     so force it explicitly — otherwise picker.hidden=true doesn't hide. */
  .country-picker[hidden] { display: none; }
  .country-picker .picker-head {
    display: flex; gap: 8px; align-items: center;
    border-bottom: 1px solid var(--line); padding-bottom: 6px;
  }
  .country-picker .picker-head button {
    background: transparent; color: var(--accent); border: 0; cursor: pointer;
    font-size: 12px; text-decoration: underline; padding: 0;
  }
  .country-picker .picker-list {
    overflow-y: auto; display: flex; flex-direction: column; gap: 2px;
    padding-right: 4px;
  }
  .country-picker .picker-list label {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; padding: 3px 4px; border-radius: 4px; cursor: pointer;
  }
  .country-picker .picker-list label:hover { background: var(--panel-2); }
  .country-picker .picker-list input[type=checkbox] { margin: 0; }
  .rates-table, .signups-table {
    width: 100%; border-collapse: collapse; font-size: 13px;
    background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
    overflow: hidden;
  }
  .rates-table th, .rates-table td,
  .signups-table th, .signups-table td {
    padding: 8px 10px; text-align: right; border-bottom: 1px solid var(--border);
    white-space: nowrap;
  }
  .rates-table th:first-child, .rates-table td:first-child,
  .signups-table th:first-child, .signups-table td:first-child {
    text-align: left; font-weight: 500;
  }
  .rates-table thead th, .signups-table thead th {
    /* Readability first: header labels (MTO names, column titles) need to
       read instantly against the dark header stripe. The background is
       hardcoded dark (#0f1621) regardless of theme, so the text must also
       be theme-independent — var(--text) flips to near-black in light mode
       and disappears. Pin to a near-white so it reads in both themes. */
    background: #0f1621; color: #e7e9ee; font-weight: 600;
    font-size: 13px; letter-spacing: 0.2px;
    position: sticky; top: 0; z-index: 1;
  }
  .rates-table tbody tr:hover, .signups-table tbody tr:hover {
    background: rgba(255,255,255,0.02);
  }
  /* Sharemoney column highlight — pinned first MTO. Uses theme-neutral text
     (var(--text)) so it reads on both light and dark backgrounds; earlier
     version hardcoded near-white, which was invisible on light mode. */
  .rates-table .col-sm {
    background: rgba(74, 158, 255, 0.18);
    font-weight: 700;
    color: var(--text);
    border-left: 2px solid var(--accent);
    border-right: 2px solid var(--accent);
  }
  .rates-table thead .col-sm {
    background: rgba(74, 158, 255, 0.30);
    color: var(--accent);
    font-weight: 700;
  }
  .rates-table .country-cell { display: flex; align-items: center; gap: 8px; }
  .rates-table .cc { color: var(--muted); font-size: 11px; font-weight: 500; min-width: 28px; }
  .rates-table .cur { color: var(--muted); font-size: 11px; }
  .rates-table .delta-pos { color: #4ade80; font-weight: 600; }
  .rates-table .delta-neg { color: #f87171; font-weight: 600; }
  .rates-table .delta-nil { color: var(--muted); }
  .rates-table td.dim { color: var(--muted); }
  .rates-table .missing { color: #555; }

  /* AI analysis panels (rates + signups share the same look). Render as a
     call-out block above/below the table with markdown rendered via a tiny
     helper (renderMarkdown). The "refresh" button re-triggers the netlify
     function; loading state swaps to a shimmer so the user sees progress. */
  .ai-panel {
    background: linear-gradient(180deg, #0e1a2b 0%, #0b1320 100%);
    border: 1px solid #1e3a5f; border-radius: 10px; padding: 16px 20px;
    margin: 16px 0; position: relative;
  }
  .ai-panel h3 {
    margin: 0 0 8px 0; font-size: 15px; font-weight: 600; color: #8ab4f8;
    display: flex; align-items: center; gap: 8px;
  }
  .ai-panel h3::before { content: "✨"; font-size: 16px; }
  /* Panel background is intentionally dark (navy gradient) in both light and
     dark themes, so the body/meta text must be explicitly light-colored —
     don't inherit from --text/--muted, which go near-black in light mode and
     render unreadable on the dark panel. */
  .ai-panel .ai-meta { color: #9aa7bd; font-size: 12px; margin-bottom: 12px; }
  .ai-panel .ai-body { font-size: 14px; line-height: 1.55; color: #e7ecf5; }
  .ai-panel .ai-body h2, .ai-panel .ai-body h3, .ai-panel .ai-body h4 {
    margin: 14px 0 6px 0; font-size: 14px; color: #cfe2ff;
  }
  .ai-panel .ai-body ul, .ai-panel .ai-body ol { margin: 6px 0 10px 22px; }
  .ai-panel .ai-body li { margin-bottom: 4px; color: #e7ecf5; }
  .ai-panel .ai-body p { margin: 6px 0 10px 0; color: #e7ecf5; }
  .ai-panel .ai-body strong { color: #fff; }
  .ai-panel .ai-body em { color: #e7ecf5; }
  .ai-panel .ai-body a { color: #8ab4f8; }
  .ai-panel .ai-body code {
    background: rgba(255,255,255,0.1); color: #f0f4ff;
    padding: 1px 6px; border-radius: 4px; font-size: 12px;
  }
  .ai-panel .ai-empty { color: #9aa7bd; font-style: italic; font-size: 13px; }
  .ai-panel .ai-refresh {
    position: absolute; top: 12px; right: 16px;
    background: #1e3a5f; color: #cfe2ff; border: 1px solid #2d5180;
    padding: 6px 12px; border-radius: 6px; font-size: 12px; cursor: pointer;
  }
  .ai-panel .ai-refresh:hover { background: #2d5180; }
  .ai-panel .ai-refresh:disabled { opacity: 0.5; cursor: default; }
  .ai-panel .ai-err { color: #fca5a5; font-size: 13px; }
  .ai-panel.loading .ai-body { opacity: 0.55; }
  .ai-panel .ai-loading-bar {
    height: 2px; width: 100%; background: linear-gradient(90deg, transparent, #4a9eff, transparent);
    background-size: 200% 100%; animation: shimmer 1.4s linear infinite; margin: -4px -20px 10px -20px; width: calc(100% + 40px);
    display: none;
  }
  .ai-panel.loading .ai-loading-bar { display: block; }
  @keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }
  /* "Ask a question" mode — secondary button next to Refresh, a composer
     panel that toggles open, and a session-only scroll of Q&A answers below
     the canned narrative. The composer is styled slightly darker than the
     body so it reads as a distinct sub-surface without looking like a modal. */
  .ai-panel .ai-actions {
    position: absolute; top: 12px; right: 16px;
    display: inline-flex; gap: 6px;
  }
  .ai-panel .ai-actions .ai-refresh,
  .ai-panel .ai-actions .ai-ask-toggle,
  .ai-panel .ai-actions .ai-share-link {
    position: static; /* override .ai-refresh absolute positioning inside .ai-actions */
    background: #1e3a5f; color: #cfe2ff; border: 1px solid #2d5180;
    padding: 6px 12px; border-radius: 6px; font-size: 12px; cursor: pointer;
  }
  .ai-panel .ai-actions .ai-refresh:hover,
  .ai-panel .ai-actions .ai-ask-toggle:hover,
  .ai-panel .ai-actions .ai-share-link:hover { background: #2d5180; }
  .ai-panel .ai-ask-toggle.active {
    background: #2d5180; border-color: #4a7fb8;
  }
  /* Task #159 — history picker + compare button row, sits between meta and body. */
  .ai-panel .ai-history {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 6px 0 12px 0;
  }
  .ai-panel .ai-history select {
    background: #0b1320; color: #e7ecf5; border: 1px solid #2d5180;
    padding: 4px 8px; border-radius: 6px; font-size: 12px; min-width: 260px;
  }
  .ai-panel .ai-history .ai-compare {
    background: #1e3a5f; color: #cfe2ff; border: 1px solid #2d5180;
    padding: 4px 10px; border-radius: 6px; font-size: 12px; cursor: pointer;
  }
  .ai-panel .ai-history .ai-compare:hover:not(:disabled) { background: #2d5180; }
  .ai-panel .ai-history .ai-compare:disabled { opacity: 0.5; cursor: not-allowed; }

  /* Task #187 — Marion's research layer on the Rates view. */
  .marion-thesis {
    margin: 14px 0 12px 0;
    padding: 10px 14px;
    background: rgba(74, 127, 184, 0.08);
    border-left: 3px solid #4a7fb8;
    border-radius: 4px;
    color: var(--fg); font-size: 13px; line-height: 1.55;
  }
  .marion-thesis .thesis-badge {
    font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
    color: #8fb8e6; margin-bottom: 4px;
  }
  .marion-thesis .thesis-text strong { color: #e7ecf5; }

  /* Live-promotions block on the Signups view. Same visual pattern as
     Marion's research details — expandable card with a header + compact
     table inside. Badges distinguish auto-apply / first-txn / limits. */
  details.live-promos {
    margin: 12px 0 14px 0; padding: 0 0 6px 0;
    background: rgba(255,255,255,0.025); border: 1px solid var(--border);
    border-radius: 6px;
  }
  details.live-promos > summary {
    cursor: pointer; padding: 10px 14px;
    font-size: 13px; color: var(--fg);
    user-select: none; list-style: none;
  }
  details.live-promos > summary::before {
    content: "▸"; display: inline-block; width: 14px; color: var(--muted);
    transition: transform 0.15s ease;
  }
  details.live-promos[open] > summary::before { transform: rotate(90deg); }
  details.live-promos > summary .cur { color: var(--muted); font-size: 12px; margin-left: 6px; }
  details.live-promos table.rates-table.compact {
    margin: 0 14px 4px 14px; width: calc(100% - 28px); font-size: 12px;
  }
  details.live-promos table.compact th {
    font-size: 11px; font-weight: 600; color: var(--muted);
    padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left;
  }
  details.live-promos table.compact td {
    padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,0.04); vertical-align: top;
  }
  details.live-promos table.compact code {
    font-family: ui-monospace, Menlo, monospace; font-size: 11px;
    background: rgba(255,255,255,0.05); padding: 1px 5px; border-radius: 3px;
    color: #cfe2ff;
  }
  .promo-badge {
    display: inline-block; font-size: 10px; letter-spacing: 0.03em; font-weight: 600;
    padding: 1px 6px; border-radius: 999px; margin-right: 3px; white-space: nowrap;
  }
  .promo-badge.auto    { background: rgba(106, 196, 138, 0.15); color: #6ac48a; border: 1px solid rgba(106,196,138,0.35); }
  .promo-badge.first   { background: rgba(201, 163, 90, 0.15);  color: #ffd78a; border: 1px solid rgba(201,163,90,0.4); }
  .promo-badge.limit   { background: rgba(255,255,255,0.05);     color: var(--muted); border: 1px solid var(--border); }
  .promo-badge.partner { background: rgba(143, 184, 230, 0.12); color: #8fb8e6; border: 1px solid rgba(143,184,230,0.3); }

  details.test-corridors, details.rank-widget {
    margin: 10px 0 14px 0; padding: 0 0 6px 0;
    background: rgba(255,255,255,0.025); border: 1px solid var(--border);
    border-radius: 6px;
  }
  details.test-corridors > summary, details.rank-widget > summary {
    cursor: pointer; padding: 10px 14px;
    font-size: 13px; color: var(--fg);
    user-select: none; list-style: none;
  }
  details.test-corridors > summary::before, details.rank-widget > summary::before {
    content: "▸"; display: inline-block; width: 14px; color: var(--muted);
    transition: transform 0.15s ease;
  }
  details[open] > summary::before { transform: rotate(90deg); }
  details.test-corridors > summary .cur, details.rank-widget > summary .cur {
    color: var(--muted); font-size: 12px; margin-left: 6px;
  }
  details.test-corridors table.rates-table.compact,
  details.rank-widget table.rates-table.compact {
    margin: 0 14px 4px 14px; width: calc(100% - 28px); font-size: 12px;
  }
  details.test-corridors table.compact th, details.rank-widget table.compact th {
    font-size: 11px; font-weight: 600; color: var(--muted);
    padding: 6px 8px; border-bottom: 1px solid var(--border);
    text-align: left;
  }
  details.test-corridors table.compact td, details.rank-widget table.compact td {
    padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,0.04);
  }
  .act-raise { color: #ff9f6a; font-weight: 600; }
  .act-hold  { color: #6ac48a; }
  .rank-header td { background: rgba(255,255,255,0.03); padding-top: 10px !important; }
  .rank-widget tr.is-best td {
    background: rgba(255, 200, 100, 0.06);
    border-left: 2px solid #c9a35a;
  }

  /* Data-lineage modal — plain-docs look for the verification tool. Bias
     toward legibility over density: the content is paragraphs + small
     reference tables, not interactive UI. */
  .lineage-doc { color: var(--fg); font-size: 13px; line-height: 1.55; }
  .lineage-doc .lineage-lede {
    margin: 0 0 16px 0; padding: 10px 14px;
    background: rgba(255,255,255,0.03); border-left: 3px solid #4a7fb8;
    border-radius: 4px;
  }
  .lineage-doc h3 {
    margin: 20px 0 8px 0; font-size: 14px; font-weight: 600;
    color: #e7ecf5; border-bottom: 1px solid var(--border); padding-bottom: 4px;
  }
  .lineage-doc p { margin: 6px 0 10px 0; }
  .lineage-doc code {
    font-family: ui-monospace, Menlo, monospace; font-size: 12px;
    background: rgba(255,255,255,0.05); padding: 1px 5px; border-radius: 3px;
    color: #cfe2ff;
  }
  .lineage-doc table.lineage-table {
    width: 100%; border-collapse: collapse; margin: 6px 0 14px 0; font-size: 12px;
  }
  .lineage-doc table.lineage-table th,
  .lineage-doc table.lineage-table td {
    text-align: left; vertical-align: top; padding: 6px 8px;
    border-bottom: 1px solid var(--border);
  }
  .lineage-doc table.lineage-table th { color: var(--muted); font-weight: 600; }
  .lineage-doc table.lineage-table td:first-child { white-space: nowrap; }
  .lineage-doc .lineage-caveats {
    margin-top: 18px; padding: 10px 14px;
    background: rgba(255, 200, 100, 0.06); border-left: 3px solid #c9a35a;
    border-radius: 4px;
  }
  .lineage-doc .lineage-caveats h3 { border-bottom: none; margin-top: 0; color: #ffd78a; }
  .lineage-doc .lineage-caveats ul { margin: 4px 0 0 18px; padding: 0; }
  .lineage-doc .lineage-caveats li { margin-bottom: 6px; }

  /* Marketing platform status modal — three stacked cards, one per platform */
  .platform-stack { display: flex; flex-direction: column; gap: 14px; font-size: 13px; color: var(--fg); }
  .platform-card { border: 1px solid var(--border); border-radius: 6px; background: rgba(255,255,255,0.025); }
  .platform-card > header {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,0.02);
  }
  .platform-card > header h3 { margin: 0; font-size: 14px; font-weight: 600; color: #e7ecf5; flex: 1; }
  .platform-status { font-size: 11px; padding: 3px 8px; border-radius: 999px; font-weight: 600; }
  .platform-status.ok  { background: rgba(106, 196, 138, 0.12); color: #6ac48a; border: 1px solid rgba(106,196,138,0.3); }
  .platform-status.err { background: rgba(248, 113, 113, 0.12); color: #f87171; border: 1px solid rgba(248,113,113,0.3); }
  .platform-body { padding: 12px 14px; line-height: 1.55; }
  .platform-body > div { margin-bottom: 4px; }
  .platform-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 14px;
    margin: 8px 0 10px 0; padding: 8px 10px;
    background: rgba(255,255,255,0.025); border-radius: 4px; font-size: 12px;
  }
  .platform-body details { margin-top: 8px; }
  .platform-body details summary { cursor: pointer; color: #8fb8e6; font-size: 12px; }
  .platform-body .muted { color: var(--muted); font-size: 11px; }
  .ai-panel .ai-ask-composer {
    margin: 12px 0 14px 0; padding: 12px 14px;
    background: rgba(255,255,255,0.03); border: 1px solid #1e3a5f; border-radius: 8px;
  }
  .ai-panel .ai-ask-composer .row {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px;
  }
  .ai-panel .ai-ask-composer select {
    background: #0b1320; color: #e7ecf5; border: 1px solid #2d5180;
    padding: 6px 8px; border-radius: 6px; font-size: 13px; flex: 1; min-width: 200px;
  }
  .ai-panel .ai-ask-composer textarea {
    width: 100%; box-sizing: border-box;
    background: #0b1320; color: #e7ecf5; border: 1px solid #2d5180;
    padding: 8px 10px; border-radius: 6px; font-size: 13px; line-height: 1.5;
    resize: vertical; min-height: 72px; font-family: inherit;
  }
  .ai-panel .ai-ask-composer .controls {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px;
  }
  .ai-panel .ai-ask-composer .controls label {
    color: #cfe2ff; font-size: 12px; display: inline-flex; gap: 4px; align-items: center;
  }
  .ai-panel .ai-ask-composer .controls .spacer { flex: 1; }
  .ai-panel .ai-ask-composer .label-input {
    background: #0b1320; color: #e7ecf5; border: 1px solid #2d5180;
    padding: 6px 8px; border-radius: 6px; font-size: 13px; min-width: 180px; flex: 1;
  }
  .ai-panel .ai-ask-composer button {
    background: #1e3a5f; color: #cfe2ff; border: 1px solid #2d5180;
    padding: 6px 12px; border-radius: 6px; font-size: 12px; cursor: pointer;
  }
  .ai-panel .ai-ask-composer button.primary { background: #2d5180; }
  .ai-panel .ai-ask-composer button:hover { background: #2d5180; }
  .ai-panel .ai-ask-composer button.primary:hover { background: #3d6eb8; }
  .ai-panel .ai-ask-composer button:disabled { opacity: 0.5; cursor: default; }
  .ai-panel .ai-ask-composer .delete-saved {
    background: transparent; color: #fca5a5; border: 1px solid transparent; padding: 4px 8px;
  }
  .ai-panel .ai-ask-composer .delete-saved:hover { background: rgba(252,165,165,0.12); border-color: #fca5a5; }
  .ai-panel .ai-ask-err { color: #fca5a5; font-size: 12px; margin-top: 6px; }
  /* Session-only Q&A log. Each entry has the question as a quoted header,
     the rendered-markdown answer, and a small timestamp strip. Newest on top. */
  .ai-panel .ai-qa-log { margin-top: 14px; }
  .ai-panel .ai-qa-entry {
    margin-top: 12px; padding: 12px 14px;
    background: rgba(74,158,255,0.04); border: 1px solid #1e3a5f; border-radius: 8px;
  }
  .ai-panel .ai-qa-entry .q {
    font-size: 13px; color: #cfe2ff; font-weight: 600; margin-bottom: 6px;
    border-left: 3px solid #4a9eff; padding: 2px 0 2px 10px;
  }
  .ai-panel .ai-qa-entry .a { font-size: 14px; line-height: 1.55; color: #e7ecf5; }
  .ai-panel .ai-qa-entry .a h2,
  .ai-panel .ai-qa-entry .a h3,
  .ai-panel .ai-qa-entry .a h4 { margin: 10px 0 4px 0; font-size: 14px; color: #cfe2ff; }
  .ai-panel .ai-qa-entry .a ul, .ai-panel .ai-qa-entry .a ol { margin: 6px 0 8px 22px; }
  .ai-panel .ai-qa-entry .a p { margin: 4px 0 8px 0; }
  .ai-panel .ai-qa-entry .meta { color: #9aa7bd; font-size: 11px; margin-top: 6px; display: flex; gap: 12px; }
  .ai-panel .ai-qa-entry .meta button {
    background: transparent; color: #9aa7bd; border: none; padding: 0; font-size: 11px;
    cursor: pointer; text-decoration: underline;
  }
  .ai-panel .ai-qa-entry .meta button:hover { color: #fca5a5; }

  /* Signups view — daily/weekly trend table + conversion rate + country mix. */
  .signups-kpis {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px; margin-bottom: 16px;
  }
  .signups-kpi {
    background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
    padding: 12px 14px;
  }
  .signups-kpi .label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; }
  .signups-kpi .value { font-size: 22px; font-weight: 600; margin-top: 4px; }
  .signups-kpi .sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
  .signups-section { margin: 20px 0; }
  .signups-section h3 { font-size: 14px; margin: 0 0 10px 0; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; }
  .signups-toggles { display: inline-flex; gap: 4px; margin-left: 12px; }
  .signups-toggles .btn { font-size: 12px; padding: 3px 10px; }
  .mini-bar {
    display: inline-block; height: 8px; border-radius: 4px;
    background: #4a9eff; vertical-align: middle; margin-left: 6px;
  }
  .mini-bar-bg {
    display: inline-block; height: 8px; width: 60px; border-radius: 4px;
    background: rgba(255,255,255,0.06); vertical-align: middle; margin-left: 6px;
    position: relative;
  }
  .mini-bar-bg .fill {
    height: 100%; border-radius: 4px; background: #4a9eff;
    display: block;
  }
  /* Monthly long-term chart: paired SVG bars + legend. */
  .signups-chart-wrap {
    background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
    padding: 12px 14px 8px; margin-bottom: 12px;
  }
  .signups-chart { width: 100%; height: 170px; display: block; }
  .signups-chart-legend {
    color: var(--muted); font-size: 11px; display: flex; gap: 16px;
    align-items: center; margin-top: 4px;
  }
  .signups-chart-legend .dot {
    display: inline-block; width: 10px; height: 10px; border-radius: 2px;
    margin-right: 6px; vertical-align: middle;
  }