.barcode-page{--barcode-accent:#087f6d;--barcode-soft:#eaf5f1;--barcode-line:#d7e2e7;color:#1d2d3b}.barcode-page *{box-sizing:border-box;letter-spacing:0}
.barcode-heading{margin-bottom:26px}.barcode-heading h1{font-size:36px!important;line-height:1.3!important;margin:0 0 14px!important}.barcode-heading>p:last-child{max-width:800px;margin:0!important;color:#5f7082!important;font-size:16px!important;line-height:1.8!important}.barcode-eyebrow{margin:0 0 8px!important;color:var(--barcode-accent)!important;font-size:12px!important;font-weight:800}
.barcode-page input[type=button],.barcode-page button{width:auto!important;min-height:42px!important;margin:0!important;padding:8px 14px!important;border:1px solid #cad8df!important;border-radius:6px!important;background:#fff!important;color:#294553!important;font-size:13px!important;font-weight:700;box-shadow:none!important}.barcode-page .barcode-main-control input[type=button]{border-color:var(--barcode-accent)!important;background:var(--barcode-accent)!important;color:#fff!important}.barcode-page button:hover{border-color:var(--barcode-accent)!important;background:var(--barcode-soft)!important}
.barcode-examples{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.barcode-examples span{margin-right:3px;color:#61717e;font-size:13px;font-weight:700}
.barcode-page .barcode-main-control input[type=text],.barcode-page .barcode-setting-grid input[type=number]{height:46px!important;margin:0!important;padding:8px 10px!important;border:1px solid #cad8df!important;border-radius:6px!important;background:#fff!important;color:#203a4a!important;font-size:15px!important}.barcode-page .barcode-setting-grid input[type=color]{width:100%!important;height:46px!important;margin:0!important;padding:4px!important;border:1px solid #cad8df!important;border-radius:6px!important;background:#fff!important}
.barcode-status{min-height:22px;margin:-7px 0 0!important;color:#087f6d!important;font-size:13px!important;line-height:1.6!important}.barcode-status.is-error{color:#b42318!important}
.barcode-page .barcode-radio-list input[type=radio]:checked{border-color:var(--barcode-accent)!important}.barcode-page .barcode-radio-list input[type=radio]::after{background:var(--barcode-accent)!important}
.barcode-preview-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.barcode-preview-heading h2{margin:0 0 4px!important}.barcode-preview-heading p{margin:0!important;color:#657585!important;font-size:12px!important}.barcode-preview-heading>div:last-child{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.barcode-guide{margin-top:42px;padding-top:30px;border-top:1px solid var(--barcode-line)}.barcode-guide>h2{margin:0 0 10px!important;font-size:23px!important}.barcode-guide>p{margin:0!important;color:#5c6d7e!important;font-size:15px!important;line-height:1.8!important}.barcode-guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 26px;margin-top:22px}.barcode-guide-grid section{padding:20px 0;border-bottom:1px solid #dfe6e9}.barcode-guide-grid h3{margin:0 0 8px!important;font-size:17px!important}.barcode-guide-grid p{margin:0!important;color:#617181!important;font-size:14px!important;line-height:1.75!important}.barcode-warning{margin:24px 0 0!important;padding:15px 17px;border-left:3px solid #bc6651;background:#fbf5f2;color:#67554e!important;font-size:13px!important;line-height:1.7!important}
.barcode-faq{margin-top:30px}.barcode-faq h2{font-size:21px!important;margin-bottom:12px!important}.barcode-faq details{border-top:1px solid var(--barcode-line)}.barcode-faq summary{padding:16px 0;font-size:15px;font-weight:700;cursor:pointer}.barcode-faq p{margin:0 0 16px!important;color:#5f6d80!important;font-size:14px!important;line-height:1.75!important}.barcode-page :focus-visible{outline:2px solid var(--barcode-accent)!important;outline-offset:3px}
@media(max-width:900px){.barcode-options-grid{grid-template-columns:1fr!important}.barcode-guide-grid{grid-template-columns:1fr}}
@media(max-width:620px){.barcode-heading h1{font-size:28px!important}.barcode-heading>p:last-child{font-size:15px!important}.barcode-main-control{grid-template-columns:1fr!important}.barcode-main-control input[type=button]{width:100%!important}.barcode-preview-heading{display:block}.barcode-preview-heading>div:last-child{justify-content:flex-start;margin-top:12px}.barcode-examples span{flex-basis:100%}}