/* =========================================================================
   AI Growth Agent — Competitor variation analysis
   Light-first SaaS shell: left sidebar, top search bar, product header,
   tinted KPI tiles, tabbed analysis. Dark is the opt-in theme.
   ====================================================================== */

:root {
  --bg:            #f6f8fb;
  --bg-elev:       #ffffff;
  --panel:         #ffffff;
  --panel-2:       #f3f5f9;
  --border:        #e3e8f0;
  --border-soft:   #edf0f5;

  --text:          #0f172a;
  --text-muted:    #5b6b84;
  --text-dim:      #8a97ad;

  --accent:        #2563eb;
  --accent-soft:   rgba(37, 99, 235, 0.09);
  --accent-line:   rgba(37, 99, 235, 0.32);

  --high:          #dc2f43;
  --high-soft:     rgba(220, 47, 67, 0.09);
  --emerging:      #d97706;
  --emerging-soft: rgba(217, 119, 6, 0.11);
  --low:           #6b7a91;
  --low-soft:      rgba(107, 122, 145, 0.1);
  --nodata:        #7a8698;
  --nodata-soft:   rgba(122, 134, 152, 0.1);
  --good:          #12864f;
  --good-soft:     rgba(18, 134, 79, 0.1);
  --purple:        #7c3aed;
  --purple-soft:   rgba(124, 58, 237, 0.09);

  --shadow:        0 1px 2px rgba(15, 23, 42, .04), 0 1px 8px rgba(15, 23, 42, .04);
  --shadow-lg:     0 10px 30px rgba(15, 23, 42, .10);

  --radius:        12px;
  --radius-sm:     8px;
  --sidebar-w:     236px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

:root[data-theme="dark"] {
  --bg:            #0b0f17;
  --bg-elev:       #131925;
  --panel:         #141b28;
  --panel-2:       #1a2231;
  --border:        #243046;
  --border-soft:   #1c2535;

  --text:          #e8eef8;
  --text-muted:    #8c9ab1;
  --text-dim:      #626f85;

  --accent:        #4f8cff;
  --accent-soft:   rgba(79, 140, 255, 0.14);
  --accent-line:   rgba(79, 140, 255, 0.38);

  --high:          #ff5f6d;
  --high-soft:     rgba(255, 95, 109, 0.14);
  --emerging:      #ffb02e;
  --emerging-soft: rgba(255, 176, 46, 0.14);
  --low:           #7d8aa1;
  --low-soft:      rgba(125, 138, 161, 0.14);
  --nodata:        #5c6880;
  --nodata-soft:   rgba(92, 104, 128, 0.14);
  --good:          #34c77b;
  --good-soft:     rgba(52, 199, 123, 0.14);
  --purple:        #a78bfa;
  --purple-soft:   rgba(167, 139, 250, 0.14);

  --shadow:        0 1px 2px rgba(0, 0, 0, .3);
  --shadow-lg:     0 10px 30px rgba(0, 0, 0, .5);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--text);
  font-family: var(--sans); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* =========================================================================
   STAGES — `body[data-stage]` is the single switch for what is on screen.
   ====================================================================== */
#stageSetup, #stageLoader, #dashboardView { display: none; }
body[data-stage="setup"]     #stageSetup    { display: grid; }
body[data-stage="dashboard"] #dashboardView { display: block; }
body[data-stage="running"] #stageLoader,
body[data-stage="ready"]   #stageLoader { display: grid; }

.loader-live, .loader-done, .loader-fail { display: none; }
body[data-stage="running"] .loader-live { display: block; }
body[data-stage="ready"]   .loader-done { display: block; }
body[data-stage="ready"].run-failed .loader-done { display: none; }
body[data-stage="ready"].run-failed .loader-fail { display: block; }

/* Topbar chips describe a loaded dataset; before one exists they are noise. */
.on-dashboard { display: none !important; }
body[data-stage="dashboard"] .on-dashboard { display: inline-flex !important; }
/* …unless the chip carries its own .hide (no flags, or the header already says it). */
body[data-stage="dashboard"] .on-dashboard.hide { display: none !important; }

.hide { display: none !important; }

/* =========================================================================
   APP SHELL — sidebar + main
   ====================================================================== */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }

.sidebar {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
  padding: 18px 14px;
  background: var(--panel); border-right: 1px solid var(--border);
  overflow-y: auto;
}
.logo {
  display: flex; align-items: center; gap: 10px;
  padding: 2px 6px 18px;
  font-weight: 700; font-size: 15px; letter-spacing: -0.01em;
}
.logo-mark {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  background: linear-gradient(135deg, var(--accent), #7c3aed);
  display: grid; place-items: center;
  color: #fff; font-size: 13px; font-weight: 800;
}
.logo small {
  display: block; font-weight: 450; font-size: 11.5px;
  color: var(--text-dim); letter-spacing: 0;
}

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border: none; border-radius: 9px;
  background: none; color: var(--text-muted);
  font-size: 13.5px; font-weight: 550; text-align: left; cursor: pointer;
  transition: background .12s, color .12s;
}
.nav-item:hover { background: var(--panel-2); color: var(--text); border-color: transparent; }
.nav-item.active { background: var(--accent-soft); color: var(--accent); }
.nav-ico {
  width: 20px; text-align: center; font-size: 15px; flex: none; opacity: .85;
}
.nav-item .count {
  margin-left: auto; padding: 1px 8px; border-radius: 100px;
  background: var(--panel-2); color: var(--text-dim);
  font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.nav-item.active .count { background: rgba(37,99,235,.14); color: var(--accent); }
.nav-group { margin-top: 14px; }
.nav-label {
  padding: 0 12px 6px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim);
}
/* Analysis links mean nothing until a dataset exists. */
#navAnalysis { display: none; }
body.has-data #navAnalysis { display: block; }

.side-card {
  margin-top: auto; padding: 16px;
  background: var(--accent-soft); border: 1px solid transparent;
  border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 10px;
  font-size: 12.5px; line-height: 1.5;
}
.side-card-ico {
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 9px; background: var(--panel); color: var(--accent);
  font-size: 18px; box-shadow: var(--shadow);
}
.side-card strong { display: block; color: var(--accent); font-size: 13px; }
.side-card span { color: var(--text-muted); }
.side-card .primary { width: 100%; background: var(--text); border-color: var(--text); }
.side-card .primary:hover { background: var(--text); filter: brightness(1.25); }
:root[data-theme="dark"] .side-card .primary { background: var(--accent); border-color: var(--accent); }

.main { min-width: 0; display: flex; flex-direction: column; }

/* ---------------------------------------------------------------- topbar */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  padding: 11px 26px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.topbar-spacer { flex: 1; }

.search {
  display: flex; align-items: center; gap: 8px;
  width: min(520px, 100%); padding: 0 14px; height: 40px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  color: var(--text-dim);
  transition: border-color .12s, box-shadow .12s;
}
.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--panel); }
.search-ico { font-size: 16px; line-height: 1; }
.search input {
  flex: 1; min-width: 0; border: none; background: none; outline: none;
  font: inherit; font-size: 13.5px; color: var(--text); padding: 0;
}
.search input::placeholder { color: var(--text-dim); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 9px;
  background: var(--panel); border: 1px solid var(--border);
  font-size: 12px; font-weight: 550; color: var(--text-muted); white-space: nowrap;
}
.chip.market b {
  font-family: Georgia, serif; font-weight: 800; color: #ff9900; font-size: 14px; line-height: 1;
}
.chip.demo   { background: var(--emerging-soft); border-color: transparent; color: var(--emerging); font-weight: 600; }
.chip.live   { background: var(--good-soft); border-color: transparent; color: var(--good); font-weight: 600; }
.chip.saved  { background: var(--good-soft); border-color: transparent; color: var(--good); font-weight: 600; }
.chip.warn   { background: var(--high-soft); border-color: transparent; color: var(--high); font-weight: 600; cursor: pointer; }
.chip.stale  { background: var(--high-soft); border-color: transparent; color: var(--high); }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.bell {
  position: relative; width: 38px; height: 38px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; font-size: 16px; background: var(--panel);
}
.bell-badge {
  position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 100px;
  background: var(--high); color: #fff; font-size: 10.5px; font-weight: 700;
  display: grid; place-items: center; border: 2px solid var(--panel);
}

.workspace {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 8px 4px 4px; border-radius: 10px;
  font-size: 13px; line-height: 1.2;
}
.workspace strong { display: block; font-weight: 650; }
.workspace small { color: var(--text-dim); font-size: 11.5px; }
.ws-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: #1e3a8a; color: #fff; font-weight: 700;
  display: grid; place-items: center; font-size: 14px;
}

.wrap { padding: 22px 26px 80px; max-width: 1640px; width: 100%; margin: 0 auto; }

/* =========================================================================
   BUTTONS / INPUTS
   ====================================================================== */
button, .btn {
  font-family: inherit; font-size: 13px; font-weight: 560;
  padding: 8px 14px; border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--panel); color: var(--text);
  cursor: pointer; transition: background .12s, border-color .12s, opacity .12s, box-shadow .12s;
  white-space: nowrap;
}
button:hover, .btn:hover { background: var(--panel-2); border-color: var(--accent-line); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primary {
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: 0 1px 2px rgba(37, 99, 235, .3);
}
button.primary:hover { filter: brightness(1.08); background: var(--accent); }
button.ghost { background: transparent; }
button.icon { padding: 7px 9px; }
button.big { font-size: 14px; font-weight: 600; padding: 11px 20px; }
.btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--text); }
.btn:hover { text-decoration: none; }
a.btn.hide, body[data-stage="dashboard"] a.btn.hide { display: none !important; }
.btn-icon { display: inline-flex; align-items: center; gap: 6px; }
.link-btn {
  border: none; background: none; padding: 4px 0; color: var(--accent);
  font-size: 13px; font-weight: 550;
}
.link-btn:hover { background: none; border: none; text-decoration: underline; }

input[type="text"], input[type="url"], input[type="number"], textarea, select {
  font-family: inherit; font-size: 13px;
  padding: 9px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text);
  width: 100%;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
select {
  appearance: none; -webkit-appearance: none; padding-right: 30px;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%),
                    linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
  background-position: calc(100% - 15px) 55%, calc(100% - 10px) 55%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
textarea { resize: vertical; min-height: 78px; font-family: var(--mono); font-size: 12px; line-height: 1.6; }
input.mono { font-family: var(--mono); }
input[type="range"] { width: 100%; accent-color: var(--accent); }

.select-sm { padding: 7px 26px 7px 10px; font-size: 12.5px; flex: none; }

/* A search-shaped field: icon inside, optional clear button. */
.search-field {
  position: relative; display: flex; align-items: center; width: 100%;
}
.search-field .search-ico { position: absolute; left: 12px; color: var(--text-dim); pointer-events: none; }
.search-field input { padding-left: 34px; }
.search-field .clear-x {
  position: absolute; right: 6px; width: 26px; height: 26px; padding: 0;
  border: none; background: none; color: var(--text-dim); font-size: 18px; line-height: 1;
}
.search-field .clear-x:hover { color: var(--text); background: var(--panel-2); border-radius: 50%; }
.search-row { display: flex; gap: 10px; align-items: stretch; }
.search-row .search-field { flex: 1; }
.search-row .big { padding: 10px 20px; }

/* =========================================================================
   PANELS / SECTION HEADERS
   ====================================================================== */
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.panel-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-soft);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.panel-head h2 { margin: 0; font-size: 14.5px; font-weight: 650; letter-spacing: -0.01em; }
.panel-head p  { margin: 0; font-size: 12px; color: var(--text-dim); }
.panel-body { padding: 18px; }

.section-head { display: flex; align-items: flex-start; gap: 16px; justify-content: space-between; }
.section-head .link-btn { margin-top: 30px; flex: none; }
.section-title {
  margin: 26px 0 8px;
  font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
}
.section-sub { margin: 0 0 16px; color: var(--text-muted); font-size: 13.5px; max-width: 90ch; }

/* =========================================================================
   SETUP FLOW — the form and the product grid

   There used to be a 224px "Product Lookup / Confirm Product / Analyze" rail in
   a left column here. It narrated a three-step flow that the screen already
   shows: you type an ASIN, a confirmation card appears, the loader takes over.
   It cost 252px of every width — on a 1440px screen that was the difference
   between three product cards a row and four — and it was decoration on the
   browse screen, where nobody is part-way through anything.
   ====================================================================== */
.flow {
  grid-template-columns: minmax(0, 1fr); align-items: start;
}
.flow-body { min-width: 0; }

.hero { max-width: 60ch; margin: 22px auto 22px; text-align: center; }
.hero h1 { margin: 0 0 8px; font-size: 28px; font-weight: 750; letter-spacing: -0.025em; }
.hero p { margin: 0; color: var(--text-muted); font-size: 13.5px; line-height: 1.65; }
body[data-stage="setup"] .setup { max-width: 820px; margin: 0 auto; }
.setup { margin-top: 0; }

