/* AI Sticker Sheet — Iteration 1 UI shell. Scoped to .sticker-shell only. */
.sticker-shell {
    --ss-accent: var(--cyan, #00e8d4);
    --ss-accent-2: var(--pink, #ff4fd8);
    --ss-warning: var(--gold, #ffd166);
    --ss-panel: color-mix(in srgb, var(--card, #111827) 92%, transparent);
    --ss-border: var(--border, rgba(255,255,255,.14));
    --ss-muted: var(--muted, #9ca3af);
    --ss-heading: var(--heading, #fff);
    display: flex;
    align-items: stretch;
    gap: 1rem;
    min-height: 680px;
    color: var(--text, #e5e7eb);
}

.sticker-shell *,
.sticker-shell *::before,
.sticker-shell *::after {
    box-sizing: border-box;
}

.sticker-shell__panel,
.sticker-shell__workspace {
    border: 1px solid var(--ss-border);
    background:
        linear-gradient(180deg, rgba(255,255,255,.045), transparent 38%),
        var(--ss-panel);
    border-radius: 22px;
    box-shadow: 0 28px 80px rgba(0,0,0,.18);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.sticker-shell__panel {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

.sticker-shell__panel--left,
.sticker-shell__panel--right {
    flex: 0 1 360px;
}

.sticker-shell__workspace {
    padding: 1rem;
    min-width: 0;
    flex: 1 1 620px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow: hidden;
}

.sticker-shell__eyebrow {
    color: var(--ss-accent);
    font-family: var(--ff-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.sticker-shell h2 {
    color: var(--ss-heading);
    margin: 0;
    font-family: var(--ff-head, inherit);
    font-size: clamp(1.35rem, 2vw, 2rem);
    line-height: 1.05;
}

.sticker-workspace-head__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .45rem;
    min-width: 0;
}

.sticker-workspace-head__actions .sticker-btn {
    white-space: nowrap;
}

.sticker-shell__hint {
    color: var(--ss-muted);
    line-height: 1.55;
    font-size: .9rem;
    margin: -.25rem 0 .2rem;
}

.sticker-field {
    display: flex;
    flex-direction: column;
    gap: .38rem;
}
.sticker-field[hidden],
[hidden].sticker-field {
    display: none !important;
}


.sticker-field label {
    color: var(--ss-muted);
    font-family: var(--ff-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.sticker-field input,
.sticker-field select {
    width: 100%;
    border: 1px solid var(--ss-border);
    background: rgba(0,0,0,.24);
    color: var(--ss-heading);
    border-radius: 13px;
    padding: .78rem .85rem;
    font: inherit;
    outline: 0;
}

.sticker-field input:focus,
.sticker-field select:focus {
    border-color: color-mix(in srgb, var(--ss-accent) 60%, var(--ss-border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ss-accent) 14%, transparent);
}

.sticker-field input[type="file"] {
    font-size: .83rem;
}

.sticker-field__note {
    color: var(--ss-muted);
    font-size: .74rem;
}

.sticker-route-guidance {
    display: grid;
    gap: .45rem;
    border: 1px solid color-mix(in srgb, var(--ss-warning) 34%, var(--ss-border));
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--ss-warning) 12%, transparent), transparent 48%),
        color-mix(in srgb, var(--ss-warning) 8%, transparent);
    color: var(--ss-muted);
    border-radius: 16px;
    padding: .72rem .82rem;
    font-size: .76rem;
    line-height: 1.42;
}

.sticker-route-guidance[hidden] {
    display: none !important;
}

.sticker-route-guidance strong {
    color: var(--ss-warning);
    font-family: var(--ff-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.sticker-route-guidance.is-good {
    border-color: color-mix(in srgb, var(--ss-accent) 34%, var(--ss-border));
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--ss-accent) 12%, transparent), transparent 48%),
        color-mix(in srgb, var(--ss-accent) 7%, transparent);
}

.sticker-route-guidance.is-good strong {
    color: var(--ss-accent);
}

.sticker-route-guidance.is-critical {
    border-color: color-mix(in srgb, #ff6b6b 42%, var(--ss-border));
    background:
        radial-gradient(circle at top right, color-mix(in srgb, #ff6b6b 14%, transparent), transparent 48%),
        color-mix(in srgb, #ff6b6b 8%, transparent);
}

.sticker-route-guidance.is-critical strong {
    color: #ff9d9d;
}

.sticker-preflight {
    display: grid;
    gap: .7rem;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--ss-warning) 34%, var(--ss-border));
    background: color-mix(in srgb, var(--ss-warning) 9%, transparent);
    border-radius: 16px;
    padding: .75rem;
    color: var(--ss-muted);
    font-size: .75rem;
    line-height: 1.45;
}

.sticker-preflight[hidden] {
    display: none;
}

.sticker-preflight.is-ready {
    border-color: color-mix(in srgb, var(--ss-accent) 42%, var(--ss-border));
    background: color-mix(in srgb, var(--ss-accent) 8%, transparent);
}

.sticker-preflight.is-warning {
    border-color: color-mix(in srgb, var(--ss-warning) 45%, var(--ss-border));
    background: color-mix(in srgb, var(--ss-warning) 9%, transparent);
}

.sticker-preflight.is-blocked {
    border-color: color-mix(in srgb, #ff6b6b 50%, var(--ss-border));
    background: color-mix(in srgb, #ff6b6b 10%, transparent);
}

.sticker-preflight__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .55rem .75rem;
    min-width: 0;
}

.sticker-preflight strong {
    color: var(--ss-heading);
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.sticker-preflight__body {
    display: grid;
    gap: .55rem;
    min-width: 0;
}

.sticker-preflight__status {
    color: var(--ss-heading);
    font-weight: 900;
}

.sticker-preflight ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .45rem;
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
}

.sticker-preflight li {
    display: grid;
    gap: .12rem;
    min-width: 0;
    padding: .5rem .58rem;
    border-radius: 10px;
    background: rgba(0,0,0,.12);
    overflow: hidden;
}

.sticker-preflight li span,
.sticker-preflight__provider {
    overflow-wrap: anywhere;
    word-break: normal;
}

.sticker-preflight__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .35rem .75rem;
    min-width: 0;
    padding: .42rem .55rem;
    border-radius: 12px;
    background: rgba(0,0,0,.11);
}

.sticker-preflight li strong {
    font-size: .68rem;
    letter-spacing: .06em;
}

.sticker-preflight li.is-ok strong { color: var(--ss-accent); }
.sticker-preflight li.is-info strong { color: var(--ss-heading); }
.sticker-preflight li.is-warning strong { color: var(--ss-warning); }
.sticker-preflight li.is-error strong { color: #ff9b9b; }

html[dir="rtl"] .sticker-preflight {
    text-align: right;
}

.sticker-recipe {
    display: grid;
    gap: .4rem;
    border: 1px solid color-mix(in srgb, var(--ss-accent) 32%, var(--ss-border));
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--ss-accent) 10%, transparent), transparent 46%),
        color-mix(in srgb, var(--ss-accent) 6%, transparent);
    border-radius: 16px;
    padding: .72rem .82rem;
    color: var(--ss-muted);
    font-size: .75rem;
    line-height: 1.42;
}

.sticker-recipe strong {
    color: var(--ss-accent);
    font-family: var(--ff-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.sticker-recipe.is-warning {
    border-color: color-mix(in srgb, var(--ss-warning) 42%, var(--ss-border));
    background: color-mix(in srgb, var(--ss-warning) 8%, transparent);
}

.sticker-recipe.is-warning strong {
    color: var(--ss-warning);
}

.sticker-recipe.is-critical {
    border-color: color-mix(in srgb, #ff6b6b 45%, var(--ss-border));
    background: color-mix(in srgb, #ff6b6b 9%, transparent);
}

.sticker-recipe.is-critical strong {
    color: #ff9d9d;
}

.sticker-preset-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .45rem;
}

.sticker-preset-actions .sticker-btn {
    min-height: 2.35rem;
    padding-inline: .5rem;
    white-space: normal;
}

html[dir="rtl"] .sticker-recipe {
    text-align: right;
}

@media (max-width: 520px) {
    .sticker-preset-actions {
        grid-template-columns: 1fr;
    }
}


.sticker-upload-meta {
    display: grid;
    gap: .22rem;
    border: 1px solid color-mix(in srgb, var(--ss-accent) 22%, var(--ss-border));
    background: color-mix(in srgb, var(--ss-accent) 8%, transparent);
    color: var(--ss-muted);
    border-radius: 14px;
    padding: .62rem .72rem;
    font-size: .78rem;
    line-height: 1.35;
}

.sticker-upload-meta strong {
    color: var(--ss-heading);
}

.sticker-upload-meta[hidden] {
    display: none;
}

.sticker-photo-preview {
    min-height: 260px;
    border: 1px dashed color-mix(in srgb, var(--ss-accent) 36%, var(--ss-border));
    border-radius: 18px;
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--ss-accent) 16%, transparent), transparent 46%),
        rgba(0,0,0,.16);
    overflow: hidden;
    display: grid;
    place-items: center;
}

.sticker-photo-preview__empty {
    display: grid;
    place-items: center;
    gap: .65rem;
    color: var(--ss-muted);
    text-align: center;
    padding: 1rem;
}

.sticker-photo-preview__figure {
    width: 100%;
    height: 100%;
    min-height: 260px;
    margin: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
}

.sticker-photo-preview img {
    width: 100%;
    height: 100%;
    max-height: 360px;
    object-fit: contain;
    object-position: center;
    display: block;
    background: rgba(0,0,0,.24);
}

.sticker-photo-preview__caption {
    width: 100%;
    color: var(--ss-heading);
    background: rgba(0,0,0,.48);
    padding: .55rem .75rem;
    font-size: .78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sticker-photo-preview__caption-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
}

.sticker-photo-preview__badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .48rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .04em;
    background: color-mix(in srgb, var(--ss-accent) 16%, rgba(0,0,0,.42));
    color: var(--ss-heading);
}

.sticker-photo-preview__filename {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sticker-crop-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .65rem;
}

.sticker-crop-state {
    min-height: 2rem;
    border: 1px solid color-mix(in srgb, var(--ss-accent) 16%, var(--ss-border));
    background: rgba(255,255,255,.04);
    color: var(--ss-muted);
    border-radius: 14px;
    padding: .58rem .72rem;
    font-size: .78rem;
    line-height: 1.4;
}

.sticker-crop-state[hidden] {
    display: none;
}

.sticker-shell__actions,
.sticker-export-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .65rem;
}

.sticker-btn {
    border: 0;
    border-radius: 13px;
    padding: .78rem .9rem;
    font-weight: 900;
    cursor: pointer;
    letter-spacing: .03em;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.sticker-btn:not(:disabled):hover {
    transform: translateY(-1px);
}

.sticker-btn--primary {
    background: linear-gradient(135deg, var(--ss-accent), color-mix(in srgb, var(--ss-accent-2) 45%, var(--ss-accent)));
    color: #041111;
    box-shadow: 0 16px 34px color-mix(in srgb, var(--ss-accent) 22%, transparent);
}

.sticker-btn--ghost {
    background: rgba(255,255,255,.06);
    color: var(--ss-heading);
    border: 1px solid var(--ss-border);
}

.sticker-btn--disabled {
    background: rgba(255,255,255,.05);
    color: color-mix(in srgb, var(--ss-muted) 70%, transparent);
    border: 1px solid var(--ss-border);
    cursor: not-allowed;
}

.sticker-status {
    min-height: 2.2rem;
    border: 1px solid color-mix(in srgb, var(--ss-accent) 20%, var(--ss-border));
    background: color-mix(in srgb, var(--ss-accent) 7%, transparent);
    color: var(--ss-heading);
    border-radius: 14px;
    padding: .65rem .75rem;
    font-size: .82rem;
    line-height: 1.35;
}

.sticker-progress {
    display: grid;
    gap: .45rem;
    padding: .65rem .75rem;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--ss-accent) 24%, var(--ss-border));
    background: color-mix(in srgb, var(--ss-accent) 7%, transparent);
}

.sticker-progress[hidden] {
    display: none;
}

.sticker-progress__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    color: var(--ss-heading);
    font-size: .78rem;
    font-weight: 800;
}

.sticker-progress__top::before {
    content: "";
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border-radius: 999px;
    border: 2px solid color-mix(in srgb, var(--ss-accent) 34%, transparent);
    border-top-color: var(--ss-accent);
    animation: ss-progress-spin .78s linear infinite;
}

@keyframes ss-progress-spin {
    to { transform: rotate(360deg); }
}

.sticker-progress__track {
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255,255,255,.08);
}

.sticker-progress__bar {
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--ss-accent), color-mix(in srgb, var(--ss-accent-2) 50%, var(--ss-accent)));
    transition: width .28s ease;
}

.sticker-workspace-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.sticker-workspace-head__badge {
    border: 1px solid color-mix(in srgb, var(--ss-warning) 32%, var(--ss-border));
    background: color-mix(in srgb, var(--ss-warning) 11%, transparent);
    color: var(--ss-warning);
    border-radius: 999px;
    padding: .42rem .72rem;
    font-family: var(--ff-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
    font-size: .68rem;
    font-weight: 800;
    white-space: nowrap;
}

.sticker-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
    min-height: 0;
}

.sticker-card {
    position: relative;
    min-height: 250px;
    border: 1px solid var(--ss-border);
    border-radius: 18px;
    padding: .8rem;
    background:
        radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--ss-accent) 12%, transparent), transparent 42%),
        rgba(255,255,255,.035);
    overflow: hidden;
}

