.barcode-shell{--barcode-radius:1rem;--barcode-shadow:0 18px 50px rgb(0 0 0 / .07);width:100%;max-width:1320px;margin:0 auto;padding:2.25rem 1rem 4.5rem}.barcode-header{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:1rem;padding:0 .25rem}.barcode-heading{min-width:0}.barcode-eyebrow{display:inline-flex;align-items:center;gap:.45rem;margin:0 0 .55rem;padding:.28rem .55rem;border:1px solid var(--color-border);border-radius:999px;background:var(--color-surface);font-size:.68rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--color-muted)}.barcode-eyebrow::before{content:"";width:.4rem;height:.4rem;border-radius:999px;background:var(--color-success)}.barcode-title{margin:0;font-size:clamp(1.75rem,3.4vw,2.7rem);line-height:1.02;letter-spacing:-.035em}.barcode-description{margin:.65rem 0 0;max-width:68ch;color:var(--color-muted);font-size:.95rem;line-height:1.6}.barcode-status{min-height:2.5rem;display:flex;align-items:center;gap:.6rem;margin:0 0 1rem;padding:.55rem .8rem;border:1px solid var(--color-border);border-radius:.75rem;background:var(--color-surface);color:var(--color-muted);font-size:.78rem;box-shadow:0 1px 2px rgb(0 0 0/3%)}.barcode-status::before{content:"";width:.5rem;height:.5rem;flex:0 0 .5rem;border-radius:999px;background:var(--color-muted)}.barcode-layout{display:grid;grid-template-columns:minmax(0,1fr)minmax(21rem,27rem);gap:1.25rem;align-items:start}.barcode-panel{border:1px solid var(--color-border);border-radius:var(--barcode-radius);background:var(--color-surface);padding:1.25rem;box-shadow:0 1px 2px rgb(0 0 0/.025)}.barcode-panel-form{display:grid;gap:.8rem;padding:0;border:0;background:0 0;box-shadow:none;counter-reset:barcode-section}.barcode-section{display:grid;gap:.8rem;margin:0;padding:1.15rem;border:1px solid var(--color-border);border-radius:var(--barcode-radius);background:var(--color-surface);box-shadow:0 1px 2px rgb(0 0 0/.025);counter-increment:barcode-section}.barcode-section-title{display:flex;align-items:center;gap:.6rem;margin:0 0 .1rem;padding:0 0 .7rem;border-bottom:1px solid var(--color-border);font-size:.78rem;font-weight:800;letter-spacing:.065em;text-transform:uppercase;color:var(--color-on-surface)}.barcode-section-title::before{content:counter(barcode-section,decimal-leading-zero);display:inline-grid;place-items:center;width:1.65rem;height:1.65rem;flex:0 0 1.65rem;border:1px solid var(--color-border);border-radius:.5rem;background:var(--color-background);font-size:.62rem;letter-spacing:0;color:var(--color-muted);font-variant-numeric:tabular-nums}.barcode-field{display:grid;gap:.35rem;min-width:0}.barcode-field>label,.barcode-field-label{font-size:.78rem;font-weight:700;color:var(--color-on-surface)}.barcode-field input[type=text],.barcode-field input[type=url],.barcode-field input[type=tel],.barcode-field input[type=email],.barcode-field input[type=number],.barcode-field select,.barcode-field textarea{font-size:.875rem}.barcode-field input[type=color]{width:100%;height:2.9rem;padding:.2rem}.barcode-field input[type=text][data-barcode-field="content.text"]{font:600 .9rem/1.4 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,liberation mono,monospace;letter-spacing:.02em}.barcode-field-checkbox{display:flex;align-items:center;gap:.6rem;min-height:2.25rem}.barcode-field-checkbox label{order:2;font-size:.82rem;font-weight:600}.barcode-field-range .barcode-range-row{display:flex;align-items:center;gap:.75rem}.barcode-field-range input[type=range]{flex:1;min-width:0}.barcode-field-range output{min-width:3.25rem;text-align:end;font-variant-numeric:tabular-nums;font-size:.76rem;font-weight:700;color:var(--color-muted)}.barcode-hint{margin:.05rem 0 0;font-size:.72rem;line-height:1.45;color:var(--color-muted)}.barcode-hint[data-barcode-symbology-hint]{display:none}.barcode-hint[data-barcode-symbology-hint][data-active=true]{display:block}.barcode-grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.8rem .9rem}.barcode-grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:.8rem .9rem}.barcode-errors{margin:0;padding:.6rem .7rem;border:1px solid color-mix(in oklab,var(--color-warning) 40%,transparent);border-radius:.7rem;background:color-mix(in oklab,var(--color-warning) 8%,var(--color-surface))}.barcode-errors:empty{display:none}.barcode-errors ul{display:grid;gap:.3rem;margin:0;padding:0;list-style:none}.barcode-errors li{display:flex;gap:.5rem;align-items:baseline;font-size:.73rem;line-height:1.45;color:var(--color-on-surface)}.barcode-errors li::before{content:"";flex-shrink:0;width:.45rem;height:.45rem;border-radius:999px;background:var(--color-warning);position:relative;top:-.05rem}.barcode-scale{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem;margin:0;padding:0;border:0}.barcode-scale-option{display:grid;place-items:center;min-height:2.4rem;padding:.5rem .4rem;border:1px solid var(--color-border);border-radius:.7rem;cursor:pointer;background:var(--color-background);font-size:.8rem;font-weight:700;transition:border-color .14s,background .14s,box-shadow .14s,transform .14s}.barcode-scale-option:hover{background:var(--color-surface-hover);transform:translateY(-1px)}.barcode-scale-option:has(input:checked){border-color:var(--color-primary);box-shadow:inset 0 0 0 1px var(--color-primary),0 4px 12px rgb(0 0 0/4%)}.barcode-scale-option:has(input:focus-visible){outline:2px solid var(--color-primary);outline-offset:2px}.barcode-scale-option input{position:absolute;opacity:0;pointer-events:none}.barcode-noscript{margin:0;padding:.7rem .8rem;border:1px solid var(--color-warning);border-radius:.7rem;color:var(--color-warning);font-size:.8rem}.barcode-export-actions{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:.55rem;margin-top:.2rem}.barcode-export-actions button{min-height:2.7rem}.barcode-reset-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:.35rem;margin-top:.05rem}.barcode-panel-preview{display:grid;gap:.8rem;position:sticky;top:5.5rem;overflow:hidden;box-shadow:var(--barcode-shadow)}.barcode-panel-preview .barcode-section-title{margin:-.1rem 0 .1rem;padding-bottom:.8rem}.barcode-preview-box{display:grid;place-items:center;width:100%;min-height:12rem;border:1px solid var(--color-border);border-radius:.85rem;background:var(--color-background);overflow:hidden;padding:1.35rem;box-shadow:inset 0 0 0 6px color-mix(in oklab,var(--color-background) 92%,var(--color-border))}.barcode-preview-box svg{display:block;width:100%;height:auto;max-height:22rem;filter:drop-shadow(0 8px 14px rgb(0 0 0/8%))}[data-barcode-generator][data-barcode-transparent=true] .barcode-preview-box{background:repeating-conic-gradient(var(--color-surface) 0% 25%,var(--color-background) 0% 50%)50%/1.25rem 1.25rem}.barcode-empty{margin:0;color:var(--color-muted);font-size:.82rem;line-height:1.45;text-align:center;max-width:22ch}.barcode-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin:0;padding:.15rem;border:1px solid var(--color-border);border-radius:.75rem;background:var(--color-background);overflow:hidden}.barcode-meta div{display:grid;gap:.18rem;min-width:0;padding:.65rem .6rem}.barcode-meta div+div{border-inline-start:1px solid var(--color-border)}.barcode-meta div:nth-child(n+3){border-top:1px solid var(--color-border)}.barcode-meta dt{font-size:.62rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--color-muted)}.barcode-meta dd{margin:0;font:700 .76rem/1.2 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,liberation mono,monospace;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.barcode-warnings{display:grid;gap:.4rem;margin:0;padding:0;list-style:none}.barcode-warnings ul{display:grid;gap:.4rem;margin:0;padding:0;list-style:none}.barcode-warnings li{display:flex;gap:.5rem;align-items:baseline;padding:.55rem .65rem;border-radius:.65rem;font-size:.73rem;line-height:1.4;border:1px solid transparent}.barcode-warnings li::before{content:"";flex-shrink:0;width:.45rem;height:.45rem;border-radius:999px;position:relative;top:-.05rem}.barcode-warnings li[data-level=warning]{color:var(--color-warning);border-color:color-mix(in oklab,var(--color-warning) 35%,transparent);background:color-mix(in oklab,var(--color-warning) 10%,var(--color-surface))}.barcode-warnings li[data-level=warning]::before{background:var(--color-warning)}.barcode-warnings li[data-level=info]{color:var(--color-info);border-color:color-mix(in oklab,var(--color-info) 35%,transparent);background:color-mix(in oklab,var(--color-info) 10%,var(--color-surface))}.barcode-warnings li[data-level=info]::before{background:var(--color-info)}.barcode-privacy-note{margin:0;padding:.65rem .75rem;border-inline-start:3px solid var(--color-success);background:color-mix(in oklab,var(--color-success) 8%,var(--color-surface));border-radius:0 .6rem .6rem 0;color:var(--color-muted);font-size:.72rem;line-height:1.5}.tool-page-content{max-width:72ch;margin:3rem auto 0;padding-top:2.25rem;border-top:1px solid var(--color-border)}.tool-page-content h2{font-size:1.15rem;margin:2rem 0 .6rem}.tool-page-content h3{font-size:1rem;margin:1.5rem 0 .5rem}.tool-page-content p,.tool-page-content li{color:var(--color-on-surface);font-size:.925rem;line-height:1.65}.tool-page-content p{margin:0 0 .8rem}.tool-page-content ul,.tool-page-content ol{margin:0 0 .8rem;padding-inline-start:1.4rem;display:grid;gap:.35rem}@media(max-width:1120px){.barcode-layout{grid-template-columns:minmax(0,1fr)minmax(19rem,23rem)}}@media(max-width:900px){.barcode-layout{grid-template-columns:1fr}.barcode-panel-preview{position:static;order:-1}.barcode-preview-box{max-width:34rem;margin-inline:auto}.barcode-preview-box svg{max-height:20rem}}@media(max-width:600px){.barcode-shell{padding:1.25rem .75rem 3.25rem}.barcode-header{padding:0;margin-bottom:.85rem}.barcode-title{font-size:clamp(1.65rem,8vw,2.15rem)}.barcode-description{font-size:.84rem}.barcode-panel{padding:1rem}.barcode-section{padding:.95rem}.barcode-grid-2,.barcode-grid-3{grid-template-columns:1fr}.barcode-preview-box{min-height:9rem;padding:1rem}.barcode-meta dd{font-size:.69rem}.barcode-export-actions{grid-template-columns:1fr}.barcode-reset-actions{justify-content:flex-start}}@media(prefers-reduced-motion:reduce){.barcode-scale-option{transition:none}}