/* ============================================================
   styles.css
   Seluruh CSS Momenin Studio (dipindah dari <style> di momenin.html).
   ============================================================ */

  :root{
    --bg:#17140F; --surface:#221C15; --surface-2:#2C251A; --text:#F4EEE1;
    --muted:#A79A83; --accent:#F5C518; --accent-ink:#1A1508; --shutter:#E1483A;
    --line: rgba(244,238,225,0.14); --radius: 16px;
    --font-display: 'Bebas Neue', 'Arial Narrow', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --font-script: 'Caveat', cursive;
    --gradient: linear-gradient(135deg, var(--accent) 0%, var(--shutter) 120%);
  }
  @media (prefers-color-scheme: light){
    :root:not([data-theme="dark"]){
      --bg:#EDE6D6; --surface:#FBF8F1; --surface-2:#F1EADA; --text:#231C12;
      --muted:#7A6E58; --accent:#B8860B; --accent-ink:#FFFBEF; --shutter:#C43B2E;
      --line: rgba(35,28,18,0.14);
    }
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;overflow-x:hidden;}
  body{background:var(--bg);color:var(--text);font-family:var(--font-body);min-height:100vh;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;
    background-image: radial-gradient(circle at 15% 10%, rgba(245,197,24,.16), transparent 45%),
                       radial-gradient(circle at 85% 30%, rgba(225,72,58,.14), transparent 45%);
    background-attachment: fixed;
  }
  #app{max-width:640px;margin:0 auto;padding:20px 16px 60px;min-height:100vh;}
  .marquee{text-align:center;margin:8px 0 22px;}
  .marquee h1{font-family:var(--font-display);font-size:clamp(38px,9vw,56px);letter-spacing:2px;margin:0;
    background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  
  
  /* Cursor pointer untuk SEMUA elemen interaktif di seluruh aplikasi */
button,
.btn-primary,
.btn-ghost,
.btn-shutter,
.choice-pill,
.swatch,
.menu-pill,
.token-badge-btn,
a.menu-pill,
a[href],
input[type="checkbox"],
input[type="radio"],
select,
.filter-thumb,
.ai-theme-card,
.slot-card,
.sticker-btn,
.gallery-item img,
.mm-lock-login-btn,
[onclick] {
  cursor: pointer;
}

/* Kecualikan elemen yang memang tidak boleh terlihat bisa diklik */
button:disabled,
.btn-primary:disabled,
.btn-ghost:disabled,
input:disabled,
select:disabled,
.ai-theme-card-disabled {
  cursor: not-allowed;
}

/* Input teks/angka biasa tetap pakai cursor teks standar, bukan pointer */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
textarea {
  cursor: text;
}

/* Efek hover untuk tombol-tombol utama (oranye/gradient) */
.btn-primary,
.btn-shutter,
.token-package-btn,
#roomFeatureModal .choice-modal-options button {
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.btn-primary:hover:not(:disabled),
.btn-shutter:hover:not(:disabled),
.token-package-btn:hover:not(:disabled),
#roomFeatureModal .choice-modal-options button:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0 6px 18px rgba(225, 72, 58, 0.35);
  filter: brightness(1.08);
}
.btn-primary:active:not(:disabled),
.btn-shutter:active:not(:disabled),
.token-package-btn:active:not(:disabled),
#roomFeatureModal .choice-modal-options button:active:not(:disabled) {
  transform: translateY(0) scale(0.985);
  filter: brightness(0.96);
}

/* Efek hover untuk tombol ghost (outline) */
.btn-ghost {
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.btn-ghost:hover:not(:disabled) {
  background-color: rgba(245, 197, 24, 0.08);
  border-color: var(--accent);
  transform: translateY(-1px);
}

/* Efek hover untuk pil pilihan (timer, bentuk, bingkai, dst) & swatch warna/tema */
.choice-pill,
.swatch,
.filter-thumb,
.ai-theme-card,
.sticker-btn,
.menu-pill {
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.choice-pill:hover,
.swatch:hover,
.filter-thumb:hover,
.ai-theme-card:hover:not(.ai-theme-card-disabled),
.sticker-btn:hover,
.menu-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
  border-color: var(--accent);
}

/* Kartu slot foto & item galeri -- sedikit terangkat saat dihover */
.slot-card,
.gallery-item {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.slot-card:hover,
.gallery-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}

/* Batalkan semua efek hover di atas untuk elemen yang disabled */
button:disabled:hover,
.btn-primary:disabled:hover,
.btn-ghost:disabled:hover,
.ai-theme-card-disabled:hover {
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Scrollbar custom untuk baris pilihan yang scroll ke samping
   (Tata Letak, Jumlah Foto, Timer, Bentuk, Bingkai, Tema Warna, Tema Background) */
.choice-row,
.swatch-row {
  scrollbar-width: thin;
  scrollbar-color: #E1483A rgba(255,255,255,0.06);
  padding-bottom: 6px; /* beri jarak supaya scrollbar tidak menempel ke konten */
}
.choice-row::-webkit-scrollbar,
.swatch-row::-webkit-scrollbar {
  height: 6px;
}
.choice-row::-webkit-scrollbar-track,
.swatch-row::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
}
.choice-row::-webkit-scrollbar-thumb,
.swatch-row::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #F5C518, #E1483A);
  border-radius: 999px;
}
.choice-row::-webkit-scrollbar-thumb:hover,
.swatch-row::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg, #FFD84D, #FF5C4A);
}

