/* =============================================================================
   components.css — CINTI OS Admin Components
   Tiles, tables, buttons, forms, modals, cards, badges, indicators,
   tooltips, toasts, service dots, and all component-specific styles
   ============================================================================= */

  /* === STATUS DOTS === */
  .dot-green { background: var(--green); animation: pulseGreen 2s ease-in-out infinite; }
  .dot-red { background: var(--red); animation: pulseRed 1.5s ease-in-out infinite; }
  /* CW #1999 — amber "unknown" state. No pulse — solid amber says
     "we don't know, check the source" rather than "everything's fine"
     or "something's on fire." */
  .dot-amber { background: var(--gold, #f5a623); }

  /* === Service Health === */
  .health-list { display: flex; flex-direction: column; gap: 8px; }
  .health-row {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 12px; border-radius: 8px;
    transition: background 0.2s;
  }
  .health-row:hover { background: rgba(var(--accent-rgb, 38, 189, 214),0.05); }
  .health-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
  .health-name { font-size: 13px; font-weight: 500; flex: 1; }
  .health-tag { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
  .health-tag.online { color: var(--green); }
  .health-tag.offline { color: var(--red); }

  /* === Stats Panel === */
  .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .stat-block { text-align: center; padding: 12px 0; }
  .stat-val {
    font-size: 32px; font-weight: 700; color: var(--bright); line-height: 1;
    animation: glowPulse 3s ease-in-out infinite;
  }
  .stat-label {
    font-size: 10px; color: var(--dim); margin-top: 6px;
    text-transform: uppercase; letter-spacing: 1.5px; font-weight: 500;
  }

  /* === Quick Actions === */
  .actions-grid { display: flex; flex-wrap: wrap; gap: 8px; }
  .action-pill {
    padding: 8px 16px; border-radius: 20px; border: 1px solid rgba(var(--accent-rgb, 38, 189, 214),0.2);
    background: rgba(var(--accent-rgb, 38, 189, 214),0.08); color: var(--accent); font-family: inherit;
    font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.2s;
  }
  .action-pill:hover {
    background: rgba(var(--accent-rgb, 38, 189, 214),0.18); border-color: var(--accent);
    box-shadow: 0 0 16px rgba(var(--accent-rgb, 38, 189, 214),0.15);
    transform: translateY(-1px);
  }

  /* === Activity Feed === */
  .feed { max-height: 220px; overflow-y: auto; }
  .feed-item {
    display: flex; gap: 10px; padding: 8px 0; font-size: 12px;
    border-left: 2px solid rgba(var(--accent-rgb, 38, 189, 214),0.15); padding-left: 12px; margin-left: 4px;
    transition: border-color 0.2s;
  }
  .feed-item:hover { border-left-color: var(--accent); }
  .feed-item + .feed-item { margin-top: 4px; }
  .feed-time { color: var(--dim); min-width: 52px; flex-shrink: 0; font-size: 11px; font-variant-numeric: tabular-nums; }
  .feed-text { color: var(--text); line-height: 1.4; }

  /* === TABLE STYLES === */
  table { width: 100%; border-collapse: collapse; font-size: 12px; }
  th {
    text-align: left; padding: 10px 14px; color: var(--accent);
    font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
    border-bottom: 1px solid rgba(var(--accent-rgb, 38, 189, 214),0.12);
  }
  td { padding: 10px 14px; border-bottom: 1px solid rgba(var(--accent-rgb, 38, 189, 214),0.06); }
  tr:hover td { background: rgba(var(--accent-rgb, 38, 189, 214),0.04); }
  .clickable { cursor: pointer; }

  /* === Badges === */
  .badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; text-transform: uppercase; }
  .badge-admin { background: rgba(var(--accent-rgb, 38, 189, 214),0.2); color: var(--accent); }
  .badge-finance { background: rgba(255,183,77,0.2); color: var(--gold); }
  .badge-tech { background: rgba(0,230,118,0.2); color: var(--green); }
  .badge-viewer { background: rgba(107,125,154,0.2); color: var(--dim); }

  /* === Skills Grid === */
  /* CW #1993 (Gene 2026-05-11) — single-row tile, fluid width.
     Tiles auto-size with the desktop column so when the avatar panel
     expands they shrink and vice versa. max-width caps readability
     on ultra-wide screens. */
  .skills-grid { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 1100px; }

  /* CW #1993 (Gene 2026-05-11 update) — tile becomes a vertical wrapper
     around the strip row + an in-place detail block. When .expanded,
     the detail block reveals beneath the row IN THE SAME COLUMN. No
     right-side drawer. No overlay of the avatar panel. */
  .skill-card {
    padding: 0; transition: opacity 0.3s, border-color 0.3s;
    display: flex; flex-direction: column;
    overflow: hidden;
  }
  .skill-card.disabled { opacity: 0.55; }
  .skill-card.disabled .skill-name { color: var(--dim); }

  /* Strip row inside the card — the always-visible part */
  .skill-row {
    display: flex; flex-direction: row; align-items: center; gap: 14px;
    padding: 10px 14px;
  }
  .skill-icon { font-size: 22px; line-height: 1; flex-shrink: 0; }
  /* CW #1993 (Gene 2026-05-11) — drop the 220px cap so long skill names
     ("SLI QBRB (Quarterly Benchmarking)" etc.) show in full. Name-wrap
     sizes to content; the spacer absorbs whatever room is left and
     pushes the right-side controls to the edge. Ellipsis stays as a
     fallback only when the viewport is genuinely too narrow. */
  .skill-name-wrap { flex: 0 0 auto; min-width: 0; }
  .skill-name { font-weight: 600; font-size: 13px; color: var(--text); white-space: nowrap; }
  .skill-sub { font-size: 10px; color: var(--dim); text-transform: lowercase; margin-top: 2px; white-space: nowrap; }
  /* CW #1993 (Gene 2026-05-11) — description removed from the tile face.
     Now only renders inside the inline detail block when the chevron is
     expanded. .skill-spacer takes its place in the flex row to keep the
     right-side controls (status, last-call, toggle, chevron) pushed to
     the right edge. */
  .skill-spacer { flex: 1; min-width: 0; }
  .skill-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; transition: background 0.2s; }
  .skill-status-dot.on { background: var(--green); box-shadow: 0 0 6px rgba(34, 197, 94, 0.5); }
  .skill-status-dot.off { background: rgba(255,255,255,0.15); }
  .skill-lastcall { font-size: 10px; color: var(--dim); flex-shrink: 0; min-width: 56px; text-align: right; }
  .skill-lastcall.idle { color: rgba(255,255,255,0.25); font-style: italic; }
  .skill-expand-btn {
    width: 28px; height: 28px; border-radius: 6px;
    background: transparent; border: 1px solid var(--panel-border);
    color: var(--dim); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.15s; flex-shrink: 0;
  }
  .skill-expand-btn:hover { background: rgba(var(--accent-rgb, 38, 189, 214),0.1); color: var(--accent); border-color: var(--accent); }
  /* Chevron rotates 90° clockwise when expanded — points down. */
  .skill-expand-btn svg { transition: transform 0.2s ease; }
  .skill-card.expanded .skill-expand-btn svg { transform: rotate(90deg); }

  /* In-place detail block. Hidden by default; revealed when .expanded
     is on the parent .skill-card. No animation jank — uses max-height
     transition. */
  .skill-detail {
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height 0.25s ease, opacity 0.15s ease;
    border-top: 0;
  }
  .skill-card.expanded .skill-detail {
    max-height: 600px; opacity: 1;
    border-top: 1px solid var(--panel-border);
    padding: 14px 16px;
  }
  .skill-detail-section { margin-bottom: 12px; }
  .skill-detail-section:last-child { margin-bottom: 0; }
  .skill-detail-label {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--dim); font-weight: 600; margin-bottom: 6px;
  }
  .skill-detail-body { font-size: 12px; line-height: 1.5; color: var(--text); }
  .skill-detail-actions { display: flex; flex-wrap: wrap; gap: 6px; }
  /* CW #1993 follow-up (Gene 2026-05-11) — chips are buttons now: click
     drills into action-level L2 detail. Hover lifts the border to signal
     interactivity. Bob's drill-down spec: every tile drills until there's
     no more data; back-out is always wired. */
  .skill-action-chip {
    padding: 3px 8px; background: rgba(var(--accent-rgb, 38, 189, 214),0.08);
    border: 1px solid rgba(var(--accent-rgb, 38, 189, 214),0.2); border-radius: 4px;
    font-family: monospace; font-size: 10px; color: var(--accent);
    cursor: pointer; transition: all 0.15s; line-height: 1.4;
  }
  .skill-action-chip:hover {
    background: rgba(var(--accent-rgb, 38, 189, 214),0.18); border-color: var(--accent);
    transform: translateY(-1px);
  }

  /* "More info" backlink to docs.cinti.com — per-skill at L1, per-action at L2. */
  .skill-doc-link, .skill-action-doc-link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; background: rgba(var(--accent-rgb, 38, 189, 214),0.08);
    border: 1px solid rgba(var(--accent-rgb, 38, 189, 214),0.25); border-radius: 6px;
    font-size: 11px; color: var(--accent); text-decoration: none;
    transition: all 0.15s;
  }
  .skill-doc-link:hover, .skill-action-doc-link:hover {
    background: rgba(var(--accent-rgb, 38, 189, 214),0.18); border-color: var(--accent);
  }

  /* L1 / L2 swap. L1 is the default content (description + action chips +
     skill-level doc link). Clicking a chip swaps the card into .action-open,
     which hides L1 and shows L2 (action-detail panel) in its place. */
  .skill-detail-l2 { display: none; }
  .skill-card.action-open .skill-detail-l1 { display: none; }
  .skill-card.action-open .skill-detail-l2 { display: block; }
  .skill-card.action-open .skill-detail { max-height: 700px; }

  .skill-action-back {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px; margin-bottom: 12px;
    background: transparent; border: 1px solid var(--panel-border);
    color: var(--dim); cursor: pointer; border-radius: 6px;
    font-size: 11px; transition: all 0.15s;
  }
  .skill-action-back:hover {
    color: var(--accent); border-color: var(--accent);
    background: rgba(var(--accent-rgb, 38, 189, 214),0.08);
  }
  .skill-action-detail-name {
    font-size: 16px; margin-bottom: 4px;
  }
  .skill-action-detail-name code {
    font-family: 'JetBrains Mono', monospace; font-size: 15px;
    color: var(--text); background: rgba(var(--accent-rgb, 38, 189, 214),0.1);
    padding: 3px 8px; border-radius: 4px;
  }
  .skill-action-detail-meta {
    font-size: 10px; color: var(--dim); margin-bottom: 12px;
    text-transform: lowercase; letter-spacing: 0.3px;
  }
  .skill-action-detail-meta code {
    font-family: 'JetBrains Mono', monospace;
    color: var(--accent); font-size: 10px;
  }
  .skill-action-detail-stub {
    font-size: 12px; line-height: 1.55; color: var(--text);
    background: rgba(var(--accent-rgb, 38, 189, 214),0.04);
    border-left: 3px solid rgba(var(--accent-rgb, 38, 189, 214),0.3);
    padding: 10px 12px; border-radius: 4px;
    margin-bottom: 14px;
  }
  .skill-action-detail-stub code {
    font-family: 'JetBrains Mono', monospace;
    color: var(--accent); font-size: 11px;
  }

  /* When the viewport gets cramped, the name column gets full flex so
     it doesn't collide with the right-side controls. */
  @media (max-width: 980px) {
    .skill-name-wrap { flex: 1; max-width: none; }
  }
  /* Toggle switch */
  .toggle { position: relative; width: 36px; height: 20px; cursor: pointer; }
  .toggle input { opacity: 0; width: 0; height: 0; }
  .toggle .slider { position: absolute; inset: 0; background: rgba(107,125,154,0.3); border-radius: 20px; transition: background 0.3s; }
  .toggle .slider:before { content: ''; position: absolute; width: 16px; height: 16px; left: 2px; top: 2px; background: #fff; border-radius: 50%; transition: transform 0.3s; }
  .toggle input:checked + .slider { background: var(--green); }
  .toggle input:checked + .slider:before { transform: translateX(16px); }
  .btn-sm {
    padding: 5px 12px; font-size: 11px; border-radius: 8px;
    background: rgba(var(--accent-rgb, 38, 189, 214),0.08); border: 1px solid rgba(var(--accent-rgb, 38, 189, 214),0.2);
    color: var(--accent); font-family: inherit; cursor: pointer; transition: all 0.2s;
  }
  .btn-sm:hover { background: rgba(var(--accent-rgb, 38, 189, 214),0.15); border-color: var(--accent); }

  /* === Browser === */
  .browser-bar { display: flex; gap: 10px; align-items: center; }
  .input {
    flex: 1; padding: 8px 12px; background: var(--input-bg);
    border: 1px solid var(--panel-border); border-radius: 8px;
    color: var(--text); font-family: inherit; font-size: 12px; outline: none;
    transition: border-color 0.2s;
  }
  .input:focus { border-color: var(--accent); }
  .btn-tab {
    background: none; border: none; color: var(--dim); font-size: 12px; font-family: inherit;
    padding: 6px 14px; cursor: pointer; border-radius: 6px 6px 0 0; transition: all 0.2s;
  }
  .btn-tab:hover { color: var(--text); background: rgba(var(--accent-rgb, 38, 189, 214),0.05); }
  .btn-tab.active { color: var(--accent); border-bottom: 2px solid var(--accent); font-weight: 600; }

  .btn-primary {
    padding: 8px 16px; border-radius: 8px; border: 1px solid var(--accent);
    background: rgba(var(--accent-rgb, 38, 189, 214),0.15); color: var(--accent); font-family: inherit;
    font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.2s;
  }
  .btn-primary:hover { background: rgba(var(--accent-rgb, 38, 189, 214),0.25); box-shadow: 0 0 12px rgba(var(--accent-rgb, 38, 189, 214),0.2); }
  /* CW Project #63 follow-up — light mode contrast. The dark-palette
     rgba(var(--accent-rgb, 38, 189, 214),0.15) tint on white is barely visible (Gene 2026-05-08
     called it "light yellow on white"). Use a solid accent fill with
     white text in light mode for AAA contrast. */
  [data-theme="light"] .btn-primary {
    background: var(--cinti-accent, #1a9ab5);
    color: #ffffff;
    border-color: var(--cinti-accent, #1a9ab5);
  }
  [data-theme="light"] .btn-primary:hover {
    background: var(--cinti-accent-bright, #0d8aa0);
    box-shadow: 0 2px 8px rgba(26, 154, 181, 0.35);
    color: #ffffff;
  }
  .screenshot-area {
    margin-top: 16px; min-height: 200px; display: flex;
    align-items: center; justify-content: center; color: var(--dim); font-size: 12px;
    border-radius: 8px; background: rgba(0,0,0,0.15);
  }
  .screenshot-area img { max-width: 100%; border-radius: 8px; }
  .result-box {
    margin-top: 12px; padding: 12px; background: rgba(0,0,0,0.3);
    border-radius: 8px; font-size: 11px; white-space: pre-wrap;
    max-height: 300px; overflow-y: auto; font-family: 'SF Mono', monospace;
  }

  /* === Settings === */
  .settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .setting-row {
    display: flex; justify-content: space-between; padding: 10px 0;
    border-bottom: 1px solid rgba(var(--accent-rgb, 38, 189, 214),0.06); font-size: 12px;
  }
  .setting-key { color: var(--dim); }
  .setting-val { color: var(--text); font-weight: 500; }

  /* === Expanded Messages === */
  .msg-row { padding: 8px 14px; font-size: 11px; border-left: 2px solid rgba(var(--accent-rgb, 38, 189, 214),0.15); margin: 4px 0 4px 20px; }
  .msg-role { color: var(--accent); font-weight: 600; margin-right: 8px; }
  .msg-text { color: var(--text); }
  .expand-row td { padding: 8px 14px; background: rgba(10,20,40,0.5); }

  /* === TOAST NOTIFICATIONS === */
  .toast-container {
    position: fixed; top: calc(var(--topbar-h) + 12px); right: 16px; z-index: 300;
    display: flex; flex-direction: column; gap: 8px;
  }
  .toast {
    background: rgba(14,22,42,0.95); backdrop-filter: blur(16px);
    border: 1px solid rgba(var(--accent-rgb, 38, 189, 214),0.15); border-radius: 12px;
    padding: 12px 16px; min-width: 280px; max-width: 360px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    animation: slideInToast 0.3s ease;
    display: flex; gap: 10px; align-items: flex-start;
  }
  .toast.removing { animation: slideOutToast 0.3s ease forwards; }
  .toast-success { border-left: 3px solid var(--green); }
  .toast-error { border-left: 3px solid var(--red); }
  .toast-info { border-left: 3px solid var(--accent); }
  .toast-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
  .toast-content { flex: 1; }
  .toast-title { font-size: 12px; font-weight: 600; margin-bottom: 2px; }
  .toast-msg { font-size: 11px; color: var(--dim); line-height: 1.4; }

  /* === MODAL === */
  .modal-overlay {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 250;
    align-items: center; justify-content: center; backdrop-filter: blur(6px);
  }
  .modal-overlay.open { display: flex; }
  .modal {
    width: 500px; max-width: 90vw; max-height: 80vh; overflow-y: auto;
  }
  .modal h3 { margin-bottom: 16px; font-size: 15px; color: var(--accent); font-weight: 600; }
  textarea {
    width: 100%; padding: 8px 12px; background: var(--input-bg);
    border: 1px solid var(--panel-border); border-radius: 8px;
    color: var(--text); font-family: 'SF Mono', monospace; font-size: 12px;
    margin-bottom: 12px; outline: none; resize: vertical; min-height: 80px;
    transition: border-color 0.2s;
  }
  textarea:focus { border-color: var(--accent); }
  label.form-label { font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 4px; }

  /* === TILE SYSTEM === */
  .tile {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 14px;
    backdrop-filter: blur(16px);
    box-shadow: 0 4px 20px var(--shadow-color);
    overflow: hidden;
    animation: fadeInPanel 0.3s ease;
  }
  .tile:hover {
    border-color: rgba(var(--accent-rgb, 38, 189, 214),0.22);
    box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 0 2px rgba(var(--accent-rgb, 38, 189, 214),0.3);
  }
  .tile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--panel-header);
    border-bottom: 1px solid var(--panel-border);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--dim);
  }
  .tile-title { display: flex; align-items: center; gap: 8px; }
  .tile-title svg { opacity: 0.6; }
  .tile-remove {
    background: none; border: none; color: var(--dim); font-size: 16px;
    cursor: pointer; opacity: 0.4; transition: opacity 0.2s;
    padding: 0 4px;
  }
  .tile-remove:hover { opacity: 1; color: var(--red); }
  .tile.dragging { opacity: 0.4; transform: scale(0.98); }
  .tile.drag-over { border-color: var(--accent); box-shadow: 0 0 20px rgba(0,229,255,0.3); }
  .tile-header { cursor: grab; }
  .tile-header:active { cursor: grabbing; }
  .tile-body { padding: 16px; }
  .tiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
  }
  .tile.tile-wide { grid-column: 1 / -1; }
  .add-tile-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 20px;
    margin-bottom: 16px;
    background: var(--panel-bg);
    border: 1px dashed var(--panel-border);
    border-radius: 10px;
    color: var(--accent);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
  }
  .add-tile-btn:hover {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb, 38, 189, 214),0.05);
  }
  .tile-btn-row {
    display: flex; gap: 10px; align-items: center; margin-bottom: 16px;
  }
  .tile-btn-row .add-tile-btn { margin-bottom: 0; }
  .code-editor {
    width: 100%;
    min-height: 120px;
    background: #0a0e1a;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    color: var(--accent);
    font-family: 'Fira Code', monospace;
    font-size: 12px;
    padding: 12px;
    resize: vertical;
    tab-size: 2;
  }
  .create-tile-form label {
    display: block; color: var(--dim); font-size: 11px; margin-bottom: 4px; margin-top: 12px; text-transform: uppercase; letter-spacing: 0.5px;
  }
  .create-tile-form input[type="text"],
  .create-tile-form textarea:not(.code-editor) {
    width: 100%; padding: 8px 12px; background: var(--input-bg); border: 1px solid var(--panel-border);
    border-radius: 8px; color: var(--text); font-size: 13px; font-family: inherit;
  }
  .create-tile-form .btn-row {
    display: flex; gap: 10px; margin-top: 16px; justify-content: flex-end;
  }
  .create-tile-form .btn-row button {
    padding: 8px 20px; border-radius: 8px; font-size: 12px; cursor: pointer; border: 1px solid var(--panel-border);
    background: var(--panel-bg); color: var(--text); transition: all 0.2s;
  }
  .create-tile-form .btn-row button.primary {
    background: var(--accent); color: #000; border-color: var(--accent); font-weight: 600;
  }
  .create-tile-form .btn-row button:hover { opacity: 0.85; }

  /* === Tile Picker Modal === */
  .tile-picker-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px); z-index: 500; display: none;
    align-items: center; justify-content: center;
  }
  .tile-picker-overlay.open { display: flex; }
  .tile-picker {
    background: var(--panel-bg); border: 1px solid var(--panel-border);
    border-radius: 16px; padding: 24px; width: 500px; max-height: 70vh;
    overflow-y: auto; backdrop-filter: blur(20px);
    box-shadow: 0 16px 60px rgba(0,0,0,0.5);
  }
  .tile-picker h3 { color: var(--accent); font-size: 16px; margin-bottom: 16px; }
  .tile-option {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px; margin-bottom: 8px; border-radius: 10px;
    border: 1px solid var(--panel-border); cursor: pointer;
    transition: all 0.2s;
  }
  .tile-option:hover { border-color: var(--accent); background: rgba(var(--accent-rgb, 38, 189, 214),0.05); }
  .tile-option.added { opacity: 0.4; cursor: default; }
  .tile-option .tile-opt-name { font-weight: 500; }
  .tile-option .tile-opt-desc { font-size: 11px; color: var(--dim); }

  /* === BRAIN VISUALIZATION TILE — Operations Center === */
  .tile[data-tile-id="brain_viz"] { grid-column: 1 / -1; }

  /* Emmanuel 2026-05-12 redesign — tighter, sleeker. Was: 280px min-height +
     20px section padding + animated savings glow + spinning rings + heavy
     text-shadows. Now: 200px tall, 14px padding, clean off-white numbers,
     baseline-aligned stat grid (matches .dash-stat pattern). */
  .brain-ops-center {
    display: flex; gap: 0; min-height: 200px;
    background: linear-gradient(135deg, rgba(8,12,26,0.95) 0%, rgba(14,22,42,0.95) 100%);
    border-radius: 0 0 16px 16px; overflow-x: auto; overflow-y: hidden;
    position: relative;
  }

  /* Section dividers */
  .boc-section {
    padding: 14px 16px; position: relative; z-index: 1;
    display: flex; flex-direction: column;
    min-width: 0;
  }
  .boc-section + .boc-section { border-left: 1px solid rgba(var(--accent-rgb, 38, 189, 214),0.08); }
  .boc-left   { flex: 1 1 40%; }
  .boc-center { flex: 1 1 35%; }
  .boc-right  { flex: 1 1 25%; display: flex; flex-direction: column; align-items: center; justify-content: center; }

  .boc-section-title {
    font-size: 10px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 1px; color: var(--text); margin-bottom: 10px;
    display: flex; align-items: center; gap: 6px;
  }
  .boc-section-title::before {
    content: ''; width: 3px; height: 10px; border-radius: 2px;
  }
  .boc-left .boc-section-title::before { background: var(--green); }
  .boc-center .boc-section-title::before { background: var(--accent); }
  .boc-right .boc-section-title::before { background: var(--bright); }

  /* LEFT: Savings hero — sleeker, no animated glow. */
  .boc-savings-hero {
    font-size: 28px; font-weight: 700; color: var(--green); line-height: 1;
    font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
    margin-bottom: 2px;
  }
  .boc-savings-sub {
    font-size: 10px; color: var(--dim);
    font-weight: 500; margin-bottom: 12px;
  }

  /* Route Bars */
  .boc-route-bars { display: flex; flex-direction: column; gap: 10px; margin-bottom: 0; }
  .boc-route-row { display: flex; align-items: center; gap: 8px; }
  .boc-route-label {
    font-size: 10px; color: var(--dim); min-width: 90px;
    font-weight: 500; letter-spacing: 0.3px;
  }
  .boc-route-track {
    flex: 1; height: 8px; border-radius: 4px;
    background: rgba(var(--accent-rgb, 38, 189, 214),0.06); overflow: hidden;
    position: relative;
  }
  .boc-route-fill {
    height: 100%; border-radius: 4px; transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative; min-width: 0;
  }
  .boc-route-fill::after {
    content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 20px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15));
    border-radius: 0 4px 4px 0;
  }
  .boc-route-fill.pattern  { background: linear-gradient(90deg, #00bcd4, #26c6da); }
  .boc-route-fill.bridge   { background: linear-gradient(90deg, #009688, #26a69a); }
  .boc-route-fill.openrouter { background: linear-gradient(90deg, #ff9800, #ffb74d); }
  .boc-route-pct {
    font-size: 10px; font-weight: 700; min-width: 32px;
    text-align: right; font-variant-numeric: tabular-nums;
  }
  .boc-route-pct.cyan   { color: var(--accent-text,#26c6da); }
  .boc-route-pct.teal   { color: var(--accent-text,#26a69a); }
  .boc-route-pct.orange { color: var(--warn-text,#ffb74d); }

  /* Token stats — baseline-aligned grid following the .dash-stat pattern.
     5 fixed columns; each cell is a 2-row grid with fixed value/label
     heights so every value sits on the same Y and every label sits on
     the same Y regardless of label-wrap. */
  /* Emmanuel 2026-05-14 — stat rows mirror the Pattern Match /
     Bridge / OpenRouter bar rows visually: label on the left at the
     SAME 90px min-width as .boc-route-label, a faint divider track
     in the middle in the same 8px-tall band the bars use, value on
     the right in the same tabular-nums column. Gives the Token
     Optimizer panel a single consistent rhythm top-to-bottom. */
  /* Same gap (10px) and same row shape as .boc-route-bars above;
     no margin-top + no border so the bar rows and stat rows read
     as one continuous list, top to bottom. */
  .boc-token-stats {
    display: flex; flex-direction: column; gap: 10px;
    margin-top: 10px;
  }
  .boc-tstat {
    display: flex; align-items: center; gap: 8px;
  }
  .boc-tstat-label {
    font-size: 10px; color: var(--dim); min-width: 90px;
    font-weight: 500; letter-spacing: 0.3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .boc-tstat-track {
    flex: 1; height: 8px; border-radius: 4px;
    background: rgba(var(--accent-rgb, 38, 189, 214),0.06);
    /* Subtle middle band — keeps the visual rhythm of the bar rows
       above. No moving fill: stats aren't a percentage. */
  }
  .boc-tstat-val {
    font-size: 12px; font-weight: 700; color: var(--text);
    min-width: 56px; text-align: right;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em; white-space: nowrap;
  }

  /* CENTER: Activity feed — tighter rows, dot indicator instead of bar.
     Emmanuel 2026-05-12 redesign matches the sleek Token Optimizer side. */
  .boc-feed {
    flex: 1; overflow-y: auto; display: flex; flex-direction: column;
    gap: 0; max-height: 220px;
    scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb, 38, 189, 214),0.2) transparent;
  }
  .boc-feed-item {
    display: grid; grid-template-columns: 48px 8px 1fr;
    align-items: start; gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(var(--accent-rgb, 38, 189, 214),0.04);
    font-size: 12px; line-height: 1.35;
  }
  .boc-feed-time {
    font-size: 10px; color: var(--dim);
    font-variant-numeric: tabular-nums; padding-top: 2px;
  }
  .boc-feed-bar {
    width: 6px; height: 6px; border-radius: 50%; margin-top: 6px;
    align-self: start;
  }
  .boc-feed-bar.success { background: var(--green); }
  .boc-feed-bar.error   { background: var(--red); }
  .boc-feed-bar.info    { background: var(--accent); }
  .boc-feed-msg { color: var(--text); min-width: 0; }
  .boc-feed-detail { font-size: 10px; color: var(--dim); margin-top: 1px; }
  .boc-feed-empty {
    flex: 1; display: flex; align-items: center; justify-content: center;
    color: var(--dim); font-size: 11px; font-style: italic;
  }

  /* RIGHT: Service Status — 2×3 grid of mini status cards. Each card
     has a colored left-border accent (green=up / red=down), the service
     name in white bold, and a small status word underneath. Hero count
     on top, uptime footer at the bottom. Emmanuel 2026-05-12 — feels
     like a "panel of indicators" rather than a list or a gimmick ring. */
  .boc-right { align-items: stretch !important; justify-content: flex-start !important; }
  .boc-svc-hero {
    text-align: center; margin-bottom: 10px;
  }
  .boc-svc-count {
    font-size: 26px; font-weight: 700; color: var(--green);
    line-height: 1; letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }
  .boc-svc-hero-sub {
    font-size: 9px; color: var(--dim); text-transform: uppercase;
    font-weight: 600; letter-spacing: 0.8px; margin-top: 3px;
  }
  .boc-svc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: auto;
  }
  .boc-svc-card {
    position: relative;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(var(--accent-rgb, 38, 189, 214),0.10);
    border-left-width: 3px;
    border-radius: 6px;
    padding: 6px 8px 6px 9px;
    transition: border-color 0.25s, background 0.25s;
    min-width: 0;
  }
  .boc-svc-card.up   { border-left-color: var(--green); }
  .boc-svc-card.down { border-left-color: var(--red); background: rgba(255,64,96,0.04); }
  .boc-svc-card-name {
    font-size: 11px; font-weight: 700; color: var(--text);
    line-height: 1; letter-spacing: 0.2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .boc-svc-card-status {
    font-size: 9px; font-weight: 600; line-height: 1;
    text-transform: uppercase; letter-spacing: 0.6px;
    margin-top: 4px;
  }
  .boc-svc-card.up   .boc-svc-card-status { color: var(--green); }
  .boc-svc-card.down .boc-svc-card-status { color: var(--red); }
  .boc-svc-foot {
    display: grid; grid-template-rows: 18px 14px;
    align-items: center; justify-items: center;
    text-align: center; padding-top: 10px;
    border-top: 1px solid rgba(var(--accent-rgb, 38, 189, 214),0.06);
    margin-top: 10px;
  }
  .boc-svc-foot-val {
    font-size: 14px; font-weight: 700; color: var(--text);
    font-variant-numeric: tabular-nums; line-height: 1;
  }
  .boc-svc-foot-lbl {
    font-size: 9px; color: var(--dim); text-transform: uppercase;
    letter-spacing: 0.8px; font-weight: 600;
  }

  /* === COMPLIANCE PAGE (framework-tabbed checklist) ===
     Gene 2026-05-12 — per-framework tab nav + control cards + drawer.
     Follows the same baseline-aligned visual vocabulary used by Dashboard
     hero cards and the Cron card stack. */
  .compliance-tabs {
    display: flex; gap: 6px; flex-wrap: wrap;
    border-bottom: 1px solid var(--panel-border);
    padding-bottom: 0;
  }
  .compliance-tab {
    padding: 9px 14px; font-size: 12px; font-weight: 600;
    color: var(--dim); cursor: pointer;
    border: 1px solid transparent; border-bottom: none;
    border-radius: 8px 8px 0 0;
    margin-bottom: -1px;
    display: flex; align-items: center; gap: 8px;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
    white-space: nowrap;
  }
  .compliance-tab:hover { color: var(--text); background: rgba(var(--accent-rgb, 38, 189, 214),0.04); }
  .compliance-tab.active {
    color: var(--accent); background: var(--panel-bg);
    border-color: var(--panel-border);
    border-bottom: 1px solid var(--panel-bg);
  }
  .compliance-tab .tab-progress {
    font-size: 10px; font-weight: 700;
    padding: 2px 7px; border-radius: 10px;
    background: rgba(100,116,139,0.15); color: var(--dim);
    font-variant-numeric: tabular-nums; letter-spacing: 0.2px;
  }
  .compliance-tab.active .tab-progress {
    background: rgba(0,230,118,0.12); color: var(--green);
  }

  .compliance-progress-bar {
    height: 6px; border-radius: 4px;
    background: rgba(100,116,139,0.15);
    overflow: hidden; display: flex;
    margin: 14px 0 18px;
  }
  .compliance-progress-bar .seg { height: 100%; transition: width 0.4s ease; }
  .compliance-progress-bar .seg.met     { background: var(--green); }
  .compliance-progress-bar .seg.partial { background: var(--gold); }
  .compliance-progress-bar .seg.gap     { background: var(--red); }
  .compliance-progress-bar .seg.manual  { background: rgba(var(--accent-rgb, 38, 189, 214),0.4); }
  .compliance-progress-bar .seg.na      { background: rgba(100,116,139,0.4); }

  .compliance-progress-legend {
    display: flex; gap: 14px; flex-wrap: wrap;
    font-size: 10.5px; color: var(--dim);
    margin-bottom: 18px;
  }
  .compliance-progress-legend .dot {
    display: inline-block; width: 8px; height: 8px;
    border-radius: 50%; margin-right: 5px; vertical-align: middle;
  }
  .compliance-progress-legend .dot.met     { background: var(--green); }
  .compliance-progress-legend .dot.partial { background: var(--gold); }
  .compliance-progress-legend .dot.gap     { background: var(--red); }
  .compliance-progress-legend .dot.manual  { background: rgba(var(--accent-rgb, 38, 189, 214),0.7); }
  .compliance-progress-legend .dot.na      { background: rgba(100,116,139,0.6); }

  .compliance-group {
    margin-bottom: 24px;
  }
  .compliance-group-header {
    display: flex; align-items: center; gap: 10px;
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; color: var(--text);
    margin-bottom: 10px;
  }
  .compliance-group-header .group-citation {
    color: var(--dim); font-weight: 500; letter-spacing: 0.5px;
  }

  .compliance-control {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-left: 3px solid var(--dim);
    border-radius: 8px;
    margin-bottom: 6px;
    overflow: hidden;
    transition: border-left-color 0.18s;
  }
  .compliance-control.status-met     { border-left-color: var(--green); }
  .compliance-control.status-partial { border-left-color: var(--gold); }
  .compliance-control.status-gap     { border-left-color: var(--red); }
  .compliance-control.status-manual  { border-left-color: var(--accent); }
  .compliance-control.status-na      { border-left-color: rgba(100,116,139,0.6); }

  .compliance-control-head {
    display: grid;
    grid-template-columns: 28px 1fr auto auto;
    align-items: center; gap: 14px;
    padding: 10px 14px;
    cursor: pointer;
  }
  .compliance-control-head:hover { background: rgba(var(--accent-rgb, 38, 189, 214),0.03); }
  .compliance-control-chevron {
    color: var(--dim); font-size: 10px;
    transition: transform 0.2s ease;
  }
  .compliance-control.is-open .compliance-control-chevron { transform: rotate(90deg); }
  .compliance-control-name {
    display: flex; flex-direction: column; gap: 2px; min-width: 0;
  }
  .compliance-control-name .citation {
    font-size: 10.5px; color: var(--dim); font-weight: 600;
    font-family: 'SF Mono', 'JetBrains Mono', monospace;
    letter-spacing: 0.2px;
  }
  .compliance-control-name .title {
    font-size: 13px; font-weight: 600; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .compliance-control-status {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.6px;
    padding: 3px 9px; border-radius: 10px;
    background: rgba(100,116,139,0.12); color: var(--dim);
  }
  .compliance-control-status.met     { background: rgba(0,230,118,0.10); color: var(--green); }
  .compliance-control-status.partial { background: rgba(255,183,77,0.12); color: var(--gold); }
  .compliance-control-status.gap     { background: rgba(255,64,96,0.12); color: var(--red); }
  .compliance-control-status.manual  { background: rgba(var(--accent-rgb, 38, 189, 214),0.10); color: var(--accent); }
  .compliance-control-status.na      { background: rgba(100,116,139,0.15); color: var(--dim); }
  .compliance-control-meta {
    font-size: 10px; color: var(--dim);
    font-variant-numeric: tabular-nums;
  }
  .compliance-control-detail {
    display: none;
    padding: 12px 14px 16px;
    border-top: 1px solid rgba(var(--accent-rgb, 38, 189, 214),0.08);
    background: rgba(0,0,0,0.18);
  }
  .compliance-control.is-open .compliance-control-detail { display: block; }
  .compliance-control-detail .desc {
    color: var(--text); font-size: 12px;
    line-height: 1.5; margin-bottom: 10px;
  }
  .compliance-control-detail .evidence-text {
    background: rgba(0,0,0,0.30); border-radius: 6px;
    padding: 8px 10px; font-size: 11px;
    color: var(--text); margin-bottom: 12px;
    border-left: 2px solid var(--accent);
  }
  .compliance-control-detail .sec-h {
    font-size: 9.5px; color: var(--dim);
    text-transform: uppercase; letter-spacing: 0.9px;
    font-weight: 700; margin: 12px 0 6px;
  }
  .compliance-control-detail .evidence-list {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 11px;
  }
  .compliance-control-detail .evidence-list a {
    color: var(--accent); text-decoration: none;
    padding: 4px 8px; border-radius: 4px;
    background: rgba(var(--accent-rgb, 38, 189, 214),0.06);
    display: inline-block;
  }
  .compliance-control-detail .evidence-list a:hover { background: rgba(var(--accent-rgb, 38, 189, 214),0.14); }
  .compliance-control-detail .evidence-list .ev-type {
    font-size: 9px; text-transform: uppercase;
    letter-spacing: 0.6px; color: var(--dim);
    margin-right: 6px; font-weight: 700;
  }
  .compliance-control-detail textarea.admin-notes {
    width: 100%; min-height: 60px;
    padding: 8px 10px; font-size: 12px;
    background: rgba(0,0,0,0.30); color: var(--text);
    border: 1px solid var(--panel-border); border-radius: 6px;
    font-family: inherit; resize: vertical;
  }
  .compliance-control-detail textarea.admin-notes:focus { border-color: var(--accent); outline: none; }
  .compliance-control-detail .mark-row {
    display: flex; align-items: center; gap: 10px;
    margin-top: 10px; flex-wrap: wrap;
  }
  .compliance-control-detail .mark-row select {
    padding: 5px 10px; font-size: 11px;
    background: rgba(0,0,0,0.30); color: var(--text);
    border: 1px solid var(--panel-border); border-radius: 6px;
  }
  .compliance-control-detail .mark-row .saved-pill {
    font-size: 10px; color: var(--green);
    padding: 2px 7px; border-radius: 8px;
    background: rgba(0,230,118,0.10);
    opacity: 0; transition: opacity 0.2s;
  }
  .compliance-control-detail .mark-row .saved-pill.visible { opacity: 1; }
  .compliance-control-detail .marked-meta {
    font-size: 10px; color: var(--dim);
    font-style: italic; margin-top: 6px;
  }

  .pscan-detail.open { display: block !important; }

  /* === RBAC PAGE === */
  .rbac-matrix { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 24px; }
  .rbac-matrix th { text-align: center; padding: 10px 12px; color: var(--accent); font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid rgba(var(--accent-rgb, 38, 189, 214),0.12); }
  .rbac-matrix th:first-child { text-align: left; }
  .rbac-matrix td { text-align: center; padding: 10px 12px; border-bottom: 1px solid rgba(var(--accent-rgb, 38, 189, 214),0.06); font-size: 14px; }
  .rbac-matrix td:first-child { text-align: left; font-size: 12px; font-weight: 500; color: var(--text); }
  .rbac-check { color: var(--green); font-weight: 700; }
  .rbac-dash { color: var(--dim); opacity: 0.4; }
  .rbac-users select { padding: 4px 8px; background: var(--input-bg); border: 1px solid rgba(var(--accent-rgb, 38, 189, 214),0.12); border-radius: 6px; color: var(--text); font-family: inherit; font-size: 11px; outline: none; cursor: pointer; }
  .rbac-users select:focus { border-color: var(--accent); }

  /* === CRON PAGE === */
  .cron-form { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 12px; margin-bottom: 12px; }
  .cron-form .cron-params-col { grid-column: span 4; }
  .cron-form .input, .cron-form select, .cron-form textarea { width: 100%; }
  .cron-form textarea { min-height: 48px; resize: vertical; }
  .cron-status-running { color: var(--green); font-weight: 600; }
  .cron-status-idle { color: var(--dim); }
  .cron-status-error { color: var(--red); font-weight: 600; }

  /* Emmanuel 2026-05-12 — cron jobs as a stack of cards instead of a
     table. Every card has the same internal grid so baselines line up
     cleanly across rows; click to expand a detail drawer. */
  #cron-jobs-list { display: flex; flex-direction: column; gap: 10px; }
  .cron-card {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-left: 3px solid var(--accent);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.2s, transform 0.12s ease;
  }
  .cron-card.is-paused   { opacity: 0.55; border-left-color: var(--dim); }
  .cron-card.is-error    { border-left-color: var(--red); }
  .cron-card.is-running  { border-left-color: var(--green); }
  .cron-card-head {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    cursor: pointer;
  }
  .cron-card-head:hover { background: rgba(var(--accent-rgb, 38, 189, 214),0.03); }
  .cron-card-title-block { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .cron-card-chevron {
    color: var(--dim); font-size: 10px; flex-shrink: 0;
    transition: transform 0.2s ease;
    display: inline-block; width: 10px;
  }
  .cron-card.is-open .cron-card-chevron { transform: rotate(90deg); }
  .cron-card-titles { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
  .cron-card-name {
    font-size: 13px; font-weight: 700; color: var(--text);
    line-height: 1; letter-spacing: -0.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .cron-card-skillaction {
    font-size: 10.5px; color: var(--dim);
    font-family: 'SF Mono', 'JetBrains Mono', monospace;
    line-height: 1; letter-spacing: 0.2px;
  }
  .cron-card-status {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.8px; padding: 3px 9px; border-radius: 12px;
  }
  .cron-card-status.running { color: var(--green); background: rgba(0,230,118,0.10); }
  .cron-card-status.idle    { color: var(--dim);   background: rgba(100,116,139,0.10); }
  .cron-card-status.error   { color: var(--red);   background: rgba(255,64,96,0.10); }
  .cron-card-status.paused  { color: var(--dim);   background: rgba(100,116,139,0.10); }
  .cron-card-status .pulse {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--green); box-shadow: 0 0 6px var(--green);
    animation: pulseGreen 1.5s ease-in-out infinite;
  }
  .cron-card-actions { display: flex; gap: 6px; flex-shrink: 0; }
  .cron-card-actions .btn-secondary,
  .cron-card-actions .btn-danger { padding: 4px 12px; font-size: 11px; }
  .cron-card-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1.6fr;
    gap: 16px;
    padding: 10px 16px 12px;
    border-top: 1px solid rgba(var(--accent-rgb, 38, 189, 214),0.06);
    background: rgba(0,0,0,0.12);
  }
  .cron-card-stat {
    display: grid;
    grid-template-rows: 11px 16px;
    align-items: center; gap: 2px;
    min-width: 0;
  }
  .cron-card-stat-label {
    font-size: 9px; color: var(--dim);
    text-transform: uppercase; letter-spacing: 0.8px;
    font-weight: 600; line-height: 1;
    white-space: nowrap;
  }
  .cron-card-stat-val {
    font-size: 12px; font-weight: 600; color: var(--text);
    font-variant-numeric: tabular-nums; line-height: 1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .cron-card-stat-val.dim { color: var(--dim); font-weight: 500; }
  .cron-card-stat-val.success { color: var(--green); }
  .cron-card-stat-val.error   { color: var(--red); }
  .cron-card-stat-val.mono    { font-family: 'SF Mono', 'JetBrains Mono', monospace; font-size: 10.5px; }
  .cron-card-detail {
    display: none;
    padding: 14px 16px 16px;
    background: rgba(0,0,0,0.18);
    border-top: 1px solid rgba(var(--accent-rgb, 38, 189, 214),0.10);
  }
  .cron-card.is-open .cron-card-detail { display: block; }
  .cron-card-detail-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 18px; font-size: 11px;
  }
  .cron-card-section-h {
    color: var(--dim); text-transform: uppercase;
    font-size: 9.5px; letter-spacing: 1px;
    font-weight: 600; margin-bottom: 6px;
  }
  .cron-card-detail pre {
    margin: 0; padding: 8px 10px;
    background: rgba(0,0,0,0.35); border-radius: 6px;
    font-family: 'SF Mono', 'JetBrains Mono', monospace;
    font-size: 11px; color: var(--text);
    white-space: pre-wrap; word-break: break-word;
  }
  .cron-card-detail .result-pre { max-height: 280px; overflow-y: auto; }
  .cron-card-detail .result-pre.success { color: var(--green); }
  .cron-card-detail .result-pre.error   { color: var(--red); }
  .cron-card-meta { display: flex; flex-direction: column; gap: 4px; font-family: 'SF Mono', 'JetBrains Mono', monospace; font-size: 11px; }
  .cron-card-meta-row { display: grid; grid-template-columns: 90px 1fr; gap: 8px; align-items: baseline; }
  .cron-card-meta-row .k { color: var(--dim); }
  .cron-card-empty {
    text-align: center; padding: 24px; color: var(--dim);
    font-size: 12px; background: var(--panel-bg);
    border: 1px dashed var(--panel-border); border-radius: 10px;
  }
  .btn-danger { padding: 5px 12px; font-size: 11px; border-radius: 8px; background: rgba(255,64,96,0.1); border: 1px solid rgba(255,64,96,0.3); color: var(--red); font-family: inherit; cursor: pointer; transition: all 0.2s; }
  .btn-danger:hover { background: rgba(255,64,96,0.2); border-color: var(--red); }

  /* === OPTIMIZATION PAGE === */
  .opt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .opt-big-num { font-size: 36px; font-weight: 700; color: var(--bright); line-height: 1; margin-bottom: 4px; }
  .opt-label { font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: 1px; }
  .opt-bar-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 11px; }
  .opt-bar { height: 8px; border-radius: 4px; min-width: 4px; transition: width 0.3s; }
  .opt-bar-discord { background: #5865f2; }
  .opt-bar-teams { background: #6264a7; }
  .opt-bar-avatar { background: var(--accent); }
  .opt-mini-bars { display: flex; align-items: flex-end; gap: 3px; height: 40px; margin-top: 8px; }
  .opt-mini-bar { width: 12px; border-radius: 3px 3px 0 0; background: var(--accent); transition: height 0.3s; min-height: 2px; }
  .opt-donut { width: 80px; height: 80px; border-radius: 50%; position: relative; display: flex; align-items: center; justify-content: center; margin: 8px auto; }
  .opt-donut-label { font-size: 14px; font-weight: 700; color: var(--bright); }
  .opt-list { list-style: none; padding: 0; }
  .opt-list li { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid rgba(var(--accent-rgb, 38, 189, 214),0.06); font-size: 12px; }
  .opt-list li span:last-child { font-weight: 600; color: var(--bright); font-variant-numeric: tabular-nums; }
  .opt-skill-bars { display: flex; flex-direction: column; gap: 6px; }
  .opt-skill-row { display: flex; align-items: center; gap: 8px; font-size: 11px; }
  .opt-skill-name { min-width: 100px; color: var(--dim); }
  .opt-skill-bar { height: 6px; border-radius: 3px; background: var(--accent); transition: width 0.3s; }

  /* === CHANNELS PAGE === */
  /* Adapter rows — CW #1997 (this is the file actually loaded; admin.css
     is not in the page <link> chain, so duplicating here is required). */
  .adapter-row {
    display: grid;
    grid-template-columns: 40px 1fr auto auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "icon name toggle edit"
      "icon meta meta meta";
    align-items: center;
    column-gap: 14px;
    row-gap: 4px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--panel-border);
    background: var(--panel-bg);
    transition: border-color 0.18s, box-shadow 0.18s;
  }
  .adapter-row:hover { border-color: rgba(var(--accent-rgb, 38, 189, 214),0.45); box-shadow: 0 2px 12px rgba(0,0,0,0.18); }
  .adapter-row.connected { border-left: 3px solid var(--green, #00c853); padding-left: 11px; }
  .adapter-row.disconnected { border-left: 3px solid #f85149; padding-left: 11px; }
  .adapter-row.coming-soon { opacity: 0.55; }
  .adapter-row-icon { grid-area: icon; font-size: 26px; line-height: 1; text-align: center; align-self: center; }
  .adapter-row-name { grid-area: name; font-weight: 600; font-size: 13px; color: var(--text); display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; }
  .adapter-row-name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .adapter-row-name .ar-status-pill { font-size: 9.5px; font-weight: 600; padding: 2px 7px; border-radius: 10px; letter-spacing: 0.4px; text-transform: uppercase; flex: 0 0 auto; }
  .adapter-row-name .ar-status-pill.connected { background: rgba(0,230,118,0.12); color: var(--green, #00c853); }
  .adapter-row-name .ar-status-pill.disconnected { background: rgba(255,64,96,0.12); color: var(--bad-text,#f85149); }
  .adapter-row-name .ar-status-pill.coming-soon { background: rgba(255,183,77,0.12); color: var(--gold, #ffb74d); }
  .adapter-row-meta { grid-area: meta; font-size: 11px; color: var(--dim); display: flex; gap: 12px; flex-wrap: wrap; align-items: center; overflow: hidden; }
  .adapter-row-meta .ar-upstream { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .adapter-row-meta .ar-channels { color: var(--accent); flex: 0 0 auto; }
  .adapter-row-toggle { grid-area: toggle; display: flex; align-items: center; }
  .adapter-row-edit {
    grid-area: edit;
    padding: 6px 14px; font-size: 11px; border-radius: 6px; cursor: pointer;
    background: rgba(var(--accent-rgb, 38, 189, 214),0.1); color: var(--accent); border: 1px solid rgba(var(--accent-rgb, 38, 189, 214),0.3);
    font-family: inherit; transition: all 0.15s; white-space: nowrap;
  }
  .adapter-row-edit:hover { background: rgba(var(--accent-rgb, 38, 189, 214),0.2); border-color: var(--accent); }
  .adapter-row.coming-soon .adapter-row-edit { display: none; }

  /* Toggle switches — CW reopen of #1997: was a round blob with no
     on/off semantic. Now green slider when on, gray when off, animated. */
  .toggle { position: relative; display: inline-block; width: 36px; height: 18px; cursor: pointer; vertical-align: middle; }
  .toggle input { opacity: 0; width: 0; height: 0; }
  .toggle .slider { position: absolute; inset: 0; border-radius: 18px; background: rgba(107,125,154,0.45); transition: background 0.18s; }
  .toggle .slider::before { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #cbd5e1; transition: transform 0.18s, background 0.18s; box-shadow: 0 1px 3px rgba(0,0,0,0.4); }
  .toggle input:checked + .slider { background: var(--green, #00c853); }
  .toggle input:checked + .slider::before { background: #fff; transform: translateX(18px); }

  /* Channel + Adapter edit modals — wider so the tooltips and fields fit. */
  .channel-modal, .user-modal { max-width: 720px; }

  /* Inline (i) tooltip chips next to settings labels */
  .opt-info {
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px; margin-left: 6px;
    border-radius: 50%; background: rgba(var(--accent-rgb, 38, 189, 214),0.15); color: var(--accent);
    font-size: 10px; font-weight: 700; cursor: help;
    border: 1px solid rgba(var(--accent-rgb, 38, 189, 214),0.35);
    vertical-align: middle;
  }
  .opt-info:hover { background: rgba(var(--accent-rgb, 38, 189, 214),0.3); }

  .adapter-card { padding: 14px; border-radius: 12px; border: 1px solid var(--panel-border); background: var(--panel-bg); display: flex; flex-direction: column; gap: 8px; transition: border-color 0.2s; }
  .adapter-card.connected { border-color: rgba(0,230,118,0.25); }
  .adapter-card.disconnected { border-color: rgba(255,64,96,0.25); }
  .adapter-card.coming-soon { opacity: 0.5; }
  .adapter-card-header { display: flex; align-items: center; justify-content: space-between; }
  .adapter-card-info { display: flex; align-items: center; gap: 10px; }
  .adapter-card-icon { font-size: 22px; }
  .adapter-card-name { font-weight: 600; font-size: 13px; }
  .adapter-card-status { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--dim); }
  .adapter-status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
  .adapter-status-dot.connected { background: var(--green); box-shadow: 0 0 6px rgba(0,230,118,0.4); }
  .adapter-status-dot.disconnected { background: var(--red); box-shadow: 0 0 6px rgba(255,64,96,0.4); }
  .channel-actions { display: flex; gap: 6px; }
  .channel-actions button { padding: 4px 10px; font-size: 11px; border-radius: 6px; border: 1px solid rgba(var(--accent-rgb, 38, 189, 214),0.12); background: rgba(var(--accent-rgb, 38, 189, 214),0.08); color: var(--accent); font-family: inherit; cursor: pointer; transition: all 0.2s; }
  .channel-actions button:hover { border-color: var(--accent); background: rgba(var(--accent-rgb, 38, 189, 214),0.15); }
  .channel-actions .btn-del { color: var(--red); border-color: rgba(255,64,96,0.12); background: rgba(255,64,96,0.06); }
  .channel-actions .btn-del:hover { background: rgba(255,64,96,0.18); border-color: var(--red); }
  .routing-badge { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 10px; font-weight: 600; letter-spacing: 0.3px; }
  .routing-badge.worker { background: rgba(var(--accent-rgb, 38, 189, 214),0.15); color: var(--accent); }
  .routing-badge.bridge { background: rgba(0,230,118,0.15); color: var(--green); }
  .routing-badge.skill { background: rgba(255,183,77,0.15); color: var(--gold); }
  .type-badge { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 10px; font-weight: 600; letter-spacing: 0.3px; background: rgba(107,125,154,0.15); color: var(--dim); }

  /* === COMMS PAGE === */
  /* Network page */
  .dns-type-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.5px; }
  .dns-type-a { background: rgba(59,130,246,0.2); color: var(--accent-text,#60a5fa); }
  .dns-type-aaaa { background: rgba(59,130,246,0.2); color: var(--accent-text,#60a5fa); }
  .dns-type-cname { background: rgba(34,197,94,0.2); color: var(--ok-text,#4ade80); }
  .dns-type-mx { background: rgba(168,85,247,0.2); color: var(--accent-text,#c084fc); }
  .dns-type-txt { background: rgba(156,163,175,0.2); color: var(--dim-text,#9ca3af); }
  .dns-type-default { background: rgba(var(--accent-rgb, 38, 189, 214),0.2); color: var(--accent); }
  .net-zone-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
  .net-zone-item { padding: 10px; border-radius: 8px; background: rgba(var(--accent-rgb, 38, 189, 214),0.04); border: 1px solid var(--panel-border); }
  .net-zone-label { font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
  .net-zone-value { font-size: 13px; font-weight: 600; }
  .net-tunnel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
  .net-tunnel-card { padding: 14px; border-radius: 10px; border: 1px solid var(--panel-border); background: var(--panel-bg); }
  .net-tunnel-name { font-weight: 600; font-size: 14px; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
  .net-tunnel-id { font-size: 11px; color: var(--dim); font-family: monospace; }
  .net-tunnel-conns { font-size: 11px; color: var(--dim); margin-top: 6px; }
  .net-status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
  .net-status-dot.healthy { background: var(--green); }
  .net-status-dot.degraded { background: var(--gold); }
  .net-status-dot.down { background: var(--red); }

  /* CW #1999 — Tunnels list view (horizontal strips, skills-page pattern).
     One row per tunnel: dot · name + short id · meta · status label.
     Replaces the previous grid-of-cards layout per Emmanuel 2026-05-12. */
  .tunnels-list { display: flex; flex-direction: column; gap: 6px; max-width: 1100px; }
  .tunnel-row {
    display: flex; flex-direction: row; align-items: center; gap: 14px;
    padding: 10px 14px;
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    background: var(--panel-bg);
    transition: border-color 0.15s;
  }
  .tunnel-row:hover { border-color: var(--accent); }
  .tunnel-row.down { opacity: 0.7; }
  .tunnel-dot {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  }
  .tunnel-dot.healthy  { background: var(--green); box-shadow: 0 0 6px rgba(34,197,94,0.5); }
  .tunnel-dot.degraded { background: var(--gold); }
  .tunnel-dot.down     { background: var(--red); }
  .tunnel-name {
    display: flex; flex-direction: column; gap: 2px; flex-shrink: 0;
    min-width: 180px;
  }
  .tunnel-name-text { font-weight: 600; font-size: 13px; color: var(--text); }
  .tunnel-id {
    font-family: ui-monospace, "JetBrains Mono", monospace;
    font-size: 10px; color: var(--dim);
  }
  .tunnel-meta {
    display: flex; flex-wrap: wrap; gap: 14px;
    flex: 1; min-width: 0;
    font-size: 11px; color: var(--dim);
  }
  .tunnel-meta .tunnel-conn  { font-variant-numeric: tabular-nums; }
  .tunnel-meta .tunnel-colos {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 280px;
  }
  .tunnel-meta .tunnel-age   { font-variant-numeric: tabular-nums; color: rgba(255,255,255,0.4); }
  .tunnel-status {
    font-size: 11px; font-weight: 500; flex-shrink: 0;
    padding: 3px 10px; border-radius: 4px;
    text-transform: lowercase; letter-spacing: 0.3px;
  }
  .tunnel-status.healthy  { color: var(--green); background: rgba(34,197,94,0.12); }
  .tunnel-status.degraded { color: var(--gold);  background: rgba(245,158,11,0.12); }
  .tunnel-status.down     { color: var(--red);   background: rgba(244,67,54,0.12); }

  @media (max-width: 760px) {
    .tunnel-row { flex-wrap: wrap; }
    .tunnel-meta { min-width: 100%; padding-left: 24px; }
  }
  .net-proxied { font-size: 14px; }
  .net-purge-btn { padding: 6px 14px; border-radius: 6px; border: 1px solid var(--accent); background: rgba(var(--accent-rgb, 38, 189, 214),0.1); color: var(--accent); cursor: pointer; font-size: 12px; font-weight: 500; transition: background 0.2s; }
  .net-purge-btn:hover { background: rgba(var(--accent-rgb, 38, 189, 214),0.25); }

  .comms-diagram { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0; padding: 24px 16px; position: relative; }
  .comms-col { display: flex; flex-direction: column; gap: 12px; align-items: center; }
  .comms-node { padding: 10px 18px; border-radius: 12px; border: 1px solid var(--panel-border); background: var(--panel-bg); font-size: 12px; font-weight: 600; text-align: center; min-width: 100px; position: relative; transition: box-shadow 0.3s, border-color 0.3s; }
  .comms-node.active { border-color: var(--green); animation: pulseGreen 2s ease-in-out infinite; }
  .comms-node.inactive { border-color: var(--red); animation: pulseRed 1.5s ease-in-out infinite; }
  .comms-node-label { font-size: 10px; color: var(--dim); margin-top: 2px; }
  .comms-arrow { display: flex; align-items: center; justify-content: center; padding: 0 6px; color: var(--dim); font-size: 18px; }
  .comms-arrow svg { stroke: var(--dim); }
  .comms-flow-log { max-height: 260px; overflow-y: auto; }
  .comms-flow-item { display: flex; gap: 10px; padding: 8px 12px; font-size: 11px; border-bottom: 1px solid rgba(var(--accent-rgb, 38, 189, 214),0.06); align-items: center; }
  .comms-flow-time { color: var(--dim); min-width: 60px; font-variant-numeric: tabular-nums; }
  .comms-flow-path { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
  .comms-flow-step { padding: 2px 8px; border-radius: 4px; background: rgba(var(--accent-rgb, 38, 189, 214),0.08); color: var(--accent); font-size: 10px; font-weight: 500; }
  .comms-flow-arrow { color: var(--dim); font-size: 10px; }

  /* === USERS PAGE === */
  .users-topbar { display: flex; align-items: center; gap: 12px; padding: 16px; flex-wrap: wrap; }
  .users-topbar .btn-primary { white-space: nowrap; }
  .user-count { font-size: 11px; color: var(--dim); margin-left: auto; margin-right: 8px; }
  .user-search { flex: 0 0 220px; padding: 8px 12px; background: var(--input-bg); border: 1px solid rgba(var(--accent-rgb, 38, 189, 214),0.12); border-radius: 8px; color: var(--text); font-family: inherit; font-size: 12px; outline: none; transition: border-color 0.2s; }
  .user-search:focus { border-color: var(--accent); }
  .user-actions { display: flex; gap: 6px; }
  .user-actions button { padding: 4px 10px; font-size: 11px; border-radius: 6px; border: 1px solid rgba(var(--accent-rgb, 38, 189, 214),0.12); background: rgba(var(--accent-rgb, 38, 189, 214),0.08); color: var(--accent); font-family: inherit; cursor: pointer; transition: all 0.2s; }
  .user-actions button:hover { border-color: var(--accent); background: rgba(var(--accent-rgb, 38, 189, 214),0.15); }
  .user-actions .btn-del { border-color: rgba(255,64,96,0.3); background: rgba(255,64,96,0.08); color: var(--red); }
  .user-actions .btn-del:hover { background: rgba(255,64,96,0.18); border-color: var(--red); }
  .source-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 600; letter-spacing: 0.5px; }
  .source-badge.m365 { background: rgba(38,120,214,0.18); color: var(--accent-text,#5b9cf5); }
  .source-badge.manual { background: rgba(107,125,154,0.18); color: var(--dim); }
  /* CW #1924 (Emmanuel 2026-05-13) — offboarded / possibly-stale badge.
     Sits next to the source-badge on the Users row. Red so it draws
     the eye for cleanup actions. */
  .user-stale {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.4px;
    background: rgba(255, 64, 96, 0.16);
    color: var(--red);
    border: 1px solid rgba(255, 64, 96, 0.4);
    text-transform: lowercase;
    cursor: help;
  }
  [data-theme="light"] .user-stale {
    background: rgba(178, 31, 31, 0.10);
    color: #8e1c1c;
    border-color: rgba(178, 31, 31, 0.45);
  }
  .role-select { padding: 4px 8px; background: var(--input-bg); border: 1px solid rgba(var(--accent-rgb, 38, 189, 214),0.12); border-radius: 6px; color: var(--text); font-family: inherit; font-size: 11px; outline: none; cursor: pointer; }
  .role-select:focus { border-color: var(--accent); }
  .user-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); z-index: 500; display: none; align-items: center; justify-content: center; }
  .user-modal-overlay.open { display: flex; }
  .user-modal { background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 16px; padding: 24px; width: 440px; max-height: 80vh; overflow-y: auto; backdrop-filter: blur(20px); box-shadow: 0 16px 60px rgba(0,0,0,0.5); }
  .user-modal h3 { color: var(--accent); font-size: 16px; margin-bottom: 16px; }
  .user-modal label { display: block; font-size: 11px; color: var(--dim); margin-bottom: 4px; margin-top: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
  .user-modal label:first-of-type { margin-top: 0; }
  .user-modal .input { width: 100%; box-sizing: border-box; }
  .user-modal select { width: 100%; padding: 8px 12px; background: var(--input-bg); border: 1px solid rgba(var(--accent-rgb, 38, 189, 214),0.12); border-radius: 8px; color: var(--text); font-family: inherit; font-size: 12px; outline: none; }
  .user-modal .modal-actions { display: flex; gap: 10px; margin-top: 20px; justify-content: flex-end; }
  .user-modal .btn-cancel { padding: 8px 16px; border-radius: 8px; border: 1px solid rgba(107,125,154,0.3); background: transparent; color: var(--dim); font-family: inherit; cursor: pointer; }

  /* === Agents === */
  .agents-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px; }
  .agent-card { padding: 20px; background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 8px; }
  .agent-name { font-size: 16px; font-weight: 600; color: var(--accent); margin-bottom: 4px; }
  .agent-type { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-left: 8px; }
  .agent-type.primary { background: rgba(var(--accent-rgb, 38, 189, 214),0.15); color: var(--accent); }
  .agent-type.fallback { background: rgba(255,183,77,0.15); color: var(--gold); }
  .agent-type.adapter { background: rgba(0,230,118,0.15); color: var(--green); }
  .agent-type.interface { background: rgba(179,136,255,0.15); color: var(--accent-text,#b388ff); }
  .agent-type.internal { background: rgba(107,125,154,0.15); color: var(--dim); }
  .agent-status { display: flex; align-items: center; gap: 6px; font-size: 12px; margin: 8px 0; }
  .agent-meta { font-size: 12px; color: var(--dim); margin: 4px 0; }
  .agent-role { font-size: 12px; color: var(--text); margin: 8px 0; font-style: italic; }
  .agent-config { margin-top: 10px; border-top: 1px solid var(--panel-border); padding-top: 10px; }
  .agent-config-row { display: flex; justify-content: space-between; font-size: 11px; padding: 2px 0; }
  .agent-config-key { color: var(--dim); }
  .agent-config-val { color: var(--text); }

  /* === Portals === */
  .portals-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 16px; }
  .portal-card { position: relative; padding: 20px; background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 8px; }
  .portal-name { font-size: 18px; font-weight: 600; color: var(--accent); }
  .portal-url { font-size: 12px; color: var(--dim); margin: 4px 0; }
  .portal-url a { color: var(--accent); text-decoration: none; }
  .portal-url a:hover { text-decoration: underline; }
  .portal-role { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
  .portal-role.marketing { background: rgba(179,136,255,0.15); color: var(--accent-text,#b388ff); }
  .portal-role.sales { background: rgba(66,165,245,0.15); color: var(--accent-text,#42a5f5); }
  .portal-role.finance { background: rgba(255,183,77,0.15); color: var(--gold); }
  .portal-role.ops { background: rgba(0,230,118,0.15); color: var(--green); }
  .portal-role.hr { background: rgba(236,64,122,0.15); color: var(--bad-text,#ec407a); }
  .portal-role.general { background: rgba(107,125,154,0.15); color: var(--dim); }
  .portal-desc { font-size: 12px; color: var(--text); margin: 10px 0; }
  .portal-meta { font-size: 11px; color: var(--dim); margin: 4px 0; }
  .portal-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }
  .portal-tag { padding: 1px 8px; border-radius: 8px; font-size: 10px; background: rgba(var(--accent-rgb, 38, 189, 214),0.08); color: var(--dim); border: 1px solid var(--panel-border); }
  .portal-actions { display: flex; gap: 8px; margin-top: 12px; }
  .portal-launch { padding: 6px 16px; background: rgba(var(--accent-rgb, 38, 189, 214),0.15); border: 1px solid var(--accent); border-radius: 8px; color: var(--accent); font-size: 12px; cursor: pointer; transition: all 0.2s; }
  .portal-launch:hover { background: rgba(var(--accent-rgb, 38, 189, 214),0.25); }
  .portal-status-toggle { display: flex; align-items: center; gap: 6px; margin: 8px 0; font-size: 12px; cursor: pointer; }
  .portal-status-toggle .toggle-track { width: 32px; height: 16px; border-radius: 8px; background: rgba(107,125,154,0.3); position: relative; transition: background 0.2s; }
  .portal-status-toggle .toggle-track.active { background: rgba(0,230,118,0.3); }
  .portal-status-toggle .toggle-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--dim); position: absolute; top: 2px; left: 2px; transition: all 0.2s; }
  .portal-status-toggle .toggle-track.active .toggle-thumb { left: 18px; background: var(--green); }

  .portal-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); z-index: 500; display: none; align-items: center; justify-content: center; }
  .portal-modal-overlay.open { display: flex; }
  .portal-modal { background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 16px; padding: 24px; width: 520px; max-height: 80vh; overflow-y: auto; backdrop-filter: blur(20px); box-shadow: 0 16px 60px rgba(0,0,0,0.5); }
  .portal-modal h3 { color: var(--accent); font-size: 16px; margin-bottom: 16px; }
  .portal-modal label { display: block; font-size: 11px; color: var(--dim); margin-bottom: 4px; margin-top: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
  .portal-modal label:first-of-type { margin-top: 0; }
  .portal-modal .input { width: 100%; box-sizing: border-box; }
  .portal-modal select { width: 100%; padding: 8px 12px; background: var(--input-bg); border: 1px solid rgba(var(--accent-rgb, 38, 189, 214),0.12); border-radius: 8px; color: var(--text); font-family: inherit; font-size: 12px; outline: none; }
  .portal-modal textarea { width: 100%; box-sizing: border-box; padding: 8px 12px; background: var(--input-bg); border: 1px solid rgba(var(--accent-rgb, 38, 189, 214),0.12); border-radius: 8px; color: var(--text); font-family: inherit; font-size: 12px; outline: none; resize: vertical; min-height: 60px; }
  .portal-modal .checkbox-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
  .portal-modal .checkbox-grid label { display: flex; align-items: center; gap: 4px; margin: 0; text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--text); cursor: pointer; }
  .portal-modal .checkbox-grid input[type="checkbox"] { accent-color: var(--accent); }
  .portal-modal .modal-actions { display: flex; gap: 10px; margin-top: 20px; justify-content: flex-end; }
  .portal-modal .btn-cancel { padding: 8px 16px; border-radius: 8px; border: 1px solid rgba(107,125,154,0.3); background: transparent; color: var(--dim); font-family: inherit; cursor: pointer; }
  .portal-modal .theme-toggle { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
  .portal-modal .theme-toggle label { margin: 0; }

  /* === Emma Chat Orb (inline) === */
  @keyframes orbFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
  }
  #emma-orb:hover {
    transform: scale(1.1) translateY(-3px);
    box-shadow: 0 0 30px rgba(var(--accent-rgb, 38, 189, 214),0.5), 0 0 60px rgba(var(--accent-rgb, 38, 189, 214),0.2), 0 6px 24px rgba(0,0,0,0.5);
  }

  /* =========================================================
     CW Project #63 follow-up — Light theme overrides
     for hardcoded dark rgba surfaces in components.css.
     Gene 2026-05-08.
     ========================================================= */
  [data-theme="light"] .input,
  [data-theme="light"] textarea,
  [data-theme="light"] .expand-row td {
    background: #ffffff;
    border-color: rgba(26, 154, 181, 0.22);
    color: #1a2332;
  }
  [data-theme="light"] .input:focus,
  [data-theme="light"] textarea:focus { border-color: #1a9ab5; }

  [data-theme="light"] .toast {
    background: rgba(255, 255, 255, 0.97);
    border-color: rgba(26, 154, 181, 0.22);
    box-shadow: 0 8px 24px rgba(20, 30, 50, 0.12);
  }
  [data-theme="light"] .toast-msg { color: #5c6a82; }

  [data-theme="light"] .screenshot-area { background: rgba(20, 30, 50, 0.04); color: #5c6a82; }
  [data-theme="light"] .result-box { background: rgba(20, 30, 50, 0.05); color: #1a2332; }

  [data-theme="light"] .badge-viewer,
  [data-theme="light"] .type-badge,
  [data-theme="light"] .source-badge.manual,
  [data-theme="light"] .agent-type.internal,
  [data-theme="light"] .portal-role.general {
    background: rgba(140, 158, 184, 0.18);
    color: #5c6a82;
  }
  [data-theme="light"] .toggle .slider { background: rgba(140, 158, 184, 0.3); }

  [data-theme="light"] .user-modal,
  [data-theme="light"] .portal-modal {
    box-shadow: 0 16px 60px rgba(20, 30, 50, 0.16);
  }

  /* The hero gradient at line 344 (rgba(8,12,26,0.95) → rgba(14,22,42,0.95))
     becomes a soft white→light-blue gradient in light mode. Selector below
     matches whatever class uses that gradient (commonly a `.hero` pattern). */
  [data-theme="light"] .hero,
  [data-theme="light"] .install-hero,
  [data-theme="light"] .panel-hero,
  [data-theme="light"] .brain-ops-center {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(244, 247, 251, 0.95) 100%) !important;
    color: #1a2332;
  }
  /* AI Operations Center tile inner sections — section-title labels, route
     bars, savings caption all need light-mode color tweaks. The accent
     savings-hero (#00e676 green) stays bright since it's the brand highlight. */
  [data-theme="light"] .brain-ops-center::before {
    background:
      radial-gradient(ellipse at 15% 50%, rgba(0,160,80,0.06) 0%, transparent 50%),
      radial-gradient(ellipse at 85% 50%, rgba(26,154,181,0.06) 0%, transparent 50%) !important;
  }
  [data-theme="light"] .boc-section + .boc-section { border-left-color: rgba(26, 154, 181, 0.15) !important; }
  [data-theme="light"] .boc-section-title { color: #5c6a82 !important; }
  [data-theme="light"] .boc-savings-sub { color: rgba(0, 160, 80, 0.85) !important; }
  [data-theme="light"] .boc-route-label { color: #5c6a82 !important; }
  [data-theme="light"] .boc-route-track { background: rgba(26, 154, 181, 0.1) !important; }
  [data-theme="light"] .boc-tstat-val { color: #1a2332 !important; }
  [data-theme="light"] .boc-tstat-label { color: #5c6a82 !important; }
  [data-theme="light"] .boc-ring-svc-label { color: #5c6a82 !important; }
  [data-theme="light"] .boc-ring-dot.down { background: rgba(255, 64, 96, 0.6) !important; }

  /* CW #2073 (HIPAA Phase 1.9) — compliance register page. Dark navy
     panels matching the existing admin design; cyan accent for HIPAA tier
     banner, dim borders for standard tier. */
  .compliance-banner {
    border: 1px solid;
    border-radius: 8px;
    padding: 12px 14px;
    background: rgba(var(--accent-rgb, 38, 189, 214),0.04);
    display: flex; flex-direction: column; gap: 4px;
    margin-bottom: 8px;
  }
  .compliance-banner-label { font-size: 12px; font-weight: 700; letter-spacing: 0.8px; }
  .compliance-banner-note { font-size: 11px; color: var(--dim); }
  .compliance-panel { padding: 14px 16px; }
  .compliance-panel-title {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--accent); font-weight: 700; margin-bottom: 10px;
    padding-bottom: 6px; border-bottom: 1px solid rgba(var(--accent-rgb, 38, 189, 214),0.15);
  }
  .compliance-row {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 14px; padding: 6px 0; font-size: 12px;
    border-bottom: 1px solid rgba(var(--accent-rgb, 38, 189, 214),0.05);
  }
  .compliance-row:last-child { border-bottom: 0; }
  .compliance-key {
    color: var(--dim); font-size: 11px; min-width: 200px; flex-shrink: 0;
  }
  .compliance-row code {
    background: rgba(var(--accent-rgb, 38, 189, 214),0.08); padding: 1px 6px;
    border-radius: 4px; font-size: 11px; color: var(--accent);
    font-family: ui-monospace, "JetBrains Mono", monospace;
  }
  .compliance-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
  .compliance-denylist-chip {
    background: rgba(229,57,53,0.12) !important;
    color: var(--bad-text,#ff8a80) !important;
  }
  .compliance-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    margin-right: 8px; vertical-align: middle;
  }
  .compliance-dot.ok   { background: var(--green); box-shadow: 0 0 6px rgba(34,197,94,0.5); }
  .compliance-dot.warn { background: #f59e0b; }
  .compliance-dot.fail { background: #ef4444; box-shadow: 0 0 6px rgba(239,68,68,0.6); }
  .compliance-table {
    display: flex; flex-direction: column; gap: 4px;
    background: rgba(10,20,40,0.5); border-radius: 6px;
    padding: 8px; margin-top: 4px;
  }
  .compliance-table-row {
    display: grid; grid-template-columns: 1.4fr 1fr 1.6fr; gap: 12px;
    font-size: 11px; padding: 4px 6px;
    align-items: center;
  }
  .compliance-table-row code {
    background: transparent; padding: 0; color: var(--text);
  }


/* ----- 2026-06-16 (Emmanuel) — global sticky table headers ----------------
 * Mirrors the portal-shell rule for admin/* pages that don't load the
 * portal shell CSS. Same opt-out: `.cinti-no-sticky-thead` on the table.
 * Polish-only — no layout / behaviour changes. */
table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface, var(--cinti-surface, rgba(13, 20, 38, 0.97)));
}
[data-theme="light"] table thead th {
  background: var(--surface, var(--cinti-surface, rgba(255, 255, 255, 0.97)));
}
table.cinti-no-sticky-thead thead th { position: static; }