/* ==========================================================================
   Topwebsuite Free Waybill Generator — waybill.css
   Identical design system to receipt.css + waybill-specific additions
   ========================================================================== */

:root {
  --brand:        #0274D8;
  --brand-h:      #1a84e0;
  --brand-s:      #015eae;
  --brand-light:  rgba(2,116,216,.08);
  --brand-ring:   rgba(2,116,216,.18);
  --brand-border: rgba(2,116,216,.22);

  --white:          #ffffff;
  --bg:             #f0f2f6;
  --surface:        #ffffff;
  --border:         #e2e5ed;
  --border-h:       #c8cdd8;
  --text-primary:   #111827;
  --text-secondary: #374151;
  --text-muted:     #6b7280;
  --text-faint:     #9ca3af;
  --success:        #16a34a;
  --danger:         #dc2626;

  --font: 'Source Sans 3', 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', monospace;

  --r-xs: 4px;  --r-sm: 6px;  --r-md: 10px;  --r-lg: 14px;  --r-xl: 18px;

  --topbar-h: 56px;
  --form-w:   420px;

  --shadow-sm:      0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-receipt: 0 1px 3px rgba(0,0,0,.04), 0 10px 40px rgba(0,0,0,.10);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.hidden { display: none !important; }
.req { color: var(--danger); font-size: .75em; vertical-align: super; margin-left: 1px; }

/* TOPBAR */
.topbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  background: var(--white);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; z-index: 200;
  box-shadow: var(--shadow-sm);
}
.topbar-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.brand-logo-img { width: 28px; height: 28px; object-fit: contain; border-radius: 6px; flex-shrink: 0; }
.brand-name { display: flex; flex-direction: column; line-height: 1.15; }
.brand-main { font-size: .9rem; font-weight: 700; color: var(--brand); letter-spacing: -.01em; }
.brand-sub  { font-size: .68rem; font-weight: 500; color: var(--text-muted); letter-spacing: .01em; }
.topbar-actions { display: flex; align-items: center; gap: 6px; }
.btn-topbar {
  background: transparent; border: 1px solid var(--border);
  color: var(--text-secondary); font-family: var(--font);
  font-size: .75rem; font-weight: 500; padding: 5px 12px;
  border-radius: var(--r-sm); cursor: pointer;
  transition: border-color .15s, color .15s, background .15s; white-space: nowrap;
}
.btn-topbar:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-light); }
.btn-topbar.sm { font-size: .7rem; padding: 4px 9px; }

/* LAYOUT */
.app-layout { display: flex; min-height: 100vh; padding-top: var(--topbar-h); }

/* FORM PANEL */
.form-panel {
  width: var(--form-w); min-width: var(--form-w);
  background: var(--surface); border-right: 1px solid var(--border);
  height: calc(100vh - var(--topbar-h));
  position: sticky; top: var(--topbar-h);
  overflow-y: auto; overflow-x: hidden;
}
.form-scroll { padding: 0 0 80px; display: flex; flex-direction: column; }
.form-section { padding: 18px 20px 20px; border-bottom: 1px solid var(--border); }
.form-section:last-child { border-bottom: none; }
.section-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.section-title { font-size: .8rem; font-weight: 700; color: var(--text-primary); text-transform: uppercase; letter-spacing: .06em; }
.section-sub { font-size: .72rem; color: var(--text-muted); margin-top: 1px; }

/* FORM GRIDS */
.form-grid { display: grid; gap: 10px; }
.form-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.form-grid.cols-1 { grid-template-columns: 1fr; }
.field.full { grid-column: 1 / -1; }
.field label { display: block; font-size: .72rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 5px; }
.field input, .field select, .field textarea, #notes {
  width: 100%; background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-sm); color: var(--text-primary);
  font-family: var(--font); font-size: .82rem; padding: 8px 10px;
  outline: none; transition: border-color .15s, box-shadow .15s; resize: vertical;
}
.field input::placeholder, .field textarea::placeholder, #notes::placeholder { color: var(--text-faint); }
.field input:focus, .field select:focus, .field textarea:focus, #notes:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring);
}
.field select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; cursor: pointer;
}
.field textarea { min-height: 52px; }
#notes { min-height: 68px; }
.field input.invalid, .field textarea.invalid, .field select.invalid {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,.12) !important;
  animation: fieldShake .25s ease;
}
@keyframes fieldShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-3px)} 75%{transform:translateX(3px)} }

