/* ============================================================
   datastore admin — shared stylesheet / token layer
   (admin architecture v2, design doc §3 — docs/specs/admin-architecture-v2.md)

   Layering (Fowler option → decision):
     OPTION tokens   (:root, raw primitives: color palette, space, radius, type)
     DECISION tokens (:root, semantic: --color-*, --btn-*, --badge-*, consumed
                     by components)
   Components consume DECISION tokens ONLY, never raw palette. One change at
   the decision layer fixes every route that consumes it (contrast fixes live
   here: --color-success #047857, --color-brand #4f46e5, --badge-muted-fg
   #cbd5e1 — AA-verified in bed624b).

   Anti-rule: new views must NOT ship their own <style> blocks; shared
   component classes (.btn, .badge, .table, filters, pager, modal) live here.
   ============================================================ */

/* ---------- Option tokens (raw primitives) ---------- */
:root {
  /* color palette (slate-based) */
  --slate-950: #0b1120;
  --slate-900: #0f172a;
  --slate-800: #1e293b;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748b;
  --slate-400: #94a3b8;
  --slate-300: #cbd5e1;
  --slate-200: #e2e8f0;
  --slate-100: #f1f5f9;
  --slate-50:  #f8fafc;
  --green-700: #047857;   /* AA-safe green (was #059669, 3.77:1 FAIL) */
  --indigo-600: #4f46e5;  /* AA-safe indigo (was #6366f1, 4.47:1 FAIL) */
  --indigo-700: #4338ca;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --red-900: #7f1d1d;
  --red-950: #450a0a;
  --amber-500: #f59e0b;
  --amber-900: #78350f;
  --amber-950: #451a03;
  --green-900: #14532d;
  --green-950: #052e16;

  /* space scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;

  /* typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs: 11px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 24px;
}

/* ---------- Decision tokens (semantic — components consume these) ---------- */
:root {
  --color-bg: var(--slate-900);
  --color-surface: var(--slate-800);
  --color-surface-alt: var(--slate-950);
  --color-border: var(--slate-700);
  --color-border-soft: var(--slate-600);
  --color-text: var(--slate-200);
  --color-text-bright: var(--slate-50);
  --color-text-muted: var(--slate-400);
  --color-text-faint: var(--slate-500);

  --color-brand: var(--indigo-600);
  --color-brand-hover: var(--indigo-700);
  --color-brand-fg: #ffffff;
  --color-success: var(--green-700);
  --color-success-fg: #bbf7d0;
  --color-danger: var(--red-500);
  --color-danger-bg: var(--red-900);
  --color-danger-fg: #fca5a5;

  --btn-primary-bg: var(--indigo-600);
  --btn-primary-bg-hover: var(--indigo-700);
  --btn-primary-fg: var(--slate-50);
  --btn-secondary-bg: var(--slate-700);
  --btn-secondary-bg-hover: var(--slate-600);
  --btn-secondary-fg: var(--slate-200);
  --btn-success-bg: var(--green-700);
  --btn-success-bg-hover: #166534;
  --btn-success-fg: #bbf7d0;

  --badge-muted-bg: var(--slate-700);
  --badge-muted-fg: var(--slate-300);        /* 6.94:1 on --slate-700 (AA) */
  --badge-active-bg: var(--green-900);
  --badge-active-fg: #86efac;
  --badge-superseded-bg: var(--slate-700);
  --badge-superseded-fg: var(--slate-400);
  --badge-draft-bg: var(--slate-700);
  --badge-draft-fg: var(--slate-300);

  --link-fg: #93c5fd;
  --link-fg-hover: var(--slate-50);
  --focus-ring: 0 0 0 3px rgba(79, 70, 229, 0.45);
}

/* ---------- Reset / base shell ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

header.topbar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 0 var(--space-6);
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.brand { font-size: 18px; font-weight: 700; color: var(--slate-50); white-space: nowrap; }
.brand span { color: var(--color-brand); }
.topbar-right { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }

nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
nav a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: var(--fs-md);
  font-weight: 500;
  margin-left: 20px;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
nav a:hover { color: var(--slate-100); }
nav a.active { color: var(--slate-50); border-bottom-color: var(--color-brand); }
nav a:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; border-radius: 2px; }

.logout-form { margin-left: 20px; display: inline-flex; }
.logout-btn {
  background: transparent;
  border: 1px solid var(--color-border-soft);
  color: var(--slate-300);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
}
.logout-btn:hover { background: var(--slate-700); color: var(--slate-50); border-color: var(--slate-500); }

main {
  flex: 1;
  width: 100%;
  max-width: 1100px;
  min-width: 0;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) 48px;
}

.page-head { margin-bottom: 28px; }
.page-head h1 { font-size: var(--fs-xl); color: var(--slate-50); margin-bottom: var(--space-1); }
.page-head p { color: var(--color-text-muted); font-size: var(--fs-md); }

footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--slate-800);
  color: var(--color-text-faint);
  font-size: 12px;
}

/* ---------- Shared component classes (consumed by every view) ---------- */

/* Buttons */
.btn {
  border: none; border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.btn:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--color-brand); outline-offset: 2px;
}
.btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); }
.btn-primary:hover { background: var(--btn-primary-bg-hover); }
.btn-secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-fg); }
.btn-secondary:hover { background: var(--btn-secondary-bg-hover); }
.btn-success { background: var(--btn-success-bg); color: var(--btn-success-fg); }
.btn-success:hover { background: var(--btn-success-bg-hover); }
.btn-danger { background: var(--color-danger-bg); color: var(--color-danger-fg); }
.btn-danger:hover { background: var(--red-600); color: var(--slate-50); }
.btn-sm { padding: 4px 10px; font-size: 12px; border-radius: var(--radius-sm); }

/* Badges */
.badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 600; white-space: nowrap;
}
.badge.active { background: var(--badge-active-bg); color: var(--badge-active-fg); }
.badge.draft { background: var(--badge-draft-bg); color: var(--badge-draft-fg); }
.badge.superseded { background: var(--badge-superseded-bg); color: var(--badge-superseded-fg); }
.badge.muted { background: var(--badge-muted-bg); color: var(--badge-muted-fg); }
/* Registry status + provenance chips (t_40507910). Declared HERE, in the shared
   badge block, because both the brand registry and the identity console render
   them — a badge modifier is shared vocabulary, not a per-view style. The
   modifier names are the shipped registry hooks (brand-status-*, prov-*). */
