.mcs-live-preview{width:100%;margin:18px 0 22px;padding:18px;border:2px solid var(--mcs-premium-panel-border,#3339F1);border-radius:20px;background:var(--mcs-premium-panel-bg,#F8F9FF);box-sizing:border-box;box-shadow:0 12px 30px rgba(16,24,40,.08)}.mcs-live-preview__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}.mcs-live-preview__eyebrow{display:block;color:var(--mcs-premium-panel-heading,#3339F1);font-size:10px;font-weight:800;letter-spacing:.13em}.mcs-live-preview h3{margin:4px 0 0;color:var(--mcs-premium-panel-heading,#3339F1);font-size:clamp(18px,2vw,24px);line-height:1.15}.mcs-live-preview__status{padding:6px 10px;border-radius:999px;background:var(--mcs-premium-panel-border,#3339F1);color:#fff;font-size:10px;font-weight:800;letter-spacing:.09em}.mcs-live-preview__stage{position:relative;isolation:isolate;width:100%;aspect-ratio:1/1;overflow:hidden;border-radius:16px;background:var(--mcs-preview-stage,#F8F9FF);border:1px solid rgba(51,57,241,.16)}.mcs-live-preview__empty{position:absolute;z-index:9;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:28px;color:var(--mcs-muted,#667085);text-align:center;font-weight:700}.mcs-live-preview__empty[hidden],.mcs-live-preview__warning[hidden],.mcs-live-preview__choices[hidden],.mcs-live-preview__logo-safe-area[hidden]{display:none}.mcs-live-preview__empty-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#fff;color:var(--mcs-premium-panel-border,#3339F1);font-size:22px;box-shadow:0 8px 20px rgba(16,24,40,.08)}.mcs-live-preview__layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;opacity:1;transition:opacity var(--mcs-preview-transition,220ms) ease,transform var(--mcs-preview-transition,220ms) ease}.mcs-live-preview__layer.is-changing{opacity:.12;transform:scale(.99)}.mcs-live-preview__layer--packaging{z-index:1}.mcs-live-preview__layer--closure{z-index:2}.mcs-live-preview__layer--label{z-index:3}.mcs-live-preview__layer--graphic{z-index:4}.mcs-live-preview__logo-safe-area{position:absolute;z-index:5;left:var(--mcs-logo-x,50%);top:var(--mcs-logo-y,57%);width:var(--mcs-logo-width,28%);height:var(--mcs-logo-height,16%);box-sizing:border-box;padding:var(--mcs-logo-padding,6%);pointer-events:none}.mcs-live-preview__logo{width:100%;height:100%;object-fit:contain;display:block;opacity:var(--mcs-logo-opacity,1);filter:drop-shadow(0 1px 1px rgba(0,0,0,.08))}.mcs-live-preview__warning{margin-top:10px;padding:9px 11px;border:1px solid #eab308;border-radius:10px;background:#fffbea;color:#854d0e;font-size:11px;line-height:1.4}.mcs-live-preview__choices{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.mcs-live-preview__chip{display:inline-flex;align-items:center;gap:5px;padding:7px 10px;border:1px solid rgba(51,57,241,.2);border-radius:999px;background:#fff;color:var(--mcs-text,#1f2937);font-size:12px;line-height:1.2}.mcs-live-preview__chip strong{color:var(--mcs-premium-panel-heading,#3339F1)}.mcs-live-preview__note{margin:12px 2px 0;color:var(--mcs-muted,#667085);font-size:11px;line-height:1.5}@media(max-width:767px){.mcs-live-preview{padding:14px;border-radius:17px}.mcs-live-preview__stage{border-radius:14px}.mcs-live-preview__head{margin-bottom:11px}.mcs-live-preview__status{padding:5px 8px}.mcs-live-preview__note{font-size:10px}}@media(prefers-reduced-motion:reduce){.mcs-live-preview__layer,.mcs-live-preview__logo{transition:none!important}}

/* v10.3.0 Stable */
.mcs-live-preview[hidden]{display:none!important}
.mcs-live-preview.is-visible{animation:mcs-preview-enter 180ms ease both}
@keyframes mcs-preview-enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.mcs-live-preview.is-visible{animation:none!important}}


/* v11.0 Stable progressive scene animation */
.mcs-live-preview__layer--packaging.is-entering{
    animation:mcs-package-enter 220ms ease both;
}
.mcs-live-preview__layer--closure.is-entering{
    animation:mcs-closure-enter 240ms ease both;
}
.mcs-live-preview__layer--graphic.is-entering{
    animation:mcs-graphic-enter 240ms ease both;
}
.mcs-live-preview__logo:not([hidden]){
    animation:mcs-logo-enter 200ms ease both;
}
@keyframes mcs-package-enter{
    from{opacity:0;transform:scale(.975)}
    to{opacity:1;transform:scale(1)}
}
@keyframes mcs-closure-enter{
    from{opacity:0;transform:translateY(-8px)}
    to{opacity:1;transform:translateY(0)}
}
@keyframes mcs-graphic-enter{
    from{opacity:0;transform:scale(.99)}
    to{opacity:1;transform:scale(1)}
}
@keyframes mcs-logo-enter{
    from{opacity:0;transform:scale(.94)}
    to{opacity:var(--mcs-logo-opacity,1);transform:scale(1)}
}
@media(prefers-reduced-motion:reduce){
    .mcs-live-preview__layer--packaging.is-entering,
    .mcs-live-preview__layer--closure.is-entering,
    .mcs-live-preview__layer--graphic.is-entering,
    .mcs-live-preview__logo:not([hidden]){
        animation:none!important;
    }
}


/* v12.1 Stable: reliable uploaded-logo layer */
.mcs-live-preview__logo-safe-area{
    z-index:20!important;
    overflow:visible;
}
.mcs-live-preview__logo{
    position:relative;
    z-index:21;
    display:block!important;
    visibility:visible;
    max-width:100%;
    max-height:100%;
}


/* v12.1.2: absolute top-level logo rendering */
.mcs-live-preview__stage{
    overflow:hidden;
}
.mcs-live-preview__logo-safe-area{
    display:block;
    pointer-events:none;
}
.mcs-live-preview__logo-safe-area[hidden]{
    display:none!important;
}
.mcs-live-preview__logo{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
}


/* v12.2 Stable: independent local preview-logo uploader */
.mcs-live-preview__logo-uploader{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:10px 16px;
    margin-top:14px;
    padding:14px;
    border:1px solid rgba(51,57,241,.20);
    border-radius:14px;
    background:#fff;
}
.mcs-live-preview__logo-uploader-copy{
    display:flex;
    flex-direction:column;
    gap:3px;
}
.mcs-live-preview__logo-uploader-copy strong{
    color:var(--mcs-text,#1f2937);
    font-size:13px;
}
.mcs-live-preview__logo-uploader-copy span,
.mcs-live-preview__logo-filename{
    color:var(--mcs-muted,#667085);
    font-size:11px;
    line-height:1.45;
}
.mcs-live-preview__logo-uploader-actions{
    display:flex;
    align-items:center;
    gap:8px;
}
.mcs-live-preview__logo-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:40px;
    padding:0 15px;
    border-radius:999px;
    background:var(--mcs-premium-panel-border,#3339F1);
    color:#fff;
    font-size:12px;
    font-weight:800;
    cursor:pointer;
    white-space:nowrap;
}
.mcs-live-preview__logo-button input{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    overflow:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
}
.mcs-live-preview__logo-remove{
    min-height:40px;
    padding:0 12px;
    border:1px solid rgba(51,57,241,.22);
    border-radius:999px;
    background:#fff;
    color:var(--mcs-premium-panel-heading,#3339F1);
    font-size:12px;
    font-weight:700;
    cursor:pointer;
}
.mcs-live-preview__logo-filename{
    grid-column:1/-1;
    overflow-wrap:anywhere;
}
@media(max-width:600px){
    .mcs-live-preview__logo-uploader{
        grid-template-columns:1fr;
    }
    .mcs-live-preview__logo-uploader-actions{
        width:100%;
    }
    .mcs-live-preview__logo-button{
        flex:1;
    }
}


/* v12.2.1: clean uploader and front-label logo presentation */
.mcs-live-preview__logo-uploader{
    grid-template-columns:1fr!important;
}
.mcs-live-preview__logo-uploader-actions{
    width:100%;
}
.mcs-live-preview__logo-button{
    flex:1;
    min-width:0;
}
.mcs-live-preview__logo-filename{
    max-width:100%;
    white-space:normal;
}
.mcs-live-preview__logo-safe-area{
    --mcs-logo-x:28%;
    --mcs-logo-y:47%;
    --mcs-logo-width:18%;
    --mcs-logo-height:12%;
    --mcs-logo-padding:2%;
}


/* v12.3: professional APF uploader bridge */
.mcs-live-preview__logo-uploader{display:none!important}
.mcs-logo-field-bridged{position:relative}
.mcs-logo-field-bridged [data-mcs-logo-capture]{display:block!important}
.mcs-live-preview__logo-safe-area{
    --mcs-logo-x:29%;
    --mcs-logo-y:40%;
    --mcs-logo-width:14%;
    --mcs-logo-height:8%;
    --mcs-logo-padding:1%;
}


/* v12.4: native APF upload restored */
.mcs-logo-field-bridged [data-mcs-logo-capture]{display:none!important}

/* v12.5.0 unified scene coordinate system */
.mcs-live-preview__layer{inset:auto;left:0;top:0;width:100%;height:100%;object-fit:contain;transform-origin:top left}

/* v13.5.0 — visual cleanup only; renderer geometry and layers are unchanged. */
.mcs-live-preview{padding:16px;border:1px solid rgba(51,57,241,.22);border-radius:18px;background:linear-gradient(180deg,#fff 0%,var(--mcs-premium-panel-bg,#f8f9ff) 100%);box-shadow:0 14px 34px rgba(16,24,40,.07)}
.mcs-live-preview__head{align-items:center;margin-bottom:12px}.mcs-live-preview__status{padding:5px 9px;box-shadow:0 5px 12px rgba(51,57,241,.18)}
.mcs-live-preview__stage{border:1px solid rgba(31,70,157,.12);border-radius:14px;background:radial-gradient(circle at 50% 42%,#fff 0%,var(--mcs-preview-stage,#f8f9ff) 72%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}
.mcs-live-preview__choices{gap:6px;margin-top:12px}.mcs-live-preview__chip{padding:6px 9px;font-size:11px}.mcs-live-preview__note{margin-top:10px;font-size:11px}
.mcs-live-preview__diagnostics{max-height:220px;overflow:auto;font-size:10px;opacity:.78}
@media(max-width:767px){.mcs-live-preview{padding:12px}.mcs-live-preview__head h3{font-size:18px}.mcs-live-preview__stage{border-radius:12px}}
.mcs-live-preview__logo-safe-area{transform:none!important}

/* v12.8.0 canonical shared scene renderer */
.mcs-live-preview__stage{position:relative;aspect-ratio:1/1}
.mcs-live-preview__layer--packaging{z-index:10}
.mcs-live-preview__layer--closure{z-index:20}
.mcs-live-preview__placement{position:absolute;box-sizing:border-box;transform:none!important;transform-origin:top left;pointer-events:none}
.mcs-live-preview__placement--label{z-index:30;overflow:hidden}
.mcs-live-preview__placement[hidden]{display:none!important}
.mcs-live-preview__fitted-asset{display:block;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:contain!important;position:static!important;transform:none!important;animation:none!important}
.mcs-live-preview__logo-safe-area{z-index:40!important;overflow:hidden;transform:none!important}
.mcs-live-preview__logo{object-fit:contain!important;transform:none!important;animation:none!important}

/* v12.8.1 admin-only asset bridge diagnostics */
.mcs-live-preview__diagnostics{margin-top:10px;padding:10px 12px;border:1px dashed rgba(51,57,241,.45);border-radius:10px;background:#fff;color:#344054;font-size:11px;line-height:1.35}
.mcs-live-preview__diagnostics[hidden]{display:none!important}
.mcs-live-preview__diagnostics dl{margin:7px 0 0;display:grid;gap:3px}
.mcs-live-preview__diagnostics dl>div{display:grid;grid-template-columns:minmax(110px,36%) 1fr;gap:8px}
.mcs-live-preview__diagnostics dt{font-weight:700;color:#3339F1}
.mcs-live-preview__diagnostics dd{margin:0;overflow-wrap:anywhere}


/* v12.8.3: exact backend/frontend logo-box parity.
   The uploaded logo fills the saved placement box exactly. Proportions are
   controlled by the backend box ratio/Lock proportions option, not by a
   second frontend contain/max-size calculation. */
.mcs-live-preview__logo-safe-area{
    padding:0!important;
    overflow:visible!important;
    box-sizing:border-box!important;
}
.mcs-live-preview__logo-safe-area > .mcs-live-preview__logo,
.mcs-live-preview__logo{
    position:absolute!important;
    inset:0!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    min-height:0!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    transform-origin:top left!important;
    object-fit:fill!important;
    object-position:0 0!important;
}


/* v13.0.2: universal square logo placement and proportional rendering */
.mcs-live-preview__logo-safe-area{overflow:hidden!important;}
.mcs-live-preview__logo{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;margin:0!important;padding:0!important;object-fit:contain!important;object-position:center center!important;transform:none!important;}