/* ------------------------------------------------------- connection banner */
.conn {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border-soft);
  border-radius: var(--radius) var(--radius) 0 0;
  font-size: 12.5px; line-height: 1.5;
}
.conn strong { display: block; font-size: 13px; font-weight: 620; }
.conn span:not(.conn-dot) { color: var(--text-muted); }
.conn-dot { width: 8px; height: 8px; margin-top: 5px; flex: none; border-radius: 50%; background: var(--text-dim); }
.conn[data-state="unknown"] { background: var(--panel-2); }
.conn[data-state="live"]  { background: var(--good-soft); }
.conn[data-state="live"]  strong   { color: var(--good); }
.conn[data-state="live"]  .conn-dot { background: var(--good); animation: pulse 2s ease-in-out infinite; }
.conn[data-state="demo"]  { background: var(--emerging-soft); }
.conn[data-state="demo"]  strong { color: var(--emerging); }
.conn[data-state="demo"]  .conn-dot { background: var(--emerging); }
.conn[data-state="broken"] { background: var(--high-soft); }
.conn[data-state="broken"] strong { color: var(--high); }
.conn[data-state="broken"] .conn-dot { background: var(--high); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.conn.saved { background: var(--accent-soft); }
.conn.saved strong { color: var(--accent); }
.conn.saved .conn-dot { background: var(--accent); }
.conn.saved.hide { display: none; }
.saved-body { flex: 1; }
.saved-actions { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.saved-actions .primary, .saved-actions .ghost { padding: 7px 14px; font-size: 12.5px; }
.conn.saved[data-choice="fresh"] { background: var(--panel-2); }
.conn.saved[data-choice="fresh"] strong { color: var(--text-muted); }
.conn.saved[data-choice="fresh"] .conn-dot { background: var(--text-dim); }

/* ------------------------------------------------------ segmented control */
.seg {
  display: inline-flex; padding: 3px; margin-bottom: 22px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 100px;
}
.seg-btn { padding: 6px 16px; border: none; border-radius: 100px; background: none; color: var(--text-muted); font-size: 12.5px; font-weight: 560; }
.seg-btn:hover { background: none; border-color: transparent; color: var(--text); }
.seg-btn[aria-pressed="true"] { background: var(--bg-elev); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }

/* Lookup-mode search tabs: Amazon ASIN / Amazon Link / Product Name */
.search-modes {
  display: flex; gap: 2px; margin: 0 0 18px; padding: 4px;
  background: var(--panel-2); border-radius: 10px;
}
.sm-btn {
  flex: 1; padding: 9px 12px; border: none; border-radius: 8px; background: none;
  color: var(--text-muted); font-size: 13px; font-weight: 550;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.sm-btn b { font-family: Georgia, serif; font-weight: 800; color: #ff9900; font-size: 15px; line-height: 1; }
.sm-btn:hover { background: var(--panel); color: var(--text); border: none; }
.sm-btn[aria-pressed="true"] { background: var(--panel); color: var(--text); box-shadow: var(--shadow); }

/* ------------------------------------------------------------ setup steps */
.step { display: flex; gap: 14px; padding-bottom: 22px; }
.step:last-of-type { padding-bottom: 4px; }
.step-n {
  flex: none; width: 24px; height: 24px; margin-top: 1px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent);
  font-size: 11.5px; font-weight: 650; font-variant-numeric: tabular-nums;
}
.step-body { flex: 1; min-width: 0; }
.step-label { display: block; margin-bottom: 3px; font-size: 14px; font-weight: 620; letter-spacing: -0.01em; color: var(--text); text-transform: none; }
.step-help { margin: 0 0 10px; font-size: 12.5px; color: var(--text-muted); line-height: 1.55; }
.field-note { display: block; margin-top: 7px; font-size: 12px; color: var(--text-dim); }
.field-note.ok  { color: var(--good); }
.field-note.err { color: var(--high); }
.asin-input { max-width: 240px; font-size: 15px; letter-spacing: .09em; text-transform: uppercase; }

/* ------------------------------------------------------------- disclosure */
.disclose { border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); }
.disclose > summary { padding: 12px 16px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-muted); list-style: none; }
.disclose > summary::-webkit-details-marker { display: none; }
.disclose > summary::before { content: '▸'; display: inline-block; width: 14px; color: var(--text-dim); transition: transform .12s; }
.disclose[open] > summary::before { transform: rotate(90deg); }
.disclose > summary:hover { color: var(--text); }
.disclose-body { padding: 4px 16px 16px; font-size: 12.5px; color: var(--text-muted); line-height: 1.6; }
.disclose-body p { margin: 0 0 10px; }
.disclose-body strong { color: var(--text); }

/* --------------------------------------------------------- action footer */
.setup-actions {
  padding: 14px 18px;
  border-top: 1px solid var(--border-soft);
  background: var(--panel-2);
  border-radius: 0 0 var(--radius) var(--radius);
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.run-readout { flex: 1; min-width: 190px; }
.run-summary { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.run-summary strong { color: var(--text); font-weight: 600; }
.run-readout .status-line:empty { display: none; }
.run-readout .status-line:not(:empty) + .run-summary { display: none; }
.status-line { font-size: 12.5px; color: var(--text-muted); }
.status-line.err { color: var(--high); }
.status-line.ok  { color: var(--good); }
.status-line .muted {
  color: var(--text-muted); opacity: .75; font-size: 11.5px;
  display: inline-block; max-width: 46ch; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
}

.refresh-note {
  margin: 0 18px 18px; padding: 12px 16px;
  display: flex; align-items: center; gap: 10px;
  background: var(--accent-soft); border-radius: 10px;
  font-size: 12.5px; color: var(--text-muted);
}
.refresh-note .rn-ico { color: var(--accent); font-size: 15px; }
.refresh-note a { margin-left: auto; font-weight: 600; }

/* ---------------------------------------------------------------------
   LOOKUP MODE — the end-user deployment (body.lookup-mode). */
body.lookup-mode #modeChips,
body.lookup-mode #modeFile,
body.lookup-mode #stepCompetitors,
body.lookup-mode #stepMarket,
body.lookup-mode #btnReset,
body.lookup-mode #btnRun,
body.lookup-mode #savedBanner,
body.lookup-mode #connBanner { display: none !important; }
body.lookup-mode #searchModes,
body.lookup-mode #refreshNote,
body.lookup-mode .lookup-only { display: flex !important; }
body.lookup-mode #modeManual .step-n { display: none; }
/* Only the ASIN step's own label/help — the product list and its hints live in the
   same container and must keep theirs. */
body.lookup-mode #modeManual > .step > .step-body > .step-label,
body.lookup-mode #modeManual > .step > .step-body > .step-help { display: none; }
body.lookup-mode #inpAsin {
  font-size: 15px; padding: 11px 36px 11px 36px; max-width: none;
  letter-spacing: normal; text-transform: none; font-family: var(--sans);
}
body.lookup-mode .setup-actions { display: none; }
body.lookup-mode .setup-actions:has(.status-line:not(:empty)) { display: flex; }
body.lookup-mode .hero { margin-top: 10px; }

/* Step 2 — the "product found" confirmation card. */
.lookup-preview {
  margin: 4px 0 18px; padding: 16px;
  display: grid; grid-template-columns: 88px 1fr auto; gap: 16px; align-items: center;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel);
  box-shadow: var(--shadow);
}
.lp-thumb {
  width: 88px; height: 88px; border-radius: 10px;
  background: var(--panel-2); display: grid; place-items: center;
  font-size: 30px; color: var(--text-dim);
}
.lp-body { min-width: 0; }
.lp-title { font-size: 16px; font-weight: 700; margin: 0 0 2px; }
.lp-by { color: var(--text-muted); font-size: 12.5px; }
.lp-asin { margin-top: 6px; font-size: 12.5px; }
.lp-asin b { font-family: var(--mono); }
.lp-tags { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.lp-side { text-align: left; font-size: 12.5px; color: var(--text-muted); min-width: 150px; }
.lp-found { display: flex; align-items: center; gap: 7px; color: var(--good); font-weight: 700; font-size: 13.5px; margin-bottom: 8px; }
.lp-found i {
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: var(--good-soft); border: 1.5px solid var(--good); font-style: normal; font-size: 11px;
}
.lp-side b { color: var(--text); display: block; }
.lp-side .lp-open { margin-top: 10px; width: 100%; }
.lp-catalog { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted); padding-top: 12px; border-top: 1px solid var(--border-soft); }
@media (max-width: 720px) { .lookup-preview { grid-template-columns: 64px 1fr; } .lp-side { grid-column: 1 / -1; } }

/* Live batch progress strip. */

/* Recent lookups */
.lookup-recent { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.lookup-recent .chip { cursor: pointer; }
.lookup-recent .chip:hover { border-color: var(--accent); color: var(--text); }

/* Product grid: what CAN be looked up */
.lookup-products { margin-top: 6px; }
.lookup-products.is-loading { opacity: .55; pointer-events: none; }
.lookup-products .cat-head { margin: 18px 0 8px; font-size: 13px; font-weight: 700; color: var(--text); }
.lookup-products .cat-head span { color: var(--text-dim); font-weight: 400; }
.market-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.market-chips .chip { cursor: pointer; }
.market-chips .chip.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.lookup-products h3 { margin: 0 0 10px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
/* 190px, not 220px: 220 fitted only three cards a row in the content track while
   the card itself needs about 190. Since the step rail was removed the track is
   ~1150px at 1440, so this now packs five. */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.product-card {
  text-align: left; padding: 12px 14px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  transition: border-color .12s, box-shadow .12s, transform .12s;
  display: flex; flex-direction: column; gap: 5px; font-size: 12.5px;
}
.product-card:hover { border-color: var(--accent-line); box-shadow: var(--shadow-lg); transform: translateY(-1px); background: var(--panel); }
.product-card > span { min-width: 0; }
.product-card .pc-name { font-weight: 650; font-size: 13px; color: var(--text); }
.product-card .pc-vs, .product-card .pc-asin { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-card .pc-vs { color: var(--text-muted); }
.product-card .pc-asin { font-family: var(--mono); font-size: 11px; color: var(--text-dim); }
.product-card .pc-sku { font-family: var(--mono); font-size: 11px; color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-card .pc-age { display: flex; align-items: center; gap: 6px; color: var(--text-muted); }
.product-card .pc-age::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--good); flex: none; }
.product-card.stale .pc-age { color: var(--high); }
.product-card.stale .pc-age::before { background: var(--high); }

/* Catalog panel */
.catalog-panel { max-width: 820px; margin: 16px auto 0; }
.cat-grid { display: grid; grid-template-columns: 220px 1fr; gap: 12px; }
.cat-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cat-field input { width: 100%; }
.cat-optional, .cat-count { color: var(--text-dim); font-weight: 400; }
.cat-count { margin-left: 6px; font-size: 11px; }
.cat-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.cat-row .cr-asin { flex: none; width: 200px; font-family: var(--mono); font-size: 12.5px; }
.cat-row .cr-name { flex: 1; min-width: 0; }
.cat-row .cr-x { flex: none; padding: 6px 10px; }
.cat-row.bad .cr-asin { border-color: var(--high); }
.cat-row.ok .cr-asin { border-color: var(--good); }
.catalog-panel input, .catalog-panel textarea { width: 100%; max-width: 420px; }
.cat-entry { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--border-soft); font-size: 12.5px; }
.cat-entry .brand { font-weight: 650; }
.cat-entry .muted { color: var(--text-muted); }

/* ------------------------------------------------------------ dropzone */
.dropzone {
  border: 1.5px dashed var(--border); border-radius: var(--radius); background: var(--bg);
  padding: 26px 20px; display: flex; align-items: center; justify-content: center;
  gap: 12px; flex-wrap: wrap; text-align: center; transition: border-color .12s, background .12s;
}
.dropzone.over { border-color: var(--accent); background: var(--accent-soft); }
.dropzone strong { font-size: 14px; }
.dropzone span { color: var(--text-dim); font-size: 12.5px; }
.dropzone .dz-hint { width: 100%; margin: 2px 0 0; font-size: 11.5px; color: var(--text-dim); }
.target-table { width: 100%; font-size: 12.5px; margin-top: 10px; }
.target-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); padding: 6px 10px; border-bottom: 1px solid var(--border); }
.target-table td { padding: 7px 10px; border-bottom: 1px solid var(--border-soft); }
.target-table tr:last-child td { border-bottom: none; }
.slot-empty { color: var(--text-dim); font-style: italic; }

/* =========================================================================
   LOADER / READY
   ====================================================================== */
#stageLoader { min-height: 72vh; }
.loader-card {
  position: relative; overflow: hidden;
  width: 100%; max-width: 640px; margin: 24px auto 0;
  padding: 40px 34px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--shadow); text-align: center;
}
.loader-card h2 { margin: 22px 0 6px; font-size: 22px; font-weight: 720; letter-spacing: -0.02em; }
.loader-card > div > p { margin: 0; color: var(--text-muted); font-size: 13.5px; }

