:root {
  --ink: #121813;
  --muted: #657069;
  --line: #d9dfda;
  --paper: #ffffff;
  --page: #eef2ee;
  --green: #294d35;
  --green-soft: #e7eee8;
  --gold: #b79550;
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  color: var(--ink);
  background: var(--page);
  font-synthesis: none;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 15% 0%, rgba(255,255,255,.9), transparent 32rem),
    var(--page);
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  max-width: 1260px;
  margin: 0 auto;
  padding: 42px 28px 26px;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--green);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
}

.page-header h1 { margin: 0; font-family: Georgia, "STSong", serif; font-size: clamp(30px, 4vw, 48px); font-weight: 700; letter-spacing: .02em; }
.page-header p:last-child { margin: 10px 0 0; color: var(--muted); font-size: 14px; }

.size-badge {
  display: grid;
  min-width: 156px;
  padding: 13px 18px;
  border: 1px solid rgba(41,77,53,.25);
  border-radius: 12px;
  background: rgba(255,255,255,.66);
  text-align: right;
}
.size-badge strong { color: var(--green); font-family: Georgia, serif; font-size: 22px; }
.size-badge span { margin-top: 2px; color: var(--muted); font-size: 11px; letter-spacing: .08em; }

.workspace {
  display: grid;
  grid-template-columns: minmax(540px, 740px) minmax(360px, 1fr);
  gap: 28px;
  align-items: start;
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 28px 56px;
}

.editor, .preview {
  border: 1px solid rgba(26,47,33,.12);
  border-radius: 18px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 18px 55px rgba(29,48,35,.08);
  overflow: hidden;
}

