/* Editor UI. The PI template itself lives in invoice.css. */
:root {
  --brand: #1f4e79;
  --brand-600: #193f63;
  --brand-700: #12304d;
  --brand-50: #edf3f9;
  --brand-100: #d9e6f2;
  --bg: #eef2f7;
  --stage: #e2e8ef;
  --surface: #fff;
  --surface-2: #f6f9fc;
  --line: #d8e1ea;
  --line-strong: #b9c7d5;
  --text: #1b2733;
  --text-2: #45566a;
  --muted: #6c7b8b;
  --ok: #1d7a46;
  --ok-bg: #e6f4ec;
  --warn: #935400;
  --warn-bg: #fff4de;
  --warn-line: #e9b44c;
  --danger: #b42318;
  --danger-bg: #fdeceb;
  --focus: 0 0 0 3px rgba(31, 78, 121, .2);
  --form-w: 620px;
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  height: 100vh; overflow: hidden; display: flex; flex-direction: column;
  background: var(--bg); color: var(--text); font: 14px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; }
[hidden] { display: none !important; }
.ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
kbd { font: 11px/1 var(--font); padding: 2px 4px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 4px; background: #fff; color: var(--text-2); }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 34px; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 7px;
  background: #fff; color: var(--brand); font-size: 13px; font-weight: 500; line-height: 1.2;
  cursor: pointer; white-space: nowrap; transition: background-color .12s, border-color .12s, color .12s, box-shadow .12s;
}
.btn:hover { background: var(--brand-50); border-color: #9fb3c6; }
.btn:focus-visible { outline: none; box-shadow: var(--focus); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-600); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--brand-50); }
.btn.small { min-height: 28px; padding: 4px 9px; font-size: 12.5px; }
.btn.icon { padding: 0; width: 28px; min-height: 28px; }
.link-btn { border: 0; background: none; padding: 0 2px; color: var(--brand); font-size: 12px; cursor: pointer; text-decoration: underline; text-decoration-color: rgba(31,78,121,.35); text-underline-offset: 2px; }
.link-btn:hover { text-decoration-color: var(--brand); }
.link-btn:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 3px; }