.ring { position: relative; width: 132px; height: 132px; margin: 0 auto; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.ring-track { stroke: var(--border); }
.ring-arc {
  stroke: var(--accent);
  stroke-dasharray: 263.9; stroke-dashoffset: 263.9;
  transition: stroke-dashoffset .4s ease;
  transform-box: fill-box; transform-origin: 50% 50%;
}
.ring.indeterminate .ring-arc { stroke-dasharray: 66 198; stroke-dashoffset: 0; transition: none; animation: spin 1.15s linear infinite; }
.ring-pct { position: absolute; inset: 0; display: grid; place-items: center; font-size: 23px; font-weight: 680; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.loader-bar { height: 5px; margin: 22px 0 10px; background: var(--panel-2); border-radius: 100px; overflow: hidden; }
.loader-bar span { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 100px; transition: width .4s ease; }
.loader-meta { display: flex; justify-content: center; gap: 8px; font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.loader-meta .sep { color: var(--text-dim); }
.loader-log { margin-top: 14px; min-height: 17px; font-size: 11.5px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loader-note { margin: 20px 0 0 !important; padding-top: 16px; border-top: 1px solid var(--border-soft); font-size: 12px; color: var(--text-dim) !important; line-height: 1.6; }
.loader-refresh { margin: 14px 0 0 !important; font-size: 12.5px; color: var(--text-muted) !important; line-height: 1.6; }
.loader-refresh.stale { color: var(--high) !important; font-weight: 600; }

.steps { margin: 22px 0 0; padding: 16px 0 0; border-top: 1px solid var(--border-soft); list-style: none; text-align: left; }
.steps li { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 12.5px; color: var(--text-dim); }
.steps .s-mark { flex: none; width: 16px; height: 16px; display: grid; place-items: center; border: 1.5px solid var(--border); border-radius: 50%; font-size: 9px; color: transparent; }
.steps li.done { color: var(--text-muted); }
.steps li.done .s-mark { background: var(--good-soft); border-color: var(--good); color: var(--good); }
.steps li.active { color: var(--text); font-weight: 550; }
.steps li.active .s-mark { border-color: var(--accent); border-right-color: transparent; animation: spin .9s linear infinite; }

.loader-actions { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-soft); display: flex; flex-direction: column; align-items: center; gap: 8px; }
button.ghost.danger { color: var(--high); border-color: rgba(220, 47, 67, .35); }
button.ghost.danger:hover:not(:disabled) { background: var(--high-soft); border-color: var(--high); }
button.ghost.danger:disabled { opacity: .55; cursor: default; }
.loader-stopnote { font-size: 11.5px; line-height: 1.55; color: var(--text-dim); max-width: 420px; text-align: center; }

.tick, .cross { width: 74px; height: 74px; margin: 0 auto; display: grid; place-items: center; border-radius: 50%; font-size: 32px; font-weight: 700; }
.tick  { background: var(--good); color: #fff; box-shadow: 0 0 0 10px var(--good-soft); }
.cross { background: var(--high-soft); color: var(--high); border: 1.5px solid var(--high); }
body.run-stopped .cross { background: var(--bg-elev); color: var(--text-muted); border-color: var(--border); font-size: 0; }
body.run-stopped .cross::before { content: '■'; font-size: 24px; }

/* A little celebration. Static dots, no motion. */
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti i { position: absolute; width: 8px; height: 8px; border-radius: 2px; opacity: .8; }
.confetti i:nth-child(1) { left: 34%; top: 36px; background: #f59e0b; transform: rotate(20deg); }
.confetti i:nth-child(2) { left: 61%; top: 44px; background: #2563eb; border-radius: 50%; }
.confetti i:nth-child(3) { left: 30%; top: 80px; background: #22c55e; border-radius: 50%; }
.confetti i:nth-child(4) { left: 66%; top: 92px; background: #ec4899; transform: rotate(-25deg); }
.confetti i:nth-child(5) { left: 40%; top: 118px; background: #a855f7; width: 5px; height: 12px; transform: rotate(35deg); }
.confetti i:nth-child(6) { left: 58%; top: 20px; background: #f97316; width: 5px; height: 12px; transform: rotate(-40deg); }

.done-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin: 26px 0 26px; text-align: left;
}
.done-stats .ds {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 14px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
}
.done-stats .ds-ico { width: 40px; height: 40px; flex: none; border-radius: 10px; display: grid; place-items: center; font-size: 18px; background: var(--accent-soft); color: var(--accent); }
.done-stats .ds b { display: block; font-size: 20px; font-weight: 720; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.done-stats .ds span { font-size: 12px; color: var(--text-muted); }
.done-stats .ds.purple .ds-ico { background: var(--purple-soft); color: var(--purple); }
.done-stats .ds.orange .ds-ico { background: rgba(249,115,22,.12); color: #ea580c; }
.done-stats .ds.warn .ds-ico { background: var(--high-soft); color: var(--high); }
.done-stats .ds.flag .ds-ico { background: var(--emerging-soft); color: var(--emerging); }
.done-stats .ds.date { background: var(--accent-soft); border-color: transparent; }
.done-stats .ds.date .ds-ico { background: var(--panel); }
.done-stats .ds.date b { font-size: 14.5px; }
.done-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.loader-fail .primary { min-width: 220px; }
.loader-done .ghost { display: inline-block; margin: 14px auto 0; }
@media (max-width: 640px) { .done-stats { grid-template-columns: 1fr 1fr; } }

#flMsg { margin: 10px 0 18px; }
#flMsg .fl-why, #flMsg .fl-hint { max-width: 540px; margin: 0 auto; }
#flMsg .fl-hint { color: var(--text-muted); font-size: 13px; margin-top: 12px; }
.fl-vocab { max-width: 540px; margin: 14px auto 0; text-align: left; display: grid; gap: 8px; }
.fl-vocab .fl-brand { padding: 10px 14px; font-size: 13px; background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); }
.fl-brand b { margin-right: 8px; }
.fl-brand .fl-tag { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; }
.fl-brand .fl-axis { display: block; color: var(--text-muted); margin-top: 4px; }
.fl-brand .fl-axis i { font-style: normal; color: var(--text); }

/* =========================================================================
   DASHBOARD — product header
   ====================================================================== */
.product-head {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 4px 0 20px;
}
.ph-thumb {
  width: 84px; height: 84px; flex: none; border-radius: 12px;
  background: var(--panel-2); border: 1px solid var(--border);
  display: grid; place-items: center; overflow: hidden;
  font-size: 22px; font-weight: 800; color: var(--text-dim);
}
.ph-thumb .swatch { width: 100%; height: 100%; display: grid; place-items: center; }
.ph-body { flex: 1; min-width: 260px; }
.ph-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ph-title-row h1 { margin: 0; font-size: 24px; font-weight: 750; letter-spacing: -0.025em; }
.ph-brands { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.ph-brands .badge { font-size: 11.5px; padding: 4px 10px; }
.ph-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 6px; font-size: 13px; color: var(--text-muted); }
.ph-meta b { color: var(--text); font-weight: 650; }
.copy { padding: 1px 6px; margin-left: 4px; font-size: 12px; border: none; background: none; color: var(--text-dim); }
.copy:hover { color: var(--accent); background: var(--accent-soft); }
.ph-status { display: inline-flex; align-items: center; gap: 6px; }
.ph-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); }
.ph-status.stale .dot { background: var(--high); }
.ph-status.stale { color: var(--high); font-weight: 600; }
.ph-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
  border-radius: 9px; background: var(--panel); border: 1px solid var(--border);
  font-size: 12px; font-weight: 550; color: var(--text-muted);
}
.ph-pill.warn { background: var(--high-soft); border-color: transparent; color: var(--high); font-weight: 600; cursor: pointer; }
.ph-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ph-actions .btn, .ph-actions button { padding: 10px 16px; font-weight: 600; }

/* -------------------------------------------------------------- kpi tiles */
.kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (min-width: 1101px) { .kpis { grid-template-columns: repeat(4, 1fr); } }   /* four tiles on one row on a laptop */
@media (max-width: 1100px) and (min-width: 561px) { .kpis { grid-template-columns: repeat(2, 1fr); } }
.kpi {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start;
  padding: 16px 16px 14px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  --tint: var(--accent); --tint-soft: var(--accent-soft);
  transition: box-shadow .12s, transform .12s;
}
.kpi:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.kpi.is-high  { --tint: var(--high);     --tint-soft: var(--high-soft); }
.kpi.is-warn  { --tint: var(--emerging); --tint-soft: var(--emerging-soft); }
.kpi.is-good  { --tint: var(--good);     --tint-soft: var(--good-soft); }
.kpi.is-purple{ --tint: var(--purple);   --tint-soft: var(--purple-soft); }
.kpi.tinted { background: color-mix(in srgb, var(--tint) 6%, var(--panel)); border-color: color-mix(in srgb, var(--tint) 22%, var(--border)); }
.kpi .k-ico {
  width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  background: var(--tint-soft); color: var(--tint); font-size: 18px;
}
.kpi .k-label { font-size: 12.5px; color: var(--text-muted); font-weight: 600; }
.kpi .k-value { font-size: 28px; font-weight: 760; letter-spacing: -0.03em; margin: 2px 0 2px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi .k-sub   { font-size: 11.5px; color: var(--text-dim); line-height: 1.45; }
.kpi .k-link {
  grid-column: 1 / -1; margin-top: 8px; padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--tint) 18%, var(--border-soft));
  font-size: 12px; font-weight: 600; color: var(--tint);
  background: none; border-left: none; border-right: none; border-bottom: none; border-radius: 0;
  text-align: left; padding-left: 0; padding-right: 0; padding-bottom: 0;
}
.kpi .k-link:hover { background: none; text-decoration: underline; }
.kpi .k-spark { grid-column: 1 / -1; height: 30px; margin-top: 4px; }
.kpi .k-spark svg { width: 100%; height: 100%; display: block; overflow: visible; }
.kpi .k-spark path { fill: none; stroke: var(--tint); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.kpi .k-spark .area { fill: var(--tint); opacity: .12; stroke: none; }

/* ------------------------------------------------------------------ tabs */
.tabs {
  display: flex; gap: 4px; margin: 24px 0 0;
  border-bottom: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: 12px 14px; font-size: 13.5px; font-weight: 580;
  color: var(--text-muted); background: none; border: none;
  border-bottom: 2px solid transparent; border-radius: 0;
  cursor: pointer; white-space: nowrap; margin-bottom: -1px;
}
.tab:hover { color: var(--text); background: none; border-color: transparent; border-bottom-color: var(--border); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab .count {
  display: inline-block; margin-left: 7px; padding: 1px 8px;
  background: var(--panel-2); border-radius: 100px;
  font-size: 11px; font-weight: 650; color: var(--text-dim); font-variant-numeric: tabular-nums;
}
.tab.active .count { background: var(--accent-soft); color: var(--accent); }
.tab-panel { display: none; padding-top: 4px; }
.tab-panel.active { display: block; }

/* --------------------------------------------------------------- filters */
.filters {
  display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: flex-end;
  padding: 16px 18px; background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 16px; box-shadow: var(--shadow);
}
.filters .field { min-width: 140px; }
.filters .grow { flex: 1 1 240px; min-width: 220px; max-width: 380px; }
.filters-break { flex-basis: 100%; height: 0; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.field .hint { font-size: 11.5px; color: var(--text-dim); }
.filter-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.fchip {
  padding: 7px 12px; border-radius: 9px; font-size: 12.5px; font-weight: 580;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--text-muted);
  cursor: pointer;
}
.fchip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.fchip.p-high[aria-pressed="true"]     { background: var(--high-soft);     border-color: var(--high);     color: var(--high); }
.fchip.p-emerging[aria-pressed="true"] { background: var(--emerging-soft); border-color: var(--emerging); color: var(--emerging); }
.fchip.p-low[aria-pressed="true"]      { background: var(--low-soft);      border-color: var(--low);      color: var(--text); }
.fchip.p-nodata[aria-pressed="true"]   { background: var(--nodata-soft);   border-color: var(--nodata);   color: var(--text); }

/* ---------------------------------------------------------------- tables */
.table-wrap {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--panel); overflow: auto; max-height: 74vh; box-shadow: var(--shadow);
}
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; }
thead th {
  position: sticky; top: 0; z-index: 3;
  background: var(--panel-2);
  padding: 12px 14px; text-align: center; white-space: nowrap;
  font-size: 15px; font-weight: 700; color: var(--text);
  border-bottom: 1px solid var(--border);
}
thead th.sortable { cursor: pointer; user-select: none; }
thead th.sortable:hover { color: var(--text); }
thead th .arrow { opacity: .5; font-size: 9px; }
thead tr.group-row th {
  top: 0; z-index: 4; text-align: center;
  border-bottom: 1px solid var(--border-soft);
  font-size: 15px; font-weight: 700; text-transform: none; letter-spacing: 0;
  padding: 12px 14px;
}
thead tr.group-row + tr.head-row th { top: 46px; }
tbody td { padding: 11px 12px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--panel-2); }
tbody tr.clickable { cursor: pointer; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
th.num { text-align: center; font-variant-numeric: tabular-nums; }
td.num { font-family: var(--mono); font-size: 12.5px; }
td.mono { font-family: var(--mono); font-size: 11.5px; color: var(--text-muted); }
td.strong { font-weight: 600; color: var(--text); }
.col-sep { border-left: 1px solid var(--border); }
.empty-state { padding: 46px 20px; text-align: center; color: var(--text-dim); }

/* Variation cell: thumbnail swatch + label */
.var-cell { display: flex; align-items: center; gap: 10px; min-width: 170px; }
.var-cell .thumb {
  width: 36px; height: 36px; flex: none; border-radius: 8px;
  border: 1px solid rgba(0,0,0,.08); display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: rgba(255,255,255,.9);
  background: var(--panel-2); text-shadow: 0 1px 1px rgba(0,0,0,.25);
}
.var-cell .thumb.light { color: rgba(0,0,0,.55); text-shadow: none; }
.var-cell .v-label { font-weight: 620; color: var(--text); }
.var-cell .v-sub { display: block; font-size: 11px; color: var(--text-dim); font-weight: 450; max-width: 200px; }
.row-menu { padding: 4px 8px; font-size: 16px; line-height: 1; border: none; background: none; color: var(--text-dim); }
.row-menu:hover { background: var(--panel-2); color: var(--text); border: none; }
.vs-sig { display: block; font-size: 11px; margin-top: 2px; }

tr.outsold-1 td.sig-cell { background: rgba(217, 119, 6, 0.10); }
tr.outsold-2 td.sig-cell { background: rgba(249, 115, 22, 0.14); }
tr.outsold-3 td.sig-cell { background: rgba(220, 47, 67, 0.16); }
tr.outsold-1 td.our-sig { box-shadow: inset 2px 0 0 var(--emerging); }
tr.outsold-2 td.our-sig { box-shadow: inset 2px 0 0 #f97316; }
tr.outsold-3 td.our-sig { box-shadow: inset 2px 0 0 var(--high); }

.bought-cell { text-align: center; vertical-align: middle; display: inline-block; }
td.bought-cell { display: table-cell; }
.bought-cell .sig {
  font-size: 16px; font-weight: 800; letter-spacing: -0.02em; color: var(--text);
}
.bought-hi-1 { background: rgba(217, 119, 6, 0.12); }
.bought-hi-2 { background: rgba(249, 115, 22, 0.16); }
.bought-hi-3 { background: rgba(220, 47, 67, 0.18); }
.bought-hi-3 .sig, .c-sig.bought-hi-3 { color: var(--high); font-weight: 800; }
tbody tr:hover td.bought-hi-1 { background: rgba(217, 119, 6, 0.18); }
tbody tr:hover td.bought-hi-2 { background: rgba(249, 115, 22, 0.22); }
tbody tr:hover td.bought-hi-3 { background: rgba(220, 47, 67, 0.24); }
.c-sig.bought-hi-1, .c-sig.bought-hi-2, .c-sig.bought-hi-3 {
  padding: 1px 5px; border-radius: 4px; font-weight: 800;
}

/* --------------------------------------------------------------- badges */
.badge {
  display: inline-block; padding: 3px 9px; border-radius: 7px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap; border: 1px solid transparent;
}
.badge.high     { background: var(--high-soft);     color: var(--high); }
.badge.emerging { background: var(--emerging-soft); color: var(--emerging); }
.badge.low      { background: var(--low-soft);      color: var(--text-muted); }
.badge.nodata   { background: var(--nodata-soft);   color: var(--text-muted); }
.badge.good     { background: var(--good-soft);     color: var(--good); }
.badge.neutral  { background: var(--panel-2);       color: var(--text-muted); border-color: var(--border-soft); }
.badge.accent   { background: var(--accent-soft);   color: var(--accent); }
.badge.sm { font-size: 11px; padding: 2px 7px; }

/* Sans, not mono: Consolas draws a slashed zero, and "800+" in bold reads as struck through. */
.sig { font-family: var(--sans); font-weight: 700; font-size: 12.5px; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.sig.none { color: var(--text-dim); font-weight: 450; font-style: italic; font-family: var(--sans); }
.delta-up   { color: var(--high); font-variant-numeric: tabular-nums; }
.delta-down { color: var(--good); font-variant-numeric: tabular-nums; }
.delta-flat { color: var(--text-dim); }

.score-pill { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.score-bar { width: 56px; height: 6px; border-radius: 3px; background: var(--panel-2); overflow: hidden; border: 1px solid var(--border-soft); }
.score-bar span { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.score-bar.high span     { background: var(--high); }
.score-bar.emerging span { background: var(--emerging); }
.score-bar.low span      { background: var(--low); }
.score-bar.nodata span   { background: var(--nodata); }

/* -------------------------------------------------------- detail drawer */
tr.detail-row > td { background: var(--bg) !important; padding: 0; }
.detail {
  padding: 22px 24px; border-left: 3px solid var(--accent);
  display: grid; grid-template-columns: minmax(300px, 1.15fr) minmax(280px, 1fr); gap: 26px;
  /* The table scrolls sideways; the drawer must not. Pinned to the left edge and
     capped at the visible width so it stays readable wherever the table is scrolled. */
  position: sticky; left: 0;
  max-width: calc(100vw - var(--sidebar-w) - 54px);
}
@media (max-width: 900px) { .detail { max-width: calc(100vw - 30px); } }
.detail.p-high     { border-left-color: var(--high); }
.detail.p-emerging { border-left-color: var(--emerging); }
.detail.p-low      { border-left-color: var(--low); }
.detail.p-nodata   { border-left-color: var(--nodata); }
@media (max-width: 1000px) { .detail { grid-template-columns: 1fr; } }
.detail h4 { margin: 0 0 10px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); font-weight: 650; }
.narrative {
  background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--accent-line);
  border-radius: var(--radius-sm); padding: 14px 16px; font-size: 13px; line-height: 1.62; white-space: pre-wrap; color: var(--text);
}
.narrative + .detail-actions { margin-top: 12px; display: flex; gap: 8px; }
.breakdown { display: flex; flex-direction: column; gap: 9px; }
.bd-row { display: grid; grid-template-columns: 1fr 46px 96px 40px; gap: 9px; align-items: center; font-size: 12px; }
.bd-row .bd-label { color: var(--text-muted); }
.bd-row .bd-weight { color: var(--text-dim); font-family: var(--mono); font-size: 11px; text-align: right; }
.bd-track { height: 6px; background: var(--panel-2); border-radius: 4px; overflow: hidden; border: 1px solid var(--border-soft); }
.bd-track span { display: block; height: 100%; background: var(--accent); }
.bd-row .bd-pts { font-family: var(--mono); font-size: 11.5px; text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.bd-total { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-soft); display: flex; justify-content: space-between; font-weight: 650; font-size: 13px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 12.5px; margin-top: 14px; }
.kv dt { color: var(--text-muted); }
.kv dd { margin: 0; font-variant-numeric: tabular-nums; }
.comp-list { display: flex; flex-direction: column; gap: 7px; margin-top: 6px; }
.comp-item { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 11px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 12px; }
.comp-item .brand { font-weight: 650; }

/* ----------------------------------------------------------------- grid */
.grid-scroll { overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); max-height: 74vh; box-shadow: var(--shadow); }
table.cover { font-size: 11.5px; }
table.cover th.rowhead, table.cover td.rowhead { position: sticky; left: 0; z-index: 2; background: var(--panel-2); font-weight: 620; text-align: left; white-space: nowrap; border-right: 1px solid var(--border); }
table.cover thead th { z-index: 3; }
table.cover thead th.rowhead { z-index: 5; }
table.cover td.cell { padding: 0; }
.cell-inner { min-height: 52px; padding: 6px 8px; display: flex; flex-direction: column; gap: 1px; justify-content: center; border-radius: 6px; margin: 3px; font-size: 11px; }
.cell-offered { background: var(--good-soft); box-shadow: inset 0 0 0 1px rgba(18,134,79,.3); }
.cell-offered-behind { background: var(--good-soft); box-shadow: inset 0 0 0 1px rgba(18,134,79,.3), inset 3px 0 0 var(--high); }
.cell-inactive { background: var(--emerging-soft); box-shadow: inset 0 0 0 1px rgba(217,119,6,.4); }
.cell-gap-multi { background: rgba(220, 47, 67, .16); box-shadow: inset 0 0 0 1.5px rgba(220, 47, 67, .55); }
.cell-gap-single { background: rgba(232, 131, 58, .13); box-shadow: inset 0 0 0 1px rgba(232, 131, 58, .45); }
.cell-gap-nodata { background: var(--nodata-soft); box-shadow: inset 0 0 0 1px var(--border); }
.cell-none { background: transparent; color: var(--text-dim); }
.cell-inner .c-top { font-weight: 700; font-family: var(--mono); font-size: 11.5px; display: flex; align-items: center; gap: 5px; }
.cell-inner .c-bot { color: var(--text-dim); font-size: 10px; }
.cell-inner .c-line { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 10.5px; line-height: 1.35; }
.cell-inner .c-line .c-brand { color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 74px; }
.cell-inner .c-line .c-sig { font-family: var(--mono); font-weight: 700; font-size: 10.5px; color: var(--text); font-variant-numeric: tabular-nums; }
.cell-inner .c-line .c-sig.none { font-weight: 450; color: var(--text-dim); font-style: italic; }
.cell-inner .c-you { padding-bottom: 1px; border-bottom: 1px dashed var(--border); margin-bottom: 2px; }
.cell-inner .c-you .c-brand { color: var(--text); font-weight: 650; }
.cell-inner .c-you .c-sig { font-size: 11.5px; }
.cell-inner .c-sellers { font-size: 9.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 1px; }
.cell-inner .c-sellers.multi  { color: var(--high); }
.cell-inner .c-sellers.single { color: #d97430; }
:root[data-theme="dark"] .cell-inner .c-sellers.single { color: #ff9d5c; }
.cell-inner .beat-flag { color: var(--high); font-size: 10px; font-weight: 700; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; font-size: 12px; color: var(--text-muted); }
.legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* ---------------------------------------------------------- misc blocks */
.callout { border: 1px solid var(--border); border-left: 3px solid var(--accent); background: var(--panel); border-radius: var(--radius); padding: 14px 17px; font-size: 13px; line-height: 1.6; box-shadow: var(--shadow); }
.callout.warn { border-left-color: var(--emerging); }
.callout.danger { border-left-color: var(--high); }
.callout h3 { margin: 0 0 7px; font-size: 13.5px; font-weight: 650; }
.callout p:last-child { margin-bottom: 0; }
.callout ul { margin: 8px 0 0; padding-left: 20px; }
.callout li { margin-bottom: 5px; }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
pre.code { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; overflow: auto; font-family: var(--mono); font-size: 11.5px; line-height: 1.62; color: var(--text); max-height: 460px; margin: 0; }
code.inline { font-family: var(--mono); font-size: 11.5px; padding: 1px 5px; background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 4px; }
.weight-row { display: grid; grid-template-columns: 1fr 150px 54px; gap: 12px; align-items: center; margin-bottom: 11px; }
.weight-row label { font-size: 12.5px; }
.weight-row output { font-family: var(--mono); font-size: 12px; text-align: right; color: var(--accent); font-weight: 650; }
.dist { display: flex; align-items: flex-end; gap: 3px; height: 90px; margin-top: 12px; }
.dist .b { flex: 1; background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 3px 3px 0 0; min-height: 2px; position: relative; }
.dist .b span { position: absolute; top: -17px; left: 0; right: 0; text-align: center; font-size: 10px; color: var(--text-dim); font-family: var(--mono); }
.dist-axis { display: flex; gap: 3px; margin-top: 5px; }
.dist-axis div { flex: 1; text-align: center; font-size: 10px; color: var(--text-dim); font-family: var(--mono); }
.footnote { font-size: 11.5px; color: var(--text-dim); margin-top: 10px; line-height: 1.6; }

.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(14px);
  background: var(--text); color: var(--bg); border: none;
  padding: 10px 18px; border-radius: 100px; font-size: 13px; z-index: 200;
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
  box-shadow: var(--shadow-lg);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.spinner { width: 13px; height: 13px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; display: inline-block; animation: spin .7s linear infinite; vertical-align: -2px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }
details.acc { border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); margin-bottom: 10px; box-shadow: var(--shadow); }
details.acc > summary { padding: 12px 16px; cursor: pointer; font-weight: 600; font-size: 13px; list-style: none; }
details.acc > summary::-webkit-details-marker { display: none; }
details.acc > summary::before { content: '▸ '; color: var(--text-dim); }
details.acc[open] > summary::before { content: '▾ '; }
details.acc > div { padding: 0 16px 16px; }

/* =========================================================================
   RESPONSIVE
   ====================================================================== */
@media (max-width: 1100px) {
  .flow { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; border-right: none; border-bottom: 1px solid var(--border); }
  .logo { padding: 0 8px 0 0; }
  .nav { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .nav-group { margin: 0; display: contents; }
  .nav-label { display: none; }
  .nav-item { width: auto; padding: 7px 10px; font-size: 12.5px; }
  .side-card { display: none; }
  .topbar-inner { padding: 10px 14px; }
  .search { width: 100%; order: 10; }
  .workspace strong, .workspace small { display: none; }
  .wrap { padding: 14px 14px 56px; }
  .setup-actions { flex-direction: column; align-items: stretch; }
  .setup-actions .primary.big, .setup-actions .primary { width: 100%; }
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
  .product-head { gap: 12px; }
  .ph-actions { width: 100%; }
  .search-row { flex-direction: column; }
}
@media (max-width: 560px) {
  .cat-grid { grid-template-columns: 1fr; }
  .cat-row { flex-wrap: wrap; }
  .cat-row .cr-asin { width: calc(100% - 46px); }
  .product-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 24px; }
  .lookup-recent .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .kpis { grid-template-columns: 1fr 1fr; }
}

/* =========================================================================
   COLOUR & VARIATION COMPARISON
   Two-series palette validated with the dataviz checks (blue + teal) in both
   themes; identity is never colour-alone — legend + direct labels + table.
   ====================================================================== */
:root { --series-you: #2563eb; --series-rival: #0d9488; }
:root[data-theme="dark"] { --series-you: #3b82f6; --series-rival: #0d9488; }

.count.new { background: var(--accent); color: #fff; font-size: 9.5px; letter-spacing: .04em; }
.tab .count.new { background: var(--accent); color: #fff; }

.group-by { display: flex; align-items: center; gap: 10px; margin-top: 30px; flex: none; }
.group-by .gb-label { font-size: 12.5px; color: var(--text-muted); font-weight: 600; }
.group-by .seg { margin: 0; border-radius: 10px; }
.group-by .seg-btn { border-radius: 8px; }
.group-by .seg-btn[aria-pressed="true"] { background: var(--accent); color: #fff; box-shadow: none; }

.kpis-5 { grid-template-columns: repeat(5, 1fr); margin-bottom: 16px; }
@media (max-width: 1500px) { .kpis-5 { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 1100px) { .kpis-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .kpis-5 { grid-template-columns: 1fr 1fr; } }
.kpi.is-teal { --tint: var(--series-rival); --tint-soft: rgba(13, 148, 136, .1); }
.kpi.compact { padding: 14px 16px; }
.kpi.compact .k-value { font-size: 24px; }

.colour-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: stretch; }
@media (max-width: 1100px) { .colour-layout { grid-template-columns: 1fr; } }
.chart-panel .panel-head { align-items: flex-start; }
.chart-legend { margin: 4px 0 0; }
.chart-legend .sw { border-radius: 3px; }
.chart-legend .sw.you { background: var(--series-you); }
.chart-legend .sw.rival { background: var(--series-rival); }
.chart-body { position: relative; padding: 14px 18px 10px; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; font-family: var(--sans); }
.chart .grid-line { stroke: var(--border-soft); stroke-width: 1; }
.chart .axis-text { fill: var(--text-dim); font-size: 10.5px; }
.chart .cat-text { fill: var(--text-muted); font-size: 11.5px; font-weight: 550; }
.chart .cat-text.focus { fill: var(--text); font-weight: 700; }
.chart .bar-you { fill: var(--series-you); }
.chart .bar-rival { fill: var(--series-rival); }
.chart .bar.none { fill: var(--border); }
.chart .val-text { fill: var(--text-muted); font-size: 10.5px; font-weight: 600; }
.chart .focus-band { fill: var(--high); opacity: .07; }
.chart .callout-bg { fill: var(--high-soft); stroke: var(--high); stroke-width: 1; }
.chart .callout-text { fill: var(--high); font-size: 11px; font-weight: 700; }
.chart .hit { fill: transparent; cursor: default; }
.chart .hit:hover + .pair .bar { opacity: .85; }
.chart-tip {
  position: absolute; z-index: 5; pointer-events: none;
  padding: 8px 10px; border-radius: 8px; font-size: 12px; line-height: 1.5;
  background: var(--text); color: var(--bg); box-shadow: var(--shadow-lg); white-space: nowrap;
}
.chart-tip b { font-weight: 700; }
.chart-tip .tip-row { display: flex; align-items: center; gap: 6px; }
.chart-tip .sw { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.chart-tip .sw.you { background: var(--series-you); }
.chart-tip .sw.rival { background: var(--series-rival); }
.chart-empty { padding: 40px 20px; text-align: center; color: var(--text-dim); font-size: 13px; }

.insight {
  padding: 20px; border-radius: var(--radius);
  background: linear-gradient(160deg, var(--accent-soft), var(--panel) 70%);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  display: flex; flex-direction: column; gap: 10px;
}
.insight .in-head { display: flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 700; font-size: 13.5px; }
.insight .in-ico { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--panel); box-shadow: var(--shadow); }
.insight h3 { margin: 4px 0 0; font-size: 17px; font-weight: 720; letter-spacing: -0.015em; line-height: 1.3; }
.insight p { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.55; }
.insight .primary { align-self: flex-start; margin-top: auto; }

.colour-dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; vertical-align: -2px; margin-right: 8px; border: 1px solid rgba(0,0,0,.12); }
.gap-neg { color: var(--high); font-weight: 650; }
.gap-pos { color: var(--good); font-weight: 650; }
.gap-bar { display: inline-flex; align-items: center; gap: 8px; }
.gap-bar .track { width: 80px; height: 6px; border-radius: 3px; background: var(--panel-2); overflow: hidden; border: 1px solid var(--border-soft); }
.gap-bar .track span { display: block; height: 100%; background: var(--high); border-radius: 3px; }
.gap-bar.lead .track span { background: var(--good); }
.gap-bar small { color: var(--text-muted); font-variant-numeric: tabular-nums; }
tr.focus-row td { background: var(--high-soft); }
.view-btn { padding: 5px 10px; font-size: 12px; color: var(--accent); border-color: var(--accent-line); background: var(--panel); }

.quick-actions {
  margin-top: 16px; padding: 16px; display: grid; gap: 12px;
  grid-template-columns: 240px repeat(auto-fit, minmax(210px, 1fr));
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
@media (max-width: 1100px) { .quick-actions { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .quick-actions { grid-template-columns: 1fr; } }
.qa-head { display: flex; gap: 12px; align-items: flex-start; }
.qa-head .qa-ico { width: 40px; height: 40px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--high-soft); color: var(--high); font-size: 18px; }
.qa-head strong { display: block; font-size: 14px; }
.qa-head span { font-size: 12px; color: var(--text-muted); line-height: 1.45; }
.qa {
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel);
}
.qa:hover { border-color: var(--accent-line); box-shadow: var(--shadow); background: var(--panel); }
.qa .qa-ico { width: 36px; height: 36px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: 16px; }
.qa div { flex: 1; min-width: 0; }
.qa strong { display: block; font-size: 13px; font-weight: 650; }
.qa span { display: block; font-size: 11.5px; color: var(--text-muted); white-space: normal; }
.qa .arrow { color: var(--text-dim); }

/* ---------------------------------------------------------- product pictures */
.ph-thumb.has-img, .lp-thumb.has-img { background: #fff; border-color: var(--border); }
.ph-thumb img, .lp-thumb img, .pc-img img {
  width: 100%; height: 100%; object-fit: contain; display: block; background: #fff;
}
/* The image area is ALWAYS reserved, even before (or without) a photo.
   It used to be display:none until an image arrived, which meant cards in the
   same row had different heights depending on which photos happened to be
   cached — a ragged grid — and every late-arriving thumbnail shifted the cards
   below it. A neutral tile reads as "no photo", which is true, and keeps the
   row square. */
.pc-img {
  display: block; height: 120px; border-radius: 8px; overflow: hidden;
  margin: -2px 0 4px; border: 1px solid var(--border-soft);
  background: var(--panel-2);
  position: relative;
}
/* A faint mark so an empty tile does not read as a failed image. */
.pc-img:not(.has-img)::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, transparent 46%, var(--border) 46%, var(--border) 54%, transparent 54%);
  opacity: .35;
}
.pc-img.has-img { background: #fff; }
.pc-img.has-img::after { content: none; }

/* ------------------------------------------------------------ AI-matched tags */
.badge.ai   { background: var(--purple-soft); color: var(--purple); border-color: transparent; }
.badge.near { background: var(--emerging-soft); color: var(--emerging); border-color: transparent; }
.ph-pill.ai { background: var(--purple-soft); border-color: transparent; color: var(--purple); font-weight: 600; cursor: pointer; }
.fchip.p-ai[aria-pressed="true"] { background: var(--purple-soft); border-color: var(--purple); color: var(--purple); }
.ai-mark {
  display: inline-block; margin-left: 4px; padding: 0 4px; border-radius: 4px;
  font-style: normal; font-size: 8.5px; font-weight: 800; letter-spacing: .04em; vertical-align: 1px;
  background: var(--purple-soft); color: var(--purple);
}
.ai-mark.near { background: var(--emerging-soft); color: var(--emerging); }
.match-reason { display: block; font-size: 11px; color: var(--text-muted); font-style: italic; }

/* =========================================================================
   DECISION LAYER — Action Plan, folded analyst layer, plain language
   ====================================================================== */
.plan-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; margin-top: 4px; }
@media (max-width: 1100px) { .plan-grid { grid-template-columns: 1fr; } }
.plan-grid:has(.plan-ai.hide) { grid-template-columns: 1fr; }
.plan-summary .panel-body { font-size: 14.5px; line-height: 1.7; }
.plan-summary p { margin: 0 0 10px; }
.plan-summary p:last-child { margin-bottom: 0; }
.plan-summary b { font-weight: 700; }
.plan-summary .muted { color: var(--text-muted); }
.plan-ai { background: color-mix(in srgb, var(--purple) 6%, var(--panel)); border-color: color-mix(in srgb, var(--purple) 25%, var(--border)); }
.plan-ai .panel-body { font-size: 13px; line-height: 1.6; }
.plan-ai .in-head { display: flex; align-items: center; gap: 8px; color: var(--purple); font-weight: 700; margin-bottom: 6px; }
.plan-block { margin-top: 22px; }
.plan-title { margin: 0 0 6px; font-size: 17px; font-weight: 720; letter-spacing: -0.015em; }
.plan-block .section-head .link-btn { margin-top: 4px; }
.plan-block .section-sub { margin-bottom: 12px; }
.plan-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.plan-card {
  text-align: left; display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: start;
  padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel);
  box-shadow: var(--shadow); --bar: var(--accent);
  box-shadow: var(--shadow), inset 3px 0 0 var(--bar);
}
.plan-card:hover { border-color: var(--accent-line); box-shadow: var(--shadow-lg), inset 3px 0 0 var(--bar); background: var(--panel); }
.plan-card.p-high { --bar: var(--high); }
.plan-card.p-emerging { --bar: var(--emerging); }
.plan-card.p-low { --bar: var(--low); }
.plan-card.p-watch { --bar: var(--high); }
.plan-card .thumb { width: 44px; height: 44px; border-radius: 9px; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: rgba(255,255,255,.9); text-shadow: 0 1px 1px rgba(0,0,0,.25); border: 1px solid rgba(0,0,0,.08); }
.plan-card .thumb.light { color: rgba(0,0,0,.55); text-shadow: none; }
.plan-card .pc-title { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.plan-card .pc-line { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; white-space: normal; }
.plan-card .pc-line b { color: var(--text); font-weight: 650; }
.plan-card .pc-num { font-family: var(--mono); font-weight: 700; color: var(--text); }
.plan-card .pc-action { font-size: 12px; color: var(--accent); font-weight: 600; margin-top: 6px; }
.plan-empty { padding: 18px; border: 1px dashed var(--border); border-radius: var(--radius); color: var(--text-muted); font-size: 13.5px; line-height: 1.6; background: var(--panel); }

/* Missing Variations: evidence first, extra columns on demand, priority edge bar */
#gapsTable .col-extra { display: none; }
#gapsTable.wide .col-extra { display: table-cell; }
#gapsBody tr.p-high > td:first-child { box-shadow: inset 3px 0 0 var(--high); }
#gapsBody tr.p-emerging > td:first-child { box-shadow: inset 3px 0 0 var(--emerging); }
#gapsBody tr.p-low > td:first-child { box-shadow: inset 3px 0 0 var(--low); }
#gapsBody tr.p-nodata > td:first-child { box-shadow: inset 3px 0 0 var(--border); }
#gapsBody tr.group-toggle td { background: var(--panel-2); padding: 12px 14px; cursor: pointer; font-size: 13px; color: var(--text-muted); }
#gapsBody tr.group-toggle td b { color: var(--text); }
#gapsBody tr.group-toggle:hover td { background: var(--accent-soft); color: var(--accent); }
#gapsBody tr.group-toggle .arrow { margin-left: 6px; }

/* Glossary terms */
abbr.term { text-decoration: none; border-bottom: 1px dotted var(--text-dim); cursor: help; }

/* Advanced panel: the folded analyst layer */
.adv-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.adv-block { padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--border); }
.adv-block > .section-title { margin-top: 4px; font-size: 18px; }

/* Coverage grid: family header + collapsed family cells */
table.cover th.fam { cursor: pointer; user-select: none; white-space: nowrap; }
table.cover th.fam:hover { color: var(--accent); }
table.cover th.fam .fam-n { color: var(--text-dim); font-weight: 500; margin-left: 4px; }
table.cover th.shade { font-weight: 550; color: var(--text-muted); }
table.cover th.shade.first { border-left: 2px solid var(--border); }
table.cover td.cell.first { border-left: 2px solid var(--border); }
.cell-inner .c-fam { font-size: 10.5px; color: var(--text-muted); line-height: 1.4; }
.cell-inner .c-fam b { color: var(--text); font-family: var(--mono); }

/* Lookup grid: priority sort + evidence line */
.product-card .pc-evidence { font-size: 12px; color: var(--text-muted); }
.product-card .pc-evidence b { color: var(--text); font-family: var(--mono); font-weight: 700; }
.product-card .pc-evidence.none { color: var(--text-dim); font-style: italic; }
.sort-chips { display: flex; gap: 6px; margin: 0 0 12px; align-items: center; }
.sort-chips span { font-size: 12px; color: var(--text-muted); margin-right: 4px; }

/* Buttons wrap nothing by default; these are cards that happen to be buttons. */
.plan-card, .plan-card * { white-space: normal; }
.plan-card .pc-num, .plan-card .badge { white-space: nowrap; }
.product-card .pc-evidence { white-space: normal; line-height: 1.4; }

/* Batch strip while the batch is cooling down: the spinner pauses, the bar goes amber. */

/* =========================================================================
   ACTION PLAN v2 — priority table, evidence, decisions, portfolio
   ====================================================================== */
.plan-filters .grow-all { flex-basis: 100%; }
.plan-count { font-size: 12.5px; color: var(--text-muted); }
.plan-wrap { max-height: none; }
#planTable th.var-col, #planTable td.var-col { position: sticky; left: 0; z-index: 2; background: var(--panel); box-shadow: 1px 0 0 var(--border); }
#planTable thead th.var-col { z-index: 4; background: var(--panel-2); }
#planTable tbody tr:hover td.var-col { background: var(--panel-2); }
#planTable td { vertical-align: middle; }
#planTable .action-cell { max-width: 160px; min-width: 110px; font-size: 12.5px; color: var(--text); white-space: nowrap; }
#planTable td.num .mono { font-family: var(--mono); font-size: 12.5px; }
.cell-note { display: block; font-size: 11px; color: var(--text-dim); font-weight: 450; white-space: nowrap; }
.na { color: var(--text-dim); font-style: italic; font-size: 12px; }
.accent { color: var(--accent); font-weight: 600; }
.prio { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.prio i { width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
.prio.p-high i { background: var(--high); } .prio.p-high { color: var(--high); }
.prio.p-emerging i { background: var(--emerging); } .prio.p-emerging { color: var(--emerging); }
.prio.p-low i { background: var(--low); } .prio.p-low { color: var(--text-muted); }
.prio.p-nodata i { background: var(--border); } .prio.p-nodata { color: var(--text-dim); }
.badge.type-missing { background: var(--high-soft); color: var(--high); }
.badge.type-outsold { background: var(--emerging-soft); color: var(--emerging); }
.badge.type-pricing { background: var(--accent-soft); color: var(--accent); }
.badge.type-ai_low  { background: var(--purple-soft); color: var(--purple); }
.fchip.p-reviewed[aria-pressed="true"] { background: var(--good-soft); border-color: var(--good); color: var(--good); }
.fchip .count { margin-left: 5px; font-variant-numeric: tabular-nums; opacity: .8; }
#planBody tr.opp { cursor: pointer; }
#planBody tr.opp > td:first-child { box-shadow: inset 3px 0 0 var(--border); }
#planBody tr.p-high > td:first-child { box-shadow: inset 3px 0 0 var(--high); }
#planBody tr.p-emerging > td:first-child { box-shadow: inset 3px 0 0 var(--emerging); }
#planBody tr.p-low > td:first-child { box-shadow: inset 3px 0 0 var(--low); }
#planBody tr.is-reviewed td { opacity: .72; }
#planBody tr.is-reviewed:hover td, #planBody tr.is-reviewed.open td { opacity: 1; }
#planBody tr.open td { background: var(--panel-2); }
.link-btn.sm { display: block; font-size: 11.5px; padding: 2px 0 0; }
.evidence h4, .review h4 { margin: 0 0 10px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); font-weight: 650; }
.evidence .kv { margin-top: 0; }
.evidence .kv dt { white-space: nowrap; }
.review-state { margin: 0 0 10px; font-size: 12.5px; color: var(--text-muted); }
.review-fields { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; }
.review-fields label { font-size: 12px; color: var(--text-muted); display: flex; flex-direction: column; gap: 4px; }
.review-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.review-actions .rv-status { flex-basis: 100%; }
.review-actions .rv-status.err { color: var(--high); }
.stale-note { margin: 0 0 10px; padding: 10px 12px; border-radius: 8px; background: var(--emerging-soft); color: var(--emerging); font-weight: 600; font-size: 13px; }
.changes { font-size: 13px; color: var(--text-muted); border-top: 1px dashed var(--border); padding-top: 10px; margin-top: 4px; }
.changes b { color: var(--text); }
.changes.muted { border: none; padding-top: 0; }
.portfolio { margin: 16px 0 6px; padding: 16px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.portfolio h3 { margin: 0 0 4px; font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--text); }
.portfolio .section-head { align-items: flex-start; gap: 12px; }
.portfolio .section-head .btn { flex: none; }
#portfolioTable td { vertical-align: top; }

/* Responsive: the plan table becomes structured cards below 900px */
@media (max-width: 1250px) { #planTable .sec { display: none; } }
@media (max-width: 900px) {
  #planTable, #planTable tbody, #planTable tr.opp, #planTable td { display: block; }
  #planTable thead { display: none; }
  #planTable tr.opp { border-bottom: 8px solid var(--bg); padding: 10px 12px; }
  #planTable tr.opp > td { border: none; padding: 3px 0; box-shadow: none !important; }
  #planTable td[data-label]::before { content: attr(data-label) ": "; color: var(--text-dim); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; margin-right: 6px; }
  #planTable td.var-col { position: static; box-shadow: none; }
  #planTable td.var-col::before, #planTable td.num::before { display: inline; }
  #planTable td.num { text-align: left; }
  #planTable .sec { display: block; }
  #planTable tr.detail-row td { display: block; padding: 0; }
  .review-fields { grid-template-columns: 1fr; }
  .plan-wrap { border: none; box-shadow: none; background: transparent; }
}

/* Plan table density and width */
#planTable td, #planTable th { padding: 8px 10px; }
#planTable td.opp-cell { max-width: 260px; }
#planTable .var-cell .v-label { font-size: 13px; }
#planTable .var-cell .thumb { width: 30px; height: 30px; font-size: 10px; }
@media (max-width: 1550px) { #planTable .sec { display: none; } }
.portfolio { max-width: 1100px; margin: 18px auto 0; }
#portfolioTable td, #portfolioTable th { padding: 8px 10px; font-size: 12.5px; }
#portfolioTable .action-cell { max-width: 220px; white-space: normal; }

/* =========================================================================
   SCRAPE JOBS — the operator's view of a running cycle
   ====================================================================== */
#adminView { display: none; }
body[data-stage="admin"] #adminView { display: block; }
.admin-head { display: flex; align-items: flex-start; gap: 16px; padding-top: 18px; }
.admin-head-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.live-dot { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-muted); }
.live-dot i { width: 8px; height: 8px; border-radius: 50%; background: var(--good); animation: pulse 2s ease-in-out infinite; }
.live-dot.idle { color: var(--text-dim); }
.live-dot.idle i { background: var(--text-dim); animation: none; }
.job-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); margin-left: auto; animation: pulse 2s ease-in-out infinite; }

.worker-card {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 18px; margin-bottom: 12px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow), inset 3px 0 0 var(--good);
}
.worker-card.idle { box-shadow: var(--shadow), inset 3px 0 0 var(--border); }
.wc-main { flex: 1; min-width: 240px; }
.wc-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.wc-meta { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; line-height: 1.5; }
.wc-meta b { color: var(--text); font-variant-numeric: tabular-nums; }
.wc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pending { color: var(--emerging); font-weight: 600; }

.running-card { margin-bottom: 12px; box-shadow: var(--shadow), inset 3px 0 0 var(--accent); }
.running-card.idle { box-shadow: var(--shadow), inset 3px 0 0 var(--border); }
.running-card.stopped-card { box-shadow: var(--shadow), inset 3px 0 0 var(--emerging); }
.running-card .panel-head h2 { font-size: 16px; font-weight: 700; }
.running-card .loader-bar { margin: 10px 0 6px; }
.rc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rc-stage { display: flex; align-items: center; gap: 12px; }
.rc-stage b { font-size: 14px; }
.rc-detail { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.rc-count { font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.rc-foot { font-size: 12px; color: var(--text-dim); }

#adminCounts { margin-bottom: 2px; }
#adminCounts .fchip.s-running[aria-pressed="true"] { background: var(--good-soft); border-color: var(--good); color: var(--good); }
#adminCounts .fchip.s-failed[aria-pressed="true"] { background: var(--high-soft); border-color: var(--high); color: var(--high); }
#adminCounts .fchip.s-paused[aria-pressed="true"] { background: var(--emerging-soft); border-color: var(--emerging); color: var(--emerging); }
#adminCounts .fchip.s-stopped[aria-pressed="true"] { background: var(--emerging-soft); border-color: var(--emerging); color: var(--emerging); }
#adminTable td { vertical-align: top; }
#adminTable .doing-cell { max-width: 380px; white-space: normal; font-size: 12px; }
.job-row.s-running > td { background: color-mix(in srgb, var(--good) 5%, transparent); }
.job-row.s-stopped > td { background: color-mix(in srgb, var(--emerging) 6%, transparent); }
.job-row.s-failed .job-err { color: var(--high); }
.job-row.s-done > td:first-child, .job-row.s-skipped > td:first-child { color: var(--text-dim); }
#adminTable .view-btn { margin-left: 4px; }

@media (max-width: 900px) {
  .admin-head { flex-direction: column; }
  .admin-head-actions { margin-left: 0; }
  #adminTable, #adminTable tbody, #adminTable tr.job-row, #adminTable td { display: block; }
  #adminTable thead { display: none; }
  #adminTable tr.job-row { border-bottom: 8px solid var(--bg); padding: 10px 12px; }
  #adminTable tr.job-row > td { border: none; padding: 3px 0; text-align: left; }
  #adminTable .doing-cell { max-width: none; }
}

#adminView .section-title { margin: 12px 0 4px; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
#adminView .section-sub { margin: 0 0 10px; font-size: 13px; max-width: none; }
#adminView .admin-head { padding-top: 8px; align-items: center; }
#adminView .jobs-kpis {
  grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 12px;
}
#adminView .jobs-kpis .kpi {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  padding: 8px 12px; border-radius: 8px; box-shadow: none;
  background: var(--panel); border: 1px solid var(--border);
}
#adminView .jobs-kpis .kpi:hover { box-shadow: none; transform: none; }
#adminView .jobs-kpis .k-ico, #adminView .jobs-kpis .k-sub { display: none; }
#adminView .jobs-kpis .k-label { font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
#adminView .jobs-kpis .k-value { font-size: 20px; font-weight: 740; margin: 0; letter-spacing: -0.03em; }
#adminView .jobs-kpis .kpi.is-high { border-color: color-mix(in srgb, var(--high) 45%, var(--border)); }
#adminView .jobs-kpis .kpi.is-high .k-value { color: var(--high); }
#adminView .jobs-kpis .kpi.is-warn { border-color: color-mix(in srgb, var(--emerging) 45%, var(--border)); }
#adminView .jobs-kpis .kpi.is-warn .k-value { color: var(--emerging); }
#adminView .jobs-kpis .kpi.is-good { border-color: color-mix(in srgb, var(--good) 45%, var(--border)); }
#adminView .jobs-kpis .kpi.is-good .k-value { color: var(--good); }
#adminView .cycle { margin: 0 0 14px; padding: 12px 14px; border-radius: 8px; }
#adminView .cycle-top b { font-size: 13.5px; }
#adminView .cycle-pct { font-size: 20px; }
#adminView .panel { border-radius: 8px; }
#adminView .panel-head { padding: 10px 14px; }
#adminView .panel-head h2 { font-size: 15px; font-weight: 700; }
#adminView .panel-body { padding: 12px 14px; }
#adminView thead th { padding: 8px 10px; font-size: 12px; font-weight: 700; text-align: center; }
#adminView tbody td { padding: 4px 8px; font-size: 12px; line-height: 1.35; }
#adminView .blocked { padding: 10px 12px; margin-bottom: 12px; }
@media (max-width: 900px) {
  #adminView .jobs-kpis { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================================
   NAVIGATION — appearance state, and a real menu on narrow screens
   ====================================================================== */

/* Appearance carries its current mode, so the control reports what it did. */
#themeToggle .count { margin-left: auto; background: var(--panel-2); color: var(--text-muted); }
#themeToggle[aria-pressed="true"] .count { background: var(--accent-soft); color: var(--accent); }

/* Analysis-only entries stay hidden until a product is open, so nothing offers a
   screen built from the bundled demo dataset. Advanced follows the same rule. */
body:not(.has-data) .nav-item[data-tab="advanced"] { display: none; }

.nav-toggle { display: none; }

@media (max-width: 900px) {
  /* The sidebar was a wall of links: twelve items wrapped across the top took a third
     of a phone screen before any content. It is a drawer now — one row, opened by the
     reader, closed by any navigation. */
  .sidebar { flex-direction: column; align-items: stretch; gap: 0; padding: 10px 14px; }
  .sidebar .logo { padding: 0; }
  .nav-toggle {
    display: flex; align-items: center; gap: 10px; width: 100%;
    margin-top: 10px; padding: 9px 12px; border-radius: 9px;
    border: 1px solid var(--border); background: var(--panel-2); color: var(--text);
    font-size: 13.5px; font-weight: 600; text-align: left;
  }
  .nav-toggle:hover { background: var(--panel); border-color: var(--accent-line); }
  body.nav-open .nav-toggle { border-color: var(--accent-line); color: var(--accent); }

  /* Closed by default; open restores the ordinary vertical list, labels and all. */
  .sidebar .nav, .sidebar .side-card { display: none; }
  body.nav-open .sidebar .nav { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
  body.nav-open .sidebar .side-card { display: flex; margin-top: 12px; }
  .nav-group { margin-top: 12px; display: block; }
  .nav-label { display: block; }
  .nav-item { width: 100%; padding: 9px 12px; font-size: 13.5px; }
}

/* The narrow top bar had a spacer holding a hundred pixels of nothing open once the
   dashboard chips were hidden. Search takes its own row; everything else follows. */
@media (max-width: 900px) {
  .topbar-inner { gap: 8px 10px; padding: 10px 14px; }
  .topbar-inner .topbar-spacer { display: none; }
  .search { order: -1; width: 100%; }
  .workspace { margin-left: auto; padding-right: 0; }
}

/* =========================================================================
   ACCOUNT MENU — who is signed in, what they can see, and the way out.
   Lives in the topbar's workspace slot; see index.html .account.
   ====================================================================== */

.account { position: relative; }

/* The workspace block was a div; as a button it needs the div's look back. */
.account .workspace {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 4px 6px;
  transition: background .12s;
}

.account .workspace:hover { background: var(--panel-2); }
.account .workspace.no-account { cursor: default; pointer-events: none; }

.account-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 260px;
  max-width: min(320px, calc(100vw - 32px));
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.acct-head {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-soft);
}

.acct-head strong {
  display: block;
  font-size: 13px;
  word-break: break-all;
}

.acct-head small {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

.acct-item {
  display: block;
  width: 100%;
  padding: 10px 14px;
  font: inherit;
  font-size: 13px;
  text-align: left;
  color: var(--text);
  background: none;
  border: 0;
  cursor: pointer;
}

.acct-item:hover { background: var(--panel-2); }
.acct-item:disabled { color: var(--text-dim); cursor: progress; }

/* =========================================================================
   OPERATOR-ONLY CHROME

   Collecting the catalog is the admin's job. A team member gets their own
   products and nothing about the queue: no Scrape Jobs item, no progress strip,
   no live-collection dot. `body.is-admin` is set from /api/auth/me — see
   setAdminChrome() in app.js.

   This is presentation. The server answers the same endpoints with 403 whatever
   this class says, so deleting it in devtools reveals an empty screen rather
   than another team's queue.
   ====================================================================== */

body:not(.is-admin) .admin-only { display: none !important; }

/* ---- Users (admin) — same stage machinery as the Scrape Jobs screen -------- */
#usersView { display: none; }
body[data-stage="users"] #usersView { display: block; }

.u-email { font-weight: 600; }
.u-sub { color: var(--text-dim); font-size: 11.5px; margin-top: 2px; }

/* Status reads at a glance: pending is the only one asking for action. */
.u-status {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.u-status.pending  { background: var(--emerging-soft); color: var(--emerging); }
.u-status.active   { background: var(--good-soft);     color: var(--good); }
.u-status.disabled { background: var(--low-soft);      color: var(--low); }

.u-role { font-size: 12px; color: var(--text-muted); }
.u-role.admin { color: var(--purple); font-weight: 600; }

/* The scope column: chips, capped, with an honest "+N" rather than a wrapped wall. */
.u-scope { display: flex; flex-wrap: wrap; gap: 4px; max-width: 320px; }
.u-chip {
  padding: 2px 7px; border-radius: 999px; font-size: 11px;
  background: var(--panel-2); border: 1px solid var(--border-soft);
  color: var(--text-muted); white-space: nowrap;
}
.u-chip.all { background: var(--purple-soft); border-color: transparent; color: var(--purple); }
.u-chip.none { background: var(--high-soft); border-color: transparent; color: var(--high); }

.u-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.u-actions button { font-size: 12px; padding: 5px 10px; }

/* The pending count in the sidebar, so an admin sees the queue without opening it. */
#navUsersPending:empty { display: none; }
#navUsersPending {
  background: var(--emerging-soft); color: var(--emerging); font-weight: 700;
}

@media (max-width: 900px) {
  .u-scope { max-width: none; }
  #usersTable th:nth-child(5), #usersTable td:nth-child(5) { display: none; }
}

/* ---- Manage scrape catalog — same stage machinery as Jobs / Users ---------- */
#catalogView { display: none; }
body[data-stage="catalog"] #catalogView { display: block; }

/* Three tiles, three columns — the shared .kpis grid is four wide, which left a
   hole on the right and squeezed "Every 7 days" onto two lines. */
#catalogView .kpis { margin-bottom: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
#catalogView .kpi .k-value { font-size: 24px; white-space: nowrap; }

.catalog-layout {
  display: grid; grid-template-columns: 1fr 380px; gap: 16px; align-items: start;
}
/* The edit panel drops under the table before the table gets squeezed: a 380px
   side panel beside a six-column table needs about 1350px of screen. */
@media (max-width: 1500px) { .catalog-layout { grid-template-columns: 1fr 340px; } }
@media (max-width: 1350px) { .catalog-layout { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  #catalogTable th:nth-child(4), #catalogTable td:nth-child(4) { display: none; }   /* last collected */
  #catalogView .kpis { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  #catalogTable th:nth-child(3), #catalogTable td:nth-child(3) { display: none; }   /* competitors */
  #catalogView #catalogTable tbody td, #catalogView #catalogTable thead th { padding: 8px; }
  #catalogView .cat-actions button { padding: 5px 9px; }
  .cat-pager { justify-content: center; }
}

.cat-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-filters .select-sm { width: 170px; }

.cat-cell-product { display: flex; align-items: center; gap: 10px; text-align: left; }
.cat-thumb {
  display: block; flex: none; width: 36px; height: 36px; border-radius: 8px;
  overflow: hidden; border: 1px solid var(--border-soft); background: var(--panel-2);
  position: relative;
}
.cat-thumb:not(.has-img)::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 46%, var(--border) 46%, var(--border) 54%, transparent 54%);
  opacity: .35;
}
.cat-thumb.has-img { background: #fff; }
.cat-thumb.has-img::after { content: none; }
.cat-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; background: #fff; }
.cat-cell-product b { display: block; font-size: 13px; }

#catalogTable { width: 100%; }
#catalogTable thead th { text-align: left; white-space: nowrap; }
#catalogTable thead th.num, #catalogTable td.num { text-align: center; }
#catalogTable tbody td { vertical-align: middle; padding: 9px 12px; }
#catalogTable thead th { padding: 10px 12px; }
/* A hairline between columns, so a wide row reads as cells rather than as one
   sentence with gaps in it. */
#catalogTable th + th, #catalogTable td + td { border-left: 1px solid var(--border-soft); }

/* Edit and Remove stay on one line at every width — stacked, each row was twice
   as tall as its content and the two read as unrelated controls. */
#catalogTable .cat-actions-cell { width: 1%; white-space: nowrap; text-align: center; }
.cat-actions { display: inline-flex; gap: 6px; flex-wrap: nowrap; }
.cat-actions button {
  padding: 5px 12px; font-family: var(--sans); font-size: 12.5px; font-weight: 600;
  border-radius: 8px; line-height: 1.3;
}
.cat-actions .cat-edit-btn { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.cat-actions .cat-edit-btn:hover { filter: brightness(.97); }

.cat-pager {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid var(--border-soft);
}
.cat-pager-note { font-size: 12px; color: var(--text-dim); }
.cat-pager-btns { display: flex; align-items: center; gap: 4px; }
.cat-pager-btns button { min-width: 30px; padding: 5px 8px; font-size: 12.5px; }
.cat-pager-btns button.cat-page-num.active {
  background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); font-weight: 700;
}
.cat-pager-dots { padding: 0 4px; color: var(--text-dim); }

#catalogEditPanel .panel-body { display: flex; flex-direction: column; }
/* The 220px/1fr split assumes the old 820px-wide setup column; this panel is a
   fixed 380px, so the two fields stack instead of squeezing "Product name" down
   to a sliver. */
#catForm .cat-grid { grid-template-columns: 1fr; }
#catForm .cat-row { flex-wrap: wrap; }
#catForm .cat-row .cr-asin { flex: 1 1 140px; }
#catForm .cat-row .cr-name { flex: 1 1 140px; }

/* A live preview of who this form is about to compare — same swatch language as
   the table's product thumbnail, so saving is not a leap of faith. */
.cat-preview { margin-top: 16px; padding: 12px 14px; border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); background: var(--panel-2); }
.cat-preview-head { font-size: 12px; font-weight: 700; color: var(--text-muted); margin-bottom: 10px; }
.cat-preview-row { display: flex; align-items: center; gap: 10px; }
.cat-preview-card { flex: 1 1 0; display: flex; align-items: center; gap: 8px; min-width: 0; }
.cat-preview-card b { display: block; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-preview-card span.mono { font-size: 11px; color: var(--text-dim); }
.cat-preview-vs { flex: none; font-size: 11px; font-weight: 700; color: var(--text-dim); }

/* =========================================================================
   PRODUCT LOOKUP — the browsable grid

   The setup column is capped at 820px because it is mostly a FORM, and a form
   wider than that is hard to read. The product grid is not a form: at 820px on a
   1440px screen it rendered three cards a row with empty gutters either side and
   a 4,500px page. When the grid is present the column earns more room.
   ====================================================================== */

body[data-stage="setup"].has-products .setup { max-width: 1180px; }

/* Sections get a little air between them so ten headings do not read as one list. */
.cat-section + .cat-section { margin-top: 22px; }

.cat-head {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 0 0 9px;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -.01em;
}

.cat-head span { color: var(--text-dim); font-weight: 500; font-size: 12px; }

/* "Show 17 more in Apparel" — full width so it reads as the end of the section
   rather than as another card. */
.cat-more,
.cat-more:hover {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 560;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px dashed var(--accent-line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.cat-more:hover { background: var(--accent-soft); filter: brightness(.97); }

/* The three things offered under the grid — find a product, what the schedule is,
   and the cross-product plan — were three stacked blocks of different widths. One
   row of equal cards, stacking on a narrow screen. */
.lookup-foot {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.lookup-foot > * { margin: 0 !important; }

@media (max-width: 1100px) {
  body[data-stage="setup"].has-products .setup { max-width: 100%; }
}

/* ---- Product Lookup page chrome: breadcrumb header, filter bar, section
   headers with a top-opportunity callout, and the card's demand bar. ---------- */
body.lookup-mode .hero { max-width: none; margin: 6px 0 14px; text-align: left; }
/* One width from the first paint. The scrape form is an 820px column that widens
   to 1180px once the product grid arrives; on the lookup page that read as the
   whole screen jumping two seconds after load. The lookup page, its footer row
   and the cross-product panel now share the full content width, like every
   other page. */
body.lookup-mode[data-stage="setup"] .setup,
body.lookup-mode[data-stage="setup"].has-products .setup { max-width: none; }
body.lookup-mode .lookup-foot { max-width: none; }
body.lookup-mode .portfolio { max-width: none; margin: 0; }
/* The cross-product table: nine columns with three long headers ran 200px past a
   1280px screen, hiding the action and the Open button behind a sideways scroll.
   Headers wrap, cells tighten, and the two least-needed columns drop out as the
   screen narrows — the wrap still scrolls as a last resort. */
#portfolioTable { width: 100%; }
#portfolioTable thead th { white-space: normal; line-height: 1.25; vertical-align: bottom; }
#portfolioTable td, #portfolioTable th { padding: 8px 8px; }
#portfolioTable .action-cell { min-width: 150px; max-width: 200px; }
#portfolioTable .view-btn { white-space: nowrap; }
@media (max-width: 1150px) {
  #portfolioTable th:nth-child(6), #portfolioTable td:nth-child(6) { display: none; }
}
@media (max-width: 900px) {
  #portfolioTable th:nth-child(4), #portfolioTable td:nth-child(4) { display: none; }
  .portfolio .section-head { flex-wrap: wrap; }
}
body.lookup-mode .hero h1 { font-size: 26px; }
.crumbs { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 12.5px; color: var(--text-dim); }
.crumbs i { font-style: normal; }
.crumbs b { color: var(--text-muted); font-weight: 500; }

.lk-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  margin: 0 0 14px; padding: 10px 12px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
}
.lk-bar .market-chips { margin: 0; }
.lk-bar .select-sm { width: auto; min-width: 170px; max-width: 240px; }
.lk-count { font-size: 13.5px; font-weight: 700; margin-right: 6px; white-space: nowrap; }
.lk-view { margin: 0; }
.lk-view .seg-btn { padding: 5px 10px; font-size: 13px; }
.lk-view .seg-btn[aria-pressed="true"] { background: var(--accent); color: #fff; box-shadow: none; }

.cat-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.cat-head-row .cat-head { margin: 0; font-size: 16px; font-weight: 700; }
.cat-head-row .cat-head span { font-size: 13px; }
.cat-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--text-muted); }
.cat-top {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border-radius: var(--radius-sm); background: var(--good-soft);
  border: 1px solid color-mix(in srgb, var(--good) 30%, var(--border));
}
.cat-top .ct-ico { color: var(--good); font-size: 17px; font-weight: 700; }
.cat-top .ct-body { display: flex; flex-direction: column; min-width: 0; }
.cat-top small { font-size: 11px; color: var(--text-muted); }
.cat-top b { font-size: 13px; max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-top .ct-open { white-space: nowrap; background: var(--panel); }

.product-card .pc-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.product-card .pc-mkt {
  flex: none; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 6px;
  background: var(--accent-soft); color: var(--accent);
}
.product-card .pc-kv { display: flex; gap: 8px; align-items: baseline; }
.product-card .pc-kv em { flex: none; width: 30px; font-style: normal; font-size: 10.5px; letter-spacing: .04em; color: var(--text-dim); }
.product-card .pc-demand { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; font-size: 12px; color: var(--text-muted); }
.product-card .pc-demand b { color: var(--text); font-size: 14px; font-weight: 700; }
.product-card .pc-bar { display: block; height: 5px; border-radius: 999px; background: var(--panel-2); overflow: hidden; }
.product-card .pc-bar i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.product-card .pc-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--border-soft); font-size: 11.5px;
}
.product-card .pc-open { color: var(--accent); font-weight: 600; white-space: nowrap; }

/* List view: the same card laid out as one row — picture, name, rivals, SKU,
   ASIN, demand (with its bar underneath), then when/open on the right. */
.product-grid.is-list { grid-template-columns: 1fr; gap: 8px; }
.product-grid.is-list .product-card {
  display: grid; align-items: center; column-gap: 16px; row-gap: 2px; padding: 10px 14px;
  grid-template-columns: 56px minmax(180px, 1.4fr) minmax(150px, 1fr) auto minmax(230px, auto) auto;
  grid-template-areas: "img title sku asin demand foot" "img vs sku asin bar foot";
}
.product-grid.is-list .pc-img { grid-area: img; width: 56px; height: 48px; margin: 0; }
.product-grid.is-list .pc-title { grid-area: title; }
.product-grid.is-list .pc-vs { grid-area: vs; }
.product-grid.is-list .pc-kv:has(.pc-sku) { grid-area: sku; min-width: 0; }
.product-grid.is-list .pc-kv:has(.pc-asin) { grid-area: asin; }
.product-grid.is-list .pc-demand, .product-grid.is-list .pc-evidence.none { grid-area: demand; margin: 0; justify-content: flex-start; gap: 14px; white-space: nowrap; }
.product-grid.is-list .pc-bar { grid-area: bar; }
.product-grid.is-list .pc-foot { grid-area: foot; margin: 0; padding: 0; border: 0; flex-direction: column; align-items: flex-end; gap: 2px; }
@media (max-width: 900px) {
  .cat-top b { max-width: 220px; }
  .product-grid.is-list .product-card { display: flex; flex-direction: column; align-items: stretch; }
  .product-grid.is-list .pc-img { width: 100%; height: 120px; }
  .product-grid.is-list .pc-foot { flex-direction: row; align-items: center; }
}

/* =========================================================================
   SCRAPE JOBS — the cycle, and what is blocked

   The screen used to lead with the progress of the current PHASE, which read
   95% while the cycle was 10% done. These two blocks answer the questions an
   operator actually opens this page with: how long is left, and is anything
   waiting on me.
   ====================================================================== */

.cycle {
  margin: 14px 0 16px;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.cycle-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.cycle-top b { font-size: 14px; }

.cycle-eta {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

.cycle-pct {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.cycle-bar {
  height: 7px;
  margin: 11px 0 9px;
  border-radius: 999px;
  background: var(--panel-2);
  overflow: hidden;
}

.cycle-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  transition: width .4s ease;
}

.cycle-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 11.5px;
  color: var(--text-muted);
}

.cycle-legend .cl { display: inline-flex; align-items: center; gap: 5px; }

.cycle-legend i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-dim);
}

.cycle-legend .s-done i     { background: var(--good); }
.cycle-legend .s-failed i   { background: var(--high); }
.cycle-legend .s-running i  { background: var(--accent); }
.cycle-legend .s-paused i   { background: var(--emerging); }
.cycle-legend .s-skipped i  { background: var(--low); }

/* ------------------------------------------------------------- blocked */

.blocked {
  margin-bottom: 14px;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(220, 47, 67, .28);
  background: var(--high-soft);
}

.blocked.warn {
  border-color: rgba(217, 119, 6, .3);
  background: var(--emerging-soft);
}

.blocked-head b { display: block; font-size: 13.5px; color: var(--high); }
.blocked.warn .blocked-head b { color: var(--emerging); }

.blocked-head span {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 90ch;
}

.blocked-list {
  list-style: none;
  margin: 11px 0 0;
  padding: 0;
  display: grid;
  gap: 7px;
}

.blocked-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 9px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  background: var(--panel);
  border: 1px solid var(--border-soft);
}

.blk-name,
.blk-name:hover {
  padding: 0;
  font: inherit;
  font-size: 12.5px;
  font-weight: 640;
  color: var(--accent);
  background: none;
  border: 0;
  cursor: pointer;
}

.blk-name:hover { text-decoration: underline; text-underline-offset: 2px; }

.blk-cat {
  font-size: 11px;
  color: var(--text-dim);
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--panel-2);
}

/* The two axes, verbatim from the scraper's own diagnostic — it is the whole
   reason the job cannot run, and it names both catalogues. */
.blk-axes {
  flex: 1 1 100%;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-muted);
  word-break: break-word;
}

.blk-all,
.blk-all:hover {
  margin-top: 10px;
  padding: 6px 11px;
  font-size: 12px;
  font-weight: 560;
  color: var(--high);
  background: var(--panel);
  border: 1px solid rgba(220, 47, 67, .3);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

/* -------------------------------------------------- the collapsed queue tail */

.queue-rest td { padding: 0 !important; background: var(--panel-2); }

.queue-more,
.queue-more:hover {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  color: var(--text-muted);
  background: none;
  border: 0;
  cursor: pointer;
}

.queue-more:hover { background: var(--panel-2); }
.queue-more b { color: var(--text); font-size: 13px; }
.queue-more span { flex: 1; color: var(--text-dim); font-size: 11.5px; }
.queue-more em { font-style: normal; font-weight: 620; color: var(--accent); }

@media (max-width: 700px) {
  .cycle-top { flex-direction: column; gap: 6px; }
  .cycle-pct { font-size: 19px; }
  .queue-more { flex-wrap: wrap; }
  .queue-more span { flex: 1 1 100%; }
}
.blk-note { font-weight: 500; color: var(--text-muted); font-size: 12px; }

/* =========================================================================
   ATTRIBUTE-AWARE MATCH CLASSIFICATIONS

   Needs Review is the loud one on purpose: information was missing on one side,
   so nobody can say the two are one product, and a price compared against it is
   a guess until a person checks. Equivalent is the quiet one: the same product in
   different words, which is a match in every way that matters.
   ====================================================================== */

.badge.review    { background: var(--high-soft); color: var(--high); border-color: transparent; font-weight: 600; }
.ai-mark.review  { background: var(--high-soft); color: var(--high); }
.badge.equiv     { background: var(--good-soft); color: var(--good); border-color: transparent; }
.ai-mark.equiv   { background: var(--good-soft); color: var(--good); }

/* "size ✓ · pack ✗ · colour ≈" — the per-attribute checks. */
.ck-item { display: inline-flex; align-items: center; gap: 3px; margin-right: 10px; white-space: nowrap; }
.ck { font-weight: 700; }
.ck.ok   { color: var(--good); }
.ck.near { color: var(--emerging); }
.ck.bad  { color: var(--high); }
.ck.miss { color: var(--text-dim); }

/* Why a competitor listing is a gap: the closest of ours and what ruled it out. On its
   own line under the listing, because it is the sentence that makes the gap trustable. */
.gap-why {
  flex-basis: 100%;
  margin-top: 3px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ======================================================================
   MISSING VARIATIONS, BOTH DIRECTIONS — sections, comparables, price lines
   ====================================================================== */
.badge.type-missing_competitor { background: var(--good-soft); color: var(--good); }
#planBody tr.plan-section td { background: var(--panel-2); padding: 10px 12px; font-size: 13px; border-top: 2px solid var(--border); cursor: default; }
#planBody tr.plan-section b { font-size: 13.5px; color: var(--text); }
#planBody tr.plan-section .count, .gap-heading .count { display: inline-block; min-width: 20px; margin-left: 4px; padding: 0 6px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-size: 11.5px; font-weight: 650; text-align: center; }
.ps-num { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-right: 8px; border-radius: 50%; background: var(--text); color: var(--panel); font-size: 11px; font-weight: 700; vertical-align: 1px; }
.ps-sub, .gap-heading-sub { display: block; margin: 2px 0 0 28px; font-size: 12px; font-weight: 450; color: var(--text-muted); }
.gap-heading { margin: 18px 0 10px; font-size: 16px; font-weight: 700; color: var(--text); }
#planTable .price-cell { min-width: 190px; }
#planTable .diff-cell, #gapsReverseTable .diff-cell { min-width: 150px; max-width: 220px; font-size: 12px; white-space: normal; color: var(--text); }
#planTable .their-cell { min-width: 150px; max-width: 220px; white-space: normal; }
#planTable td.opp-cell { min-width: 220px; white-space: normal; }
.price-line { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; line-height: 1.6; white-space: nowrap; }
.price-line > span:first-child { color: var(--text-muted); }
.cmp-cell { white-space: normal; font-size: 12px; line-height: 1.45; }
.cmp-cell .v-label { font-size: 12.5px; font-weight: 600; }
.cmp-cell .cell-note { white-space: normal; }
td.cmp-col { min-width: 180px; max-width: 240px; }
.warn-note { color: var(--emerging) !important; }
.side-banner { padding: 10px 12px; border-radius: 8px; background: var(--high-soft); color: var(--text); font-size: 13px; line-height: 1.5; }
.side-note { margin: 0 0 10px; font-size: 13px; line-height: 1.5; }
#gapsBody tr.group-divider td { background: var(--panel-2); padding: 9px 14px; font-size: 12.5px; color: var(--text-muted); }
#gapsBody tr.group-divider td b { color: var(--text); }
#gapsReverseTable td { vertical-align: top; }
#gapsReverseTable .action-cell { min-width: 200px; max-width: 280px; font-size: 12.5px; white-space: normal; }
.detail .kv .cell-note { white-space: normal; }
#planTable .cell-note { white-space: normal; overflow-wrap: anywhere; }
#planTable .var-cell { align-items: flex-start; }
#planTable td.opp-cell { min-width: 200px; max-width: 240px; }
#planTable .their-cell { min-width: 140px; max-width: 190px; }
#planTable .diff-cell { min-width: 120px; max-width: 170px; }
#planTable .price-cell { min-width: 200px; }
#planTable .action-cell { min-width: 170px; max-width: 220px; }
#planTable .type-line { margin-top: 5px; }
#planTable .type-line .badge { white-space: nowrap; }
.status-line-cell { margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--border); font-size: 12px; }
#gapsTable .cell-note, #gapsReverseTable .cell-note { white-space: normal; overflow-wrap: anywhere; }

/* Why a price is blank: Amazon's own reason, e.g. "Out of stock — no restock date". */
.stock-note { display: inline-block; font-size: 11.5px; font-weight: 600; color: var(--emerging); white-space: normal; line-height: 1.3; }


/* ------------------------------------------------------------------------
   ACTION PLAN, seven columns — one idea per cell (Pillow audit, 2026-09-14).
   Our side is SKU + linked ASIN or "Not sold by …"; a comparable lives in the
   Main difference column and the details, never in the identity column. */
#planTable th .th-sub { display: block; font-size: 10.5px; font-weight: 450; color: var(--text-dim);
  text-transform: none; letter-spacing: 0; margin-top: 2px; white-space: normal; max-width: 150px; }
.opp .ident { display: block; font-size: 11px; color: var(--text-dim); font-weight: 450; white-space: normal;
  overflow-wrap: anywhere; margin-top: 2px; }
.opp .ident a { color: var(--accent); text-decoration: none; }
.opp .ident a:hover { text-decoration: underline; }
.opp .v-label { display: block; font-weight: 620; color: var(--text); }
.opp .na.strong { display: block; font-weight: 600; color: var(--text-muted); font-style: normal; }
.opp .diff-cell { max-width: 280px; white-space: normal; font-size: 12.5px; line-height: 1.45; }
.opp .diff-cell .cell-note { white-space: normal; margin-bottom: 2px; }
.opp .demand-cell { white-space: nowrap; }
.opp .their-cell .cell-note { white-space: normal; max-width: 220px; }
.opp .type-line { margin-top: 4px; }
.badge.review.confirm { font-weight: 600; }
/* Seven columns must fit a 1240px content area without a horizontal scroll. */
#planTable td.opp-cell { min-width: 180px; max-width: 220px; }
#planTable .their-cell { min-width: 130px; max-width: 180px; }
#planTable .diff-cell { min-width: 110px; max-width: 165px; }
#planTable .price-cell { min-width: 165px; }
#planTable .price-cell .price-line { white-space: normal; }
#planTable .action-cell { min-width: 150px; max-width: 210px; }
#planTable th .th-sub { max-width: 120px; }
.plain-list { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.6; }
.plain-list li { margin: 2px 0; }
body.lookup-mode #btnExcelTop2.hide { display: none; }


/* Competitor Comparison: brand blocks, no deltas (2026-09-14). */
#compareTable th,
#compareTable td {
  border-right: 1px solid var(--border);
}
#compareTable th:last-child,
#compareTable td:last-child {
  border-right: 0;
}
#compareTable th.ours-end,
#compareTable td.ours-end {
  border-right: 3px solid var(--border);
}
#compareTable .col-sep.ours-split {
  border-left: 0;
}
#compareTable .col-sep:not(.ours-split) {
  border-left: 2px solid var(--border);
}
#compareTable th.brand-head.ours { color: var(--good); }
#compareTable td.thumb-cell { width: 34px; padding-right: 0; }
#compareTable td.thumb-cell .thumb { width: 28px; height: 28px; font-size: 9px; border-radius: 7px; }
#compareTable td.not-sold { text-align: center; color: var(--text-dim); font-style: italic; }
#compareTable tfoot td { background: var(--panel-2); font-size: 12px; border-top: 2px solid var(--border); }
#compareTable .type-line { margin-top: 3px; }
#compareTable td .cell-note { white-space: nowrap; }
#compareTable td.thumb-cell .thumb { font-size: 0; }   /* a colour swatch, not initials */
#compareTable th.sku-col,
#compareTable td.sku-cell {
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#compareTable th.size-col,
#compareTable td.size-cell {
  min-width: 6.75rem;
  vertical-align: middle;
}
#compareTable .size-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  line-height: 1.25;
  white-space: nowrap;
}
#compareTable .size-pack {
  font-size: 11px;
  font-weight: 450;
  color: var(--text-dim);
  white-space: nowrap;
}
#compareTable td.size-cell .src-mark { display: block; width: fit-content; margin-top: 1px; }
#compareTable th.deliv-col,
#compareTable td.deliv-cell {
  min-width: 6.25rem;
  white-space: nowrap;
  vertical-align: middle;
}
#compareTable .deliv {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  line-height: 1.25;
}
#compareTable .deliv-eta {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#compareTable .deliv-note {
  display: block;
  font-size: 11px;
  font-weight: 450;
  color: var(--text-dim);
  white-space: nowrap;
}

