.container {
    margin-top: 50px;
}
.card {
    border-radius: 15px;
}

.drag-me {
    color: black;
    text-align: center;
    position: absolute;
    cursor: move;
}

.lbhide {
    display: none !important;
}

#labelPreview {
    padding-top: 10px;
    margin-bottom: 10px;
}

#label {
    background-color: white;
    color: black;
}

#labelForm {
    margin-bottom: 10px;
}

#addLabel {
    margin-top: 4px;
}

#clearLabel {
    margin-top: 4px;
}
/* ── Compose mode (2D code data) ───────────────────────────────────────────
   A customer's QR payload is a positional string: literal segments plus
   [FIELD:width] placeholders. The textarea and its preview are monospaced so
   the designer can count characters against the customer's offset spec. */
.zpl-compose {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
}

.zpl-compose-preview {
    margin-top: 0.25rem;
}

.zpl-compose-out {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8rem;
    background: #f4f5f7;
    border: 1px solid #dee2e6;
    border-radius: 0.35rem;
    padding: 0.4rem 0.55rem;
    margin: 0;
    min-height: 2.1rem;
    max-height: 6rem;
    overflow: auto;
    /* Positional payloads have no separators and must not be re-flowed —
       trailing space padding has to stay visible. */
    white-space: pre;
    word-break: normal;
}