.barcode-hero{padding-bottom:28px}.barcode-hero .hero-copy{max-width:880px;margin:auto;text-align:center}.barcode-hero h1{font-size:clamp(40px,6vw,70px);line-height:1.05;letter-spacing:-.055em}.barcode-hero p{max-width:690px;margin:18px auto 22px}.barcode-tool{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);gap:24px;align-items:start;padding:18px 0 54px}.barcode-editor,.barcode-preview{background:var(--surface,#fff);border:1px solid var(--line,#e7e2f1);border-radius:22px;box-shadow:var(--shadow,0 22px 65px rgba(28,20,51,.08));padding:26px}.barcode-editor>.card-head{margin-bottom:22px}.barcode-editor h2{display:inline-block;margin:0 0 0 12px;font-size:20px}.barcode-editor>label{display:block;margin:0 0 18px;color:var(--ink);font-size:13px;font-weight:700}.barcode-editor input:not([type=color]):not([type=checkbox]),.barcode-editor select{display:block;width:100%;margin-top:8px}.barcode-editor small{display:block;margin-top:7px;color:var(--muted);font-weight:400;line-height:1.5}.barcode-editor .settings-group{margin-top:20px}.barcode-editor .field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.barcode-editor .field-row>label{min-width:0}.barcode-editor input[type=range]{width:100%;accent-color:var(--accent)}.barcode-editor label span{float:right;color:var(--muted);font-weight:500}.barcode-check{display:flex;align-items:center;gap:10px;margin:18px 0;color:var(--muted);font-size:13px}.barcode-check input{accent-color:var(--accent)}.barcode-preview{position:sticky;top:18px}.barcode-stage{min-height:230px;margin:18px 0;padding:20px;display:grid;place-items:center;background:#fff;border:1px solid #e7e2f1;border-radius:17px;overflow:auto}.barcode-stage canvas{display:block;max-width:100%;height:auto}.barcode-stage #barcode-empty{color:#756f84;text-align:center}.barcode-format-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:24px 0}.barcode-format-grid article{padding:18px;border:1px solid var(--line);border-radius:15px;background:var(--surface,#fff)}.barcode-format-grid h3{margin:0 0 8px}.barcode-format-grid p{margin:0;color:var(--muted);font-size:14px;line-height:1.65}.barcode-stage:has(#barcode-empty:not([hidden])) canvas{display:none}html[data-theme="dark"] .barcode-editor,html[data-theme="dark"] .barcode-preview,html[data-theme="dark"] .barcode-format-grid article{background:var(--surface);border-color:var(--line)}html[data-theme="dark"] .barcode-stage{background:#fff;border-color:#e7e2f1}@media(max-width:800px){.barcode-tool{grid-template-columns:1fr;padding-top:8px}.barcode-preview{position:static;order:-1}.barcode-stage{min-height:200px}.barcode-editor,.barcode-preview{padding:20px;border-radius:18px}.barcode-format-grid{grid-template-columns:1fr}.barcode-hero h1{font-size:42px}}