:root {
  --bg: #f6f7f9; --card: #fff; --ink: #1d2433; --muted: #667085; --line: #e3e6eb;
  --accent: #1f4e8c; --good: #d8f0dd; --ok: #fff3c4; --bad: #fbd9d9;
  --stripe: #fafbfc; --hover: #eef3fa; --faint: #c3c8d0;
  /* Positive readings, deeper as they rise; a loss in red. */
  --p1-bg: #eef8f1; --p1-ink: #2f6b3f; --p2-bg: #d3eedb; --p2-ink: #1e5c30;
  --p3-bg: #a8dcb6; --p3-ink: #11461f; --p4-bg: #2f9e57; --p4-ink: #ffffff;
  --neg-bg: #fde7e7; --neg-ink: #a12a2a;
  --b2-bg: #dbe9fb; --b2-ink: #1d4f91; --b3-bg: #9cc3f2; --b3-ink: #0d2f5c;
  /* Each part of the results table: heading, its accent, the column's tint. */
  --id-head: #eef1f5;    --id-accent: #64748b;    --id-tint: rgba(100, 116, 139, 0);
  --sales-head: #e3eefb; --sales-accent: #2563eb; --sales-tint: rgba(37, 99, 235, .07);
  --roi-head: #e2f4e8;   --roi-accent: #16a34a;   --roi-tint: rgba(22, 163, 74, .07);
  --cost-head: #fcf0dc;  --cost-accent: #d97706;  --cost-tint: rgba(217, 119, 6, .085);
  --sell-head: #efe8fb;  --sell-accent: #7c3aed;  --sell-tint: rgba(124, 58, 237, .07);
  --link-head: #eef1f5;  --link-accent: #64748b;  --link-tint: rgba(100, 116, 139, 0);
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #14171c; --card: #1c2027; --ink: #e6e8eb; --muted: #98a2b3; --line: #2c323b;
          --accent: #7aa7e6; --good: #1f3d29; --ok: #3d3618; --bad: #45201f;
          --stripe: #20252d; --hover: #252c36; --faint: #4a525e;
          --p1-bg: #1c3024; --p1-ink: #a6d8b4; --p2-bg: #224a30; --p2-ink: #c3ebcf;
          --p3-bg: #2c6b41; --p3-ink: #e6f7eb; --p4-bg: #3fb36a; --p4-ink: #06210f;
          --neg-bg: #4a2323; --neg-ink: #f4b8b8;
          --b2-bg: #1f3a5c; --b2-ink: #bcd6f7; --b3-bg: #2f5d94; --b3-ink: #eaf3ff;
          --id-head: #232932;    --id-accent: #8b98aa;    --id-tint: rgba(139, 152, 170, 0);
          --sales-head: #1b2a3f; --sales-accent: #6ea2f5; --sales-tint: rgba(110, 162, 245, .07);
          --roi-head: #1a3324;   --roi-accent: #4cc37a;   --roi-tint: rgba(76, 195, 122, .07);
          --cost-head: #3a2c15;  --cost-accent: #f0a63a;  --cost-tint: rgba(240, 166, 58, .07);
          --sell-head: #2b2142;  --sell-accent: #a98af0;  --sell-tint: rgba(169, 138, 240, .07);
          --link-head: #232932;  --link-accent: #8b98aa;  --link-tint: rgba(139, 152, 170, 0); }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink);
       font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
header { display: flex; justify-content: space-between; align-items: center; gap: 12px;
         padding: 12px 16px; background: var(--card); border-bottom: 1px solid var(--line); }
.brand { font-weight: 600; color: var(--ink); text-decoration: none; }
.who { display: flex; gap: 10px; align-items: center; color: var(--muted); margin: 0; }
main { max-width: 1400px; margin: 0 auto; padding: 16px; }
h1 { font-size: 1.4rem; margin: 0 0 12px; } h2 { font-size: 1.1rem; margin: 0 0 10px; }
a { color: var(--accent); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 16px;
        margin-bottom: 16px; }
.narrow { max-width: 380px; margin: 40px auto; }
.stack { display: grid; gap: 12px; } .stack input { display: block; width: 100%; margin-top: 4px; }
input { font: inherit; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px;
        background: var(--bg); color: var(--ink); }
button, .button { font: inherit; background: var(--accent); color: #fff; border: 0; border-radius: 6px;
                  padding: 8px 14px; cursor: pointer; text-decoration: none; display: inline-block; }
button.link { background: none; color: var(--accent); padding: 0; }
.muted { color: var(--muted); } .error { color: #c0392b; }
.drop { border: 2px dashed var(--line); border-radius: 10px; padding: 28px; text-align: center; }
.drop.over { border-color: var(--accent); }
.list { width: 100%; border-collapse: collapse; }
.list th, .list td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left;
                     vertical-align: top; }
.list th { font-weight: 600; white-space: nowrap; cursor: pointer; user-select: none; }
.list .num { text-align: right; white-space: nowrap; }
.list.compact { width: auto; margin: 8px 0; } .list.compact td { padding: 3px 10px 3px 0; }
.scroll { overflow-x: auto; }
/* The finished scan: tabs, then one table that scrolls inside the card with
   its header row and ASIN column always in view. */
.sheet-card { padding-bottom: 8px; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.tabs button { background: none; color: var(--muted); border-radius: 6px 6px 0 0; padding: 8px 14px;
               border-bottom: 2px solid transparent; }
.tabs button[aria-selected=true] { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
#filters { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-bottom: 12px; }
#filters input[type=number] { width: 72px; }
#filters select { font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px;
                  background: var(--bg); color: var(--ink); }
button.small { padding: 6px 10px; font-size: 14px; }
button.plain { background: none; color: var(--accent); border: 1px solid var(--line); }
button.more { margin-top: 10px; }
.sheet-scroll { overflow: auto; max-height: 75vh; border: 1px solid var(--line); border-radius: 8px; }
/* A finished scan uses the whole width of the window. */
body[data-status=done] main { max-width: none; }
.tabs button.full { margin-left: auto; align-self: center; color: var(--accent); border: 1px solid var(--line);
                    border-radius: 6px; padding: 5px 12px; font-size: 14px; }
.tabs button.full:hover { border-color: var(--accent); }
/* Full screen: the results card alone, the table taking every row left. */
.sheet-card.is-full { position: fixed; inset: 0; z-index: 50; margin: 0; border: 0; border-radius: 0;
                      display: flex; flex-direction: column; overflow: hidden; background: var(--card);
                      padding: 12px 16px; }
.sheet-card.is-full #sheet { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sheet-card.is-full .sheet-scroll { flex: 1; max-height: none; }
.sheet-card.is-full button.more { align-self: flex-start; }
body.no-scroll { overflow: hidden; }
.list.sheet { font-size: 14px; font-variant-numeric: tabular-nums; }
.list.sheet th, .list.sheet td { padding: 7px 10px; border-bottom: 1px solid var(--line); }
.list.sheet th { position: sticky; top: 0; z-index: 2; background: var(--card); vertical-align: bottom;
                 box-shadow: inset 0 -2px 0 var(--line); border-bottom: 0; }
.list.sheet th .over { display: block; font-size: 11px; font-weight: 600; color: var(--muted);
                       text-transform: uppercase; letter-spacing: .04em; }
.list.sheet th .main { display: block; font-size: 13px; }
.list.sheet td { background: var(--card); vertical-align: middle; }
.list.sheet tbody tr:nth-child(even) td { background: var(--stripe); }
.list.sheet tbody tr:hover td { background: var(--hover); }
.list.sheet .group { border-left: 1px solid var(--line); }
.list.sheet th:first-child, .list.sheet td:first-child { position: sticky; left: 0; z-index: 1; }
.list.sheet th:first-child { z-index: 3; }
.list.sheet td.code { font-family: ui-monospace, Consolas, monospace; font-size: 13px; white-space: nowrap;
                      color: var(--muted); }
.list.sheet td.product { min-width: 260px; max-width: 420px; }
.list.sheet td.product .name { font-weight: 500; }
.list.sheet td.product .chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.pill { display: inline-block; min-width: 48px; padding: 1px 8px; border-radius: 999px; text-align: right;
        font-weight: 600; }
.pill.p1 { background: var(--p1-bg); color: var(--p1-ink); }
.pill.p2 { background: var(--p2-bg); color: var(--p2-ink); }
.pill.p3 { background: var(--p3-bg); color: var(--p3-ink); }
.pill.p4 { background: var(--p4-bg); color: var(--p4-ink); }
.pill.neg { background: var(--neg-bg); color: var(--neg-ink); }
.pill.b2 { background: var(--b2-bg); color: var(--b2-ink); }
.pill.b3 { background: var(--b3-bg); color: var(--b3-ink); }
.pill.p1 { box-shadow: inset 0 0 0 1px var(--p2-bg); }
/* The parts of the table, each in its own colour: a tinted heading with a
   strip of the accent along its top, and a faint tint down the column (laid
   over the row's own stripe, so the stripes still show). */
.list.sheet th { border-top: 3px solid transparent; }
.list.sheet th .over { color: var(--muted); }
.list.sheet .g-id    { --head: var(--id-head);    --g-accent: var(--id-accent);    --tint: var(--id-tint); }
.list.sheet .g-sales { --head: var(--sales-head); --g-accent: var(--sales-accent); --tint: var(--sales-tint); }
.list.sheet .g-roi   { --head: var(--roi-head);   --g-accent: var(--roi-accent);   --tint: var(--roi-tint); }
.list.sheet .g-cost  { --head: var(--cost-head);  --g-accent: var(--cost-accent);  --tint: var(--cost-tint); }
.list.sheet .g-sell  { --head: var(--sell-head);  --g-accent: var(--sell-accent);  --tint: var(--sell-tint); }
.list.sheet .g-link  { --head: var(--link-head);  --g-accent: var(--link-accent);  --tint: var(--link-tint); }
.list.sheet th[class*="g-"] { background: var(--head); border-top-color: var(--g-accent); }
.list.sheet th[class*="g-"] .over { color: var(--g-accent); }
.list.sheet td[class*="g-"] { background-image: linear-gradient(var(--tint), var(--tint)); }
.list.sheet .group { border-left: 1px solid var(--line); }
a.go { display: inline-block; padding: 2px 9px; border: 1px solid var(--line); border-radius: 6px;
       text-decoration: none; font-size: 13px; white-space: nowrap; background: var(--card); }
a.go:hover { border-color: var(--accent); }
.pill.zero { color: var(--muted); font-weight: 400; }
.dash { color: var(--faint); }
.amazon-title { font-size: 12px; color: var(--muted); margin-top: 3px; }
.flag { display: inline-block; font-size: 11px; line-height: 1.5; padding: 0 7px; border-radius: 999px;
        white-space: nowrap; }
.flag.warn { background: var(--ok); } .flag.bad { background: var(--bad); } .flag.info { background: var(--line); }
.list.about td.key { width: 200px; color: var(--muted); white-space: nowrap; }
.list.about th { padding-top: 14px; }
.badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 13px;
         background: var(--line); }
.badge.done { background: var(--good); } .badge.running, .badge.queued { background: var(--ok); }
.badge.failed { background: var(--bad); }
details { margin: 8px 0; } summary { cursor: pointer; color: var(--accent); }
.start { margin-top: 10px; }
.done { color: #1e7b34; }
.row { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.link-box { width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.who a { margin-right: 4px; }