/* ==========================================================================
   Firdaus Adhwa Photobooth — v131 styles
   Promo attract · Frame Studio · Live Memory · Delivery · Owner hijau/biru
   ========================================================================== */
:root{
  --mint:#2f9e5f;--mint-2:#1f7a47;--mint-bg:#e9f7ef;--mint-line:#bfe5cd;
  --sky:#2f72b8;--sky-2:#1f4f86;--sky-bg:#eaf3fd;--sky-line:#c3daf3;
}

/* ---------------------------------------------------------------- PROMO */
#promo.screen{padding:0!important}
#promo.active{position:fixed;inset:0;z-index:40;display:block;overflow:hidden;cursor:pointer;background:
  radial-gradient(90% 60% at 50% 30%,#fff3ea 0%,rgba(255,243,234,0) 70%),linear-gradient(180deg,#fde7ec,#f7cdd8)}
.promoVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:transparent;max-width:none}
.promoFallback{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:4vh;padding:8vh 6vw}
.promoFallback img:first-child{width:min(56vw,420px);animation:faFloat 4s ease-in-out infinite}
.promoFallback img:last-child{width:min(86vw,720px);animation:faBounce 2.6s ease-in-out infinite}
#promo.noVideo .promoFallback{display:flex}
#promo.noVideo .promoVideo{opacity:0}
.promoTap{position:absolute;left:0;right:0;bottom:calc(var(--sab) + 5vh);display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none;z-index:2}
.promoTap .cta{pointer-events:auto;min-width:min(78vw,520px);animation:faPulse 1.8s ease-in-out infinite}
.promoTap small{font:800 max(13px,1.6vw)/1.2 var(--f-ui);color:#7a2237;background:rgba(255,250,245,.88);padding:.45em 1.1em;border-radius:999px;box-shadow:var(--shadow-s)}
body[data-screen=promo] .scene{display:none}
body[data-screen=promo] .kioskGear{opacity:.35}
@keyframes faPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes faFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes faBounce{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(-1deg)}}
@media (prefers-reduced-motion:reduce){.promoTap .cta,.promoFallback img{animation:none}}

/* ---------------------------------------------------------------- PILIH FRAME */
#frames .frameStageBox{height:clamp(300px,40dvh,520px)!important;max-height:none!important;flex:none!important;min-height:0!important}
#frames .frameStage{flex:none!important;height:calc(100% - 44px)!important;width:100%;display:grid!important;place-items:center;overflow:visible!important}
#frames .sheetView{position:relative!important;left:auto!important;top:auto!important;transform:none!important;height:100%!important;width:auto!important;aspect-ratio:2/3!important;max-width:100%!important;margin:0 auto!important;border-radius:10px;overflow:hidden}
#frames .frameStageName{margin-top:8px}
#frameGrid .card .preview canvas.frameThumb{width:100%;height:100%;display:block;object-fit:contain;background:linear-gradient(160deg,#fbe3ea,#fff4ea)}
#frameGrid .fcard .preview{position:relative}
#frameGrid .fcard:not(.ready) .preview::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(255,255,255,0) 20%,rgba(255,255,255,.7) 50%,rgba(255,255,255,0) 80%);background-size:200% 100%;animation:faShimmer 1.2s linear infinite}
@keyframes faShimmer{from{background-position:120% 0}to{background-position:-80% 0}}
#frameGrid .card small{display:block;font-size:11px;color:var(--ink-3);font-weight:700;margin-top:1px}
#frameChips button small{font-size:.78em;opacity:.7;font-weight:800}
@media (min-width:600px) and (orientation:portrait){
  #frames .frameScroll{max-height:none!important;min-height:0!important}
  #frames .framePanel{min-height:0!important}
}
@media (min-width:900px) and (orientation:landscape){
  #frames .frameStageBox{height:auto!important;flex:1 1 48%!important;min-height:420px!important}
  #frames .frameStage{height:calc(100% - 44px)!important}
}