/* Scrollbar custom untuk baris pratinjau tema di modal panduan fitur */
.feature-guide-previews {
  scrollbar-width: thin;
  scrollbar-color: #E1483A rgba(255,255,255,0.06);
  padding-bottom: 6px;
}
.feature-guide-previews::-webkit-scrollbar {
  height: 6px;
}
.feature-guide-previews::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
}
.feature-guide-previews::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #F5C518, #E1483A);
  border-radius: 999px;
}
.feature-guide-previews::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg, #FFD84D, #FF5C4A);
}

/* Scrollbar custom untuk seluruh halaman web */
html {
  scrollbar-width: thin;
  scrollbar-color: #E1483A #1A1508;
}
html::-webkit-scrollbar {
  width: 10px;
}
html::-webkit-scrollbar-track {
  background: #1A1508;
}
html::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #F5C518, #E1483A);
  border-radius: 999px;
  border: 2px solid #1A1508;
}
html::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #FFD84D, #FF5C4A);
}


  
  .bulbs{display:flex;justify-content:center;gap:7px;margin-top:6px;}
  .bulbs span{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px var(--accent);opacity:.85;}
  .bulbs span:nth-child(3n){opacity:.4;box-shadow:none;}
  .tagline{font-family:var(--font-script);color:var(--muted);font-size:19px;text-align:center;margin:2px 0 0;}
  .subheadline{color:var(--muted);font-size:13px;text-align:center;margin:2px 0 0;letter-spacing:.3px;opacity:.85;}
  .card{border-radius:var(--radius);padding:22px;margin-bottom:16px;background:var(--surface);border:1px solid var(--line);overflow-x:hidden;}
  .card h2{font-family:var(--font-display);font-size:26px;letter-spacing:.5px;margin:0 0 4px;}
  .subtext{color:var(--muted);font-size:14px;margin:0 0 16px;}
  button{font-family:var(--font-body);font-weight:600;font-size:15px;border-radius:999px;border:1px solid transparent;padding:13px 22px;cursor:pointer;transition:transform .08s ease, opacity .15s ease;}
  a.btn-primary, a.btn-ghost, a.btn-shutter{
    font-family:var(--font-body);font-weight:600;font-size:15px;border-radius:999px;
    border:1px solid transparent;padding:13px 22px;cursor:pointer;
    transition:transform .08s ease, opacity .15s ease;
    display:inline-block;text-decoration:none;box-sizing:border-box;
  }
  a.btn-primary:active, a.btn-ghost:active, a.btn-shutter:active{transform:scale(.97);}
  a.btn-ghost{border-color:var(--line);}
  .btn-row a{flex:1;min-width:110px;}

  .menu-pill{
    display:flex; align-items:center; justify-content:center; gap:6px;
    flex:1; min-width:110px; box-sizing:border-box;
    background:var(--surface-2); border:1px solid var(--line); color:var(--text);
    border-radius:999px; padding:12px 16px; font-size:14px; font-weight:600;
    text-decoration:none; cursor:pointer; text-align:center;
    transition:transform .08s ease, opacity .15s ease, border-color .15s ease, color .15s ease;
  }
  .menu-pill:active{transform:scale(.97);}
  .menu-pill:disabled{opacity:.4;cursor:not-allowed;transform:none;}
  .menu-pill-logout:hover{border-color:var(--shutter);color:var(--shutter);}

  .cards-row-50{ display:flex; gap:10px; margin-bottom:16px; align-items:stretch; }
  .cards-row-50 .card{
    flex:1; min-width:0; margin-bottom:0; display:flex; flex-direction:column;
    padding:16px 14px;
  }
  .cards-row-50 .card h2{ font-size:20px; margin-bottom:2px; }
  .cards-row-50 .card .subtext{ font-size:12.5px; margin-bottom:12px; }
  .cards-row-50 .card button, .cards-row-50 .card a.btn-primary, .cards-row-50 .card a.btn-ghost, .cards-row-50 .card .menu-pill{
    padding:11px 10px; font-size:13px;
  }
  .cards-row-50 .card > *:last-child{ margin-top:auto; }
  @media (max-width:480px){
    .cards-row-50{ gap:8px; }
    .cards-row-50 .card{ padding:12px 10px; }
    .cards-row-50 .card h2{ font-size:17px; }
    .cards-row-50 .card .subtext{ font-size:11px; margin-bottom:8px; }
    .cards-row-50 .card button, .cards-row-50 .card a.btn-primary, .cards-row-50 .card a.btn-ghost{
      padding:10px 6px; font-size:12px;
    }
  }
  button:active{transform:scale(.97);}
  button:disabled{opacity:.4;cursor:not-allowed;transform:none;}
  .btn-primary{background:var(--gradient);color:var(--accent-ink);width:100%;}
  .btn-shutter{background:var(--shutter);color:#fff;}
  .btn-ghost{background:transparent;color:var(--text);border-color:var(--line);}
  .btn-sm{padding:8px 14px;font-size:13px;}
  .btn-row{display:flex;gap:10px;flex-wrap:wrap;}
  .btn-row button{flex:1;min-width:110px;}
  #capture-controls #btn-capture{flex:7 1 0%;min-width:0;}
  #capture-controls #btn-end-early{flex:3 1 0%;min-width:0;}
  input[type="text"]{width:100%;font-family:var(--font-display);font-size:26px;letter-spacing:6px;text-align:center;background:var(--surface-2);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:12px;text-transform:uppercase;}
  input[type="text"]::placeholder{letter-spacing:2px;font-family:var(--font-body);font-size:14px;color:var(--muted);}
  input[type="password"]{width:100%;font-family:var(--font-body);font-size:15px;background:var(--surface-2);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:12px;}
  input[type="password"]::placeholder{color:var(--muted);}
  input.url-input{font-family:var(--font-body);font-size:13px;letter-spacing:normal;text-transform:none;text-align:left;padding:10px 12px;}
  .hidden{display:none !important;}
  .room-code-display{font-family:var(--font-display);font-size:44px;letter-spacing:8px;text-align:center;color:var(--accent);margin:6px 0 2px;}
  .copy-hint{text-align:center;color:var(--muted);font-size:13px;margin-bottom:14px;}
  .video-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0;}
  .video-pair.solo{grid-template-columns:1fr;max-width:280px;margin-left:auto;margin-right:auto;}
  .video-pair-shell{position:relative;}
  .video-slot{position:relative;aspect-ratio:1/1;background:#000;border-radius:12px;overflow:hidden;border:1px solid var(--line);}
  .video-slot video{width:100%;height:100%;object-fit:cover;opacity:0.9999;transform:translateZ(0);}
  #video-local, #video-remote{transform:scaleX(-1) translateZ(0);}
  .video-slot .tag{position:absolute;bottom:6px;left:8px;font-size:11px;font-weight:700;background:rgba(0,0,0,.55);color:#fff;padding:3px 8px;border-radius:999px;letter-spacing:.5px;}
  .mic-btn{width:100%;margin:4px 0 10px;padding:9px 16px;font-size:13.5px;}
  .status-line{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);justify-content:center;margin:4px 0 14px;}
  .dot{width:8px;height:8px;border-radius:50%;background:var(--muted);}
  .dot.live{background:#4CAF66;box-shadow:0 0 6px #4CAF66;}
  fieldset{border:none;padding:0;margin:0 0 18px;min-width:0;max-width:100%;overflow:hidden;}
  legend{font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);margin-bottom:8px;}
  .choice-row{display:flex;gap:8px;flex-wrap:wrap;}
  .choice-pill{padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);color:var(--text);font-size:14px;font-weight:600;cursor:pointer;}
  .choice-pill.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);}
  .swatch-row{display:flex;gap:10px;flex-wrap:wrap;}
  #scr-customize .swatch-row{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;min-width:0;max-width:100%;}
  #scr-customize .swatch-row .swatch{flex:0 0 auto;}
  #scr-lobby .swatch-row{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;min-width:0;max-width:100%;}
  #scr-lobby .swatch-row .swatch{flex:0 0 auto;}
  #scr-lobby .choice-row{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;min-width:0;max-width:100%;}
  #scr-lobby .choice-row .choice-pill{flex:0 0 auto;white-space:nowrap;}
  .swatch{width:38px;height:38px;border-radius:10px;border:2px solid transparent;cursor:pointer;}
  .swatch.active{border-color:var(--text);}
  .sticker-row{display:flex;gap:8px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;min-width:0;max-width:100%;flex:1;}
  .sticker-row .sticker-btn{flex:0 0 auto;}
  .sticker-btn{font-size:22px;line-height:1;padding:8px 10px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line);cursor:pointer;}
  .timer{font-family:var(--font-display);font-size:40px;letter-spacing:2px;text-align:center;color:var(--text);margin:6px 0 0;}
  .timer.low{color:var(--shutter);}
  .slot-indicator{text-align:center;color:var(--muted);font-size:14px;margin-bottom:10px;}
  .countdown-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:64px;color:#fff;background:rgba(0,0,0,.35);pointer-events:none;z-index:10;}
  .note{font-size:12.5px;color:var(--muted);text-align:center;margin:-4px 0 10px;}

  .slot-picker{display:flex;gap:8px;overflow-x:auto;margin:12px 0;padding-bottom:6px;}
  .slot-card{
    flex:0 0 auto;width:64px;height:64px;border-radius:10px;overflow:hidden;
    border:2px solid var(--line);background:var(--surface-2);position:relative;cursor:pointer;
    display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--muted);
  }
  .slot-card img{width:100%;height:100%;object-fit:cover;pointer-events:none;}
  .slot-card.filled{border-color:var(--accent);}
  .slot-card.active{border-color:var(--shutter); box-shadow:0 0 0 2px var(--shutter);}
  .slot-card .num{position:absolute;top:2px;left:4px;font-size:10px;font-weight:700;color:#fff;background:rgba(0,0,0,.5);border-radius:6px;padding:0 4px;}
  .slot-card .retake-badge{position:absolute;bottom:2px;right:2px;font-size:12px;background:rgba(0,0,0,.6);border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;}
  .split-thumb{display:grid;grid-template-columns:1fr 1fr;width:100%;height:100%;}
  .split-thumb img{width:100%;height:100%;object-fit:cover;}

  canvas#stripCanvas, canvas#sessionPreviewCanvas, canvas#lobbyPreviewCanvas{max-width:100%;border-radius:10px;display:block;margin:0 auto 10px;touch-action:none;}
  canvas#sessionPreviewCanvas, canvas#lobbyPreviewCanvas{max-width:130px;}
  canvas#stripCanvas{cursor:grab;max-width:280px;}
  .preview-wrap{text-align:center;}
  .settings-layout{display:flex;gap:14px;align-items:flex-start;}
  .settings-layout .preview-col{flex:0 0 110px;text-align:center;}
  .settings-layout .choices-col{flex:1;min-width:0;}
  .settings-layout .choices-col fieldset:last-child{margin-bottom:0;}
  #video-pair-anchor-session .video-pair.solo{max-width:600px;}
  #session-preview-block{display:none;}
  .timer-row{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;align-items:center;justify-items:center;column-gap:28px;row-gap:4px;}
  .timer-row p{margin:0;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);}
  .timer-row .timer{margin:0;}
  @media (max-width:480px){
    .settings-layout{gap:10px;}
    .settings-layout .preview-col{flex:0 0 84px;}
    canvas#lobbyPreviewCanvas{max-width:68px;}
    #scr-session .card{padding-left:8px;padding-right:8px;}
    body:has(#scr-session:not(.hidden)) #app{padding-left:6px;padding-right:6px;}
  }
  .filter-row{display:flex;gap:10px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px;min-width:0;max-width:100%;}
  .filter-thumb{flex:0 0 auto;width:66px;text-align:center;cursor:pointer;}
  .filter-thumb img, .filter-thumb canvas, .filter-thumb .swatch-fallback{width:66px;height:66px;border-radius:12px;object-fit:cover;border:2px solid var(--line);display:block;background:var(--surface-2);}
  .filter-thumb.active img, .filter-thumb.active canvas, .filter-thumb.active .swatch-fallback{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);}
  .filter-thumb .label{display:block;font-size:11px;color:var(--muted);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .field-block{margin:0 0 18px;min-width:0;}
  .field-legend{font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);margin-bottom:8px;display:flex;align-items:center;gap:8px;}
  .soon-tag{background:linear-gradient(135deg,#f97316,#ef4444);color:#fff;font-size:9px;font-weight:800;padding:2px 7px;border-radius:20px;letter-spacing:.03em;text-transform:none;}
  .ai-theme-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
  .ai-theme-card{border:1px solid var(--line);border-radius:10px;padding:10px 4px;text-align:center;background:var(--surface-2);cursor:pointer;position:relative;transition:border-color .2s ease;}
  .ai-theme-card:hover{border-color:var(--accent);}
  .ai-theme-card.selected{border-color:var(--accent);border-width:2px;box-shadow:0 0 0 1px var(--accent);background:var(--surface);}
  .ai-theme-card .emoji{font-size:20px;display:block;margin-bottom:4px;}
  .ai-theme-card .name{font-size:10.5px;font-weight:600;color:var(--text);display:block;line-height:1.25;}
  .ai-theme-card .card-soon{position:absolute;top:-6px;right:-4px;background:linear-gradient(135deg,#f97316,#ef4444);color:#fff;font-size:8px;font-weight:800;padding:1px 5px;border-radius:6px;}
  .filter-thumb.active .label{color:var(--text);font-weight:600;}
  .banner{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:13.5px;color:var(--muted);margin-bottom:14px;}
  .save-indicator{font-size:12px;color:var(--muted);text-align:center;margin:6px 0 0;}
  .save-indicator.save-indicator-error{color:var(--shutter);}
  .banner.error{border-color:var(--shutter);color:var(--shutter);}
  .banner b{color:var(--text);}
  .overlay-toolbar-row{display:flex;gap:8px;align-items:flex-start;min-width:0;}
  .overlay-toolbar-row #btn-add-text{flex:0 0 auto;}
  .overlay-panel{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:16px;}
  .overlay-panel .row{display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap;}
  select, input[type="color"]{
    font-family:var(--font-body);font-size:14px;background:var(--surface);color:var(--text);
    border:1px solid var(--line);border-radius:8px;padding:8px 10px;
  }
  input[type="color"]{padding:2px;width:44px;height:36px;cursor:pointer;}
  footer.foot{text-align:center;color:var(--muted);font-size:12px;margin-top:24px;}
  .zoom-modal{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:24px;}
  .zoom-modal.hidden{display:none;}
  .zoom-modal-backdrop{position:absolute;inset:0;background:rgba(8,6,3,0.88);}
  .zoom-modal-content{position:relative;z-index:1;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;}
  .zoom-modal-content img{max-width:100%;max-height:78vh;border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,0.55);display:block;}
  .zoom-modal-close{position:absolute;top:-16px;right:-12px;width:36px;height:36px;border-radius:50%;background:var(--accent);color:var(--accent-ink);border:none;font-size:15px;font-weight:800;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:0;line-height:1;z-index:5;}
  .zoom-modal-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,0.55);color:#fff;border:1px solid rgba(255,255,255,0.35);font-size:20px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;line-height:1;z-index:5;}
  .zoom-modal-nav.hidden{display:none !important;}
  .zoom-modal-nav.prev{left:-8px;}
  .zoom-modal-nav.next{right:-8px;}
  @media (max-width:480px){
    .zoom-modal-nav.prev{left:2px;}
    .zoom-modal-nav.next{right:2px;}
  }
  .zoom-modal-caption{color:rgba(255,255,255,0.6);font-size:12px;margin:10px 0 0;text-align:center;}
  canvas#sessionPreviewCanvas, canvas#lobbyPreviewCanvas{cursor:zoom-in;}

  .choice-modal{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:24px;}
  .choice-modal.hidden{display:none;}
  .choice-modal-backdrop{position:absolute;inset:0;background:rgba(8,6,3,0.72);}
  .choice-modal-card{position:relative;z-index:1;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px;max-width:360px;width:100%;box-shadow:0 20px 50px rgba(0,0,0,0.4);}
 .choice-modal-card {
  max-height: 85vh;
  overflow: visible;
}
.choice-modal-options {
  max-height: 55vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}
  .choice-modal-title{font-family:var(--font-display);font-size:26px;letter-spacing:.5px;margin:0 0 6px;}
  .choice-modal-options{display:flex;flex-direction:column;gap:10px;margin-top:16px;}
  .choice-modal-options button{width:100%;text-align:left;display:flex;flex-direction:column;gap:2px;padding:14px 18px;}
  .choice-modal-desc{display:block;font-size:12px;font-weight:500;opacity:.85;white-space:normal;}

  .floating-wrap{display:flex;gap:10px;flex-wrap:wrap;}
  .floating-wrap button{flex:1;min-width:110px;}
  .floating-wrap.stack{flex-direction:column;}
  .floating-wrap.stack button{width:100%;}
  .floating-spacer{display:none;}
  @media (max-width:680px){
    .floating-wrap{
      position:fixed; left:0; right:0; bottom:0; z-index:60;
      background:var(--surface); border-top:1px solid var(--line);
      padding:12px 16px calc(12px + env(safe-area-inset-bottom));
      margin:0; box-shadow:0 -6px 18px rgba(0,0,0,.28);
      flex-wrap:nowrap;
    }
    .floating-wrap.hidden{display:none !important;}
    .floating-wrap button{margin:0;flex:1;min-width:0;font-size:14px;padding:13px 10px;}
    .floating-spacer{display:block;height:78px;}
  }

  .flash-overlay {
    position: fixed; inset: 0; background-color: #fff; z-index: 9999;
    opacity: 0; pointer-events: none; transition: opacity 0.4s ease-out;
  }
  .flash-overlay.active { opacity: 1; transition: none; }

  #c-choice-frame{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;min-width:0;max-width:100%;}
  #c-choice-frame .choice-pill{flex:0 0 auto;white-space:nowrap;}

  #gif-preview-wrap{text-align:center;margin:6px 0 16px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:14px;}
  #gif-preview-img{max-width:220px;width:100%;border-radius:12px;border:1px solid var(--line);display:block;margin:0 auto 10px;background:#000;}

  .wm-box{position:relative;display:inline-block;}
  .wm-box::after{
    content:'';
    position:absolute; inset:0;
    pointer-events:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='110'><text x='-10' y='60' font-family='Arial, sans-serif' font-size='15' font-weight='700' fill='white' transform='rotate(-22 100,60)'>PREVIEW MOMENIN STUDIO</text></svg>");
    background-repeat:repeat;
    opacity:0.3;
    mix-blend-mode:overlay;
    border-radius:inherit;
  }

  .ai-loading-card{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 14px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;text-align:center;}
  .ai-loading-icon{font-size:34px;animation:ai-bounce 1.1s ease-in-out infinite;}
  .ai-spinner{width:20px;height:20px;border:3px solid rgba(244,238,225,0.25);border-top-color:var(--accent);border-radius:50%;animation:ai-spin 0.8s linear infinite;}
  @keyframes ai-spin{to{transform:rotate(360deg);}}
  @keyframes ai-bounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}

  .mm-toast{
    background:var(--surface); border:1px solid var(--line); color:var(--text);
    border-radius:12px; padding:10px 16px; font-size:13.5px; font-weight:600;
    box-shadow:0 8px 24px rgba(0,0,0,0.4); text-align:center;
    opacity:0; transform:translateY(12px); transition:opacity .25s ease, transform .25s ease;
    pointer-events:none;
  }
  .mm-toast.show{ opacity:1; transform:translateY(0); }
  .mm-toast.mm-toast-success{ border-color:#4CAF66; }
  .mm-toast.mm-toast-error{ border-color:var(--shutter); color:var(--shutter); }

  @keyframes mm-pulse-highlight {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245,197,24,0.65); }
    50% { box-shadow: 0 0 0 12px rgba(245,197,24,0); }
  }
  .mm-highlight-pulse { animation: mm-pulse-highlight 1.1s ease-out 4; }

  .mm-lock-banner{
    background:var(--surface-2); border:1px solid var(--shutter); border-radius:12px;
    padding:16px; margin-bottom:14px; text-align:center;
  }
  .mm-lock-banner p{ color:var(--text); font-size:13px; margin:8px 0 12px; line-height:1.5; }
  .mm-dimmed-locked{ opacity:0.35; filter:grayscale(0.4); pointer-events:none; user-select:none; transition:opacity .2s ease; }

  .mm-pw-toggle{
    position:absolute; right:4px; top:50%; transform:translateY(-50%);
    background:transparent; border:none; padding:6px; border-radius:8px;
    font-size:16px; line-height:1; cursor:pointer; color:var(--muted);
  }
  .mm-pw-toggle:hover{ color:var(--text); background:var(--surface-2); }
  .mm-pw-toggle:active{ transform:translateY(-50%) scale(.92); }

  .challenge-mobile-only{ display:none; }
  @media (max-width:680px){
    body.challenge-room-mode .challenge-mobile-only{ display:flex; gap:4px; justify-content:center; margin-bottom:14px; }
    body.challenge-room-mode #challenge-instruction-overlay,
    body.challenge-room-mode #challenge-instruction-overlay-remote{ display:none !important; }
  }
  .challenge-mobile-pose{
    flex:0 0 85px; width:85px;
    background:rgba(20,16,10,0.88); border:1px solid var(--line); border-radius:10px; padding:4px; text-align:center;
  }
  .challenge-mobile-pose .note{ margin:0 0 3px; font-weight:700; font-size:8px; line-height:1.15; color:#F4EEE1 !important; }
  .challenge-mobile-pose img{ width:100%; border-radius:6px; border:1px solid var(--line); display:block; background:#000; }

  .screen-title-row{
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; margin-bottom:16px; flex-wrap:wrap;
  }
  .screen-title-row .btn-ghost{ margin-bottom:0; flex:0 0 auto; }
  .screen-title{
    font-family:var(--font-display); font-size:19px; letter-spacing:.4px;
    color:var(--text); flex:1; text-align:right; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis;
  }
  @media (max-width:480px){
    .screen-title{ font-size:15px; }
  }

  .feature-guide-card{ max-width:640px; max-height:90vh; overflow-y:auto; }
  .feature-guide-body{ display:flex; gap:20px; margin-top:10px; flex-wrap:wrap; }
  .feature-guide-body > div{ flex:1; min-width:180px; }
  .feature-guide-steps{ margin:0; padding-left:20px; color:var(--text); font-size:13px; line-height:1.6; }
  .feature-guide-steps li{ margin-bottom:8px; }
  .feature-guide-previews{
    display:flex; gap:8px; overflow-x:auto; padding-bottom:4px;
    -webkit-overflow-scrolling:touch; align-items:flex-start;
  }
  .feature-guide-theme{
    flex:0 0 auto; width:78px; border-radius:10px; overflow:hidden;
    border:1px solid var(--line); background:var(--surface-2); align-self:flex-start;
  }
  .feature-guide-theme img{
    display:block; width:100%; height:auto;
  }

  /* FITUR (baru): Live Drawing -- kanvas gambar bersama real-time & toolbar
     lengkap (palet warna bebas, tombol Penghapus, slider ukuran kuas).
     Warna TIDAK dikunci per peran (host/pasangan) -- siapa saja bebas pilih
     warna dari .drawing-swatch; penanda "siapa lagi menggambar" sekarang
     lewat .drawing-indicator (teks sesaat), bukan warna. */
  canvas#drawingLiveCanvas{
    max-width:100%; border-radius:10px; display:block; margin:0 auto 10px;
    touch-action:none; background:#F4EEE1; cursor:crosshair;
  }
    /* FITUR (baru): kursor kanvas berubah ikon sesuai alat yang aktif -- pensil
     kuning saat menggambar, kotak putih saat Penghapus aktif. Ditoggle lewat
     class .tool-pen/.tool-eraser di refreshDrawingToolbarActiveState(). */
  canvas#drawingLiveCanvas.tool-pen{
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28'><path d='M4 24 L19 9 L24 14 L9 29 Z' fill='%23F5C518' stroke='%231A1508' stroke-width='1.5'/></svg>") 4 24, crosshair;
  }
  canvas#drawingLiveCanvas.tool-eraser{
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28'><rect x='4' y='12' width='20' height='12' rx='3' fill='white' stroke='%231A1508' stroke-width='2'/></svg>") 14 18, cell;
  }
  .drawing-toolbar{ display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
  .drawing-color-row{ display:flex; gap:8px; flex-wrap:wrap; }
  .drawing-swatch{ width:30px; height:30px; }
  #btn-drawing-eraser.active{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
  .drawing-size-row{ display:flex; align-items:center; gap:8px; flex:1; min-width:140px; }
  .drawing-size-label{ font-size:12px; color:var(--muted); white-space:nowrap; }
  .drawing-size-row input[type="range"]{ flex:1; accent-color:var(--accent); }
  /* FITUR (revisi): indikator "sedang menggambar" SELALU menempati ruang yang
     sama (min-height tetap ada walau teksnya kosong) -- cuma opacity-nya yang
     berubah (transisi halus). Sebelumnya elemen ini dibongkar-pasang dari alur
     halaman (classList 'hidden'), yang bikin elemen di sekitarnya ikut
     bergeser naik-turun tiap kali indikator muncul/hilang. */
  .drawing-indicator{
    color:var(--accent); font-weight:700; margin:6px 0 10px; min-height:1.1em;
    opacity:0; transition:opacity .15s ease;
  }
  .drawing-indicator.show{ opacity:1; }
  #btn-drawing-undo:disabled, #btn-drawing-redo:disabled{ opacity:.35; cursor:not-allowed; }
  
    /* FITUR (baru): badge jumlah token + tombol "+" untuk buka popup Beli Token --
     ditaruh di pojok kanan-atas kartu "Akun Saya" (kiri: judul, kanan: badge). */
  .card-header-row{
    display:flex; align-items:center; justify-content:space-between;
    gap:10px; margin-bottom:4px;
  }
  .token-badge-btn{
    display:flex; align-items:center; gap:5px;
    background:var(--surface-2); border:1px solid var(--accent);
    border-radius:999px; padding:6px 10px 6px 8px;
    font-size:13px; font-weight:700; color:var(--text);
    cursor:pointer; flex:0 0 auto;
    transition:transform .08s ease, border-color .15s ease;
  }
  .token-badge-btn:active{ transform:scale(.95); }
  .token-badge-icon{ font-size:15px; line-height:1; }
  .token-badge-count{ line-height:1; }
  .token-badge-plus{
    background:var(--accent); color:var(--accent-ink);
    width:16px; height:16px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:12px; font-weight:800; line-height:1;
  }
  
    /* FITUR (baru): kartu tema AI untuk pasangan (guest) di Room -- tidak bisa
     diklik, cuma bisa dilihat sambil berdiskusi lewat suara ke host. */
  .ai-theme-card-disabled{ opacity:.4; cursor:not-allowed; pointer-events:none; }
  
  
    .drawing-shape-row{ display:flex; gap:6px; flex-wrap:wrap; }
  .drawing-shape-btn{
    padding:9px 12px; border-radius:999px; border:1px solid var(--line);
    background:var(--surface-2); color:var(--text); font-size:15px;
    cursor:pointer; line-height:1;
  }
  .drawing-shape-btn.active{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
    #btn-drawing-eyedropper.active{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
  #drawing-custom-color{ width:34px; height:34px; border-radius:8px; cursor:pointer; }
  
    /* FITUR (baru): Blind Booth -- tirai penutup kamera live (video-pair-shell),
     ikon + pesan jenaka yang berganti-ganti, animasi "terangkat" saat reveal.
     Thumbnail slot yang sudah terisi juga ditutup lewat .blind-mode-slots. */
  #blind-curtain{
    position:absolute; inset:0; z-index:20; border-radius:inherit;
    background:linear-gradient(160deg, #17140F, #2C251A);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:10px; padding:20px; text-align:center;
    transition:transform .6s ease, opacity .6s ease;
  }
  #blind-curtain.blind-curtain-lifting{ transform:translateY(-100%); opacity:0; }
  .blind-curtain-icon{ font-size:48px; animation:blind-curtain-bounce 1.4s ease-in-out infinite; }
  @keyframes blind-curtain-bounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
  .blind-curtain-message{ color:#F4EEE1; font-weight:700; font-size:13px; max-width:220px; }

  /* FITUR: thumbnail slot yang sudah terisi ditutup selama Blind Booth
     berlangsung -- kotak tetap terlihat (nomor slot, status "filled"), tapi
     gambarnya tidak kelihatan. */
  .blind-mode-slots .slot-card img,
  .blind-mode-slots .split-thumb{ visibility:hidden; }
  .blind-mode-slots .slot-card.filled{ position:relative; }
  .blind-mode-slots .slot-card.filled::after{
    content:'🙈'; position:absolute; inset:0; display:flex;
    align-items:center; justify-content:center; font-size:20px;
  }
  
    /* FITUR (baru): kotak pencarian menu di Home -- memfilter kartu fitur
     (Foto Strip, Foto Box, Blind Booth, Gridbooth, dst) secara real-time
     lewat initHomeSearch() di core.js. Kartu/baris yang tidak cocok
     disembunyikan pakai class .hidden yang sudah ada, bukan mekanisme baru. */
    .mm-search-card{ margin-bottom:10px; }
  .mm-search-box{
    display:flex; align-items:center; gap:5px;
    background:var(--surface-2); border:1px solid var(--line); border-radius:999px;
    padding:3px 10px;
  }
  .mm-search-icon{ font-size:15px; opacity:.55; flex:0 0 auto; }
  .mm-search-box input{
    flex:1; border:none; background:transparent; outline:none;
    font-family:var(--font-body); font-size:15px; color:var(--text); min-width:0;
  }
  .mm-search-box input::placeholder{ color:var(--muted); }
  .mm-search-clear{
    flex:0 0 auto; background:var(--surface); border:1px solid var(--line);
    color:var(--muted); border-radius:50%; width:14px; height:14px; padding:0;
    display:flex; align-items:center; justify-content:center; font-size:7px; cursor:pointer;
  }
  .mm-search-clear:hover{ color:var(--text); }
  .mm-search-clear:active{ transform:scale(.9); }
  .mm-search-empty{ margin:6px 2px 0; font-size:11px; }
  
    /* FITUR (baru): 3 kartu statistik dummy di Home -- Pengguna Online,
     Total Fitur Tersedia, Jumlah Foto Dibuat. Nilainya dummy, dirandom
     & diperbarui berkala lewat initHomeStats() di core.js (naik-turun
     halus, bukan angka statis). */
  .mm-stats-row{
    display:flex; gap:10px; margin-bottom:14px;
  }
  .mm-stat-card{
    flex:1; min-width:0; display:flex; align-items:center; gap:10px;
    background:var(--surface); border:1px solid var(--line); border-radius:14px;
    padding:12px 14px;
  }
  .mm-stat-icon{
    flex:0 0 auto; width:34px; height:34px; border-radius:10px;
    display:flex; align-items:center; justify-content:center; font-size:16px;
    background:var(--surface-2);
  }
  .mm-stat-body{ min-width:0; }
  .mm-stat-value{
    font-family:var(--font-display); font-size:22px; line-height:1;
    color:var(--text); margin-bottom:3px;
  }
  .mm-stat-label{
    font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
    color:var(--muted); display:flex; align-items:center; gap:4px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .mm-stat-dot{
    width:6px; height:6px; border-radius:50%; background:#4CAF66;
    box-shadow:0 0 5px #4CAF66; display:inline-block;
    animation:mm-stat-pulse 1.6s infinite;
  }
  @keyframes mm-stat-pulse{
    0%,100%{ opacity:1; } 50%{ opacity:.35; }
  }
  @media (max-width:600px){
    .mm-stats-row{ gap:7px; }
    .mm-stat-card{ padding:9px 10px; gap:7px; }
    .mm-stat-icon{ width:28px; height:28px; font-size:13px; border-radius:8px; }
    .mm-stat-value{ font-size:17px; }
    .mm-stat-label{ font-size:9px; }
  }
  
    /* FITUR (baru): Estafet Cerita -- animasi kalimat cerita muncul satu-satu */
  .estafet-story-starter{ opacity:0.8; }
  .estafet-story-sentence{
    opacity:0; animation:estafet-fade-in 0.5s ease forwards;
  }
  @keyframes estafet-fade-in{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:translateY(0); } }
  .estafet-counter-warn{ color:var(--shutter) !important; }
  
  
  /* Scrollbar custom untuk daftar pilihan modal -- mengikuti tema gelap+oranye */
.choice-modal-options {
  scrollbar-width: thin; /* Firefox: lebih tipis dari default */
  scrollbar-color: #E1483A rgba(255,255,255,0.06); /* Firefox: thumb, track */
}
.choice-modal-options::-webkit-scrollbar {
  width: 6px;
}
.choice-modal-options::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
}
.choice-modal-options::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #F5C518, #E1483A);
  border-radius: 999px;
}
.choice-modal-options::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #FFD84D, #FF5C4A);
}

/* Cursor pointer untuk semua elemen yang bisa diklik di dalam modal */
.choice-modal-options button,
.choice-modal-close,
.zoom-modal-close {
  cursor: pointer;
}
.choice-modal-options button:disabled {
  cursor: not-allowed;
}