/* ═══════════════════════════════════════════════════════════════════
   PROP SETTINGS
   The production tool. Never appears on the filmed screens.
   ═══════════════════════════════════════════════════════════════════ */
#sheetWrap{position:absolute;inset:0;z-index:20;pointer-events:none}
#sheetWrap.open{pointer-events:auto}
#veil{position:absolute;inset:0;background:rgba(8,12,11,.46);opacity:0;transition:opacity 380ms var(--ease)}
#sheetWrap.open #veil{opacity:1}
#sheet{
  position:absolute;left:0;right:0;bottom:0;height:94%;background:var(--bg);
  border-radius:22px 22px 0 0;transform:translateY(101%);transition:transform 460ms var(--ease);
  display:flex;flex-direction:column;overflow:hidden;box-shadow:0 -14px 40px -12px rgba(0,0,0,.45)
}
#sheetWrap.open #sheet{transform:translateY(0)}
.sheet-hd{padding:10px 18px 12px;border-bottom:1px solid var(--border);flex:none;background:var(--bg)}
.grab{width:36px;height:4px;border-radius:2px;background:var(--border);margin:0 auto 12px}
.sheet-hd-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sheet-id{display:flex;align-items:center;gap:10px;min-width:0}
#appLogoSlot img{max-height:26px;max-width:26px;object-fit:contain;border-radius:6px}
.sheet-hd h2{
  margin:0;font-family:var(--f-display);font-size:17px;font-weight:var(--w-display);
  letter-spacing:var(--ls-display);color:var(--text)
}
.sheet-hd small{display:block;font-size:11px;color:var(--mute);margin-top:2px}

.tabsel{display:flex;gap:6px;margin-top:12px;overflow-x:auto;scrollbar-width:none}
.tabsel::-webkit-scrollbar{display:none}
.tabsel button{
  padding:7px 13px;border-radius:999px;font-size:12.5px;font-weight:560;
  color:var(--mute);background:var(--surface-2);white-space:nowrap;flex:none
}
.tabsel button.on{background:var(--primary);color:var(--on-primary)}

.sheet-body{overflow-y:auto;flex:1;padding:16px 16px calc(28px + env(safe-area-inset-bottom,0px))}
.spane{display:none}
.spane.on{display:block}

.grp{background:var(--surface);border:1px solid var(--border);border-radius:14px;
  overflow:hidden;margin-bottom:16px}
.fld{display:flex;align-items:center;gap:12px;padding:11px 14px;min-height:50px}
.fld + .fld{border-top:1px solid var(--border)}
.fld label{font-size:13.5px;font-weight:520;flex:none;width:118px;color:var(--text)}
.fld.wide label{width:96px}
.fld input[type=text],.fld input[type=number]{
  flex:1;min-width:0;border:0;background:transparent;text-align:right;
  font-size:14px;color:var(--text);font-variant-numeric:tabular-nums;padding:4px 0
}
.fld input::placeholder{color:var(--mute-2)}
.fld textarea{
  flex:1;min-width:0;border:0;background:transparent;text-align:right;font-size:13px;
  color:var(--text);padding:4px 0;resize:vertical;min-height:44px;line-height:1.45
}
.fld select{
  flex:1;min-width:0;border:0;background:transparent;text-align:right;font-size:14px;
  color:var(--text);direction:rtl;padding:4px 0
}
.fld input[type=range]{flex:1;min-width:0;accent-color:var(--accent)}
.fld input[type=color]{
  width:42px;height:28px;border:1px solid var(--border);border-radius:7px;
  background:none;padding:2px;margin-left:auto;flex:none
}
.fld .rv{font-size:12.5px;color:var(--mute);font-variant-numeric:tabular-nums;width:64px;
  text-align:right;flex:none}
.fld .hint{font-size:11px;color:var(--mute-2);margin-left:auto}

.sw{
  width:46px;height:28px;border-radius:999px;background:var(--border);position:relative;
  flex:none;margin-left:auto;transition:background 220ms ease
}
.sw:after{
  content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.28);transition:transform 240ms var(--ease)
}
.sw.on{background:var(--accent)}
.sw.on:after{transform:translateX(18px)}

