:root { --bg:#f6f7f9; --fg:#1d2330; --muted:#6b7280; --line:#e2e5ea; --card:#fff;
  --accent:#ee4d2d; --good:#127a3a; --good-bg:#d9f5e3; --bad:#b42318; --own-bg:#fff6e0; }
* { box-sizing:border-box; }
body { margin:0; font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; background:var(--bg); color:var(--fg); }
nav { display:flex; gap:16px; align-items:center; padding:10px 20px; background:#1d2330; color:#fff; flex-wrap:wrap; }
nav a { color:#cfd5df; text-decoration:none; }
nav a.on, nav a:hover { color:#fff; }
nav .spacer { flex:1; }
.badge { background:var(--accent); color:#fff; border-radius:9px; padding:0 6px; font-size:11px; }
main { padding:16px 20px; }
a { color:#1f5fbf; }
.muted { color:var(--muted); }
.good { color:var(--good); } .bad { color:var(--bad); }
.flash { background:#e8f0fe; border:1px solid #c6d8fb; padding:8px 12px; border-radius:6px; margin-bottom:12px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:14px 16px; margin-bottom:16px; }
.card h3 { margin:0 0 10px; }
.login { max-width:320px; margin:80px auto; display:flex; flex-direction:column; gap:10px; }
.login label { display:flex; flex-direction:column; gap:4px; }
.filters { display:flex; flex-wrap:wrap; gap:10px 14px; align-items:flex-end; margin-bottom:10px; }
.filters label { display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--muted); }
.filters label.check { flex-direction:row; align-items:center; gap:6px; color:var(--fg); font-size:13px; }
form.inline { display:inline; }
input, select, button { font:inherit; padding:5px 8px; border:1px solid #c9ced6; border-radius:5px; background:#fff; }
button { background:var(--accent); color:#fff; border-color:var(--accent); cursor:pointer; }
button:hover { filter:brightness(.95); }
.scroll { overflow-x:auto; background:var(--card); border:1px solid var(--line); border-radius:8px; }
table { border-collapse:collapse; width:100%; }
th, td { padding:5px 9px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th { background:#f0f2f5; position:sticky; top:0; font-weight:600; white-space:nowrap; }
td.num, th.num { text-align:right; white-space:nowrap; }
.pivot td:first-child { font-weight:600; white-space:nowrap; }
.pivot td a { color:inherit; text-decoration:none; }
.pivot td a:hover { text-decoration:underline; }
.own { background:var(--own-bg); }
td.best { background:var(--good-bg); color:var(--good); font-weight:700; }
.delta { font-size:11px; margin-left:4px; font-weight:400; }
.tab { padding:5px 10px; border:1px solid var(--line); border-radius:5px; text-decoration:none; background:#fff; color:var(--fg); }
.tab.on { background:#1d2330; color:#fff; }
code.token { user-select:all; background:#f0f2f5; padding:2px 6px; border-radius:4px; }
button.secondary, .button.secondary { background:#fff; color:var(--fg); border-color:#c9ced6; }
a.button { display:inline-block; padding:6px 12px; background:var(--accent); color:#fff; border-radius:5px; text-decoration:none; }
.narrow { max-width:380px; margin:60px auto; display:flex; flex-direction:column; gap:10px; }
.narrow label { display:flex; flex-direction:column; gap:4px; }
.narrow label.check { flex-direction:row; align-items:center; gap:6px; }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:16px; }
.small { font-size:12px; }
tr.muted td { color:var(--muted); }
pre { background:#f0f2f5; padding:10px; overflow:auto; }
a.button.google { display:block; text-align:center; padding:10px; background:#1a73e8; }
form.stack { display:flex; flex-direction:column; gap:10px; margin-top:10px; }
form.stack label { display:flex; flex-direction:column; gap:4px; }
details summary { cursor:pointer; margin-top:6px; }

/* v1.1 – readable long tables */
.scroll { max-height: calc(100vh - 190px); overflow: auto; }
.scroll.short { max-height: 320px; }
.scroll th { position: sticky; top: 0; z-index: 2; box-shadow: inset 0 -1px 0 var(--line); }
tbody tr:hover td { box-shadow: inset 0 0 0 9999px rgba(31, 95, 191, .10); }
tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 #1f5fbf, inset 0 0 0 9999px rgba(31, 95, 191, .10); }
.pivot th:first-child, .pivot td:first-child { position: sticky; left: 0; z-index: 1; background: var(--card); }
.pivot th:first-child { z-index: 3; background: #f0f2f5; }
textarea { width: 100%; font: 12px Menlo, Consolas, monospace; padding: 6px; border: 1px solid #c9ced6; border-radius: 5px; box-sizing: border-box; }
table.stats { width: auto; margin-bottom: 10px; }
table.stats td { padding: 6px 16px 6px 0; border: 0; color: var(--muted); font-size: 12px; }
table.stats b { font-size: 18px; color: var(--fg); }
table.stats tr:hover td { box-shadow: none; }
.flash.error { background: #fdecea; border-color: #f5c2bd; }
footer { margin-top: 24px; font-size: 11px; }

/* v1.2 – resizable columns, reorderable Compare columns */
th { position: relative; }
.col-resize { position: absolute; top: 0; right: 0; width: 6px; height: 100%; cursor: col-resize; z-index: 5; }
.col-resize:hover { background: rgba(31, 95, 191, .35); }
body.resizing, body.resizing * { cursor: col-resize !important; user-select: none; }
table.resized { table-layout: fixed; }
table.resized th, table.resized td { overflow: hidden; text-overflow: ellipsis; }
table.resized input:not([type=checkbox]):not([type=hidden]), table.resized select { max-width: 100%; }
th.seller { cursor: grab; }
th.dragging { opacity: .4; }
th.drop-before { box-shadow: inset 3px 0 0 var(--accent) !important; }
th.drop-after { box-shadow: inset -3px 0 0 var(--accent) !important; }
button.link { background: none; border: 0; color: #1f5fbf; padding: 0; cursor: pointer; text-decoration: underline; font-size: inherit; }

/* v1.2.1 – clearer dealer separation */
.pivot th + th, .pivot td + td { border-left: 1px solid #d5d9e0; }
.pivot th:first-child, .pivot td:first-child { border-right: 2px solid #c4c9d2; }
.pivot td.num { text-align: center; }
.pivot th.seller { text-align: center; }

/* v1.2.2 – Compare fits one screen width */
table.fitted th.seller { white-space: normal; line-height: 1.2; vertical-align: middle; }
table.fitted td.num { white-space: normal; padding-left: 4px; padding-right: 4px; }
table.fitted td.num a { white-space: nowrap; }
table.fitted .delta { white-space: nowrap; display: inline-block; margin-left: 2px; }
table.fitted th, table.fitted td { text-overflow: clip; }

/* v1.2.4 – SKU always shown in full on Compare */
table.fitted td:first-child, table.fitted th:first-child { white-space: normal; overflow-wrap: anywhere; overflow: visible; }

/* v1.3.0 – PID mapping: save row by row */
td.map-cell { white-space: nowrap; }
button.map-row { margin-left: 4px; padding: 3px 9px; font-weight: bold; line-height: 1.2; }
button.map-row:disabled { opacity: .5; }
.row-msg { display: block; white-space: normal; }
tr.row-saved td { background: #eefaf2; }
tr.row-error td { background: #fdf1f0; }
button.unmap-row { margin-left: 4px; padding: 3px 8px; font-size: 12px; }
button.unmap-row[hidden] { display: none; }