/* ==========================================================================
   Firdaus Adhwa Photobooth — UI V7 (reference-exact rebuild)
   Base · scene · komponen umum
   ========================================================================== */
:root{
  --rose:#d43c69;--rose-2:#c02a58;--rose-3:#a71f4a;--rose-l:#f7a8bd;--pink:#ffdbe4;--pink-2:#fdeaee;--pink-3:#fff1f4;
  --cream:#fff9f1;--cream-2:#fdf0e3;--cream-3:#f7e6d6;
  --gold:#d9b366;--gold-2:#b98a3c;--gold-3:#8f6a25;
  --ink:#4b2b2c;--ink-2:#7b5754;--ink-3:#a58884;
  --crim:#a5204a;
  --ok:#2f9e5f;--ok-bg:#dcf4e5;--warn:#d98a1f;--warn-bg:#fff0d4;--bad:#d33c4f;--bad-bg:#fde0e4;
  --line:rgba(217,179,102,.55);
  --shadow:0 10px 26px rgba(170,60,90,.16);
  --shadow-s:0 4px 12px rgba(170,60,90,.14);
  --f-ui:'Nunito',ui-rounded,'SF Pro Rounded',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --f-serif:'Playfair Display','Didot','Bodoni 72','Baskerville',Georgia,'Times New Roman',serif;
  --f-script:'Great Vibes','Snell Roundhand','Savoye LET','Apple Chancery','Brush Script MT',cursive;
  --f-hand:'Dancing Script','Bradley Hand','Noteworthy','Segoe Script','Comic Sans MS',cursive;
  /* satuan proporsional: ±8px pada iPad portrait, ±3.9px pada iPhone */
  --s:min(1vw,.68dvh);
  --u:min(100vw,calc(100dvh*.85));
  --sat:env(safe-area-inset-top,0px);--sar:env(safe-area-inset-right,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);
}
@supports not (height:100dvh){:root{--s:min(1vw,.68vh);--u:min(100vw,calc(100vh*.85))}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:#f9dfe4}
html{margin:0;min-height:100%;overflow-x:hidden;scroll-padding-bottom:120px}
body{margin:0;min-height:100%;overflow-x:clip}
body{font-family:var(--f-ui);color:var(--ink);background:#f9dfe4;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-font-smoothing:antialiased;line-height:1.35;overscroll-behavior-y:none}
img,svg,video,canvas{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;-webkit-appearance:none;appearance:none}
[hidden]{display:none!important}
h1,h2,h3,h4,p{margin:0}
.script{font-family:var(--f-script);font-weight:400;letter-spacing:.01em}
.subtle{color:var(--ink-2);font-size:max(12px,.86em)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.82em;word-break:break-all}

/* ---------- ikon ---------- */
.ico{width:1.25em;height:1.25em;flex:0 0 auto;display:inline-block;vertical-align:-.25em;color:currentColor}
.ico.h{width:.9em;height:.9em;color:var(--rose);vertical-align:-.08em}
.ico.b{width:1.5em;height:1.5em;color:#f28aa6}

/* ---------- scene / latar ---------- */
.scene{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(120% 60% at 50% -8%,#fff6ec 0%,rgba(255,240,230,.0) 62%),
    radial-gradient(80% 50% at 82% 20%,rgba(255,196,214,.55),transparent 70%),
    radial-gradient(80% 60% at 12% 70%,rgba(255,206,220,.5),transparent 70%),
    linear-gradient(180deg,#fdeee8 0%,#fbdfe3 46%,#f8d0d9 100%)}
.scene .bokeh{position:absolute;inset:0;
  background:
    radial-gradient(circle at 14% 12%,rgba(255,236,190,.9) 0 1.6%,rgba(255,236,190,0) 2.6%),
    radial-gradient(circle at 30% 6%,rgba(255,244,214,.85) 0 1.2%,rgba(255,244,214,0) 2.2%),
    radial-gradient(circle at 70% 9%,rgba(255,240,200,.85) 0 1.4%,rgba(255,240,200,0) 2.4%),
    radial-gradient(circle at 90% 22%,rgba(255,232,180,.8) 0 1.8%,rgba(255,232,180,0) 3%),
    radial-gradient(circle at 8% 44%,rgba(255,255,255,.7) 0 1.5%,rgba(255,255,255,0) 2.6%),
    radial-gradient(circle at 93% 55%,rgba(255,255,255,.6) 0 1.3%,rgba(255,255,255,0) 2.4%),
    radial-gradient(circle at 20% 78%,rgba(255,225,180,.7) 0 1.6%,rgba(255,225,180,0) 2.8%),
    radial-gradient(circle at 78% 86%,rgba(255,235,200,.75) 0 1.5%,rgba(255,235,200,0) 2.6%),
    radial-gradient(circle at 50% 30%,rgba(255,255,255,.55),rgba(255,255,255,0) 40%)}
/* latar café berlapis: bg lembut + garland bunga sisi + sudut (bukan screenshot) */
.scene{background-image:url(ui7/scene/bg-p.webp),
    radial-gradient(120% 60% at 50% -8%,#fff6ec 0%,rgba(255,240,230,.0) 62%),
    linear-gradient(180deg,#fdeee8 0%,#fbdfe3 46%,#f8d0d9 100%);
  background-size:cover,auto,auto;background-position:center,center,center}
@media (orientation:landscape){.scene{background-image:url(ui7/scene/bg-l.webp),linear-gradient(180deg,#fdeee8 0%,#fbdfe3 46%,#f8d0d9 100%)}}
.scene .gl{position:absolute;top:0;bottom:0;width:calc(var(--u)*.17);background:url(ui7/scene/gl-v.webp) repeat-y;background-size:100% auto;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 30%,#000 52%,#000 100%);mask-image:linear-gradient(180deg,transparent 0,transparent 30%,#000 52%,#000 100%)}
.scene .gl.l{left:calc(var(--u)*-.045)}
.scene .gl.r{right:calc(var(--u)*-.045);transform:scaleX(-1);background-position:0 40%}
.scene .gh{position:absolute;left:0;right:0;bottom:calc(var(--u)*-.03);height:calc(var(--u)*.16);background:url(ui7/scene/gl-h.webp) repeat-x left bottom;background-size:auto 100%;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
.scene .corner{position:absolute;background-repeat:no-repeat;background-size:contain;opacity:.98}
.scene .corner.tl{left:0;top:0;width:calc(var(--u)*.28);aspect-ratio:528/780;background-image:url(ui7/decor/corner-tl.webp);background-position:left top}
.scene .corner.tr{right:0;top:0;width:calc(var(--u)*.24);aspect-ratio:444/840;background-image:url(ui7/decor/corner-tr.webp);background-position:right top}
.scene .corner.bl{left:0;bottom:0;width:calc(var(--u)*.17);aspect-ratio:392/1196;background-image:url(ui7/decor/corner-bl.webp);background-position:left bottom}
.scene .corner.br{right:0;bottom:0;width:calc(var(--u)*.13);aspect-ratio:300/936;background-image:url(ui7/decor/corner-br.webp);background-position:right bottom}
/* saat ini path aset relatif terhadap assets/ (file ini di assets/) */

.app{position:relative;z-index:1;min-height:100vh;min-height:100dvh}
main{position:relative;min-height:100vh;min-height:100dvh}
.screen{display:none;position:relative;min-height:100vh;min-height:100dvh}
.screen.active{display:block}
.wrap{position:relative;width:100%;max-width:1400px;margin:0 auto;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;
  padding:calc(var(--sat) + max(8px,calc(var(--s)*1.4))) max(12px,calc(var(--s)*3),var(--sar)) calc(var(--sab) + max(8px,calc(var(--s)*1.4))) max(12px,calc(var(--s)*3),var(--sal))}

/* ---------- logo ---------- */
.faBrandLogo,.logo{display:block;height:auto;object-fit:contain;filter:brightness(.9) saturate(1.12) contrast(1.1) drop-shadow(0 2px 5px rgba(140,95,30,.25))}

/* ---------- tombol ---------- */
.cta{position:relative;display:flex;align-items:center;justify-content:center;gap:.6em;width:100%;min-height:max(52px,calc(var(--s)*9));padding:.4em 1.3em;border:0;border-radius:999px;
  font:800 max(19px,calc(var(--s)*3.6))/1.05 var(--f-serif);letter-spacing:.005em;color:#fff5e9;
  background:linear-gradient(180deg,#f2607f 0%,#d23a66 48%,#b92150 100%);
  box-shadow:0 0 0 max(2px,calc(var(--s)*.35)) #fff2df,0 0 0 max(4px,calc(var(--s)*.75)) var(--gold),0 12px 24px rgba(175,35,75,.34),inset 0 2px 0 rgba(255,255,255,.5),inset 0 -3px 0 rgba(120,10,45,.25);
  text-shadow:0 2px 3px rgba(110,10,40,.45);transition:transform .12s,filter .12s}
.cta:active{transform:translateY(1px) scale(.992)}
.cta:disabled{filter:grayscale(.55) opacity(.6);cursor:not-allowed;box-shadow:0 0 0 max(2px,calc(var(--s)*.35)) #fff2df,0 0 0 max(4px,calc(var(--s)*.75)) #dcc79a}
.cta .chev{display:grid;place-items:center;width:1.45em;height:1.45em;border-radius:50%;background:#fff3e2;color:var(--rose-2);text-shadow:none;box-shadow:inset 0 0 0 2px rgba(200,140,60,.35);flex:0 0 auto}
.cta .chev .ico{width:.95em;height:.95em}
.cta>span{min-width:0}
.cta.small{min-height:max(46px,calc(var(--s)*7));font-size:max(17px,calc(var(--s)*3))}
.cta.mini{min-height:38px;font:800 14px/1 var(--f-ui);padding:.4em 1em;width:auto;box-shadow:0 0 0 2px #fff2df,0 0 0 3.5px var(--gold),0 6px 12px rgba(175,35,75,.25);text-shadow:none}
.cta.alt{background:linear-gradient(180deg,#f7b4c6,#ec7f9d 55%,#dd5c82);}

.pill,.primary,.danger{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:42px;padding:.5em 1.05em;border-radius:999px;font-weight:800;font-size:max(14px,calc(var(--s)*1.9));line-height:1.1;text-align:center;white-space:normal}
.pill{border:1.5px solid var(--line);background:linear-gradient(180deg,#fffaf3,#fdeee6);color:var(--rose-3);box-shadow:var(--shadow-s),inset 0 1px 0 #fff}
.pill:active{transform:translateY(1px)}
.pill.big{min-height:max(48px,calc(var(--s)*6.4));font-family:var(--f-serif);font-size:max(17px,calc(var(--s)*2.7));padding:.5em 1.4em}
.pill.mini{min-height:34px;padding:.3em .8em;font-size:13px}
.pill.ghost{background:rgba(255,250,244,.72)}
.primary{border:0;color:#fff;background:linear-gradient(180deg,#f0587f,#c92c5a);box-shadow:0 6px 14px rgba(190,40,80,.28),inset 0 1px 0 rgba(255,255,255,.4)}
.primary:disabled{opacity:.55}
.primary.wide,.pill.wide{width:100%}
.danger{border:1.5px solid #efb1bb;background:#fff1f3;color:var(--bad)}
.backBtn{align-self:flex-start}
.iconBtn{width:44px;padding:0}

.bottomBar{position:relative;z-index:5;margin-top:auto;padding-top:max(8px,calc(var(--s)*1.2));display:flex;flex-direction:column;align-items:center;gap:max(8px,calc(var(--s)*1.2))}
.bottomBar .cta{width:min(100%,calc(var(--s)*72),620px)}
.bottomBar.duo{flex-direction:row;justify-content:center;gap:max(10px,calc(var(--s)*1.6))}
.bottomBar.duo .pill{flex:0 1 32%}
.bottomBar.duo .cta{flex:1 1 60%;width:auto;max-width:calc(var(--s)*62)}

/* ---------- kartu & chip ---------- */
.card{background:linear-gradient(180deg,rgba(255,252,247,.96),rgba(255,244,236,.96));border:1.5px solid var(--line);border-radius:20px;padding:14px;box-shadow:var(--shadow-s)}
.card h3{font:800 17px/1.2 var(--f-serif);color:var(--crim);margin-bottom:10px}
.card.selectable{cursor:pointer}
.badge{display:inline-flex;align-items:center;gap:.4em;padding:.28em .8em;border-radius:999px;background:var(--pink-2);color:var(--rose-3);border:1px solid rgba(214,110,140,.28);font-weight:800;font-size:max(12px,calc(var(--s)*1.5));line-height:1.2}
.badge.ok{background:var(--ok-bg);color:#1f7a46;border-color:rgba(47,158,95,.3)}
.badge.warn{background:var(--warn-bg);color:#a2650d;border-color:rgba(217,138,31,.35)}
.badge.bad{background:var(--bad-bg);color:#b12a3c;border-color:rgba(211,60,79,.3)}
.chip{display:inline-flex;align-items:center;padding:.15em .7em;border-radius:999px;font-weight:800;font-size:12px;background:var(--pink-2);color:var(--rose-3)}
.chip.ok{background:var(--ok-bg);color:#1f7a46}.chip.off{background:#ececec;color:#777}.chip.bad{background:var(--bad-bg);color:#b12a3c}
.mini{display:flex;flex-direction:column;gap:2px;padding:.55em .8em;border-radius:14px;background:rgba(255,246,238,.9);border:1px solid var(--line);font-size:12px;color:var(--ink-2)}
.mini b{font-size:14px;color:var(--ink);word-break:break-word}
.quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.checkline{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--ink-2);margin-top:8px}
.checkline input{margin-top:3px;width:18px;height:18px;flex:0 0 auto;accent-color:var(--rose)}
input:not([type=checkbox]):not([type=range]):not([type=file]),select,textarea{width:100%;min-height:44px;padding:.55em .9em;border-radius:14px;border:1.5px solid rgba(217,179,102,.6);background:#fffdf9;color:var(--ink);font-size:16px}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(214,60,105,.45);outline-offset:1px}
.statusDot,.syncDot{display:inline-block;width:.7em;height:.7em;border-radius:50%;background:#c9c0bd;margin-right:.35em;vertical-align:baseline}
.statusDot.paid,.syncDot.ok{background:var(--ok)}.statusDot.pending{background:var(--warn)}.statusDot.expired,.statusDot.failed,.statusDot.cancelled{background:var(--bad)}

/* ---------- ribbon judul ---------- */
.ribbon{position:relative;z-index:4;align-self:center;text-align:center;width:min(100%,calc(var(--s)*78),640px);margin-top:calc(var(--s)*-2.6);padding:calc(var(--s)*1) calc(var(--s)*6) calc(var(--s)*1.2);border-radius:999px 999px 999px 999px / 50% 50% 50% 50%;
  background:linear-gradient(180deg,#f3648a,#d63b68 50%,#bd2a58);box-shadow:0 0 0 3px #fdeed8,0 0 0 5px var(--gold),0 10px 20px rgba(170,30,70,.3),inset 0 2px 0 rgba(255,255,255,.4);color:#fff5e9}
.ribbon h2{font:800 max(24px,calc(var(--s)*5.4))/1.05 var(--f-serif);color:#fff6ea;text-shadow:0 2px 3px rgba(110,10,40,.4);display:flex;align-items:center;justify-content:center;gap:.4em}
.ribbon h2 .ico{color:#ffe1ea}
.ribbon p{display:inline-block;margin-top:calc(var(--s)*.6);padding:.15em 1em;border-radius:999px;background:rgba(255,246,236,.92);color:var(--crim);font-weight:700;font-size:max(12px,calc(var(--s)*1.9));text-shadow:none}
.ribbon.slim{margin-top:calc(var(--s)*1);width:min(100%,calc(var(--s)*64),520px);padding:calc(var(--s)*.8) calc(var(--s)*4)}
.ribbon.slim h2{font-size:max(22px,calc(var(--s)*4.2))}

.stepHead{display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative;z-index:6}
.stepHead .logo{height:max(48px,calc(var(--s)*9));width:auto;flex:0 1 auto}
.stepHead .backBtn,.stepHead .stepSpacer{flex:0 0 auto;min-width:96px}
.stepSpacer{display:block;visibility:hidden}

.sideNote{font:400 max(15px,calc(var(--s)*3.1))/1.05 var(--f-script);color:var(--crim);text-align:left}
.sideNote.right{text-align:right}

/* ---------- menu kiosk (tersembunyi) ---------- */
.kioskGear{position:fixed;z-index:60;right:calc(var(--sar) + 10px);top:calc(var(--sat) + 10px);width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line);background:rgba(255,250,244,.78);color:var(--rose-3);display:none;place-items:center;box-shadow:var(--shadow-s);backdrop-filter:blur(6px)}
body[data-screen=welcome] .kioskGear{display:grid}
.kioskMenu{position:fixed;z-index:70;right:calc(var(--sar) + 10px);top:calc(var(--sat) + 58px);width:min(340px,calc(100vw - 20px));padding:14px;border-radius:20px;background:#fffaf3;border:1.5px solid var(--line);box-shadow:0 18px 40px rgba(120,40,70,.28);display:none}
.kioskMenu.show{display:block}
.kmHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font:800 16px var(--f-serif);color:var(--crim)}
.kmClose{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--rose-3);display:grid;place-items:center}
.kmBadges{display:flex;flex-wrap:wrap;gap:6px}
.kmActions{display:flex;flex-direction:column;gap:8px;margin-top:12px}

/* ---------- toast / modal / install ---------- */
.toast{position:fixed;left:50%;bottom:calc(var(--sab) + 22px);transform:translate(-50%,30px);z-index:120;width:max-content;max-width:min(92vw,560px);padding:.75em 1.3em;border-radius:999px;background:rgba(75,43,44,.94);color:#fff;font-weight:700;font-size:15px;text-align:center;opacity:0;pointer-events:none;transition:.25s}
.toast.show{opacity:1;transform:translate(-50%,0)}
.modal{position:fixed;inset:0;z-index:110;display:none;place-items:center;padding:16px;background:rgba(80,20,40,.42);backdrop-filter:blur(4px)}
.modal.show{display:grid}
.modalBox{width:min(440px,100%);max-height:calc(100dvh - 32px);overflow:auto;padding:22px;border-radius:26px;background:linear-gradient(180deg,#fffdf8,#fff1e8);border:2px solid var(--gold);box-shadow:0 24px 60px rgba(120,30,60,.35);display:flex;flex-direction:column;gap:10px;text-align:center}
.modalBox .logo{height:64px;margin:0 auto}
.modalBox h2{font:800 26px var(--f-serif);color:var(--crim)}
.installTip{position:fixed;left:50%;bottom:calc(var(--sab) + 70px);transform:translateX(-50%);z-index:100;display:none;max-width:min(92vw,520px);padding:12px 16px;border-radius:18px;background:#fffaf3;border:1.5px solid var(--gold);box-shadow:var(--shadow);font-size:14px}
.installTip.show{display:block}

/* ---------- ledger & baris (kartu owner asli) ---------- */
.row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:.5em 0;border-bottom:1px dashed rgba(217,179,102,.45);font-size:14px}
.row:last-child{border-bottom:0}
.row>span{color:var(--ink-2);min-width:0}
.row>b{color:var(--ink);text-align:right;min-width:0;word-break:break-word}
.row small{color:var(--ink-3)}
.ledger,.printQueue{margin-top:10px;max-height:260px;overflow:auto;border-radius:14px;background:rgba(255,246,238,.7);padding:4px 10px}
.staticApproveBtn{margin-left:8px;min-height:38px;padding:.2em .8em;font-size:12px}

/* ==========================================================================
   1) WELCOME
   ========================================================================== */
.welcomeWrap{align-items:center;text-align:center;padding-top:calc(var(--sat) + max(8px,calc(var(--s)*1.2)))}
.wBrand{display:flex;justify-content:center;align-items:flex-start;width:100%;gap:calc(var(--s)*2)}
.wBrand .logo{height:clamp(70px,19dvh,240px);width:auto;max-width:60vw}
.wBrand .sideNote{display:none}
.wTitle{margin-top:calc(var(--s)*-.2);width:100%}
.wScript{font:400 max(30px,calc(var(--s)*6.7))/1 var(--f-script);color:#5a2f27;display:flex;align-items:center;justify-content:center;gap:.25em}
.wH1{font:800 max(25px,calc(var(--s)*5.1))/1.08 var(--f-serif);color:var(--crim);margin-top:.1em;text-wrap:balance}
.wTitle .lead{max-width:calc(var(--s)*46);margin:calc(var(--s)*.8) auto 0;font-size:max(14px,calc(var(--s)*2.6));line-height:1.35;color:var(--ink);text-wrap:balance}
.wChars{position:relative;flex:1 1 0;width:100%;min-height:clamp(150px,30dvh,620px);margin-top:calc(var(--s)*-4);margin-bottom:calc(var(--s)*-8.5);z-index:1}
.wChars img{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:100%;width:auto;max-width:min(104%,calc(var(--s)*100));object-fit:contain;object-position:center bottom;filter:drop-shadow(0 10px 14px rgba(150,60,80,.2))}
.wCta{container-type:inline-size;position:relative;z-index:3;width:min(100%,calc(var(--s)*68),600px);margin-top:0}
.wCta .bowDeco{position:absolute;left:50%;top:calc(var(--s)*-3.2);transform:translateX(-50%);width:calc(var(--s)*13);height:calc(var(--s)*6.4);color:#e75a82;z-index:2;pointer-events:none;filter:drop-shadow(0 2px 2px rgba(150,40,70,.25))}
.faHeroCta{min-height:max(62px,calc(var(--s)*12.4));font-size:clamp(20px,6.3cqw,46px);white-space:nowrap;padding-left:1.1em;padding-right:1.1em}
.faHeroCta .chev{width:1.4em;height:1.4em}
.wNotice{position:relative;z-index:3;display:flex;align-items:center;gap:calc(var(--s)*1.6);text-align:left;width:min(100%,calc(var(--s)*58),520px);margin-top:calc(var(--s)*1.6);padding:calc(var(--s)*1.1) calc(var(--s)*2.2);border-radius:calc(var(--s)*2.4);background:rgba(255,248,240,.94)}
.wNotice .qrIco{width:calc(var(--s)*6.2);height:calc(var(--s)*6.2);min-width:40px;min-height:40px;padding:.28em;border-radius:12px;background:var(--rose-2);color:#fff}
.wNotice div{min-width:0}
.wNotice b{display:block;font:800 max(14px,calc(var(--s)*2.25))/1.2 var(--f-ui);color:var(--crim)}
.wNotice span{display:block;font-size:max(12px,calc(var(--s)*1.85));color:var(--ink);line-height:1.3}
.wTiles{position:relative;z-index:3;list-style:none;padding:0;margin:calc(var(--s)*1.6) 0 0;width:min(100%,calc(var(--s)*90));display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--s)*1.6)}
.wTiles li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.15em;padding:calc(var(--s)*1.2) calc(var(--s)*.8) calc(var(--s)*1.3);border-radius:calc(var(--s)*2.4);background:linear-gradient(180deg,#ffeef2,#fff8f3);border:1.5px solid var(--line);box-shadow:var(--shadow-s)}
.wTiles .ico{width:calc(var(--s)*5.8);height:calc(var(--s)*5.8);min-width:30px;min-height:30px;color:#e0507a}
.wTiles b{font:800 max(13px,calc(var(--s)*2.1))/1.15 var(--f-serif);color:var(--crim)}
.wTiles span{font-size:max(11px,calc(var(--s)*1.55));line-height:1.25;color:var(--ink-2)}
.wFoot{display:none;margin-top:calc(var(--s)*1.4);font:400 max(17px,calc(var(--s)*3))/1.15 var(--f-script);color:var(--crim)}

/* ==========================================================================
   2) PILIH LAYOUT
   ========================================================================== */
.layoutWrap{height:100vh;height:100dvh;padding-top:calc(var(--sat) + 6px);padding-left:max(10px,calc(var(--s)*2.4),var(--sal));padding-right:max(10px,calc(var(--s)*2.4),var(--sar))}
.lHead{position:relative;flex:0 0 auto;display:flex;justify-content:center;align-items:flex-start;height:calc(var(--s)*30)}
.lHead .backBtn{position:absolute;left:0;top:0;z-index:6}
.lHead .logo{position:relative;z-index:5;height:calc(var(--s)*18.5);min-height:56px;width:auto;margin-top:calc(var(--s)*1)}
.lMascot{position:absolute;bottom:calc(var(--s)*-4);height:calc(var(--s)*34);width:auto;z-index:3;filter:drop-shadow(0 8px 10px rgba(150,60,80,.18))}
.lMascot.ana{left:calc(var(--s)*-1)}
.lMascot.fio{right:calc(var(--s)*-1)}
.lHead .sideNote{position:absolute;z-index:4;top:calc(var(--s)*7);font-size:max(14px,calc(var(--s)*2.7))}
.lHead .sideNote.left{left:calc(var(--s)*.3);max-width:calc(var(--s)*10);transform:rotate(-8deg)}
.lHead .sideNote.right{right:calc(var(--s)*.3);max-width:calc(var(--s)*11);top:calc(var(--s)*5);transform:rotate(8deg)}
.categoryBar{flex:0 0 auto;display:flex;gap:calc(var(--s)*1);margin-top:calc(var(--s)*1.4);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:3px 2px 5px;scroll-snap-type:x proximity}
.categoryBar::-webkit-scrollbar{display:none}
.categoryBar button{flex:1 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:max(42px,calc(var(--s)*6));padding:.4em 1.1em;border-radius:999px;border:1.5px solid var(--line);background:linear-gradient(180deg,#fffaf4,#fdeee6);color:var(--crim);font:700 max(13px,calc(var(--s)*2))/1 var(--f-ui);white-space:nowrap;scroll-snap-align:start;box-shadow:var(--shadow-s)}
.categoryBar button .ico{width:1.35em;height:1.35em;color:var(--rose-2)}
.categoryBar button.active{background:linear-gradient(180deg,#f2607f,#c92c5a);color:#fff;border-color:#e59a3a;box-shadow:0 6px 12px rgba(190,40,80,.3),inset 0 1px 0 rgba(255,255,255,.4)}
.categoryBar button.active .ico{color:#fff}
.layoutScroll{flex:1 1 0;min-height:0;overflow-y:auto;overflow-x:hidden;margin-top:calc(var(--s)*1.1);-webkit-overflow-scrolling:touch;scrollbar-width:none;border-radius:calc(var(--s)*2.4)}
.layoutScroll::-webkit-scrollbar{display:none}
.layoutGrid{counter-reset:lay;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(calc(var(--s)*26),1fr);gap:calc(var(--s)*1);min-height:100%}
.layoutCard{counter-increment:lay;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:calc(var(--s)*.6);padding:calc(var(--s)*1.4) calc(var(--s)*1) calc(var(--s)*1.1);text-align:center;border-radius:calc(var(--s)*2.4);background:linear-gradient(180deg,rgba(255,253,249,.94),rgba(255,244,238,.94));border:1.5px solid rgba(217,179,102,.4);box-shadow:var(--shadow-s);min-width:0;transition:transform .12s,box-shadow .12s}
.layoutCard:active{transform:scale(.985)}
.layoutCard::before{content:counter(lay);position:absolute;left:calc(var(--s)*.9);top:calc(var(--s)*.9);z-index:3;width:calc(var(--s)*4.2);height:calc(var(--s)*4.2);min-width:26px;min-height:26px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#c99a4c,#8f6224);border:2px solid #f0d9a4;color:#fff4d9;font:800 max(13px,calc(var(--s)*2.3))/1 var(--f-serif);box-shadow:0 2px 4px rgba(90,50,10,.3)}
.layoutCard .preview{position:relative;flex:1 1 0;min-height:0;width:100%;display:block;background:none;border:0;padding:0;border-radius:0;box-shadow:none}
.layoutCard .preview::before,.layoutCard .preview::after{content:"";position:absolute;width:calc(var(--s)*2.6);height:calc(var(--s)*2.6);min-width:14px;min-height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-5.2-8-11a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 20 10c0 5.8-8 11-8 11z' fill='none' stroke='%23e0507a' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;opacity:.9}
.layoutCard .preview::before{left:6%;top:38%}
.layoutCard .preview::after{right:6%;top:58%;transform:rotate(12deg)}
.layoutCard .lt{position:absolute;inset:0;margin:auto;height:100%;width:100%;display:block}
.layoutCard .lt svg{display:block;width:100%;height:100%}
.layoutCard b{display:inline-block;max-width:100%;padding:.18em 1em;border-radius:999px;background:#fbd5df;color:var(--crim);font:800 max(13px,calc(var(--s)*2.05))/1.2 var(--f-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.layoutCard p{font-size:max(11px,calc(var(--s)*1.6));line-height:1.3;color:var(--ink);text-wrap:balance}
.layoutCard.selected{border-color:var(--rose);box-shadow:0 0 0 3px rgba(214,60,105,.35),var(--shadow)}
.layoutCard.selected::after{content:"";position:absolute;right:calc(var(--s)*.9);top:calc(var(--s)*.9);z-index:3;width:calc(var(--s)*4.2);height:calc(var(--s)*4.2);min-width:26px;min-height:26px;border-radius:50%;background:var(--rose) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/62% no-repeat;box-shadow:0 2px 6px rgba(160,30,70,.4)}
.layoutCard.selected b{background:linear-gradient(180deg,#f2607f,#c92c5a);color:#fff}

/* ==========================================================================
   3) PILIH FRAME
   ========================================================================== */
.frameWrap{height:100vh;height:100dvh}
.frameBody{flex:1 1 0;min-height:0;display:flex;flex-direction:column;gap:calc(var(--s)*1.2);margin-top:calc(var(--s)*1.2)}
.frameStageBox{position:relative;flex:1 1 0;min-height:clamp(180px,30dvh,900px);display:flex;flex-direction:column;align-items:center}
.frameStage{position:relative;flex:1 1 0;min-height:0;width:100%;container-type:size;background:none;border:0;padding:0;box-shadow:none;border-radius:0}
.frameStage>canvas,.frameStage>img{position:absolute;inset:0;margin:auto;height:100%;width:auto;max-width:100%;aspect-ratio:2/3;object-fit:contain;border-radius:calc(var(--s)*1.4);box-shadow:0 12px 30px rgba(140,50,80,.28),0 0 0 3px #fff6e6,0 0 0 5px var(--gold);background:#fffaf3}
.frameStageName{margin-top:calc(var(--s)*1);padding:.15em 1em;border-radius:999px;background:rgba(255,248,240,.9);border:1px solid var(--line);font-weight:800;font-size:max(13px,calc(var(--s)*1.9));color:var(--crim);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.framePanel{flex:0 0 auto;display:flex;flex-direction:column;gap:calc(var(--s)*1);padding:calc(var(--s)*1.3) calc(var(--s)*1.6);border-radius:calc(var(--s)*3);background:linear-gradient(180deg,rgba(255,252,247,.96),rgba(255,242,236,.96));border:1.5px solid var(--line);box-shadow:var(--shadow-s);min-width:0}
.frameTools{display:flex;align-items:center;gap:10px}
.frameTools input{flex:1 1 auto;min-height:40px;padding-top:.3em;padding-bottom:.3em}
.chips{display:flex;gap:calc(var(--s)*.9);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px 1px 4px}
.chips::-webkit-scrollbar{display:none}
.chips button{flex:0 0 auto;min-height:36px;padding:.25em 1.1em;border-radius:999px;border:1.5px solid var(--line);background:#fffaf4;color:var(--crim);font-weight:800;font-size:max(13px,calc(var(--s)*1.85));white-space:nowrap}
.chips button.active{background:linear-gradient(180deg,#f2607f,#c92c5a);color:#fff;border-color:#e59a3a}
.frameScroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;margin:0 calc(var(--s)*-.4)}
.frameScroll::-webkit-scrollbar{display:none}
.frameGrid{display:flex;gap:calc(var(--s)*1.2);padding:4px calc(var(--s)*.4) 6px;width:max-content}
.frameGrid .card{position:relative;flex:0 0 auto;width:calc(var(--s)*17);min-width:92px;padding:5px;border-radius:calc(var(--s)*1.8);scroll-snap-align:start;text-align:center;background:#fffaf4}
.frameGrid .card .preview{aspect-ratio:2/3;width:100%;display:block;border-radius:calc(var(--s)*1.3);overflow:hidden;background:#fff3ec;border:0;padding:0}
.frameGrid .card img{width:100%;height:100%;object-fit:cover;display:block}
.frameGrid .card b{display:block;margin-top:3px;font-size:max(11px,calc(var(--s)*1.5));color:var(--crim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frameGrid .card p{display:none}
.frameGrid .card.selected{border-color:var(--rose);box-shadow:0 0 0 3px rgba(214,60,105,.4),var(--shadow-s)}
.frameGrid .card.selected::after{content:"";position:absolute;right:6px;top:6px;width:24px;height:24px;border-radius:50%;background:var(--rose) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/62% no-repeat}
.frameGrid .empty{padding:14px;color:var(--ink-2);font-size:14px}

/* ==========================================================================
   4) PEMBAYARAN QRIS
   ========================================================================== */
.payWrap{align-items:center;text-align:center}
.payHead{position:relative;display:flex;justify-content:center;width:100%}
.payHead .logo{height:clamp(66px,16dvh,210px);width:auto;max-width:60vw}
.payHead .sideNote{display:none}
.payTitle{margin-top:calc(var(--s)*.4)}
.payTitle h2{font:800 max(26px,calc(var(--s)*5.4))/1.1 var(--f-serif);font-style:italic;color:var(--crim)}
.payTitle p{margin-top:.3em;font-size:max(14px,calc(var(--s)*2.7));line-height:1.3;color:var(--ink);font-weight:600}
.payStage{position:relative;width:100%;display:flex;justify-content:center;align-items:flex-end;margin-top:calc(var(--s)*1.4);min-height:calc(var(--s)*46)}
.pMascot{position:absolute;bottom:calc(var(--s)*-8);height:calc(var(--s)*52);width:auto;z-index:1;filter:drop-shadow(0 8px 10px rgba(150,60,80,.2))}
.pMascot.ana{left:calc(var(--s)*-.5)}
.pMascot.fio{right:calc(var(--s)*-.5)}
.qrCard{position:relative;z-index:2;width:calc(var(--s)*37);min-width:230px;max-width:100%;padding:calc(var(--s)*1.6) calc(var(--s)*2) calc(var(--s)*1.4);border-radius:calc(var(--s)*3);background:linear-gradient(180deg,#fffdf9,#fff5ec);border:2px solid var(--gold);box-shadow:0 0 0 4px rgba(255,246,228,.9),0 14px 30px rgba(140,50,80,.25)}
.qrHead{display:flex;flex-direction:column;align-items:center;gap:1px;margin-bottom:calc(var(--s)*.8)}
.qrisMark{font:900 max(22px,calc(var(--s)*4))/1 var(--f-ui);letter-spacing:.14em;color:#111;border-left:.16em solid #111;padding-left:.35em}
.qrHead small{font-size:max(11px,calc(var(--s)*1.55));line-height:1.2;color:#333;font-weight:700}
.qr{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1/1;border-radius:calc(var(--s)*1.2);background:#fff;border:2px dashed #e7c9a6;color:#b99;overflow:hidden;text-align:center;font-weight:800}
.qr img{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;padding:4%;background:#fff}
.qr>span{font:900 max(20px,calc(var(--s)*3.4))/1.1 var(--f-ui);letter-spacing:.18em;color:#d4b48f}
.qr small{display:block;font-size:11px;letter-spacing:0;font-weight:700;word-break:break-all;color:#555}
.qr.filled{border-style:solid;border-color:#eadbc4;border-width:1px}
.qrMeta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:calc(var(--s)*1);flex-wrap:wrap}
.qrTimer{font-size:max(12px,calc(var(--s)*1.7));color:var(--ink-2);font-weight:700}
.qrTimer b{color:var(--crim);font-variant-numeric:tabular-nums}
.orderCard{position:relative;z-index:3;width:min(100%,calc(var(--s)*66),560px);margin-top:calc(var(--s)*3.6);padding:calc(var(--s)*3.2) calc(var(--s)*2) calc(var(--s)*1.4);border-radius:calc(var(--s)*3);background:linear-gradient(180deg,#fffdf9,#fff3ea);border:2px solid var(--gold);box-shadow:var(--shadow)}
.orderTitle{position:absolute;left:50%;top:0;transform:translate(-50%,-52%);white-space:nowrap;display:flex;align-items:center;gap:.5em;padding:.3em 1.4em;border-radius:999px;background:linear-gradient(180deg,#f2607f,#c22b59);color:#fff4e6;font:800 max(16px,calc(var(--s)*2.7))/1.1 var(--f-serif);box-shadow:0 0 0 3px #fdeed8,0 6px 12px rgba(170,30,70,.3)}
.orderTitle .ico{color:#ffd3df}
.orderRows{margin:0;display:grid;gap:0;text-align:left;border-radius:calc(var(--s)*1.6);background:rgba(255,255,255,.7);border:1px solid rgba(217,179,102,.35);padding:0 calc(var(--s)*1.4)}
.orderRows>div{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:calc(var(--s)*1.4);padding:calc(var(--s)*.75) 0;border-bottom:1px solid rgba(217,179,102,.3);font-size:max(14px,calc(var(--s)*2))}
.orderRows>div:last-child{border-bottom:0}
.orderRows dt{display:flex;align-items:center;gap:.6em;color:var(--ink);min-width:0}
.orderRows dt .ico{color:var(--rose-2);width:1.5em;height:1.5em}
.orderRows dd{margin:0;color:var(--ink);font-weight:600;min-width:0;border-left:1px dashed rgba(217,179,102,.6);padding-left:calc(var(--s)*1.4);word-break:break-word}
.orderRows .total dt{color:var(--crim);font-weight:800}
.orderRows .total dd{font:800 max(20px,calc(var(--s)*3.6))/1.1 var(--f-serif);color:var(--crim)}
.orderNote{display:flex;align-items:center;gap:calc(var(--s)*1.2);margin-top:calc(var(--s)*1.2);padding:calc(var(--s)*.9) calc(var(--s)*1.6);border-radius:999px;background:#fde3ea;text-align:left;font-size:max(12px,calc(var(--s)*1.9));color:var(--crim);font-weight:700;line-height:1.25}
.orderNote>.ico:first-child{width:2.2em;height:2.2em;color:var(--rose-2);flex:0 0 auto}
.orderNote span{flex:1 1 auto;min-width:0}
.payActions{width:min(100%,calc(var(--s)*72),620px);margin-top:calc(var(--s)*1.2);display:flex;flex-direction:column;align-items:center;gap:calc(var(--s)*1)}
.payActions .cta{font-size:max(20px,calc(var(--s)*4.1))}
.payRow{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;width:100%}
.payRow .pill:first-child{flex:1 1 40%;max-width:320px;min-height:max(46px,calc(var(--s)*6));font-family:var(--f-serif);font-size:max(16px,calc(var(--s)*2.5))}
.custBox{width:min(100%,calc(var(--s)*66),560px);margin-top:calc(var(--s)*1);text-align:left;border-radius:16px;background:rgba(255,250,244,.86);border:1px solid var(--line);padding:8px 14px}
.custBox summary{cursor:pointer;font-weight:800;color:var(--rose-3);font-size:14px;padding:4px 0}
.privacy{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.payInfo{width:min(100%,calc(var(--s)*66),560px);margin-top:calc(var(--s)*1);font-size:max(12px,calc(var(--s)*1.55));color:var(--ink-2);line-height:1.35}
.paymentMeta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:min(100%,calc(var(--s)*66),560px);margin-top:8px;text-align:left}
.paymentMeta .mini{font-size:11px;padding:.4em .7em}
.paymentMeta .mini b{font-size:12px}

.layoutWrap .ribbon{width:min(100%,calc(var(--s)*70),600px);margin-top:calc(var(--s)*-6);padding-left:calc(var(--s)*3.6);padding-right:calc(var(--s)*3.6)}
.layoutWrap .ribbon h2{font-size:max(22px,calc(var(--s)*4.7));white-space:nowrap}

/* ==========================================================================
   5) KAMERA
   ========================================================================== */
#camera{--gap-x:calc(var(--s)*15);position:relative;overflow:hidden}
#camera.active{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"top" "stage" "sheet";height:100vh;height:100dvh;min-height:0}
.camTop{grid-area:top;position:relative;z-index:8;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:calc(var(--sat) + 8px) max(12px,calc(var(--s)*2.6),var(--sar)) calc(var(--s)*1) max(12px,calc(var(--s)*2.6),var(--sal))}
.camTop .logo{height:clamp(56px,10.6dvh,132px);width:auto;max-width:44vw}
.camTop .backBtn{min-width:calc(var(--s)*17);min-height:max(44px,calc(var(--s)*6.5));font-family:var(--f-serif);font-size:max(15px,calc(var(--s)*2.3))}
.camTopR{display:flex;align-items:center;gap:8px}
.flashBtn{min-height:max(44px,calc(var(--s)*6.5));font-size:max(12px,calc(var(--s)*1.9));text-align:left;line-height:1.1;padding:.3em 1em}
.flashBtn .ico{color:var(--rose-3);width:1.5em;height:1.5em}
.flashBtn.off{opacity:.65}
.camStage{grid-area:stage;position:relative;z-index:2;justify-self:center;width:calc(100% - var(--gap-x)*2);height:100%;min-height:0;border-radius:calc(var(--s)*2.2);overflow:hidden;background:#3a2226;box-shadow:0 0 0 3px rgba(255,248,236,.95),0 0 0 5px rgba(217,179,102,.9),0 14px 34px rgba(90,20,50,.35)}
#cameraFeed{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#2b1a1d}
#cameraFeed.mirrored{transform:scaleX(-1)}
.fallback{position:absolute;inset:0;display:block;background:linear-gradient(160deg,#f7c6d2,#fdebd3 60%,#f3c4b3);color:#fff}
.fallback .ico{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(var(--s)*16);height:calc(var(--s)*16);min-width:64px;min-height:64px;color:#fff;filter:drop-shadow(0 4px 8px rgba(160,50,80,.35))}
.vf{position:absolute;top:calc(var(--s)*1.6);width:calc(var(--s)*8);height:calc(var(--s)*6);border-color:rgba(255,255,255,.95);border-style:solid;border-width:0;pointer-events:none;z-index:3}
.vf.tl{left:calc(var(--s)*1.6);border-top-width:3px;border-left-width:3px;border-top-left-radius:calc(var(--s)*2.2)}
.vf.tr{right:calc(var(--s)*1.6);border-top-width:3px;border-right-width:3px;border-top-right-radius:calc(var(--s)*2.2)}
.hw,.cameraMeta{position:absolute;z-index:4;display:none}
#camera.showMeta .hw{display:block;left:10px;top:10px;padding:.2em .7em;border-radius:999px;background:rgba(255,255,255,.85);font-size:12px;font-weight:800;color:var(--rose-3)}
#camera.showMeta .cameraMeta{display:flex;flex-wrap:wrap;gap:6px;left:10px;bottom:10px}
.count{position:absolute;left:50%;bottom:calc(var(--s)*3);transform:translateX(-50%);z-index:5;width:calc(var(--s)*17);height:calc(var(--s)*17);min-width:72px;min-height:72px;border-radius:50%;display:grid;place-items:center;font:800 calc(var(--s)*9)/1 var(--f-serif);color:var(--rose-2);background:radial-gradient(circle,rgba(255,255,255,.96),rgba(255,244,240,.9));box-shadow:0 0 0 calc(var(--s)*.7) rgba(255,255,255,.55),0 0 0 calc(var(--s)*1) rgba(214,60,105,.75),0 10px 26px rgba(120,30,60,.3);font-size:max(40px,calc(var(--s)*9))}
.count:empty{display:none}
.flash{position:absolute;inset:0;z-index:6;background:#fff;opacity:0;pointer-events:none}
.flash.on{animation:faFlash .5s ease-out}
@keyframes faFlash{0%{opacity:.95}100%{opacity:0}}
.neon{position:absolute;z-index:1;top:calc(var(--sat) + 16dvh);display:none;font:400 max(16px,calc(var(--s)*3.6))/1.05 var(--f-script);color:#fff;text-shadow:0 0 6px #ff8fb1,0 0 14px #ff8fb1}
.neon.left{left:calc(var(--s)*2)}
.neon.right{right:calc(var(--s)*2);text-align:right;color:#8a4a34;text-shadow:none}
.camMascot{grid-area:stage;align-self:end;z-index:3;height:calc(var(--s)*34);width:auto;margin-bottom:calc(var(--s)*-3.4);transform:none;pointer-events:none;filter:drop-shadow(0 8px 10px rgba(120,40,60,.25))}
.camMascot.ana{justify-self:start;margin-left:calc(var(--s)*-.5)}
.camMascot.fio{justify-self:end;margin-right:calc(var(--s)*-.5)}
.camSheet{grid-area:sheet;position:relative;z-index:4;padding:calc(var(--s)*4.6) max(12px,calc(var(--s)*3),var(--sar)) calc(var(--sab) + max(10px,calc(var(--s)*1.6))) max(12px,calc(var(--s)*3),var(--sal));border-radius:calc(var(--s)*5) calc(var(--s)*5) 0 0;background:linear-gradient(180deg,#fff8f0,#fdece1);border-top:3px solid var(--gold);box-shadow:0 -8px 24px rgba(140,50,80,.18);margin-top:calc(var(--s)*-2)}
.camRibbon{position:absolute;left:50%;top:0;transform:translate(-50%,-52%);z-index:7;display:flex;align-items:center;gap:calc(var(--s)*1.2);padding:calc(var(--s)*.9) calc(var(--s)*3.6);border-radius:calc(var(--s)*3) calc(var(--s)*3) calc(var(--s)*3) calc(var(--s)*3);background:linear-gradient(180deg,#f3648a,#d63b68 55%,#bd2a58);box-shadow:0 0 0 3px #fdeed8,0 0 0 5px var(--gold),0 8px 18px rgba(170,30,70,.32);color:#fff5e9;text-align:center;white-space:nowrap;max-width:calc(100% - 20px)}
.camRibbon>div{display:flex;flex-direction:column;min-width:0}
.camRibbon b{font:800 max(18px,calc(var(--s)*4))/1.05 var(--f-serif);text-shadow:0 2px 3px rgba(110,10,40,.4)}
.camRibbon span{font-size:max(11px,calc(var(--s)*1.8));font-weight:700;color:#ffe4ec}
.camRibbon .ico{color:#ffd0dc;width:calc(var(--s)*3.6);height:calc(var(--s)*3.6);min-width:18px;min-height:18px}
.camProgress{display:flex;align-items:center;justify-content:center;gap:calc(var(--s)*1.2);margin-top:calc(var(--s)*.4)}
.segs{display:flex;gap:calc(var(--s)*.7)}
.segs i{display:block;width:calc(var(--s)*4.2);height:calc(var(--s)*1.2);min-width:14px;min-height:6px;border-radius:999px;background:#ecd9cc}
.segs i.on{background:linear-gradient(90deg,#f2607f,#d23a66)}
.take{padding:.15em 1.2em;border-radius:999px;border:1.5px solid var(--gold);background:#fffaf4;color:var(--crim);font-weight:800;font-size:max(13px,calc(var(--s)*2.1));white-space:nowrap}
.cameraFilm{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:calc(var(--s)*1);margin-top:calc(var(--s)*1.2)}
.cameraFilm .shot{position:relative;aspect-ratio:1/1;border-radius:calc(var(--s)*1.5);background:#f3e6dc;border:1.5px solid rgba(217,179,102,.55);display:grid;place-items:center;color:#c9b2a3;overflow:visible}
.cameraFilm .shot>img,.cameraFilm .shot>.ph{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;object-fit:cover}
.cameraFilm .shot .ico{width:44%;height:44%}
.cameraFilm .shot.now{background:#fde6ec;border:2.5px solid var(--rose);color:#e88aa5;box-shadow:0 0 0 3px rgba(214,60,105,.18)}
.cameraFilm .shot .ck{position:absolute;right:-5px;bottom:-5px;width:calc(var(--s)*3.2);height:calc(var(--s)*3.2);min-width:18px;min-height:18px;border-radius:50%;background:var(--rose) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/62% no-repeat;border:2px solid #fff;z-index:2}
.cameraFilm .n{position:absolute;left:0;right:0;bottom:calc(var(--s)*-3.4);text-align:center;font-size:max(11px,calc(var(--s)*1.7));color:var(--ink-2);font-weight:700}
.cameraFilm .shot.now .n{color:var(--rose-2)}
.cameraFilm>div{margin-bottom:calc(var(--s)*3.4)}
.camControls{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:calc(var(--s)*2);margin-top:calc(var(--s)*1.9)}
.camCard{display:flex;align-items:center;gap:calc(var(--s)*1.2);padding:calc(var(--s)*1.2) calc(var(--s)*1.8);border-radius:calc(var(--s)*2.6);background:linear-gradient(180deg,#fffdf9,#fff1e8);border:1.5px solid var(--line);text-align:left;box-shadow:var(--shadow-s);min-width:0}
button.camCard{cursor:pointer}
.camCard>.ico{width:calc(var(--s)*4.2);height:calc(var(--s)*4.2);min-width:22px;min-height:22px;color:var(--crim)}
.camCard.cheer>.ico{color:#c9962f}
.camCard>div{min-width:0}
.camCard b{display:block;font-size:max(13px,calc(var(--s)*2));color:var(--crim);line-height:1.2}
.camCard span{display:block;font-size:max(11px,calc(var(--s)*1.55));color:var(--ink-2);line-height:1.25}
.shutter{position:relative;width:calc(var(--s)*17.5);height:calc(var(--s)*17.5);min-width:74px;min-height:74px;border-radius:50%;border:0;color:#fff;display:grid;place-items:center;background:radial-gradient(circle at 50% 30%,#f56d8a,#d23a66 55%,#b02050);box-shadow:0 0 0 calc(var(--s)*.9) #fff4e2,0 0 0 calc(var(--s)*1.5) var(--gold),0 14px 26px rgba(170,30,70,.4),inset 0 3px 0 rgba(255,255,255,.4)}
.shutter .ico{width:44%;height:44%}
.shutter:active{transform:scale(.96)}
.shutter:disabled{filter:grayscale(.4) opacity(.7)}
.camSettings{position:fixed;z-index:90;left:50%;bottom:calc(var(--sab) + 12px);transform:translate(-50%,120%);width:min(560px,calc(100vw - 20px));max-height:78dvh;overflow:auto;padding:16px;border-radius:24px;background:#fffaf3;border:2px solid var(--gold);box-shadow:0 20px 50px rgba(100,20,50,.4);transition:transform .25s}
.camSettings.show{transform:translate(-50%,0)}
.deviceControls{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.camActionsRow{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.cameraStatus{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}

/* ==========================================================================
   6) PILIH 4 FOTO
   ========================================================================== */
.reviewWrap{align-items:center;text-align:center}
.reviewWrap .wBrand .logo{height:clamp(62px,15dvh,190px)}
.revTitle{margin-top:calc(var(--s)*1)}
.revTitle h2{font:800 max(26px,calc(var(--s)*5.6))/1.1 var(--f-serif);color:var(--crim);display:flex;align-items:center;justify-content:center;gap:.4em}
.revTitle p{margin-top:.3em;font-size:max(14px,calc(var(--s)*2.2));color:var(--ink);font-weight:600}
.orn{display:block;width:calc(var(--s)*24);height:2px;margin:calc(var(--s)*.9) auto 0;background:linear-gradient(90deg,transparent,var(--gold),transparent);position:relative}
.orn::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;transform:translate(-50%,-50%) rotate(45deg);background:var(--gold)}
.reviewStage{position:relative;width:100%;max-width:calc(var(--s)*104);margin-top:calc(var(--s)*2)}
.photoGrid{--cols:4;--pg:calc(var(--s)*1.2);display:flex;flex-wrap:wrap;justify-content:center;gap:var(--pg)}
.photoGrid .card{position:relative;flex:0 0 calc((100% - (var(--cols) - 1)*var(--pg))/var(--cols));aspect-ratio:4/5;padding:0;border-radius:calc(var(--s)*2.2);overflow:hidden;background:#f3e6dc;border:2.5px solid rgba(255,250,244,.95);box-shadow:var(--shadow-s),0 0 0 1.5px rgba(217,179,102,.5);transition:transform .12s}
.photoGrid .card:active{transform:scale(.985)}
.photoGrid .card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.photoGrid .card .n{position:absolute;left:calc(var(--s)*.8);top:calc(var(--s)*.8);z-index:2;width:calc(var(--s)*3.6);height:calc(var(--s)*3.6);min-width:24px;min-height:24px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.92);color:var(--ink);font-weight:800;font-size:max(12px,calc(var(--s)*1.9));box-shadow:0 1px 4px rgba(0,0,0,.25)}
.photoGrid .card .ck{position:absolute;right:calc(var(--s)*.8);top:calc(var(--s)*.8);z-index:2;width:calc(var(--s)*4.2);height:calc(var(--s)*4.2);min-width:28px;min-height:28px;border-radius:50%;border:2px solid #fff;background:rgba(255,255,255,.35);display:none}
.photoGrid .card.selected{border-color:var(--rose);box-shadow:0 0 0 2px var(--rose),0 8px 18px rgba(200,40,90,.32)}
.photoGrid .card.selected .ck{display:block;background:var(--rose) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/62% no-repeat}
.photoGrid .card.selected .n{background:var(--rose);color:#fff}
.stickyNote{position:absolute;right:calc(var(--s)*-.6);bottom:calc(var(--s)*-11.5);z-index:4;transform:rotate(3deg);padding:calc(var(--s)*2) calc(var(--s)*2.6) calc(var(--s)*1.6);background:linear-gradient(180deg,#fdf5cf,#f8e9b4);box-shadow:0 8px 16px rgba(120,80,20,.22);text-align:center;color:#6b3b22}
.stickyNote::before{content:"";position:absolute;left:50%;top:-10px;width:44%;height:18px;transform:translateX(-50%) rotate(-3deg);background:rgba(232,178,120,.6)}
.stickyNote b{display:block;font:400 max(24px,calc(var(--s)*5.2))/1 var(--f-hand);font-weight:700}
.stickyNote .ico{position:absolute;right:8px;bottom:6px;width:1.3em;height:1.3em}
.rMascot{position:absolute;bottom:calc(var(--sab) + 4px);height:calc(var(--s)*34);width:auto;z-index:2;filter:drop-shadow(0 8px 10px rgba(150,60,80,.22));pointer-events:none}
.rMascot.ana{left:calc(var(--s)*1);}
.rMascot.fio{right:calc(var(--s)*1)}
.revActions{position:relative;z-index:5;margin-top:auto;width:min(100%,calc(var(--s)*56),520px);padding-top:calc(var(--s)*2);display:flex;flex-direction:column;align-items:center;gap:calc(var(--s)*1.2)}
.revActions .cta{font-size:max(19px,calc(var(--s)*3.8))}
.revRow{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;width:100%}
.revRow .pill.big{min-width:calc(var(--s)*24)}
.liveWrap .livegrid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:14px;margin-top:14px}
.livehero{min-height:260px;border-radius:22px;background:rgba(255,250,244,.9);border:1.5px solid var(--line);padding:14px;text-align:center}
.livehero video{width:100%;max-height:60dvh;border-radius:16px;background:#000}
.livegrid .pill{width:100%}

/* ==========================================================================
   7) EDIT FOTO
   ========================================================================== */
.editWrap{height:100vh;height:100dvh;padding-left:max(12px,calc(var(--s)*2.4),var(--sal));padding-right:max(12px,calc(var(--s)*2.4),var(--sar))}
.eHead{flex:0 0 auto}
.eHead .logo{height:max(46px,calc(var(--s)*9.5))}
.saveBtn{min-height:max(44px,calc(var(--s)*6));padding-left:1.2em;padding-right:1.2em;font-size:max(15px,calc(var(--s)*2.2))}
.editTitle{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:.4em;margin-top:calc(var(--s)*.4)}
.editTitle h2{font:400 max(30px,calc(var(--s)*6.2))/1 var(--f-script);color:var(--crim)}
.editor{flex:1 1 0;min-height:0;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:calc(var(--s)*2);margin-top:calc(var(--s)*1)}
.canvasCol{position:relative;min-height:0;min-width:0;display:flex;align-items:center;justify-content:center;container-type:size}
.canvas{position:relative;flex:0 0 auto;width:min(100cqw,calc(100cqh*2/3));height:min(100cqh,calc(100cqw*3/2));margin:0 auto;border-radius:calc(var(--s)*1.6);background:#fffaf3;box-shadow:0 12px 30px rgba(140,50,80,.28),0 0 0 3px #fff6e6,0 0 0 5px var(--gold);overflow:hidden;touch-action:none}
.canvas canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.canvas .canvasEmpty{position:absolute;inset:0;display:grid;place-items:center;color:#e6b9c6}
.canvas .canvasEmpty .ico{width:30%;height:30%}
.canvas .frameOverlay{display:none}
.tools{min-height:0;min-width:0;display:flex;flex-direction:column;gap:calc(var(--s)*1.1);padding:calc(var(--s)*1.5);border-radius:calc(var(--s)*3);background:linear-gradient(180deg,rgba(255,252,247,.97),rgba(255,242,236,.97));border:1.5px solid var(--line);box-shadow:var(--shadow-s)}
.toolTabs{flex:0 0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--s)*.9)}
.toolTabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25em;min-height:calc(var(--s)*9.6);min-height:max(56px,calc(var(--s)*9.6));padding:.3em .2em;border-radius:calc(var(--s)*1.8);border:1.5px solid rgba(217,179,102,.45);background:linear-gradient(180deg,#fffdf9,#fff1e8);color:var(--ink);font-weight:700;font-size:max(12px,calc(var(--s)*1.75));line-height:1.1}
.toolTabs button .ico{width:calc(var(--s)*3.4);height:calc(var(--s)*3.4);min-width:22px;min-height:22px;color:var(--crim)}
.toolTabs button.active{background:linear-gradient(180deg,#f2607f,#c92c5a);color:#fff;border-color:#e59a3a;box-shadow:0 5px 10px rgba(190,40,80,.3)}
.toolTabs button.active .ico{color:#fff}
.toolPanels{flex:1 1 0;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.toolPanel{display:none}
.toolPanel.active{display:block}
.toolPanel>label{display:block;font-weight:800;color:var(--crim);margin-bottom:6px;font-size:14px}
.panelHead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:calc(var(--s)*.9) 0 calc(var(--s)*.7)}
.panelHead h3{margin:0;font:800 max(16px,calc(var(--s)*2.5))/1.1 var(--f-serif);color:var(--crim)}
.sliderRow{display:flex;align-items:center;gap:12px;padding:.4em .2em}
.sliderRow output{min-width:3.2em;text-align:right;font-weight:800;color:var(--rose-2);font-variant-numeric:tabular-nums}
.slider{-webkit-appearance:none;appearance:none;flex:1 1 auto;min-width:0;height:8px;border-radius:999px;background:linear-gradient(90deg,#f2607f var(--fill,50%),#efd9d3 var(--fill,50%));outline:0;border:0;padding:0;min-height:0}
.slider::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:#fff;border:3px solid var(--rose);box-shadow:0 3px 8px rgba(160,30,70,.35)}
.slider::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid var(--rose)}
.filters{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--s)*11),1fr));gap:calc(var(--s)*.9)}
.fx{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 4px 6px;border-radius:calc(var(--s)*1.5);border:2px solid transparent;background:transparent;color:var(--ink);font-weight:700;font-size:max(11px,calc(var(--s)*1.5));line-height:1.15;text-align:center;min-width:0}
.fx .th{display:block;width:100%;aspect-ratio:4/5;border-radius:calc(var(--s)*1.2);overflow:hidden;background:#f0dcd6}
.fx .th img{display:block;width:100%;height:100%;object-fit:cover}
.fx b{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.fx.active{border-color:var(--rose);background:#fde6ec;color:var(--rose-3)}
.fx.active::after{content:"";position:absolute;right:2px;top:2px;width:22px;height:22px;border-radius:50%;background:var(--rose) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/62% no-repeat;border:1.5px solid #fff}
.stickerGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--s)*9),1fr));gap:calc(var(--s)*.9)}
.stickerGrid button{aspect-ratio:1/1;border-radius:calc(var(--s)*1.6);border:1.5px solid var(--line);background:#fffdf9;padding:6px;display:grid;place-items:center}
.stickerGrid button img{width:100%;height:100%;object-fit:contain}
.hint{margin-top:8px;font-size:12px;color:var(--ink-2)}
.textInput{margin-bottom:8px}
.textRow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:6px}
.swatches{display:flex;gap:8px}
.swatches button{width:32px;height:32px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1.5px rgba(150,90,60,.35)}
.swatches button.active{box-shadow:0 0 0 3px var(--rose)}
.segBtns{display:flex;border-radius:999px;overflow:hidden;border:1.5px solid var(--line)}
.segBtns button{padding:.35em .9em;background:#fffaf4;font-weight:800;font-size:13px;color:var(--crim);border:0;min-height:36px}
.segBtns button.active{background:var(--rose);color:#fff}
.editNav{flex:0 0 auto;display:flex;gap:calc(var(--s)*1.2);align-items:center}
.editNav .pill{flex:0 0 auto}
.editNav .cta{flex:1 1 auto;width:auto}

/* ==========================================================================
   8) HASIL / CETAK
   ========================================================================== */
.resultWrap{align-items:center;text-align:center;height:100vh;height:100dvh}
.resTitle{flex:0 0 auto;margin-top:calc(var(--s)*.8)}
.resTitle h2{font:400 max(34px,calc(var(--s)*7.4))/1 var(--f-script);color:var(--crim)}
.resTitle p{margin-top:.25em;font-size:max(14px,calc(var(--s)*2.2));color:var(--ink);font-weight:600}
.resBody{flex:1 1 0;min-height:0;width:100%;max-width:calc(var(--s)*104);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:calc(var(--s)*3);align-items:center;margin-top:calc(var(--s)*1)}
.resSheet{position:relative;height:100%;min-height:0;display:flex;align-items:center;justify-content:center;container-type:size}
.resSheet .printPreviewImg{width:min(100cqw,calc(100cqh*2/3));height:auto;max-width:none;max-height:none;aspect-ratio:2/3;object-fit:contain;border-radius:calc(var(--s)*1.2);box-shadow:0 14px 34px rgba(140,50,80,.3),0 0 0 3px #fff6e6,0 0 0 5px var(--gold);background:#fffaf3}
.printSheet{width:min(100cqw,calc(100cqh*2/3));aspect-ratio:2/3;padding:6%;border-radius:calc(var(--s)*1.2);background:#f6c1ce;box-shadow:0 14px 34px rgba(140,50,80,.3),0 0 0 3px #fff6e6,0 0 0 5px var(--gold);display:flex;flex-direction:column;gap:2%}
.printPreviewImg[style*="display: block"]+.printSheet{display:none}
.printSheet .strip{flex:1 1 0;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3%}
.printSheet .strip img{width:100%;height:100%;object-fit:cover;border-radius:6px}
.printSheet .footer{text-align:center;font:800 clamp(10px,1.6vw,16px)/1.2 var(--f-serif);color:#6f4e37}
.printSheet .footer small{font:700 .55em var(--f-ui)}
.resSide{display:flex;flex-direction:column;gap:calc(var(--s)*1.6);min-width:0;text-align:left}
.printStatus{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.printStatus .mini span{font-size:11px}
.resActions{display:flex;flex-direction:column;gap:calc(var(--s)*1.1)}
.resActions .cta{font-size:max(18px,calc(var(--s)*3.2))}
.resActions .pill.big{width:100%}

/* ==========================================================================
   9) DELIVERY & SUKSES
   ========================================================================== */
.deliveryWrap{align-items:center;text-align:center}
.deliveryWrap .resTitle p{max-width:calc(var(--s)*80);margin-left:auto;margin-right:auto;font-size:max(13px,calc(var(--s)*1.9))}
.deliveryCard{display:grid;grid-template-columns:minmax(0,calc(var(--s)*26)) minmax(0,1fr);gap:calc(var(--s)*2.4);align-items:center;width:min(100%,calc(var(--s)*96));margin-top:calc(var(--s)*1.6);text-align:left;padding:calc(var(--s)*2)}
.dQr{text-align:center}
.dQr .qr{max-width:calc(var(--s)*26);margin:0 auto 8px}
.dQr img{max-width:100%;border-radius:12px}
.dForm label{display:block;font-weight:800;color:var(--crim);margin-bottom:4px}
.dForm p{margin:8px 0}
.deliveryGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--s)*1.4);width:min(100%,calc(var(--s)*96));margin-top:calc(var(--s)*1.6)}
.deliveryGrid .card{text-align:center;padding:calc(var(--s)*1.4) 8px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:13px}
.deliveryGrid .card b{font-size:14px;color:var(--crim)}
.deliveryGrid .card p{font-size:12px;color:var(--ink-2)}
.deliveryGrid .preview{width:calc(var(--s)*6);height:calc(var(--s)*6);min-width:36px;min-height:36px;display:grid;place-items:center;border-radius:14px;background:#fde3ea;color:var(--rose-2)}
.deliveryGrid .preview .ico{width:60%;height:60%}
.successWrap{align-items:center;justify-content:center;text-align:center;gap:calc(var(--s)*1.4)}
.successWrap .logo{height:clamp(64px,13dvh,160px);width:auto}
.sChars{position:relative;width:min(100%,calc(var(--s)*70));aspect-ratio:1682/1548;max-height:38dvh}
.sChars img{position:absolute;inset:0;margin:auto;height:100%;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 10px 14px rgba(150,60,80,.2))}
.script.big{font:400 max(40px,calc(var(--s)*9))/1.05 var(--f-script);color:var(--crim)}
.successWrap .lead{max-width:calc(var(--s)*60);font-size:max(15px,calc(var(--s)*2.3));color:var(--ink);font-weight:600}

/* ==========================================================================
   10) OWNER DASHBOARD
   ========================================================================== */
body[data-screen=owner] .scene .corner{display:none}
body[data-screen=owner] .scene{background:linear-gradient(180deg,#fdeee9,#fbdfe4 55%,#f8d4dc)}
#owner{--ow-side:clamp(196px,17.5vw,252px);--ow-pad:clamp(12px,1.6vw,24px)}
.ownShell{display:grid;grid-template-columns:var(--ow-side) minmax(0,1fr);min-height:100vh;min-height:100dvh}
.ownSide{position:sticky;top:0;height:100vh;height:100dvh;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;padding:calc(var(--sat) + 14px) 12px 0;background:linear-gradient(180deg,rgba(255,251,246,.97),rgba(255,236,238,.97));border-right:2px solid rgba(217,179,102,.75);box-shadow:4px 0 22px rgba(160,60,90,.12);scrollbar-width:none;z-index:40}
.ownSide::-webkit-scrollbar{display:none}
.ownLogo{width:min(86%,190px);height:auto;margin:0 auto 14px}
.ownClose{display:none;position:absolute;right:10px;top:calc(var(--sat) + 8px);width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--rose-3);place-items:center}
.ownNav{display:flex;flex-direction:column;gap:2px}
.ownNav button{display:flex;align-items:center;gap:12px;min-height:46px;padding:.45em .9em;border-radius:14px;border:0;background:transparent;color:var(--ink);font:700 15px/1.1 var(--f-ui);text-align:left;position:relative}
.ownNav button .ico{width:24px;height:24px;color:#b64467}
.ownNav button:not(.active)::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:1px;background:rgba(217,179,102,.35)}
.ownNav button.active{background:linear-gradient(180deg,#f3648a,#d23a66 55%,#bd2a58);color:#fff;box-shadow:0 0 0 2px #fdeed8,0 0 0 3.5px var(--gold),0 6px 14px rgba(190,40,80,.3)}
.ownNav button.active .ico{color:#fff}
.ownSideArt{margin-top:auto;flex:0 0 auto;width:calc(100% + 24px);margin-left:-12px;aspect-ratio:440/556;max-height:34dvh;background:url(ui7/decor/owner-side.webp) center bottom/contain no-repeat}
.ownScrim{display:none;position:fixed;inset:0;z-index:75;background:rgba(80,20,40,.42);backdrop-filter:blur(2px)}
.ownMain{min-width:0;padding:0 var(--ow-pad) calc(var(--sab) + 28px)}

/* banner */
#owner{--bh:clamp(150px,15.5vw,224px)}
.ownBanner{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:end;height:calc(var(--bh) + var(--sat));margin:0 calc(var(--ow-pad)*-1);padding:var(--sat) var(--ow-pad) 0;overflow:hidden;
  background:radial-gradient(120% 140% at 8% 30%,rgba(255,215,226,.85),rgba(255,215,226,0) 60%),url(ui7/decor/corner-tr.webp) right top/auto 130% no-repeat,linear-gradient(90deg,rgba(255,225,232,.88),rgba(255,240,236,.6) 55%,rgba(255,222,232,.85))}
.ownPair{grid-column:1;grid-row:1;align-self:end;height:calc(var(--bh) - 6px);width:auto;max-width:none;margin-left:clamp(28px,3.6vw,60px);filter:drop-shadow(0 8px 12px rgba(150,60,80,.22));pointer-events:none;object-fit:contain;object-position:left bottom}
.ownTag{position:absolute;z-index:3;font:400 clamp(14px,1.45vw,22px)/1.05 var(--f-script);color:var(--crim);white-space:nowrap}
.ownTag small{display:block;margin-top:.15em;font:400 clamp(12px,1.2vw,18px)/1.05 var(--f-script);color:#7a3a4d}
.ownTag.ana{left:clamp(4px,.6vw,12px);top:calc(var(--bh)*.16)}
.ownTag.fio{left:calc(var(--ow-pad) + clamp(28px,3.6vw,60px) + (var(--bh) - 6px)*1.74 + 6px);top:calc(var(--bh)*.1);color:#2f5a2f}
.ownTag.fio small{color:#5a6f3f}
.ownHello{grid-column:2;grid-row:1;position:relative;z-index:3;align-self:end;margin:0 clamp(80px,9vw,170px) calc(var(--bh)*.13) calc(var(--bh)*.36);max-width:34em;text-align:left;min-width:0}
.ownHello h1{font:400 clamp(24px,2.7vw,42px)/1.1 var(--f-script);color:#7a2237;text-wrap:balance}
.ownHello p{margin-top:.5em;font-size:clamp(12px,1.05vw,15px);line-height:1.4;color:#5b3a3a}
.ownQuote{grid-column:3;grid-row:1;align-self:end;justify-self:end;margin:0 clamp(6px,1.4vw,24px) calc(var(--bh)*.13) 0;z-index:3;transform:rotate(-6deg);padding:.55em 1.2em;border-radius:22px;background:linear-gradient(180deg,rgba(250,150,178,.88),rgba(232,110,145,.88));color:#fff;font:400 clamp(15px,1.5vw,24px)/1.1 var(--f-script);box-shadow:0 8px 18px rgba(170,40,80,.25);text-align:center}
.ownQuote .ico{color:#ffe0ea}
.ownTop{position:absolute;right:var(--ow-pad);top:calc(var(--sat) + 10px);z-index:5;display:flex;align-items:center;gap:10px}
.ownBell{position:relative;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:rgba(255,250,244,.95);color:var(--rose-3);display:grid;place-items:center;box-shadow:var(--shadow-s)}
.ownBell i{position:absolute;right:-3px;top:-3px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--rose);color:#fff;font:800 11px/20px var(--f-ui);font-style:normal;text-align:center}
.ownUser{display:flex;align-items:center;gap:10px;padding:.35em 1.1em .35em .45em;border-radius:999px;background:rgba(255,250,244,.95);border:1.5px solid var(--line);box-shadow:var(--shadow-s)}
.ownUser img{width:36px;height:36px;border-radius:50%;object-fit:cover;background:#fff;border:1.5px solid var(--gold);padding:2px}
.ownUser div{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.ownUser b{font-size:14px;color:var(--ink);white-space:nowrap;text-transform:capitalize}
.ownUser small{font-size:12px;color:var(--ink-2)}
.ownMenuBtn{display:none;width:44px;height:44px;border-radius:14px;border:1.5px solid var(--line);background:rgba(255,250,244,.95);color:var(--rose-3);place-items:center;box-shadow:var(--shadow-s);position:relative;z-index:6}
.ownSide .ownCust{margin:12px 4px 0;min-height:44px;justify-content:center}

/* kpi */
.ownKpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(150px,.9fr);gap:clamp(10px,1.1vw,16px);margin-top:clamp(10px,1.1vw,16px)}
.kpi{position:relative;display:flex;align-items:center;gap:clamp(8px,.9vw,12px);padding:clamp(10px,1vw,14px);border-radius:22px;background:linear-gradient(180deg,rgba(255,253,250,.97),rgba(255,244,240,.97));border:1.5px solid var(--line);box-shadow:var(--shadow-s);overflow:hidden;min-width:0;container-type:inline-size}
.kIco{flex:0 0 auto;display:grid;place-items:center;width:clamp(38px,20cqw,58px);height:clamp(38px,20cqw,58px);border-radius:16px;background:#dff3e3;color:#2f8a55}
.kIco .ico{width:56%;height:56%}
.k2 .kIco{background:#fddfe7;color:#d23a66}.k3 .kIco{background:#ffe7d2;color:#dc8a3d}.k4 .kIco{background:#f5dcf8;color:#b04bb7}
.kBody{min-width:0;flex:1 1 auto}
.kBody span{display:block;font-size:clamp(11px,5.2cqw,14px);color:var(--ink-2);font-weight:700;line-height:1.2}
.kBody b{display:block;font:800 clamp(15px,8.4cqw,26px)/1.15 var(--f-ui);color:var(--ink);white-space:nowrap}
.kBody small{display:block;font-size:clamp(10.5px,4.4cqw,12.5px);color:var(--ink-3);line-height:1.25}
.spark{flex:0 0 auto;width:clamp(36px,18cqw,64px);height:clamp(22px,10cqw,34px);align-self:flex-end;opacity:.95}
@container (max-width:250px){.spark{display:none}}
.kpiDate{display:flex;align-items:center;min-width:0}
.ownDate{display:flex;align-items:center;gap:8px;width:100%;justify-content:space-between;padding:.75em 1em;border-radius:18px;background:rgba(255,250,244,.92);border:1.5px solid var(--line);font-size:clamp(11px,.95vw,13px);font-weight:700;color:var(--ink);box-shadow:var(--shadow-s);min-width:0}
.ownDate b{flex:1 1 auto;min-width:0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ownDate .ico{color:var(--rose-2);flex:0 0 auto}

/* baris kartu */
.ownRow{display:grid;gap:clamp(10px,1.2vw,16px);margin-top:clamp(10px,1.2vw,16px);align-items:stretch}
.ownRow.r1{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1.2fr)}
.ownRow.r2{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr)}
.ownCard{min-width:0;display:flex;flex-direction:column;padding:clamp(12px,1.1vw,16px);border-radius:22px;background:linear-gradient(180deg,rgba(255,253,250,.97),rgba(255,245,241,.97));border:1.5px solid var(--line);box-shadow:var(--shadow-s)}
.catalogManager .ownCard{border:2px solid rgba(217,179,102,.75)}
.ocHead{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.ocHead h3{margin:0;display:flex;align-items:center;gap:8px;font:800 clamp(16px,1.35vw,19px)/1.15 var(--f-ui);color:#7a2237;flex:1 1 auto;min-width:0}
.ocHead h3 .ico{width:1.4em;height:1.4em;color:var(--rose-2)}
.ocLink{border:0;background:none;color:var(--rose-3);font-weight:700;font-size:13px;display:inline-flex;align-items:center;gap:2px;padding:4px}
.ocSelect select{min-height:38px;padding:.25em 2em .25em .8em;border-radius:12px;font-size:13px;font-weight:700;width:auto}
.ocNote{margin-top:6px;font-size:12px;color:var(--ink-3)}
.addBtn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:.3em 1em;border-radius:12px;border:0;background:linear-gradient(180deg,#f0587f,#c92c5a);color:#fff;font-weight:800;font-size:13px;box-shadow:0 5px 10px rgba(190,40,80,.28),inset 0 1px 0 rgba(255,255,255,.35);white-space:nowrap}
.addBtn .ico{width:1.2em;height:1.2em}

/* grafik */
.chart{width:100%;min-height:200px;flex:1 1 auto}
.chart svg{display:block;width:100%;height:100%;min-height:200px}
.chart .gl{stroke:rgba(150,110,100,.22);stroke-width:1;stroke-dasharray:3 4}
.chart text{font:600 11px var(--f-ui);fill:var(--ink-2)}
.chart .bar{fill:url(#faBarGrad)}
.chart .bar.today{fill:#e8496f}
.chart .empty{fill:var(--ink-3);font-size:13px}

/* booth */
.boothStrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:10px;padding-bottom:4px}
.booth{display:flex;flex-direction:column;gap:6px;padding:8px;border-radius:16px;background:rgba(255,248,244,.9);border:1px solid rgba(217,179,102,.4);min-width:0}
.booth .pic{position:relative;aspect-ratio:4/3.4;border-radius:12px;overflow:hidden;background:linear-gradient(160deg,#ffd9e4,#fff1e2 60%,#f6cdd8);display:grid;place-items:end center}
.booth .pic img{width:88%;height:auto;max-height:100%;object-fit:contain;object-position:bottom}
.booth .pic .ico{position:absolute;left:6px;top:6px;width:22px;height:22px;color:var(--rose-2);opacity:.85}
.booth b{font-size:13px;line-height:1.2;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.booth .chip{align-self:flex-start;gap:5px}
.booth .chip::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.booth ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;font-size:11.5px;color:var(--ink-2)}
.booth li{display:flex;align-items:center;gap:6px;min-width:0}
.booth li .ico{width:16px;height:16px;color:var(--rose-2)}
.booth li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.boothEmpty{padding:18px;text-align:center;color:var(--ink-2);font-size:13px;border-radius:14px;background:rgba(255,246,238,.8);grid-column:1/-1}

/* transaksi */
.txTable{display:flex;flex-direction:column;min-width:0}
.txRow{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr) minmax(0,.9fr) minmax(0,.95fr) minmax(94px,1.2fr);gap:6px;align-items:center;padding:.6em .3em;border-bottom:1px solid rgba(217,179,102,.28);font-size:12px;color:var(--ink);min-width:0}
.txRow.h{font-weight:800;color:var(--ink-2);font-size:12px;border-bottom:1.5px solid rgba(217,179,102,.55)}
.txRow>*{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.txRow .chip{justify-self:start;gap:4px;padding:.15em .55em;font-size:11px}
.txRow button{justify-self:start;min-height:34px;padding:.2em .7em;font-size:11.5px}
.txRow .chip .ico{width:12px;height:12px}
.txEmpty{padding:22px 8px;text-align:center;color:var(--ink-2);font-size:13px}

/* manajemen */
.mgSub{font-size:13px;color:var(--ink);margin:-2px 0 8px;padding-bottom:6px;border-bottom:1px solid rgba(217,179,102,.4)}
.mgSub em{color:var(--ink-3);font-style:italic;font-size:12px}
.mgScroll{flex:1 1 auto;min-height:0;max-height:clamp(300px,46dvh,540px);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;padding-right:2px}
.mgLayouts{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.mgLay{display:flex;flex-direction:column;gap:5px;padding:7px;border-radius:14px;background:rgba(255,249,244,.9);border:1px solid rgba(217,179,102,.4);min-width:0;text-align:center}
.mgLay .lt{aspect-ratio:2/3.1;width:100%;border-radius:8px;overflow:hidden;background:#fff}
.mgLay .lt svg{width:100%;height:100%;display:block}
.mgLay b{font-size:12.5px;line-height:1.2;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mgLay small{font-size:11px;color:var(--ink-3)}
.mgLay .chip{align-self:center}
.mgLay.off{opacity:.72}
.mgAct{display:flex;align-items:center;justify-content:center;gap:2px;margin-top:2px}
.mgAct button,.mgBtn{display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:10px;background:transparent;color:#6b4a4a;padding:0}
.mgAct button:hover,.mgBtn:hover{background:#fde6ec}
.mgAct .ico,.mgBtn .ico{width:18px;height:18px}
.mgAct .del,.mgBtn.del{color:var(--bad)}
.mgAct .drag,.mgBtn.drag{cursor:grab;color:#9a8580}
.mgRows{display:flex;flex-direction:column;gap:2px}
.mgRow{display:grid;grid-template-columns:auto 44px minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:6px 4px;border-bottom:1px solid rgba(217,179,102,.28);min-width:0}
.mgRow.off{opacity:.72}
.mgRow .num{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:#e8dcd9;color:#6b4a4a;font-weight:800;font-size:12px}
.mgRow .th{display:block;width:44px;height:44px;border-radius:10px;overflow:hidden;background:#f3dfe0}
.mgRow .th img{width:100%;height:100%;object-fit:cover;display:block}
.mgRow .th.fxth{width:44px;height:44px;border-radius:10px}
.mgRow .nm{min-width:0}
.mgRow .nm b{display:block;font-size:13px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mgRow .nm small{display:block;font-size:11px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mgRow .acts{display:flex;align-items:center}
.mgRow .acts button{width:30px;height:30px}
.mgMore{position:relative}
.mgMenu{position:absolute;right:0;top:100%;z-index:30;min-width:150px;padding:6px;border-radius:14px;background:#fffdf9;border:1.5px solid var(--line);box-shadow:0 12px 26px rgba(120,40,70,.25);display:none}
.mgMenu.show{display:block}
.mgMenu button{display:flex;align-items:center;gap:8px;width:100%;height:auto;min-height:36px;padding:.3em .7em;border-radius:10px;font-size:13px;font-weight:700;color:var(--ink);text-align:left;justify-content:flex-start}
.mgMenu button .ico{width:16px;height:16px}
.mgRow.dragOver,.mgLay.dragOver{outline:2px dashed var(--rose);outline-offset:1px}
.mgMore-btn{}
.mgShowAll{grid-column:1/-1;margin-top:6px}
.ownCatBar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:8px;font-size:12px}
.ownCatBtns{display:flex;gap:8px}

/* status perangkat */
.devCard{margin-top:clamp(10px,1.2vw,16px)}
.devGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.dev{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:16px;background:rgba(255,248,244,.9);border:1px solid rgba(217,179,102,.4);min-width:0}
.dev h4{display:flex;align-items:center;gap:8px;font:800 15px/1.2 var(--f-ui);color:var(--ink)}
.dev h4 .ico{color:var(--rose-2);width:1.4em;height:1.4em}
.dev h4 .chip{margin-left:auto}
.dev dl{margin:0;display:flex;flex-direction:column;gap:5px}
.dev dl>div{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;border-bottom:1px dashed rgba(217,179,102,.4);padding-bottom:4px}
.dev dt{color:var(--ink-2)}
.dev dd{margin:0;font-weight:800;text-align:right;color:var(--ink);min-width:0;word-break:break-word}
.dev .cta{margin-top:auto;width:100%;min-height:40px;border-radius:12px;box-shadow:0 5px 10px rgba(190,40,80,.25);font:800 14px var(--f-ui)}
.ownStats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin-top:12px}
.stat{display:flex;flex-direction:column;gap:2px;padding:.5em .8em;border-radius:14px;background:rgba(255,246,238,.85);border:1px solid var(--line);font-size:11.5px;color:var(--ink-2)}
.stat strong{font-size:14px;color:var(--ink);word-break:break-word}

/* bagian detail */
.ownH{display:flex;align-items:center;gap:10px;margin:clamp(22px,2.4vw,34px) 0 12px;font:800 clamp(20px,1.9vw,26px)/1.1 var(--f-serif);color:#7a2237;scroll-margin-top:12px}
.ownH .ico{width:1.2em;height:1.2em;color:var(--rose-2)}
.ownGrid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:14px;align-items:start}
.ownGrid2.one{grid-template-columns:minmax(0,1fr)}
.ownGrid2 .card{border-radius:22px;padding:clamp(14px,1.2vw,18px);min-width:0}
.ownGrid2 .card h3{font:800 18px/1.2 var(--f-ui);color:#7a2237}
.ownGrid2 .card label.subtle{display:block;margin:10px 0 4px;font-weight:700}
.ownPayField,.ownPrintField{margin-bottom:6px}
.ownerPrintGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ownerPrintHint{margin:8px 0 10px;padding:10px 12px;border-radius:12px;background:#fff3dc;color:#7a5a1e;font-size:12.5px;line-height:1.4}
.staticQrisPreview{display:grid;place-items:center;min-height:90px;margin:6px 0;border-radius:14px;border:1.5px dashed rgba(217,179,102,.7);background:#fffdf9;color:var(--ink-3);font-size:13px;overflow:hidden}
.staticQrisPreview img{max-width:180px;width:100%;height:auto}
.cloudGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:10px 0}
.cloudMetric{display:flex;flex-direction:column;gap:2px;padding:.55em .7em;border-radius:14px;background:rgba(255,246,238,.9);border:1px solid var(--line);font-size:11.5px;color:var(--ink-2)}
.cloudMetric b{font-size:16px;color:var(--rose-3)}
.cloudInputs{margin-top:8px}
.gate{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px dashed rgba(217,179,102,.4);font-size:13px}
.gate:last-child{border-bottom:0}
.gate .dot{flex:0 0 auto;width:10px;height:10px;margin-top:5px;border-radius:50%;background:var(--ok)}
.matrix{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.platform{padding:.6em .8em;border-radius:14px;background:rgba(255,246,238,.9);border:1px solid var(--line);display:flex;flex-direction:column;gap:2px;font-size:13px}
.ownFoot{display:flex;justify-content:flex-end;margin-top:24px}

/* ==========================================================================
   RESPONSIF
   - default          : iPad portrait (768/820 lebar)
   - landscape tablet : (min-width:900px) & landscape & (min-height:600px)
   - phone            : max-width:599px
   - layar pendek     : max-height:599px (iPhone landscape) → mode alir
   ========================================================================== */

/* per-layar: hilangkan neon corner atas bila layar punya header sendiri */
body[data-screen=layouts] .scene .corner.tl,body[data-screen=layouts] .scene .corner.tr,
body[data-screen=frames] .scene .corner.tl,body[data-screen=frames] .scene .corner.tr,
body[data-screen=editor] .scene .corner.tl,body[data-screen=editor] .scene .corner.tr,
body[data-screen=preview] .scene .corner.tl,body[data-screen=preview] .scene .corner.tr,
body[data-screen=delivery] .scene .corner.tl,body[data-screen=delivery] .scene .corner.tr,
body[data-screen=live] .scene .corner.tl,body[data-screen=live] .scene .corner.tr,
body[data-screen=success] .scene .corner.tl,body[data-screen=success] .scene .corner.tr{opacity:.0}
body[data-screen=layouts] .scene .corner.bl,body[data-screen=layouts] .scene .corner.br,
body[data-screen=editor] .scene .corner.bl,body[data-screen=editor] .scene .corner.br,
body[data-screen=frames] .scene .corner.bl,body[data-screen=frames] .scene .corner.br{opacity:.55}
body[data-screen=camera] .scene .corner.bl,body[data-screen=camera] .scene .corner.br{opacity:0}

/* ---------------------------------------------------------------- landscape tablet */
@media (min-width:900px) and (orientation:landscape) and (min-height:600px){
  :root{--s:min(.72vw,.98dvh)}
  .scene .corner.tl{width:calc(var(--u)*.32)}
  .scene .corner.tr{width:calc(var(--u)*.27)}

  /* welcome */
  .welcomeWrap{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);grid-template-rows:auto auto auto auto minmax(0,1fr) auto;column-gap:calc(var(--s)*3);align-items:center;justify-items:center;height:100vh;height:100dvh;min-height:0}
  .wBrand{grid-column:1;grid-row:1}
  .wTitle{grid-column:1;grid-row:2}
  .wCta{grid-column:1;grid-row:3;margin-top:calc(var(--s)*4.5);width:min(100%,calc(var(--s)*70))}
  .wNotice{grid-column:1;grid-row:4;width:min(100%,calc(var(--s)*68))}
  .wChars{grid-column:2;grid-row:1/6;align-self:stretch;margin-bottom:0;min-height:0}
  .wChars img{max-width:100%}
  .wTiles{grid-column:1/3;grid-row:6;width:min(100%,calc(var(--s)*108));margin-top:calc(var(--s)*1)}
  .wTiles li{flex-direction:row;text-align:left;gap:calc(var(--s)*1.4);padding:calc(var(--s)*1) calc(var(--s)*1.6)}
  .wTiles li>div,.wTiles li>b,.wTiles li>span{}
  .wTiles li{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;align-items:center;column-gap:calc(var(--s)*1.2)}
  .wTiles li .ico{grid-row:1/3}
  .wTiles li b{align-self:end}
  .wTiles li span{align-self:start}
  .wBrand .logo{height:clamp(60px,14dvh,150px)}
  .wScript{font-size:max(30px,calc(var(--s)*5.4))}

  /* layout */
  .lHead{height:calc(var(--s)*27)}
  .lMascot{height:calc(var(--s)*29)}
  .lMascot.ana{left:calc(var(--s)*12)}
  .lMascot.fio{right:calc(var(--s)*12)}
  .layoutGrid{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:minmax(calc(var(--s)*26),1fr)}
  .layoutCard{padding-top:calc(var(--s)*1.6)}

  /* frame */
  .frameBody{flex-direction:row;align-items:stretch}
  .frameStageBox{flex:1 1 55%;min-height:0}
  .framePanel{flex:1 1 45%;min-height:0}
  .frameScroll{flex:1 1 0;min-height:0;overflow-y:auto;overflow-x:hidden;margin:0}
  .frameGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:auto}
  .frameGrid .card{width:auto;min-width:0}

  /* qris */
  .payWrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"head head" "title order" "stage order" "stage actions" "stage cust" "stage info" "stage meta";grid-template-rows:auto auto auto auto auto auto 1fr;column-gap:calc(var(--s)*4);align-content:start;align-items:start;justify-items:center;min-height:100dvh}
  .payHead{grid-area:head}.payHead .logo{height:clamp(54px,11dvh,120px)}
  .payTitle{grid-area:title;align-self:end;width:calc(100% - var(--s)*7);justify-self:end}
  .payTitle h2{font-size:max(24px,calc(var(--s)*4.3));text-shadow:0 0 10px rgba(255,238,242,.95),0 0 3px rgba(255,238,242,.9)}
  .payStage{grid-area:stage;min-height:calc(var(--s)*48);align-self:center;margin-top:0}
  .pMascot{height:calc(var(--s)*31);bottom:calc(var(--s)*-3)}
  .orderCard{grid-area:order;margin-top:calc(var(--s)*5);align-self:end}
  .payActions{grid-area:actions}
  .custBox{grid-area:cust}
  .payInfo{grid-area:info}
  .paymentMeta{grid-area:meta}
  .qrCard{width:calc(var(--s)*35)}

  /* kamera */
  #camera{--gap-x:calc(var(--s)*2)}
  #camera.active{grid-template-columns:minmax(0,1.55fr) minmax(320px,1fr);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"top top" "stage sheet"}
  .camStage{width:calc(100% - var(--gap-x)*2 - var(--sal));margin-left:max(12px,var(--sal));margin-bottom:calc(var(--sab) + 10px);justify-self:stretch;width:auto;margin-right:calc(var(--s)*1.4)}
  .camSheet{align-self:stretch;margin-top:0;border-radius:calc(var(--s)*5) 0 0 0;padding-top:calc(var(--s)*8);display:flex;flex-direction:column;justify-content:center;gap:calc(var(--s)*1.2)}
  .camRibbon{top:calc(var(--s)*3.4);transform:translate(-50%,0)}
  .cameraFilm{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:calc(var(--s)*4)}
  .camControls{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"shutter shutter" "retake cheer";row-gap:calc(var(--s)*2.6);column-gap:calc(var(--s)*1.4);margin-top:calc(var(--s)*2.4)}
  .camControls .shutter{grid-area:shutter;justify-self:center}
  .camControls .camCard.retake{grid-area:retake}
  .camControls .camCard.cheer{grid-area:cheer}
  .camMascot{height:calc(var(--s)*24);transform:translateY(8%);align-self:end;margin-bottom:calc(var(--sab) + 10px)}
  .camMascot.fio{justify-self:end;margin-right:calc(var(--s)*2)}
  .camMascot.ana{margin-left:calc(var(--s)*.4)}
  .camCard span{display:none}

  /* review */
  .photoGrid{--cols:7}
  .reviewStage{margin-top:calc(var(--s)*3)}
  .stickyNote{right:calc(var(--s)*4);bottom:calc(var(--s)*-14)}
  .rMascot{height:calc(var(--s)*30)}

  /* editor */
  .editor{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
  .toolTabs{grid-template-columns:repeat(8,minmax(0,1fr))}
  .toolTabs button{min-height:max(56px,calc(var(--s)*8.6))}
  .filters{grid-template-columns:repeat(auto-fill,minmax(calc(var(--s)*12.5),1fr))}

  /* hasil */
  .resBody{max-width:calc(var(--s)*110)}
}

/* ---------------------------------------------------------------- phone */
@media (max-width:599px){
  :root{--s:min(1vw,.5dvh)}
  .wrap{padding-left:max(14px,var(--sal));padding-right:max(14px,var(--sar))}
  .scene .corner.tl,.scene .corner.tr{display:none}
  .scene .corner.bl{width:calc(var(--u)*.24)}
  .scene .corner.br{width:calc(var(--u)*.18)}
  .cta{min-height:56px;font-size:20px}
  .faHeroCta{min-height:60px;font-size:22px}
  .pill.big{min-height:48px;font-size:17px}
  .ribbon{width:100%;padding:8px 26px 9px}
  .ribbon h2{font-size:23px}
  .ribbon p{font-size:12.5px}
  .stepHead .logo{height:52px}
  .stepHead .backBtn,.stepHead .stepSpacer{min-width:44px}
  .backBtn span{font-size:14px}
  .sideNote{font-size:clamp(14px,4vw,17px);max-width:34%}

  /* welcome */
  .wBrand{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:6px}
  .wBrand .sideNote{display:block}
  .wBrand .logo{height:clamp(66px,11.4dvh,110px);max-width:none}
  .wScript{font-size:32px}
  .wH1{font-size:25px}
  .wTitle .lead{font-size:14px;max-width:92%}
  .wChars{min-height:170px;margin-bottom:-18px}
  .wChars img{max-width:112%}
  .wCta{width:100%}
  .wCta .bowDeco{width:54px;height:26px;top:-19px}
  .wNotice{width:100%;margin-top:12px;padding:8px 12px;gap:10px}
  .wNotice .qrIco{width:40px;height:40px}
  .wNotice b{font-size:14px}.wNotice span{font-size:12px}
  .wTiles{margin-top:10px;gap:8px;width:100%}
  .wTiles li{padding:8px 4px}
  .wTiles li>.ico{width:30px;height:30px}
  .wTiles li b{font-size:12.5px}
  .wTiles li span{display:none}
  .wFoot{display:block;font-size:17px}

  /* layouts (mode alir) */
  .layoutWrap{height:auto;min-height:100dvh}
  .lHead{height:150px}
  .lHead .logo{height:70px;min-height:0;margin-top:0}
  .lHead .backBtn{top:2px;min-height:40px;padding:.3em .8em}
  .lMascot{height:112px}
  .lMascot.ana{left:0}.lMascot.fio{right:0}
  .lHead .sideNote{display:none}
  .ribbon{margin-top:-14px}
  .layoutWrap .ribbon{width:100%;margin-top:-14px}
  .layoutWrap .ribbon h2{font-size:23px}
  .categoryBar button{min-height:42px;font-size:13px}
  .layoutScroll{flex:none;overflow:visible;margin-top:10px}
  .layoutGrid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(232px,auto);gap:10px;min-height:0}
  .layoutCard{padding:12px 8px 10px}
  .layoutCard::before,.layoutCard.selected::after{width:28px;height:28px;left:6px;top:6px;font-size:14px}
  .layoutCard.selected::after{left:auto;right:6px}
  .layoutCard .preview{min-height:130px}
  .layoutCard b{font-size:14px}
  .layoutCard p{font-size:12px}
  .bottomBar{position:sticky;bottom:0;padding:14px 0 calc(var(--sab) + 10px);margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px;background:linear-gradient(180deg,rgba(253,232,234,0),rgba(253,232,234,.92) 34%)}
  .bottomBar .cta{width:100%}

  /* frames */
  .frameWrap{height:auto;min-height:100dvh}
  .frameBody{flex:none}
  .frameStageBox{flex:none;height:min(46dvh,420px);min-height:250px}
  .frameGrid .card{width:96px}

  /* qris */
  .payHead .logo{height:clamp(66px,11.4dvh,110px)}
  .payHead .sideNote{display:none}
  .payTitle h2{font-size:26px}
  .payTitle p{font-size:14px}
  .payStage{min-height:0;margin-top:12px;padding:0 0 8px}
  .pMascot{height:min(34vw,150px);bottom:-22px}
  .pMascot.ana{left:-8px}.pMascot.fio{right:-8px}
  .qrCard{width:min(62vw,270px);min-width:0;padding:12px 14px 10px}
  .qrisMark{font-size:22px}
  .orderCard{margin-top:30px;padding:26px 12px 12px;width:100%}
  .orderTitle{font-size:16px;padding:.3em 1em}
  .orderRows>div{font-size:14px;padding:9px 0;gap:10px}
  .orderRows dd{padding-left:10px}
  .orderRows .total dd{font-size:20px}
  .orderNote{font-size:12.5px;padding:8px 12px}
  .payActions{width:100%}
  .payRow .pill{flex:1 1 44%;font-size:14px}
  .privacy{grid-template-columns:1fr}
  .payInfo,.custBox,.paymentMeta{width:100%}

  /* kamera */
  #camera{--gap-x:10px}
  .camTop{padding-bottom:6px}
  .camTop .logo{height:48px}
  .camTop .backBtn{min-width:0;padding:.3em .8em;min-height:42px}
  .camTop .backBtn span{display:inline}
  .flashBtn{min-height:42px;padding:.25em .7em;font-size:11.5px}
  .flashBtn span{white-space:nowrap}
  .neon{display:block;top:calc(var(--sat) + 76px);font-size:18px;z-index:7;pointer-events:none}
  .camMascot{height:104px}
  .camSheet{padding:32px 12px calc(var(--sab) + 10px)}
  .camRibbon{padding:6px 22px;border-radius:22px}
  .camRibbon b{font-size:18px}
  .camRibbon span{font-size:11px}
  .camRibbon .ico{width:20px;height:20px}
  .segs i{width:16px;height:6px}
  .take{font-size:13px}
  .cameraFilm{gap:6px;margin-top:8px}
  .cameraFilm>div{margin-bottom:16px}
  .cameraFilm .n{bottom:-16px;font-size:11px}
  .camControls{gap:10px}
  .camCard{padding:8px 10px;gap:8px;border-radius:16px}
  .camCard span{display:none}
  .camCard b{font-size:12.5px}
  .camCard>.ico{width:22px;height:22px}
  .shutter{width:74px;height:74px}
  .count{width:84px;height:84px;font-size:44px;bottom:16px}

  /* review */
  .reviewWrap .wBrand .logo{height:clamp(62px,10.6dvh,100px)}
  .revTitle h2{font-size:26px}
  .revTitle p{font-size:14px}
  .photoGrid{--cols:3;--pg:8px}
  .photoGrid .card{border-radius:14px}
  .photoGrid .card .n{width:24px;height:24px;font-size:12px}
  .photoGrid .card .ck{width:28px;height:28px}
  .stickyNote{position:relative;right:auto;bottom:auto;display:inline-block;margin:14px auto 0;transform:rotate(-2deg);padding:12px 20px}
  .stickyNote b{font-size:26px}
  .rMascot{height:30vw;max-height:126px;bottom:calc(var(--sab) + 6px)}
  .revActions{width:100%;padding-left:calc(24vw - 8px);padding-right:calc(24vw - 8px);padding-top:12px}
  .revActions .cta{font-size:17px;padding-left:.7em;padding-right:.7em;min-height:54px}
  .revRow .pill.big{min-width:0;font-size:14px;min-height:44px}
  .liveWrap .livegrid{grid-template-columns:1fr}

  /* editor */
  .editWrap{min-height:700px}
  .eHead .logo{height:46px}
  .eHead .backBtn.round{min-width:44px;width:44px;padding:0}
  .eHead .backBtn.round span{display:none}
  .editTitle h2{font-size:32px}
  .editor{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:8px}
  .canvasCol{min-height:150px}
  .tools{padding:8px;gap:6px;border-radius:20px}
  .toolTabs{display:flex;overflow-x:auto;gap:6px;scrollbar-width:none;padding:2px}
  .toolTabs::-webkit-scrollbar{display:none}
  .toolTabs button{flex:0 0 66px;min-height:56px;font-size:11.5px;padding:.3em .1em}
  .toolPanels{flex:0 0 auto;height:clamp(132px,22dvh,210px)}
  .filters{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
  .filters::-webkit-scrollbar{display:none}
  .fx{flex:0 0 78px;font-size:11.5px}
  .stickerGrid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .panelHead h3{font-size:16px}
  .editNav{gap:8px}
  .editNav .pill.big{min-height:48px;padding:.4em .9em;font-size:15px}
  .editNav .cta.small{min-height:48px;font-size:17px}

  /* hasil */
  .resultWrap{height:auto;min-height:100dvh}
  .resTitle h2{font-size:36px}
  .resBody{grid-template-columns:1fr;gap:14px;margin-top:8px}
  .resSheet{height:min(44dvh,400px)}
  .printStatus{grid-template-columns:1fr 1fr}
  .resActions .cta{font-size:18px}
  .deliveryCard{grid-template-columns:1fr;padding:14px}
  .dQr .qr{max-width:150px}
  .deliveryGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sChars{max-height:34dvh}
  .script.big{font-size:42px}
}


/* ---------------------------------------------------------------- iPad portrait */
@media (min-width:600px) and (max-width:1100px) and (orientation:portrait){
  .editor{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  .editNav{gap:8px}
  .editNav .cta{min-width:0;white-space:nowrap;font-size:14.5px;padding-left:.5em;padding-right:.5em;gap:.35em}
  .editNav .cta .chev{width:22px;height:22px;flex:0 0 auto}
  .editNav .pill.big{padding-left:.75em;padding-right:.75em;font-size:14px}
}


/* tab kategori layout: semua tab terlihat di iPad (tanpa scroll); di iPhone dibuat 3 kolom */
@media (min-width:600px){
  .categoryBar{overflow-x:visible;gap:calc(var(--s)*.8);scroll-snap-type:none}
  .categoryBar button{flex:1 1 0;min-width:0;padding:.4em .45em;gap:.35em;font-size:clamp(11.5px,1.35vw,16px)}
  .categoryBar button .ico{width:1.25em;height:1.25em}
}
@media (max-width:599px){
  .categoryBar{flex-wrap:wrap;overflow:visible;gap:6px;scroll-snap-type:none}
  .categoryBar button{flex:1 1 30%;min-width:0;padding:.35em .5em;min-height:40px;font-size:12.5px;gap:.35em}
}


/* ---------------------------------------------------------------- portrait: kamera penuh selebar layar (referensi) */
@media (orientation:portrait){
  #camera.active{grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"stage" "sheet"}
  .camTop{grid-area:1/1;align-self:start;position:absolute;left:0;right:0;top:0;background:linear-gradient(180deg,rgba(255,249,243,.95) 0,rgba(255,249,243,.72) 60%,rgba(255,249,243,0) 100%);padding-bottom:calc(var(--s)*3.4)}
  .camStage{width:100%;margin:0;border-radius:0;box-shadow:none;justify-self:stretch}
  .neon{display:none!important}
  .vf{top:calc(var(--s)*13)}
  .camMascot.ana{height:calc(var(--s)*38);margin-left:calc(var(--s)*-2)}
  .camMascot.fio{height:calc(var(--s)*34);margin-right:calc(var(--s)*-1)}
}
@media (max-width:599px) and (orientation:portrait){
  .camMascot.ana{height:calc(var(--s)*36);margin-left:-8px}
  .camMascot.fio{height:calc(var(--s)*31);margin-right:-4px}
  .vf{top:72px}
}

/* ---------------------------------------------------------------- portrait tablet: Pilih 4 Foto = 4 kolom + catatan 4/4 di baris kedua */
@media (min-width:600px) and (orientation:portrait){
  .reviewStage{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--s)*1.4);max-width:calc(var(--s)*100)}
  .photoGrid{display:contents}
  .photoGrid .card{flex:none;width:auto}
  .stickyNote{position:relative;right:auto;bottom:auto;grid-column:4;grid-row:2;align-self:center;justify-self:center;margin:0;transform:rotate(3deg)}
  .revActions{margin-top:calc(var(--s)*2.2)}
  .revRow{flex-wrap:nowrap}
  .revRow .pill.big{min-width:0;flex:0 1 auto}
}

/* ---------------------------------------------------------------- layar pendek (iPhone landscape, dsb.) */
@media (max-height:599px) and (orientation:landscape){
  :root{--s:min(.7vw,1.2dvh)}
  .wrap{padding-top:calc(var(--sat) + 6px)}
  .welcomeWrap,.layoutWrap,.frameWrap,.editWrap,.resultWrap,.payWrap{height:auto;min-height:100dvh}
  .layoutScroll{flex:none;overflow:visible}
  .layoutGrid{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(200px,auto)}
  .lHead{height:120px}
  .lHead .logo{height:60px}
  .lMascot{height:96px}
  .wChars{min-height:150px}
  .bottomBar{position:sticky;bottom:0}
  .frameBody{flex-direction:row}
  .frameStageBox{min-height:260px}
  .frameScroll{overflow-y:auto;max-height:44dvh}
  .frameGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:auto}
  .frameGrid .card{width:auto}
  #camera.active{grid-template-columns:minmax(0,1.4fr) minmax(280px,1fr);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"top top" "stage sheet"}
  .camSheet{margin-top:0;border-radius:24px 0 0 0;padding-top:34px;overflow:auto}
  .camRibbon{top:8px;transform:translate(-50%,0)}
  .camStage{margin:0 10px calc(var(--sab) + 6px) max(10px,var(--sal));width:auto;justify-self:stretch}
  .cameraFilm{grid-template-columns:repeat(4,minmax(0,1fr))}
  .camMascot{display:none}
  .camTop .logo{height:40px}
  .photoGrid{--cols:7}
  .rMascot{display:none}
  .editor{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
  .editWrap{min-height:420px}
  .toolTabs{grid-template-columns:repeat(4,minmax(0,1fr))}
  .resBody{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .resSheet{height:60dvh}
}

/* ---------------------------------------------------------------- OWNER */
@media (max-width:1279px){
  .ownRow.r1{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"chart booth" "tx tx"}
  .ownRow.r1>.chartCard{grid-area:chart}.ownRow.r1>.boothCard{grid-area:booth}.ownRow.r1>.txCard{grid-area:tx}
  .ownRow.r2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"lay lay" "frm flt"}
  .ownRow.r2>#ownLayouts{grid-area:lay}.ownRow.r2>#ownFrames{grid-area:frm}.ownRow.r2>#ownFilters{grid-area:flt}
  .ownQuote{display:none}
  .ownKpis{grid-template-columns:repeat(4,minmax(0,1fr))}
  .kpiDate{grid-column:1/-1;order:-1;justify-content:flex-end}
  .ownDate{width:auto;min-width:230px}
}
@media (max-width:899px){
  .ownShell{display:block}
  .ownSide{position:fixed;left:0;top:0;bottom:0;height:auto;width:min(84vw,300px);transform:translateX(-104%);transition:transform .25s ease;z-index:80;box-shadow:none;visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s}
  .ownSide.open{transform:none;box-shadow:8px 0 30px rgba(80,20,40,.35);visibility:visible;transition:transform .25s ease,visibility 0s}
  .ownScrim.show{display:block}
  .ownClose{display:grid}
  .ownMenuBtn{display:grid;position:absolute;left:var(--ow-pad);top:calc(var(--sat) + 10px)}
  #owner{--bh:clamp(170px,26vw,210px)}
  .ownPair{margin-left:clamp(44px,8vw,72px)}
  .ownTag{display:none}
  .ownHello{margin-left:calc(var(--bh)*.05)}
  .ownKpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpiDate{grid-column:1/-1}
}
@media (max-width:759px){
  .ownRow.r1,.ownRow.r2{grid-template-columns:minmax(0,1fr);grid-template-areas:none}
  .ownRow.r1>*,.ownRow.r2>*{grid-area:auto!important}
  .devGrid{grid-template-columns:1fr}
}
@media (max-width:599px){
  #owner{--ow-pad:12px}
  .ownBanner{height:auto;padding:calc(var(--sat) + 60px) 12px 10px;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;overflow:hidden}
  .ownPair{position:static;grid-column:1;grid-row:1;height:104px;width:auto;margin:0;align-self:end}
  .ownHello{grid-column:2;grid-row:1;margin:0;align-self:center}
  .ownHello h1{font-size:28px}
  .ownHello p{font-size:12px}
  .ownTop{right:12px;left:64px;justify-content:flex-end;gap:8px;top:calc(var(--sat) + 8px)}
  .ownUser{padding-right:.7em}
  .ownUser small{display:none}
  .ownKpis{gap:8px}
  .kpi{padding:10px;gap:8px}
  .kBody b{font-size:clamp(15px,6.4cqw,20px)}
  .boothStrip{grid-template-columns:repeat(auto-fit,minmax(96px,1fr))}
  .mgLayouts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mgRow{grid-template-columns:auto 40px minmax(0,1fr) auto}
  .mgRow .chip{display:none}
  .mgScroll{max-height:60dvh}
  .ownGrid2{grid-template-columns:minmax(0,1fr)}
  .cloudGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ownerPrintGrid{grid-template-columns:1fr}
  .txRow{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) minmax(0,1.1fr);font-size:12px}
  .txRow .c-date,.txRow .c-ses{display:none}
  .ownH{font-size:20px}
}
/* cetak 4×6: yang dicetak sama dengan preview (artifact berbingkai bila tersedia; kalau tidak, lembar HTML lama) */
@media print{
  @page{size:4in 6in;margin:0}
  html,body{background:#fff!important;margin:0!important;min-height:0!important}
  body *{visibility:hidden}
  .scene,.kioskGear,.toast,.modal,.installTip{display:none!important}
  .printPreviewImg[style*="display: block"]{visibility:visible!important;position:fixed!important;left:0!important;top:0!important;width:4in!important;height:6in!important;max-width:none!important;max-height:none!important;aspect-ratio:auto!important;object-fit:fill!important;margin:0!important;border-radius:0!important;box-shadow:none!important}
  .printSheet,.printSheet *{visibility:visible}
  .printSheet{position:absolute!important;left:0!important;top:0!important;width:4in!important;height:6in!important;max-height:none!important;aspect-ratio:auto!important;border-radius:0!important;padding:.18in!important;box-shadow:none!important}
}

/* ==========================================================================
   6) Elemen yang dibuat oleh JS: lembar edit, stiker, teks, placeholder
   ========================================================================== */
.sheet{position:relative}
.sheet>canvas,.sheet>.lyFrame{position:absolute;inset:0;width:100%;height:100%;display:block;box-shadow:none;border-radius:0;margin:0;max-width:none;aspect-ratio:auto}
.lyFrame{pointer-events:none;object-fit:fill;user-select:none;-webkit-user-drag:none}
.lyOv{position:absolute;inset:0;overflow:hidden;touch-action:none}
#frameStage .lyOv,.sheetView .lyOv{pointer-events:none}
.sheetView{position:absolute;inset:0;margin:auto;width:min(100cqw,calc(100cqh*2/3));height:min(100cqh,calc(100cqw*3/2));border-radius:calc(var(--s)*1.4);background:#fffaf3;box-shadow:0 12px 30px rgba(140,50,80,.28),0 0 0 3px #fff6e6,0 0 0 5px var(--gold);overflow:hidden}
.lyOv .stk{position:absolute;z-index:2;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none}
.lyOv .stk img{display:block;width:100%;height:auto;pointer-events:none;-webkit-user-drag:none}
.lyOv .txt{position:absolute;z-index:3;transform:translate(-50%,-50%);white-space:nowrap;line-height:1.1;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;text-shadow:0 1px 3px rgba(0,0,0,.28);padding:.1em .25em}
.lyOv .sel{outline:2px dashed var(--rose);outline-offset:3px;border-radius:6px}
.lyOv .stkDel{position:absolute;right:-14px;top:-14px;width:28px;height:28px;min-height:0;border-radius:50%;background:var(--rose);color:#fff;border:2px solid #fff;font:800 18px/1 var(--f-ui);display:grid;place-items:center;padding:0;box-shadow:0 2px 6px rgba(0,0,0,.3);cursor:pointer}
.lyOv .txt .stkDel{transform:none}
.fx .phTh{display:block;width:100%;height:100%;background:radial-gradient(circle at 34% 30%,#ffe6d5 0 20%,transparent 21%),linear-gradient(160deg,#f7b7c8,#f3d9a8 60%,#cfe3cc)}
.frameGrid .preview.noimg{background:linear-gradient(160deg,#f7c6d2,#fdebd3 60%,#f3c4b3)}
.qr.empty{color:#e6b9c6}
.qr .qrText{padding:10%;text-align:center;color:#a5204a}
.qr .qrWait{font-weight:800;color:#d8788f}
.emptyNote{grid-column:1/-1;align-self:center;text-align:center;color:var(--ink-2);padding:20px}
.frameGrid .empty{padding:14px}
.chip.warn{background:var(--warn-bg,#fff0d6);color:#a2650d}
.lyOv .sel{z-index:10!important}
@media (pointer:coarse){.ocLink{min-height:36px;padding:8px}.mgAct button,.mgBtn{width:38px;height:38px}.mgRow .acts button{width:36px;height:36px}.swatches button{width:38px;height:38px}}

/* target sentuh minimal ~36-38px untuk iPad/iPhone (Playwright & perangkat nyata) */
@media (max-width:1279px){
  .ocLink{min-height:36px;padding:8px}
  .mgAct{flex-wrap:nowrap}
  .mgAct button,.mgBtn{width:38px;height:38px;flex:0 0 auto}
  .mgRow .acts button{width:36px;height:36px}
  .swatches button{width:38px;height:38px}
  .ownerPayField[type=file],#staticQrisFile{min-height:40px}
  .pill.mini{min-height:38px}
}

/* iPad portrait: catatan samping tidak menimpa Ana/Fio; layar QRIS lebih ringkas */
@media (min-width:600px) and (orientation:portrait){
  .lMascot{height:calc(var(--s)*31)}
  .lMascot.ana{left:calc(var(--s)*11)}
  .lMascot.fio{right:calc(var(--s)*11)}
  .lHead .sideNote{font-size:max(14px,calc(var(--s)*2.4))}
  .lHead .sideNote.left{max-width:calc(var(--s)*11);left:calc(var(--s)*.6)}
  .lHead .sideNote.right{max-width:calc(var(--s)*11);right:calc(var(--s)*.6)}
  .pMascot{height:calc(var(--s)*47)}
  .payHead .logo{height:clamp(66px,13.5dvh,210px)}
  .payTitle p{font-size:max(14px,calc(var(--s)*2.4))}
  .payStage{min-height:calc(var(--s)*42);margin-top:calc(var(--s)*1)}
  .orderCard{margin-top:calc(var(--s)*3)}
  .orderRows>div{padding:calc(var(--s)*.55) 0}
  .payActions{margin-top:calc(var(--s)*.8)}
}

@media (min-width:600px) and (orientation:portrait){
  .revRow .pill.big{font-size:max(16px,calc(var(--s)*2.5));white-space:nowrap;min-height:max(46px,calc(var(--s)*6))}
}

@media (min-width:600px) and (orientation:portrait){
  .editor .canvasCol{align-items:flex-start;padding-top:calc(var(--s)*1)}
  .toolTabs button{font-size:clamp(12.5px,1.68vw,15px);padding-left:.1em;padding-right:.1em}
}

.mgAct button,.mgBtn{flex:0 0 auto}
.ocLink{min-height:32px}

@media (max-width:599px){
  .categoryBar button{font-size:12px;padding:.35em .35em;gap:.3em;white-space:nowrap}
  .categoryBar button .ico{width:1.15em;height:1.15em}
  .camCard{min-height:60px}
  .camCard.cheer b{font-size:13px}
  .camCard.cheer>.ico{display:none}
}

@media (max-width:599px){
  #frames .bottomBar .cta{font-size:16px;white-space:nowrap;padding-left:.7em;padding-right:.7em}
}

/* banner owner di layar sempit: dekor kanan dilembutkan agar teks sapaan tetap terbaca */
@media (max-width:899px){
  .ownBanner{background:linear-gradient(90deg,rgba(255,238,242,.25) 0,rgba(255,238,242,.82) 42%,rgba(255,238,242,.93) 100%),radial-gradient(120% 140% at 8% 30%,rgba(255,215,226,.85),rgba(255,215,226,0) 60%),url(ui7/decor/corner-tr.webp) right top/auto 110% no-repeat,linear-gradient(90deg,rgba(255,225,232,.88),rgba(255,240,236,.6) 55%,rgba(255,222,232,.85))}
}

/* iPad landscape: neon pojok kiri dilembutkan di layar yang teksnya berada di kolom kiri */
@media (min-width:900px) and (orientation:landscape) and (min-height:600px){
  body[data-screen=welcome] .scene .corner.tl,body[data-screen=payment] .scene .corner.tl,body[data-screen=review] .scene .corner.tl{opacity:.32}
}

@media (min-width:900px) and (orientation:landscape) and (min-height:600px){
  .editor .toolTabs{grid-template-columns:repeat(4,minmax(0,1fr))}
  .editor .toolTabs button{min-height:max(46px,calc(var(--s)*6.2));font-size:clamp(12px,1.15vw,15px)}
}

@media (max-width:599px){
  .resSheet{height:min(41dvh,400px)}
  .printStatus .mini{padding:.35em .7em}
}
@media (max-width:1279px){ .ocLink{min-height:38px} }


/* ==========================================================================
   V8 — ornamen bunga (aset procedural, bukan screenshot), QRIS mengikuti referensi
   ========================================================================== */
.qrCard::before{content:"";position:absolute;inset:calc(var(--s)*-3.4);z-index:4;pointer-events:none;
  background:url(ui7/decor/orn-b.webp) left top/calc(var(--s)*8.5) auto no-repeat,url(ui7/decor/orn-b.webp) right top/calc(var(--s)*8.5) auto no-repeat,
    url(ui7/decor/orn-a.webp) left bottom/calc(var(--s)*10) auto no-repeat,url(ui7/decor/orn-a.webp) right bottom/calc(var(--s)*10) auto no-repeat}
.qrCard{background:linear-gradient(180deg,#fffdf9,#fff1e6);border:calc(var(--s)*.35) solid #dcb46e;box-shadow:0 0 0 calc(var(--s)*.6) #fff1df,0 0 0 calc(var(--s)*.85) rgba(220,180,110,.55),0 14px 30px rgba(140,50,80,.25)}
.orderCard::after{content:"";position:absolute;inset:auto calc(var(--s)*-2.6) calc(var(--s)*-3.6) calc(var(--s)*-2.6);height:calc(var(--s)*12);z-index:4;pointer-events:none;
  background:url(ui7/decor/orn-a.webp) left bottom/auto 100% no-repeat,url(ui7/decor/orn-b.webp) right bottom/auto 100% no-repeat}
.payActions .cta,.revRow .cta,.faHeroCta{position:relative}
.payActions .cta::before,.payActions .cta::after,.faHeroCta::before,.faHeroCta::after{content:"";position:absolute;bottom:calc(var(--s)*-2.4);width:calc(var(--s)*10.5);aspect-ratio:1;pointer-events:none;z-index:3;background:center/contain no-repeat}
.payActions .cta::before,.faHeroCta::before{left:calc(var(--s)*-4.8);background-image:url(ui7/decor/orn-b.webp)}
.payActions .cta::after,.faHeroCta::after{right:calc(var(--s)*-4.8);background-image:url(ui7/decor/orn-a.webp)}
.payActions .payRow .pill:not(:first-child){min-height:34px;font-size:max(12px,calc(var(--s)*1.6));background:transparent;border-color:transparent;box-shadow:none;text-decoration:underline;text-underline-offset:3px;color:var(--rose-3)}
.payActions #checkPayBtn{font-size:max(20px,calc(var(--s)*4.4))}
@media (min-width:600px) and (orientation:portrait){
  .payHead .logo{height:clamp(84px,17dvh,260px)}
  .payTitle h2{font-size:max(26px,calc(var(--s)*4.7))}
  .pMascot{height:calc(var(--s)*54);bottom:calc(var(--s)*-8)}
  .pMascot.ana{left:calc(var(--s)*-1.5)}.pMascot.fio{right:calc(var(--s)*-1.5)}
  .payStage{min-height:calc(var(--s)*44)}
}

/* QRIS ringkas seperti referensi: kartu QR + detail muat satu layar */
.qrCard{padding:calc(var(--s)*1.3) calc(var(--s)*1.8) calc(var(--s)*1.0)}
.qrMeta{margin-top:calc(var(--s)*.6);flex-wrap:nowrap}
.qrMeta .badge{font-size:max(11px,calc(var(--s)*1.5));padding:.25em .8em;white-space:nowrap}
.qrTimer{font-size:max(11px,calc(var(--s)*1.5));white-space:nowrap}
.orderCard{padding-top:calc(var(--s)*2.8);padding-bottom:calc(var(--s)*1.1)}
.orderRows>div{padding:calc(var(--s)*.45) 0;font-size:max(13px,calc(var(--s)*1.85))}
.orderNote{margin-top:calc(var(--s)*.9);padding:calc(var(--s)*.6) calc(var(--s)*1.4)}
@media (min-width:600px) and (orientation:portrait){
  .pMascot{height:calc(var(--s)*62);bottom:calc(var(--s)*-9)}
  .pMascot.ana{left:calc(var(--s)*-3)}.pMascot.fio{right:calc(var(--s)*-3)}
  .payHead .logo{height:clamp(84px,15.5dvh,240px)}
  .payStage{min-height:calc(var(--s)*40)}
  .orderCard{margin-top:calc(var(--s)*2.8)}
}

.qrMeta{justify-content:center;gap:calc(var(--s)*.8)}
.qrMeta .badge{font-size:max(10.5px,calc(var(--s)*1.35));padding:.2em .6em}
.qrTimer{font-size:max(10.5px,calc(var(--s)*1.35))}
@media (min-width:600px) and (orientation:portrait){
  .payTitle h2{font-size:max(28px,calc(var(--s)*5.2))}
  .pMascot{height:calc(var(--s)*56)}
  .pMascot.ana{left:0}.pMascot.fio{right:0}
  .qrCard{width:calc(var(--s)*39)}
  .rMascot.ana{height:calc(var(--s)*44);left:calc(var(--s)*-2);bottom:calc(var(--sab) - var(--s)*1)}
  .rMascot.fio{height:calc(var(--s)*38);right:calc(var(--s)*-1);bottom:calc(var(--sab) - var(--s)*1)}
  .revTitle h2{font-size:max(28px,calc(var(--s)*5))}
}

@media (min-width:600px) and (orientation:portrait){
  .camMascot.ana{height:calc(var(--s)*46);margin-left:0}
  .camMascot.fio{height:calc(var(--s)*42);margin-right:0}
  .rMascot.ana{left:0}.rMascot.fio{right:0}
}
@media (max-width:599px) and (orientation:portrait){
  .camMascot.ana{height:calc(var(--s)*40);margin-left:0}
  .camMascot.fio{height:calc(var(--s)*35);margin-right:0}
}

.eChars{display:none}
@media (min-width:600px) and (orientation:portrait){
  .canvasCol{position:relative}
  .eChars{display:block;position:absolute;z-index:3;left:50%;bottom:0;transform:translateX(-50%);width:min(96cqw,calc(46cqh));max-width:none;pointer-events:none;filter:drop-shadow(0 8px 10px rgba(140,50,70,.22))}
  .eHead .logo{height:clamp(70px,10.5dvh,140px)}
}

@media (min-width:600px) and (orientation:portrait){
  .canvasCol::before,.canvasCol::after{content:"";position:absolute;top:calc(var(--s)*-2.4);width:calc(var(--s)*11);aspect-ratio:1;z-index:4;pointer-events:none;background:center/contain no-repeat}
  .canvasCol::before{left:calc(var(--s)*-3.2);background-image:url(ui7/decor/orn-b.webp)}
  .canvasCol::after{right:calc(var(--s)*-2.4);background-image:url(ui7/decor/orn-a.webp)}
}

@media (min-width:900px) and (orientation:landscape){.scene .gh{height:calc(var(--u)*.11)}}

/* ==========================================================================
   v130.1.0 · final owner pages + framed Live Memory + dual-scope editor
   ========================================================================== */
/* Owner: setiap tombol sidebar benar-benar menjadi satu halaman, bukan anchor panjang */
#owner .faOwnerViewHidden{display:none!important;visibility:hidden!important;content-visibility:hidden!important}
#owner[data-owner-view="ownCatalog"] #ownCatalog{grid-template-columns:repeat(2,minmax(0,1fr))}
#owner[data-owner-view="ownFilters"] #ownCatalog{grid-template-columns:minmax(0,1fr)}
#owner[data-owner-view="ownFilters"] #ownFilters{grid-column:1/-1}
#owner .ownMain>.ownH:not(.faOwnerViewHidden){scroll-margin-top:18px}
#owner .diagGood{color:var(--ok)!important}
#owner .diagWarn{color:#a66800!important}
#owner .diagBad{color:var(--danger)!important}

/* Editor: filter per foto / seluruh bingkai */
.filterScope{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px;padding:5px;border:1px solid rgba(184,126,69,.32);border-radius:16px;background:rgba(255,250,244,.82)}
.filterScope button{min-height:40px;border:0;border-radius:12px;background:transparent;color:var(--rose-3);font-weight:800;font-size:clamp(12px,1.6cqw,16px);cursor:pointer}
.filterScope button.active{background:linear-gradient(180deg,#ed5b86,#ca2459);color:#fff;box-shadow:0 5px 14px rgba(185,41,88,.22)}
.photoFxTargets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:7px 0 10px}
.photoFxTargets[hidden]{display:none!important}
.photoFxTargets button{position:relative;aspect-ratio:1/1.08;overflow:hidden;border:2px solid #ead1bb;border-radius:12px;background:#fff9f0;padding:0;cursor:pointer;box-shadow:0 2px 7px rgba(102,58,45,.1)}
.photoFxTargets button.active{border-color:#d52a62;box-shadow:0 0 0 2px rgba(213,42,98,.14),0 5px 12px rgba(156,37,78,.18)}
.photoFxTargets img{width:100%;height:100%;display:block;object-fit:cover}
.photoFxTargets span{position:absolute;top:4px;left:4px;z-index:2;width:23px;height:23px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.92);color:#b51f50;font-weight:900;font-size:12px;box-shadow:0 1px 5px rgba(0,0,0,.15)}
.filterScopeActions{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 8px}
.filterScopeActions .pill{min-height:34px;padding:.45em .85em;font-size:12px}

/* Live Memory: video/fallback benar-benar berada di paper + frame pilihan */
.livehero{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:0;overflow:visible;background:rgba(255,250,244,.76)}
.livePaper{position:relative;width:min(100%,520px);aspect-ratio:2/3;padding:10px;border-radius:20px;background:linear-gradient(145deg,#fffdf8,#fff7ed);box-shadow:0 15px 35px rgba(123,60,80,.22),0 0 0 2px #fff9ed,0 0 0 4px rgba(202,159,77,.8);overflow:hidden}
.livePaper::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,rgba(255,255,255,.38),transparent 24%,transparent 74%,rgba(233,194,144,.15));z-index:4}
.livePaperInner{position:relative;width:100%;height:100%;overflow:hidden;border-radius:13px;background:#f4becd}
.liveMedia{position:absolute;left:7.2%;right:7.2%;top:6.2%;bottom:12.2%;display:grid;place-items:center;overflow:hidden;border-radius:3%;background:#111}
.liveMedia video,.liveMedia img{width:100%;height:100%;display:block;object-fit:cover;background:#111}
.liveMediaEmpty{height:100%;width:100%;display:grid;place-items:center;padding:20px;text-align:center;color:#fff;background:linear-gradient(150deg,#32272a,#111)}
.liveFrameOverlay{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:3;pointer-events:none}
.liveCaption{width:min(100%,520px);display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:12px;padding:9px 12px;border-radius:14px;background:rgba(255,255,255,.8);border:1px solid rgba(193,142,73,.35);text-align:left}
.liveCaption b{color:var(--rose-3);white-space:nowrap}.liveCaption span{font-size:12px;color:#735b59;text-align:right}
#motionList{display:grid;gap:8px}
#motionList .motionTake{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0!important;text-align:left}
#motionList .motionTake small{opacity:.7;font-weight:600;font-size:11px}
#motionList .motionTake.active{border-color:#d52a62;background:#fff0f4;color:#b51f50;box-shadow:0 0 0 2px rgba(213,42,98,.1)}

/* Delivery: error harus jelas, bukan status lokal yang membingungkan */
#deliveryError{margin:.55rem 0 0;padding:.65rem .8rem;border-radius:12px;background:#fff0f0;border:1px solid rgba(190,42,63,.25);color:#a52038;font-size:13px;line-height:1.35}
#deliveryError[hidden]{display:none!important}

@media (max-width:899px){
  #owner[data-owner-view="ownCatalog"] #ownCatalog{grid-template-columns:1fr}
  .livePaper{width:min(100%,460px)}
}
@media (max-width:599px){
  .photoFxTargets{gap:5px}.filterScopeActions{display:grid;grid-template-columns:1fr 1fr}
  .liveCaption{align-items:flex-start;flex-direction:column}.liveCaption span{text-align:left}
}

/* ========================================================================== 
   v130.2.0 · dynamic layouts/takes + final Live Memory + owner back navigation
   ========================================================================== */
.photoFxTargets{grid-template-columns:repeat(4,minmax(0,1fr));max-height:240px;overflow:auto;overscroll-behavior:contain}
#owner .ownViewTop{position:sticky;top:0;z-index:22;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;margin:0 0 12px;border:1px solid rgba(202,159,77,.38);border-radius:16px;background:rgba(255,248,241,.94);backdrop-filter:blur(10px);box-shadow:0 8px 20px rgba(102,58,45,.10)}
#owner .ownViewTop.faOwnerViewHidden{display:none!important}
#owner .ownViewBack{min-height:40px;white-space:nowrap}
#owner .ownViewTitle{font:800 clamp(15px,2cqw,20px)/1.1 var(--f-ui);color:var(--rose-3);text-align:right}

.livehero{padding:14px}
.liveFinalSheet{position:relative;width:min(100%,520px);aspect-ratio:2/3;border-radius:20px;overflow:hidden;background:#fffaf3;box-shadow:0 15px 35px rgba(123,60,80,.22),0 0 0 2px #fff9ed,0 0 0 4px rgba(202,159,77,.8)}
.liveFinalBg{position:absolute;inset:0;background:linear-gradient(180deg,#fffaf3 0%,#f7c6d3 3%,#f6c1ce 88%,#fffaf3 100%)}
.liveSlot{position:absolute;z-index:2;overflow:hidden;border-radius:2.2%;background:#171214;box-shadow:0 0 0 2px rgba(255,255,255,.88),0 3px 10px rgba(0,0,0,.16);transition:transform .16s ease,box-shadow .16s ease}
.liveSlot.focus{transform:scale(1.015);z-index:4;box-shadow:0 0 0 4px #e43d72,0 8px 18px rgba(120,20,55,.28)}
.liveSlot video,.liveSlot img{width:100%;height:100%;display:block;object-fit:cover;background:#111}
.liveSlot>span{position:absolute;right:7px;top:7px;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.9);color:#b51f50;font-size:11px;font-weight:900;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.liveFinalFrame{position:absolute;inset:0;z-index:6;width:100%;height:100%;object-fit:fill;pointer-events:none}
.liveFinalFoot{position:absolute;left:8%;right:8%;bottom:2.1%;z-index:7;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 10px;border-radius:10px;background:rgba(255,252,247,.86);color:#6f4e37;font-size:11px;backdrop-filter:blur(4px)}
.liveFinalFoot b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.liveFinalFoot small{white-space:nowrap}

#frameCount{white-space:nowrap}

@media (max-width:899px){
  #owner .ownViewTop{top:0;margin-top:4px}
  .liveFinalSheet{width:min(100%,460px)}
}
@media (max-width:599px){
  .photoFxTargets{grid-template-columns:repeat(3,minmax(0,1fr));max-height:220px}
  #owner .ownViewTop{align-items:flex-start;flex-direction:column}
  #owner .ownViewTitle{text-align:left}
}

/* v130.2.0 · Owner submenu back + frame/layout clarity */
#owner .ownInlineBack{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 12px;padding:9px 12px;border:1px solid rgba(202,159,77,.42);border-radius:16px;background:rgba(255,249,243,.96);box-shadow:0 5px 16px rgba(102,58,45,.08)}
#owner .ownInlineBack.faOwnerViewHidden{display:none!important}
#owner .ownInlineBack>b{font-family:var(--f-serif);font-size:18px;color:#7c2442}
#owner .ownInlineBack .pill{min-height:40px;background:#fffdf9;font-weight:800}
#frameLayoutHint{display:inline}
@media(max-width:700px){#owner .ownInlineBack{position:sticky;top:0;z-index:26;align-items:center}#owner .ownInlineBack>b{font-size:15px;text-align:right}}

/* v130.2.0 · dynamic session layouts / paper / frame polish */
#cameraFilm::before{content:none!important;display:none!important}
.sheetView,.editorCanvas.sheet,.liveFinalSheet{background:linear-gradient(145deg,#fffdf8,#fff7ec);border:1px solid rgba(194,147,79,.38);box-shadow:0 14px 34px rgba(91,54,42,.16),inset 0 0 0 5px rgba(255,255,255,.45)}
.lyFrame,.liveFinalFrame{object-fit:fill!important;filter:drop-shadow(0 1px 1px rgba(75,42,25,.12))}
#frameGrid .card.selected{box-shadow:0 0 0 3px #d72c63,0 9px 22px rgba(159,39,79,.18)}
#frameGrid .card b{white-space:normal;line-height:1.15}


/* ========================================================================== 
   v130.2.1 · iPad frame picker visibility / WebKit-safe preview
   - Avoid container-query units for the sheet preview (iPad WebKit could
     resolve them to zero while the screen was hidden).
   - Guarantee a visible, scrollable frame grid in portrait/tablet layouts.
   ========================================================================== */
#frames .frameStage{container-type:normal;display:grid;place-items:center;overflow:hidden}
#frames .sheetView{
  position:absolute!important;
  left:50%!important;top:50%!important;inset:auto!important;
  transform:translate(-50%,-50%)!important;
  height:100%!important;width:auto!important;
  max-height:100%!important;max-width:100%!important;
  aspect-ratio:2/3!important;
}
#frames .frameScroll{min-height:190px}
#frames #frameGrid{min-height:170px}

@media (min-width:600px) and (orientation:portrait){
  #frames .frameWrap{height:auto;min-height:100dvh;overflow:visible}
  #frames .frameBody{flex:none;display:flex;flex-direction:column;gap:12px}
  #frames .frameStageBox{flex:none;height:32dvh;min-height:230px;max-height:360px}
  #frames .framePanel{flex:none;min-height:300px;padding:12px 14px 14px}
  #frames .frameScroll{
    display:block!important;
    min-height:230px!important;
    max-height:34dvh!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch;
    margin:0!important;
    padding-right:3px;
  }
  #frames #frameGrid{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:10px!important;
    width:100%!important;
    min-height:220px!important;
    padding:4px!important;
  }
  #frames #frameGrid .card{width:auto!important;min-width:0!important}
  #frames #frameGrid .card .preview{aspect-ratio:2/3!important;min-height:0!important}
  #frames .bottomBar{position:sticky;bottom:0;z-index:20}
}
@media (min-width:600px) and (max-width:820px) and (orientation:portrait){
  #frames #frameGrid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media (max-width:599px){
  #frames .frameStageBox{height:30dvh;min-height:190px;max-height:300px}
  #frames .frameScroll{min-height:210px!important;max-height:42dvh!important;overflow-y:auto!important;overflow-x:hidden!important}
  #frames #frameGrid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important;gap:8px!important}
  #frames #frameGrid .card{width:auto!important;min-width:0!important}
}