.editor__topbar, .preview__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 55px;
  padding: 0 22px;
  border-bottom: 1px solid var(--line);
  background: #f9fbf9;
  font-size: 13px;
}
.editor__topbar > div, .preview__bar > div { display: flex; align-items: center; gap: 9px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.save-state, .preview__bar > span { color: #7a847d; font-size: 10px; letter-spacing: .08em; }
.save-state.is-saved { color: var(--green); }
.preview-switch { display: inline-flex; gap: 3px !important; padding: 3px; border-radius: 8px; background: #e7ece8; }
.preview-switch button { min-height: 27px; padding: 0 9px; border: 0; border-radius: 6px; background: transparent; color: #667069; font-size: 10px; font-weight: 800; }
.preview-switch button.is-active { background: #fff; color: var(--green); box-shadow: 0 2px 7px rgba(30,49,36,.12); }

.form-section { padding: 22px; border-bottom: 1px solid var(--line); }
.section-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.section-heading > span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 7px; background: var(--green); color: #fff; font-family: Georgia, serif; font-size: 11px; }
.section-heading h2 { margin: 0; font-size: 15px; letter-spacing: .04em; }
.section-heading > div { display: grid; gap: 3px; }
.section-heading p { margin: 0; color: var(--muted); font-size: 10px; }

.form-section--ocr { background: linear-gradient(135deg, #f5f9f5, #fff); }
.form-section--ocr .section-heading > span { font-family: Arial, sans-serif; font-size: 9px; letter-spacing: .04em; }
.ocr-dropzone {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 82px;
  padding: 14px;
  border: 1.5px dashed #9baa9e;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color .18s, background .18s, transform .18s;
}
.ocr-dropzone:hover, .ocr-dropzone.is-dragging { border-color: var(--green); background: #f2f7f3; transform: translateY(-1px); }
.ocr-dropzone.is-processing { pointer-events: none; opacity: .72; }
.ocr-dropzone.is-complete { border-style: solid; border-color: var(--green); }
.ocr-dropzone input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.ocr-dropzone__icon { display: grid; place-items: center; flex: 0 0 43px; height: 43px; border-radius: 10px; background: var(--green); color: #fff; font-family: "SimSun", serif; font-size: 20px; font-weight: 800; }
.ocr-dropzone__copy { display: grid; flex: 1; gap: 4px; min-width: 0; }
.ocr-dropzone__copy strong { font-size: 13px; }
.ocr-dropzone__copy small { color: var(--muted); font-size: 10px; line-height: 1.4; }
.ocr-dropzone__action { padding: 7px 10px; border-radius: 7px; background: var(--green-soft); color: var(--green); font-size: 11px; font-weight: 800; white-space: nowrap; }
.ocr-result { display: grid; grid-template-columns: 72px 1fr; gap: 13px; margin-top: 12px; padding: 11px; border-radius: 10px; background: #edf3ee; }
.ocr-result[hidden] { display: none; }
.ocr-result img { width: 72px; height: 54px; border-radius: 6px; object-fit: cover; background: #dfe6e0; }
.ocr-result > div { display: grid; align-content: center; min-width: 0; }
.ocr-result__row { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; }
.ocr-result__row span { color: var(--green); font-weight: 800; }
.ocr-progress { height: 5px; margin-top: 7px; overflow: hidden; border-radius: 99px; background: #d0dbd2; }
.ocr-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--green); transition: width .2s; }
.ocr-result p { margin: 7px 0 0; color: var(--muted); font-size: 10px; line-height: 1.4; }

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: grid; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field > span { color: #606a63; font-size: 12px; font-weight: 700; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid #cdd5cf;
  border-radius: 8px;
  outline: none;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  transition: border-color .15s, box-shadow .15s;
}
.field textarea { min-height: 62px; resize: vertical; line-height: 1.55; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(41,77,53,.1); }
::placeholder { color: #a0a8a2; }

.upload-field {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 10px 13px;
  border: 1px dashed #aab6ad;
  border-radius: 9px;
  background: #f7faf7;
  cursor: pointer;
}
.upload-field input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.upload-icon { display: grid; place-items: center; flex: 0 0 34px; height: 34px; border-radius: 7px; background: var(--green-soft); color: var(--green); font-size: 20px; }
.upload-field > span:last-child { display: grid; gap: 3px; font-size: 12px; }
.upload-field small { color: var(--muted); font-size: 10px; }

.actions { display: flex; gap: 10px; padding: 22px 22px 12px; }
.button { min-height: 43px; padding: 0 17px; border: 1px solid transparent; border-radius: 9px; font-size: 13px; font-weight: 800; }
.button--ghost { border-color: #bdc8c0; background: #fff; color: var(--green); }
.button--quiet { background: transparent; color: #747e77; }
.button--print { display: flex; align-items: center; justify-content: center; gap: 7px; flex: 1; background: var(--green); color: #fff; box-shadow: 0 7px 20px rgba(41,77,53,.18); }
.button--print:hover { background: #1d3b28; }
.button--b5-print { background: #111713; }
.button--b5-print:hover { background: #000; }
.print-tip { margin: 0; padding: 0 22px 22px; color: var(--muted); font-size: 11px; text-align: right; }

.preview { position: sticky; top: 20px; }
.preview__bar { padding-inline: 18px; }
.receipt {
  width: 76mm;
  height: 130mm;
  margin: 26px auto;
  padding: 3.2mm 3.8mm 2.8mm;
  overflow: hidden;
  background: var(--paper);
  color: #000;
  box-shadow: 0 12px 32px rgba(18,25,20,.18), 0 0 0 1px rgba(0,0,0,.08);
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  font-size: 2.8mm;
  line-height: 1.28;
  contain: layout paint;
}

.receipt * { box-sizing: border-box; }
.receipt p, .receipt h2, .receipt figure, .receipt dl, .receipt dd, .receipt dt { margin: 0; }

.receipt__header { display: flex; align-items: center; justify-content: space-between; height: 14.2mm; border-bottom: .75mm solid #000; }
.receipt__brand { display: flex; align-items: center; gap: 2.2mm; min-width: 0; }
.ucii-logo { width: 22mm; height: 11mm; object-fit: cover; object-position: center; filter: grayscale(1) invert(1) contrast(2.8); }
.receipt__brand > div { display: grid; border-left: .5mm solid #000; padding-left: 2mm; }
.receipt__brand strong { font-family: "SimSun", serif; font-size: 4.8mm; font-weight: 900; letter-spacing: .06em; white-space: nowrap; }
.receipt__brand span { margin-top: .6mm; font-family: Arial, sans-serif; font-size: 1.7mm; font-weight: 900; letter-spacing: .07em; }
.blue-hat-logo { width: 9.5mm; height: 9.5mm; object-fit: contain; filter: grayscale(1) contrast(2.8); }

.receipt__order { position: relative; padding: 2.6mm 0 2.4mm; border-bottom: .5mm solid #000; }
.receipt__order-no { display: grid; gap: .5mm; padding-right: 15mm; }
.receipt__order-no span { font-family: Arial, sans-serif; font-size: 2mm; font-weight: 900; letter-spacing: .08em; }
.receipt__order-no strong { min-height: 4.2mm; font-family: Arial, sans-serif; font-size: 3.85mm; font-weight: 900; line-height: 1.15; letter-spacing: .005em; word-break: break-all; }
.receipt__status { position: absolute; top: 3mm; right: 0; padding: 1.1mm 2mm; border: .5mm solid #000; border-radius: 99px; font-size: 2.5mm; font-weight: 900; }
.receipt__meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8mm 3mm; margin-top: 1.9mm !important; }
.receipt__meta-grid > div { display: flex; min-width: 0; }
.receipt__meta-grid dt { flex: 0 0 10mm; font-size: 2.5mm; font-weight: 700; }
.receipt__meta-grid dd { overflow: hidden; font-size: 2.6mm; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }

.receipt__section { padding: 2.6mm 0 2.8mm; border-bottom: .5mm solid #000; }
.receipt__section h2 { display: flex; align-items: center; gap: 1.4mm; font-size: 3.4mm; font-weight: 900; }
.receipt__section h2 > span { display: grid; place-items: center; width: 5mm; height: 5mm; background: #000; color: #fff; font-size: 2.6mm; }

.recipient-line { display: flex; align-items: baseline; gap: 3mm; margin-top: 1.5mm; }
.recipient-line strong { font-size: 3.25mm; }
.recipient-line b { font-family: Arial, sans-serif; font-size: 2.5mm; }
.receipt__recipient > p { min-height: 7mm; margin-top: 1mm; font-size: 2.45mm; font-weight: 700; line-height: 1.38; word-break: break-all; }
.receipt__recipient small { display: block; margin-top: .7mm; color: #343434; font-size: 1.95mm; }

.section-title-row { display: flex; justify-content: space-between; align-items: center; }
.section-title-row em { font-size: 2.5mm; font-style: normal; font-weight: 900; }
.tracking-line { display: grid; grid-template-columns: 19mm 1fr; align-items: baseline; margin-top: 2mm; }
.tracking-line span { font-size: 3mm; font-weight: 900; }
.tracking-line strong { font-family: Arial, sans-serif; font-size: 3.3mm; font-weight: 900; word-break: break-all; }
.receipt__shipping { padding-bottom: 3.4mm; }
.receipt__shipping > p { display: block; margin-top: 2mm; color: #000; font-size: 2.55mm; font-weight: 700; line-height: 1.4; }

.receipt__product { display: grid; grid-template-columns: minmax(0,1fr) 22mm; gap: 2.5mm; }
.product-copy { min-width: 0; }
.product-copy > strong { display: block; min-height: 7.8mm; margin-top: 1.6mm; font-size: 3.05mm; font-weight: 900; line-height: 1.32; }
.product-copy > div { display: flex; gap: 4mm; margin-top: 1.3mm; font-size: 2.55mm; }
.product-copy i { font-style: normal; }
.product-copy > p { margin-top: 1.35mm; font-size: 2.3mm; font-weight: 900; }
.product-copy > p.product-paid { display: flex; align-items: baseline; justify-content: space-between; gap: 2mm; margin-top: 1.45mm; font-size: 2.6mm; }
.product-paid strong { font-family: Arial, sans-serif; font-size: 3.5mm; font-weight: 900; white-space: nowrap; }
.product-qr { display: grid; align-content: start; justify-items: center; }
.product-qr img { width: 19.5mm; height: 19.5mm; border: .5mm solid #000; object-fit: cover; filter: grayscale(1) contrast(2.5); }
.product-qr figcaption { margin-top: .8mm; font-size: 2mm; font-weight: 900; }

.receipt__remarks { display: grid; grid-template-columns: 9mm 1fr; gap: 1mm; min-height: 9.5mm; padding: 2.1mm 0; border-bottom: .5mm solid #000; }
.receipt__remarks strong { font-size: 2.8mm; }
.receipt__remarks p { font-size: 2.75mm; font-weight: 700; line-height: 1.4; word-break: break-all; }

.receipt__footer { display: flex; justify-content: space-between; align-items: end; gap: 3mm; padding-top: 2.3mm; }
.receipt__footer > div { display: grid; gap: .8mm; }
.receipt__footer strong { font-family: "SimSun", serif; font-size: 3.7mm; font-weight: 900; letter-spacing: .08em; }
.receipt__footer p { font-size: 2.15mm; font-weight: 900; }
.receipt__footer > span { width: 24mm; font-size: 1.9mm; font-weight: 700; line-height: 1.4; text-align: right; }

[data-preview-panel] { display: none; }
[data-preview-panel].is-preview-active { display: block; }

.receipt-b5 {
  position: relative;
  width: 176mm;
  height: 250mm;
  margin: 26px auto;
  padding: 10mm;
  overflow: hidden;
  background: #fff;
  color: #000;
  box-shadow: 0 12px 32px rgba(18,25,20,.18), 0 0 0 1px rgba(0,0,0,.08);
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  font-size: 3.8mm;
  line-height: 1.35;
  zoom: .62;
}
.receipt-b5::after {
  content: "";
  position: absolute;
  z-index: 5;
  inset: 3mm;
  border: .6mm solid #000;
  pointer-events: none;
}
.receipt-b5 * { box-sizing: border-box; }
.receipt-b5 h2, .receipt-b5 p, .receipt-b5 dl, .receipt-b5 dt, .receipt-b5 dd, .receipt-b5 figure { margin: 0; }

.b5-header { display: grid; grid-template-columns: 45mm 1fr 34mm; align-items: center; gap: 6mm; height: 36mm; border-bottom: .8mm solid #000; }
.b5-ucii { width: 44mm; height: 23mm; object-fit: cover; object-position: center; filter: grayscale(1) invert(1) contrast(2.8); }
.b5-title { display: grid; align-content: center; min-width: 0; }
.b5-title strong { font-family: "SimSun", serif; font-size: 10mm; font-weight: 900; letter-spacing: .04em; white-space: nowrap; }
.b5-title span { margin-top: 1mm; font-family: Arial, sans-serif; font-size: 4.2mm; font-weight: 900; letter-spacing: .04em; }
.b5-blue-hat { display: grid; justify-items: center; align-content: center; text-align: center; }
.b5-blue-hat img { width: 17mm; height: 17mm; object-fit: contain; filter: grayscale(1) contrast(2.8); }
.b5-blue-hat span { margin-top: .7mm; font-size: 2.5mm; font-weight: 800; white-space: nowrap; }
.b5-blue-hat small { font-size: 2.1mm; white-space: nowrap; }

.b5-order { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(42mm, .8fr); gap: 8mm; align-items: center; height: 43mm; border-bottom: .6mm solid #000; }
.b5-order > div { display: grid; align-content: center; min-width: 0; }
.b5-tag { justify-self: start; padding: 2mm 3mm; background: #000; color: #fff; font-family: Arial, sans-serif; font-size: 4mm; font-weight: 900; }
.b5-order > div > strong { margin-top: 4mm; font-family: Arial, sans-serif; font-size: 7.8mm; font-weight: 900; letter-spacing: .01em; word-break: break-all; }
.b5-order > dl { display: grid; gap: 2mm; padding-left: 7mm; border-left: .5mm solid #000; }
.b5-order dt { font-size: 7mm; font-weight: 900; }
.b5-order dd { display: grid; grid-template-columns: 17mm 1fr; font-size: 3.6mm; }
.b5-order dd b { font-weight: 900; }

.b5-section { height: 54mm; padding: 6.5mm 0 4mm; border-bottom: .6mm solid #000; }
.b5-section h2 { display: inline-block; padding: 2mm 3mm; background: #000; color: #fff; font-size: 4.8mm; font-weight: 900; line-height: 1; }
.b5-rows { margin-top: 3.5mm !important; }
.b5-rows > div { display: grid; grid-template-columns: 32mm 1fr; align-items: baseline; min-height: 7.4mm; padding: 1mm 0; border-bottom: .25mm dashed #c8c8c8; }
.b5-rows dt { font-weight: 800; }
.b5-rows dd { font-weight: 700; }
.b5-code { font-family: Arial, sans-serif; font-size: 4.4mm; font-weight: 900 !important; }

.b5-product { height: 72mm; }
.b5-product-grid { display: grid; grid-template-columns: minmax(0, 1fr) 42mm; gap: 8mm; margin-top: 4mm; }
.b5-product-copy { min-width: 0; }
.b5-product-copy > strong { display: block; font-size: 5.2mm; font-weight: 900; line-height: 1.35; }
.b5-product-copy .b5-rows { margin-top: 3mm !important; }
.b5-product-copy .b5-rows > div { grid-template-columns: 32mm 1fr; min-height: 7.5mm; }
.b5-paid dd { font-family: Arial, sans-serif; font-size: 7mm; font-weight: 900; }
.b5-qr { display: grid; align-content: start; justify-items: center; }
.b5-qr img { width: 40mm; height: 40mm; border: .7mm solid #000; object-fit: cover; filter: grayscale(1) contrast(2.5); }
.b5-qr figcaption { margin-top: 2mm; font-size: 3.4mm; font-weight: 800; }

.b5-footer { display: grid; place-items: center; align-content: center; height: 25mm; text-align: center; }
.b5-footer strong { display: flex; align-items: center; gap: 4mm; font-family: "SimSun", serif; font-size: 5.2mm; letter-spacing: .08em; }
.b5-footer strong::before, .b5-footer strong::after { content: ""; width: 24mm; height: .35mm; background: #000; }
.b5-footer b { margin-top: 2.5mm; font-size: 4.6mm; }
.b5-footer span { margin-top: 2mm; font-size: 3.2mm; }

@media (max-width: 980px) {
  .workspace { grid-template-columns: 1fr; }
  .preview { position: static; }
}

@media (max-width: 620px) {
  .page-header { align-items: flex-start; padding: 26px 16px 18px; }
  .size-badge { display: none; }
  .workspace { padding: 0 10px 34px; }
  .field-grid { grid-template-columns: 1fr; }
  .field--full { grid-column: auto; }
  .actions { flex-wrap: wrap; }
  .button--print { flex-basis: 100%; }
  .button--b5-print { order: -2; }
  .button--label-print { order: -1; }
  .preview { overflow-x: auto; }
  .receipt { margin-inline: 16px; }
  .receipt-b5 { margin-inline: 16px; zoom: .45; }
}

@page labelReceipt {
  size: 76mm 130mm;
  margin: 0;
}

@page b5Receipt {
  size: 176mm 250mm;
  margin: 0;
}

@media print {
  html[data-print-target] body.receipt-printing > :not(.workspace),
  html[data-print-target] body.receipt-printing .workspace > :not(.preview),
  html[data-print-target] body.receipt-printing .preview > :not(#receipt):not(#receipt-b5),
  html[data-print-target] [id*="translat" i],
  html[data-print-target] [class*="translat" i],
  html[data-print-target] [aria-label*="翻译"],
  html[data-print-target] [title*="翻译"] {
    display: none !important;
  }

  html[data-print-target="label"],
  html[data-print-target="label"] body {
    width: 76mm;
    height: 129mm;
    min-height: 0 !important;
  }
  html[data-print-target="b5"],
  html[data-print-target="b5"] body {
    width: 176mm;
    height: 249mm;
    min-height: 0 !important;
  }
  html, body {
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    background: #fff !important;
  }
  .page-header,
  .editor,
  .preview__bar {
    display: none !important;
  }
  html[data-print-target="label"] .workspace,
  html[data-print-target="label"] .preview {
    display: block !important;
    position: static !important;
    width: 76mm !important;
    max-width: none !important;
    height: 129mm !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  html[data-print-target="b5"] .workspace,
  html[data-print-target="b5"] .preview {
    display: block !important;
    position: static !important;
    width: 176mm !important;
    max-width: none !important;
    height: 249mm !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  html[data-print-target="label"] #receipt { display: block !important; }
  html[data-print-target="label"] #receipt-b5 { display: none !important; }
  html[data-print-target="b5"] #receipt { display: none !important; }
  html[data-print-target="b5"] #receipt-b5 { display: block !important; }
  #receipt {
    position: static;
    width: 76mm;
    height: 129mm;
    max-height: 129mm;
    margin: 0;
    page: labelReceipt;
    break-inside: avoid;
    page-break-inside: avoid;
    break-after: avoid-page;
    page-break-after: avoid;
    box-shadow: none;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  #receipt-b5 {
    position: static;
    width: 176mm;
    height: 249mm;
    max-height: 249mm;
    margin: 0;
    zoom: 1;
    page: b5Receipt;
    break-inside: avoid;
    page-break-inside: avoid;
    break-after: avoid-page;
    page-break-after: avoid;
    box-shadow: none;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}