/* Template review: one responsive grid and one outer scroll container. */
body:has(#template-modal[open]){overflow:hidden}
#template-modal.live-modal[open]{--preview-height:clamp(440px,76dvh,900px);box-sizing:border-box;position:fixed;inset:12px;margin:0;width:auto;max-width:none;height:auto;max-height:none;padding:54px 24px 24px;display:grid;grid-template-columns:140px minmax(0,1fr) minmax(340px,410px);grid-template-rows:max-content max-content;grid-template-areas:'pages preview info' 'related related related';gap:24px;align-items:start;align-content:start;overflow:auto;overscroll-behavior:contain;border:0;border-radius:16px;background:white;font:400 16px/1.6 Inter,Arial,sans-serif;color:#252932;-webkit-font-smoothing:antialiased}
#template-modal.live-modal>*{min-width:0;box-sizing:border-box}
#template-modal.live-modal .modal-close{position:fixed;inset:22px 26px auto auto;margin:0;padding:0;width:34px;height:34px;border:1px solid #dfe3e9;border-radius:50%;background:white;color:#5d6571;font-size:0;z-index:30;display:grid;place-items:center;box-shadow:0 2px 8px #0001}
#template-modal.live-modal .modal-close:before,#template-modal.live-modal .modal-close:after{content:'';position:absolute;width:14px;height:2px;background:currentColor;border-radius:2px;transform:rotate(45deg)}
#template-modal.live-modal .modal-close:after{transform:rotate(-45deg)}
#template-modal.live-modal .modal-close:hover{background:#f1f3f6;color:#202124}
#template-modal.live-modal .modal-image{grid-area:preview;position:relative;display:flex;justify-content:center;align-items:stretch;height:var(--preview-height);min-height:0;max-height:none;margin:0;padding:12px 24px;background:#f6f7f9;border:0;border-radius:12px;overflow:hidden}
#template-modal.live-modal .live-template{display:block;flex:0 1 410px;width:100%;min-width:0;max-width:410px;height:100%;border:0;border-radius:10px;background:white;box-shadow:0 4px 20px #20212412}
#template-modal.live-modal .review-pages{grid-area:pages;height:var(--preview-height);min-height:0;max-height:none;overflow:auto;padding:0 8px 0 0;margin:0;scrollbar-width:thin}
#template-modal.live-modal .review-pages h3{font-size:14px;font-weight:600;line-height:1.5;margin:0 0 16px;color:#677180}
#template-modal.live-modal .review-pages h3 small{font-size:12px;margin-left:4px}
.review-page-list{display:grid;gap:14px}.review-page{position:relative;display:block;width:100%;aspect-ratio:9/14;padding:0;border:2px solid transparent;border-radius:8px;background:#f3f4f6;overflow:hidden}.review-page img{display:block;width:100%;height:100%;object-fit:cover}.review-page span{position:absolute;left:6px;top:6px;padding:1px 6px;border-radius:4px;background:#0009;color:white;font:600 13px/1.5 Inter,Arial,sans-serif}.review-page[aria-current=true]{border-color:#f34e70}
#template-modal.live-modal .modal-info{grid-area:info;position:static;display:flex;flex-direction:column;align-self:start;height:auto;min-height:0;max-height:none;overflow:visible;margin:0;padding:24px;border:1px solid #e6e9ef;border-radius:12px;background:white}
.review-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding-bottom:18px;border-bottom:1px solid #eceef1}.review-actions button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 12px;border:1px solid #e6e9ef;border-radius:9px;background:#f7f8fa;color:#424a56;font:600 14px/1.4 Inter,Arial,sans-serif;white-space:nowrap}.review-actions [data-login]{background:white}.review-actions svg{width:19px;height:19px;flex-shrink:0}.review-actions button:hover{background:#f0f2f5}
#template-modal.live-modal #template-stats{position:static;align-self:flex-end;display:flex;gap:8px;font-size:13px;margin:16px 0 12px}
#template-modal.live-modal .eyebrow{display:block;padding:0;font-size:14px;line-height:1.5;font-weight:500;color:#677180}
#template-modal.live-modal .modal-info h2{padding:0;margin:16px 0;font-size:28px;line-height:1.3;font-weight:700;letter-spacing:-.6px;overflow-wrap:anywhere}
#template-modal.live-modal .modal-info p{display:block;margin:0 0 20px;font-size:16px;line-height:1.75;font-weight:400;color:#535b68}
#template-modal.live-modal .features{display:flex;flex-direction:column;gap:8px;margin:12px 0 16px;padding:16px 0;font-size:15px;line-height:1.6;border-block:1px solid #eceef1}
#template-modal.live-modal #use-template,#template-modal.live-modal #full-preview{display:block;padding:12px 16px;min-height:48px;font:600 16px/1.5 Inter,Arial,sans-serif;text-align:center;border-radius:9px}
#template-modal.live-modal #use-template{background:#f14d6c;color:white}#template-modal.live-modal #full-preview{margin-top:10px;background:#f3f4f6;color:#323944}
#template-modal.live-modal .save-template{display:block;padding:12px;font-size:14px;line-height:1.5}
#template-modal.live-modal #template-sharing{display:grid;grid-template-columns:88px minmax(0,1fr);gap:6px 14px;align-items:center;text-align:left;margin:18px 0 0;padding:16px;background:#f6f7f9;border-radius:10px}
#template-modal.live-modal #template-sharing .qr-link{grid-row:1/4;width:88px;height:88px;margin:0;padding:4px;background:white;border:1px solid #e5e7eb;border-radius:8px}
#template-sharing svg{width:100%;height:100%;display:block}#template-modal.live-modal #template-sharing strong{font-size:14px;line-height:1.5}#template-modal.live-modal #template-sharing small{display:block!important;font-size:12px;line-height:1.5;margin:0}#template-modal.live-modal #copy-template-link{font-size:13px;line-height:1.5;padding:0;text-align:left;text-decoration:underline}
#template-modal.live-modal .review-related{grid-area:related;position:static;width:100%;min-width:0;margin:0;padding:8px 0 0;clear:both}
#template-modal.live-modal .review-related header{position:static;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px;width:100%;max-width:1540px;height:auto;margin:0 auto 24px;padding:0;background:none;box-shadow:none}
#template-modal.live-modal .review-related h3{font-size:28px;font-weight:700;line-height:1.35;letter-spacing:-.6px;margin:0}#template-modal.live-modal .review-related p{font-size:15px;line-height:1.6;color:#677180;margin:0}
.review-related-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px;width:100%;max-width:1540px;margin:auto}.review-related-grid>button{display:block;min-width:0;padding:0;background:white;border:1px solid #e6e9ef;border-radius:10px;overflow:hidden;text-align:left}.review-related-grid img.reference-cover{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover}.review-related-grid strong{display:block;padding:14px;font:600 15px/1.5 Inter,Arial,sans-serif;overflow-wrap:anywhere}
.review-copy-toast{position:fixed;top:26px;left:50%;transform:translateX(-50%);z-index:100;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 40px);padding:14px 20px;border:1px solid #bfdfb1;border-radius:9px;background:#f0faeb;color:#328719;box-shadow:0 5px 20px #193e1612;font:500 14px/1.5 Inter,Arial,sans-serif;pointer-events:none}.review-copy-toast[hidden]{display:none}.review-copy-toast svg{width:20px;height:20px;flex-shrink:0}.review-copy-toast.copy-failed{background:#fff5f5;border-color:#efc8c8;color:#ae3030}.google-pending{background:#fff5f7;padding:12px;border-radius:8px;font-size:13px!important;margin:12px 0!important}.google-pending[hidden]{display:none!important}
@media(min-width:1800px){#template-modal.live-modal[open]{grid-template-columns:160px minmax(0,1fr) 450px;gap:28px}#template-modal.live-modal .modal-info{padding:28px}}
@media(max-width:1100px){#template-modal.live-modal[open]{grid-template-columns:96px minmax(0,1fr) 330px;gap:16px;padding-inline:16px}#template-modal.live-modal .modal-info{padding:18px}#template-modal.live-modal .modal-info h2{font-size:25px}.review-actions button{font-size:13px}.review-related-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:850px){#template-modal.live-modal[open]{grid-template-columns:96px minmax(0,1fr);grid-template-rows:repeat(3,max-content);grid-template-areas:'pages preview' 'info info' 'related related'}#template-modal.live-modal .modal-info{width:100%;max-width:680px;justify-self:center}.review-actions{justify-content:flex-start}}
@media(max-width:540px){#template-modal.live-modal[open]{--preview-height:68dvh;inset:0;border-radius:0;padding:52px 12px 20px;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(4,max-content);grid-template-areas:'preview' 'pages' 'info' 'related';gap:20px}#template-modal.live-modal .modal-image{padding:8px;height:var(--preview-height)}#template-modal.live-modal .review-pages{height:auto;padding:0;overflow:auto}#template-modal.live-modal .review-pages h3{margin-bottom:10px}.review-page-list{display:flex;gap:10px}.review-page{width:72px;height:106px;flex:0 0 72px}#template-modal.live-modal .modal-close{top:10px;right:12px}#template-modal.live-modal .modal-info{padding:18px}#template-modal.live-modal .modal-info h2{font-size:25px}.review-actions{gap:8px}.review-actions button{font-size:12px;padding:9px}#template-modal.live-modal .review-related h3{font-size:25px}.review-related-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.review-related-grid strong{font-size:14px;padding:12px}#template-modal.live-modal #template-sharing{grid-template-columns:76px minmax(0,1fr);padding:12px;gap:6px 10px}#template-modal.live-modal #template-sharing .qr-link{width:76px;height:76px}}

/* Branded, camera-readable QR panel. Preserve the QR quiet zone. */
#template-modal.live-modal #template-sharing{grid-template-columns:88px minmax(0,1fr) 54px;gap:12px;padding:14px;overflow:hidden}
#template-modal.live-modal #template-sharing .qr-link{position:relative;grid-row:auto;width:88px;height:88px;padding:0;border:0;border-radius:6px;flex-shrink:0}
#template-sharing .qr-center-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:19%;height:19%;object-fit:contain;background:white;border:3px solid white;border-radius:7px;box-sizing:content-box}
#template-sharing .qr-copy{display:flex;flex-direction:column;gap:5px;min-width:0}
#template-modal.live-modal #template-sharing strong{font-size:13px;font-weight:600;line-height:1.45}
#template-modal.live-modal #template-sharing small{font-size:11px;line-height:1.5;color:#7b8089}
#template-modal.live-modal #copy-template-link{font-size:11px;color:#667080;align-self:flex-start;text-underline-offset:3px}
#template-sharing svg.qr-phone-art{width:54px;height:82px;color:#d4d7dc;align-self:center}
@media(max-width:1500px){#template-modal.live-modal #template-sharing{grid-template-columns:80px minmax(0,1fr);gap:10px}#template-modal.live-modal #template-sharing .qr-link{width:80px;height:80px}#template-sharing svg.qr-phone-art{display:none}}
@media(min-width:541px) and (max-width:1500px){#template-modal.live-modal #template-sharing{grid-template-columns:76px minmax(0,1fr) 36px;gap:8px;padding:10px}#template-modal.live-modal #template-sharing .qr-link{width:76px;height:76px}#template-sharing svg.qr-phone-art{display:block;width:36px;height:64px}}

/* Center the loader in the preview, without inheriting the old translate offset. */
#template-modal.live-modal .modal-image{position:relative}
#template-modal.live-modal .preview-cover-loading{inset:12px auto auto 50%!important;transform:translateX(-50%)!important;margin:0!important;width:min(410px,calc(100% - 24px))!important;height:calc(100% - 24px)!important;max-width:100%;overflow:hidden}

.review-switch{position:fixed;top:22px;left:50%;transform:translateX(-50%);display:flex;padding:4px;width:252px;background:#fff;border:1px solid #e9e9ec;border-radius:30px;z-index:35;box-shadow:0 3px 12px #0000000a}
.review-switch button{position:relative;z-index:1;width:50%;border:0;background:transparent;color:#303342;font:600 13px/20px Inter,Arial,sans-serif;padding:8px 4px;border-radius:24px;cursor:pointer}
.review-switch button[aria-selected=true]{color:white}.review-switch-slider{position:absolute;left:4px;top:4px;bottom:4px;width:calc(50% - 4px);background:#f64e71;border-radius:24px;transition:transform .22s ease}
[data-review-view=related] .review-switch-slider{transform:translateX(100%)}
#template-modal.live-modal[open]{padding-top:80px}
#template-modal[data-review-view=related] .modal-image,#template-modal[data-review-view=related] .review-pages,#template-modal[data-review-view=related] .modal-info{display:none}
#template-modal[data-review-view=related] .review-related{grid-area:1/1/2/-1;width:100%;max-width:1100px;margin:auto}
@media(max-width:540px){.review-switch{top:18px;width:236px}#template-modal.live-modal[open]{padding-top:76px}#template-modal[data-review-view=preview] .review-related{display:none}#template-modal[data-review-view=related] .review-related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.review-switch-slider{transition:none}}

/* Phone preview occupies the entire viewport; desktop panels stay desktop-only. */
@media(max-width:767px){
#template-modal.live-modal[open]{inset:0;width:100%;height:100dvh;max-height:100dvh;margin:0;padding:0;display:block;border-radius:0;overflow:hidden}
#template-modal.live-modal .review-pages,#template-modal.live-modal .modal-info{display:none!important}
#template-modal.live-modal .modal-image{width:100%;height:100dvh;margin:0;padding:0;border-radius:0;background:transparent}
#template-modal.live-modal .live-template{flex:1 1 100%;width:100%;max-width:none;height:100%;border-radius:0;box-shadow:none}
#template-modal.live-modal .preview-cover-loading{inset:0!important;transform:none!important;width:100%!important;height:100%!important;border-radius:0}
#template-modal.live-modal .review-switch{top:calc(env(safe-area-inset-top,0px) + 12px);width:230px;box-shadow:0 2px 10px #00000015}
#template-modal.live-modal .modal-close{top:calc(env(safe-area-inset-top,0px) + 16px);right:10px;width:28px;height:28px}
#template-modal.live-modal[data-review-view=preview] .review-related{display:none}
#template-modal.live-modal[data-review-view=related] .modal-image{display:none}
#template-modal.live-modal[data-review-view=related] .review-related{display:block;box-sizing:border-box;height:100dvh;overflow:auto;padding:78px 14px 24px;margin:0;max-width:none}
#template-modal.live-modal .review-related header{display:none}
#template-modal.live-modal .review-related-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}

@media(max-width:767px){#template-modal.live-modal .modal-close{display:none!important}}

#template-modal.live-modal #template-sharing{grid-template-columns:112px minmax(0,1fr) 32px!important;gap:12px!important;padding:12px!important}#template-modal.live-modal #template-sharing .qr-link{width:112px!important;height:112px!important;position:relative}#template-modal.live-modal #template-sharing .qr-center-logo{width:22px!important;height:22px!important;position:absolute;left:45px!important;top:45px!important;border:3px solid white;background:white;border-radius:5px}#template-modal.live-modal #template-sharing svg.qr-phone-art{width:32px!important;height:64px!important;display:block!important}