/* COLOR PICKER */
.color-picker-wrap {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 6px 10px; background: var(--white); cursor: pointer;
}
.color-picker-wrap:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.color-picker-wrap input[type="color"] { width:24px;height:24px;padding:0;border:none;background:none;cursor:pointer;border-radius:4px;flex-shrink:0;outline:none; }
.color-picker-wrap input[type="color"]::-webkit-color-swatch-wrapper{padding:0;}
.color-picker-wrap input[type="color"]::-webkit-color-swatch{border:none;border-radius:4px;}
.color-picker-wrap input[type="color"]::-moz-color-swatch{border:none;border-radius:4px;}
.color-hex-display { font-family: var(--mono); font-size: .78rem; color: var(--text-secondary); letter-spacing: .04em; }

/* LOGO */
.logo-row { display: flex; align-items: center; gap: 14px; }
.logo-upload-area {
  width:80px;height:80px;border:2px dashed var(--border-h);border-radius:var(--r-md);cursor:pointer;
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  transition:border-color .15s,background .15s;overflow:hidden;
}
.logo-upload-area:hover, .logo-upload-area:focus { border-color:var(--brand);background:var(--brand-light);outline:none; }
.logo-placeholder { display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--text-faint);font-size:.62rem;font-weight:500;text-align:center;padding:4px; }
.logo-placeholder svg { color:var(--text-faint); }
.logo-img { width:100%;height:100%;object-fit:contain;display:block; }
.logo-info-title { font-size:.78rem;font-weight:600;color:var(--text-secondary);margin-bottom:2px; }
.logo-info-sub { font-size:.7rem;color:var(--text-faint);margin-bottom:8px; }
.btn-logo-remove { background:transparent;border:1px solid var(--border);color:var(--danger);border-radius:var(--r-sm);font-family:var(--font);font-size:.7rem;font-weight:500;padding:4px 10px;cursor:pointer;transition:background .15s,border-color .15s; }
.btn-logo-remove:hover { background:rgba(220,38,38,.06);border-color:var(--danger); }

/* ITEM COLUMN HEADERS — waybill: description | qty | weight | value | del */
.items-col-header {
  display: grid;
  grid-template-columns: 1fr 44px 72px 72px 26px;
  gap: 6px; padding-bottom: 6px; margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.ich-name,.ich-qty,.ich-weight,.ich-value {
  font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--text-faint);
}
.ich-qty,.ich-weight,.ich-value { text-align:right; }

/* ITEM ROWS */
.item-row {
  display: grid;
  grid-template-columns: 1fr 44px 72px 72px 26px;
  gap: 6px; align-items: start; margin-bottom: 6px; animation: rowIn .18s ease;
}
@keyframes rowIn { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:translateY(0)} }
.item-col-name { display:flex;flex-direction:column;gap:3px; }
.item-row input {
  width:100%;background:var(--white);border:1px solid var(--border);border-radius:var(--r-sm);
  color:var(--text-primary);font-family:var(--font);font-size:.8rem;padding:6px 8px;
  outline:none;transition:border-color .13s,box-shadow .13s;
}
.item-row input::placeholder { color:var(--text-faint); }
.item-row input:focus { border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-ring); }
.item-row input[type="number"] { font-family:var(--mono);text-align:right; }
.item-desc-input { font-size:.72rem!important;color:var(--text-muted)!important;padding:4px 8px!important; }
.item-amount-display {
  background:#f9fafb;border:1px solid var(--border);border-radius:var(--r-sm);
  color:var(--brand);font-family:var(--mono);font-size:.78rem;font-weight:600;
  padding:6px 8px;text-align:right;min-height:32px;
  display:flex;align-items:center;justify-content:flex-end;
}
.btn-del-item {
  background:transparent;border:1px solid var(--border);color:var(--text-faint);
  border-radius:var(--r-sm);width:26px;height:26px;display:flex;align-items:center;
  justify-content:center;cursor:pointer;font-size:.7rem;
  transition:color .13s,border-color .13s,background .13s;flex-shrink:0;margin-top:1px;
}
.btn-del-item:hover { color:var(--danger);border-color:var(--danger);background:rgba(220,38,38,.05); }
.btn-add-item {
  width:100%;margin-top:8px;background:transparent;border:1px dashed var(--border-h);
  color:var(--brand);font-family:var(--font);font-size:.78rem;font-weight:600;
  padding:8px;border-radius:var(--r-sm);cursor:pointer;
  transition:border-color .15s,background .15s;letter-spacing:.01em;
}
.btn-add-item:hover { border-color:var(--brand);background:var(--brand-light); }
.items-hint { font-size:.68rem;color:var(--text-faint);margin-top:8px;line-height:1.5; }