.sticker-card__number {
    position: absolute;
    top: .7rem;
    right: .7rem;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(0,0,0,.35);
    color: var(--ss-accent);
    font-family: var(--ff-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
    font-weight: 900;
}

html[dir="rtl"] .sticker-card__number {
    right: auto;
    left: .7rem;
}

.sticker-card__art {
    aspect-ratio: 1 / 1;
    min-height: 260px;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    border: 1px dashed color-mix(in srgb, var(--ss-accent) 28%, var(--ss-border));
    background:
        linear-gradient(135deg, rgba(255,255,255,.08), transparent),
        radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--ss-accent) 20%, transparent), transparent 48%);
    display: flex;
    color: var(--ss-muted);
    font-size: .82rem;
    text-align: center;
    padding: 1rem;
    overflow: hidden;
}

.sticker-card__art img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center center;
    display: block;
    background: rgba(255,255,255,.02);
}

.sticker-card.is-generated .sticker-card__art {
    padding: .35rem;
    border-style: solid;
    background: #ffffff;
    box-shadow: inset 0 0 0 4px rgba(221,229,236,.9);
}

.sticker-card.is-mock .sticker-card__art {
    border-style: solid;
    background:
        radial-gradient(circle at 50% 30%, rgba(255,255,255,.9), rgba(255,255,255,.78) 18%, transparent 19%),
        radial-gradient(circle at 50% 52%, color-mix(in srgb, var(--mock-color, var(--ss-accent)) 55%, transparent), transparent 42%),
        linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.02));
    box-shadow: inset 0 0 0 8px rgba(255,255,255,.72);
    color: #061215;
    font-weight: 900;
}

