/* ===== 視覺基底（2026/10 改版）=====
   英數字用 IBM Plex Sans（放在 vendor/fonts，自己提供；不走 Google Fonts——中國大陸的店家連不到會卡住）。
   中文交給各系統內建黑體：Mac 蘋方、Windows 微軟正黑、Linux 思源黑體。
   顏色一律用下面的變數；--muted 從 #8a929c 加深，原本小字在白底上對比不足。 */
@font-face { font-family: "Plex Sans"; src: url(/vendor/fonts/plex-sans-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url(/vendor/fonts/plex-sans-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url(/vendor/fonts/plex-sans-600.woff2) format("woff2"); font-weight: 600 700; font-display: swap; }
:root {
  --pink: #c8006f; --pink-dark: #a3005a; --pink-tint: #fbe8f2; --pink-line: #f1c4db;
  --bg: #f2f2f4; --card: #fff; --line: #e2dfe5; --line-strong: #d3cfd8; --text: #1e1a22; --muted: #6b6474; --faint: #8a8292; --hover: #f5f4f7;
  --green: #12855a; --amber: #a86500; --red: #c9372c; --blue: #2563c9; --purple: #6a4cc7;
  --ink: #24182a; --ink-2: #33243a; --ink-3: #3d2944; --ink-line: #3a2c40; --ink-text: #e6dde8; --ink-muted: #a693ac;
  --font: "Plex Sans", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", "Noto Sans CJK TC", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Consolas, monospace;
}
* { box-sizing: border-box; }
/* hidden 屬性永遠優先：class 上的 display（flex／inline-flex）會蓋掉它（BACKLOG #103），全站一次擋掉 */
[hidden] { display: none !important; }
body { margin: 0; font-family: var(--font); font-size: 14px; line-height: 1.5; background: var(--bg); color: var(--text); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
code { font-family: var(--mono); font-size: .92em; background: #f1eff3; padding: 1px 5px; border-radius: 4px; }

/* ===== 深色頂欄 ===== */
.topbar { display: flex; align-items: center; gap: 12px; background: var(--ink); padding: 12px 22px; border-bottom: 1px solid var(--ink-line); position: sticky; top: 0; z-index: 10; }
.brand { display: flex; align-items: center; gap: 8px; }
.brand .logo { font-size: 22px; }
.brand b { font-size: 16px; color: #f3f4f6; }
.brand .sub { color: #9aa3ad; font-size: 14px; }
.topnav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.topnav a { color: #c2c8d0; font-size: 14px; text-decoration: none; padding: 7px 14px; border-radius: 8px; }
.topnav a:hover { background: var(--ink-2); color: #fff; }
.topnav a.active { background: var(--ink-3); color: #fff; font-weight: 600; }
.topnav .nav-gear { font-size: 15px; padding: 6px 10px; }
.status { font-size: 12px; color: #9aa3ad; margin-left: 12px; }
.status .pill { background: var(--ink-2); color: var(--ink-text); padding: 3px 9px; border-radius: 11px; font-weight: 600; }
.status .pill.live { background: #14331f; color: #4ade80; }

/* ===== 上架工具子分頁 ===== */
.subtabs { display: flex; gap: 6px; background: var(--card); padding: 9px 22px; border-bottom: 1px solid var(--line); }
.subtabs a { font-size: 13px; color: var(--muted); text-decoration: none; padding: 6px 16px; border-radius: 8px; }
.subtabs a:hover { background: #f1f2f4; color: var(--text); }
.subtabs a.active { background: #fdeef6; color: var(--pink); font-weight: 600; }

/* ===== 篩選列 ===== */
.filterbar { display: flex; align-items: center; gap: 10px; background: var(--card); padding: 12px 22px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.filterbar[hidden], .bulk-bar[hidden] { display: none; }
#scanBar[hidden] { display: none !important; }
#loadMoreWrap[hidden] { display: none !important; }
.fld { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.tilde { color: var(--muted); }
input[type=date] { font: inherit; font-size: 14px; height: 38px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; color: var(--text); }
.search { flex: 1; min-width: 240px; font: inherit; font-size: 14px; height: 38px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; color: var(--text); }
select.search { padding: 0 30px 0 10px; }
.search:focus { outline: none; border-color: var(--pink); box-shadow: 0 0 0 3px var(--pink-tint); }
.btn { font: inherit; font-size: 14px; min-height: 38px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; color: var(--text); cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--hover); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.primary { background: var(--pink); color: #fff; border-color: var(--pink); font-weight: 500; }
.btn.primary:hover { background: var(--pink-dark); border-color: var(--pink-dark); }
.btn.ghost { color: var(--muted); border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--hover); color: var(--text); }
.btn.danger { color: var(--red); border-color: #ecc3bf; }
.btn.danger:hover { background: #fdf1f0; }
.btn.small { min-height: 32px; padding: 0 11px; font-size: 13px; border-radius: 7px; }

/* ===== 狀態分頁 ===== */
.tabs { display: flex; gap: 4px; background: var(--card); padding: 0 16px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tab { display: flex; align-items: center; gap: 7px; white-space: nowrap; padding: 13px 12px; font-size: 14px; color: #5e5766; border-bottom: 2px solid transparent; cursor: pointer; background: none; border-top: none; border-left: none; border-right: none; font-family: inherit; }
.tab .ico { font-size: 15px; display: inline-flex; align-items: center; }
.tab .ico svg { width: 16px; height: 16px; }
.bulk-title svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 2px; }
.tab .cnt { color: var(--faint); font-size: 13px; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-bottom-color: var(--pink); font-weight: 600; }
.tab.active .cnt { color: var(--pink); }

main { max-width: 1180px; margin: 0 auto; padding: 16px 22px 60px; }
.list { display: flex; flex-direction: column; }
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, Consolas, monospace; }

/* ===== 訂單列 ===== */
.row { display: grid; grid-template-columns: 220px 84px 1fr 220px 160px 38px; gap: 16px; align-items: start; background: var(--card); border: 1px solid var(--line); border-top: none; padding: 16px; }
.order-block:first-child .row { border-top: 1px solid var(--line); border-radius: 10px 10px 0 0; }
.order-block:last-child .row { border-radius: 0 0 10px 10px; }
.order-block .row { cursor: pointer; }
.order-block.open:last-child .row { border-radius: 0; }
.order-block.open .row { background: #f7f9fc; }
.row:hover { background: #fcfcfd; }
.c-order .mono { font-size: 15px; font-weight: 600; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; margin-top: 6px; }
.b-checked_out { background: #eef3ff; color: var(--blue); }
.b-at_warehouse_transit, .b-at_warehouse_arrived { background: #fff3df; color: var(--amber); }
.b-shipped_overseas { background: #f0ecfd; color: var(--purple); }
.b-shipped_tw { background: #fdeef6; color: var(--pink); }
.b-delivered { background: #e7f7ee; color: var(--green); }
.b-returned { background: #fbeee0; color: #b5651d; }
.b-cancelled { background: #eef0f2; color: var(--muted); }
.b-error { background: #fce8e8; color: var(--red); }
.committed { font-size: 11px; color: var(--green); margin-top: 5px; }
.c-thumb img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: #f3f4f6; }
.c-thumb .ph { width: 84px; height: 84px; border-radius: 8px; background: #f0f1f3; display: flex; align-items: center; justify-content: center; color: #c4c8ce; font-size: 22px; }
.c-goods .name { font-size: 13px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.c-goods .art { color: var(--muted); font-size: 12px; margin-top: 5px; font-family: ui-monospace, monospace; }
.c-goods .spec { display: inline-block; margin-top: 6px; font-size: 12px; color: #444; background: #f4f5f7; border-radius: 6px; padding: 2px 8px; }
.c-recipient .name { font-size: 13px; }
.c-recipient .addr { color: var(--muted); font-size: 12px; margin-top: 4px; line-height: 1.4; }
.c-date { font-size: 12px; color: var(--muted); text-align: right; }
.c-date .o { color: var(--text); }
.c-date .ship { margin-top: 8px; }
.c-date .track { font-family: ui-monospace, monospace; font-size: 11px; color: var(--blue); margin-top: 6px; word-break: break-all; }
.c-act { display: flex; align-items: center; justify-content: center; }
.c-act .chev { color: #c4c8ce; font-size: 18px; display: inline-block; transition: transform .15s; }
.order-block.open .c-act .chev { transform: rotate(90deg); }

/* ===== 就地展開明細 ===== */
.order-detail { background: #f7f8fa; border: 1px solid var(--line); border-top: none; padding: 22px 26px; }
.order-block.open:last-child .order-detail { border-radius: 0 0 10px 10px; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 48px; max-width: 820px; }
.dg-label { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.dg-value { font-size: 14px; color: var(--text); word-break: break-all; }
.dg-value.mono { font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.dg.full { grid-column: 1 / -1; }
.detail-sec { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.sec-title { font-size: 13px; font-weight: 700; margin: 0 0 12px; }
.detail-actions { margin-top: 18px; display: flex; gap: 8px; }
.timeline { border-left: 2px solid var(--line); margin-left: 6px; padding-left: 16px; }
.tl-item { position: relative; padding-bottom: 14px; }
.tl-item::before { content: ''; position: absolute; left: -23px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--pink); border: 2px solid #fff; }
.tl-item.head::before { background: var(--amber); }
.tl-item.tail::before { background: var(--purple); }
.tl-desc { font-size: 13px; line-height: 1.45; }
.tl-meta { font-size: 11px; color: var(--muted); margin-top: 3px; }
.leg-tag { font-size: 10px; padding: 0 6px; border-radius: 5px; margin-left: 6px; }
.leg-tag.head { background: #fff3df; color: var(--amber); }
.leg-tag.tail { background: #f0ecfd; color: var(--purple); }

.empty { padding: 50px; text-align: center; color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; font-size: 13px; color: var(--muted); }
.pager button { font: inherit; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; }
.pager button:disabled { opacity: .4; cursor: default; }

/* ===== 側邊抽屜（選品/商品編輯用）===== */
.drawer { position: fixed; inset: 0; z-index: 40; }
.drawer-bg { position: absolute; inset: 0; background: rgba(0,0,0,.35); }
.drawer-panel { position: absolute; top: 0; right: 0; height: 100%; width: 460px; max-width: 92vw; background: #fff; box-shadow: -8px 0 30px rgba(0,0,0,.18); overflow-y: auto; padding: 22px; }
.drawer-panel.wide { width: 560px; }
.dh { display: flex; justify-content: space-between; align-items: flex-start; }
.dh .close { cursor: pointer; font-size: 22px; color: var(--muted); border: none; background: none; }
.d-title { font-size: 18px; font-weight: 700; }
.d-sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
.flabel { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); margin: 12px 0; }
.flabel input, .flabel select { font: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); }
.flabel .hint { color: var(--green); font-size: 11px; }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.d-imgs { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px; }
.d-imgs img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pricing-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--muted); }
.pricing-grid input { font: inherit; font-size: 13px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; }
.sku-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.sku-table th, .sku-table td { padding: 7px 8px; font-size: 12px; border-bottom: 1px solid var(--line); text-align: left; }
.sku-table th { color: var(--muted); font-weight: 600; }
.sku-table input { width: 72px; font: inherit; font-size: 12px; padding: 5px 6px; border: 1px solid var(--line); border-radius: 6px; }
.sku-table .profit { font-weight: 600; color: var(--green); }
.sku-table .profit.neg { color: var(--red); }

/* ===== 表格（商品管理）===== */
.tablewrap { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 14px; font-size: 14px; border-bottom: 1px solid #ecebef; vertical-align: top; }
th { background: #faf9fb; color: #5e5766; font-weight: 500; font-size: 13px; white-space: nowrap; }
tbody tr:last-child td { border-bottom: none; }
th.chk, td.chk { width: 34px; text-align: center; }
.goods-name { font-weight: 600; }
.sku { color: var(--muted); font-size: 13px; margin-top: 2px; }

/* ===== 選品商品格 ===== */
.catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.pcard { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px; cursor: pointer; transition: box-shadow .15s, transform .15s; }
.pcard:hover { box-shadow: 0 6px 20px rgba(0,0,0,.08); transform: translateY(-2px); }
.pimg img, .pimg .ph { width: 100%; height: 140px; object-fit: cover; border-radius: 8px; background: #f0f1f3; }
.pimg .ph { display: flex; align-items: center; justify-content: center; font-size: 36px; color: #c4c8ce; }
.ptitle { font-size: 13px; font-weight: 600; margin-top: 10px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pmeta { font-size: 12px; color: var(--muted); margin-top: 5px; }
.pmeta2 { font-size: 11px; color: var(--faint); margin-top: 2px; }
.pprice { font-size: 12px; color: var(--pink); font-weight: 600; margin-top: 8px; }

/* ===== Dashboard 總覽 ===== */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.kpi-ic { width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--accent, var(--pink)); background: color-mix(in srgb, var(--accent, var(--pink)) 12%, #fff); }
.kpi-ic svg { width: 21px; height: 21px; }
.kpi-body { min-width: 0; }
.kpi-label { font-size: 12px; color: var(--muted); margin-top: 4px; }
.kpi-value { font-size: 24px; font-weight: 700; margin: 0; letter-spacing: -.5px; line-height: 1; }
.kpi-value .kpi-sub { font-size: 14px; color: var(--faint); font-weight: 600; }
.kpi-hint { display: none; }
.dash-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.dash-card h2 { font-size: 15px; margin: 0 0 14px; }
.todo { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; text-decoration: none; color: var(--text); transition: background .12s; }
.todo:hover { background: #fafbfc; }
.todo-ic { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--c, #8a929c); background: color-mix(in srgb, var(--c, #8a929c) 12%, #fff); }
.todo-ic svg { width: 16px; height: 16px; }
.todo-label { flex: 1; font-size: 13px; }
.todo-arrow { color: #c4c8ce; font-size: 18px; }
.sbar { margin-bottom: 11px; }
.sbar-top { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px; }
.sbar-top b { color: var(--text); }
.sbar-track { height: 8px; background: #eef0f2; border-radius: 5px; overflow: hidden; }
.sbar-fill { height: 100%; border-radius: 5px; transition: width .4s ease; min-width: 2px; }
.quick-links { display: flex; flex-wrap: wrap; gap: 10px; }
.ql { display: flex; align-items: center; gap: 8px; padding: 11px 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; text-decoration: none; color: var(--text); font-size: 13px; font-family: inherit; cursor: pointer; }
.ql:hover { background: #f2f3f5; border-color: #d6d9de; }
.ql span { font-size: 16px; display: inline-flex; align-items: center; color: var(--muted); }
.ql span svg { width: 17px; height: 17px; }
.ql.primary span { color: var(--pink); }

/* ===== Toast ===== */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 10px; font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,.25); z-index: 60; max-width: 80%; }
.toast.err { background: var(--red); }
.toast.ok { background: var(--green); }

/* ===== 響應式 ===== */
@media (max-width: 820px) {
  .dash-cols { grid-template-columns: 1fr; }
  .topbar { flex-wrap: wrap; }
  .topnav { margin-left: 0; flex-wrap: wrap; }
  .tablewrap { overflow-x: auto; }
  table { min-width: 720px; }
  .row { min-width: 720px; }
  .drawer-panel, .drawer-panel.wide { width: 100%; max-width: 100%; }
  .detail-grid { grid-template-columns: 1fr; }
}

/* ===== 批量依品牌上架 ===== */
.bulk-bar { background: #fff7fb; border-bottom: 1px solid #f4cfe2; padding: 14px 22px; display: flex; flex-direction: column; gap: 11px; }
.bulk-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bulk-title { font-weight: 700; font-size: 14px; color: var(--pink-dark); min-width: 92px; }
.bulk-or { color: var(--muted); font-size: 13px; padding: 0 2px; }
.bulk-row .bulk-in { flex: 1 1 240px; max-width: 320px; min-width: 200px; }
.bulk-row.nowrap { flex-wrap: nowrap; }
.bulk-row.nowrap .bulk-in { flex: 1 1 0; min-width: 140px; max-width: 360px; }
@media (max-width: 720px) { .bulk-row.nowrap { flex-wrap: wrap; } }
.bulk-min { flex: 0 0 auto; width: 230px; font: inherit; font-size: 13px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
select.bulk-min { width: 210px; }
.bulk-row select { font: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.bulk-row.sub { padding-top: 11px; border-top: 1px dashed #f1cfe0; }
.bulk-sub-label { font-size: 13px; color: var(--muted); min-width: 92px; }
.bulk-hint { font-size: 12px; color: #b9a2ae; }
.bulk-results { margin-top: 12px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; max-height: 340px; overflow-y: auto; }
.bulk-summary { font-size: 13px; margin-bottom: 8px; }
.bulk-item { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 6px 0; border-bottom: 1px solid #f2f3f5; }
.bulk-item:last-child { border-bottom: none; }
.bulk-item.ok > span:first-child { color: var(--green); font-weight: 700; }
.bulk-item.fail > span:first-child { color: var(--red); font-weight: 700; }
.bulk-item.skip > span:first-child { color: #b0872e; font-weight: 700; }
.bulk-item .bi-title { flex: 1; }
.bulk-item .bi-msg { color: var(--muted); font-size: 12px; }

/* ===== 待採購卡 ===== */
.pend-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.pend-head h2 { margin: 0; }
.pend-head small { font-size: 12px; color: var(--muted); font-weight: 400; margin-left: 6px; }
.pend-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid #f2f3f5; }
.pend-item:last-child { border-bottom: none; }
.pi-title { font-size: 13px; font-weight: 600; }
.pi-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.pi-buy { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.pi-price { font-size: 13px; color: var(--pink); font-weight: 600; }
.pi-warn { font-size: 12px; color: var(--amber); }
.frow2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ===== 業績儀表板 ===== */
.sales-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 4px 0 18px; }
.skpi { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; border-left: 4px solid var(--accent, var(--pink)); background: #fff; }
.skpi-v { font-size: 22px; font-weight: 700; letter-spacing: -.5px; }
.skpi-l { font-size: 12px; color: var(--muted); margin-top: 4px; }
.sales-chart { margin-bottom: 6px; }
.sbars { display: flex; align-items: flex-end; gap: 3px; height: 130px; padding: 8px 0; }
.sbar-col { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.sbar-b { width: 100%; min-height: 2px; background: linear-gradient(to top, var(--pink), #f5a3d0); border-radius: 3px 3px 0 0; transition: height .3s; }
.sbar-col:hover .sbar-b { background: var(--pink-dark); }
.sbars-x { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); padding: 2px 0 4px; white-space: nowrap; }
.sales-subtitle { font-size: 14px; margin: 18px 0 10px; }
.top-products { display: flex; flex-direction: column; }
.tp-row { display: flex; align-items: center; gap: 12px; padding: 9px 4px; border-bottom: 1px solid #f2f3f5; font-size: 13px; }
.tp-row:last-child { border-bottom: none; }
.tp-rank { width: 22px; height: 22px; flex-shrink: 0; border-radius: 6px; background: #f4f5f7; color: var(--muted); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.tp-row:nth-child(1) .tp-rank { background: #fdeef6; color: var(--pink); }
.tp-img { width: 34px; height: 34px; flex-shrink: 0; object-fit: cover; border-radius: 7px; border: 1px solid var(--line); background: #f0f1f3; }
.tp-img.ph { display: inline-block; }
.tp-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-qty { color: var(--muted); font-size: 12px; white-space: nowrap; }
.tp-rev { font-weight: 700; color: var(--pink); white-space: nowrap; min-width: 84px; text-align: right; }
@media (max-width: 820px) {
  .sales-kpis { grid-template-columns: repeat(2, 1fr); }
}

/* ===== 總覽改版（千牛式，粉色主題）===== */
.db-hero { padding: 16px 20px; }
.db-greet { font-size: 14px; margin: 0 0 14px; }
.db-greet b { font-weight: 700; }
.db-greet .tag { background: var(--pink); color: #fff; font-size: 12px; padding: 2px 9px; border-radius: 11px; }
.db-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--line); margin: 0 -20px 16px; padding: 0 20px; }
.db-tabs a { padding: 0 0 11px; font-size: 14px; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; cursor: pointer; }
.db-tabs a:hover { color: var(--text); }
.db-tabs a.on { color: var(--pink); border-bottom-color: var(--pink); font-weight: 600; }
.kpis { display: grid; grid-template-columns: repeat(6, 1fr); }
.kpis .kpi { display: block; background: none; border: none; border-radius: 0; border-left: 1px solid var(--line); padding: 2px 18px; min-width: 0; }
.kpis .kpi:first-child { border-left: none; padding-left: 0; }
.kpi .k { font-size: 13px; color: var(--muted); margin-bottom: 9px; white-space: nowrap; }
.kpi .krow { display: flex; align-items: baseline; gap: 9px; }
.kpi .v { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.5px; line-height: 1; }
.kpi .v small { font-size: 13px; color: var(--faint); font-weight: 600; }
.kpi .go { font-size: 12px; color: var(--pink); text-decoration: none; white-space: nowrap; }
.kpi .sub { font-size: 11px; color: var(--faint); margin-top: 9px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi.warn .v { color: var(--red); }
.db-h { font-size: 14px; margin: 0 0 14px; font-weight: 700; }
.db-h small { font-weight: 400; color: var(--muted); font-size: 12px; }
.db-split { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: center; }
.db-score { background: linear-gradient(180deg, #fdf2f8, #fff); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.db-score .lab { font-size: 12px; color: var(--muted); }
.db-score .big { font-size: 34px; font-weight: 800; color: var(--pink); letter-spacing: -1px; font-variant-numeric: tabular-nums; line-height: 1.2; margin-top: 4px; }
.db-score .revsub { font-size: 12px; color: var(--muted); margin-top: 8px; font-variant-numeric: tabular-nums; }
.db-pills { display: flex; gap: 6px; justify-content: flex-end; margin-bottom: 14px; }
.db-pills .pill { font-size: 12px; color: var(--muted); padding: 5px 13px; border: 1px solid var(--line); border-radius: 16px; cursor: pointer; }
.db-pills .pill.on { background: #fdeef6; color: var(--pink); border-color: #f4c9de; font-weight: 600; }
.db-donuts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.donut { display: flex; align-items: center; gap: 13px; }
.ring { width: 78px; height: 78px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; position: relative; }
.ring::after { content: ""; position: absolute; width: 56px; height: 56px; background: #fff; border-radius: 50%; }
.ring .pct { position: relative; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.donut .dt b { display: block; font-size: 13px; margin-bottom: 3px; }
.donut .dt .m { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
/* grid 子項預設 min-width:auto —— 熱銷 Top 5 的長商品名會撐開自己那欄，把趨勢圖擠成一條。
   min-width:0 讓欄位真的能縮，minmax 再給圖表一個最小寬度，保證它不會被壓扁。 */
.db-trend { display: grid; grid-template-columns: minmax(320px, 1.6fr) minmax(0, 1fr); gap: 20px; }
.db-trend > * { min-width: 0; }
.db-area { position: relative; }
@media (max-width: 900px) {
  .kpis { grid-template-columns: repeat(3, 1fr); row-gap: 16px; }
  .kpis .kpi { border-left: none; padding: 2px 0; }
  .db-split, .db-trend { grid-template-columns: 1fr; }
  .db-pills { justify-content: flex-start; }
}

/* ===== 選品勾選 / 批量選取列 ===== */
.pcard { position: relative; }
.pcard.selected { border-color: var(--pink); box-shadow: 0 0 0 2px rgba(230, 0, 126, .25); }
.pcard-chk { position: absolute; top: 8px; left: 8px; z-index: 2; background: rgba(255, 255, 255, .92); border: 1px solid var(--line); border-radius: 6px; padding: 3px; display: inline-flex; cursor: pointer; }
.pcard-chk input { width: 17px; height: 17px; cursor: pointer; accent-color: var(--pink); margin: 0; }
.sel-bar { position: fixed; bottom: 18px; left: calc(50% + 108px); transform: translateX(-50%); background: var(--ink); color: #fff; display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); z-index: 55; }
.sel-bar[hidden] { display: none; }

/* 開發者專用元素：非開發者角色隱藏 */
.dev-only { display: none !important; }
body.role-dev .dev-only { display: inline-flex !important; }

/* 得物商家專屬 UI。gate.js 依 /api/auth/status 的 shopType 在 <body> 掛上 shop-dewu。
   預設隱藏（而不是預設顯示再隱藏）：萬一 shopType 抓失敗，一般商家看到的是少東西，
   而不是一堆按了會壞的得物功能。
   注意：行內文字要用 .dewu-inline，不要在 .dewu-only 上加 style="display:inline" ——
   inline style 的優先權高過 class，那樣寫等於永遠顯示，隱藏根本不會生效。 */
.dewu-only { display: none; }
.dewu-inline { display: none; }
body.shop-dewu .dewu-only { display: block; }
body.shop-dewu .dewu-inline { display: inline; }
body.shop-dewu .set-card.dewu-only { display: flex; }
body.shop-dewu th.dewu-only, body.shop-dewu td.dewu-only { display: table-cell; }

/* ===== 上架選圖 ===== */
.d-img { position: relative; cursor: pointer; border-radius: 8px; border: 2px solid transparent; }
.d-img img { display: block; width: 64px; height: 64px; object-fit: cover; border-radius: 6px; }
.d-img.on { border-color: var(--pink); }
.d-img:not(.on) img { opacity: .45; }
.d-img-badge { position: absolute; top: -6px; left: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--pink); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.sel-bar .sel-info { font-size: 13px; }
.sel-bar .sel-info b { color: #4ade80; font-size: 15px; }
.sel-bar select { font: inherit; font-size: 13px; padding: 5px 8px; border-radius: 7px; border: 1px solid #5a4862; background: var(--ink-2); color: #fff; }
@media (max-width: 820px) {
  .sel-bar { left: 50%; flex-wrap: wrap; justify-content: center; max-width: 94vw; }
}

/* ===== 左側分組選單版面 ===== */
body.has-sidebar { padding-left: 216px; }
body.has-sidebar .topbar { display: none; }
.sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 216px; background: var(--ink); color: var(--ink-text); display: flex; flex-direction: column; overflow-y: auto; z-index: 50; }
.sb-brand { display: flex; align-items: center; gap: 10px; padding: 20px 20px 14px; }
.sb-brand .sb-logo { width: 32px; height: 32px; display: inline-flex; font-size: 0; flex-shrink: 0; }
.sb-brand .sb-logo svg { width: 32px; height: 32px; }
.sb-brand b { color: #fff; font-size: 15px; font-weight: 600; display: block; line-height: 1.2; }
.sb-brand small { color: var(--ink-muted); font-size: 12px; }
.sb-nav { flex: 1; padding: 0 12px 12px; }
.sb-group { font-size: 12px; color: var(--ink-muted); padding: 16px 10px 6px; }
.sb-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; margin: 1px 0; border-radius: 8px; color: var(--ink-text); text-decoration: none; font-size: 14px; }
.sb-item:hover { background: var(--ink-2); color: #fff; }
.sb-item.active { background: var(--ink-3); color: #fff; font-weight: 600; }
.sb-item.active::after { content: ""; margin-left: auto; width: 6px; height: 6px; border-radius: 3px; background: var(--pink); flex-shrink: 0; }
.sb-ic { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 0; flex-shrink: 0; }
.sb-ic svg { width: 18px; height: 18px; }
.sb-foot { padding: 14px 20px 18px; border-top: 1px solid var(--ink-line); font-size: 13px; color: var(--ink-muted); }
.sb-logout { margin-top: 10px; width: 100%; height: 36px; border: 1px solid #4a3a52; background: transparent; color: var(--ink-text); border-radius: 8px; font: inherit; font-size: 13px; cursor: pointer; }
.sb-logout:hover { background: var(--ink-2); color: #fff; }
.sb-foot .pill { background: var(--ink-2); color: var(--ink-text); padding: 3px 9px; border-radius: 11px; font-weight: 600; }
.sb-foot .pill.live { background: #173a2a; color: #5fe39a; }

/* 手機：側欄收成「☰」，從左邊滑出（gate.js 建 .mtop 與 .sb-scrim）。原本是整塊堆在頁面最上面，佔掉整個第一屏。 */
.mtop, .sb-scrim { display: none; }
@media (max-width: 820px) {
  body.has-sidebar { padding-left: 0; padding-top: 56px; }
  .mtop { display: flex; align-items: center; gap: 10px; position: fixed; top: 0; left: 0; right: 0; height: 56px; padding: 0 12px 0 6px; background: var(--ink); color: #fff; z-index: 45; }
  .mtop b { font-size: 15px; font-weight: 600; }
  .mtop-logo svg { width: 28px; height: 28px; display: block; }
  .mtop-btn { width: 44px; height: 44px; border: 0; border-radius: 8px; background: transparent; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
  .mtop-btn:hover { background: var(--ink-2); }
  .mtop-btn svg { width: 22px; height: 22px; }
  .sidebar { width: min(280px, 86vw); transform: translateX(-100%); transition: transform .2s ease; box-shadow: 8px 0 30px rgba(0,0,0,.25); z-index: 60; }
  body.sb-open .sidebar { transform: none; }
  body.sb-open .sb-scrim { display: block; position: fixed; inset: 0; background: rgba(36,24,42,.5); z-index: 55; }
  body.sb-open { overflow: hidden; }
  .sel-bar { left: 50%; }
}
@media (max-width: 820px) and (prefers-reduced-motion: reduce) { .sidebar { transition: none; } }

/* ===== 貨態分頁重排（2026/08/24）===== */
/* 分頁改換行：八個分頁在窄螢幕會折成兩行，不再水平捲動把最後幾個藏起來 */
.tabs { flex-wrap: wrap; overflow-x: visible; padding: 0 16px; align-items: center; }
.tab.todo { color: var(--green); }
.tab.todo .cnt { color: var(--green); font-weight: 600; }
.tab.todo.active { color: var(--pink); }
.tab.todo.active .cnt { color: var(--pink); }
.tab-note { margin-left: auto; align-self: center; font-size: 12.5px; color: var(--muted); text-decoration: none; padding: 6px 10px; border-radius: 6px; }
.tab-note:hover { color: var(--text); background: #f2f4f6; }

.b-pending_purchase { background: #eef0f2; color: var(--muted); }
.b-awaiting_dewu_ship { background: #eef3ff; color: var(--blue); }
.b-dewu_shipping { background: #fff3df; color: var(--amber); }
.b-at_warehouse { background: #e7f7ee; color: var(--green); }
.b-at_momo_cn { background: #e6f5fa; color: #0e7f9c; }
/* 例外拆回三欄：退貨要處理、取消不用動、異常要查，顏色要分得出來 */
.b-returned { background: #fbeee0; color: #b5651d; }
.b-cancelled { background: #eef0f2; color: var(--muted); }
.b-error { background: #fce8e8; color: var(--red); }

/* 進度條：分頁只是篩選，這條才看得出單卡在哪一段 */
.row .step { grid-column: 1 / -1; display: flex; margin: 4px 0 0; padding-top: 12px; border-top: 1px dashed var(--line); }
.row .step .n { display: flex; flex-direction: column; align-items: center; flex: 1; position: relative; min-width: 0; }
.row .step .n::before { content: ""; position: absolute; top: 6px; left: -50%; width: 100%; height: 2px; background: var(--line); }
.row .step .n:first-child::before { display: none; }
.row .step .n.done::before, .row .step .n.cur::before { background: var(--pink); }
.row .step .d { width: 14px; height: 14px; border-radius: 99px; background: #dfe3e8; border: 2px solid #dfe3e8; position: relative; z-index: 1; }
.row .step .n.done .d { background: var(--pink); border-color: var(--pink); }
.row .step .n.cur .d { background: #fff; border-color: var(--pink); box-shadow: 0 0 0 3px #fce4f2; }
.row .step .t { font-size: 10.5px; color: var(--muted); margin-top: 5px; text-align: center; line-height: 1.35; }
.row .step .n.done .t { color: var(--text); }
.row .step .n.cur .t { color: var(--pink); font-weight: 600; }
/* 例外：走到哪算哪，用灰紅色標示，不要假裝還在往前跑 */
.row .step.ex .n.done::before, .row .step.ex .n.cur::before { background: #e7b9b9; }
.row .step.ex .n.done .d { background: #cfa3a3; border-color: #cfa3a3; }
.row .step.ex .n.cur .d { border-color: var(--red); box-shadow: 0 0 0 3px #fbe3e3; }
.row .step.ex .n.cur .t { color: var(--red); }

@media (max-width: 900px) { .row .step .t { font-size: 9.5px; } }

/* ===== 業績趨勢圖（2026/08/26 重做）=====
   原本只有一條線：沒有 y 軸刻度、沒有互動，看不出那根尖峰值多少；
   x 軸中間還放了「每日營收」四個字，讀起來像一個資料點。 */
.db-area { position: relative; }
.db-maxline { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--line); pointer-events: none; }
.db-maxlab { position: absolute; left: 0; font-size: 11px; color: var(--muted); background: var(--card); padding: 0 5px 0 0; transform: translateY(-50%); pointer-events: none; font-variant-numeric: tabular-nums; }
.db-cross { position: absolute; top: 0; bottom: 0; width: 1px; background: #e6e8ec; opacity: 0; pointer-events: none; }
.db-dot { position: absolute; width: 9px; height: 9px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; border: 2px solid var(--pink); opacity: 0; pointer-events: none; }
.db-tip { position: absolute; z-index: 3; background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.10);
  padding: 7px 10px; font-size: 12px; line-height: 1.6; white-space: nowrap; pointer-events: none; transform: translate(-50%, -114%); }
.db-tip b { font-size: 13px; font-variant-numeric: tabular-nums; }
.db-tip .d { color: var(--muted); font-size: 11px; }

/* ── 單品上架：逐尺碼改價 ── */
.price-basis { font-size: 12px; color: var(--muted); margin: 2px 0 8px; line-height: 1.6; }
.price-basis b { color: var(--text); }
.price-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; background: #fafbfc; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; color: var(--muted); }
.price-tools label { display: inline-flex; align-items: center; gap: 4px; }
.price-tools input { width: 70px; font: inherit; font-size: 12px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; }
.price-tools .pt-sep { width: 1px; height: 18px; background: var(--line); margin: 0 2px; }
.sku-table.price-edit td { vertical-align: middle; }
.sku-table.price-edit th { white-space: nowrap; }
.sku-table.price-edit input { width: 64px; }
.sku-table.price-edit .pcell { white-space: nowrap; }
.sku-table.price-edit tr.p-man input.np { border-color: var(--blue); background: #f3f7fe; }
.sku-table.price-edit tr.p-loss { background: #fff4f4; }
.sku-table.price-edit tr.p-loss input.np { border-color: var(--red); color: var(--red); }
.sku-table .neg-txt { color: var(--red); font-weight: 600; }
.ptag { display: inline-block; font-size: 10.5px; line-height: 1; padding: 3px 5px; border-radius: 4px; margin-left: 4px; vertical-align: 1px; }
.ptag.man { background: #e8f0fd; color: var(--blue); }
.ptag.loss { background: #fde8e8; color: var(--red); }
.ptag.lock { background: #f1ecfb; color: var(--purple); }
.pbtn { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 0 2px; }
.pbtn:hover { color: var(--text); }
.price-summary { font-size: 12.5px; color: var(--muted); margin: 8px 0 4px; }
.price-summary b { color: var(--text); }
.lock-opt { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; color: var(--muted); margin: 6px 0 12px; cursor: pointer; }
.pcard .pest { font-size: 12px; color: var(--pink-dark); font-weight: 600; margin-top: 2px; }
body.mode-single .pcard-chk { display: none; }

/* ── 批量上架背景任務 ── */
.job-panel { margin: 12px 22px 0; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.job-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.job-head .job-sp { flex: 1; }
.job-bar { height: 8px; background: #eef0f2; border-radius: 6px; overflow: hidden; margin: 10px 0 6px; }
.job-bar > div { height: 100%; width: 0; background: var(--pink); border-radius: 6px; transition: width .4s; }
.job-bar > div.paused { background: var(--amber); }
.job-reason { font-size: 12.5px; color: var(--red); margin: 4px 0; }
.job-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; padding: 8px 10px; background: #fffaf0; border: 1px solid #f0d59a; border-radius: 8px; margin: 6px 0; }
.job-opts select { font: inherit; font-size: 12px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; }
.job-list { max-height: 260px; overflow-y: auto; margin-top: 6px; }
/* class 的 display 會蓋掉 hidden 屬性（BACKLOG #103）—— 面板裡的區塊一律讓 hidden 說了算 */
.job-panel [hidden], .job-panel[hidden] { display: none !important; }
.it-status { font-size: 13px; padding: 10px 12px; background: #fafbfc; border: 1px solid var(--line); border-radius: 8px; margin: 6px 0 10px; }
.it-usage { font-size: 12.5px; color: var(--text); margin: 4px 0 6px; }
#itControls[hidden] { display: none !important; }

/* ── 確認要翻譯的圖 ── */
.rv-bar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 22px; background: var(--card); border-bottom: 1px solid var(--line); font-size: 13px; }
.rv-bar[hidden] { display: none !important; }
.rv-bar .rv-sp { flex: 1; }
.rv-prog { width: 160px; height: 6px; background: #eef0f2; border-radius: 4px; overflow: hidden; }
.rv-prog > div { height: 100%; width: 0; background: var(--pink); transition: width .4s; }
.rv-chk { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); cursor: pointer; }
.rv-item { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 10px 0; }
.rv-title { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.rv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.rv-img { position: relative; border: 2px solid var(--line); border-radius: 8px; overflow: hidden; cursor: pointer; background: #fafafa; aspect-ratio: 1; }
.rv-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv-img.on { border-color: var(--pink); box-shadow: 0 0 0 2px #fdeef6; }
.rv-img.changed { outline: 2px dashed var(--blue); outline-offset: 1px; }
.rv-img.dis { cursor: default; opacity: .55; }
.rv-tick { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1px solid var(--line); color: transparent; font-size: 13px; line-height: 20px; text-align: center; }
.rv-img.on .rv-tick { background: var(--pink); border-color: var(--pink); color: #fff; }
.rv-b { position: absolute; left: 0; right: 0; bottom: 0; font-size: 11px; padding: 3px 6px; background: rgba(255,255,255,.92); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-item .rv-title .rv-b { position: static; display: inline; background: none; }
.rv-b.need { color: var(--pink-dark); font-weight: 600; }
.rv-b.unk { color: var(--amber); }
.rv-b.done { color: var(--green); }
.rv-banner { margin: 12px 22px 0; padding: 10px 14px; background: #fffaf0; border: 1px solid #f0d59a; border-radius: 10px; font-size: 13px; }
.rv-banner[hidden] { display: none !important; }

/* ── 同款不同色合併確認 ── */
.mg-wrap { position: fixed; inset: 0; z-index: 50; background: rgba(15,20,30,.45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.mg-box { background: var(--card); border-radius: 14px; width: min(720px, 100%); max-height: 86vh; display: flex; flex-direction: column; padding: 18px 20px; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.mg-h { font-size: 16px; font-weight: 700; }
.mg-sub { font-size: 12px; color: var(--muted); margin: 6px 0 10px; }
.mg-list { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.mg-g { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-size: 13px; }
.mg-m { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.mg-m span { display: inline-flex; align-items: center; gap: 6px; background: #fafbfc; border: 1px solid var(--line); border-radius: 8px; padding: 3px 8px 3px 3px; font-size: 12px; }
.mg-m img { width: 32px; height: 32px; object-fit: cover; border-radius: 6px; }
.mg-m i { font-style: normal; color: var(--muted); font-size: 11px; }
.mg-act { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.sel-bar .btn, .sel-bar .sel-info { white-space: nowrap; }

/* ===== 開關與設定選項列（2026/10）=====
   設定頁的布林選項一律用「標題＋說明｜開關」一列，跟下面維護工具的 dt-row 同一種排法。
   開關就是原生 checkbox（appearance:none 畫成滑動開關），id／checked／change 事件都照舊。 */
.switch { appearance: none; -webkit-appearance: none; flex-shrink: 0; position: relative; width: 40px; height: 24px; margin: 0; border-radius: 12px; background: #cfcad4; cursor: pointer; transition: background .15s; }
.switch::before { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(30,26,34,.3); transition: transform .15s; }
.switch:checked { background: var(--pink); }
.switch:checked::before { transform: translateX(16px); }
.switch:disabled { opacity: .45; cursor: default; }
.switch:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.opt-list { border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.opt { display: flex; align-items: center; gap: 20px; padding: 14px 16px; cursor: pointer; }
.opt + .opt { border-top: 1px solid var(--line); }
.opt:hover { background: #fcfbfd; }
.opt-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.opt-t b { font-size: 14px; font-weight: 600; color: var(--text); }
.opt-t > span { font-size: 13px; color: var(--muted); line-height: 1.6; }
@media (prefers-reduced-motion: reduce) { .switch, .switch::before { transition: none; } }

/* 一般 checkbox 跟主色走 */
input[type=checkbox] { accent-color: var(--pink); }

/* ===== 共用小工具 ===== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.badge { white-space: nowrap; }
.dropdown { position: relative; display: inline-block; }
.dropdown-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 50; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(30,26,34,.12); padding: 6px; min-width: 210px; display: flex; flex-direction: column; }
.ddi { display: block; text-align: left; background: none; border: 0; padding: 9px 12px; border-radius: 7px; font: inherit; font-size: 14px; color: var(--text); cursor: pointer; text-decoration: none; white-space: nowrap; }
.ddi:hover { background: var(--hover); }
.ddi.danger { color: var(--red); }
.ddi:disabled { opacity: .5; cursor: default; }
.dd-sep { height: 1px; background: var(--line); margin: 5px 4px; }

/* ===== 商品管理（2026/10 改版）===== */
.pm { max-width: 1320px; margin: 0 auto; padding: 28px 32px 48px; display: flex; flex-direction: column; gap: 18px; }
.pm-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.pm-head h1 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -.2px; }
.pm-head p { margin: 4px 0 0; color: var(--muted); }
.pm-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pm-prog-t { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.pm-prog-bar { height: 8px; background: #ebe8ee; border-radius: 5px; overflow: hidden; }
.pm-prog-bar > div { height: 100%; width: 0; background: var(--pink); transition: width .2s; }
.pm-debug { font-size: 13px; color: var(--muted); }
.pm-debug textarea { width: 100%; height: 120px; margin-top: 4px; font-size: 12px; font-family: var(--mono); border: 1px solid var(--line); border-radius: 8px; padding: 8px; }

.pm-panel { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.pm-tabs { padding: 0 12px; }
.pm-tabs .tab { height: 48px; padding: 0 12px; }
.pm-tabs .tab .cnt { margin-left: 2px; }
.pm-tabs .tab.active .cnt { color: var(--pink); }
.pm-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 16px; }
.pm-filters select, .pm-filters input[type=number], .pm-size select { font: inherit; font-size: 14px; height: 38px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; color: var(--text); }
.pm-filters select { max-width: 180px; }
.pm-filters input:focus, .pm-filters select:focus { outline: none; border-color: var(--pink); box-shadow: 0 0 0 3px var(--pink-tint); }
.pm-search { flex: 1 1 280px; min-width: 220px; position: relative; display: flex; align-items: center; color: var(--faint); }
.pm-search svg { position: absolute; left: 12px; pointer-events: none; }
.pm-search input { width: 100%; font: inherit; font-size: 14px; height: 38px; padding: 0 12px 0 36px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; color: var(--text); }
.pm-range { display: inline-flex; align-items: center; gap: 6px; color: var(--faint); }
.pm-range input { width: 108px; }
.pm-fsum { font-size: 13px; color: var(--muted); padding: 0 16px 12px; margin-top: -4px; }
.pm-fsum:empty { display: none; }

.pm-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 16px; background: var(--ink); color: #fff; }
.pm-bulk-n { font-weight: 600; margin-right: 8px; }
.pm-bulk .btn { background: var(--ink-2); border-color: #5a4862; color: #fff; }
.pm-bulk .btn:hover { background: var(--ink-3); }
.pm-bulk .pm-bulk-del { background: transparent; border-color: #8c3a44; color: #ffb4b4; }
.pm-sp { flex: 1; }

.pm-table { overflow-x: auto; border-top: 1px solid var(--line); }
.pm-table table { min-width: 960px; }
.pm-table th, .pm-table td { vertical-align: middle; }
.pm-table th.chk, .pm-table td.chk { width: 44px; padding-left: 16px; padding-right: 0; text-align: left; }
.pm-table .chk input { width: 16px; height: 16px; }
.pm-table .num { text-align: right; white-space: nowrap; }
.pm-table .act { padding-right: 16px; }
.pm-goods { display: flex; align-items: center; gap: 12px; min-width: 280px; }
.pm-thumb img, .pm-thumb .ph { width: 52px; height: 52px; border-radius: 8px; border: 1px solid var(--line); background: #f1eff3; object-fit: cover; display: flex; align-items: center; justify-content: center; color: #b5adbc; }
.pm-gt { min-width: 0; }
.pm-gt .goods-name { line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pm-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 3px; font-size: 13px; color: var(--muted); }
.pm-price { font-size: 15px; font-weight: 600; }
.pm-sub { font-size: 13px; color: var(--muted); }
.pm-note { font-size: 13px; color: #8a6a00; }
.pm-loss { margin-top: 6px; font-size: 13px; color: #9a1f16; }
.pm-st { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.pm-st::before { content: ""; width: 8px; height: 8px; border-radius: 4px; box-sizing: border-box; }
.pm-st.on { color: #0e5a3e; } .pm-st.on::before { background: #16a06a; }
.pm-st.draft { color: #6e4300; } .pm-st.draft::before { border: 2px solid #c98a00; }
.pm-st.off { color: var(--muted); } .pm-st.off::before { background: #b5adbc; }
.pm-acts { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.pm-more { position: relative; }
.pm-more summary { list-style: none; width: 32px; padding: 0; }
.pm-more summary::-webkit-details-marker { display: none; }
.pm-more[open] summary { background: var(--hover); }
.pm-more-pop { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 150px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(30,26,34,.12); padding: 6px; display: flex; flex-direction: column; }
.pm-empty { padding: 56px 24px; text-align: center; color: var(--muted); }

/* 尺碼格 */
.sz-strip { display: flex; flex-wrap: wrap; gap: 4px; min-width: 210px; max-width: 320px; }
.sz { position: relative; min-width: 38px; height: 40px; padding: 0 6px; border-radius: 6px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; cursor: default; }
.sz b { font-size: 11px; font-weight: 400; white-space: nowrap; }
.sz i { font-style: normal; font-size: 13px; font-weight: 600; }
.sz.ok { background: #e5f2ec; color: #0e5a3e; }
.sz.low { background: #fbebc9; color: #6e4300; }
.sz.out { background: #f1f0f2; color: var(--faint); }
.sz.out i { font-weight: 400; text-decoration: line-through; }
.sz.loss { background: #fde5e2; color: #9a1f16; box-shadow: inset 0 0 0 1.5px #c9372c; }
.sz.lock::after { content: ""; position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 5px; background: var(--purple); border: 2px solid #fff; }

.pm-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 12px 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.pm-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.pm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sz-k { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.sz-k.ok { background: #e5f2ec; } .sz-k.low { background: #fbebc9; } .sz-k.out { background: #f1f0f2; }
.sz-k.lockdot { width: 10px; height: 10px; border-radius: 5px; background: var(--purple); }
.sz-k.loss { background: #fde5e2; box-shadow: inset 0 0 0 1.5px #c9372c; }
.pm-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.pm-size { display: inline-flex; align-items: center; gap: 6px; }
.pm-size select { height: 32px; }
.pm-pager .pager { margin: 0; }

@media (max-width: 820px) {
  .pm { padding: 20px 16px 40px; }
  .pm-filters select { max-width: none; flex: 1 1 140px; }
}

/* ===== 商品圖一律完整顯示，不裁切（2026/10）=====
   原本是 object-fit: cover（裁切填滿）：襪子、衛衣這種直式圖沒事，
   但鞋子是橫的，鞋頭鞋跟會被切掉。得物圖本身是白底，改成 contain 再補白底，看起來跟裁切版一樣滿。 */
.pimg img, .pimg .ph { height: auto; aspect-ratio: 1 / 1; }
.pimg img, .c-thumb img, .d-imgs img, .d-img img, .tp-img, .rv-img img, .mg-m img, .pm-thumb img { object-fit: contain; background: #fff; }
.single-cat { font: inherit; font-size: 13px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; max-width: 300px; }

/* ===== 提示條（util.js 的 pmgToast）===== */
.toast { display: flex; align-items: flex-start; gap: 14px; line-height: 1.5; }
.toast-msg { user-select: text; word-break: break-word; }
.toast.err { padding-right: 10px; }
.toast-x { flex-shrink: 0; width: 28px; height: 28px; margin: -4px -2px -4px 0; border: 0; border-radius: 6px; background: rgba(255,255,255,.18); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.toast-x:hover { background: rgba(255,255,255,.32); }

/* ===== 確認視窗（util.js 的 pmgConfirm／pmgPrompt）===== */
.pmg-dlg-bg { position: fixed; inset: 0; z-index: 9000; background: rgba(36,24,42,.45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.pmg-dlg { width: min(440px, 100%); background: #fff; border-radius: 14px; padding: 22px 22px 18px; box-shadow: 0 20px 60px rgba(30,26,34,.3); }
.pmg-dlg h2 { margin: 0 0 8px; font-size: 17px; font-weight: 600; }
.pmg-dlg.danger h2 { color: var(--red); }
.pmg-dlg-msg { margin: 0; white-space: pre-line; line-height: 1.7; color: #3d3644; max-height: 50vh; overflow: auto; }
.pmg-dlg-input { width: 100%; margin-top: 12px; font: inherit; font-size: 14px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 8px; resize: vertical; }
.pmg-dlg-input:focus { outline: none; border-color: var(--pink); box-shadow: 0 0 0 3px var(--pink-tint); }
.pmg-dlg-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.btn.danger-solid { background: var(--red); border-color: var(--red); color: #fff; font-weight: 500; }
.btn.danger-solid:hover { background: #a82c23; border-color: #a82c23; }
.toast-act { flex-shrink: 0; margin: -4px 0; padding: 0 10px; height: 28px; border: 0; border-radius: 6px; background: rgba(255,255,255,.2); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.toast-act:hover { background: rgba(255,255,255,.34); }

/* ===== 讀取中（2026/10）===== */
.pmg-loadbar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9500; pointer-events: none; opacity: 0; transition: opacity .2s; background: linear-gradient(90deg, transparent 0%, var(--pink) 30%, var(--pink) 70%, transparent 100%) no-repeat; background-size: 40% 100%; }
.pmg-loadbar.on { opacity: 1; animation: pmg-load 1.1s ease-in-out infinite; }
@keyframes pmg-load { from { background-position: -40% 0; } to { background-position: 140% 0; } }
.is-loading { opacity: .5; pointer-events: none; transition: opacity .15s; }
.sk-b { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, #eeecf0 25%, #f6f5f7 50%, #eeecf0 75%); background-size: 200% 100%; animation: pmg-sk 1.3s linear infinite; }
@keyframes pmg-sk { from { background-position: 200% 0; } to { background-position: -200% 0; } }
tr.sk td { vertical-align: middle; }
.order-sk { display: grid; grid-template-columns: 220px 84px 1fr; gap: 16px; align-items: center; background: var(--card); border: 1px solid var(--line); border-top: none; padding: 16px; }
.order-sk:first-child { border-top: 1px solid var(--line); border-radius: 10px 10px 0 0; }
.order-sk:last-child { border-radius: 0 0 10px 10px; }
@media (prefers-reduced-motion: reduce) { .pmg-loadbar.on, .sk-b { animation: none; } }
.trial-ban { position: fixed; top: 0; left: 216px; right: 0; z-index: 44; background: var(--red); color: #fff; padding: 9px 16px; font-size: 13px; font-weight: 600; text-align: center; }
body.has-trial-ban { padding-top: 38px; }
@media (max-width: 820px) { .trial-ban { left: 0; top: 56px; } body.has-sidebar.has-trial-ban { padding-top: 94px; } }

/* ===== 上架工具頁（單品／批量）版面（2026/10）===== */
.lst-head { padding: 24px 32px 0; max-width: 1320px; }
.lst-head h1 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -.2px; }
.lst-head p { margin: 4px 0 0; color: var(--muted); max-width: 72ch; }
.lst-panel { margin: 18px 32px 0; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.lst-seg { display: inline-flex; align-self: flex-start; padding: 3px; gap: 2px; background: #f1eff3; border-radius: 10px; }
.lst-seg-b { font: inherit; font-size: 14px; height: 34px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; color: #5e5766; cursor: pointer; }
.lst-seg-b:hover { color: var(--text); }
.lst-seg-b[aria-selected="true"] { background: #fff; color: var(--text); font-weight: 600; box-shadow: 0 1px 3px rgba(30,26,34,.12); }
.lst-pane { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lst-in { flex: 1 1 320px; max-width: 560px; display: flex; }
.lst-in .search { width: 100%; min-width: 0; }
.lst-in.sm { flex: 1 1 220px; max-width: 300px; }
.lst-pane-t { margin: 0; flex: 1 1 320px; max-width: 560px; color: var(--muted); }
.lst-adv { border-top: 1px dashed var(--line); padding-top: 12px; }
.lst-adv summary { cursor: pointer; color: var(--muted); font-size: 14px; width: fit-content; }
.lst-adv summary b { color: var(--text); font-weight: 500; }
.lst-adv[open] summary { margin-bottom: 10px; }
.lst-adv-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lst-adv-row select { font: inherit; font-size: 14px; height: 38px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; color: var(--text); max-width: 260px; }
.lst-hint { margin: 8px 0 0; font-size: 13px; color: var(--muted); }

.lst-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 12px 32px 0; padding: 10px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; font-size: 14px; color: #3d3644; }
.lst-f-label { font-size: 13px; color: var(--muted); }
.lst-f-group { display: inline-flex; gap: 8px; }
.lst-filter select { font: inherit; font-size: 14px; height: 34px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; color: var(--text); max-width: 200px; }
.lst-chk { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
.lst-chk input { width: 16px; height: 16px; margin: 0; }
.lst-price { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--muted); }
.lst-price input { width: 76px; font: inherit; font-size: 14px; height: 34px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--text); }
.lst-count { font-size: 13px; color: var(--muted); }
body.mode-single .brand-only { display: none !important; }
/* 單品模式的搜尋列跟批量的卡片對齊 */
#singleBar { margin: 18px 32px 0; border: 1px solid var(--line); border-radius: 12px; }
body:has(.lst-head) main { max-width: none; padding: 16px 32px 60px; }
#scanBar, #rvBanner, .job-panel, #bulkResults { margin-left: 32px !important; margin-right: 32px !important; }
@media (max-width: 820px) {
  .lst-head { padding: 18px 16px 0; }
  .lst-panel, .lst-filter, #singleBar { margin-left: 16px; margin-right: 16px; }
  body:has(.lst-head) main { padding: 16px 16px 60px; }
  #scanBar, #rvBanner, .job-panel, #bulkResults { margin-left: 16px !important; margin-right: 16px !important; }
  .lst-seg { align-self: stretch; } .lst-seg-b { flex: 1; padding: 0 8px; }
}
/* 單品抽屜：同款其他配色 */
.sib-wrap { margin: 10px 0 6px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px; background: var(--panel, #fafafa); }
.sib-list { display: flex; flex-wrap: wrap; gap: 8px; }
.sib { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 6px; border: 1.5px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; font-size: 12px; max-width: 220px; }
.sib img { width: 36px; height: 36px; object-fit: cover; border-radius: 5px; }
.sib-t { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.sib-t b, .sib-t small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sib-t small { color: var(--muted); font-size: 11px; }
.sib.on { border-color: var(--pink); }
.sib.main { border-color: var(--pink); background: #fff5f8; cursor: default; }
.sib.dis { opacity: .55; cursor: not-allowed; }
.sib-ex { font-size: 10.5px; color: #8a6d1a; }

/* ===== 設定頁頁首與卡片（2026/10）===== */
main.set-main { max-width: 880px; margin: 0 auto; padding: 24px 32px 60px; }
.set-head { margin-bottom: 20px; }
.set-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.set-crumb a { color: var(--muted); text-decoration: none; padding: 2px 0; }
.set-crumb a:hover { color: var(--pink); text-decoration: underline; }
.set-crumb [aria-current] { color: var(--text); }
.set-crumb-sep { color: var(--faint); }
.set-head h1 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -.2px; }
.set-head p { margin: 4px 0 0; color: var(--muted); max-width: 64ch; }
.set-head p:empty { display: none; }
/* 內頁的卡片標題跟頁首大標題重複了，收掉（「得物商家專用」改寫在頁首說明裡） */
.setting-panel > h2:first-child { display: none; }
.set-card { min-height: 84px; }
.set-card::after { content: "›"; margin-left: auto; padding-left: 8px; font-size: 22px; line-height: 1; color: var(--faint); }
.set-card:hover::after { color: var(--pink); }
.set-card:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
@media (max-width: 820px) { main.set-main { padding: 18px 16px 48px; } }
.setting-panel > h2:first-child + * { margin-top: 0; }
/* 單品抽屜：商詳圖簡轉繁逐張控制 */
.tr-wrap { margin: 10px 0 6px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px; }
.tr-list { display: flex; flex-wrap: wrap; gap: 10px; }
.tr-card { width: 96px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--card); font-size: 11.5px; }
.tr-card.on { border-color: var(--pink); }
.tr-img { position: relative; }
.tr-img img { width: 80px; height: 80px; object-fit: cover; border-radius: 6px; display: block; }
.tr-tw { position: absolute; right: 3px; bottom: 3px; background: var(--pink); color: #fff; font-size: 10px; font-weight: 700; padding: 0 4px; border-radius: 4px; }
.tr-st { padding: 1px 6px; border-radius: 8px; background: var(--hover); color: var(--muted); white-space: nowrap; }
.tr-st.needs { background: #fdecef; color: #b4234a; }
.tr-st.none { background: #eef6ee; color: #2e7d32; }
.tr-st.unk { background: #fff7e6; color: #8a6d1a; }
.tr-st.done { background: #eaf1fb; color: #2456a6; }
.tr-ck { display: inline-flex; gap: 4px; align-items: center; cursor: pointer; }
.tr-pv { padding: 2px 8px !important; font-size: 11px !important; }
.tr-modal { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.tr-modal-box { background: var(--card); border-radius: 12px; padding: 14px; max-width: 980px; width: 100%; max-height: 92vh; overflow: auto; }
.tr-modal-h { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.tr-modal-h .close { margin-left: auto; border: none; background: none; font-size: 22px; cursor: pointer; }
.tr-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tr-cmp figure { margin: 0; }
.tr-cmp img { width: 100%; border-radius: 8px; border: 1px solid var(--line); }
.tr-cmp figcaption { text-align: center; font-size: 12px; color: var(--muted); margin-top: 4px; }
@media (max-width: 640px) { .tr-cmp { grid-template-columns: 1fr; } }
/* 單品抽屜：標題輔助 */
.title-assist { margin: -4px 0 10px; font-size: 12px; color: var(--muted); line-height: 1.7; }
.title-assist .ta-len { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); }
.title-assist .ta-len.near { color: #b7791f; }
.title-assist .ta-len.over { color: var(--red); }
.title-assist .ta-warn { color: #b4234a; }
.title-assist .ta-sep { margin: 0 4px; color: var(--line-strong); }
.title-assist .linkbtn { border: none; background: none; padding: 0; color: var(--pink); cursor: pointer; font-size: 12px; text-decoration: underline; }
/* 單品抽屜：圖片排序＋主圖預覽 */
.img-pick { display: flex; gap: 12px; align-items: flex-start; margin: 8px 0 4px; }
.img-main { flex: 0 0 132px; position: relative; border: 2px solid var(--pink); border-radius: 10px; overflow: hidden; background: var(--hover); }
.img-main img { display: block; width: 128px; height: 128px; object-fit: cover; }
.img-main span { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; text-align: center; padding: 2px 0; }
.d-img[draggable="true"] { cursor: grab; }
.d-img.dragging { opacity: .4; }
.d-img.drop-to { outline: 2px dashed var(--pink); outline-offset: 2px; }
.d-img.over6 img { opacity: .35; }
.d-img-badge.over { background: var(--faint); }
.d-img-main { position: absolute; left: 2px; right: 2px; bottom: 2px; border: none; border-radius: 4px; background: rgba(0,0,0,.6); color: #fff; font-size: 10px; padding: 1px 0; cursor: pointer; opacity: 0; transition: opacity .12s; }
.d-img:hover .d-img-main, .d-img:focus-within .d-img-main { opacity: 1; }
@media (hover: none) { .d-img-main { opacity: 1; } }
@media (max-width: 520px) { .img-pick { flex-direction: column; } }