:root {
  --bg: #f6f5fb; --panel: #fff; --ink: #1d1b26; --muted: #6b6780; --line: #e6e3f0;
  --accent: #5b4bdb; --accent-ink: #fff; --accent-soft: #efedfc; --side: #211b3d;
  --ok: #127a3a; --ok-soft: #e3f5ea; --warn: #9a5b00; --warn-soft: #fff1d6; --bad: #b4261a; --bad-soft: #fde7e4;
  --radius: 12px; --shadow: 0 1px 2px rgba(20,16,50,.06), 0 4px 16px rgba(20,16,50,.06);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14121c; --panel: #1d1a28; --ink: #ecebf3; --muted: #9a96ad; --line: #2e2a3d;
    --accent: #8576ff; --accent-soft: #2a2550; --side: #0e0c15;
    --ok: #5fd08a; --ok-soft: #173325; --warn: #f2b65a; --warn-soft: #3a2b12; --bad: #ff8a7d; --bad-soft: #3d1c19;
    --shadow: 0 1px 2px rgba(0,0,0,.3);
  }
}
* { box-sizing: border-box; }
/* Text size (Settings › Display): the whole page scales by --z, so text, buttons and boxes stay in proportion.
 * Anything sized to the window divides by it, so it still fits exactly. */
:root { --z: 1.2; }
body { zoom: var(--z); }
body { margin: 0; display: flex; min-height: calc(100vh / var(--z)); background: var(--bg); color: var(--ink);
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
button, input, select, textarea { font: inherit; color: inherit; }
.hidden { display: none !important; }

.side { width: 220px; flex: none; background: var(--side); color: #d9d6ea; display: flex; flex-direction: column; padding: 18px 12px; position: sticky; top: 0; height: calc(100vh / var(--z)); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; color: #fff; padding: 0 8px 18px; }
.brand img { width: 28px; height: 28px; }
.side nav { display: grid; gap: 2px; }
.side nav button { text-align: left; background: none; border: 0; color: inherit; padding: 9px 10px; border-radius: 8px; cursor: pointer; display: flex; justify-content: space-between; }
.side nav button:hover { background: rgba(255,255,255,.06); }
.side nav button.on { background: rgba(255,255,255,.12); color: #fff; font-weight: 600; }
.side nav span { color: #9a96ad; font-size: 12px; }
.side-foot { margin-top: auto; font-size: 12px; color: #7d7896; padding: 0 8px; }

main { flex: 1; min-width: 0; padding: 24px 28px 60px; }
.bar { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.bar h1 { font-size: 22px; margin: 0 auto 0 0; }
.bar input[type=search], .bar select { padding: 8px 10px; border: 1px solid var(--line); background: var(--panel); border-radius: 8px; min-width: 0; }
.bar input[type=search] { width: 260px; }

.btn { border: 1px solid var(--line); background: var(--panel); padding: 8px 14px; border-radius: 8px; cursor: pointer; font-weight: 600; white-space: nowrap; }
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { color: var(--bad); }
.btn.ghost { border-color: transparent; background: none; }
.btn.sm { padding: 5px 10px; font-size: 12px; }
.icon { background: none; border: 0; font-size: 16px; cursor: pointer; color: var(--muted); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.card .ph { aspect-ratio: 1; background: var(--accent-soft) center/cover no-repeat; cursor: pointer; position: relative; }
.card .ph .noimg { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 12px; }
.card .ph .badge { position: absolute; top: 8px; left: 8px; }
.card .body { padding: 10px 12px 12px; display: grid; gap: 6px; flex: 1; }
.card .t { font-weight: 600; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 2.9em; }
.card .meta { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; }
.card .price { font-weight: 700; color: var(--ink); font-size: 15px; }
.card .acts { display: flex; gap: 6px; margin-top: 4px; }
.card .acts .btn { flex: 1; padding: 6px 8px; font-size: 12px; }

.chips { display: flex; gap: 4px; flex-wrap: wrap; }
.chip { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); background: var(--panel); cursor: default; }
.chip.listed { color: #fff; border-color: transparent; }
.chip.pending { border-style: dashed; }
.chip.sold { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.chip.delisted { text-decoration: line-through; }
a.chip { cursor: pointer; text-decoration: none; }
.badge { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; }
.badge.sold { background: var(--ok); color: #fff; }

.empty { text-align: center; padding: 70px 20px; color: var(--muted); background: var(--panel); border: 1px dashed var(--line); border-radius: var(--radius); }
.empty h3 { color: var(--ink); margin: 0 0 6px; }

dialog.sheet { border: 0; padding: 0; border-radius: 16px; width: min(900px, 96vw); max-height: 92vh; background: var(--panel); color: var(--ink); box-shadow: 0 30px 80px rgba(0,0,0,.35); }
dialog.sheet.narrow { width: min(520px, 96vw); }
dialog::backdrop { background: rgba(15,12,30,.5); }
dialog form { display: flex; flex-direction: column; max-height: 92vh; }
dialog header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); }
dialog header h2 { margin: 0; font-size: 17px; }
.sheet-body { padding: 18px 20px; overflow: auto; }
#item-form .sheet-body { display: grid; grid-template-columns: 300px 1fr; gap: 20px; }
dialog footer { display: flex; gap: 8px; align-items: center; padding: 12px 20px; border-top: 1px solid var(--line); }
.grow { flex: 1; }
.note { color: var(--muted); font-size: 12px; }

.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }
.fields label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); position: relative; }
.fields .full { grid-column: 1 / -1; }
.fields input, .fields select, .fields textarea { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); font-weight: 400; color: var(--ink); width: 100%; }
.fields textarea { resize: vertical; }
.fields input:focus, .fields select:focus, .fields textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.count { position: absolute; right: 0; top: 0; font-weight: 400; }

.photo-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.photo-list .p { position: relative; aspect-ratio: 1; border-radius: 8px; background: center/cover; cursor: grab; border: 2px solid transparent; }
.photo-list .p:first-child { grid-column: span 2; grid-row: span 2; }
.photo-list .p:first-child::after { content: "Cover"; position: absolute; left: 6px; bottom: 6px; background: rgba(0,0,0,.6); color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 4px; }
.photo-list .p.over { border-color: var(--accent); }
.photo-list .p button { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0,0,0,.65); color: #fff; cursor: pointer; font-size: 11px; }
.drop { display: grid; place-items: center; text-align: center; border: 2px dashed var(--line); border-radius: 10px; padding: 22px 10px; color: var(--muted); cursor: pointer; }
.drop.over { border-color: var(--accent); background: var(--accent-soft); }

.plist { display: grid; gap: 8px; }
.prow { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.prow:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.prow .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.prow small { display: block; color: var(--muted); font-weight: 400; }
.prow .pv { font-weight: 700; }

.table-wrap { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { font-size: 12px; color: var(--muted); font-weight: 600; background: var(--bg); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td .thumb { width: 36px; height: 36px; border-radius: 6px; background: var(--accent-soft) center/cover; display: inline-block; vertical-align: middle; margin-right: 8px; }
.pos { color: var(--ok); } .neg { color: var(--bad); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.stat .k { color: var(--muted); font-size: 12px; font-weight: 600; }
.stat .v { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 2px; }
.stat .s { color: var(--muted); font-size: 12px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }
.panel h3 { margin: 0 0 12px; font-size: 14px; }
.bars { display: grid; gap: 8px; }
.bars .r { display: grid; grid-template-columns: 150px 1fr 90px; gap: 10px; align-items: center; font-size: 13px; }
.bars .track { background: var(--bg); border-radius: 6px; height: 14px; overflow: hidden; }
.bars .fill { height: 100%; border-radius: 6px; }
.bars .n { text-align: right; font-variant-numeric: tabular-nums; }

.settings { max-width: 720px; display: grid; gap: 16px; }
.settings .panel { display: grid; gap: 12px; margin: 0; }
.settings .panel h3 { margin: 0; }
.settings label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.settings input, .settings textarea, .settings select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font-weight: 400; }
.settings table input { width: 90px; }
.settings .row { display: flex; gap: 8px; flex-wrap: wrap; }
.check { display: flex !important; align-items: center; gap: 8px; color: var(--ink) !important; font-weight: 400 !important; }

.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 10px; font-weight: 600; opacity: 0; pointer-events: none; transition: .2s; z-index: 10; }
.toast.show { opacity: 1; transform: translateX(-50%); }

@media (max-width: 760px) {
  body { flex-direction: column; }
  .side { width: auto; height: auto; position: static; flex-direction: row; align-items: center; padding: 10px 16px; overflow-x: auto; }
  .brand { padding: 0 12px 0 0; }
  .side nav { display: flex; }
  .side-foot { display: none; }
  main { padding: 16px; }
  .bar input[type=search] { width: 100%; }
  #item-form .sheet-body { grid-template-columns: 1fr; }
  .fields { grid-template-columns: 1fr; }
  .bars .r { grid-template-columns: 90px 1fr 70px; }
}

/* eBay category + item specifics */
.sec-h { font-size: 12px; font-weight: 700; color: var(--ink); margin-bottom: 6px; display: flex; gap: 8px; align-items: baseline; }
.row { display: flex; gap: 8px; }
.row input { flex: 1; }
.ebay-cat input, .aspects input, .aspects select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); width: 100%; }
.cat-chosen { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--accent-soft); border-radius: 8px; font-size: 13px; }
.cat-chosen span { flex: 1; }
.cat-results { display: grid; gap: 4px; margin-top: 6px; max-height: 220px; overflow: auto; }
.cat-results button { text-align: left; border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 7px 10px; cursor: pointer; font-size: 12px; color: var(--muted); }
.cat-results button b { color: var(--ink); display: block; font-size: 13px; }
.cat-results button:hover { border-color: var(--accent); }
.cat-results .msg { font-size: 12px; color: var(--muted); padding: 4px 2px; }
.cat-results .msg.bad { color: var(--bad); }
.aspects { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.aspects label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.aspects label.req::after { content: none; }
.aspects .star { color: var(--bad); }
.aspects .more { grid-column: 1 / -1; }
.plat-cats summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.plat-cats .fields { margin-top: 8px; }
.ok-text { color: var(--ok); } .bad-text { color: var(--bad); }
@media (max-width: 760px) { .aspects { grid-template-columns: 1fr; } }

/* ---------- Studio: shared ---------- */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); }
.seg button { border: 0; background: none; padding: 7px 12px; cursor: pointer; font-weight: 600; color: var(--muted); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--accent); color: var(--accent-ink); }
.bar.sm { margin-bottom: 10px; }
.bar.sm h3 { margin: 0 auto 0 0; font-size: 14px; }
.bar select { padding: 7px 10px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.msg-box { border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; background: var(--accent-soft); font-size: 13px; }
.msg-box.warn { background: var(--warn-soft); color: var(--warn); }
.msg-box.bad { background: var(--bad-soft); color: var(--bad); }
.msg-box.ok { background: var(--ok-soft); color: var(--ok); }
.msg-box ul { margin: 6px 0 0; padding-left: 18px; }
.msg-box p { margin: 6px 0 0; color: var(--ink); }
.msg-box summary { cursor: pointer; }
.pill { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.tag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.tag.ok { background: var(--ok-soft); color: var(--ok); }
.tag.bad { background: var(--bad-soft); color: var(--bad); }

/* ---------- Add photos ---------- */
.drop.big { padding: 46px 20px; margin-bottom: 16px; background: var(--panel); font-size: 15px; }
.drop.big small { font-size: 12px; }
.tray { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.tp { aspect-ratio: 1; border-radius: 8px; border: 3px solid transparent; background: var(--accent-soft) center/cover; cursor: pointer; padding: 0; }
.tp.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.groups { display: grid; gap: 8px; }
.grp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
.grp.working { border-color: var(--accent); background: var(--accent-soft); }
.grp.error { border-color: var(--bad); }
.gph { display: flex; gap: 4px; overflow-x: auto; }
.gph span { flex: none; width: 56px; height: 56px; border-radius: 6px; background: center/cover; }
.gmeta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; min-width: 0; }
.sku-in { padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); width: 130px; }

/* ---------- Review ---------- */
.review { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; }
.rv-list { display: grid; gap: 6px; max-height: calc(100vh / var(--z) - 120px); overflow: auto; position: sticky; top: 16px; }
.rv-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; align-items: center; text-align: left; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); cursor: pointer; }
.rv-row.on { border-color: var(--accent); background: var(--accent-soft); }
.rv-row .thumb { width: 44px; height: 44px; border-radius: 6px; background: var(--bg) center/cover; }
.rv-t { min-width: 0; }
.rv-t b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.rv-t small { color: var(--muted); }
.rv-detail { container-type: inline-size; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.rv-head, .rv-foot { display: flex; gap: 8px; align-items: center; padding: 10px 14px; }
.rv-head { border-bottom: 1px solid var(--line); }
.rv-foot { border-top: 1px solid var(--line); position: sticky; bottom: 0; background: var(--panel); border-radius: 0 0 var(--radius) var(--radius); }
.rv-body { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 18px; padding: 14px; }
.rv-photos { display: grid; gap: 8px; align-content: start; }
.rv-main { aspect-ratio: 1; border-radius: 10px; background: var(--bg) center/contain no-repeat; display: grid; place-items: center; }
.rv-tools { display: flex; flex-wrap: wrap; gap: 4px; }
.rv-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.rv-strip button, .rv-strip .add { aspect-ratio: 1; border-radius: 6px; border: 2px solid transparent; background: var(--bg) center/cover; cursor: pointer; padding: 0; }
.rv-strip button.on { border-color: var(--accent); }
.rv-strip .add { display: grid; place-items: center; border: 2px dashed var(--line); color: var(--muted); font-size: 20px; }
.rv-fields .tpl { position: absolute; right: 0; top: -4px; padding: 3px 6px; font-size: 12px; width: auto; }
.spec { margin-top: 14px; }
.spec .sec-h { justify-content: space-between; }
.kv { display: flex; flex-wrap: wrap; gap: 6px; }
.kv span { font-size: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; }
.kv b { color: var(--muted); font-weight: 600; margin-right: 4px; }

/* ---------- Research ---------- */
.research { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.research .panel { margin: 0; }
.verdict { font-size: 34px; font-weight: 900; letter-spacing: .04em; text-align: center; padding: 14px; border-radius: 10px; margin: 14px 0 10px; }
.verdict.buy { background: var(--ok-soft); color: var(--ok); }
.verdict.pass { background: var(--bad-soft); color: var(--bad); }
table.mini td, table.mini th { padding: 5px 4px; }
.research .tray { margin-top: 10px; grid-template-columns: repeat(4, 1fr); }
.scout { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.scout h4 { margin: 0 0 8px; font-size: 15px; }
.range { display: flex; justify-content: space-between; align-items: baseline; background: var(--bg); border-radius: 10px; padding: 10px 14px; }
.range b { font-size: 24px; }
.range span { color: var(--muted); }

/* Stack the queue above the item when the window is narrow, and the photos above the form when the item panel is. */
@media (max-width: 1180px) {
  .review { grid-template-columns: 1fr; }
  .rv-list { position: static; max-height: 230px; }
}
@container (max-width: 640px) {
  .rv-body { grid-template-columns: 1fr; }
  .rv-photos { max-width: 420px; }
}
@media (max-width: 760px) {
  .grp { grid-template-columns: 1fr; }
}

/* ---------- SKU labels / printing ---------- */
.print-area { display: none; }
@media print {
  body.printing { display: block; background: #fff; }
  body.printing > :not(.print-area) { display: none !important; }
  body.printing .print-area { display: block; color: #000; font-family: Arial, Helvetica, sans-serif; }
  .print-area.sheet { display: grid !important; grid-template-columns: repeat(3, 63.5mm); column-gap: 2.5mm; }
  .print-area .lbl { box-sizing: border-box; padding: 1.5mm 2.5mm; overflow: hidden; display: flex; flex-direction: column; gap: .6mm; break-inside: avoid; }
  .print-area.roll .lbl { break-after: page; }
  .lbl .lsku { font-weight: 800; font-size: 11pt; line-height: 1; }
  .lbl .barcode { width: 100%; flex: 1; min-height: 6mm; }
  .lbl .ltitle { font-size: 6.5pt; line-height: 1.15; max-height: 2.3em; overflow: hidden; }
  .lbl .lfoot { display: flex; justify-content: space-between; font-size: 7pt; font-weight: 700; }
}

/* ---------- eBay selling ---------- */
.chip.error { color: var(--bad); border-color: var(--bad); }
.settings ol.steps { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.settings .row label { flex: 1; min-width: 160px; }
.settings .row select { width: 100%; }
#ebay-sell-opts { display: grid; gap: 10px; }

/* ---------- Review tabs ---------- */
.rv-tabs { display: flex; gap: 4px; padding: 0 14px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.rv-tabs button { border: 0; background: none; padding: 11px 12px 9px; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.rv-tabs button.on { color: var(--ink); border-bottom-color: var(--accent); }
.rv-tabs button:hover { color: var(--ink); }
.on-dot { font-size: 10px; font-weight: 800; color: var(--ok); background: var(--ok-soft); border-radius: 999px; padding: 1px 6px; margin-left: 4px; }
.msg-box.later { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 14px 0; }
.sec { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }
.sec h4 { margin: 0 0 10px; font-size: 13px; display: flex; gap: 8px; align-items: baseline; }
.fields .hint, .hint { font-weight: 400; color: var(--muted); font-size: 11px; }
.dimrow { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.dims { display: flex; align-items: center; gap: 6px; }
.dims input { width: 72px !important; }
.dims span { color: var(--muted); font-weight: 400; }
.req-box { background: var(--accent-soft); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; }
.req-h { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 13px; }
.spec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.spec-grid label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); align-content: start; }
.spec-grid input, .spec-grid select, .spec-add input, .comp-bar input, .catrow input, .sec .row input, .sec .row select, .vtable input {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); width: 100%; min-width: 0; }
.spec-grid .star { color: var(--bad); }
.spec-grid .x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 11px; padding: 0 2px; }
.spec-add { display: flex; gap: 6px; margin-top: 12px; }
.chips-add { display: flex; flex-wrap: wrap; gap: 6px; }
.pickchip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.pickchip.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.pickchip input { margin: 0; }
.pstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px; background: var(--line); border-radius: 10px; overflow: hidden; margin-bottom: 12px; }
.pstats > div { background: var(--panel); padding: 10px 12px; display: grid; gap: 2px; }
.pstats span { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.pstats b { font-size: 18px; font-variant-numeric: tabular-nums; }
.pstats small { color: var(--muted); font-size: 11px; }
.comp-bar { flex-wrap: wrap; }
.comp-bar input { flex: 1 1 220px; }
a.btn { text-decoration: none; color: inherit; display: inline-block; }
a.btn.primary { color: var(--accent-ink); }
.comps { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; }
.comp { display: grid; gap: 4px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; color: inherit; }
.comp:hover { border-color: var(--accent); }
.comp .ci { aspect-ratio: 1; border-radius: 6px; background: var(--bg) center/cover; }
.comp .ct { font-size: 12px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.comp .cp { font-weight: 700; }
.comp .cc { font-size: 11px; color: var(--muted); }
.catrow { display: flex; gap: 10px; flex-wrap: wrap; }
.catrow label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.catrow label:first-child { width: 130px; }
.catrow label.grow { flex: 1 1 240px; }
.vtable th, .vtable td { padding: 6px; }
.vtable td input { min-width: 52px; padding: 6px 8px; }
.vtable td.num input { width: 68px; padding: 6px 5px; text-align: right; }
.var-actions { flex-wrap: wrap; margin-top: 10px; }
.var-actions input { flex: 1 1 200px; }
.sec .check { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 400; color: var(--ink); }

/* SKUs are at most 10 characters, so their boxes are only that wide. */
.fields .sku-box input, .vtable .sku-cell, .grp .sku-in { width: calc(10ch + 26px); min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.sec h4 .tpl-inline { padding: 4px 8px; font-size: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font-weight: 600; }
textarea.desc { width: 100%; min-height: 220px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); resize: vertical; font: inherit; line-height: 1.5; }
textarea.desc:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* ---------- Inventory ---------- */
.inv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.inv-head h1 { font-size: 26px; margin: 0; }
.inv-head .note { margin: 4px 0 0; max-width: 360px; }
.inv-tools { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; justify-content: flex-end; }
.inv-tools select { padding: 9px 10px; border: 1px solid var(--line); background: var(--panel); border-radius: 10px; }
.search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--panel); border-radius: 10px; padding: 0 8px 0 12px; min-width: 240px; }
.search span { color: var(--muted); font-size: 16px; }
.search input { border: 0; background: none; padding: 9px 0; flex: 1; min-width: 0; outline: none; }
.search:focus-within { outline: 2px solid var(--accent); outline-offset: -1px; }
.search kbd { font: 11px ui-monospace, Menlo, monospace; color: var(--muted); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; }
.sync { display: grid; justify-items: end; gap: 3px; }
.sync small { color: var(--muted); font-size: 11px; }
.sync-btn { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.inv-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.istat { display: flex; gap: 14px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow); }
.istat .ico { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: 18px; font-weight: 800; }
.istat .k { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.istat .v { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.15; }
.istat .s { font-size: 12px; color: var(--muted); }
.inv-pills { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.pills { display: flex; gap: 6px; flex-wrap: wrap; }
.pill { border: 1px solid var(--line); background: var(--panel); border-radius: 10px; padding: 6px 12px; cursor: pointer; font-weight: 600; font-size: 13px; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; }
.pill span { font-size: 11px; background: var(--bg); border-radius: 999px; padding: 1px 7px; color: var(--muted); }
.pill.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.pill.on span { background: var(--panel); color: var(--accent); }
.pill.warn:not(.on) span { background: var(--warn-soft); color: var(--warn); }
.pill.mkt i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.inv-bulk { display: flex; align-items: center; gap: 8px; background: var(--accent-soft); border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; }
.inv-table th { text-transform: uppercase; letter-spacing: .04em; font-size: 11px; background: var(--panel); }
.inv-table th[data-sort] { cursor: pointer; user-select: none; }
.inv-table th[data-sort]:hover { color: var(--ink); }
.inv-table td { vertical-align: middle; }
.inv-table tr.sel td { background: var(--accent-soft); }
.inv-table tr.is-sold td { opacity: .7; }
.inv-table .cb { width: 34px; padding-right: 0; }
.inv-table td.item { display: flex; gap: 12px; align-items: center; min-width: 280px; max-width: 460px; white-space: normal; }
.ithumb { width: 44px; height: 44px; flex: none; border-radius: 8px; border: 1px solid var(--line); background: var(--bg) center/cover; cursor: pointer; padding: 0; }
.ititle { border: 0; background: none; padding: 0; text-align: left; font-weight: 600; cursor: pointer; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ititle:hover { color: var(--accent); }
.inv-table td.item small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.attn { color: var(--warn); font-weight: 600; }
.inv-table td.sku { font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); }
.inv-table td.price { font-weight: 700; }
.inv-table td.date { font-size: 12px; color: var(--muted); }
.inv-table td.date small { display: block; }
.linkish { border: 0; background: none; padding: 0; cursor: pointer; color: var(--ink); font: inherit; }
.linkish.add { color: var(--muted); text-decoration: underline dotted; }
.cost-in { width: 80px; padding: 4px 6px; border: 1px solid var(--accent); border-radius: 6px; text-align: right; background: var(--bg); }
.mk { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 600; background: var(--panel); color: var(--ink); text-decoration: none; cursor: pointer; white-space: nowrap; }
.mk.listed i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.mk.listed:hover { border-color: var(--ok); }
.mk.pending { color: var(--accent); border-style: dashed; cursor: default; }
.mk.error { color: var(--bad); border-color: var(--bad); }
.mk.sold { color: var(--ok); background: var(--ok-soft); border-color: transparent; cursor: default; }
.mk.none { color: var(--muted); }
details.menu { position: relative; }
details.menu summary { list-style: none; cursor: pointer; padding: 2px 8px; border-radius: 6px; color: var(--muted); font-size: 18px; line-height: 1; }
details.menu summary::-webkit-details-marker { display: none; }
details.menu[open] summary { background: var(--bg); }
details.menu > div { position: absolute; right: 0; top: 100%; z-index: 5; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 4px; display: grid; min-width: 150px; }
details.menu > div button { border: 0; background: none; text-align: left; padding: 8px 10px; border-radius: 6px; cursor: pointer; font: inherit; color: var(--ink); }
details.menu > div button:hover { background: var(--bg); }
details.menu > div button.danger { color: var(--bad); }
@media (max-width: 760px) {
  .inv-tools { justify-content: flex-start; }
  .search { min-width: 0; flex: 1 1 100%; }
}

.inv-table .chips { flex-wrap: nowrap; }
@media (max-width: 1180px) { .inv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .inv-stats { grid-template-columns: 1fr; } }

/* ---------- Settings: side menu, one section at a time ---------- */
#settings-form.settings { max-width: 1040px; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; }
.set-nav { display: grid; gap: 2px; position: sticky; top: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; }
.set-nav button { text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.set-nav button:hover { background: var(--bg); }
.set-nav button.on { background: var(--accent-soft); color: var(--accent); }
.set-nav button.sub { font-weight: 500; padding-left: 14px; }
.set-nav button i { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.set-sub { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 10px 10px 4px; }
.set-body { display: grid; gap: 16px; }
.set-body > .panel { display: none; }
/* The open section: dashboard.js marks its panels with .show, so new sections need no CSS. */
.set-body > .panel.show { display: grid; }
.set-save { position: sticky; bottom: 0; padding: 12px 0; background: linear-gradient(transparent, var(--bg) 30%); }
.mk-list { display: grid; gap: 8px; }
.mk-row { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.mk-row .dot { width: 10px; height: 10px; border-radius: 50%; }
.warn-text { color: var(--warn); }
.settings .row label.grow { flex: 2 1 260px; }
@media (max-width: 860px) {
  #settings-form.settings { grid-template-columns: 1fr; }
  .set-nav { position: static; grid-auto-flow: column; overflow-x: auto; }
  .set-sub { display: none; }
}

/* ---------- Analytics ---------- */
.an-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.an-head h1 { margin: 0; font-size: 26px; }
.an-head .note { margin: 4px 0 0; }
.an-head select { padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.an-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 14px 0 18px; overflow-x: auto; }
.an-tabs button { border: 0; background: none; padding: 10px 14px 9px; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.an-tabs button.on { color: var(--ink); border-bottom-color: var(--accent); }
.an-tabs button span { opacity: .7; }
.an-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.an-bar select { padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.sync-state { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.sync-state i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.sync-state i.ok { background: var(--ok); } .sync-state i.warn { background: var(--warn); } .sync-state i.off { background: var(--bad); }
.astats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.astats.six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.astats.three { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.astats.one { grid-template-columns: 1fr; margin: 0; }
.astat { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.astat.good { border-left-color: var(--ok); } .astat.bad { border-left-color: var(--bad); } .astat.warm { border-left-color: var(--warn); }
.astat .k { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.astat .v { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; margin: 2px 0; }
.astat.good .v { color: var(--ok); } .astat.bad .v { color: var(--bad); } .astat.warm .v { color: var(--warn); }
.astat .s { font-size: 12px; color: var(--muted); }
.an-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.an-two.wide-left { grid-template-columns: 1.4fr 1fr; }
.an-two .panel { margin-bottom: 16px; }
.goals .ph-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.goals .ph-row h3 { margin: 0; }
.goals .row { margin-top: 12px; flex-wrap: wrap; }
.goals .row label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.goals .row input { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); width: 140px; }
.goal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-top: 12px; }
.goal .gk { font-size: 12px; font-weight: 700; color: var(--muted); }
.goal .gv { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.goal .gv span { font-size: 12px; font-weight: 500; color: var(--muted); }
.gbar { position: relative; height: 8px; background: var(--bg); border-radius: 99px; margin: 6px 0 4px; }
.gbar i { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: 99px; }
.gbar b { position: absolute; top: -3px; width: 2px; height: 14px; background: var(--ink); opacity: .5; }
.goal .gs { font-size: 12px; font-weight: 600; }
svg.chart { width: 100%; height: 160px; display: block; }
svg.chart rect { fill: var(--accent); }
svg.chart rect:hover { fill: var(--ok); }
.chart-x { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 4px; }
table.stmt td { padding: 7px 4px; white-space: normal; }
table.stmt tr.h td { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding-top: 14px; border-bottom: 0; }
table.stmt tr.sub td { background: var(--bg); }
table.stmt tr.total td { font-size: 16px; font-weight: 800; border-top: 2px solid var(--ok); border-bottom: 0; }
table.stmt .dot, .an-table .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.an-table th { background: var(--panel); text-transform: uppercase; letter-spacing: .04em; font-size: 11px; }
.an-table td.item { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.an-table td.sku { font: 12px ui-monospace, Menlo, monospace; color: var(--muted); }
.an-table td.date { color: var(--muted); font-size: 12px; }
.an-table tr.click { cursor: pointer; }
.an-table tr.click:hover td { background: var(--accent-soft); }
@media (max-width: 1180px) { .astats.six { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .an-two, .an-two.wide-left, .astats.three { grid-template-columns: 1fr; } .astats.six { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* £ in front of every money box (added by decorateMoney in dashboard.js). */
.money-in { position: relative; display: block; }
td .money-in, .dims .money-in { display: inline-block; }
.money-in::before { content: "£"; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 600; pointer-events: none; }
.money-in > input { padding-left: 24px !important; width: 100%; font-variant-numeric: tabular-nums; }
td .money-in > input { width: auto; }

/* Inventory item editor: the Review panel on its own page. */
.item-host { max-width: 1200px; }
.item-host .rv-head .chips { margin-left: 6px; }

/* ---------- Sync: verify matches ---------- */
.verify-banner { display: flex; align-items: center; gap: 14px; background: var(--warn-soft); border: 1px solid var(--warn); border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; }
.verify-banner .ico { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--warn); color: #fff; display: grid; place-items: center; font-weight: 900; }
.verify-banner > div { flex: 1; }
.match-table td.item { display: flex; gap: 10px; align-items: center; white-space: normal; max-width: 420px; }
.match-table td.item a { color: var(--ink); font-weight: 600; text-decoration: none; }
.match-table td.item a:hover { color: var(--accent); }
.match-table td.item small { display: block; }
.match-table td.arrow { color: var(--muted); font-size: 18px; }
.match-table select { max-width: 360px; width: 100%; padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.match-table tr.sel td { background: var(--accent-soft); }
.match-table .match { display: block; font-size: 11px; color: var(--warn); margin-top: 3px; font-weight: 600; }
.match-table .match.hi { color: var(--ok); }
.match-table .thumb { width: 40px; height: 40px; border-radius: 6px; background: var(--bg) center/cover; flex: none; display: inline-block; }

/* ---------- Inventory: header, search, filter bar ---------- */
.inv-synced-line { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.inv-synced-line .linkish { color: var(--ok); font-weight: 700; margin-left: 6px; }
.inv-search { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; margin-bottom: 14px; }
.inv-search .search { flex: 1 1 320px; }
.inv-search select { padding: 9px 10px; border: 1px solid var(--line); background: var(--panel); border-radius: 10px; color: var(--ink); }
.sortby { position: relative; display: flex; }
.sortby span { position: absolute; top: -7px; left: 10px; padding: 0 4px; font-size: 11px; color: var(--muted); background: var(--bg); line-height: 1.2; }
.sortby select { min-width: 190px; }
.inv-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 12px; }
.inv-card .table-wrap { border: 0; border-radius: 0; }
.inv-card .inv-bulk { margin: 0; border-radius: 0; }
.inv-filters { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--bg); }
.inv-summary { display: flex; gap: 14px; font-size: 14px; color: var(--muted); padding-right: 14px; border-right: 1px solid var(--line); }
.inv-summary span:first-child { color: var(--ok); }
.inv-summary b { color: inherit; font-weight: 700; }
.inv-filters .pill { border-radius: 999px; padding: 5px 12px; }
.flat-select { border: 0; background: none; font: inherit; font-weight: 600; font-size: 13px; color: var(--ink); padding: 6px 4px; cursor: pointer; }
.flat-select.on { color: var(--accent); }
#inv-issue.on { color: var(--warn); }
#inv-layout button { padding: 5px 10px; font-size: 14px; }

/* ---------- Inventory: By marketplace layout ---------- */
.inv-table.mk-grid { min-width: 100%; }
.inv-table.mk-grid th { background: var(--panel); }
.inv-table.mk-grid th.mk-head, .inv-table.mk-grid th.mk-item { white-space: nowrap; font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--ink); font-weight: 600; }
.mk-logo { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; color: #fff; font-size: 9px; font-weight: 800; margin-right: 6px; vertical-align: middle; }
.mk-head .note { font-weight: 400; margin-left: 4px; }
.inv-table.mk-grid td { vertical-align: top; padding: 16px 12px 18px; }
.inv-table.mk-grid td.mk-item { width: 300px; min-width: 240px; white-space: normal; border-right: 1px solid var(--line); }
.mk-item-in { display: flex; gap: 8px; align-items: flex-start; }
.mk-name { flex: 1; display: grid; gap: 4px; min-width: 0; }
.mk-name .ititle { -webkit-line-clamp: 4; font-size: 15px; font-weight: 500; line-height: 1.35; text-align: left; white-space: normal; }
.mk-icons { display: grid; justify-items: center; gap: 6px; flex: none; }
.mk-icons details.menu summary { font-size: 18px; padding: 2px 6px; }
.mk-ico { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 17px; line-height: 1; padding: 2px 4px; border-radius: 6px; }
.mk-ico:hover { color: var(--ink); background: var(--bg); }
.mk-ico.on { color: #E8A317; }
.mk-cell { width: 170px; min-width: 160px; }
.mk-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; white-space: nowrap; min-height: 24px; }
.mk-top b { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 15px; }
.mk-top i { color: var(--muted); font-size: 15px; }
.mk-st { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--bg); color: var(--muted); }
.mk-st.listed { background: var(--ok-soft); color: var(--ok); }
.mk-st.sold { background: var(--accent-soft); color: var(--accent); }
.mk-st.error { background: var(--bad-soft); color: var(--bad); }
.mk-st.pending { background: var(--warn-soft); color: var(--warn); }
.mk-go { color: var(--ok); text-decoration: none; font-weight: 800; font-size: 16px; margin-left: 2px; }
.mk-img { width: 140px; height: 140px; border-radius: 14px; background: var(--bg) center/cover; display: grid; place-items: center; border: 1px solid var(--line); }
.mk-cell .mk-add { display: grid; place-content: center; gap: 2px; width: 140px; height: 140px; border: 2px dashed var(--line); border-radius: 14px; background: none; color: var(--ok); cursor: pointer; font: inherit; font-size: 14px; text-align: center; }
.mk-cell .mk-add b { font-size: 26px; font-weight: 400; line-height: 1; }
.mk-cell .mk-add:hover { border-color: var(--ok); background: var(--ok-soft); }
@media (max-width: 700px) { .inv-summary { border-right: 0; padding-right: 0; } .sortby select { min-width: 0; } }

/* Verify matches: one row per item, listings stacked */
.grp-list { display: grid; gap: 6px; }
.glisting { display: flex; align-items: center; gap: 8px; }
.glisting > div { flex: 1; min-width: 0; }
.glisting a { color: var(--ink); font-weight: 600; text-decoration: none; }
.glisting a:hover { color: var(--accent); }
.glisting small { display: block; }
.glisting .mk-logo { width: 18px; height: 18px; font-size: 8px; border-radius: 5px; margin-right: 4px; }
.glisting .x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 12px; padding: 4px; }
.glisting .x:hover { color: var(--bad); }
.match-table td { white-space: normal; vertical-align: middle; }

/* Quick / full sync buttons, and the per-row search on Verify matches */
.sync-btns { display: flex; gap: 6px; }
.match-table .msearch { width: 100%; max-width: 360px; margin-bottom: 6px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); font-size: 12px; }

/* Settings › Your data › Start again */
.danger-zone { border-color: var(--bad); }
.danger-zone h3 { color: var(--bad); }
.btn.danger { border-color: var(--bad); }

/* Page controls under Inventory and Verify matches */
.pager { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 4px; }
.pager select { padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); margin-left: 4px; }

/* Verify matches: SKU and "Details from" under each row's choice */
.match-table .mextra { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.match-table .mextra select { width: auto; max-width: 220px; padding: 4px 6px; }
.match-table .mextra .sku-in { padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.sku-tag { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 5px; padding: 0 5px; }

/* Settings › Warnings */
.warn-row { border-top: 1px solid var(--line); padding-top: 10px; display: grid; gap: 4px; }
.warn-row dl { display: grid; grid-template-columns: 44px 1fr; gap: 2px 10px; margin: 0 0 0 26px; font-size: 12px; }
.warn-row dt { color: var(--muted); font-weight: 700; }
.warn-row dd { margin: 0; color: var(--ink); }

/* eBay: post now or schedule */
.ebay-when { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 8px; font-size: 13px; }
.ebay-when label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.ebay-when input[type=datetime-local] { font: inherit; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card, #fff); color: inherit; }
.ebay-when input[type=datetime-local]:disabled { opacity: .45; }
.mk-st.scheduled, .chip.scheduled { border-style: dashed; }
.mk-on { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12px; }
.mk-on a, .mk-on span { display: inline-flex; align-items: center; white-space: nowrap; }
.mk-on .mk-logo { width: 18px; height: 18px; font-size: 8px; margin-right: 4px; }

/* Inventory: drag a marketplace box onto another row */
.mk-cell[draggable="true"] { cursor: grab; }
.mk-cell.dragging { opacity: .45; }
.inv-table.is-dragging td.drop-on { outline: 2px dashed var(--accent); outline-offset: -4px; background: var(--accent-soft); }
.sync-report { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--ok); border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; font-size: 13px; }
.sync-report.has-problems { border-left-color: var(--bad); }
.sync-report > div { display: grid; gap: 3px; }
.mk-acts { display: flex; gap: 6px; margin-top: 8px; }
.mk-acts .btn.sm { padding: 4px 10px; font-size: 12px; }

/* Inventory: keep the filter bar and the column headings on screen while scrolling.
 * The filter bar pins to the top of the window; the table scrolls in its own box below it with its headings pinned. */
.inv-card { overflow: visible; }
.inv-filters { position: sticky; top: 0; z-index: 6; border-radius: var(--radius) var(--radius) 0 0; }
.inv-card .table-wrap { max-height: calc(100vh / var(--z) - var(--filters-h, 58px) - 8px); overflow: auto; border-radius: 0 0 var(--radius) var(--radius); }
.inv-table thead th { position: sticky; top: 0; z-index: 4; background: var(--panel); box-shadow: inset 0 -1px 0 var(--line); }
.inv-table.mk-grid thead th.cb, .inv-table.mk-grid thead th.mk-item { z-index: 5; }
.mk-row.off { opacity: .6; }
.mk-row .check { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.prow.blocked { opacity: .85; background: var(--bad-soft); }

/* Inventory: page tabs across the top (Inventory · Drafts) */
.inv-top { align-items: flex-end; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.inv-tabs { display: flex; gap: 22px; }
.inv-tabs button { border: 0; background: none; padding: 10px 2px 12px; font: inherit; font-size: 16px; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 8px; }
.inv-tabs button:hover { color: var(--ink); }
.inv-tabs button.on { color: var(--ok); border-bottom-color: var(--ok); }
.inv-tabs button small { font-size: 11px; font-weight: 700; background: var(--bg); color: var(--muted); border-radius: 999px; padding: 1px 7px; }
.inv-tabs button.on small { background: var(--ok-soft); color: var(--ok); }
.inv-top .inv-tools { padding-bottom: 8px; }
.inv-synced-line { margin: 0 0 12px; }

/* ---------- Item page (Nifty-style): step sidebar + one long form ---------- */
#view-item .item-host { max-width: none; }
.lf { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 28px; align-items: start; }
.lf-side { position: sticky; top: 12px; display: grid; gap: 18px; font-size: 13px; border-right: 1px solid var(--line); padding-right: 16px; min-height: calc(100vh / var(--z) - 140px); align-content: start; }
.lf-back { color: var(--ink); font-size: 13px; text-align: left; }
.lf-step { display: grid; gap: 4px; }
.lf-step > small { font-size: 10px; letter-spacing: .08em; color: var(--muted); }
.lf-step > p { margin: 0 0 6px; color: var(--muted); font-size: 12px; }
.lf-chk, .lf-mk { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); text-decoration: none; margin-bottom: -1px; }
.lf-chk:hover, .lf-mk:hover { border-color: var(--accent); }
.lf-chk i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px dashed var(--muted); display: grid; place-items: center; font-size: 9px; font-style: normal; flex: none; }
.lf-chk.done i { border: 0; background: var(--ok); color: #fff; }
.lf-mk small { margin-left: auto; color: var(--muted); font-size: 11px; }
.lf-mk.done small { color: var(--ok); } .lf-mk.warn small { color: var(--bad); }
.lf-mk .mk-logo { width: 18px; height: 18px; font-size: 8px; margin: 0; }
.lf-side-foot { padding-top: 8px; }
.lf-side-foot .btn { width: 100%; }
.lf-main { max-width: 1100px; display: grid; gap: 22px; padding-bottom: 90px; }
.lf-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lf-title h1 { margin: 0 8px 0 0; font-size: 24px; }
.lf-block h3, .lf-h2 { margin: 0 0 10px; font-size: 15px; font-weight: 600; }
.lf-h2 { font-size: 17px; margin: 8px 0 0; }
.lf-targets { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel); }
.lf-target { display: flex; align-items: center; gap: 8px; border: 0; border-right: 1px solid var(--line); background: none; padding: 10px 12px; font: inherit; font-size: 13px; color: var(--muted); cursor: pointer; text-align: left; }
.lf-target i { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 700; }
.lf-target.on { color: var(--ink); background: var(--ok-soft); }
.lf-target.on i { color: var(--ok); }
.lf-target:disabled { cursor: default; }
.lf-target .mk-logo { width: 20px; height: 20px; margin: 0; font-size: 8px; }
.lf-card { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 16px; display: grid; gap: 12px; }
.lf-photos { display: flex; flex-wrap: wrap; gap: 10px; }
.lf-ph { width: 110px; height: 110px; border-radius: 10px; border: 2px solid transparent; background: var(--bg) center/cover; cursor: pointer; position: relative; padding: 0; }
.lf-ph.on { border-color: var(--accent); }
.lf-ph span { position: absolute; left: 6px; bottom: 6px; background: rgba(0,0,0,.6); color: #fff; font-size: 10px; padding: 1px 6px; border-radius: 6px; }
.lf-drop { flex: 1 1 100%; min-height: 130px; border: 2px dashed var(--line); border-radius: 10px; display: grid; place-content: center; justify-items: center; gap: 4px; cursor: pointer; color: var(--muted); font-size: 13px; text-align: center; }
.lf-drop.small { flex: 0 0 110px; min-height: 110px; height: 110px; font-size: 11px; }
.lf-drop.small small { display: none; }
.lf-drop b { font-size: 22px; color: var(--accent); }
.lf-drop u { color: var(--accent); }
.lf-drop:hover { border-color: var(--accent); }
.lf-ai { display: flex; align-items: center; gap: 12px; background: var(--accent-soft); border-radius: 10px; padding: 12px 16px; }
.lf-ai .ico { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; flex: none; }
.lf-ai div { display: grid; } .lf-ai small { color: var(--muted); font-size: 12px; }
.lf-sec { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden; scroll-margin-top: 12px; }
.lf-sec > summary { list-style: none; cursor: pointer; padding: 12px 16px; background: var(--bg); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ok); display: flex; align-items: center; gap: 8px; }
.lf-sec > summary::before { content: '›'; transform: rotate(90deg); display: inline-block; transition: transform .15s; font-size: 14px; }
.lf-sec:not([open]) > summary::before { transform: none; }
.lf-sec > summary::-webkit-details-marker { display: none; }
.lf-sec > summary .note { text-transform: none; letter-spacing: 0; font-weight: 400; }
.lf-msec > summary { text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ink); }
.lf-msec > summary .mk-logo { width: 20px; height: 20px; font-size: 8px; margin: 0; }
.lf-msec > summary small { margin-left: auto; color: var(--muted); font-weight: 400; font-size: 12px; }
.lf-sec-body { padding: 16px 20px 20px; display: grid; gap: 14px; }
.lf-sec-body label { display: grid; gap: 5px; font-size: 13px; font-weight: 600; position: relative; }
.lf-sec-body label .hint { font-weight: 400; color: var(--muted); font-size: 11px; display: flex; gap: 8px; align-items: center; }
.lf-sec-body input, .lf-sec-body select, .lf-sec-body textarea { font: inherit; font-weight: 400; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); }
.lf-sec-body .count { position: absolute; right: 10px; bottom: 8px; font-size: 11px; color: var(--muted); font-weight: 400; }
.lf-sec-body label:has(textarea) .count { bottom: 10px; }
.lf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.lf-col { display: grid; gap: 14px; align-content: start; }
.lf-desc textarea { min-height: 220px; resize: vertical; }
.lf-cat .lbl, .lf-condrow .lbl, .lf-row2 .lbl { font-size: 13px; font-weight: 600; display: block; margin-bottom: 6px; }
.lf-conds { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.lf-cond { display: flex !important; grid-auto-flow: column; align-items: center; gap: 8px; padding: 10px; border-right: 1px solid var(--line); cursor: pointer; font-weight: 600 !important; }
.lf-cond:last-child { border-right: 0; }
.lf-cond input { position: absolute; opacity: 0; pointer-events: none; }
.lf-cond b { width: 22px; height: 22px; border-radius: 6px; background: var(--bg); display: grid; place-items: center; font-size: 11px; flex: none; }
.lf-cond span { display: grid; font-size: 12px; } .lf-cond small { font-weight: 400; color: var(--muted); font-size: 11px; }
.lf-cond.on, .lf-cond:has(input:checked) { background: var(--ok-soft); } .lf-cond.on b, .lf-cond:has(input:checked) b { background: var(--ok); color: #fff; }
.lf-row4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.lf-row4 .span2 { grid-column: span 2; } .lf-row4 .span3 { grid-column: span 3; }
.lf-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lf-foot { position: sticky; bottom: 0; z-index: 7; margin-top: -70px; }
@media (max-width: 1100px) { .lf-conds { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lf-row4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) { .lf { grid-template-columns: 1fr; } .lf-side { position: static; min-height: 0; border-right: 0; padding-right: 0; } .lf-grid { grid-template-columns: 1fr; } }

/* Settings › Marketplaces: one card per marketplace */
.mk-intro-h { display: flex; gap: 12px; align-items: center; }
.mk-intro-h h3 { margin: 0; } .mk-intro-h p { margin: 2px 0 0; }
.mk-intro-h .ico { width: 40px; height: 40px; border-radius: 10px; background: var(--bg); display: grid; place-items: center; font-size: 18px; }
.mk-banner { border: 1px solid var(--ok); background: var(--ok-soft); border-radius: 10px; padding: 12px 14px; font-size: 13px; margin: 14px 0; }
.mk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.mk-card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); }
.mk-card.primary { border-color: var(--ok); box-shadow: 0 0 0 1px var(--ok); }
.mk-card.off { opacity: .6; }
.mk-card-h { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--bg); border-bottom: 1px solid var(--line); }
.mk-card-h .mk-logo { margin: 0; width: 24px; height: 24px; }
.mk-card-b { padding: 14px; display: grid; gap: 10px; justify-items: start; font-size: 13px; min-height: 96px; }
.switch { position: relative; display: inline-block; width: 36px; height: 20px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; background: var(--line); border-radius: 999px; transition: background .15s; cursor: pointer; }
.switch span::before { content: ''; position: absolute; width: 16px; height: 16px; left: 2px; top: 2px; background: #fff; border-radius: 50%; transition: transform .15s; }
.switch input:checked + span { background: var(--ok); }
.switch input:checked + span::before { transform: translateX(16px); }
.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Inventory labels */
.lbl-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--lc) 16%, transparent); color: color-mix(in srgb, var(--lc) 75%, var(--ink)); margin: 2px 4px 0 0; }
.lbl-chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--lc); }
.lbl-row { display: grid; grid-template-columns: 40px minmax(140px, 1fr) minmax(160px, 2fr) auto auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.lbl-row input[type=color] { width: 40px; height: 34px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.lbl-pick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lbl-tog { border: 1px dashed var(--line); background: none; border-radius: 999px; padding: 2px 4px 2px 2px; cursor: pointer; opacity: .55; }
.lbl-tog.on { opacity: 1; border-style: solid; border-color: var(--ok); }
.inv-note { display: block; color: var(--muted); font-style: italic; }
.mk-ico.on-note { color: var(--accent); }
.bulk-lbl { position: relative; }
.bulk-lbl > summary { list-style: none; cursor: pointer; }
.bulk-lbl > summary::-webkit-details-marker { display: none; }
.bulk-lbl-pop { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 12px; display: grid; gap: 6px; min-width: 240px; }
.bulk-lbl-pop .note { margin: 0 0 4px; }

/* Bulk action bar: floats at the bottom of the screen while rows are ticked */
.inv-card .inv-bulk, .inv-bulk { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 30; margin: 0;
  background: #1f2430; color: #fff; border-radius: 14px; padding: 12px 16px; box-shadow: 0 10px 30px rgba(0,0,0,.25);
  display: grid; justify-items: center; gap: 10px; width: max-content; max-width: calc(100vw - 40px); }
.inv-bulk.hidden { display: none; }
.bulk-top { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.bulk-x { width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(255,255,255,.18); color: #fff; cursor: pointer; font-size: 11px; }
.bulk-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.inv-bulk .btn.sm { border-color: rgba(255,255,255,.25); background: transparent; color: #fff; }
.inv-bulk .btn.sm.ok { background: var(--ok); border-color: var(--ok); }
.inv-bulk .btn.sm.danger { color: #ff9b9b; border-color: rgba(255,155,155,.5); }
.inv-bulk .bulk-lbl-pop { top: auto; bottom: calc(100% + 8px); color: var(--ink); }
.bulk-edit { display: grid; gap: 10px; }
.bulk-row { display: grid; grid-template-columns: 40px 130px 1fr; align-items: center; gap: 10px; }
.bulk-row .lbl { font-weight: 600; font-size: 13px; }
.bulk-row input, .bulk-row select { padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; font: inherit; background: var(--panel); color: var(--ink); }
.bulk-row :disabled { opacity: .45; }
.bulk-preview { display: grid; gap: 4px; margin: 12px 0; font-size: 13px; }
.bulk-preview > div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--line); padding: 3px 0; }

/* Sale detection */
#view-inventory:not(.on-sales) .inv-sales { display: none; }
#view-inventory.on-sales .inv-card, #view-inventory.on-sales .inv-search, #view-inventory.on-sales #inv-pager, #view-inventory.on-sales #inv-verify { display: none; }
.inv-tabs button.attn small { background: var(--bad-soft); color: var(--bad); }
.sales-table td { vertical-align: middle; }
.sales-table .nowrap { white-space: nowrap; }
.sale-item { display: flex; gap: 10px; align-items: center; }
.sale-item .thumb { width: 40px; height: 40px; border-radius: 8px; background: var(--bg) center/cover; flex: none; }
.sales-table .mk-logo { width: 18px; height: 18px; font-size: 8px; margin-right: 5px; }
.outcomes { display: flex; flex-wrap: wrap; gap: 6px; }
.oc { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 999px; padding: 3px 8px 3px 4px; font-size: 12px; }
.oc.ok { border-color: var(--ok); color: var(--ok); }
.oc.bad { border-color: var(--bad); color: var(--bad); }
.oc.todo { border-color: var(--warn); color: var(--warn); }
.oc .btn.sm { padding: 2px 8px; font-size: 11px; }
.ad-rows { display: grid; gap: 8px; }
.ad-row { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.ad-row .mk-logo { width: 22px; height: 22px; margin: 0; }
.ad-act { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }

/* Price check (item page) */
.pc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.pc-stat { padding: 10px 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: -1px; display: grid; gap: 2px; min-width: 0; }
.pc-stat:last-child { border-right: 0; }
.pc-stat span { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.pc-stat b { font-size: 18px; font-variant-numeric: tabular-nums; }
.pc-stat small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-stat.sold { background: var(--ok-soft); } .pc-stat.neg b { color: var(--bad); } .pc-stat.pos b { color: var(--ok); }
.pc-use { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.pc-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pc-bar #comp-q { flex: 1 1 260px; }
.pc-tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--line); }
.pc-tabs button { border: 0; background: none; padding: 8px 2px; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pc-tabs button.on { color: var(--ok); border-bottom-color: var(--ok); }
.pc-tabs small { font-size: 11px; background: var(--bg); border-radius: 999px; padding: 1px 7px; margin-left: 4px; }
.pc-list { display: grid; }
.pc-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.pc-row:hover { background: var(--bg); }
.pc-img { width: 56px; height: 56px; border-radius: 8px; background: var(--bg) center/cover; }
.pc-t { display: grid; gap: 2px; font-size: 13px; min-width: 0; }
.pc-t small { color: var(--muted); font-size: 11px; }
.pc-p { font-size: 15px; font-variant-numeric: tabular-nums; }
.pc-pager { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-top: 4px; }
.pc-pager .btn.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink, #fff); }
@media (max-width: 900px) { .pc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pc-stat { border-bottom: 1px solid var(--line); } }

/* SKU stands out */
.lf-sku input { font-family: ui-monospace, Menlo, monospace; font-size: 17px !important; font-weight: 700 !important; letter-spacing: .06em;
  border: 2px solid var(--accent) !important; background: var(--accent-soft) !important; color: var(--ink); }
.lf-sku input:focus { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.sku-badge { font-family: ui-monospace, Menlo, monospace; font-weight: 700; font-size: 14px; letter-spacing: .06em; background: var(--accent); color: #fff; border-radius: 8px; padding: 4px 10px; }
.mk-name .note:first-of-type { font-family: ui-monospace, Menlo, monospace; }
.pager { gap: 6px; }
.pager .btn.sm { min-width: 34px; }
.pager .btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.lf-upd { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; margin: 0 4px; }
.lf-upd .check { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
.lf-upd .mk-logo { width: 18px; height: 18px; font-size: 8px; margin: 0; }
.es-addloc { border: 1px dashed var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 8px; }
.es-addloc .row { align-items: flex-end; }

/* Item page: framed step list, a header that stays at the top, and room around the page */
.lf { padding-top: 4px; }
.lf-side { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; border-right: 1px solid var(--line); min-height: 0; top: 76px; }
.lf-title { position: sticky; top: 0; z-index: 8; background: var(--bg); padding: 12px 0 12px; margin: -4px 0 0; border-bottom: 1px solid var(--line);
  display: flex; align-items: flex-start; gap: 16px; }
.lf-title-main { flex: 1; min-width: 0; display: grid; gap: 4px; }
.lf-crumb { color: var(--muted); font-size: 12px; }
.lf-title h1 { font-size: 22px; margin: 0; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lf-title-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lf-title-acts { display: flex; align-items: center; gap: 6px; flex: none; padding-top: 18px; }
#view-item { padding-top: 0; }
.row-lbl > summary { list-style: none; }
.row-lbl > summary::-webkit-details-marker { display: none; }
.row-lbl > div { min-width: 200px; display: grid; gap: 4px; }
.row-lbl > div button { text-align: left; }

/* Item page layout v2: title across the top, a wider step panel, no card frame around the page */
#view-item .rv-detail { background: none; border: 0; border-radius: 0; }
.lf { grid-template-columns: 290px minmax(0, 1fr); column-gap: 32px; row-gap: 18px; padding-top: 0; }
.lf-title { grid-column: 1 / -1; position: static; margin: 0; padding: 4px 0 16px; background: none; border-bottom: 1px solid var(--line); align-items: center; }
.lf-title h1 { font-size: 26px; white-space: normal; }
.lf-crumb { display: none; }
.lf-title-acts { padding-top: 0; }
.lf-side { top: 16px; padding: 18px 16px; gap: 20px; font-size: 14px; }
.lf-side .lf-step > b { font-size: 15px; }
.lf-side .lf-step > p { font-size: 13px; }
.lf-chk, .lf-mk { padding: 10px 12px; font-size: 14px; }
.lf-mk .mk-logo { width: 22px; height: 22px; font-size: 9px; }
.lf-main { max-width: 1240px; }
@media (max-width: 1100px) { .lf { grid-template-columns: 240px minmax(0, 1fr); column-gap: 20px; } }
.lf-targets { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.occ-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.occ { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 13px; cursor: pointer; color: var(--ink); }
.occ.on { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); font-weight: 600; }
.occ:disabled { opacity: .4; cursor: default; }

/* Analytics › Orders */
.orders-bar { align-items: flex-end; gap: 10px; }
.orders-bar .search { flex: 1 1 260px; }
.orders-bar select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); min-width: 150px; }
.orders-sum { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; font-size: 13px; color: var(--muted); margin: 0 0 10px; }
.orders-sum b { color: var(--ink); } .orders-sum .pos b { color: var(--ok); } .orders-sum .neg b { color: var(--bad); }
.orders-sum .linkish { color: var(--accent); font-weight: 600; margin-left: auto; }
.orders-table { font-size: 13px; }
.orders-table th, .orders-table td { padding: 10px 10px; vertical-align: middle; }
.orders-table tr.ord-groups th { font-size: 11px; font-weight: 700; text-transform: none; letter-spacing: 0; color: #fff; text-align: center; padding: 5px 8px; border: 0; }
.orders-table th.g-top { background: color-mix(in srgb, #0f766e 10%, var(--panel)); } .orders-table tr.ord-groups th.g-top { background: #0f766e; }
.orders-table th.g-fee { background: color-mix(in srgb, #6d5df6 10%, var(--panel)); } .orders-table tr.ord-groups th.g-fee { background: #6d5df6; }
.orders-table th.g-out { background: color-mix(in srgb, #c0392b 9%, var(--panel)); } .orders-table tr.ord-groups th.g-out { background: #c0392b; }
.orders-table td.g-top { background: color-mix(in srgb, #0f766e 4%, transparent); }
.orders-table td.g-fee { background: color-mix(in srgb, #6d5df6 5%, transparent); }
.orders-table td.g-out { background: color-mix(in srgb, #c0392b 4%, transparent); }
.orders-table tbody tr { cursor: pointer; }
.orders-table tbody tr:hover td { background-color: var(--bg); }
.orders-table tr.sel td { background-color: var(--accent-soft); }
.ord-title { min-width: 240px; }
.ord-title small { display: block; color: var(--muted); margin-top: 2px; white-space: normal; }
.ord-open { color: var(--ok); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.ord-title .mk-logo { width: 20px; height: 20px; margin: 0; font-size: 8px; }
.mk-logo.inperson { background: var(--bg); font-size: 11px; }
.ost { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); font-weight: 800; }
.ost.refunded, .ost.part-refunded { background: var(--warn-soft); color: var(--warn); }
.orders-table .zero { color: var(--muted); opacity: .6; }
.imp-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; display: grid; gap: 8px; }
.imp-card h3 { margin: 0; }
.imp-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 12px; margin-top: 8px; }
.imp-map label { display: grid; gap: 3px; font-size: 12px; font-weight: 600; }
.imp-map select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); }
.orders-table th, .orders-table td { padding: 9px 8px; }
.orders-table thead tr:not(.ord-groups) th { white-space: normal; line-height: 1.25; min-width: 64px; }
/* Orders: costs outside the marketplace typed straight into the table */
.orders-table td.oc-cell { padding: 4px 6px; cursor: text; }
.oc-in { display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; border: 1px solid transparent; border-radius: 6px; padding: 2px 4px; width: 104px; }
.oc-in span { color: var(--muted); font-size: 12px; }
.oc-in input { width: 72px; border: 0; background: transparent; text-align: right; font: inherit; padding: 3px 0; color: var(--ink); -moz-appearance: textfield; }
.oc-in input::-webkit-outer-spin-button, .oc-in input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.oc-in input::placeholder { color: var(--muted); opacity: .6; }
.orders-table tr:hover .oc-in, .oc-in:focus-within { border-color: var(--line); background: var(--panel); }
.oc-in:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent); }

/* Marketplace icons */
.mk-logo.mk-icon { background: none !important; padding: 0; overflow: hidden; }
.mk-logo.mk-icon svg { width: 100%; height: 100%; display: block; }
.chip.icon { width: 24px; height: 24px; padding: 0; border: 0; background: none !important; display: inline-grid; place-items: center; border-radius: 6px; position: relative; }
.chip.icon svg { width: 22px; height: 22px; display: block; }
.chip.icon:not(.listed) svg { filter: grayscale(1); opacity: .35; }   /* not live there */
.chip.icon.pending svg, .chip.icon.scheduled svg { filter: grayscale(.4); opacity: .7; }
.chip.icon.sold svg { filter: none; opacity: 1; }
.chip.icon.sold::after { content: '✓'; position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 50%; background: var(--ok); color: #fff; font-size: 8px; display: grid; place-items: center; }
.chip.icon.error::after { content: '!'; position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 50%; background: var(--bad); color: #fff; font-size: 9px; font-weight: 800; display: grid; place-items: center; }
.oc-in input { padding-left: 0 !important; }
.oc-in { width: auto; gap: 1px; }
.oc-in input { width: 58px; text-align: left; }

/* Money boxes: the £ sits level with the figure (the box was a line taller than its input, pushing the £ down) */
.money-in { line-height: 0; }
.money-in > input { display: block; line-height: normal; }
.money-in::before { line-height: 1; top: 50%; transform: translateY(-50%); font-size: 14px; }
.lf-ph[draggable="true"] { cursor: grab; }
.lf-ph.dragging { opacity: .4; }
.lf-ph.drop-before { box-shadow: -4px 0 0 var(--accent); }
[data-photo-drop].files-over { outline: 2px dashed var(--accent); outline-offset: 6px; border-radius: 10px; background: var(--accent-soft); }
.fin-banner { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.fin-banner > div { flex: 1; }

/* Sidebar: a quiet "Retired" section at the bottom for features no longer in everyday use */
.side-retired { margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); display: grid; gap: 2px; }
.side-retired .side-sub { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; opacity: .5; padding: 0 12px 4px; }
.side-retired button { opacity: .7; }
.side-retired + .side-foot { margin-top: 10px; }
.side-retired button { text-align: left; background: none; border: 0; color: inherit; padding: 7px 10px; border-radius: 8px; cursor: pointer; display: flex; justify-content: space-between; font-size: 13px; }
.side-retired button:hover { background: rgba(255,255,255,.06); }
.side-retired button.on { background: rgba(255,255,255,.12); color: #fff; opacity: 1; }
.ord-date { white-space: nowrap; } .ord-date b { display: block; } .ord-date small { color: var(--muted); }
.orders-table th.sortable { cursor: pointer; } .orders-table th.sortable:hover { color: var(--ink); }
.ev-alldone { color: var(--ok); font-weight: 600; font-size: 12px; margin-left: 4px; }
/* Barcode lookup on the item page */
.bc-row { display: flex; gap: 8px; align-items: flex-end; }
.bc-row label { flex: 1; }
.bc-res { display: flex; gap: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: var(--bg); }
.bc-img { width: 64px; height: 64px; border-radius: 8px; background: var(--panel) center/contain no-repeat; flex: none; }
.bc-body { display: grid; gap: 4px; min-width: 0; }
.bc-body small { display: block; color: var(--muted); }
.bc-video { width: 100%; border-radius: 10px; background: #000; max-height: 50vh; }

/* Bulk generate */
#view-bulk { max-width: 1240px; }
.bg-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.bg-head > div { flex: 1; } .bg-head h1 { margin: 0 0 6px; }
.bg-steps { margin: 4px 0 0; padding-left: 0; list-style: none; counter-reset: s; display: grid; gap: 8px; font-size: 14px; }
.bg-steps li { counter-increment: s; display: flex; align-items: center; gap: 10px; }
.bg-steps li::before { content: counter(s); width: 22px; height: 22px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; }
.bg-card { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); margin-bottom: 14px; overflow: hidden; }
.bg-card.st-work { border-color: var(--accent); } .bg-card.st-done { border-color: var(--ok); } .bg-card.st-bad { border-color: var(--bad); }
.bg-card-h { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.bg-st { font-size: 12px; color: var(--muted); } .st-bad .bg-st { color: var(--bad); } .st-done .bg-st { color: var(--ok); }
.bg-sec { padding: 14px 16px; border-bottom: 1px solid var(--line); display: grid; gap: 8px; }
.bg-sec:last-child { border-bottom: 0; }
.bg-sec .lbl { font-weight: 600; font-size: 13px; }
.bg-sec > input { padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; font: inherit; background: var(--panel); color: var(--ink); }
.bg-two { grid-template-columns: 1fr 1fr; gap: 24px; }
.bg-two > div { display: grid; gap: 8px; align-content: start; }
.bg-two select { padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); }
.bg-seg { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.bg-seg button { border: 0; border-right: 1px solid var(--line); background: none; padding: 9px 8px; font: inherit; cursor: pointer; color: var(--ink); }
.bg-seg button:last-child { border-right: 0; } .bg-seg button.on { background: var(--ok-soft); color: var(--ok); font-weight: 600; }
.bg-photos { display: flex; flex-wrap: wrap; gap: 10px; }
.bg-photos.files-over { outline: 2px dashed var(--accent); outline-offset: 6px; border-radius: 10px; background: var(--accent-soft); }
.bg-ph { width: 96px; height: 96px; border-radius: 10px; border: 2px solid var(--line); background: var(--bg) center/cover; position: relative; cursor: pointer; padding: 0; opacity: .55; }
.bg-ph.on { border-color: var(--ok); opacity: 1; }
.bg-n { position: absolute; left: 5px; top: 5px; width: 20px; height: 20px; border-radius: 50%; background: var(--ok); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.bg-x { position: absolute; right: 4px; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 10px; display: none; place-items: center; }
.bg-ph:hover .bg-x { display: grid; }
.bg-drop { flex: 1 1 100%; min-height: 140px; border: 2px dashed var(--line); border-radius: 12px; display: grid; place-content: center; justify-items: center; gap: 4px; cursor: pointer; color: var(--muted); font-size: 14px; text-align: center; }
.bg-drop.small { flex: 0 0 96px; min-height: 96px; height: 96px; font-size: 11px; }
.bg-drop.small small { display: none; } .bg-drop b { font-size: 22px; color: var(--ok); } .bg-drop u { color: var(--ok); }
.bg-foot { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 14px 16px; margin-top: 14px; position: sticky; bottom: 10px; box-shadow: var(--shadow); }
@media (max-width: 800px) { .bg-two { grid-template-columns: 1fr; } }
.bulk-lbl-new { display: flex; gap: 6px; margin-top: 8px; }
.bulk-lbl-new input { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 13px; background: var(--panel); color: var(--ink); }
.set-body > .panel.mk-crumb { display: none; align-items: center; gap: 10px; padding: 10px 14px; }
.set-body > .panel.mk-crumb.show { display: flex; }
.mk-card-b .row { gap: 6px; }
/* Settings › Splurt online & team */
.team-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.team-table td, .team-table th { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.team-table tr.off { opacity: .55; } .team-table tr.inv td { background: var(--bg); }
.team-invite { display: grid; gap: 8px; margin-top: 14px; }
.team-invite .row input { flex: 1; min-width: 180px; }
.role-info { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13px; color: var(--muted); margin: 14px 0 6px; }
.role-info dt { font-weight: 700; color: var(--ink); text-transform: capitalize; }
.team-act summary { cursor: pointer; font-weight: 600; margin-top: 8px; }

/* Phones: a tab bar along the bottom, normal text size, room for thumbs. */
@media (max-width: 760px) {
  :root { --z: 1 !important; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .side { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 30; height: auto; padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); overflow: visible; box-shadow: 0 -2px 12px rgba(0,0,0,.18); }
  .side .brand, .side-retired, .side-foot { display: none; }
  .side nav { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; gap: 0; }
  .side nav button { flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 2px; font-size: 11px; text-align: center; line-height: 1.2; min-height: 52px; }
  .side nav button span { font-size: 10px; }
  main { padding: 14px 12px 24px; }
  .bar { flex-wrap: wrap; gap: 8px; }
  .bar h1 { font-size: 22px; flex: 1 1 100%; }
  .toast { bottom: calc(76px + env(safe-area-inset-bottom)); max-width: calc(100vw - 32px); }
  .inv-bulk { bottom: calc(70px + env(safe-area-inset-bottom)) !important; }
  .bg-foot { bottom: calc(70px + env(safe-area-inset-bottom)); flex-wrap: wrap; }
  .bg-head { flex-direction: column; }
  .bg-ph { width: 80px; height: 80px; } .bg-drop.small { flex-basis: 80px; height: 80px; min-height: 80px; }
  .bg-seg { grid-template-columns: repeat(2, 1fr); } .bg-seg button:nth-child(2) { border-right: 0; } .bg-seg button:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  input, select, textarea { font-size: 16px; } /* iPhone zooms into smaller boxes */
  .set-body { min-width: 0; }
  .team-table td, .team-table th { padding: 6px 4px; }
}
/* Inventory on a phone: each item is a card, its marketplaces a row of small tiles. */
.mk-phone { display: none; }
@media (max-width: 760px) {
  .table-wrap:has(.mk-grid) { overflow: visible; border: 0; background: none; }
  .inv-table.mk-grid, .inv-table.mk-grid tbody { display: block; width: 100%; min-width: 0; }
  .inv-table.mk-grid thead { display: none; }
  .inv-table.mk-grid tr { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px; margin-bottom: 10px; }
  .inv-table.mk-grid td { display: block; border: 0; padding: 0; min-width: 0; width: auto; max-width: none; background: none; }
  .inv-table.mk-grid td.cb { position: absolute; left: 10px; top: 12px; }
  .inv-table.mk-grid td.mk-item { grid-column: 1 / -1; padding-left: 28px; }
  .inv-table.mk-grid td.mk-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border: 1px solid var(--line); border-radius: 9px; text-align: center; font-size: 11px; }
  .mk-phone { display: block; line-height: 0; }
  .mk-phone .mk-icon { width: 22px; height: 22px; }
  .inv-table.mk-grid .mk-img, .inv-table.mk-grid .mk-cell small, .inv-table.mk-grid .mk-go { display: none; }
  .inv-table.mk-grid .mk-top { display: flex; flex-direction: column; align-items: center; gap: 1px; }
  .inv-table.mk-grid .mk-top b { font-size: 11px; } .inv-table.mk-grid .mk-top i { font-size: 10px; color: var(--muted); }
  .inv-table.mk-grid .mk-add { font-size: 0; padding: 2px 8px; } .inv-table.mk-grid .mk-add b { font-size: 14px; }
  .inv-table.mk-grid .mk-acts { display: grid; gap: 2px; } .inv-table.mk-grid .mk-acts .btn { font-size: 10px; padding: 2px 4px; }
  .inv-table.mk-grid .mk-item-in { flex-wrap: wrap; }
}
.web .sync-btns, .web [data-press="inv-sync"] { display: none; }
@media (max-width: 760px) {
  .inv-table.mk-grid .mk-icons { display: flex; grid-auto-flow: column; align-items: center; }
  .inv-table.mk-grid .mk-item-in { flex-wrap: nowrap; flex-direction: column; }
}
/* Item page on narrow screens: one column (this comes after the 1100px two-column rule, so it wins). */
@media (max-width: 860px) {
  .lf { grid-template-columns: minmax(0, 1fr); }
  .lf-side { position: static; min-height: 0; border-right: 0; padding-right: 0; }
  .lf-main, .lf-grid, .lf-col, .lf-sec-body { min-width: 0; }
  .lf-sec-body, .lf-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .bc-row { flex-wrap: wrap; }
}
@media (max-width: 600px) {
  .lf-row4, .lf-row3, .lf-row2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  .lf-row4 > *, .lf-row3 > *, .lf-row2 > * { min-width: 0; }
  .lf-conds { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px) {
  .lf label > input, .lf label > select, .lf label > .money-in, .lf label > .money-in input, .lf .dims input { min-width: 0; max-width: 100%; width: 100%; box-sizing: border-box; }
  .lf .dims { min-width: 0; } .lf .dims > * { min-width: 0; }
}