.sticker-card h3 {
    margin: .8rem 0 .28rem;
    color: var(--ss-heading);
    font-size: 1rem;
}

.sticker-card p {
    margin: 0;
    color: var(--ss-muted);
    font-size: .82rem;
    line-height: 1.45;
}

.sticker-a4 {
    flex: 1;
    min-height: 430px;
    display: grid;
    place-items: center;
    padding: .6rem;
    border-radius: 18px;
    background: rgba(0,0,0,.18);
    border: 1px solid var(--ss-border);
}

.sticker-a4__sheet {
    width: min(100%, 250px);
    max-height: 520px;
    aspect-ratio: 210 / 297;
    background: #fff;
    border-radius: 10px;
    padding: 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 18px;
    box-shadow: 0 28px 60px rgba(0,0,0,.35);
    transition: aspect-ratio .25s ease, width .25s ease;
}

.sticker-a4__sheet[data-paper-size="square-200"] {
    width: min(100%, 280px);
}

.sticker-a4__sheet[data-paper-size="photo-4x6"],
.sticker-a4__sheet[data-paper-size="photo-5x7"],
.sticker-a4__sheet[data-paper-size="a5"] {
    width: min(100%, 220px);
}

.sticker-a4__sheet[data-paper-size="a3"],
.sticker-a4__sheet[data-paper-size="legal"] {
    width: min(100%, 270px);
}

.sticker-a4__slot {
    border: 2px dashed #c8d2dc;
    border-radius: 22px;
    display: grid;
    place-items: center;
    color: #7d8792;
    font-weight: 900;
    font-size: 1.2rem;
    background:
        radial-gradient(circle at center, rgba(0,232,212,.12), transparent 54%),
        #f8fafc;
    overflow: hidden;
}

.sticker-a4__slot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.sticker-a4__sheet[data-image-fit="cover"] .sticker-a4__slot img {
    object-fit: cover;
}

.sticker-a4__sheet[data-image-fit="contain"] .sticker-a4__slot img {
    object-fit: contain;
}

.sticker-a4__sheet[data-cut-line="solid"] .sticker-a4__slot {
    border-style: solid;
    border-color: #94a3b8;
}

.sticker-a4__sheet[data-cut-line="none"] .sticker-a4__slot,
.sticker-a4__sheet[data-cut-line="none"] .sticker-a4__slot.is-generated,
.sticker-a4__sheet[data-cut-line="none"] .sticker-a4__slot.is-mock {
    border-color: transparent;
}

.sticker-a4__slot.is-generated {
    padding: 4px;
    border: 2px solid #dde5ec;
    background: #fff;
}

.sticker-a4__slot.is-mock {
    border: 2px solid #dde5ec;
    color: #111827;
    background:
        radial-gradient(circle at 50% 35%, rgba(255,255,255,.95), rgba(255,255,255,.84) 16%, transparent 17%),
        radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--mock-color, #00e8d4) 54%, transparent), transparent 45%),
        #f8fafc;
    box-shadow: inset 0 0 0 7px #fff;
}

.sticker-sheet-meta {
    display: grid;
    gap: .18rem;
    padding: .65rem .75rem;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--ss-accent) 22%, var(--ss-border));
    background: color-mix(in srgb, var(--ss-accent) 7%, transparent);
    color: var(--ss-muted);
    font-size: .76rem;
    line-height: 1.35;
}

.sticker-sheet-meta[hidden] {
    display: none;
}

.sticker-sheet-meta strong {
    color: var(--ss-heading);
}

.sticker-roadmap-note {
    display: grid;
    gap: .25rem;
    padding: .8rem;
    border-radius: 14px;
    background: rgba(255,255,255,.045);
    border: 1px solid var(--ss-border);
    color: var(--ss-muted);
    font-size: .82rem;
    line-height: 1.45;
}

.sticker-roadmap-note strong {
    color: var(--ss-heading);
}


.sticker-progress__elapsed {
    color: var(--ss-muted);
    font-family: var(--ff-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
    font-size: .72rem;
    text-align: end;
}

.sticker-usage {
    display: grid;
    gap: .65rem;
    padding: .75rem;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--ss-warning) 28%, var(--ss-border));
    background: color-mix(in srgb, var(--ss-warning) 8%, transparent);
}

.sticker-usage[hidden] {
    display: none;
}

