:root { --ink:#080808; --paper:#fff; --line:2px solid var(--ink); }
* { box-sizing:border-box; }
body { margin:0; background:#f1f1f1; color:var(--ink); font:14px/1.35 Arial,Helvetica,sans-serif; }
button,input,textarea { font:inherit; }
.app-header { height:64px; padding:0 32px; display:flex; justify-content:space-between; align-items:center; background:#111; color:#fff; letter-spacing:.04em; }
.app-header strong { display:block; font-size:14px; letter-spacing:.13em; }.app-header span,.shortcuts { font-size:11px; opacity:.72; }.workspace { max-width:1500px; margin:auto; display:grid; grid-template-columns:minmax(500px,1.05fr) minmax(440px,.95fr); min-height:calc(100vh - 64px); }.editor { padding:28px 32px 48px; background:#fff; }.editor-top { border-bottom:var(--line); margin-bottom:22px; }.editor-top h1 { margin:0; font-size:24px; letter-spacing:-.03em; }.editor-top p { margin:3px 0 16px; color:#555; }
.form-section { border:var(--line); margin-bottom:16px; }.section-title { min-height:44px; display:flex; align-items:center; gap:10px; padding:0 12px; border-bottom:var(--line); background:#fafafa; }.section-title>span { background:#111;color:#fff;padding:3px 5px;font-size:11px;font-weight:bold; }.section-title h2 { margin:0; font-size:14px; letter-spacing:.08em; }.section-actions { margin-left:auto; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }.text-button { border:0; background:transparent; padding:4px 2px; cursor:pointer; text-decoration:underline; font-size:11px; }.field-grid { padding:13px; display:grid; grid-template-columns:1fr 1fr; gap:11px; }.field-grid label { display:grid; gap:4px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }.field-grid em { color:#777; font-style:normal; font-weight:400; }.field-grid .wide { grid-column:1/-1; } input,textarea { width:100%; border:1px solid #777; padding:8px 9px; background:#fff; border-radius:0; outline:none; text-transform:none; letter-spacing:normal; font-size:13px; }textarea { resize:vertical; } input:focus,textarea:focus { outline:2px solid #111; outline-offset:-2px; }.solid-button,.outline-button { border:2px solid #111; padding:9px 13px; font-weight:bold; cursor:pointer; text-transform:uppercase; font-size:11px; letter-spacing:.04em; }.solid-button { background:#111;color:#fff; }.outline-button { background:#fff; }.small { padding:6px 8px; font-size:10px; }.form-footer { display:flex; justify-content:flex-end; gap:9px; }
.preview-panel { padding:28px; display:flex; align-items:flex-start; justify-content:center; background:#e7e7e7; }.preview-heading { width:100%; max-width:576px; display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; }.preview-heading h2 { margin:0; font-size:15px; text-transform:uppercase; letter-spacing:.08em; }.size-picker { display:flex; align-items:center; gap:7px; font-size:11px; color:#555; }.size-picker select { border:1px solid #555; background:#fff; padding:4px 5px; color:#111; font-size:11px; }
.shipping-label { width:6in; height:4in; max-width:100%; background:#fff; border:3px solid #000; display:flex; flex-direction:column; overflow:hidden; font-family:Arial,Helvetica,sans-serif; color:#000; box-shadow:0 3px 14px #0003; }.label-addresses { display:grid; grid-template-columns:1.7fr 1fr; min-height:2.1in; }.label-addresses section { padding:.15in .16in; display:flex; flex-direction:column; font-size:12px; line-height:1.3; overflow:hidden; }.label-addresses .to-block { border-right:3px solid #000; }.label-addresses h3 { margin:0 0 7px; font-size:10px; letter-spacing:.18em; }.to-block>strong:first-of-type { font-size:18px; line-height:1.1; margin-bottom:3px; }.from-block { font-size:9px!important; }.from-block h3 { font-size:9px; }.from-block>strong { font-size:11px; }.city-state span + span:not(:empty)::before { content:', '; }.phone { margin-top:5px; }.shipment-grid { display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:.5in; flex:0 0 1in; border-top:3px solid #000; }.shipment-grid>div { border-right:1.5px solid #000; border-bottom:1.5px solid #000; padding:.055in .11in; display:flex; flex-direction:column; overflow:hidden; }.shipment-grid>div:nth-child(3n) { border-right:0; }.shipment-grid small { font-size:7px; letter-spacing:.08em; font-weight:bold; }.shipment-grid strong { font-size:11px; overflow-wrap:anywhere; line-height:1.18; }
.label-addresses { flex:1; }
.shipping-label.show-codes .label-addresses { min-height:1.55in; }
.option-toggle { display:flex!important; grid-template-columns:auto 1fr; align-items:center; gap:8px!important; text-transform:none!important; font-size:12px!important; letter-spacing:normal!important; cursor:pointer; }.option-toggle input { width:auto; margin:0; }.codes { height:1.05in; border-top:3px solid #000; display:grid; grid-template-columns:1in 1fr; padding:.055in .14in; gap:.12in; align-items:center; }.codes[hidden] { display:none; }.codes #qrcode { width:.88in; height:.88in; display:grid; place-items:center; }.codes #qrcode img,.codes #qrcode canvas { width:.88in!important; height:.88in!important; image-rendering:pixelated; }.barcode-wrap { min-width:0; text-align:center; overflow:hidden; }.barcode-wrap svg { display:block; width:100%; height:.5in; }.barcode-wrap>strong { display:block; white-space:nowrap; font-size:9px; letter-spacing:.12em; overflow:hidden; }
@media(max-width:960px) { .workspace { grid-template-columns:1fr; }.preview-panel { padding:24px; overflow:auto; }.shipping-label { width:6in; flex-shrink:0; }.app-header { padding:0 18px; }.shortcuts { display:none; } }
@media(max-width:500px) { .editor { padding:20px 14px 28px; }.field-grid { grid-template-columns:1fr; }.field-grid .wide { grid-column:auto; }.section-title { align-items:flex-start; padding:10px; flex-wrap:wrap; }.section-actions { margin-left:0; width:100%; }.form-footer { flex-wrap:wrap; justify-content:stretch; }.form-footer button { flex:1; }.preview-panel { padding:18px 0; overflow:auto; justify-content:flex-start; flex-direction:column; }.preview-heading { padding:0 14px; }.shipping-label { width:6in; margin:0 auto; flex-shrink:0; }.app-header { height:58px; }.workspace { min-height:calc(100vh - 58px); } }
@page { size:6in 4in; margin:0; }
@media print { html,body { margin:0!important; padding:0!important; width:var(--label-width, 6in)!important; height:var(--label-height, 4in)!important; background:#fff!important; } .no-print,.editor,.preview-heading { display:none!important; } .workspace,.preview-panel { display:block!important; margin:0!important; padding:0!important; background:#fff!important; min-height:0!important; } .shipping-label { display:flex!important; width:var(--label-width, 6in)!important; height:var(--label-height, 4in)!important; margin:0!important; border:3px solid #000!important; box-shadow:none!important; page-break-after:avoid!important; } }
.no-bottom-border { border-bottom:0!important; }