.barcode-workspace{overflow:hidden}.barcode-layout{display:grid;min-height:670px;grid-template-columns:minmax(330px,.78fr) minmax(0,1.35fr)}.barcode-controls{min-width:0;padding:clamp(22px,3vw,31px);border-right:1px solid var(--dev-line);background:#fafdfd}.barcode-source-field,.barcode-colors>label{display:grid;gap:8px}.barcode-source-field>span,.barcode-colors>label>span:first-child{color:var(--dev-ink);font-size:.8125rem;font-weight:760}.barcode-source-field textarea{width:100%;min-height:126px;padding:14px 15px;resize:vertical;border:1.5px solid var(--dev-line);border-radius:11px;outline:none;color:#13252a;background:#fff;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:.85rem;line-height:1.6}.barcode-source-field textarea:focus-visible{border-color:var(--developer-accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--developer-accent) 14%,transparent)}.barcode-source-field small,.barcode-key-hint{color:var(--dev-muted);font-size:.75rem;line-height:1.5}.barcode-settings-heading{display:flex;margin:27px 0 15px;align-items:center;gap:8px;color:var(--dev-ink);font-size:.875rem}.barcode-settings-heading svg{width:17px;color:var(--developer-accent)}.barcode-segments{display:grid;gap:16px}.barcode-segments .dev-segmented>div{width:100%}.barcode-segments .dev-segmented label{flex:1}.barcode-colors{display:grid;margin-top:19px;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.barcode-color-input{display:flex;min-height:45px;padding:5px 9px 5px 6px;align-items:center;gap:8px;border:1.5px solid var(--dev-line);border-radius:10px;background:#fff}.barcode-color-input input{width:34px;height:31px;padding:0;overflow:hidden;border:0;border-radius:7px;background:transparent}.barcode-color-input code{min-width:0;color:var(--dev-muted);font-size:.72rem}.barcode-check{display:flex;margin-top:18px;align-items:center;gap:9px;color:#2c3e44;font-size:.8125rem;font-weight:650}.barcode-check input{width:17px;height:17px;accent-color:var(--developer-accent)}.barcode-draw-button{width:100%;min-height:47px;margin-top:24px}.barcode-key-hint{margin:8px 0 0;text-align:center}.barcode-result{display:grid;min-width:0;grid-template-rows:auto auto minmax(470px,1fr) auto;align-content:stretch;background:#f1faf9}.barcode-result-heading{display:flex;min-height:52px;padding:0 18px;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--dev-line);color:var(--dev-muted);background:#f6fcfc;font-size:.75rem;font-weight:760}.barcode-result-heading>span:first-child{display:inline-flex;align-items:center;gap:7px;color:var(--dev-ink);font-size:.8125rem}.barcode-result-heading svg{width:17px;color:var(--developer-accent)}.barcode-error{margin:16px 18px 0}.barcode-metrics{display:grid;padding:14px 16px;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;border-bottom:1px solid var(--dev-line);background:#f3fbfa}.barcode-preview{display:grid;min-height:470px;padding:clamp(26px,5vw,54px);place-items:center;overflow:auto;background-image:radial-gradient(circle,color-mix(in oklab,var(--developer-accent) 15%,transparent) 1px,transparent 1px);background-position:0 0;background-size:18px 18px}.barcode-svg{display:grid;width:100%;place-items:center}.barcode-svg>svg{display:block;width:min(100%,630px);max-height:420px;filter:drop-shadow(0 14px 18px oklch(.22 .03 210 / .1))}.barcode-preview--sheet{padding-block:34px}.barcode-preview--sheet .barcode-svg>svg{width:min(100%,390px);max-height:none;border:1px solid oklch(.86 .01 210);box-shadow:0 17px 42px #071e2224;filter:none}.barcode-result-actions{display:flex;padding:14px 16px;flex-wrap:wrap;align-items:center;gap:8px;border-top:1px solid var(--dev-line);background:#f9fdfc}.barcode-empty{display:grid;min-height:560px;padding:38px;place-content:center;justify-items:center;gap:9px;color:var(--dev-muted);text-align:center}.barcode-empty svg{width:34px;height:34px;color:var(--developer-accent)}.barcode-empty strong{color:var(--dev-ink)}.barcode-empty span{max-width:33ch;font-size:.875rem;line-height:1.5}.barcode-spin{animation:barcode-spin .8s linear infinite}@keyframes barcode-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.barcode-spin{animation:none}}@media(max-width:880px){.barcode-layout{grid-template-columns:1fr}.barcode-controls{border-right:0;border-bottom:1px solid var(--dev-line)}}@media(max-width:620px){.barcode-controls{padding:19px 15px}.barcode-colors{grid-template-columns:1fr}.barcode-metrics{padding:12px;grid-template-columns:1fr}.barcode-preview{min-height:360px;padding:24px 14px}.barcode-result-actions{padding:12px}.barcode-result-actions .dev-button{flex:1 1 145px}}