:root, [data-bs-theme="light"] { --app-page-a: #f7fbfc; --app-page-b: #fff8f4; --app-ocean: #126782; --app-ocean-strong: #0b556d; --app-ocean-soft: #e6f3f7; --app-coral: #e85d5d; --app-coral-strong: #cf4949; --app-coral-soft: #fff0ed; --app-sun: #d99616; --app-sun-soft: #fff5d8; --app-sky: #3d8fb7; --app-sky-soft: #eaf6fb; --app-green: #278a5b; --app-green-strong: #1b6d47; --app-green-soft: #eaf7ef; --app-surface: rgba(255,255,255,.94); --app-header-text: #fff; --app-line: rgba(17,73,94,.14); --app-shadow: 0 18px 44px rgba(31,72,88,.11); --app-shadow-soft: 0 8px 24px rgba(31,72,88,.08); }
[data-bs-theme="dark"] { --app-page-a: #10181c; --app-page-b: #1b1515; --app-ocean: #67c3dc; --app-ocean-strong: #8dd6e8; --app-ocean-soft: rgba(52,160,191,.16); --app-coral: #ff8982; --app-coral-strong: #ffaaa4; --app-coral-soft: rgba(232,93,93,.16); --app-sun: #ffd166; --app-sun-soft: rgba(217,150,22,.16); --app-sky: #72bce0; --app-sky-soft: rgba(61,143,183,.16); --app-green: #55c98b; --app-green-strong: #7adba5; --app-green-soft: rgba(48,166,103,.17); --app-surface: rgba(28,35,39,.95); --app-header-text: #fff; --app-line: rgba(174,220,233,.14); --app-shadow: 0 18px 46px rgba(0,0,0,.28); --app-shadow-soft: 0 8px 24px rgba(0,0,0,.2); }

body { position: relative; min-height: 100vh; background: radial-gradient(circle at 7% 0%, rgba(18,103,130,.14), transparent 31rem), radial-gradient(circle at 94% 5%, rgba(232,93,93,.12), transparent 29rem), linear-gradient(145deg, var(--app-page-a), var(--app-page-b)); }

.app-container { padding-top: 1.5rem !important; }
.theme-toolbar { position: absolute; top: 1rem; right: 1rem; z-index: 20; }
.theme-toggle-button { display: inline-grid; place-items: center; width: 2.55rem; height: 2.55rem; padding: 0; border: 1px solid rgba(255,255,255,.42); border-radius: 50%; background: rgba(15,48,62,.2); color: #fff; box-shadow: 0 6px 18px rgba(20,49,62,.16); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: pointer; transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.theme-toggle-button:hover { background: rgba(15,48,62,.34); }
.theme-toggle-button:focus-visible { outline: 0; box-shadow: 0 0 0 .22rem rgba(255,255,255,.48), 0 6px 18px rgba(20,49,62,.16); }
.theme-toggle-button:active { transform: translateY(1px); }
.theme-toggle-button i { font-size: 1.05rem; line-height: 1; }

.app-header { position: relative; overflow: hidden; padding: 1.35rem 1.45rem; border: 0; border-radius: 1.3rem; color: var(--app-header-text); background: linear-gradient(118deg, #075985 0%, #0e7490 34%, #df5b65 74%, #f0a33d 100%); box-shadow: 0 18px 42px rgba(34,83,102,.2); }
.app-header::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 18% -35%, rgba(255,255,255,.32), transparent 35%), radial-gradient(circle at 95% 110%, rgba(255,224,153,.34), transparent 32%); pointer-events: none; }
.app-header::after { content: ""; position: absolute; top: 0; right: 1.2rem; width: 6.5rem; height: 100%; opacity: .12; background: repeating-linear-gradient(90deg, #fff 0 3px, transparent 3px 7px, #fff 7px 8px, transparent 8px 13px); transform: skewX(-8deg); pointer-events: none; }
.app-brand-block { position: relative; z-index: 1; min-width: 0; padding-right: 6.4rem; }
#appTitle { user-select: none; -webkit-user-select: none; color: #fff; font-weight: 760; letter-spacing: -.025em; text-shadow: 0 1px 1px rgba(0,0,0,.08); }
.app-tagline { max-width: 46rem; color: rgba(255,255,255,.86); }

.card, .accordion-item, .modal-content { border-color: var(--app-line) !important; }
.card { position: relative; overflow: hidden; border-radius: 1rem; background: var(--app-surface); box-shadow: var(--app-shadow-soft) !important; }
#barcodeFormCard, #barcodePreviewCard { border: 1px solid var(--app-line) !important; }
#barcodePreviewCard { scroll-margin-top: .75rem; }
#barcodePreviewCard:focus { outline: 0; }
#barcodeFormCard { height: auto; }
.section-heading { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.section-heading h2 { flex: 0 0 auto; font-weight: 700; letter-spacing: -.01em; }
.section-heading-icon { display: inline-grid; place-items: center; width: 2rem; height: 2rem; flex: 0 0 2rem; border-radius: .62rem; background: var(--app-ocean-soft); color: var(--app-ocean-strong); font-size: 1rem; }
.section-heading-rule { height: 1px; flex: 1 1 auto; min-width: 1.5rem; background: linear-gradient(90deg, var(--app-line), transparent); }
.section-heading-preview .section-heading-icon { background: var(--app-coral-soft); color: var(--app-coral-strong); }

.form-label { color: var(--bs-emphasis-color); }
.form-control, .form-select, .input-group-text { border-color: var(--app-line); }
.form-control:focus, .form-select:focus { border-color: rgba(18,103,130,.62); box-shadow: 0 0 0 .22rem rgba(18,103,130,.14); }

.barcode-type-selector { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.barcode-type-option { display: flex; flex-direction: column; justify-content: center; min-height: 4.15rem; padding: .7rem .8rem; border: 1px solid var(--app-line); border-radius: .8rem; background: color-mix(in srgb, var(--app-surface) 92%, var(--app-ocean-soft)); color: var(--bs-body-color); cursor: pointer; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.barcode-type-option:hover { border-color: rgba(18,103,130,.38); transform: translateY(-1px); }
.barcode-type-name { display: flex; align-items: center; gap: .42rem; font-weight: 750; }
.barcode-type-name i { color: var(--app-ocean-strong); font-size: 1rem; }
.barcode-type-detail { margin-top: .12rem; color: var(--bs-secondary-color); font-size: .76rem; line-height: 1.2; }
.btn-check:checked + .barcode-type-option { border-color: var(--app-ocean); background: var(--app-ocean-soft); box-shadow: 0 0 0 .18rem rgba(18,103,130,.1); }
.btn-check:checked + .barcode-type-option .barcode-type-name { color: var(--app-ocean-strong); }
.btn-check:focus-visible + .barcode-type-option { outline: 0; box-shadow: 0 0 0 .22rem rgba(18,103,130,.18); }

.option-label-row { display: flex; align-items: center; gap: .35rem; margin-bottom: .5rem; }
.option-label-row .form-label { margin-bottom: 0; }
.option-help { display: inline-grid; place-items: center; width: 1.2rem; height: 1.2rem; padding: 0; border: 1px solid rgba(18,103,130,.28); border-radius: 50%; background: var(--app-ocean-soft); color: var(--app-ocean-strong); font-size: .72rem; font-weight: 800; line-height: 1; cursor: help; }
.option-help:hover, .option-help:focus { border-color: rgba(18,103,130,.5); background: rgba(61,143,183,.18); outline: 0; box-shadow: 0 0 0 .18rem rgba(18,103,130,.1); }

.barcode-editor { --barcode-editor-font-size: 1.25rem; position: relative; display: grid; grid-template-columns: 1fr 5fr 5fr 1fr; width: 100%; min-height: calc(1.5em + 1rem + 2px); padding: 0; overflow: hidden; border: 1px solid var(--app-line); border-radius: .8rem; background: transparent; color: var(--bs-body-color); font-family: Consolas, "Courier New", Courier, monospace; font-variant-numeric: tabular-nums; font-size: var(--barcode-editor-font-size); line-height: 1.5; letter-spacing: 0; word-spacing: 0; white-space: nowrap; caret-color: currentColor; outline: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.02); transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; }
.barcode-editor:focus { border-color: rgba(18,103,130,.78); box-shadow: 0 0 0 .25rem rgba(18,103,130,.16); }
.barcode-editor > span { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: calc(1.5em + 1rem); padding: .5rem .2rem; overflow: hidden; text-align: center; }
.barcode-editor .segment-ns { background: rgba(68,126,220,.14); }
.barcode-editor .segment-left { background: rgba(37,155,119,.12); }
.barcode-editor .segment-right { background: rgba(231,169,45,.16); }
.barcode-editor .segment-check { background: rgba(205,73,111,.13); }
.barcode-editor.upce-editor { grid-template-columns: 1fr 6fr 1fr; }
.barcode-editor.upce-editor .segment-right { display: none; }
.barcode-editor.is-empty::before { content: attr(data-placeholder); position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: .5rem .75rem; overflow: hidden; color: var(--bs-secondary-color); font-family: var(--bs-body-font-family); font-size: 1rem; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.barcode-value-storage { pointer-events: none; }

.barcode-parts { display: grid; width: 100%; gap: 0; margin-top: .3rem; color: var(--bs-secondary-color); text-align: center; }
.barcode-parts span { min-width: 0; font-family: var(--bs-body-font-family); font-size: .7rem; line-height: 1.2; font-weight: 600; white-space: nowrap; }
.barcode-parts.upca-parts, .barcode-parts.upca-source-parts { grid-template-columns: 1fr 5fr 5fr 1fr; }
.barcode-parts.upce-parts { grid-template-columns: 1fr 6fr 1fr; }

.btn { font-weight: 650; }
.btn-primary { --bs-btn-bg: var(--app-ocean); --bs-btn-border-color: var(--app-ocean); --bs-btn-hover-bg: var(--app-ocean-strong); --bs-btn-hover-border-color: var(--app-ocean-strong); --bs-btn-active-bg: var(--app-ocean-strong); --bs-btn-active-border-color: var(--app-ocean-strong); }
.btn-outline-primary { --bs-btn-color: var(--app-ocean-strong); --bs-btn-border-color: rgba(18,103,130,.38); --bs-btn-hover-bg: var(--app-ocean); --bs-btn-hover-border-color: var(--app-ocean); --bs-btn-active-bg: var(--app-ocean-strong); --bs-btn-active-border-color: var(--app-ocean-strong); }
.app-generate-button { border: 0; background: linear-gradient(110deg, #0b6079, #1686a3); box-shadow: 0 7px 18px rgba(18,103,130,.2); }
.app-generate-button:hover, .app-generate-button:focus { border: 0; background: linear-gradient(110deg, #11738e, #1d97b2); box-shadow: 0 9px 22px rgba(18,103,130,.26); }
.btn-internal { border: 1px solid transparent; background: var(--app-coral); color: #fff; }
.btn-internal:hover, .btn-internal:focus { border-color: transparent; background: var(--app-coral-strong); color: #fff; }
.btn-soft-help { border: 1px solid rgba(61,143,183,.24); background: var(--app-ocean-soft); color: var(--app-ocean-strong); }
.btn-soft-help:hover, .btn-soft-help:focus { border-color: rgba(61,143,183,.4); background: rgba(61,143,183,.18); color: var(--app-ocean-strong); }
.btn-soft-internal { border: 1px solid rgba(232,93,93,.27); background: var(--app-coral-soft); color: var(--app-coral-strong); }
.btn-soft-internal:hover, .btn-soft-internal:focus { border-color: rgba(232,93,93,.42); background: rgba(232,93,93,.18); color: var(--app-coral-strong); }
.barcode-help-button { white-space: nowrap; font-size: .78rem; }
.internal-upc-help-button { width: 31px; height: 31px; padding: 0; line-height: 29px; }
#downloadButtons .btn { border-color: rgba(61,143,183,.4); color: var(--app-ocean-strong); }
#downloadButtons .btn:hover, #downloadButtons .btn:focus { border-color: var(--app-ocean); background: var(--app-ocean); color: #fff; }

#advancedFormAccordions { --bs-accordion-border-color: var(--app-line); --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(18,103,130,.12); --bs-accordion-active-color: var(--bs-emphasis-color); }
#advancedFormAccordions .accordion-item { overflow: hidden; border-radius: .75rem; background: rgba(255,255,255,.025); }
#advancedFormAccordions .accordion-item + .accordion-item { margin-top: .65rem; }
#advancedFormAccordions .accordion-button { font-weight: 650; background: transparent; }
#advancedFormAccordions .accordion-item:first-child .accordion-button:not(.collapsed) { background: var(--app-sun-soft); }
#advancedFormAccordions .accordion-item:last-child .accordion-button:not(.collapsed) { background: var(--app-ocean-soft); }
#advancedFormAccordions .accordion-body { border-top: 1px solid var(--app-line); }

.transparent-grid { background-color: #fff; background-image: linear-gradient(45deg, #f0f0f0 25%, transparent 25%), linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f0f0f0 75%), linear-gradient(-45deg, transparent 75%, #f0f0f0 75%); }
.barcode-preview { min-height: 250px; padding: 1.25rem; border: 1px solid rgba(57,62,72,.16); border-radius: .8rem; overflow: auto; display: flex; align-items: center; justify-content: center; background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0; box-shadow: inset 0 1px 3px rgba(0,0,0,.04); }
.barcode-preview:focus { outline: 0; box-shadow: 0 0 0 .25rem rgba(232,93,93,.18), inset 0 1px 3px rgba(0,0,0,.04); }
.barcode-preview svg { display: block; max-width: none; }

.result-list dd, .batch-result-code, .batch-result-output { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; word-break: break-word; }
.checksum-box { padding: .9rem; border: 1px solid var(--app-line); border-radius: .6rem; background: var(--app-ocean-soft); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; white-space: normal; }
.barcode-details-item { border: 1px solid var(--app-line) !important; border-radius: 1rem; box-shadow: var(--app-shadow-soft) !important; }
.barcode-details-item > .accordion-header .accordion-button { border-radius: 1rem; font-weight: 650; }
.barcode-details-item > .accordion-header .accordion-button:not(.collapsed) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; background: var(--app-coral-soft); color: var(--bs-emphasis-color); }

.internal-result-accordion .internal-result-item { overflow: hidden; border: 1px solid color-mix(in srgb, var(--app-green) 32%, transparent) !important; border-radius: .8rem; background: var(--app-green-soft); }
.internal-result-accordion .accordion-button { gap: 0; padding: .7rem .85rem; background: transparent; color: var(--bs-emphasis-color); box-shadow: none; }
.internal-result-accordion .accordion-button:not(.collapsed) { background: color-mix(in srgb, var(--app-green) 10%, transparent); box-shadow: none; }
.internal-result-accordion .accordion-button::after { margin-left: auto; }
.internal-result-accordion .accordion-body { padding: .85rem 1rem 1rem; border-top: 1px solid color-mix(in srgb, var(--app-green) 26%, transparent); }
.internal-use-badge { background: var(--app-green); color: #fff; }

.internal-value-row code { font-size: 1rem; color: inherit; word-break: break-all; }

.modal-content { overflow: hidden; border: 1px solid var(--app-line) !important; border-radius: 1rem; box-shadow: var(--app-shadow); }
.modal-header { position: relative; background: linear-gradient(100deg, var(--app-ocean-soft), transparent 70%); }
.modal-header::after { content: ""; position: absolute; inset: auto 0 0; height: 2px; background: linear-gradient(90deg, var(--app-ocean), var(--app-coral), transparent 80%); }
.barcode-help-section h3 { padding-bottom: .35rem; border-bottom: 1px solid var(--app-line); color: var(--bs-emphasis-color); font-size: 1.1rem; }

.batch-results { display: grid; gap: .75rem; }
.batch-result-row { padding: .75rem; border: 1px solid var(--app-line); border-radius: .75rem; background: var(--app-surface); box-shadow: 0 3px 10px rgba(0,0,0,.025); }
.batch-result-error { border-color: var(--bs-danger-border-subtle); background: var(--bs-danger-bg-subtle); }
.batch-result-code, .batch-result-output { word-break: break-all; }
.batch-preview { width: 100%; min-height: 82px; max-height: 105px; padding: .35rem; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid rgba(57,62,72,.16); border-radius: .5rem; background-size: 14px 14px; background-position: 0 0, 0 7px, 7px -7px, -7px 0; }
.batch-preview svg { display: block; max-width: 100%; max-height: 96px; width: auto; height: auto; }
.batch-row-actions .btn { white-space: nowrap; }

.color-setting-row { display: flex; gap: .5rem; align-items: stretch; }
.color-setting-row .form-control-color { flex: 0 0 3rem; width: 3rem; min-height: 38px; }
.color-code-input { min-width: 0; }
.color-shortcuts { flex: 0 0 auto; }

.btn i.bi { line-height: 1; }
.accordion-button i.bi { color: var(--app-ocean-strong); }
.internal-result-accordion .internal-use-badge i.bi { color: #fff !important; }
#advancedFormAccordions .accordion-item:first-child .accordion-button i.bi { color: var(--app-sun); }
.modal-title i.bi { color: var(--app-ocean-strong); }
#internalUpcHelpModal .modal-title i.bi { color: var(--app-coral-strong); }

#appAlert { border-radius: .85rem; box-shadow: var(--app-shadow-soft); }

@media (max-width: 575.98px) {
	.app-container { padding-top: .75rem !important; }
	.theme-toolbar { top: 1.15rem; right: 1.15rem; }
	.theme-toggle-button { width: 2.2rem; height: 2.2rem; box-shadow: 0 4px 14px rgba(20,49,62,.14); }
	.theme-toggle-button i { font-size: .95rem; }
	.app-header { padding: 1.1rem; }
	.app-brand-block { padding-right: 2.7rem; }
	.app-header::after { right: -.6rem; width: 3.8rem; opacity: .09; }
	#appTitle { font-size: 1.45rem; }
	.barcode-editor { --barcode-editor-font-size: 1.05rem; }
	.barcode-type-option { min-height: 3.85rem; padding: .62rem .68rem; }
	.barcode-type-detail { font-size: .72rem; }
	.color-setting-row { flex-wrap: wrap; }
	.color-code-input { flex: 1 1 calc(100% - 3.5rem); }
	.color-shortcuts { width: 100%; }
	.color-shortcuts .btn { flex: 1 1 50%; }
}
@media (min-width: 768px) {
	#barcodeFormCard { min-height: 0; }
	.batch-result-row-grid { display: grid; grid-template-columns: minmax(125px, .8fr) minmax(110px, .75fr) minmax(130px, .9fr) minmax(190px, 1.4fr) auto; gap: .75rem; align-items: center; }
}
@media (max-width: 767.98px) {
	#barcodeWorkspace > #resultCard { order: 3; width: 100%; }
}