.uploader{display:flex;gap:12px;padding:14px}
.uprev{
  width:64px;height:64px;border-radius:10px;flex:none;border:1px solid var(--border);
  background:var(--surface-2) center/contain no-repeat;display:grid;place-items:center;
  color:var(--mute-2);font-size:10px;overflow:hidden;text-align:center
}
.uprev.tall{width:56px;height:86px;background-size:cover}
.uprev img{max-width:88%;max-height:88%;object-fit:contain}
.upr{flex:1;display:flex;flex-direction:column;justify-content:center;gap:9px;min-width:0}
.upr p{margin:0;font-size:11.5px;color:var(--mute);line-height:1.45}
.ubtns{display:flex;gap:8px;flex-wrap:wrap}
.mini{
  padding:8px 13px;border-radius:var(--r-btn);font-size:12.5px;font-weight:560;
  background:var(--primary);color:var(--on-primary)
}
.mini.ghost{background:var(--surface-2);color:var(--text)}
.mini.danger{background:transparent;color:#B3261E}
.mini[disabled]{opacity:.45;pointer-events:none}

.themes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.tcard{
  border:1.5px solid var(--border);border-radius:14px;padding:9px;background:var(--surface);
  text-align:left;transition:border-color 200ms ease
}
.tcard.on{border-color:var(--accent)}
.tprev{
  height:74px;border-radius:9px;overflow:hidden;position:relative;padding:8px;
  display:flex;flex-direction:column;justify-content:space-between
}
.tprev .tp-top{display:flex;align-items:center;justify-content:space-between}
.tprev .tp-mark{width:16px;height:5px;border-radius:2px}
.tprev .tp-dot{width:10px;height:10px;border-radius:50%}
.tprev .tp-card{border-radius:6px;padding:6px}
.tprev .tp-b1{height:7px;width:64%;border-radius:2px;margin-bottom:5px}
.tprev .tp-b2{height:4px;width:40%;border-radius:2px;opacity:.5}
.tprev .tp-nav{display:flex;gap:4px;margin-top:5px}
.tprev .tp-nav i{height:4px;flex:1;border-radius:2px;opacity:.35}
.tprev .tp-nav i:first-child{opacity:1}
.tcard h4{margin:9px 2px 3px;font-size:12.5px;font-weight:620;color:var(--text)}
.tcard p{margin:0 2px;font-size:10.5px;color:var(--mute);line-height:1.35}
.tcheck{display:flex;align-items:center;gap:5px;margin:7px 2px 0;font-size:10.5px;
  font-weight:600;color:var(--accent);opacity:0}
.tcard.on .tcheck{opacity:1}
.tcard .tbadge{
  position:absolute;top:6px;left:6px;font-size:8px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:3px 6px;border-radius:4px;background:rgba(0,0,0,.45);color:#fff
}

/* ── custom theme builder ── */
.refgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.refslot{
  border:1.5px dashed var(--border);border-radius:14px;padding:10px;background:var(--surface);
  text-align:center;display:flex;flex-direction:column;gap:8px;align-items:center
}
.refslot.filled{border-style:solid;border-color:var(--accent)}
.refshot{
  width:100%;aspect-ratio:.52;border-radius:9px;background:var(--surface-2) center top/cover no-repeat;
  display:grid;place-items:center;color:var(--mute-2);font-size:10.5px;overflow:hidden
}
.refslot h5{margin:0;font-size:11.5px;font-weight:620;color:var(--text)}
.refslot small{font-size:10px;color:var(--mute);line-height:1.35;display:block}

.swatches{display:flex;gap:5px;flex-wrap:wrap;padding:12px 14px}
.swatches i{width:22px;height:22px;border-radius:6px;border:1px solid rgba(0,0,0,.08);flex:none}

.readout{display:grid;grid-template-columns:1fr 1fr;gap:0}
.readout div{padding:10px 14px;font-size:11.5px;color:var(--mute);border-top:1px solid var(--border)}
.readout div:nth-child(odd){border-right:1px solid var(--border)}
.readout b{display:block;font-size:12.5px;color:var(--text);font-weight:560;margin-top:2px;
  font-variant-numeric:tabular-nums}

.tokenlist{max-height:320px;overflow-y:auto}
.tokenrow{display:flex;align-items:center;gap:10px;padding:8px 14px;font-size:12px}
.tokenrow + .tokenrow{border-top:1px solid var(--border)}
.tokenrow .tk{flex:1;color:var(--mute);font-family:ui-monospace,monospace;font-size:11px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tokenrow input[type=color]{width:36px;height:24px;border:1px solid var(--border);border-radius:6px;
  background:none;padding:2px;flex:none}
.tokenrow input[type=text]{width:104px;flex:none;border:1px solid var(--border);border-radius:6px;
  background:var(--surface-2);color:var(--text);font-size:11px;padding:5px 7px;text-align:right}
.tokengroup{
  padding:9px 14px 7px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mute-2);background:var(--surface-2);border-top:1px solid var(--border)
}

.rows{margin-bottom:16px}
.rowitem{
  display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--surface);
  border:1px solid var(--border);border-radius:12px;margin-bottom:8px
}
.rowitem .grip{color:var(--mute-2);flex:none;font-size:12px;width:14px;text-align:center}
.rowitem .fields{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.rowitem input,.rowitem select{
  width:100%;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);
  color:var(--text);font-size:12.5px;padding:7px 9px
}
.rowitem .duo{display:flex;gap:6px}
.rowitem .duo input{flex:1}
.rowitem .duo input.amt{max-width:104px;text-align:right;font-variant-numeric:tabular-nums}
.rowitem .duo select{max-width:104px}
.rowitem .kill{color:#B3261E;font-size:16px;padding:6px;flex:none;line-height:1}
.rowmove{display:flex;flex-direction:column;gap:2px;flex:none}
.rowmove button{font-size:9px;color:var(--mute);padding:2px 4px;line-height:1}

.btn{
  display:block;width:100%;text-align:center;padding:14px;border-radius:var(--r-btn);
  font-size:14.5px;font-weight:600;background:var(--primary);color:var(--on-primary);
  margin-bottom:10px;transition:opacity 160ms ease
}
.btn:active{opacity:.82}
.btn.ghost{background:var(--surface);color:var(--text);border:1px solid var(--border)}
.btn.quiet{background:transparent;color:var(--mute);font-weight:520;font-size:13px;padding:10px}
.btn.danger{background:#B3261E;color:#fff}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn-duo{display:flex;gap:10px;margin-bottom:10px}
.btn-duo .btn{margin-bottom:0}

.stat{display:flex;align-items:center;gap:10px;padding:12px 14px;font-size:13px;color:var(--text)}
.stat + .stat{border-top:1px solid var(--border)}
.stat b{font-weight:520;flex:1}
.stat .v{color:var(--mute);font-size:12.5px;font-variant-numeric:tabular-nums;text-align:right}
.stat .pip{width:7px;height:7px;border-radius:50%;background:var(--credit);flex:none}
.stat .pip.warn{background:#D08A1E}

.toast{
  position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 22px);
  transform:translate(-50%,10px);z-index:60;
  background:rgba(16,20,18,.92);color:#fff;font-size:12.5px;font-weight:520;
  padding:11px 16px;border-radius:999px;opacity:0;pointer-events:none;
  transition:opacity 240ms ease,transform 240ms var(--ease);max-width:80%;text-align:center
}
.toast.on{opacity:1;transform:translate(-50%,0)}

#modal{position:absolute;inset:0;z-index:40;display:none}
#modal.open{display:block}
.mveil{position:absolute;inset:0;background:rgba(6,10,9,.62)}
.mbox{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.94);
  width:calc(100% - 56px);max-width:320px;background:var(--surface);border-radius:18px;
  padding:22px 20px 16px;box-shadow:0 24px 60px -18px rgba(0,0,0,.6);opacity:0;
  transition:opacity 220ms ease,transform 260ms var(--ease);max-height:80%;overflow-y:auto
}
#modal.open .mbox{opacity:1;transform:translate(-50%,-50%) scale(1)}
.mbox h3{
  margin:0 0 9px;font-family:var(--f-display);font-size:17px;font-weight:var(--w-display);
  letter-spacing:var(--ls-display);color:var(--text)
}
.mbox p{margin:0 0 6px;font-size:12.5px;line-height:1.5;color:var(--mute)}
.mbox ul{margin:8px 0 16px;padding-left:17px;font-size:12px;line-height:1.65;color:var(--mute)}
.mbox input[type=text]{
  width:100%;margin:10px 0 4px;border:1px solid var(--border);border-radius:10px;
  background:var(--surface-2);color:var(--text);font-size:14px;padding:11px 12px
}
.mbtns{display:flex;gap:9px;margin-top:16px}
.mbtns button{flex:1;padding:13px;border-radius:var(--r-btn);font-size:14px;font-weight:600}
.mbtns .cancel{background:var(--surface-2);color:var(--text)}
.mbtns .confirm{background:var(--primary);color:var(--on-primary)}
.mbtns .confirm.destructive{background:#B3261E;color:#fff}

.busy{display:flex;align-items:center;gap:10px;padding:14px;font-size:12.5px;color:var(--mute)}
.busy i{
  width:16px;height:16px;border-radius:50%;border:2px solid var(--border);
  border-top-color:var(--accent);animation:spin 800ms linear infinite;flex:none
}

/* ── live stage previews ───────────────────────────────────────────── */
.live-preview-wrap{
  margin:0 0 18px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface-2);
}
.live-preview-head{display:flex;justify-content:space-between;gap:8px;align-items:baseline;margin:0 2px 10px}
.live-preview-head b{font-size:13px;color:var(--text)}
.live-preview-head span{font-size:10.5px;color:var(--mute);text-align:right}
.live-preview{
  position:relative;
  width:min(100%, 300px);
  aspect-ratio:9/19.5;
  margin:0 auto;
  overflow:hidden;
  border-radius:24px;
  background:#000;
  box-shadow:0 8px 28px -12px rgba(0,0,0,.45);
  touch-action:none;
}
.live-preview .preview-stage{
  display:block !important;
  visibility:visible !important;
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  overflow:hidden !important;
  transform:none !important;
  border-radius:inherit;
}
.live-preview .preview-stage *{max-width:100%}
.live-preview .preview-stage.preview-visible{display:block !important;visibility:visible !important;opacity:1 !important}
.live-preview .preview-stage button{pointer-events:none}
.live-preview .preview-stage .auth-brand{pointer-events:none}
.live-preview .preview-stage .preview-draggable{
  outline:1px dashed rgba(255,255,255,.35);
  outline-offset:5px;
  cursor:grab;
  pointer-events:auto;
  touch-action:none;
}
.live-preview .preview-stage .preview-draggable:active{cursor:grabbing}
.live-preview .preview-stage .fscs,
.live-preview .preview-stage .authenticator{z-index:8}
.live-preview .preview-stage #authBg{transform:none !important;animation:none !important}
.live-preview .preview-stage .ring{animation:none !important}
.live-preview .preview-stage .pulse-wrap i,
.live-preview .preview-stage .dots i,
.live-preview .preview-stage .lbar i{animation:none !important}
.live-preview .preview-stage .auth-prog i{animation:none !important;width:62% !important}
.live-preview .preview-stage .auth-sub{opacity:.55 !important}
.live-preview .preview-stage .fscs{opacity:.92 !important}
.live-preview .preview-stage .authenticator,.live-preview .preview-stage .auth-brand{opacity:1 !important}
.live-preview .preview-stage #skipZone{display:none}

.live-preview .preview-stage .pc-wrap{padding:14px 11px 10px}
.live-preview .preview-stage .pc-greet{margin-top:12px}
.live-preview .preview-stage .pc-dots{margin-top:14px;gap:7px}
.live-preview .preview-stage .pc-dots i{width:8px;height:8px}
.live-preview .preview-stage .pc-pad{gap:7px}
.live-preview .preview-stage .pc-key{width:42px;height:42px}
.live-preview .preview-stage .pc-key .d{font-size:16px}
.live-preview .preview-stage .pc-key .l{font-size:6px}
.live-preview .preview-stage .pc-key.util svg{width:16px;height:16px}
.live-preview .preview-stage .pc-foot{gap:7px;margin-top:8px}
.live-preview .preview-stage .pc-btn{padding:8px;max-width:100%;font-size:10px}
.live-preview .preview-stage .pc-link{font-size:8px}
.live-preview .preview-stage .pc-sec{font-size:7px;max-width:100%}