.badge.brand-status-proposed { background: var(--amber-900); color: #fde68a; }
.badge.brand-status-confirmed { background: var(--badge-active-bg); color: var(--badge-active-fg); }
.badge.brand-status-rejected { background: var(--color-danger-bg); color: var(--color-danger-fg); }
.badge.prov-seed { background: var(--badge-muted-bg); color: var(--badge-muted-fg); }
.badge.prov-manual { background: var(--badge-active-bg); color: var(--badge-active-fg); }
.badge.prov-gs1 { background: #1e3a8a; color: #93c5fd; }
.badge.prov-source-field { background: var(--amber-900); color: #fde68a; }
.badge.prov-tail-harvest { background: #4a044e; color: #e9d5ff; }
.badge.prov-canonical-brand { background: #164e63; color: #67e8f9; }

/* Tables */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 10px 14px; font-size: 12.5px; border-bottom: 1px solid var(--slate-800); vertical-align: middle; }
.table thead tr { background: var(--color-surface-alt); }
.table th { color: var(--color-text-muted); font-weight: 600; text-transform: uppercase; font-size: var(--fs-xs); letter-spacing: .04em; }
.table tbody tr:hover { background: #24324a; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Muted text / mono */
.muted { color: var(--color-text-muted); }
.mono { font-family: var(--font-mono); font-size: 12px; }

/* Filters (form) */
.filter-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: var(--space-4); }
.filter-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--color-text-muted); }
.filter-form select, .filter-form input {
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  color: var(--color-text); padding: 7px 10px; font-size: var(--fs-sm); min-width: 160px;
}
.filter-form input { min-width: 240px; }
.btn-filter { background: var(--btn-primary-bg); color: var(--btn-primary-fg); border: none; border-radius: var(--radius-sm); padding: 8px 16px; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.btn-filter:hover { background: var(--btn-primary-bg-hover); }
.btn-reset, .filter-clear { background: var(--btn-secondary-bg); color: var(--color-text); border-radius: var(--radius-sm); padding: 8px 16px; font-size: var(--fs-sm); text-decoration: none; }
.btn-reset:hover, .filter-clear:hover { background: var(--btn-secondary-bg-hover); }

/* Pagination */
.pager { display: flex; align-items: center; gap: 14px; margin: 12px 0 4px; flex-wrap: wrap; }
.pager-link { background: var(--btn-secondary-bg); color: var(--color-text); border: none; border-radius: var(--radius-sm); padding: 6px 14px; font-size: var(--fs-sm); font-weight: 600; text-decoration: none; cursor: pointer; }
.pager-link:hover { background: var(--color-brand); }
.pager-disabled { color: var(--slate-600); font-size: var(--fs-sm); padding: 6px 14px; }
.pager-count { color: var(--color-text-muted); font-size: 12.5px; }

/* Empty table row */
.empty { padding: 30px 18px; text-align: center; color: var(--color-text-faint); white-space: normal; }

/* DB note (unavailable banner) */
.db-note { background: var(--red-900); border: 1px solid var(--red-600); color: #fecaca; border-radius: var(--radius-md); padding: 12px 16px; margin-bottom: 20px; font-size: var(--fs-sm); }

/* ---------- Shared searchable category multi-select (CategorySelect) ---------- */
.category-select { position: relative; }
.cs-control {
  display: flex; align-items: center; gap: 6px;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 4px 8px;
}
.cs-control:focus-within { border-color: var(--color-brand); }
.cs-search {
  flex: 1; min-width: 0; background: transparent; border: none; outline: none;
  color: var(--slate-50); font-size: var(--fs-md); padding: 6px 4px;
}
.cs-clear {
  background: var(--slate-700); color: var(--color-text); border: none; border-radius: var(--radius-sm);
  width: 24px; height: 24px; cursor: pointer; font-size: 15px; line-height: 1;
}
.cs-clear:hover { background: var(--slate-600); }
.cs-results {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
  margin-top: var(--space-1); max-height: 260px; overflow-y: auto;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
}
.cs-result {
  padding: var(--space-2) var(--space-3); font-size: var(--fs-sm); color: var(--color-text); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-result:hover, .cs-result.active { background: var(--slate-700); color: var(--slate-50); }
.cs-result .cs-result-id { color: var(--slate-500); margin-left: 8px; font-size: 12px; }
.cs-no-match { padding: 10px 12px; font-size: var(--fs-sm); color: var(--color-text-muted); }
.cs-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-2); }
.cs-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #16213a; border: 1px solid var(--color-border); border-radius: 999px;
  padding: 4px 6px 4px 10px; font-size: 12.5px; color: var(--color-text);
}
.cs-chip-x { background: transparent; color: var(--color-text-muted); border: none; border-radius: 50%; width: 18px; height: 18px; cursor: pointer; font-size: 14px; line-height: 1; }
.cs-chip-x:hover { color: #fca5a5; }
.cat-empty { color: var(--slate-500); font-size: var(--fs-sm); }

/* ---------- Shared inline confirm dialog (replaces native window.confirm) ---------- */
.confirm-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(2, 6, 23, 0.6);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 18vh 24px 24px;
}
.confirm-backdrop[hidden] { display: none; }
.confirm-dialog {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  width: 100%; max-width: 420px; padding: 20px 22px;
}
.confirm-title { font-size: var(--fs-lg); font-weight: 600; color: var(--slate-50); margin-bottom: var(--space-2); }
.confirm-message { font-size: var(--fs-md); color: var(--color-text-muted); line-height: 1.5; margin-bottom: 20px; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 10px; }
.confirm-cancel { background: var(--slate-700); color: var(--color-text); }
.confirm-cancel:hover { background: var(--slate-600); }
.confirm-confirm { background: var(--color-brand); color: #fff; }
.confirm-confirm:hover { background: var(--color-brand-hover); }
.confirm-confirm.danger { background: var(--red-500); }
.confirm-confirm.danger:hover { background: var(--red-600); }

/* ---------- Factors section (token-only) ---------- */
.factors-section { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: 18px 20px; margin-bottom: 24px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.section-head h2 { font-size: 17px; color: var(--slate-50); }
.factor-key { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.scope-tag { background: var(--slate-700); color: var(--slate-300); border-radius: var(--radius-sm); padding: 1px 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; }
.factor-name { font-weight: 600; color: var(--slate-50); }
.factor-notes { margin-top: 2px; }
.factor-notes .notes { color: var(--color-text-faint); font-size: 12px; }
.factor-value { font-family: var(--font-mono); color: var(--slate-50); white-space: nowrap; }
.factor-value .unit { color: var(--color-text-faint); font-family: var(--font-sans); font-size: 11px; }
.badge.src-hcp-rgph-2024, .badge.src-hcp-rgph-2014 { background: #164e63; color: #67e8f9; }
.badge.src-euromonitor-2019 { background: #3b0764; color: #d8b4fe; }
.badge.src-oc-bdce { background: #1e3a8a; color: #93c5fd; }
.badge.src-derived { background: #713f12; color: #fde68a; }
.badge.src-manual { background: var(--green-900); color: #86efac; }
.badge.conf-sor { background: var(--slate-700); color: var(--slate-300); }
.badge.conf-derived { background: #713f12; color: #fde68a; }
.badge.st-active { background: var(--green-900); color: #86efac; }
.badge.st-draft { background: var(--slate-700); color: var(--slate-300); }
.badge.st-superseded { background: var(--slate-700); color: var(--slate-400); }
.prior-needed { color: var(--amber-500); font-size: 12px; font-style: italic; }
.factor-actions { display: flex; gap: 6px; white-space: nowrap; }
.factor-actions button {
  border: none; border-radius: var(--radius-sm); padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.btn-edit { background: #312e81; color: #c7d2fe; }
.btn-edit:hover { background: var(--color-brand); }
.btn-history { background: var(--slate-700); color: var(--slate-300); }
.btn-history:hover { background: var(--slate-600); }
.history-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--color-text-muted); font-size: 12px; }

/* Factors edit/history modal (reuses the identity console modal contract) */
.edit-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(2,6,23,0.7); display: flex; align-items: flex-start; justify-content: center; padding: 8vh 24px 24px; }
.edit-backdrop[hidden] { display: none; }
.edit-dialog { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: 0 20px 50px rgba(0,0,0,0.5); width: 100%; max-width: 640px; max-height: 84vh; display: flex; flex-direction: column; }
.edit-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--color-border); }
.edit-head h3 { font-size: var(--fs-lg); color: var(--slate-50); }
.edit-close { background: transparent; border: none; color: var(--color-text-muted); font-size: 22px; cursor: pointer; line-height: 1; }
.edit-close:hover { color: var(--slate-50); }
.edit-body { padding: 18px 20px; overflow-y: auto; }
.edit-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.edit-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--color-text-muted); }
.edit-field.full { grid-column: 1 / -1; }
.edit-field input, .edit-field textarea, .edit-field select { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text); padding: 7px 10px; font-size: var(--fs-sm); }
.edit-field textarea { resize: vertical; min-height: 60px; }
.edit-actions { display: flex; gap: 10px; align-items: center; margin-top: var(--space-4); }
.btn-save { background: var(--btn-primary-bg); color: var(--btn-primary-fg); border: none; border-radius: var(--radius-sm); padding: 8px 18px; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.btn-save:hover { background: var(--btn-primary-bg-hover); }
.btn-cancel { background: var(--slate-700); color: var(--color-text); border: none; border-radius: var(--radius-sm); padding: 8px 18px; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.btn-cancel:hover { background: var(--slate-600); }
.edit-status { font-size: 12.5px; }
.edit-status.ok { color: #86efac; }
.edit-status.err { color: #fca5a5; }
.edit-meta { font-size: 12px; color: var(--color-text-muted); margin-bottom: 14px; }
.version-confirm { background: #16213a; border: 1px dashed var(--color-border); border-radius: var(--radius-md); padding: 10px 12px; margin: 12px 0; font-size: 12.5px; color: var(--color-text-muted); line-height: 1.5; }
.audit-block { margin-top: 18px; border-top: 1px solid var(--color-border); padding-top: 14px; }
.audit-block h4 { font-size: 12px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.audit-list { max-height: 180px; overflow-y: auto; }
.audit-item { padding: 6px 0; border-bottom: 1px solid var(--slate-800); font-size: 12px; color: var(--slate-300); }
.audit-item .a-field { color: var(--link-fg); font-weight: 600; }
.audit-item .a-when { color: var(--color-text-faint); font-size: 11px; }
.audit-item code { color: #fde68a; background: var(--color-bg); padding: 0 4px; border-radius: 4px; font-size: 11px; }
.version-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--slate-800); font-size: 12.5px; }
.version-row .v-when { color: var(--color-text-faint); font-size: 11px; min-width: 130px; }
.version-row .v-meta { flex: 1; color: var(--slate-300); }
.version-row .v-meta .mono { color: var(--slate-50); }
.version-row.current { background: #16213a; border-left: 3px solid var(--color-success); padding-left: 10px; }
.history-empty { color: var(--color-text-faint); font-size: 13px; padding: 12px 0; }

@media (max-width: 720px) {
  .edit-fields { grid-template-columns: 1fr; }
}

/* ---------- Stores section (unified registry, token-only) ---------- */
.stores-section { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: 18px 20px; margin-bottom: 24px; }
.store-chain { font-weight: 600; color: var(--slate-50); text-transform: capitalize; }
.store-name { font-weight: 600; color: var(--slate-50); }
.store-sources { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.src-tag { background: var(--slate-700); color: var(--slate-300); border-radius: var(--radius-sm); padding: 1px 6px; font-size: 10px; font-weight: 600; }
.store-format { font-weight: 500; color: var(--slate-50); }
.format-raw { font-size: 11px; }
.traffic-cell { white-space: nowrap; }
.traffic-live { color: #86efac; font-weight: 700; font-family: var(--font-mono); }
.traffic-when { font-size: 11px; }
.badge-active { background: var(--badge-active-bg); color: var(--badge-active-fg); }
.badge-inactive { background: var(--red-900); color: #fca5a5; }
.badge-unknown { background: var(--badge-muted-bg); color: var(--badge-muted-fg); }
.join-note { background: #16213a; border: 1px dashed var(--color-border); border-radius: var(--radius-md); padding: 10px 12px; margin: 12px 0; font-size: 12.5px; color: var(--color-text-muted); line-height: 1.5; }
.h-unavailable { color: #fca5a5; }
.read-only-note { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--slate-800); color: var(--color-text-faint); font-size: 12.5px; }
.store-factor-cell { white-space: nowrap; }
.sf-value { font-family: var(--font-mono); color: var(--slate-50); white-space: nowrap; }
.sf-value .unit { color: var(--color-text-faint); font-family: var(--font-sans); font-size: 11px; }
.sf-actions { display: flex; gap: 6px; margin-top: 4px; }
.sf-actions button {
  border: none; border-radius: var(--radius-sm); padding: 3px 9px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.prior-needed { color: var(--amber-500); font-size: 12px; font-style: italic; }

/* ---------- Wave 2.5: entity-type nav (sub-nav strip) ---------- */
.subnav {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border);
  padding: 8px var(--space-6);
}
.subnav a {
  color: var(--color-text-muted); text-decoration: none; font-size: 13px; font-weight: 500;
  padding: 4px 12px; border-radius: 999px;
}
.subnav a:hover { color: var(--slate-100); background: var(--slate-700); }
.subnav a.active { color: var(--slate-50); background: var(--color-brand); }

/* ---------- Products section ---------- */
.products-filter { margin-bottom: var(--space-4); }
.products-filter select { min-width: 220px; }
.products-browser { display: flex; flex-direction: column; gap: 20px; }
.back-link { color: var(--link-fg); font-size: 13px; text-decoration: none; display: inline-block; margin-bottom: 8px; }
.back-link:hover { color: var(--slate-50); text-decoration: underline; }
.page-head code { font-family: var(--font-mono); color: var(--link-fg); }

/* Data table browser (shared by Products + legacy per-source /sources/:name/data) */
.data-table { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.table-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--color-border); }
.table-name { font-size: 16px; font-weight: 700; color: var(--slate-50); }
.table-name code { font-family: var(--font-mono); color: var(--slate-50); }
.table-meta { color: var(--color-text-muted); font-size: 12px; }
.table-meta.table-error { color: var(--color-danger-fg); font-weight: 600; }
.data-table-body { width: 100%; border-collapse: collapse; }
.data-table-body th, .data-table-body td { text-align: left; padding: 10px 14px; font-size: 12px; border-bottom: 1px solid var(--slate-800); vertical-align: top; white-space: nowrap; }
.data-table-body thead tr { background: var(--color-surface-alt); }
.data-table-body th { color: var(--color-text-muted); font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: .04em; font-family: var(--font-mono); }
.data-table-body tbody tr:last-child td { border-bottom: none; }
.data-table-body tbody tr:hover { background: #24324a; }
.cell-null { color: var(--color-text-faint); font-style: italic; }
.cell-json pre { font-family: var(--font-mono); font-size: 11px; line-height: 1.4; color: #a5b4fc; margin: 0; white-space: pre-wrap; word-break: break-word; }

/* ---------- Operations section ---------- */
.op-cards { display: flex; flex-direction: column; gap: 16px; }
.op-card {
  display: flex; align-items: center; gap: 14px; text-decoration: none;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl);
  padding: 18px 22px; transition: border-color .12s ease, background .12s ease;
}
.op-card:hover { border-color: var(--color-brand); background: var(--slate-700); }
.op-card-title { font-size: 17px; font-weight: 700; color: var(--slate-50); min-width: 130px; }
.op-card-desc { flex: 1; color: var(--color-text-muted); font-size: 13px; line-height: 1.45; }
.op-card-arrow { color: var(--color-brand); font-size: 20px; }

/* ============================================================
   Wave 2.5: migrated per-view <style> blocks (from views touched
   in the entity-type nav restructure). Appended so these rules
   override the token base exactly as the per-page <style> blocks
   used to (they loaded after the shared stylesheet).
   ============================================================ */

/* --- view: alerts.html --- */

  .alerts-section { margin-bottom: 28px; }
  .section-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
  .section-head h2 { font-size: 18px; color: #f8fafc; }
  .cfg-note { color: #64748b; font-size: 12px; }
  .cfg-counts { color: #e2e8f0; font-size: 14px; font-weight: 600; }
  .cfg-db-note { color: #fca5a5; font-size: 13px; margin: 0 0 12px; }
  .cfg-db-note[hidden] { display: none; }

  .smtp-form { background: #1e293b; border: 1px solid #334155; border-radius: 12px; padding: 20px; }
  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .form-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em; }
  .form-grid input {
    background: #0f172a; border: 1px solid #334155; border-radius: 8px;
    padding: 9px 12px; color: #f8fafc; font-size: 14px; text-transform: none; letter-spacing: normal;
  }
  .form-grid input:focus { outline: none; border-color: #6366f1; }
  .pw-hint { font-weight: 400; color: #64748b; font-size: 11.5px; text-transform: none; }
  .pw-state.set { color: #86efac; }
  .pw-state.unset { color: #94a3b8; }
  .form-actions { display: flex; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
  .btn-save-smtp { background: #4f46e5; color: #fff; border: none; border-radius: 8px; padding: 9px 18px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
  .btn-save-smtp:hover { background: #4338ca; }
  .btn-test { background: #1e3a8a; color: #93c5fd; border: 1px solid #1e40af; border-radius: 8px; padding: 9px 16px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
  .btn-test:hover { background: #1e40af; color: #dbeafe; }
  .test-recipient-wrap label { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: #94a3b8; font-weight: 600; }
  .test-recipient-wrap input { background: #0f172a; border: 1px solid #334155; border-radius: 8px; padding: 8px 10px; color: #f8fafc; font-size: 13px; }
  .test-result { margin-top: 14px; padding: 12px 14px; border-radius: 10px; font-size: 13.5px; font-weight: 500; white-space: pre-wrap; }
  .test-result.ok { background: #14532d; border: 1px solid #166534; color: #bbf7d0; }
  .test-result.fail { background: #451a03; border: 1px solid #92400e; color: #fcd34d; }
  .test-result[hidden] { display: none; }

  .alerts-table-wrap { background: #1e293b; border: 1px solid #334155; border-radius: 12px; overflow: hidden; }
  .alerts-table { width: 100%; border-collapse: collapse; }
  .alerts-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; padding: 12px 16px; border-bottom: 1px solid #334155; }
  .alerts-table td { padding: 12px 16px; border-bottom: 1px solid #1e293b; color: #e2e8f0; font-size: 14px; vertical-align: middle; }
  .alerts-table tbody tr:last-child td { border-bottom: none; }
  .alerts-table tbody tr:hover { background: #1e293b; }
  .pname { font-weight: 600; color: #f8fafc; }
  .pname .project-link { color: #f8fafc; text-decoration: none; }
  .pname .project-link:hover { color: #93c5fd; text-decoration: underline; }
  .ac-email { background: #0f172a; border: 1px solid #334155; border-radius: 8px; padding: 7px 10px; color: #f8fafc; font-size: 13px; min-width: 220px; }
  .ac-email:disabled { opacity: .5; }
  .btn-save-ac { background: #1e3a8a; color: #93c5fd; border: 1px solid #1e40af; border-radius: 8px; padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
  .btn-save-ac:hover { background: #1e40af; color: #dbeafe; }
  .btn-save-ac:disabled { opacity: .5; cursor: not-allowed; }
  .empty { padding: 40px 18px; text-align: center; color: #64748b; }
  .badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
  .badge.archived { background: #334155; color: #cbd5e1; }
  .toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
  .toggle input { accent-color: #6366f1; cursor: pointer; }
  .status-text.enabled { color: #86efac; font-weight: 600; }
  .status-text.disabled { color: #64748b; font-weight: 600; }
  .status-text.unconfigured { color: #94a3b8; font-style: italic; }

/* --- view: dashboard.html --- */

  .quick-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 32px; }
  .stat-card { background: #1e293b; border: 1px solid #334155; border-radius: 10px; padding: 18px; }
  .stat-label { color: #94a3b8; font-size: 13px; margin-bottom: 6px; }
  .stat-value { color: #f8fafc; font-size: 26px; font-weight: 700; }
  .stats-legend {
    font-size: 12px; color: #94a3b8; margin: -16px 0 24px;
    padding: 8px 14px; background: #16213a; border: 1px solid #334155;
    border-radius: 8px; max-width: 720px;
  }
  .legend-other { color: #fbbf24; font-weight: 600; }
  .sources h2, .actions h2 { font-size: 16px; color: #cbd5e1; margin-bottom: 14px; }
  .source-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 16px; max-width: 1000px; }
  .source-card { background: #1e293b; border: 1px solid #334155; border-radius: 10px; padding: 18px; }
  .source-link { color: #93c5fd; text-decoration: none; }
  .source-link:hover { color: #f8fafc; text-decoration: underline; }
  .source-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
  .source-name { font-size: 16px; font-weight: 600; color: #f8fafc; }
  .badge { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
  .badge.online { background: #14532d; color: #86efac; }
  .badge.offline { background: #7f1d1d; color: #fca5a5; }
  .badge.idle { background: #1e3a8a; color: #93c5fd; }
  .badge.completed, .badge.success { background: #14532d; color: #86efac; }
  .badge.failed, .badge.error { background: #7f1d1d; color: #fca5a5; }
  .badge.running, .badge.in_progress { background: #1e3a8a; color: #93c5fd; }
  .badge.pending { background: #334155; color: #cbd5e1; }
  .badge.unknown { background: #334155; color: #cbd5e1; }
  .source-meta > div { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid #1e293b; }
  .m-label { color: #94a3b8; font-size: 13px; }
  .m-value { color: #e2e8f0; font-size: 13px; }

  .fetch-form { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
  .field { display: flex; flex-direction: column; gap: 6px; }
  .field-row { display: flex; flex-wrap: wrap; gap: 24px; }
  .field-row .field { flex: 1; min-width: 180px; }
  .fetch-form label, .fetch-form .field-label { color: #94a3b8; font-size: 13px; font-weight: 500; }
  .field-hint { color: #64748b; font-weight: 400; font-size: 12px; }
  .fetch-form select, .fetch-form input[type="text"], .fetch-form input[type="number"], .fetch-form input[type="url"] {
    background: #1e293b; border: 1px solid #334155; border-radius: 8px;
    color: #f8fafc; font-size: 14px; padding: 9px 12px; outline: none;
  }
  .fetch-form select:focus, .fetch-form input:focus { border-color: #6366f1; }
  .fetch-panels { display: flex; flex-direction: column; gap: 16px; }
  .fetch-source-panel { display: flex; flex-direction: column; gap: 16px; padding: 14px; border: 1px solid #334155; border-radius: 10px; background: #16213a; }
  .fetch-source-panel[hidden] { display: none; }
  .scope-preview {
    font-size: 13px; color: #cbd5e1; background: #0b1120;
    border: 1px solid #334155; border-radius: 8px; padding: 10px 14px;
    min-height: 18px; line-height: 1.5;
  }
  .scope-preview.scope-all { border-color: #b45309; color: #fcd34d; }
  .proj-note { font-size: 13px; color: #cbd5e1; }
  .proj-note strong { color: #f8fafc; }
  .proj-note.proj-ok { color: #86efac; }
  .proj-note.proj-unrunnable { color: #fca5a5; }
  .proj-note.proj-adhoc { color: #fbbf24; }
  .toggle-label { display: flex; align-items: center; gap: 8px; cursor: pointer; color: #cbd5e1; }
  .toggle-label input { accent-color: #6366f1; }
  .submit-row { display: flex; align-items: center; gap: 16px; margin-top: 4px; }
  .btn-primary {
    background: #4f46e5; color: #fff; border: none; border-radius: 8px;
    padding: 11px 18px; font-size: 14px; font-weight: 600; cursor: pointer;
  }
  .btn-primary:hover { background: #4338ca; }
  .btn-primary:disabled { opacity: 0.6; cursor: default; }
  .fetch-status { font-size: 13px; font-weight: 500; }
  .fetch-status a { color: #93c5fd; text-decoration: none; }
  .fetch-status a:hover { text-decoration: underline; }
  .fetch-status.ok { color: #86efac; }
  .fetch-status.err { color: #fca5a5; }

/* --- view: data.html --- */
  .back-link { color: #93c5fd; font-size: 13px; text-decoration: none; }
  .back-link:hover { color: #f8fafc; }
  .page-head code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #93c5fd; }
  .data-sections { display: flex; flex-direction: column; gap: 20px; }
  .data-table { background: #1e293b; border: 1px solid #334155; border-radius: 10px; overflow: hidden; }
  .table-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid #334155; }
  .table-name { font-size: 16px; font-weight: 700; color: #f8fafc; }
  .table-name code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #f8fafc; }
  .table-meta { color: #94a3b8; font-size: 12px; }
  .table-meta.table-error { color: #fca5a5; font-weight: 600; }
  .table-scroll { overflow-x: auto; }
  .data-table-body { width: 100%; border-collapse: collapse; }
  .data-table-body th, .data-table-body td { text-align: left; padding: 10px 14px; font-size: 12px; border-bottom: 1px solid #1e293b; vertical-align: top; white-space: nowrap; }
  .data-table-body thead tr { background: #0f172a; }
  .data-table-body th { color: #94a3b8; font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: .04em; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
  .data-table-body tbody tr:last-child td { border-bottom: none; }
  .data-table-body tbody tr:hover { background: #24324a; }
  .cell-null { color: #64748b; font-style: italic; }
  .cell-json pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; line-height: 1.4; color: #a5b4fc; margin: 0; white-space: pre-wrap; word-break: break-word; }
  .empty { padding: 40px 18px; text-align: center; color: #64748b; white-space: normal; }

/* --- view: error.html --- */

  .error-page {
    text-align: center;
    padding: 72px 24px 96px;
  }
  .error-code {
    font-size: 64px;
    font-weight: 800;
    color: #6366f1;
    letter-spacing: 2px;
    line-height: 1;
    margin-bottom: 12px;
  }
  .error-page h1 {
    font-size: 24px;
    color: #f8fafc;
    margin-bottom: 10px;
  }
  .error-message {
    color: #94a3b8;
    font-size: 15px;
    line-height: 1.6;
    max-width: 520px;
    margin: 0 auto 28px;
  }
  .error-back a {
    color: #cbd5e1;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid #475569;
    border-radius: 8px;
    padding: 9px 18px;
    display: inline-block;
  }
  .error-back a:hover {
    background: #1e293b;
    color: #f8fafc;
    border-color: #64748b;
  }

/* --- view: identity.html --- */
  .back-link { color: #93c5fd; font-size: 13px; text-decoration: none; }
  .back-link:hover { color: #f8fafc; }
  .db-note { background: #7f1d1d; border: 1px solid #b91c1c; color: #fecaca; border-radius: 8px; padding: 12px 16px; margin-bottom: 20px; font-size: 13px; }
  .console-section { background: #1e293b; border: 1px solid #334155; border-radius: 12px; padding: 18px 20px; margin-bottom: 24px; }
  .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
  .section-head h2 { font-size: 17px; color: #f8fafc; }
  .muted { color: #94a3b8; font-size: 12px; }
  .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
  .filter-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 16px; }
  .filter-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #94a3b8; }
  .filter-form select, .filter-form input {
    background: #0f172a; border: 1px solid #334155; border-radius: 6px;
    color: #e2e8f0; padding: 7px 10px; font-size: 13px; min-width: 160px;
  }
  .filter-form input { min-width: 240px; }
  .btn-filter { background: #4f46e5; color: #fff; border: none; border-radius: 6px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; }
  .btn-filter:hover { background: #4338ca; }
  .btn-reset { background: #334155; color: #e2e8f0; border-radius: 6px; padding: 8px 16px; font-size: 13px; text-decoration: none; }
  .btn-reset:hover { background: #475569; }
  /* --- Run pipeline card (session-gated pass runner) --- */
  .run-pipeline-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
  .run-pipeline-head h2 { font-size: 17px; color: #f8fafc; }
  .run-pipeline-head .muted { font-size: 12px; }
  .run-pass { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid #334155; }
  .run-pass:last-of-type { border-bottom: none; }
  .run-pass-main { flex: 1 1 auto; min-width: 0; }
  .run-pass-label { font-size: 14px; font-weight: 600; color: #f8fafc; }
  .run-pass-desc { font-size: 12.5px; color: #94a3b8; margin-top: 2px; line-height: 1.4; }
  .run-pass-bounds { display: flex; align-items: center; gap: 12px; }
  .run-pass-bounds label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #94a3b8; }
  .rp-max, .rp-start { width: 84px; background: #0f172a; border: 1px solid #334155; border-radius: 6px; color: #e2e8f0; padding: 6px 10px; font-size: 13px; }
  .rp-max:focus, .rp-start:focus { outline: 2px solid #4f46e5; outline-offset: 1px; border-color: #4f46e5; }
  .btn-run-pipeline, .btn-run-settings-save { background: #4f46e5; color: #fff; border: none; border-radius: 6px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; flex: 0 0 auto; }
  .btn-run-pipeline:hover, .btn-run-settings-save:hover { background: #4338ca; }
  .btn-run-pipeline:disabled, .btn-run-settings-save:disabled { opacity: 0.6; cursor: default; }
  .run-settings { padding: 14px 0 6px; border-top: 1px dashed #334155; margin-top: 4px; }
  .run-settings-label { font-size: 13px; font-weight: 600; color: #f8fafc; margin-bottom: 8px; }
  .run-settings-field { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .rs-number, .rs-cron { background: #0f172a; border: 1px solid #334155; border-radius: 6px; color: #e2e8f0; padding: 6px 10px; font-size: 13px; }
  .rs-number:focus, .rs-cron:focus { outline: 2px solid #4f46e5; outline-offset: 1px; border-color: #4f46e5; }
  .run-settings-note { font-size: 12px; color: #94a3b8; margin-top: 8px; line-height: 1.4; max-width: 520px; }
  /* --- Run settings block (identity console, t_9cc0663c) -------------------
     The six persisted identity run/backfill knobs: one bordered row per field
     (label · control + muted provenance note · help text · error slot), then a
     single Save / Reset action bar for the whole block. Reuses the block
     classes above; the dark input treatment matches the console's other
     number inputs. */
  .run-settings-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .run-settings-head .run-settings-label { margin-bottom: 0; }
  .run-settings-head .muted { font-size: 12px; }
  .run-settings-rows { display: grid; gap: 10px; margin-top: 10px; }
  .run-settings-row { padding: 10px 12px; background: #0f172a; border: 1px solid #1e293b; border-radius: 8px; }
  .run-settings-row .run-settings-label { margin-bottom: 6px; }
  .rs-number { width: 112px; }
  .rs-cron { width: 150px; font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
  .rs-number:disabled, .rs-cron:disabled { opacity: 0.55; }
  .rs-checkbox { width: 16px; height: 16px; margin: 0; accent-color: #4f46e5; cursor: pointer; }
  .rs-checkbox:disabled { cursor: default; opacity: 0.55; }
  .run-settings-provenance { font-size: 11px; color: #64748b; font-style: italic; }
  .run-settings-help { font-size: 12px; color: #94a3b8; line-height: 1.45; margin-top: 6px; max-width: 620px; }
  .run-settings-help code { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: #cbd5e1; background: #0b1220; border: 1px solid #1e293b; border-radius: 4px; padding: 0 4px; }
  .run-settings-error { font-size: 12px; color: #fca5a5; margin-top: 6px; }
  .run-settings-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
  .btn-run-settings-reset { background: transparent; color: #e2e8f0; border: 1px solid #475569; border-radius: 6px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
  .btn-run-settings-reset:hover { border-color: #94a3b8; background: #1e293b; }
  .btn-run-settings-reset:disabled { opacity: 0.6; cursor: default; }
  .run-settings-status { font-size: 12px; line-height: 1.4; }
  .run-settings-status.is-ok { color: #4ade80; }
  .run-settings-status.is-err { color: #fca5a5; }
  .pager { display: flex; align-items: center; gap: 14px; margin: 12px 0 4px; flex-wrap: wrap; }
  .pager-link {
    background: #334155; color: #e2e8f0; border: none; border-radius: 6px;
    padding: 6px 14px; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer;
  }
  .pager-link:hover { background: #4f46e5; }
  .pager-disabled { color: #475569; font-size: 13px; padding: 6px 14px; }
  .pager-count { color: #94a3b8; font-size: 12.5px; }
  .pager-control { display: flex; justify-content: flex-end; margin-top: 10px; }
  .pager-limit { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #94a3b8; }
  .pager-limit select {
    background: #0f172a; border: 1px solid #334155; border-radius: 6px;
    color: #e2e8f0; padding: 5px 8px; font-size: 12.5px;
  }
  .table-scroll { overflow-x: auto; width: 100%; }
  .identity-table, .coverage-table { width: 100%; border-collapse: collapse; }
  .identity-table { table-layout: fixed; }
  /* Fixed column widths for the CONSOLE's seven-column tables. These sum to
     less than the container (≈1052px: `main { max-width: 1100px }` minus its
     24px gutters), so with `width: 100%` they stretch to fit it. A table whose
     declared sum EXCEEDS the container instead renders at the sum and pushes
     its LAST column past the visible edge — the brand registry carries nine
     columns and therefore owns its own percentage budget; see
     `.brands-table col.*` in the brands section. On narrower viewports
     .table-scroll scrolls instead of clipping (mirrors the stock_config + runs
     fixes). */
  .identity-table col.col-source { width: 60px; }
  .identity-table col.col-source-product { width: 140px; }
  .identity-table col.col-band { width: 76px; }
  .identity-table col.col-reason { width: 250px; }
  .identity-table col.col-canonical { width: 180px; }
  .identity-table col.col-confidence { width: 84px; }
  .identity-table col.col-actions { width: 200px; }
  .identity-table col.col-method { width: 90px; }
  .identity-table col.col-status { width: 76px; }
  /* Column widths shared with the brand registry (t_40507910). Kept in this
     block (not in the brands section) because they are `.identity-table col.*`
     rules the console's own tables can adopt as they gain the columns. */
  .identity-table col.col-provenance { width: 96px; }
  .identity-table col.col-aliases { width: 64px; }
  .identity-table col.col-parent { width: 140px; }
  .identity-table col.col-company { width: 140px; }
  .identity-table col.col-flags { width: 150px; }
  .identity-table col.col-conflict-values { width: 34%; }
  .identity-table col.col-conflict-cluster { width: 14%; }
  .identity-table col.col-conflict-canonicals { width: 13%; }
  .identity-table col.col-conflict-impact { width: 15%; }
  .identity-table col.col-conflict-coverage { width: 8%; }
  .identity-table col.col-conflict-verdict { width: 16%; }
  .identity-table th, .identity-table td, .coverage-table th, .coverage-table td {
    text-align: left; padding: 10px 10px; font-size: 12.5px; border-bottom: 1px solid #1e293b; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* The review Reason cell carries free-text reason + residual label + ranked
     candidates — let it wrap inside its fixed column instead of clipping. The
     LAST cell of every identity table is the row's action/verdict group and
     must never clip its controls — addressed as `td:last-child` (not
     `td:nth-child(7)`, its old form) because the registry's 9-column table has
     its Actions cell at position 9 and a `nth-child(7)` match there landed on
     the unrelated Company column. */
  .review-table td:nth-child(4),
  .identity-table td:last-child { white-space: normal; overflow: visible; text-overflow: clip; }
  .identity-table thead tr, .coverage-table thead tr { background: #0f172a; }
  .identity-table th, .coverage-table th { color: #94a3b8; font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: .04em; }
  .identity-table tbody tr:hover { background: #24324a; }
  .badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
  .badge.active { background: #14532d; color: #86efac; }
  .badge.rejected { background: #7f1d1d; color: #fca5a5; }
  .badge.review-no-match { background: #7f1d1d; color: #fca5a5; }
  .badge.review-ambiguous { background: #713f12; color: #fde68a; }
  .badge.review-conflict { background: #4a044e; color: #e9d5ff; }
  .badge.method-barcode { background: #1e3a8a; color: #93c5fd; }
  .badge.method-ean { background: #312e81; color: #c7d2fe; }
  .badge.method-matcher { background: #713f12; color: #fde68a; }
  .badge.method-matcher_llm { background: #78350f; color: #fcd34d; }
  .badge.method-manual { background: #14532d; color: #86efac; }
  .badge.review-mapping { background: #4a044e; color: #e9d5ff; }
  /* confidence cell (wave 3: render link confidence visibly) */
  .conf { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; font-weight: 600; }
  .conf-hi { color: #86efac; }
  .conf-lo { color: #fde68a; }
  .conf-none { color: #64748b; font-weight: 400; }
  /* ranked alternatives for 1:N ambiguous edges (wave 3) */
  .cand-block { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #334155; }
  .cand-title { display: block; font-size: 11px; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
  .cand-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
  .cand-item { font-size: 12.5px; color: #cbd5e1; }
  .cand-item .cand-path { font-weight: 600; color: #93c5fd; }
  .cand-item .cand-conf { color: #64748b; }
  .cand-item .cand-leaf { color: #e2e8f0; }
  .cand-mark { color: #86efac; font-size: 11px; }
  .cand-suggested { background: #0f172a; border-radius: 4px; padding: 2px 6px; }
  .residual-label { margin-top: 3px; font-size: 12px; color: #cbd5e1; }
  .residual-label .mono { color: #93c5fd; }
  .link-actions { display: flex; gap: 6px; flex-wrap: wrap; }
  .btn-confirm, .btn-reject, .btn-remap, .btn-edit, .btn-remap-apply, .btn-new-canonical, .btn-create-canonical, .btn-conflict-resolve {
    border: none; border-radius: 5px; padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer;
  }
  .btn-conflict-resolve { background: #14532d; color: #86efac; }
  .btn-conflict-resolve:hover { background: #166534; }
  .btn-confirm { background: #166534; color: #bbf7d0; }
  .btn-confirm:hover { background: #15803d; }
  .btn-reject { background: #7f1d1d; color: #fecaca; }
  .btn-reject:hover { background: #991b1b; }
  .btn-remap { background: #334155; color: #c7d2fe; }
  .btn-remap:hover { background: #475569; }
  .btn-edit { background: #312e81; color: #c7d2fe; }
  .btn-edit:hover { background: #4338ca; }
  .btn-remap-apply { background: #4f46e5; color: #fff; }
  .btn-remap-apply:hover { background: #4338ca; }
  .btn-new-canonical, .btn-create-canonical { background: #166534; color: #bbf7d0; }
  .btn-new-canonical:hover, .btn-create-canonical:hover { background: #15803d; }
  .remap-form-row { background: #16213a; }
  .remap-form-row > td { white-space: normal; overflow: visible; text-overflow: clip; }
  .remap-inline { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
  .remap-inline input { background: #0f172a; border: 1px solid #334155; border-radius: 6px; color: #e2e8f0; padding: 7px 10px; font-size: 13px; }
  .remap-picker { position: relative; width: 100%; max-width: 560px; }
  .remap-search { width: 100%; }
  .remap-results {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 20; margin-top: 4px;
    background: #1e293b; border: 1px solid #334155; border-radius: 8px; max-height: 220px; overflow-y: auto;
    box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  }
  .remap-result { display: flex; align-items: flex-start; gap: 10px; padding: 8px 12px; font-size: 13px; color: #e2e8f0; cursor: pointer; }
  .remap-result:hover, .remap-result.is-active { background: #334155; color: #f8fafc; }
  .remap-result.is-active { outline: 1px solid #6366f1; }
  .remap-thumb { width: 40px; height: 40px; object-fit: contain; background: #0f172a; border-radius: 5px; border: 1px solid #334155; flex: 0 0 40px; }
  .remap-card-main { flex: 1 1 auto; min-width: 0; }
  .remap-card-brand { font-weight: 600; color: #f8fafc; }
  .remap-card-variant { color: #cbd5e1; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .remap-card-ean { color: #93c5fd; font-size: 12px; margin-top: 2px; }
  .remap-card-cat { color: #64748b; font-size: 11.5px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .remap-card-score { flex: 0 0 auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; color: #86efac; padding: 2px 7px; background: #0f172a; border: 1px solid #334155; border-radius: 999px; align-self: center; }
  .remap-result .rid { color: #64748b; flex: 0 0 auto; font-size: 12px; align-self: center; }
  .remap-no-match { padding: 10px 12px; font-size: 13px; color: #94a3b8; }
  .remap-selected { color: #86efac; font-size: 12.5px; }
  .src-cell { display: flex; gap: 10px; align-items: flex-start; }
  .src-thumb { width: 40px; height: 40px; object-fit: contain; background: #0f172a; border-radius: 5px; border: 1px solid #334155; flex: 0 0 40px; }
  .src-thumb-empty { background: #0f172a; border: 1px dashed #334155; display: inline-block; }
  .src-main { min-width: 0; }
  .src-brand { font-weight: 600; color: #f8fafc; font-size: 12.5px; }
  .src-name { color: #e2e8f0; font-size: 13px; line-height: 1.35; }
  .src-id { color: #64748b; font-size: 11.5px; margin-top: 2px; }
  .create-canonical-form { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; margin-top: 4px; padding: 10px 12px; background: #0f172a; border: 1px dashed #334155; border-radius: 8px; }
  .create-canonical-form input { background: #0f172a; border: 1px solid #334155; border-radius: 6px; color: #e2e8f0; padding: 6px 10px; font-size: 13px; }
  .coverage-grid { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: 24px; }
  .coverage-table td:last-child { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #f8fafc; }
  .band-distribution h3 { font-size: 13px; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; }
  .band { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid #1e293b; font-size: 13px; }
  .band-label { width: 90px; color: #cbd5e1; }
  .band-count { width: 40px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #f8fafc; text-align: right; }
  .band-pct { color: #94a3b8; font-size: 12px; }
  .resolved-note { color: #94a3b8; font-size: 13px; margin-bottom: 14px; }
  .honesty-note { color: #64748b; font-size: 12px; margin-top: 14px; line-height: 1.5; }
  .honesty-note strong { color: #94a3b8; }
  .empty { padding: 30px 18px; text-align: center; color: #64748b; white-space: normal; }
  /* edit modal */
  .edit-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(2,6,23,0.7); display: flex; align-items: flex-start; justify-content: center; padding: 8vh 24px 24px; }
  .edit-backdrop[hidden] { display: none; }
  .edit-dialog { background: #1e293b; border: 1px solid #334155; border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,0.5); width: 100%; max-width: 640px; max-height: 84vh; display: flex; flex-direction: column; }
  .edit-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #334155; }
  .edit-head h3 { font-size: 16px; color: #f8fafc; }
  .edit-close { background: transparent; border: none; color: #94a3b8; font-size: 22px; cursor: pointer; line-height: 1; }
  .edit-close:hover { color: #f8fafc; }
  .edit-body { padding: 18px 20px; overflow-y: auto; }
  .edit-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .edit-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #94a3b8; }
  .edit-field.full { grid-column: 1 / -1; }
  .edit-field input, .edit-field textarea { background: #0f172a; border: 1px solid #334155; border-radius: 6px; color: #e2e8f0; padding: 7px 10px; font-size: 13px; }
  /* A field can be a picker, not only free text (the brand registry's parent
     brand). Declared with the other edit-field inputs so the console's modal
     inherits it the moment it needs a select. */
  .edit-field select { background: #0f172a; border: 1px solid #334155; border-radius: 6px; color: #e2e8f0; padding: 7px 10px; font-size: 13px; }
  .edit-field textarea { resize: vertical; min-height: 60px; }
  .edit-actions { display: flex; gap: 10px; align-items: center; margin-top: 16px; }
  .btn-save { background: #4f46e5; color: #fff; border: none; border-radius: 6px; padding: 8px 18px; font-size: 13px; font-weight: 600; cursor: pointer; }
  .btn-save:hover { background: #4338ca; }
  .btn-cancel { background: #334155; color: #e2e8f0; border: none; border-radius: 6px; padding: 8px 18px; font-size: 13px; font-weight: 600; cursor: pointer; }
  .btn-cancel:hover { background: #475569; }
  .edit-status { font-size: 12.5px; }
  .edit-status.ok { color: #86efac; }
  .edit-status.err { color: #fca5a5; }
  /* standardized loading state (audit P2: thin/inconsistent loading) */
  .loading-inline { display: inline-flex; align-items: center; gap: 8px; color: #94a3b8; font-size: 13px; }
  .loading-inline::before {
    content: ''; width: 14px; height: 14px; border: 2px solid #334155;
    border-top-color: #4f46e5; border-radius: 50%;
    animation: spin 0.7s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  .audit-block { margin-top: 18px; border-top: 1px solid #334155; padding-top: 14px; }
  .audit-block h4 { font-size: 12px; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
  .audit-list { max-height: 180px; overflow-y: auto; }
  .audit-item { padding: 6px 0; border-bottom: 1px solid #1e293b; font-size: 12px; color: #cbd5e1; }
  .audit-item .a-field { color: #93c5fd; font-weight: 600; }
  .audit-item .a-when { color: #64748b; font-size: 11px; }
  .audit-item code { color: #fde68a; background: #0f172a; padding: 0 4px; border-radius: 4px; font-size: 11px; }
  .edit-canon-meta { font-size: 12px; color: #94a3b8; margin-bottom: 14px; }
  @media (max-width: 720px) { .coverage-grid { grid-template-columns: 1fr; } .edit-fields { grid-template-columns: 1fr; } }
  /* --- canonical browser (wave 1: canonical-first mappings console) --- */
  .review-chip { display: inline-block; background: #4f46e5; color: #fff; border-radius: 999px; padding: 4px 14px; font-size: 12px; font-weight: 600; text-decoration: none; }
  .review-chip:hover { background: #4338ca; }
  .browser-table td:nth-child(2) { white-space: normal; overflow: visible; text-overflow: clip; }
  .browser-table col.col-img { width: 52px; }
  .browser-table col.col-product { width: 220px; }
  .browser-table col.col-brand { width: 140px; }
  .browser-table col.col-pack { width: 90px; }
  .browser-table col.col-sources { width: 170px; }
  .browser-table col.col-status { width: 84px; }
  .browser-table col.col-actions { width: 140px; }
  .browser-thumb { width: 40px; height: 40px; object-fit: contain; background: #0f172a; border-radius: 5px; border: 1px solid #334155; flex: 0 0 40px; }
  .browser-thumb-empty { display: inline-block; }
  .browser-name { color: #e2e8f0; font-size: 13px; font-weight: 600; line-height: 1.35; }
  .browser-variant { color: #94a3b8; font-size: 12px; margin-top: 2px; }
  .browser-sources { display: flex; flex-wrap: wrap; gap: 4px; }
  .source-chip { display: inline-block; background: #1e293b; border: 1px solid #334155; border-radius: 999px; padding: 2px 10px; font-size: 11.5px; font-weight: 600; color: #c7d2fe; cursor: default; }
  .btn-view { display: inline-block; background: #334155; color: #c7d2fe; border: none; border-radius: 5px; padding: 4px 10px; font-size: 12px; font-weight: 600; text-decoration: none; cursor: pointer; }
  .btn-view:hover { background: #4f46e5; color: #fff; }
  /* canonical status badges */
  .badge.status-ok { background: #14532d; color: #86efac; }
  .badge.status-review { background: #713f12; color: #fde68a; }
  .badge.status-no-match { background: #7f1d1d; color: #fca5a5; }
  .badge.status-no-links { background: #334155; color: #94a3b8; }
  .badge.status-running { background: #1e3a8a; color: #93c5fd; }
  .badge.status-failed, .badge.status-error { background: #7f1d1d; color: #fca5a5; }
  .badge.status-completed, .badge.status-success { background: #14532d; color: #86efac; }
  /* --- canonical detail (wave 1) --- */
  .detail-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 20px; }
  .detail-img { width: 80px; height: 80px; object-fit: contain; background: #0f172a; border-radius: 8px; border: 1px solid #334155; flex: 0 0 80px; }
  .detail-img-empty { display: inline-block; }
  .detail-head-main { flex: 1 1 auto; min-width: 0; }
  .detail-title { font-size: 18px; font-weight: 600; color: #f8fafc; line-height: 1.3; }
  .detail-meta { font-size: 13px; margin-top: 6px; }
  .detail-head .link-actions { margin-top: 12px; }
  .provenance-list { display: flex; flex-direction: column; gap: 6px; }
  .prov-line { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; font-size: 13px; padding: 6px 0; border-bottom: 1px solid #1e293b; }
  .prov-field { font-weight: 600; color: #93c5fd; min-width: 110px; }
  .prov-value { color: #e2e8f0; }
  .prov-srcs { color: #94a3b8; }
  .provenance-empty { font-size: 13px; }
  .timeline-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
  .tl-item { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; font-size: 13px; padding: 8px 0; border-bottom: 1px solid #1e293b; }
  .tl-ts { color: #94a3b8; font-size: 12px; min-width: 150px; }
  .tl-text { color: #e2e8f0; }
  .timeline-empty { font-size: 13px; }

/* --- view: login.html ---
   NOTE: every rule here is scoped under body.login-page so the login styling
   can never leak into authed pages (which share this stylesheet but use
   <body> without the .login-page class). The bare `body { background:#f4f5f7;
   display:flex; align-items:center; ... }` used to be unscoped and, because it
   appears AFTER the dark `body { background: var(--color-bg) }` rule in the
   cascade, it overrode the dark slate-900 body on every authed page. The
   login.html <body> carries class="login-page". */

    * { box-sizing: border-box; }
    body.login-page {
      margin: 0;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background: #f4f5f7;
      color: #1f2328;
    }
    .login-page .login-card {
      width: 100%;
      max-width: 360px;
      padding: 32px;
      background: #fff;
      border: 1px solid #e1e4e8;
      border-radius: 8px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    }
    .login-page h1 {
      margin: 0 0 4px;
      font-size: 22px;
      font-weight: 600;
    }
    .login-page p.subtitle {
      margin: 0 0 24px;
      color: #656d76;
      font-size: 14px;
    }
    .login-page label {
      display: block;
      margin: 16px 0 6px;
      font-size: 13px;
      font-weight: 600;
    }
    .login-page input[type="text"],
    .login-page input[type="password"] {
      width: 100%;
      padding: 9px 12px;
      border: 1px solid #d0d7de;
      border-radius: 6px;
      font-size: 14px;
    }
    .login-page input:focus {
      outline: none;
      border-color: #0969da;
      box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.2);
    }
    .login-page .hint {
      margin: -8px 0 0;
      color: #656d76;
      font-size: 12.5px;
    }
    .login-page button {
      width: 100%;
      margin-top: 24px;
      padding: 10px 12px;
      border: 0;
      border-radius: 6px;
      background: #0969da;
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
    }
    .login-page button:hover { background: #0860ca; }
    .login-page .error {
      display: none;
      margin-top: 16px;
      padding: 10px 12px;
      border: 1px solid #f2c4c4;
      border-radius: 6px;
      background: #fff2f2;
      color: #b42318;
      font-size: 13px;
    }
  
/* --- view: poptimes.html --- */

  .poptimes-head {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-bottom: 16px;
  }
  .btn-add-store {
    background: #4f46e5; color: #fff; border: none; border-radius: 6px;
    padding: 9px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
    white-space: nowrap;
  }
  .btn-add-store:hover { background: #4338ca; }
  .btn-resync {
    background: #0e7490; color: #fff; border: none; border-radius: 6px;
    padding: 9px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
    white-space: nowrap;
  }
  .btn-resync:hover { background: #0c5f77; }
  .btn-resync:disabled { opacity: 0.6; cursor: wait; }
  .store-counts { font-size: 13px; color: #94a3b8; }
  .chain-filter {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; color: #94a3b8;
  }
  .chain-filter select {
    background: #0f172a; border: 1px solid #334155; border-radius: 6px;
    color: #e2e8f0; padding: 6px 8px; font-size: 13px;
  }
  .chain-filter select:focus { outline: none; border-color: #6366f1; }
  .name-filter {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; color: #94a3b8;
  }
  .name-filter input {
    background: #0f172a; border: 1px solid #334155; border-radius: 6px;
    color: #e2e8f0; padding: 6px 8px; font-size: 13px; width: 220px;
  }
  .name-filter input:focus { outline: none; border-color: #6366f1; }
  .name-filter input::placeholder { color: #64748b; }
  .edit-row td { padding: 10px 16px; background: #16213a; }
  .inline-store-form { margin: 0; }
  .inline-store-form .f-chain[readonly] {
    background: #1e293b; color: #94a3b8; cursor: not-allowed;
  }
  .source-link { color: #93c5fd; text-decoration: none; font-size: 13px; }
  .source-link:hover { color: #f8fafc; text-decoration: underline; }
  .add-store-wrap { flex: 1; min-width: 320px; }
  .store-form {
    background: #16213a; border: 1px solid #334155; border-radius: 8px;
    padding: 14px 16px;
  }
  .form-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
  .form-row-wide label { flex: 2; }
  .form-row label {
    display: flex; flex-direction: column; gap: 5px; font-size: 12px;
    color: #94a3b8; flex: 1; min-width: 150px;
  }
  .url-hints { display: flex; gap: 8px; flex-wrap: wrap; }
  .url-hint-ftid { color: #86efac; font-size: 12px; }
  .url-hint-noparse { color: #fbbf24; font-size: 12px; }
  .form-row input[type="text"] {
    background: #0f172a; border: 1px solid #334155; border-radius: 6px;
    color: #e2e8f0; padding: 7px 9px; font-size: 13px;
  }
  .form-row input:focus { outline: none; border-color: #6366f1; }
  .form-row .form-active {
    flex-direction: row; align-items: center; gap: 8px; align-self: flex-end;
    color: #cbd5e1; font-size: 13px;
  }
  .form-row .form-active input { accent-color: #6366f1; cursor: pointer; }
  .form-actions { display: flex; gap: 8px; margin-top: 12px; }
  .btn-save-store {
    background: #4f46e5; color: #fff; border: none; border-radius: 6px;
    padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
  }
  .btn-save-store:hover { background: #4338ca; }
  .btn-cancel-store {
    background: #334155; color: #e2e8f0; border: none; border-radius: 6px;
    padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
  }
  .btn-cancel-store:hover { background: #475569; }

  .poptimes-table-wrap { position: relative; }
  .skip-table {
    position: absolute; left: -9999px; top: auto;
    background: #1e293b; color: #e2e8f0; padding: 8px 14px; border-radius: 6px; z-index: 50;
  }
  .skip-table:focus { left: 8px; top: 8px; }
  .table-pager {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    background: #16213a; border: 1px solid #334155; border-radius: 8px;
    padding: 8px 12px; margin-bottom: 10px;
  }
  .table-pager[hidden] { display: none; }
  .pager-btn {
    background: #334155; color: #e2e8f0; border: none; border-radius: 6px;
    padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer;
  }
  .pager-btn:hover { background: #4f46e5; }
  .pager-btn:disabled { opacity: 0.45; cursor: not-allowed; }
  .pager-count { color: #94a3b8; font-size: 12.5px; }
  .pager-perpage { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #94a3b8; margin-left: auto; }
  .pager-perpage select {
    background: #0f172a; border: 1px solid #334155; border-radius: 6px;
    color: #e2e8f0; padding: 4px 6px; font-size: 12.5px;
  }
  .poptimes-table {
    width: 100%; border-collapse: collapse;
    background: #1e293b; border: 1px solid #334155; border-radius: 10px;
    overflow: hidden;
  }
  .poptimes-table th {
    text-align: left; padding: 12px 16px; font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.04em; color: #94a3b8;
    background: #16213a; border-bottom: 1px solid #334155;
  }
  .poptimes-table td {
    padding: 10px 16px; border-top: 1px solid #1e293b;
    font-size: 13px; color: #e2e8f0;
  }
  .poptimes-table tr:first-child td { border-top: none; }
  .poptimes-table tr:hover { background: #24324a; }
  .store-chain {
    color: #93c5fd; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }
  .store-name { font-weight: 600; color: #f8fafc; }
  .store-name .store-link { color: #f8fafc; font-weight: 600; text-decoration: none; }
  .store-name .store-link:hover { color: #93c5fd; text-decoration: underline; }
  /* Dead-link-safe marker: an outcome row with no resolvable admin-registry
     entry renders its name un-linked (never the raw collector id, which could
     collide with a DIFFERENT store's admin id). */
  .store-unlinked { color: #64748b; font-style: italic; cursor: default; }
  .btn-view.store-unlinked { font-style: normal; opacity: 0.7; cursor: default; }
  .badge {
    display: inline-block; font-size: 11px; font-weight: 600; line-height: 1;
    padding: 3px 10px; border-radius: 999px;
  }
  .badge.active { background: #14532d; color: #86efac; }
  .badge.inactive { background: #374151; color: #cbd5e1; }
  .badge.synced { background: #164e63; color: #67e8f9; margin-left: 4px; }
  .store-actions { text-align: right; white-space: nowrap; }
  .store-actions button {
    border: none; border-radius: 6px; padding: 5px 10px; font-size: 12px;
    font-weight: 600; cursor: pointer; margin-left: 4px;
  }
  .btn-deactivate { background: #7f1d1d; color: #fecaca; }
  .btn-deactivate:hover { background: #991b1b; }
  .btn-activate { background: #047857; color: #fff; }
  .btn-activate:hover { background: #065f46; }
  .btn-collect { background: #4f46e5; color: #fff; }
  .btn-collect:hover { background: #4338ca; }
  .btn-view {
    background: #1e3a8a; color: #bfdbfe; border: none; border-radius: 6px;
    padding: 5px 10px; font-size: 12px; font-weight: 600; cursor: pointer;
    margin-left: 4px; text-decoration: none;
  }
  .btn-view:hover { background: #1e40af; color: #fff; }
  .btn-edit { background: #334155; color: #e2e8f0; }
  .btn-edit:hover { background: #475569; }
  .btn-delete { background: #7f1d1d; color: #fecaca; }
  .btn-delete:hover { background: #991b1b; }
  .empty { color: #64748b; text-align: center; }
  .toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    background: #0f172a; border: 1px solid #334155; color: #e2e8f0;
    padding: 10px 18px; border-radius: 8px; font-size: 13px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4); z-index: 10;
  }

/* --- view: poptimes_coverage.html --- */

  .poptimes-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    flex-wrap: wrap; margin-bottom: 18px;
  }
  .store-counts { font-size: 13px; color: #94a3b8; }
  .head-links .source-link { font-size: 13px; }
  .cov-kpis {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px; max-width: 640px; margin-bottom: 28px;
  }
  .cov-kpi {
    background: #1e293b; border: 1px solid #334155; border-radius: 10px;
    padding: 18px;
  }
  .cov-kpi-value { color: #f8fafc; font-size: 30px; font-weight: 700; }
  .cov-kpi-label { color: #94a3b8; font-size: 13px; margin-top: 6px; }
  .cov-missing h2 { font-size: 16px; color: #cbd5e1; margin-bottom: 12px; }
  .cov-filter {
    display: flex; align-items: center; gap: 12px; margin-bottom: 12px; max-width: 520px;
  }
  .cov-search {
    flex: 1; background: #0f172a; border: 1px solid #334155; border-radius: 6px;
    color: #e2e8f0; padding: 8px 12px; font-size: 13px;
  }
  .cov-search:focus { outline: none; border-color: #6366f1; }
  .cov-search::placeholder { color: #64748b; }
  .cov-count { font-size: 12px; color: #64748b; white-space: nowrap; }
  .poptimes-table {
    width: 100%; border-collapse: collapse;
    background: #1e293b; border: 1px solid #334155; border-radius: 10px;
    overflow: hidden;
  }
  .poptimes-table th {
    text-align: left; padding: 12px 16px; font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.04em; color: #94a3b8;
    background: #16213a; border-bottom: 1px solid #334155;
  }
  .poptimes-table td {
    padding: 10px 16px; border-top: 1px solid #1e293b;
    font-size: 13px; color: #e2e8f0;
  }
  .poptimes-table tr:first-child td { border-top: none; }
  .poptimes-table tr:hover { background: #24324a; }
  .store-chain { color: #93c5fd; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
  .store-name { font-weight: 600; color: #f8fafc; }
  .store-link { color: #93c5fd; text-decoration: none; }
  .store-link:hover { color: #f8fafc; text-decoration: underline; }
  .cov-status { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #fca5a5; }
  .cov-note { color: #94a3b8; }
  .btn-view {
    background: #334155; color: #e2e8f0; border: none; border-radius: 6px;
    padding: 5px 10px; font-size: 12px; font-weight: 600; cursor: pointer;
    text-decoration: none;
  }
  .btn-view:hover { background: #475569; }
  .empty { color: #64748b; text-align: center; padding: 18px; }

/* --- view: poptimes_outcomes.html --- */

  .poptimes-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    flex-wrap: wrap; margin-bottom: 18px;
  }
  .store-counts { font-size: 13px; color: #94a3b8; }
  .head-links .source-link { font-size: 13px; }
  .cov-missing h2 { font-size: 16px; color: #cbd5e1; margin-bottom: 12px; }
  .poptimes-table {
    width: 100%; border-collapse: collapse;
    background: #1e293b; border: 1px solid #334155; border-radius: 10px;
    overflow: hidden;
  }
  .poptimes-table th {
    text-align: left; padding: 12px 16px; font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.04em; color: #94a3b8;
    background: #16213a; border-bottom: 1px solid #334155;
  }
  .poptimes-table td {
    padding: 10px 16px; border-top: 1px solid #1e293b;
    font-size: 13px; color: #e2e8f0;
  }
  .poptimes-table tr:first-child td { border-top: none; }
  .poptimes-table tr:hover { background: #24324a; }
  .store-chain { color: #93c5fd; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
  .store-name { font-weight: 600; color: #f8fafc; }
  .store-link { color: #93c5fd; text-decoration: none; }
  .store-link:hover { color: #f8fafc; text-decoration: underline; }
  .store-sublabel { font-size: 11px; color: #64748b; margin-top: 2px; }
  .badge {
    display: inline-block; padding: 2px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  }
  .badge.persistent { background: #7f1d1d; color: #fecaca; }
  .badge.transient { background: #1e3a5f; color: #bfdbfe; }
  .outcome-runs { display: flex; gap: 6px; flex-wrap: wrap; }
  .outcome {
    display: inline-block; padding: 2px 8px; border-radius: 6px;
    font-size: 11px; font-weight: 600; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }
  .out-collected { background: #14532d; color: #bbf7d0; }
  .out-failed { background: #7f1d1d; color: #fecaca; }
  .btn-view {
    background: #334155; color: #e2e8f0; border: none; border-radius: 6px;
    padding: 5px 10px; font-size: 12px; font-weight: 600; cursor: pointer;
    text-decoration: none;
  }
  .btn-view:hover { background: #475569; }
  .empty { color: #64748b; text-align: center; padding: 18px; }

/* --- view: poptimes_store.html --- */

  .store-head {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 18px;
  }
  .store-chip {
    background: #16213a; border: 1px solid #334155; border-radius: 999px;
    padding: 4px 12px; font-size: 12px; color: #cbd5e1;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }
  .store-chip.chain { color: #93c5fd; }
  .head-links { margin-left: auto; display: flex; align-items: center; gap: 10px; }
  .head-links .source-link { font-size: 13px; }
  .btn-collect-now {
    background: #4f46e5; color: #fff; border: none; border-radius: 6px;
    padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
    white-space: nowrap;
  }
  .btn-collect-now:hover { background: #4338ca; }
  .btn-edit-store {
    background: #334155; color: #e2e8f0; border: 1px solid #475569; border-radius: 6px;
    padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
    white-space: nowrap;
  }
  .btn-edit-store:hover { background: #475569; }
  .store-form {
    background: #16213a; border: 1px solid #334155; border-radius: 8px;
    padding: 14px 16px; margin-bottom: 24px; max-width: 900px;
  }
  .inline-store-form { margin: 0 0 24px; }
  .inline-store-form .f-chain[readonly] {
    background: #1e293b; color: #94a3b8; cursor: not-allowed;
  }
  .form-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
  .form-row-wide label { flex: 2; }
  .form-row label {
    display: flex; flex-direction: column; gap: 5px; font-size: 12px;
    color: #94a3b8; flex: 1; min-width: 150px;
  }
  .url-hints { display: flex; gap: 8px; flex-wrap: wrap; }
  .url-hint-ftid { color: #86efac; font-size: 12px; }
  .url-hint-noparse { color: #fbbf24; font-size: 12px; }
  .form-row input[type="text"] {
    background: #0f172a; border: 1px solid #334155; border-radius: 6px;
    color: #e2e8f0; padding: 7px 9px; font-size: 13px;
  }
  .form-row input:focus { outline: none; border-color: #6366f1; }
  .form-row .form-active {
    flex-direction: row; align-items: center; gap: 8px; align-self: flex-end;
    color: #cbd5e1; font-size: 13px;
  }
  .form-row .form-active input { accent-color: #6366f1; cursor: pointer; }
  .form-actions { display: flex; gap: 8px; margin-top: 12px; }
  .btn-save-store {
    background: #4f46e5; color: #fff; border: none; border-radius: 6px;
    padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
  }
  .btn-save-store:hover { background: #4338ca; }
  .btn-cancel-store {
    background: #334155; color: #e2e8f0; border: none; border-radius: 6px;
    padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
  }
  .btn-cancel-store:hover { background: #475569; }
  .store-facts {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px; max-width: 900px; margin-bottom: 24px;
  }
  .fact {
    background: #1e293b; border: 1px solid #334155; border-radius: 10px; padding: 14px;
  }
  .fact-label { color: #94a3b8; font-size: 12px; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em; }
  .fact-value { color: #f8fafc; font-size: 16px; font-weight: 600; }
  .fact-url { font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
  .fact-url .source-link { color: #93c5fd; text-decoration: none; font-size: 13px; }
  .fact-url .source-link:hover { text-decoration: underline; }
  .live-note { color: #94a3b8; font-size: 12px; font-weight: 400; }
  .hist-wrap { overflow-x: auto; }
  .hist-table {
    border-collapse: collapse; background: #1e293b;
    border: 1px solid #334155; border-radius: 10px; overflow: hidden;
  }
  .hist-table th, .hist-table td {
    border: 1px solid #24324a; padding: 2px;
  }
  .hist-table .hist-day {
    color: #94a3b8; font-size: 12px; font-weight: 600;
    padding: 8px 10px; text-align: left; white-space: nowrap; background: #16213a;
  }
  .hist-table .hist-day .hist-most { color: #fbbf24; font-size: 14px; line-height: 1; vertical-align: middle; }
  .hist-table .hist-hour {
    color: #64748b; font-size: 11px; font-weight: 600;
    padding: 6px 4px; text-align: center; background: #16213a;
  }
  .hist-cell {
    width: 30px; height: 44px; text-align: center; vertical-align: bottom;
    position: relative; background: #0f172a;
  }
  .hist-bar {
    position: absolute; left: 3px; right: 3px; bottom: 0;
    background: #6366f1; /* fallback; heat colour set inline by value */
    border-radius: 3px 3px 0 0;
    display: flex; align-items: flex-start; justify-content: center;
  }
  .hist-bar span {
    position: absolute; top: 2px; left: 0; right: 0;
    font-size: 10px; color: #e2e8f0; font-weight: 600;
  }
  .hist-cell.hist-empty { color: #334155; font-size: 12px; vertical-align: middle; }
  .pinned-yes { color: #86efac; font-size: 13px; }
  .pinned-no { color: #64748b; font-size: 13px; }
  .empty { color: #64748b; text-align: center; padding: 18px; }
  .toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    background: #0f172a; border: 1px solid #334155; color: #e2e8f0;
    padding: 10px 18px; border-radius: 8px; font-size: 13px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4); z-index: 10;
  }

/* --- view: project_detail.html --- */

  /* --- schedules panel (mirrors projects.html) --- */
  .schedules-panel {
    background: #1e293b; border: 1px solid #334155; border-radius: 10px;
    padding: 16px 20px 20px; margin-bottom: 24px;
  }
  .schedules-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
  }
  .schedules-head h3 { font-size: 15px; color: #cbd5e1; }
  .btn-add-schedule {
    background: #047857; color: #fff; border: none; border-radius: 6px;
    padding: 7px 14px; font-size: 12px; font-weight: 600; cursor: pointer;
  }
  .btn-add-schedule:hover { background: #065f46; }
  .schedules-empty { color: #64748b; font-size: 13px; padding: 8px 0; }
  .schedule-card {
    background: #1e293b; border: 1px solid #334155; border-radius: 8px;
    padding: 10px 14px; margin-bottom: 10px;
  }
  .schedule-main {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  }
  .schedule-name { font-weight: 600; color: #f8fafc; min-width: 140px; }
  .schedule-cron {
    font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px;
    color: #93c5fd; background: #0f172a; border: 1px solid #334155;
    border-radius: 5px; padding: 3px 8px;
  }
  .schedule-count {
    font-size: 12px; color: #94a3b8; background: #16213a; border-radius: 10px;
    padding: 2px 8px; white-space: nowrap;
  }
  .schedule-entities {
    font-size: 12px; color: #94a3b8; max-width: 220px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
  }
  .schedule-actions { margin-left: auto; display: flex; gap: 6px; }
  .schedule-actions button {
    border: none; border-radius: 6px; padding: 5px 10px; font-size: 12px;
    font-weight: 600; cursor: pointer;
  }
  .btn-edit { background: #334155; color: #e2e8f0; }
  .btn-edit:hover { background: #475569; }
  .btn-delete { background: #7f1d1d; color: #fecaca; }
  .btn-delete:hover { background: #991b1b; }
  .btn-run {
    background: #4f46e5; color: #fff; border: none; border-radius: 6px;
    padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
    white-space: nowrap;
  }
  .btn-run:hover { background: #4338ca; }
  .btn-run:disabled { opacity: 0.6; cursor: default; }
  .schedule-preview { margin-top: 6px; font-size: 12px; color: #64748b; }
  .toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; }
  .toggle input { accent-color: #6366f1; cursor: pointer; }

  /* --- add/edit schedule form --- */
  .add-form-wrap { margin-top: 12px; }
  .schedule-form {
    background: #16213a; border: 1px solid #334155; border-radius: 8px;
    padding: 14px 16px;
  }
  .form-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
  .form-row label {
    display: flex; flex-direction: column; gap: 5px; font-size: 12px;
    color: #94a3b8; flex: 1; min-width: 180px;
  }
  .form-row input[type="text"],
  .form-row input[type="number"] {
    background: #0f172a; border: 1px solid #334155; border-radius: 6px;
    color: #e2e8f0; padding: 7px 9px; font-size: 13px;
  }
  .form-row input:focus { outline: none; border-color: #6366f1; }
  .form-row.categories { display: block; }
  .form-row.entities { display: block; }
  .form-label { display: block; font-size: 12px; color: #94a3b8; margin-bottom: 6px; }
  .form-label .form-hint { color: #64748b; font-weight: 400; font-size: 11.5px; }
  .form-actions { display: flex; gap: 8px; margin-top: 12px; }
  .btn-save-schedule {
    background: #4f46e5; color: #fff; border: none; border-radius: 6px;
    padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
  }
  .btn-save-schedule:hover { background: #4338ca; }
  .btn-cancel-schedule {
    background: #334155; color: #e2e8f0; border: none; border-radius: 6px;
    padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
  }
  .btn-cancel-schedule:hover { background: #475569; }

  /* --- recent runs table (mirrors runs.html) --- */
  .runs-panel {
    background: #1e293b; border: 1px solid #334155; border-radius: 10px;
    overflow: hidden;
  }
  .runs-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid #334155;
  }
  .runs-head h3 { font-size: 15px; color: #cbd5e1; }
  .runs-table { width: 100%; border-collapse: collapse; }
  .runs-table th, .runs-table td { text-align: left; padding: 12px 18px; font-size: 13px; }
  .runs-table th {
    color: #94a3b8; font-weight: 600; text-transform: uppercase;
    font-size: 11px; letter-spacing: .04em; border-bottom: 1px solid #334155;
  }
  .runs-table tbody tr { border-bottom: 1px solid #1e293b; }
  .runs-table tbody tr:last-child { border-bottom: none; }
  .runs-table tbody tr:hover { background: #24324a; }
  .run-link { color: #f8fafc; font-weight: 600; text-decoration: none; }
  .run-link:hover { text-decoration: underline; }
  .badge { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
  .badge.completed { background: #14532d; color: #86efac; }
  .badge.failed { background: #7f1d1d; color: #fca5a5; }
  .badge.running { background: #1e3a8a; color: #93c5fd; }
  .badge.pending { background: #334155; color: #cbd5e1; }
  .badge.cancelled { background: #431407; color: #fdba74; }
  .muted { color: #94a3b8; }
  .err-count { color: #fca5a5; }
  .empty { padding: 40px 18px; text-align: center; color: #64748b; }

  /* --- project detail header --- */
  .detail-title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
  .detail-title h1 { font-size: 22px; color: #f8fafc; }
  .detail-source {
    font-size: 13px; color: #93c5fd; background: #16213a;
    border: 1px solid #334155; border-radius: 6px; padding: 3px 10px;
  }
  .badge {
    display: inline-block; font-size: 11px; font-weight: 600; line-height: 1;
    padding: 3px 10px; border-radius: 999px; vertical-align: middle;
  }
  .badge.archived { background: #374151; color: #94a3b8; }
  .badge.active { background: #14532d; color: #86efac; }
  .detail-actions { margin-left: 12px; }
  .btn-archive {
    background: #7f1d1d; color: #fecaca; border: none; border-radius: 6px;
    padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
  }
  .btn-archive:hover { background: #991b1b; }
  .btn-unarchive {
    background: #334155; color: #e2e8f0; border: none; border-radius: 6px;
    padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
  }
  .btn-unarchive:hover { background: #475569; }
  .archived-note {
    margin: 0 18px 12px; padding: 10px 14px; font-size: 13px; color: #fca5a5;
    background: #2a1b1b; border: 1px solid #7f1d1d; border-radius: 8px;
  }
  .back-link { color: #94a3b8; font-size: 13px; text-decoration: none; font-weight: 500; }
  .back-link:hover { color: #f8fafc; }

  .toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    background: #0f172a; border: 1px solid #334155; color: #e2e8f0;
    padding: 10px 18px; border-radius: 8px; font-size: 13px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4); z-index: 10;
  }

/* --- view: projects.html --- */

  .projects-table {
    width: 100%;
    border-collapse: collapse;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 10px;
    overflow: hidden;
  }
  .projects-table th {
    text-align: left;
    padding: 12px 16px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
    background: #16213a;
    border-bottom: 1px solid #334155;
  }
  .projects-table td {
    padding: 12px 16px;
    border-top: 1px solid #1e293b;
    font-size: 14px;
    color: #e2e8f0;
    vertical-align: middle;
  }
  .projects-table tr:first-child td { border-top: none; }
  .p-name { font-weight: 600; color: #f8fafc; }
  .th-expand { width: 40px; }
  .p-expand { width: 40px; text-align: center; }
  .btn-expand {
    background: transparent; color: #94a3b8; border: 1px solid #334155;
    border-radius: 6px; width: 26px; height: 26px; cursor: pointer;
    transition: transform .15s ease, color .15s ease;
  }
  .btn-expand:hover { color: #f8fafc; border-color: #6366f1; }
  .btn-expand.open { transform: rotate(90deg); color: #6366f1; }
  .cron-display { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
  .cron-chip {
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px; color: #93c5fd; background: #0f172a;
    border: 1px solid #334155; border-radius: 5px; padding: 3px 7px;
  }
  .muted { color: #64748b; }
  .toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; }
  .toggle input { accent-color: #6366f1; cursor: pointer; }
  .status-text { font-size: 13px; }
  .status-text.enabled { color: #86efac; }
  .status-text.disabled { color: #fca5a5; }
  .btn-run {
    background: #4f46e5;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
  }
  .btn-run:hover { background: #4338ca; }
  .btn-run:disabled { opacity: 0.6; cursor: default; }

  /* --- archive / unarchive --- */
  .btn-archive {
    background: #7f1d1d; color: #fecaca; border: none; border-radius: 6px;
    padding: 7px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
    white-space: nowrap;
  }
  .btn-archive:hover { background: #991b1b; }
  .btn-unarchive {
    background: #334155; color: #e2e8f0; border: none; border-radius: 6px;
    padding: 7px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
    white-space: nowrap;
  }
  .btn-unarchive:hover { background: #475569; }
  .badge {
    display: inline-block; font-size: 11px; font-weight: 600; line-height: 1;
    padding: 3px 10px; border-radius: 999px; vertical-align: middle;
  }
  .badge.archived { background: #374151; color: #cbd5e1; }
  .badge.active { background: #14532d; color: #86efac; }
  .archived-row td { opacity: 0.55; }
  .archived-row .p-name a { color: #94a3b8; }

  /* --- expandable schedule panel --- */
  .schedules-row td { background: #0f172a; padding: 0; }
  .schedules-panel { padding: 16px 20px 20px; }
  .schedules-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
  }
  .schedules-head h3 { font-size: 15px; color: #cbd5e1; }
  .btn-add-schedule {
    background: #047857; color: #fff; border: none; border-radius: 6px;
    padding: 7px 14px; font-size: 12px; font-weight: 600; cursor: pointer;
  }
  .btn-add-schedule:hover { background: #065f46; }
  .schedules-empty { color: #64748b; font-size: 13px; padding: 8px 0; }
  .schedule-card {
    background: #1e293b; border: 1px solid #334155; border-radius: 8px;
    padding: 10px 14px; margin-bottom: 10px;
  }
  .schedule-main {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  }
  .schedule-name { font-weight: 600; color: #f8fafc; min-width: 140px; }
  .schedule-cron {
    font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px;
    color: #93c5fd; background: #0f172a; border: 1px solid #334155;
    border-radius: 5px; padding: 3px 8px;
  }
  .schedule-count {
    font-size: 12px; color: #94a3b8; background: #16213a; border-radius: 10px;
    padding: 2px 8px; white-space: nowrap;
  }
  .schedule-entities {
    font-size: 12px; color: #94a3b8; max-width: 220px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
  }
  .schedule-actions { margin-left: auto; display: flex; gap: 6px; }
  .schedule-actions button {
    border: none; border-radius: 6px; padding: 5px 10px; font-size: 12px;
    font-weight: 600; cursor: pointer;
  }
  .btn-edit { background: #334155; color: #e2e8f0; }
  .btn-edit:hover { background: #475569; }
  .btn-delete { background: #7f1d1d; color: #fecaca; }
  .btn-delete:hover { background: #991b1b; }
  .schedule-preview { margin-top: 6px; font-size: 12px; color: #64748b; }

  /* --- add/edit schedule form --- */
  .add-form-wrap { margin-top: 12px; }
  .schedule-form {
    background: #16213a; border: 1px solid #334155; border-radius: 8px;
    padding: 14px 16px;
  }
  .form-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
  .form-row label {
    display: flex; flex-direction: column; gap: 5px; font-size: 12px;
    color: #94a3b8; flex: 1; min-width: 180px;
  }
  .form-row input[type="text"],
  .form-row input[type="number"] {
    background: #0f172a; border: 1px solid #334155; border-radius: 6px;
    color: #e2e8f0; padding: 7px 9px; font-size: 13px;
  }
  .form-row input:focus { outline: none; border-color: #6366f1; }
  .form-row.categories { display: block; }
  .form-row.entities { display: block; }
  .form-label { display: block; font-size: 12px; color: #94a3b8; margin-bottom: 6px; }
  .form-label .form-hint { color: #64748b; font-weight: 400; font-size: 11.5px; }
  .form-actions { display: flex; gap: 8px; margin-top: 12px; }
  .btn-save-schedule {
    background: #4f46e5; color: #fff; border: none; border-radius: 6px;
    padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
  }
  .btn-save-schedule:hover { background: #4338ca; }
  .btn-cancel-schedule {
    background: #334155; color: #e2e8f0; border: none; border-radius: 6px;
    padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
  }
  .btn-cancel-schedule:hover { background: #475569; }

  /* --- new project form --- */
  .projects-head {
    display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
    margin-bottom: 16px;
  }
  .btn-new-project {
    background: #4f46e5; color: #fff; border: none; border-radius: 6px;
    padding: 9px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
    white-space: nowrap;
  }
  .btn-new-project:hover { background: #4338ca; }
  .show-archived-toggle {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    background: #16213a; border: 1px solid #334155; border-radius: 8px;
    padding: 9px 14px; font-size: 13px; color: #cbd5e1; white-space: nowrap;
    margin-left: auto;
  }
  .show-archived-toggle input { accent-color: #6366f1; cursor: pointer; }
  .new-project-wrap { flex: 1; min-width: 320px; }
  .new-project-form {
    background: #16213a; border: 1px solid #334155; border-radius: 8px;
    padding: 14px 16px;
  }
  .np-source {
    background: #0f172a; border: 1px solid #334155; border-radius: 6px;
    color: #e2e8f0; padding: 7px 9px; font-size: 13px;
  }
  .np-source:focus { outline: none; border-color: #6366f1; }
  .btn-cancel-project {
    background: #334155; color: #e2e8f0; border: none; border-radius: 6px;
    padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
  }
  .btn-cancel-project:hover { background: #475569; }
  .toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: #0f172a;
    border: 1px solid #334155;
    color: #e2e8f0;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 13px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    z-index: 10;
  }

/* --- view: run_detail.html --- */

  .back-link { color: #93c5fd; font-size: 13px; text-decoration: none; }
  .back-link:hover { color: #f8fafc; }
  .head-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .head-row h1 { margin: 0; }
  .run-actions { display: flex; align-items: center; gap: 10px; }
  .stop-btn {
    background: #7f1d1d; color: #fca5a5; border: 1px solid #991b1b;
    border-radius: 6px; padding: 6px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  }
  .stop-btn:hover { background: #991b1b; color: #fecaca; }
  .rerun-btn {
    background: #1e3a8a; color: #93c5fd; border: 1px solid #1d4ed8;
    border-radius: 6px; padding: 6px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  }
  .rerun-btn:hover { background: #1e40af; color: #dbeafe; }
  .resume-btn {
    background: #164e63; color: #67e8f9; border: 1px solid #0891b2;
    border-radius: 6px; padding: 6px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  }
  .resume-btn:hover { background: #155e75; color: #cffafe; }
  .subtitle { color: #94a3b8; font-size: 14px; }
  .run-summary { background: #1e293b; border: 1px solid #334155; border-radius: 10px; padding: 18px; margin-bottom: 28px; }
  .summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
  .summary-item { display: flex; flex-direction: column; gap: 6px; }
  .s-label { color: #94a3b8; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
  .s-value { color: #e2e8f0; font-size: 14px; }
  .events h2 { font-size: 16px; color: #cbd5e1; margin: 0; }
  .events-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
  .event-count { color: #94a3b8; font-size: 12px; }
  .run-pagination { display: flex; gap: 14px; }
  .pager { color: #93c5fd; font-size: 13px; text-decoration: none; font-weight: 500; }
  .pager:hover { color: #f8fafc; }
  .pager.disabled { color: #475569; pointer-events: none; }
  .timeline { background: #0b1120; border: 1px solid #1e293b; border-radius: 10px; padding: 8px 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; list-style: none; margin: 0; }
  .event { display: flex; gap: 12px; padding: 6px 18px; font-size: 12.5px; line-height: 1.5; }
  .event-time { color: #64748b; white-space: nowrap; }
  .event-level { font-weight: 700; width: 52px; flex-shrink: 0; text-transform: uppercase; }
  .event-info .event-level { color: #93c5fd; }
  .event-success .event-level { color: #86efac; }
  .event-warn .event-level { color: #fbbf24; }
  .event-error .event-level { color: #f87171; }
  .event-debug .event-level { color: #94a3b8; }
  .event-message { color: #e2e8f0; word-break: break-word; }
  .badge { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px; width: fit-content; }
  .badge.success, .badge.completed { background: #14532d; color: #86efac; }
  .badge.completed-errors { background: #78350f; color: #fbbf24; }
  /* Finished-but-degraded (kanban t_91c05b7a): the run completed, but an
     outage burst cost it a stretch of rows — distinct from a clean
     completed and from a completed-with-errors run. */
  .badge.degraded { background: #713f12; color: #fde68a; }
  .badge.failed { background: #7f1d1d; color: #fca5a5; }
  .badge.running { background: #1e3a8a; color: #93c5fd; }
  .badge.pending { background: #334155; color: #cbd5e1; }
  .badge.cancelled { background: #431407; color: #fdba74; }
  .badge.interrupted { background: #164e63; color: #67e8f9; }
  .err-count { color: #fca5a5; }
  .proxy-badge { font-weight: 700; font-size: 12px; padding: 2px 10px; border-radius: 999px; width: fit-content; }
  .proxy-on { background: #14532d; color: #86efac; }
  .proxy-off { background: #334155; color: #cbd5e1; }
  .proxy-na { background: transparent; color: #64748b; padding: 0; }
  /* O7a run-detail instrumentation: peak RSS + true stop cause. 'unknown' is a
     first-class state (a run with no sample), so it is styled muted rather than
     looking like a real measurement. */
  .rss-known { color: #e2e8f0; font-weight: 600; }
  .rss-unknown { color: #64748b; font-style: italic; }
  .cause-graceful { color: #86efac; font-weight: 600; }
  .cause-unclean { color: #fca5a5; font-weight: 600; }
  .cause-unknown { color: #64748b; font-style: italic; }
  .cause-na { color: #64748b; }
  .empty { padding: 30px 18px; text-align: center; color: #64748b; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
  .run-params { background: #1e293b; border: 1px solid #334155; border-radius: 10px; padding: 18px; margin-bottom: 28px; }
  .run-params h2 { font-size: 16px; color: #cbd5e1; margin-bottom: 14px; }
  .params-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
  .param-item { display: flex; flex-direction: column; gap: 6px; }
  .param-item .p-label { color: #94a3b8; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
  .param-item .p-value { color: #e2e8f0; font-size: 13.5px; line-height: 1.5; word-break: break-word; }
  .param-item .p-value .muted { color: #94a3b8; }
  .params-empty { color: #64748b; font-size: 13px; }

/* --- view: runs.html --- */

  .runs-table-wrap { background: #1e293b; border: 1px solid #334155; border-radius: 10px; overflow-x: auto; }
  .runs-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #334155; }
  /* Per-type summary tiles above the filters. */
  .run-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; padding: 14px 18px; border-bottom: 1px solid #334155; }
  .run-tile { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: #0b1120; border: 1px solid #334155; border-radius: 10px; text-decoration: none; }
  .run-tile:hover { border-color: #475569; }
  .run-tile .tile-label { color: #94a3b8; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
  .run-tile .tile-body { color: #e2e8f0; font-size: 13px; }
  .run-tile.collection .tile-label { color: #4ade80; }
  .run-tile.enrichment .tile-label { color: #93c5fd; }
  .run-tile.identity .tile-label { color: #67e8f9; }
  .run-tile.qa .tile-label { color: #fbbf24; }
  .run-tile.bad { border-color: #7f1d1d; }
  .run-tile.bad .tile-body { color: #fca5a5; font-weight: 600; }
  .run-tile.good .tile-body { color: #86efac; }
  .runs-filters { display: flex; align-items: flex-end; gap: 14px; padding: 12px 18px; border-bottom: 1px solid #334155; flex-wrap: wrap; }
  .filter-field { display: flex; flex-direction: column; gap: 4px; }
  .filter-label { color: #94a3b8; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
  .filter-field select {
    background: #0b1120; color: #e2e8f0; border: 1px solid #334155; border-radius: 6px;
    padding: 6px 10px; font-size: 13px;
  }
  .filter-apply {
    background: #1d4ed8; color: #f8fafc; border: 1px solid #2563eb; border-radius: 6px;
    padding: 6px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
  }
  .filter-apply:hover { background: #2563eb; }
  .filter-clear { color: #94a3b8; font-size: 13px; text-decoration: none; padding: 6px 4px; }
  .filter-clear:hover { color: #f8fafc; }
  .run-count { color: #94a3b8; font-size: 13px; }
  .run-pagination { display: flex; gap: 14px; }
  .pager { color: #93c5fd; font-size: 13px; text-decoration: none; font-weight: 500; }
  .pager:hover { color: #f8fafc; }
  .pager.disabled { color: #475569; pointer-events: none; }
  .runs-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
  .runs-table th, .runs-table td { text-align: left; padding: 12px 10px; font-size: 13px; }
  /* Fixed column widths (sum 1035px <= ~1050px usable at the 1100px
     max-width viewport) so every column — including Errors + Actions — stays
     visible without horizontal clipping. Type stays wide for the class + phase
     badges; the wrap still scrolls gracefully below 1100px. */
  .runs-table .col-run { width: 130px; }
  .runs-table .col-status { width: 110px; }
  .runs-table .col-type { width: 150px; }
  .runs-table .col-source { width: 100px; }
  .runs-table .col-scope { width: 120px; }
  .runs-table .col-started { width: 150px; }
  .runs-table .col-duration { width: 70px; }
  .runs-table .col-products { width: 60px; }
  .runs-table .col-errors { width: 50px; }
  .runs-table .col-actions { width: 95px; }
  /* Truncate content-heavy cells with ellipsis instead of wrapping/pushing the
     row wider than its fixed column (mirrors stock_config.html). */
  .runs-table td:nth-child(1), .runs-table td:nth-child(5),
  .runs-table td:nth-child(6), .runs-table td:nth-child(7),
  .runs-table td:nth-child(8) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .runs-table th { color: #94a3b8; font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: .04em; border-bottom: 1px solid #334155; }
  .runs-table tbody tr { border-bottom: 1px solid #1e293b; }
  .runs-table tbody tr:last-child { border-bottom: none; }
  .runs-table tbody tr:hover { background: #24324a; }
  .run-link { color: #f8fafc; font-weight: 600; text-decoration: none; }
  .run-link:hover { text-decoration: underline; }
  .run-sep { color: #475569; font-weight: 500; margin: 0 4px; }
  .run-id { color: #64748b; font-weight: 500; }
  .run-scope { color: #94a3b8; font-size: 12.5px; white-space: nowrap; }
  .duration-note { color: #fbbf24; font-size: 11px; font-weight: 600; cursor: help; margin-left: 4px; }
  .badge { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
  .badge.success, .badge.completed { background: #14532d; color: #86efac; }
  .badge.completed-errors { background: #78350f; color: #fbbf24; }
  /* Finished-but-degraded (kanban t_91c05b7a): the run completed, but an
     outage burst cost it a stretch of rows — distinct from a clean
     completed and from a completed-with-errors run. */
  .badge.degraded { background: #713f12; color: #fde68a; }
  .badge.failed { background: #7f1d1d; color: #fca5a5; }
  .badge.running { background: #1e3a8a; color: #93c5fd; }
  .badge.pending { background: #334155; color: #cbd5e1; }
  .badge.cancelled { background: #431407; color: #fdba74; }
  .badge.interrupted { background: #164e63; color: #67e8f9; }
  .badge.skipped { background: #3f6212; color: #bef264; }
  .badge.run-type { background: #1e293b; color: #94a3b8; font-weight: 600; }
  .badge.run-type.stock { background: #164e63; color: #67e8f9; }
  .badge.run-type.discover { background: #3b0764; color: #d8b4fe; }
  .badge.run-type.fetch { background: #365314; color: #a3e635; }
  /* Run-class badge (collection/enrichment/identity/qa) — the taxonomy type. */
  .badge.run-type-badge, .badge.run-class { font-weight: 600; }
  .badge.run-class.collection { background: #14532d; color: #86efac; }
  .badge.run-class.enrichment { background: #1e3a8a; color: #93c5fd; }
  .badge.run-class.identity { background: #164e63; color: #67e8f9; }
  .badge.run-class.qa { background: #431407; color: #fdba74; }
  .badge.run-type-badge { background: #1e293b; color: #94a3b8; }
  .stop-btn {
    background: #7f1d1d; color: #fca5a5; border: 1px solid #991b1b;
    border-radius: 6px; padding: 4px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
  }
  .stop-btn:hover { background: #991b1b; color: #fecaca; }
  .muted { color: #94a3b8; }
  .err-count { color: #fca5a5; }
  .empty { padding: 40px 18px; text-align: center; color: #64748b; }

/* --- view: sources.html --- */
  .source-cards { display: flex; flex-direction: column; gap: 20px; }
  .source-card { background: #1e293b; border: 1px solid #334155; border-radius: 12px; padding: 22px 24px; }
  .source-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; gap: 12px; flex-wrap: wrap; }
  .source-name { font-size: 20px; font-weight: 700; color: #f8fafc; }
  .source-type { color: #94a3b8; font-size: 13px; margin-bottom: 12px; }
  .source-actions { margin-bottom: 16px; }
  .data-link { display: inline-block; color: #93c5fd; font-size: 13px; font-weight: 500; text-decoration: none; }
  .data-link:hover { color: #f8fafc; text-decoration: underline; }
  .worker-stats .stats-source { color: #64748b; text-transform: none; letter-spacing: 0; font-size: 12px; }
  .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
  .stat { display: flex; flex-direction: column; gap: 2px; background: #0f172a; border: 1px solid #1e293b; border-radius: 8px; padding: 12px 14px; }
  .stat-value { font-size: 22px; font-weight: 700; color: #a5b4fc; }
  .stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #64748b; }
  .source-section { margin-bottom: 16px; }
  .source-section:last-child { margin-bottom: 0; }
  .source-section h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; margin-bottom: 8px; }
  .source-section p, .source-section li { font-size: 14px; color: #e2e8f0; line-height: 1.55; }
  .source-section ul { list-style: none; padding: 0; }
  .source-section li { padding: 5px 0 5px 18px; position: relative; }
  .source-section li::before { content: "•"; position: absolute; left: 0; color: #6366f1; }
  .source-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 4px; }
  .meta-item { display: flex; flex-direction: column; gap: 3px; background: #0f172a; border: 1px solid #1e293b; border-radius: 8px; padding: 10px 12px; }
  .meta-label { color: #64748b; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
  .meta-value { color: #e2e8f0; font-size: 14px; }
  .meta-value code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; color: #93c5fd; }
  .badge { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
  .badge.active, .badge.success, .badge.completed, .badge.online { background: #14532d; color: #86efac; }
  .badge.inactive, .badge.disabled, .badge.offline, .badge.failed, .badge.error { background: #7f1d1d; color: #fca5a5; }
  .badge.running, .badge.in_progress { background: #1e3a8a; color: #93c5fd; }
  .badge.pending, .badge.idle, .badge.unknown { background: #334155; color: #cbd5e1; }
  .empty { padding: 40px 18px; text-align: center; color: #64748b; }
  .proxy-status { font-size: 14px; color: #e2e8f0; margin-bottom: 12px; }
  .proxy-status code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; color: #93c5fd; }
  .proxy-form { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
  .proxy-toggle { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #e2e8f0; cursor: pointer; }
  .proxy-url-row { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 480px; }
  .proxy-url-label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em; }
  .proxy-url { background: #0f172a; border: 1px solid #334155; border-radius: 8px; padding: 8px 10px; color: #e2e8f0; font-size: 13px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; width: 100%; }
  .proxy-url:disabled { opacity: .5; }
  .proxy-hint { font-size: 12px; color: #64748b; text-transform: none; letter-spacing: 0; }
  .btn-proxy-save { background: #1e3a8a; color: #93c5fd; border: 1px solid #1e40af; border-radius: 8px; padding: 7px 16px; font-size: 13px; font-weight: 600; cursor: pointer; }
  .btn-proxy-save:hover { background: #1e40af; color: #dbeafe; }
  .proxy-saved { color: #86efac; font-size: 13px; }

/* --- view: stock_config.html --- */
  .stock-config-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
  .cfg-counts { color: #e2e8f0; font-size: 14px; font-weight: 600; }
  .cfg-note { color: #64748b; font-size: 12px; }
  .cfg-db-note { color: #fca5a5; font-size: 13px; margin: 0 0 12px; }
  .cfg-db-note[hidden] { display: none; }
  .stock-config-wrap { background: #1e293b; border: 1px solid #334155; border-radius: 12px; overflow-x: auto; position: relative; }
  .skip-table {
    position: absolute; left: -9999px; top: auto;
    background: #1e293b; color: #e2e8f0; padding: 8px 14px; border-radius: 6px; z-index: 50;
  }
  .skip-table:focus { left: 8px; top: 8px; }
  .table-pager {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    background: #16213a; border-bottom: 1px solid #334155; padding: 8px 12px;
  }
  .table-pager[hidden] { display: none; }
  .pager-btn {
    background: #334155; color: #e2e8f0; border: none; border-radius: 6px;
    padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer;
  }
  .pager-btn:hover { background: #4f46e5; }
  .pager-btn:disabled { opacity: 0.45; cursor: not-allowed; }
  .pager-count { color: #94a3b8; font-size: 12.5px; }
  .pager-perpage { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #94a3b8; margin-left: auto; }
  .pager-perpage select {
    background: #0f172a; border: 1px solid #334155; border-radius: 6px;
    color: #e2e8f0; padding: 4px 6px; font-size: 12.5px;
  }
  .stock-config-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
  .stock-config-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; padding: 12px 10px; border-bottom: 1px solid #334155; }
  .stock-config-table td { padding: 12px 10px; border-bottom: 1px solid #1e293b; color: #e2e8f0; font-size: 14px; vertical-align: middle; }
  /* Fixed column widths (sum ≈ container width at 1100px viewport) so the table
     never pushes the actions column past the rounded container's edge. */
  .stock-config-table .col-id { width: 40px; }
  .stock-config-table .col-category { width: 132px; }
  .stock-config-table .col-level { width: 50px; }
  .stock-config-table .col-interval { width: 120px; }
  .stock-config-table .col-window { width: 144px; }
  .stock-config-table .col-status { width: 78px; }
  .stock-config-table .col-last-swept { width: 96px; }
  .stock-config-table .col-last-run { width: 140px; }
  .stock-config-table .col-next-due { width: 76px; }
  .stock-config-table .col-actions { width: 150px; }
  .stock-config-table tbody tr:last-child td { border-bottom: none; }
  .stock-config-table tbody tr:hover { background: #1e293b; }
  /* Truncate the two content-heavy text columns with ellipsis instead of
     letting them wrap/push the row wider than its fixed column. */
  .stock-config-table td.cat-breadcrumb,
  .stock-config-table td.last-run { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .stock-config-table .cat-name, .stock-config-table .cat-crumb { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cat-name { font-weight: 600; color: #f8fafc; }
  .muted { color: #64748b; }
  .cat-crumb { color: #64748b; font-size: 12px; margin-top: 2px; }
  .badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
  .badge.lvl1 { background: #1e3a8a; color: #93c5fd; }
  .badge.lvl2 { background: #334155; color: #cbd5e1; }
  .badge.enabled { background: #14532d; color: #86efac; }
  .badge.disabled { background: #334155; color: #cbd5e1; }
  .badge.active { background: #14532d; color: #86efac; }
  /* Page-level project-state banner: which marjane project sweeps dispatch onto. */
  .cfg-sweep-banner { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 10px; margin: 0 0 14px; font-size: 14px; font-weight: 500; }
  .cfg-sweep-banner .cfg-sweep-ic { font-weight: 700; font-size: 16px; }
  .cfg-sweep-banner a { color: #93c5fd; text-decoration: underline; }
  .cfg-sweep-banner strong { color: #f8fafc; }
  .cfg-sweep-banner.warn { background: #451a03; border: 1px solid #92400e; color: #fcd34d; }
  .cfg-sweep-banner.warn .cfg-sweep-ic { color: #fbbf24; }
  .cfg-sweep-banner.ok { background: #14532d; border: 1px solid #166534; color: #bbf7d0; }
  .cfg-sweep-banner.ok .cfg-sweep-ic { color: #86efac; }
  .last-swept { color: #94a3b8; }
  .last-run { color: #e2e8f0; font-size: 13px; white-space: nowrap; }
  .last-run .run-link { color: #93c5fd; font-size: 13px; margin-left: 6px; }
  .last-run .run-prods { color: #94a3b8; font-size: 12.5px; margin-left: 6px; }
  .next-due { font-weight: 600; white-space: nowrap; }
  .next-due.due-ok { color: #86efac; }
  .next-due.due-na { color: #64748b; font-weight: 400; }
  .next-due.due-over { color: #fca5a5; }
  .badge.run-ok { background: #14532d; color: #86efac; }
  .badge.run-fail { background: #7f1d1d; color: #fca5a5; }
  .badge.run-cancel { background: #431407; color: #fdba74; }
  .badge.run-running { background: #1e3a8a; color: #93c5fd; }
  .badge.run-pending { background: #334155; color: #cbd5e1; }
  tr.row-failed { background: #2d1313; }
  .f-interval { background: #0f172a; border: 1px solid #334155; border-radius: 8px; padding: 6px 8px; color: #e2e8f0; font-size: 13px; width: 100%; min-width: 0; max-width: 100%; }
  .sweep-window { white-space: nowrap; }
  .sweep-window .window-sep { color: #64748b; margin: 0 4px; }
  .f-window-start, .f-window-end { background: #0f172a; border: 1px solid #334155; border-radius: 8px; padding: 5px 6px; color: #e2e8f0; font-size: 12.5px; color-scheme: dark; width: 56px; min-width: 0; }
  .f-window-start:focus, .f-window-end:focus { outline: none; border-color: #1e40af; }
  .cfg-actions { display: flex; gap: 8px; white-space: nowrap; }
  .btn-save-cfg, .btn-enable, .btn-disable { background: #1e3a8a; color: #93c5fd; border: 1px solid #1e40af; border-radius: 8px; padding: 6px 10px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
  .btn-save-cfg:hover, .btn-enable:hover, .btn-disable:hover { background: #1e40af; color: #dbeafe; }
  .btn-enable { background: #14532d; color: #86efac; border-color: #166534; }
  .btn-enable:hover { background: #166534; color: #dcfce7; }
  .btn-disable { background: #334155; color: #cbd5e1; border-color: #475569; }
  .btn-disable:hover { background: #475569; color: #f1f5f9; }
  .empty { padding: 40px 18px; text-align: center; color: #64748b; }

/* --- view: stores.html --- */
  .back-link { color: #93c5fd; font-size: 13px; text-decoration: none; }
  .back-link:hover { color: #f8fafc; }
  .stores-table-wrap { background: #1e293b; border: 1px solid #334155; border-radius: 10px; overflow: hidden; }
  .stores-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #334155; }
  .store-count { color: #94a3b8; font-size: 13px; }
  .json-link { color: #93c5fd; font-size: 13px; text-decoration: none; font-weight: 500; }
  .json-link:hover { color: #f8fafc; text-decoration: underline; }
  .stores-table { width: 100%; border-collapse: collapse; }
  .stores-table th, .stores-table td { text-align: left; padding: 12px 18px; font-size: 13px; }
  .stores-table th { color: #94a3b8; font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: .04em; border-bottom: 1px solid #334155; }
  .stores-table tbody tr { border-bottom: 1px solid #1e293b; }
  .stores-table tbody tr:last-child { border-bottom: none; }
  .stores-table tbody tr:hover { background: #24324a; }
  .store-slug { color: #93c5fd; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
  .empty { padding: 40px 18px; text-align: center; color: #64748b; }

/* --- view: stores_marjane.html --- */
  .back-link { color: #93c5fd; font-size: 13px; text-decoration: none; }
  .back-link:hover { color: #f8fafc; }
  .stores-table-wrap { background: #1e293b; border: 1px solid #334155; border-radius: 10px; overflow: hidden; }
  .stores-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #334155; }
  .store-count { color: #94a3b8; font-size: 13px; }
  .json-link { color: #93c5fd; font-size: 13px; text-decoration: none; font-weight: 500; }
  .json-link:hover { color: #f8fafc; text-decoration: underline; }
  .stores-table { width: 100%; border-collapse: collapse; }
  .stores-table th, .stores-table td { text-align: left; padding: 12px 18px; font-size: 13px; }
  .stores-table th { color: #94a3b8; font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: .04em; border-bottom: 1px solid #334155; }
  .stores-table tbody tr { border-bottom: 1px solid #1e293b; }
  .stores-table tbody tr:last-child { border-bottom: none; }
  .stores-table tbody tr:hover { background: #24324a; }
  .store-coords { color: #93c5fd; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
  .store-hours { color: #cbd5e1; max-width: 320px; }
  .store-hours .hours-text { color: #cbd5e1; }
  .badge-on, .badge-off { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
  .badge-on { background: #052e16; color: #4ade80; }
  .badge-off { background: #450a0a; color: #f87171; }
  .mtype { color: #93c5fd; font-weight: 500; }
  .empty { padding: 40px 18px; text-align: center; color: #64748b; }

/* ==========================================================================
   RESPONSIVE DATA TABLES (GLOBAL — closes the recurring "last columns
   clipped" class: stock-config #130, runs #139, identity #168).
   Root cause: main { max-width:1100px } + wide nowrap tables. Accepted
   best-practice fix is TWO layers, both applied once globally so every admin
   table inherits them:
     1) Desktop/tablet: horizontal-scroll wrapper (.table-scroll =
        overflow-x:auto) with the flex-shrink fix (main { min-width:0 }, set
        above) — the Bootstrap .table-responsive pattern. Wide tables now
        scroll INSIDE the rounded container instead of clipping the last
        columns.
     2) Mobile (<768px): stacked-card pattern (CSS-Tricks / MDN). Table
        elements become block, thead is hidden ACCESSIBLY (position:absolute,
        NOT display:none), and each td gets its column header as an inline
        label via td:before content:attr(data-label). Zero horizontal scroll
        on phones. data-label is injected from the header row by a small
        global script in layout.html (the canonical CSS-Tricks technique), so
        every present and future table inherits it without per-view markup.
   .hist-table (poptimes hourly bar chart) is EXCLUDED — it is a visual
   heatmap, not a data table.
   ========================================================================== */
.table-scroll,
.runs-table-wrap,
.stores-table-wrap,
.alerts-table-wrap,
.poptimes-table-wrap,
.stock-config-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Stackable admin data tables (excludes .hist-table, a bar chart). */
@media (max-width: 767px) {
  .table, .runs-table, .identity-table, .coverage-table,
  .stores-table, .alerts-table, .poptimes-table,
  .projects-table, .stock-config-table, .data-table-body,
  .table thead, .runs-table thead, .identity-table thead,
  .coverage-table thead, .stores-table thead, .alerts-table thead,
  .poptimes-table thead, .projects-table thead, .stock-config-table thead,
  .data-table-body thead,
  .table tbody, .runs-table tbody, .identity-table tbody,
  .coverage-table tbody, .stores-table tbody, .alerts-table tbody,
  .poptimes-table tbody, .projects-table tbody, .stock-config-table tbody,
  .data-table-body tbody,
  .table tr, .runs-table tr, .identity-table tr, .coverage-table tr,
  .stores-table tr, .alerts-table tr, .poptimes-table tr,
  .projects-table tr, .stock-config-table tr, .data-table-body tr,
  .table th, .runs-table th, .identity-table th, .coverage-table th,
  .stores-table th, .alerts-table th, .poptimes-table th,
  .projects-table th, .stock-config-table th, .data-table-body th,
  .table td, .runs-table td, .identity-table td, .coverage-table td,
  .stores-table td, .alerts-table td, .poptimes-table td,
  .projects-table td, .stock-config-table td, .data-table-body td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  /* Accessibly hide the header row (kept in the accessibility tree). */
  .table thead tr, .runs-table thead tr, .identity-table thead tr,
  .coverage-table thead tr, .stores-table thead tr, .alerts-table thead tr,
  .poptimes-table thead tr, .projects-table thead tr,
  .stock-config-table thead tr, .data-table-body thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  /* Neutralise wrapper scroll on mobile — stacked cards must not scroll. */
  .table-scroll, .runs-table-wrap, .stores-table-wrap,
  .alerts-table-wrap, .poptimes-table-wrap, .stock-config-wrap {
    overflow: visible;
  }

  /* Each cell becomes a labelled card row. Only cells whose column header is
     known (data-label injected) get the label gutter; colspan cells (empty
     states, remap form rows) span full width with no label. */
  .table td, .runs-table td, .identity-table td, .coverage-table td,
  .stores-table td, .alerts-table td, .poptimes-table td,
  .projects-table td, .stock-config-table td, .data-table-body td {
    border: none;
    border-bottom: 1px solid #1e293b;
    position: relative;
    padding-left: 50%;
    padding-top: 6px;
    padding-bottom: 6px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .table td:before, .runs-table td:before, .identity-table td:before,
  .coverage-table td:before, .stores-table td:before, .alerts-table td:before,
  .poptimes-table td:before, .projects-table td:before,
  .stock-config-table td:before, .data-table-body td:before {
    content: attr(data-label);
    position: absolute;
    left: 6px;
    top: 6px;
    width: 45%;
    font-weight: 600;
    color: #94a3b8;
    white-space: normal;
  }

  /* Last cell in each row — no bottom border (matches card look). */
  .table tr, .runs-table tr, .identity-table tr, .coverage-table tr,
  .stores-table tr, .alerts-table tr, .poptimes-table tr,
  .projects-table tr, .stock-config-table tr, .data-table-body tr {
    border: 1px solid #334155;
    border-radius: 10px;
    margin-bottom: 12px;
    background: #16213a;
    padding: 2px 0;
  }

  /* Actions cells stay tappable: keep their content unclipped, give buttons
     room, and make sure the action links/buttons are full-height targets. */
  .table td:last-child, .runs-table td:last-child, .identity-table td:last-child,
  .coverage-table td:last-child, .stores-table td:last-child,
  .alerts-table td:last-child, .poptimes-table td:last-child,
  .projects-table td:last-child, .stock-config-table td:last-child,
  .data-table-body td:last-child {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .table .link-actions, .runs-table .link-actions, .identity-table .link-actions,
  .table .actions, .runs-table .actions, .identity-table .actions,
  .factor-actions, .cfg-actions, .store-actions, .store-actions a,
  .poptimes-table a, .stores-table a, .alerts-table a,
  .runs-table a.btn, .identity-table a.btn, .table a.btn {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
  }
  .table .btn, .runs-table .btn, .identity-table .btn, .stores-table .btn,
  .alerts-table .btn, .poptimes-table .btn, .stock-config-table .btn {
    padding-top: 8px;
    padding-bottom: 8px;
    white-space: normal;
  }
}


/* --- view: market_shares.html (measured brand/company shares) --- */

.mkt-meta {
  display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: baseline;
  margin-bottom: 14px; font-size: 13px; color: var(--color-text-muted);
}
.mkt-meta strong { color: var(--color-text); }
.mkt-meta code, .mkt-window code { font-family: var(--font-mono); font-size: 12px; }

.mkt-fresh {
  display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline;
  background: var(--color-surface-alt); border: 1px solid var(--slate-800);
  border-radius: var(--radius-md); padding: 10px 14px; margin-bottom: 16px;
  font-size: 12.5px; color: var(--color-text-muted);
}
.mkt-fresh-label {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em;
  font-weight: 600; color: var(--slate-500);
}
.mkt-fresh-item strong { color: var(--color-text); font-weight: 600; }

.mkt-strip {
  background: var(--color-surface-alt); border: 1px solid var(--slate-800);
  border-radius: var(--radius-md); padding: 16px 18px; margin-bottom: 20px;
}
.mkt-strip .cov-kpis { margin-bottom: 14px; max-width: none; }
.mkt-denominator {
  font-size: 12.5px; color: var(--color-text-muted); line-height: 1.5;
  border-top: 1px solid var(--slate-800); padding-top: 10px; margin-bottom: 10px;
}
.mkt-reasons { list-style: none; margin: 0; padding: 0; }
.mkt-reasons li {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px;
  padding: 6px 0; border-bottom: 1px solid var(--slate-800); font-size: 12.5px;
}
.mkt-reasons li:last-child { border-bottom: none; }
.mkt-reason-label { color: var(--color-text-muted); }
.mkt-reason-value { color: var(--color-text); font-variant-numeric: tabular-nums; }
.mkt-reasons .mkt-sub { padding-left: 14px; opacity: .85; }
.mkt-reconcile { padding-top: 8px; }
.mkt-check-ok { color: var(--green-400, #4ade80); font-weight: 600; }
.mkt-check-bad { color: var(--red-400, #f87171); font-weight: 700; }

.mkt-table-wrap { margin-bottom: 24px; }
.mkt-table { table-layout: fixed; width: 100%; min-width: 760px; }
.mkt-table th, .mkt-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkt-table .mkt-col-rank { width: 56px; }
.mkt-table .mkt-col-name { width: 30%; }
.mkt-table .mkt-col-num { width: 116px; }
.mkt-table td.mkt-num, .mkt-table th:nth-child(n+3) { text-align: right; font-variant-numeric: tabular-nums; }
.mkt-table .mkt-bucket { color: var(--color-text-muted); font-style: italic; }
.mkt-table .mkt-bucket-row { background: rgba(148, 163, 184, .06); }
.mkt-table-note { font-size: 12px; color: var(--color-text-faint); margin-top: 10px; line-height: 1.5; }

/* ==========================================================================
   HUMAN-IN-THE-LOOP SUGGESTIONS (kanban t_83b66150)

   The identity review queue's nedostavka candidate panel: the probe's offers for
   an unmatched row, with the gate's verdict and the FAIL-OPEN mark. The
   .sugg-failopen / .sugg-row-failopen rules are the visual contract the card
   requires: a candidate accepted only because it omits a contradicted dimension
   must LOOK weaker than a clean accept, so the operator sees the 5-row class
   from t_37fb658e at a glance. Nothing here is interactive beyond the two
   Accept / Reject form buttons.
   ========================================================================== */
.suggestion-panel-row > td {
  background: #0f172a;
  border-bottom: 1px solid #1e293b;
  padding: 0 0 10px 0;
}
.suggestion-panel {
  margin: 8px 0 0 0;
  padding: 10px 12px 12px 12px;
  border-left: 3px solid #4f46e5;
  background: #111827;
  border-radius: 4px;
}
.suggestion-panel-row > td,
.suggestion-panel,
.sugg-table {
  /* LAYOUT INVARIANT (kanban t_b8803ca6). The panel is emitted inside the
     review table's `<td colspan="7">`, and the generic `.identity-table td`
     rule is `white-space: nowrap; overflow: hidden` — it is a DESCENDANT
     selector, so it also hit the panel cell and clipped the whole panel: a long
     candidate title widened the nested .sugg-table past the cell's clip edge
     and pushed Accept / Reject / Re-verify out of view (founder-reported
     2026-09-16). The panel cell and its own table therefore opt OUT of that
     rule — no ancestor of the action controls may clip them. */
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.sugg-head {
  font-size: 12px;
  color: #cbd5e1;
  margin-bottom: 6px;
}
.sugg-head strong { color: #e2e8f0; }
.sugg-input { color: #94a3b8; }
/* Fixed layout + explicit column widths: the decision column's share can never
   be displaced by a long title — the name column absorbs the squeeze (it is the
   only one that may wrap, below) instead of pushing the actions off the row. */
.sugg-table { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
.sugg-col-rank { width: 3%; }
.sugg-col-name { width: 26%; }
.sugg-col-ean { width: 15%; }
.sugg-col-gate { width: 14%; }
.sugg-col-verify { width: 21%; }
.sugg-col-decision { width: 21%; }
.sugg-table th {
  text-align: left;
  color: #94a3b8;
  font-weight: 600;
  padding: 3px 8px 3px 0;
  border-bottom: 1px solid #1f2937;
}
.sugg-table td { padding: 4px 8px 4px 0; vertical-align: top; color: #e2e8f0; white-space: normal; overflow-wrap: anywhere; }
.sugg-rank { color: #94a3b8; width: 2ch; }
/* The candidate name is the ONLY unbounded string on the row: it wraps (and
   breaks an unbreakable token) instead of widening the table. The full text is
   also carried in the cell's `title` tooltip (see renderSuggestionPanel). */
.sugg-name { max-width: 46ch; overflow-wrap: anywhere; word-break: break-word; min-width: 0; }
/* The decision cell must be shrinkable, never a fixed-width block. */
.sugg-decision { min-width: 0; }
/* The per-candidate action group: flex + wrap, so the controls move onto the
   next line inside the cell instead of being pushed out of the row. */
.sugg-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}
.sugg-actions .sugg-form { display: inline-flex; margin-right: 0; }
.sugg-gate {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 11px;
  background: #1e293b;
  color: #cbd5e1;
}
.sugg-gate-accepted { background: #14432a; color: #86efac; }
.sugg-blocking { color: #fca5a5; font-size: 11px; }
.sugg-failopen {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  background: #422006;
  color: #fdba74;
  border: 1px solid #92400e;
}
/* Whole-row emphasis: the weak (fail-open) candidates read differently. */
.sugg-row-failopen { background: #1c1508; }
.sugg-row-failopen .sugg-name { color: #fde68a; }
.sugg-form { display: inline; margin-right: 6px; }
.btn-sugg-accept, .btn-sugg-reject {
  padding: 3px 9px;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
}
.btn-sugg-accept { background: #166534; color: #dcfce7; }
.btn-sugg-accept:hover { background: #15803d; }
.btn-sugg-reject { background: #334155; color: #fecaca; }
.btn-sugg-reject:hover { background: #475569; }
.sugg-decided { font-size: 12px; color: #94a3b8; }
.sugg-decided-accepted { color: #86efac; }
.sugg-decided-rejected { color: #fca5a5; }
.sugg-counts {
  font-size: 12px;
  color: #94a3b8;
  margin: 4px 0 8px 0;
}
.sugg-notice {
  margin: 4px 0 8px 0;
  padding: 6px 10px;
  border-radius: 3px;
  font-size: 12px;
}
.sugg-notice-ok { background: #0f2a1b; color: #bbf7d0; border-left: 3px solid #22c55e; }
.sugg-notice-error { background: #2a1414; color: #fecaca; border-left: 3px solid #ef4444; }
/* A REFUSAL or a retryable failure is not a success: the barcode-verification
   notices (conflict / unknown to marjane / failed call) wear their own colour. */
.sugg-notice-warn { background: #2a2208; color: #fde68a; border-left: 3px solid #f59e0b; }

/* ==========================================================================
   MARJANE BARCODE VERIFICATION (kanban t_87c6a36f)

   The retailer's own barcode→product answer, per candidate: confirmed by
   marjane / conflict (a DIFFERENT marjane product) / name evidence only /
   retryable failure / not verified yet. The visual contract: a CONFLICT and an
   unverified row must never read like the proven, green `matched` state, and the
   manual EAN box is a form on the row the operator is already looking at.
   ========================================================================== */
.sugg-verify {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 11px;
  background: #1e293b;
  color: #cbd5e1;
}
.sugg-verify-matched { background: #14432a; color: #86efac; font-weight: 600; }
.sugg-verify-other { background: #3f1d1d; color: #fca5a5; font-weight: 600; }
.sugg-verify-no-hit { background: #1f2937; color: #cbd5e1; font-style: italic; }
.sugg-verify-error { background: #2a2208; color: #fdba74; }
.sugg-verify-unverified { background: #1e293b; color: #94a3b8; font-style: italic; }
.sugg-verify-mj { margin-left: 6px; font-size: 11px; color: #a5b4fc; }
.sugg-verify-label { margin-left: 6px; font-size: 11px; color: #e2e8f0; }
.sugg-verify-brand { margin-left: 4px; font-size: 11px; }
.sugg-verify-when { font-size: 10px; color: #64748b; margin-top: 2px; }
.sugg-verify-error-msg { font-size: 10px; color: #fdba74; margin-top: 2px; }
.sugg-verify-head { color: #64748b; }
/* A candidate the retailer maps to a DIFFERENT product: the row reads blocked. */
.sugg-row-conflict { background: #201012; }
.sugg-row-conflict .sugg-name { color: #fecaca; }
.sugg-conflict-note {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: #fca5a5;
}
.btn-sugg-verify {
  padding: 3px 9px;
  border: 1px solid #334155;
  border-radius: 3px;
  background: #1e293b;
  color: #cbd5e1;
  cursor: pointer;
  font-size: 12px;
}
.btn-sugg-verify:hover { background: #334155; }

/* --- The manual EAN box on a review row ---------------------------------- */
.mv-form { display: flex; gap: 4px; align-items: center; margin-top: 4px; flex-wrap: wrap; }
.mv-ean {
  padding: 3px 6px;
  border: 1px solid #334155;
  border-radius: 3px;
  background: #0b1220;
  color: #e2e8f0;
  font-size: 12px;
  width: 14ch;
}
.btn-verify-ean, .btn-link-ean {
  padding: 3px 9px;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
}
.btn-verify-ean { background: #1e3a8a; color: #dbeafe; }
.btn-verify-ean:hover { background: #1d4ed8; }
.btn-link-ean { background: #166534; color: #dcfce7; }
.btn-link-ean:hover { background: #15803d; }
/* --- The manual EAN result box (top of the review pane) ------------------ */
.mv-result {
  margin: 6px 0 10px 0;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 12px;
  background: #111827;
  border-left: 3px solid #475569;
  color: #e2e8f0;
}
.mv-result.mv-ok { border-left-color: #22c55e; }
.mv-result.mv-warn { border-left-color: #ef4444; }
.mv-result.mv-note { border-left-color: #64748b; }
.mv-head { color: #cbd5e1; }
.mv-product { margin-top: 4px; color: #e2e8f0; }
.mv-outcome { margin-top: 4px; }
.mv-link-form { margin-top: 6px; }
.mv-verdict { font-weight: 600; }
.mv-verdict-matched { color: #86efac; }
.mv-verdict-other { color: #fca5a5; }
.mv-verdict-no-hit { color: #94a3b8; font-style: italic; }
.mv-verdict-error { color: #fdba74; }

/* ==========================================================================
   NARROW WIDTHS — the suggestion panel keeps its own grid (kanban t_b8803ca6)

   <=767px the OUTER .identity-table is converted to stacked cards: every
   `.identity-table td` becomes display:block with a 50% label gutter and a
   `:before` label. Those are descendant selectors, so they reach INTO the
   nested .sugg-table too and scatter the candidate rows (each cell a block
   behind a label gutter, the action controls split apart). The panel is a
   self-contained sub-table: it restores its own table display, and the
   narrowed decision column lets the action group wrap (its buttons re-enable
   text wrapping) so Accept / Reject / Re-verify stay on screen and tappable at
   phone widths.
   ========================================================================== */
@media (max-width: 767px) {
  .suggestion-panel .sugg-table { display: table; width: 100%; table-layout: fixed; }
  .suggestion-panel .sugg-table thead { display: table-header-group; }
  .suggestion-panel .sugg-table tbody { display: table-row-group; }
  .suggestion-panel .sugg-table thead tr {
    display: table-row; position: static; top: auto; left: auto;
  }
  .suggestion-panel .sugg-table tbody tr {
    display: table-row; border: none; border-radius: 0; margin: 0;
    background: transparent; padding: 0;
  }
  .suggestion-panel .sugg-table th,
  .suggestion-panel .sugg-table td {
    display: table-cell; width: auto; box-sizing: border-box;
    padding: 4px 6px 4px 0; border-bottom: none;
  }
  .suggestion-panel .sugg-table th:before,
  .suggestion-panel .sugg-table td:before { content: none; }
  /* The decision column takes a bigger share on a narrow screen, and its
     buttons wrap their own label instead of overflowing the cell. */
  .suggestion-panel .sugg-col-name { width: 22%; }
  .suggestion-panel .sugg-col-ean { width: 17%; }
  .suggestion-panel .sugg-col-gate { width: 13%; }
  .suggestion-panel .sugg-col-verify { width: 18%; }
  .suggestion-panel .sugg-col-decision { width: 27%; }
  .sugg-actions { gap: 4px; }
  .sugg-actions .btn-sugg-accept,
  .sugg-actions .btn-sugg-reject,
  .sugg-actions .btn-sugg-verify { white-space: normal; max-width: 100%; min-height: 28px; }
}

/* ============================================================
   Brands — the brand-registry curation surface (/identity/brands)
   (spec docs/specs/brand-registry-v1.md §6, card t_effba8d2/I3)

   The page reuses the identity console's vocabulary end to end: the coverage
   panel (.coverage-grid/.coverage-table/.band-distribution), the table
   treatment (.identity-table + .table-scroll + col-* widths), the pager
   (.pager/.pager-control), the row actions (.link-actions + .btn-edit/
   .btn-confirm), the edit dialog (.edit-backdrop/.edit-dialog/...) and the
   badges (.badge + the status/provenance modifiers declared in the shared
   badge block). Only what is genuinely registry-specific is declared here.
   ============================================================ */

.brands-units { margin: 0 0 14px; padding-left: 18px; font-size: 12px; color: var(--slate-400); }

/* --- The registry's column budget (card t_de2267da) -----------------------
   The registry carries NINE columns in the same 1052px content box the
   console's seven-column tables share (`main { max-width: 1100px }` minus its
   24px gutters). The old fixed px widths summed to 1,112px, i.e. 60px MORE than
   the box, and `table-layout: fixed` renders a table at the sum of its declared
   column widths when that sum exceeds the container — so the table stuck out
   and the LAST column (Actions) sat past the visible edge of `.table-scroll`,
   unreachable without sideways scrolling.
   Percentage widths cannot reproduce that: every column resolves against the
   table's own width (100% of the container), so the declared sum IS the table
   width and the table can never exceed its container. The split below is the
   measured max-content need per column, scaled to the container — the badge
   columns (Status / Provenance) and the Actions column get what their chips and
   buttons need, the long free-text columns (Brand / Parent / Company) absorb the
   squeeze with their existing ellipsis, and the wrapping Flags cell gives up its
   surplus line budget. */
.brands-table col.col-brand-id { width: 6.5%; }
.brands-table col.col-brand { width: 11%; }
.brands-table col.col-status { width: 10.5%; }
.brands-table col.col-provenance { width: 12.5%; }
/* The console's col-canonical is a 180px LABEL column; the registry's Canonicals
   column is a COUNT (plus a conflict chip), so its width is scoped to this table. */
.brands-table col.col-canonical { width: 7.5%; }
.brands-table col.col-aliases { width: 5%; }
.brands-table col.col-parent { width: 9.25%; }
.brands-table col.col-company { width: 9.25%; }
.brands-table col.col-flags { width: 10%; }
/* 6.5 + 11 + 10.5 + 12.5 + 7.5 + 5 + 9.25 + 9.25 + 10 + 18.5 = 100%. The
   `brand_id` column (card t_ec2aba27) is the narrowest: a mono id plus cell
   padding, enough for six digits. Its width comes out of Brand (-2.5),
   Canonicals (-0.5), Parent (-0.5), Company (-0.5) and Flags (-2), the columns
   with surplus line budget. The Actions column keeps the 200px it had (the
   widest row control group — merge + Edit + Confirm — measures 169px, +20px of
   cell padding: 18.5% of the 1052px content box is 194.6px), and the badge
   columns are sized to the measured chip widths (Status badge 86px, Provenance
   badge 110px, Flags chips 64 + 104px with the cell allowed to wrap). The long
   free-text columns (Brand / Parent / Company) absorb the remaining squeeze with
   the ellipsis they already carry. */
.brands-table col.col-actions { width: 18.5%; }

/* The brand_id cell is a plain mono id — the header carries the `brand_id`
   label, so the cell itself stays one scannable token. */
.brands-table .brand-id { color: var(--slate-300, #cbd5e1); }

.brands-table .brand-name { display: block; color: var(--slate-50); font-weight: 600; }
.brands-table .brand-key { display: block; font-size: 11px; }
/* The row's Actions cell is the console's `.link-actions` group; it centres its
   controls instead of stacking one per line. */
.brands-table .link-actions { align-items: center; }
.brands-table .brand-pick {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--color-text-muted); white-space: nowrap;
}
.brands-table .brand-flags { white-space: normal; }
/* The flag cell keeps its chips readable when several fire at once. */
.brands-table .flag { margin: 1px 2px 1px 0; }
/* A decided conflict reads quieter than a row that still wants a human verdict. */
.conflicts-table .conflict-status-resolved,
.conflicts-table .conflict-status-skipped { opacity: 0.75; }

.flag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .03em;
  background: var(--badge-muted-bg);
  color: var(--badge-muted-fg);
}
.flag-conflict { background: var(--color-danger-bg); color: var(--color-danger-fg); }
.flag-suspect-company { background: var(--amber-900); color: #fcd34d; }
.flag-mixed { background: var(--slate-700); color: var(--slate-100); }

.merge-plan {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--slate-700);
  border-radius: 4px;
  background: var(--slate-800);
  color: var(--slate-100);
  font-size: 12px;
  white-space: pre-wrap;
  max-height: 320px;
  overflow: auto;
}
.merge-conflict { color: #fcd34d; }

.conflicts-table .conflict-pair { min-width: 320px; }
.conflict-side { display: flex; gap: 8px; align-items: baseline; }
.conflict-letter {
  display: inline-block;
  width: 16px;
  font-weight: 700;
  color: var(--slate-400);
}
.conflict-value { color: var(--slate-50); }
.conflict-kind { display: block; font-size: 11px; }
.conflict-verdicts { display: flex; flex-wrap: wrap; gap: 4px; }
.conflict-verdicts .btn { font-size: 11px; padding: 2px 8px; }
.conflict-decided { font-size: 12px; }
/* The IMPACT ordering (card t_b760333e): the measured volume per row, the
   cumulative share of the queue it covers, and the collapsed low-impact tail.
   The numbers are the point of the queue, so they get the readable colour and
   the unknowns stay muted. */
.conflicts-table .conflict-impact { white-space: nowrap; }
.conflict-impact .impact-units { color: var(--slate-50); font-variant-numeric: tabular-nums; }
.conflict-impact .impact-mad { color: var(--slate-300); font-variant-numeric: tabular-nums; }
.conflict-impact .impact-unknown { font-style: italic; }
.conflict-impact .impact-partial { color: #fcd34d; cursor: help; }
.conflicts-table .conflict-coverage { white-space: nowrap; }
.conflict-cum { color: var(--slate-300); font-variant-numeric: tabular-nums; cursor: help; }
.conflict-tail-row td { font-style: italic; }
.conflict-coverage-note { margin: 6px 0 0; font-size: 12px; }
.conflict-evidence-note { margin: 4px 0 0; font-size: 12px; }
/* The stored EAN evidence under each conflict row (card t_dee55342): a
   sub-row, so the queue keeps its six-column layout and the evidence has room
   to group by leg without squeezing a cell. Presentation only. */
.conflict-evidence-row td.ean-evidence {
  padding: 6px 10px 10px;
  font-size: 12px;
  color: var(--slate-300);
  white-space: normal;
  overflow: visible;
}
.conflict-evidence-row .ean-evidence-coverage { color: var(--slate-100); font-weight: 600; }
.conflict-evidence-row.conflict-evidence-none .ean-evidence-coverage { color: var(--slate-400); font-weight: 400; }
.conflict-evidence-row.conflict-evidence-unavailable .ean-evidence-coverage { color: #fcd34d; }
.conflict-evidence-row .ean-legs { margin: 3px 0 3px 16px; padding: 0; }
.conflict-evidence-row .ean-legs li { margin: 1px 0; }
.conflict-evidence-row .ean-leg { color: var(--slate-200); }
.conflict-evidence-row .ean-leg-count { font-variant-numeric: tabular-nums; }
.conflict-evidence-row .ean-value { color: var(--slate-100); }
.conflict-evidence-row .ean-value-count { font-variant-numeric: tabular-nums; }
.conflict-evidence-row .ean-value-why { font-size: 11px; }
.conflict-evidence-row .ean-evidence-flags { display: block; margin-top: 3px; }
.conflict-evidence-row .ean-flag-item { margin-right: 6px; }
.conflict-evidence-row .ean-evidence-scope { display: block; margin-top: 2px; font-size: 11px; }

/* ============================================================================
   Merge candidates — the mechanical variant classes (card t_06c6d445).
   Six columns whose PERCENTAGE budget sums to exactly 100%: the t_de2267da
   rule is that a px sum can render the table wider than `.table-scroll` and
   push the LAST column (here the Confirm control) off the visible edge.
   Presentation only — every write is the shipped merge action, founder-gated
   on the server.
   ========================================================================== */
.variants-table col.col-variant-pair { width: 24%; }
.variants-table col.col-variant-canonicals { width: 15%; }
.variants-table col.col-variant-units { width: 13%; }
.variants-table col.col-variant-company { width: 16%; }
.variants-table col.col-variant-ean { width: 14%; }
.variants-table col.col-variant-actions { width: 18%; }
.variants-table td { white-space: normal; vertical-align: top; }
.variant-class-note { margin: 6px 0 0; font-size: 12px; }
.variant-note { margin: 6px 0 0; font-size: 12px; }
/* One side of a pair: the id is ALWAYS labelled `brand_id` (the founder read a
   bare pair id as a canonical id once — card t_405512fe, comment 2026-09-25). */
.variant-side { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; margin: 0 0 3px; }
.variant-letter {
  display: inline-block; min-width: 14px; text-align: center;
  font-size: 10px; font-weight: 700; color: var(--slate-300);
  border: 1px solid var(--slate-600); border-radius: 3px; padding: 0 3px;
}
.variant-id { font-size: 11px; }
.variant-id .brand-id-value { color: var(--slate-50); font-weight: 600; }
.variant-canon { margin: 0 0 3px; }
.variant-canon-count { color: var(--slate-50); font-variant-numeric: tabular-nums; }
.variant-canon-ids summary { cursor: pointer; color: var(--slate-400); font-size: 11px; }
.variant-canon-ids .mono { display: block; font-size: 11px; word-break: break-all; margin-top: 2px; }
.variant-unit-side { white-space: nowrap; }
.variant-unit-side .variant-letter { margin-right: 3px; }
.variant-unknown-why { font-size: 11px; }
.variant-verdict {
  display: inline-block; font-size: 11px; padding: 1px 7px;
  border-radius: 999px; border: 1px solid var(--slate-600); color: var(--slate-200);
}
.variant-verdict-agree { color: #86efac; border-color: rgba(134, 239, 172, 0.45); }
.variant-verdict-refused { color: #fca5a5; border-color: rgba(252, 165, 165, 0.45); }
.variant-company-side { font-size: 11px; margin-top: 2px; }
.variant-target-option { display: block; font-size: 12px; }
.variant-rec { margin: 4px 0 2px; font-size: 11px; }
.variant-gs1 { margin: 2px 0; font-size: 11px; color: #fcd34d; }
.variant-predicate { margin: 4px 0 2px; font-size: 11px; }
.variant-predicate-pass { color: #86efac; }
.variant-predicate-refused { color: #fca5a5; }
.variant-refusals { margin: 2px 0 4px 16px; padding: 0; font-size: 11px; color: var(--slate-300); }
.variant-evidence-row td.ean-evidence { white-space: normal; overflow: visible; }
.variant-evidence-side { margin: 0 0 6px; }
.variant-pass-list { margin: 4px 0 4px 16px; padding: 0; font-size: 12px; }
.variant-pass-refused { color: #fca5a5; }

/* ---------------------------------------------------------------------------
   The token-prefix PARENT-LINK lane + its decision register (card t_1144ce29).
   Scoped to the lane's OWN containers so nothing here reaches the registry or
   conflict tables (no `td` positional rules are added).
   --------------------------------------------------------------------------- */
.parent-link-lane .parent-shape-label {
  margin: 0 0 2px;
  font-weight: 600;
}
.parent-link-lane .parent-basis,
.parent-link-lane .parent-carry,
.parent-link-lane .parent-company,
.parent-link-lane .parent-decision {
  margin: 0;
  font-size: 0.85em;
}
.parent-link-lane .parent-direction {
  margin: 0 0 4px;
}
.parent-link-lane .parent-actions-cell .variant-actions-cell {
  min-width: 320px;
}
.parent-link-lane .parent-link-confirm,
.parent-link-lane .decision-record {
  display: block;
  margin-top: 6px;
}
.parent-link-lane .decision-reason {
  max-width: 420px;
}

/* ---------------------------------------------------------------------------
   The SIXTH conflict verdict (`neither` — a human-supplied corrected value) and
   the brand-key correction dialog (card t_531c6a8e). Scoped to the conflict
   verdict cell and the edit dialog's own classes: no `td` positional rule is
   added, so the table's declared column budget is untouched.
   --------------------------------------------------------------------------- */
.conflict-verdicts .conflict-correction {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  width: 100%;
  margin-top: 2px;
}
.conflict-verdicts .conflict-corrected-input {
  flex: 1 1 140px;
  min-width: 120px;
  font-size: 11px;
  padding: 2px 6px;
}
.conflict-verdicts .conflict-correction-hint {
  flex-basis: 100%;
  font-size: 10px;
}
.edit-body .key-correction-note {
  font-size: 0.85em;
}
.edit-body .brand-key-correction-input {
  width: 100%;
}