.sticker-usage__section {
    display: grid;
    gap: .45rem;
}

.sticker-usage__section strong {
    color: var(--ss-heading);
    font-family: var(--ff-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sticker-usage dl {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .4rem .65rem;
}

.sticker-usage dl div {
    min-width: 0;
    display: grid;
    gap: .08rem;
}

.sticker-usage dt {
    color: var(--ss-muted);
    font-size: .68rem;
    font-weight: 700;
}

.sticker-usage dd {
    margin: 0;
    color: var(--ss-heading);
    font-family: var(--ff-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
    font-size: .72rem;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sticker-crop-modal {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.sticker-crop-modal[hidden] {
    display: none;
}

.sticker-crop-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 7, 18, .78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.sticker-crop-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(960px, 100%);
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border-radius: 22px;
    border: 1px solid var(--ss-border);
    background:
        linear-gradient(180deg, rgba(255,255,255,.045), transparent 38%),
        var(--ss-panel);
    box-shadow: 0 28px 80px rgba(0,0,0,.28);
}

.sticker-crop-modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .85rem;
}

.sticker-crop-modal__head h3 {
    margin: 0;
    font-size: clamp(1.2rem, 1.8vw, 1.5rem);
}

.sticker-crop-modal__close {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border: 1px solid var(--ss-border);
    background: rgba(255,255,255,.06);
    color: var(--ss-heading);
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
}

.sticker-crop-stage {
    position: relative;
    height: min(62vh, 520px);
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--ss-accent) 26%, var(--ss-border));
    background:
        linear-gradient(135deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
        #0a0f16;
    touch-action: none;
    user-select: none;
    cursor: grab;
}

.sticker-crop-stage.is-dragging {
    cursor: grabbing;
}

.sticker-crop-stage img {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    will-change: transform;
    user-select: none;
    pointer-events: none;
}



.sticker-crop-frame {
    position: absolute;
    border: 2px solid rgba(255,255,255,.92);
    border-radius: 18px;
    box-shadow: 0 0 0 9999px rgba(0,0,0,.52), 0 0 0 1px rgba(255,255,255,.22);
    pointer-events: auto;
    touch-action: none;
}

.sticker-crop-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    cursor: move;
}

.sticker-crop-handle {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 2px solid rgba(3,18,20,.78);
    background: var(--ss-accent);
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
    padding: 0;
    z-index: 2;
    pointer-events: auto;
}
.sticker-crop-handle--n { top: -8px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.sticker-crop-handle--ne { top: -8px; right: -8px; cursor: nesw-resize; }
.sticker-crop-handle--e { top: 50%; right: -8px; transform: translateY(-50%); cursor: ew-resize; }
.sticker-crop-handle--se { right: -8px; bottom: -8px; cursor: nwse-resize; }
.sticker-crop-handle--s { bottom: -8px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.sticker-crop-handle--sw { left: -8px; bottom: -8px; cursor: nesw-resize; }
.sticker-crop-handle--w { top: 50%; left: -8px; transform: translateY(-50%); cursor: ew-resize; }
.sticker-crop-handle--nw { top: -8px; left: -8px; cursor: nwse-resize; }

.sticker-crop-toolbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .8rem;
    align-items: center;
}

.sticker-crop-toolbar label {
    color: var(--ss-muted);
    font-family: var(--ff-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.sticker-crop-toolbar input[type="range"] {
    width: 100%;
}

.sticker-crop-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: .65rem;
    flex-wrap: wrap;
    padding-top: .35rem;
    border-top: 1px solid color-mix(in srgb, var(--ss-accent) 18%, var(--ss-border));
}

#ssApplyCrop {
    background: linear-gradient(135deg, var(--ss-accent), color-mix(in srgb, var(--ss-accent-2) 45%, var(--ss-accent)));
    color: #031214;
    border: 1px solid color-mix(in srgb, var(--ss-accent) 55%, transparent);
    box-shadow: 0 18px 40px color-mix(in srgb, var(--ss-accent) 28%, transparent);
    opacity: 1;
}

#ssApplyCrop:hover {
    transform: translateY(-1px);
    filter: brightness(1.03);
}

@media (max-width: 1180px) {
    .sticker-a4 {
        min-height: 360px;
    }
}

@media (max-width: 720px) {
    .sticker-grid,
    .sticker-shell__actions,
    .sticker-export-actions,
    .sticker-crop-actions {
        grid-template-columns: 1fr;
    }

    .sticker-shell {
        flex-direction: column;
        min-height: 0;
    }

    .sticker-shell__panel--left,
    .sticker-shell__panel--right,
    .sticker-shell__workspace {
        flex-basis: auto;
    }
}

.sticker-btn:disabled {
    cursor: wait;
    opacity: .7;
}


.sticker-grid {
    grid-template-columns: repeat(var(--ss-grid-columns, 2), minmax(0, 1fr));
    align-content: start;
    max-height: 960px;
    overflow: auto;
    padding-right: .15rem;
}

.sticker-card {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: .7rem;
    align-content: start;
}

.sticker-card__art {
    width: 100%;
    aspect-ratio: var(--ss-preview-slot-ratio, 1 / 1);
    min-height: 280px;
    max-height: none;
    height: auto;
    align-items: center;
    justify-content: center;
    background: #ffffff;
}

.sticker-card__content {
    display: grid;
    gap: .4rem;
}

.sticker-card__prompt-title {
    color: var(--ss-heading);
    font-size: .88rem;
    font-weight: 800;
    line-height: 1.35;
}

.sticker-card__prompt-text {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 5.8em;
}

.sticker-copy-btn {
    border: 1px solid var(--ss-border);
    background: rgba(255,255,255,.06);
    color: var(--ss-heading);
    border-radius: 12px;
    padding: .62rem .78rem;
    font-weight: 800;
    cursor: pointer;
}

.sticker-copy-btn:hover {
    transform: translateY(-1px);
}

.sticker-a4__sheet {
    grid-template-columns: repeat(var(--ss-sheet-columns, 2), 1fr);
    grid-template-rows: repeat(var(--ss-sheet-rows, 2), 1fr);
}

@media (max-width: 720px) {
    .sticker-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .sticker-crop-toolbar {
        grid-template-columns: 1fr;
    }

    .sticker-crop-modal__actions {
        justify-content: stretch;
    }

    .sticker-crop-modal__actions .sticker-btn {
        width: 100%;
    }

    .sticker-card__art {
        min-height: 260px;
        max-height: none;
        height: auto;
    }
}


.sticker-busy-overlay {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
}

.sticker-busy-overlay[hidden] {
    display: none;
}

.sticker-busy-overlay__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 10, 20, .66);
    backdrop-filter: blur(6px);
}

