:root{
  --black:#000;--white:#fff;--pink:#ffb6c1;--pink-2:#ffc0cb;--yellow:#fffacd;--yellow-2:#fff8dc;--blue:#87cefa;--blue-line:#4682b4;--orange:#f97316;--indigo:#4f46e5;--teal:#14b8a6;--purple:#a855f7;--red:#ef4444;--green:#22c55e;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--header-h:94px
}
*{box-sizing:border-box}html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;font-family:'Nunito',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#000;color:#000;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button,input,select,textarea{font:inherit}button{border:0}img,video,canvas,svg{max-width:100%;display:block}.font-display{font-family:'Fredoka One',cursive}.app-container{width:100vw;height:100dvh;min-height:100svh;background:#fff;position:relative;overflow:hidden}.screen{position:absolute;inset:0;width:100%;height:100dvh;min-height:100svh;display:none;overflow:hidden}.screen.active{display:flex}.hidden-canvas{display:none!important}.retro-border{border:4px solid #000}.retro-border-sm{border:3px solid #000}.retro-shadow{box-shadow:6px 6px 0 #000}.retro-shadow-sm{box-shadow:4px 4px 0 #000}.retro-shadow-lg{box-shadow:12px 12px 0 #000}.retro-button{transition:transform .1s ease,box-shadow .1s ease,filter .15s ease,background .15s ease;cursor:pointer;user-select:none;-webkit-user-select:none}.retro-button:active{transform:translate(3px,3px);box-shadow:3px 3px 0 #000!important}.retro-button:disabled{opacity:.55;cursor:not-allowed;filter:grayscale(.4)}.text-stroke{color:#fff;text-shadow:-3px -3px 0 #000,3px -3px 0 #000,-3px 3px 0 #000,3px 3px 0 #000}.text-stroke-soft{color:#fff;text-shadow:-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000}.bg-checker-pink{background-color:#ffb6c1;background-image:linear-gradient(45deg,#ffc0cb 25%,transparent 25%,transparent 75%,#ffc0cb 75%,#ffc0cb),linear-gradient(45deg,#ffc0cb 25%,transparent 25%,transparent 75%,#ffc0cb 75%,#ffc0cb);background-size:80px 80px;background-position:0 0,40px 40px}.bg-checker-yellow{background-color:#fffacd;background-image:linear-gradient(45deg,#fff8dc 25%,transparent 25%,transparent 75%,#fff8dc 75%,#fff8dc),linear-gradient(45deg,#fff8dc 25%,transparent 25%,transparent 75%,#fff8dc 75%,#fff8dc);background-size:60px 60px;background-position:0 0,30px 30px}.bg-grid-blue{background-color:#87cefa;background-image:linear-gradient(#4682b4 2px,transparent 2px),linear-gradient(90deg,#4682b4 2px,transparent 2px);background-size:40px 40px}.screen-bg{position:fixed;inset:0;z-index:0;pointer-events:none;background:transparent;background-size:cover;background-position:center;background-repeat:no-repeat}.screen-bg video,.welcome-media-mount video{width:100%;height:100%;object-fit:cover}.screen-bg::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,.05);pointer-events:none}.flash-layer{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:9999;transition:opacity .08s ease}.flash-layer.active{opacity:.92}.toast{position:fixed;left:50%;bottom:calc(18px + var(--safe-bottom));transform:translateX(-50%) translateY(120px);background:#000;color:#fff;z-index:2000;padding:12px 18px;border:4px solid #fff;border-radius:18px;font-weight:900;max-width:min(480px,calc(100vw - 32px));text-align:center;transition:transform .25s ease}.toast.active{transform:translateX(-50%) translateY(0)}.splash-layer{position:fixed;inset:0;z-index:1500;background:#000;display:none;align-items:center;justify-content:center}.splash-layer.active{display:flex;animation:splashOut 1.05s ease forwards}.splash-card{background:#f97316;padding:28px 34px;text-align:center;transform:rotate(-2deg);display:grid;gap:12px;place-items:center}.splash-card img{width:120px;height:120px}.splash-card strong{font-size:clamp(28px,6vw,64px)}@keyframes splashOut{0%,70%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.05);pointer-events:none}}
.yellow-action,.pink-action,.orange-action,.purple-action,.green-action,.blue-action{border-radius:18px;padding:14px 22px;font-size:20px;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;text-align:center}.yellow-action{background:#facc15;color:#000}.pink-action{background:#ec4899;color:#fff}.orange-action{background:#f97316;color:#fff}.purple-action{background:#a855f7;color:#fff}.green-action{background:#22c55e;color:#fff}.blue-action{background:#38bdf8;color:#000}.full-btn{width:100%;min-height:50px;font-size:16px}.round-icon-btn{width:52px;height:52px;border-radius:16px;display:inline-flex;align-items:center;justify-content:center;background:#f472b6;color:#fff;font-size:24px;flex:0 0 auto}.brand-badge{background:#fdba74;padding:10px 16px;display:inline-flex;align-items:center;gap:8px;width:max-content}.brand-badge img{width:30px;height:30px}.step-badge{display:inline-flex;align-items:center;width:max-content;padding:7px 12px;font-size:13px;transform:rotate(-2deg);background:#fde047;font-weight:900}.divider-dashed{width:100%;height:1px;border-top:4px dashed #000;margin:14px 0}.flow-note{background:rgba(255,255,255,.9);padding:10px 13px;margin:0;font-size:15px;line-height:1.35}.retro-text-input{width:100%;border:4px solid #000;border-radius:14px;padding:12px 14px;font-family:'Nunito',sans-serif;font-size:16px;font-weight:900;outline:none;background:#fff7ed;box-shadow:4px 4px 0 #000}.retro-text-input:focus{background:#fff}.range-row{display:grid;grid-template-columns:90px 1fr 58px;gap:10px;align-items:center;font-size:13px;font-weight:900}.range-row input[type=range]{width:100%;accent-color:#ec4899;min-height:34px}.button-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.button-grid button{font-size:15px;min-height:50px}
/* Welcome fullscreen */.welcome-street-screen{align-items:center;justify-content:center;background:#ffb6c1;isolation:isolate}.welcome-media-mount{position:absolute;inset:0;z-index:1;background-size:cover;background-position:center;background-repeat:no-repeat}.welcome-media-mount img,.welcome-media-mount video{width:100%;height:100%;object-fit:cover}.welcome-media-mount::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.22));pointer-events:none}.welcome-tap-layer{position:absolute;inset:0;z-index:20;background:transparent;cursor:pointer}.welcome-admin-btn{position:absolute;top:calc(16px + var(--safe-top));right:16px;z-index:40;background:#fff;color:#000;border-radius:16px;padding:10px 14px;font-weight:900}.welcome-default-card{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;width:min(100%,980px);min-height:100%;pointer-events:none}.welcome-card{background:#f97316;color:#fff;font-size:clamp(46px,10vw,110px);line-height:1;padding:28px 34px;text-align:center;transform:rotate(3deg);position:relative;margin-bottom:34px}.welcome-smiley{position:absolute;width:clamp(70px,12vw,110px);right:-30px;bottom:-34px}.welcome-subtitle{background:rgba(255,255,255,.9);padding:10px 16px;font-size:clamp(18px,4vw,30px);transform:rotate(-1deg);margin:0 0 28px}.primary-start-btn{background:#4f46e5;color:#fff;font-size:clamp(28px,7vw,54px);border-radius:20px;padding:18px 42px;pointer-events:auto}
/* Flow */.flow-screen{align-items:center;justify-content:center;padding:calc(18px + var(--safe-top)) 18px calc(18px + var(--safe-bottom));z-index:5}.flow-shell{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.compact-flow-shell .flow-card{width:min(560px,100%)}.wide-flow-shell .flow-card{width:min(1000px,100%)}.flow-card{position:relative;background:rgba(255,255,255,.94);border-radius:24px;padding:26px;display:grid;gap:14px;max-height:calc(100dvh - 44px);overflow:auto}.flow-card h1,.payment-copy h1,.finish-controls h1{font-size:clamp(38px,8vw,76px);line-height:.95;margin:0}.flow-home-btn{position:absolute;right:18px;top:18px;z-index:5}.retro-form{display:grid;gap:14px}.retro-form label{display:grid;gap:8px;font-weight:900}.package-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:8px}.package-card{background:#fff;border-radius:22px;padding:18px;display:grid;gap:12px;text-align:left;min-height:210px}.package-card.active{background:#fef08a;transform:rotate(-1deg)}.package-card h3{margin:0;font-family:'Fredoka One';font-size:clamp(26px,3vw,42px);line-height:.95}.package-card p{margin:0;font-size:14px;line-height:1.25}.package-card strong{font-size:22px}.package-card button{width:100%;margin-top:auto}.payment-shell{position:relative;background:rgba(255,255,255,.94);border-radius:26px;width:min(1040px,100%);height:min(680px,calc(100dvh - 42px));padding:26px;display:grid;grid-template-columns:1.05fr .95fr;grid-template-rows:1fr auto;gap:18px}.payment-copy{display:grid;align-content:center;gap:14px}.payment-summary{background:#fff;padding:16px;border-radius:18px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:22px}.payment-summary strong{font-family:'Fredoka One';font-size:28px}.payment-timer{background:#fffbeb;border-radius:16px;padding:12px;font-weight:900}.qris-box{background:#fff;border-radius:24px;padding:22px;display:flex;align-items:center;justify-content:center}.qris-box img{width:min(360px,100%)}.payment-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* Camera fullscreen */.camera-fullscreen{background:#000;color:#fff;z-index:10}.camera-fullscreen video,.camera-fullscreen #fallbackCameraCanvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);background:#000}.camera-fullscreen #fallbackCameraCanvas{display:none}.camera-fullscreen.demo-mode #fallbackCameraCanvas{display:block}.camera-fullscreen.demo-mode video{display:none}.camera-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.46),transparent 22%,transparent 68%,rgba(0,0,0,.72));pointer-events:none}.camera-topbar{position:absolute;left:0;right:0;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(16px + var(--safe-top)) 18px 12px}.camera-pill{background:rgba(255,255,255,.92);color:#000;border-radius:18px;padding:10px 14px;display:flex;align-items:center;gap:12px;font-weight:900;min-height:52px}.camera-pill span{font-size:13px}.camera-pill strong{font-family:'Fredoka One';font-size:22px}.camera-controls{position:absolute;left:0;right:0;bottom:0;z-index:20;display:flex;flex-direction:column;align-items:center;gap:12px;padding:12px 18px calc(24px + var(--safe-bottom))}.camera-status{background:rgba(255,255,255,.92);color:#000;border-radius:999px;padding:10px 16px;margin:0;font-weight:900;text-align:center}.shutter-button{position:relative;width:106px;height:106px;border-radius:999px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer}.shutter-glow{position:absolute;inset:0;background:#ec4899;border-radius:999px;filter:blur(20px);opacity:.62;transition:.25s}.shutter-button:hover .shutter-glow{opacity:1;transform:scale(1.12)}.shutter-ring{position:absolute;width:96px;height:96px;border:5px solid #fff;border-radius:999px;z-index:2;transition:.12s}.shutter-core{width:78px;height:78px;background:#fff;border-radius:999px;z-index:3;transition:.12s}.shutter-button:active .shutter-ring,.shutter-button:active .shutter-core{transform:scale(.9)}.shutter-button:disabled{opacity:.5;filter:grayscale(.3)}.countdown-overlay{position:absolute;inset:0;z-index:30;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.35)}.countdown-overlay.active{display:flex}.countdown-overlay span{font-size:clamp(120px,24vw,280px);line-height:1}.camera-ready{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:18;background:#fff;color:#000;border-radius:18px;padding:14px 20px;font-weight:900}.camera-ready.hidden{display:none}
/* Studio separated screens */.studio-step-screen{z-index:10;flex-direction:column}.step-header{height:var(--header-h);min-height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:12px;background:rgba(255,255,255,.92);padding:calc(10px + var(--safe-top)) 16px 10px;border-left:0;border-right:0;border-top:0;z-index:30}.step-header h1{margin:0;font-size:clamp(26px,4vw,54px);line-height:.9}.step-header .step-badge{font-size:11px;padding:5px 9px;margin-bottom:5px}.step-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}.step-actions button{font-size:15px;min-height:48px;padding:10px 16px}.session-chip{background:#fff;border-radius:16px;padding:9px 12px;font-weight:900}.studio-grid{height:calc(100dvh - var(--header-h));min-height:0;display:grid;gap:14px;padding:14px;position:relative;z-index:2}.frame-grid{grid-template-columns:minmax(220px,280px) minmax(0,1fr) minmax(260px,340px)}.one-side-grid{grid-template-columns:minmax(0,1fr) minmax(270px,360px)}.side-panel{background:rgba(255,255,255,.94);border-radius:22px;min-height:0;height:100%;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:14px}.panel-head h2{font-size:30px;margin:0}.panel-head p{font-size:13px;line-height:1.3;margin:6px 0 0;background:#f3f4f6;border:3px solid #000;padding:8px;border-radius:12px}.canvas-center{min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:4px}.canvas-wrap{position:relative;background:#ffb6c1;border-radius:4px;width:min(42vh,430px);max-width:100%;aspect-ratio:1/2;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}.one-side-grid .canvas-wrap{width:min(48vh,460px)}.canvas-wrap canvas{width:100%;height:100%;display:block;background:#ffb6c1}.canvas-wrap::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(45deg,rgba(255,255,255,.22) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.22) 75%,rgba(255,255,255,.22)),linear-gradient(45deg,rgba(255,255,255,.22) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.22) 75%,rgba(255,255,255,.22));background-size:48px 48px;background-position:0 0,24px 24px}.slot-overlay{position:absolute;inset:0;z-index:6;touch-action:none}.slot-hit{position:absolute;border:3px dashed rgba(0,0,0,.75);cursor:grab;touch-action:none}.slot-hit.active{border:4px solid #fde047;outline:3px solid #000;z-index:2}.slot-hit.filled::after{content:'geser foto';position:absolute;left:6px;bottom:6px;background:#fff;border:2px solid #000;border-radius:999px;padding:3px 7px;font-size:10px;font-weight:900}.photo-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.photo-thumb{aspect-ratio:3/4;background:#e5e7eb;border-radius:14px;overflow:hidden;cursor:pointer;position:relative}.photo-thumb img{width:100%;height:100%;object-fit:cover}.photo-thumb.active::after{content:'PILIH';position:absolute;left:5px;right:5px;bottom:5px;background:#fde047;border:3px solid #000;text-align:center;font-size:11px;font-weight:900;padding:3px 0}.frame-options,.filter-options{display:grid;gap:10px}.frame-option,.filter-option{background:#fff7ed;border-radius:16px;padding:10px;display:grid;grid-template-columns:58px 1fr;gap:10px;align-items:center;text-align:left}.frame-option.active,.filter-option.active{background:#fef08a}.frame-mini{width:58px;height:100px;background:#ffb6c1;border:3px solid #000;position:relative;overflow:hidden}.frame-mini span{position:absolute;background:#fff;border:2px solid #000}.filter-option .filter-dot{width:48px;height:48px;border-radius:14px;border:3px solid #000;background:linear-gradient(135deg,#f9a8d4,#fef3c7,#67e8f9)}.sticker-tray{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.sticker-btn{aspect-ratio:1;background:#fffbeb;border-radius:18px;font-size:36px;display:flex;align-items:center;justify-content:center}.sticker-overlay{position:absolute;inset:0;z-index:18;pointer-events:none;touch-action:none}.sticker-item{position:absolute;left:50%;top:50%;transform-origin:center center;pointer-events:auto;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;line-height:1;filter:drop-shadow(4px 4px 0 #000)}.sticker-item.dragging{cursor:grabbing;filter:drop-shadow(0 0 9px rgba(255,255,255,.95)) drop-shadow(4px 4px 0 #000)}.sticker-icon{display:block;pointer-events:none;transform:translate(-50%,-50%);line-height:1}.sticker-box{position:absolute;left:calc(var(--sticker-size,86px)/-2);top:calc(var(--sticker-size,86px)/-2);width:var(--sticker-size,86px);height:var(--sticker-size,86px);pointer-events:none;display:none;border:3px dashed rgba(0,0,0,.75);border-radius:16px}.sticker-item.selected{z-index:100}.sticker-item.selected .sticker-box{display:block}.sticker-handle{position:absolute;width:34px;height:34px;border-radius:999px;border:3px solid #000;display:flex;align-items:center;justify-content:center;font-size:16px;pointer-events:auto;color:#fff;box-shadow:2px 2px 0 #000;touch-action:none;user-select:none}.handle-delete{background:#ef4444;right:-20px;top:-20px}.handle-resize{background:#22c55e;right:-20px;bottom:-20px}.handle-rotate{background:#a855f7;left:-20px;bottom:-20px}
/* Finish */.finish-screen{align-items:center;justify-content:center;padding:calc(18px + var(--safe-top)) 18px calc(18px + var(--safe-bottom))}.finish-shell{width:min(1100px,100%);height:min(720px,calc(100dvh - 36px));display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:22px;align-items:center}.printer-intro{position:absolute;top:calc(30px + var(--safe-top));left:50%;transform:translateX(-50%);z-index:5;width:min(460px,86vw);pointer-events:none}.printer-slot{height:44px;border-radius:999px;background:linear-gradient(#e5e7eb,#9ca3af);box-shadow:0 10px 0 rgba(0,0,0,.35),inset 0 4px 0 rgba(255,255,255,.65);display:flex;align-items:center;justify-content:center;padding:0 16px}.printer-slot span{width:96%;height:10px;background:#050505;border-radius:999px;box-shadow:inset 0 2px 2px rgba(255,255,255,.25)}.printer-label{text-align:center;color:#fff;font-weight:900;margin-bottom:8px;text-shadow:-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000}.print-paper{display:flex;align-items:center;justify-content:center;min-height:0;overflow:hidden}.print-paper img{height:min(70vh,620px);background:#fff;animation:receiptPrintDown 3.2s cubic-bezier(.25,1,.5,1) both;transform-origin:top center}.finish-controls{background:rgba(255,255,255,.96);border-radius:24px;padding:22px;display:grid;gap:12px}.finish-actions{display:grid;gap:10px}@keyframes receiptPrintDown{0%{transform:translateY(-112%) scale(.985);opacity:.96}72%{transform:translateY(1.5%) scale(1);opacity:1}100%{transform:translateY(0) scale(1);opacity:1}}
@media (max-width:1050px){.package-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.frame-grid{grid-template-columns:220px minmax(0,1fr) 280px}.one-side-grid{grid-template-columns:minmax(0,1fr) 310px}.step-actions button{font-size:14px;padding:10px 13px}.canvas-wrap{width:min(43vh,390px)}}
@media (max-width:767px){:root{--header-h:104px}.app-container,.screen{height:100svh;min-height:100svh}.welcome-card{font-size:clamp(42px,14vw,70px);padding:24px 28px}.welcome-subtitle{font-size:18px}.primary-start-btn{font-size:34px}.flow-screen{padding:calc(12px + var(--safe-top)) 12px calc(12px + var(--safe-bottom))}.flow-card{padding:18px;max-height:calc(100svh - 24px);border-radius:20px}.package-grid{grid-template-columns:1fr;gap:12px}.package-card{min-height:150px;grid-template-columns:1fr auto;align-items:center}.package-card p{grid-column:1/-1}.payment-shell{height:calc(100svh - 24px);grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto;padding:18px;overflow:hidden}.qris-box{min-height:0;padding:14px}.qris-box img{height:100%;max-height:42svh;width:auto}.payment-actions{grid-template-columns:1fr}.camera-topbar{align-items:flex-start}.camera-pill{padding:8px 10px;min-height:44px}.camera-pill strong{font-size:18px}.round-icon-btn{width:46px;height:46px}.shutter-button{width:96px;height:96px}.shutter-ring{width:88px;height:88px}.shutter-core{width:70px;height:70px}.step-header{height:var(--header-h);min-height:var(--header-h);padding:calc(8px + var(--safe-top)) 10px 8px;align-items:flex-start}.step-header h1{font-size:28px}.step-actions{gap:6px;align-items:flex-start}.step-actions .session-chip{display:none}.step-actions button{font-size:12px;min-height:42px;padding:8px 10px}.studio-grid{height:calc(100svh - var(--header-h));padding:10px;gap:10px}.frame-grid,.one-side-grid{display:flex;flex-direction:column}.canvas-center{height:50%;min-height:270px;flex:1 1 auto;padding:0}.canvas-wrap,.one-side-grid .canvas-wrap{width:min(70vw,280px);max-height:100%}.side-panel{height:40%;min-height:210px;flex:0 0 40%;border-radius:18px;padding:12px}.frame-grid .left-panel{order:2;height:24%;min-height:150px;flex-basis:24%}.frame-grid .right-panel{order:3;height:30%;min-height:190px;flex-basis:30%}.frame-grid .canvas-center{order:1;flex-basis:46%;min-height:260px}.one-side-grid .right-panel{height:40%;flex-basis:40%}.panel-head h2{font-size:24px}.panel-head p{font-size:12px;padding:6px}.photo-strip{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.frame-options,.filter-options{grid-template-columns:1fr;gap:8px}.frame-option,.filter-option{grid-template-columns:46px 1fr;padding:8px}.frame-mini{width:46px;height:74px}.range-row{grid-template-columns:76px 1fr 48px;font-size:12px}.sticker-tray{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.sticker-btn{font-size:28px;border-radius:14px}.finish-shell{height:calc(100svh - 24px);grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:12px}.print-paper img{height:min(56svh,430px)}.finish-controls{padding:16px}.finish-controls h1{font-size:36px}.finish-actions{grid-template-columns:1fr 1fr}.finish-actions .pink-action{grid-column:1/-1}.printer-intro{top:calc(14px + var(--safe-top));width:min(340px,86vw)}.printer-slot{height:34px;border-width:3px}}
@media (max-width:390px){.photo-strip{grid-template-columns:repeat(3,minmax(0,1fr))}.sticker-tray{grid-template-columns:repeat(4,minmax(0,1fr))}.canvas-wrap,.one-side-grid .canvas-wrap{width:min(67vw,260px)}.step-header h1{font-size:24px}.step-actions button{font-size:11px;padding:8px}}
@media print{body{background:#fff}.app-container>*:not(main),main>*:not(#finishScreen),.finish-controls,.printer-intro{display:none!important}#finishScreen{position:static;display:block!important;background:#fff!important;padding:0}.finish-shell{display:block;width:100%;height:auto}.print-paper img{height:auto;width:100%;box-shadow:none!important;border:0!important}}


/* ================================
   REVISION PATCH V3
   Fokus: tidak mengubah fitur, hanya memperbaiki layout/responsive.
================================ */
.screen-bg::after,
.welcome-media-mount::after{display:none!important;background:transparent!important;}
.welcome-media-mount{filter:none!important;opacity:1!important;}
.welcome-media-mount video,
.welcome-media-mount img{filter:none!important;opacity:1!important;}
#filterScreen .canvas-wrap,
#stickerScreen .canvas-wrap,
.one-side-grid .canvas-wrap{width:min(42vh,430px)!important;max-width:100%!important;}
.finish-screen{overflow:hidden!important;}
.finish-shell{position:relative!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(300px,360px)!important;grid-template-rows:auto minmax(0,1fr)!important;gap:12px 22px!important;align-items:center!important;max-height:calc(100dvh - 36px)!important;overflow:hidden!important;}
.printer-intro{position:static!important;grid-column:1!important;grid-row:1!important;transform:none!important;left:auto!important;top:auto!important;width:min(420px,82%)!important;margin:0 auto -2px!important;z-index:5!important;align-self:end!important;}
.print-paper{grid-column:1!important;grid-row:2!important;align-self:start!important;min-height:0!important;max-height:100%!important;overflow:hidden!important;}
.print-paper img{height:min(58vh,540px,calc(100dvh - 180px))!important;max-width:100%!important;object-fit:contain!important;}
.finish-controls{grid-column:2!important;grid-row:1 / span 2!important;align-self:center!important;max-height:100%!important;overflow:auto!important;}
.photo-thumb[draggable="true"]{cursor:grab;}
.photo-thumb[draggable="true"]:active{cursor:grabbing;}
.slot-hit{background:rgba(255,255,255,.03);}
.slot-hit.filled{background:rgba(34,197,94,.06);}
@media(max-width:1050px){
  #filterScreen .canvas-wrap,#stickerScreen .canvas-wrap,.one-side-grid .canvas-wrap{width:min(40vh,390px)!important;}
}
@media(max-width:767px){
  #filterScreen .canvas-wrap,#stickerScreen .canvas-wrap,.one-side-grid .canvas-wrap,.canvas-wrap{width:min(68vw,330px)!important;}
  .finish-shell{grid-template-columns:1fr!important;grid-template-rows:auto minmax(0,1fr) auto!important;height:calc(100svh - 24px)!important;max-height:calc(100svh - 24px)!important;gap:8px!important;}
  .printer-intro{grid-column:1!important;grid-row:1!important;width:min(340px,86vw)!important;margin:0 auto -4px!important;}
  .printer-slot{height:34px!important;border-width:3px!important;}
  .printer-label{font-size:13px!important;margin-bottom:5px!important;}
  .print-paper{grid-column:1!important;grid-row:2!important;}
  .print-paper img{height:min(45svh,430px)!important;}
  .finish-controls{grid-column:1!important;grid-row:3!important;max-height:36svh!important;padding:14px!important;}
}

/* ==============================================================
   V4 REVISION PATCH - requested fixes only
   - welcome waits for media readiness
   - remove canvas mosaic overlay from results
   - smoother drag/drop and PNG stickers
   - compact filter labels and stable print preview
============================================================== */
.canvas-wrap::before{display:none!important;background:none!important;}
.welcome-street-screen.welcome-media-loading{background:#000!important;}
.welcome-street-screen.welcome-media-loading #welcomeDefault{display:none!important;}
.welcome-street-screen.welcome-media-loading .welcome-tap-layer{pointer-events:none!important;}
.welcome-street-screen.welcome-media-loading::before{content:'Memuat welcome media...';position:absolute;left:50%;bottom:calc(28px + var(--safe-bottom));transform:translateX(-50%);z-index:30;background:#fff;color:#000;border:3px solid #000;border-radius:999px;padding:10px 16px;font-weight:900;box-shadow:4px 4px 0 #000;}
.welcome-street-screen.welcome-media-ready .welcome-media-mount{opacity:1!important;filter:none!important;}
.camera-fullscreen.photo-splash::before,.camera-fullscreen.photo-splash::after{content:'';position:absolute;left:50%;top:50%;width:28vmin;height:28vmin;border-radius:50%;transform:translate(-50%,-50%) scale(.15);z-index:18;pointer-events:none;border:6px solid rgba(255,255,255,.92);animation:photoSplash .62s ease-out both;}
.camera-fullscreen.photo-splash::after{width:42vmin;height:42vmin;border-color:rgba(255,182,193,.85);animation-delay:.08s;}
@keyframes photoSplash{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}25%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(2.4)}}
.gallery-drag-ghost{position:fixed;left:0;top:0;width:82px;height:110px;object-fit:cover;z-index:5000;pointer-events:none;border-radius:14px;will-change:transform;opacity:.92;}
.photo-thumb{touch-action:none;user-select:none;-webkit-user-select:none;}
.slot-hit{transition:border-color .12s ease,outline .12s ease,background .12s ease;}
.slot-hit.drag-hover,.slot-hit:hover{background:rgba(250,204,21,.18)!important;}
.compact-filter{grid-template-columns:42px 1fr!important;min-height:62px;}
.compact-filter strong{font-size:18px;line-height:1.1;}
.filter-option p{display:none!important;}
.sticker-btn img{width:78%;height:78%;object-fit:contain;pointer-events:none;filter:drop-shadow(2px 2px 0 rgba(0,0,0,.35));}
.png-sticker{will-change:transform,left,top;filter:drop-shadow(4px 4px 0 #000);}
.png-sticker.dragging{filter:drop-shadow(0 0 9px rgba(255,255,255,.95)) drop-shadow(4px 4px 0 #000);}
.png-sticker .sticker-icon{transform:none!important;width:var(--sticker-size,92px);height:var(--sticker-size,92px);object-fit:contain;display:block;pointer-events:none;user-select:none;-webkit-user-drag:none;}
.sticker-handle{width:40px!important;height:40px!important;font-size:18px!important;}
.handle-delete{right:-24px!important;top:-24px!important}.handle-resize{right:-24px!important;bottom:-24px!important}.handle-rotate{left:-24px!important;bottom:-24px!important}
.print-paper{background:transparent!important;}
.print-paper img{background:transparent!important;object-fit:contain;}
.print-paper img:not([src]),.print-paper img[src='']{visibility:hidden!important;}
#finalPreview{transition:none!important;}
#filterScreen .canvas-wrap,#stickerScreen .canvas-wrap,.one-side-grid .canvas-wrap{width:min(42vh,430px)!important;max-width:100%!important;}
@media (max-width:767px){#filterScreen .canvas-wrap,#stickerScreen .canvas-wrap,.one-side-grid .canvas-wrap,.canvas-wrap{width:min(68vw,330px)!important;}.sticker-handle{width:42px!important;height:42px!important}.gallery-drag-ghost{width:68px;height:92px}.welcome-street-screen.welcome-media-loading::before{font-size:13px;bottom:calc(18px + var(--safe-bottom));}}


/* V6 front-only exact requested fixes */
.flash-layer.shutter-pop{animation:cameraShutterWhite .38s ease-out both;}
@keyframes cameraShutterWhite{0%{opacity:0}18%{opacity:1}55%{opacity:.82}100%{opacity:0}}
.drag-only-gallery .photo-thumb.active::after,.photo-thumb.active::after{display:none!important;content:none!important;}
.drag-only-gallery .photo-thumb{cursor:grab;}
.drag-only-gallery .photo-thumb:active{cursor:grabbing;}
.slot-hit.drag-hover{background:rgba(250,204,21,.26)!important;outline:4px solid #fde047!important;outline-offset:2px;}
.sticker-overlay{pointer-events:auto;}
.sticker-overlay canvas{pointer-events:none;}
.sticker-item.png-sticker{display:block;box-sizing:border-box;}
.sticker-item.png-sticker .sticker-icon{transform:none!important;width:100%!important;height:100%!important;object-fit:contain;display:block;pointer-events:none;user-select:none;-webkit-user-drag:none;}
.sticker-item.png-sticker .sticker-box{left:0!important;top:0!important;width:100%!important;height:100%!important;}
.finish-actions-two{grid-template-columns:1fr 1fr;}
.hidden-front-download{display:none!important;}
@media (max-width:767px){.finish-actions-two{grid-template-columns:1fr 1fr!important}.finish-actions-two .pink-action{grid-column:auto!important}}


/* V7 PATCH: admin background path for every front step */
.screen.uses-admin-bg{background-color:transparent!important;background-image:none!important;}
.screen.uses-admin-bg .flow-card,.screen.uses-admin-bg .payment-shell,.screen.uses-admin-bg .side-panel,.screen.uses-admin-bg .step-header,.screen.uses-admin-bg .finish-controls{backdrop-filter:blur(2px);}
.app-container.dynamic-bg-active .screen-bg{z-index:0;}
.screen-bg video{width:100%;height:100%;object-fit:cover;}

/* V7 PATCH: original photo quality + smoother photo movement */
.canvas-wrap canvas{image-rendering:auto;}
.photo-thumb img{image-rendering:auto;}
.slot-hit{touch-action:none;}

/* Laravel dynamic final tweaks */
.slot-hit.filled::after{display:none!important;content:''!important;}
.hidden-front-download{display:none!important;}