/* Photo Frame - public camera UI */
.wspf-public{--wspf-accent:#625bc7;--wspf-bg:#05070b;--wspf-panel:rgba(10,13,19,.64);--wspf-line:rgba(255,255,255,.16);--wspf-muted:#aab3c2;--wspf-safe-bottom:calc(max(16px,env(safe-area-inset-bottom)) + 64px);font-family:Poppins,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.wspf-public *{box-sizing:border-box}
.wspf-launcher{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:var(--wspf-safe-bottom);z-index:2147480100;width:52px;height:52px;min-width:52px;min-height:52px;border:0;border-radius:999px;background:var(--wspf-accent);color:#fff;box-shadow:0 10px 28px rgba(25,30,45,.22);display:grid;place-items:center;padding:0;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,opacity .16s ease}
.wspf-launcher:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(25,30,45,.28)}
.wspf-launcher:focus-visible{outline:3px solid rgba(98,91,199,.3);outline-offset:3px}
.wspf-launcher svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wspf-modal[hidden],.wspf-camera-view[hidden],.wspf-result[hidden],.wspf-source-image[hidden],.wspf-stage video[data-wspf-video][hidden]{display:none!important}
.wspf-modal{position:fixed;inset:0;z-index:2147483000;background:#000;color:#fff;overscroll-behavior:contain;touch-action:manipulation}
body.wspf-camera-open{overflow:hidden!important;overscroll-behavior:none}
.wspf-shell{width:100vw;width:100dvw;height:100vh;height:100dvh;min-height:100vh;background:#000;overflow:hidden;padding:max(0px,env(safe-area-inset-top)) max(0px,env(safe-area-inset-right)) max(0px,env(safe-area-inset-bottom)) max(0px,env(safe-area-inset-left))}
.wspf-main,.wspf-camera-view{width:100%;height:100%;min-height:0;overflow:hidden}
.wspf-camera-view{position:relative;display:grid;place-items:center;background:#000}
.wspf-stage{position:relative;width:min(100vw,calc(100dvh * .5625));width:min(100dvw,calc(100dvh * .5625));height:auto;max-height:100dvh;aspect-ratio:9/16;overflow:hidden;background:#05070a;isolation:isolate;box-shadow:0 0 0 1px rgba(255,255,255,.05)}
.wspf-stage:after{content:"";position:absolute;z-index:2;left:0;right:0;bottom:0;height:43%;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.16) 25%,rgba(0,0,0,.66) 100%)}
.wspf-stage video,.wspf-stage>[data-wspf-source-image]{position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:cover;background:#05070a}
.wspf-stage video.is-mirrored{transform:scaleX(-1)}
.wspf-frame-overlay{position:absolute;z-index:3;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}
.wspf-text-layer{position:absolute;inset:0;z-index:4;pointer-events:none}
.wspf-text-layer span{position:absolute;transform:translate(-50%,-50%);width:max-content;max-width:88%;text-align:center;color:#fff;line-height:1.13;white-space:pre-wrap;overflow-wrap:normal;word-break:normal;text-shadow:0 1px 3.2px rgba(0,0,0,.72);font-weight:500}

/* Minimal top controls, intentionally camera-first rather than dashboard-style. */
.wspf-camera-topbar{position:absolute;z-index:31;top:max(10px,env(safe-area-inset-top));left:10px;right:10px;height:48px;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;pointer-events:none}
.wspf-camera-icon{grid-column:1;width:44px;height:44px;border:0;border-radius:50%;background:rgba(10,12,17,.42);color:#fff;display:grid;place-items:center;padding:0;cursor:pointer;pointer-events:auto;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 1px 0 rgba(255,255,255,.08) inset}
.wspf-camera-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wspf-camera-brand{grid-column:2;justify-self:center;padding:6px 10px;border-radius:999px;background:rgba(10,12,17,.28);color:rgba(255,255,255,.88);font-size:11px;line-height:1;font-weight:600;letter-spacing:.01em;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* Instagram-style side tools. */
.wspf-toolrail{position:absolute;z-index:11;right:10px;top:27%;display:flex;flex-direction:column;align-items:center;gap:8px}
.wspf-toolrail button{width:52px;min-height:52px;border:0;border-radius:16px;background:rgba(9,12,17,.45);color:#fff;padding:7px 4px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 1px 0 rgba(255,255,255,.08) inset;transition:background .15s ease,transform .15s ease}
.wspf-toolrail button:active{transform:scale(.95)}
.wspf-toolrail button.is-active{background:rgba(98,91,199,.9)}
.wspf-toolrail svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wspf-toolrail span{font-size:8.5px;line-height:1;font-weight:600}

/* Permission/error overlay. */
.wspf-camera-state{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:28px;background:linear-gradient(180deg,rgba(5,7,11,.62),rgba(5,7,11,.92));color:#fff}
.wspf-camera-state[hidden]{display:none!important}
.wspf-camera-state strong{font-size:16px;line-height:1.25;font-weight:700;max-width:300px}
.wspf-camera-state>span{font-size:11.5px;line-height:1.5;color:#d1d7e0;max-width:300px}
.wspf-camera-state-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:5px}
.wspf-camera-state button{min-height:44px;border-radius:999px;padding:0 16px;font:600 11.5px/1 Poppins,system-ui,sans-serif;cursor:pointer}
.wspf-camera-state button.is-primary{border:0;background:var(--wspf-accent);color:#fff}
.wspf-camera-state button.is-secondary{border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff}
.wspf-spinner{width:30px;height:30px;border-radius:50%;border:3px solid rgba(255,255,255,.2);border-top-color:#fff;animation:wspf-spin .7s linear infinite}@keyframes wspf-spin{to{transform:rotate(360deg)}}
.wspf-stage.is-camera-state .wspf-toolrail,.wspf-stage.is-camera-state .wspf-effects-dock,.wspf-stage.is-camera-state .wspf-capturebar,.wspf-stage.is-camera-state .wspf-privacy{opacity:.08;pointer-events:none}

/* Bottom effect carousel, close to social-camera interaction patterns. */
.wspf-effects-dock{position:absolute;z-index:10;left:0;right:0;bottom:96px;pointer-events:auto}
.wspf-effect-name{height:24px;display:flex;align-items:center;justify-content:center;margin-bottom:2px;color:#fff;font-size:10.5px;line-height:1;font-weight:600;text-shadow:0 1px 4px rgba(0,0,0,.8)}
.wspf-tabpane{display:none;min-width:0}
.wspf-tabpane.is-active{display:block}
.wspf-choice-row{display:flex;align-items:center;gap:10px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;scrollbar-width:none;padding:4px calc(50% - 31px) 5px;-webkit-overflow-scrolling:touch}
.wspf-choice-row::-webkit-scrollbar{display:none}
.wspf-choice{position:relative;flex:0 0 56px;width:56px;min-width:56px;height:62px;border:0;background:transparent;color:#fff;padding:0;display:grid;place-items:center;scroll-snap-align:center;cursor:pointer;transition:transform .14s ease}
.wspf-choice:active{transform:scale(.95)}
.wspf-choice-preview{width:50px;height:50px;border-radius:50%;overflow:hidden;border:2px solid rgba(255,255,255,.72);background:#20242c;display:grid;place-items:center;box-shadow:0 2px 10px rgba(0,0,0,.28);transition:width .14s ease,height .14s ease,border-color .14s ease,box-shadow .14s ease}
.wspf-choice.is-active .wspf-choice-preview{width:58px;height:58px;border:3px solid #fff;box-shadow:0 0 0 2px rgba(98,91,199,.85),0 3px 14px rgba(0,0,0,.36)}
.wspf-choice-label{display:none}
.wspf-swatch{display:block;width:100%;height:100%;background:radial-gradient(circle at 64% 28%,#f7cfb4 0 16%,transparent 17%),linear-gradient(135deg,#799b78 0 35%,#dbb595 36% 67%,#6a7895 68% 100%)}
.wspf-frame-choice{flex-basis:48px;width:48px;min-width:48px}
.wspf-frame-choice .wspf-choice-preview{width:36px;height:64px;border-radius:10px;background:#0b0d12}
.wspf-frame-choice.is-active .wspf-choice-preview{width:40px;height:70px;border-width:2px;box-shadow:0 0 0 2px rgba(98,91,199,.92),0 3px 14px rgba(0,0,0,.36)}
.wspf-frame-choice img{width:100%;height:100%;object-fit:contain;background:#0a0c10}
.wspf-range{width:min(72%,300px);height:26px;margin:0 auto 2px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:7px;padding:0 9px;border-radius:999px;background:rgba(8,10,15,.42);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff}
.wspf-range span,.wspf-range output{font-size:8.5px;line-height:1;font-weight:600}
.wspf-range output{min-width:20px;text-align:right}
.wspf-range input{width:100%;height:22px;margin:0;accent-color:#fff}

/* Shutter row */
.wspf-capturebar{position:absolute;z-index:11;left:13px;right:13px;bottom:18px;height:72px;display:grid;grid-template-columns:1fr 84px 1fr;align-items:center;gap:12px;pointer-events:auto}
.wspf-capture{width:74px;height:74px;border-radius:50%;border:3px solid #fff;background:rgba(255,255,255,.12);padding:5px;display:grid;place-items:center;justify-self:center;cursor:pointer;box-shadow:0 2px 14px rgba(0,0,0,.3)}
.wspf-capture span{display:block;width:100%;height:100%;border-radius:50%;background:#fff;transition:transform .1s ease}
.wspf-capture:active span{transform:scale(.9)}
.wspf-capture:disabled{opacity:.38;cursor:not-allowed}
.wspf-capture-side{justify-self:center;width:48px;height:48px;border:1px solid rgba(255,255,255,.16);border-radius:50%;background:rgba(8,10,15,.46);color:#fff;display:grid;place-items:center;padding:0;cursor:pointer;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.wspf-capture-side svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wspf-capture-side:disabled{opacity:.3;cursor:not-allowed}
.wspf-privacy{position:absolute;z-index:10;left:50%;bottom:4px;transform:translateX(-50%);width:80%;margin:0;color:rgba(255,255,255,.58);font-size:7px;line-height:1.2;text-align:center;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Result screen is intentionally unchanged in behavior, just visually consistent. */
.wspf-result{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:10px;padding:max(14px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));overflow:hidden;background:#0b0e14;color:#fff}
.wspf-result-copy{display:flex;flex-direction:column;gap:2px;text-align:center}.wspf-result-copy strong{font-size:15px;font-weight:650}.wspf-result-copy span{font-size:11px;color:var(--wspf-muted)}
.wspf-result-photo{min-height:0;display:grid;place-items:center}.wspf-result-photo img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;aspect-ratio:9/16;object-fit:contain;border-radius:16px;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 15px 40px rgba(0,0,0,.3)}
.wspf-result-actions{width:min(100%,560px);justify-self:center;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.wspf-result-actions button{min-height:58px;border:1px solid var(--wspf-line);border-radius:12px;background:#161c26;color:#e7ebf1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font:550 10px/1.2 Poppins,system-ui,sans-serif;cursor:pointer;padding:7px}.wspf-result-actions button.is-primary{background:var(--wspf-accent);border-color:var(--wspf-accent);color:#fff}.wspf-result-actions svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wspf-archive-status{display:block;min-height:15px;margin-top:3px;font-size:9.5px;line-height:1.35;color:#8994a3}.wspf-archive-status.is-saving{color:#c6b8ff}.wspf-archive-status.is-saved{color:#79d7a1}.wspf-archive-status.is-failed{color:#ff9b95}.wspf-archive-status.is-unavailable{color:#f0c27b}.wspf-archive-status.is-demo{color:#adb7c6}
.wspf-toast{position:absolute;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translate(-50%,12px);z-index:60;background:rgba(8,11,16,.94);color:#fff;border:1px solid rgba(255,255,255,.12);box-shadow:0 10px 30px rgba(0,0,0,.28);border-radius:10px;padding:9px 12px;font-size:10.5px;line-height:1.4;max-width:min(88vw,360px);opacity:0;pointer-events:none;transition:.18s ease;text-align:center}.wspf-toast.is-show{opacity:1;transform:translate(-50%,0)}
.wspf-share-sheet{position:fixed;inset:0;z-index:70;display:grid;align-items:end;justify-items:center;padding:0 max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}.wspf-share-backdrop{position:absolute;inset:0;width:100%;height:100%;margin:0;border:0;background:rgba(5,8,13,.68);cursor:pointer}.wspf-share-panel{position:relative;z-index:1;width:min(100%,520px);padding:15px;border:1px solid var(--wspf-line);border-radius:16px;background:#171d27;box-shadow:0 24px 70px rgba(0,0,0,.45);display:grid;gap:6px}.wspf-share-panel>strong{font-size:14px;font-weight:650}.wspf-share-panel>span{font-size:10.5px;line-height:1.45;color:var(--wspf-muted)}.wspf-share-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:6px}.wspf-share-list button{min-height:46px;padding:7px 5px;border:1px solid var(--wspf-line);border-radius:10px;background:#202733;color:#fff;font:600 9.5px/1.2 Poppins,system-ui,sans-serif;cursor:pointer;overflow:hidden;text-overflow:ellipsis}

/* Consistent SVG geometry. */
.wspf-svg-icon{display:block;flex:0 0 auto;overflow:visible;transform:none;transform-origin:center;shape-rendering:geometricPrecision}.wspf-svg-icon *{vector-effect:non-scaling-stroke}.wspf-launcher .wspf-svg-icon{width:24px;height:24px}.wspf-result-actions .wspf-svg-icon{width:21px;height:21px}.wspf-camera-icon svg,.wspf-toolrail svg,.wspf-capture-side svg,.wspf-result-actions svg,.wspf-launcher svg{margin:0;vertical-align:middle;transform:none!important}

@media(max-width:480px){
 .wspf-public{--wspf-safe-bottom:calc(max(12px,env(safe-area-inset-bottom)) + 62px)}.wspf-launcher{right:max(12px,env(safe-area-inset-right));width:50px;height:50px;min-width:50px;min-height:50px}.wspf-launcher .wspf-svg-icon{width:23px;height:23px}
 .wspf-toolrail{right:8px}.wspf-toolrail button{width:48px;min-height:48px;border-radius:15px}.wspf-toolrail svg{width:20px;height:20px}.wspf-toolrail span{font-size:8px}
 .wspf-effects-dock{bottom:93px}.wspf-capturebar{left:9px;right:9px;bottom:16px;grid-template-columns:1fr 78px 1fr}.wspf-capture{width:70px;height:70px}.wspf-capture-side{width:46px;height:46px}.wspf-capture-side svg{width:22px;height:22px}
 .wspf-result-actions{gap:6px}.wspf-result-actions button{font-size:9.8px}.wspf-share-panel{padding:13px}.wspf-share-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:360px){
 .wspf-toolrail{top:25%;gap:6px}.wspf-toolrail button{width:44px;min-height:44px;border-radius:14px}.wspf-toolrail span{font-size:7.5px}.wspf-effects-dock{bottom:82px}.wspf-choice-row{gap:7px}.wspf-choice{flex-basis:50px;width:50px;min-width:50px}.wspf-choice-preview{width:44px;height:44px}.wspf-choice.is-active .wspf-choice-preview{width:51px;height:51px}.wspf-frame-choice .wspf-choice-preview{width:31px;height:55px}.wspf-frame-choice.is-active .wspf-choice-preview{width:35px;height:61px}.wspf-capturebar{height:64px;bottom:12px;grid-template-columns:1fr 68px 1fr}.wspf-capture{width:62px;height:62px}.wspf-capture-side{width:42px;height:42px}.wspf-effect-name{font-size:9.5px}.wspf-range{width:76%}.wspf-result-actions button{min-height:54px;padding:6px 4px}.wspf-share-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-height:700px) and (orientation:portrait){
 .wspf-camera-topbar{top:7px}.wspf-toolrail{top:23%;gap:5px}.wspf-toolrail button{width:43px;min-height:43px}.wspf-toolrail span{font-size:7.3px}.wspf-effects-dock{bottom:77px}.wspf-effect-name{height:18px;font-size:9px}.wspf-choice-row{padding-top:1px;padding-bottom:1px}.wspf-choice-preview{width:42px;height:42px}.wspf-choice.is-active .wspf-choice-preview{width:49px;height:49px}.wspf-frame-choice .wspf-choice-preview{width:29px;height:51px}.wspf-frame-choice.is-active .wspf-choice-preview{width:33px;height:57px}.wspf-range{height:23px}.wspf-capturebar{bottom:8px;height:62px;grid-template-columns:1fr 64px 1fr}.wspf-capture{width:58px;height:58px}.wspf-capture-side{width:40px;height:40px}.wspf-privacy{display:none}
}
@media(orientation:landscape) and (max-height:600px){
 .wspf-stage{height:100%;width:auto;max-width:none;aspect-ratio:9/16}.wspf-camera-topbar{top:5px;left:5px;right:5px}.wspf-camera-icon{width:36px;height:36px}.wspf-camera-brand{display:none}.wspf-toolrail{right:5px;top:18%;gap:4px}.wspf-toolrail button{width:38px;min-height:38px;border-radius:12px;padding:4px}.wspf-toolrail svg{width:17px;height:17px}.wspf-toolrail span{font-size:6.5px}.wspf-effects-dock{bottom:62px}.wspf-effect-name{height:16px;font-size:8px}.wspf-choice-row{gap:5px;padding:1px calc(50% - 22px)}.wspf-choice{flex-basis:42px;width:42px;min-width:42px;height:47px}.wspf-choice-preview{width:36px;height:36px}.wspf-choice.is-active .wspf-choice-preview{width:42px;height:42px}.wspf-frame-choice .wspf-choice-preview{width:23px;height:41px;border-radius:7px}.wspf-frame-choice.is-active .wspf-choice-preview{width:27px;height:47px}.wspf-range{width:76%;height:20px}.wspf-range span,.wspf-range output{font-size:7px}.wspf-capturebar{bottom:4px;height:55px;grid-template-columns:1fr 54px 1fr;gap:5px}.wspf-capture{width:50px;height:50px;border-width:2px;padding:4px}.wspf-capture-side{width:34px;height:34px}.wspf-capture-side svg{width:18px;height:18px}.wspf-privacy{display:none}.wspf-result{grid-template-columns:minmax(0,1fr) minmax(220px,36vw);grid-template-rows:auto minmax(0,1fr);gap:8px 12px}.wspf-result-copy{grid-column:2;grid-row:1;align-self:end}.wspf-result-photo{grid-column:1;grid-row:1/3}.wspf-result-actions{grid-column:2;grid-row:2;width:100%;align-self:center}.wspf-result-actions button{min-height:52px}
}
@media(prefers-reduced-motion:reduce){.wspf-launcher,.wspf-capture span,.wspf-choice,.wspf-choice-preview,.wspf-toast{transition:none}.wspf-spinner{animation-duration:1.4s}}

/* v1.3.0 - camera-first full viewport runtime, Buku Tamu-style launcher, live effect thumbnails, countdown. */
html body .wspf-public button.wspf-launcher,
html body .wspf-public button.wspf-launcher:hover,
html body .wspf-public button.wspf-launcher:focus,
html body .wspf-public button.wspf-launcher:focus-visible,
html body .wspf-public button.wspf-launcher:active{
 display:grid!important;place-items:center!important;position:fixed!important;
 right:max(16px,env(safe-area-inset-right))!important;
 width:52px!important;height:52px!important;min-width:52px!important;min-height:52px!important;max-width:52px!important;max-height:52px!important;
 margin:0!important;padding:0!important;border:1px solid #d0d5dd!important;border-radius:50%!important;
 background:#fff!important;background-color:#fff!important;background-image:none!important;color:#111827!important;
 box-shadow:0 8px 24px rgba(15,23,42,.22)!important;appearance:none!important;-webkit-appearance:none!important;
 filter:none!important;transform:none!important;translate:none!important;rotate:0deg!important;scale:1!important;zoom:1!important;box-sizing:border-box!important;line-height:1!important;overflow:hidden!important;cursor:pointer!important;
}
html body .wspf-public button.wspf-launcher:hover,html body .wspf-public button.wspf-launcher:focus-visible{border-color:#98a2b3!important;box-shadow:0 10px 28px rgba(15,23,42,.28)!important}
html body .wspf-public button.wspf-launcher:focus-visible{outline:2px solid #111827!important;outline-offset:3px!important}
.wspf-launcher[hidden]{display:none!important}
.wspf-launcher .wspf-svg-icon{width:27px!important;height:27px!important;stroke-width:1.75!important;transform:none!important;translate:none!important;rotate:0deg!important;scale:1!important;zoom:1!important}

/* v1.3.1 - responsive social-camera layout with smart 9:16 composition. */
.wspf-camera-view{--wspf-control-reserve:clamp(122px,18dvh,160px);--wspf-shutter:clamp(62px,8.6dvh,74px);--wspf-capture-bottom:max(clamp(42px,6.2dvh,66px),calc(env(safe-area-inset-bottom) + 30px));display:block!important;position:relative!important;width:100%!important;height:100%!important;overflow:hidden!important;background:#000!important}
.wspf-stage{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;aspect-ratio:auto!important;overflow:hidden!important;background:#05070a!important;box-shadow:none!important}
.wspf-stage video,.wspf-stage>[data-wspf-source-image]{inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center center!important}
/* Camera may fill the viewport, but the decorative frame itself keeps an almost-complete 9:16 composition. */
.wspf-frame-overlay{left:50%!important;right:auto!important;top:0!important;bottom:auto!important;width:min(100dvw,calc(100dvh * .5625))!important;height:min(calc(100dvw * 1.7777778),100dvh)!important;max-width:100%!important;max-height:100dvh!important;aspect-ratio:9/16!important;object-fit:fill!important;object-position:center!important;transform:translateX(-50%)!important;transform-origin:top center!important}
.wspf-text-layer{inset:0!important}
.wspf-text-layer span{max-width:86%!important;white-space:pre-wrap!important;overflow-wrap:normal!important;word-break:normal!important;hyphens:none!important}

/* Keep action controls reachable on every phone and out of browser/home-indicator zones. */
.wspf-camera-topbar{top:max(10px,calc(env(safe-area-inset-top) + 4px))!important;left:max(10px,env(safe-area-inset-left))!important;right:max(10px,env(safe-area-inset-right))!important}
.wspf-toolrail{right:max(9px,env(safe-area-inset-right))!important;top:clamp(118px,20dvh,178px)!important;gap:clamp(6px,1dvh,9px)!important}
.wspf-toolrail button{background:rgba(8,10,15,.48)!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:999px!important;width:clamp(42px,11vw,48px)!important;min-height:clamp(42px,11vw,48px)!important;padding:6px 3px!important}
.wspf-toolrail button.is-active{background:rgba(98,91,199,.94)!important;border-color:rgba(255,255,255,.2)!important}
.wspf-toolrail button:disabled{opacity:.42!important;pointer-events:none!important}
.wspf-toolrail svg{width:clamp(18px,5vw,21px)!important;height:clamp(18px,5vw,21px)!important}.wspf-toolrail span{font-size:clamp(7.2px,2vw,8.5px)!important}

.wspf-effects-dock{left:0!important;right:0!important;bottom:calc(var(--wspf-capture-bottom) + var(--wspf-shutter) + clamp(10px,1.6dvh,16px))!important;transition:opacity .16s ease,transform .16s ease!important}
.wspf-effects-dock[hidden]{display:none!important}
.wspf-effects-head{height:30px;display:flex;align-items:center;justify-content:center;gap:7px;margin:0 auto 2px;padding:0 10px;pointer-events:none}
.wspf-effect-name{height:auto!important;margin:0!important;color:#fff;font-size:clamp(9.5px,2.8vw,11px)!important;line-height:1;font-weight:650;text-shadow:0 1px 5px rgba(0,0,0,.92)!important}
.wspf-effects-done{width:28px;height:28px;min-width:28px;border:1px solid rgba(255,255,255,.22);border-radius:50%;background:rgba(8,10,15,.68);color:#fff;display:grid;place-items:center;padding:0;pointer-events:auto;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.wspf-effects-done svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transform:none!important;rotate:0deg!important}
.wspf-choice-row{padding-left:calc(50% - 30px)!important;padding-right:calc(50% - 30px)!important;gap:clamp(7px,2vw,10px)!important;max-height:76px!important}
.wspf-choice-preview{background:#1b2028!important}.wspf-effect-thumb{display:block;width:100%;height:100%;object-fit:cover;transform:none;transform-origin:center}
.wspf-choice.is-active .wspf-choice-preview{box-shadow:0 0 0 2px rgba(98,91,199,.95),0 3px 14px rgba(0,0,0,.4)!important}
.wspf-range{width:min(72%,300px)!important;min-width:190px;max-width:calc(100vw - 92px);background:rgba(8,10,15,.62)!important;border:1px solid rgba(255,255,255,.1)!important}

.wspf-capturebar{bottom:var(--wspf-capture-bottom)!important;left:max(12px,env(safe-area-inset-left))!important;right:max(12px,env(safe-area-inset-right))!important;height:var(--wspf-shutter)!important;grid-template-columns:1fr var(--wspf-shutter) 1fr!important;gap:clamp(8px,2.4vw,14px)!important}
.wspf-capture{width:var(--wspf-shutter)!important;height:var(--wspf-shutter)!important;max-width:74px!important;max-height:74px!important}
.wspf-capture-side{width:clamp(42px,11vw,48px)!important;height:clamp(42px,11vw,48px)!important;background:rgba(8,10,15,.52)!important;border-color:rgba(255,255,255,.2)!important}
.wspf-privacy{display:none!important}

/* 3-2-1 shutter countdown. */
.wspf-countdown{position:absolute;z-index:45;left:50%;top:44%;transform:translate(-50%,-50%);display:grid;place-items:center;width:clamp(82px,24vw,112px);height:clamp(82px,24vw,112px);border-radius:50%;background:rgba(4,6,10,.34);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:#fff;font:800 clamp(54px,16vw,92px)/1 Poppins,system-ui,sans-serif;text-shadow:0 4px 22px rgba(0,0,0,.52);pointer-events:none}
.wspf-countdown[hidden]{display:none!important}.wspf-countdown.is-pop{animation:wspf-countdown-pop .62s cubic-bezier(.18,.78,.28,1) both}
@keyframes wspf-countdown-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.68)}28%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}100%{opacity:.92;transform:translate(-50%,-50%) scale(1)}}

/* While Photo Frame is open, remove the Buku Tamu launcher from the camera controls. */
body.wspf-camera-open [data-wds-suite-floating-action]:not([data-wds-suite-floating-action="photo-frame"]){opacity:0!important;visibility:hidden!important;pointer-events:none!important}

@media(max-width:480px){
 html body .wspf-public button.wspf-launcher,html body .wspf-public button.wspf-launcher:hover,html body .wspf-public button.wspf-launcher:focus,html body .wspf-public button.wspf-launcher:focus-visible,html body .wspf-public button.wspf-launcher:active{right:max(12px,env(safe-area-inset-right))!important;width:50px!important;height:50px!important;min-width:50px!important;min-height:50px!important;max-width:50px!important;max-height:50px!important}
 .wspf-launcher .wspf-svg-icon{width:26px!important;height:26px!important}
}
@media(max-width:360px){.wspf-camera-view{--wspf-control-reserve:clamp(112px,20dvh,138px);--wspf-shutter:clamp(58px,10dvh,64px);--wspf-capture-bottom:max(34px,calc(env(safe-area-inset-bottom) + 24px))}.wspf-toolrail{top:clamp(100px,18dvh,138px)!important}.wspf-choice{width:52px!important;min-width:52px!important;flex-basis:52px!important}.wspf-choice-preview{width:46px!important;height:46px!important}.wspf-choice.is-active .wspf-choice-preview{width:53px!important;height:53px!important}.wspf-frame-choice .wspf-choice-preview{width:32px!important;height:57px!important}.wspf-frame-choice.is-active .wspf-choice-preview{width:36px!important;height:64px!important}.wspf-effects-head{height:26px}.wspf-effects-done{width:26px;height:26px;min-width:26px}}
@media(max-height:650px) and (orientation:portrait){.wspf-camera-view{--wspf-control-reserve:116px;--wspf-shutter:58px;--wspf-capture-bottom:max(26px,calc(env(safe-area-inset-bottom) + 20px))}.wspf-toolrail{top:92px!important}.wspf-effects-dock{bottom:calc(var(--wspf-capture-bottom) + var(--wspf-shutter) + 6px)!important}.wspf-range{height:23px!important}.wspf-choice-row{max-height:62px!important}.wspf-choice{height:54px!important}.wspf-choice-preview{width:43px!important;height:43px!important}.wspf-choice.is-active .wspf-choice-preview{width:49px!important;height:49px!important}}
@media(min-width:768px), (orientation:landscape){
 .wspf-camera-view{--wspf-control-reserve:0px;display:grid!important;place-items:center!important;background:#000!important}
 .wspf-stage{position:relative!important;inset:auto!important;height:100%!important;width:min(100%,calc(100dvh * .5625))!important;max-width:none!important;aspect-ratio:9/16!important}
 .wspf-frame-overlay{left:0!important;top:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;aspect-ratio:9/16!important;transform:none!important;object-fit:fill!important}
 .wspf-effects-dock{bottom:calc(var(--wspf-capture-bottom) + var(--wspf-shutter) + 10px)!important}
}
@media(orientation:landscape) and (max-height:600px){.wspf-camera-view{--wspf-shutter:56px;--wspf-capture-bottom:max(8px,calc(env(safe-area-inset-bottom) + 4px))}.wspf-stage{height:100%!important;width:calc(100dvh * .5625)!important}.wspf-toolrail{top:14%!important}.wspf-effects-dock{left:auto!important;right:74px!important;bottom:10px!important;width:min(46vw,360px)!important}.wspf-capturebar{left:12px!important;right:auto!important;width:56px!important;display:block!important}.wspf-capture{position:absolute;left:0;bottom:0}.wspf-capture-side{display:none!important}.wspf-effects-head{justify-content:flex-end}}


/* v1.3.2 - compact, deterministic camera control zone across phones and desktop. */
.wspf-camera-view{
 --wspf-shutter:62px!important;
 --wspf-side-action:42px;
 --wspf-capture-bottom:max(22px,calc(env(safe-area-inset-bottom) + 14px))!important;
}
.wspf-capturebar{
 left:max(12px,env(safe-area-inset-left))!important;
 right:max(12px,env(safe-area-inset-right))!important;
 bottom:var(--wspf-capture-bottom)!important;
 width:auto!important;
 height:var(--wspf-shutter)!important;
 display:grid!important;
 grid-template-columns:minmax(52px,1fr) var(--wspf-shutter) minmax(52px,1fr)!important;
 align-items:center!important;
 gap:10px!important;
 transform:none!important;
}
.wspf-capture{
 position:static!important;
 inset:auto!important;
 justify-self:center!important;
 width:var(--wspf-shutter)!important;
 height:var(--wspf-shutter)!important;
 min-width:var(--wspf-shutter)!important;
 min-height:var(--wspf-shutter)!important;
 max-width:var(--wspf-shutter)!important;
 max-height:var(--wspf-shutter)!important;
 padding:5px!important;
 border-width:3px!important;
 transform:none!important;
 rotate:0deg!important;
}
.wspf-capture-side{
 display:grid!important;
 position:static!important;
 width:var(--wspf-side-action)!important;
 height:var(--wspf-side-action)!important;
 min-width:var(--wspf-side-action)!important;
 min-height:var(--wspf-side-action)!important;
 max-width:var(--wspf-side-action)!important;
 max-height:var(--wspf-side-action)!important;
 transform:none!important;
 rotate:0deg!important;
}
.wspf-capture-side svg{width:20px!important;height:20px!important;transform:none!important;rotate:0deg!important}

/* Keep the picker directly above the shutter, compact like a social-camera carousel. */
.wspf-effects-dock{
 left:0!important;
 right:0!important;
 width:auto!important;
 bottom:calc(var(--wspf-capture-bottom) + var(--wspf-shutter) + 8px)!important;
 transform:none!important;
}
.wspf-effects-head{height:24px!important;min-height:24px!important;margin:0 auto 1px!important;gap:6px!important;padding:0 8px!important}
.wspf-effect-name{font-size:10px!important;line-height:1!important}
.wspf-effects-done{width:25px!important;height:25px!important;min-width:25px!important;min-height:25px!important;max-width:25px!important;max-height:25px!important;transform:none!important;rotate:0deg!important}
.wspf-effects-done svg{width:14px!important;height:14px!important;transform:none!important;rotate:0deg!important}
.wspf-range{
 width:min(64%,260px)!important;
 min-width:168px!important;
 max-width:calc(100vw - 106px)!important;
 height:23px!important;
 margin:0 auto 3px!important;
 padding:0 8px!important;
 gap:6px!important;
}
.wspf-range span,.wspf-range output{font-size:8px!important}
.wspf-range input{height:18px!important}

/* Filter / Beauty options are intentionally small. The selected item grows only slightly. */
.wspf-filter-row,.wspf-beauty-row{
 gap:7px!important;
 max-height:48px!important;
 padding-top:1px!important;
 padding-bottom:1px!important;
 padding-left:calc(50% - 20px)!important;
 padding-right:calc(50% - 20px)!important;
}
.wspf-filter-row .wspf-choice,.wspf-beauty-row .wspf-choice{
 flex:0 0 40px!important;
 width:40px!important;
 min-width:40px!important;
 max-width:40px!important;
 height:44px!important;
 min-height:44px!important;
 padding:0!important;
 gap:0!important;
}
.wspf-filter-row .wspf-choice-preview,.wspf-beauty-row .wspf-choice-preview{
 width:34px!important;
 height:34px!important;
 min-width:34px!important;
 min-height:34px!important;
 max-width:34px!important;
 max-height:34px!important;
 border-width:2px!important;
 transform:none!important;
}
.wspf-filter-row .wspf-choice.is-active .wspf-choice-preview,.wspf-beauty-row .wspf-choice.is-active .wspf-choice-preview{
 width:40px!important;
 height:40px!important;
 min-width:40px!important;
 min-height:40px!important;
 max-width:40px!important;
 max-height:40px!important;
 transform:none!important;
}
/* Frame thumbnails stay portrait but compact. */
.wspf-frame-row{gap:7px!important;max-height:58px!important;padding-left:calc(50% - 17px)!important;padding-right:calc(50% - 17px)!important}
.wspf-frame-row .wspf-choice{flex:0 0 34px!important;width:34px!important;min-width:34px!important;max-width:34px!important;height:56px!important;min-height:56px!important;padding:0!important}
.wspf-frame-row .wspf-choice-preview{width:28px!important;height:50px!important;min-width:28px!important;min-height:50px!important;max-width:28px!important;max-height:50px!important;transform:none!important}
.wspf-frame-row .wspf-choice.is-active .wspf-choice-preview{width:32px!important;height:56px!important;min-width:32px!important;min-height:56px!important;max-width:32px!important;max-height:56px!important;transform:none!important}

/* Tool rail uses bounded sizes instead of vw/dvh so large phones do not inflate controls. */
.wspf-toolrail{gap:7px!important}
.wspf-toolrail button{width:44px!important;min-width:44px!important;max-width:44px!important;min-height:44px!important;height:44px!important;max-height:44px!important;padding:5px 2px!important;transform:none!important;rotate:0deg!important}
.wspf-toolrail svg{width:19px!important;height:19px!important;transform:none!important;rotate:0deg!important}
.wspf-toolrail span{font-size:7.5px!important}

/* Phones: use fixed bounded control sizes, never scale buttons with viewport height. */
@media(max-width:360px){
 .wspf-camera-view{--wspf-shutter:58px!important;--wspf-side-action:40px;--wspf-capture-bottom:max(18px,calc(env(safe-area-inset-bottom) + 12px))!important}
 .wspf-toolrail button{width:42px!important;min-width:42px!important;max-width:42px!important;height:42px!important;min-height:42px!important;max-height:42px!important}
 .wspf-filter-row,.wspf-beauty-row{gap:6px!important;max-height:44px!important;padding-left:calc(50% - 18px)!important;padding-right:calc(50% - 18px)!important}
 .wspf-filter-row .wspf-choice,.wspf-beauty-row .wspf-choice{flex-basis:36px!important;width:36px!important;min-width:36px!important;max-width:36px!important;height:40px!important;min-height:40px!important}
 .wspf-filter-row .wspf-choice-preview,.wspf-beauty-row .wspf-choice-preview{width:31px!important;height:31px!important;min-width:31px!important;min-height:31px!important;max-width:31px!important;max-height:31px!important}
 .wspf-filter-row .wspf-choice.is-active .wspf-choice-preview,.wspf-beauty-row .wspf-choice.is-active .wspf-choice-preview{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;max-width:36px!important;max-height:36px!important}
 .wspf-range{width:min(68%,230px)!important;min-width:156px!important}
}
@media(min-width:361px) and (max-width:414px){
 .wspf-camera-view{--wspf-shutter:60px!important;--wspf-side-action:42px;--wspf-capture-bottom:max(20px,calc(env(safe-area-inset-bottom) + 13px))!important}
}
@media(min-width:415px) and (max-width:767px){
 .wspf-camera-view{--wspf-shutter:62px!important;--wspf-side-action:42px;--wspf-capture-bottom:max(22px,calc(env(safe-area-inset-bottom) + 14px))!important}
}

/* Short portrait viewports: keep the same proportions but tighten vertical gaps only. */
@media(max-height:650px) and (orientation:portrait){
 .wspf-camera-view{--wspf-shutter:58px!important;--wspf-side-action:38px;--wspf-capture-bottom:max(14px,calc(env(safe-area-inset-bottom) + 9px))!important}
 .wspf-effects-dock{bottom:calc(var(--wspf-capture-bottom) + var(--wspf-shutter) + 5px)!important}
 .wspf-effects-head{height:21px!important;min-height:21px!important}
 .wspf-range{height:21px!important;margin-bottom:1px!important}
 .wspf-filter-row,.wspf-beauty-row{max-height:40px!important}
 .wspf-filter-row .wspf-choice,.wspf-beauty-row .wspf-choice{height:38px!important;min-height:38px!important}
 .wspf-filter-row .wspf-choice-preview,.wspf-beauty-row .wspf-choice-preview{width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important;max-width:30px!important;max-height:30px!important}
 .wspf-filter-row .wspf-choice.is-active .wspf-choice-preview,.wspf-beauty-row .wspf-choice.is-active .wspf-choice-preview{width:35px!important;height:35px!important;min-width:35px!important;min-height:35px!important;max-width:35px!important;max-height:35px!important}
}

/* Desktop/tablet/landscape: never move the shutter into the filter row. Keep one centered control stack. */
@media(min-width:768px), (orientation:landscape){
 .wspf-camera-view{--wspf-shutter:60px!important;--wspf-side-action:38px;--wspf-capture-bottom:max(12px,calc(env(safe-area-inset-bottom) + 8px))!important}
 .wspf-capturebar{left:12px!important;right:12px!important;bottom:var(--wspf-capture-bottom)!important;width:auto!important;height:var(--wspf-shutter)!important;display:grid!important;grid-template-columns:minmax(42px,1fr) var(--wspf-shutter) minmax(42px,1fr)!important;gap:8px!important}
 .wspf-capture{position:static!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;justify-self:center!important;width:var(--wspf-shutter)!important;height:var(--wspf-shutter)!important;transform:none!important;rotate:0deg!important}
 .wspf-capture-side{display:grid!important;width:var(--wspf-side-action)!important;height:var(--wspf-side-action)!important}
 .wspf-effects-dock{left:0!important;right:0!important;bottom:calc(var(--wspf-capture-bottom) + var(--wspf-shutter) + 6px)!important;width:auto!important}
 .wspf-effects-head{justify-content:center!important}
 .wspf-filter-row,.wspf-beauty-row{gap:6px!important;max-height:44px!important;padding-left:calc(50% - 18px)!important;padding-right:calc(50% - 18px)!important}
 .wspf-filter-row .wspf-choice,.wspf-beauty-row .wspf-choice{flex-basis:36px!important;width:36px!important;min-width:36px!important;max-width:36px!important;height:40px!important;min-height:40px!important}
 .wspf-filter-row .wspf-choice-preview,.wspf-beauty-row .wspf-choice-preview{width:31px!important;height:31px!important;min-width:31px!important;min-height:31px!important;max-width:31px!important;max-height:31px!important}
 .wspf-filter-row .wspf-choice.is-active .wspf-choice-preview,.wspf-beauty-row .wspf-choice.is-active .wspf-choice-preview{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;max-width:36px!important;max-height:36px!important}
 .wspf-range{width:min(68%,230px)!important;min-width:150px!important;height:21px!important}
}
@media(orientation:landscape) and (max-height:600px){
 .wspf-camera-view{--wspf-shutter:54px!important;--wspf-side-action:34px;--wspf-capture-bottom:max(6px,calc(env(safe-area-inset-bottom) + 4px))!important}
 .wspf-toolrail{top:12%!important;right:6px!important;gap:4px!important}
 .wspf-toolrail button{width:36px!important;min-width:36px!important;max-width:36px!important;height:36px!important;min-height:36px!important;max-height:36px!important;border-radius:999px!important}
 .wspf-toolrail svg{width:16px!important;height:16px!important}.wspf-toolrail span{font-size:6.2px!important}
 .wspf-effects-dock{left:0!important;right:0!important;bottom:calc(var(--wspf-capture-bottom) + var(--wspf-shutter) + 4px)!important;width:auto!important}
 .wspf-effects-head{height:18px!important;min-height:18px!important;justify-content:center!important}
 .wspf-effect-name{font-size:7.5px!important}.wspf-effects-done{width:20px!important;height:20px!important;min-width:20px!important;min-height:20px!important;max-width:20px!important;max-height:20px!important}.wspf-effects-done svg{width:11px!important;height:11px!important}
 .wspf-range{width:min(62%,190px)!important;min-width:130px!important;height:18px!important;margin-bottom:1px!important}.wspf-range span,.wspf-range output{font-size:6.5px!important}.wspf-range input{height:14px!important}
 .wspf-filter-row,.wspf-beauty-row{gap:5px!important;max-height:34px!important;padding-left:calc(50% - 15px)!important;padding-right:calc(50% - 15px)!important}
 .wspf-filter-row .wspf-choice,.wspf-beauty-row .wspf-choice{flex-basis:30px!important;width:30px!important;min-width:30px!important;max-width:30px!important;height:32px!important;min-height:32px!important}
 .wspf-filter-row .wspf-choice-preview,.wspf-beauty-row .wspf-choice-preview{width:26px!important;height:26px!important;min-width:26px!important;min-height:26px!important;max-width:26px!important;max-height:26px!important}
 .wspf-filter-row .wspf-choice.is-active .wspf-choice-preview,.wspf-beauty-row .wspf-choice.is-active .wspf-choice-preview{width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important;max-width:30px!important;max-height:30px!important}
 .wspf-capturebar{display:grid!important;left:8px!important;right:8px!important;width:auto!important;height:var(--wspf-shutter)!important;grid-template-columns:minmax(34px,1fr) var(--wspf-shutter) minmax(34px,1fr)!important;gap:5px!important}
 .wspf-capture{position:static!important;width:var(--wspf-shutter)!important;height:var(--wspf-shutter)!important;border-width:2px!important;padding:4px!important}
 .wspf-capture-side{display:grid!important;width:var(--wspf-side-action)!important;height:var(--wspf-side-action)!important}.wspf-capture-side svg{width:17px!important;height:17px!important}
}

/* v1.3.3 - canonical body-level camera runtime isolation.
 * While Photo Frame is open, external floating actions (Buku Tamu QR, etc.)
 * must not receive pointer events or overlap the camera controls. They return
 * automatically when the camera closes.
 */
body.wspf-camera-open [data-wds-suite-floating-action]:not([data-wds-suite-floating-action="photo-frame"]),
body.wspf-camera-open [data-wds-suite-floating-dock-item]:not(.wspf-launcher){
 opacity:0!important;
 visibility:hidden!important;
 pointer-events:none!important;
}
body.wspf-camera-open>.wspf-public{
 position:relative!important;
 z-index:2147482999!important;
}

/* v1.3.7 - keep the shutter/control zone comfortably above mobile browser chrome. */
@media (orientation:portrait) and (max-width:767px){
 .wspf-camera-view{--wspf-capture-bottom:max(clamp(44px,7dvh,62px),calc(env(safe-area-inset-bottom) + 28px))!important}
}
@media (orientation:portrait) and (max-width:360px){
 .wspf-camera-view{--wspf-capture-bottom:max(clamp(40px,6.4dvh,54px),calc(env(safe-area-inset-bottom) + 24px))!important}
}
@media (orientation:portrait) and (max-height:650px){
 .wspf-camera-view{--wspf-capture-bottom:max(34px,calc(env(safe-area-inset-bottom) + 22px))!important}
}

/* v1.3.8 - result visibility, public video-surface isolation, and safer portrait shutter position. */
/* camera-view is display:block!important in the social-camera layout; hidden must always win after capture. */
.wspf-camera-view[hidden]{display:none!important}

/* Invitation themes can carry global video/image rules that the dashboard does not.
 * Keep the live camera surface deterministic without touching frame/filter/beauty/output behavior. */
.wspf-stage video[data-wspf-video]{
 display:block!important;visibility:visible!important;opacity:1!important;
 position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;
 object-fit:cover!important;object-position:center center!important;background:#05070a!important;
 mix-blend-mode:normal!important;clip-path:none!important;-webkit-clip-path:none!important;mask:none!important;-webkit-mask:none!important;
 margin:0!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;
 backface-visibility:visible!important;-webkit-backface-visibility:visible!important;pointer-events:none!important;
}
.wspf-stage video[data-wspf-video]:not(.is-mirrored){transform:none!important}
.wspf-stage video[data-wspf-video].is-mirrored{transform:scaleX(-1)!important}
.wspf-stage video[data-wspf-video][hidden]{display:none!important}
body.wspf-camera-open>.wspf-public,body.wspf-camera-open>.wspf-public>.wspf-modal{visibility:visible!important;opacity:1!important;mix-blend-mode:normal!important}

/* Raise the shutter into a comfortable thumb zone above mobile browser chrome. */
@media (orientation:portrait) and (max-width:767px){
 .wspf-camera-view{--wspf-capture-bottom:max(clamp(72px,9.5dvh,92px),calc(env(safe-area-inset-bottom) + 54px))!important}
}
@media (orientation:portrait) and (max-width:360px){
 .wspf-camera-view{--wspf-capture-bottom:max(clamp(66px,9dvh,84px),calc(env(safe-area-inset-bottom) + 50px))!important}
}
@media (orientation:portrait) and (max-height:650px){
 .wspf-camera-view{--wspf-capture-bottom:max(50px,calc(env(safe-area-inset-bottom) + 38px))!important}
}

/* v1.3.13 - UI/UX-only responsive containment.
 * Keep camera/rendering behavior untouched. Result preview is intentionally
 * smaller so all result actions stay visible, and the camera control stack is
 * lifted away from browser/home-indicator edges on phones/tablets/landscape.
 */
.wspf-result-photo{
 min-height:0!important;
 overflow:hidden!important;
 padding:1px 0!important;
}
.wspf-result-photo img{
 display:block!important;
 width:auto!important;
 height:auto!important;
 max-width:min(86vw,480px)!important;
 max-height:min(64dvh,calc(100dvh - 190px))!important;
 aspect-ratio:9/16!important;
 object-fit:contain!important;
 object-position:center!important;
 margin:auto!important;
}
.wspf-result-actions{
 width:min(100%,520px)!important;
 max-width:520px!important;
 justify-self:center!important;
 align-self:end!important;
 min-width:0!important;
}

/* Phones in portrait: reserve a predictable lower action zone and keep the
 * 9:16 result comfortably smaller than the viewport. */
@media (orientation:portrait) and (max-width:767px){
 .wspf-result{
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:auto minmax(0,1fr) auto!important;
  gap:clamp(6px,1dvh,9px)!important;
  padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(12px,calc(env(safe-area-inset-bottom) + 4px)) max(10px,env(safe-area-inset-left))!important;
  overflow:hidden!important;
 }
 .wspf-result-copy{gap:1px!important;min-height:0!important}
 .wspf-result-copy strong{font-size:14px!important;line-height:1.2!important}
 .wspf-result-copy span{font-size:10.5px!important;line-height:1.3!important}
 .wspf-archive-status{min-height:13px!important;margin-top:2px!important;font-size:9px!important;line-height:1.25!important}
 .wspf-result-photo{padding:0!important}
 .wspf-result-photo img{
  max-width:min(82vw,360px)!important;
  max-height:min(64dvh,calc(100dvh - 165px))!important;
  border-radius:14px!important;
 }
 .wspf-result-actions{width:min(94vw,430px)!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important}
 .wspf-result-actions button{min-width:0!important;min-height:50px!important;padding:5px 3px!important;font-size:9.5px!important}
 .wspf-result-actions svg,.wspf-result-actions .wspf-svg-icon{width:19px!important;height:19px!important}

 /* Lift the whole capture/effect stack. It stays inside the same camera stage;
  * only its UI position changes. */
 .wspf-camera-view{
  --wspf-capture-bottom:max(clamp(84px,11dvh,112px),calc(100dvh - min(calc(100dvw * 1.7777778),100dvh) + 28px),calc(env(safe-area-inset-bottom) + 64px))!important;
 }
 .wspf-capturebar{bottom:var(--wspf-capture-bottom)!important}
 .wspf-effects-dock{bottom:calc(var(--wspf-capture-bottom) + var(--wspf-shutter) + 8px)!important}
}

/* Very short phones: compact vertically but never drop controls back onto the
 * browser chrome. */
@media (orientation:portrait) and (max-width:767px) and (max-height:650px){
 .wspf-result{gap:5px!important;padding-top:max(7px,env(safe-area-inset-top))!important;padding-bottom:max(8px,calc(env(safe-area-inset-bottom) + 2px))!important}
 .wspf-result-copy strong{font-size:13px!important}
 .wspf-result-copy span{font-size:9.5px!important}
 .wspf-archive-status{min-height:11px!important;font-size:8px!important}
 .wspf-result-photo img{max-width:min(76vw,310px)!important;max-height:min(64dvh,calc(100dvh - 148px))!important;border-radius:11px!important}
 .wspf-result-actions{gap:5px!important}
 .wspf-result-actions button{min-height:44px!important;font-size:8.8px!important;padding:4px 2px!important}
 .wspf-result-actions svg,.wspf-result-actions .wspf-svg-icon{width:17px!important;height:17px!important}
 .wspf-camera-view{
  --wspf-shutter:56px!important;
  --wspf-side-action:38px;
  --wspf-capture-bottom:max(clamp(68px,11dvh,78px),calc(100dvh - min(calc(100dvw * 1.7777778),100dvh) + 22px),calc(env(safe-area-inset-bottom) + 50px))!important;
 }
 .wspf-effects-dock{bottom:calc(var(--wspf-capture-bottom) + var(--wspf-shutter) + 5px)!important}
}

/* Portrait tablets: the existing tablet stage remains 9:16; only keep the
 * control stack comfortably above the lower edge. */
@media (orientation:portrait) and (min-width:768px){
 .wspf-result-photo img{max-width:min(62vw,480px)!important;max-height:min(68dvh,calc(100dvh - 190px))!important}
 .wspf-camera-view{
  --wspf-shutter:62px!important;
  --wspf-side-action:40px;
  --wspf-capture-bottom:max(clamp(50px,6dvh,78px),calc(env(safe-area-inset-bottom) + 40px))!important;
 }
 .wspf-capturebar{bottom:var(--wspf-capture-bottom)!important}
 .wspf-effects-dock{bottom:calc(var(--wspf-capture-bottom) + var(--wspf-shutter) + 8px)!important}
}

/* Landscape phones/tablets/desktops: preserve the existing compact layout,
 * but maintain a real lower safety margin instead of sitting on the edge. */
@media (orientation:landscape){
 .wspf-camera-view{--wspf-capture-bottom:max(18px,calc(env(safe-area-inset-bottom) + 12px))!important}
 .wspf-capturebar{bottom:var(--wspf-capture-bottom)!important}
 .wspf-effects-dock{bottom:calc(var(--wspf-capture-bottom) + var(--wspf-shutter) + 6px)!important}
 .wspf-result-photo img{width:auto!important;height:min(64dvh,calc(100dvh - 175px))!important;max-width:70vw!important;max-height:min(64dvh,calc(100dvh - 175px))!important}
}
@media (orientation:landscape) and (max-height:420px){
 .wspf-camera-view{--wspf-shutter:50px!important;--wspf-side-action:32px;--wspf-capture-bottom:max(12px,calc(env(safe-area-inset-bottom) + 8px))!important}
 .wspf-effects-dock{bottom:calc(var(--wspf-capture-bottom) + var(--wspf-shutter) + 4px)!important}
 .wspf-capture-side{width:var(--wspf-side-action)!important;height:var(--wspf-side-action)!important;min-width:var(--wspf-side-action)!important;min-height:var(--wspf-side-action)!important;max-width:var(--wspf-side-action)!important;max-height:var(--wspf-side-action)!important}
 .wspf-result-photo img{height:min(90dvh,calc(100dvh - 24px))!important;max-height:min(90dvh,calc(100dvh - 24px))!important;max-width:100%!important}
}


/* v1.3.14 - camera icon polish only.
 * Keep hit areas/layout/behavior unchanged; normalize every icon shown inside
 * the live camera so strokes stay light and icon size follows its control.
 */
.wspf-camera-view{--wspf-camera-icon-stroke:1.35}
.wspf-camera-view .wspf-svg-icon{
 fill:none!important;
 stroke:currentColor!important;
 stroke-width:var(--wspf-camera-icon-stroke)!important;
 stroke-linecap:round!important;
 stroke-linejoin:round!important;
 transform:none!important;
 rotate:0deg!important;
}
.wspf-camera-view .wspf-svg-icon,.wspf-camera-view .wspf-svg-icon *{vector-effect:non-scaling-stroke!important}
.wspf-camera-icon .wspf-svg-icon{width:clamp(19px,48%,21px)!important;height:clamp(19px,48%,21px)!important}
.wspf-toolrail button .wspf-svg-icon{width:clamp(18px,50%,21px)!important;height:clamp(18px,50%,21px)!important}
.wspf-capture-side .wspf-svg-icon{width:clamp(18px,48%,22px)!important;height:clamp(18px,48%,22px)!important}
.wspf-effects-done .wspf-svg-icon{width:clamp(11px,56%,15px)!important;height:clamp(11px,56%,15px)!important;stroke-width:1.25!important}
.wspf-camera-view .wspf-svg-icon path,
.wspf-camera-view .wspf-svg-icon rect,
.wspf-camera-view .wspf-svg-icon circle,
.wspf-camera-view .wspf-svg-icon line,
.wspf-camera-view .wspf-svg-icon polyline,
.wspf-camera-view .wspf-svg-icon polygon{
 fill:none!important;
 stroke:currentColor!important;
 stroke-width:var(--wspf-camera-icon-stroke)!important;
 stroke-linecap:round!important;
 stroke-linejoin:round!important;
 vector-effect:non-scaling-stroke!important;
}
.wspf-effects-done .wspf-svg-icon path{stroke-width:1.25!important}

/* v1.3.16 - result screen mobile viewport containment only.
 * Keep camera/capture/rendering behavior untouched. The result screen uses the
 * browser-safe viewport, while the preview consumes only the space left between
 * the copy and action row so the buttons can never be pushed below the screen.
 */
@media (orientation:portrait) and (max-width:767px){
 .wspf-result{
  display:flex!important;
  flex-direction:column!important;
  width:100%!important;
  height:100svh!important;
  max-height:100svh!important;
  min-height:0!important;
  gap:clamp(7px,1.05svh,10px)!important;
  padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(14px,calc(env(safe-area-inset-bottom) + 6px)) max(10px,env(safe-area-inset-left))!important;
  overflow:hidden!important;
 }
 .wspf-result-copy{
  flex:0 0 auto!important;
  margin:0!important;
 }
 .wspf-result-photo{
  flex:1 1 auto!important;
  width:100%!important;
  min-height:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  padding:0!important;
 }
 .wspf-result-photo img{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:min(82vw,360px)!important;
  max-height:100%!important;
  aspect-ratio:9/16!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:0!important;
 }
 .wspf-result-actions{
  flex:0 0 auto!important;
  width:min(94vw,430px)!important;
  max-width:430px!important;
  align-self:center!important;
  justify-self:auto!important;
  margin:0!important;
 }
}

@media (orientation:portrait) and (max-width:767px) and (max-height:650px){
 .wspf-result{
  gap:5px!important;
  padding-top:max(7px,env(safe-area-inset-top))!important;
  padding-bottom:max(9px,calc(env(safe-area-inset-bottom) + 3px))!important;
 }
 .wspf-result-photo img{max-width:min(76vw,310px)!important;max-height:100%!important}
}