:root {
  --ink: #201a16;
  --muted: #756a61;
  --cream: #f5f0e7;
  --paper: #fffdf9;
  --gold: #b7883e;
  --gold-dark: #8b6229;
  --line: #ded5c8;
  --danger: #a83b30;
  --shadow: 0 18px 45px rgba(42, 30, 19, .11);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--ink);
  background: radial-gradient(circle at 90% 0, #eadcc4 0, transparent 31rem), var(--cream);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Noto Sans TC", sans-serif;
}
button, input, textarea { font: inherit; }
button { cursor: pointer; }

.app-header {
  min-height: 88px;
  padding: 16px clamp(20px, 4vw, 64px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: white;
  background: linear-gradient(110deg, #130d09, #3b2919 64%, #a67b38);
  box-shadow: 0 4px 18px rgba(27, 19, 12, .25);
}
.brand-lockup { display: flex; align-items: center; gap: 15px; }
.brand-lockup img { width: 56px; height: 56px; object-fit: contain; }
.brand-lockup p, .eyebrow { margin: 0 0 4px; font-size: 11px; font-weight: 800; letter-spacing: .16em; color: var(--gold-dark); }
.brand-lockup p { color: #d8b67d; }
.brand-lockup h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(22px, 3vw, 31px); }
.header-actions { display: flex; gap: 10px; }
.button { border: 1px solid transparent; border-radius: 12px; padding: 11px 16px; font-weight: 750; transition: .18s ease; }
.button:hover { transform: translateY(-1px); }
.button.primary { color: #1a110b; background: linear-gradient(135deg, #dfbf83, #b7883e); box-shadow: 0 8px 18px rgba(0,0,0,.18); }
.button.ghost { color: white; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.08); }
.button.secondary { color: #fff; background: var(--ink); }

.workspace { max-width: 1500px; margin: 0 auto; padding: 34px clamp(18px, 4vw, 58px) 80px; display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 28px; align-items: start; }
.editor-panel, .summary-card, .preview-card, .print-note { background: rgba(255,253,249,.94); border: 1px solid rgba(151,125,89,.23); box-shadow: var(--shadow); }
.editor-panel { border-radius: 22px; padding: 26px; }
.panel-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 22px; }
.panel-heading h2 { margin: 0 0 6px; font-family: Georgia, "Times New Roman", serif; font-size: 28px; }
.panel-heading p:not(.eyebrow) { margin: 0; color: var(--muted); }
.wine-list { display: grid; gap: 12px; }
.wine-row { position: relative; display: grid; grid-template-columns: 34px minmax(210px, 1fr) minmax(250px, 1.5fr) 142px auto; gap: 14px; align-items: end; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: white; }
.row-index { align-self: center; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--gold-dark); background: #f1e4cf; font-weight: 800; }
.field { min-width: 0; }
.field > label, .field > span { display: block; margin: 0 0 7px; color: #5f554d; font-size: 12px; font-weight: 750; }
.wine-name { width: 100%; min-height: 48px; resize: vertical; padding: 10px 12px; border: 1px solid #cfc5b7; border-radius: 10px; line-height: 1.35; }
.wine-name-heading { display: flex !important; align-items: center; justify-content: space-between; }
.character-count { color: #8a7d72; font-size: 11px; font-weight: 600; }
.wine-name:focus, .quantity:focus, .logo-search:focus { outline: 2px solid rgba(183,136,62,.32); border-color: var(--gold); }
.logo-field { position: relative; }
.logo-picker { width: 100%; height: 48px; display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 10px; padding: 5px 10px 5px 6px; border: 1px solid #cfc5b7; border-radius: 10px; background: white; text-align: left; }
.logo-thumb { width: 54px; height: 36px; display: grid; place-items: center; overflow: hidden; border-radius: 7px; background: #f2eee8; color: #8a7d72; font-size: 11px; }
.logo-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chevron { color: #8b8178; }
.logo-menu { position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; width: min(340px, 85vw); padding: 10px; border: 1px solid #cfc5b7; border-radius: 14px; background: white; box-shadow: 0 18px 50px rgba(38,28,18,.2); }
.logo-search-wrap { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; padding: 0 8px 8px; color: var(--muted); font-size: 12px; }
.logo-search { min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.logo-options { max-height: 280px; overflow: auto; display: grid; gap: 3px; }
.logo-option { width: 100%; display: grid; grid-template-columns: 66px 1fr; align-items: center; gap: 9px; padding: 7px; border: 0; border-radius: 9px; background: transparent; text-align: left; }
.logo-option:hover, .logo-option[aria-selected="true"] { background: #f2e8d8; }
.logo-option img { width: 62px; height: 34px; object-fit: contain; }
.upload-logo { width: 100%; margin-top: 7px; padding: 9px; border: 1px dashed var(--gold); border-radius: 9px; color: var(--gold-dark); background: #fffaf1; font-weight: 700; }
.stepper { height: 48px; display: grid; grid-template-columns: 38px 1fr 38px; border: 1px solid #cfc5b7; border-radius: 10px; overflow: hidden; }
.stepper button { border: 0; color: var(--gold-dark); background: #f5eee3; font-size: 20px; }
.quantity { min-width: 0; width: 100%; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); text-align: center; font-weight: 750; appearance: textfield; }
.quantity::-webkit-inner-spin-button { appearance: none; }
.row-actions { display: flex; gap: 6px; padding-bottom: 4px; }
.icon-button { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 9px; background: white; font-size: 18px; }
.icon-button.remove { color: var(--danger); }
.empty-state { padding: 70px 20px; text-align: center; border: 1px dashed #cdbfae; border-radius: 16px; color: var(--muted); }
.empty-state h3 { margin: 10px 0 5px; color: var(--ink); }
.empty-state p { margin: 0; }
.empty-icon { width: 48px; height: 48px; margin: auto; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--gold); font-size: 24px; }

.summary-panel { display: grid; gap: 18px; position: sticky; top: 20px; }
.summary-card, .preview-card, .print-note { border-radius: 18px; padding: 20px; }
.metric-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 13px 0 20px; }
.metric-grid div { padding: 13px 8px; text-align: center; border-radius: 12px; background: #f4ede3; }
.metric-grid span { display: block; font-family: Georgia, serif; font-size: 28px; font-weight: 700; }
.metric-grid small { color: var(--muted); }
.start-position > span { display: block; margin-bottom: 7px; font-weight: 750; font-size: 13px; }
.start-position input { width: 100%; padding: 10px; border: 1px solid #cfc5b7; border-radius: 9px; }
.start-position small { display: block; margin-top: 6px; color: var(--muted); line-height: 1.45; }
.preview-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.preview-heading h3 { margin: 0; font-size: 15px; }
.preview-heading > span { color: var(--muted); font-size: 12px; }
.sheet-preview-wrap { padding: 10px; border-radius: 10px; background: #e6ded2; overflow: hidden; }
.sheet-preview { aspect-ratio: 210 / 297; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(13, 1fr); gap: 1px; padding: 3.2% 2.8%; background: white; box-shadow: 0 3px 12px rgba(0,0,0,.13); }
.preview-cell { min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; border: 1px solid rgba(183,136,62,.15); }
.preview-cell { padding: 7% 11% 7% 9%; }
.preview-cell img { max-width: 80%; max-height: 49%; object-fit: contain; }
.preview-cell span { max-width: 82%; margin-top: 2px; overflow: hidden; color: #222; font-size: 2.8px; line-height: 1.05; text-align: center; }
.preview-cell.skip { background: repeating-linear-gradient(135deg,#faf7f1,#faf7f1 3px,#eee8de 3px,#eee8de 6px); }
.print-note { color: #f6ead8; background: #2b2119; }
.print-note p { margin: 7px 0 0; color: #d8cabc; font-size: 13px; line-height: 1.55; }
.toast { position: fixed; z-index: 100; left: 50%; bottom: 28px; transform: translate(-50%, 20px); padding: 11px 16px; border-radius: 999px; color: white; background: #2a211a; box-shadow: 0 8px 30px rgba(0,0,0,.2); opacity: 0; pointer-events: none; transition: .2s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
#printRoot { display: none; }

@media (max-width: 1100px) {
  .workspace { grid-template-columns: 1fr; }
  .summary-panel { position: static; grid-template-columns: repeat(2, 1fr); }
  .print-note { grid-column: 1 / -1; }
  .wine-row { grid-template-columns: 34px 1fr 1fr; }
  .quantity-field { grid-column: 2; }
  .row-actions { grid-column: 3; justify-content: end; }
}
@media (max-width: 680px) {
  .app-header { align-items: flex-start; flex-direction: column; }
  .header-actions { width: 100%; }
  .header-actions .button { flex: 1; padding-inline: 10px; }
  .workspace { padding: 18px 12px 60px; }
  .editor-panel { padding: 16px; border-radius: 16px; }
  .panel-heading { align-items: stretch; flex-direction: column; }
  .wine-row { grid-template-columns: 34px 1fr auto; gap: 10px; }
  .logo-field, .wine-name-field, .quantity-field { grid-column: 2 / -1; }
  .row-actions { position: absolute; top: 12px; right: 12px; grid-column: auto; }
  .summary-panel { grid-template-columns: 1fr; }
  .print-note { grid-column: auto; }
}

@page { size: A4 portrait; margin: 0; }
@media print {
  html, body { width: 210mm; height: auto; margin: 0 !important; padding: 0 !important; background: white !important; }
  body > *:not(#printRoot) { display: none !important; }
  #printRoot { display: block !important; }
  .print-sheet { position: relative; width: 210mm; height: 297mm; overflow: hidden; break-after: page; page-break-after: always; background: white; }
  .print-sheet:last-child { break-after: auto; page-break-after: auto; }
  .print-label { position: absolute; width: 38.1mm; height: 21.2mm; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; padding: 1.7mm 3.6mm 1.7mm 2.3mm; color: #000; background: white; }
  .print-label img { display: block; max-width: 30.4mm; width: auto; height: auto; max-height: 9.2mm; object-fit: contain; margin: 0 auto .7mm; }
  .print-label .label-name { width: 100%; max-height: 6.1mm; overflow: hidden; text-align: center; font-family: Arial, "PingFang TC", "Noto Sans TC", sans-serif; font-size: 8pt; font-weight: 600; line-height: 1.04; white-space: pre-line; overflow-wrap: anywhere; }
  .print-label.long .label-name { font-size: 7.3pt; }
  .print-label.very-long .label-name { font-size: 6.7pt; }
  .calibration-label { outline: .25pt solid #bbb; outline-offset: -.25pt; }
  .calibration-label::before { content: attr(data-position); position: absolute; top: .8mm; left: 1mm; color: #777; font: 5pt Arial, sans-serif; }
  .calibration-cross { width: 6mm; height: 6mm; position: relative; }
  .calibration-cross::before, .calibration-cross::after { content: ""; position: absolute; background: #333; }
  .calibration-cross::before { width: 6mm; height: .2mm; top: 2.9mm; left: 0; }
  .calibration-cross::after { height: 6mm; width: .2mm; left: 2.9mm; top: 0; }
}