html { scroll-behavior: smooth; }
body { min-height: 100vh; display: flex; flex-direction: column; color: #24292e; }
[hidden] { display: none !important; }
.navbar-brand { font-size: 1.45rem; margin-right: 1rem; }
.brand-suffix { color: #bfc7cf; }
.nav-local { color: #bfc7cf; text-decoration: none; font-size: .9rem; }
.nav-local:hover, .nav-local:focus-visible, .nav-local.active { color: #fff; }
.page-heading { padding: 28px 0; }
.format-tag { padding: 4px 9px; border: 1px solid #b8c3ce; border-radius: 4px; color: #596675; font-size: .75rem; }
#generator, #help { scroll-margin-top: 20px; }
label { margin-bottom: 5px; }
.form-control, .form-select { min-height: 40px; }
.field-helper { border: 0; background: transparent; padding: 3px; color: #495057; border-radius: 3px; vertical-align: 1px; }
.field-helper:hover { color: #0d6efd; background: #e0eafa; }
.field-helper:focus-visible, .field-info:focus-visible { outline: 2px solid #0d6efd; outline-offset: 2px; }
.field-info { display: inline-flex; align-items: center; justify-content: center; border: 1px solid #66717c; border-radius: 50%; width: 12px; height: 12px; font-size: 9px; vertical-align: 1px; cursor: help; }
#kgDisplay, #cmDisplay { font-size: .78rem; }
.empty-state { padding: 14px 0; color: #596675; font-size: .875rem; }
.barcode-image { max-width: 100%; height: auto; background: #fff; }
.download-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.help-section { padding-top: 44px; padding-bottom: 28px; line-height: 1.7; }
.invalid-feedback { font-family: system-ui, sans-serif; }
.skip-link { position: absolute; top: -100px; left: 12px; z-index: 10; background: white; padding: 12px; }
.skip-link:focus { top: 12px; }
@media (max-width: 575px) {
    .navbar { justify-content: center; gap: 8px; }
    .navbar-brand { margin-right: 0; font-size: 1.25rem; }
    .navbar > div { width: 100%; justify-content: center; }
    label { font-size: .8rem; }
    .page-heading { padding: 24px 0; }
    #barcodeArea { padding: 16px !important; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }