/* Barcode Studio - /barcode-generator. Prefix: .bcs- */

.bcs-page {
    --bcs-ink: #0f172a;
    --bcs-ink-2: #475569;
    --bcs-line: #e2e8f0;
    --bcs-soft: #f1f5f9;
    --bcs-card: #ffffff;
    --bcs-brand: #4f46e5;
    --bcs-brand-2: #6366f1;
    --bcs-brand-soft: #eef2ff;
    --bcs-ok: #059669;
    --bcs-ok-soft: #ecfdf5;
    --bcs-bad: #dc2626;
    --bcs-bad-soft: #fef2f2;
    --bcs-warn: #b45309;
    --bcs-laser: #ef4444;
    --bcs-radius: 16px;
    --bcs-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .06);
    color: var(--bcs-ink);
    overflow-x: clip;
}

.bcs-page section { padding: 0; overflow: visible; }
.bcs-page *, .bcs-page *::before, .bcs-page *::after { box-sizing: border-box; }

/* ---------- hero ---------- */
.bcs-hero {
    position: relative;
    overflow: hidden;
    background: radial-gradient(1200px 400px at 80% -10%, rgba(99, 102, 241, .45), transparent 60%),
                linear-gradient(135deg, #0b1024 0%, #151b3d 55%, #1e1b4b 100%);
    color: #fff;
    padding-block: 44px 40px;
    margin-bottom: 26px;
}
.bcs-hero-bars {
    position: absolute;
    inset: 0 0 0 auto;
    width: min(46%, 560px);
    opacity: .22;
    background-image: repeating-linear-gradient(90deg,
        #fff 0 3px, transparent 3px 7px, #fff 7px 8px, transparent 8px 12px,
        #fff 12px 17px, transparent 17px 19px, #fff 19px 20px, transparent 20px 26px,
        #fff 26px 28px, transparent 28px 33px);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%, #000 80%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 35%, #000 80%, transparent);
    animation: bcs-drift 18s linear infinite;
}
.bcs-hero-laser {
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    top: 10%;
    background: var(--bcs-laser);
    box-shadow: 0 0 12px 3px rgba(239, 68, 68, .9);
    opacity: 1;
    animation: bcs-scan 3.6s ease-in-out infinite alternate;
}
.bcs-hero-inner { position: relative; }
.bcs-kicker {
    display: inline-block;
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 600;
    color: #c7d2fe;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    padding: 4px 10px;
    border-radius: 999px;
    margin: 0 0 12px;
}
.bcs-h1 {
    font-size: clamp(1.9rem, 4.2vw, 3rem);
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0 0 10px;
    color: #fff;
    line-height: 1.1;
}
.bcs-lede { max-width: 640px; color: #cbd5e1; font-size: 1.05rem; margin: 0 0 14px; }
.bcs-privacy { display: flex; align-items: center; gap: 8px; margin: 0; color: #a7f3d0; font-size: .92rem; }
.bcs-privacy svg { width: 18px; height: 18px; fill: currentColor; flex: none; }

@keyframes bcs-drift { to { background-position: 330px 0; } }
@keyframes bcs-scan { from { top: 12%; } to { top: 86%; } }

/* ---------- tabs ---------- */
.bcs-tabs {
    position: relative;
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: var(--bcs-soft);
    border: 1px solid var(--bcs-line);
    border-radius: 12px;
    margin-bottom: 16px;
}
.bcs-tab {
    position: relative;
    z-index: 1;
    border: 0;
    background: transparent;
    padding: 8px 16px;
    border-radius: 9px;
    font-weight: 600;
    color: var(--bcs-ink-2);
    transition: color .2s;
}
.bcs-tab.is-active { color: var(--bcs-ink); }
.bcs-tab-note { font-weight: 500; font-size: .75rem; color: #64748b; margin-left: 4px; }
.bcs-tab-ink {
    position: absolute;
    top: 4px; bottom: 4px; left: 4px;
    width: 0;
    background: #fff;
    border-radius: 9px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), width .3s cubic-bezier(.2, .8, .2, 1);
}

/* ---------- layout ---------- */
.bcs-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    gap: 20px;
    align-items: start;
}
.bcs-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.bcs-side { min-width: 0; align-self: stretch; }
.bcs-preview { position: sticky; top: 88px; }

.bcs-card {
    background: var(--bcs-card);
    border: 1px solid var(--bcs-line);
    border-radius: var(--bcs-radius);
    box-shadow: var(--bcs-shadow);
    padding: 20px;
    text-align: left;
}
.bcs-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.bcs-h2 { font-size: 1.12rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 10px; color: var(--bcs-ink); }
.bcs-h3 { font-size: .95rem; font-weight: 700; margin: 0; }
.bcs-step {
    display: inline-grid;
    place-items: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--bcs-brand-soft);
    color: var(--bcs-brand);
    font-size: .85rem;
    font-weight: 800;
}

/* ---------- format picker ---------- */
.bcs-groups { display: flex; flex-direction: column; gap: 16px; }
.bcs-group-title {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    color: #64748b;
    margin: 0 0 8px;
}
.bcs-group-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.bcs-fmt {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
    background: #fff;
    border: 1.5px solid var(--bcs-line);
    border-radius: 12px;
    padding: 10px 10px 9px;
    color: var(--bcs-ink);
    min-height: 44px;
    transition: border-color .18s, box-shadow .18s, transform .18s, background .18s;
}
.bcs-fmt:hover { border-color: #a5b4fc; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(79, 70, 229, .12); }
.bcs-fmt[aria-checked="true"] {
    border-color: var(--bcs-brand);
    background: linear-gradient(180deg, #f5f7ff, #fff);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .18);
}
.bcs-fmt[aria-checked="true"]::after {
    content: "";
    position: absolute;
    top: 8px; right: 8px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--bcs-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2 6.8 11 12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}
.bcs-fmt-thumb {
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    margin-bottom: 2px;
}
.bcs-fmt-thumb svg { height: 32px; width: auto; max-width: 100%; display: block; }
.bcs-fmt-name { font-weight: 700; font-size: .92rem; }
.bcs-fmt-desc { font-size: .76rem; color: var(--bcs-ink-2); line-height: 1.3; }
.bcs-fmt-rule { font-size: .7rem; color: #64748b; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }

.bcs-link {
    background: none;
    border: 0;
    padding: 4px 2px;
    color: var(--bcs-brand);
    font-weight: 600;
    font-size: .88rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.bcs-link-muted { color: #64748b; }

.bcs-helper {
    background: var(--bcs-brand-soft);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 14px;
    animation: bcs-pop .25s ease-out;
}
.bcs-helper p { margin: 0 0 8px; font-weight: 600; }
.bcs-helper-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.bcs-helper-item {
    text-align: left;
    background: #fff;
    border: 1px solid #c7d2fe;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: .85rem;
    color: var(--bcs-ink);
}
.bcs-helper-item strong { display: block; color: var(--bcs-brand); font-size: .8rem; }
.bcs-helper-item:hover { border-color: var(--bcs-brand); }

/* ---------- inputs ---------- */
.bcs-label { display: block; font-weight: 600; font-size: .86rem; color: var(--bcs-ink-2); margin-bottom: 6px; }
.bcs-input-wrap { position: relative; }
.bcs-input {
    width: 100%;
    border: 1.5px solid var(--bcs-line);
    border-radius: 10px;
    padding: 12px 70px 12px 14px;
    font-size: 1.1rem;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    color: var(--bcs-ink);
    background: #fff;
    transition: border-color .18s, box-shadow .18s;
}
.bcs-input:focus { outline: none; border-color: var(--bcs-brand); box-shadow: 0 0 0 4px rgba(99, 102, 241, .2); }
.bcs-input.is-invalid { border-color: var(--bcs-bad); box-shadow: 0 0 0 4px rgba(220, 38, 38, .12); }
.bcs-input-sm { font-size: .9rem; padding: 8px 10px; margin-top: 8px; }
.bcs-textarea { padding: 10px 12px; font-size: .95rem; resize: vertical; min-height: 150px; }
.bcs-counter {
    position: absolute;
    right: 12px; top: 50%;
    transform: translateY(-50%);
    font-size: .75rem;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}
.bcs-hint { font-size: .82rem; color: #64748b; margin: 8px 0 0; }
.bcs-msg { font-size: .88rem; margin: 6px 0 0; min-height: 1.3em; }
.bcs-msg.is-error { color: var(--bcs-bad); }
.bcs-msg.is-warn { color: var(--bcs-warn); }
.bcs-check { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 500; color: var(--bcs-ink); margin: 0; }
.bcs-check input { width: 18px; height: 18px; accent-color: var(--bcs-brand); }
.bcs-row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.bcs-select { border: 1.5px solid var(--bcs-line); border-radius: 8px; padding: 7px 8px; background: #fff; font-size: .88rem; max-width: 100%; }
.bcs-inline-field { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; font-weight: 600; color: var(--bcs-ink-2); margin: 0; }

/* ---------- buttons ---------- */
.bcs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 42px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1.5px solid var(--bcs-line);
    background: #fff;
    color: var(--bcs-ink);
    font-weight: 600;
    font-size: .9rem;
    transition: transform .15s, box-shadow .15s, background .15s, border-color .15s;
}
.bcs-btn:hover:not(:disabled) { border-color: #a5b4fc; box-shadow: 0 4px 12px rgba(15, 23, 42, .08); }
.bcs-btn:active:not(:disabled) { transform: translateY(1px) scale(.98); }
.bcs-btn:disabled { opacity: .5; cursor: not-allowed; }
.bcs-btn-primary { background: linear-gradient(135deg, var(--bcs-brand), var(--bcs-brand-2)); border-color: transparent; color: #fff; }
.bcs-btn-primary:hover:not(:disabled) { border-color: transparent; box-shadow: 0 6px 18px rgba(79, 70, 229, .35); }
.bcs-btn-ghost { background: var(--bcs-brand-soft); border-color: transparent; color: var(--bcs-brand); }
.bcs-btn-sm { min-height: 34px; padding: 5px 12px; font-size: .84rem; }
.bcs-btn-scan { border-color: #6ee7b7; color: #047857; background: var(--bcs-ok-soft); }
.bcs-actions { display: flex; gap: 10px; margin-top: 14px; }
.bcs-actions-wrap { flex-wrap: wrap; align-items: center; }

.bcs-page :focus-visible {
    outline: 3px solid #f59e0b;
    outline-offset: 2px;
}

/* ---------- customise ---------- */
.bcs-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.bcs-preset {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1.5px solid var(--bcs-line);
    background: #fff;
    border-radius: 999px;
    padding: 6px 12px 6px 6px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--bcs-ink);
    min-height: 36px;
    transition: border-color .15s, transform .15s;
}
.bcs-preset:hover { border-color: var(--bcs-brand); transform: translateY(-1px); }
.bcs-sw {
    width: 24px; height: 24px;
    border-radius: 50%;
    border: 1px solid var(--bcs-line);
    background: repeating-linear-gradient(90deg, var(--a) 0 2px, var(--b) 2px 4px);
}
.bcs-sw-clear {
    background: repeating-linear-gradient(90deg, var(--a) 0 2px, transparent 2px 4px),
                conic-gradient(#e2e8f0 25%, #fff 0 50%, #e2e8f0 0 75%, #fff 0) 0 0/8px 8px;
}
.bcs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px 20px; }
.bcs-field label { display: flex; justify-content: space-between; font-size: .86rem; font-weight: 600; color: var(--bcs-ink-2); margin-bottom: 6px; }
.bcs-field output { color: var(--bcs-ink); font-variant-numeric: tabular-nums; margin-left: auto; margin-right: 3px; }
.bcs-field input[type="range"] { width: 100%; accent-color: var(--bcs-brand); height: 28px; }
.bcs-colors { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.bcs-colors label:not(.bcs-check) { align-items: center; gap: 8px; margin: 0; }
.bcs-colors input[type="color"] { width: 38px; height: 32px; padding: 2px; border: 1.5px solid var(--bcs-line); border-radius: 8px; background: #fff; }
.bcs-seg { display: inline-flex; background: var(--bcs-soft); border: 1px solid var(--bcs-line); border-radius: 10px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.bcs-seg button {
    border: 0;
    background: transparent;
    border-radius: 7px;
    padding: 6px 11px;
    font-size: .84rem;
    font-weight: 600;
    color: var(--bcs-ink-2);
    min-height: 32px;
    transition: background .15s, color .15s;
}
.bcs-seg button[aria-checked="true"] { background: #fff; color: var(--bcs-brand); box-shadow: 0 1px 3px rgba(15, 23, 42, .14); }
.bcs-seg-sm button { padding: 4px 10px; }

.bcs[data-dim="2d"] .bcs-only-1d,
.bcs[data-dim="2d"] .bcs-only-text,
.bcs[data-dim="2d"] .bcs-only-text-capable,
.bcs[data-dim="1d"] .bcs-only-2d { display: none; }
.bcs[data-showtext="no"] .bcs-only-text { opacity: .45; }
.bcs[data-mode="batch"] #bcsSingleInput { display: none; }

/* ---------- preview ---------- */
.bcs-badge {
    font-size: .76rem;
    font-weight: 700;
    color: var(--bcs-brand);
    background: var(--bcs-brand-soft);
    padding: 4px 10px;
    border-radius: 999px;
}
.bcs-stage {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 220px;
    border-radius: 12px;
    border: 1px dashed #cbd5e1;
    background: #f8fafc;
    padding: 18px;
    overflow: hidden;
}
.bcs-stage.is-transparent {
    background: conic-gradient(#e2e8f0 25%, #fff 0 50%, #e2e8f0 0 75%, #fff 0) 0 0/18px 18px;
}
.bcs-stage-inner { max-width: 100%; display: grid; place-items: center; transition: opacity .2s; }
.bcs-stage-inner svg { max-width: 100%; max-height: 360px; height: auto; width: auto; display: block; }
.bcs-stage-inner.is-enter { animation: bcs-in .32s cubic-bezier(.2, .8, .2, 1); }
.bcs-stage.is-error .bcs-stage-inner { opacity: .25; filter: grayscale(1); }
.bcs-stage.is-loading .bcs-stage-inner { opacity: .3; }
.bcs-stage-laser {
    position: absolute;
    left: 6%; right: 6%;
    height: 2px;
    top: 50%;
    background: var(--bcs-laser);
    box-shadow: 0 0 10px 2px rgba(239, 68, 68, .7);
    opacity: 0;
    pointer-events: none;
}
.bcs-stage.is-scanning .bcs-stage-laser { opacity: 1; animation: bcs-scan-stage 1s ease-in-out infinite alternate; }
.bcs-stage-msg {
    font-size: .9rem;
    color: #475569;
    text-align: center;
    display: flex;
    align-items: center;
    gap: 10px;
}
.bcs-spinner {
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 3px solid #c7d2fe;
    border-top-color: var(--bcs-brand);
    animation: bcs-spin .8s linear infinite;
}
@keyframes bcs-scan-stage { from { top: 12%; } to { top: 88%; } }
@keyframes bcs-spin { to { transform: rotate(360deg); } }
@keyframes bcs-in { from { opacity: 0; transform: scale(.96) translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes bcs-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.bcs-note { font-size: .86rem; margin: 10px 0 0; min-height: 1.2em; color: var(--bcs-ok); font-weight: 600; }
.bcs-export { border-top: 1px solid var(--bcs-line); margin-top: 14px; padding-top: 14px; }
.bcs-export-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.bcs-scan-result { font-size: .86rem; margin: 10px 0 0; min-height: 1.2em; }
.bcs-scan-result.is-ok { color: var(--bcs-ok); font-weight: 600; }
.bcs-scan-result.is-bad { color: var(--bcs-bad); }
.bcs-scan-result.is-info { color: #64748b; }

.bcs-history { border-top: 1px solid var(--bcs-line); margin-top: 14px; padding-top: 12px; }
.bcs-history-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.bcs-history-item { position: relative; animation: bcs-pop .25s ease-out; }
.bcs-history-restore {
    width: 100%;
    border: 1px solid var(--bcs-line);
    border-radius: 10px;
    background: #fff;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
}
.bcs-history-restore:hover { border-color: var(--bcs-brand); }
.bcs-history-restore img { width: 100%; height: 40px; object-fit: contain; }
.bcs-history-restore span { font-size: .68rem; color: var(--bcs-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.bcs-history-del {
    position: absolute;
    top: -6px; right: -6px;
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 1px solid var(--bcs-line);
    background: #fff;
    color: #64748b;
    font-size: 14px;
    line-height: 1;
    padding: 0;
}
.bcs-history-del:hover { color: var(--bcs-bad); border-color: var(--bcs-bad); }

/* ---------- batch ---------- */
.bcs-batch-summary { font-weight: 600; margin: 16px 0 6px; }
.bcs-batch-errors { list-style: none; padding: 0; margin: 0 0 8px; max-height: 180px; overflow: auto; }
.bcs-batch-errors li {
    font-size: .84rem;
    background: var(--bcs-bad-soft);
    color: #991b1b;
    border-radius: 8px;
    padding: 6px 10px;
    margin-bottom: 4px;
    overflow-wrap: anywhere;
}
.bcs-batch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; }
.bcs-batch-item {
    margin: 0;
    border: 1px solid var(--bcs-line);
    border-radius: 10px;
    padding: 8px;
    background: #fff;
    text-align: center;
    animation: bcs-pop .3s ease-out both;
}
.bcs-batch-item img { max-width: 100%; height: 70px; object-fit: contain; }
.bcs-batch-item figcaption { font-size: .72rem; color: var(--bcs-ink-2); overflow-wrap: anywhere; margin-top: 4px; font-family: ui-monospace, Consolas, monospace; }

/* ---------- info ---------- */
.bcs-info { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; margin: 24px 0; }
.bcs-steps { margin: 12px 0 0; padding-left: 0; list-style: none; counter-reset: bcs; }
.bcs-steps li { counter-increment: bcs; position: relative; padding: 0 0 12px 40px; color: var(--bcs-ink-2); }
.bcs-steps li::before {
    content: counter(bcs);
    position: absolute;
    left: 0; top: -2px;
    width: 28px; height: 28px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: var(--bcs-brand-soft);
    color: var(--bcs-brand);
    font-weight: 800;
}
.bcs-steps strong { color: var(--bcs-ink); }
.bcs-crosslinks { list-style: none; padding: 0; margin: 12px 0 0; }
.bcs-crosslinks li { padding: 8px 0; border-bottom: 1px solid var(--bcs-line); }
.bcs-crosslinks a { font-weight: 700; color: var(--bcs-brand); display: block; }
.bcs-crosslinks span { font-size: .84rem; color: #64748b; }

/* ---------- toasts / status ---------- */
.bcs-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bcs-toasts { position: fixed; z-index: 2000; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
.bcs-toast {
    background: #0f172a;
    color: #fff;
    padding: 10px 16px;
    border-radius: 12px;
    font-size: .9rem;
    font-weight: 500;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .3);
    animation: bcs-toast-in .3s cubic-bezier(.2, .8, .2, 1);
}
.bcs-toast.is-error { background: #991b1b; }
.bcs-toast.is-ok { background: #065f46; }
.bcs-toast.is-out { opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; }
@keyframes bcs-toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.bcs-scanhost { position: absolute; left: -10000px; top: 0; width: 1400px; height: auto; }

/* entrance */
.bcs-anim { animation: bcs-rise .5s cubic-bezier(.2, .8, .2, 1) both; }
#bcsFormats { animation-delay: .04s; }
#bcsSingleInput { animation-delay: .1s; }
#bcsCustomise { animation-delay: .16s; }
#bcsPreview { animation-delay: .12s; }
@keyframes bcs-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* sticky must not be broken by the entrance transform after it finishes */
.bcs-preview.bcs-anim { animation-fill-mode: backwards; }

.bcs-print-sheet { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 991.98px) {
    .bcs-layout { grid-template-columns: minmax(0, 1fr); }
    .bcs-preview { position: static; }
    .bcs-info { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 991.98px) {
    .bcs-layout { display: flex; flex-direction: column; gap: 16px; }
    .bcs-main, .bcs-side { display: contents; }
    .bcs-layout > .bcs-main > .bcs-card,
    .bcs-layout > .bcs-side > .bcs-card { width: 100%; min-width: 0; max-width: 100%; align-self: stretch; }
    #bcsFormats { order: 1; }
    #bcsSingleInput, #bcsPanelBatch { order: 2; }
    .bcs-preview { order: 3; }
    #bcsCustomise { order: 4; }
}
@media (max-width: 640px) {
    .bcs-hero { padding-block: 28px 26px; margin-bottom: 18px; }
    .bcs-hero-bars { width: 70%; opacity: .14; }
    .bcs-lede { font-size: .95rem; }
    .bcs-card { padding: 16px 14px; }
    .bcs-tabs { display: flex; }
    .bcs-tab { flex: 1; }
    .bcs-groups {
        flex-direction: row;
        overflow-x: auto;
        gap: 14px;
        padding-bottom: 8px;
        margin-inline: -14px;
        padding-inline: 14px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }
    .bcs-group { flex: none; }
    .bcs-group-cards { display: flex; gap: 8px; }
    .bcs-fmt { width: 138px; flex: none; scroll-snap-align: start; }
    .bcs-fmt-desc { display: none; }
    .bcs-stage { min-height: 170px; padding: 12px; }
    .bcs-export-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .bcs-btn { padding: 8px 8px; }
    .bcs-grid { grid-template-columns: minmax(0, 1fr); }
    .bcs-helper-grid { grid-template-columns: minmax(0, 1fr); }
    .bcs-actions-wrap .bcs-btn { flex: 1 1 45%; }
    .bcs-input { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .bcs-page *, .bcs-page *::before, .bcs-page *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .bcs-hero-laser { top: 50%; }
}

/* ---------- print ---------- */
@media print {
    body.bcs-printing > *:not(.bcs-print-sheet) { display: none !important; }
    body.bcs-printing { background: #fff !important; margin: 0 !important; padding: 0 !important; }
    body.bcs-printing .bcs-print-sheet { display: block !important; }
    .bcs-sheet-page {
        display: grid;
        break-after: page;
        page-break-after: always;
        overflow: hidden;
    }
    .bcs-sheet-page:last-child { break-after: auto; page-break-after: auto; }
    .bcs-sheet-label {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        padding: 2mm;
    }
    .bcs-sheet-label img { max-width: 92%; max-height: 78%; object-fit: contain; }
    .bcs-sheet-label span { font: 8pt/1.2 ui-monospace, Consolas, monospace; color: #000; margin-top: 1mm; text-align: center; overflow-wrap: anywhere; }
    .bcs-sheet-single { display: flex; justify-content: center; align-items: flex-start; padding-top: 20mm; }
    .bcs-sheet-single img { max-width: 180mm; }
}