/* TOTALS SUMMARY */
.totals-summary { margin-top:14px;padding-top:12px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:6px; }
.summary-row { display:flex;justify-content:space-between;align-items:center;font-size:.78rem;color:var(--text-muted); }
.summary-row span:last-child { font-family:var(--mono);color:var(--text-secondary);font-size:.78rem; }
.summary-row.total-row { font-weight:700;font-size:.88rem;color:var(--text-primary);padding-top:8px;margin-top:2px;border-top:1px solid var(--border); }
.summary-row.total-row span:last-child { color:var(--brand); }
.hidden-row { display:none; }

/* ACTIONS */
.form-actions-section { border-bottom:none!important; }
.reset-label { font-size:.75rem;font-weight:700;color:var(--text-primary);margin-bottom:2px; }
.reset-sub { font-size:.7rem;color:var(--text-muted);margin-bottom:14px; }
.form-actions { display:flex;flex-direction:column;gap:8px; }
.btn-primary {
  width:100%;background:var(--brand);color:var(--white);border:none;border-radius:var(--r-md);
  font-family:var(--font);font-size:.85rem;font-weight:600;padding:12px 20px;cursor:pointer;
  transition:background .15s,transform .15s,box-shadow .15s;letter-spacing:.02em;
  box-shadow:0 2px 8px rgba(2,116,216,.25);
}
.btn-primary:hover { background:var(--brand-h);transform:translateY(-1px);box-shadow:0 4px 16px rgba(2,116,216,.35); }
.btn-primary:active { transform:translateY(0);background:var(--brand-s); }
.btn-secondary {
  width:100%;background:var(--white);color:var(--text-secondary);border:1px solid var(--border);
  border-radius:var(--r-md);font-family:var(--font);font-size:.85rem;font-weight:500;
  padding:11px 20px;cursor:pointer;transition:border-color .15s,color .15s,background .15s;
}
.btn-secondary:hover { border-color:var(--brand);color:var(--brand);background:var(--brand-light); }

/* PREVIEW PANEL */
.preview-panel { flex:1;background:#f0f2f6;overflow-y:auto;min-height:calc(100vh - var(--topbar-h));display:flex;flex-direction:column; }
.preview-wrapper { padding:24px 28px 72px;display:flex;flex-direction:column;align-items:center;gap:14px;min-height:100%; }
.preview-toolbar { width:100%;max-width:720px;display:flex;align-items:center;flex-wrap:wrap;gap:8px; }
.preview-label { font-size:.82rem;font-weight:700;color:var(--text-primary);flex:1; }
.preview-sub { font-size:.7rem;color:var(--text-muted);width:100%;order:3;margin-top:-4px; }
.preview-toolbar-btns { display:flex;gap:6px; }

/* RECEIPT PAPER */
.receipt-paper {
  width:100%;max-width:720px;background:var(--white);border-radius:var(--r-xl);
  box-shadow:var(--shadow-receipt);padding:40px 48px 36px;color:var(--text-primary);
  font-family:var(--font);position:relative;overflow:visible;
}
.receipt-paper::before {
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--brand) 0%,color-mix(in srgb,var(--brand) 60%,#f59e0b) 50%,var(--brand) 100%);
  border-radius:var(--r-xl) var(--r-xl) 0 0;pointer-events:none;
}

/* HEADER */
.rcp-header { display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:24px; }
.rcp-biz-block { display:flex;align-items:flex-start;gap:12px;flex:1;min-width:0; }
.rcp-logo { width:64px;height:64px;object-fit:contain;border-radius:var(--r-sm);border:1px solid var(--border);flex-shrink:0;background:#f9fafb; }
.rcp-biz-text { flex:1;min-width:0; }
.rcp-biz-name { font-size:1.1rem;font-weight:700;color:var(--text-primary);line-height:1.25;margin-bottom:4px;word-break:break-word; }
.rcp-biz-addr, .rcp-biz-contact { font-size:.72rem;color:var(--text-muted);line-height:1.55;white-space:pre-line; }
.rcp-meta-block { flex-shrink:0;text-align:right; }
.rcp-title-word { font-size:1.9rem;font-weight:800;letter-spacing:.12em;color:var(--brand);line-height:1;margin-bottom:12px; }
.rcp-meta-dl { display:flex;flex-direction:column;gap:4px;list-style:none; }
.rcp-meta-row { display:flex;justify-content:flex-end;align-items:baseline;gap:10px; }
.rcp-meta-dl dt { font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint); }
.rcp-meta-dl dd { font-family:var(--mono);font-size:.78rem;font-weight:500;color:var(--text-primary); }
.rcp-rule { height:1px;background:var(--border);margin:0 0 20px;border:none; }

/* LABELS */
.rcp-section-label { font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--brand);margin-bottom:5px;display:block; }
.rcp-cust-name { font-size:.96rem;font-weight:600;color:var(--text-primary);line-height:1.3;margin-bottom:2px; }
.rcp-cust-addr, .rcp-cust-contact { font-size:.72rem;color:var(--text-muted);line-height:1.55;white-space:pre-line; }
.rcp-items-label { margin-bottom:10px; }