.src-mark { display: inline-block; font-size: 10px; line-height: 1.3; padding: 0 4px; border-radius: 3px; background: var(--surface-2, #eef1f5); color: var(--text-muted); vertical-align: 1px; cursor: help; }
.badge.ai-opinion { cursor: help; }

/* =========================================================================
   COMPACT DASHBOARD — density and chrome for #dashboardView only.
   Setup, loader, jobs and users keep the original scale.
   ====================================================================== */
body[data-stage="dashboard"] .wrap { padding: 12px 18px 48px; }

#dashboardView { --radius: 8px; }
#dashboardView :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

#dashboardView .product-head { gap: 10px; padding: 0 0 10px; flex-wrap: nowrap; }
#dashboardView .ph-thumb { width: 40px; height: 40px; border-radius: 8px; font-size: 12px; }
#dashboardView .ph-title-row { gap: 8px 12px; }
#dashboardView .ph-title-row h1 { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
#dashboardView .ph-brands .badge { font-size: 11px; padding: 2px 7px; }
#dashboardView .ph-meta { margin-top: 0; font-size: 12px; gap: 8px 12px; }
#dashboardView .ph-pill { padding: 2px 8px; font-size: 11px; border-radius: 6px; gap: 4px; }
#dashboardView .ph-actions { gap: 6px; }
#dashboardView .ph-actions .btn,
#dashboardView .ph-actions button { padding: 5px 10px; font-size: 12.5px; font-weight: 560; border-radius: 8px; }
#dashboardView .copy { padding: 1px 6px; }
#dashboardView .group-by { margin-top: 0; }
#dashboardView .link-btn { padding: 4px 0; background: none; border: none; }

#dashboardView .kpis { gap: 8px; margin-bottom: 4px; }
#dashboardView .kpi {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  padding: 8px 12px; border-radius: 8px; box-shadow: none;
  text-align: left; width: 100%; font: inherit; color: inherit; cursor: pointer;
  transform: none; transition: border-color .12s, background .12s;
  background: var(--panel); border: 1px solid var(--border);
}
#dashboardView .kpi:hover { box-shadow: none; transform: none; background: var(--panel-2); }
#dashboardView .kpi .k-ico, #dashboardView .kpi .k-sub, #dashboardView .kpi .k-link { display: none; }
#dashboardView .kpi .k-label { font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
#dashboardView .kpi .k-value { font-size: 20px; font-weight: 740; margin: 0; letter-spacing: -0.03em; }
#dashboardView .kpi.is-high { border-color: color-mix(in srgb, var(--high) 45%, var(--border)); }
#dashboardView .kpi.is-high .k-value { color: var(--high); }
#dashboardView .kpi.is-warn { border-color: color-mix(in srgb, var(--emerging) 45%, var(--border)); }
#dashboardView .kpi.is-warn .k-value { color: var(--emerging); }
#dashboardView .kpi.is-good { border-color: color-mix(in srgb, var(--good) 45%, var(--border)); }
#dashboardView .kpi.is-good .k-value { color: var(--good); }
#dashboardView .kpis-5 { margin-bottom: 10px; }
#dashboardView .kpi:not(button) { cursor: default; }

#dashboardView .tabs { margin: 12px 0 0; }
#dashboardView .tab { padding: 8px 12px; font-size: 13px; }
#dashboardView .tab-panel { padding-top: 2px; }
#dashboardView .section-title { margin: 12px 0 4px; font-size: 18px; }
#dashboardView .section-sub { margin: 0 0 10px; font-size: 13px; max-width: none; }
#dashboardView .section-head { gap: 10px; align-items: center; }
#dashboardView .section-head .link-btn { margin-top: 0; }
#dashboardView .panel { border-radius: 8px; }
#dashboardView .panel-head { padding: 10px 14px; }
#dashboardView .panel-body { padding: 12px 14px; }
#dashboardView .table-wrap, #dashboardView .grid-scroll { border-radius: 8px; }
#dashboardView table { font-size: 12.5px; }
#dashboardView thead th { padding: 12px 10px; font-size: 15px; font-weight: 700; text-align: center; }
#dashboardView tbody td { padding: 7px 8px; }
#dashboardView .badge { padding: 2px 7px; font-size: 11px; border-radius: 6px; }

#dashboardView .filters {
  align-items: center; gap: 8px; padding: 8px 10px;
  border-radius: 8px; margin-bottom: 10px;
}
#dashboardView .filters .field { min-width: 0; }
#dashboardView .filters .grow { flex: 1 1 180px; min-width: 160px; max-width: none; }
#dashboardView .filters select,
#dashboardView .plan-filters select {
  width: auto; min-width: 128px; padding: 5px 8px; font-size: 12.5px; border-radius: 8px;
}
#dashboardView .filters .search-field,
#dashboardView .plan-filters .search-field { min-width: 160px; flex: 1 1 180px; width: auto; }
#dashboardView .fchip { padding: 4px 8px; font-size: 12px; border-radius: 6px; }
#dashboardView button, #dashboardView .btn { padding: 5px 10px; font-size: 12.5px; border-radius: 8px; }
#dashboardView button.primary { padding: 5px 12px; }
#dashboardView .btn-icon { padding: 5px 8px; }

