.barcode-tool{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);align-items:start;gap:24px;margin:28px 0 40px;display:grid}.barcode-panel{background:#fff;border:1px solid #dedfe4;border-radius:22px;min-width:0;padding:26px}.barcode-step{color:#ba1730;letter-spacing:.08em;text-transform:uppercase;font-size:12px;font-weight:800}.barcode-panel h2{margin:10px 0 22px;font-size:25px}.barcode-panel label{margin-bottom:7px;font-size:14px;font-weight:650;display:block}.barcode-panel select,.barcode-panel input:not([type=checkbox]):not([type=color]),.barcode-panel textarea{color:#16171d;width:100%;min-height:46px;font:inherit;background:#fff;border:1px solid #bfc2ca;border-radius:10px;padding:10px 12px;font-size:16px;display:block}.barcode-panel textarea{resize:vertical;min-height:92px}.barcode-panel :is(input,select,textarea,button,a):focus-visible{outline-offset:3px;outline:3px solid #dd334c}.barcode-field{margin-bottom:20px}.barcode-hint,.barcode-muted{color:#666b76;overflow-wrap:anywhere;margin:8px 0;font-size:13px;line-height:1.6}.barcode-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;display:grid}.barcode-color{align-items:center;gap:8px;display:flex}.barcode-color input[type=color]{background:#fff;border:1px solid #bfc2ca;border-radius:9px;flex:0 0 48px;width:48px;height:44px;padding:3px}.barcode-panel .barcode-color input[type=text]{min-width:0;font-size:14px}.barcode-panel fieldset{border:0;min-width:0;margin:0;padding:0}.barcode-panel fieldset:disabled{opacity:.65}.barcode-panel .barcode-check{align-items:center;gap:10px;min-height:44px;display:flex}.barcode-check input{width:18px;height:18px}.barcode-panel details{border-top:1px solid #e5e6eb;margin:18px 0;padding-top:16px}.barcode-panel summary{cursor:pointer;min-height:44px;font-weight:700}.barcode-example{color:#af1730;cursor:pointer;background:0 0;border:0;min-height:44px;padding:8px 0;font-weight:700;text-decoration:underline}.barcode-submit{color:#fff;width:100%;min-height:50px;font:inherit;cursor:pointer;background:#d31030;border:0;border-radius:12px;font-weight:750;display:block;box-shadow:0 8px 20px #b6102220}.barcode-submit:hover{background:#ad0c26}.barcode-cancel{cursor:pointer;background:#fff;border:1px solid #bfc2ca;border-radius:10px;min-height:44px;margin-top:10px;padding:8px 16px}.barcode-error{color:#a51029;overflow-wrap:anywhere;background:#fff0f2;border:1px solid #f2ccd3;border-radius:12px;padding:14px}.barcode-preview{background:linear-gradient(145deg,#f7f7f9,#fff);position:sticky;top:20px}.barcode-preview-stage{background:#fff;border:1px solid #e2e3e7;border-radius:14px;justify-content:center;align-items:center;min-height:220px;padding:18px;display:flex;overflow:auto}.barcode-preview-stage img{object-fit:contain;max-width:100%;height:auto;max-height:360px}.barcode-placeholder{text-align:center;color:#737783;line-height:1.8}.barcode-placeholder svg{opacity:.35;width:130px;height:72px;margin:0 auto 20px;display:block}.barcode-output-label{overflow-wrap:anywhere;color:#20232a;font-family:ui-monospace,monospace}.barcode-downloads{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:20px;display:grid}.barcode-downloads a{color:#fff;background:#191b22;border-radius:10px;justify-content:center;align-items:center;min-height:48px;font-weight:700;text-decoration:none;display:flex}.barcode-downloads a:hover{background:#b5102b}.barcode-success{color:#246746;font-size:14px}.barcode-help{margin:38px 0}.barcode-help-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;display:grid}.barcode-help h3{font-size:17px}.barcode-help p{color:#606570;font-size:14px;line-height:1.8}@media (width<=850px){.barcode-tool{grid-template-columns:1fr}.barcode-preview{position:static}.barcode-help-grid{grid-template-columns:1fr;gap:8px}}@media (width<=420px){.barcode-panel{padding:19px}.barcode-row{gap:10px}.barcode-color{flex-wrap:wrap}.barcode-color input[type=text]{width:100%}}.barcode-layout-choice{background:#f5f5f7;border-radius:12px;padding:16px}.barcode-label-spec{align-items:baseline;gap:12px;margin:-6px 0 22px;display:flex}.barcode-label-spec strong{color:#1a1b20;letter-spacing:-.03em;font-size:20px}.barcode-label-spec span{color:#767984;letter-spacing:.05em;font-size:11px;font-weight:700}.barcode-sticker-stage{background:#eeeef1 radial-gradient(#c9cbd2 .7px,#0000 .7px) 0 0/12px 12px;min-height:0;padding:44px 28px 28px 36px;position:relative;overflow:visible}.barcode-sticker-paper{aspect-ratio:5/3;background:#fff;border-radius:8px;justify-content:center;align-items:center;width:100%;display:flex;overflow:hidden;box-shadow:0 4px 8px #14151a12,0 16px 28px #14151a14}.barcode-sticker-paper img{object-fit:contain;width:100%;height:100%;max-height:none;display:block}.barcode-ruler-x{text-align:center;color:#545965;border-left:1px solid #9297a1;border-right:1px solid #9297a1;font:600 12px/16px system-ui,sans-serif;position:absolute;top:14px;left:36px;right:28px}.barcode-ruler-x:before,.barcode-ruler-x:after{content:"";border-top:1px solid #a8acb5;width:calc(50% - 25px);position:absolute;top:8px}.barcode-ruler-x:before{left:0}.barcode-ruler-x:after{right:0}.barcode-ruler-y{writing-mode:vertical-rl;color:#545965;font:600 12px/16px system-ui,sans-serif;position:absolute;top:50%;left:9px;transform:rotate(180deg)}.barcode-preview-caption{text-align:center;margin:14px 0}.barcode-sticker-paper .barcode-placeholder{padding:12px;font-size:12px}.barcode-sticker-paper .barcode-placeholder svg{width:100px;height:40px;margin-bottom:8px}.barcode-print-card{margin-top:20px}.barcode-print-download,.barcode-open-print{text-align:center;border-radius:10px;justify-content:center;align-items:center;min-height:50px;padding:12px 14px;font-weight:700;text-decoration:none;display:flex}.barcode-print-download{color:#fff;background:#d31030;box-shadow:0 6px 18px #ba10251a}.barcode-print-download:hover{background:#ad0c26}.barcode-open-print{color:#20232a;background:#fff;border:1px solid #d3d5dc;margin-top:10px}.barcode-open-print:hover{background:#f0f1f4}.barcode-print-card p{color:#5b606b;margin:12px 0;font-size:13px;line-height:1.7}.barcode-sticker-downloads{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.barcode-sticker-downloads a{color:#282b33;background:#f0f0f3;border:1px solid #dddfe5;font-size:12px}.barcode-sticker-downloads a:hover{background:#e4e5e9}@media (width<=420px){.barcode-sticker-stage{padding:38px 18px 22px 29px}.barcode-ruler-x{left:29px;right:18px}.barcode-sticker-paper .barcode-placeholder{font-size:11px;line-height:1.4}.barcode-sticker-downloads a{font-size:11px}}.barcode-product-fields{background:#fafafb;border:1px solid #e1e2e7;border-radius:14px;margin:0 0 24px;padding:18px}.barcode-product-heading{flex-wrap:wrap;align-items:baseline;gap:8px;display:flex}.barcode-product-heading h3{margin:0;font-size:16px}.barcode-product-heading span{color:#737781;letter-spacing:.04em;font-size:10px}.barcode-product-fields>.barcode-hint{margin:10px 0 18px}.barcode-product-fields .barcode-field{min-width:0;margin-bottom:14px}.barcode-product-fields input{min-width:0}.barcode-product-name-row{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}.barcode-product-actions{flex-wrap:wrap;gap:8px 18px;display:flex}.barcode-product-actions button{text-align:left;min-height:44px}.barcode-truncation{color:#745014;background:#fff7e7;border:1px solid #eed9ac;border-radius:10px;padding:12px 14px;font-size:13px;line-height:1.7}@media (width<=420px){.barcode-product-fields{padding:14px}.barcode-product-name-row{grid-template-columns:1fr;gap:0}.barcode-product-fields label{font-size:13px}}.barcode-preview{scroll-margin-top:96px}
