*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: system-ui, sans-serif;
    background: #0f0f0f;
    color: #f0f0f0;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

/* ── States ── */
.state { display: none; width: 100%; max-width: 440px; }
.state.active { display: flex; flex-direction: column; align-items: center; gap: 1rem; }

/* ── Buttons ── */
.btn {
    width: 100%; padding: .9rem 1rem;
    border: none; border-radius: 12px;
    font-size: 1.05rem; font-weight: 600;
    cursor: pointer; transition: opacity .15s;
}
.btn:active { opacity: .75; }
.btn-primary { background: #2563eb; color: #fff; }
.btn-danger  { background: #dc2626; color: #fff; }
.btn-success { background: #16a34a; color: #fff; }
.btn-outline { background: transparent; border: 2px solid #444; color: #aaa; }

/* ── IDLE ── */
#state-idle h1 { font-size: 2.2rem; font-weight: 800; letter-spacing: -1px; }
#state-idle p  { color: #777; font-size: .95rem; text-align: center; }

/* ── SCANNING ── */
#reader { width: 100%; border-radius: 14px; overflow: hidden; border: 2px solid #333; }

/* ── QR text display ── */
#qr-text-box {
    width: 100%;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 10px;
    padding: .75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
#qr-text-label { font-size: .75rem; color: #666; text-transform: uppercase; letter-spacing: .05em; }
#qr-text-value { font-size: 1.2rem; color: #fff; word-break: break-all; }

/* ── Preview ── */
#preview-wrap {
    position: relative; width: 100%;
    background: #fff; border-radius: 10px; overflow: hidden;
}
#preview-wrap canvas { display: block; width: 100%; height: auto; }
#labelary-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    opacity: 0; transition: opacity .4s;
}
#labelary-img.loaded { opacity: 1; }

/* ── Qty row ── */
.field-row { display: flex; align-items: center; gap: .75rem; width: 100%; }
.field-row label { color: #888; font-size: .9rem; white-space: nowrap; }
.field-row input[type=number] {
    width: 80px; padding: .5rem .75rem;
    background: #1e1e1e; border: 1px solid #333;
    border-radius: 8px; color: #f0f0f0;
    font-size: 1rem; text-align: center;
}

/* ── Error ── */
#error-banner {
    display: none; width: 100%;
    background: #7f1d1d; color: #fca5a5;
    border-radius: 10px; padding: .75rem 1rem;
    text-align: center; font-size: .9rem;
}
#error-banner.visible { display: block; }

/* ── Print busy ── */
.printing { pointer-events: none; opacity: .55; }