.mesore-preview-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.mesore-preview {
    box-sizing: border-box;
    width: min(650px, calc(100% - 28px));
    max-height: calc(100% - 28px);
    padding: clamp(16px, 4vw, 28px);
    border: 1px solid #dfe7ee;
    border-radius: 20px;
    color: #142d46;
    background: #fff;
    box-shadow: 0 18px 56px #142d4640;
}
.mesore-preview::backdrop { background: #10253db8; }
.mesore-preview-head, .mesore-preview-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.mesore-preview-head h2 { margin: 2px 0 0; }
.mesore-preview-label, .mesore-preview-count {
    margin: 0;
    color: #346354;
    font-weight: 650;
    font-size: .8rem;
}
.mesore-preview-stage {
    display: grid;
    align-items: center;
    min-height: 292px;
    margin: 16px 0;
    padding: clamp(12px, 4vw, 24px);
    border-radius: 14px;
    background: #eef3f8;
}
.mesore-preview-scene[hidden] { display: none; }
.mesore-preview-caption {
    margin: 0 0 12px;
    font-size: clamp(.95rem, 3.5vw, 1.2rem);
    font-weight: 650;
}
.mesore-preview-screen {
    padding: 15px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #dfe7ee;
}
.mesore-preview-screen h3 { margin: 0 0 12px; font-size: 1rem; }
.mesore-preview-panels, .mesore-preview-photos, .mesore-preview-property {
    display: grid;
    gap: 8px;
}
.mesore-preview-panels, .mesore-preview-property { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mesore-preview-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mesore-preview-panels > div, .mesore-preview-property li, .mesore-preview-task {
    padding: 8px 10px;
    border-radius: 8px;
    background: #f2f6fa;
}
.mesore-preview-screen small { display: block; color: #516b7e; }
.mesore-preview-task {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 8px;
    background: #e7f2ec;
}
.mesore-preview-dot { width: 10px; height: 10px; border-radius: 50%; background: #327559; }
.mesore-preview-property ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.mesore-preview-property li { font-size: .85rem; }
.mesore-preview-illustration {
    min-height: 68px;
    display: grid;
    place-items: end center;
    overflow: hidden;
    border-radius: 7px;
    background: linear-gradient(155deg, #cbdce5 54%, #91ab9d 55%);
}
.mesore-preview-illustration span {
    width: 48%;
    height: 70%;
    background:
        repeating-linear-gradient(90deg, transparent 0 18%, #c6d6de 18% 38%, transparent 38% 48%),
        repeating-linear-gradient(#566e84 0 18%, #7791a3 18% 34%);
    border: 3px solid #637e91;
    border-radius: 5px 5px 0 0;
}
.mesore-preview-photo:nth-child(2) .mesore-preview-illustration { background: linear-gradient(145deg, #efddc5 55%, #b99276 56%); }
.mesore-preview-photo:nth-child(3) .mesore-preview-illustration { background: linear-gradient(170deg, #c3d9d0 55%, #74988a 56%); }
.mesore-preview-photo-label { margin-top: 4px; font-weight: 650; font-size: .75rem; color: #346354; overflow-wrap: anywhere; }
.mesore-preview-count { margin-top: 9px; }
.mesore-preview-finish { text-align: center; }
.mesore-preview-finish img { max-width: 100%; object-fit: contain; margin: 0 0 12px; }
.mesore-preview-controls progress { min-width: 40px; flex: 1; accent-color: #326b58; }
.mesore-preview-controls [data-time] { white-space: nowrap; font-size: .8rem; }
@media (prefers-reduced-motion: no-preference) {
    .mesore-preview-scene:not([hidden]) { animation: mesore-preview-appear .4s ease-out both; }
    .mesore-preview-scene:not([hidden]) .mesore-preview-task { animation: mesore-preview-appear .5s .55s ease-out both; }
    .mesore-preview-scene:not([hidden]) .mesore-preview-photo-label { animation: mesore-preview-appear .4s .5s ease-out both; }
    .mesore-preview-scene:not([hidden]) .mesore-preview-photo:nth-child(2) .mesore-preview-photo-label { animation-delay: .9s; }
    .mesore-preview-scene:not([hidden]) .mesore-preview-photo:nth-child(3) .mesore-preview-photo-label { animation-delay: 1.3s; }
    .mesore-preview.is-paused * { animation-play-state: paused !important; }
    @keyframes mesore-preview-appear {
        from { opacity: 0; transform: translateY(6px); }
        to { opacity: 1; transform: translateY(0); }
    }
}
.mesore-preview-actions [hidden] { display: none; }