.sticker-busy-overlay__panel {
    position: relative;
    z-index: 1;
    width: min(92vw, 390px);
    max-width: 92vw;
    padding: 1.3rem 1.4rem;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--ss-accent) 30%, var(--ss-border));
    background: linear-gradient(180deg, rgba(18, 26, 42, .95), rgba(10, 14, 24, .96));
    box-shadow: 0 24px 80px rgba(0,0,0,.45);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    text-align: center;
    margin: auto;
}

.sticker-busy-overlay__spinner {
    width: 50px;
    height: 50px;
    border-radius: 999px;
    border: 4px solid rgba(255,255,255,.12);
    border-top-color: var(--ss-accent);
    animation: ss-spin .85s linear infinite;
}

.sticker-busy-overlay__title {
    color: var(--ss-heading);
    font-size: 1rem;
    font-weight: 900;
}

.sticker-busy-overlay__message {
    color: var(--ss-muted);
    font-size: .92rem;
    line-height: 1.45;
}

@keyframes ss-spin {
    to { transform: rotate(360deg); }
}


/* Iteration 13: prompt-preview images must fit the visual slot like the printable sheet preview. */
.sticker-grid .sticker-card__art {
    width: 100%;
    aspect-ratio: var(--ss-preview-slot-ratio, 1 / 1) !important;
    min-height: 280px;
    max-height: none !important;
    height: auto !important;
    overflow: hidden;
}

.sticker-grid .sticker-card__art img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
}

.sticker-grid .sticker-card.is-generated .sticker-card__art {
    background: #ffffff !important;
}


/* Iteration 14: user-confirmed fix — flex keeps prompt-preview images fitting correctly. */
.sticker-grid .sticker-card__art {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* Iteration 19: loader/popup hard-centering and async job diagnostics. */
.sticker-busy-open {
    overflow: hidden;
}

.sticker-busy-overlay:not([hidden]) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.sticker-busy-overlay__panel,
.sticker-busy-overlay__title,
.sticker-busy-overlay__message {
    text-align: center !important;
}

.sticker-busy-overlay__panel {
    align-items: center !important;
    justify-items: center !important;
    justify-content: center !important;
    margin-inline: auto !important;
}

.sticker-busy-overlay__spinner {
    margin-inline: auto !important;
    flex: 0 0 auto;
}

.sticker-job-diagnostics {
    display: grid;
    gap: .5rem;
    padding: .65rem .75rem;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--ss-warning) 28%, var(--ss-border));
    background: color-mix(in srgb, var(--ss-warning) 8%, transparent);
    color: var(--ss-muted);
    font-size: .76rem;
    line-height: 1.35;
}

.sticker-job-diagnostics[hidden] {
    display: none;
}

.sticker-job-diagnostics strong {
    color: var(--ss-heading);
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.sticker-job-diagnostics dl {
    display: grid;
    gap: .35rem;
    margin: 0;
}

.sticker-job-diagnostics div {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    border-top: 1px solid rgba(255,255,255,.06);
    padding-top: .35rem;
}

.sticker-job-diagnostics dt {
    color: var(--ss-muted);
}

.sticker-job-diagnostics dd {
    margin: 0;
    color: var(--ss-heading);
    text-align: end;
    word-break: break-word;
}


/* Iteration 25: Comfy face-lock readiness diagnostics. */
.sticker-comfy-readiness {
    display: grid;
    gap: .55rem;
    border: 1px solid color-mix(in srgb, var(--ss-accent) 24%, var(--ss-border));
    background: color-mix(in srgb, var(--ss-accent) 7%, transparent);
    border-radius: 16px;
    padding: .72rem;
    color: var(--ss-muted);
    font-size: .78rem;
    line-height: 1.4;
}

.sticker-comfy-readiness[hidden] {
    display: none !important;
}

.sticker-comfy-readiness__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
}

