body {
    background: #f5f6f8;
}

.card {
    border-radius: 1rem;
}

.barcode-input-shell {
    position: relative;
}

.barcode-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: .13em;
    padding-right: .7rem;
    position: relative;
    z-index: 2;
    background: transparent;
}

.barcode-input-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: .5rem;
    pointer-events: none;
    z-index: 0;
}

.barcode-input-shell.upca-guide::before {
    background: linear-gradient(
        to right,
        rgba(13,110,253,.07) 0%, rgba(13,110,253,.07) 8.333%,
        rgba(25,135,84,.05) 8.333%, rgba(25,135,84,.05) 50%,
        rgba(255,193,7,.08) 50%, rgba(255,193,7,.08) 91.667%,
        rgba(220,53,69,.07) 91.667%, rgba(220,53,69,.07) 100%
    );
}

.barcode-input-shell.upce-guide::before {
    background: linear-gradient(
        to right,
        rgba(13,110,253,.07) 0%, rgba(13,110,253,.07) 12.5%,
        rgba(25,135,84,.05) 12.5%, rgba(25,135,84,.05) 87.5%,
        rgba(220,53,69,.07) 87.5%, rgba(220,53,69,.07) 100%
    );
}

.barcode-input-shell.upca-source-guide::before {
    background: linear-gradient(
        to right,
        rgba(13,110,253,.07) 0%, rgba(13,110,253,.07) 8.333%,
        rgba(25,135,84,.05) 8.333%, rgba(25,135,84,.05) 91.667%,
        rgba(220,53,69,.07) 91.667%, rgba(220,53,69,.07) 100%
    );
}

.input-separator {
    position: absolute;
    top: 1px;
    bottom: 1px;
    width: 1px;
    background: rgba(0,0,0,.14);
    pointer-events: none;
    z-index: 1;
}

.upca-guide .separator-one { left: 8.333%; }
.upca-guide .separator-two { left: 50%; }
.upca-guide .separator-three { left: 91.667%; }

.upce-guide .separator-one { left: 12.5%; }
.upce-guide .separator-two { left: 87.5%; }
.upce-guide .separator-three { display: none; }

.upca-source-guide .separator-one { left: 8.333%; }
.upca-source-guide .separator-two { left: 91.667%; }
.upca-source-guide .separator-three { display: none; }

.barcode-parts {
    display: grid;
    gap: 0;
    font-size: .72rem;
    color: var(--bs-secondary-color);
    margin-top: .25rem;
    text-align: center;
}

.barcode-parts.upca-parts { grid-template-columns: 1fr 5fr 5fr 1fr; }
.barcode-parts.upce-parts { grid-template-columns: 1fr 6fr 1fr; }
.barcode-parts.upca-source-parts { grid-template-columns: 1fr 10fr 1fr; }

.barcode-preview {
    min-height: 250px;
    padding: 1.25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    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%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}

.barcode-preview svg {
    display: block;
    max-width: none;
}

.result-list dd {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    word-break: break-word;
}

.checksum-box {
    background: var(--bs-tertiary-bg);
    border-radius: .5rem;
    padding: .85rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    white-space: normal;
}

@media (max-width: 575.98px) {
    .barcode-input {
        font-size: 1.05rem;
        letter-spacing: .07em;
    }
}