.preview-controls{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:10px;padding:0 16px 10px}.preview-controls label{display:grid;gap:4px;min-width:0;font-size:10px;font-weight:700;color:#75675f}.preview-control-wide{grid-column:1/-1}.preview-controls [hidden]{display:none}.preview-controls select,.preview-dialog-toolbar select{width:100%;min-width:0;border:1px solid #ded2c9;border-radius:7px;background:#fff;color:#302c29;font:12px var(--font);padding:9px 8px;min-height:40px;cursor:pointer}.preview-controls select:focus-visible,.preview-dialog select:focus-visible,.preview-open-button:focus-visible,.preview-close:focus-visible{outline:3px solid #e3a791;outline-offset:3px}.preview-source{margin:1px 16px 10px;font-size:10px;color:#347953;line-height:1.5}.preview-source.is-sample{color:#956a22}.preview-stage{padding:12px;min-height:180px}.pop-template-preview{width:min(100%,280px);aspect-ratio:var(--pop-ratio);background:white;box-shadow:0 8px 25px #38281a18;line-height:0;flex:none;overflow:hidden}.pop-template-preview>svg{display:block;width:100%;height:auto;overflow:hidden}.preview-meta{padding-bottom:2px;gap:8px}.preview-template-name{margin:0 16px 12px;color:#67594f;font-size:10px;font-weight:700;overflow-wrap:anywhere}.preview-open-button{display:flex;width:calc(100% - 28px);margin:0 14px 10px;background:#b82b21;color:white;font-size:12px;padding:13px 10px;min-height:48px;border:1px solid #a5261d;box-shadow:0 4px 12px #a9281f22;line-height:1.4}.preview-open-button:hover{background:#9f221a}.preview-open-button svg{width:18px;height:18px;flex:none}.preview-reset{display:block;margin:0 auto 7px;min-height:32px}.preview-reset[hidden]{display:none}.preview-disclaimer{line-height:1.65!important;font-size:9px!important}.preview-state-message{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;color:#7b6e63;font-size:12px;line-height:1.6;padding:24px 10px;min-height:160px;max-width:520px}.preview-state-message strong{color:#58483e}.preview-state-message span{overflow-wrap:anywhere}.preview-spinner{width:25px;height:25px;border:3px solid #ecd8cf;border-top-color:#bd2d22;border-radius:50%;animation:preview-spin .8s linear infinite}@keyframes preview-spin{to{transform:rotate(360deg)}}body.preview-modal-open{overflow:hidden}.preview-dialog{width:min(1080px,calc(100vw - 36px));max-width:none;height:min(94dvh,1100px);max-height:94dvh;margin:auto;border:1px solid #e8ddd6;border-radius:16px;padding:0;background:#fffdfb;color:var(--ink);box-shadow:0 28px 100px #21120a55;overflow:hidden}.preview-dialog:not([open]){display:none}.preview-dialog::backdrop{background:#211813b8;backdrop-filter:blur(4px)}.preview-dialog-shell{height:100%;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto}.preview-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 24px 13px;border-bottom:1px solid #ede3dc}.preview-dialog-head h2{font-family:var(--display);font-size:23px;letter-spacing:-.7px;line-height:1.2;margin:5px 0}.preview-dialog-head p{font-size:12px;color:#7e6c5f;line-height:1.5;margin:5px 0 0;overflow-wrap:anywhere}.preview-close{flex:none;width:44px;height:44px;border:1px solid #e4d7ce;border-radius:10px;background:white;color:#6e584a;font:30px/1 Arial,sans-serif;cursor:pointer}.preview-close:hover{background:#fff0eb;color:#a6281f}.preview-dialog-toolbar{padding:11px 24px;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:11px;color:#846c5a}.preview-dialog-toolbar>span{max-width:55%;line-height:1.5}.preview-dialog-toolbar label{display:flex;align-items:center;gap:8px;white-space:nowrap}.preview-dialog-toolbar select{width:190px;font-size:11px;min-height:38px}.preview-dialog-stage{overflow:auto;min-height:0;min-width:0;display:flex;justify-content:center;align-items:flex-start;padding:18px;background:#eee8e1;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.preview-dialog-stage .pop-template-preview{width:min(100%,calc((94dvh - 245px)*var(--pop-aspect)),1000px);margin:auto}.preview-dialog-stage.is-zoomed{display:block}.preview-dialog-stage.is-zoomed .pop-template-preview{width:max(100%,800px);max-width:none;margin:0 auto}.preview-dialog-foot{font-size:10px;color:#8f7d70;padding:10px 24px 12px;margin:0;border-top:1px solid #ede3dc;line-height:1.5}.preview-dialog-stage .preview-state-message{margin:auto}.preview-dialog-stage[data-status="error"]{background:#fff3ed}.preview-dialog-stage[data-status="error"] strong{color:#ad3427}@media(max-width:760px){.preview-controls{gap:10px}.preview-controls select{font-size:16px;min-height:44px}.preview-open-button{font-size:13px;min-height:50px}.preview-dialog{width:100vw;height:100dvh;max-height:100dvh;border:0;border-radius:0;margin:0}.preview-dialog-head{padding:16px 16px 12px;gap:8px}.preview-dialog-head h2{font-size:21px}.preview-dialog-head p{font-size:11px}.preview-dialog-head .card-kicker{font-size:8px}.preview-dialog-toolbar{padding:10px 14px;align-items:flex-start;flex-direction:column;gap:8px}.preview-dialog-toolbar>span{max-width:100%;font-size:10px}.preview-dialog-toolbar label{width:100%;justify-content:space-between;font-size:11px}.preview-dialog-toolbar select{width:auto;max-width:78%;font-size:16px;min-height:42px}.preview-dialog-stage{padding:10px}.preview-dialog-stage .pop-template-preview{width:min(100%,calc((100dvh - 280px)*var(--pop-aspect)))}.preview-dialog-stage.is-zoomed .pop-template-preview{width:max(100%,700px)}.preview-dialog-foot{padding:10px 14px max(12px,env(safe-area-inset-bottom));font-size:9px}.preview-source{font-size:11px}.preview-template-name{font-size:11px}.preview-stage .pop-template-preview{width:min(100%,300px)}}@media(prefers-reduced-motion:reduce){.preview-spinner{animation:none}html{scroll-behavior:auto}}

@media(max-width:760px){.preview-card{display:block}}