.inline-range, .inline-field {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--text-muted); white-space: nowrap;
}
.inline-range input[type="range"] { width: 110px; }
#minScoreOut { color: var(--accent); }

.plan-brief {
  display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap;
  margin: 8px 0 6px; font-size: 13px;
}
.plan-one-liner { margin: 0; flex: 1 1 260px; line-height: 1.4; }
.plan-one-liner .stale-note {
  display: inline; padding: 2px 8px; margin: 0 8px 0 0; font-size: 11.5px;
}
.plan-notes { font-size: 12.5px; max-width: 72ch; }
.plan-notes summary {
  cursor: pointer; color: var(--text-muted); font-weight: 600; font-size: 12px; list-style: none;
}
.plan-notes summary::-webkit-details-marker { display: none; }
.plan-notes summary::before { content: '▸ '; color: var(--text-dim); }
.plan-notes[open] summary::before { content: '▾ '; }
.plan-notes[open] summary { margin-bottom: 4px; }
.plan-block { margin-top: 8px; }
.plan-title { font-size: 15px; }
#dashboardView .plan-filters { flex-wrap: wrap; }
#dashboardView .plan-filters .filter-chips { flex: 1 1 auto; }
.action-verb { font-weight: 650; color: var(--text); margin-right: 6px; }
#planTable .action-cell .link-btn { display: inline; margin-left: 4px; padding: 0; }
#planTable .var-col .v-label {
  display: block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#planTable .diff-cell { max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#planTable .impact-cell { white-space: nowrap; }
