/*
 * Yatoon theme preview (4.7.6).
 *
 * This is a compact, admin-scoped visual specimen. It intentionally reuses
 * the booking theme token names and familiar component classes without
 * rendering a second booking flow or changing saved settings.
 */
.yatoon-settings-theme-save {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-right: 8px;
    vertical-align: middle;
}
.yatoon-settings-theme-save-status {
    min-height: 20px;
    font-size: 12px;
}
.yatoon-theme-preview {
    --preview-canvas: #f4f7fb;
    --preview-surface: #ffffff;
    --preview-surface-raised: #f8fafc;
    --preview-text: #172033;
    --preview-muted: #64748b;
    --preview-border: #dbe4ef;
    --preview-accent: #db2777;
    --preview-accent-hover: #be185d;
    --preview-accent-soft: #fce7f3;
    --preview-accent-text: #fff;
    --preview-radius: 14px;
    --preview-shadow: 0 8px 22px rgba(15, 23, 42, .06);
    box-sizing: border-box;
    max-width: 760px;
    margin-top: 8px;
    padding: 16px;
    border: 1px solid var(--preview-border);
    border-radius: 16px;
    background: var(--preview-canvas);
    color: var(--preview-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.yatoon-theme-preview *,
.yatoon-theme-preview *::before,
.yatoon-theme-preview *::after { box-sizing: border-box; }
.yatoon-theme-preview[data-yatoon-preview-mode="dark"] {
    --preview-canvas: #111827;
    --preview-surface: #182235;
    --preview-surface-raised: #223049;
    --preview-text: #f8fafc;
    --preview-muted: #b7c2d4;
    --preview-border: #3b4a63;
    --preview-shadow: 0 14px 34px rgba(0, 0, 0, .28);
}
.yatoon-theme-preview[data-yatoon-preview-theme="beauty"] { --preview-accent: #db2777; --preview-accent-hover: #be185d; --preview-accent-soft: #fce7f3; --preview-radius: 14px; }
.yatoon-theme-preview[data-yatoon-preview-theme="clean"] { --preview-accent: #2563eb; --preview-accent-hover: #1d4ed8; --preview-accent-soft: #eff6ff; --preview-radius: 8px; --preview-shadow: none; }
.yatoon-theme-preview[data-yatoon-preview-theme="luxury"] { --preview-accent: #92722a; --preview-accent-hover: #78591e; --preview-accent-soft: #fdf8ee; --preview-radius: 4px; }
.yatoon-theme-preview[data-yatoon-preview-theme="modern"] { --preview-accent: #0f766e; --preview-accent-hover: #115e59; --preview-accent-soft: #ccfbf1; --preview-radius: 16px; --preview-shadow: 0 10px 26px rgba(15, 118, 110, .10); }
.yatoon-theme-preview[data-yatoon-preview-theme="festive-red"] { --preview-accent: #b4232f; --preview-accent-hover: #8f1d28; --preview-accent-soft: #fbe4e2; --preview-radius: 14px; --preview-shadow: 0 10px 26px rgba(180, 35, 47, .10); }
.yatoon-theme-preview[data-yatoon-preview-theme="festive-red"][data-yatoon-preview-mode="dark"] { --preview-canvas: #201116; --preview-surface: #2a161b; --preview-surface-raised: #3b1d26; --preview-text: #fff7f3; --preview-muted: #d2adb0; --preview-border: #67343d; --preview-accent: #d65d62; --preview-accent-hover: #ef7778; --preview-accent-soft: #5e2630; --preview-accent-text: #201116; --preview-shadow: 0 14px 34px rgba(0, 0, 0, .28); }
.yatoon-theme-preview[data-yatoon-preview-theme="halloween"] { --preview-canvas: #fffbf5; --preview-surface: #fffdf9; --preview-surface-raised: #f5efe8; --preview-text: #24182b; --preview-muted: #6f6475; --preview-border: #e4d8e7; --preview-accent: #c45a16; --preview-accent-hover: #9a3f0d; --preview-accent-soft: #ffedd5; --preview-accent-text: #0d050a; --preview-radius: 12px; --preview-shadow: 0 10px 26px rgba(49, 28, 61, .09); }
.yatoon-theme-preview[data-yatoon-preview-theme="halloween"][data-yatoon-preview-mode="dark"] { --preview-canvas: #17151b; --preview-surface: #242029; --preview-surface-raised: #322a3c; --preview-text: #faf7ff; --preview-muted: #c9bfd1; --preview-border: #51445d; --preview-accent: #f08a38; --preview-accent-hover: #ffad63; --preview-accent-soft: #5c3323; --preview-accent-text: #21131a; --preview-radius: 12px; --preview-shadow: 0 14px 34px rgba(0, 0, 0, .28); }
.yatoon-theme-preview[data-yatoon-preview-theme="emerald"] { --preview-canvas: #fbf8ef; --preview-surface: #fffdf7; --preview-surface-raised: #f3f0e7; --preview-text: #17382d; --preview-muted: #587266; --preview-border: #cfe3d8; --preview-accent: #167a5a; --preview-accent-hover: #0f5f46; --preview-accent-soft: #e4f3eb; --preview-radius: 13px; --preview-shadow: 0 10px 26px rgba(18, 63, 49, .10); }
.yatoon-theme-preview[data-yatoon-preview-theme="emerald"][data-yatoon-preview-mode="dark"] { --preview-canvas: #11251d; --preview-surface: #183328; --preview-surface-raised: #214638; --preview-text: #eff9f1; --preview-muted: #b4d0bf; --preview-border: #386451; --preview-accent: #4fbb87; --preview-accent-hover: #78d6a4; --preview-accent-soft: #26533f; --preview-accent-text: #11251d; --preview-shadow: 0 14px 34px rgba(0, 0, 0, .30); }
.yatoon-theme-preview[data-yatoon-preview-theme="luxury"] .yatoon-theme-preview-stage { font-family: Georgia, "Times New Roman", serif; }
.yatoon-theme-preview[data-yatoon-preview-theme="luxury"] .yatoon-preview-button,
.yatoon-theme-preview[data-yatoon-preview-theme="luxury"] .yatoon-preview-slot,
.yatoon-theme-preview[data-yatoon-preview-theme="luxury"] input { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

.yatoon-theme-preview-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 10px 14px;
    margin-bottom: 14px;
}
.yatoon-theme-preview-toolbar label { display: grid; gap: 4px; color: var(--preview-muted); font-size: 11px; font-weight: 700; }
.yatoon-theme-preview-toolbar .yatoon-preview-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; }
.yatoon-theme-preview-toolbar .yatoon-preview-toggle[hidden] { display: none !important; }
.yatoon-theme-preview-toolbar .yatoon-preview-toggle input { margin: 0; accent-color: var(--preview-accent); }
.yatoon-theme-preview-toolbar select { min-width: 150px; min-height: 34px; border: 1px solid var(--preview-border); border-radius: 8px; background: var(--preview-surface); color: var(--preview-text); }
.yatoon-theme-preview-toolbar select:focus-visible { outline: 3px solid color-mix(in srgb, var(--preview-accent) 28%, transparent); outline-offset: 2px; border-color: var(--preview-accent); }
.yatoon-theme-preview-note { margin: 0 0 14px; color: var(--preview-muted); font-size: 12px; }
.yatoon-theme-preview-stage { position: relative; padding: 14px; border: 1px solid var(--preview-border); border-radius: var(--preview-radius); background: var(--preview-canvas); overflow: hidden; }
.yatoon-preview-snowfall-layer { display: none; position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 4; }
.yatoon-theme-preview[data-yatoon-preview-theme="festive-red"][data-yatoon-preview-snowfall="1"] .yatoon-preview-snowfall-layer { display: block; }
.yatoon-theme-preview-stage > :not(.yatoon-preview-snowfall-layer):not(.yatoon-preview-bats-layer):not(.yatoon-preview-pumpkin-layer):not(.yatoon-preview-sparkle-layer) { position: relative; z-index: 3; }
.yatoon-preview-snowflake { position: absolute; top: -1.1rem; right: var(--yatoon-preview-snow-left); color: rgba(255, 255, 255, .68); font-size: var(--yatoon-preview-snow-size); line-height: 1; opacity: .72; pointer-events: none; user-select: none; animation: yatoon-preview-snowfall var(--yatoon-preview-snow-duration) linear var(--yatoon-preview-snow-delay) infinite; will-change: transform; }
.yatoon-theme-preview[data-yatoon-preview-theme="festive-red"] .yatoon-preview-snowflake { color: rgba(183, 139, 74, .68); opacity: .84; }
.yatoon-theme-preview[data-yatoon-preview-theme="festive-red"][data-yatoon-preview-mode="dark"] .yatoon-preview-snowflake { color: rgba(255, 247, 243, .8); }
.yatoon-preview-snowflake:nth-child(1) { --yatoon-preview-snow-left: 8%; --yatoon-preview-snow-size: 10px; --yatoon-preview-snow-duration: 14s; --yatoon-preview-snow-delay: -3s; }
.yatoon-preview-snowflake:nth-child(2) { --yatoon-preview-snow-left: 23%; --yatoon-preview-snow-size: 8px; --yatoon-preview-snow-duration: 18s; --yatoon-preview-snow-delay: -11s; }
.yatoon-preview-snowflake:nth-child(3) { --yatoon-preview-snow-left: 41%; --yatoon-preview-snow-size: 12px; --yatoon-preview-snow-duration: 16s; --yatoon-preview-snow-delay: -7s; }
.yatoon-preview-snowflake:nth-child(4) { --yatoon-preview-snow-left: 59%; --yatoon-preview-snow-size: 9px; --yatoon-preview-snow-duration: 19s; --yatoon-preview-snow-delay: -14s; }
.yatoon-preview-snowflake:nth-child(5) { --yatoon-preview-snow-left: 74%; --yatoon-preview-snow-size: 11px; --yatoon-preview-snow-duration: 15s; --yatoon-preview-snow-delay: -5s; }
.yatoon-preview-snowflake:nth-child(6) { --yatoon-preview-snow-left: 86%; --yatoon-preview-snow-size: 7px; --yatoon-preview-snow-duration: 20s; --yatoon-preview-snow-delay: -17s; }
.yatoon-preview-snowflake:nth-child(7) { --yatoon-preview-snow-left: 95%; --yatoon-preview-snow-size: 9px; --yatoon-preview-snow-duration: 17s; --yatoon-preview-snow-delay: -9s; }
@keyframes yatoon-preview-snowfall { 0% { transform: translate3d(0, -10px, 0) rotate(0deg); } 22% { transform: translate3d(-15px, 18%, 0) rotate(-95deg); } 46% { transform: translate3d(13px, 43%, 0) rotate(-215deg); } 71% { transform: translate3d(-18px, 68%, 0) rotate(-310deg); } 100% { transform: translate3d(9px, calc(100% + 22px), 0) rotate(-430deg); } }
.yatoon-preview-bats-layer { display: none; position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 4; }
.yatoon-theme-preview[data-yatoon-preview-theme="halloween"][data-yatoon-preview-bats="1"] .yatoon-preview-bats-layer { display: block; }
.yatoon-preview-bat { position: absolute; top: -1rem; right: var(--yatoon-preview-bat-left); width: 17px; height: 10px; background: rgba(91, 42, 134, .52); clip-path: polygon(0 35%, 20% 42%, 35% 18%, 50% 40%, 65% 18%, 80% 42%, 100% 35%, 86% 67%, 70% 60%, 50% 100%, 30% 60%, 14% 67%); pointer-events: none; animation: yatoon-preview-bats var(--yatoon-preview-bat-duration) ease-in-out var(--yatoon-preview-bat-delay) infinite; }
.yatoon-preview-bat:nth-child(1) { --yatoon-preview-bat-left: 10%; --yatoon-preview-bat-duration: 18s; --yatoon-preview-bat-delay: -4s; }
.yatoon-preview-bat:nth-child(2) { --yatoon-preview-bat-left: 29%; --yatoon-preview-bat-duration: 22s; --yatoon-preview-bat-delay: -13s; width: 14px; height: 8px; }
.yatoon-preview-bat:nth-child(3) { --yatoon-preview-bat-left: 53%; --yatoon-preview-bat-duration: 20s; --yatoon-preview-bat-delay: -9s; }
.yatoon-preview-bat:nth-child(4) { --yatoon-preview-bat-left: 73%; --yatoon-preview-bat-duration: 24s; --yatoon-preview-bat-delay: -17s; width: 15px; height: 8px; }
.yatoon-preview-bat:nth-child(5) { --yatoon-preview-bat-left: 90%; --yatoon-preview-bat-duration: 21s; --yatoon-preview-bat-delay: -7s; width: 13px; height: 7px; }
@keyframes yatoon-preview-bats { 0% { transform: translate3d(0, -10px, 0) rotate(14deg); } 20% { transform: translate3d(-24px, 17%, 0) rotate(-13deg); } 43% { transform: translate3d(19px, 39%, 0) rotate(9deg); } 68% { transform: translate3d(-28px, 63%, 0) rotate(-16deg); } 100% { transform: translate3d(17px, calc(100% + 20px), 0) rotate(12deg); } }
.yatoon-preview-pumpkin-layer { display: none; position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 4; }
.yatoon-theme-preview[data-yatoon-preview-theme="halloween"][data-yatoon-preview-pumpkins="1"] .yatoon-preview-pumpkin-layer { display: block; }
.yatoon-preview-pumpkin { position: absolute; top: -1rem; right: var(--yatoon-preview-pumpkin-left); width: var(--yatoon-preview-pumpkin-size); height: calc(var(--yatoon-preview-pumpkin-size) * .82); border: 1px solid color-mix(in srgb, var(--preview-accent) 55%, #5b2a86); border-radius: 46% 46% 42% 42%; background: radial-gradient(ellipse at 31% 35%, #ffd085 0 10%, transparent 12%), linear-gradient(-90deg, color-mix(in srgb, var(--preview-accent) 76%, #ff9f43), var(--preview-accent), #a8460e); box-shadow: inset 2px -2px 0 rgba(91, 42, 134, .22); pointer-events: none; animation: yatoon-preview-pumpkins var(--yatoon-preview-pumpkin-duration) ease-in-out var(--yatoon-preview-pumpkin-delay) infinite; will-change: transform; }
.yatoon-preview-pumpkin::before { content: ''; position: absolute; width: 24%; height: 32%; top: -26%; right: 38%; border-radius: 4px 4px 1px 1px; background: #789b25; transform: rotate(12deg); }
.yatoon-preview-pumpkin:nth-child(1) { --yatoon-preview-pumpkin-left: 13%; --yatoon-preview-pumpkin-size: 13px; --yatoon-preview-pumpkin-duration: 19s; --yatoon-preview-pumpkin-delay: -5s; }
.yatoon-preview-pumpkin:nth-child(2) { --yatoon-preview-pumpkin-left: 38%; --yatoon-preview-pumpkin-size: 10px; --yatoon-preview-pumpkin-duration: 23s; --yatoon-preview-pumpkin-delay: -14s; }
.yatoon-preview-pumpkin:nth-child(3) { --yatoon-preview-pumpkin-left: 66%; --yatoon-preview-pumpkin-size: 15px; --yatoon-preview-pumpkin-duration: 21s; --yatoon-preview-pumpkin-delay: -9s; }
.yatoon-preview-pumpkin:nth-child(4) { --yatoon-preview-pumpkin-left: 88%; --yatoon-preview-pumpkin-size: 9px; --yatoon-preview-pumpkin-duration: 25s; --yatoon-preview-pumpkin-delay: -18s; }
@keyframes yatoon-preview-pumpkins { 0% { transform: translate3d(0, -10px, 0) rotate(10deg); } 24% { transform: translate3d(18px, 21%, 0) rotate(-18deg); } 49% { transform: translate3d(-21px, 48%, 0) rotate(14deg); } 75% { transform: translate3d(15px, 73%, 0) rotate(-22deg); } 100% { transform: translate3d(-13px, calc(100% + 20px), 0) rotate(8deg); } }
.yatoon-preview-sparkle-layer { display: none; position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 4; }
.yatoon-theme-preview[data-yatoon-preview-theme="emerald"][data-yatoon-preview-sparkle="1"] .yatoon-preview-sparkle-layer { display: block; }
.yatoon-preview-sparkle { position: absolute; top: -1rem; right: var(--yatoon-preview-sparkle-left); color: rgba(179, 138, 59, .70); font-size: var(--yatoon-preview-sparkle-size); line-height: 1; opacity: .78; pointer-events: none; user-select: none; animation: yatoon-preview-sparkle var(--yatoon-preview-sparkle-duration) ease-in-out var(--yatoon-preview-sparkle-delay) infinite; will-change: transform, opacity; }
.yatoon-theme-preview[data-yatoon-preview-theme="emerald"][data-yatoon-preview-mode="dark"] .yatoon-preview-sparkle { color: rgba(211, 186, 111, .82); }
.yatoon-preview-sparkle:nth-child(1) { --yatoon-preview-sparkle-left: 9%; --yatoon-preview-sparkle-size: 12px; --yatoon-preview-sparkle-duration: 13s; --yatoon-preview-sparkle-delay: -4s; }
.yatoon-preview-sparkle:nth-child(2) { --yatoon-preview-sparkle-left: 25%; --yatoon-preview-sparkle-size: 8px; --yatoon-preview-sparkle-duration: 17s; --yatoon-preview-sparkle-delay: -10s; }
.yatoon-preview-sparkle:nth-child(3) { --yatoon-preview-sparkle-left: 43%; --yatoon-preview-sparkle-size: 10px; --yatoon-preview-sparkle-duration: 15s; --yatoon-preview-sparkle-delay: -6s; }
.yatoon-preview-sparkle:nth-child(4) { --yatoon-preview-sparkle-left: 60%; --yatoon-preview-sparkle-size: 7px; --yatoon-preview-sparkle-duration: 19s; --yatoon-preview-sparkle-delay: -14s; }
.yatoon-preview-sparkle:nth-child(5) { --yatoon-preview-sparkle-left: 74%; --yatoon-preview-sparkle-size: 11px; --yatoon-preview-sparkle-duration: 16s; --yatoon-preview-sparkle-delay: -8s; }
.yatoon-preview-sparkle:nth-child(6) { --yatoon-preview-sparkle-left: 90%; --yatoon-preview-sparkle-size: 8px; --yatoon-preview-sparkle-duration: 21s; --yatoon-preview-sparkle-delay: -17s; }
@keyframes yatoon-preview-sparkle { 0% { transform: translate3d(0, -10px, 0) rotate(0deg); opacity: 0; } 18% { transform: translate3d(14px, 15%, 0) rotate(-70deg); opacity: .78; } 44% { transform: translate3d(-18px, 42%, 0) rotate(-165deg); opacity: .62; } 72% { transform: translate3d(16px, 70%, 0) rotate(-255deg); opacity: .72; } 100% { transform: translate3d(-11px, calc(100% + 20px), 0) rotate(-360deg); opacity: 0; } }
.yatoon-preview-flow { display: flex; gap: 6px; overflow: auto; margin-bottom: 12px; padding-bottom: 2px; }
.yatoon-preview-flow span { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; background: var(--preview-surface-raised); color: var(--preview-muted); font-size: 10px; font-weight: 700; white-space: nowrap; }
.yatoon-preview-flow span.is-active { background: var(--preview-accent-soft); color: var(--preview-accent); }
.yatoon-preview-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(180px, .85fr); gap: 12px; }
.yatoon-preview-main, .yatoon-preview-summary { min-width: 0; padding: 14px; border: 1px solid var(--preview-border); border-radius: var(--preview-radius); background: var(--preview-surface); box-shadow: var(--preview-shadow); }
.yatoon-preview-kicker { margin: 0 0 4px; color: var(--preview-accent); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.yatoon-preview-main h3, .yatoon-preview-summary h4 { margin: 0; color: var(--preview-text); font-size: 17px; line-height: 1.2; }
#yatoon-theme-preview .yatoon-preview-main h3 { color: var(--preview-text) !important; }
.yatoon-preview-main > p { margin: 5px 0 12px; color: var(--preview-muted); font-size: 12px; line-height: 1.45; }
.yatoon-preview-service-list { display: grid; gap: 8px; }
.yatoon-preview-service { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 9px; border: 1px solid var(--preview-border); border-radius: var(--preview-radius); background: var(--preview-surface); }
.yatoon-preview-service.is-selected { border-color: var(--preview-accent); background: color-mix(in srgb, var(--preview-accent) 9%, var(--preview-surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--preview-accent) 14%, transparent); }
.yatoon-preview-thumb { display: grid; width: 38px; height: 38px; place-items: center; border-radius: calc(var(--preview-radius) - 4px); background: var(--preview-accent-soft); color: var(--preview-accent); font-size: 16px; font-weight: 800; }
.yatoon-preview-service strong { display: block; color: var(--preview-text); font-size: 12px; }
.yatoon-preview-service small { display: block; margin-top: 2px; color: var(--preview-muted); font-size: 10px; }
.yatoon-preview-chip { padding: 4px 7px; border-radius: 999px; background: var(--preview-accent-soft); color: var(--preview-accent); font-size: 9px; font-weight: 800; white-space: nowrap; }
.yatoon-preview-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.yatoon-preview-fields label { display: grid; gap: 4px; color: var(--preview-muted); font-size: 10px; font-weight: 700; }
.yatoon-preview-fields input, .yatoon-preview-fields select { width: 100%; min-height: 34px; padding: 6px 8px; border: 1px solid var(--preview-border); border-radius: calc(var(--preview-radius) - 4px); background: var(--preview-surface-raised); color: var(--preview-text); font: inherit; font-size: 11px; }
.yatoon-preview-fields input:focus, .yatoon-preview-fields select:focus { outline: 3px solid color-mix(in srgb, var(--preview-accent) 22%, transparent); outline-offset: 1px; border-color: var(--preview-accent); }
.yatoon-preview-slots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.yatoon-preview-slot { min-height: 30px; padding: 5px 9px; border: 1px solid var(--preview-border); border-radius: calc(var(--preview-radius) - 4px); background: var(--preview-surface); color: var(--preview-text); font: inherit; font-size: 10px; font-weight: 700; }
.yatoon-preview-slot:hover { border-color: var(--preview-accent); color: var(--preview-accent); }
.yatoon-preview-slot.is-selected { border-color: var(--preview-accent); background: var(--preview-accent); color: #fff; }
.yatoon-preview-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.yatoon-preview-button { min-height: 34px; padding: 7px 12px; border: 1px solid var(--preview-accent); border-radius: calc(var(--preview-radius) - 3px); background: var(--preview-accent); color: var(--preview-accent-text, #fff); font: inherit; font-size: 11px; font-weight: 800; }
.yatoon-preview-button:hover { background: var(--preview-accent-hover); border-color: var(--preview-accent-hover); }
.yatoon-preview-button:focus-visible { outline: 3px solid color-mix(in srgb, var(--preview-accent) 28%, transparent); outline-offset: 2px; }
.yatoon-preview-button.is-secondary { background: transparent; color: var(--preview-accent); }
.yatoon-preview-button.is-disabled { opacity: .45; cursor: not-allowed; }
.yatoon-preview-summary h4 { margin-bottom: 10px; font-size: 14px; }
.yatoon-preview-summary-row { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--preview-border); color: var(--preview-muted); font-size: 10px; }
.yatoon-preview-summary-row strong { color: var(--preview-text); font-size: 11px; text-align: end; }
.yatoon-preview-total { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; color: var(--preview-text); font-size: 12px; font-weight: 800; }
.yatoon-preview-total strong { color: var(--preview-accent); }
.yatoon-preview-notice { margin-top: 10px; padding: 7px 9px; border-radius: calc(var(--preview-radius) - 4px); font-size: 10px; line-height: 1.35; }
.yatoon-preview-notice.is-success { background: #dcfce7; color: #166534; }
.yatoon-preview-notice.is-error { background: #fee2e2; color: #991b1b; }
.yatoon-theme-preview[data-yatoon-preview-mode="dark"] .yatoon-preview-notice.is-success { background: #14532d; color: #bbf7d0; }
.yatoon-theme-preview[data-yatoon-preview-mode="dark"] .yatoon-preview-notice.is-error { background: #7f1d1d; color: #fecaca; }
@media (max-width: 700px) {
    .yatoon-settings-theme-save { margin: 8px 0 0; }
    .yatoon-theme-preview { padding: 10px; }
    .yatoon-preview-grid { grid-template-columns: 1fr; }
    .yatoon-preview-main, .yatoon-preview-summary { padding: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    .yatoon-preview-snowfall-layer,
    .yatoon-preview-bats-layer,
    .yatoon-preview-pumpkin-layer,
    .yatoon-preview-sparkle-layer { display: none !important; }
}