.sticker-comfy-readiness strong {
    color: var(--ss-heading);
    font-family: var(--ff-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.sticker-btn--tiny {
    padding: .42rem .58rem;
    min-height: 0;
    font-size: .72rem;
}

.sticker-comfy-readiness__body {
    display: grid;
    gap: .35rem;
}

.sticker-comfy-readiness__status {
    color: var(--ss-heading);
    font-weight: 800;
}

.sticker-comfy-readiness__nodes {
    color: var(--ss-muted);
    overflow-wrap: anywhere;
}


/* Iteration 28: desktop horizontal control deck. Mobile keeps the existing vertical flow. */
@media (min-width: 1181px) {
    .sticker-shell {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
        grid-template-areas:
            "settings preview"
            "workspace preview";
        align-items: start;
        gap: 1rem;
    }

    .sticker-shell__panel--left {
        grid-area: settings;
        flex: initial;
        display: grid;
        grid-template-columns: minmax(220px, .85fr) repeat(3, minmax(170px, 1fr));
        align-items: start;
        gap: .85rem;
        padding: .9rem;
    }

    .sticker-shell__panel--left > .sticker-shell__eyebrow,
    .sticker-shell__panel--left > h2,
    .sticker-shell__panel--left > .sticker-shell__hint {
        grid-column: 1 / -1;
    }

    .sticker-shell__panel--left > .sticker-photo-preview {
        grid-row: span 4;
    }

    .sticker-shell__panel--left > .sticker-comfy-readiness {
        grid-column: span 2;
    }

    .sticker-shell__panel--left > .sticker-preflight {
        grid-column: 1 / -1;
    }

    .sticker-shell__panel--left > .sticker-preflight .sticker-preflight__body {
        grid-template-columns: minmax(0, 1fr);
    }

    .sticker-shell__panel--left > .sticker-preflight ul {
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    }

    .sticker-shell__panel--left > .sticker-shell__actions {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(160px, 1fr));
    }

    .sticker-shell__workspace {
        grid-area: workspace;
        flex: initial;
        min-height: min(760px, calc(100vh - 320px));
    }

    .sticker-shell__panel--right {
        grid-area: preview;
        flex: initial;
        position: sticky;
        top: 1rem;
        max-height: calc(100vh - 2rem);
        overflow: auto;
    }

    .sticker-photo-preview,
    .sticker-photo-preview__figure {
        min-height: 190px;
    }

    .sticker-photo-preview img {
        max-height: 230px;
    }

    .sticker-grid {
        max-height: none;
    }
}

@media (min-width: 1181px) and (max-width: 1500px) {
    .sticker-shell__panel--left {
        grid-template-columns: minmax(220px, .9fr) repeat(2, minmax(180px, 1fr));
    }
}

@media (max-width: 1180px) {
    .sticker-shell__panel--right {
        position: static;
        max-height: none;
        overflow: visible;
    }
}


/* Iteration 55: SVG export also supports a negative SVG download. */
.sticker-export-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sticker-export-actions .sticker-btn {
    white-space: nowrap;
    min-width: 0;
}

@media (min-width: 1181px) {
    .sticker-shell__panel--left > .sticker-status,
    .sticker-shell__panel--left > .sticker-progress {
        grid-column: 1 / -1;
    }

    .sticker-shell__panel--left > .sticker-job-diagnostics,
    .sticker-shell__panel--left > .sticker-usage {
        grid-column: span 2;
    }

    .sticker-grid .sticker-card__art {
        min-height: clamp(220px, 20vw, 360px);
    }
}

@media (max-width: 900px) {
    .sticker-shell {
        gap: .85rem;
    }

    .sticker-shell__panel,
    .sticker-shell__workspace {
        border-radius: 18px;
        padding: .85rem;
    }

    .sticker-shell__hint,
    .sticker-field__note,
    .sticker-card p,
    .sticker-comfy-readiness__body {
        line-height: 1.45;
    }

    .sticker-field input,
    .sticker-field select,
    .sticker-btn,
    .sticker-copy-btn {
        min-height: 44px;
    }

    .sticker-a4 {
        min-height: 300px;
        padding: .5rem;
    }

    .sticker-a4__sheet {
        width: min(78vw, 260px);
        padding: 16px;
        gap: 12px;
    }

    .sticker-sheet-meta,
    .sticker-roadmap-note,
    .sticker-job-diagnostics,
    .sticker-usage,
    .sticker-preflight,
    .sticker-comfy-readiness {
        overflow-wrap: anywhere;
    }

    .sticker-preflight ul {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .sticker-shell h2 {
        font-size: 1.25rem;
    }

    .sticker-grid {
        grid-template-columns: 1fr;
    }

    .sticker-grid .sticker-card__art {
        min-height: 220px;
    }

    .sticker-photo-preview,
    .sticker-photo-preview__figure {
        min-height: 210px;
    }

    .sticker-photo-preview img {
        max-height: 280px;
    }

    .sticker-shell__actions {
        position: sticky;
        bottom: .6rem;
        z-index: 20;
        padding: .55rem;
        border: 1px solid color-mix(in srgb, var(--ss-accent) 22%, var(--ss-border));
        border-radius: 16px;
        background: color-mix(in srgb, var(--ss-panel) 92%, #000 8%);
        box-shadow: 0 18px 42px rgba(0,0,0,.35);
    }

    .sticker-export-actions {
        grid-template-columns: 1fr;
    }

    .sticker-a4__sheet {
        width: min(82vw, 240px);
        border-radius: 9px;
        padding: 14px;
        gap: 10px;
    }

    .sticker-a4__slot {
        border-radius: 16px;
        font-size: .95rem;
    }

    .sticker-crop-modal {
        padding: .75rem;
    }

    .sticker-crop-modal__dialog {
        max-height: calc(100vh - 1.5rem);
        border-radius: 18px;
        padding: .85rem;
    }

    .sticker-crop-stage {
        min-height: 280px;
        max-height: 56vh;
    }

    .sticker-busy-overlay {
        padding: 1rem;
    }
}


.sticker-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    padding: .45rem .55rem .55rem;
}

.sticker-card__actions .sticker-copy-btn {
    flex: 1 1 9rem;
    min-width: 0;
}

.sticker-copy-btn--link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}


@media (max-width: 720px) {
    .sticker-workspace-head__actions {
        justify-content: stretch;
    }

    .sticker-workspace-head__actions .sticker-btn,
    .sticker-workspace-head__actions .sticker-workspace-head__badge {
        flex: 1 1 100%;
    }
}


/* Iteration 39: fixed viewport overlay positioning for crop and loading popups.
   The modal nodes are also moved to document.body from JS so page/grid overflow cannot trap them. */
html.sticker-modal-open,
body.sticker-modal-open,
html.sticker-busy-open,
body.sticker-busy-open {
    overflow: hidden !important;
}

.sticker-crop-modal,
.sticker-busy-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0 !important;
    transform: none !important;
    contain: none !important;
    isolation: isolate;
}

.sticker-crop-modal {
    z-index: 100000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: auto !important;
    overscroll-behavior: contain;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
}

.sticker-crop-modal[hidden],
.sticker-busy-overlay[hidden] {
    display: none !important;
}

.sticker-crop-modal__dialog {
    width: min(960px, calc(100vw - 24px)) !important;
    max-height: calc(100dvh - 24px) !important;
    overflow: auto !important;
    margin: auto !important;
}

.sticker-crop-stage {
    height: clamp(260px, 52dvh, 520px) !important;
    min-height: 240px;
}

.sticker-busy-overlay {
    z-index: 100100 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)) !important;
}

.sticker-busy-overlay__panel {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin: auto !important;
    max-height: calc(100dvh - 32px);
    overflow: auto;
}

@media (max-width: 720px) {
    .sticker-crop-modal {
        align-items: stretch !important;
    }

    .sticker-crop-modal__dialog {
        width: 100% !important;
        max-height: calc(100dvh - 20px) !important;
        border-radius: 16px !important;
        padding: .8rem !important;
    }

    .sticker-crop-stage {
        height: clamp(220px, 46dvh, 420px) !important;
        min-height: 220px;
    }
}


