:root {
  color-scheme: light;
  --paper: #F2F4F7;
  --panel: #FFFFFF;
  --panel-2: #F7F9FB;
  --input: #FFFFFF;
  --hover: #F1F4F8;
  --row-hover: #F8FAFC;
  --chip: #EEF1F4;
  --ink: #172131;
  --ink-2: #2B3647;
  --muted: #5A6677;
  --faint: #B6C0CD;
  --line: #DCE1E8;
  --line-soft: #EAEDF1;
  --line-strong: #AEB9C7;
  --switch-off: #C4CCD7;
  --accent: #1F2A3D;
  --accent-2: #2E3C55;
  --on-accent: #FFFFFF;
  --link: #2563EB;
  --toast: #1F2A3D;
  --walmart: #0B6BC2;
  --walmart-tint: #E6F0FA;
  --amazon: #B86E00;
  --amazon-2: #E88A00;
  --amazon-tint: #FBF0DF;
  --gold: #E8A100;
  --lego-tint: #FFF6D6;
  --lego-ink: #7A5600;
  --kw-bg: #FFF4CC;
  --new: #0F7B5F;
  --drop: #B45309;
  --back: #1D4ED8;
  --gone: #6B7280;
  --err: #B91C1C;
  --info: #1D4ED8;
  --pos: #0F8A5F;            /* profit, gains, good */
  --neg: #D12C2C;            /* losses, bad */
  --pos-tint: #E3F4EE;
  --neg-tint: #FDECEC;
  --warn-tint: #FEF3E2;
  --info-tint: #E6EEFD;
  --on-warn: #7A3E06;
  --on-bad: #7F1D1D;
  --on-info: #1E3A8A;
  --sel: #EAF1FE;
  --sel-line: #C7D7FB;
  --focus: #2563EB;
  --side: #172131;
  --side-ink: #C9D2DE;
  --side-ink-2: #E6EBF2;
  --side-sub: #9FB0C6;
  --side-hover: #222E41;
  --side-active: #2A3850;
  --side-line: #2A3547;
  --side-line-2: #3A4659;
  --side-card: #1F2A3C;
  --call-bg: #F8FAFC;
  --call-ink: #172131;
  --call-line: #D8DEE6;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.05);
  --shadow: 0 1px 2px rgba(16,24,40,.04), 0 2px 8px rgba(16,24,40,.05);
  --shadow-lg: 0 14px 40px rgba(16,24,40,.18);
  --radius: 10px;
  --font: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font); font-size: 14px; line-height: 1.45; color: var(--ink);
  background: var(--paper); font-variant-numeric: tabular-nums;
}
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ── Shell ─────────────────────────────────────────── */
.shell { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.side {
  background: var(--side); color: var(--side-ink-2); display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; padding: 18px 14px;
}
.side-top { display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; letter-spacing: -0.01em; text-decoration: none; color: #fff; }
.brand-dark { color: var(--ink); }
.brand-mark { width: 22px; height: 22px; border-radius: 5px; background: linear-gradient(135deg, var(--walmart) 0 50%, var(--amazon-2) 50% 100%); }
.side-toggle { display: none; background: transparent; border: 1px solid var(--side-line-2); color: #fff; border-radius: 6px; padding: 5px 10px; }
.nav { display: flex; flex-direction: column; gap: 2px; margin-top: 26px; }
.nav a {
  display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: 6px;
  text-decoration: none; color: var(--side-ink); font-weight: 500;
}
.nav a:hover { background: var(--side-hover); color: #fff; }
.nav a.active { background: var(--side-active); color: #fff; }
.nav-group { margin: 10px 0; padding: 8px 0; border-top: 1px solid var(--side-line); border-bottom: 1px solid var(--side-line); display: flex; flex-direction: column; gap: 2px; }
.nav a.mp-walmart { box-shadow: inset 3px 0 0 var(--walmart); }
.nav a.mp-amazon { box-shadow: inset 3px 0 0 var(--amazon-2); }
.count { font-size: 12px; color: var(--side-sub); }
.count.hot { background: var(--new); color: #fff; border-radius: 10px; padding: 0 7px; font-weight: 700; }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.budget { display: block; text-decoration: none; background: var(--side-card); border-radius: var(--radius); padding: 10px 12px; }
.budget-line { display: flex; justify-content: space-between; font-size: 13px; color: var(--side-ink); }
.budget-line strong { color: #fff; }
.meter { height: 6px; background: var(--side-line-2); border-radius: 3px; margin: 8px 0 6px; overflow: hidden; }
.meter span { display: block; height: 100%; width: 0; background: #4ADE80; border-radius: 3px; }
.meter.warn span { background: #FBBF24; }
.meter.over span { background: #F87171; }
.budget-sub { font-size: 12px; color: var(--side-sub); }
.engine { display: flex; align-items: center; gap: 8px; background: transparent; border: 1px solid var(--side-line-2); color: var(--side-ink-2); border-radius: 6px; padding: 7px 10px; cursor: pointer; text-align: left; }
.engine:hover { border-color: var(--side-sub); }
.engine .dot { width: 8px; height: 8px; border-radius: 50%; background: #4ADE80; flex: none; }
.engine.paused .dot { background: #FBBF24; }
.engine.busy .dot { animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: 0.25; } }
.side-prefs { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--side-ink); }
.side-user { font-size: 12px; color: var(--side-sub); }
.side-user strong { color: var(--side-ink-2); }
.linkish { background: none; border: 0; padding: 0; color: #9FC4FF; cursor: pointer; text-decoration: underline; }
.main .linkish, dialog .linkish { color: var(--link); }
.check { display: flex; gap: 8px; align-items: center; cursor: pointer; }

.main { padding: 26px 32px 60px; min-width: 0; outline: none; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin: 0; line-height: 1.1; }
.page-head .sub { color: var(--muted); margin-top: 4px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ── Buttons & inputs ──────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--panel);
  border-radius: 6px; padding: 7px 12px; cursor: pointer; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.btn:hover { border-color: var(--line-strong); }
.btn:disabled { opacity: 0.55; cursor: default; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn-danger { color: var(--err); }
.btn-sm { padding: 4px 9px; font-size: 13px; }
.btn-block { width: 100%; justify-content: center; padding: 10px; }
.btn-icon { padding: 4px 7px; line-height: 1; }
input[type=text], input[type=number], input[type=password], input[type=search], input[type=date], input:not([type]), select, textarea {
  border: 1px solid var(--line); background: var(--input); border-radius: 6px; padding: 7px 10px; min-width: 0;
}
textarea { width: 100%; resize: vertical; }
label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 13px; }
label .hint, .hint { font-weight: 400; color: var(--muted); font-size: 12px; }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.toolbar input[type=search] { width: 240px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--panel); }
.seg button { border: 0; background: transparent; padding: 6px 11px; cursor: pointer; font-weight: 600; color: var(--muted); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed=true] { background: var(--accent); color: var(--on-accent); }
.switch { position: relative; display: inline-block; width: 34px; height: 20px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; background: var(--switch-off); border-radius: 10px; cursor: pointer; transition: background .15s; }
.switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; background: #fff; border-radius: 50%; transition: transform .15s; }
.switch input:checked + span { background: var(--new); }
.switch input:checked + span::after { transform: translateX(14px); }
.switch input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ── Panels, stats, tables ─────────────────────────── */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.panel-pad { padding: 16px 18px; }
.stats { display: flex; flex-wrap: wrap; gap: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 18px; }
.stat { padding: 12px 18px; border-right: 1px solid var(--line-soft); min-width: 120px; }
.stat:last-child { border-right: 0; }
.stat b { display: block; font-size: 20px; font-weight: 700; }
.stat span { color: var(--muted); font-size: 12px; }
.table-wrap { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--panel-2); white-space: nowrap; }
td { padding: 9px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--row-hover); }
td.num, th.num { text-align: right; }
.thumb { width: 48px; height: 48px; object-fit: contain; background: #fff; border: 1px solid var(--line-soft); border-radius: 4px; display: block; }
.thumb.ph { background: var(--hover); }
.title-cell { min-width: 260px; max-width: 520px; }
.title-cell a { font-weight: 600; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.title-cell a:hover { text-decoration: underline; }
.title-cell .meta { color: var(--muted); font-size: 12px; margin-top: 2px; }
.idchip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); background: var(--hover); border-radius: 4px; padding: 1px 6px; border: 0; cursor: pointer; }
.idchip:hover { color: var(--ink); }
.price { font-weight: 700; }
.delta { font-size: 12px; font-weight: 600; margin-left: 4px; }
.delta.down { color: var(--drop); }
.delta.up { color: var(--gone); }
.pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 10px; background: var(--chip); color: var(--muted); white-space: nowrap; }
.pill.ok { background: var(--pos-tint); color: var(--new); }
.pill.bad { background: var(--neg-tint); color: var(--err); }
.pill.warn { background: var(--warn-tint); color: var(--drop); }
.pill.info { background: var(--info-tint); color: var(--back); }
.pill.walmart { background: var(--walmart-tint); color: var(--walmart); }
.pill.amazon { background: var(--amazon-tint); color: var(--amazon); }
.star { background: none; border: 0; cursor: pointer; font-size: 17px; line-height: 1; color: var(--faint); padding: 2px; }
.star.on { color: var(--gold); }
.seller-link { font-weight: 700; text-decoration: none; }
.seller-link:hover { text-decoration: underline; }
.row-off td { opacity: 0.55; }
.empty { padding: 40px 20px; text-align: center; color: var(--muted); }
.empty strong { display: block; color: var(--ink); font-size: 16px; margin-bottom: 6px; }
.more-row { text-align: center; padding: 12px; }

/* status dot */
.sdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--faint); vertical-align: middle; }
.sdot.ok { background: var(--new); }
.sdot.partial { background: var(--gold); }
.sdot.error { background: var(--err); }
.sdot.scanning { background: var(--back); animation: pulse 1s infinite; }

/* ── Menu (Check links) ────────────────────────────── */
.menu { position: relative; display: inline-block; }
.menu summary { list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu-list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 8px 24px rgba(23,33,49,.14); min-width: 180px; padding: 4px; }
.menu-list a, .menu-list button { display: block; width: 100%; text-align: left; padding: 7px 10px; border-radius: 4px; text-decoration: none; background: none; border: 0; cursor: pointer; }
.menu-list a:hover, .menu-list button:hover { background: var(--hover); }

/* ── Live feed: the price-tag strip ────────────────── */
.feed { display: flex; flex-direction: column; gap: 8px; }
.ev {
  display: grid; grid-template-columns: 8px 64px 1fr auto; gap: 0 14px; align-items: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px 10px 0; overflow: hidden;
}
.ev-band { align-self: stretch; margin: -10px 0; background: var(--gone); }
.ev.new .ev-band { background: var(--new); }
.ev.price_drop .ev-band { background: var(--drop); }
.ev.back_in_stock .ev-band { background: var(--back); }
.ev.error .ev-band { background: var(--err); }
.ev.fresh { animation: arrive 2.4s ease-out; }
@keyframes arrive { from { background: var(--pos-tint); } to { background: var(--panel); } }
.ev .thumb { width: 64px; height: 64px; }
.ev-body { min-width: 0; }
.ev-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.ev-type { font-weight: 700; }
.ev.new .ev-type { color: var(--new); }
.ev.price_drop .ev-type { color: var(--drop); }
.ev.back_in_stock .ev-type { color: var(--back); }
.ev.error .ev-type { color: var(--err); }
.ev-title { font-weight: 600; font-size: 15px; margin: 2px 0; display: block; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-title:hover { text-decoration: underline; }
.ev-side { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ev-price { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; line-height: 1; }
.ev-was { font-size: 12px; color: var(--muted); text-decoration: line-through; }
.ev-actions { display: flex; gap: 6px; }
.kw { background: var(--kw-bg); color: var(--lego-ink); border-radius: 4px; padding: 0 6px; font-weight: 700; }
.new-banner { position: sticky; top: 8px; z-index: 5; display: flex; justify-content: center; margin-bottom: 8px; }

/* ── Seller header ─────────────────────────────────── */
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.crumbs a { color: var(--muted); }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 6px 0 16px; }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 12px; cursor: pointer; font-weight: 600; color: var(--muted); margin-bottom: -1px; }
.tabs button[aria-selected=true] { color: var(--ink); border-bottom-color: var(--accent); }
.notice { border-radius: var(--radius); padding: 10px 14px; margin-bottom: 14px; font-size: 13px; }
.notice.warn { background: var(--warn-tint); color: var(--on-warn); }
.notice.bad { background: var(--neg-tint); color: var(--on-bad); }
.notice.info { background: var(--info-tint); color: var(--on-info); }
.notice a { font-weight: 600; }
.tags { display: flex; gap: 4px; flex-wrap: wrap; }
.tag { font-size: 11px; background: var(--chip); border-radius: 4px; padding: 0 6px; color: var(--ink-2); }

/* ── Forms, settings, usage ────────────────────────── */
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.settings { display: flex; flex-direction: column; gap: 16px; max-width: 900px; }
.settings h2, .panel h2 { font-size: 16px; margin: 0 0 4px; font-weight: 700; }
.settings .panel-pad > p { margin: 0 0 14px; color: var(--muted); }
.form-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; font-weight: 500; }
.checks label { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; }
.savebar { position: sticky; bottom: 0; background: var(--paper); padding: 12px 0; display: flex; gap: 10px; align-items: center; }
.bars { display: flex; align-items: flex-end; gap: 3px; height: 120px; padding-top: 8px; }
.bars div { flex: 1; display: flex; flex-direction: column-reverse; min-width: 4px; }
.bars span { display: block; }
.bars .w { background: var(--walmart); }
.bars .a { background: var(--amazon-2); }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); margin-top: 8px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.big-money { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.form-error { background: var(--neg-tint); color: var(--on-bad); padding: 8px 12px; border-radius: 6px; margin: 0 0 12px; }

/* ── Dialog & toasts ───────────────────────────────── */
dialog { border: 0; border-radius: 10px; padding: 0; width: min(560px, calc(100vw - 32px)); box-shadow: 0 24px 60px rgba(23,33,49,.3); }
dialog::backdrop { background: rgba(23,33,49,.45); }
.dlg-head { padding: 18px 20px 0; }
.dlg-head h2 { margin: 0; font-size: 18px; }
.dlg-body { padding: 14px 20px; display: flex; flex-direction: column; gap: 12px; max-height: 70vh; overflow: auto; }
.dlg-foot { padding: 12px 20px 18px; display: flex; justify-content: flex-end; gap: 8px; }
.toasts { position: fixed; bottom: 18px; right: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 100; }
.toast { background: var(--toast); color: #fff; padding: 10px 14px; border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.2); max-width: 380px; }
.toast.bad { background: var(--err); }

/* ── Login ─────────────────────────────────────────── */
.login-body { display: grid; place-items: center; min-height: 100vh; padding: 20px; }
.login-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 28px; width: min(380px, 100%); }
.login-card h1 { font-size: 22px; margin: 22px 0 14px; }
.login-card form { display: flex; flex-direction: column; gap: 12px; }
.login-card input { padding: 9px 11px; }
.code { background: var(--hover); padding: 10px 12px; border-radius: 6px; font-size: 13px; }

/* ── Responsive ────────────────────────────────────── */
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: sticky; top: 0; height: auto; z-index: 30; padding: 12px 14px; }
  .side-toggle { display: inline-block; }
  .nav, .side-foot { display: none; }
  .side.open .nav, .side.open .side-foot { display: flex; }
  .side.open .side-foot { margin-top: 16px; }
  .main { padding: 18px 14px 50px; }
  .grid2, .grid3, .checks { grid-template-columns: 1fr; }
  .ev { grid-template-columns: 6px 48px 1fr; }
  .ev .thumb { width: 48px; height: 48px; }
  .ev-side { grid-column: 3; align-items: flex-start; flex-direction: row; flex-wrap: wrap; margin-top: 6px; }
  .toolbar input[type=search] { width: 100%; }
}

/* ── Fixes: label inheritance ──────────────────────── */
label input, label select, label textarea { font-weight: 400; }
label.check { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; font-size: 13px; }
.side-prefs label.check { font-size: 13px; color: var(--side-ink); }
.stat { flex: 1 1 120px; }
[data-costhint] { margin: 0; }

/* ── LEGO deals ────────────────────────────────────── */
.nav a.mp-lego { box-shadow: inset 3px 0 0 var(--gold); }
.pill.lego { background: var(--lego-tint); color: var(--lego-ink); }
.lg-cell { white-space: nowrap; font-size: 13px; }
.lg-cell a.price { text-decoration: none; }
.lg-cell a.price:hover { text-decoration: underline; }
.lg-pct { font-size: 12px; font-weight: 600; }
.lg-pct.hot { color: var(--err); }
.lg-pct.good { color: var(--new); }
.lg-pct.over { color: var(--muted); }
.lg-hist { font-size: 11px; color: var(--muted); }
.sdot.rate_limited { background: var(--gold); }
.lg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 12px; }
.lg-chip { border: 1px solid var(--line); background: var(--panel); border-radius: 14px; padding: 3px 11px; cursor: pointer; font-weight: 600; font-size: 13px; color: var(--ink-2); }
.lg-chip span { color: var(--muted); font-weight: 500; margin-left: 2px; }
.lg-chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.lg-chip.on span { color: var(--on-accent); opacity: .75; }
.lg-selbar { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--info-tint); border: 1px solid var(--sel-line); color: var(--on-info); border-radius: var(--radius); padding: 8px 12px; margin-bottom: 10px; }
.lg-selbar .linkish { color: var(--info); }
.lg-sel-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.lg-grid table { user-select: none; }
.lg-grid .title-cell, .lg-grid .idchip { user-select: text; }
.lg-grid thead th { position: sticky; top: 0; z-index: 2; }
.lg-sort { cursor: pointer; }
.lg-sort:hover { color: var(--ink); }
.lg-sort.on { color: var(--ink); }
.lg-cb { width: 34px; }
.lg-grid tbody tr { cursor: default; }
.lg-grid tbody tr.lg-selrow td { background: var(--sel); }
.lg-grid tbody tr.lg-cursor td:first-child { box-shadow: inset 3px 0 0 var(--focus); }
.lg-name { font-weight: 600; }
.lg-name.empty { color: var(--muted); font-style: italic; font-weight: 500; }
.lg-ok { color: var(--new); font-weight: 700; }
.lg-mis { font-size: 11px; color: var(--drop); font-weight: 600; }
.lg-mis .linkish { color: var(--back); font-size: 11px; }
.lg-warn-text { color: var(--drop); }
.lg-keys td { padding: 5px 8px; border-bottom: 1px solid var(--line-soft); }
kbd { font: 600 12px var(--font); background: var(--hover); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.lg-selbar[hidden] { display: none; }

/* ── LEGO set table: toolbar, filters, pager ───────── */
.lg-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.lg-search { position: relative; flex: 0 1 460px; min-width: 240px; display: flex; align-items: center; }
.lg-search svg { position: absolute; left: 11px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.lg-search input { width: 100%; padding: 9px 38px 9px 34px; border-radius: 8px; border: 1px solid var(--line); background: var(--input); font-size: 14px; }
.lg-search input:focus { border-color: var(--focus); box-shadow: 0 0 0 3px rgba(37,99,235,.14); outline: none; }
.lg-search kbd { position: absolute; right: 10px; opacity: .7; }
.lg-fwrap { position: relative; }
.lg-fbtn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 8px 12px; font-weight: 600; cursor: pointer; color: var(--ink-2); }
.lg-fbtn svg { width: 16px; height: 16px; }
.lg-fbtn:hover { border-color: var(--line-strong); }
.lg-fbtn.on { border-color: var(--ink); color: var(--ink); }
.lg-caret { font-size: 10px; color: var(--muted); }
.lg-badge { background: var(--accent); color: var(--on-accent); border-radius: 9px; font-size: 11px; padding: 0 6px; line-height: 17px; }
.lg-fpanel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: min(560px, calc(100vw - 40px)); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 14px 40px rgba(23,33,49,.18); animation: lgpop .12s ease-out; }
.lg-fpanel[hidden] { display: none; }
@keyframes lgpop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.lg-fhead { display: flex; align-items: baseline; gap: 10px; padding: 12px 16px 4px; font-size: 13px; }
.lg-fhead .muted { font-size: 12px; }
.lg-fgroups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; padding: 4px 12px 8px; }
.lg-fgroups fieldset { border: 0; margin: 0; padding: 6px 4px; }
.lg-fgroups legend { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 0 6px 4px; }
.lg-fopt { display: flex; flex-direction: row; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-weight: 500; font-size: 13px; }
.lg-fopt:hover { background: var(--hover); }
.lg-fopt input { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; }
.lg-fopt span:first-of-type { flex: 1; }
.lg-fnum { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.lg-ffoot { display: flex; justify-content: space-between; padding: 10px 16px; border-top: 1px solid var(--line-soft); background: var(--panel-2); border-radius: 0 0 10px 10px; }
.lg-subbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 28px; margin-bottom: 10px; }
.lg-total { font-weight: 700; font-size: 13px; }
.lg-active { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; }
.lg-tag { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--panel); border-radius: 14px; padding: 2px 6px 2px 10px; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--ink-2); }
.lg-tag span { color: var(--muted); font-size: 14px; line-height: 1; padding: 0 2px; }
.lg-tag:hover span { color: var(--err); }
.lg-tag-q { cursor: default; background: var(--info-tint); border-color: var(--sel-line); color: var(--on-info); padding-right: 10px; }
.lg-dot { color: var(--muted); }
.lg-clearall { color: var(--back); font-size: 12px; margin-left: 2px; }
.lg-arrow { font-size: 10px; color: var(--faint); margin-left: 2px; }
.lg-sort.on .lg-arrow { color: var(--ink); }
.lg-sort:hover .lg-arrow { color: var(--muted); }
.lg-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 2px; font-size: 13px; }
.lg-pages { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.lg-pages button { min-width: 34px; height: 32px; padding: 0 10px; border: 1px solid var(--line); background: var(--panel); border-radius: 6px; cursor: pointer; font-weight: 600; color: var(--ink-2); }
.lg-pages button:hover:not(:disabled) { border-color: var(--line-strong); }
.lg-pages button.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.lg-pages button:disabled { opacity: .45; cursor: default; }
.lg-gap { color: var(--muted); padding: 0 4px; }
.lg-h3 { font-size: 13px; margin: 0 0 6px; }
.lg-keys code, .hint code { background: var(--hover); border-radius: 4px; padding: 1px 5px; font-size: 12px; }
.lg-keyuse { display: grid; gap: 6px; margin-top: 8px; }
.lg-keyuse > div { display: grid; grid-template-columns: 80px 1fr 110px; align-items: center; gap: 10px; font-size: 12px; }
.lg-meter { background: var(--line-soft); margin: 0; }
@media (max-width: 900px) { .lg-fgroups { grid-template-columns: 1fr; } .lg-search { flex-basis: 100%; } }

/* ── Amazon details panel ──────────────────────────── */
.lg-amz-head { display: flex; flex-direction: column; gap: 4px; }
.lg-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.lg-tile { border: 1px solid var(--line-soft); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.lg-tile span { font-size: 11.5px; color: var(--muted); font-weight: 500; }
.lg-tile b { font-size: 16px; }
.lg-tile small { font-size: 11px; color: var(--muted); }
.lg-good { color: var(--new); }
.lg-bad { color: var(--err); }
.dlg-body > * { flex-shrink: 0; }

/* Profit calculator */
.lg-wfs { font-size: 11px; font-weight: 600; color: var(--info); }
.lg-calc { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 20px; align-items: start; }
.lg-calc-in { display: flex; flex-direction: column; gap: 10px; }
.lg-calc-in fieldset { border: 1px solid var(--line-soft); border-radius: 8px; padding: 8px 12px 12px; margin: 0; }
.lg-calc-in legend { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 0 6px; }
.lg-calc-in .grid2, .lg-calc-in .grid3 { gap: 8px 10px; }
.lg-inline { display: flex; gap: 6px; }
.lg-inline input { flex: 1; }
.lg-calc-out { min-width: 0; position: sticky; top: 0; }
.lg-calc-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.lg-calc-col { border: 1px solid var(--line-soft); border-radius: 8px; padding: 10px 12px; }
.lg-calc-col .lg-h3 { margin: 0 0 6px; }
.lg-ledger { width: 100%; font-size: 12.5px; }
.lg-ledger td { padding: 4px 0; border-bottom: 1px dashed var(--line-soft); }
.lg-ledger td.num { padding-left: 10px; white-space: nowrap; }
.lg-ledger .lg-sum td { border-bottom: 1px solid var(--line); font-weight: 600; }
.lg-ledger .lg-total-row td { border-bottom: 0; font-size: 14px; padding-top: 6px; }
.lg-kpis { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.lg-kpis b { color: var(--ink); }
.lg-verdict { margin: 0 0 10px; padding: 8px 12px; background: var(--pos-tint); border-radius: 6px; font-size: 13px; }
@media (max-width: 760px) { .lg-calc { grid-template-columns: 1fr; } .lg-calc-out { position: static; } }

/* Sources, IDs, catalog */
.lg-src { display: inline-block; font-size: 10.5px; font-weight: 600; padding: 1px 6px; border-radius: 9px; background: var(--chip); color: var(--ink-2); margin-top: 2px; white-space: nowrap; }
.lg-src.miss { background: var(--neg-tint); color: var(--neg); }
.lg-src a { color: inherit; }
.lg-src .linkish { font-size: 12px; padding: 0 0 0 4px; }
.lg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lg-chips .lg-src { font-size: 12px; padding: 3px 8px; }

/* thumbnails */
.lg-namerow { display: flex; gap: 10px; align-items: flex-start; }
.lg-thumb { width: 40px; height: 40px; object-fit: contain; border-radius: 6px; background: #fff; border: 1px solid var(--line, #ddd); flex: none; }
.lg-thumb-empty { display: inline-block; background: var(--panel-2, transparent); }
.lg-thumb.sm { width: 32px; height: 32px; }
.lg-thumb.lg { width: 96px; height: 96px; }
.lg-learn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 10px 0; }
.lg-learn-grid > div { border: 1px solid var(--line, #ddd); border-radius: 8px; padding: 10px; }
.lg-learn-grid b { font-size: 20px; display: block; }

/* ───────── Discord calls (looks like Discord's dark theme) ───────── */
.dc-wrap { background: #313338; border-radius: 8px; border: 1px solid #1e1f22; }
.dc-scroll { max-height: calc(100vh - 300px); min-height: 360px; overflow-y: auto; padding: 8px 0 16px; color: #dbdee1;
  font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.375; }
.dc-scroll a { color: #00a8fc; text-decoration: none; } .dc-scroll a:hover { text-decoration: underline; }
.dc-more, .dc-empty { text-align: center; padding: 10px; color: #949ba4; }
.dc-day { display: flex; align-items: center; margin: 16px 16px 8px; color: #949ba4; font-size: 12px; font-weight: 600; }
.dc-day::before, .dc-day::after { content: ""; flex: 1; height: 1px; background: #3f4147; }
.dc-day span { padding: 0 8px; }
.dc-msg { position: relative; padding: 2px 48px 2px 72px; margin-top: 17px; min-height: 44px; }
.dc-msg.cont { margin-top: 0; min-height: 0; }
.dc-msg:hover { background: #2e3035; }
.dc-msg.has-call { border-left: 2px solid #5865f2; }
.dc-msg.deleted .dc-content { opacity: .55; }
.dc-avatar { position: absolute; left: 16px; top: 4px; width: 40px; height: 40px; border-radius: 50%; }
.dc-hover-time { position: absolute; left: 0; width: 64px; text-align: right; font-size: 11px; color: #949ba4; top: 6px; opacity: 0; }
.dc-msg.cont:hover .dc-hover-time { opacity: 1; }
.dc-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dc-name { font-weight: 500; color: #f2f3f5; }
.dc-bot { background: #5865f2; color: #fff; font-size: 10px; font-weight: 600; padding: 0 4px; border-radius: 3px; }
.dc-time { font-size: 12px; color: #949ba4; }
.dc-chan { font-size: 12px; color: #949ba4; }
.dc-content { white-space: normal; word-wrap: break-word; color: #dbdee1; }
.dc-gap { height: .5em; }
.dc-edited { background: none; border: 0; padding: 0; font-size: 10px; color: #949ba4; cursor: pointer; }
.dc-reply { display: flex; align-items: center; gap: 4px; font-size: 13px; color: #b5bac1; margin: 0 0 4px -2px; position: relative; }
.dc-reply::before { content: ""; position: absolute; left: -38px; top: 8px; width: 33px; height: 12px; border-left: 2px solid #4e5058; border-top: 2px solid #4e5058; border-top-left-radius: 6px; }
.dc-reply img { width: 16px; height: 16px; border-radius: 50%; }
.dc-reply-text { color: #b5bac1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 520px; }
.dc-mention { background: rgba(88,101,242,.3); color: #c9cdfb; border-radius: 3px; padding: 0 2px; font-weight: 500; }
.dc-code { background: #2b2d31; border-radius: 4px; padding: 0 .2em; font-size: 85%; }
.dc-pre { background: #2b2d31; border: 1px solid #1e1f22; border-radius: 4px; padding: 8px; margin: 4px 0; white-space: pre-wrap; font-size: 13px; }
.dc-quote { border-left: 4px solid #4e5058; padding-left: 12px; }
.dc-h1 { font-size: 24px; font-weight: 700; margin: 8px 0 4px; } .dc-h2 { font-size: 20px; font-weight: 700; margin: 8px 0 4px; }
.dc-h3 { font-size: 16px; font-weight: 700; margin: 8px 0 4px; } .dc-sub { font-size: 12px; color: #949ba4; }
.dc-list { margin: 2px 0 2px 20px; padding: 0; }
.dc-spoiler { background: #1e1f22; color: transparent; border-radius: 3px; cursor: pointer; } .dc-spoiler:hover { color: inherit; }
.dc-emoji { width: 22px; height: 22px; vertical-align: -5px; }
.dc-ts { background: rgba(255,255,255,.06); border-radius: 3px; padding: 0 2px; }
.dc-attach img, .dc-attach video { max-width: 400px; max-height: 300px; border-radius: 8px; margin-top: 4px; display: block; }
.dc-file { margin-top: 4px; background: #2b2d31; border: 1px solid #1e1f22; border-radius: 8px; padding: 10px; display: inline-block; }
.dc-embed { display: flex; gap: 16px; max-width: 520px; background: #2b2d31; border-left: 4px solid #1e1f22; border-radius: 4px; padding: 8px 16px 16px 12px; margin-top: 6px; }
.dc-embed-body { flex: 1; min-width: 0; display: grid; gap: 6px; }
.dc-embed-provider, .dc-embed-footer { font-size: 12px; color: #b5bac1; }
.dc-embed-author { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; } .dc-embed-author img { width: 24px; height: 24px; border-radius: 50%; }
.dc-embed-title { font-weight: 600; font-size: 16px; }
.dc-embed-desc { font-size: 14px; color: #dbdee1; }
.dc-embed-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; font-size: 14px; }
.dc-embed-fields .full { grid-column: 1 / -1; } .dc-embed-fname { font-weight: 600; }
.dc-embed-image { max-width: 100%; max-height: 300px; border-radius: 4px; margin-top: 8px; }
.dc-embed-thumb { width: 80px; height: 80px; object-fit: contain; border-radius: 4px; flex: none; }
.dc-calls { margin-top: 8px; display: grid; gap: 6px; }
.dc-call { display: flex; gap: 10px; align-items: flex-start; background: var(--call-bg); color: var(--call-ink); border: 1px solid var(--call-line); border-radius: 8px; padding: 8px 10px; font-size: 13px; line-height: 1.45; max-width: 860px; }
.dc-call a { color: var(--link); }
.dc-call-main { flex: 1; min-width: 0; }
.dc-call-line { margin-top: 2px; }
.dc-call-actions { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; max-width: 230px; }
.dc-calls.light .dc-call { background: var(--panel); }
.cal-row { display: flex; gap: 10px; align-items: baseline; padding: 6px 4px; border-top: 1px solid var(--line-soft); cursor: pointer; flex-wrap: wrap; }
.cal-row:hover { background: var(--hover); }
.cal-date { min-width: 190px; font-variant-numeric: tabular-nums; }
.seller-group summary::-webkit-details-marker { display: none; }
.dc-forward { border-left: 4px solid #4e5058; padding: 2px 0 2px 12px; margin-top: 4px; }
.dc-fwd-head { font-size: 12px; color: #949ba4; font-style: italic; margin-bottom: 2px; }
.dc-sticker { width: 160px; height: 160px; object-fit: contain; display: block; margin-top: 4px; }
a.dc-time { color: #949ba4; text-decoration: none; } a.dc-time:hover { text-decoration: underline; }
.dc-cat-row td { background: var(--panel-2); font-size: 12px; letter-spacing: .02em; }

/* ═════════════ Theme: dark (Discord-style greys, never pure black) ═════════════
   The sidebar toggle stores auto / light / dark; "auto" follows the computer's setting. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #2B2D31;
  --panel: #313338;
  --panel-2: #2E3035;
  --input: #1E1F22;
  --hover: #383A40;
  --row-hover: #35373C;
  --chip: #3A3C42;
  --ink: #DBDEE1;
  --ink-2: #C4C9CE;
  --muted: #949BA4;
  --faint: #6D727A;
  --line: #3F4147;
  --line-soft: #393B40;
  --line-strong: #4E5058;
  --switch-off: #4E5058;
  --accent: #5865F2;
  --accent-2: #4752C4;
  --on-accent: #FFFFFF;
  --link: #00A8FC;
  --toast: #111214;
  --walmart: #4EA1F3;
  --walmart-tint: rgba(78,161,243,.15);
  --amazon: #F0A33A;
  --amazon-2: #F0A33A;
  --amazon-tint: rgba(240,163,58,.15);
  --gold: #F0B232;
  --lego-tint: rgba(240,178,50,.15);
  --lego-ink: #F0C674;
  --kw-bg: rgba(240,178,50,.22);
  --new: #2DC071;
  --drop: #F0A33A;
  --back: #7C8CFF;
  --gone: #949BA4;
  --err: #F2575A;
  --info: #7C8CFF;
  --pos: #3BC77B;
  --neg: #F2575A;
  --pos-tint: rgba(35,165,90,.17);
  --neg-tint: rgba(237,66,69,.17);
  --warn-tint: rgba(240,178,50,.15);
  --info-tint: rgba(88,101,242,.18);
  --on-warn: #F0C674;
  --on-bad: #F7A3A5;
  --on-info: #C9CDFB;
  --sel: rgba(88,101,242,.17);
  --sel-line: rgba(88,101,242,.5);
  --focus: #5865F2;
  --side: #232428;
  --side-ink: #B5BAC1;
  --side-ink-2: #DBDEE1;
  --side-sub: #949BA4;
  --side-hover: #2E3035;
  --side-active: #393C43;
  --side-line: #2E3035;
  --side-line-2: #3F4147;
  --side-card: #2B2D31;
  --call-bg: #2B2D31;
  --call-ink: #DBDEE1;
  --call-line: #3F4147;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.22);
  --shadow: 0 1px 2px rgba(0,0,0,.2), 0 2px 10px rgba(0,0,0,.14);
  --shadow-lg: 0 16px 44px rgba(0,0,0,.5);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
  color-scheme: dark;
  --paper: #2B2D31;
  --panel: #313338;
  --panel-2: #2E3035;
  --input: #1E1F22;
  --hover: #383A40;
  --row-hover: #35373C;
  --chip: #3A3C42;
  --ink: #DBDEE1;
  --ink-2: #C4C9CE;
  --muted: #949BA4;
  --faint: #6D727A;
  --line: #3F4147;
  --line-soft: #393B40;
  --line-strong: #4E5058;
  --switch-off: #4E5058;
  --accent: #5865F2;
  --accent-2: #4752C4;
  --on-accent: #FFFFFF;
  --link: #00A8FC;
  --toast: #111214;
  --walmart: #4EA1F3;
  --walmart-tint: rgba(78,161,243,.15);
  --amazon: #F0A33A;
  --amazon-2: #F0A33A;
  --amazon-tint: rgba(240,163,58,.15);
  --gold: #F0B232;
  --lego-tint: rgba(240,178,50,.15);
  --lego-ink: #F0C674;
  --kw-bg: rgba(240,178,50,.22);
  --new: #2DC071;
  --drop: #F0A33A;
  --back: #7C8CFF;
  --gone: #949BA4;
  --err: #F2575A;
  --info: #7C8CFF;
  --pos: #3BC77B;
  --neg: #F2575A;
  --pos-tint: rgba(35,165,90,.17);
  --neg-tint: rgba(237,66,69,.17);
  --warn-tint: rgba(240,178,50,.15);
  --info-tint: rgba(88,101,242,.18);
  --on-warn: #F0C674;
  --on-bad: #F7A3A5;
  --on-info: #C9CDFB;
  --sel: rgba(88,101,242,.17);
  --sel-line: rgba(88,101,242,.5);
  --focus: #5865F2;
  --side: #232428;
  --side-ink: #B5BAC1;
  --side-ink-2: #DBDEE1;
  --side-sub: #949BA4;
  --side-hover: #2E3035;
  --side-active: #393C43;
  --side-line: #2E3035;
  --side-line-2: #3F4147;
  --side-card: #2B2D31;
  --call-bg: #2B2D31;
  --call-ink: #DBDEE1;
  --call-line: #3F4147;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.22);
  --shadow: 0 1px 2px rgba(0,0,0,.2), 0 2px 10px rgba(0,0,0,.14);
  --shadow-lg: 0 16px 44px rgba(0,0,0,.5);
  }
}

/* ═════════════ Polish ═════════════ */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color .2s ease, color .2s ease; }
::selection { background: var(--sel-line); }
.panel, .stats, .table-wrap, .ev { box-shadow: var(--shadow); border-color: var(--line); }
.stats { overflow: hidden; }
.stat { padding: 14px 18px; }
.stat b { font-size: 22px; font-weight: 750; letter-spacing: -0.01em; }
.stat span { font-size: 12px; }
.page-head h1 { font-size: 27px; }
.btn { transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; border-radius: 7px; }
.btn:hover:not(:disabled) { background: var(--hover); border-color: var(--line-strong); }
.btn-primary:hover:not(:disabled) { background: var(--accent-2); border-color: var(--accent-2); }
.btn-danger:hover:not(:disabled) { background: var(--neg-tint); border-color: var(--neg); }
input[type=text], input[type=number], input[type=password], input[type=search], input[type=date], input:not([type]), select, textarea {
  transition: border-color .15s ease, box-shadow .15s ease; border-radius: 7px; color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px var(--sel); }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; background: var(--panel-2); }
td { transition: background-color .12s ease; }
tbody tr:hover td { background: var(--row-hover); }
.lg-grid tbody tr.lg-selrow td { background: var(--sel); }
.idchip { background: var(--chip); }
.pill { background: var(--chip); }
dialog { background: var(--panel); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
dialog[open] { animation: dlgIn .16s ease-out; }
@keyframes dlgIn { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } }
dialog::backdrop { background: rgba(10,12,16,.5); backdrop-filter: blur(2px); }
.menu-list, .lg-fpanel { box-shadow: var(--shadow-lg); }
.toast { border-radius: 8px; animation: toastIn .18s ease-out; }
@keyframes toastIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.notice { border: 1px solid transparent; }
.notice.warn { border-color: rgba(180,83,9,.18); } .notice.bad { border-color: rgba(185,28,28,.18); } .notice.info { border-color: rgba(29,78,216,.16); }
.thumb, .lg-thumb { background: #fff; }  /* product photos are shot on white */
.lg-tile { background: var(--panel); transition: border-color .15s ease; }
.lg-tile:hover { border-color: var(--line); }

/* Tabs: a sliding underline, and the tab body fades instead of the whole page redrawing */
.tabs { position: relative; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { transition: color .15s ease; white-space: nowrap; border-radius: 6px 6px 0 0; }
.tabs button:hover { color: var(--ink); }
#lgTabs button[aria-selected=true] { border-bottom-color: transparent; }
.tab-ink { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--accent); border-radius: 2px;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), width .28s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.lg-tab { transition: opacity .14s ease; }
.lg-tab.lg-out { opacity: .4; pointer-events: none; }
.lg-tab.lg-in { animation: tabIn .24s ease-out; }
@keyframes tabIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.main.view-in > * { animation: tabIn .2s ease-out; }
.empty.loading { color: var(--faint); }

/* Money: green when it makes money, red when it loses */
.pl-pos, .lg-good { color: var(--pos); }
.pl-neg, .lg-bad { color: var(--neg); }
.lg-pct.good { color: var(--pos); }
.lg-pct.hot { color: var(--pos); background: var(--pos-tint); display: inline-block; padding: 0 6px; border-radius: 6px; font-weight: 700; }
.lg-pct.neg { color: var(--neg); }
.lg-pct.over { color: var(--muted); }
.lg-wfs { color: var(--info); }
.ev-price { color: var(--ink); }

/* Source tags */
.lg-src { background: var(--chip); color: var(--ink-2); }
.lg-src.bt { background: var(--info-tint); color: var(--on-info); }
.lg-src.excl { background: var(--warn-tint); color: var(--on-warn); }
.lg-src.miss { background: var(--neg-tint); color: var(--neg); }

/* Theme switcher in the sidebar */
.theme-switch { display: inline-flex; background: var(--side-card); border: 1px solid var(--side-line-2); border-radius: 8px; padding: 2px; gap: 2px; align-self: flex-start; }
.theme-switch button { background: none; border: 0; color: var(--side-sub); padding: 4px 9px; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600; transition: background-color .15s, color .15s; }
.theme-switch button:hover { color: var(--side-ink-2); }
.theme-switch button[aria-pressed=true] { background: var(--side-active); color: #fff; }

/* Scrollbars that match the theme */
* { scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* Dark-only touches */
:root[data-theme="dark"] .brand-mark { box-shadow: 0 0 0 1px rgba(255,255,255,.06); }
:root[data-theme="dark"] .dc-wrap { border-color: var(--line); }
@media (prefers-reduced-motion: reduce) { .tab-ink, .lg-tab, dialog[open], .toast, .main.view-in > * { transition: none !important; animation: none !important; } }
:root[data-theme="dark"] .thumb, :root[data-theme="dark"] .lg-thumb { background: #ECEDEF; border-color: transparent; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .thumb, :root[data-theme="auto"] .lg-thumb { background: #ECEDEF; border-color: transparent; } }

/* ── Oct 2 build: floating menus, all-sellers line, Keepa chart, columns, sideways bar, similar sets ── */
.menu-list.menu-float { position: fixed; right: auto; top: 0; left: 0; z-index: 1000; overflow: auto; }
.lg-mkt-row { margin-top: 4px; padding-top: 3px; border-top: 1px dashed var(--line); font-size: 11px; color: var(--muted); white-space: nowrap; }
.lg-mkt-row.stale { opacity: .6; }
.lg-mkt a { color: inherit; font-weight: 600; text-decoration: none; }
.lg-mkt a:hover { text-decoration: underline; }
.lg-mkt.under, .lg-mkt.under a { color: var(--drop); }
.lg-mkt-who { font-weight: 400; }
.lg-chartrow > td { background: var(--hover); padding: 10px 12px; }
.lg-kchart { max-width: 940px; }
.lg-kchart-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.lg-kchart-img { display: block; width: 100%; max-width: 900px; height: auto; aspect-ratio: 900 / 320; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; }
.lg-actions-h { text-align: right; }
.lg-actions-h .linkish { font-size: 12px; font-weight: 600; }
.lc-list { display: flex; flex-direction: column; gap: 4px; }
.lc-row { display: grid; grid-template-columns: 28px minmax(140px, 1fr) minmax(0, 120px) auto auto; align-items: center; gap: 6px; }
.lc-row .check { margin: 0; }
.lc-orig { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-grid { scrollbar-width: none; }
.lg-grid::-webkit-scrollbar { display: none; }
.lg-hbar { position: sticky; bottom: 0; z-index: 7; overflow-x: auto; overflow-y: hidden; height: 16px; margin-top: -1px;
  background: var(--paper); border-top: 1px solid var(--line); }
.lg-hbar > div { height: 1px; }
.lg-hbar { scrollbar-width: auto; scrollbar-color: var(--muted) var(--hover); height: 18px; }
.lg-hbar::-webkit-scrollbar { height: 14px; }
.lg-hbar::-webkit-scrollbar-track { background: var(--hover); }
.lg-hbar::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 7px; border: 3px solid var(--hover); }
.lg-sim-wrap { max-height: 330px; overflow: auto; }
.lg-sim-wrap.open { max-height: none; }
.lg-sim-wrap thead th { position: sticky; top: 0; z-index: 1; background: var(--panel); }
.lg-sim-foot { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.lg-sim-wrap td:first-child { min-width: 210px; }
.lg-sim-wrap td:first-child .muted { display: inline; }

/* Data quality: compact Amazon mismatch rows */
.dq-compact td { padding-top: 6px; padding-bottom: 6px; font-size: 13px; }
.dq-compact .dq-cell { max-width: 380px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dq-compact .dq-name { display: inline-block; max-width: 180px; vertical-align: bottom; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dq-compact .dq-title { color: var(--muted); font-size: 12px; }
.lg-tag.on { background: var(--info-tint); border-color: var(--sel-line); color: var(--on-info); }
/* Alerts toolbar + the hidden All detections page */
.lg-feedbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lg-feedbar .seg { flex-wrap: wrap; }
.lg-det-h { font-size: 16px; margin: 0 4px; }
.lg-det-why-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 12px; }
.lg-det-why-chips .lg-tag { padding-right: 10px; }
.lg-det-why-chips .lg-tag b { color: var(--muted); font-weight: 600; }
.lg-det td { padding-top: 6px; padding-bottom: 6px; font-size: 13px; vertical-align: top; }
.lg-det .lg-det-name { display: inline-block; max-width: 200px; vertical-align: bottom; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); }
.lg-det .lg-det-why { max-width: 360px; }
.lg-det .lg-det-why b { font-weight: 600; }
.lg-det .lg-det-why .muted { font-size: 12px; }
.lg-det tr.lg-det-off td { color: var(--ink-2); }
#ldQ { min-width: 200px; }

/* Price & sets on smaller windows.
   Up to 1700px wide the table tightens (padding, headers and cells wrap). On a window under 1400px where the columns still don't fit,
   Layout: Auto turns every set into a card (lego.js measures it): the values sit in a grid that reflows with the
   window, each labelled with its column header, and the header row becomes sort buttons. Layout: Table always
   keeps the table (scroll sideways); Layout: Cards always shows cards. */
@media (max-width: 1700px) {
  .lg-grid th, .lg-grid td { padding-left: 8px; padding-right: 8px; }
  .lg-grid th { white-space: normal; }
  .lg-grid td { font-size: 13px; }
  .lg-grid .lg-thumb { width: 34px; height: 34px; }
  .lg-grid:not(.lg-force-table) .lg-cell, .lg-grid:not(.lg-force-table) .lg-mkt-row { white-space: normal; }
  .lg-grid:not(.lg-force-table) .lg-cell { min-width: 98px; }
  .lg-grid:not(.lg-force-table) td.nowrap:not(.lg-actions) { white-space: normal; min-width: 104px; }
  .lg-grid:not(.lg-force-table) .title-cell { min-width: 170px; }
}
.lg-grid.lg-auto-cards, .lg-grid.lg-force-cards { overflow: visible; background: transparent; border: 0; box-shadow: none; }
.lg-grid.lg-auto-cards table, .lg-grid.lg-auto-cards tbody, .lg-grid.lg-force-cards table, .lg-grid.lg-force-cards tbody { display: block; }
.lg-grid.lg-auto-cards thead, .lg-grid.lg-force-cards thead { display: block; position: sticky; top: 0; z-index: 5; background: var(--paper); padding: 4px 0 8px; }
.lg-grid.lg-auto-cards thead tr, .lg-grid.lg-force-cards thead tr { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lg-grid.lg-auto-cards thead th, .lg-grid.lg-force-cards thead th { position: static; display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 14px; padding: 3px 10px; background: var(--panel); text-transform: none; letter-spacing: 0; font-size: 12px; white-space: nowrap; }
.lg-grid.lg-auto-cards thead th.lg-cb, .lg-grid.lg-force-cards thead th.lg-cb { border-radius: 6px; padding: 3px 6px; }
.lg-grid.lg-auto-cards thead th.lg-actions-h, .lg-grid.lg-force-cards thead th.lg-actions-h { margin-left: auto; }
.lg-grid.lg-auto-cards tbody tr, .lg-grid.lg-force-cards tbody tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px 14px; position: relative; padding: 12px 44px 12px 14px; margin-bottom: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.lg-grid.lg-auto-cards tbody td, .lg-grid.lg-force-cards tbody td { display: block; border: 0; padding: 0; min-width: 0; white-space: normal; background: transparent !important; text-align: left; }
.lg-grid.lg-auto-cards tbody td[data-label]::before, .lg-grid.lg-force-cards tbody td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.lg-grid.lg-auto-cards tbody td.lg-cb, .lg-grid.lg-force-cards tbody td.lg-cb { position: absolute; top: 12px; right: 12px; }
.lg-grid.lg-auto-cards tbody td.title-cell, .lg-grid.lg-force-cards tbody td.title-cell { grid-column: span 2; }
.lg-grid.lg-auto-cards tbody td.title-cell::before, .lg-grid.lg-force-cards tbody td.title-cell::before { display: none; }
.lg-grid.lg-auto-cards tbody td.lg-actions, .lg-grid.lg-force-cards tbody td.lg-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.lg-grid.lg-auto-cards tbody tr.lg-selrow, .lg-grid.lg-force-cards tbody tr.lg-selrow { background: var(--sel); border-color: var(--sel-line); }
.lg-grid.lg-auto-cards tbody tr.lg-cursor, .lg-grid.lg-force-cards tbody tr.lg-cursor { box-shadow: inset 3px 0 0 var(--focus), var(--shadow); }
.lg-grid.lg-auto-cards tbody tr.lg-cursor td:first-child, .lg-grid.lg-force-cards tbody tr.lg-cursor td:first-child { box-shadow: none; }
.lg-grid.lg-auto-cards tbody tr.lg-chartrow, .lg-grid.lg-force-cards tbody tr.lg-chartrow { display: block; padding: 12px; margin-top: -6px; }
.lg-grid.lg-auto-cards tbody tr.lg-chartrow > td:first-child, .lg-grid.lg-force-cards tbody tr.lg-chartrow > td:first-child { display: none; }
.lg-grid.lg-auto-cards tbody tr:not([data-i]):not(.lg-chartrow), .lg-grid.lg-force-cards tbody tr:not([data-i]):not(.lg-chartrow) { display: block; padding: 0; border: 0; box-shadow: none; background: transparent; }
.lg-grid.lg-auto-cards .lg-cell, .lg-grid.lg-auto-cards .nowrap, .lg-grid.lg-auto-cards .lg-mkt-row, .lg-grid.lg-force-cards .lg-cell, .lg-grid.lg-force-cards .nowrap, .lg-grid.lg-force-cards .lg-mkt-row { white-space: normal; }
.lg-grid.lg-auto-cards + .lg-hbar, .lg-grid.lg-force-cards + .lg-hbar { display: none !important; }