.preview-device-switch{display:flex;gap:5px;margin:12px 0 10px;flex-wrap:wrap}.preview-device-switch button,.expand-preview{border:1px solid #4b435b;background:#1b1825;color:#ece6f5;border-radius:6px;padding:8px 14px;font:600 12px Chivo,Arial,sans-serif;cursor:pointer}.preview-device-switch button[aria-pressed=true]{background:#f3eb36;color:#17151c;border-color:#f3eb36}.preview-device-caption{display:flex;align-items:center;justify-content:space-between;gap:10px;font:11px Chivo,Arial,sans-serif;color:#b5adc5;margin:10px 0}.expand-preview{padding:6px 10px;font-size:11px}.preview-desktop-window{--preview-scale:.3;--preview-height:500px;position:relative;width:100%;height:calc(var(--preview-height) * var(--preview-scale));border:1px solid #494454;border-radius:9px;overflow:hidden;background:#08070b}.preview-desktop-stage{position:absolute;left:0;top:0;width:1200px!important;max-width:none!important;min-width:1200px!important;height:var(--desktop-height,500px);min-height:0;box-sizing:border-box;padding:40px!important;overflow:auto;transform:scale(var(--preview-scale));transform-origin:top left;container-type:inline-size}.preview-area[data-preview-mode=both] .preview-phone{height:clamp(300px,44dvh,480px);max-height:480px}.preview-area[data-preview-mode=both] [data-preview-panel=desktop]{margin-top:18px}.preview-area [hidden]{display:none!important}.preview-area .preview-phone{container-type:inline-size}.full-preview-dialog{width:min(1320px,calc(100% - 24px));max-height:calc(100dvh - 24px);padding:14px;background:#111019;color:#f4f1e6;border:1px solid #514965;border-radius:12px}.full-preview-dialog::backdrop{background:#000b}.full-preview-dialog header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;font:13px Chivo,Arial,sans-serif}.full-preview-dialog button{padding:9px 16px;border:1px solid #5d536d;border-radius:6px;color:inherit;background:#24202e;cursor:pointer}.full-preview-viewport{max-height:76dvh;overflow:auto;overscroll-behavior:contain}.full-preview-page{width:1200px!important;min-width:1200px!important;min-height:600px;padding:40px!important;container-type:inline-size}.template-picker{border:1px solid var(--line);border-radius:10px;padding:16px;margin:0 0 20px}.template-picker h3{font-size:14px;margin:0 0 8px}.template-picker p{font:11px/1.5 Chivo,Arial,sans-serif;color:var(--muted);margin:0 0 12px}.template-picker label{display:block;font-size:11px}.template-picker input{display:block;width:100%;margin:8px 0 10px}.template-picker button{width:100%}@media(max-width:680px){.preview-area[data-preview-mode=both] .preview-phone{height:340px;max-height:340px}.preview-device-switch{justify-content:center}.preview-device-caption{max-width:420px;margin-left:auto;margin-right:auto}}
/* Device viewports stay identical across themes, content edits and preview modes. */
.preview-desktop-window{height:auto;aspect-ratio:8/5;flex:none}.preview-desktop-stage{height:750px!important;min-height:750px!important;max-height:750px!important}.preview-area[data-preview-mode] .preview-phone{width:390px;max-width:100%;height:440px;min-height:440px;max-height:440px;flex:none}.preview-area [data-preview-panel]{min-width:0;width:100%}@media(max-width:680px){.preview-area[data-preview-mode] .preview-phone{height:340px;min-height:340px;max-height:340px}}
/* Preview content keeps the same width when a theme starts overflowing.
   Wheel, touch and keyboard scrolling remain native; no scrollbar gutter
   takes 10-15px away from one theme but not another. */
.preview-area .preview-phone,.preview-area .preview-desktop-stage{scrollbar-width:none}
.preview-area .preview-phone::-webkit-scrollbar,.preview-area .preview-desktop-stage::-webkit-scrollbar{width:0;height:0}
html{scrollbar-gutter:stable}
.preview-area{width:100%;min-width:0;max-width:100%}
/* A phone is a portrait viewport, not a short content card. One physical
   proportion is retained in Mobile/Both and every theme; narrow screens
   reduce both dimensions together. Content scrolls inside this viewport. */
.preview-area[data-preview-mode] .preview-phone{height:var(--mobile-preview-height,844px)!important;min-height:var(--mobile-preview-height,844px)!important;max-height:var(--mobile-preview-height,844px)!important;overflow:auto;overscroll-behavior:contain}