/* Iteration 40: cancelable Comfy generation controls. */
.sticker-busy-overlay__cancel {
    margin-top: .35rem;
    min-width: 170px;
    border-color: color-mix(in srgb, #ffb74a 55%, var(--ss-border)) !important;
    color: #ffd08a !important;
}

.sticker-busy-overlay__cancel.is-canceling,
.sticker-busy-overlay__cancel:disabled {
    opacity: .7;
    cursor: wait;
}

/* Iteration 41: final desktop UX density pass — compact control deck, stable visual order, less empty space. */
@media (min-width: 1181px) {
    .sticker-shell {
        --ss-panel-gap: clamp(.75rem, .8vw, 1rem);
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(270px, 330px);
        grid-template-areas:
            "controls preview"
            "prompts preview";
        gap: var(--ss-panel-gap);
        align-items: start;
        min-height: 0;
        direction: ltr;
    }

    /* Iteration 51: print/export panel follows language direction.
       LTR languages keep it on the right; Hebrew/RTL keeps it on the left. */
    html[dir="rtl"] .sticker-shell {
        grid-template-columns: minmax(270px, 330px) minmax(0, 1fr);
        grid-template-areas:
            "preview controls"
            "preview prompts";
    }

    html[dir="rtl"] .sticker-shell__panel,
    html[dir="rtl"] .sticker-shell__workspace {
        direction: rtl;
        text-align: right;
    }

    .sticker-shell__panel,
    .sticker-shell__workspace {
        border-radius: 20px;
        box-shadow: 0 18px 48px rgba(0,0,0,.22);
    }

    .sticker-shell__panel--right {
        grid-area: preview !important;
        position: sticky;
        top: .8rem;
        max-height: calc(100dvh - 1.6rem);
        overflow: auto;
        padding: .8rem;
        gap: .65rem;
    }

    .sticker-shell__panel--left {
        grid-area: controls !important;
        display: grid !important;
        grid-template-columns: minmax(260px, .78fr) repeat(4, minmax(150px, 1fr));
        grid-auto-flow: row dense;
        align-items: start;
        gap: .72rem;
        padding: .82rem;
    }

    /* The page hero already names the tool; keep the working deck compact. */
    .sticker-shell__panel--left > .sticker-shell__eyebrow,
    .sticker-shell__panel--left > h2,
    .sticker-shell__panel--left > .sticker-shell__hint {
        display: none !important;
    }

    .sticker-shell__panel--left > .sticker-field,
    .sticker-shell__panel--left > .sticker-upload-meta,
    .sticker-shell__panel--left > .sticker-crop-state,
    .sticker-shell__panel--left > .sticker-status,
    .sticker-shell__panel--left > .sticker-progress,
    .sticker-shell__panel--left > .sticker-route-guidance,
    .sticker-shell__panel--left > .sticker-recipe,
    .sticker-shell__panel--left > .sticker-comfy-readiness,
    .sticker-shell__panel--left > .sticker-job-diagnostics,
    .sticker-shell__panel--left > .sticker-usage {
        min-width: 0;
    }

    .sticker-shell__panel--left > .sticker-field:has(#ssPhoto) {
        grid-column: span 2;
        order: 1;
    }

    .sticker-shell__panel--left > .sticker-upload-meta {
        grid-column: span 2;
        order: 2;
    }

    .sticker-shell__panel--left > .sticker-photo-preview {
        grid-column: 1;
        grid-row: span 6;
        order: 3;
        min-height: clamp(250px, 26vw, 430px);
        align-self: stretch;
    }

    .sticker-shell__panel--left > .sticker-crop-actions,
    .sticker-shell__panel--left > .sticker-crop-state {
        grid-column: 1;
        order: 4;
    }

    .sticker-shell__panel--left > .sticker-field:has(#ssTheme) {
        grid-column: span 2;
        order: 5;
    }

    .sticker-shell__panel--left > .sticker-field:has(#ssStyle),
    .sticker-shell__panel--left > .sticker-field:has(#ssImageMode),
    .sticker-shell__panel--left > .sticker-field:has(#ssGenerationMode),
    .sticker-shell__panel--left > .sticker-field:has(#ssReferenceMethod),
    .sticker-shell__panel--left > .sticker-field:has(#ssComfyModel),
    .sticker-shell__panel--left > .sticker-field:has(#ssReferenceStrength),
    .sticker-shell__panel--left > .sticker-field:has(#ssTemplate) {
        grid-column: span 2;
        order: 10;
    }

    .sticker-shell__panel--left > .sticker-route-guidance,
    .sticker-shell__panel--left > .sticker-recipe {
        grid-column: span 2;
        order: 20;
    }

    .sticker-shell__panel--left > .sticker-preset-actions {
        grid-column: span 2;
        order: 21;
    }

    .sticker-shell__panel--left > .sticker-comfy-readiness {
        grid-column: span 2;
        order: 24;
    }

    .sticker-shell__panel--left > .sticker-preflight {
        grid-column: 1 / -1;
        order: 30;
        padding: .72rem;
    }

    .sticker-shell__panel--left > .sticker-shell__actions {
        grid-column: 1 / -1;
        order: 35;
        display: grid;
        grid-template-columns: minmax(240px, 1fr) minmax(160px, .32fr);
        gap: .65rem;
    }

    .sticker-shell__panel--left > .sticker-status,
    .sticker-shell__panel--left > .sticker-progress {
        grid-column: 1 / -1;
        order: 40;
    }

    .sticker-shell__panel--left > .sticker-job-diagnostics,
    .sticker-shell__panel--left > .sticker-usage {
        grid-column: span 2;
        order: 45;
    }

    .sticker-field {
        gap: .28rem;
    }

    .sticker-field label {
        font-size: .64rem;
        letter-spacing: .13em;
    }

    .sticker-field input,
    .sticker-field select {
        border-radius: 12px;
        padding: .68rem .78rem;
        min-height: 42px;
    }

    .sticker-field__note {
        font-size: .68rem;
        line-height: 1.35;
    }

    .sticker-shell__workspace {
        grid-area: prompts !important;
        min-height: 0 !important;
        padding: .82rem;
        gap: .75rem;
        overflow: visible;
    }

    .sticker-workspace-head {
        align-items: center;
        padding-bottom: .15rem;
        border-bottom: 1px solid rgba(255,255,255,.06);
    }

    .sticker-workspace-head h2 {
        font-size: clamp(1.15rem, 1.35vw, 1.55rem);
    }

    .sticker-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: .72rem;
        max-height: none;
        overflow: visible;
        padding: 0;
    }

    .sticker-card {
        min-height: 0;
        padding: .65rem;
        gap: .55rem;
        border-radius: 16px;
    }

    .sticker-grid .sticker-card__art {
        min-height: clamp(170px, 16vw, 300px) !important;
    }

    .sticker-card__prompt-text {
        -webkit-line-clamp: 4;
        min-height: 4.65em;
        font-size: .78rem;
    }

    .sticker-card__actions {
        padding: 0;
    }

    .sticker-card__actions .sticker-copy-btn {
        flex-basis: 7.5rem;
    }

    .sticker-a4 {
        min-height: 330px;
        padding: .55rem;
    }

    .sticker-a4__sheet {
        width: min(100%, 240px);
        max-height: 470px;
        padding: 18px;
        gap: 12px;
    }

    .sticker-shell__panel--right h2 {
        font-size: clamp(1.25rem, 1.55vw, 1.7rem);
    }

    .sticker-shell__panel--right .sticker-shell__hint,
    .sticker-roadmap-note,
    .sticker-sheet-meta {
        font-size: .72rem;
        line-height: 1.38;
    }

    .sticker-export-actions {
        gap: .45rem;
    }

    .sticker-export-actions .sticker-btn {
        padding-inline: .45rem;
        min-height: 40px;
    }

    .sticker-preflight__head,
    .sticker-comfy-readiness__head {
        min-height: 32px;
    }

    .sticker-preflight ul {
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
        gap: .42rem;
    }

    .sticker-preflight li {
        padding: .46rem .52rem;
        min-height: 86px;
        align-content: start;
    }
}

@media (min-width: 1501px) {
    .sticker-shell {
        grid-template-columns: minmax(0, 1fr) minmax(290px, 360px);
    }

    html[dir="rtl"] .sticker-shell {
        grid-template-columns: minmax(290px, 360px) minmax(0, 1fr);
    }

    .sticker-shell__panel--left {
        grid-template-columns: minmax(300px, .72fr) repeat(4, minmax(175px, 1fr));
    }
}

@media (min-width: 1181px) and (max-width: 1380px) {
    .sticker-shell {
        grid-template-columns: minmax(0, 1fr) minmax(250px, 300px);
    }

    html[dir="rtl"] .sticker-shell {
        grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
    }

    .sticker-shell__panel--left {
        grid-template-columns: minmax(230px, .8fr) repeat(3, minmax(155px, 1fr));
    }

    .sticker-shell__panel--left > .sticker-field:has(#ssStyle),
    .sticker-shell__panel--left > .sticker-field:has(#ssImageMode),
    .sticker-shell__panel--left > .sticker-field:has(#ssGenerationMode),
    .sticker-shell__panel--left > .sticker-field:has(#ssReferenceMethod),
    .sticker-shell__panel--left > .sticker-field:has(#ssComfyModel),
    .sticker-shell__panel--left > .sticker-field:has(#ssReferenceStrength),
    .sticker-shell__panel--left > .sticker-field:has(#ssTemplate),
    .sticker-shell__panel--left > .sticker-route-guidance,
    .sticker-shell__panel--left > .sticker-recipe,
    .sticker-shell__panel--left > .sticker-preset-actions,
    .sticker-shell__panel--left > .sticker-comfy-readiness,
    .sticker-shell__panel--left > .sticker-job-diagnostics,
    .sticker-shell__panel--left > .sticker-usage {
        grid-column: span 1;
    }
}

@media (max-width: 1180px) {
    .sticker-shell__panel--left > .sticker-shell__eyebrow,
    .sticker-shell__panel--left > h2,
    .sticker-shell__panel--left > .sticker-shell__hint {
        display: block;
    }
}

/* Iteration 43: rollback unstable explicit-dashboard grid.
   Keep the stable Iteration 41 density layout because the Iteration 42 grid-area pass created large desktop gaps. */
@media (min-width: 1181px) {
    .sticker-shell__panel--left {
        grid-auto-flow: row dense;
    }

    .sticker-shell__panel--left > .sticker-route-guidance,
    .sticker-shell__panel--left > .sticker-recipe {
        min-height: 0;
    }

    .sticker-shell__panel--left > .sticker-job-diagnostics,
    .sticker-shell__panel--left > .sticker-usage {
        max-height: 260px;
        overflow: auto;
    }

    .sticker-shell__panel--left > .sticker-preflight ul {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}


/* Iteration 44: per-card regeneration actions */
.sticker-card__actions [data-regenerate-index] {
  min-width: 7rem;
}

.sticker-card__actions [data-regenerate-index]:disabled {
  cursor: progress;
  opacity: .62;
}

/* Iteration 47: stable usage/diagnostics row.
   Usage is hidden before generation and appears after the image job finishes. In the dense desktop grid it could be placed into a late empty grid hole,
   which made the Hebrew "Last request" panel look shifted. Force analytics into a predictable full-width row. */
@media (min-width: 1181px) {
    .sticker-shell__panel--left > .sticker-job-diagnostics {
        grid-column: 1 / -1 !important;
        order: 44 !important;
        max-height: 180px;
        overflow: auto;
    }

    .sticker-shell__panel--left > .sticker-usage {
        grid-column: 1 / -1 !important;
        order: 45 !important;
        max-height: 190px;
        overflow: auto;
    }

    .sticker-job-diagnostics dl,
    .sticker-usage {
        grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
        align-items: start;
    }

    .sticker-job-diagnostics div {
        min-width: 0;
    }

    .sticker-usage__section {
        min-width: 0;
    }

    .sticker-usage dl {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
}

/* Iteration 48: generation-time controls lock. Prevents route/model/layout changes while a Comfy job is running. */
.sticker-shell.is-controls-locked .sticker-shell__panel--left select:disabled,
.sticker-shell.is-controls-locked .sticker-shell__panel--left input:disabled,
.sticker-shell.is-controls-locked .sticker-shell__panel--left button:disabled {
    opacity: .68;
}

/* Iteration 52: Production-only Comfy lock indicators. */
.sticker-lock-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-inline-start: .4rem;
    padding: .12rem .42rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--ss-warning) 45%, var(--ss-border));
    background: color-mix(in srgb, var(--ss-warning) 13%, transparent);
    color: var(--ss-warning);
    font-family: var(--ff-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
    font-size: .62rem;
    line-height: 1.1;
    letter-spacing: .06em;
    text-transform: uppercase;
    vertical-align: middle;
}

.sticker-production-lock {
    display: grid;
    gap: .34rem;
    border: 1px solid color-mix(in srgb, var(--ss-warning) 40%, var(--ss-border));
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--ss-warning) 14%, transparent), transparent 48%),
        color-mix(in srgb, var(--ss-warning) 8%, transparent);
    border-radius: 16px;
    padding: .72rem .82rem;
    color: var(--ss-muted);
    font-size: .76rem;
    line-height: 1.42;
}

.sticker-production-lock strong {
    color: var(--ss-warning);
    font-family: var(--ff-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.sticker-shell.is-production-comfy-locked .sticker-field select option:disabled {
    color: color-mix(in srgb, var(--ss-warning) 82%, var(--ss-muted));
}

.sticker-shell.is-production-comfy-locked [data-sticker-preset="best-sticker"],
.sticker-shell.is-production-comfy-locked [data-sticker-preset="image-reference"] {
    border-color: color-mix(in srgb, var(--ss-warning) 34%, var(--ss-border));
    color: color-mix(in srgb, var(--ss-warning) 72%, var(--ss-muted));
}

@media (min-width: 1181px) {
    .sticker-shell__panel--left > .sticker-production-lock {
        grid-column: span 2;
        order: 19;
    }
}