/* ---------- top bar ---------- */
.topbar {
  flex: none; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 16px; background: var(--brand); color: #fff;
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; margin-right: auto; }
.brand-logo { width: 72px; height: 38px; object-fit: contain; background: #fff; border-radius: 5px; padding: 2px; }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-text h1 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: .2px; white-space: nowrap; }
.save-state { font-size: 11.5px; color: #b9cde0; }
.save-state[data-state="error"] { color: #ffd3cf; }
.top-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.action-group { display: flex; align-items: center; gap: 4px; }
.action-group + .action-group { padding-left: 10px; border-left: 1px solid rgba(255,255,255,.18); }
.btn.ghost-light { background: transparent; border-color: transparent; color: #d7e4f0; }
.btn.ghost-light:hover { background: rgba(255,255,255,.1); color: #fff; }
.btn.light { background: transparent; border-color: rgba(255,255,255,.4); color: #fff; }
.btn.light:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.6); }
.btn.accent { background: #fff; border-color: #fff; color: var(--brand); font-weight: 600; }
.btn.accent:hover { background: var(--brand-50); }
.topbar .btn:focus-visible { box-shadow: 0 0 0 3px rgba(255,255,255,.45); }
.view-switch { display: none; }

/* ---------- layout ---------- */
.workspace {
  flex: 1 1 auto; min-height: 0; display: grid; overflow: hidden;
  grid-template-columns: minmax(420px, var(--form-w)) 10px minmax(0, 1fr);
}
.form-panel, .preview-panel { min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.form-panel { padding: 0 14px 24px 16px; scroll-padding-top: 52px; }
.preview-panel { background: var(--stage); }
.splitter { cursor: col-resize; position: relative; background: var(--bg); }
.splitter::after { content: ""; position: absolute; top: 0; bottom: 0; left: 4px; width: 2px; background: var(--line); transition: background-color .12s; }
.splitter:hover::after, .splitter:focus-visible::after, .splitter.dragging::after { background: var(--brand); }
.splitter:focus-visible { outline: none; }
body.resizing { cursor: col-resize; user-select: none; }

/* ---------- step nav & locked banner (sticky above the cards) ---------- */
.form-sticky { position: sticky; top: 0; z-index: 5; padding: 10px 0 8px; margin-bottom: 4px; background: var(--bg); }
.step-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.step-nav a {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  color: var(--text-2); font-size: 12.5px; text-decoration: none; background: #fff; border: 1px solid var(--line);
}
.step-nav a:hover { border-color: #9fb3c6; color: var(--brand); }
.step-nav a.active { border-color: var(--brand); color: var(--brand); background: var(--brand-50); }
.step-nav .dot { width: 7px; height: 7px; border-radius: 50%; background: #c3ceda; }
.step-nav a[data-status="done"] .dot { background: var(--ok); }
.step-nav a[data-status="warn"] .dot { background: var(--warn-line); }
.step-nav a[data-status="off"] .dot { background: transparent; border: 1px solid #b4c1ce; }
.step-nav .count { font-weight: 600; color: var(--brand); font-size: 12px; }
.step-nav .count:empty { display: none; }
.doc-banner {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 8px; padding: 7px 8px 7px 12px;
  border: 1px solid var(--warn-line); border-radius: 9px; background: var(--warn-bg); color: #6b4300; font-size: 12.5px; line-height: 1.45;
}
.doc-banner > .ic { color: var(--warn); }
.doc-banner[data-status="confirmed"] { border-color: #9fd3b4; background: var(--ok-bg); color: #145c34; }
.doc-banner[data-status="confirmed"] > .ic { color: var(--ok); }
.doc-banner[data-status="void"] { border-color: #e7b4ae; background: var(--danger-bg); color: #8f1d14; }
.doc-banner[data-status="void"] > .ic { color: var(--danger); }
.doc-banner-text { flex: 1 1 200px; min-width: 0; }
.doc-banner-actions { display: flex; flex-wrap: wrap; gap: 4px; }
body[data-locked="true"] .form-panel > .card { opacity: .7; }
.doc-chip {
  margin-left: auto; padding: 1px 10px; border: 1px solid var(--line); border-radius: 999px; background: #f1f4f8;
  color: var(--text-2); font-size: 12px; line-height: 20px; white-space: nowrap; cursor: pointer;
}
.doc-chip:hover { border-color: #9fb3c6; color: var(--brand); }
.doc-chip:focus-visible { outline: none; box-shadow: var(--focus); }
.doc-chip[data-status="issued"] { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.doc-chip[data-status="confirmed"] { background: var(--ok-bg); border-color: #9fd3b4; color: var(--ok); }
.doc-chip[data-status="void"] { background: var(--danger-bg); border-color: #e7b4ae; color: var(--danger); }

/* ---------- cards & fields ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px 16px; margin-bottom: 12px; }
.card-head { display: flex; align-items: center; gap: 8px; margin: -2px 0 12px; min-height: 28px; }
.card-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap; }
.card-head h2 .sub { font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 2px; }
.num { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 12px; font-weight: 600; }
/* Card numbers count only the cards shown (the 条款 card exists in the new template only). */
.form-panel { counter-reset: card; }
.form-panel > .card { counter-increment: card; }
.card-head .num::before { content: counter(card); }
.card-tools { margin-left: auto; display: flex; gap: 2px; flex-wrap: wrap; }
.card-tools.inline { margin: 0 0 10px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; min-width: 0; }
.field > label, .label-row label, .pf > label { font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.tag {
  display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 4px; background: #eef2f6;
  color: #66778a; font-size: 10.5px; font-weight: 500; line-height: 17px; letter-spacing: .1px; white-space: nowrap; vertical-align: 1px;
}
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
  width: 100%; min-width: 0; min-height: 34px; padding: 6px 9px; border: 1px solid var(--line-strong); border-radius: 6px;
  background: #fff; color: var(--text); font: inherit; font-size: 14px; line-height: 1.4;
  transition: border-color .12s, box-shadow .12s, background-color .3s;
}
textarea { resize: vertical; min-height: 58px; line-height: 1.45; }
select { cursor: pointer; padding-right: 4px; }
input:hover, textarea:hover, select:hover { border-color: #9fb1c4; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus); }
input::placeholder, textarea::placeholder { color: #9aa8b6; }
input[type="date"] { padding-right: 6px; }
.input-group { display: flex; gap: 6px; }
.input-group input { flex: 1; }
.input-group .btn { min-height: 34px; }
.subgroup { border: 0; border-top: 1px dashed var(--line); margin: 4px 0 0; padding: 12px 0 0; min-width: 0; }
.subgroup legend { padding: 0 8px 0 0; font-size: 13px; font-weight: 600; color: var(--brand); }
.legend-note { margin-left: 6px; font-size: 11.5px; font-weight: 400; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip {
  min-height: 24px; padding: 1px 10px; border: 1px solid var(--line); border-radius: 999px; background: #fff;
  color: var(--text-2); font-size: 12px; cursor: pointer;
}
.chip:hover { border-color: #9fb3c6; color: var(--brand); }
.chip.on { border-color: var(--brand); background: var(--brand-50); color: var(--brand); font-weight: 600; }
.chip:focus-visible { outline: none; box-shadow: var(--focus); }
.hint { margin: 0 0 10px; font-size: 12px; color: var(--muted); line-height: 1.5; }
.form-foot { margin: 4px 2px 0; font-size: 12px; color: var(--muted); }
.flash { animation: flash 1.6s ease-out; }
@keyframes flash { 0%, 35% { background-color: #fff3c4; border-color: #e2b23a; } 100% { background-color: #fff; } }

/* ---------- smart paste ---------- */
.smart-panel { margin: 0 0 12px; padding: 10px 12px 12px; border: 1px dashed var(--line-strong); border-radius: 8px; background: var(--surface-2); }
.smart-panel > label { display: block; margin-bottom: 6px; font-size: 12.5px; color: var(--text-2); }
.btn-row { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.smart-msg { margin-top: 8px; font-size: 12px; line-height: 1.7; }
.smart-msg:empty { display: none; }
.smart-msg .ok { color: var(--ok); }
.smart-msg .warn { color: var(--warn); }

/* ---------- presets ---------- */
.preset-bar { position: relative; margin: 0 0 12px; }
.pbar-main { display: flex; gap: 6px; align-items: stretch; }
.pbar-pick {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 5px 10px;
  border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); color: var(--text); cursor: pointer; text-align: left;
}
.pbar-pick:hover { border-color: #9fb3c6; background: var(--brand-50); }
.pbar-pick:focus-visible { outline: none; box-shadow: var(--focus); }
.pbar-pick .ic { color: var(--brand); }
.pbar-title { font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.pbar-current { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 13px; }
.pbar-current.empty { font-weight: 400; color: var(--muted); }
.pbar-dirty { color: var(--warn); font-size: 12px; white-space: nowrap; }
.pbar-count { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.pbar-status { min-height: 0; margin-top: 4px; font-size: 12px; color: var(--text-2); }
.pbar-status:empty { display: none; }
.pbar-status[data-error="true"] { color: var(--danger); }
.pbar-pop, .pbar-name {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
  background: #fff; border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 12px 32px rgba(16, 32, 52, .16); padding: 8px;
}
.pbar-search { margin-bottom: 6px; }
.pbar-list { max-height: 280px; overflow-y: auto; }
.pbar-empty { padding: 14px 8px; color: var(--muted); font-size: 12.5px; text-align: center; }
.pbar-item { display: flex; align-items: stretch; gap: 4px; border-radius: 7px; }
.pbar-item + .pbar-item { margin-top: 2px; }
.pbar-item[data-active="true"] { background: var(--brand-50); }
.pbar-load { flex: 1; min-width: 0; padding: 6px 8px; border: 0; background: transparent; border-radius: 7px; text-align: left; cursor: pointer; color: var(--text); }
.pbar-load:hover, .pbar-load:focus-visible { background: var(--brand-50); outline: none; }
.pbar-load strong { display: block; font-size: 13px; overflow-wrap: anywhere; }
.pbar-load small { display: block; font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere; }
.pbar-del { align-self: center; border: 0; background: transparent; color: #8a97a5; width: 28px; height: 28px; border-radius: 6px; cursor: pointer; display: grid; place-items: center; }
.pbar-del:hover, .pbar-del:focus-visible { color: var(--danger); background: var(--danger-bg); outline: none; }
.pbar-foot { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-top: 6px; padding: 6px 4px 0; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--muted); }
.pbar-name label { display: block; font-size: 12.5px; color: var(--text-2); margin-bottom: 6px; }
.pbar-name .row { display: flex; gap: 6px; }

/* ---------- rates & columns ---------- */
.rate-bar { display: flex; flex-direction: column; gap: 8px; padding: 9px 12px; margin-bottom: 10px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); }
.rate-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
.rate-title { min-width: 56px; font-size: 12.5px; font-weight: 600; color: var(--brand); }
.rate input[type="date"] { width: 150px; min-height: 30px; padding: 3px 6px; text-align: left; }
.rate-hint { margin: 0; font-size: 12px; color: var(--muted); }
.rate { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); white-space: nowrap; }
.rate input { width: 96px; min-height: 30px; padding: 4px 8px; text-align: right; font-variant-numeric: tabular-nums; }
.col-settings { margin-bottom: 10px; border: 1px solid var(--line); border-radius: 8px; }
.col-settings summary { display: flex; align-items: center; gap: 6px; padding: 7px 12px; cursor: pointer; font-size: 13px; color: var(--text-2); list-style: none; }
.col-settings summary::-webkit-details-marker { display: none; }
.col-settings summary .ic { color: var(--brand); }
.col-settings summary .chev { margin-left: auto; color: var(--muted); transition: transform .15s; }
.col-settings[open] summary .chev { transform: rotate(180deg); }
.col-settings summary:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 8px; }
.col-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 12px 8px; }
.col-chips .chip { display: inline-flex; align-items: center; gap: 4px; }
.col-chips .chip .ic { width: 13px; height: 13px; }
.col-chips .chip:not(.on) .ic { opacity: 0; }
.col-settings .hint { padding: 0 12px 8px; margin: 0; }

/* ---------- product rows ---------- */
.prod-list { display: flex; flex-direction: column; gap: 10px; }
.prod-card {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px;
  padding: 10px 12px 0; border: 1px solid var(--line); border-radius: 10px; background: #fff; transition: border-color .15s, box-shadow .15s;
}
.prod-card:focus-within { border-color: #9fb3c6; box-shadow: 0 2px 10px rgba(16, 32, 52, .06); }
.prod-card.drag-over { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(31, 78, 121, .18); }
.prod-card.is-new { animation: rowIn .25s ease-out; }
@keyframes rowIn { from { opacity: 0; transform: translateY(-4px); } }
.prod-media { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-bottom: 10px; }
.prod-no { min-width: 26px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--brand-50); color: var(--brand); font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; }
.img-box {
  position: relative; width: 78px; height: 78px; padding: 0; border: 1.5px dashed var(--line-strong); border-radius: 8px;
  background: var(--surface-2); color: var(--muted); cursor: pointer; overflow: hidden; display: grid; place-items: center;
}
.img-box:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-50); }
.img-box:focus-visible { outline: none; box-shadow: var(--focus); border-color: var(--brand); }
.img-box.has-img { border-style: solid; border-color: var(--line); background: #fff; }
.img-box img { width: 100%; height: 100%; object-fit: contain; display: block; }
.img-box .ph { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; line-height: 1.25; text-align: center; }
.img-box .ph .ic { width: 18px; height: 18px; }
.img-box.loading::after { content: "读取中…"; position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255,255,255,.85); font-size: 11px; color: var(--brand); }
.img-clear {
  position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border: 0; border-radius: 50%;
  background: rgba(27, 39, 51, .7); color: #fff; display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .12s;
}
.img-clear .ic { width: 12px; height: 12px; }
.img-wrap { position: relative; }
.img-wrap:hover .img-clear, .img-clear:focus-visible { opacity: 1; }
.prod-main { min-width: 0; }
.prod-actions { display: flex; flex-direction: column; gap: 2px; margin: 0 -6px 10px 0; padding-left: 6px; border-left: 1px solid #edf1f5; align-self: start; }
.act {
  width: 26px; height: 26px; border: 0; border-radius: 6px; background: transparent; color: #8593a2;
  display: grid; place-items: center; cursor: pointer;
}
.act:hover:not(:disabled) { background: var(--brand-50); color: var(--brand); }
.act.del:hover:not(:disabled) { background: var(--danger-bg); color: var(--danger); }
.act:disabled { opacity: .3; cursor: default; }
.act:focus-visible { outline: none; box-shadow: var(--focus); }
.prod-fields { display: flex; flex-direction: column; gap: 8px; padding-bottom: 10px; }
.pf-row { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.pf { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pf > label { display: flex; align-items: center; gap: 4px; height: 18px; white-space: nowrap; }
.pf .note { font-size: 11px; font-weight: 400; color: var(--muted); }
.pf-name { flex: 3 1 180px; }
.pf-model { flex: 2 1 110px; }
.pf-desc { flex: 1 1 100%; }
.pf-cat { flex: 0 1 78px; }
.pf-catx { flex: 1 1 110px; }
.pf-unit { flex: 1.6 1 118px; }
.pf-qty { flex: 1 1 70px; }
.pf-price { flex: 1 1 86px; }
.pf-pcs, .pf-gw, .pf-nw { flex: 1 1 64px; }
.pf-size { flex: 1.6 1 120px; }
.pack-toggle { display: inline-flex; align-items: center; gap: 5px; color: var(--text-2); text-decoration: none; }
.pack-toggle .ic { width: 14px; height: 14px; color: var(--brand); }
.pack-toggle:hover { color: var(--brand); }
.pf input, .pf select { padding-left: 8px; padding-right: 8px; }
.pf select { padding-right: 2px; }
.pf input.num-input { text-align: right; font-variant-numeric: tabular-nums; }
.pf input.is-warn, input.is-warn { border-color: var(--warn-line); background: var(--warn-bg); }
.prod-calc {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 14px;
  margin: 0 -12px; padding: 6px 12px; border-top: 1px solid #e3eaf2; border-radius: 0 0 10px 10px;
  background: #f5f8fb; color: var(--text-2); font-size: 12px; font-variant-numeric: tabular-nums;
}
.prod-calc b { color: var(--brand); font-weight: 600; }
.prod-calc .warn { color: var(--warn); display: inline-flex; align-items: center; gap: 4px; }
.prod-calc .warn .ic { width: 13px; height: 13px; }
.prod-calc .pack-sum { display: inline-flex; align-items: center; gap: 4px; }
.prod-calc .pack-sum .ic { width: 13px; height: 13px; color: var(--brand); }
.prod-empty { padding: 22px 16px; border: 1.5px dashed var(--line-strong); border-radius: 10px; text-align: center; color: var(--muted); font-size: 13px; background: var(--surface-2); }
.prod-empty strong { display: block; margin-bottom: 4px; color: var(--text-2); font-size: 14px; }
.prod-add { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-top: 10px; padding: 8px; border: 1.5px dashed transparent; border-radius: 10px; transition: border-color .15s, background-color .15s; }
.prod-add.drag-over { border-color: var(--brand); background: var(--brand-50); }
.prod-add .hint { margin: 0; }
.add-row { border-style: dashed; }

/* ---------- freight & totals ---------- */
.freight-box { margin-top: 12px; padding: 10px 12px 2px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.freight-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.freight-title { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text); }
.freight-title .ic { color: var(--brand); }
.freight-head .link-btn { margin-left: auto; }
.badge { padding: 1px 8px; border-radius: 999px; font-size: 11.5px; line-height: 18px; background: #e9eef3; color: var(--muted); }
.badge.on { background: var(--ok-bg); color: var(--ok); }
.freight-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) minmax(0, .7fr) minmax(0, 1fr); gap: 0 10px; }
.freight-grid input[data-num] { text-align: right; font-variant-numeric: tabular-nums; }
.calc-line { margin: -2px 0 8px; font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.grand-total {
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px;
  margin-top: 12px; padding: 10px 14px; border-radius: 9px; background: var(--brand); color: #fff; font-variant-numeric: tabular-nums;
}
.grand-total .gt-label { font-size: 13px; color: #c9d9e9; }
.grand-total .gt-values { display: flex; gap: 14px; flex-wrap: wrap; font-weight: 600; font-size: 15px; }
.grand-total .gt-ref { font-weight: 400; opacity: .78; font-size: 14px; }
.grand-total .gt-extra { flex-basis: 100%; font-size: 12px; color: #c9d9e9; }
.adjust-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 0 12px; }
.adjust-box .calc-line { line-height: 1.6; }
.adjust-box .calc-line b { color: var(--brand); }
.adjust-box .calc-line .warn { color: var(--warn); }
.sign-settings { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 4px; }
.stamp-box { display: flex; align-items: center; gap: 10px; }
.stamp-box img { height: 44px; max-width: 120px; object-fit: contain; padding: 2px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }

/* ---------- collapsible cards ---------- */
.collapsible .card-head { margin-bottom: 0; gap: 10px; }
.collapsible[data-collapsed="false"] .card-head { margin-bottom: 12px; }
.collapse-btn {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 2px 0; border: 0; background: none;
  color: inherit; text-align: left; cursor: pointer;
}
.collapse-btn:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }
.collapse-btn .summary { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--muted); }
.collapse-btn .chev { color: var(--muted); transition: transform .15s; }
.collapsible[data-collapsed="false"] .collapse-btn .chev { transform: rotate(180deg); }
.collapsible[data-collapsed="false"] .collapse-btn .summary { visibility: hidden; }
.collapsible[data-collapsed="true"] .card-body { display: none; }
.switch { position: relative; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { position: relative; width: 32px; height: 18px; border-radius: 9px; background: #c3ceda; transition: background-color .15s; }
.switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.switch input:checked + .switch-track { background: var(--brand); }
.switch input:checked + .switch-track::after { transform: translateX(14px); }
.switch input:focus-visible + .switch-track { box-shadow: var(--focus); }

/* ---------- preview ---------- */
.preview-toolbar {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px;
  padding: 9px 16px; background: rgba(226, 232, 239, .94); backdrop-filter: blur(6px); border-bottom: 1px solid #d3dce6;
}
.preview-tip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); }
.preview-tip .ic { color: var(--brand); width: 14px; height: 14px; }
.preview-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stepper { display: inline-flex; align-items: center; gap: 4px; }
.stepper-label { font-size: 12.5px; color: var(--text-2); margin-right: 2px; }
.stepper input { width: 44px; min-height: 28px; padding: 3px 4px; text-align: center; font-size: 13px; }
.seg { display: inline-flex; padding: 2px; border-radius: 8px; background: #d3dce6; }
.seg button { min-height: 26px; padding: 3px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--text-2); font-size: 12.5px; cursor: pointer; }
.seg button[aria-checked="true"] { background: #fff; color: var(--brand); font-weight: 600; box-shadow: 0 1px 2px rgba(16,32,52,.12); }
.seg button:focus-visible { outline: none; box-shadow: var(--focus); }
.seg-sm { background: #dfe6ee; }
.seg-sm button { min-height: 24px; padding: 2px 12px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
body[data-template="v1"] .v2-only { display: none !important; }
.valid-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.valid-row .days-input { width: 72px; text-align: right; }
.valid-text { font-size: 13px; color: var(--text-2); }
.valid-text b { color: var(--text); font-weight: 600; }
.label-actions { display: inline-flex; gap: 10px; }
.field-hint { margin: 2px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.field-hint b { color: var(--text-2); font-weight: 600; }
.field-hint.warn { color: var(--warn); }
.paper-stage { padding: 18px 16px 28px; }
.paper-fit { margin: 0 auto; }
.paper-scale { width: 900px; transform-origin: 0 0; }
@media screen {
  .invoice { box-shadow: 0 1px 2px rgba(16, 32, 52, .06), 0 8px 28px rgba(16, 32, 52, .08); }
  .invoice [data-f] { cursor: pointer; transition: background-color .2s; }
  .invoice td[data-f]:hover, .invoice div[data-f]:hover, .invoice tr[data-f]:hover > td { background-color: #eef4fb; }
  .invoice .is-hot, .invoice tr.is-hot > td { background-color: #fff3c4 !important; }
}

/* ---------- toasts & dialogs ---------- */
.toasts { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 12px; max-width: min(560px, calc(100vw - 32px));
  padding: 9px 10px 9px 14px; border-radius: 9px; background: #1d2a37; color: #fff; font-size: 13px; box-shadow: 0 10px 30px rgba(10, 20, 30, .25);
  animation: toastIn .18s ease-out;
}
.toast[data-type="error"] { background: #8f1d14; }
.toast .toast-msg { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.toast button, .toast a { flex: none; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 6px; cursor: pointer; text-decoration: none; }
.toast button:hover, .toast a:hover { background: rgba(255,255,255,.24); }
.toast .toast-x { background: transparent; padding: 4px; display: grid; place-items: center; color: #b5c2cf; }
@keyframes toastIn { from { opacity: 0; transform: translateY(6px); } }
.dialog { width: min(460px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 12px; box-shadow: 0 24px 60px rgba(10, 20, 30, .3); color: var(--text); }
.dialog.wide { width: min(860px, calc(100vw - 32px)); }
.dialog::backdrop { background: rgba(16, 28, 40, .45); }
.dialog form { padding: 18px 20px 16px; }
.dialog h3 { margin: 0 0 8px; font-size: 16px; }
.dialog-body { font-size: 13.5px; color: var(--text-2); line-height: 1.6; }
.dialog-body ul { margin: 6px 0 0; padding-left: 18px; }
.dialog-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.dialog-actions .spacer { flex: 1; }
.check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.paste-preview { margin-top: 10px; max-height: 300px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.paste-preview:empty { display: none; }
.paste-preview table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.paste-preview th, .paste-preview td { border-bottom: 1px solid var(--line); padding: 5px 8px; text-align: left; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.paste-preview th { position: sticky; top: 0; background: var(--surface-2); z-index: 1; }
.paste-preview select { min-height: 28px; padding: 2px 4px; font-size: 12.5px; }
.paste-preview .skip td { color: #a5b1bd; text-decoration: line-through; }
.paste-meta { display: flex; align-items: center; gap: 12px; padding: 8px 10px; font-size: 12.5px; color: var(--text-2); background: var(--surface-2); border-bottom: 1px solid var(--line); position: sticky; left: 0; }

/* ---------- 单据列表 ---------- */
.docs-wrap { padding: 16px 18px 12px; }
.docs-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.docs-head h3 { margin: 0; }
.docs-head .btn { margin-left: auto; }
.docs-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.docs-tools input { flex: 1 1 220px; }
.docs-list { max-height: min(60vh, 540px); overflow-y: auto; border: 1px solid var(--line); border-radius: 9px; }
.doc-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.doc-row:last-child { border-bottom: 0; }
.doc-row[data-current="true"] { background: var(--brand-50); }
.doc-main { flex: 1; min-width: 0; }
.doc-line1 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; font-size: 13.5px; }
.doc-line1 strong { font-variant-numeric: tabular-nums; }
.doc-buyer { min-width: 0; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.doc-total { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.doc-line2 { margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted); }
.doc-current { padding: 0 5px; border: 1px solid var(--brand-100); border-radius: 4px; font-size: 11px; color: var(--brand); }
.doc-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px; max-width: 52%; }
.doc-badge { flex: none; padding: 0 7px; border-radius: 999px; background: #e9eef3; color: var(--muted); font-size: 11px; line-height: 18px; }
.doc-badge[data-status="issued"] { background: var(--warn-bg); color: var(--warn); }
.doc-badge[data-status="confirmed"] { background: var(--ok-bg); color: var(--ok); }
.doc-badge[data-status="void"] { background: var(--danger-bg); color: var(--danger); }
.docs-foot { margin: 8px 2px 0; }

/* ---------- suggestions ---------- */
.suggest {
  position: fixed; z-index: 60; max-height: 320px; overflow-y: auto; padding: 4px;
  background: #fff; border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 12px 32px rgba(16, 32, 52, .18);
}
.suggest-head { padding: 4px 8px 2px; font-size: 11.5px; color: var(--muted); }
.suggest-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; cursor: pointer; }
.suggest-item[aria-selected="true"] { background: var(--brand-50); }
.suggest-item img, .suggest-item .noimg { width: 34px; height: 34px; flex: none; object-fit: contain; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--line); }
.suggest-text { flex: 1; min-width: 0; }
.suggest-text strong { display: block; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-text small { display: block; font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-del { flex: none; width: 24px; height: 24px; border: 0; border-radius: 5px; background: transparent; color: #98a5b2; display: grid; place-items: center; cursor: pointer; }
.suggest-del:hover { background: var(--danger-bg); color: var(--danger); }
.suggest-del .ic { width: 13px; height: 13px; }

/* ---------- narrow screens: one panel at a time ---------- */
@media (max-width: 1000px) {
  body { height: auto; min-height: 100vh; overflow: auto; }
  .brand-text h1 { font-size: 14px; }
  .view-switch {
    display: inline-flex; position: fixed; z-index: 40; left: 50%; bottom: 14px; transform: translateX(-50%);
    padding: 3px; border-radius: 999px; background: #1d2a37; box-shadow: 0 8px 24px rgba(10, 20, 30, .3);
  }
  .view-switch button { min-width: 92px; min-height: 38px; border: 0; border-radius: 999px; background: transparent; color: #c9d6e3; font-size: 14px; cursor: pointer; }
  .view-switch button[aria-selected="true"] { background: #fff; color: var(--brand); font-weight: 600; }
  .view-switch button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255,255,255,.45); }
  .form-panel { padding-bottom: 84px; }
  .paper-stage { padding-bottom: 84px; }
  .toasts { bottom: 72px; }
  .top-actions { order: 2; }
  .action-group:first-child .btn span { display: none; }
  .workspace { display: block; overflow: visible; }
  .form-panel, .preview-panel { overflow: visible; }
  .splitter { display: none; }
  body[data-view="edit"] .preview-panel { display: none; }
  body[data-view="preview"] .form-panel { display: none; }
  .preview-panel { min-height: calc(100vh - 120px); }
  .form-sticky { top: 0; }
}
@media (max-width: 560px) {
  .form-panel { padding: 0 10px 20px; }
  .card { padding: 12px; }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .freight-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .top-actions { width: 100%; justify-content: space-between; }
  .action-group + .action-group { border-left: 0; padding-left: 0; }
  .action-group:last-child .btn:not(.accent) span { display: none; }
  .img-box { width: 64px; height: 64px; }
  .pbar-title { display: none; }
  .adjust-grid { grid-template-columns: minmax(0, 1fr); }
  .doc-row { flex-direction: column; align-items: stretch; }
  .doc-actions { max-width: none; justify-content: flex-start; }
}

/* ---------- print: only the PI ---------- */
@media print {
  body { height: auto; overflow: visible; display: block; background: #fff; }
  .topbar, .form-panel, .splitter, .preview-toolbar, .toasts, .suggest, dialog { display: none !important; }
  .workspace { display: block; overflow: visible; }
  .preview-panel { overflow: visible; background: #fff; display: block !important; }
  .paper-stage { padding: 0; }
  .paper-fit, .paper-scale { width: auto !important; height: auto !important; transform: none !important; }
  .invoice { box-shadow: none !important; }

  /* v2: same line breaks as the on-screen paper (834px content), scaled to the 194mm printable width.
     The @page size and margins are set by js/app.js (A4 pages or one long page). */
  body[data-template="v2"] .paper-scale { width: 834px !important; zoom: 0.879; }
  body[data-template="v2"] .invoice { padding: 0; border: none; font-size: var(--invoice-font-size, 14px); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body[data-template="v2"] .invoice .pi-title { font-size: 22px; }
  body[data-template="v2"] .invoice thead { display: table-header-group; }
  body[data-template="v2"] .invoice tr,
  body[data-template="v2"] .invoice .invoice-brand,
  body[data-template="v2"] .invoice .rate-note,
  body[data-template="v2"] .invoice .terms li,
  body[data-template="v2"] .invoice .bank,
  body[data-template="v2"] .invoice table.sign { break-inside: avoid; }
  body[data-template="v2"] .invoice tr.allfee,
  body[data-template="v2"] .invoice tr.sumrow,
  body[data-template="v2"] .invoice .rate-note { break-before: avoid; }
  body[data-template="v2"] .invoice .section-title { break-after: avoid; }
}