/* ---------------------------------------------------------------- LAYOUT THUMB */
.lt canvas.ltCanvas{width:100%;height:100%;display:block;object-fit:contain}
#layoutGrid .layoutCard .lt{background:transparent}
.mgLay .lt canvas{width:100%;height:100%;display:block}
.mgRow .th canvas{width:100%;height:100%;display:block;object-fit:cover}

/* ---------------------------------------------------------------- EDITOR / SHEET */
.sheet>canvas.lyFrame{pointer-events:none}
#editorCanvas.sheet{aspect-ratio:2/3;height:auto}

/* ---------------------------------------------------------------- REVIEW */
@media (min-width:600px) and (orientation:portrait){
  #review .reviewStage{align-items:start}
  #review .stickyNote{position:static!important;transform:rotate(3deg);margin:6px auto 0;align-self:center}
}
#review.ready #editNext{animation:faPulse 1.6s ease-in-out 2}

/* ---------------------------------------------------------------- LIVE MEMORY */
.liveFinalSheet{position:relative;width:min(100%,calc(62dvh*2/3));aspect-ratio:2/3;margin:0 auto;border-radius:12px;overflow:hidden;background:#fff}
.liveFinalSheet .liveFinalBg,.liveFinalSheet .liveFinalFrame{position:absolute;inset:0;width:100%;height:100%;display:block;max-width:none}
.liveFinalSheet .liveFinalFrame{pointer-events:none;z-index:3}
.liveFinalSheet .liveSlot{position:absolute;z-index:2;overflow:hidden;background:#ece6e1}
.liveFinalSheet .liveSlot video,.liveFinalSheet .liveSlot img{width:100%;height:100%;object-fit:cover;display:block;max-width:none;transform:scale(var(--z,1))}
.liveFinalSheet .liveSlot span{display:none}
.liveFinalSheet .liveSlot.focus{box-shadow:0 0 0 4px #e0507a;z-index:4}
.liveFinalSheet .liveSlot img.kb{animation:faKenBurns 5s ease-in-out infinite alternate}
@keyframes faKenBurns{from{transform:scale(var(--z,1)) translate(0,0)}to{transform:scale(calc(var(--z,1)*1.08)) translate(-1.5%,-1%)}}
.liveCaption{display:flex;flex-direction:column;gap:2px;margin-top:10px;text-align:center}
.liveCaption b{color:var(--crim);font-size:15px}.liveCaption span{font-size:12.5px;color:var(--ink-2)}
.liveActions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.liveActions .cta.small{min-height:44px}
#motionList .motionTake{display:flex;justify-content:space-between;align-items:center;width:100%;margin:5px 0;gap:8px}
#motionList .motionTake.active{background:var(--pink);border-color:var(--rose)}

/* ---------------------------------------------------------------- DELIVERY */
.dProgress{height:8px;border-radius:99px;background:#f6dbe3;overflow:hidden;margin:6px 0}
.dProgress i{display:block;height:100%;width:35%;border-radius:99px;background:linear-gradient(90deg,#f0587f,#c92c5a);animation:faIndet 1.2s ease-in-out infinite}
@keyframes faIndet{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}
#deliveryEmailState.diagGood{color:var(--mint)}#deliveryEmailState.diagBad{color:var(--bad)}#deliveryEmailState.diagWarn{color:#b8741a}
.deliveryError{background:#fde0e4;color:#8a1f33;border-radius:12px;padding:10px 12px;font-size:13.5px;line-height:1.4;font-weight:700}

/* ---------------------------------------------------------------- OWNER · tema hijau-putih & biru-putih */
#owner .kpi.k2{background:linear-gradient(180deg,#ffffff,var(--mint-bg));border-color:var(--mint-line)}
#owner .kpi.k2 .kIco{background:#d3efdd;color:var(--mint)}
#owner .kpi.k3{background:linear-gradient(180deg,#ffffff,var(--sky-bg));border-color:var(--sky-line)}
#owner .kpi.k3 .kIco{background:#d6e7fa;color:var(--sky)}
#owner .kpi.k4{background:linear-gradient(180deg,#ffffff,#fff5e6);border-color:#f0d9a8}
#owner .kpi.k4 .kIco{background:#fbe8c4;color:#b8741a}
#owner .kpi.k1 .kIco{background:#fddfe7;color:#d23a66}
#owner .txCard{background:linear-gradient(180deg,#ffffff,#f7fbff);border-color:var(--sky-line)}
#owner .txCard .ocHead h3,#owner .txCard .ocHead h3 .ico{color:var(--sky-2)}
#owner .txRow.h{background:linear-gradient(180deg,#e3effc,#d6e7fa);color:var(--sky-2);border-radius:10px;border-bottom:0;padding:.65em .5em}
#owner .txRow:not(.h){padding-left:.5em;padding-right:.5em}
#owner .txRow:not(.h):nth-child(odd){background:#f5f9fe}
#owner .txRow .chip.ok{background:var(--mint-bg);color:var(--mint);border:1px solid var(--mint-line)}
#owner .boothCard{background:linear-gradient(180deg,#ffffff,#f3fbf6);border-color:var(--mint-line)}
#owner .boothCard .ocHead h3,#owner .boothCard .ocHead h3 .ico{color:var(--mint-2)}
#owner .booth{background:#fff;border-color:var(--mint-line)}
#owner .booth .chip.ok{background:var(--mint-bg);color:var(--mint)}
#owner .chartCard{background:linear-gradient(180deg,#ffffff,#fff4f7)}
#owner #devPrinter{background:linear-gradient(180deg,#fff,var(--sky-bg));border-color:var(--sky-line)}
#owner #devPrinter h4 .ico{color:var(--sky)}
#owner #devPrinter .cta{background:linear-gradient(180deg,#4a8fd6,#2f72b8);box-shadow:0 5px 10px rgba(47,114,184,.3)}
#owner #devCamera{background:linear-gradient(180deg,#fff,var(--mint-bg));border-color:var(--mint-line)}
#owner #devCamera h4 .ico{color:var(--mint)}
#owner #devCamera .cta{background:linear-gradient(180deg,#4dbb7e,#2f9e5f);box-shadow:0 5px 10px rgba(47,158,95,.3)}
#owner .chip.ok{background:var(--mint-bg);color:var(--mint)}
#owner .stat:nth-child(3n+1){background:#fff;border-color:var(--sky-line)}#owner .stat:nth-child(3n+1) strong{color:var(--sky-2)}
#owner .stat:nth-child(3n+2){background:#fff;border-color:var(--mint-line)}#owner .stat:nth-child(3n+2) strong{color:var(--mint-2)}
#owner .ownGrid2 .card{background:linear-gradient(180deg,#ffffff,#fffaf7)}
#owner .ownGrid2 .card .row{padding:.55em .2em;border-bottom:1px dashed rgba(47,114,184,.18)}
#owner .ownGrid2 .card .row:nth-child(even){background:linear-gradient(90deg,rgba(234,243,253,.55),rgba(255,255,255,0))}
#owner .ledger .row,#owner .printQueue .row{background:#fff;border-radius:10px;margin:4px 0;border:1px solid var(--sky-line)}
#owner .diagGood,#owner b.diagGood{color:var(--mint)!important}
#owner .diagBad,#owner b.diagBad{color:var(--bad)!important}
#owner .ownH#ownTx .ico,#owner .ownH#ownDelivery .ico,#owner .ownH#ownReports .ico{color:var(--sky)}
#owner .ownH#ownPrinter .ico,#owner .ownH#ownCam .ico,#owner .ownH#ownBoothsTitle .ico{color:var(--mint)}
#owner .ownNav button:not(.active):hover{background:linear-gradient(90deg,var(--mint-bg),rgba(255,255,255,0))}
#owner .ownInlineBack .pill{background:#fff;border-color:var(--sky-line);color:var(--sky-2)}
#owner .v131Card{border:1.5px solid var(--sky-line)}
#owner #agentCard,#owner #dslrCard{border-color:var(--mint-line);background:linear-gradient(180deg,#fff,#f4fbf7)}
#owner .v131Card .quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
#owner .v131Card input,#owner .v131Card select{width:100%;margin:4px 0 8px}
#owner .v131Card .checkline{display:flex;gap:9px;align-items:center;margin:6px 0;font-size:14px}
#owner .v131Card .checkline input{width:18px;height:18px;margin:0}
.mailDiagRow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;margin-top:8px}
.mailDiagRow input{margin:0!important}
@media (max-width:700px){.mailDiagRow{grid-template-columns:1fr}}
.diagSteps{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.diagSteps li{display:grid;grid-template-columns:minmax(130px,.36fr) minmax(0,1fr);gap:10px;padding:10px 12px;border-radius:12px;font-size:13px;line-height:1.4;border:1px solid}
.diagSteps li b{font-weight:800}
.diagSteps li.ok{background:var(--mint-bg);border-color:var(--mint-line);color:#1d5e38}
.diagSteps li.bad{background:#fdecef;border-color:#f3c2cc;color:#8a1f33}
.diagSteps li.warn{background:#fff6e5;border-color:#f2d9a6;color:#7a5a1e}
.diagSteps small{opacity:.8}
.howto{margin-top:12px;border-radius:12px;background:var(--sky-bg);border:1px solid var(--sky-line);padding:8px 12px;font-size:13px;color:#1f3a55}
.howto summary{cursor:pointer;font-weight:800;color:var(--sky-2)}
.howto ol{margin:8px 0 4px 18px;padding:0;display:flex;flex-direction:column;gap:6px}
.howto code{font-size:12px;background:#fff;border:1px solid var(--sky-line);border-radius:6px;padding:1px 5px;word-break:break-all}
.promoOwner{display:grid;grid-template-columns:minmax(140px,220px) minmax(0,1fr);gap:16px;align-items:start}
.promoOwner video{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:14px;background:#fbe3ea;border:1px solid var(--line)}
@media (max-width:700px){.promoOwner{grid-template-columns:1fr}}
.dslrShot{margin-top:8px;max-width:260px;border-radius:12px;border:1px solid var(--mint-line)}

/* tombol login owner tidak menampilkan username "undefined" */
#ownerName:placeholder-shown{font-style:normal}

/* ---------------------------------------------------------------- HASIL / PREVIEW */
@media (min-width:600px) and (orientation:portrait){
  #preview .resBody{align-items:start;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);margin-top:14px}
  #preview .resSheet{height:min(64dvh,760px)}
}
@media (orientation:landscape){
  #promo .promoVideo{object-fit:contain}
  #promo.active{background:radial-gradient(60% 80% at 50% 45%,#fff3ea 0%,rgba(255,243,234,0) 70%),url(ui7/scene/bg-l.webp) center/cover,linear-gradient(180deg,#fde7ec,#f7cdd8)}
  .promoTap{bottom:calc(var(--sab) + 3vh)}
}
@media (max-width:599px){
  #frames .frameStageBox{height:34dvh!important;min-height:220px!important}
}

/* frame rekomendasi per layout */
#frameGrid .card .recBadge{position:absolute;left:8px;top:8px;z-index:3;font:900 10.5px/1 var(--f-ui);font-style:normal;color:#fff;background:linear-gradient(180deg,#e0b458,#b98a3c);padding:5px 8px;border-radius:999px;box-shadow:0 3px 8px rgba(140,90,30,.35);letter-spacing:.02em}