/* ── WAYBILL-SPECIFIC: PARTIES ── */
.wb-parties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.wb-party {}

/* Carrier info bar */
.wb-carrier-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  background: #f9fafb;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 9px 14px;
  margin-bottom: 18px;
  font-size: .78rem;
}
.wb-carrier-item { display: flex; align-items: center; gap: 6px; }
.wb-carrier-label { font-weight: 600; color: var(--text-muted); text-transform: uppercase; font-size: .62rem; letter-spacing: .06em; }
.wb-carrier-bar span:not(.wb-carrier-label) { color: var(--text-primary); font-weight: 500; font-family: var(--mono); }

/* TABLE */
.rcp-table { width:100%;border-collapse:collapse;margin-bottom:20px;font-size:.8rem; }
.rcp-table thead tr { background:#f9fafb;border-top:1px solid var(--border);border-bottom:1px solid var(--border); }
.rcp-table th { padding:9px 10px;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);text-align:left; }
.rcp-table th.th-qty, .rcp-table th.th-weight, .rcp-table th.th-amt { text-align:right; }
.rcp-table td { padding:10px 10px;border-bottom:1px solid var(--border);vertical-align:top;color:var(--text-secondary);line-height:1.4; }
.rcp-table td.th-qty, .rcp-table td.th-weight, .rcp-table td.th-amt { text-align:right;font-family:var(--mono);font-size:.78rem; }
.rcp-table tbody tr:last-child td { border-bottom:none; }
.th-desc{width:42%;} .th-qty{width:10%;text-align:right;} .th-weight{width:24%;text-align:right;} .th-amt{width:24%;text-align:right;}
.item-name-cell { font-weight:600;color:var(--text-primary); }
.item-desc-cell { font-size:.7rem;color:var(--text-faint);margin-top:2px; }
.item-empty-row td { text-align:center;color:var(--text-faint);font-style:italic;padding:18px 10px;font-size:.75rem; }

