:root {
  --bg: #0e1116;
  --panel: #161b22;
  --panel-2: #1f2630;
  --text: #e6edf3;
  --muted: #8b949e;
  --green: #3fb950;
  --red: #f85149;
  --amber: #d29922;
  --border: #30363d;
  --accent: #58a6ff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  position: sticky;
  top: 0;
  z-index: 1;
}

h1 { margin: 0; font-size: 20px; letter-spacing: 0.2px; flex: 1; }
.header-btn {
  margin-right: 12px;
  font-size: 12px; padding: 6px 12px;
  background: rgba(88,166,255,0.10);
  border-color: rgba(88,166,255,0.40);
  color: #79b8ff;
}
.header-btn:hover { background: rgba(88,166,255,0.20); }
.header-btn:disabled { opacity: 0.55; cursor: not-allowed; }
h2 { margin: 30px 28px 12px; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
h2.inline { margin: 0; }
.muted { color: var(--muted); font-size: 12px; }

.section-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 30px 28px 12px;
}
.select-bar { display: flex; gap: 8px; align-items: center; }

.filter-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 0 28px 12px;
  flex-wrap: wrap;
}
.chip {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 12px;
  cursor: pointer;
}
.chip:hover { border-color: var(--accent); }
.chip.active { background: var(--accent); color: white; border-color: var(--accent); }
/* Runs filter bar (Testing tab) - dimension dropdown + dynamic value pills. */
.runs-filter-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 2px 0 10px; }
.runs-filter-dim { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; font-size: 12px; cursor: pointer; }
.runs-filter-values { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.runs-fval { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; font-size: 12px; cursor: pointer; }
.runs-fval:hover { border-color: var(--accent); }
.runs-fval.active { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.runs-fval.active.red   { background: var(--red);   border-color: var(--red);   color: #fff; }
.runs-fval.active.amber { background: var(--amber); border-color: var(--amber); color: #111; }
.runs-fval.active.green { background: var(--green); border-color: var(--green); color: #fff; }
.runs-fval.active.on    { background: var(--green); border-color: var(--green); color: #fff; }
.runs-fval.active.off   { background: var(--red);   border-color: var(--red);   color: #fff; }
.chip.green  { border-color: rgba(63, 185, 80, 0.4); color: var(--green); }
.chip.yellow { border-color: rgba(210, 153, 34, 0.4); color: var(--amber); }
.chip.red    { border-color: rgba(248, 81, 73, 0.4); color: var(--red); }
.chip.green.active  { background: var(--green); color: white; border-color: var(--green); }
.chip.yellow.active { background: var(--amber); color: white; border-color: var(--amber); }
.chip.red.active    { background: var(--red); color: white; border-color: var(--red); }

.status {
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel-2);
}
.status.connected { color: var(--green); border-color: rgba(63,185,80,0.4); }
.status.disconnected { color: var(--amber); border-color: rgba(210,153,34,0.4); }

.summary {
  display: flex;
  gap: 16px;
  padding: 24px 28px 0;
}

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 20px;
  min-width: 140px;
}
.card .big { font-size: 28px; font-weight: 600; }
.card .label { color: var(--muted); font-size: 12px; margin-top: 4px; }

.period-card, .var-card { min-width: 180px; }
.period-select {
  width: 100%;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 10px; font-size: 13px;
}
.period-select:focus { outline: none; border-color: var(--accent); }
.var-card label { display: flex; flex-direction: column; gap: 3px; }

/* "Show on cards" multi-select: a summary button + a checkbox dropdown panel. */
.var-multi { position: relative; width: 100%; }
.var-multi-btn {
  width: 100%; text-align: left; cursor: pointer; font-size: 12px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px;
}
.var-multi-btn:hover { border-color: var(--accent); }
.var-multi-panel {
  position: absolute; z-index: 60; top: calc(100% + 3px); left: 0; right: 0;
  background: var(--card, var(--bg)); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px; max-height: 280px; overflow-y: auto;
  box-shadow: 0 8px 22px rgba(0,0,0,0.4);
}
.var-multi-opt {
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 3px 6px; border-radius: 4px; cursor: pointer; font-size: 12px; color: var(--text);
}
.var-multi-opt:hover { background: var(--panel-2, rgba(255,255,255,0.06)); }
.var-multi-opt input { accent-color: var(--accent); cursor: pointer; }

.var-readout {
  margin-top: 6px;
  display: flex; flex-direction: column; gap: 3px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12px;
}
.var-readout .vr-row { display: flex; gap: 6px; align-items: center; }
.var-readout .vr-tag {
  display: inline-block;
  padding: 1px 6px; border-radius: 3px;
  background: var(--panel-2); color: var(--muted);
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;
}
.var-readout .vr-val { color: var(--accent); word-break: break-word; }
.var-readout .vr-val.missing { color: var(--muted); font-style: italic; }
.var-readout .vr-val.vr-changed { color: #e0a44b; font-weight: 600; cursor: help; }
.var-readout .vr-val b.fail { color: var(--muted); }

.stat-card { min-width: 220px; flex: 1; }
.stat-head { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 6px; }
.stat-row {
  display: flex; justify-content: space-between;
  font-size: 13px; font-family: ui-monospace, Consolas, monospace;
  padding: 2px 0;
}
.stat-row .stat-k { color: var(--muted); }
.stat-row .stat-v.ok   { color: var(--green); }
.stat-row .stat-v.fail { color: var(--red); }
.stat-mini { font-size: 11px; color: var(--muted); margin-top: 6px;
  font-family: ui-monospace, Consolas, monospace;
  border-top: 1px solid var(--border); padding-top: 6px;
}
/* v0.4.32: clickable fleet stat-cards open a fleet-wide breakdown
   drawer.  Hover affordance + cursor so the user knows it's actionable. */
.card.stat-card.clickable { cursor: pointer; transition: border-color 0.15s, transform 0.1s; }
.card.stat-card.clickable:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.machines {
  display: flex; flex-direction: column;
  gap: 22px;
  padding: 0 28px 40px;
}
.machine-group { display: flex; flex-direction: column; gap: 10px; }
.machine-group-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 4px 0;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}
.machine-group-head .gh-title {
  font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1px;
}
.machine-group-head .gh-count {
  color: var(--muted); font-size: 12px; margin-left: 8px; font-weight: 400;
}
.machine-group-head .gh-actions { display: flex; gap: 6px; }
.machines-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.machine {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  overflow: hidden;
}
/* Colored left strip = at-a-glance health */
.machine::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--border);
}
.machine.health-green::before   { background: var(--green); }
.machine.health-yellow::before  { background: var(--amber); }
.machine.health-red::before     { background: var(--red); box-shadow: 0 0 14px rgba(248,81,73,0.55); }
.machine.health-offline::before { background: #6c7480; }
.machine.health-idle::before    { background: #58a6ff; opacity: 0.7; }
.machine.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.health-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
}
.health-pill.green   { background: rgba(63,185,80,0.18);  color: #6ee98b; border-color: rgba(63,185,80,0.5); }
.health-pill.yellow  { background: rgba(210,153,34,0.20); color: #ffc548; border-color: rgba(210,153,34,0.5); }
.health-pill.red     { background: rgba(248,81,73,0.20);  color: #ff7c75; border-color: rgba(248,81,73,0.5); }
.health-pill.offline { background: rgba(139,148,158,0.20); color: #c0c8d2; border-color: rgba(139,148,158,0.5); }
.health-pill.idle    { background: rgba(88,166,255,0.20); color: #79b8ff; border-color: rgba(88,166,255,0.5); }
/* v0.4.33: red-alert pill for hang-detected Creators. Clickable.
   Click handler opens a drawer with the failure analysis. */
.health-pill.creator-failed-pill {
  background: rgba(248,81,73,0.22);
  color: #ff7c75;
  border-color: rgba(248,81,73,0.65);
  cursor: pointer;
  font-weight: 700;
  animation: creator-failed-pulse 1.8s ease-in-out infinite;
}
.health-pill.creator-failed-pill:hover { filter: brightness(1.15); }
/* Flag-only "CREATOR IDLE": running but not producing. NOT auto-killed - it's
   a user-started Creator, so this is an amber warning, not a red alert. */
.health-pill.creator-idle-pill {
  background: rgba(210,153,34,0.18);
  color: #e3b341;
  border-color: rgba(210,153,34,0.6);
  cursor: pointer;
  font-weight: 700;
}
.health-pill.creator-idle-pill:hover { filter: brightness(1.15); }
@keyframes creator-failed-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(248,81,73,0.45); }
  50%      { box-shadow: 0 0 0 6px rgba(248,81,73,0); }
}
.machine .select-box {
  position: absolute;
  top: 10px; right: 12px;
  width: 18px; height: 18px;
  cursor: pointer;
  accent-color: var(--accent);
}

/* Files button: browsing a worker's files is now explicit (a plain card click
   selects the worker). Sits in the bottom-right corner, clear of the top row. */
.machine .card-files-btn {
  position: absolute; bottom: 8px; right: 10px; z-index: 3;
  font-size: 10px; padding: 1px 8px; cursor: pointer;
  background: var(--panel-2, rgba(255,255,255,0.06)); color: var(--muted);
  border: 1px solid var(--border); border-radius: 5px;
}
.machine .card-files-btn:hover { color: var(--text); border-color: var(--accent); }

.machine .name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  margin-right: 32px; /* leave space for the checkbox */
}
.machine .name > span:nth-child(2) {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--red);
  flex: none;
}
.dot.online { background: var(--green); box-shadow: 0 0 8px rgba(63,185,80,0.6); }

.machine .bot-status {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 2px;
}
.bot-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 12px;
  border: 1px solid var(--border);
  background: var(--panel-2);
}
.bot-badge .bot-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--red);
  flex: none;
}
.bot-badge.on  { color: #6ee98b; border-color: rgba(63,185,80,0.4); background: rgba(63,185,80,0.10); }
.bot-badge.on  .bot-dot { background: var(--green); box-shadow: 0 0 6px rgba(63,185,80,0.7); }
.bot-badge.off { color: var(--muted); }

.offline-tag {
  font-size: 12px;
  color: var(--muted);
}
.card-stats {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 14px;
  font-size: 12px;
  font-family: ui-monospace, Consolas, monospace;
  color: var(--muted);
}
.card-stats .stat-link {
  cursor: pointer;
}
.card-stats .stat-link:hover { color: var(--accent); }
.card-stats .ok   { color: #6ee98b; font-weight: 600; }
.card-stats .warn { color: #ffc548; font-weight: 600; }
.card-stats .fail { color: #ff7c75; font-weight: 600; }
.card-stats .muted { color: var(--muted); }
/* When the value is exactly 0, render it grey instead of bold red/green */
.card-stats .ok.zero, .card-stats .fail.zero { color: var(--muted); font-weight: 400; }
/* Offline worker: the counters are a frozen last-known snapshot, not a live
   read. Dim them and flag "last known" so the card can't be misread as working. */
.card-stats.mc-stale { opacity: .5; }
.card-stats.mc-stale .ok, .card-stats.mc-stale .warn, .card-stats.mc-stale .fail { font-weight: 400; }
.mc-lastknown { flex-basis: 100%; font-size: 10px; text-transform: uppercase;
  letter-spacing: .05em; font-weight: 600; color: var(--muted);
  opacity: .9; margin-bottom: -4px; }

/* Worker stats drill-down drawer */
.wstats-body { display: flex; flex-direction: column; gap: 14px; }
.wstats-section {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.wstats-section h3 {
  margin: 0 0 8px;
  font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted);
}
.wstats-kv {
  display: grid; grid-template-columns: 160px 1fr; gap: 4px 14px;
  font-family: ui-monospace, Consolas, monospace; font-size: 13px;
}
.wstats-kv .k { color: var(--muted); }
.wstats-reasons {
  margin-top: 10px; display: flex; flex-direction: column; gap: 4px;
}
/* Live per-worker error breakdown (top-1h + on-disk file tails). */
.wstats-live { margin-top: 12px; }
.wstats-sub { margin: 12px 0 4px; font-size: 12px; color: var(--muted); font-weight: 600; }
.wstats-filetail {
  white-space: pre-wrap; word-break: break-all;
  font-family: ui-monospace, Consolas, monospace; font-size: 11px; line-height: 1.5;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 8px; max-height: 200px; overflow: auto; color: var(--text);
}
.wstats-succ-btn {
  margin-top: 8px; font-size: 11px; padding: 4px 10px; cursor: pointer;
  background: rgba(255,255,255,0.06); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
}
.wstats-succ-btn:hover { filter: brightness(1.2); }
.wstats-succ-btn:disabled { opacity: 0.6; cursor: default; }
.wstats-reason {
  display: grid; grid-template-columns: 1fr 50px;
  gap: 8px; align-items: center;
  font-family: ui-monospace, Consolas, monospace; font-size: 13px;
  padding: 4px 6px; border-radius: 4px;
}
.wstats-reason:hover { background: var(--panel); }
.wstats-reason.sev-critical { color: var(--red); }
.wstats-reason.sev-warning  { color: var(--amber); }
.wstats-reason.sev-info     { color: var(--muted); }
.wstats-reason .count { text-align: right; }
.wstats-recent {
  margin-top: 8px;
  max-height: 240px; overflow: auto;
  background: var(--bg);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 8px;
  font-family: ui-monospace, Consolas, monospace; font-size: 12px;
}
.wstats-recent .row { padding: 2px 0; }
.wstats-recent .row.sev-critical { color: var(--red); }
.wstats-recent .row.sev-warning  { color: var(--amber); }
.wstats-recent .row.sev-info     { color: var(--muted); }
/* v0.4.32: fleet-stats per-worker breakdown table.  Same dark-theme
   look as the other tables; columns auto-fit so the "Top reason"
   slot can take the remaining width. */
.wstats-worker-table {
  margin-top: 8px;
  background: var(--bg);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 6px;
  max-height: 320px; overflow: auto;
  font-size: 12px;
}
.wstats-worker-table .row {
  display: grid;
  grid-template-columns: 1.2fr 70px 70px 90px 70px 1fr;
  gap: 8px; align-items: baseline;
  padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.wstats-worker-table .row.hdr {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--muted); font-weight: 600;
  background: var(--panel-2); border-radius: 4px;
}
.wstats-worker-table .row:last-child { border-bottom: none; }
.wstats-worker-table .row .num { text-align: right;
  font-family: ui-monospace, Consolas, monospace; }
/* Creator view has no "Total adds" column - drop to 5 columns. */
.wstats-worker-table .row.creator-grid {
  grid-template-columns: 1.2fr 70px 70px 70px 1fr;
}

.empty {
  grid-column: 1/-1;
  color: var(--muted);
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 32px;
  text-align: center;
}

footer {
  border-top: 1px solid var(--border);
  padding: 12px 28px;
  color: var(--muted);
  font-size: 12px;
}
footer a { color: var(--accent); }

/* --- Phase 2: file browser drawer ---------------------------------- */
.machine { cursor: pointer; transition: border-color 0.15s; }
.machine:hover { border-color: var(--accent); }

.drawer {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(880px, 94vw);
  height: min(80vh, 820px);
  max-height: 94vh;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
  display: flex; flex-direction: column;
  z-index: 10000;
}
.drawer[hidden] { display: none; }
.drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}
.drawer-backdrop[hidden] { display: none; }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  background: var(--panel-2);
}
.drawer-title { font-size: 16px; font-weight: 600; }
.drawer-sub { color: var(--muted); font-size: 12px; margin-top: 2px; }

.drawer-toolbar {
  display: flex; gap: 8px; padding: 12px 18px;
  border-bottom: 1px solid var(--border);
}
.path-input {
  flex: 1; padding: 6px 10px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 13px;
}
.path-input:focus { outline: none; border-color: var(--accent); }

.btn {
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 12px; font-size: 13px; cursor: pointer;
}
.btn:hover { border-color: var(--accent); }
.btn.primary { background: #1f6feb; border-color: #1f6feb; color: white; }
.btn.primary:hover { background: #388bfd; border-color: #388bfd; }

.drawer-body { flex: 1; overflow: auto; padding: 12px 18px; }
.drawer-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: var(--panel-2);
}
.drawer-foot .btn { padding: 8px 18px; }
.btn.danger { color: var(--red); border-color: rgba(248,81,73,0.4); }
.btn.danger:hover { background: var(--red); color: white; border-color: var(--red); }

/* Settings modal form */
.settings-hint {
  padding: 10px 18px;
  font-size: 12px;
  border-bottom: 1px solid var(--border);
}
.settings-fields {
  display: flex; flex-direction: column; gap: 12px;
}
.settings-row {
  display: grid;
  grid-template-columns: 32px 1fr 220px;
  gap: 12px; align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.settings-row .enable {
  width: 18px; height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
}
.settings-row .lbl-col .label-text {
  font-size: 14px; font-weight: 600;
}
.settings-row .lbl-col .key-text {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 11px; color: var(--muted);
}
.settings-row .lbl-col .desc {
  font-size: 12px; color: var(--muted); margin-top: 4px;
}
.settings-row .input-col {
  display: flex; justify-content: flex-end; align-items: center;
}
.settings-row select, .settings-row input[type="number"], .settings-row input[type="text"] {
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px; min-width: 140px;
}
.settings-row select:focus, .settings-row input:focus {
  outline: none; border-color: var(--accent);
}
.settings-row .switch {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px;
}
.settings-row.disabled {
  opacity: 0.55;
}

/* Range field: two number inputs separated by "to" - used for things like
   `MaxAddsNr: [280, 300]` where the bot picks a random integer in the range. */
.settings-row .range-input {
  display: inline-flex; align-items: center; gap: 8px;
}
.settings-row .range-input .range-min,
.settings-row .range-input .range-max {
  min-width: 90px;
}
.settings-row .range-input .range-sep { font-size: 12px; color: var(--muted); }

/* AddType field uses the full row width instead of the right-side input col */
.settings-row.addtype-row {
  grid-template-columns: 32px 1fr;
  align-items: start;
}
.addtype-block {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 4px;
}
.addtype-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.addtype-presets .btn { padding: 4px 10px; font-size: 12px; }
/* USE MNC/MCC control: country dropdown + Match button */
.mccmnc-block { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mccmnc-block .mccmnc-select { min-width: 190px; }
.mccmnc-block .mccmnc-match { white-space: nowrap; font-size: 12px; }
.moddef-mccmnc { margin-top: 6px; }
.addtype-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.addtype-cell {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
}
.addtype-key {
  font-size: 11px; color: var(--muted);
  letter-spacing: 0.5px;
}
.addtype-cell input {
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 6px 8px;
  font-size: 14px;
  text-align: center;
}
.addtype-cell input:focus { outline: none; border-color: var(--accent); }
.addtype-total {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12px;
  align-self: flex-end;
}
.addtype-total.ok  { color: var(--green); }
.addtype-total.bad { color: var(--red); }
/* Single-add-type option: shown only when exactly one type is 100%. */
.addtype-single {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  margin-top: 6px; font-size: 12px; color: var(--text);
}
.addtype-single input { accent-color: var(--accent); cursor: pointer; }
/* Extended (opt-in) add types: the reveal checkbox + its extra grid/boxes. */
.addtype-extended-toggle,
.adder-ext-toggle,
.aaf-ext-toggle { margin-top: 8px; font-size: 12px; opacity: 0.85; cursor: pointer; }
.addtype-extended-grid { margin-top: 6px; }
.adder-ext-wrap,
.aaf-ext-wrap { display: inline-flex; flex-wrap: wrap; gap: 6px 12px; }
@media (max-width: 700px) {
  .addtype-grid { grid-template-columns: repeat(3, 1fr); }
}

.files-list { display: flex; flex-direction: column; }
.file-row {
  display: grid; grid-template-columns: 22px 1fr 110px 170px;
  gap: 10px; align-items: center;
  padding: 6px 8px; border-radius: 6px;
  font-size: 13px; cursor: pointer;
}
.file-row:hover { background: var(--panel-2); }
.file-row.dir { color: var(--accent); }
.file-row .icon { width: 18px; text-align: center; }
.file-row .name {
  font-family: ui-monospace, Consolas, monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.file-row .size, .file-row .modified {
  color: var(--muted); font-size: 12px; text-align: right;
}

.files-editor { display: flex; flex-direction: column; gap: 10px; }
.editor-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.editor-title {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 13px; word-break: break-all;
}
.editor-sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
.editor-actions { display: flex; align-items: center; gap: 8px; }
.chk { color: var(--muted); font-size: 12px; }
.editor-area {
  width: 100%; height: calc(100vh - 260px);
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 12px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 13px; line-height: 1.5; resize: none;
}
.editor-binary {
  padding: 30px; text-align: center;
  color: var(--muted); border: 1px dashed var(--border); border-radius: 8px;
}

.toast {
  position: fixed; bottom: 18px; left: 50%;
  transform: translateX(-50%);
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 16px; font-size: 13px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  z-index: 20;
}
.toast.error { border-color: var(--red); color: var(--red); }
.toast.ok    { border-color: var(--green); color: var(--green); }

/* --- Phase 2.5: Quick Actions panel -------------------------------- */
.quick-groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  padding: 0 28px;
}
.quick-group {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
}
.quick-group h3 {
  margin: 0 0 10px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
}
.quick-group .actions {
  display: flex; flex-direction: column; gap: 8px;
}
.action-btn {
  display: flex; flex-direction: column; align-items: flex-start;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer; text-align: left;
  color: var(--text);
}
.action-btn:hover:not(:disabled) { border-color: var(--accent); }
.action-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.action-btn .label { font-size: 14px; font-weight: 600; }
.action-btn .desc  { color: var(--muted); font-size: 12px; margin-top: 4px; }
.action-btn.danger:hover:not(:disabled) { border-color: var(--red); }
.action-btn.busy { opacity: 0.6; cursor: progress; }

/* "Push settings file" upload control in the Updater quick-action group */
.push-settings { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.push-settings .ps-title { font-size: 13px; font-weight: 600; }
.push-settings .ps-hint { font-size: 11px; line-height: 1.4; margin: 2px 0 7px; }
.push-settings .ps-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.push-settings .ps-target {
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px; padding: 4px 6px; font-size: 12px;
}
.push-settings .ps-file { font-size: 11px; max-width: 175px; color: var(--muted); }
.push-settings .ps-push { padding: 4px 10px; font-size: 12px; }
.push-settings .ps-status { margin-top: 5px; }

/* --- Phase 2.5 Pass 2: Proxy picker (inside the drawer) ----------- */
.proxy-hint {
  padding: 10px 18px;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.proxy-hint .btn { margin-left: auto; }
.folder-path {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 8px;
  font-family: ui-monospace, Consolas, monospace;
  color: var(--accent);
  user-select: all;
  font-size: 12px;
}
.proxy-list {
  display: flex; flex-direction: column; gap: 8px;
}
.proxy-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px; align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.proxy-row .meta {
  display: flex; flex-direction: column; gap: 2px;
}
.proxy-row .nm {
  font-weight: 600; font-size: 14px;
}
.proxy-row .ms {
  color: var(--muted); font-size: 12px;
  font-family: ui-monospace, Consolas, monospace;
}
.proxy-row .push { display: flex; gap: 6px; }
.proxy-row .ops  { display: flex; gap: 6px; }
.proxy-empty {
  color: var(--muted); border: 1px dashed var(--border); border-radius: 10px;
  padding: 26px; text-align: center;
}

/* --- Account performance + Lock analysis ---------------------------- */
.lock-body { padding: 0 28px 10px; display: flex; flex-direction: column; gap: 16px; }
.lock-h3 {
  margin: 4px 0 4px; font-size: 12px; text-transform: uppercase;
  letter-spacing: 1px; color: var(--muted); font-weight: 600;
}
.lock-curve-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.lock-curve-pick {
  text-transform: none; letter-spacing: normal; font-weight: 400;
  font-size: 12px; color: var(--muted);
  display: inline-flex; align-items: center; gap: 6px;
}
.lock-curve-pick select {
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 8px; font-size: 12px;
}
.lock-curve-pick select:focus { outline: 2px solid var(--accent); }
.lock-headline {
  display: flex; gap: 24px; align-items: baseline; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 18px;
}
.lock-headline .big {
  font-size: 22px; font-weight: 600;
  font-family: ui-monospace, Consolas, monospace;
}
.lock-headline .label { color: var(--muted); font-size: 12px; margin-left: 6px; }
.lock-headline .pct.green { color: #6ee98b; }
.lock-headline .pct.amber { color: #ffc548; }
.lock-headline .pct.red   { color: #ff7c75; }

/* Outcome distribution: a vertical bar chart of who survived / how */
.outcome-list {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 18px;
  display: flex; flex-direction: column; gap: 6px;
}
.outcome-row {
  display: grid;
  grid-template-columns: 1fr 108px 60px;
  gap: 10px; align-items: center;
  font-size: 13px;
}
.outcome-row .lab {
  display: flex; align-items: center; gap: 8px;
}
.outcome-row .dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
}
.outcome-row .bar-wrap {
  height: 10px; background: var(--panel-2); border-radius: 4px; overflow: hidden;
  grid-column: 1 / -1; margin-top: 2px;
}
.outcome-row .bar { height: 100%; }
.outcome-row .num {
  font-family: ui-monospace, Consolas, monospace;
  text-align: right;
  color: var(--muted);
  font-size: 12px;
}
.outcome-row .num .denom { opacity: 0.6; }   /* "/ 335" dimmer than the count */
.outcome-row .pct {
  font-family: ui-monospace, Consolas, monospace;
  text-align: right; font-weight: 600;
}
.outcome-row {
  cursor: pointer;
  border-radius: 6px;
  padding: 4px 8px;
  margin: 0 -8px;
  transition: background 0.1s;
}
.outcome-row:hover { background: var(--panel-2); }
.outcome-row.alive          { --c: #6ee98b; }
.outcome-row.locked_0       { --c: #ff7c75; }
.outcome-row.locked_1_30    { --c: #ff9b75; }
.outcome-row.locked_31_100  { --c: #ffc548; }
.outcome-row.locked_101_250 { --c: #79b8ff; }
.outcome-row.locked_250p    { --c: #b291ff; }
.outcome-row .dot, .outcome-row .bar { background: var(--c); }
.outcome-row .pct.with-color { color: var(--c); }

/* Influencer cards */
.lock-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 12px;
}
.lock-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.lock-card .lc-head {
  display: flex; justify-content: space-between; align-items: center;
}
.lock-card .lc-name { font-size: 13px; font-weight: 600; }
.lock-card .lc-spread {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: rgba(248,81,73,0.18); color: #ff7c75; border: 1px solid rgba(248,81,73,0.4);
  font-family: ui-monospace, Consolas, monospace;
}
/* Two columns: [tag] | [value over num]. The value + stats stack in the right
   column instead of competing with the nowrap stats for width - otherwise a
   long value (e.g. "50% Public Profile + 50% Mention") got squeezed to ~1 char
   and wrapped vertically, one letter per line. */
.lock-card .lc-row {
  display: grid;
  grid-template-columns: minmax(110px, 160px) 1fr;
  gap: 1px 10px; align-items: start;
  font-size: 12px;
}
.lock-card .lc-row.best  .lc-tag { color: #6ee98b; font-weight: 600; }
.lock-card .lc-row.worst .lc-tag { color: #ff7c75; font-weight: 600; }
.lock-card .lc-row .lc-tag {
  grid-column: 1; grid-row: 1 / span 2; align-self: start;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px;
}
.lock-card .lc-row .lc-val {
  grid-column: 2; grid-row: 1;
  color: var(--text); font-weight: 500;
  overflow-wrap: anywhere; word-break: normal;
}
.lock-card .lc-row .lc-num {
  grid-column: 2; grid-row: 2;
  white-space: normal; color: var(--muted);
  font-family: ui-monospace, Consolas, monospace;
}
.lock-card .lc-row .lc-num .ok  { color: #6ee98b; }
.lock-card .lc-row .lc-num .bad { color: #ff7c75; }
.lock-card .lc-rec {
  font-size: 11px; color: var(--muted);
  border-top: 1px dashed var(--border); padding-top: 6px;
}

/* Best settings recommendation panel */
.best-panel {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 18px;
}
.best-panel h4 {
  margin: 0 0 8px; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted);
}
.best-panel ul { list-style: none; margin: 0; padding: 0; }
.best-panel li {
  padding: 8px 0; border-bottom: 1px dashed var(--border);
  display: grid; grid-template-columns: minmax(150px, 210px) 1fr;
  gap: 6px 16px; font-size: 13px; align-items: start;
}
.best-panel li:last-child { border-bottom: none; }
.best-panel li .k { color: var(--text); font-weight: 600; align-self: center; }
.best-panel li .ok  { color: #6ee98b; font-weight: 600; }
.best-panel li .bad { color: #ff7c75; font-weight: 600; }
/* USE / AVOID rows: fixed tag column + value + right-aligned stat so the two
   rows line up in tidy columns instead of wrapping unevenly. */
.best-panel li .best-recs { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.best-panel li .best-rec {
  display: grid; grid-template-columns: 54px minmax(80px, 1fr) auto;
  gap: 10px; align-items: baseline; font-size: 12px;
}
.best-panel li .rec-val { word-break: break-word; }
.best-panel li .rec-meta {
  color: var(--muted); font-size: 11px; text-align: right; white-space: nowrap;
  font-family: ui-monospace, Consolas, monospace;
}
.best-panel li .rec-tag {
  justify-self: start; text-align: center;
  font-size: 10px; font-weight: 700; letter-spacing: 0.6px;
  padding: 2px 0; width: 48px; border-radius: 999px;
  font-family: ui-monospace, Consolas, monospace;
}
.best-panel li .rec-tag.use   {
  background: rgba(110,233,139,0.18); color: #6ee98b; border: 1px solid rgba(110,233,139,0.4);
}
.best-panel li .rec-tag.avoid {
  background: rgba(255,124,117,0.18); color: #ff7c75; border: 1px solid rgba(255,124,117,0.4);
}
/* Age-window control above the recommendations */
.best-window {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 2px 0 12px; font-size: 13px; color: var(--muted);
}
.best-window .bw-label { color: var(--text); font-weight: 600; }
.best-window .bw-dash { color: var(--muted); }
.best-window .bw-input {
  width: 58px; padding: 4px 6px; font-size: 13px; text-align: center;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  font-family: ui-monospace, Consolas, monospace;
}
.best-window .bw-input:focus { outline: 2px solid var(--accent); }
.best-window .bw-count { margin-left: 4px; font-size: 12px; }
.best-block { margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 1px dashed var(--border); }
.best-block:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.best-block-hint { margin: 0 0 10px; font-size: 12px; color: var(--muted); line-height: 1.45; }
.best-empty { margin: 0; font-size: 12px; color: var(--muted); }
.best-saturate {
  margin: 0 0 12px; padding: 9px 12px; font-size: 12.5px; line-height: 1.45;
  color: #ffc548; background: rgba(255,197,72,0.10);
  border: 1px solid rgba(255,197,72,0.35); border-radius: 8px;
}
/* Unified "who · when · what" context line under each analysis subsection. */
.ctx-line { font-size: 11px; margin: -2px 0 9px; line-height: 1.45; }
.ctx-line .ctx-who  { font-weight: 600; color: var(--text); }
.ctx-line .ctx-when { color: #5bbf9b; font-weight: 600; }
/* One-time metric legend at the top of the lock section. */
.metric-legend { font-size: 11px; margin: 4px 0 12px; line-height: 1.6; }
.metric-legend .chip-mini {
  display: inline-block; padding: 1px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 700; margin: 0 1px;
}
.metric-legend .chip-mini.green { background: rgba(110,233,139,0.18); color: #6ee98b; }
.metric-legend .chip-mini.amber { background: rgba(255,197,72,0.18);  color: #ffc548; }
.metric-legend .chip-mini.red   { background: rgba(255,124,117,0.18); color: #ff7c75; }
/* Comparisons: a % built from too few accounts is greyed + flagged uncertain. */
.pct-pill.low-sample {
  background: rgba(150,150,150,0.16); color: var(--muted);
  border: 1px dashed var(--border);
}
.pct-pill.low-sample::after { content: " ?"; font-weight: 700; }
.sweet-headline {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline;
  margin-bottom: 8px; font-size: 13px;
}
.sweet-headline .sweet-target { font-size: 16px; font-weight: 700; color: var(--text); }
.sweet-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 8px; }
.sweet-table th, .sweet-table td {
  padding: 5px 8px; border-bottom: 1px solid var(--border); text-align: left;
}
.sweet-table td.num { text-align: right; font-family: ui-monospace, Consolas, monospace; }
.sweet-table tr.sweet-pick td { background: rgba(110,233,139,0.08); }
.sweet-table tr.sweet-pick .sweet-target { color: #6ee98b; }

/* Outcome drill-down drawer */
.bucket-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.bucket-block {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.bucket-block .bb-label {
  font-size: 11px; font-weight: 600;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.bucket-row {
  display: grid;
  grid-template-columns: 1fr 130px 60px;
  gap: 8px; align-items: center;
  font-size: 12px;
  padding: 3px 0;
}
.bucket-row .bn {
  font-family: ui-monospace, Consolas, monospace;
  word-break: break-all;
}
.bucket-row .bc {
  font-family: ui-monospace, Consolas, monospace;
  text-align: right; color: var(--text);
}
.bucket-row .bc .muted { color: var(--muted); font-size: 11px; }
.bucket-row .bp {
  font-family: ui-monospace, Consolas, monospace;
  text-align: right; color: var(--accent);
  font-weight: 600;
}
.bucket-row .bp.green { color: #6ee98b; }
.bucket-row .bp.amber { color: #ffc548; }
.bucket-row .bp.red   { color: #ff7c75; }
.bucket-samples h4 {
  margin: 16px 0 8px; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--muted);
}
.bucket-sample {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px; margin-bottom: 8px;
  font-size: 12px;
}
.bucket-sample .bs-head {
  display: flex; flex-wrap: wrap; gap: 12px;
  font-family: ui-monospace, Consolas, monospace;
  margin-bottom: 6px;
}
.bucket-sample .bs-head .bs-user {
  color: var(--accent); font-weight: 600;
}
.bucket-sample .bs-action {
  font-size: 11px; color: var(--muted);
  font-family: ui-monospace, Consolas, monospace;
  padding-left: 8px; border-left: 2px solid var(--border);
  margin-top: 4px;
}

/* "No variation" footer */
.lock-novar {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 18px;
  font-size: 12px;
}
.lock-novar .nv-row {
  display: grid; grid-template-columns: 1fr auto; gap: 12px;
  padding: 4px 0;
  border-bottom: 1px dashed var(--border);
  font-family: ui-monospace, Consolas, monospace;
}
.lock-novar .nv-row:last-child { border-bottom: none; }
.lock-novar .nv-row .nv-name { color: var(--text); }
.lock-novar .nv-row .nv-val  { color: var(--accent); }

.bulk-result {
  margin: 18px 28px 40px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
}
.bulk-result .head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.bulk-result .summary {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 13px;
}
.bulk-result .rows {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 8px;
}
.bulk-result .row {
  display: grid; grid-template-columns: 16px 1fr auto;
  gap: 10px; align-items: center;
  font-size: 13px;
  font-family: ui-monospace, Consolas, monospace;
  padding: 4px 6px; border-radius: 4px;
}
.bulk-result .row.ok    { color: var(--green); }
.bulk-result .row.fail  { color: var(--red); }
.bulk-result .row .name { color: var(--text); }
.bulk-result .row .info {
  color: var(--muted); font-size: 12px;
  max-width: 60%; text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 700px) {
  .bulk-result .row { grid-template-columns: 16px 1fr; }
  .bulk-result .row .info { grid-column: 2; text-align: left; max-width: none; }
}

/* --- Comparisons section ------------------------------------------- */
.cmp-section { padding: 12px 28px 24px; }
.cmp-section .section-head { display: flex; align-items: center; gap: 18px;
  flex-wrap: wrap; margin-bottom: 4px; }
.cmp-hint { margin: 4px 0 14px; font-size: 13px; }
.cmp-interval-bar { flex-wrap: wrap; gap: 8px; align-items: center; }
.cmp-age-input {
  width: 52px; padding: 4px 6px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--text);
  font-size: 13px; text-align: center;
}
.cmp-interval-presets { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 4px; }
.cmp-controls {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 16px; margin-bottom: 14px;
}
.cmp-controls label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--muted);
}
.cmp-controls select.cmp-dim {
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 10px; min-width: 240px; font-size: 13px;
}
.cmp-controls select.cmp-dim:focus { outline: 2px solid var(--accent); }
.cmp-result { margin-top: 6px; }
.cmp-headline {
  display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 16px; margin-bottom: 10px;
  font-size: 14px;
}
.cmp-headline .ok  { color: #6ee98b; }
.cmp-headline .bad { color: #ff7c75; }
.cmp-table {
  width: 100%; border-collapse: collapse;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden; font-size: 13px;
}
.cmp-table th, .cmp-table td {
  padding: 8px 12px; text-align: left;
  border-bottom: 1px solid var(--border);
}
.cmp-table thead th {
  background: rgba(255,255,255,0.03);
  font-weight: 600; font-size: 12px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.cmp-table tbody tr:last-child td { border-bottom: none; }
.cmp-table td.num { text-align: right;
  font-family: ui-monospace, Consolas, monospace; }
.cmp-table td.num.alive  { color: #6ee98b; }
.cmp-table td.num.locked { color: #ff7c75; }
.cmp-table td.pill-cell { text-align: right; }
.pct-pill {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
}
.pct-pill.green { background: rgba(110,233,139,0.15); color: #6ee98b; }
.pct-pill.amber { background: rgba(255,197,72,0.15);  color: #ffc548; }
.pct-pill.red   { background: rgba(255,124,117,0.15); color: #ff7c75; }
.cmp-table td.bar-cell { width: 120px; }
.cmp-bar {
  width: 100%; height: 8px; background: rgba(255,255,255,0.05);
  border-radius: 4px; overflow: hidden;
}
.cmp-bar-fill { height: 100%; background: var(--accent); }

/* --- Tabs (Adder/Creator vs Refresher) ------------------------------ */
.tabs {
  display: flex; gap: 4px; align-items: center;
  padding: 0 28px; margin-top: 4px;
  border-bottom: 1px solid var(--border);
}
.tabs .tab {
  background: transparent; color: var(--muted);
  border: 1px solid transparent; border-bottom: none;
  border-radius: 8px 8px 0 0;
  padding: 8px 18px; font-size: 14px; font-weight: 600;
  cursor: pointer; margin-bottom: -1px;
}
.tabs .tab:hover { color: var(--text); }
.tabs .tab.active {
  background: var(--panel); color: var(--accent);
  border-color: var(--border);
}
.tabs .tab-spacer { flex: 1; }
.tabs .tab-hint { font-size: 12px; padding-right: 4px; }
.tab-pane { padding-top: 8px; }

/* --- Refresher tab --------------------------------------------------- */
.ref-banner {
  background: rgba(255,197,72,0.10);
  border: 1px solid rgba(255,197,72,0.45);
  color: #ffc548;
  padding: 10px 16px; margin: 12px 28px;
  border-radius: 10px; font-size: 13px;
}
.ref-banner b { color: #ffd97a; }
.summary.ref-summary .mode-card { gap: 4px; }
.summary.ref-summary .mode-card .ref-mode-row {
  display: flex; gap: 6px; align-items: center;
  font-size: 12px; color: var(--text);
  padding: 2px 0; cursor: pointer;
}
.summary.ref-summary .mode-card .ref-mode-row input { accent-color: var(--accent); }
.pipeline-actions {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin: 6px 28px 8px;
}
.pipeline-actions .muted { margin-right: auto; }
/* v0.4.30: dark-theme dropdown to match everything else. Replaces the
   browser default (white pill) that looked out of place. */
.ref-pipe-select {
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 24px 4px 10px; font-size: 12px;
  cursor: pointer;
  /* custom chevron - matches the muted text colour */
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23a0a8b2' d='M0 0 L6 8 L12 0 Z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 9px;
  margin-left: 6px;
  transition: border-color 0.15s, background-color 0.15s;
}
.ref-pipe-select:hover  { border-color: var(--accent); }
.ref-pipe-select:focus  { outline: none; border-color: var(--accent);
                          background-color: var(--bg); }
.ref-pipe-select option { background: var(--panel); color: var(--text); }
.pipeline-table-wrap {
  margin: 0 28px; max-height: 540px; overflow: auto;
  border: 1px solid var(--border); border-radius: 10px;
}
.pipeline-table {
  width: 100%; border-collapse: collapse;
  background: var(--panel); font-size: 13px;
}
.pipeline-table th, .pipeline-table td {
  padding: 7px 10px; text-align: left;
  border-bottom: 1px solid var(--border);
}
.pipeline-table thead th {
  background: rgba(255,255,255,0.03); position: sticky; top: 0;
  font-weight: 600; font-size: 12px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.pipeline-table tbody tr:last-child td { border-bottom: none; }
.pipeline-table td.user {
  font-family: ui-monospace, Consolas, monospace; color: var(--text);
}
.pipeline-table td.num { font-family: ui-monospace, Consolas, monospace;
  text-align: center; color: var(--muted); }
/* Center all pipeline cells + headers under their column titles so the
   table reads cleanly.  Username + Group + Worker columns are short
   text - centering them too keeps everything aligned with the headers. */
.pipeline-table th,
.pipeline-table td { text-align: center; }
.pipeline-table td.user { text-align: center; }

/* Sortable headers (v0.7.15): click to sort, click again to flip. */
.pipeline-table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.pipeline-table th.sortable:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.pipeline-table th.sortable::after { content: "\2195"; opacity: 0.25; margin-left: 4px; font-size: 10px; }
.pipeline-table th.sortable.sort-asc::after  { content: "\2191"; opacity: 0.95; color: var(--accent); }
.pipeline-table th.sortable.sort-desc::after { content: "\2193"; opacity: 0.95; color: var(--accent); }
/* Clickable username -> account history drawer. */
.pipeline-table .acct-link { cursor: pointer; color: var(--accent); border-bottom: 1px dotted transparent; }
.pipeline-table .acct-link:hover { border-bottom-color: var(--accent); }
/* Account type badges (EV / PV / TF) in the pipeline Type column */
.acct-type-badge {
  display: inline-block; padding: 1px 5px; border-radius: 4px; font-size: 10px;
  font-weight: 700; margin-right: 2px;
}
.acct-type-badge.ev { background: rgba(88,166,255,0.18); color: #58a6ff; }
.acct-type-badge.pv { background: rgba(63,185,80,0.20);  color: #3fb950; }
.acct-type-badge.tf { background: rgba(210,153,34,0.22); color: #d4a428; }
/* "Select first N" stepper. */
.pipe-first-n { display: inline-flex; align-items: center; gap: 4px; }
.pipe-first-n input { width: 56px; padding: 3px 5px; background: var(--bg);
  color: var(--text); border: 1px solid var(--border); border-radius: 5px; font-size: 12px; }

/* Account history drawer */
.acctlog-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.acctlog-stat {
  font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 12px;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
}
.acctlog-stat.ok   { color: var(--green, #3fb950); border-color: rgba(63,185,80,0.4); }
.acctlog-stat.fail { color: var(--red);            border-color: rgba(248,81,73,0.4); }
.acctlog-stat.muted{ color: var(--muted); }
.acctlog-timeline { display: flex; flex-direction: column; }
.acctlog-row {
  display: grid; grid-template-columns: 116px 16px 1fr 1fr 80px; gap: 8px;
  align-items: baseline; padding: 5px 8px; border-bottom: 1px solid var(--border);
  border-left: 3px solid var(--border); font-size: 12px;
}
.acctlog-row.oc-ok   { border-left-color: var(--green, #3fb950); }
.acctlog-row.oc-fail { border-left-color: var(--red); }
.acctlog-row .acctlog-time { color: var(--muted); font-family: ui-monospace, Consolas, monospace; font-size: 11px; }
.acctlog-row .acctlog-icon { font-weight: 700; text-align: center; }
.acctlog-row.oc-ok   .acctlog-icon { color: var(--green, #3fb950); }
.acctlog-row.oc-fail .acctlog-icon { color: var(--red); }
.acctlog-row .acctlog-label { color: var(--text); font-weight: 600; }
.acctlog-row .acctlog-reason { color: var(--amber, #d29922); word-break: break-word; }
.acctlog-row .acctlog-worker { font-size: 11px; text-align: right; }
.state-pill {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.3px;
  font-family: ui-monospace, Consolas, monospace;
}
.state-pill.new                  { background: rgba(110,158,233,0.10); color: #9bb6f0; }
.state-pill.needs_refresh        { background: rgba(255,124,117,0.15); color: #ff7c75; }
.state-pill.in_refresher         { background: rgba(110,158,233,0.15); color: #6ea0ff; }
.state-pill.ready_to_add         { background: rgba(110,233,139,0.15); color: #6ee98b; }
.state-pill.in_adder             { background: rgba(110,158,233,0.15); color: #6ea0ff; }
.state-pill.wait_between_rounds  { background: rgba(255,197,72,0.15);  color: #ffc548; }
.state-pill.wait_between_days    { background: rgba(255,197,72,0.10);  color: #c8a04a; }
.state-pill.dead                 { background: rgba(120,120,120,0.15); color: var(--muted); }
/* v0.4.26: clickable fail-count pills - clarifies the chip is interactive. */
.state-pill.fail-pill {
  cursor: pointer;
  transition: filter 0.1s, transform 0.1s;
}
.state-pill.fail-pill:hover {
  filter: brightness(1.25);
  transform: scale(1.05);
}

/* Pipeline filter chips mirror the state-pill palette so the user gets
   an immediate visual link between "the chip I click" and "the rows it
   shows".  Each variant tints the border + text in the chip's REST
   state, and fills the chip with that color when active. */
#ref-pipeline-filter .chip[data-state="needs_refresh"] {
  border-color: rgba(255,124,117,0.45); color: #ff7c75;
}
#ref-pipeline-filter .chip[data-state="needs_refresh"].active {
  background: rgba(255,124,117,0.85); color: white;
  border-color: rgba(255,124,117,0.85);
}
#ref-pipeline-filter .chip[data-state="ready_to_add"] {
  border-color: rgba(110,233,139,0.40); color: #6ee98b;
}
#ref-pipeline-filter .chip[data-state="ready_to_add"].active {
  background: rgba(110,233,139,0.85); color: #03210d;
  border-color: rgba(110,233,139,0.85);
}
#ref-pipeline-filter .chip[data-state="wait_between_rounds"] {
  border-color: rgba(255,197,72,0.45); color: #ffc548;
}
#ref-pipeline-filter .chip[data-state="wait_between_rounds"].active {
  background: rgba(255,197,72,0.85); color: #2b1f04;
  border-color: rgba(255,197,72,0.85);
}
#ref-pipeline-filter .chip[data-state="wait_between_days"] {
  border-color: rgba(200,160,74,0.45); color: #c8a04a;
}
#ref-pipeline-filter .chip[data-state="wait_between_days"].active {
  background: rgba(200,160,74,0.85); color: #221704;
  border-color: rgba(200,160,74,0.85);
}
#ref-pipeline-filter .chip[data-state="in_refresher"],
#ref-pipeline-filter .chip[data-state="in_adder"] {
  border-color: rgba(110,158,233,0.45); color: #6ea0ff;
}
#ref-pipeline-filter .chip[data-state="in_refresher"].active,
#ref-pipeline-filter .chip[data-state="in_adder"].active {
  background: rgba(110,158,233,0.85); color: white;
  border-color: rgba(110,158,233,0.85);
}
#ref-pipeline-filter .chip[data-state="dead"] {
  border-color: rgba(120,120,120,0.45); color: var(--muted);
}
#ref-pipeline-filter .chip[data-state="dead"].active {
  background: rgba(120,120,120,0.7); color: white;
  border-color: rgba(120,120,120,0.85);
}
/* --- Refresher tab: machine cards reuse the .machine layout from the
       Adder/Creator tab; .rwc-assign is the per-card group selector.
       The main tab puts cards inside per-group `.machines-grid` wrappers,
       but the refresher tab appends cards directly into #ref-machines, so
       we make THAT container the grid (otherwise cards stretch full width
       and look comically tall). --- */
#ref-machines {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.machine.refresher-machine {
  padding: 10px 12px 10px 14px;   /* slightly tighter than main tab */
  gap: 4px;
}
.machine.refresher-machine .name {
  font-size: 14px;
}
.machine.refresher-machine .rwc-assign {
  display: flex; align-items: center; gap: 6px;
  margin-top: 4px; padding-top: 6px;
  border-top: 1px solid var(--border);
  font-size: 11px;
}
.machine.refresher-machine .rwc-assign .muted { font-size: 10px; }
.machine.refresher-machine .rwc-assign select {
  flex: 1;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 3px 6px; font-size: 11px;
}
.ref-worker-card .rwc-id { font-size: 11px; }

/* --- Mutual-exclusion banner (shows on the OTHER tab when one is busy) -- */
.mux-banner {
  display: flex; gap: 12px; align-items: flex-start;
  background: rgba(255,159,67,0.10);
  border: 1px solid rgba(255,159,67,0.45);
  color: #ffb35a;
  padding: 10px 16px; margin: 12px 28px;
  border-radius: 10px; font-size: 13px;
}
/* The CSS above sets `display: flex` which UNFORTUNATELY OVERRIDES the
   HTML `hidden` attribute (UA default `[hidden]{display:none}` loses
   to a more-specific element class). Without this rule the banner is
   visible whenever the user-agent's hide rule fails - which is why
   the "Group is paused" banner kept being stuck on even when JS had
   correctly set banner.hidden=true. Force the hide. */
.mux-banner[hidden] { display: none !important; }
.mux-banner code { color: #ffd97a; }
.mux-banner a { color: #ffd97a; text-decoration: underline; }
.mux-banner .mux-icon {
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: 50%; background: rgba(255,159,67,0.25);
  color: #ffd97a; text-align: center; font-weight: 700;
  line-height: 22px; font-family: ui-monospace, Consolas, monospace;
}
.mux-banner.stop-banner {
  background: rgba(255,124,117,0.12);
  border-color: rgba(255,124,117,0.5);
  color: #ff7c75;
}
.mux-banner.stop-banner .mux-icon {
  background: rgba(255,124,117,0.30); color: #ffb1ad;
}

/* --- Refresher activity cards + failures drawer ---------------------- */
.ref-act-card .stat-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.ref-act-card .ref-fails-btn {
  font-size: 10px; padding: 2px 8px;
  background: rgba(248,81,73,0.10);
  border-color: rgba(248,81,73,0.40);
  color: var(--red);
}
.ref-act-card .ref-fails-btn:hover {
  background: rgba(248,81,73,0.20);
}

/* Drawer: grouped reasons as a horizontal bar list, recent fails as
   a small table-ish stack underneath. Designed to surface a lot of
   data in a small footprint - no header takes a full row. */
.ref-fails-summary {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 10px;
}
.ref-fails-summary .reason-row {
  display: grid;
  grid-template-columns: 1fr 60px 50px;
  gap: 8px; align-items: center;
  padding: 6px 10px; border-radius: 6px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  font-size: 12px;
}
.ref-fails-summary .reason-row .reason-name {
  font-family: ui-monospace, Consolas, monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ref-fails-summary .reason-row .reason-count {
  text-align: right; font-weight: 600;
  font-family: ui-monospace, Consolas, monospace;
}
.ref-fails-summary .reason-row .reason-pct {
  text-align: right; font-size: 11px; color: var(--muted);
}
.ref-fails-summary .reason-row.severity-critical { border-color: rgba(248,81,73,0.45); }
.ref-fails-summary .reason-row.severity-warning  { border-color: rgba(210,153,34,0.45); }
.ref-fails-summary .reason-row.severity-info     { border-color: rgba(88,166,255,0.35); }
.ref-fails-summary .reason-row .sev-tag {
  display: none;   /* visual hint comes from the row border colour */
}
.ref-fails-section-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--muted); margin: 14px 0 6px;
}
.ref-fails-recent {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 360px; overflow-y: auto;
}
.ref-fails-recent .fail-line {
  display: grid;
  grid-template-columns: 130px 1fr 110px;
  gap: 8px; align-items: baseline;
  padding: 4px 8px; border-radius: 4px;
  background: var(--panel-2);
  font-size: 12px;
  font-family: ui-monospace, Consolas, monospace;
  border-left: 3px solid var(--border);
}
.ref-fails-recent .fail-line.severity-critical { border-left-color: var(--red); }
.ref-fails-recent .fail-line.severity-warning  { border-left-color: var(--amber); }
.ref-fails-recent .fail-line.severity-info     { border-left-color: #58a6ff; }
.ref-fails-recent .fail-line .user { color: var(--text); font-weight: 600; }
.ref-fails-recent .fail-line .reason { color: var(--muted); }
.ref-fails-recent .fail-line .date { color: var(--muted); font-size: 11px; text-align: right; }
/* v0.8.26: "×N" repeat count chip + "stuck / capped" callout. */
.ref-fails-recent .fail-count {
  display: inline-block; margin-left: 6px; padding: 0 6px;
  border-radius: 8px; font-size: 11px; font-weight: 700;
  background: rgba(210,153,34,0.22); color: #ffc548;
}
.ref-fails-recent .fail-loop-warn {
  border: 1px solid rgba(210,153,34,0.45); border-radius: 6px;
  background: rgba(210,153,34,0.08); padding: 6px; margin-bottom: 6px;
}
.ref-fails-recent .fail-loop-warn .fail-loop-head {
  color: #ffc548; font-size: 12px; font-weight: 600; margin-bottom: 4px;
  font-family: -apple-system, system-ui, sans-serif;
}
.ref-fails-recent .fail-loop-warn .fail-loop-row {
  display: grid; grid-template-columns: 130px 1fr auto; gap: 8px;
  align-items: baseline; padding: 2px 4px; font-size: 12px;
  font-family: ui-monospace, Consolas, monospace;
}
.ref-fails-recent .fail-loop-warn .fail-loop-row .user { color: var(--text); font-weight: 600; }
.ref-fails-recent .fail-loop-warn .fail-loop-row .reason { color: var(--muted); }
.ref-fails-summary .empty {
  text-align: center; color: var(--muted); font-size: 12px;
  padding: 20px;
}

/* --- Refresher Logs section (collapsible) ---------------------------- */
.ref-logs-section { margin-top: 8px; }
.ref-logs-head { cursor: pointer; user-select: none; }
.ref-logs-head:hover h2 { color: #79b8ff; }
.ref-logs-caret {
  margin-left: 8px; font-size: 11px;
  text-transform: none; letter-spacing: 0; font-weight: normal;
}
.ref-logs-body { padding: 0 28px 30px; }
.ref-logs-hint {
  font-size: 12px; padding: 8px 12px; margin-bottom: 10px;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 6px; color: var(--muted);
}
.ref-logs-hint b { color: var(--text); }
.ref-logs-table {
  display: flex; flex-direction: column; gap: 3px;
  max-height: 480px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--panel);
  padding: 6px;
}
.ref-log-row {
  display: grid;
  /* time | event | user | reason | next-retry | count */
  grid-template-columns: 130px 110px 1fr 1fr 90px 50px;
  gap: 10px; align-items: baseline;
  padding: 4px 8px; border-radius: 4px;
  font-size: 11px;
  font-family: ui-monospace, Consolas, monospace;
  border-left: 3px solid var(--border);
}
.ref-log-row .rl-time   { color: var(--muted); }
.ref-log-row .rl-event  {
  text-transform: uppercase; font-size: 10px; letter-spacing: 0.4px;
  font-weight: 600; color: var(--muted);
}
.ref-log-row .rl-user   { color: var(--text); }
.ref-log-row .rl-reason { color: var(--muted); }
.ref-log-row .rl-next   { color: var(--amber); text-align: right; }
.ref-log-row .rl-count  { text-align: right; color: var(--muted); }
.ref-log-row.ev-fail  { border-left-color: var(--red); }
.ref-log-row.ev-fail .rl-event { color: var(--red); }
.ref-log-row.ev-wait  { border-left-color: var(--amber); }
.ref-log-row.ev-wait .rl-event { color: var(--amber); }
.ref-log-row.ev-dead  { border-left-color: #6c7480; background: rgba(108,116,128,0.07); }
.ref-log-row.ev-dead .rl-event { color: #c0c8d2; }
.ref-log-row.ev-ok    { border-left-color: var(--green); }
.ref-log-row.ev-ok    .rl-event { color: var(--green); }

/* --- Pause + Lockstat cards in the refresher summary ----------------- */
.summary.ref-summary .pause-card,
.summary.ref-summary .lockstat-card {
  display: flex; flex-direction: column; gap: 4px;
}
.summary.ref-summary .pause-card .btn.primary {
  background: rgba(255,124,117,0.15); color: #ff7c75;
  border-color: rgba(255,124,117,0.45);
}
.summary.ref-summary .pause-card .btn.primary:hover {
  background: rgba(255,124,117,0.25);
}
.summary.ref-summary .pause-card.paused .btn.primary {
  background: rgba(110,233,139,0.15); color: #6ee98b;
  border-color: rgba(110,233,139,0.45);
}

/* --- Group rules grid (replaces flat table) ------------------------- */
.ref-groups-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 12px; margin: 0 28px;
}
.ref-group-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px; font-size: 13px;
}
.ref-group-card.disabled {
  border-color: rgba(255,124,117,0.5);
  background: linear-gradient(180deg, rgba(255,124,117,0.06), var(--panel));
}
.ref-group-card .gc-head {
  display: flex; justify-content: space-between; align-items: center;
}
.ref-group-card .gc-name { font-weight: 600; font-size: 15px; }
.ref-group-card .gc-mode {
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 8px; font-size: 12px; cursor: pointer;
}
.ref-group-card .gc-mode.auto    { color: #6ee98b; border-color: rgba(110,233,139,0.4); }
.ref-group-card .gc-mode.manual  { color: #ffc548; border-color: rgba(255,197,72,0.4); }
.ref-group-card .gc-mode.disabled{ color: #ff7c75; border-color: rgba(255,124,117,0.4); }
.ref-group-card .gc-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px;
}
.ref-group-card .gc-row {
  display: flex; justify-content: space-between; align-items: baseline;
}
.ref-group-card .gc-row .k { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; }
.ref-group-card .gc-row .v { font-family: ui-monospace, Consolas, monospace; }
.ref-group-card .gc-stops {
  border-top: 1px dashed var(--border);
  padding-top: 8px; font-size: 12px;
}
.ref-group-card .gc-stops .gs-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.4px; margin-bottom: 4px;
}
.ref-group-card .gc-stops .gs-state.ok      { color: #6ee98b; font-weight: 600; }
.ref-group-card .gc-stops .gs-state.watch   { color: #ffc548; font-weight: 600; }
.ref-group-card .gc-stops .gs-state.stopped { color: #ff7c75; font-weight: 600; }
.ref-group-card .gc-locks {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px;
  font-size: 12px; padding: 6px 8px;
  background: rgba(255,255,255,0.03); border-radius: 6px;
}
.ref-group-card .gc-locks .lk-k { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; }
.ref-group-card .gc-locks .lk-v.green { color: #6ee98b; font-weight: 600; }
.ref-group-card .gc-locks .lk-v.amber { color: #ffc548; font-weight: 600; }
.ref-group-card .gc-locks .lk-v.red   { color: #ff7c75; font-weight: 600; }
.ref-group-card .gc-rates { margin-top: 8px; }
/* v0.8.25: per-group "adds today" tiles - two columns, accent value so the
   section reads distinctly from the lock/rate tiles above it. */
.ref-group-card .gc-today { grid-template-columns: 1fr 1fr; margin-top: 8px; }
.ref-group-card .gc-today .lk-v { color: #8ab4ff; font-weight: 600; }
.ref-group-card.unassigned-card { border-style: dashed; opacity: 0.92; }
.ref-group-card .gc-actions {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px;
}
.ref-group-card .gc-drift {
  font-size: 11px; padding: 4px 8px; border-radius: 6px;
  font-family: ui-monospace, Consolas, monospace;
}
.ref-group-card .gc-drift.sync   { color: #6ee98b; background: rgba(110,233,139,0.10); }
.ref-group-card .gc-drift.drift  { color: #ff7c75; background: rgba(248,81,73,0.12); border: 1px solid rgba(248,81,73,0.45); }
.ref-group-card .gc-drift.drift b { color: #ff7c75; }
.ref-group-card .gc-drift.none   { color: var(--muted); background: rgba(255,255,255,0.03); }

/* Per-worker drift chip on the refresher fleet card.  Same shape as
   a bot badge but tinted red so it sticks out next to the bot status. */
.bot-badge.drift-chip {
  color: #ff7c75; background: rgba(248,81,73,0.12);
  border-color: rgba(248,81,73,0.45);
  font-weight: 600;
  cursor: help;
}
.pipe-actions-divider {
  width: 1px; height: 20px; background: var(--border);
  margin: 0 4px;
}

/* Drawer forms for thresholds / per-group settings */
.thresh-grid {
  display: flex; flex-direction: column; gap: 12px;
  padding: 0 0 8px;
}
.thresh-grid label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 13px;
}
.thresh-grid input[type="number"] {
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 10px; max-width: 140px; font-size: 13px;
}
.thresh-grid label .muted { font-size: 11px; }

.gs-body { display: flex; flex-direction: column; gap: 18px; }
.gs-section {
  background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.gs-section h3 {
  margin: 0; font-size: 12px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.6px;
}
.gs-row {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 13px;
}
.gs-row.check {
  flex-direction: row; align-items: center; gap: 10px;
}
.gs-row.check input[type="checkbox"] {
  width: 16px; height: 16px; accent-color: var(--accent);
}
.gs-row.check { flex-wrap: wrap; }
.gs-row .bs-key {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12px; color: var(--accent); min-width: 180px;
}
.gs-row .range-input { display: inline-flex; align-items: center; gap: 6px; }
.gs-row .range-input input { max-width: 90px; }
.gs-subhead {
  margin: 8px 0 4px; font-size: 11px; color: var(--accent);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.gs-row input[type="text"], .gs-row input[type="number"], .gs-row select {
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 10px; font-size: 13px; max-width: 320px;
}
.gs-row .muted { font-size: 11px; }

/* --- Group rows in settings picker + sub-drawer ---------------------- */
.settings-row.group-row {
  background: linear-gradient(180deg, var(--panel-2), rgba(255,255,255,0.02));
  border-color: var(--accent);
}
.settings-row.group-row .label-text { color: var(--accent); }
.settings-row.group-row .input-col.group-controls {
  display: flex; gap: 10px; align-items: center; justify-content: flex-end;
}
.settings-row .group-configure {
  background: var(--accent); color: #fff; border-color: var(--accent);
  font-weight: 600;
}
.settings-row .group-configure:hover { filter: brightness(1.1); }
.settings-row .group-badge {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 11px; color: var(--muted);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 999px; padding: 2px 8px; min-width: 60px; text-align: center;
}
.settings-row .group-badge.active {
  color: var(--accent); border-color: var(--accent); font-weight: 600;
}
/* Sub-drawer is a centered modal (same family as the main drawers) but
   stacks above them by being authored later in the DOM (z-order) and
   visually distinguished by a subtle accent on the title. */
.subsettings-drawer .drawer-title { color: var(--accent); }

/* ====================================================================
 * Testing tab (v0.5.0) - everything lives inside #tab-testing so it can
 * never leak styles into the other tabs.
 * ==================================================================== */
/* Every section body gets the same 28px gutter the other tabs use; the
 * shared .section-head loses its own horizontal padding here so we don't
 * double it. This is what was making the content hug / clip the left. */
#tab-testing > section { padding: 0 28px; margin-bottom: 18px; }
#tab-testing .section-head { padding: 22px 0 8px; }
#tab-testing > section > h2.inline { padding: 22px 0 6px; display: block; }
#tab-testing .test-hint { font-size: 12px; color: var(--muted); margin: 0 0 10px; max-width: 920px; }

.test-builder-grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px;
  align-items: start;
}
@media (max-width: 1000px) { .test-builder-grid { grid-template-columns: 1fr; } }
.test-panel {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px;
}
.test-panel-head {
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 600; font-size: 13px; margin-bottom: 10px; color: var(--text);
}
.test-workers {
  display: flex; flex-wrap: wrap; gap: 6px; max-height: 220px; overflow: auto;
}
.test-worker {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 8px; cursor: pointer; white-space: nowrap;
}
.test-worker.locked { opacity: 0.55; cursor: not-allowed; }
.test-worker .tw-name { font-weight: 500; }
.test-workers .tw-group-head {
  flex-basis: 100%; width: 100%; margin: 8px 0 0; padding: 0 2px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.test-workers .tw-group-head:first-child { margin-top: 0; }
.test-run-flag { color: var(--amber); font-size: 10px; }
.test-flag-ref { color: #c97bff; font-size: 10px; font-weight: 600; }
.test-badge, .testing-pill {
  background: #6e40c9; color: #fff; font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 10px; letter-spacing: 0.4px;
}
.health-pill.testing-pill { border: none; }

/* --- Module Lab generator --- */
/* date filter bar (Runs + Conclusions section heads) */
.date-filter-bar {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
.date-chip { font-size: 11px !important; padding: 2px 8px !important; }
.date-chip.active { background: var(--accent) !important; color: #fff !important;
  border-color: var(--accent) !important; }

/* Module Lab results restructure */
.modlab-results-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 0 4px; border-top: 1px solid var(--border); margin-top: 8px;
}
.modlab-results-sections { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
.modlab-result-block { }

.modlab-gen-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start;
}
@media (max-width: 1000px) { .modlab-gen-grid { grid-template-columns: 1fr; } }
/* collapsed category bars stay compact; the scroll list caps tall expansions */
.modlab-gen-cat { margin-bottom: 0; }
.modlab-gen-cat .modlab-gen-list { max-height: 420px; overflow-y: auto; }
.modlab-gen-list {
  display: flex; flex-direction: column; gap: 3px;
  max-height: 340px; overflow: auto; margin-top: 6px;
}
.modlab-gen-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; font-size: 12px; padding: 2px 4px; border-radius: 4px;
}
.modlab-gen-row:hover { background: rgba(255,255,255,0.03); }
.modlab-gen-row .mlk { color: var(--text); font-family: monospace; font-size: 11px; }
.modlab-gen-row select {
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: 5px; padding: 2px 5px; font-size: 11px; min-width: 96px;
}
.modlab-gen-row select.fixed { border-color: var(--accent); color: var(--accent); font-weight: 600; }
#test-modlab-section .modlab-fix { padding: 1px 7px; font-size: 10px; margin-left: 6px; }

/* mcc/mnc combined control in the Use-module generator (v0.8.67) */
.modlab-mccmnc-ctl {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 5px;
}
.modlab-mccmnc-ctl .modlab-gen-row select { min-width: 150px; }
.modlab-mccmnc-opt {
  display: flex; align-items: center; gap: 6px; font-size: 12px;
  color: var(--text); padding: 0 4px; cursor: pointer;
}
.modlab-mccmnc-opt input[disabled] + * { opacity: 0.5; }
#modlab-mccmnc-hint { padding: 2px 4px; line-height: 1.4; }
.mccmnc-res-table th { font-size: 10px; color: var(--muted); font-weight: 600; padding: 4px 6px; }
.mccmnc-res-table td { padding: 4px 6px; font-size: 12px; }
#test-modlab-section .modlab-mm-use { padding: 1px 7px; font-size: 10px; }

/* "How this works" help panel in 2 - Results (v0.8.67) */
.modlab-help { margin: 4px 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); }
.modlab-help > summary {
  cursor: pointer; padding: 7px 12px; font-size: 12px; font-weight: 600;
  color: var(--text); list-style: none; user-select: none;
}
.modlab-help > summary::-webkit-details-marker { display: none; }
.modlab-help[open] > summary { border-bottom: 1px solid var(--border); }
.modlab-help-body { padding: 10px 14px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.modlab-help-body p { margin: 0 0 8px; }
.modlab-help-body b { color: var(--text); }
.modlab-help-body ul { margin: 0 0 8px; padding-left: 18px; }
.modlab-help-body code { font-size: 11px; background: var(--bg); padding: 0 3px; border-radius: 3px; }
.modlab-help-vars {
  display: flex; flex-direction: column; gap: 7px; margin: 8px 0;
  padding: 9px 11px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg);
}
.modlab-help-vars > div { font-size: 12px; line-height: 1.45; }

/* Testing-tab persistent notes (v0.8.69) */
.test-help-i {
  display: inline-block; margin-left: 7px; font-size: 13px; color: var(--muted);
  cursor: help; vertical-align: middle; font-weight: 400;
}
.test-help-i:hover { color: var(--text); }
.test-notes-wrap { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0 0; max-width: 900px; }
.test-notes {
  flex: 1; resize: none; overflow: hidden; display: block;
  font: inherit; font-size: 13px; line-height: 1.5;
  color: var(--text); background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px;
}
.test-notes:focus { outline: none; border-color: var(--accent); background: var(--panel); }
.test-notes::placeholder { color: var(--muted); }
.test-notes-status { font-size: 11px; white-space: nowrap; padding-top: 9px; min-width: 64px; }

/* Module Lab results: clearer side cells + verdict (v0.7.13) */
.modlab-res-table td.ml-cell { text-align: center; vertical-align: top; padding: 6px 10px; }
.modlab-res-table .ml-made { font-size: 13px; }
.modlab-res-table .ml-made b { font-size: 15px; }
.modlab-res-table .ml-sub { font-size: 11px; margin-top: 2px; }
/* the winning side - green tint + left rule so the eye lands on it */
.modlab-res-table td.ml-win {
  background: rgba(63,185,80,0.12);
  box-shadow: inset 3px 0 0 var(--green, #3fb950);
}
.modlab-res-table td.ml-win .ml-made b { color: var(--green, #3fb950); }
.ml-verdict { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.ml-vpill {
  display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px;
  font-weight: 600; border: 1px solid var(--border);
}
.ml-vpill.ok   { background: rgba(63,185,80,0.18);  color: var(--green, #3fb950);  border-color: rgba(63,185,80,0.4); }
.ml-vpill.wait { background: rgba(210,153,34,0.16);  color: var(--amber, #d29922); border-color: rgba(210,153,34,0.4); }
.ml-vpill.flat { background: var(--panel-2); color: var(--muted); }
.ml-why { font-size: 11px; color: var(--muted); max-width: 360px; }
#test-modlab-section .ml-verdict .modlab-fix { margin-left: 0; padding: 2px 9px; font-size: 11px; }

/* Module Lab compact results (v0.8.9) */
.ml2-summary { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.ml2-sum-chip { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 12px; font-weight: 600; }
.ml2-sum-chip.ok   { background: rgba(63,185,80,0.18);  color: #3fb950; border: 1px solid rgba(63,185,80,0.4); }
.ml2-sum-chip.wait { background: rgba(210,153,34,0.16); color: #d29922; border: 1px solid rgba(210,153,34,0.4); }
.ml2-sum-chip.flat { background: var(--panel-2); color: var(--muted); border: 1px solid var(--border); }
.ml2-winners { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.ml2-winner-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 10px; border-radius: 8px;
  background: rgba(63,185,80,0.08); border: 1px solid rgba(63,185,80,0.25);
}
.ml2-mod { font-weight: 700; font-size: 13px; min-width: 180px; }
.ml2-verdict-badge {
  display: inline-block; padding: 2px 9px; border-radius: 8px; font-size: 12px; font-weight: 700;
}
.ml2-verdict-badge.ok { background: rgba(63,185,80,0.22); color: #3fb950; }
.ml2-stat { font-size: 12px; color: var(--text); }
.ml2-use { margin-left: auto; }
.ml2-noise { margin-top: 2px; }
.ml2-noise-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 6px; }
.ml2-noise-table tr { border-bottom: 1px solid var(--border); }
.ml2-n-mod { padding: 3px 12px 3px 0; font-weight: 600; width: 200px; }
.ml2-n-stat { padding: 3px 12px; color: var(--muted); }
.ml2-n-tag { padding: 3px 0; }
/* Current-vs-last-10-days comparison table */
.ml2-cmp-table thead th {
  color: var(--muted); font-weight: 600; font-size: 11px; text-align: left;
  padding: 4px 12px 6px 0; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.ml2-cmp-table td { vertical-align: top; }
.ml2-cmp-table .ml2-n-mod { width: auto; white-space: nowrap; }

/* ===================== New Testing System ===================== */
#test-newsystem-section { margin: 30px 28px 10px; }
.nts-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 10px; }
.nts-controls label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.nts-controls input, .nts-controls select { background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px; padding: 3px 6px; font-size: 12px; }
/* cohort line — the one-glance "what did I select" summary */
.nts-cohort-line { font-size: 12px; color: var(--muted); margin: 2px 0 10px; }
.nts-cohort-line b { color: var(--text); font-variant-numeric: tabular-nums; }
.nts-headline { background: rgba(63,185,80,0.10); border: 1px solid rgba(63,185,80,0.4);
  color: var(--text); border-radius: 8px; padding: 10px 14px; font-size: 14px; font-weight: 600; margin: 6px 0 12px; }
.nts-block-title { font-size: 13px; font-weight: 600; color: var(--text); margin: 14px 0 8px; }
.nts-next { font-size: 13px; color: var(--text); background: var(--panel-2); border: 1px solid var(--border);
  border-left: 3px solid var(--accent); border-radius: 6px; padding: 8px 12px; margin: 0 0 12px;
  line-height: 1.55; word-break: break-word; white-space: normal; }
/* pyramid cohort-picker */
.nts-pyramid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.nts-pcol { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.nts-pcol-t { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 8px; }
.nts-prow { display: grid; grid-template-columns: 88px 1fr 44px auto; align-items: center; gap: 8px; margin: 4px 0; font-size: 12px; }
.nts-pval { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nts-bar { display: block; height: 12px; background: var(--panel-2); border-radius: 4px; overflow: hidden; }
.nts-bar-fill { display: block; height: 100%; background: var(--green); }
.nts-ppct { text-align: right; color: var(--text); font-weight: 500; }
.nts-pn { text-align: right; font-size: 11px; }
/* guard / refusal card (device=all or android=all) — refuse, don't caveat */
.nts-guard { border: 1px solid rgba(210,153,34,0.5); background: rgba(210,153,34,0.08);
  border-radius: 10px; padding: 14px 16px; margin: 14px 0 4px; }
.nts-guard-h { font-size: 14px; font-weight: 700; color: var(--amber); margin-bottom: 6px; }
.nts-guard-b { font-size: 12px; color: var(--text); line-height: 1.55; max-width: 720px; }
/* setting-kind colours: use-modules / disable-modules / creator */
.nts-k-use { color: var(--accent); }
.nts-k-dis { color: #c97bff; }
.nts-k-cre { color: var(--amber); }
.nts-color-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 11px; margin: 4px 0 8px; }
.nts-color-legend span { font-weight: 600; }
/* chips */
.nts-chip { display: inline-block; padding: 1px 8px; margin: 2px 1px; border-radius: 10px;
  font-size: 12px; border: 1px solid var(--border); white-space: nowrap; }
.nts-chip.nts-k-use { border-color: rgba(88,166,255,0.4); }
.nts-chip.nts-k-dis { border-color: rgba(201,123,255,0.4); }
.nts-chip.nts-k-cre { border-color: rgba(210,153,34,0.4); }
/* survival buckets (labelled rows of chips) */
.nts-recs { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.nts-rec { display: flex; gap: 10px; font-size: 12px; padding: 6px 10px; border-radius: 6px;
  border-left: 3px solid var(--border); background: var(--panel); }
.nts-rec-l { font-weight: 600; white-space: nowrap; min-width: 160px; }
.nts-rec-v { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; color: var(--text); }
.nts-rec.gate { border-left-color: var(--amber); }
.nts-rec.ok { border-left-color: var(--green); }
.nts-rec.likely { border-left-color: var(--accent); }
.nts-rec.flat { border-left-color: var(--border); color: var(--muted); }
.nts-rec.next { border-left-color: #c97bff; }
.nts-rec.assumed { border-left-style: dashed; border-left-color: var(--muted);
  background: repeating-linear-gradient(45deg, transparent, transparent 6px,
    rgba(255,255,255,0.02) 6px, rgba(255,255,255,0.02) 12px); }
.nts-rec.assumed .nts-rec-l { color: var(--muted); }
/* creation: mandatory (bundles + singletons) */
.nts-break { border: 1px solid rgba(248,81,73,0.45); background: rgba(248,81,73,0.07);
  border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.nts-break-h { font-size: 13px; font-weight: 600; color: #ff7b72; display: flex;
  align-items: center; gap: 6px; margin-bottom: 6px; }
.nts-btable { width: 100%; border-collapse: collapse; font-size: 12px; }
.nts-btable td { padding: 5px 0; border-top: 1px solid rgba(248,81,73,0.22); vertical-align: top; }
.nts-btable tr:first-child td { border-top: none; }
.nts-btable td:first-child { color: var(--text); }
.nts-btable td b { font-family: ui-monospace, Consolas, monospace; font-weight: 600; }
.nts-bw { text-align: right; color: var(--muted); white-space: nowrap; padding-left: 10px !important;
  font-variant-numeric: tabular-nums; }
.nts-tag { font-size: 10px; color: #e0c341; background: rgba(210,180,30,0.15);
  padding: 1px 6px; border-radius: 8px; font-weight: 500; }
.nts-low { font-size: 10px; color: var(--muted); font-style: italic; }
/* per-member isolate panel inside a bundle */
.nts-isocell { padding: 0 0 6px !important; border-top: none !important; }
.nts-iso > summary { font-size: 12px; color: #6cb0ff; cursor: pointer; padding: 4px 0; }
.nts-iso-body { font-size: 12px; color: var(--muted); line-height: 1.6; padding: 2px 0; }
.nts-mem-list { font-family: ui-monospace, Consolas, monospace; color: var(--text);
  margin: 6px 0 2px; line-height: 1.7; }
.nts-iso-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
/* creation: helps / test-next / doesn't-matter */
.nts-flatrow { display: flex; gap: 10px; align-items: baseline; padding: 7px 2px;
  font-size: 12px; border-top: 1px solid var(--border); }
.nts-flatl { color: var(--muted); min-width: 120px; flex-shrink: 0; }
.nts-flatv { color: var(--muted); }
.nts-testnext { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.nts-tn-h { font-size: 13px; font-weight: 600; color: var(--text); display: flex;
  align-items: center; gap: 6px; margin-bottom: 6px; }
.nts-tn-row { font-size: 12px; color: var(--text); padding: 3px 0; }
.nts-tn-row b { font-family: ui-monospace, Consolas, monospace; }
.nts-tn-row .nts-dice, .nts-iso-btns .nts-dice { vertical-align: middle; }
.nts-neff { margin: 6px 0; font-size: 12px; }
.nts-neff > summary { color: var(--muted); cursor: pointer; padding: 4px 0; }
.nts-neff .nts-flatv { padding: 4px 0 2px; }
.nts-cnote { font-size: 11px; color: var(--muted); font-style: italic; }
.nts-dice { font-size: 11px; padding: 1px 8px; }
/* setting names coloured by kind (matches the legend) */
.nts-cn { font-family: ui-monospace, Consolas, monospace; font-weight: 500; }
.nts-cn.nts-k-use { color: #58a6ff; }   /* use-modules */
.nts-cn.nts-k-dis { color: #c97bff; }   /* disable-modules */
.nts-cn.nts-k-cre { color: #d29922; }   /* creator settings */
.nts-warn { font-size: 12px; color: var(--amber); background: rgba(210,153,34,0.08);
  border: 1px solid rgba(210,153,34,0.4); border-radius: 6px; padding: 8px 10px; margin: 6px 0; }
/* detail table (collapsed, creation-ordered) */
.nts-detail { margin: 14px 0 4px; }
.nts-detail > summary { font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; padding: 4px 0; }
.nts-table-wrap { max-height: 520px; overflow: auto; border: 1px solid var(--border); border-radius: 8px; margin-top: 6px; }
.nts-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.nts-table thead th { position: sticky; top: 0; background: var(--panel-2); text-align: left;
  padding: 6px 10px; border-bottom: 1px solid var(--border); color: var(--muted); white-space: nowrap; }
.nts-table td { padding: 5px 10px; border-bottom: 1px solid rgba(255,255,255,0.04); white-space: nowrap; }
.nts-table tbody tr:hover { background: rgba(255,255,255,0.03); }
.nts-mod { font-weight: 600; }
.nts-kind { font-size: 10px; font-weight: 400; }
.nts-num { font-variant-numeric: tabular-nums; }
.nts-delta { font-weight: 600; font-variant-numeric: tabular-nums; }
.nts-bundle-badge { font-size: 10px; font-weight: 500; color: #c97bff;
  background: rgba(201,123,255,0.12); border: 1px solid rgba(201,123,255,0.35);
  padding: 1px 6px; border-radius: 8px; margin-left: 4px; }
/* verdict + confidence pills */
.nts-v { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 10px; white-space: nowrap; }
.nts-v.gate { color: var(--amber); border: 1px solid rgba(210,153,34,0.5); }
.nts-v.ok { color: var(--green); border: 1px solid rgba(63,185,80,0.5); }
.nts-v.flat { color: var(--muted); border: 1px solid var(--border); }
.nts-v.dim { color: var(--muted); }
.nts-conf { font-size: 10px; padding: 1px 6px; border-radius: 8px; }
.nts-conf.high { color: var(--green); border: 1px solid rgba(63,185,80,0.4); }
.nts-conf.med { color: var(--amber); border: 1px solid rgba(210,153,34,0.4); }
.nts-conf.low { color: var(--muted); border: 1px solid var(--border); }
/* long-term (7d) comparison panel — the ONLY place a 2nd window appears */
.nts-longwin { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
  margin: 6px 0; background: var(--panel); }
.nts-lw-sub { font-size: 12px; font-weight: 600; color: var(--muted); margin: 8px 0 4px; }
.nts-lw-sub:first-child { margin-top: 0; }

/* Module Lab run-builder toggles (flag a run so it feeds the per-module results) */
.test-modlab-flags {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border);
}
.test-modlab-flags-title { font-size: 12px; font-weight: 600; color: var(--text); }
.test-modlab-flags label {
  display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text);
  cursor: pointer;
}
.test-modlab-flags input[type=checkbox] { cursor: pointer; }

/* --- "Add after creation" adder panel --- */
.test-adder-flags {
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border);
}
.test-adder-head { display: flex; align-items: center; gap: 6px; font-size: 13px;
  color: var(--text); cursor: pointer; }
.test-adder-head input[type=checkbox] { cursor: pointer; }
.test-adder-panel {
  margin-top: 10px; padding: 12px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--panel-2);
  display: flex; flex-direction: column; gap: 10px;
}
.test-adder-row { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.test-adder-row > label { font-size: 12px; color: var(--muted);
  display: flex; align-items: center; gap: 5px; }
.test-adder-row input[type=number] { width: 64px; }
.test-adder-preview { font-weight: 600; }
.test-adder-opts { display: flex; flex-direction: column; gap: 8px; }
.test-adder-sub { display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  font-size: 12px; color: var(--text); }
.test-adder-sub-t { font-weight: 600; min-width: 96px; color: var(--muted); }
.test-adder-sub .chk { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.test-adder-sub label { display: inline-flex; align-items: center; gap: 4px; }
.test-adder-sub input[type=number] { width: 56px; }
.adder-combo-chip { display: inline-block; padding: 2px 8px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--panel); }

/* --- Adder results section --- */
#adder-results-section { margin-top: 18px; }
.lockchip { display: inline-block; padding: 1px 7px; border-radius: 10px;
  font-size: 11px; margin: 0 2px; }
.adder-run-block { margin-bottom: 16px; border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden; }
.adder-run-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; background: var(--panel-2); font-size: 13px;
  border-bottom: 1px solid var(--border); }
.adder-grouptag { padding: 1px 8px; border: 1px solid var(--border); border-radius: 10px;
  font-size: 11px; font-weight: 600; }
.adder-fromrun { padding: 1px 7px; border: 1px solid var(--border); border-radius: 10px;
  font-size: 11px; color: var(--muted); background: var(--panel); white-space: nowrap; }
.adder-run-actions { margin-left: auto; display: flex; gap: 6px; }
.adder-res-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.adder-res-table th, .adder-res-table td { padding: 4px 8px; text-align: center;
  border-bottom: 1px solid var(--border); white-space: nowrap; }
.adder-res-table th { color: var(--muted); font-weight: 600; }
.adder-res-table td:first-child, .adder-res-table th:first-child { text-align: left; }
.adder-control-row { background: rgba(127,127,127,0.08); font-style: italic; }
/* Lock-rate coloring: green = low/good, red = high/bad. */
.lock-good { background: rgba(46,160,67,0.22);  color: var(--text); font-weight: 600; }
.lock-ok   { background: rgba(210,180,30,0.22); color: var(--text); font-weight: 600; }
.lock-warn { background: rgba(219,128,30,0.28); color: var(--text); font-weight: 600; }
.lock-bad  { background: rgba(218,54,51,0.30);  color: var(--text); font-weight: 600; }

/* --- "Load saved" custom popover (stays open for multi-pick) --- */
.test-load-wrap { position: relative; display: inline-block; }
.test-load-panel {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 50;
  min-width: 240px; max-height: 380px; overflow: auto;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.45); padding: 4px;
}
.test-load-panel[hidden] { display: none; }
.test-load-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; padding: 4px 8px 6px; border-bottom: 1px solid var(--border);
  font-size: 11px; color: var(--muted); margin-bottom: 2px;
}
.test-load-cat {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.4px; color: var(--accent); padding: 6px 8px 2px;
}
.test-load-item {
  padding: 3px 6px 3px 10px; border-radius: 5px; font-size: 12px;
  display: flex; align-items: center; gap: 6px;
}
.test-load-item:hover { background: rgba(88,166,255,0.15); }
.test-load-name { flex: 1; cursor: pointer; padding: 2px 0; }
.test-load-acts { display: flex; gap: 2px; opacity: 0.35; }
.test-load-item:hover .test-load-acts { opacity: 1; }
.test-load-act {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 13px; line-height: 1; padding: 3px 5px; border-radius: 4px;
}
.test-load-act:hover { background: rgba(255,255,255,0.1); color: var(--text); }
.test-load-act.del:hover { background: rgba(248,81,73,0.2); color: #f85149; }
.test-load-empty { padding: 10px; font-size: 12px; }

/* --- quick-add template buttons --- */
.test-quick-add {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.test-quick-add button { font-weight: 600; }

/* --- compact combos: one card, two tight rows --- */
.test-combos { display: flex; flex-direction: column; gap: 8px; }
.test-combo {
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 6px; padding: 8px 10px;
}
.test-combo .tc-row { display: flex; gap: 6px; align-items: center; }
.test-combo .tc-row + .tc-row { margin-top: 6px; }
.test-combo .tc-name {
  flex: 1; min-width: 0; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 5px; padding: 4px 6px; font-weight: 600;
}
.test-combo .tc-summary {
  font-size: 11px; color: var(--muted); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.test-combo select.tc-proxy {
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: 5px; padding: 3px 6px; max-width: 200px;
}

.test-assign-wrap {
  margin-top: 4px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px;
}
.test-assign { max-height: 260px; overflow: auto; }
.test-assign-table { width: 100%; max-width: 560px; border-collapse: collapse; font-size: 12px; }
.test-assign-table th, .test-assign-table td {
  text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--border);
}
.test-assign-table select, .test-run-controls input,
.test-run-controls select {
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: 5px; padding: 3px 6px;
}
.test-run-controls {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
}
.test-run-controls label { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 3px; }
.test-run-controls input[type=number] { width: 70px; }

/* --- runs --- */
.test-run-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px; margin-bottom: 12px;
}
.test-run-waiting {
  border-style: dashed; opacity: 0.85;
}
.test-run-head { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.test-adder-badge {
  display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 11px;
  font-weight: 600; background: rgba(88,166,255,0.15); border: 1px solid rgba(88,166,255,0.35);
  color: var(--text);
}
.test-adder-badge.adder-phase-queued  { background: rgba(210,140,0,0.18); border-color: rgba(210,140,0,0.4); }
.test-adder-badge.adder-phase-active  { background: rgba(46,160,67,0.18); border-color: rgba(46,160,67,0.4); }
.test-adder-badge.adder-phase-monitor { background: rgba(88,130,255,0.18); border-color: rgba(88,130,255,0.4); }
.test-adder-badge.adder-phase-done    { background: rgba(46,160,67,0.12); border-color: rgba(46,160,67,0.3); opacity: 0.8; }
.test-unit-waiting td { color: var(--muted); font-style: italic; }
.test-table-wrap { overflow-x: auto; }
.test-units-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.test-units-table th, .test-units-table td {
  padding: 5px 10px; border-bottom: 1px solid var(--border); text-align: center; white-space: nowrap;
}
.test-units-table th { color: var(--muted); font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.3px; }
.test-units-table td.num { font-variant-numeric: tabular-nums; }
.test-units-table td.ok   { color: var(--green); font-weight: 600; }
.test-units-table td.fail { color: var(--red); font-weight: 600; }
/* Fail reasons are prose - keep them left-aligned (not centered). */
.test-units-table td.fail-reasons-cell { text-align: left; }
.test-units-table .reason-hot { color: var(--red); font-weight: 600; }

/* --- conclusions: tile the 6 dimensions instead of full-width stacks --- */
/* Conclusions: collapsible per-outcome lens sub-sections */
.concl-lens {
  border: 1px solid var(--border); border-radius: 8px; margin-bottom: 10px;
  background: var(--panel-2); overflow: hidden;
}
.concl-lens > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
}
.concl-lens > summary::-webkit-details-marker { display: none; }
.concl-lens > summary::before {
  content: "\25B8"; color: var(--muted); font-size: 11px; transition: transform .15s;
}
.concl-lens[open] > summary::before { transform: rotate(90deg); }
.concl-lens-title { font-weight: 700; font-size: 14px; }
.concl-lens-badge {
  padding: 1px 9px; border-radius: 10px; font-size: 12px; font-weight: 600;
  background: var(--panel); border: 1px solid var(--border);
}
.concl-lens-badge.ok   { background: rgba(63,185,80,0.16);  color: #3fb950; border-color: rgba(63,185,80,0.35); }
.concl-lens-badge.fail { background: rgba(218,54,51,0.16);  color: #ff7b72; border-color: rgba(218,54,51,0.35); }
.concl-lens-hint { font-size: 11px; margin-left: auto; }
.concl-lens-body { padding: 4px 14px 14px; border-top: 1px solid var(--border); }

/* nested per-module sub-sub-sections inside a lens */
.concl-mods { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.concl-sub {
  border: 1px solid var(--border); border-radius: 6px; background: var(--panel);
}
.concl-sub > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 8px; padding: 7px 12px; font-size: 12px;
}
.concl-sub > summary::-webkit-details-marker { display: none; }
.concl-sub > summary::before {
  content: "\25B8"; color: var(--muted); font-size: 10px; transition: transform .15s;
}
.concl-sub[open] > summary::before { transform: rotate(90deg); }
.concl-sub-title { font-weight: 600; }
.concl-sub-hint { font-size: 11px; }
.concl-sub-body { padding: 4px 12px 12px; }
.concl-mod-table { width: 100%; }
.concl-mod-table th, .concl-mod-table td { text-align: center; }
.concl-mod-table td:first-child, .concl-mod-table th:first-child { text-align: left; }

/* "What drives this outcome?" driver tables (v0.8.14) */
.drv-headline {
  font-size: 12.5px; font-weight: 600; line-height: 1.4;
  background: var(--panel-2); border: 1px solid var(--border);
  border-left: 3px solid #58a6ff; border-radius: 6px;
  padding: 7px 10px; margin: 2px 0 6px;
}
.drv-scope { font-size: 11px; margin-bottom: 8px; }
.drv-sec-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.3px; margin: 8px 0 4px;
}
.drv-sec-title .muted {
  font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 11px;
}
.drv-sec-title.drv-good { color: var(--green); }
.drv-sec-title.drv-bad  { color: var(--red); }
.drv-table { width: 100%; }
.drv-table th, .drv-table td { text-align: left; padding: 3px 8px; vertical-align: top; }
.drv-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.drv-table b.ok   { color: var(--green); }
.drv-table b.fail { color: var(--red); }
.drv-note { margin: 6px 0 2px; line-height: 1.45; }
.ml-vpill.fail   { background: rgba(248,81,73,0.16); color: #ff7b72; border-color: rgba(248,81,73,0.4); }
.ml-vpill.warn   { background: rgba(210,153,34,0.16); color: var(--amber, #d29922); border-color: rgba(210,153,34,0.4); }
.ml-vpill.muted2 { background: var(--panel-2); color: var(--muted); border-color: var(--border); }

.test-dims-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 14px; margin-bottom: 16px;
}
.test-dim {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px;
}
.test-dim-title { font-weight: 600; font-size: 13px; margin-bottom: 8px; color: var(--text); }
.test-dim-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.test-dim-table th, .test-dim-table td {
  padding: 4px 6px; border-bottom: 1px solid var(--border); text-align: center;
}
.test-dim-table th { color: var(--muted); font-weight: 600; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.3px; }
.test-dim-table td.num { font-variant-numeric: tabular-nums; }
.test-dim-table td.ok   { color: var(--green); }
.test-dim-table td.fail { color: var(--red); }
.test-combos-table-wrap { overflow-x: auto; max-width: 1100px; }

.test-pill {
  display: inline-block; padding: 1px 8px; border-radius: 10px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.2px;
  background: var(--panel-2); color: var(--muted); border: 1px solid var(--border);
}
.test-pill.ok   { background: rgba(63,185,80,0.15);  color: var(--green); border-color: var(--green); }
.test-pill.fail { background: rgba(248,81,73,0.15);  color: var(--red);   border-color: var(--red); }
.test-pill.wait { background: rgba(210,153,34,0.15); color: var(--amber); border-color: var(--amber); }
.test-pill.dead { background: rgba(139,148,158,0.18);color: var(--muted); }
.test-pill.broken { background: rgba(248,81,73,0.22); color: var(--red);
  border-color: var(--red); font-weight: 700; }
/* BROKEN: an adder instance that produced 0 adds (or crashed/stuck). */
.adder-broken { display: inline-block; padding: 0 6px; border-radius: 8px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.4px; vertical-align: middle;
  background: rgba(248,81,73,0.18); color: var(--red); border: 1px solid var(--red); }
.adder-broken-row { background: rgba(248,81,73,0.07); }
.adder-retryof { padding: 1px 7px; border-radius: 10px; font-size: 10px;
  background: rgba(88,166,255,0.14); color: var(--accent, #58a6ff);
  border: 1px solid rgba(88,166,255,0.4); }
/* Open LOGS drawer: a right-side overlay showing an instance's newest log. */
.adder-logs-overlay { position: fixed; inset: 0; z-index: 60;
  background: rgba(0,0,0,0.45); display: flex; justify-content: flex-end; }
.adder-logs-overlay[hidden] { display: none; }
.adder-logs-drawer { width: min(900px, 92vw); height: 100%; display: flex;
  flex-direction: column; background: var(--panel, #161b22);
  border-left: 1px solid var(--border); box-shadow: -8px 0 24px rgba(0,0,0,0.4); }
.adder-logs-head { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.adder-logs-title { font-weight: 700; font-size: 14px; }
.adder-logs-meta { padding: 8px 16px 0; }
.adder-logs-errors { padding: 6px 16px 0; }
.adder-logs-ef-title { font-size: 11px; font-weight: 700; color: var(--amber);
  margin-top: 6px; }
.adder-logs-ef { max-height: 22vh; overflow: auto; margin: 4px 0 0;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: rgba(210,153,34,0.06); color: var(--fg); font-size: 11px;
  white-space: pre-wrap; word-break: break-word; }
/* EV method repeat-count input (Add-after-creation EV selector). */
.adder-ev-row { display: inline-flex; align-items: center; gap: 3px; }
.adder-ev-count { width: 46px; margin-left: 3px; }
.adder-logs-body { flex: 1; overflow: auto; margin: 10px 16px 16px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--panel-2, #0d1117); color: var(--fg); font-size: 11.5px;
  line-height: 1.45; white-space: pre-wrap; word-break: break-word;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace; }
.small { font-size: 11px; }

.test-accounts-text {
  width: 100%; min-height: 320px; resize: vertical;
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 8px; font-family: monospace; font-size: 12px;
}
.btn.small { padding: 2px 8px; font-size: 11px; }

/* Module-config cells (Conclusions combos + Runs) + default editor (v0.8.22) */
.mod-col { font-size: 11px; max-width: 240px; vertical-align: top; }
.mod-default { color: var(--green); }
.mod-mixed { color: var(--amber, #d29922); font-weight: 600; font-size: 10px; }
.mod-cell { display: inline-block; }
.mod-cell > summary { cursor: pointer; color: #79b8ff; list-style: none; white-space: nowrap; }
.mod-cell > summary::-webkit-details-marker { display: none; }
.mod-cell > summary::after { content: " \25B8"; color: var(--muted); font-size: 9px; }
.mod-cell[open] > summary::after { content: " \25BE"; }
.mod-cell-list {
  margin-top: 4px; padding: 6px 8px; background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 6px;
  font-size: 11px; line-height: 1.55; white-space: nowrap;
}
.moddef-sec-title {
  font-weight: 700; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.3px; color: var(--muted); margin: 12px 0 6px;
}
/* emulator vs real-phone default toggle */
.moddef-devtoggle { display: flex; align-items: center; gap: 8px; font-size: 12px; margin: 2px 0 10px; }
.moddef-devbtn {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 12px; font-size: 12px; cursor: pointer;
}
.moddef-devbtn.active { border-color: var(--accent); color: var(--accent); font-weight: 600; }
/* "= default" button on the Experiments / disable-modules group rows */
.group-setdefault { font-size: 11px; padding: 2px 8px; margin-left: 4px;
  border-color: rgba(88,166,255,0.4); color: var(--accent); }
.group-setdefault:hover { background: rgba(88,166,255,0.1); }
/* extract_attest "always ON" note at the top of the creator settings form */
.settings-forced-note {
  font-size: 12px; color: var(--text); background: rgba(63,185,80,0.08);
  border: 1px solid rgba(63,185,80,0.35); border-radius: 6px; padding: 6px 10px; margin-bottom: 10px;
}
.settings-forced-note .sfn-badge {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px;
  color: var(--green, #3fb950); border: 1px solid rgba(63,185,80,0.5);
  border-radius: 8px; padding: 1px 6px; margin-right: 4px;
}
.moddef-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px;
}
.moddef-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; }
.moddef-row select {
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: 5px; padding: 2px 6px; font-size: 12px;
}
.moddefault-body { max-width: 760px; }

/* Combo chips (v0.8.23): a combo label rendered as colour-coded chips so
   on/off is obvious. Shared by Adder Results, the Runs table, and Conclusions
   combos. */
.combo-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; margin: 0 4px; }
.combo-flag {
  font-size: 11px; padding: 1px 7px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--text);
}
.combo-flag.on      { color: var(--green); border-color: rgba(63,185,80,0.4); }
.combo-flag.off     { color: #ff7b72;       border-color: rgba(248,81,73,0.4); }
.combo-flag.neutral { color: var(--muted); }
.combo-flag.andro   { color: #7cc7ff; border-color: rgba(124,199,255,0.4); font-weight: 600; }
.combo-flag.andro .warn { color: #ffc548; font-weight: 600; }
.combo-flag.src     { color: #cbb0ff; border-color: rgba(178,139,255,0.45); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }

/* "What it runs on" — loud platform/service chip (REAL PHONES / SEPIA / GEELARK),
   so you can tell at a glance and never confuse the emulator service. */
.dev-chip {
  font-size: 11px; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase;
  padding: 1px 8px; border-radius: 10px; color: #0d1117; white-space: nowrap;
}
.dev-chip.dev-real    { background: #4c9fff; }   /* real phones = blue   */
.dev-chip.dev-sepia   { background: #ff9f40; }   /* SEPIA        = amber  */
.dev-chip.dev-geelark { background: #2bd4d4; }   /* GEELARK      = cyan   */
.dev-chip.dev-emu     { background: #8b98a8; }   /* unknown emulator      */

/* Per-phone breakdown panel (Runs) */
.btn.test-perphone.active { border-color: var(--accent); color: var(--accent); }
.perphone-panel {
  margin: 8px 0 2px; padding: 10px 12px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
}
/* per-run "Compare 0/1" panel — the simple diced-module comparison */
.test-cmp-panel {
  margin: 8px 0 2px; padding: 10px 12px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
}
.test-cmp.active { border-color: var(--green); color: var(--green); }
.cmp-head { font-size: 12px; color: var(--text); margin-bottom: 6px; }
.cmp-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cmp-table th { color: var(--muted); font-weight: 600; font-size: 11px; text-align: left;
  padding: 3px 8px; border-bottom: 1px solid var(--border); }
.cmp-table td { padding: 5px 8px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.cmp-table .cmp-num { text-align: right; font-variant-numeric: tabular-nums; }
.cmp-table th.cmp-num { text-align: right; }
.cmp-mod { font-family: ui-monospace, Consolas, monospace; font-weight: 500; cursor: help; }
.cmp-win { color: var(--green); font-weight: 600; }
.cmp-res { font-size: 11px; font-weight: 600; }
.cmp-res.win { color: var(--green); }
.cmp-res.muted { color: var(--muted); font-weight: 400; }
.perphone-panel .pp-empty { padding: 4px 2px; }
/* per-run "Settings" panel — the full panel settings a run used */
.test-settings-panel {
  margin: 8px 0 2px; padding: 10px 12px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
}
.test-settings.active { border-color: var(--accent); color: var(--accent); }
.rs-worker { font-size: 12px; font-weight: 600; margin: 8px 0 3px; }
.rs-worker:first-of-type { margin-top: 4px; }
.rs-grid {
  display: grid; grid-template-columns: minmax(180px, 260px) 1fr; gap: 1px 12px;
  font-size: 12px; padding: 2px 6px 4px;
}
.rs-k { font-family: ui-monospace, Consolas, monospace; font-size: 11px; color: var(--muted); }
.rs-v { font-variant-numeric: tabular-nums; word-break: break-word; }
.adder-settings.active, .adder-addstats.active { border-color: var(--accent); color: var(--accent); }
/* Add-stats panel: one card per add type (fails, why, where they died, EV/PV) */
.as-card { padding: 7px 9px; margin: 6px 0; background: var(--panel);
  border: 1px solid var(--border); border-radius: 6px; }
.as-card:first-of-type { margin-top: 4px; }
.as-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: 13px; margin-bottom: 3px; }
.as-counts { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.as-ok { color: #6ee98b; }
.as-bad { color: #ff7c75; }
.as-line { display: flex; gap: 8px; align-items: baseline; font-size: 12px;
  padding: 2px 0; flex-wrap: wrap; }
.as-lbl { color: var(--muted); flex: 0 0 74px; }
.as-vals { display: flex; gap: 4px 10px; flex-wrap: wrap; align-items: baseline;
  font-variant-numeric: tabular-nums; }
.as-reason { padding: 1px 7px; border: 1px solid var(--border); border-radius: 10px;
  font-family: ui-monospace, Consolas, monospace; font-size: 11px; }
/* one row per fail reason: <reason> ×N died at ... — stacked so each error's
   add counts stay readable instead of wrapping into the next reason */
.as-reasons { flex-direction: column; align-items: flex-start; gap: 3px; }
.as-rrow { display: flex; gap: 7px; align-items: baseline; flex-wrap: wrap; }
.as-rn { color: var(--text); font-variant-numeric: tabular-nums; }
.as-rat { color: var(--muted); font-variant-numeric: tabular-nums; }
.as-verif { padding: 1px 7px; border: 1px solid var(--border); border-radius: 10px; }
/* "See all accounts": per-account list under an add-type card. */
.as-accts { margin-top: 6px; border-top: 1px solid var(--border); padding-top: 6px;
  font-size: 12px; font-variant-numeric: tabular-nums; }
.as-acct-legend, .as-acct-row {
  display: grid; grid-template-columns: minmax(120px,1.6fr) 56px minmax(120px,2fr);
  gap: 10px; padding: 1px 4px; }
/* The Data Base "See all accounts" drawer adds a 4th 'type' column (add-type);
   scope the extra track to it so the Testing tab's 3-column list stays aligned. */
.aa-accts-drawer .as-acct-legend, .aa-accts-drawer .as-acct-row {
  grid-template-columns: minmax(120px,1.6fr) 56px minmax(90px,1fr) minmax(120px,2fr); }
.as-acct-legend { color: var(--muted); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .4px; }
.as-acct-grp { margin: 5px 0 2px; font-weight: 600; font-size: 11.5px; }
.as-acct-row.ok .as-acct-u { color: #8fe3a3; }
.as-acct-row.bad .as-acct-u { color: #ff9a94; }
.as-acct-n { text-align: right; font-weight: 600; }
.as-acct-r { color: var(--muted); overflow-wrap: anywhere; }
.pp-head { font-size: 12.5px; font-weight: 600; margin-bottom: 4px; }
.pp-legend { font-size: 11px; line-height: 1.5; margin-bottom: 8px; }
/* device breakdown grid — 4 cols (device, success, ok/total, errors); the
   -ss03 variant inserts an SS03 count column (Creator only). */
.pp-colhead, .pp-dev {
  display: grid; grid-template-columns: minmax(120px,160px) 64px 72px 1fr;
  gap: 10px;
}
.pp-colhead-ss03, .pp-dev-ss03 {
  grid-template-columns: minmax(120px,160px) 64px 72px 48px 1fr;
}
.pp-colhead {
  padding: 2px 6px 4px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.pp-colhead .r { text-align: right; }
.pp-worker { margin-bottom: 10px; }
.pp-worker:last-child { margin-bottom: 0; }
.pp-worker-name { font-size: 12px; font-weight: 600; margin: 6px 0 3px; }
.pp-dev {
  align-items: center; font-size: 12px;
  padding: 3px 6px; border-bottom: 1px solid rgba(255,255,255,0.045);
}
.pp-dev:last-child { border-bottom: none; }
.pp-dev-model { font-weight: 600; }
.pp-dev-id { font-family: ui-monospace, Consolas, monospace; font-size: 11px; }
.pp-dev-rate { font-weight: 700; text-align: right; }
.pp-dev-rate.green { color: #6ee98b; }
.pp-dev-rate.amber { color: #ffc548; }
.pp-dev-rate.red   { color: #ff7c75; }
.pp-dev-count { font-size: 11px; text-align: right; }
.pp-dev-ss03n { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.pp-dev-ss03n.red { color: #ff7c75; }
.pp-dev-errs { display: flex; flex-wrap: wrap; gap: 4px; }
/* Per-worker SETTINGS.yaml viewer (worker Stats popup) */
.wstats-yaml-bar { display: flex; gap: 6px; margin: 2px 0 6px; }
.wstats-yaml-pre {
  max-height: 340px; overflow: auto; margin: 0; padding: 8px 10px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px;
  font-family: ui-monospace, Consolas, monospace; font-size: 11px; line-height: 1.45;
  white-space: pre; color: var(--text);
}
/* "S.D." (Specific Devices on/off) chip — worker cards + run rows */
.sd-chip {
  display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: 0.3px;
  padding: 0 4px; border-radius: 4px; border: 1px solid transparent;
  vertical-align: middle; cursor: help; line-height: 15px;
}
.sd-chip.sd-on  { color: #6ee98b; border-color: rgba(110,233,139,0.45); background: rgba(110,233,139,0.10); }
.sd-chip.sd-off { color: #ff7c75; border-color: rgba(255,124,117,0.45); background: rgba(255,124,117,0.10); }
.sd-chip.sd-unk { color: var(--muted); border-color: var(--border); background: transparent; }
/* Fleet-wide per-device statistics section (Adder & Creator tab) */
#fleet-devices-section .fd-controls {
  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center;
  margin: 8px 0 12px; font-size: 12px;
}
#fleet-devices-section .fd-controls label {
  display: flex; gap: 5px; align-items: center; color: var(--muted);
}
#fleet-devices-section .fd-controls select { font-size: 12px; padding: 2px 4px; }
#fleet-devices-section .fd-copyrow {
  display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center;
  margin: 0 0 10px; font-size: 12px; color: var(--muted);
}
.fd-min-input { width: 52px; font-size: 12px; padding: 2px 4px; text-align: right; }
.fd-code { font-family: ui-monospace, Consolas, monospace; font-size: 10.5px; }
#fd-body { max-height: 620px; overflow-y: auto; }
/* "Per device" toggle inside the worker Stats popup */
.wstats-devbtn {
  margin-top: 8px; font-size: 11px; padding: 3px 10px; cursor: pointer;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
}
.wstats-devbtn:hover { border-color: var(--accent); color: var(--accent); }
.wstats-devpanel {
  margin-top: 6px; padding: 8px 10px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
}
.pp-err {
  font-size: 11px; padding: 1px 6px; border-radius: 8px; white-space: nowrap;
  background: rgba(255,124,117,0.12); color: #ff9d97; border: 1px solid rgba(255,124,117,0.28);
}
.pp-err b { color: #ff7c75; }
.adder-run-sub {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
  margin: 4px 0 8px; font-size: 12px;
}
.adder-proxy-chip {
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 6px; padding: 1px 8px; font-size: 11px;
}
.adder-proxy-chip b { color: #79b8ff; }
/* Discrete EV/PV provider chips (which verifier + domain, which SMS + country). */
.adder-evpv-chip {
  border: 1px solid var(--border); border-radius: 6px; padding: 1px 8px;
  font-size: 11px; color: var(--muted); background: var(--panel-2); white-space: nowrap;
}
.adder-evpv-chip b { font-size: 10px; letter-spacing: .4px; margin-right: 3px; }
.adder-evpv-chip.ev { border-color: rgba(121,184,255,0.35); }
.adder-evpv-chip.ev b { color: #79b8ff; }
.adder-evpv-chip.pv { border-color: rgba(163,113,247,0.35); }
.adder-evpv-chip.pv b { color: #a371f7; }
.adder-evpv-dom { color: var(--text); font-weight: 600; }
.adder-created { color: var(--muted); }
.adder-modcell { color: var(--muted); }
.adder-modcell .mod-default { color: var(--green); }

/* ===================================================================
   MOBILE RESPONSIVE (v0.8.19)
   Additive ONLY. Every rule below is gated behind a max-width media
   query, so the desktop / PC layout (viewport > 768px) is completely
   unchanged - no existing rule is touched. Phones get tighter gutters,
   stacked cards, scrollable wide tables, and bigger tap targets.
   =================================================================== */
@media (max-width: 768px) {
  /* --- side gutters: desktop uses 28px; tighten to 12px on phones --- */
  header, .section-head, .filter-bar, .summary,
  .ref-logs-body, .lock-body, .cmp-section {
    padding-left: 12px; padding-right: 12px;
  }
  h2, .pipeline-actions, .pipeline-table-wrap, .ref-banner, .mux-banner {
    margin-left: 12px; margin-right: 12px;
  }

  /* --- header: wrap, smaller title, compact button --- */
  header { flex-wrap: wrap; gap: 8px; padding-top: 12px; padding-bottom: 12px; }
  h1 { font-size: 16px; flex: 1 1 auto; }
  .header-btn { margin-right: 0; font-size: 11px; padding: 5px 9px; }

  /* --- tabs: horizontal scroll instead of cramming/overflow --- */
  .tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .tabs .tab { flex: 0 0 auto; white-space: nowrap; }
  .tabs .tab-spacer, .tabs .tab-hint { display: none; }

  /* --- summary cards stack full-width --- */
  .summary { flex-direction: column; gap: 12px; }
  .summary > .card { width: 100%; min-width: 0; }

  /* --- run-builder / config grids stack vertically (no overflow) --- */
  .settings-row, .settings-row.addtype-row, .file-row, .wstats-kv {
    grid-template-columns: 1fr;
  }
  .addtype-grid { grid-template-columns: repeat(3, 1fr); }
  .cmp-controls .cmp-dim, .cmp-controls input { width: 100%; min-width: 0; }

  /* --- wide data-row tables/logs scroll sideways as a unit --- */
  .wstats-worker-table, .acctlog-timeline, .ref-logs-table, .cmp-result {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .wstats-worker-table .row { min-width: 460px; }
  .acctlog-row { min-width: 440px; }
  .ref-log-row { min-width: 560px; }

  /* --- scroll wrappers: momentum scroll + full width --- */
  .test-table-wrap, .test-combos-table-wrap, .pipeline-table-wrap,
  .concl-sub-body, .concl-lens-body {
    -webkit-overflow-scrolling: touch; overflow-x: auto;
  }
  .test-combos-table-wrap { max-width: 100%; }

  /* --- drawers / modals near-fullscreen --- */
  .drawer { width: 96vw; height: 92vh; max-height: 92vh; }
  .drawer-head, .drawer-toolbar { padding-left: 12px; padding-right: 12px; }

  /* --- larger tap targets for controls --- */
  .btn { min-height: 32px; }
}

@media (max-width: 460px) {
  .addtype-grid { grid-template-columns: repeat(2, 1fr); }
  h1 { font-size: 15px; }
  .ref-group-card .gc-locks { grid-template-columns: 1fr 1fr; }
}

/* --- Creator "Specific Phones" drawer --------------------------------- */
.sp-help { line-height: 1.55; margin-bottom: 14px; }
.sp-help code {
  background: var(--panel-2); padding: 1px 5px; border-radius: 4px;
  color: var(--accent); font-size: 12px;
}
.sp-row { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.sp-label {
  font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .5px;
}
.sp-value-label { display: block; margin: 4px 0 6px; }
.sp-value-label code { background: var(--panel-2); padding: 1px 5px; border-radius: 4px; color: var(--accent); }
.sp-select {
  flex: 1; min-width: 160px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 7px 9px; font-size: 13px;
}
.sp-select:focus { outline: none; border-color: var(--accent); }
.sp-value {
  width: 100%;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 9px 11px; font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  resize: vertical;
}
.sp-value:focus { outline: none; border-color: var(--accent); }
.sp-valhint { font-size: 12px; color: var(--muted); min-height: 16px; margin: 6px 0 4px; }
.sp-valhint.bad { color: var(--red); }
.sp-section-title {
  margin: 16px 0 8px; font-size: 12px;
  text-transform: uppercase; letter-spacing: 1px; color: var(--muted);
}
.sp-state { display: flex; flex-direction: column; gap: 6px; }
.sp-state .bad { color: var(--red); font-size: 12px; }
.sp-state-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.sp-st-name { min-width: 90px; color: var(--text); }
.sp-st-pill {
  font-size: 11px; font-weight: 600; padding: 2px 8px;
  border-radius: 999px; border: 1px solid var(--border); color: var(--muted);
}
.sp-st-pill.on   { color: var(--green); border-color: var(--green); }
.sp-st-pill.off  { color: var(--muted); }
.sp-st-pill.warn { color: var(--amber); border-color: var(--amber); }
.sp-st-pill.bad  { color: var(--red);   border-color: var(--red); }
.sp-st-val {
  color: var(--muted); font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 340px;
}
.sp-foot { display: flex; align-items: center; gap: 10px; }
.sp-foot-spacer { flex: 1; }

/* --- Adder PV / EV editor (in the Modify Adder Settings drawer) -------- */
.pvev-panel { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.pvev-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.pvev-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--accent); }
.pvev-sub { font-size: 12px; color: var(--muted); }
.pvev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 720px) { .pvev-grid { grid-template-columns: 1fr; } }
.pvev-card {
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.pvev-master { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); }
.pvev-field { display: flex; flex-direction: column; gap: 4px; }
.pvev-k { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.pvev-field select {
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font-size: 13px;
}
.pvev-field select:focus { outline: none; border-color: var(--accent); }
.pvev-hint { font-size: 11px; color: var(--muted); }
.pvev-checks { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.pvev-ck { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); }
/* EV method row: token name + "x count" repeat input (retry / weight). */
.pvev-ev-row .pvev-ev-x { color: var(--muted); font-size: 12px; margin-left: 2px; }
.pvev-ev-count {
  width: 3.2em; padding: 1px 4px; font-size: 12px; text-align: center;
  background: var(--panel, #1c1c1c); color: var(--text);
  border: 1px solid var(--border, #333); border-radius: 4px;
}
.pvev-ev-count:focus { outline: none; border-color: var(--accent); }
.pvev-match { margin-top: 2px; }
.pvev-foot { display: flex; align-items: center; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.pvev-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.pvev-spacer { flex: 1; }
.pvev-state { margin-top: 12px; display: flex; flex-direction: column; gap: 5px; }
.pvev-state .bad { color: var(--red); font-size: 12px; }
.pvev-state-head { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.pvev-state-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.pvev-st-name { min-width: 88px; color: var(--text); }
.pvev-st-pill { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); }
.pvev-st-pill.on { color: var(--green); border-color: var(--green); }
.pvev-st-pill.off { color: var(--muted); }
.pvev-st-val { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Adder results: date filter + paging + per-test date -------------- */
.adder-filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.adder-filter .chip { padding: 4px 12px; font-size: 12px; cursor: pointer; }
.adder-custom { display: inline-flex; align-items: center; gap: 6px; }
.adder-date-input {
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px; padding: 4px 7px; font-size: 12px;
}
.adder-date-input:focus { outline: none; border-color: var(--accent); }
#adder-results-count { margin-left: auto; }
.adder-run-date {
  display: inline-block; font-size: 12px; font-weight: 600;
  color: var(--accent); background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 1px 8px; margin-right: 4px; white-space: nowrap;
}
.adder-loadmore-wrap { display: flex; justify-content: center; margin: 12px 0 4px; }
#adder-load-more { padding: 7px 18px; }

/* --- Per-worker lock-rate survival curve (stats drawer) --------------- */
.wstats-lockgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.wlock-cell {
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 4px; text-align: center;
}
.wlock-h { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.wlock-v { font-size: 18px; font-weight: 700; margin: 3px 0; border-radius: 6px; padding: 2px 0; color: var(--text); }
.wlock-v.lock-good { background: rgba(46,160,67,0.22); }
.wlock-v.lock-ok   { background: rgba(210,180,30,0.22); }
.wlock-v.lock-warn { background: rgba(219,128,30,0.28); }
.wlock-v.lock-bad  { background: rgba(218,54,51,0.30); }
.wlock-n { font-size: 10px; color: var(--muted); }
.wlock-v.muted { font-size: 13px; font-weight: 400; color: var(--muted); background: none; }
@media (max-width: 520px) { .wstats-lockgrid { grid-template-columns: repeat(3, 1fr); } }

/* Average adds-at-lock block: label + current-run + last-run columns. */
.wstats-avglock { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 6px 8px; align-items: center; }
.wavg-h { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; text-align: center; }
.wavg-l { font-size: 12px; color: var(--muted); }
.wavg-v { font-size: 16px; font-weight: 700; color: var(--text); text-align: center; border-radius: 6px; padding: 3px 2px; }
.wavg-v.muted { font-size: 12px; font-weight: 400; color: var(--muted); }
.wavg-v.lock-good { background: rgba(46,160,67,0.22); }
.wavg-v.lock-ok   { background: rgba(210,180,30,0.22); }
.wavg-v.lock-warn { background: rgba(219,128,30,0.28); }
.wavg-v.lock-bad  { background: rgba(218,54,51,0.30); }
.wavg-n { font-size: 10px; color: var(--muted); font-weight: 400; }

/* --- Lock analysis: survival curve + age-fair notes ------------------- */
.lock-subnote {
  margin: 0 0 10px; font-size: 12px; color: var(--muted); line-height: 1.5; max-width: 920px;
}
.lock-subnote.agefair { border-left: 3px solid var(--accent); padding-left: 10px; }
.survival-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.survival-row {
  display: grid; grid-template-columns: 64px 1fr 56px 120px;
  gap: 10px; align-items: center; font-size: 12px;
}
.survival-row .sv-age { color: var(--muted); font-family: ui-monospace, Consolas, monospace; }
.survival-row .sv-bar-wrap { background: var(--panel-2); border-radius: 4px; height: 14px; overflow: hidden; }
.survival-row .sv-bar { height: 100%; border-radius: 4px; min-width: 2px; }
.survival-row .sv-bar.pct-green { background: var(--green); }
.survival-row .sv-bar.pct-amber { background: var(--amber); }
.survival-row .sv-bar.pct-red   { background: var(--red); }
/* Full-width colour tint on the track so the colour is visible even when the
   filled bar is tiny (e.g. a low alive %). Used by the "% alive" view. */
.survival-row .sv-bar-wrap.tint-green { background: rgba(63, 185, 80, 0.22); }
.survival-row .sv-bar-wrap.tint-amber { background: rgba(210, 153, 34, 0.22); }
.survival-row .sv-bar-wrap.tint-red   { background: rgba(248, 81, 73, 0.22); }
.survival-row .sv-pct { text-align: right; font-weight: 600; }
.survival-row .sv-pct.green { color: var(--green); }
.survival-row .sv-pct.amber { color: var(--amber); }
.survival-row .sv-pct.red   { color: var(--red); }
.survival-row .sv-n { text-align: right; color: var(--muted); font-size: 11px; font-family: ui-monospace, Consolas, monospace; }
/* Split adds-survival view (EV vs no-EV / PV vs no-PV): two compare columns. */
.split-row { display: grid; grid-template-columns: 72px 1fr 1fr; gap: 14px; align-items: center; font-size: 12px; padding: 1px 0; }
.split-row .sv-age { color: var(--muted); font-family: ui-monospace, Consolas, monospace; }
.split-head { font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; }
.split-col { display: flex; align-items: center; gap: 8px; min-width: 0; }
.split-col .sv-bar-wrap { flex: 1; background: var(--panel-2); border-radius: 4px; height: 14px; overflow: hidden; }
.split-col .sv-bar { height: 100%; border-radius: 4px; min-width: 2px; }
.split-col .sv-bar.pct-green { background: var(--green); }
.split-col .sv-bar.pct-amber { background: var(--amber); }
.split-col .sv-bar.pct-red   { background: var(--red); }
.split-col .sv-bar-wrap.tint-green { background: rgba(63, 185, 80, 0.22); }
.split-col .sv-bar-wrap.tint-amber { background: rgba(210, 153, 34, 0.22); }
.split-col .sv-bar-wrap.tint-red   { background: rgba(248, 81, 73, 0.22); }
.split-val { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.split-val.green { color: var(--green); }
.split-val.amber { color: var(--amber); }
.split-val.red   { color: var(--red); }
.split-val.muted { color: var(--muted); font-weight: 400; }
/* --- Phone models section --- */
.pm-body { margin-bottom: 8px; }
.pm-subfilters { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 12px; }
.pm-subrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pm-sublabel { color: var(--muted); font-size: 11px; min-width: 64px; text-transform: uppercase; letter-spacing: 0.03em; }
.pm-chip { background: var(--panel-2); color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; font-size: 11px; cursor: pointer; }
.pm-chip:hover { color: var(--text); border-color: var(--accent); }
.pm-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.pm-chip.pm-all.active { background: var(--panel-2); color: var(--text); border-color: var(--accent); }
.pm-group { margin: 0 0 16px; }
.pm-group-h { font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.pm-band { margin: 0 0 8px; padding-left: 10px; border-left: 2px solid var(--border); }
.pm-band-h { font-size: 12px; font-weight: 600; margin-bottom: 3px; }
.pm-band-h.good { color: var(--green); }
.pm-band-h.bad  { color: var(--red); }
.pm-model-row { display: grid; grid-template-columns: 200px 110px 1fr; gap: 10px; align-items: baseline; font-size: 12px; padding: 1px 0; }
.pm-model { font-family: ui-monospace, Consolas, monospace; }
.pm-pct { font-weight: 600; text-align: right; }
.pm-pct.good { color: var(--green); }
.pm-pct.bad  { color: var(--red); }
.pm-none { padding-left: 2px; }
.pm-toggle { cursor: pointer; user-select: none; }
.pm-toggle:hover { color: var(--accent); }
.pm-caret { display: inline-block; width: 12px; color: var(--muted); }
.pm-groupsel { display: flex; gap: 8px; margin: 6px 0 12px; }
.pm-gbtn { padding: 8px 24px; font-size: 14px; font-weight: 600; border-radius: 8px; background: var(--panel-2); color: var(--muted); border: 1px solid var(--border); cursor: pointer; }
.pm-gbtn:hover { color: var(--text); border-color: var(--accent); }
.pm-gbtn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.pm-thresholds { display: flex; gap: 18px; margin: 0 0 10px; flex-wrap: wrap; }
.pm-thr-l { font-size: 12px; color: var(--text); display: inline-flex; align-items: center; gap: 4px; }
.pm-thr { width: 54px; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px; font-size: 12px; }
.lock-custom { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; flex-wrap: wrap; }
.lock-custom[hidden] { display: none; }   /* the [hidden] attr alone loses to the rule above */

/* --- Compare workers drawer ------------------------------------------- */
.cmp-toolbar {
  display: flex; align-items: center; gap: 16px;
  padding: 8px 16px; border-bottom: 1px solid var(--border);
}
.cmp-onlydiff { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); }
.cmp-diffcount { font-size: 13px; font-weight: 700; color: var(--red); }
.cmp-errors {
  background: rgba(218,54,51,0.12); border: 1px solid rgba(218,54,51,0.3);
  border-radius: 8px; padding: 8px 12px; margin: 0 0 12px; font-size: 12px; color: var(--text);
}
.cmp-section { margin-bottom: 18px; }
.cmp-sec-head {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
  color: var(--muted); margin: 0 0 6px;
}
.cmp-sec-diffs { font-size: 11px; color: var(--red); font-weight: 600; margin-left: 6px; }
.cmp-sec-ok    { font-size: 11px; color: var(--green); font-weight: 600; margin-left: 6px; }
.cmp-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; }
.cmp-table { border-collapse: collapse; width: 100%; font-size: 12px; }
.cmp-table th, .cmp-table td {
  padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--border);
  white-space: nowrap; max-width: 340px; overflow: hidden; text-overflow: ellipsis;
}
.cmp-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--panel-2); color: var(--muted); font-weight: 600;
}
.cmp-table th.cmp-key, .cmp-table td.cmp-key {
  position: sticky; left: 0; z-index: 1;
  color: var(--text); background: var(--panel);
  font-family: ui-monospace, Consolas, monospace;
}
.cmp-table thead th.cmp-key { z-index: 3; background: var(--panel-2); }
.cmp-table tr.cmp-diff td { background: rgba(218,54,51,0.10); }
.cmp-table tr.cmp-diff td.cmp-key { color: #ff7c75; background: rgba(218,54,51,0.16); }
.cmp-table tr.cmp-same td { color: var(--muted); }
.cmp-table td.cmp-missing { color: var(--muted); font-style: italic; }
.cmp-sub-note { font-size: 11px; color: var(--muted); margin: 0 0 6px; line-height: 1.4; }
.cmp-table td.perf-best  { color: var(--green); font-weight: 700; background: rgba(46,160,67,0.10); }
.cmp-table td.perf-worst { color: #ff7c75;      font-weight: 700; background: rgba(218,54,51,0.10); }
.cmp-sub-note .perf-best  { color: var(--green); font-weight: 700; }
.cmp-sub-note .perf-worst { color: #ff7c75;      font-weight: 700; }
.cmp-fails-cell { vertical-align: top; }
.cmp-fail-row { display: flex; justify-content: space-between; gap: 10px; padding: 1px 0; }
.cmp-fail-reason {
  color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px;
}
.cmp-fail-count { color: #ff7c75; font-weight: 600; font-family: ui-monospace, Consolas, monospace; }

/* Adder & Creator conclusions (per-error -> boxes, error debugging) */
.acc-controls { display: flex; align-items: center; gap: 10px; margin: 8px 0 12px; flex-wrap: wrap; }
.acc-block { margin: 0 0 18px; }
.acc-h { font-size: 13px; font-weight: 700; color: var(--text); margin: 0 0 8px;
  border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.acc-err { background: rgba(255,255,255,0.03); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.acc-err-head { display: flex; justify-content: space-between; align-items: baseline; }
.acc-err-label { font-weight: 600; }
.acc-err-total { font-family: ui-monospace, Consolas, monospace; color: #ff7c75; font-weight: 700; }
.acc-verdict { font-size: 11px; margin: 2px 0 6px; }
.acc-verdict.acc-v-box { color: var(--amber); }
.acc-verdict.acc-v-setting { color: #ff7c75; font-weight: 700; }
.acc-err-boxes { display: flex; flex-direction: column; gap: 2px; }
.acc-box-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.acc-box-name { color: var(--text); }
.acc-box-meta { color: var(--muted); font-size: 11px; }
.acc-box-ct { font-family: ui-monospace, Consolas, monospace; white-space: nowrap; }
.acc-table-wrap { overflow-x: auto; }
.acc-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.acc-table th, .acc-table td { padding: 4px 8px; text-align: center;
  border-bottom: 1px solid var(--border); white-space: nowrap; }
.acc-table th:first-child, .acc-table td:first-child { text-align: left; }
.acc-table th { color: var(--muted); font-weight: 600; }
.acc-table td.acc-hot { color: #ff7c75; font-weight: 700; background: rgba(218,54,51,0.10); }
.acc-ct-title { font-size: 12px; color: var(--muted); margin: 10px 0 4px; font-weight: 600; }
.acc-caveats { font-size: 11px; color: var(--muted); background: rgba(255,255,255,0.03);
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin-top: 6px; }
.acc-caveats ul { margin: 4px 0 0; padding-left: 18px; }
.acc-caveats li { margin: 2px 0; }
/* Error-driver deep analysis */
.acc-drv-card { background: rgba(255,255,255,0.03); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; }
.acc-drv-head { font-weight: 600; margin-bottom: 6px; }
.acc-drv-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .acc-drv-cols { grid-template-columns: 1fr; } }
.acc-drv-coltitle { font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; margin-bottom: 4px; }
.acc-drv-coltitle.worse { color: #ff7c75; }
.acc-drv-coltitle.helps { color: var(--green); }
.acc-drv-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12px;
  padding: 2px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.acc-drv-feat { color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.acc-drv-stat { white-space: nowrap; color: var(--muted); }
.acc-lift { font-family: ui-monospace, Consolas, monospace; font-weight: 700; color: var(--text); }
.acc-confound { font-size: 10px; color: var(--amber); border: 1px solid rgba(210,153,34,0.4);
  border-radius: 4px; padding: 0 4px; }

/* ===================== Data Base tab ===================== */
.db-intro { margin: 18px 28px 0; }
#db-queries, #db-adding { margin: 0 28px 10px; }
.db-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 16px; margin: 0 0 14px;
}
.db-card-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.db-card-title { font-weight: 600; font-size: 13px; color: var(--text); }
.db-card-sub { font-size: 12px; }
.db-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.db-controls-col { flex-direction: column; align-items: stretch; }
.db-more { margin-top: 10px; }
.db-more > summary { font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer;
  padding: 4px 0; list-style-position: inside; }
.db-more[open] > summary { margin-bottom: 4px; }
.db-ctrl { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text); }
.db-ctrl-label { font-weight: 600; color: var(--muted); text-transform: uppercase;
  font-size: 11px; letter-spacing: .04em; }
.db-check { cursor: pointer; }
.db-radio { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
/* Reusable full adder-settings form (Auto-Adder manual run + group editor). */
.aaf-form { display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--border); border-radius: 8px; padding: 10px; background: var(--panel-2); }
.aaf-opts { display: flex; flex-direction: column; gap: 8px; }
.aaf-sub { display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  font-size: 12px; color: var(--text); }
.aaf-t { font-weight: 600; min-width: 96px; color: var(--muted); }
.aaf-sub .chk { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.aaf-sub label { display: inline-flex; align-items: center; gap: 4px; }
.aaf-sub input[type=number] { width: 56px; background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px; padding: 3px 5px; }
.aaf-ev-row { gap: 3px; }
.aaf-sub input[type=number].aaf-ev-count { width: 44px; }
.aaf-sub select { background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px; padding: 3px 6px; font-size: 12px; }
.aaf-preview { font-weight: 600; margin-top: 2px; }
.db-num { width: 64px; background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px; padding: 4px 6px; font-size: 12px; }
.db-num-wide { width: 90px; }
.db-select { background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 6px; font-size: 12px; }
.db-textarea { width: 100%; min-height: 110px; resize: vertical; box-sizing: border-box;
  background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 8px; font-family: ui-monospace, Consolas, monospace;
  font-size: 12px; line-height: 1.5; }

.db-result { margin-top: 12px; }
.db-result-bar { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.db-count { font-weight: 600; color: var(--text); font-size: 12px; }
.db-result-actions { display: inline-flex; gap: 6px; }

/* Auto-Adder run builder + live panel */
.db-sel { background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 6px; font-size: 12px; min-width: 130px; }
.aa-run { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
  margin-bottom: 8px; background: var(--panel-2); }
.aa-run-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.aa-run-name { font-weight: 600; font-size: 13px; color: var(--text); }
/* Multi-config manual run: one settings block per adder instance. */
.db-multi { border-top: 1px solid var(--border); padding-top: 8px; }
.db-multi-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.db-slot {
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
  margin: 8px 0; background: var(--panel-2, rgba(255,255,255,0.03));
}
.db-slot-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
  font-size: 12.5px;
}
.db-slot-head .db-slot-del { margin-left: auto; }
.db-slot-name { color: var(--accent); }

/* Organised per-instance breakdown drawer. */
.aa-bd-block {
  border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; margin-bottom: 12px;
}
.aa-bd-block.aa-bd-totals { border-color: var(--accent); background: rgba(121,184,255,0.06); }
.aa-bd-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.aa-bd-cfg { font-size: 11px; color: var(--muted); }
.aa-bd-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 4px 12px; margin: 6px 0; font-size: 12px; font-variant-numeric: tabular-nums;
}
.aa-bd-k { color: var(--muted); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .4px; display: block; }
.aa-bd-sub {
  margin: 10px 0 3px; font-size: 11px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .4px;
}

/* Per-worker mass lock-wave triangle: red while unread, grey once read. */
.lock-wave-tri {
  cursor: pointer; font-size: 12px; line-height: 1; padding: 0 2px;
  color: var(--red, #f85149); filter: drop-shadow(0 0 3px rgba(248,81,73,0.55));
  animation: lockWavePulse 1.6s ease-in-out infinite;
}
.lock-wave-tri:hover { transform: scale(1.25); }
.lock-wave-tri.acked {
  color: var(--muted); filter: none; animation: none; opacity: 0.65;
}
@keyframes lockWavePulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .lock-wave-tri { animation: none; } }

/* Mass lock-wave flag on a run row + the drawer callout. */
.aa-wave {
  padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 600;
  color: #ffb4ad; background: rgba(248,81,73,0.16);
  border: 1px solid rgba(248,81,73,0.45); white-space: nowrap; cursor: help;
}
.aa-wave-box {
  margin: 4px 0 10px; padding: 8px 10px; font-size: 12px;
  border: 1px solid rgba(248,81,73,0.45); border-radius: 6px;
  background: rgba(248,81,73,0.08); color: var(--text);
}
.aa-wave-box ul { margin: 4px 0 0; padding-left: 18px; }
.aa-wave-box li { margin: 2px 0; }
.aa-rep-foot { text-align: center; margin: 10px 0 4px; }
/* Detailed per-device stats drawer */
.aa-details-overlay {
  position: fixed; inset: 0; z-index: 120; display: flex;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55); padding: 20px;
}
.aa-details-overlay[hidden] { display: none; }
.aa-details-box {
  background: var(--card, var(--bg)); border: 1px solid var(--border);
  border-radius: 8px; width: min(920px, 96vw); max-height: 88vh;
  display: flex; flex-direction: column; box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.aa-details-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
}
.aa-details-title { font-weight: 600; font-size: 14px; }
.aa-details-head .aa-details-close { margin-left: auto; }
.aa-details-body { padding: 12px 14px; overflow: auto; }
.aa-run-actions { margin-left: auto; display: inline-flex; gap: 6px; }
.aa-run-body { margin-top: 4px; }
.aa-state { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 10px; background: var(--panel);
  border: 1px solid var(--border); color: var(--muted); }
.aa-state.aa-adding { background: rgba(46,160,67,.22); color: #4ade80; border-color: transparent; }
.aa-state.aa-preparing, .aa-state.aa-queued { background: rgba(210,180,30,.20); color: #e0c341; border-color: transparent; }
.aa-state.aa-monitoring { background: rgba(56,139,253,.20); color: #6cb0ff; border-color: transparent; }
.aa-state.aa-done { background: var(--panel); color: var(--muted); }
.aa-state.aa-error, .aa-state.aa-aborted { background: rgba(218,54,51,.22); color: #ff7b72; border-color: transparent; }
.aa-ctrl td { color: var(--muted); font-style: italic; }
/* ---- live panel: rich active card ---- */
.aa-box { font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.aa-box-free { color: #4ade80; }
.aa-box-busy { color: #e0c341; }
.aa-sec { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); margin: 12px 0 6px; }
.aa-run.aa-active { border-color: rgba(46,160,67,.5); background: var(--panel); }
.aa-run.aa-compact { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 10px; }
.aa-run.aa-compact .aa-run-name { font-size: 12px; }
.aa-ok { color: #4ade80; }
.aa-bad { color: #ff7b72; }
.aa-prog { margin: 8px 0; }
.aa-prog-bar { height: 8px; border-radius: 5px; background: var(--panel-2);
  border: 1px solid var(--border); overflow: hidden; display: flex; }
.aa-prog-succ { background: #2ea043; height: 100%; }
.aa-prog-fail { background: #da3633; height: 100%; }
.aa-prog-legend { margin-top: 4px; }
.aa-tblwrap { overflow-x: auto; margin-top: 6px; }
.aa-acctwrap { max-height: 260px; overflow-y: auto; }
.aa-insttbl, .aa-acctbl { border-collapse: collapse; font-size: 12px; width: 100%;
  font-variant-numeric: tabular-nums; }
.aa-insttbl th, .aa-insttbl td, .aa-acctbl td {
  padding: 3px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.aa-insttbl th { color: var(--muted); font-weight: 600; font-size: 11px; text-align: left; }
.aa-insttbl td.num, .aa-insttbl th.num, .aa-acctbl td.num { text-align: right; }
.aa-insttbl .aa-ist-errrow td { border-bottom: none; }
.aa-acct-user { font-family: ui-monospace, Consolas, monospace; }
.aa-ist { font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 1px 6px;
  border-radius: 8px; background: var(--panel-2); color: var(--muted); border: 1px solid var(--border); }
.aa-ist.aa-ist-running { background: rgba(46,160,67,.2); color: #4ade80; border-color: transparent; }
.aa-ist.aa-ist-done { color: var(--muted); }
.aa-ist.aa-ist-error { background: rgba(218,54,51,.22); color: #ff7b72; border-color: transparent; }
.aa-acctdet { margin-top: 6px; }
.aa-acctdet > summary { font-size: 12px; color: var(--muted); cursor: pointer; padding: 2px 0; }
.aa-waitwrap { margin-top: 4px; max-height: 120px; overflow-y: auto; word-break: break-all; }
/* analyser */
.aa-anwrap { display: flex; flex-wrap: wrap; gap: 16px; }
.aa-anblock { min-width: 220px; }
.aa-antitle { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.aa-antable, .aa-reptable { border-collapse: collapse; font-size: 12px; }
.aa-antable th, .aa-antable td, .aa-reptable th, .aa-reptable td {
  padding: 3px 8px; text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; }
.aa-antable th:first-child, .aa-antable td:first-child,
.aa-reptable th:first-child, .aa-reptable td:first-child { text-align: left; }
.aa-antable th, .aa-reptable th { color: var(--muted); font-weight: 600; font-size: 11px; }
.aa-antable tr.aa-best td { color: #4ade80; font-weight: 600; }
.aa-repblock { margin-bottom: 16px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--panel); }
.aa-repblock .aa-run-head { background: var(--panel-2); border-bottom: 1px solid var(--border); }
/* Reports run-head: buttons-first, then name + bubbles (a touch bigger). */
.aa-run-btns { display: inline-flex; gap: 4px; flex: 0 0 auto; }
.aa-repblock .aa-run-head { padding: 8px 10px; font-size: 14px; }
.aa-repblock .aa-run-name { font-size: 15px; }
.aa-startchip { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px;
  background: rgba(91,141,239,.18); color: #9ec1ff; text-transform: uppercase; letter-spacing: .03em; }
.aa-srcchip { font-size: 11px; padding: 2px 7px; border-radius: 10px; background: var(--panel);
  color: var(--muted); border: 1px solid var(--border); }
.aa-agochip { font-size: 12.5px; font-weight: 600; padding: 2px 9px; border-radius: 10px;
  background: var(--panel); color: var(--text); border: 1px solid var(--border); }
.aa-inst-tools { white-space: nowrap; }
.aa-inst-tools .btn { margin-right: 3px; padding: 1px 6px; font-size: 11px; }
/* Per-add-type Logs modal (reuses .aa-details-overlay shell). */
.aa-logs-head { margin-bottom: 8px; line-height: 1.5; }
.aa-logs-list { display: flex; flex-direction: column; gap: 2px; }
.aa-logs-acct { display: grid; grid-template-columns: minmax(0,1.6fr) auto auto minmax(0,2fr) 16px;
  gap: 8px; align-items: center; padding: 5px 8px; border-radius: 5px; cursor: pointer; background: var(--panel); }
.aa-logs-acct:hover { background: var(--panel-2); }
.aa-logs-acct.ok .aa-logs-u { color: #46a758; }
.aa-logs-acct.bad .aa-logs-u { color: #ff7b72; }
.aa-logs-u { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aa-logs-lock { font-size: 10px; font-weight: 700; color: #ff7b72; text-transform: uppercase; }
.aa-logs-n { color: var(--muted); font-size: 12px; white-space: nowrap; }
.aa-logs-r { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aa-logs-caret { color: var(--muted); text-align: center; transition: transform .12s; }
.aa-logs-acct.open .aa-logs-caret { transform: rotate(90deg); }
.aa-logs-raw { padding: 4px 6px 8px; }
.aa-logs-pre { margin: 0; padding: 8px; background: #0d1117; border: 1px solid var(--border);
  border-radius: 5px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px;
  line-height: 1.45; white-space: pre-wrap; word-break: break-word; max-height: 300px;
  overflow: auto; color: #c9d1d9; }
.aa-repblock > div[style*="overflow-x"], .aa-repblock .aa-accts-drawer, .aa-repblock .aa-seg-wrap { padding: 6px 10px; }
.aa-reptable { width: 100%; margin-top: 4px; font-variant-numeric: tabular-nums; }
.db-sql { margin: 0 0 8px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 6px; padding: 8px; overflow: auto; }
.db-sql code { font-family: ui-monospace, Consolas, monospace; font-size: 11px;
  color: var(--muted); white-space: pre-wrap; word-break: break-all; }
.db-err { color: var(--red); font-size: 12px; padding: 8px;
  border: 1px solid rgba(248,81,73,0.4); border-radius: 6px; background: rgba(248,81,73,0.07); }

.db-table-wrap { max-height: 460px; overflow: auto; border: 1px solid var(--border);
  border-radius: 8px; }
.db-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.db-table thead th { position: sticky; top: 0; z-index: 1; background: var(--panel-2);
  text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--border);
  white-space: nowrap; }
.db-th { cursor: pointer; user-select: none; color: var(--muted); font-weight: 600; }
.db-th:hover { color: var(--text); }
.db-table tbody td { padding: 6px 10px; border-bottom: 1px solid rgba(255,255,255,0.04);
  color: var(--text); white-space: nowrap; }
.db-table tbody tr:hover { background: rgba(255,255,255,0.03); }
.db-badge { font-size: 10px; font-weight: 700; border-radius: 4px; padding: 1px 6px;
  letter-spacing: .03em; }
.db-badge.ok { color: var(--green); border: 1px solid rgba(63,185,80,0.4); }
.db-badge.warn { color: var(--amber); border: 1px solid rgba(210,153,34,0.4); }
.db-badge.bad { color: var(--red); border: 1px solid rgba(248,81,73,0.4); }
.db-badge.info { color: var(--accent); border: 1px solid rgba(88,166,255,0.4); }
.db-badge.muted { color: var(--muted); border: 1px solid rgba(139,148,158,0.4); }
.db-dash { color: var(--muted); }
.db-hint { font-size: 11px; font-style: italic; }

/* Alive-vs-dead cohort summary strip (above the result table). */
.db-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.db-sum-item { font-size: 12px; padding: 4px 10px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--panel-2); }
.db-sum-item b { font-size: 13px; }
.db-sum-item.alive { border-color: rgba(63,185,80,0.4); }
.db-sum-item.alive b { color: var(--green); }
.db-sum-item.dead { border-color: rgba(248,81,73,0.4); }
.db-sum-item.dead b { color: var(--red); }
.db-sum-item.total b { color: var(--text); }

/* ==================================================================== *
 * Sub-tabs + Chatting report (A/A noise band)            APPENDED BLOCK
 * --------------------------------------------------------------------
 * .subtab* / .subpane : a second, quieter tier of tabs that lives under
 *   the main .tabs bar (used inside the Chatting and Flirtbots tabs).
 * .cr-*               : the chatting report - A/A noise-band headline,
 *   the MDE sensitivity table and the per-model results table (built to
 *   feel like .aa-reptable).
 * Everything here is scoped to these two prefixes; no rule above this
 * banner is modified.
 * ==================================================================== */

/* --- Sub-tabs -------------------------------------------------------- */
.subtabs {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 10px 0 0; margin: 0 0 12px;
  border-bottom: 1px solid var(--border);
}
.subtab {
  background: transparent; color: var(--muted);
  border: 1px solid transparent; border-radius: 6px 6px 0 0;
  padding: 5px 13px; font-size: 12.5px; font-weight: 600; line-height: 1.4;
  cursor: pointer; margin-bottom: -1px;
}
.subtab:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.subtab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Current sub-tab: reads like .tab.active (panel ground + accent text) but
   one notch quieter, plus a 2px accent cap so it is not colour-only. */
.subtab.active {
  color: var(--accent);
  background: var(--panel-2);
  border-color: var(--border);
  border-bottom-color: var(--panel-2);
  box-shadow: inset 0 2px 0 var(--accent);
}
.subpane { padding-top: 4px; }
.subpane[hidden] { display: none; }

/* --- Chatting report: shell ------------------------------------------ */
.cr-wrap { padding: 2px 0 22px; }
.cr-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 0 0 10px;
}
.cr-controls {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12px; color: var(--muted); margin: 0 0 12px;
}
.cr-head .cr-controls { margin: 0 0 0 auto; }

/* --- A/A noise band: the conclusion, not a stat tile ------------------ */
/* Full-bleed callout with an accent rule down the left edge: it is meant
   to be read as a sentence ("differences under X are noise"), so the
   number is emphasised inline rather than blown up into a KPI. */
.cr-band {
  margin: 0 0 16px; padding: 13px 18px 13px 20px;
  background-color: var(--panel);
  background-image: linear-gradient(90deg, rgba(88,166,255,0.10), rgba(88,166,255,0));
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 0 10px 10px 0;
}
.cr-band-title {
  margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.5;
  color: var(--text);
}
.cr-band-num {
  display: inline-block; margin: 0 3px;
  font-size: 22px; font-weight: 700; line-height: 1.2;
  letter-spacing: -0.2px; color: #79b8ff;
  font-variant-numeric: tabular-nums;
}
.cr-band .cr-band-num:first-child { margin-left: 0; }

/* --- MDE sensitivity ("1v1 -> 30%") ---------------------------------- */
.cr-mde {
  margin: 0 0 16px; padding: 8px 12px; max-width: 460px;
  background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 8px;
  font-size: 12px; font-variant-numeric: tabular-nums;
}
.cr-mde-row {
  display: flex; align-items: baseline; gap: 10px; padding: 4px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.07);
}
.cr-mde-row:last-child { border-bottom: none; }
.cr-mde-row > :first-child { color: var(--muted); }
.cr-mde-row > :last-child:not(:only-child) {
  margin-left: auto; color: var(--text); font-weight: 600;
}

/* --- Per-model table (same density as .aa-reptable) ------------------ */
/* display:block turns the table itself into its own horizontal scroll
   container, so a wide report never widens the panel. Cells still line
   up: the rows are wrapped in an anonymous table box. */
.cr-table {
  display: block; max-width: 100%; overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  margin-top: 4px; font-size: 12px; font-variant-numeric: tabular-nums;
}
.cr-table th, .cr-table td {
  padding: 4px 10px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.cr-table th:first-child, .cr-table td:first-child { text-align: left; }
.cr-table th {
  color: var(--muted); font-weight: 600; font-size: 11px; letter-spacing: .02em;
}
.cr-table tbody tr:hover { background: rgba(255,255,255,0.03); }

.cr-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cr-table td.cr-num, .cr-table th.cr-num { text-align: right; }

/* The conv/replied column carries the argument - give it its own lane. */
.cr-headline {
  font-size: 13.5px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; letter-spacing: -0.1px;
}
.cr-table .cr-headline {
  background: rgba(255,255,255,0.025);
  border-left: 1px solid rgba(255,255,255,0.07);
}
.cr-table th.cr-headline { font-size: 11px; color: var(--text); font-weight: 700; }

/* --- Verdict vs the noise band --------------------------------------- */
/* Colour is never the only signal: every verdict also carries a left rule,
   a glyph on the headline cell and its own weight. */
.cr-above { background: rgba(63,185,80,0.06); }
.cr-above > td:first-child { box-shadow: inset 3px 0 0 var(--green); font-weight: 600; }
.cr-above .cr-headline { color: #6ee98b; font-weight: 700; }
.cr-above .cr-headline::after { content: " \25B2"; font-size: 9px; }

.cr-below { background: rgba(248,81,73,0.06); }
.cr-below > td:first-child { box-shadow: inset 3px 0 0 var(--red); font-weight: 600; }
.cr-below .cr-headline { color: #ff7c75; font-weight: 700; }
.cr-below .cr-headline::after { content: " \25BC"; font-size: 9px; }

/* In-band means "this is noise" - so it must stay flat. No tint, no accent
   colour, no bold: just a grey rule and a dash so the verdict is still
   explicit for anyone who cannot read the colours above. */
.cr-inband { background: transparent; }
.cr-inband > td { color: var(--muted); }
.cr-inband > td:first-child { box-shadow: inset 3px 0 0 var(--border); color: var(--text); }
.cr-inband .cr-headline { color: var(--text); font-weight: 600; }
.cr-inband .cr-headline::after { content: " \2013"; color: var(--muted); font-size: 10px; }

/* --- Version grouping ------------------------------------------------- */
.cr-verrow > td {
  padding: 12px 10px 5px; text-align: left;
  background: var(--panel-2);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  color: var(--muted); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .5px;
}
.cr-verrow:first-child > td { padding-top: 6px; border-top: none; }
.cr-vertag {
  display: inline-block; margin-right: 8px; padding: 1px 8px;
  border-radius: 999px; text-transform: none; letter-spacing: .04em;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 10px; font-weight: 700;
  color: #79b8ff; background: rgba(88,166,255,0.12);
  border: 1px solid rgba(88,166,255,0.35);
}

/* --- The NULL-ModelName row: kept visible, but plainly set apart ------ */
.cr-unattributed > td {
  color: var(--muted); font-style: italic;
  background: rgba(255,255,255,0.02);
  border-top: 1px dashed var(--border);
}
.cr-unattributed > td:first-child { box-shadow: inset 3px 0 0 var(--muted); }
.cr-unattributed .cr-headline { color: var(--muted); font-weight: 600; }
.cr-unattributed .cr-headline::after { content: ""; }

/* --- Non-fatal warning / loading / error ------------------------------ */
.cr-warn {
  margin: 0 0 12px; padding: 9px 12px; border-radius: 8px;
  font-size: 12.5px; line-height: 1.45;
  color: #ffc548; background: rgba(255,197,72,0.10);
  border: 1px solid rgba(255,197,72,0.35);
}
.cr-warn b { color: #ffd97a; }
.cr-loading {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 2px; font-size: 12px; color: var(--muted);
}
.cr-loading::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); animation: crPulse 1.2s ease-in-out infinite;
}
@keyframes crPulse {
  0%, 100% { opacity: 0.25; transform: scale(0.8); }
  50%      { opacity: 1;    transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .cr-loading::before { animation: none; opacity: 0.7; }
}
.cr-err {
  margin: 8px 0; padding: 9px 12px; border-radius: 8px;
  font-size: 12.5px; line-height: 1.45;
  color: var(--red); background: rgba(248,81,73,0.07);
  border: 1px solid rgba(248,81,73,0.4);
}

/* ===================================================================== */
/* --- Chatting report: real subs vs bot-reported (APPEND-ONLY BLOCK) --- */
/* Everything above this comment is untouched.                           */
/*                                                                        */
/* These three columns are measured over a DIFFERENT, LAGGED window than  */
/* every other column in the table (Infloww trails reality, so the real   */
/* window ends ~1-2 days before the table's does). Reading them as the    */
/* same window is the exact mistake this styling exists to prevent, so    */
/* the group is fenced: a rule down its left edge and a faint warm tint   */
/* mark where the window changes. The .cr-headline column that follows    */
/* already carries a left border, which closes the fence on the right.    */
/* ===================================================================== */

/* --- the caveat + source block, sits directly above the table -------- */
.cr-real {
  margin: 10px 0 12px; padding: 11px 16px 11px 18px;
  background-color: var(--panel);
  background-image: linear-gradient(90deg, rgba(210,153,34,0.10), rgba(210,153,34,0));
  border: 1px solid var(--border);
  border-left: 4px solid var(--amber);
  border-radius: 0 10px 10px 0;
  font-size: 12.5px; line-height: 1.5;
}
.cr-real-title {
  margin: 0 0 4px; font-size: 13.5px; font-weight: 700; color: var(--text);
}
.cr-real p { margin: 0 0 6px; color: var(--muted); }
.cr-real p b { color: var(--text); }
.cr-real-win {
  padding: 6px 10px; border-radius: 6px;
  background: rgba(210,153,34,0.08);
  border: 1px dashed rgba(210,153,34,0.45);
}
.cr-real p.cr-real-win b { color: #f0c674; }
.cr-real-held {
  margin: 8px 0 6px; padding: 7px 11px; border-radius: 6px;
  color: var(--text); background: rgba(248,81,73,0.08);
  border: 1px solid rgba(248,81,73,0.35);
}
/* Quiet by design: it only has to make a newly added second Infloww
   account visibly picked up. Never render oid / accountId here. */
.cr-real-status {
  margin-top: 6px; font-size: 11.5px; color: var(--muted);
}
.cr-real-status b { color: var(--text); font-weight: 600; }
.cr-real-err { color: var(--red); }
.cr-real-err b { color: var(--red); }
/* real.available === false: one line, and the report is otherwise as-was. */
.cr-real-off { margin: 8px 0 10px; }

/* --- the column group ------------------------------------------------ */
.cr-table th.cr-realgrp, .cr-table td.cr-realgrp {
  background: rgba(210,153,34,0.05);
}
.cr-table th.cr-realsep, .cr-table td.cr-realsep {
  border-left: 1px solid rgba(210,153,34,0.35);
}
/* .cr-inband > td and the greyed ineligible rows mute every cell; the
   money must not be greyed out by a verdict about a different metric. A
   missing value still renders as the muted DASH span, so an uncovered
   model stays visibly unknown. */
.cr-table tbody td.cr-realgrp { color: var(--text); }

/* The ratio is the headline of the pairing — same weight as conv/replied,
   deliberately NO green/red: every model is far below 1.00x, so painting
   them all red would be decoration, and the backend supplies no threshold
   to colour against. */
.cr-table th.cr-cash, .cr-table td.cr-cash {
  background: rgba(210,153,34,0.09);
}
.cr-table tbody td.cr-cash {
  font-size: 13.5px; font-weight: 700; color: #f0c674;
  letter-spacing: -0.1px; font-variant-numeric: tabular-nums;
}
.cr-table th.cr-cash { color: var(--text); font-weight: 700; }
/* Withheld, not zero and not hidden: ratio_trustworthy === false. */
.cr-held {
  font-size: 11px; font-weight: 600; font-style: italic;
  color: var(--amber); letter-spacing: .01em;
}

/* ===================================================================== */
/* --- Scripts tab: chatting-script validator (APPEND-ONLY BLOCK) ------- */
/* Everything above this comment is untouched.                            */
/*                                                                        */
/* The live scripts server re-parses the script on EVERY request, with no  */
/* last-known-good and no rollback, so this screen is the only thing       */
/* standing between a typo and every conversation on the fleet. The        */
/* styling is built around three rules that follow from that:              */
/*                                                                        */
/*   1. The verdict outranks everything on the page - it is the widest,    */
/*      loudest element, and its three states are separated by shape and   */
/*      wording as well as colour, never by colour alone.                  */
/*   2. WARNINGS ARE NOT SECONDARY. The faults that actually cost money    */
/*      here parse cleanly and fail silently (a dropped lowercase key, a   */
/*      timeout that becomes 0, a placeholder shipped verbatim to the      */
/*      LLM). So the warning group is full-strength amber, always open,    */
/*      and sits directly under the verdict. Only .sl-g-info is allowed    */
/*      to collapse.                                                       */
/*   3. A same-VERSION split test is its own alarm (.sl-vclash), not a     */
/*      row in a table - two arms that cannot be told apart in the stats   */
/*      look completely healthy right up until someone reads the result.   */
/* ===================================================================== */

.sl-wrap { padding: 2px 0 22px; }
.sl-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 0 0 12px;
}
.sl-controls { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sl-pane[hidden] { display: none; }

/* --- paste area ------------------------------------------------------ */
.sl-editor {
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel); padding: 10px 12px 12px; margin-bottom: 10px;
}
.sl-ed-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 7px;
}
.sl-ed-label { font-size: 12.5px; font-weight: 600; color: var(--text); }
.sl-ed-meta { font-variant-numeric: tabular-nums; }
.sl-file {
  margin-left: auto; cursor: pointer; font-size: 12px; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 11px; white-space: nowrap;
}
.sl-file:hover { border-color: var(--accent); }
/* Off-screen rather than display:none so the label still opens the picker
   and the control stays keyboard-reachable. */
.sl-file-input {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}
.sl-file:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
/* wrap="off" in the markup: a script line can be a 2000-character prompt,
   and soft-wrapping it makes the line numbers in a finding meaningless. */
.sl-paste {
  display: block; width: 100%; min-height: 240px; resize: vertical;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; line-height: 1.55; white-space: pre; overflow: auto;
}
.sl-paste:focus { outline: none; border-color: var(--accent); }
.sl-two { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; }
.sl-two .sl-paste { min-height: 200px; }
.sl-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 14px;
}
.sl-results { margin-top: 2px; }

/* --- the standing stakes line ---------------------------------------- */
/* Same sentence in all three verdict states; it is what makes a red
   verdict an emergency and a green one still worth reading past. */
.sl-stakes {
  margin-top: 7px; font-size: 12.5px; line-height: 1.5; color: var(--text);
}
.sl-stakes b { color: #ffd97a; }
.sl-intro {
  padding: 13px 16px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--border);
  font-size: 13px; line-height: 1.5;
}
.sl-intro .muted.small { display: block; margin-top: 7px; }

/* --- verdict --------------------------------------------------------- */
.sl-verdict {
  display: flex; align-items: stretch; gap: 0; overflow: hidden;
  margin: 0 0 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--panel);
}
.sl-verdict-badge {
  display: flex; align-items: center; text-align: center;
  padding: 16px 20px; min-width: 168px; max-width: 220px;
  font-size: 15px; font-weight: 800; line-height: 1.25;
  letter-spacing: 0.4px; text-transform: uppercase;
}
.sl-verdict-body { flex: 1; min-width: 0; padding: 13px 18px; }
.sl-verdict-lead { font-size: 14px; line-height: 1.5; color: var(--text); }
.sl-verdict-notes {
  margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.5;
  color: var(--text);
}
.sl-verdict-notes li { margin: 3px 0; }

.sl-v-bad { border-color: rgba(248,81,73,0.55); background: rgba(248,81,73,0.06); }
.sl-v-bad .sl-verdict-badge { background: var(--red); color: #fff; }
.sl-v-good { border-color: rgba(63,185,80,0.5); background: rgba(63,185,80,0.05); }
.sl-v-good .sl-verdict-badge { background: var(--green); color: #06210c; }
/* "Cannot say" is deliberately NOT green and NOT quiet: an unreadable
   payload has to feel like a stop, because it is one. */
.sl-v-unknown { border-color: rgba(210,153,34,0.55); background: rgba(210,153,34,0.06); }
.sl-v-unknown .sl-verdict-badge { background: var(--amber); color: #241a02; font-size: 13px; }

.sl-counts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 9px; }
.sl-cnt {
  font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--panel-2);
  font-variant-numeric: tabular-nums;
}
.sl-c-error   { color: var(--red);   border-color: rgba(248,81,73,0.45); }
.sl-c-warning { color: #ffc548;      border-color: rgba(255,197,72,0.45); }
.sl-c-info    { color: var(--muted); }

/* --- "you edited it since" + browser-side pre-flight ----------------- */
.sl-stale {
  margin: 0 0 10px; padding: 9px 13px; border-radius: 8px;
  font-size: 12.5px; line-height: 1.45; color: #ffc548;
  background: rgba(255,197,72,0.12); border: 1px solid rgba(255,197,72,0.5);
}
.sl-local {
  margin: 0 0 12px; padding: 9px 13px; border-radius: 8px;
  font-size: 12.5px; line-height: 1.45; color: #ffc548;
  background: rgba(255,197,72,0.08); border: 1px solid rgba(255,197,72,0.35);
}
.sl-local ul { margin: 5px 0 0; padding-left: 18px; }
.sl-local b { color: #ffd97a; }

/* --- section counts -------------------------------------------------- */
.sl-sum {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 6px; padding: 10px 14px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px;
}
.sl-sum-cell { min-width: 84px; }
.sl-sum-n {
  font-size: 19px; font-weight: 700; line-height: 1.2; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.sl-sum-l { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
/* A mandatory section that parsed to zero is nearly always a section that
   did not parse the way its author thinks. */
.sl-sum-zero .sl-sum-n { color: var(--amber); }
.sl-sum-ver {
  margin-left: auto; font-size: 12.5px; color: var(--muted);
  max-width: 100%; overflow-wrap: anywhere;
}
.sl-sum-ver b { color: var(--text); }
.sl-sum-ver-missing {
  margin-left: auto; max-width: 460px; color: var(--amber); line-height: 1.45;
}
.sl-sum-ver-missing b { color: var(--amber); }
.sl-sum-ref { margin: 0 0 14px; }

/* --- the silent-trap explainer --------------------------------------- */
/* Rendered whenever there is at least one warning, because the codes on
   their own do not carry why a warning here is not a nit. */
.sl-traps {
  margin: 0 0 14px; padding: 11px 16px 11px 18px;
  font-size: 12.5px; line-height: 1.5; color: var(--text);
  background-color: var(--panel);
  background-image: linear-gradient(90deg, rgba(255,197,72,0.09), rgba(255,197,72,0));
  border: 1px solid var(--border); border-left: 4px solid #ffc548;
  border-radius: 0 10px 10px 0;
}
.sl-traps b { color: #ffd97a; }
.sl-traps ul { margin: 6px 0 0; padding-left: 18px; }
.sl-traps li { margin: 3px 0; }
.sl-traps code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px; padding: 0 4px; border-radius: 4px;
  background: rgba(255,255,255,0.06); color: var(--text);
}

/* --- findings beside the numbered source ----------------------------- */
.sl-split {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 14px; align-items: start;
}
@media (max-width: 1180px) {
  .sl-split { grid-template-columns: minmax(0,1fr); }
  .sl-two { grid-template-columns: minmax(0,1fr); }
}
/* Never given its own scrollbar: a findings list that scrolls inside a box
   is a findings list whose last warning nobody reads. */
.sl-findings { min-width: 0; }
.sl-findings-wide { margin-bottom: 14px; }

.sl-group { margin: 0 0 14px; }
.sl-group-head {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin: 0 0 7px; font-size: 13px;
}
.sl-group-note {
  flex: 1 1 100%; font-size: 12px; line-height: 1.45; color: var(--muted);
}
.sl-badge {
  display: inline-block; min-width: 22px; text-align: center;
  padding: 1px 7px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.sl-b-error   { background: var(--red);  color: #fff; }
.sl-b-warning { background: #ffc548;     color: #241a02; }
.sl-b-info    { background: var(--panel-2); color: var(--muted); border: 1px solid var(--border); }
.sl-g-error .sl-group-head b   { color: var(--red); }
.sl-g-warning .sl-group-head b { color: #ffc548; }
/* Only notes may hide. */
.sl-details > summary {
  cursor: pointer; display: flex; align-items: baseline; gap: 8px;
  font-size: 13px; color: var(--muted); padding: 2px 0;
}
.sl-details > summary:hover { color: var(--text); }

.sl-find {
  margin: 0 0 7px; padding: 8px 11px; border-radius: 8px;
  background: var(--panel); border: 1px solid var(--border);
  border-left: 3px solid var(--border);
}
.sl-f-error   { border-left-color: var(--red);  background: rgba(248,81,73,0.05); }
.sl-f-warning { border-left-color: #ffc548;     background: rgba(255,197,72,0.05); }
.sl-clickable { cursor: pointer; }
.sl-clickable:hover { border-color: var(--accent); border-left-color: var(--accent); }
.sl-clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sl-find-top {
  display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin-bottom: 4px;
}
.sl-lvl {
  padding: 1px 7px; border-radius: 4px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px;
}
.sl-fcode {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; color: var(--muted);
}
.sl-fline {
  margin-left: auto; font-size: 11.5px; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.sl-noline { color: var(--muted); }
.sl-fmsg { font-size: 12.5px; line-height: 1.45; color: var(--text); overflow-wrap: anywhere; }
.sl-fpath {
  margin-top: 3px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; color: var(--muted); overflow-wrap: anywhere;
}
.sl-fhint {
  margin-top: 5px; padding-left: 9px; border-left: 2px solid var(--border);
  font-size: 12px; line-height: 1.45; color: var(--muted);
}
.sl-more { margin: 2px 0 0; }
.sl-none {
  padding: 10px 13px; border-radius: 8px; font-size: 12.5px; line-height: 1.45;
  color: var(--muted); background: var(--panel); border: 1px dashed var(--border);
}

/* --- numbered read-only source (not an editor, on purpose) ----------- */
.sl-code-pane {
  position: sticky; top: 10px; min-width: 0;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel); overflow: hidden;
}
.sl-code-head {
  display: flex; align-items: baseline; gap: 10px; justify-content: space-between;
  padding: 7px 11px; font-size: 12px; font-weight: 600; color: var(--text);
  background: var(--panel-2); border-bottom: 1px solid var(--border);
}
.sl-code {
  max-height: 62vh; overflow: auto; padding: 6px 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px; line-height: 1.5;
}
.sl-ln { display: flex; gap: 10px; padding: 0 10px; }
.sl-lno {
  flex: 0 0 auto; min-width: 42px; text-align: right;
  color: var(--muted); user-select: none; font-variant-numeric: tabular-nums;
}
.sl-lx { white-space: pre; color: var(--text); }
.sl-hit {
  background: rgba(88,166,255,0.16);
  box-shadow: inset 3px 0 0 var(--accent);
}
.sl-hit .sl-lno { color: var(--accent); }
.sl-code-cut { padding: 6px 11px; border-top: 1px solid var(--border); }

/* --- compare mode ---------------------------------------------------- */
/* The one failure that hides inside a healthy-looking test: two arms that
   carry the same VERSION are indistinguishable in AIChatsFB2.Version, so
   the result is unattributable and nothing complains. Styled like the
   verdict, because it is one. */
.sl-vclash {
  display: flex; align-items: stretch; overflow: hidden;
  margin: 0 0 12px; border-radius: 10px;
  border: 1px solid rgba(248,81,73,0.55); background: rgba(248,81,73,0.07);
}
.sl-vclash-badge {
  display: flex; align-items: center; text-align: center;
  padding: 14px 18px; min-width: 150px;
  background: var(--red); color: #fff;
  font-size: 14px; font-weight: 800; letter-spacing: 0.4px;
  text-transform: uppercase; line-height: 1.25;
}
.sl-vclash-body { flex: 1; min-width: 0; padding: 12px 16px; }
.sl-vclash-lead { font-size: 14px; line-height: 1.5; color: var(--text); }
.sl-vclash-body p { margin: 7px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text); }
.sl-vclash-body b { color: #ffb3ae; }
.sl-vclash-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px; padding: 0 4px; border-radius: 4px;
  background: rgba(255,255,255,0.07);
}
.sl-warnbox {
  margin: 0 0 12px; padding: 10px 14px; border-radius: 8px;
  font-size: 12.5px; line-height: 1.5; color: #ffc548;
  background: rgba(255,197,72,0.10); border: 1px solid rgba(255,197,72,0.45);
}
.sl-warnbox b { color: #ffd97a; }
.sl-vok {
  margin: 0 0 12px; padding: 8px 13px; border-radius: 8px;
  font-size: 12.5px; line-height: 1.45; color: var(--muted);
  background: rgba(63,185,80,0.06); border: 1px solid rgba(63,185,80,0.35);
}
.sl-vok b { color: var(--text); }
.sl-dcount { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--text); }
.sl-dsec { margin: 0 0 14px; }
.sl-dsec-head {
  display: flex; align-items: baseline; gap: 10px; justify-content: space-between;
  padding: 6px 10px; font-size: 12.5px; font-weight: 700; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--border);
  border-bottom: none; border-radius: 8px 8px 0 0;
}
.sl-table {
  display: block; max-width: 100%; overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse; width: 100%; font-size: 12px;
}
.sl-table th, .sl-table td {
  padding: 5px 9px; border: 1px solid var(--border);
  text-align: left; vertical-align: top;
}
.sl-table th { background: var(--panel-2); color: var(--muted); font-weight: 600; }
.sl-table td { color: var(--text); overflow-wrap: anywhere; }
.sl-table .sl-n { text-align: right; font-variant-numeric: tabular-nums; }
.sl-sumtable { max-width: 340px; margin: 0 0 14px; }
.sl-drow td { background: rgba(88,166,255,0.08); font-weight: 600; }
.sl-dtable { border-radius: 0 0 8px 8px; }
.sl-dpath { max-width: 260px; }
.sl-dpath code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px; color: var(--text);
}
.sl-dkind {
  margin-left: 6px; padding: 0 6px; border-radius: 999px;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.3px;
  background: var(--panel-2); color: var(--muted); border: 1px solid var(--border);
}
.sl-dnote { margin-top: 3px; font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.sl-r-error td   { background: rgba(248,81,73,0.07); }
.sl-r-warning td { background: rgba(255,197,72,0.07); }

/* --- shared states --------------------------------------------------- */
.sl-loading {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 2px; font-size: 12px; color: var(--muted);
}
/* Reuses the @keyframes crPulse defined with the chatting report above. */
.sl-loading::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); animation: crPulse 1.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .sl-loading::before { animation: none; opacity: 0.7; }
}
.sl-err {
  margin: 0 0 12px; padding: 9px 12px; border-radius: 8px;
  font-size: 12.5px; line-height: 1.45;
  color: var(--red); background: rgba(248,81,73,0.07);
  border: 1px solid rgba(248,81,73,0.4);
}

/* ===================================================================== */
/* --- Chatting report: version provenance (APPEND-ONLY BLOCK) --------- */
/* Everything above this comment is untouched. New .cr-* classes only.   */
/*                                                                       */
/* The version column stopped being a fact. Five payload fields now      */
/* qualify it, and they are styled by CONSEQUENCE, not by severity of    */
/* wording - because two of them look similar on screen and mean         */
/* opposite things:                                                      */
/*                                                                       */
/*   version_mixed  the model ran TWO scripts in the window, so its row  */
/*     is the average of both. That row cannot be compared with anything */
/*     - it is not a caveat about a label, it is a number that answers   */
/*     no question. So it gets the full row treatment the verdicts get   */
/*     (left rule + tint + a pill beside the name + a word on the        */
/*     headline cell), in amber so it never reads as a verdict.          */
/*                                                                       */
/*   stray / minority_*  a handful of foreign messages. NOT a switch:    */
/*     the model is still scored normally, so it must NOT get any of the */
/*     above. It is the quietest mark on the table - muted, small, no    */
/*     row treatment, tooltip-only detail. If these two ever start to    */
/*     look alike, the loud one has been made cheap.                     */
/*                                                                       */
/* Colour is never the only signal in either case: the mixed row also    */
/* carries a left rule and the words "not comparable", and the stray     */
/* marker is a word, not a dot.                                          */
/* ===================================================================== */

/* --- version_mixed: the row is a blend, and must look like one -------- */
.cr-mixed { background: rgba(210,153,34,0.07); }
.cr-mixed > td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
/* Beats .cr-inband > td / the greyed ineligible rows: a blended row is not
   dimmer than the others, it is set apart from them. */
.cr-table tbody tr.cr-mixed > td { color: var(--text); }

/* The pill beside the model name: the loudest thing on the row, and it
   says what is wrong in words rather than leaving it to the tint. */
.cr-nocmp {
  display: inline-block; margin-left: 6px; padding: 0 7px;
  border-radius: 999px; vertical-align: 1px;
  font-size: 10px; font-weight: 700; font-style: normal;
  letter-spacing: .02em; white-space: nowrap; cursor: help;
  color: #f0c674; background: rgba(210,153,34,0.16);
  border: 1px solid rgba(210,153,34,0.5);
}
/* The small chip in the version column (and on the group / per-version
   rows, where it counts blended members instead of naming one). */
.cr-mixtag {
  display: inline-block; margin-left: 5px; padding: 0 6px;
  border-radius: 999px; vertical-align: 1px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 10px; font-weight: 700; text-transform: none;
  letter-spacing: .02em; white-space: nowrap; cursor: help;
  color: #f0c674; background: rgba(210,153,34,0.12);
  border: 1px solid rgba(210,153,34,0.35);
}
/* On the headline cell, where the invalid number actually is. */
.cr-blend {
  margin-left: 5px; font-size: 10px; font-weight: 700; font-style: italic;
  letter-spacing: .02em; white-space: nowrap; cursor: help;
  color: #f0c674;
}
/* A blended row can never carry a verdict, so it must never carry a
   verdict glyph either - defensive, in case a payload sets both. */
.cr-mixed .cr-headline::after { content: ""; }

/* --- stray: present, explained, and as quiet as it deserves ---------- */
.cr-stray {
  margin-left: 5px; padding: 0 4px; border-radius: 4px;
  font-size: 9.5px; font-weight: 600; text-transform: none;
  letter-spacing: .03em; white-space: nowrap; cursor: help;
  color: var(--muted); background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
}

/* --- version_source / coverage / edge_days: the provenance note ------ */
/* Sits directly above the table it qualifies. Neutral by default (it is
   often just "the history answered, end to end"); amber only when the
   labels came from the probe, which is the case where the whole column
   is a guess. */
.cr-versrc {
  margin: 0 0 12px; padding: 9px 12px;
  border-radius: 8px; border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  background: var(--panel-2);
  font-size: 12.5px; line-height: 1.45; color: var(--muted);
}
.cr-versrc-title {
  font-size: 12px; font-weight: 700; color: var(--text);
  letter-spacing: .01em; margin: 0 0 5px;
}
.cr-versrc p { margin: 0 0 6px; }
.cr-versrc p:last-child { margin-bottom: 0; }
.cr-versrc b { color: var(--text); }
.cr-versrc-probe {
  border-color: rgba(210,153,34,0.35);
  border-left-color: var(--amber);
  background: rgba(210,153,34,0.07);
}
.cr-versrc-probe .cr-versrc-title { color: #f0c674; }
.cr-versrc-probe b { color: #f0c674; }
/* The whole-day overshoot: the one line on this screen that stops a
   message total being read as the window's own count. */
.cr-versrc-edge b { color: #f0c674; }
.cr-versrc-cov b { color: var(--text); }

/* Models left out of the band because they ran two scripts - the floor
   below is measured from fewer members than the headcount suggests. */
.cr-band .cr-band-mixed { color: #f0c674; }
.cr-band .cr-band-mixed b { color: #f0c674; }

/* ===================================================================== */
/* --- Chatting report: plain-language conversion breakdown ------------ */
/* --- (APPEND-ONLY BLOCK — everything above is untouched) ------------- */
/*                                                                       */
/* One number, conv/replied %, is what the operator reads off this       */
/* table, and on its own it does not say WHY. These classes lay the      */
/* three pieces it is made of immediately to its LEFT, in the order the  */
/* arithmetic runs:                                                      */
/*                                                                       */
/*     Got link  ×  Buy aft. link  +  Buy no link  =  conv/replied %     */
/*                                                                       */
/* The × + = are real glyphs in the header (.cr-op) and again under the  */
/* explainer (.cr-eq-op), because the whole point is that the operator   */
/* SEES the sum come out, rather than being told that it does. Nothing   */
/* here may be styled so that it reads as a verdict: the group is a      */
/* neutral cool tint, never green/red, because a high "Buy aft. link" is */
/* an explanation, not a pass mark — the band columns do the judging.    */
/*                                                                       */
/* .cr-whykey is the middle column, the only one of the three that       */
/* actually varies between models (about 5.2%-8.7%, ~2x, against a       */
/* nearly flat 10-12% for Got link). It is weighted a little heavier so  */
/* the eye lands on the column where the difference lives.               */
/*                                                                       */
/* .cr-buy holds the three buy indicators — links per buy, msgs per buy, */
/* median hours to buy and the under-6h share. Small tiles on purpose:   */
/* they describe the SHAPE of a buy, they are not a second leaderboard.  */
/* .cr-buy-note carries the reason the MEDIAN is published and the       */
/* average never is (a tail of stale Converted stamps out to 87 days     */
/* swings the mean 7.1h → 22.9h → 7.1h across months in which nothing    */
/* moved), and it is styled to be read, not skimmed past.                */
/* ===================================================================== */

/* --- the explainer block, directly above the table ------------------- */
.cr-why {
  margin: 10px 0 12px; padding: 11px 16px 11px 18px;
  background-color: var(--panel);
  background-image: linear-gradient(90deg, rgba(88,166,255,0.10), rgba(88,166,255,0));
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 0 10px 10px 0;
  font-size: 12.5px; line-height: 1.5;
}
.cr-why-title {
  margin: 0 0 4px; font-size: 13.5px; font-weight: 700; color: var(--text);
}
.cr-why p { margin: 0 0 6px; color: var(--muted); }
.cr-why p:last-child { margin-bottom: 0; }
.cr-why p b { color: var(--text); }

/* The sentence in the operator's own words. It is the first thing in the
   block and the only line that has to survive being read at a glance. */
.cr-why-line {
  padding: 7px 11px; border-radius: 6px;
  color: var(--text) !important;
  background: rgba(88,166,255,0.08);
  border: 1px solid rgba(88,166,255,0.28);
  font-size: 13px;
}
.cr-why p.cr-why-line b { color: #a9d1ff; }

/* The backend has not shipped the fields yet: say so once, plainly, and
   leave the columns showing dashes. Never a row of zeros. */
.cr-why-pending { font-size: 12.5px; }

/* A row whose three pieces do not reproduce its own headline. Same amber
   as every other "this number is not what it looks like" mark on the
   screen, and never red - it is a disagreement to investigate, not a
   verdict about the model. */
.cr-why-off { color: #f0c674 !important; }
.cr-why p.cr-why-off b { color: #f0c674; }

/* --- the arithmetic, spelled out ------------------------------------- */
.cr-eq {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  margin: 2px 0 8px;
}
.cr-eq-op {
  padding: 0 7px; font-size: 15px; font-weight: 600; color: var(--muted);
  line-height: 1;
}
.cr-eq-cell {
  display: inline-flex; flex-direction: column; align-items: flex-end;
  padding: 5px 10px; border-radius: 6px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
}
.cr-eq-val {
  font-size: 15px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; letter-spacing: -0.2px;
}
.cr-eq-lbl {
  margin-top: 1px; font-size: 10.5px; color: var(--muted);
  letter-spacing: .02em; white-space: nowrap;
}
/* The right-hand side is the number the operator already knows; the point
   of the row is that the left-hand side arrives at it. */
.cr-eq-total {
  background: rgba(88,166,255,0.10);
  border-color: rgba(88,166,255,0.35);
}
.cr-eq-total .cr-eq-val { color: #a9d1ff; }

/* --- the column group in the table ----------------------------------- */
.cr-table th.cr-whygrp, .cr-table td.cr-whygrp {
  background: rgba(88,166,255,0.05);
}
.cr-table th.cr-whysep, .cr-table td.cr-whysep {
  border-left: 1px solid rgba(88,166,255,0.30);
}
/* The middle column is where the models actually differ - Got link is
   nearly flat across the fleet, Buy aft. link spans ~2x. */
.cr-table th.cr-whykey, .cr-table td.cr-whykey {
  background: rgba(88,166,255,0.09);
}
.cr-table tbody td.cr-whykey { color: var(--text); font-weight: 600; }
/* A verdict about conv/replied % says nothing about the pieces, and the
   greyed ineligible rows mute every cell - but "not scored" is a claim
   about sample size, not about whether these three numbers are legible.
   A missing value is still the muted DASH span either way. */
.cr-table tbody td.cr-whygrp { color: var(--text); }
/* The operators in the header: present, but never louder than the label. */
.cr-op { color: var(--muted); font-weight: 400; }
.cr-table th.cr-headline .cr-op { color: var(--muted); }
/* The identity did not hold on this row. */
.cr-offid {
  margin-left: 3px; font-size: 11px; font-weight: 700; color: var(--amber);
  cursor: help;
}

/* --- the three buy indicators ---------------------------------------- */
.cr-buy {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 8px 0 6px;
}
.cr-buy-cell {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  min-width: 92px; padding: 6px 11px; border-radius: 6px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  cursor: help;
}
.cr-buy-val {
  font-size: 14px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; letter-spacing: -0.1px;
}
.cr-buy-lbl {
  margin-top: 1px; font-size: 10.5px; color: var(--muted);
  letter-spacing: .02em; white-space: nowrap;
}
/* "middle model", when no fleet median was published. Per-chat medians
   cannot be pooled out of per-model ones, so the tile says which one it
   is showing rather than quietly implying the other. */
.cr-buy-sub { color: #f0c674; }
/* Why the median and not the average. This is the line that stops a
   7.1h -> 22.9h -> 7.1h artefact being read as a real change. */
.cr-buy-note {
  margin: 0 !important; padding: 7px 11px; border-radius: 6px;
  color: var(--muted); font-size: 12px;
  background: rgba(210,153,34,0.08);
  border: 1px dashed rgba(210,153,34,0.45);
}
.cr-why p.cr-buy-note b { color: #f0c674; }

/* ===================================================================== */
/* --- Scripts tab: the LIBRARY manager (APPEND-ONLY BLOCK) ------------- */
/* Everything above this comment is untouched.                            */
/*                                                                        */
/* Two panes, list on the left, the selected script on the right. The      */
/* styling carries three things the operator must not have to remember:    */
/*                                                                        */
/*   1. THE LIBRARY AND THE SERVER ARE DIFFERENT BYTES. Everything styled  */
/*      in this block is the manager's LIBRARY. The live server got its    */
/*      own block at the end of this file (.sl-srv-*, .sl-conn-*,          */
/*      .sl-deploy-live) after the route to it was found on 2026-08-31.    */
/*      .sl-deploy-btn here is the DISABLED deploy control and keeps its   */
/*      amber frame with the reason printed beside it at full strength -   */
/*      not a tooltip, not greyed-out mystery.                             */
/*   2. THE DEPLOYED FILENAME IS SETTLED. The live directory was listed    */
/*      and holds MODELNAME.txt with DEFAULT.txt as the fallback, so       */
/*      .sl-names shows ONE name, not two candidates. The live box is      */
/*      Linux, i.e. case-sensitive, so a model recorded in the wrong case  */
/*      still gets .sl-chip-warn.                                          */
/*   3. THE ROW BADGE IS THE WHOLE POINT OF THE LIST. .sl-b2-* separates   */
/*      OK / warnings / BROKEN / not-checked by shape and wording as well  */
/*      as colour, and "not checked" is styled as a gap in knowledge, not  */
/*      as a pass.                                                        */
/* ===================================================================== */

/* --- two-pane frame -------------------------------------------------- */
.sl-lib {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
@media (max-width: 900px) {
  .sl-lib { grid-template-columns: minmax(0, 1fr); }
}
.sl-lib-list {
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel); padding: 10px 10px 12px;
}
.sl-lib-detail { min-width: 0; }

.sl-lib-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 9px;
}
.sl-lib-head b { font-size: 13px; }
.sl-lib-count { margin-right: auto; font-variant-numeric: tabular-nums; }

.sl-search { margin-bottom: 8px; }
.sl-search .sl-input { width: 100%; }
.sl-input {
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 5px 9px; font-size: 12.5px; font-family: inherit;
}
.sl-input:focus { outline: none; border-color: var(--accent); }
.sl-input:disabled { opacity: 0.45; }

/* --- one row ---------------------------------------------------------- */
.sl-rows { display: flex; flex-direction: column; gap: 5px; }
.sl-row {
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel-2); padding: 7px 9px; cursor: pointer;
}
.sl-row:hover { border-color: var(--accent); }
.sl-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sl-row-sel { border-color: var(--accent); background: rgba(88,166,255,0.10); }
/* A row with no name cannot be opened, and must not look like it can. */
.sl-row-dead { cursor: default; opacity: 0.7; }
.sl-row-dead:hover { border-color: var(--border); }

.sl-row-top { display: flex; align-items: center; gap: 8px; }
.sl-row-name {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12.5px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1; min-width: 0;
}
.sl-row-meta {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: 5px; font-size: 11px; color: var(--muted);
}
.sl-row-ver, .sl-row-when { font-variant-numeric: tabular-nums; }
.sl-row-when { margin-left: auto; white-space: nowrap; }

/* --- the badge: four states, none of which is "probably fine" --------- */
.sl-row-badge {
  flex: none; font-size: 10px; font-weight: 700; letter-spacing: .05em;
  padding: 2px 7px; border-radius: 4px; white-space: nowrap;
  border: 1px solid transparent;
}
.sl-b2-good { background: rgba(63,185,80,0.16);  color: #6fd18a; border-color: rgba(63,185,80,0.45); }
.sl-b2-warn { background: rgba(255,197,72,0.15); color: #ffc548; border-color: rgba(255,197,72,0.50); }
.sl-b2-bad  { background: var(--red); color: #fff; border-color: var(--red); }
/* Unknown and not-checked are deliberately NOT green and NOT quiet: they
   are the states where the screen has nothing to say, and that is a fact
   the operator has to see rather than skip past. */
.sl-b2-unk  { background: rgba(210,153,34,0.14); color: var(--amber); border-color: rgba(210,153,34,0.55); }
.sl-b2-none {
  background: transparent; color: var(--muted);
  border-color: var(--border); border-style: dashed;
}

/* --- model chip ------------------------------------------------------- */
.sl-chip {
  font-size: 10.5px; font-weight: 600; letter-spacing: .03em;
  padding: 2px 7px; border-radius: 4px; white-space: nowrap;
  background: rgba(88,166,255,0.12); color: #79b8ff;
  border: 1px solid rgba(88,166,255,0.32);
}
.sl-chip-def { background: rgba(139,148,158,0.14); color: #b6bec8; border-color: var(--border); }
/* Not uppercase: on a Linux box that file is simply never found, and the
   model silently runs the fallback script instead. */
.sl-chip-warn { background: rgba(255,197,72,0.14); color: #ffc548; border-color: rgba(255,197,72,0.50); }
.sl-chip-none {
  background: transparent; color: var(--muted);
  border-color: var(--border); border-style: dashed; font-weight: 500;
}

/* --- empty / error states -------------------------------------------- */
.sl-lib-empty {
  padding: 14px 12px; border: 1px dashed var(--border); border-radius: 8px;
  color: var(--text); font-size: 12.5px;
}
.sl-lib-empty .muted { display: block; margin-top: 6px; }
/* An empty list because the request failed must never look like an empty
   list because there is nothing there. */
.sl-lib-err {
  padding: 12px; border-radius: 8px; font-size: 12.5px;
  background: rgba(248,81,73,0.08); border: 1px solid rgba(248,81,73,0.45);
  color: var(--text);
}
.sl-lib-err .btn { margin-top: 8px; }

/* --- detail pane ------------------------------------------------------ */
.sl-detail { display: flex; flex-direction: column; gap: 12px; }
.sl-empty-detail {
  padding: 26px 20px; border: 1px dashed var(--border); border-radius: 10px;
  color: var(--text); font-size: 13px;
}
.sl-empty-detail .muted { display: block; margin-top: 7px; max-width: 60ch; }

.sl-dhead { display: flex; flex-direction: column; gap: 6px; }
.sl-dtitle { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sl-dname {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 16px; font-weight: 700; color: var(--text);
}
.sl-dsub { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sl-dsub-i { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sl-dsub-i b { color: var(--text); }

/* --- the disabled Deploy control ------------------------------------- */
/* Visible, disabled, and the reason is at reading strength next to it.
   This is the single most important honest thing on the screen. */
.sl-deploy {
  border: 1px solid rgba(210,153,34,0.45); border-radius: 10px;
  background: rgba(210,153,34,0.06); padding: 11px 13px;
}
.sl-deploy-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sl-deploy-btn { opacity: 0.5; cursor: not-allowed; }
.sl-deploy-btn:hover { border-color: var(--border); }
.sl-deploy-tag {
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  padding: 2px 7px; border-radius: 4px;
  background: rgba(210,153,34,0.18); color: var(--amber);
  border: 1px solid rgba(210,153,34,0.55);
}
.sl-deploy-why {
  margin-top: 8px; font-size: 12px; line-height: 1.55; color: var(--text);
  max-width: 92ch;
}
.sl-deploy-why b { color: #ffd97a; }
.sl-deploy-why code, .sl-deploy-host code, .sl-deploy-extra code {
  background: rgba(255,255,255,0.05); padding: 0 4px; border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11.5px;
}
.sl-deploy-extra {
  margin-top: 8px; padding: 8px 10px; border-radius: 6px; font-size: 12px;
  background: rgba(88,166,255,0.08); border: 1px dashed rgba(88,166,255,0.45);
  color: var(--text);
}
.sl-deploy-host { margin-top: 7px; }

/* --- the two candidate deployed filenames ---------------------------- */
.sl-names {
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel); padding: 11px 13px;
}
.sl-names-head {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin-bottom: 8px;
}
.sl-names-head b { color: var(--amber); }
.sl-names-row {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 4px 0;
}
.sl-names-k { font-size: 11.5px; color: var(--muted); min-width: 170px; }
.sl-names-v {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12.5px; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 5px; padding: 2px 8px;
}
.sl-names-note { margin-top: 8px; line-height: 1.55; max-width: 92ch; }
.sl-names-note b { color: #ffd97a; }
.sl-names-note code {
  background: rgba(255,255,255,0.05); padding: 0 4px; border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11.5px;
}

/* --- toolbar ---------------------------------------------------------- */
.sl-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sl-tools-gap { flex: 1 1 auto; }

/* --- inline panels (add / replace / duplicate) ------------------------ */
/* Inline, never modal: none of these destroys anything on its own. */
.sl-panel {
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel); padding: 11px 13px;
  display: flex; flex-direction: column; gap: 9px;
}
.sl-panel-flat { background: var(--panel-2); }
.sl-panel-head { font-size: 13px; font-weight: 600; color: var(--text); }
.sl-panel-head code {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12.5px;
}
.sl-panel-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sl-flabel {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--muted);
}
.sl-check {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--muted); cursor: pointer;
}
.sl-namepv { font-size: 12px; color: var(--muted); }
.sl-namepv code {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12.5px; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 5px; padding: 2px 8px;
}

/* --- the editor ------------------------------------------------------- */
.sl-edwrap {
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel); padding: 10px 12px 12px;
}
.sl-edbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 7px;
}
.sl-paste-tall { min-height: 340px; }
.sl-paste-mid { min-height: 150px; }
.sl-edhint { margin-top: 7px; line-height: 1.5; }
/* Unsaved work is stated in words, not implied by a dot. */
.sl-dirty { font-size: 11px; color: var(--muted); }
.sl-dirty.on {
  color: var(--amber); font-weight: 600;
  background: rgba(210,153,34,0.12);
  border: 1px solid rgba(210,153,34,0.45);
  border-radius: 4px; padding: 1px 7px;
}

/* --- transient result line ------------------------------------------- */
.sl-flash {
  margin-bottom: 10px; padding: 9px 12px; border-radius: 8px;
  font-size: 12.5px; line-height: 1.5;
}
.sl-flash-ok {
  background: rgba(63,185,80,0.08); border: 1px solid rgba(63,185,80,0.45); color: var(--text);
}
.sl-flash-err {
  background: rgba(248,81,73,0.08); border: 1px solid rgba(248,81,73,0.45); color: var(--text);
}

.sl-intro-thin { padding: 10px 12px; }

/* --- modals: only ever for something destructive --------------------- */
.sl-modal {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.62); padding: 20px;
}
.sl-modal-box {
  width: min(560px, 100%);
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 18px 48px rgba(0,0,0,0.55);
  max-height: 86vh; overflow: auto;
}
.sl-modal-head {
  padding: 15px 18px 0; font-size: 15px; font-weight: 700; color: var(--text);
}
.sl-modal-body {
  padding: 10px 18px 4px; font-size: 13px; line-height: 1.6; color: var(--text);
}
.sl-modal-body p { margin: 0 0 10px; }
.sl-modal-body .muted { display: block; }
.sl-modal-body .sl-stakes { margin: 10px 0; }
.sl-modal-foot {
  display: flex; justify-content: flex-end; gap: 9px;
  padding: 12px 18px 16px;
}
/* The dangerous choice is never the default-looking one. */
.sl-modal-foot .btn.danger { font-weight: 600; }
/* A .sl-warnbox used inline inside a panel rather than as a full-width
   alarm: same colours, tighter box. Duplicating while the editor is dirty
   copies the STORED file, and the operator has to see that before they
   press the button, not after. */
.sl-warnbox-thin { margin: 0; padding: 8px 10px; font-size: 12px; line-height: 1.5; }
/* The backend ships the evidence behind "no route to the live scripts".
   It is printed, not hidden behind a tooltip: this is the list someone has
   to re-check before believing the Deploy button is disabled for a good
   reason, and it is the first thing that becomes stale. */
.sl-deploy-ev { margin: 8px 0 0; padding-left: 18px; }
.sl-deploy-ev li { margin: 4px 0; color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.sl-warnbox-thin ul { margin: 6px 0 0; padding-left: 18px; }
.sl-warnbox-thin li { margin: 3px 0; }
/* "Running now: georgiana, maria" - who a bad save here would actually
   break, printed next to the buttons that could do it. The lookup failing
   renders as UNKNOWN in amber, never as an empty (reassuring) list. */
.sl-live {
  font-size: 11.5px; color: var(--muted); line-height: 1.5;
  padding: 5px 9px; border-radius: 6px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border);
}
.sl-live b { color: var(--text); }
.sl-live-on { border-color: rgba(88,166,255,0.35); }
.sl-live-on b { color: #79b8ff; }
.sl-live-unk { border-color: rgba(210,153,34,0.45); background: rgba(210,153,34,0.07); }
.sl-live-unk b { color: var(--amber); }

/* ======================================================================= */
/* SCRIPTS LIBRARY — the three row flags the store added later             */
/* ======================================================================= */
/*                                                                        */
/* Two states that are NOT lint verdicts, and must not be mistaken for     */
/* one:                                                                   */
/*                                                                        */
/*   .sl-row-gone / .sl-b2-gone  the FILE is not in the library folder.    */
/*      Grey and dashed, because the row is a record rather than a thing   */
/*      you can open — but the model and notes stay at full contrast,      */
/*      since keeping them is the entire reason the row still exists. It   */
/*      is deliberately NOT red: nothing is broken, and a rename gap (an   */
/*      editor's atomic save) looks exactly like this for a millisecond.   */
/*                                                                        */
/*   .sl-chip-nc / .sl-ncbox     the NAME could not have been created      */
/*      here. Blue-grey and quiet, on the meta line rather than beside     */
/*      the verdict: the script is completely healthy and only its URL is  */
/*      unusual. The store's own refusal is printed verbatim in            */
/*      .sl-ncbox-why, monospaced so it reads as a quoted message and not  */
/*      as this screen's opinion.                                          */

/* --- a row whose file is gone ---------------------------------------- */
.sl-row-gone {
  border-style: dashed;
  /* A recessed surface, not a transparent one: the row is still a row. The
     hatching says "not a thing you can open" without borrowing a colour that
     already means something on this screen. */
  background-color: var(--panel);
  background-image: repeating-linear-gradient(
    -45deg, rgba(255,255,255,0.022) 0 6px, transparent 6px 12px);
}
.sl-row-gone .sl-row-name { color: var(--muted); text-decoration: line-through; }
.sl-row-gone:hover .sl-row-name { color: var(--text); }
.sl-row-gone.sl-row-sel { background: rgba(88,166,255,0.08); }
.sl-b2-gone {
  background: transparent; color: var(--muted);
  border-color: var(--muted); border-style: dashed;
}
/* The kept metadata, on the row. Full contrast on purpose: it is the only
   copy of these words anywhere, and the point of the greying above is the
   FILE, never the notes. */
.sl-row-kept {
  margin-top: 5px; padding-top: 5px; border-top: 1px dashed var(--border);
  font-size: 11px; line-height: 1.5; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sl-row-kept b { color: var(--text); font-weight: 600; }

/* --- the missing-file screen ----------------------------------------- */
.sl-dname-gone { color: var(--muted); text-decoration: line-through; }
.sl-gone {
  border: 1px dashed var(--border); border-radius: 8px;
  background: rgba(139,148,158,0.05);
  padding: 12px 14px; margin: 10px 0;
  font-size: 12.5px; line-height: 1.6; color: var(--muted);
}
.sl-gone p { margin: 0 0 9px; }
.sl-gone b { color: var(--text); }
.sl-gone code {
  background: var(--panel-2); border-radius: 4px; padding: 1px 5px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11.5px;
}
.sl-gone-head { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
/* The file came back between the click and the paint. Blue, not grey: this
   is the good outcome, and the one the kept-metadata rule exists for. */
.sl-gone-back { border-style: solid; border-color: rgba(88,166,255,0.35); }
.sl-gone-back .sl-gone-head b { color: #79b8ff; }

/* --- what the index still holds --------------------------------------- */
.sl-gone-kept {
  display: flex; flex-direction: column; gap: 4px;
  margin: 10px 0 2px; padding: 9px 11px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px;
}
.sl-gone-kv { display: flex; gap: 10px; align-items: baseline; font-size: 12px; }
.sl-gone-k {
  flex: none; width: 82px; color: var(--muted); font-size: 11px;
  text-transform: uppercase; letter-spacing: .04em;
}
.sl-gone-v { color: var(--text); min-width: 0; word-break: break-word; }
.sl-gone-v .muted { color: var(--muted); }
/* Inside the forget dialog the same block is the list of what is about to
   be destroyed, so it gets the danger edge there. */
.sl-modal-body .sl-gone-kept { border-color: rgba(248,81,73,0.45); margin: 10px 0; }

/* --- the two things an operator can actually do ----------------------- */
.sl-gone-do {
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel); padding: 11px 13px; margin-bottom: 12px;
}
.sl-gone-do-head {
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 9px;
}
.sl-gone-act { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; }
/* Sibling rule, not :first-of-type — the heading above is a div too, so
   :first-of-type would have matched nothing here. */
.sl-gone-act + .sl-gone-act { border-top: 1px solid var(--border); margin-top: 2px; }
.sl-gone-act .btn { flex: none; min-width: 170px; }
.sl-gone-act-why { font-size: 11.5px; line-height: 1.55; color: var(--muted); min-width: 0; }
.sl-gone-act-why b { color: var(--text); }
.sl-gone-act-why code {
  background: var(--panel-2); border-radius: 4px; padding: 1px 5px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px;
}

/* --- a name that could not have been created here --------------------- */
.sl-chip-nc {
  background: rgba(139,148,158,0.14); color: #b6bec8;
  border-color: var(--border); border-style: dashed; font-weight: 500;
}
.sl-ncbox {
  border: 1px solid var(--border); border-left: 3px solid var(--muted);
  border-radius: 6px; background: rgba(139,148,158,0.06);
  padding: 10px 13px; margin: 10px 0;
  font-size: 12px; line-height: 1.6; color: var(--muted);
}
.sl-ncbox p { margin: 0 0 8px; }
.sl-ncbox p:last-child { margin-bottom: 0; }
.sl-ncbox b { color: var(--text); }
.sl-ncbox-head { font-size: 12.5px; font-weight: 600; color: var(--text); margin-bottom: 7px; }
/* The store's exact sentence. Monospaced and boxed so it reads as quoted
   rather than as this screen's paraphrase — the rule can change, and the
   two wordings must never be allowed to drift apart. */
.sl-ncbox-why {
  margin: 0 0 9px; padding: 7px 9px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 5px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11.5px; line-height: 1.5; color: var(--text);
  word-break: break-word;
}
.sl-ncbox code {
  background: var(--panel-2); border-radius: 4px; padding: 1px 5px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px;
}
/* Printed beside the disabled Save, the same way the Deploy button carries
   its reason: a control that cannot work says why, in place. */
.sl-tools-why { font-size: 11px; color: var(--muted); line-height: 1.4; }
.sl-namepv-note { margin-top: 4px; line-height: 1.5; }

/* ======================================================================= */
/* SCRIPTS LIBRARY — the stale row (file present, could not be read)       */
/* ======================================================================= */
/*                                                                        */
/* The third sibling of `missing`, and the one that most needs saying:     */
/* the file IS on disk, so the row stays clickable and keeps its ordinary  */
/* surface — but nobody re-read it, so its verdict describes bytes that    */
/* were not verified.                                                     */
/*                                                                        */
/* Hence TWO badges, never a recoloured one. .sl-b2-stale states the       */
/* condition, .sl-b2-cached de-rates the verdict beside it — dimmed,       */
/* dashed, and carrying an "as of …" suffix. A cached OK that looked like  */
/* a fresh OK would be the same failure as an OK beside a missing file,    */
/* which is the argument .sl-b2-gone already makes one block above.        */
/*                                                                        */
/* Amber, not grey: unlike `missing`, this is a state that can hide a      */
/* real problem behind a reassuring old verdict.                          */

/* --- a row that was not re-read --------------------------------------- */
.sl-row-stale { border-color: rgba(210,153,34,0.40); }
.sl-row-stale:hover { border-color: var(--accent); }
.sl-b2-stale {
  background: rgba(210,153,34,0.14); color: var(--amber);
  border-color: rgba(210,153,34,0.55); border-style: dashed;
}
/* The verdict, visibly demoted: it is history, not a pass. */
.sl-b2-cached {
  opacity: 0.75; border-style: dashed;
  font-weight: 600; letter-spacing: .03em;
}
/* The store's own reason, on the row. One line — the full text is on the
   tooltip and printed in full on the detail pane. */
.sl-row-why {
  margin-top: 5px; padding-top: 5px; border-top: 1px dashed rgba(210,153,34,0.30);
  font-size: 11px; line-height: 1.5; color: var(--amber);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- the stale notice on the detail pane ------------------------------ */
.sl-stalebox {
  border: 1px solid rgba(210,153,34,0.45); border-left: 3px solid var(--amber);
  border-radius: 6px; background: rgba(210,153,34,0.07);
  padding: 10px 13px; margin: 10px 0;
  font-size: 12px; line-height: 1.6; color: var(--muted);
}
.sl-stalebox p { margin: 0 0 8px; }
.sl-stalebox p:last-of-type { margin-bottom: 10px; }
.sl-stalebox b { color: var(--text); }
.sl-stalebox-head { font-size: 12.5px; font-weight: 600; color: #ffc548; margin-bottom: 7px; }
/* The open itself failed, so everything on the pane is history. Red edge:
   this is the one where saving over the file would be a real mistake. */
.sl-stalebox-hard {
  border-color: rgba(248,81,73,0.50); border-left-color: var(--red);
  background: rgba(248,81,73,0.06);
}
.sl-stalebox-hard .sl-stalebox-head { color: #ff8b82; }
/* Quoted verbatim, monospaced, for the same reason .sl-ncbox-why is: it is
   the manager's sentence, not this screen's paraphrase of it. */
.sl-stalebox-why {
  margin: 0 0 9px; padding: 7px 9px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 5px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11.5px; line-height: 1.5; color: var(--text);
  word-break: break-word;
}
.sl-stalebox .sl-actions { margin: 0; }

/* ===================================================================== */
/* --- Scripts tab: THE LIVE SERVER (APPEND-ONLY BLOCK) ----------------- */
/* Everything above this comment is untouched.                            */
/*                                                                        */
/* The block above this one was written when there was no route to the    */
/* live scripts and Deploy was a permanently disabled button. That is no  */
/* longer true: the live files are on 89.34.17.131 in                     */
/* /var/www/html/SCRIPTS/SNAPCHAT, the manager reads and writes them over SFTP, */
/* and this screen now does both. The rules below are what that added,    */
/* and they carry three things:                                           */
/*                                                                        */
/*   1. LIBRARY AND SERVER MUST NEVER LOOK ALIKE. .sl-srv-* is the server */
/*      block and is framed in blue; .sl-deploy-live is the one control   */
/*      that writes to it. Everything else on the tab is the library and  */
/*      is neutral. Colour is the fastest way to answer "am I about to    */
/*      change what the fleet is reading?"                                */
/*   2. A DISABLED DEPLOY STILL SHOWS ITS REASON AT READING STRENGTH.     */
/*      .sl-deploy above keeps its amber frame for that case; only the    */
/*      ENABLED state gets .sl-deploy-live. The reason is never a tooltip.*/
/*   3. A REFUSAL IS NOT A TOAST. .sl-dep-out-bad stays on the pane until */
/*      it is dismissed, because "nothing was written" is the sentence an */
/*      operator needs to still be able to read a minute later.           */
/* ===================================================================== */

/* An <a> wearing .btn (the "Open it on the server" links) has to sit on the
   same baseline as the real buttons next to it. */
a.btn { display: inline-block; text-decoration: none; line-height: normal; }

/* --- the connection panel -------------------------------------------- */
.sl-conn {
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel); padding: 11px 13px; margin: 10px 0;
}
.sl-conn-ok   { border-color: rgba(63,185,80,0.45);  background: rgba(63,185,80,0.05); }
.sl-conn-part { border-color: rgba(210,153,34,0.45); background: rgba(210,153,34,0.06); }
.sl-conn-bad  { border-color: rgba(248,81,73,0.45);  background: rgba(248,81,73,0.05); }
.sl-conn-unk  { border-color: rgba(210,153,34,0.45); background: rgba(210,153,34,0.06); }
.sl-conn-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--muted);
}
.sl-conn-head b { color: var(--text); }
.sl-conn-ok   .sl-conn-head b { color: #6fd18a; }
.sl-conn-part .sl-conn-head b { color: var(--amber); }
.sl-conn-bad  .sl-conn-head b { color: #ff8b82; }
.sl-conn-unk  .sl-conn-head b { color: var(--amber); }
.sl-conn-head .btn { margin-left: auto; }

/* Three independent facts, never a traffic light: reachable, readable and
   writable are separate answers, and only the last one gates Deploy. */
.sl-conn-flags { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px; }
.sl-flag {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  padding: 2px 8px; border-radius: 999px; border: 1px solid transparent;
  cursor: help;
}
.sl-flag-on  { background: rgba(63,185,80,0.16); color: #6fd18a; border-color: rgba(63,185,80,0.45); }
.sl-flag-off { background: rgba(248,81,73,0.14); color: #ff8b82; border-color: rgba(248,81,73,0.45); }

.sl-conn-why {
  margin-top: 9px; font-size: 12px; line-height: 1.55; color: var(--text);
  max-width: 92ch;
}
.sl-conn-why b { color: #ffd97a; }
.sl-conn-why code, .sl-conn-note code {
  background: rgba(255,255,255,0.05); padding: 0 4px; border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11.5px;
}
.sl-conn-grid { margin-top: 9px; }
.sl-conn-row {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 2px 0;
}
.sl-conn-k { font-size: 11.5px; color: var(--muted); min-width: 170px; }
.sl-conn-v {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11.5px; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 5px; padding: 1px 7px; word-break: break-all;
}
.sl-conn-ev { margin-top: 9px; }
.sl-conn-ev > summary { cursor: pointer; font-size: 11.5px; color: var(--muted); }
.sl-conn-ev ul { margin: 7px 0 0; padding-left: 18px; }
.sl-conn-ev li { margin: 4px 0; color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.sl-conn-note { margin-top: 8px; line-height: 1.5; }

/* --- the Deploy control, ENABLED ------------------------------------- */
/* .sl-deploy above stays amber for the disabled case. This is the other
   one: a live, pressable write to the fleet, framed so it cannot be
   mistaken for any of the library controls around it. */
.sl-deploy-live {
  border-color: rgba(88,166,255,0.45);
  background: rgba(88,166,255,0.06);
}
.sl-deploy-live .sl-deploy-tag {
  background: rgba(88,166,255,0.16); color: #79b8ff;
  border-color: rgba(88,166,255,0.50);
}
.sl-dep-target {
  font-size: 12.5px; line-height: 1.6; color: var(--muted); margin-bottom: 9px;
}
.sl-dep-target b { color: var(--text); }
.sl-dep-target code {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12.5px; color: #79b8ff;
  background: rgba(88,166,255,0.10); border: 1px solid rgba(88,166,255,0.35);
  border-radius: 5px; padding: 1px 7px;
}
/* The backend saw this exact filename in the live directory - the deployed
   name is confirmed, not derived. */
.sl-dep-seen {
  margin-left: 7px; font-size: 10px; font-weight: 700; letter-spacing: .05em;
  padding: 1px 6px; border-radius: 4px;
  background: rgba(63,185,80,0.14); color: #6fd18a; border: 1px solid rgba(63,185,80,0.40);
}
.sl-dep-line {
  margin-top: 8px; font-size: 12px; line-height: 1.55; color: var(--muted);
  max-width: 92ch;
}
.sl-dep-line b { color: var(--text); }
.sl-dep-line code {
  background: rgba(255,255,255,0.05); padding: 0 4px; border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px;
}
.sl-dep-line .btn { margin-left: 6px; }
.sl-dep-line-warn {
  padding: 7px 10px; border-radius: 6px;
  background: rgba(210,153,34,0.08); border: 1px dashed rgba(210,153,34,0.45);
  color: var(--text);
}
.sl-dep-line-warn b { color: #ffd97a; }

/* --- what the last deploy did ---------------------------------------- */
.sl-dep-out {
  margin-top: 11px; padding: 10px 13px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--panel-2);
  font-size: 12px; line-height: 1.6; color: var(--muted);
}
.sl-dep-out p { margin: 0 0 8px; }
.sl-dep-out b { color: var(--text); }
.sl-dep-out code {
  background: rgba(255,255,255,0.05); padding: 0 4px; border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px;
}
.sl-dep-out-head {
  font-size: 12.5px; font-weight: 700; letter-spacing: .03em;
  color: var(--text); margin-bottom: 8px;
}
.sl-dep-out .sl-actions { margin: 0; }
.sl-dep-out-ok {
  border-color: rgba(63,185,80,0.45); background: rgba(63,185,80,0.06);
}
.sl-dep-out-ok .sl-dep-out-head { color: #6fd18a; }
/* NOTHING WAS WRITTEN. Loud, and it does not time out. */
.sl-dep-out-bad {
  border-color: rgba(248,81,73,0.50); border-left: 3px solid var(--red);
  background: rgba(248,81,73,0.07);
}
.sl-dep-out-bad .sl-dep-out-head { color: #ff8b82; }

/* The ScriptTest checkout footnote under the deployed filename. Present so
   nobody re-derives the old conflict; quiet, because it is not one. */
.sl-names-foot { display: block; margin-top: 6px; opacity: 0.85; }

/* --- "Live on the server" -------------------------------------------- */
/* Full width, above the two library panes, and blue: this is the SERVER,
   and nothing else on the tab is. */
.sl-srv {
  border: 1px solid rgba(88,166,255,0.35); border-radius: 10px;
  background: rgba(88,166,255,0.04); padding: 11px 13px; margin-bottom: 14px;
}
.sl-srv-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 13px; color: var(--text);
}
.sl-srv-head b { color: #79b8ff; }
.sl-srv-body { margin-top: 10px; }
.sl-srv-counts {
  font-size: 12px; color: var(--muted); margin-bottom: 9px;
  font-variant-numeric: tabular-nums;
}
.sl-srv-counts-warn { color: var(--amber); }
.sl-srv-empty {
  padding: 10px 12px; border-radius: 8px;
  border: 1px dashed var(--border); background: var(--panel);
  font-size: 12.5px; line-height: 1.6; color: var(--text);
}
.sl-srv-empty .muted { display: block; margin: 6px 0 0; max-width: 92ch; }
.sl-srv-empty .sl-actions { margin-top: 10px; }

.sl-srv-rows { display: flex; flex-direction: column; gap: 7px; }
.sl-srv-row {
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel); padding: 8px 11px;
  display: flex; flex-direction: column; gap: 5px;
}
/* The only state worth a colour: a library script claims this name and does
   not match it, so somebody's edit is not where they think it is. */
.sl-srv-row-diff {
  border-color: rgba(210,153,34,0.50); background: rgba(210,153,34,0.06);
}
.sl-srv-main { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.sl-srv-name {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 13px; color: var(--text); font-weight: 600;
}
.sl-srv-meta {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.sl-srv-sha { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.sl-srv-err {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11px; line-height: 1.5; color: #ff8b82; word-break: break-word;
}
.sl-srv-acts { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 2px; }

.sl-srv-b {
  font-size: 10px; font-weight: 700; letter-spacing: .05em;
  padding: 2px 7px; border-radius: 4px; cursor: help;
  background: var(--panel-2); color: var(--muted); border: 1px solid var(--border);
}
/* Already here: the quiet one. Nothing to do. */
.sl-srv-b-same { background: rgba(63,185,80,0.14); color: #6fd18a; border-color: rgba(63,185,80,0.40); }
/* Disagrees with the library copy. The one that needs a decision. */
.sl-srv-b-diff { background: rgba(210,153,34,0.16); color: var(--amber); border-color: rgba(210,153,34,0.55); }
/* Nobody here claims it. Neutral on purpose - it is not a fault. */
.sl-srv-b-new  { background: var(--panel-2); color: var(--muted); border-color: var(--border); }
.sl-srv-b-err  { background: rgba(248,81,73,0.16); color: #ff8b82; border-color: rgba(248,81,73,0.45); }

/* --- one live file, read straight off the host ----------------------- */
.sl-srv-view {
  margin-top: 12px; padding: 10px 12px; border-radius: 8px;
  border: 1px solid rgba(88,166,255,0.35); background: var(--panel);
}
.sl-srv-view-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 13px; color: var(--text); margin-bottom: 9px;
}
.sl-srv-view-head b {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace; color: #79b8ff;
}

/* Live config line under a run row. */
.aa-cfgrow td { padding-top: 0 !important; padding-bottom: 6px !important;
  border-top: none !important; }

/* Group editor: ONE page for create / edit / duplicate (opens as a modal). */
.aa-gm-box { width: min(1040px, 96vw); max-height: 92vh; }
.aa-gm { display: flex; flex-direction: column; gap: 12px; }
.aa-gm-sec { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: var(--panel); }
.aa-gm-h { display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .03em; color: var(--text); }
.aa-gm-h .btn { margin-left: auto; font-weight: 400; }
.aa-gm-grid { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; font-size: 12px; }
.aa-gm-grid > label, .aa-gm-grid > .gm-lbl { display: inline-flex; align-items: center; gap: 6px; }
.aa-gm-grid input:disabled { opacity: .45; }
.aa-gm-test { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.aa-gm-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 14px; border-top: 1px solid var(--border); background: var(--card, var(--bg)); border-radius: 0 0 8px 8px; }

/* "stats since HH:MM" marker when the Live panel counters have a baseline. */
.aa-since {
  margin-left: 6px; padding: 0 7px; border-radius: 9px; font-size: 10.5px;
  color: var(--accent); border: 1px solid var(--accent);
  background: rgba(121,184,255,0.10); white-space: nowrap; cursor: help;
}

/* ===================================================================== */
/* --- Chatting -> Statistics sub-tab (APPEND-ONLY BLOCK) --------------- */
/* Everything above this comment is untouched.                            */
/*                                                                        */
/* chat_statistics.js reuses the report shell (.cr-wrap/.cr-head/.cr-table */
/* /.cr-band/.cr-mde/.cr-buy/.cr-warn/.cr-loading/.cr-err) as is. Only     */
/* what did not exist is added here: a neutral status chip family with a  */
/* "collecting" state (no verdict is not a verdict, so it is grey and      */
/* dashed, never a colour), the 95%-range bars of the persona ranking,     */
/* the script-test form controls and the expandable weekly band.          */
/* ===================================================================== */
.cs-sec { margin: 0 0 24px; padding-top: 14px; border-top: 1px solid var(--border); }
.cs-sec:first-of-type { border-top: none; padding-top: 4px; }
.cs-sec-title { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--text); }
.cs-meta { margin: 0 0 8px; font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.cs-meta b { color: var(--text); font-weight: 600; }
.cs-note { margin: 8px 0 0; max-width: 940px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.cs-note b { color: var(--text); }
/* The backend's own reason for a verdict ("power not reached: ..."). */
.cs-reason { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--text); }
.cs-limits { margin: 4px 0 0; padding-left: 18px; }
.cs-limits li { margin: 2px 0; }

/* Status / source chips. Colour is never the only signal: the words say it. */
.cs-chip {
  display: inline-block; padding: 0 7px; border-radius: 999px; vertical-align: 1px;
  font-size: 10px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; cursor: help;
  color: var(--muted); background: rgba(255,255,255,0.05); border: 1px solid var(--border);
}
.cs-chip.cs-collecting { border-style: dashed; }
.cs-chip.cs-normal { color: var(--text); }
.cs-chip.cs-above { color: #6ee98b; background: rgba(63,185,80,0.12); border-color: rgba(63,185,80,0.45); }
.cs-chip.cs-below { color: #ff7c75; background: rgba(248,81,73,0.12); border-color: rgba(248,81,73,0.45); }
.cs-chip.cs-real  { color: #79b8ff; background: rgba(88,166,255,0.12); border-color: rgba(88,166,255,0.35); }
.cs-chip.cs-est   { color: #f0c674; background: rgba(210,153,34,0.12); border-color: rgba(210,153,34,0.35); }
.cs-chip.cs-lag   { color: #f0c674; background: rgba(210,153,34,0.16); border-color: rgba(210,153,34,0.5); }

/* Script-test form. */
.cs-form { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: flex-start; margin: 6px 0 10px; font-size: 12px; }
.cs-field { display: flex; flex-direction: column; gap: 4px; }
.cs-field > span:first-child { color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.cs-form input[type="date"] {
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 3px 6px; font-size: 12px;
}
.cs-picks { display: flex; flex-wrap: wrap; gap: 4px; max-width: 560px; }
.cs-pick {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--panel-2); font-size: 11.5px; cursor: pointer; user-select: none;
}
.cs-pick input { margin: 0; }
.cs-pick.on { border-color: var(--accent); color: #a9d1ff; background: rgba(88,166,255,0.10); }

/* Persona ranking: the 95% range as a bar, the value as a dot, the fleet
   middle as an amber line. A laggard's bar is amber, and its row says why. */
.cs-bar {
  position: relative; display: inline-block; width: 160px; height: 10px; vertical-align: middle;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: 5px; overflow: hidden;
}
.cs-bar-band { position: absolute; top: 0; bottom: 0; background: rgba(88,166,255,0.30); }
.cs-bar-pt   { position: absolute; top: 0; bottom: 0; width: 2px; background: #79b8ff; }
.cs-bar-med  { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--amber); }
.cs-lagrow .cs-bar-band { background: rgba(210,153,34,0.32); }
.cs-lagrow .cs-bar-pt { background: #f0c674; }
.cs-overall > td { border-top: 2px solid var(--border); }
/* A headline number under the floor: shown, but not sold as a signal. */
.cr-table tbody td.cr-headline.cs-thin { color: var(--muted); font-weight: 500; }

/* The expanded 26-week band under an overview row. */
.cs-detail > td { padding: 10px 12px 12px; background: var(--panel-2); white-space: normal; text-align: left; }
.cs-chart { display: block; max-width: 100%; height: auto; margin: 4px 0 6px; }

/* Verdict colouring of the script test's callout number. */
.cs-verdict-better .cr-band-num { color: #6ee98b; }
.cs-verdict-worse .cr-band-num { color: #ff7c75; }
.cs-verdict-insufficient .cr-band-num { color: var(--muted); }

/* The full methodology text. */
.cs-method {
  margin: 8px 0 0; padding: 10px 12px; max-height: 480px; overflow: auto;
  border: 1px solid var(--border); border-radius: 6px; background: var(--panel-2);
  color: var(--text); font-size: 11.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-word;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
}

/* ===================================================================== */
/* --- Chatting -> Statistics: re-check fixes (2026-09-04, append-only) - */
/* Estimates are not money: an ESTIMATE row that is above / below / in   */
/* band wears amber and a dashed chip, never the red/green money styling. */
/* Also: the like-for-like sub-lines under a REAL count, the totals row,  */
/* the real-money banner, the "show all" toggles and the arm/switch lines */
/* of the script test. Nothing above this block was touched.             */
/* ===================================================================== */
.cs-est-row { background: rgba(210,153,34,0.04); }
.cs-est-row > td:first-child { box-shadow: inset 3px 0 0 rgba(210,153,34,0.55); font-weight: 600; }
.cs-est-row .cr-headline { color: #d8b56a; font-weight: 600; }
.cs-est-above .cr-headline::after { content: " \25B2"; font-size: 9px; color: var(--muted); }
.cs-est-below .cr-headline::after { content: " \25BC"; font-size: 9px; color: var(--muted); }
.cs-est-inband .cr-headline::after { content: " \2013"; font-size: 10px; color: var(--muted); }
.cs-chip.cs-est-status { color: #f0c674; background: rgba(210,153,34,0.10); border-color: rgba(210,153,34,0.40); border-style: dashed; }
.cs-chip.cs-vol { color: #a9d1ff; background: rgba(88,166,255,0.10); border-color: rgba(88,166,255,0.35); }
/* Under a REAL count: the same-days bot claims / replied, and the net $. */
.cs-subline { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 400; line-height: 1.3; color: var(--muted); white-space: nowrap; }
.cs-totals { margin: 4px 0 8px; }
.cs-totals .cr-buy-cell { min-width: 120px; }
.cs-real-warn { margin: 0 0 10px; }
.cs-toggle { margin: 6px 0 0; }
.cs-armline { margin: 0 0 6px; font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.cs-armline b { color: var(--text); font-weight: 600; }
.cs-armline + .cs-armline { margin-top: -2px; }

/* ===================================================================== */
/* --- Chatting -> Statistics v2.1 "simple" (2026-09-04, append-only) -- */
/* The operator page: one period picker, plain sentences, colour only on  */
/* the verdict / tag WORDS (green better, grey normal, amber estimate or  */
/* not comparable, red worse), details behind small links. The .cs-*     */
/* block above is left untouched.                                        */
/* ===================================================================== */
.cs2-sec { margin: 0 0 26px; padding-top: 14px; border-top: 1px solid var(--border); }
.cs2-sec:first-of-type { border-top: none; padding-top: 4px; }
.cs2-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); }
.cs2-what { margin: 2px 0 10px; max-width: 940px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.cs2-summary { margin: 0 0 10px; max-width: 940px; font-size: 13px; line-height: 1.55; color: var(--text); }
.cs2-note { margin: 8px 0 0; max-width: 940px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.cs2-note b { color: var(--text); }
.cs2-head-note { font-size: 11px; color: var(--muted); }
.cs2-toggle { margin: 6px 0 0; }
.cs2-details-body { margin: 6px 0 0; }

/* The one period picker. */
.cs2-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 12px; color: var(--muted); }
.cs2-custom { display: inline-flex; align-items: center; gap: 4px; }
.cs2-custom.on .btn { background: #1f6feb; border-color: #1f6feb; color: white; }
.cs2-picker input[type="number"], .cs2-form input[type="number"] {
  width: 56px; background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 2px 6px; font-size: 12px;
}

/* Small "details" / "show all" links. */
.cs2-link {
  background: none; border: none; padding: 0; margin: 0; cursor: pointer;
  color: var(--accent); font-size: 11.5px; text-decoration: underline; text-underline-offset: 2px;
}
.cs2-link:hover { color: #79b8ff; }

/* Colour lives on words only, never on rows. */
.cs2-good { color: #6ee98b; font-weight: 600; }
.cs2-bad  { color: #ff7c75; font-weight: 600; }
.cs2-est  { color: #f0c674; font-weight: 600; }
.cs2-grey { color: var(--muted); font-weight: 600; }
.cs2-help { cursor: help; border-bottom: 1px dotted rgba(139,148,158,0.7); }
.cs2-tag {
  display: inline-block; padding: 0 6px; border-radius: 999px; vertical-align: 1px; cursor: help;
  font-size: 10px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  color: #f0c674; background: rgba(210,153,34,0.10); border: 1px solid rgba(210,153,34,0.45);
}
/* v2.5.1: the "new script" tag - a brand-new script has no real money yet, so
   there is no estimate to offer. Marked apart from the amber estimate tag (a
   neutral blue) so it never reads as an estimate. */
.cs2-tag.cs4-newscript {
  color: #79b8ff; background: rgba(56,139,253,0.10); border-color: rgba(56,139,253,0.45);
}

/* Section 1: the big per-1,000 number with its normal underneath. */
.cs2-big { font-size: 15px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.cs2-under { display: block; font-size: 10.5px; font-weight: 400; line-height: 1.3; color: var(--muted); }
.cs2-detail > td { padding: 10px 12px 12px; background: var(--panel-2); white-space: normal; text-align: left; }
.cs2-chart { display: block; max-width: 100%; height: auto; margin: 2px 0 6px; }
.cs2-counted { margin-top: 6px; font-size: 12px; color: var(--text); }

/* Section 2: change cards, the two-step form, the one result card. */
.cs2-card {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  margin: 0 0 8px; padding: 10px 14px; max-width: 940px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel);
  font-size: 13px; line-height: 1.5; color: var(--text);
}
.cs2-card .btn { margin-left: auto; }
.cs2-form { margin: 8px 0 0; padding: 10px 14px; max-width: 940px; border: 1px dashed var(--border); border-radius: 8px; font-size: 12.5px; }
.cs2-step { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 6px 0 8px; }
.cs2-step > b { min-width: 210px; color: var(--text); }
.cs2-form select { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 3px 6px; font-size: 12px; }
.cs2-result {
  margin: 10px 0 0; padding: 12px 16px; max-width: 940px;
  border: 1px solid var(--border); border-left: 4px solid var(--muted); border-radius: 0 10px 10px 0;
  background: var(--panel);
}
.cs2-result-sentence { margin-top: 4px; font-size: 14px; line-height: 1.55; color: var(--text); }
.cs2-result-line { margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.cs2-result-line b { color: var(--text); }

/* Section 3: the ranked list. */
.cs2-rank {
  display: grid; grid-template-columns: 22px 90px 56px minmax(120px, 220px) 170px auto;
  gap: 5px 12px; align-items: center; max-width: 940px; font-size: 13px; font-variant-numeric: tabular-nums;
}
.cs2-rank-head { font-size: 11px; color: var(--muted); }
.cs2-rank-n { color: var(--muted); text-align: right; }
.cs2-rank-model { font-weight: 700; color: var(--text); }
.cs2-rank-val { font-weight: 700; text-align: right; color: var(--text); }
.cs2-rank-bar { height: 10px; border: 1px solid var(--border); border-radius: 5px; background: rgba(255,255,255,0.05); overflow: hidden; }
.cs2-rank-bar > span { display: block; height: 100%; background: rgba(121,184,255,0.55); }
.cs2-rank-share { color: var(--muted); white-space: nowrap; }
.cs2-rank-tag { white-space: nowrap; }

/* Section 4: one line per script and the two facts. */
.cs2-trust-line { margin: 4px 0; max-width: 940px; font-size: 13px; line-height: 1.55; color: var(--text); }
.cs2-facts { margin: 8px 0 0; max-width: 940px; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.cs2-facts b { color: var(--text); }

/* Section 6: the About lists and the full method text. */
.cs2-about { max-width: 940px; font-size: 12.5px; line-height: 1.55; color: var(--text); }
.cs2-about ol, .cs2-about ul { margin: 4px 0 10px; padding-left: 20px; }
.cs2-about li { margin: 3px 0; }
.cs2-method {
  margin: 8px 0 0; padding: 10px 12px; max-height: 480px; overflow: auto;
  border: 1px solid var(--border); border-radius: 6px; background: var(--panel-2);
  color: var(--text); font-size: 11.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-word;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
}

/* --- v2.1 plain-reader fixes (2026-09-04, append-only) ------------------ */
/* Every amber word and every dash carries its reason ON the page, in small  */
/* grey text under it; hovers only repeat it. Table cells are nowrap, so the  */
/* cells that hold a reason get their own wrapping.                          */
.cs2-compare {
  margin: 0 0 10px; padding: 6px 10px; max-width: 940px;
  border-left: 3px solid #f0c674; background: rgba(210,153,34,0.07);
  font-size: 12.5px; line-height: 1.5; color: var(--text);
}
.cr-table td.cs2-vcell { white-space: normal; vertical-align: top; max-width: 300px; }
.cs2-why { display: block; margin-top: 1px; font-size: 10.5px; font-weight: 400; line-height: 1.3; color: var(--muted); white-space: normal; }
.cs2-under { white-space: normal; }
/* The word under a banned share keeps its colour: red only for MORE bans. */
.cs2-under.cs2-bad  { color: #ff7c75; font-weight: 600; }
.cs2-under.cs2-good { color: #6ee98b; font-weight: 600; }
.cs2-under.cs2-grey { font-weight: 600; }

/* --- v2.1.2 second read-through (2026-09-04, append-only) ---------------- */
/* A number cell may carry a short grey note under its number (the ratio's   */
/* "on the days real converted covers"): kept narrow and right-aligned so it  */
/* never widens the column.                                                   */
.cr-table td.cr-num .cs2-under { max-width: 130px; margin-left: auto; }

/* ===================================================================== */
/* --- Chatting -> Statistics v2.2 "time" (2026-09-04, append-only) ---- */
/* The main number became "converted within N hours of the fan's first    */
/* reply", so the page grew a second control (how long, and whether only  */
/* the chats that got the link count), an hour-by-hour picture, and a     */
/* wider ranking row. The .cs-* and .cs2-* blocks above are untouched.    */
/* ===================================================================== */

/* The second control, under the period picker. */
.cs3-picker {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: -4px 0 8px; font-size: 12px; color: var(--muted);
}
.cs3-plabel { font-size: 11.5px; color: var(--muted); }
.cs3-gap { display: inline-block; width: 14px; }

/* Section 1: the big share sits on its own line under the bot's count,   */
/* with its normal and the money estimate in small grey under that.       */
.cs3-rateline { display: block; margin-top: 1px; }
.cr-table td.cr-num.cs3-small { font-size: 11.5px; color: var(--muted); }
.cr-table td.cr-num.cs3-small .cs2-under { max-width: 150px; }

/* The details that used to be a section of their own (how many bot       */
/* converted are real, week by week), now under section 1's table.        */
.cs3-details-body {
  margin: 8px 0 0; padding: 10px 14px; max-width: 940px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2);
}
.cs3-details-body .cs2-what { margin-top: 0; }

/* Section 2: how sure the check is, and the before / after picture. */
.cs3-sure { margin-top: 8px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.cs3-sure .cs2-why { margin-top: 2px; }
.cs3-graph { margin-top: 10px; }

/* A legend in plain words under any hour-by-hour picture. */
.cs3-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 2px 0 4px; font-size: 11px; color: var(--muted); }
.cs3-leg { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cs3-swatch { display: inline-block; width: 16px; height: 3px; border-radius: 2px; }
.cs3-swatch-dash {
  height: 0; border-top: 3px dashed currentColor; background: none !important;
  color: inherit; opacity: .95;
}

/* Section 3: every model is ranked now, with the counts it rests on and  */
/* real per 1,000 in its own small column. */
.cs3-rank {
  display: grid;
  grid-template-columns: 22px 92px 58px minmax(110px, 200px) 150px 84px auto;
  gap: 5px 12px; align-items: center; max-width: 1040px;
  font-size: 13px; font-variant-numeric: tabular-nums;
}
.cs3-rank .cs2-rank-head { font-size: 11px; color: var(--muted); }
.cs3-rank .cs2-rank-n { color: var(--muted); text-align: right; }
.cs3-rank .cs2-rank-model { font-weight: 700; color: var(--text); }
.cs3-rank .cs2-rank-val { font-weight: 700; text-align: right; color: var(--text); }
.cs3-rank .cs2-rank-bar { height: 10px; border: 1px solid var(--border); border-radius: 5px; background: rgba(255,255,255,0.05); overflow: hidden; }
.cs3-rank .cs2-rank-bar > span { display: block; height: 100%; background: rgba(121,184,255,0.55); }
.cs3-rank .cs2-rank-share { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.cs3-rank .cs2-rank-real { font-size: 11.5px; color: var(--muted); text-align: right; white-space: nowrap; }
.cs3-rank .cs2-rank-tag { white-space: nowrap; }

/* ===================================================================== */
/* --- Chatting -> Statistics v2.2.1 "declutter" (2026-09-04, append) --- */
/* The operator could not read section 1: every row repeated the same     */
/* four sentences in 10.5px grey. Now every cell holds ONE number and at  */
/* most four grey words; the sentences are said once, in the legend under */
/* the table and in the column hovers. The .cs-*, .cs2-* and .cs3-*       */
/* blocks above are untouched.                                           */
/* ===================================================================== */

/* Section 1's table: one line per row, so the whole table can be read    */
/* down a column. Nothing inside a cell wraps except the verdict hover.   */
.cs4-table table { font-variant-numeric: tabular-nums; }
.cs4-table th, .cs4-table td { padding-top: 5px; padding-bottom: 5px; vertical-align: baseline; }
.cs4-table thead th { line-height: 1.25; white-space: nowrap; }
.cs4-table td.cs4-script { white-space: nowrap; color: var(--muted); }
.cs4-table td.cs2-vcell { white-space: nowrap; max-width: none; vertical-align: baseline; }
/* The main number, and the bot's own count beside it. */
.cs4-pct { font-size: 15px; font-weight: 700; color: var(--text); }
/* v2.5: the judged number is the estimate of real converted (the operator's
   "3"). Same size as the bot share it replaces; the "estimate" tag beside it
   says it is not counted money. */
.cs4-est { font-size: 15px; font-weight: 700; color: var(--text); }
.cs4-table td.cr-num .muted.small { font-size: 10.5px; }
/* "not enough data" is a non-judgement: dimmer than the grey words. */
.cs4-dim { color: var(--muted); opacity: .62; font-weight: 500; }

/* The legend: at most four short lines, each said exactly once. */
.cs4-legend {
  display: flex; flex-direction: column; gap: 2px;
  margin: 8px 0 0; padding: 8px 12px; max-width: 1000px;
  border-left: 3px solid var(--border); background: rgba(255,255,255,0.02);
  font-size: 11.5px; line-height: 1.45; color: var(--muted);
}

/* Section 2: the before / after numbers as a small three-column table. */
.cs4-ba {
  display: grid; grid-template-columns: minmax(120px, 190px) 150px 130px 70px;
  gap: 3px 14px; align-items: baseline; margin: 6px 0 2px; max-width: 620px;
  font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text);
}
.cs4-ba .cs2-rank-head { font-size: 11px; color: var(--muted); }
.cs4-ba-lab { color: var(--muted); white-space: nowrap; }
.cs4-ba-n { text-align: right; }
/* ---------------------------------------------------------------------- */
/* Statistics section 2 (v2.3): the four time curves. Four small pictures  */
/* in a row that wrap on a narrow screen; the key and the legend are said  */
/* once, under the row.                                                    */
.cs5-picker { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; flex-wrap: wrap; }
.cs5-plabel { font-size: 11px; color: var(--muted); }
.cs5-picker select { font-size: 12px; padding: 2px 6px; max-width: 220px; }
.cs5-grid { display: flex; flex-wrap: wrap; gap: 14px 18px; margin: 8px 0 0; }
.cs5-card { flex: 1 1 300px; max-width: 340px; min-width: 260px; }
.cs5-name { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.cs5-chart { display: block; width: 100%; height: auto; max-width: 340px; }
.cs5-lines { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.cs5-lines span { font-size: 11px; line-height: 1.4; color: var(--muted); }
.cs5-thin { font-size: 11.5px; color: var(--muted); opacity: .75; padding: 22px 0 26px; }
/* Said once under the row: the period is shorter than the pictures need. */
.cs5-note { margin: 10px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--muted); }
/* The two-item key: solid = the ideal, dashed = this period. */
.cs5-key { display: flex; gap: 4px 16px; flex-wrap: wrap; margin: 10px 0 0; font-size: 11px; color: var(--muted); }
.cs5-leg { display: inline-flex; align-items: center; gap: 6px; }
.cs5-swatch { display: inline-block; width: 18px; height: 0; border-top-width: 2px; }
.cs5-swatch-ideal { border-top-style: solid; border-top-color: #8b949e; }
.cs5-swatch-now { border-top-style: dashed; border-top-color: #79b8ff; }
/* The legend: five short lines, each said exactly once for the section. */
.cs5-legend {
  display: flex; flex-direction: column; gap: 2px;
  margin: 6px 0 0; padding: 8px 12px; max-width: 1000px;
  border-left: 3px solid var(--border); background: rgba(255,255,255,0.02);
  font-size: 11.5px; line-height: 1.45; color: var(--muted);
}

/* ---------------------------------------------------------------------- */
/* Statistics section 2 (v2.3, redraw): the four time curves, two big       */
/* pictures per row. The operator reads the bold line under a picture and   */
/* stops there; the two grey lines carry the pace; everything else the      */
/* backend sends waits behind "details", closed. The key is drawn inside    */
/* each picture, so nothing under the row explains the two lines again.     */
.cs6-summary {
  margin: 8px 0 2px; max-width: 1100px;
  font-size: 14.5px; line-height: 1.5; font-weight: 600; color: var(--text);
}
.cs6-grid { display: grid; grid-template-columns: 1fr; gap: 22px 24px; margin: 10px 0 0; }
@media (min-width: 1100px) { .cs6-grid { grid-template-columns: 1fr 1fr; } }
.cs6-card { min-width: 0; }
/* v2.9: the card title is a prominent heading now (was a small 13px line the
   operator could barely read) - larger, bold, full-strength colour, and clearly
   bigger than the small grey lines and the x-axis subtitle under the chart. */
.cs6-name { font-size: 15.5px; font-weight: 700; color: var(--text); margin-bottom: 6px; letter-spacing: 0.01em; }
/* v2.9: a shorter box (was min-height 300) to match the shorter viewBox - the
   bars fill it instead of floating in empty space. */
.cs6-chart { display: block; width: 100%; height: auto; min-height: 180px; }
/* The one bold line: the whole point of the picture, in at most eight words. */
.cs6-head {
  margin: 6px 0 0; font-size: 17px; line-height: 1.3; font-weight: 700;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.cs6-good { color: #7ec994; }
.cs6-bad  { color: #dd8a86; }
.cs6-quiet { color: var(--muted); font-weight: 600; font-size: 15px; }
/* At most two grey lines under it, each one short enough to take in at once. */
.cs6-grey { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.cs6-grey span { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
/* The closed fold: the link, then the backend's own sentences. */
.cs6-fold { margin-top: 5px; }
.cs6-more {
  display: flex; flex-direction: column; gap: 3px;
  margin: 5px 0 0; padding: 7px 11px; max-width: 1000px;
  border-left: 3px solid var(--border); background: rgba(255,255,255,0.02);
  font-size: 12px; line-height: 1.45; color: var(--muted);
}
/* The fold is closed by default: `display: flex` above would beat the UA's
   own `[hidden] { display: none }`, so the attribute is honoured here. */
.cs6-more[hidden] { display: none; }
/* One legend line always, the rest behind "how to read". */
.cs6-legend { margin: 16px 0 0; max-width: 1000px; }
.cs6-lead { display: block; font-size: 12.5px; line-height: 1.45; color: var(--muted); }

/* ===================================================================== */
/* --- Chatting -> Statistics v2.4 (2026-09-06, append) ---------------- */
/* Whole days up to yesterday, the real link columns, and a chosen        */
/* verdict window. Section 1 is 12 columns now, so the script name is the */
/* one free-width cell and it is clamped, with the full name in its       */
/* hover. The .cs-*, .cs2-*, .cs3-*, .cs4-*, .cs5-* and .cs6-* blocks     */
/* above are untouched.                                                   */
/* ===================================================================== */

/* Said once, under section 1's picker row. */
.cs7-days {
  margin: -2px 0 9px; max-width: 940px;
  font-size: 11.5px; line-height: 1.45; color: var(--muted);
}

/* The fourth control shares the picker row, so the row has to stay tight:
   the labels are the only text on it that is not a button. */
.cs3-picker .cs3-plabel { white-space: nowrap; }

/* 12 columns fit only if the script name stops growing: 150 px, an
   ellipsis, and the full name in the hover. */
.cs4-table td.cs4-script .cs7-clamp {
  display: inline-block; max-width: 150px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
  cursor: help;
}

/* The one line that appears when the numbers on screen were not built for the
   verdict window the operator picked: same size as the whole-days line, amber
   so it reads as a caveat rather than a fact about the models. */
.cs7-unapplied { color: var(--amber, #d29922); }

/* Section 2, once: why the link picture is a little short of section 1's
   Links sent. Sits under the pictures, above the legend. */
.cs6-note {
  margin: 12px 0 0; max-width: 1000px;
  font-size: 11.5px; line-height: 1.45; color: var(--muted);
}


/* ===================================================================== */
/* --- Chatting -> Statistics v2.6 (2026-09-07, append) --------------- */
/* A Line | Bars toggle on section 2, and a low-key "Good to know" block  */
/* at the very end. The .cs6-* blocks above are untouched.                */
/* ===================================================================== */

/* The "Good to know" block: small type, quiet, no charts. */
.cs6-gtk {
  margin: 20px 0 0; max-width: 1000px; padding: 10px 13px;
  border-left: 3px solid var(--border); background: rgba(255,255,255,0.02);
}
.cs6-gtk-title {
  font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--text); margin-bottom: 5px;
}
.cs6-gtk-line { font-size: 12.5px; line-height: 1.5; color: var(--text); margin: 2px 0; }
.cs6-gtk-line b { font-weight: 600; }
.cs6-gtk-note { font-size: 11.5px; line-height: 1.45; color: var(--muted); margin: 1px 0 6px; }

/* ===================================================================== */
/* --- Chatting -> Statistics v2.7 (2026-09-07, append) --------------- */
/* Section 2 gets a denser x-axis (the axis helper both views share) and, */
/* in the Bars view only, green/red This-period bars: a bar that beats    */
/* the last 6 months in its own hour is green, one that trails is red, a   */
/* near-equal one keeps the neutral blue. The alive picture inverts        */
/* (fewer bans is better). The ideal bars stay grey. Fills are theme-aware */
/* so they read on a light ground too. The line view and section 1 are     */
/* untouched.                                                              */
/* ===================================================================== */

/* The one plain note under the Bars view. */
.cs6-barnote { margin-top: 8px; }

/* This-period bars, coloured against the ideal in the same bucket. Bright */
/* on the dark chart; a prefers-color-scheme override darkens them so they  */
/* stay legible on a light ground. The ideal bars keep their grey fill.     */
.cs6-bar-good { fill: #40c463; }
.cs6-bar-bad  { fill: #f85149; }
@media (prefers-color-scheme: light) {
  .cs6-bar-good { fill: #1a7f37; }
  .cs6-bar-bad  { fill: #cf222e; }
}
/* ---- Manager-side card (Set Info + Control group %) at the top of Modify Creator
   Settings. Theme-match the inputs to the rest of the form and render the Set Info
   free-text + its recent-3 (down-arrow) picker as ONE attached control. ---- */
#creator-managerside-panel input[type="text"],
#creator-managerside-panel input[type="number"] {
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 10px; font-size: 13px;
}
#creator-managerside-panel input:focus { outline: none; border-color: var(--accent); }
#creator-managerside-panel input#settings-info {
  border-top-right-radius: 0; border-bottom-right-radius: 0;
}
#creator-managerside-panel #settings-info-recent-btn {
  margin-left: -6px;                 /* cancel the wrap's 6px gap -> flush with the input */
  padding: 6px 10px !important;      /* match the input height (overrides the inline padding) */
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-left: none;
  border-radius: 0 6px 6px 0;
  font-size: 12px; cursor: pointer; align-self: stretch;
}
#creator-managerside-panel #settings-info-recent-btn:hover {
  background: var(--panel); border-color: var(--accent);
}
#creator-managerside-panel label b { color: var(--text); }


/* Worker filter: a multi-select that looks like the native dropdowns next to it */
.db-wdd { position: relative; display: inline-block; }
.db-wdd > summary { list-style: none; display: inline-flex; align-items: center;
  justify-content: space-between; gap: 10px; min-width: 120px; box-sizing: border-box;
  cursor: pointer; user-select: none; }
.db-wdd > summary::-webkit-details-marker { display: none; }
.db-wdd > summary > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.db-wdd-chev { flex: none; opacity: .85; }
.db-wdd[open] > summary { border-color: var(--accent); }
.db-wdd-panel { position: absolute; z-index: 60; top: calc(100% + 4px); left: 0;
  min-width: 100%; width: max-content; max-height: 300px; overflow-y: auto;
  background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 4px; box-shadow: 0 8px 24px rgba(0,0,0,.45); font-size: 12px;
  color-scheme: dark; scrollbar-width: thin; }
.db-wdd-opt { display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 5px 10px; border-radius: 5px; cursor: pointer; white-space: nowrap; }
.db-wdd-opt:hover { background: rgba(255,255,255,.08); }
.db-wdd-opt.on { background: rgba(88,166,255,.16); }
.db-wdd-tick { color: var(--accent); font-weight: 700; visibility: hidden; }
.db-wdd-opt.on .db-wdd-tick { visibility: visible; }
.db-wdd-sep { height: 1px; background: var(--border); margin: 4px 2px; }
.db-wdd-empty { padding: 5px 10px; color: var(--muted); }
.db-wdd-other { padding: 2px 4px 2px; }
.db-wdd-other input { width: 100%; box-sizing: border-box; background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 5px; padding: 4px 8px; font-size: 12px; }
.db-wdd-other input:focus { outline: none; border-color: var(--accent); }

/* ===================================================================
   Data Base tab - structure & look (2026-10-05). Scoped to #tab-database
   only; purely visual - no control was removed or renamed. Backup of the
   previous files: data/ui_backups/database_tab_20261005_145103/
   =================================================================== */
#tab-database { --dbx-gap: 18px; padding-bottom: 40px; }
#tab-database .db-intro { margin: 20px 28px 0; }
#tab-database .db-intro h2 { font-size: 18px; letter-spacing: .02em; }

/* the two big zones: framed, numbered */
#tab-database > section#db-queries,
#tab-database > section#db-adding {
  margin: var(--dbx-gap) 28px 0; padding: 0 16px 4px;
  background: rgba(22, 27, 34, .45);
  border: 1px solid var(--border); border-radius: 14px;
}
#tab-database .dbx-sec-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 -16px 16px; padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(90deg, rgba(88,166,255,.10), rgba(88,166,255,0) 60%);
  border-radius: 14px 14px 0 0;
}
#tab-database .dbx-sec-head { justify-content: flex-start; text-align: left; }
#tab-database .dbx-sec-head h2 { margin: 0; font-size: 14px; letter-spacing: .06em; flex: 0 0 auto; text-align: left; }
#tab-database .dbx-sec-head .dbx-sec-sub, #tab-database .dbx-sec-head .db-card-sub { margin-left: auto; }
#tab-database .dbx-sec-head .db-card-sub { margin-left: auto; }
#tab-database .dbx-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); color: #0b1220; font-weight: 800; font-size: 12px;
}
#tab-database .dbx-sec-sub { color: var(--muted); font-size: 12px; }

/* cards: header bar + coloured edge so each one clearly starts and ends */
#tab-database .dbx-card {
  position: relative; padding: 0 16px 14px; margin-bottom: 16px;
  border-radius: 12px; border-left: 4px solid var(--dbx-edge, var(--border));
  box-shadow: 0 1px 0 rgba(255,255,255,.02), 0 6px 18px rgba(0,0,0,.18);
}
#tab-database .dbx-card > .db-card-head {
  margin: 0 -16px 12px; padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-2); border-radius: 0 12px 0 0;
  align-items: center; flex-wrap: wrap;
}
#tab-database .dbx-card > .db-card-head .db-card-title {
  font-size: 14px; font-weight: 700; letter-spacing: .01em;
}
#tab-database .dbx-c-filter  { --dbx-edge: #58a6ff; }
#tab-database .dbx-c-lookup  { --dbx-edge: #79c0ff; }
#tab-database .dbx-c-manual  { --dbx-edge: #3fb950; }
#tab-database .dbx-c-runs    { --dbx-edge: #d29922; }
#tab-database .dbx-c-groups  { --dbx-edge: #a371f7; }
#tab-database .dbx-c-reports { --dbx-edge: #db61a2; }

/* fields as boxed chips: label + control read as one unit */
#tab-database .dbx-card .db-controls > .db-ctrl {
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 5px 10px; min-height: 36px;
}
#tab-database .dbx-card .db-controls > .db-ctrl:hover { border-color: #3d4652; }
#tab-database .dbx-card .db-controls { gap: 8px 10px; }
#tab-database .dbx-card .db-controls > .btn.primary { margin-left: auto; min-width: 88px; }

/* "More filters" = a clear sub-panel */
#tab-database .db-more {
  margin-top: 12px; padding: 4px 12px 10px;
  border: 1px dashed var(--border); border-radius: 10px; background: rgba(14,17,22,.4);
}
#tab-database .db-more > summary { padding: 6px 0; }
#tab-database .db-more[open] > summary { color: var(--text); }

/* step headings inside Manual add run */
#tab-database .dbx-step {
  display: flex; align-items: center; gap: 8px;
  margin: 4px 0 8px; font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
#tab-database .dbx-step::after { content: ""; flex: 1; height: 1px; background: var(--border); }
#tab-database .dbx-c-manual .aaf-form { border-radius: 10px; }
#tab-database .db-add-start {
  padding: 12px; border: 1px solid var(--border); border-radius: 10px;
  background: rgba(63,185,80,.04);
}
#tab-database .db-multi {
  margin-top: 14px; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 10px; background: rgba(14,17,22,.35);
}
#tab-database #db-add-mydefaults { padding: 0 2px; }

/* inputs a touch roomier and consistent */
#tab-database .db-textarea { border-radius: 8px; }
#tab-database .db-result { border-top: 1px solid var(--border); padding-top: 12px; }

@media (max-width: 760px) {
  #tab-database .db-intro,
  #tab-database > section#db-queries, #tab-database > section#db-adding { margin-left: 12px; margin-right: 12px; }
  #tab-database .dbx-card .db-controls > .btn.primary { margin-left: 0; }
}

/* ===================================================================
   Breakdown overlay layout (2026-10-07): summary tiles -> warnings ->
   add types side by side -> by worker / ruleset -> full details.
   Scoped to #aa-breakdown-overlay / .bdx only.
   =================================================================== */
#aa-breakdown-overlay .aa-details-box { width: min(1320px, 97vw); max-height: 92vh; }
.bdx { display: flex; flex-direction: column; gap: 14px; }
.bdx-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.bdx-tile { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; }
.bdx-k { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bdx-v { font-size: 20px; font-weight: 700; color: var(--text); line-height: 1.2; }
.bdx-s { font-size: 11px; color: var(--muted); }
.bdx-sec { border: 1px solid var(--border); border-radius: 12px; padding: 0 12px 12px; background: rgba(22,27,34,.5); }
.bdx-sec-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 -12px 10px; padding: 9px 12px;
  border-bottom: 1px solid var(--border); background: var(--panel-2); border-radius: 12px 12px 0 0; font-size: 13px; }
.bdx-n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: #0b1220; font-weight: 800; font-size: 11px; }
.bdx-scroll { overflow-x: auto; }
.bdx-cmp th { white-space: nowrap; }
.bdx-cmp td { vertical-align: top; }
.bdx-cmp td a { color: var(--accent); text-decoration: none; }
.bdx-cmp td a:hover { text-decoration: underline; }
.bdx-sec .aa-bd-block { margin: 8px 0 0; }
.bdx-det { border: 1px solid var(--border); border-radius: 10px; margin-top: 8px; background: var(--panel); }
.bdx-det > summary { cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  list-style: none; border-radius: 10px; }
.bdx-det > summary::-webkit-details-marker { display: none; }
.bdx-det > summary::before { content: "\25B8"; color: var(--muted); transition: transform .15s; }
.bdx-det[open] > summary::before { transform: rotate(90deg); }
.bdx-det[open] > summary { border-bottom: 1px solid var(--border); border-radius: 10px 10px 0 0; background: var(--panel-2); }
.bdx-det > .aa-bd-block { margin: 0; border: none; border-radius: 0 0 10px 10px; }


/* Ghosted-check line (Reports run card) - subtle tone, not red/green (2026-10-07).
   hit = some accounts ghosted (soft amber), clean = checked, 0 ghosted (soft blue-grey). */
.aa-ghost-line { margin: 4px 0 2px; padding: 3px 8px; border-radius: 6px;
  border-left: 2px solid transparent; display: inline-block; }
.aa-ghost-line.clean { background: rgba(120, 160, 210, .07); border-left-color: rgba(120, 160, 210, .40); }
.aa-ghost-line.hit   { background: rgba(214, 160, 70, .09); border-left-color: rgba(214, 160, 70, .55); }
.aa-ghost-part { display: inline-block; padding: 0 7px; margin-right: 4px; border-radius: 4px; }
.aa-ghost-part.clean { background: rgba(120, 160, 210, .08); }
.aa-ghost-part.hit   { background: rgba(214, 160, 70, .12); }
.aa-ghost-pct.clean { color: #9fb6d4; }
.aa-ghost-pct.hit   { color: #d9b36c; }