:root {
  --bg: #f6f5f2; --panel: #fff; --ink: #1d1d1b; --muted: #75736d; --line: #e4e1da;
  --accent: #b4451f; --accent-ink: #fff; --ok: #2f7a4b; --warn: #a86b00; --bad: #b3261e;
  --chip: #efece6; --sel: #fbefe9;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 14px;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #161614; --panel: #1f1f1c; --ink: #ecebe6; --muted: #9a978f; --line: #33322e;
    --chip: #2a2926; --sel: #3a2a22; --accent: #e0703f; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); }
button, input, select { font: inherit; color: inherit; }
.hidden { display: none !important; }
.muted { color: var(--muted); font-size: 12px; }

.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 20px; background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.brand { font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.brand .sub { font-weight: 400; color: var(--muted); font-size: 13px; margin-left: 6px; }
.top-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.top-actions form { margin: 0; }

.btn { border: 1px solid var(--line); background: var(--panel); padding: 7px 12px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.ghost { background: transparent; }
.btn.small { padding: 4px 8px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: progress; }

.filters { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 20px 6px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { background: var(--chip); border: 1px solid transparent; border-radius: 99px; padding: 5px 12px; cursor: pointer; }
.chip.on { border-color: var(--ink); background: var(--panel); font-weight: 600; }
.filter-right { display: flex; gap: 8px; }
.filter-right input, .filter-right select { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; }
.filter-right input { width: 260px; max-width: 60vw; }

.tabs { display: flex; gap: 2px; padding: 8px 20px 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 12px; cursor: pointer; color: var(--muted); white-space: nowrap; }
.tab.on { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.tab .n { background: var(--chip); border-radius: 99px; padding: 1px 7px; margin-left: 4px; font-size: 12px; }
.tab.err .n { background: var(--bad); color: #fff; }

.bulk { display: flex; align-items: center; gap: 12px; padding: 10px 20px; background: var(--sel); border-bottom: 1px solid var(--line);
  position: sticky; top: 57px; z-index: 4; flex-wrap: wrap; }
.bulk #bulkButtons { display: flex; gap: 8px; flex-wrap: wrap; }

main { padding: 0 20px 60px; overflow-x: auto; }
.grid { width: 100%; border-collapse: collapse; background: var(--panel); margin-top: 12px; border: 1px solid var(--line); border-radius: 8px; }
.grid th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 500; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.grid td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.grid tr:last-child td { border-bottom: 0; }
.grid tr.sel td { background: var(--sel); }
.cb { width: 32px; }
.ord { font-weight: 600; }
.store { font-size: 11px; background: var(--chip); border-radius: 4px; padding: 1px 6px; margin-left: 4px; font-weight: 500; }
.items { max-width: 280px; color: var(--muted); font-size: 13px; }
.pay-cod { color: var(--warn); font-weight: 600; }
.pay-pre { color: var(--ok); font-weight: 600; }
.badge { display: inline-block; font-size: 11px; border-radius: 4px; padding: 1px 6px; background: var(--chip); margin-top: 3px; }
.badge.warn { background: #f6e3bf; color: #6b4500; }
.badge.bad { background: #f5d0cd; color: #7a1a14; }
.err-line { color: var(--bad); font-size: 12px; margin-top: 4px; max-width: 320px; }
.wt { width: 64px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); }
.awb { font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
a { color: var(--accent); }
.empty { text-align: center; color: var(--muted); padding: 40px; }

#errors .alert { margin: 10px 20px 0; padding: 10px 14px; background: #f5d0cd; color: #7a1a14; border-radius: 6px; }

dialog { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); width: min(640px, 94vw); padding: 18px; }
dialog::backdrop { background: rgba(0,0,0,.35); }
dialog h3 { margin: 0 0 12px; }
.clist { width: 100%; border-collapse: collapse; }
.clist td, .clist th { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; font-size: 13px; }
.log { font-size: 12px; max-height: 300px; overflow: auto; }
.log div { padding: 4px 0; border-bottom: 1px solid var(--line); }
.log .error { color: var(--bad); }

.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg);
  padding: 10px 16px; border-radius: 8px; max-width: 90vw; z-index: 20; white-space: pre-line; }

body.login { display: grid; place-items: center; min-height: 100vh; }
.login-card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 28px; width: 320px; display: grid; gap: 12px; }
.login-card input { padding: 9px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
.err { color: var(--bad); margin: 0; }

@media (max-width: 720px) {
  .grid thead { display: none; }
  .grid tr { display: grid; grid-template-columns: 32px 1fr; border-bottom: 1px solid var(--line); }
  .grid td { border: 0; padding: 4px 8px; grid-column: 2; }
  .grid td.cb { grid-column: 1; grid-row: 1 / span 7; }
  .bulk { top: 0; position: static; }
}

/* ---- Settings ---- */
.settings { max-width: 980px; margin: 0 auto; padding: 20px; display: grid; gap: 20px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 20px; }
.card h2 { margin: 0 0 4px; font-size: 18px; }
.card h3 { margin: 18px 0 8px; font-size: 14px; }
.modes { display: grid; gap: 8px; margin: 14px 0; }
.modes label, .check { cursor: pointer; }
.check { display: block; margin-top: 14px; }
.dim { opacity: .45; }
.plist { margin: 0; padding: 0 0 0 22px; }
ul.plist { list-style: none; padding: 0; }
.plist li { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; margin-bottom: 4px; background: var(--bg); }
.plist li.muted { border-style: dashed; background: none; }
.add { display: flex; gap: 6px; margin-top: 6px; }
.add select, #fallback, #skuSearch { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; min-width: 220px; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.upload { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.grid.compact td { padding: 6px 10px; }
.ok-line { color: var(--ok); }
code { background: var(--chip); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
.pkg-src { font-size: 11px; color: var(--muted); }

a.btn { text-decoration: none; color: inherit; display: inline-block; }

/* ---- Flags ---- */
.flags { margin-top: 4px; display: flex; gap: 4px; flex-wrap: wrap; }
.badge.flag { border: 0; cursor: pointer; font-weight: 600; }
.badge.dup { background: #e2dcf5; color: #3d2a7a; }
.badge.risk { background: #f6e3bf; color: #6b4500; }
.badge.high { background: #b3261e; color: #fff; }
.why { padding-left: 18px; line-height: 1.6; }
.store-row { display: grid; grid-template-columns: 110px 1fr 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.store-row input[type=text] { padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); width: 100%; }
.logo-prev { height: 40px; max-width: 140px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 2px; }
.field { display: flex; gap: 8px; align-items: center; margin: 8px 0; flex-wrap: wrap; }
.field input[type=number], .field input[type=text] { padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
@media (max-width: 720px) { .store-row { grid-template-columns: 1fr; } }

/* ---- Messages / address ---- */
.badge.ok { background: #d6efdd; color: #1d5a33; }
.btn.wa { border-color: #25d366; color: #128c4b; }
textarea.msg { width: 100%; font: inherit; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); }
.btns { display: flex; gap: 6px; flex-wrap: wrap; }
form.addr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
form.addr label { display: grid; gap: 3px; font-size: 12px; color: var(--muted); }
form.addr label.wide { grid-column: 1 / -1; }
form.addr input, form.addr select { padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); font-size: 14px; }
.sku { font-family: ui-monospace, Menlo, monospace; font-size: 11px; }

/* ---- Merge / edit / cancel ---- */
.badge.merge { background: #dbe9f7; color: #1c4d80; }
.badge.merge-hint { border: 1px dashed #1c4d80; background: transparent; color: #1c4d80; cursor: pointer; }
button.badge { border: 0; cursor: pointer; font: inherit; font-size: 11px; }
button.link { background: none; border: 0; color: var(--accent); cursor: pointer; font-size: 11px; padding: 0; text-decoration: underline; }
.btn.danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.danger-text { color: var(--bad); }
tr.added td { background: var(--sel); }

/* ---- Connections ---- */
.conn-block { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin: 10px 0; }
.conn-block h3 { margin: 0; }
.conn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.conn-grid label { display: grid; gap: 3px; font-size: 12px; color: var(--muted); }
.conn-grid label.wide { grid-column: 1 / -1; }
.conn-grid input { padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); font-size: 14px; }
.conn-result p { margin: 6px 0 0; }
.add-store { margin: 10px 0; }
.add-store summary { cursor: pointer; color: var(--accent); }
.sync-box { margin-top: 16px; padding-top: 6px; border-top: 1px solid var(--line); }
@media (max-width: 720px) { .conn-grid { grid-template-columns: 1fr; } }