#planTable td, #planTable th { padding: 7px 8px; }

#dashboardView .gap-heading { margin: 12px 0 8px; font-size: 14.5px; }
#dashboardView .legend { margin-bottom: 8px; font-size: 11.5px; gap: 12px; }
#dashboardView .empty-state { padding: 28px 16px; }

@media (max-width: 900px) {
  #dashboardView .product-head { flex-wrap: wrap; }
  #dashboardView .ph-actions { width: 100%; }
  #planTable .var-col .v-label, #planTable .diff-cell { white-space: normal; max-width: none; }
}

/* Pin (rocket) toggle — square icon button, lit up once pinned. */
.icon-btn { padding: 6px 9px !important; font-size: 15px; line-height: 1; }
.icon-btn[aria-pressed="true"] {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent);
}


/* Sort arrow on the comparison table's Bought / month headers: quiet until it is
   the column deciding the order. */
.sort-th { white-space: nowrap; }
.th-sort, .th-sort:hover {
  margin-left: 5px; padding: 0 3px; border: none; background: none; box-shadow: none;
  font-size: 12px; line-height: 1; font-weight: 600; color: var(--text-dim);
  cursor: pointer; vertical-align: baseline; border-radius: 4px;
}
.th-sort:hover { color: var(--text); }
.th-sort.on, .th-sort.on:hover { color: var(--accent); }
#dashboardView .th-sort { padding: 0 3px; font-size: 12px; border-radius: 4px; }

