/* B2C 报关表（/#customs-b2c）。颜色照原 Excel：黄 = 没报过要补、粉 = 照以前报过的带出、红字 = 交财务后改过 */
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--canvas); color: var(--text-primary); font: 13px/1.5 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; }
.cb-app { padding: 16px 20px 40px; max-width: 2000px; }
.cb-head h1 { margin: 0 0 4px; font-size: 20px; }
.cb-head p { margin: 0 0 12px; color: var(--text-secondary); max-width: 980px; }

.cb-btn { border: 1px solid var(--border-control); background: var(--surface); color: var(--text-primary); border-radius: 6px; padding: 5px 12px; font: inherit; cursor: pointer; white-space: nowrap; }
.cb-btn:hover { background: var(--surface-hover); }
.cb-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); }
.cb-btn.primary:hover { background: var(--accent-hover); }
.cb-btn.danger { color: var(--danger-fg); border-color: var(--danger-border); }
.cb-btn.small { padding: 2px 8px; font-size: 12px; }
.cb-btn:disabled { opacity: .55; cursor: default; }
.cb-btn:focus-visible, .cb-in:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* 顶上：一批一个标签 + 新建 */
.cb-bar { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cb-sheets { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; }
.cb-chip { border: 1px solid var(--border); background: var(--surface); border-radius: 8px; padding: 6px 10px; cursor: pointer; text-align: left; font: inherit; color: var(--text-primary); white-space: nowrap; }
.cb-chip:hover { background: var(--surface-hover); }
.cb-chip.on { border-color: var(--accent); background: var(--accent-soft-bg); box-shadow: inset 0 0 0 1px var(--accent); }
.cb-chip b { font-weight: 600; }
.cb-chip small { display: block; color: var(--text-muted); font-size: 11px; }
.cb-st { display: inline-block; font-size: 11px; padding: 0 6px; border-radius: 9px; margin-left: 6px; border: 1px solid var(--border); color: var(--text-secondary); }
.cb-st.draft { background: var(--warning-bg); color: var(--warning-fg); border-color: var(--warning-border); }
.cb-st.submitted { background: var(--info-bg); color: var(--info-fg); border-color: var(--info-border); }
.cb-st.done { background: var(--success-bg); color: var(--success-fg); border-color: var(--success-border); }
.cb-new { position: relative; }
.cb-new-pop { position: absolute; right: 0; top: 36px; z-index: 30; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 8px; padding: 10px 12px; width: 300px; box-shadow: 0 6px 24px var(--overlay); display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.cb-new-pop label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--text-secondary); flex: 1; }
.cb-new-note { font-size: 11px; color: var(--text-muted); width: 100%; }

.cb-empty { padding: 40px; text-align: center; color: var(--text-muted); background: var(--surface); border: 1px dashed var(--border-strong); border-radius: 10px; }

/* 一批的抬头 */
.cb-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }
.cb-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cb-title { font-size: 17px; font-weight: 600; border: 1px solid transparent; border-radius: 6px; padding: 2px 6px; min-width: 220px; background: transparent; color: var(--text-primary); }
.cb-title:hover, .cb-title:focus { border-color: var(--border-control); background: var(--surface); }
.cb-who { color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.cb-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.cb-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 14px; margin-top: 10px; }
.cb-fields label, .cb-foot label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--text-secondary); }
.cb-foot { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px 14px; }
.cb-foot .wide { grid-column: 1 / -1; }
.cb-in { border: 1px solid var(--border-control); border-radius: 6px; padding: 5px 8px; font: inherit; color: var(--text-primary); background: var(--surface); min-width: 0; }
textarea.cb-in { min-height: 54px; resize: vertical; }
.cb-in.red, .cb-cell.red { color: var(--danger-fg); font-weight: 600; }
.cb-ask { color: var(--warning-fg); font-size: 11px; }

/* 还差什么 */
.cb-checks { margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); }
.cb-checks summary { cursor: pointer; font-weight: 600; }
.cb-checks ul { margin: 6px 0 0; padding-left: 18px; }
.cb-checks li { margin: 2px 0; }
.cb-checks li.bad { color: var(--danger-fg); }
.cb-checks li.warn { color: var(--warning-fg); }
.cb-checks li.info { color: var(--text-secondary); }
.cb-checks li[data-line] { cursor: pointer; text-decoration: underline dotted; }
.cb-checks.ok { border-color: var(--success-border); background: var(--success-bg); color: var(--success-fg); }

/* 图例 */
.cb-legend { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--text-secondary); margin: 0 0 6px; }
.cb-legend i { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: -2px; margin-right: 4px; border: 1px solid var(--border); }
.cb-legend .sw-new { background: color-mix(in srgb, var(--a-200) 70%, var(--n-0)); }
.cb-legend .sw-seen { background: color-mix(in srgb, var(--r-200) 45%, var(--n-0)); }
.cb-legend .sw-auto { background: var(--n-50); }
.cb-legend .sw-red { background: var(--surface); border-color: var(--danger-fg); }