/* TABLE FOOTER (totals row) */
.wb-tfoot-row td { background:#f9fafb;border-top:2px solid var(--text-primary);font-weight:700;padding:9px 10px;font-size:.8rem; }
.wb-tfoot-label { color:var(--text-primary);text-transform:uppercase;letter-spacing:.05em; }
.wb-tfoot-row td.th-qty, .wb-tfoot-row td.th-weight, .wb-tfoot-row td.th-amt { font-family:var(--mono);text-align:right;color:var(--brand); }

/* NOTES */
.rcp-notes { background:#f9fafb;border-left:3px solid var(--brand);padding:10px 14px;margin-bottom:20px;border-radius:0 var(--r-sm) var(--r-sm) 0; }
.rcp-notes-text { font-size:.76rem;color:var(--text-muted);line-height:1.65;white-space:pre-wrap;word-break:break-word; }

/* ── WAYBILL-SPECIFIC: SIGNATURE BLOCK ── */
.wb-sig-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 28px;
  margin-bottom: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.wb-sig {}
.wb-sig-line { height: 1px; background: var(--border-h); margin-bottom: 8px; }
.wb-sig-label { font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-bottom:4px; }
.wb-sig-name { font-size:.82rem;font-weight:600;color:var(--text-primary);margin-bottom:4px; }
.wb-sig-date { font-size:.72rem;color:var(--text-muted); }

/* FOOTER */
.rcp-footer { text-align:center;padding-top:16px;border-top:1px dashed var(--border);line-height:1.9; }
.rcp-footer-thanks { font-size:.76rem;color:var(--text-muted); }
.rcp-footer-brand { font-size:.62rem;color:var(--text-faint);letter-spacing:.04em; }

/* TOAST */
.toast { position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(12px);background:var(--text-primary);color:var(--white);font-family:var(--font);font-size:.78rem;font-weight:500;padding:10px 20px;border-radius:50px;box-shadow:0 8px 24px rgba(0,0,0,.2);z-index:9999;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;white-space:nowrap;max-width:calc(100vw - 32px);text-align:center; }
.toast.show { opacity:1;transform:translateX(-50%) translateY(0); }
.toast.success { background:var(--success); }
.toast.error   { background:var(--danger); }

/* FAB */
.fab-preview { display:none;position:fixed;bottom:20px;right:20px;width:50px;height:50px;background:var(--brand);border:none;border-radius:50%;font-size:1.2rem;cursor:pointer;box-shadow:0 4px 14px rgba(2,116,216,.35);z-index:300;transition:transform .18s,background .15s;align-items:center;justify-content:center; }
.fab-preview:hover { transform:scale(1.08);background:var(--brand-h); }

/* SCROLLBAR */
.form-panel::-webkit-scrollbar{width:4px;} .form-panel::-webkit-scrollbar-track{background:transparent;} .form-panel::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;} .form-panel::-webkit-scrollbar-thumb:hover{background:var(--border-h);}

/* PDF EXPORT OVERRIDES */
[data-pdf-export] .rcp-header { display:flex!important;flex-direction:row!important;justify-content:space-between!important;align-items:flex-start!important;gap:24px!important; }
[data-pdf-export] .rcp-meta-block { text-align:right!important;flex-shrink:0!important; }
[data-pdf-export] .rcp-meta-row { justify-content:flex-end!important; }
[data-pdf-export] .wb-parties { display:grid!important;grid-template-columns:1fr 1fr!important; }
[data-pdf-export] .wb-sig-block { display:grid!important;grid-template-columns:1fr 1fr!important; }
[data-pdf-export] .receipt-paper { border-radius:0!important;box-shadow:none!important;max-width:100%!important;width:100%!important; }
[data-pdf-export] .receipt-paper::before { border-radius:0!important; }

/* PRINT */
@media print {
  html,body{background:white!important;color:black!important;overflow:visible!important;}
  .topbar,.form-panel,.preview-toolbar,.fab-preview,.toast{display:none!important;}
  .app-layout{display:block!important;padding-top:0!important;}
  .preview-panel{display:block!important;background:white!important;min-height:auto!important;overflow:visible!important;}
  .preview-wrapper{padding:0!important;display:block!important;}
  .receipt-paper{max-width:100%!important;width:100%!important;border-radius:0!important;box-shadow:none!important;padding:28px 36px 24px!important;overflow:visible!important;}
  .receipt-paper::before{display:none!important;}
  .rcp-header{flex-direction:row!important;justify-content:space-between!important;}
  .rcp-meta-block{text-align:right!important;}
  .rcp-meta-row{justify-content:flex-end!important;}
  .wb-parties{grid-template-columns:1fr 1fr!important;}
  .wb-sig-block{grid-template-columns:1fr 1fr!important;}
  .rcp-table tr{page-break-inside:avoid;}
  .rcp-notes,.rcp-footer,.wb-sig-block{page-break-inside:avoid;}
}

/* TABLET */
@media (max-width:1060px) { :root{--form-w:370px;} .receipt-paper{padding:32px 32px 28px;} }

/* MOBILE */
@media (max-width:768px) {
  .app-layout{flex-direction:column;}
  .form-panel{width:100%!important;min-width:0!important;height:auto!important;position:static!important;border-right:none!important;border-bottom:1px solid var(--border)!important;overflow:visible!important;}
  .preview-panel{display:none;}
  .preview-panel.mobile-visible{display:flex;}
  .preview-wrapper{padding:14px 12px 80px;}
  .receipt-paper{padding:26px 18px 22px;border-radius:var(--r-lg);max-width:100%;}
  .rcp-header{flex-direction:column;gap:12px;}
  .rcp-meta-block{text-align:left;width:100%;}
  .rcp-meta-row{justify-content:space-between;}
  .wb-parties{grid-template-columns:1fr;}
  .wb-sig-block{grid-template-columns:1fr;gap:16px;}
  .fab-preview{display:flex;}
  .topbar-actions .btn-topbar{font-size:.68rem;padding:4px 8px;}
  .brand-sub{display:none;}
  .items-col-header,.item-row{grid-template-columns:1fr 38px 60px 60px 24px;gap:4px;}
}
@media (max-width:420px) {
  .form-grid.cols-2{grid-template-columns:1fr;}
  .items-col-header,.item-row{grid-template-columns:1fr 34px 54px 54px 22px;gap:3px;}
  .receipt-paper{padding:20px 14px 18px;}
  .rcp-table th,.rcp-table td{padding:7px 6px;}
}