/* ---- Main-SKU pins (the rocket) -------------------------------------------
   The comparison table shows the WHOLE SKU: it used to be clipped at 11rem, so
   UBMICROFIBERDUVETQUEENBLUEHEAVEN read as "UBMICROFIBERDUVETQU…" and two SKUs
   that differ only at the end looked identical. The table already scrolls
   sideways; the column takes the width its longest SKU needs. */
#compareTable th.sku-col,
#compareTable td.sku-cell { max-width: none; overflow: visible; text-overflow: clip; white-space: nowrap; }
#compareTable .sku-line { display: inline-flex; align-items: center; gap: 6px; }
/* Off: a faint grey rocket, there when looked for. On: full colour. */
.pin-row, .pin-row:hover {
  padding: 1px 3px; border: none; background: none; box-shadow: none; border-radius: 5px;
  font-size: 13px; line-height: 1; cursor: pointer;
  filter: grayscale(1); opacity: .35; transition: opacity .12s, filter .12s;
}
.pin-row:hover { opacity: .8; }
.pin-row[aria-pressed="true"], .pin-row[aria-pressed="true"]:hover { filter: none; opacity: 1; background: var(--accent-soft); }
.pin-row:disabled { cursor: default; }
#dashboardView .pin-row { padding: 1px 3px; font-size: 13px; border-radius: 5px; }
.pc-pin {
  flex: none; padding: 1px 6px; border-radius: 6px; font-size: 10.5px; font-weight: 700; white-space: nowrap;
  background: var(--emerging-soft); color: var(--emerging);
}

/* ---- Price colours in the comparison table ---------------------------------
   Red: we are dearer than that rival (on our own cell: than the cheapest one).
   Green: we are cheaper. Only on pairings the engine prices as the same product. */
#compareTable td.price-worse  { background: var(--high-soft); color: var(--high); font-weight: 650; }
#compareTable td.price-better { background: var(--good-soft); color: var(--good); font-weight: 650; }

/* ---- Popup (native <dialog>) — "Edit competitors" on an open product -------- */
.dlg {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
  padding: 0; border: 1px solid var(--border); border-radius: 14px;
  background: var(--panel); color: var(--text); box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.dlg[open] { display: flex; flex-direction: column; }
.dlg::backdrop { background: rgba(15, 23, 42, .45); backdrop-filter: blur(2px); }
.dlg-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 16px 18px 12px; border-bottom: 1px solid var(--border-soft);
}
.dlg-head h2 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.dlg-head p { margin: 3px 0 0; font-size: 12.5px; color: var(--text-muted); }
.dlg-x, .dlg-x:hover { flex: none; padding: 2px 9px; font-size: 18px; line-height: 1.2; }
.dlg-body { padding: 16px 18px 18px; overflow-y: auto; }