/* 表：限高一屏的滚动框里表头吸顶，编号 + 品名吸左 */
.cb-scroll { overflow: auto; max-height: calc(100vh - 150px); border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
table.cb-table { border-collapse: separate; border-spacing: 0; width: max-content; }
.cb-table th, .cb-table td { border-right: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); padding: 0; vertical-align: middle; }
.cb-table th { position: sticky; top: 0; z-index: 3; background: var(--surface-sunken); font-weight: 600; font-size: 12px; padding: 6px 6px; text-align: center; line-height: 1.3; white-space: normal; }
.cb-table th.req { color: var(--danger-fg); }
.cb-table th.fac { background: color-mix(in srgb, var(--g-100) 60%, var(--surface-sunken)); }
.cb-table .stick1 { position: sticky; left: 0; z-index: 2; background: var(--surface); }
.cb-table .stick2 { position: sticky; left: 40px; z-index: 2; background: var(--surface); box-shadow: 1px 0 0 var(--border-strong); }
.cb-table th.stick1, .cb-table th.stick2 { z-index: 4; background: var(--surface-sunken); }
.cb-table td.seq { width: 40px; min-width: 40px; text-align: center; color: var(--text-secondary); }
.cb-table tbody tr:hover td { background: var(--surface-hover); }
.cb-table tbody tr.flash td { animation: cbflash 1.6s ease-out; }
@keyframes cbflash { from { background: var(--accent-soft-bg); } }
.cb-cell { box-sizing: border-box; min-width: 0; border: 1px solid transparent; background: transparent; font: inherit; color: var(--text-primary); padding: 6px 6px; text-align: center; border-radius: 0; }
.cb-cell:hover { border-color: var(--border-control); }
.cb-cell:focus { border-color: var(--accent); background: var(--surface); outline: none; }
td.auto { background: var(--n-50); }
td.auto .cb-cell { color: var(--text-secondary); }
td.seen { background: color-mix(in srgb, var(--r-200) 45%, var(--n-0)); }
td.seen .cb-cell { color: var(--text-primary); }
td.new { background: color-mix(in srgb, var(--a-200) 70%, var(--n-0)); }
td.miss .cb-cell { border: 1px dashed var(--warning-border); }
td.calc { text-align: center; padding: 6px 8px; white-space: nowrap; color: var(--text-secondary); }
td.calc.bad { color: var(--danger-fg); font-weight: 600; }
td.calc.good { color: var(--success-fg); }
td.calc.low { color: var(--text-muted); }
td.fac { background: color-mix(in srgb, var(--g-50) 70%, var(--surface)); }
/* 品名列吸左要白底，黄 / 粉底要盖过它 */
.cb-table td.stick2.new { background: color-mix(in srgb, var(--a-200) 70%, var(--n-0)); }
.cb-table td.stick2.seen { background: color-mix(in srgb, var(--r-200) 45%, var(--n-0)); }
.cb-table td.stick2.auto { background: var(--n-50); }
.cb-table tbody tr:hover td.stick2 { background: var(--surface-hover); }
.cb-name { display: flex; align-items: center; gap: 4px; padding-left: 4px; }
.cb-name img { width: 26px; height: 26px; object-fit: contain; border-radius: 4px; background: var(--surface); flex: none; }
.cb-del { border: none; background: none; color: var(--text-muted); cursor: pointer; font-size: 16px; padding: 4px 8px; }
.cb-del:hover { color: var(--danger-fg); }
.cb-fix { display: block; margin: 2px auto 0; }
.cb-table tfoot td { position: sticky; bottom: 0; z-index: 1; background: var(--surface-sunken); font-weight: 600; text-align: center; padding: 6px 6px; white-space: nowrap; }
.cb-table tfoot td.stick1, .cb-table tfoot td.stick2 { z-index: 3; background: var(--surface-sunken); }

/* 下面：加货 */
.cb-add { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 10px 0; }
.cb-add .cb-in { width: 140px; }
.cb-paste { margin: 0 0 10px; display: flex; flex-direction: column; gap: 6px; max-width: 760px; }
.cb-paste textarea { min-height: 110px; font-family: ui-monospace, Menlo, monospace; }
.cb-paste small { color: var(--text-muted); }

.cb-how { margin-top: 12px; color: var(--text-secondary); }
.cb-how summary { cursor: pointer; }
.cb-how li { margin: 3px 0; }

@media (max-width: 760px) {
  .cb-app { padding: 10px 10px 30px; }
  .cb-foot { grid-template-columns: 1fr; }
  .cb-actions { margin-left: 0; }
  .cb-in, .cb-cell { font-size: 16px; }
}