/* ═══════════════════════════════════════════════════════════
   LIVE STREAMING APP — PREMIUM CSS
   Warna: Cardinal Red Premium (bukan merah cabe)
   Mobile-first (max-width: 430px)
═══════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── PREMIUM RED PALETTE ── */
  --primary:        #C0392B;   /* Cardinal Red — premium, elegan */
  --primary-light:  #D44234;   /* Lighter cardinal */
  --primary-dark:   #922B21;   /* Deep crimson */
  --primary-glow:   rgba(192,57,43,0.45);
  --primary-glass:  rgba(192,57,43,0.15);

  /* ── ACCENT ── */
  --accent:         #E8A020;   /* Warm gold */
  --accent-dark:    #C8850A;
  --green:          #16A34A;
  --blue:           #1D6FA4;

  /* ── NEUTRALS ── */
  --dark:           #080810;
  --dark2:          #11111C;
  --dark3:          #1A1A2A;
  --glass:          rgba(255,255,255,0.07);
  --glass-border:   rgba(255,255,255,0.13);
  --text-white:     #FFFFFF;
  --text-muted:     rgba(255,255,255,0.60);
  --text-dim:       rgba(255,255,255,0.38);

  /* ── MISC ── */
  --radius:         16px;
  --radius-sm:      8px;
  --shadow:         0 10px 40px rgba(0,0,0,0.55);
  --shadow-red:     0 6px 24px rgba(192,57,43,0.45);
  --font:           'Inter', sans-serif;
}

html, body {
  height: 100%;
  background: #050508;
  font-family: var(--font);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* ═══════════════════════════════════════════════════════════
   APP CONTAINER
═══════════════════════════════════════════════════════════ */
.app-container {
  position: relative;
  width: 100%;
  max-width: 430px;
  height: 100vh;
  height: 100dvh; /* Dynamic Viewport Height (menyesuaikan navbar address bar HP) */
  margin: 0 auto;
  overflow: hidden;
  background: var(--dark);
}

/* ═══════════════════════════════════════════════════════════
   VIDEO BACKGROUND
═══════════════════════════════════════════════════════════ */
.video-bg { position: absolute; inset: 0; z-index: 0; }
.live-webcam-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: none;
  transform: scaleX(-1); /* mirror selfie view */
  transform-origin: center center;
  background: #000;
}
.live-canvas { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.live-gradient-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, transparent 28%, transparent 55%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
}

/* Camera toggle button (Icon-Only, Compact 32x32) */
.camera-toggle-btn {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
  animation: pulse-cam 2s infinite ease-in-out;
  transition: transform 0.2s, background 0.2s;
  flex-shrink: 0;
  padding: 0;
}
.camera-toggle-btn:active { transform: scale(0.90); }
.camera-toggle-btn.live-active {
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}
@keyframes pulse-cam {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); }
  50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}


/* ═══════════════════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════════════════ */
.live-header {
  position: absolute; top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 8px;
  gap: 10px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, transparent 100%);
}

.header-left {
  display: flex; align-items: center; gap: 8px;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.15);
  padding: 4px 12px 4px 4px;
  border-radius: 25px;
  cursor: pointer;
  max-width: calc(100% - 130px);
  min-width: 0;
  flex: 1;
}

.streamer-avatar-wrap { 
  position: relative; 
  flex-shrink: 0; 
  display: flex;
  flex-direction: column;
  align-items: center;
}

.streamer-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--primary);
  object-fit: cover;
  background: #222;
  display: block;
}

.live-badge-dot {
  position: absolute; top: 26px; right: 0px;
  width: 8px; height: 8px;
  background: #22c55e;
  border-radius: 50%;
  border: 1.5px solid var(--dark);
  animation: pulseDot 1.5s ease-in-out infinite;
}

.avatar-sub-pill {
  position: absolute;
  bottom: -6px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  font-size: 7.5px;
  font-weight: 900;
  padding: 0px 4px;
  border-radius: 6px;
  letter-spacing: 0.4px;
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.65; }
}

.streamer-info { 
  display: flex; 
  flex-direction: column; 
  justify-content: center;
  margin-left: 2px;
  min-width: 0;
  flex: 1;
}

.streamer-name-row {
  display: flex; align-items: center; gap: 4px;
  min-width: 0;
}

.streamer-name {
  font-size: 13px; font-weight: 700; color: #ffffff;
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.streamer-description {
  max-width: 240px;
  color: rgba(255,255,255,0.7);
  font-size: 10px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.viewer-count-row {
  display: flex; align-items: center; gap: 4px;
  margin-top: 1px;
}

.live-tag-pill {
  font-size: 8px; font-weight: 900;
  background: #ef4444; color: white;
  padding: 1px 4px; border-radius: 3px;
  letter-spacing: 0.5px;
}

.viewer-text {
  font-size: 10.5px; color: rgba(255,255,255,0.85); font-weight: 600;
  white-space: nowrap;
}

.header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.header-icon-btn {
  width: 32px; height: 32px;
  border-radius: 50%; border: none;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.15);
  transition: all 0.2s;
}

.header-icon-btn svg {
  width: 14px; height: 14px;
  fill: none; stroke: white; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}

.header-icon-btn:active { transform: scale(0.88); }

/* Indikator Kecepatan Koneksi & Kualitas Resolusi Realtime */
.network-quality-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 800;
  color: #38bdf8;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  user-select: none;
  transition: all 0.25s ease;
}
.network-quality-badge .net-dot {
  width: 6.5px;
  height: 6.5px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px #22c55e;
  display: inline-block;
  animation: pulseDot 2s infinite;
}
.network-quality-badge.quality-low {
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.4);
}
.network-quality-badge.quality-low .net-dot {
  background: #ef4444;
  box-shadow: 0 0 6px #ef4444;
}
.network-quality-badge.quality-medium {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.4);
}
.network-quality-badge.quality-medium .net-dot {
  background: #fbbf24;
  box-shadow: 0 0 6px #fbbf24;
}
.network-quality-badge.quality-high {
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.4);
}
.network-quality-badge.quality-high .net-dot {
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
}

/* Tombol Mute Header (Siaran Utama) */
.mute-header-btn.is-muted {
  background: rgba(239, 68, 68, 0.35);
  border-color: rgba(239, 68, 68, 0.6);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
}
.mute-header-btn.is-muted svg {
  stroke: #ef4444;
}

/* ═══════════════════════════════════════════════════════════
   TOP BADGES ROW (Sub-header)
═══════════════════════════════════════════════════════════ */
.top-badges-row {
  position: absolute; top: 62px; left: 14px; right: 14px;
  z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  pointer-events: auto;
}

.ranking-bar {
  display: flex; align-items: center; gap: 5px;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 4px 10px;
  font-size: 11px; color: white; font-weight: 600;
  cursor: pointer;
}

.shopping-bag-icon { font-size: 12px; }
.ranking-label { white-space: nowrap; }

.campaign-tag {
  display: flex; align-items: center; gap: 4px;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 4px 10px;
  font-size: 11px; color: white; font-weight: 600;
  cursor: pointer;
}

.campaign-notif {
  width: 6px; height: 6px;
  background: var(--primary);
  border-radius: 50%;
  animation: pulseDot 1s infinite;
}

/* Daily ranking bar */
.daily-ranking-bar {
  position: absolute; top: 100px; left: 14px;
  z-index: 40;
  display: flex; align-items: center; gap: 5px;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 5px 10px;
  font-size: 11px; color: white; font-weight: 600;
  cursor: pointer;
}

.daily-rank-text { white-space: nowrap; }

.lb-mini-avatars { display: flex; margin-left: 4px; }
.lb-mini-avatars img {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--dark);
  margin-left: -5px; background: #333;
}
.lb-mini-avatars img:first-child { margin-left: 0; }

/* ═══════════════════════════════════════════════════════════
   HOT PRODUCT CARD (Pojok kiri atas, di bawah profil toko)
═══════════════════════════════════════════════════════════ */
.hot-product-card {
  position: absolute;
  top: 70px; left: 14px;
  z-index: 42;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 108px;
  background: rgba(8,8,16,0.88);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(239,68,68,0.35);
  border-radius: 12px;
  padding: 8px 8px 7px;
  cursor: pointer;
  animation: slideInDown 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 18px rgba(0,0,0,0.55), 0 0 12px rgba(239,68,68,0.18);
}

.hot-badge {
  position: absolute; top: -8px; left: 8px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white; font-size: 8px; font-weight: 800;
  padding: 2px 7px; border-radius: 6px;
  box-shadow: var(--shadow-red);
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.hot-img-wrap {
  position: relative;
  width: 100%;
  margin-bottom: 6px;
  flex-shrink: 0;
}
.hot-product-img {
  width: 100%; height: 80px;
  border-radius: 8px; object-fit: cover;
  display: block;
  border: 1px solid rgba(255,255,255,0.1);
}

.hot-product-info { flex: 1; min-width: 0; }

.hot-product-name-row { display: flex; align-items: center; gap: 4px; margin-bottom: 3px; }

.beli-lokal-badge {
  font-size: 8px; font-weight: 800;
  background: #f59e0b;
  color: #1c1304;
  padding: 1px 4px; border-radius: 3px;
  flex-shrink: 0;
  white-space: nowrap;
}

.hot-product-name {
  font-size: 11px; font-weight: 700; color: white;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}

.hot-product-perks { margin-bottom: 5px; }

.perk-item {
  display: block;
  font-size: 9px; color: var(--text-muted);
  line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.truck-icon { font-size: 9px; }

.hot-product-bottom { display: flex; align-items: center; justify-content: space-between; gap: 4px; }

.hot-product-price {
  font-size: 12px; font-weight: 800;
  color: #f87171;
  white-space: nowrap;
}

.hot-buy-btn {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white; border: none; border-radius: 10px;
  padding: 4px 0; font-size: 10px; font-weight: 800;
  cursor: pointer; font-family: var(--font);
  box-shadow: 0 2px 8px rgba(239,68,68,0.4);
  transition: transform 0.15s;
  width: 100%;
  margin-top: 4px;
  text-align: center;
}
.hot-buy-btn:active { transform: scale(0.93); }

.hot-close-btn {
  position: absolute; top: 5px; right: 5px;
  background: rgba(0,0,0,0.45); border: none;
  width: 16px; height: 16px; border-radius: 50%;
  color: rgba(255,255,255,0.75); font-size: 9px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════
   FLOATING NOTICE
═══════════════════════════════════════════════════════════ */
.floating-notice {
  position: absolute; right: 14px; bottom: 260px;
  z-index: 40;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.18);
  border-left: 3px solid var(--primary);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 11px; color: white; font-weight: 600;
  animation: slideInRight 0.4s ease;
}

@keyframes slideInRight {
  from { transform: translateX(30px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════
   HAMMER BUTTON
═══════════════════════════════════════════════════════════ */
.hammer-btn-wrap {
  position: absolute; left: 14px; bottom: 250px;
  z-index: 40;
}

.hammer-btn {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
  width: 58px; height: 58px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border: none; border-radius: 50%;
  cursor: pointer; font-family: var(--font);
  box-shadow: var(--shadow-red);
  transition: transform 0.15s;
}
.hammer-btn:active { transform: scale(0.9); }
.hammer-icon { font-size: 22px; }
.hammer-label { font-size: 9px; color: white; font-weight: 700; }

/* ═══════════════════════════════════════════════════════════
   CHAT OVERLAY & MESSAGES
═══════════════════════════════════════════════════════════ */
.chat-overlay {
  position: absolute;
  bottom: 75px; left: 0; right: 70px;
  z-index: 40;
  padding: 0 14px;
  max-height: 240px;
  display: flex; flex-direction: column; justify-content: flex-end;
  pointer-events: none;
}

.chat-messages {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 220px;
  overflow-y: auto;
  overflow-x: hidden;
  pointer-events: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding-right: 4px;
  scrollbar-width: none; /* Hide scrollbar Firefox */
  -ms-overflow-style: none; /* Hide scrollbar IE/Edge */
}

.chat-messages::-webkit-scrollbar {
  display: none; /* Hide scrollbar Chrome/Safari */
  width: 0px;
  background: transparent;
}

.chat-msg {
  display: inline-flex;
  align-items: flex-start;
  gap: 7px;
  background: rgba(0,0,0,0.10);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 5px 9px;
  max-width: 95%;
  animation: slideInUp 0.3s ease;
  pointer-events: all;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}

.chat-msg:active { background: rgba(192,57,43,0.25); }

@keyframes slideInUp {
  from { transform: translateY(14px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.chat-msg-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  flex-shrink: 0; background: #333; margin-top: 1px;
}

.chat-msg-body { flex: 1; }

.chat-msg-user {
  font-size: 11px; font-weight: 700; color: var(--accent);
}

.chat-msg-user.streamer-msg { color: #22c55e; }

.chat-msg-text {
  font-size: 12px; color: rgba(255,255,255,0.92);
  line-height: 1.4; word-break: break-word;
}

.chat-coin-badge {
  display: inline-flex; align-items: center; gap: 2px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #2A1500; font-size: 10px; font-weight: 800;
  padding: 2px 7px; border-radius: 10px; margin-top: 2px;
}

/* "joined" event message */
.chat-msg.join-event {
  background: rgba(192,57,43,0.08);
  border: 1px solid rgba(192,57,43,0.2);
}

.join-wave { font-size: 14px; margin-right: 2px; }

/* ═══════════════════════════════════════════════════════════
   PINNED MESSAGE BAR (Transparan Modern, Tidak Menghalangi)
═══════════════════════════════════════════════════════════ */
.pinned-msg-bar {
  position: relative;
  z-index: 45;
  background: rgba(15, 23, 42, 0.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-left: 3px solid #ef4444;
  border-radius: 10px;
  padding: 5px 9px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  animation: slideInDown 0.3s ease;
  pointer-events: auto;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
  width: 100%;
  max-width: 95%;
}

@keyframes slideInDown {
  from { transform: translateY(-10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.pin-icon { font-size: 12px; flex-shrink: 0; }
.pinned-msg-text { 
  flex: 1; 
  font-size: 11px; 
  color: white; 
  font-weight: 600; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
}
.unpin-btn { 
  background: rgba(255,255,255,0.12); 
  border: none; 
  color: rgba(255,255,255,0.85); 
  cursor: pointer; 
  font-size: 10px; 
  width: 18px; 
  height: 18px; 
  border-radius: 50%; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  transition: all 0.2s;
}
.unpin-btn:hover { background: rgba(255,255,255,0.25); color: white; }

/* ═══════════════════════════════════════════════════════════
   BOTTOM BAR — TikTok-style
═══════════════════════════════════════════════════════════ */
.bottom-bar {
  position: absolute; bottom: 0; left: 0; right: 0;
  z-index: 50;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px calc(14px + env(safe-area-inset-bottom, 12px));
  background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 60%, transparent 100%);
}

/* Product showcase button (Etalase Produk Live) */
.cart-btn {
  position: relative;
  width: 40px; height: 40px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  box-shadow: var(--shadow-red);
  transition: transform 0.15s;
}
.cart-btn:active { transform: scale(0.9); }
.cart-btn svg {
  width: 20px; height: 20px;
  fill: none; stroke: white; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.cart-badge {
  position: absolute; top: -6px; right: -6px;
  background: var(--accent); color: #1a0f00;
  font-size: 9px; font-weight: 800;
  min-width: 17px; height: 17px; border-radius: 9px;
  padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  border: 1.5px solid rgba(255,255,255,0.6);
}

/* Comment row — TikTok style */
.comment-row {
  flex: 1; min-width: 0;
  display: flex; align-items: center;
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 24px;
  padding: 4px 6px 4px 14px;
  gap: 6px;
}

.comment-input {
  flex: 1; background: none; border: none;
  font-family: var(--font); font-size: 13px;
  color: white; outline: none;
  padding: 6px 0;
  min-width: 0;
}
.comment-input::placeholder { color: rgba(255,255,255,0.55); }

.send-btn {
  background: var(--primary); border: none;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: transform 0.15s;
}
.send-btn svg {
  width: 14px; height: 14px;
  fill: none; stroke: white; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
  transform: translateX(1px);
}
.send-btn:active { transform: scale(0.9); }

.sparkle-btn {
  background: none; border: none; cursor: pointer;
  padding: 4px; display: flex; align-items: center;
  flex-shrink: 0;
}

.sparkle-btn svg {
  width: 16px; height: 16px;
  fill: var(--accent); stroke: none;
  transition: transform 0.2s;
}

.sparkle-btn:active svg { transform: scale(1.3) rotate(20deg); }

.comment-input {
  flex: 1; background: none; border: none;
  font-family: var(--font); font-size: 13px;
  color: white; outline: none;
  padding: 8px 0;
  min-width: 0;
}
.comment-input::placeholder { color: rgba(255,255,255,0.42); }

/* Quick reaction buttons */
.quick-reactions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

.quick-react-btn {
  background: none; border: none; cursor: pointer;
  font-size: 17px; padding: 4px;
  transition: transform 0.15s;
  line-height: 1;
}
.quick-react-btn:active { transform: scale(1.3); }

.send-btn {
  background: var(--primary); border: none;
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform 0.15s;
}
.send-btn svg {
  width: 13px; height: 13px;
  fill: none; stroke: white; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transform: translateX(1px);
}
.send-btn:active { transform: scale(0.9); }

/* Right action buttons */
.action-btns {
  display: flex; align-items: flex-end; gap: 8px; flex-shrink: 0;
}

.action-item-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 36px;
  position: relative;
}

.action-count-badge {
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 3px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  letter-spacing: -0.2px;
  background: rgba(0,0,0,0.34);
  padding: 1px 5px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.15);
  text-align: center;
  white-space: nowrap;
}

.quick-react-btn {
  background: none; border: none; cursor: pointer;
  font-size: 20px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s;
  line-height: 1;
  padding: 0;
}
.quick-react-btn:active { transform: scale(1.3); }

.action-btn {
  background: none; border: none; cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s;
  padding: 0;
}
.action-btn svg {
  width: 20px; height: 20px;
  fill: none; stroke: white; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.action-btn:active { transform: scale(0.85); }

.quick-gift-btn {
  background: var(--glass); border: 1px solid var(--glass-border);
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; cursor: pointer;
  transition: transform 0.15s, background 0.2s;
  padding: 0;
  margin-bottom: 0;
}
.quick-gift-btn:active { transform: scale(0.85); background: var(--primary-glass); }

/* Floating more button */
.floating-more-btn {
  position: absolute;
  bottom: 85px; right: 14px;
  z-index: 50;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  width: 34px; height: 34px; border-radius: 50%;
  color: white; font-size: 18px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  letter-spacing: -1px;
  transition: background 0.2s;
}
.floating-more-btn:active { background: var(--primary-glass); }

/* Floating host controls (di atas tombol titik tiga) */
.floating-host-controls {
  position: absolute;
  bottom: 126px;
  right: 14px;
  z-index: 52;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

/* Floating viewer controls (Disembunyikan, opsi sekarang ada di dalam titik tiga ⋯) */
.floating-viewer-controls {
  display: none !important;
}

.floating-join-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.4);
  padding: 8px 12px 8px 10px;
  border-radius: 25px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(14, 165, 233, 0.55);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
}
.floating-join-btn:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.7);
}
.floating-join-btn:active {
  transform: scale(0.92);
}
.floating-join-btn.requested {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border-color: rgba(255,255,255,0.6);
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.6);
  animation: pulseJoin 1.5s infinite;
}
.floating-join-btn.joined {
  background: linear-gradient(135deg, #10b981, #059669);
  border-color: rgba(255,255,255,0.6);
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.6);
}
.join-cam-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.join-cam-icon svg {
  width: 18px;
  height: 18px;
}

.host-circle-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  padding: 0;
}
.host-btn-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.host-circle-btn svg {
  display: block;
  flex-shrink: 0;
  opacity: 0.95;
}
.host-circle-btn:hover {
  transform: scale(1.1);
  background: rgba(0, 0, 0, 0.65);
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}
.host-circle-btn:hover svg {
  opacity: 1;
}
.host-circle-btn:active {
  transform: scale(0.92);
}

/* Status Khusus saat Aktif (tetap mempertahankan aksen saat running) */
.record-circle-btn.recording {
  background: rgba(220, 38, 38, 0.75);
  border-color: rgba(239, 68, 68, 0.9);
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.75);
  animation: pulse-cam 1s infinite;
}

.pause-circle-btn.paused {
  background: rgba(245, 158, 11, 0.75);
  border-color: rgba(245, 158, 11, 0.9);
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.7);
}

.mic-circle-btn.muted {
  background: rgba(239, 68, 68, 0.8) !important;
  border-color: rgba(239, 68, 68, 0.95) !important;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.8) !important;
}

.stop-circle-btn:hover {
  background: rgba(239, 68, 68, 0.65);
  border-color: rgba(239, 68, 68, 0.85);
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.65);
}

/* ═══════════════════════════════════════════════════════════
   DROPDOWN MENU
═══════════════════════════════════════════════════════════ */
.dropdown-menu {
  position: absolute;
  bottom: 126px; right: 10px;
  z-index: 100;
  background: rgba(16, 16, 26, 0.78);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  padding: 6px;
  width: min(215px, calc(100vw - 20px));
  max-height: min(68vh, 520px);
  max-height: min(68dvh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  display: none;
  animation: popIn 0.2s ease;
}

.dropdown-menu.show { display: block; }

@keyframes popIn {
  from { transform: scale(0.85) translateY(10px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

.dropdown-menu button {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 34px; padding: 6px 10px;
  background: none; border: none;
  color: #f1f5f9; font-family: var(--font); font-size: 11.5px; font-weight: 500;
  cursor: pointer; border-radius: 8px;
  transition: all 0.15s ease; text-align: left; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.dropdown-menu button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}
.dropdown-menu button svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.85);
}
.dropdown-menu button:hover svg {
  color: #ffffff;
}

/* ═══════════════════════════════════════════════════════════
   PANEL SYSTEM
═══════════════════════════════════════════════════════════ */
.panel-backdrop {
  position: fixed; inset: 0; z-index: 998;
  background: rgba(0,0,0,0.65);
  display: none;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.panel-backdrop.show { display: block; }

.panel-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: flex-end; justify-content: center;
  pointer-events: none; opacity: 0;
  transition: opacity 0.3s ease;
}
.panel-overlay.show { pointer-events: all; opacity: 1; }

.panel-sheet {
  width: 100%; max-width: 430px;
  background: linear-gradient(180deg, var(--dark3) 0%, var(--dark2) 100%);
  border-radius: 24px 24px 0 0;
  padding: 12px 16px 32px;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.32,0.72,0,1);
  max-height: 85vh; overflow-y: auto;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.panel-overlay.show .panel-sheet { transform: translateY(0); }

.panel-handle {
  width: 40px; height: 4px;
  background: rgba(255,255,255,0.18);
  border-radius: 2px; margin: 0 auto 16px;
}

.panel-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.panel-header h2 { font-size: 16px; font-weight: 700; color: white; }

.panel-close {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.2);
  color: white; cursor: pointer; font-size: 16px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
  position: relative;
  z-index: 10;
}
.panel-close:hover { background: rgba(255,255,255,0.25); transform: scale(1.05); }
.panel-close:active { background: rgba(239,68,68,0.4); transform: scale(0.92); }

/* ═══════════════════════════════════════════════════════════
   STREAMER PROFILE PANEL (MODERN REDESIGNED)
═══════════════════════════════════════════════════════════ */
.profile-sheet {
  padding-bottom: 28px;
  background: linear-gradient(180deg, #1a1e2e 0%, #0f121d 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.85);
  border-radius: 24px 24px 0 0;
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  box-sizing: border-box;
}

.profile-header {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2px;
  margin-bottom: 10px;
}

.profile-avatar-wrap-card {
  position: relative;
  display: inline-flex;
}

.profile-avatar-large {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  border: 3px solid #ff334b;
  box-shadow: 0 0 20px rgba(255, 51, 75, 0.45);
  background: #181820;
  object-fit: cover;
}

.profile-online-badge {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ff2442, #ff5364);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 10px;
  border: 2px solid #1e1e28;
  box-shadow: 0 2px 6px rgba(255, 36, 66, 0.6);
}

.profile-close-btn {
  position: absolute;
  right: 2px;
  top: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.profile-close-btn:hover {
  background: rgba(239, 68, 68, 0.25);
  color: #ff4d4f;
  transform: scale(1.08);
}

.profile-main {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.profile-title-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 10px;
  text-align: center;
}

.profile-name-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 3px;
  width: 100%;
  text-align: center;
}

.profile-username {
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.2px;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.profile-handle {
  font-size: 12px;
  color: #94a3b8;
  font-weight: 500;
  text-align: center;
  margin: 0;
}

/* Power Shop Badge */
.power-shop-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #ff5c00, #ff8c00);
  color: #ffffff !important;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 8px rgba(255, 92, 0, 0.4);
  text-transform: uppercase;
  vertical-align: middle;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.power-shop-badge .badge-icon {
  font-size: 11px;
}

/* Profile Stats Grid */
.profile-stats {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 10px 6px;
  margin-bottom: 10px;
  backdrop-filter: blur(10px);
  box-sizing: border-box;
}

.profile-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-align: center;
  min-width: 0;
}
.profile-stat .stat-num {
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.3px;
}
.profile-stat .stat-label {
  font-size: 10.5px;
  color: #94a3b8;
  margin-top: 2px;
  font-weight: 500;
  white-space: nowrap;
}

.profile-stat-divider {
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

/* Profile WhatsApp Card */
.profile-wa-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 12px;
  padding: 8px 12px;
  margin-bottom: 10px;
  cursor: pointer;
  box-sizing: border-box;
  transition: all 0.2s ease;
}
.profile-wa-card:hover {
  background: rgba(34, 197, 94, 0.18);
  border-color: rgba(34, 197, 94, 0.5);
  transform: translateY(-1px);
}
.wa-icon-circle {
  font-size: 20px;
  margin-right: 8px;
  flex-shrink: 0;
}
.wa-text-info {
  flex: 1;
  text-align: left;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.wa-label {
  font-size: 10px;
  color: #86efac;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.wa-number {
  font-size: 13.5px;
  color: #ffffff;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wa-chat-btn {
  background: #22c55e;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 6px 10px;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.4);
}

/* Bio */
.profile-bio {
  font-size: 12px;
  color: #cbd5e1;
  line-height: 1.5;
  margin-bottom: 10px;
  text-align: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 8px 12px;
  width: 100%;
  box-sizing: border-box;
}

/* Badges Row */
.profile-badges-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
}

.profile-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 8px 10px;
  font-size: 11.5px;
  color: #e2e8f0;
  font-weight: 600;
  flex: 1;
  cursor: pointer;
  transition: all 0.2s ease;
}
.profile-badge:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}
.community-badge {
  border-color: rgba(255, 75, 95, 0.25);
  background: rgba(255, 75, 95, 0.06);
}
.community-badge .badge-count {
  color: #ff4b5f;
  font-weight: 800;
}
.level-badge {
  background: rgba(245, 158, 11, 0.07);
  border-color: rgba(245, 158, 11, 0.25);
}
.badge-level-tag {
  color: #fbbf24;
  font-weight: 800;
}

/* Profile Shop Row */
.profile-shop-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 8px 12px;
  cursor: pointer;
  margin-bottom: 14px;
  width: 100%;
  box-sizing: border-box;
  transition: all 0.2s ease;
}
.profile-shop-row:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  transform: translateY(-1px);
}
.profile-shop-row:active {
  transform: scale(0.99);
}

.shop-icon-box {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 75, 95, 0.12);
  border: 1px solid rgba(255, 75, 95, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.shop-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  text-align: left;
  min-width: 0;
}
.shop-name {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shop-meta-small {
  font-size: 11px;
  color: #94a3b8;
}
.shop-enter-btn {
  background: none;
  border: none;
  font-size: 12px;
  color: #38bdf8;
  font-weight: 700;
  flex-shrink: 0;
  cursor: pointer;
  padding: 0;
}

/* Action Buttons Container */
.profile-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.profile-action-icon-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  color: #ffffff;
  position: relative;
}
.profile-action-icon-btn svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: all 0.2s ease;
}
.profile-action-icon-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: scale(1.05);
}
.profile-action-icon-btn:active {
  transform: scale(0.95);
}

/* Follow Button State (Checklist when followed) */
.profile-action-icon-btn.is-following {
  background: rgba(34, 197, 94, 0.16);
  border-color: #22c55e;
  color: #22c55e;
  box-shadow: 0 0 14px rgba(34, 197, 94, 0.35);
}
.profile-action-icon-btn.is-following svg {
  stroke: #22c55e;
}

/* Notification Button State (Glowing Yellow when active) */
.profile-action-icon-btn.is-notif-active {
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.22), rgba(245, 158, 11, 0.3));
  border-color: #facc15;
  color: #fde047;
  box-shadow: 0 0 16px rgba(250, 204, 21, 0.45);
  animation: notifPulse 2s infinite ease-in-out;
}
.profile-action-icon-btn.is-notif-active svg {
  fill: #facc15;
  stroke: #facc15;
}

@keyframes notifPulse {
  0%, 100% {
    box-shadow: 0 0 14px rgba(250, 204, 21, 0.35);
  }
  50% {
    box-shadow: 0 0 22px rgba(250, 204, 21, 0.65);
  }
}

.join-fan-club-btn {
  flex: 1;
  background: linear-gradient(135deg, #ff2442, #e01230);
  color: #ffffff;
  border: none;
  border-radius: 26px;
  padding: 13px 16px;
  font-size: 14.5px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 18px rgba(255, 36, 66, 0.45);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.join-fan-club-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(255, 36, 66, 0.6);
}
.join-fan-club-btn:active {
  transform: scale(0.97);
}
.join-fan-club-btn.joined {
  background: linear-gradient(135deg, #16a34a, #15803d);
  box-shadow: 0 4px 16px rgba(22, 163, 74, 0.4);
}

/* ═══════════════════════════════════════════════════════════
   LEADERBOARD PANEL
═══════════════════════════════════════════════════════════ */
.leaderboard-list { display: flex; flex-direction: column; gap: 10px; }

.lb-item {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.04);
  border-radius: 12px; padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.06);
}

.lb-rank { font-size: 16px; font-weight: 900; color: var(--text-muted); width: 28px; text-align: center; }
.lb-rank.gold { color: #FFD700; }
.lb-rank.silver { color: #C0C0C0; }
.lb-rank.bronze { color: #CD7F32; }

.lb-avatar { width: 38px; height: 38px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.12); background: #222; }
.lb-info { flex: 1; }
.lb-name { font-size: 13px; font-weight: 600; color: white; }
.lb-coins { font-size: 11px; color: var(--accent); margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════
   PRODUCT PANEL
═══════════════════════════════════════════════════════════ */
/* Promo event banner */
.promo-event-banner {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-radius: 12px; padding: 10px 14px;
  margin-bottom: 12px;
  cursor: pointer;
}
.promo-event-text { font-size: 13px; font-weight: 800; color: white; }
.promo-event-arrow { font-size: 18px; color: rgba(255,255,255,0.7); }

.shop-name-row { display: flex; align-items: center; gap: 6px; }
.shop-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.panel-header-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn {
  background: rgba(255,255,255,0.07); border: none;
  width: 32px; height: 32px; border-radius: 50%;
  font-size: 15px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

.cart-panel-btn {
  position: relative; background: rgba(255,255,255,0.07); border: none;
  width: 32px; height: 32px; border-radius: 50%;
  font-size: 15px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.cart-badge-panel {
  position: absolute; top: -4px; right: -4px;
  background: var(--primary); color: white;
  font-size: 8px; font-weight: 800;
  width: 14px; height: 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

/* Coupon strip */
.coupon-strip-wrap {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px; margin-bottom: 14px;
  overflow: hidden;
}
.coupon-strip {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
}
.coupon-divider {
  height: 1px; background: rgba(255,255,255,0.07);
  margin: 0 14px;
}
.coupon-info { flex: 1; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.coupon-label { font-size: 13px; font-weight: 600; color: white; }
.coupon-count {
  background: var(--primary-glass); border: 1px solid var(--primary);
  color: var(--primary-light); font-size: 10px; font-weight: 800;
  padding: 1px 6px; border-radius: 4px;
}
.coupon-sub { font-size: 10px; color: var(--text-muted); width: 100%; }
.coupon-claim-btn {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white; border: none; border-radius: 8px;
  padding: 7px 16px; font-size: 12px; font-weight: 700;
  cursor: pointer; font-family: var(--font);
  box-shadow: var(--shadow-red); flex-shrink: 0;
}
.coupon-xtra { background: rgba(232,160,32,0.05); }
.xtra-badge {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #2A1500; font-size: 9px; font-weight: 900;
  padding: 2px 6px; border-radius: 4px;
  letter-spacing: 0.5px;
}

/* Product list */
.product-list { display: flex; flex-direction: column; gap: 12px; }

.product-item {
  display: flex; gap: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px; padding: 12px;
  cursor: pointer; transition: background 0.2s;
}
.product-item:active { background: rgba(255,255,255,0.07); }

.product-img-wrap { position: relative; flex-shrink: 0; }
.product-img {
  width: 80px; height: 80px; border-radius: 10px;
  object-fit: cover; display: block; background: #222;
}
.live-now-badge {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white; font-size: 8px; font-weight: 800;
  text-align: center; padding: 2px 0;
  border-radius: 0 0 10px 10px;
  display: flex; align-items: center; justify-content: center; gap: 3px;
}

.product-rank-badge {
  position: absolute; top: 4px; left: 4px;
  background: rgba(0,0,0,0.72);
  color: white; font-size: 9px; font-weight: 800;
  min-width: 16px; height: 16px;
  padding: 0 3px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.15);
}

/* Nomor etalase di produk yang di-pin (hot-product-card) */
.hot-showcase-number {
  position: absolute; top: 4px; left: 4px;
  background: rgba(0,0,0,0.72);
  color: white; font-size: 9px; font-weight: 800;
  min-width: 16px; height: 16px;
  padding: 0 3px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.15);
  z-index: 2;
}

.product-discount-badge {
  position: absolute; top: 4px; right: 4px;
  background: #ef4444; color: white;
  font-size: 8px; font-weight: 800;
  line-height: 1; padding: 3px 4px;
  border-radius: 3px; z-index: 2;
}

.product-info { flex: 1; min-width: 0; }
.product-name { font-size: 13px; font-weight: 600; color: white; line-height: 1.3; }

.product-tags { display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0; }
.product-tag { font-size: 9px; font-weight: 600; padding: 2px 6px; border-radius: 4px; border: 1px solid; }
.product-tag.live { background: var(--primary-glass); color: var(--primary-light); border-color: var(--primary); }
.product-tag.free-ship { background: rgba(22,163,74,0.1); color: #4ade80; border-color: #16a34a; }
.product-tag.beli-lokal { background: rgba(29,111,164,0.12); color: #60a5fa; border-color: #1d6fa4; }

.product-perks { font-size: 10px; color: var(--text-muted); margin: 2px 0; }
.cashback-perk { color: #4ade80; font-weight: 600; }

.product-meta { font-size: 10px; color: var(--text-muted); margin: 2px 0; }
.product-meta span { color: var(--accent); margin-right: 4px; }

.product-bottom {
  display: flex; align-items: center; justify-content: space-between; margin-top: 4px;
}
.product-price { font-size: 15px; font-weight: 800; color: var(--primary-light); }
.product-actions { display: flex; gap: 6px; }

.pin-product-btn {
  padding: 5px 10px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px; font-size: 10px; font-weight: 600;
  color: white; cursor: pointer; font-family: var(--font);
  transition: all 0.2s;
}
.pin-product-btn.pinned {
  background: var(--primary-glass); border-color: var(--primary); color: var(--primary-light);
}

.buy-now-btn {
  padding: 5px 16px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border: none; border-radius: 8px; font-size: 11px; font-weight: 700;
  color: white; cursor: pointer; font-family: var(--font);
  box-shadow: var(--shadow-red); transition: opacity 0.2s;
}
.buy-now-btn:active { opacity: 0.8; }

/* ═══════════════════════════════════════════════════════════
   TIMER PANEL & DISPLAY
═══════════════════════════════════════════════════════════ */
.timer-sheet { text-align: center; }

.timer-options {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 10px; margin: 8px 0 16px;
}

.timer-opt-btn {
  padding: 14px 0;
  background: rgba(255,255,255,0.06);
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 12px; color: white;
  font-family: var(--font); font-size: 14px; font-weight: 700;
  cursor: pointer; transition: all 0.2s;
}
.timer-opt-btn:hover, .timer-opt-btn:active {
  background: var(--primary-glass); border-color: var(--primary); color: var(--primary-light);
}
.hammer-dur-btn.active {
  background: rgba(192,57,43,0.28);
  border-color: var(--primary-light);
  color: #fff;
  box-shadow: 0 0 0 2px rgba(192,57,43,0.22), 0 4px 12px rgba(192,57,43,0.28);
}

.timer-cancel-btn {
  width: 100%; padding: 12px;
  background: rgba(192,57,43,0.12); border: 1px solid rgba(192,57,43,0.4);
  border-radius: 12px; color: var(--primary-light);
  font-family: var(--font); font-size: 14px; font-weight: 700; cursor: pointer;
}

.timer-display {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  z-index: 80; text-align: center; pointer-events: none;
}
.timer-num-wrapper {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-variant-numeric: tabular-nums;
  animation: timerPulse 0.8s ease-in-out infinite;
}
.timer-number {
  font-size: 76px; font-weight: 900; color: white;
  text-shadow: 0 0 50px var(--primary-glow), 0 0 100px rgba(192,57,43,0.3);
  line-height: 1;
}
.timer-ms {
  font-size: 40px; font-weight: 800; color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 0 30px var(--primary-glow);
  margin-left: 2px;
}
@keyframes timerPulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}
.timer-label { font-size: 15px; color: rgba(255,255,255,0.75); font-weight: 700; margin-top: 4px; letter-spacing: 1px; text-transform: uppercase; }
.timer-description {
  max-width: min(82vw, 420px);
  margin: 10px auto 0;
  padding: 7px 12px;
  color: rgba(255,255,255,0.92);
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.timer-description-field { margin: 0 0 16px; text-align: left; }
.timer-description-field label { display: block; margin-bottom: 6px; color: rgba(255,255,255,0.82); font-size: 13px; font-weight: 700; }
.timer-description-field input {
  width: 100%; box-sizing: border-box; padding: 11px 12px;
  color: white; background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16); border-radius: 10px;
  font: 13px var(--font); outline: none;
}
.timer-description-field input:focus { border-color: var(--primary); }
.timer-description-field small { display: block; margin-top: 5px; color: rgba(255,255,255,0.5); font-size: 11px; }

/* ═══════════════════════════════════════════════════════════
   HAMMER PANEL
═══════════════════════════════════════════════════════════ */
.hammer-sheet { text-align: center; }
.hammer-desc { color: var(--text-muted); font-size: 13px; margin-bottom: 20px; line-height: 1.5; }
.hammer-game-area { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 16px; }
.hammer-countdown { font-size: 28px; font-weight: 900; color: var(--accent); }

.hammer-tap-btn {
  width: 120px; height: 120px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border: 4px solid rgba(255,255,255,0.18); font-size: 40px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: var(--shadow-red); transition: transform 0.1s; gap: 4px;
}
.hammer-tap-btn:active:not(:disabled) { transform: scale(0.88); }
.hammer-tap-btn:disabled { background: rgba(255,255,255,0.08); box-shadow: none; cursor: not-allowed; }
.hammer-tap-btn span:last-child { font-size: 20px; font-weight: 900; color: white; }

.hammer-result { font-size: 16px; font-weight: 700; color: #4ade80; min-height: 24px; }

.start-hammer-btn {
  width: 100%; padding: 14px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border: none; border-radius: 14px; color: white;
  font-family: var(--font); font-size: 15px; font-weight: 800;
  cursor: pointer; box-shadow: var(--shadow-red);
  transition: transform 0.2s; margin-bottom: 16px;
}
.start-hammer-btn:active { transform: scale(0.97); }

.hammer-leaderboard { display: flex; flex-direction: column; gap: 6px; }
.hammer-lb-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: rgba(255,255,255,0.04); border-radius: 10px;
}
.hammer-lb-rank { font-size: 14px; font-weight: 800; width: 24px; color: var(--accent); }
.hammer-lb-name { flex: 1; font-size: 13px; color: white; font-weight: 500; }
.hammer-lb-score { font-size: 13px; font-weight: 700; color: var(--primary-light); }

/* ═══════════════════════════════════════════════════════════
   COIN PANEL
═══════════════════════════════════════════════════════════ */
.my-coins {
  display: flex; align-items: center; gap: 10px;
  background: rgba(232,160,32,0.08);
  border: 1px solid rgba(232,160,32,0.25);
  border-radius: 12px; padding: 10px 14px; margin-bottom: 16px;
  font-size: 13px; color: white;
}
.my-coin-amount { font-weight: 800; color: var(--accent); flex: 1; }
.topup-btn {
  background: var(--accent); border: none; border-radius: 8px;
  padding: 5px 12px; font-size: 11px; font-weight: 700;
  color: #2A1500; cursor: pointer; font-family: var(--font);
}

.coin-gift-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }

.coin-gift-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: rgba(255,255,255,0.04);
  border: 2px solid rgba(255,255,255,0.07);
  border-radius: 12px; padding: 12px 6px 8px;
  cursor: pointer; transition: all 0.2s;
}
.coin-gift-item:active { transform: scale(0.92); border-color: var(--accent); background: rgba(232,160,32,0.08); }
.gift-emoji { font-size: 28px; }
.gift-name { font-size: 10px; color: var(--text-muted); font-weight: 500; text-align: center; }
.gift-price { font-size: 10px; color: var(--accent); font-weight: 700; }

/* ═══════════════════════════════════════════════════════════
   DM PANEL
═══════════════════════════════════════════════════════════ */
.dm-messages {
  min-height: 200px; max-height: 300px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; padding: 4px 0;
}
.dm-bubble {
  max-width: 75%; padding: 10px 14px; border-radius: 16px;
  font-size: 13px; line-height: 1.4;
}
.dm-bubble.sent {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white; border-bottom-right-radius: 4px;
}
.dm-bubble.received {
  align-self: flex-start;
  background: rgba(255,255,255,0.07); color: white;
  border-bottom-left-radius: 4px;
}
.dm-input-row { display: flex; gap: 8px; }
.dm-input {
  flex: 1; background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px; padding: 10px 14px;
  font-family: var(--font); font-size: 13px; color: white; outline: none;
}
.dm-input::placeholder { color: rgba(255,255,255,0.35); }
.dm-send-btn {
  padding: 10px 18px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border: none; border-radius: 12px; color: white;
  font-family: var(--font); font-size: 13px; font-weight: 700; cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════
   REPORT PANEL
═══════════════════════════════════════════════════════════ */
.report-desc { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }
.report-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.report-option {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.04);
  border: 2px solid rgba(255,255,255,0.07);
  border-radius: 12px; cursor: pointer; transition: all 0.2s;
  font-size: 13px; color: white;
}
.report-option.selected { border-color: var(--primary); background: var(--primary-glass); }
.report-option input { accent-color: var(--primary); }
.submit-report-btn {
  width: 100%; padding: 13px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border: none; border-radius: 12px; color: white;
  font-family: var(--font); font-size: 14px; font-weight: 700; cursor: pointer;
  box-shadow: var(--shadow-red);
}

/* ═══════════════════════════════════════════════════════════
   BLOCK DIALOG
═══════════════════════════════════════════════════════════ */
.block-avatar-wrap { text-align: center; margin-bottom: 14px; }
.block-avatar { width: 70px; height: 70px; border-radius: 50%; border: 3px solid rgba(192,57,43,0.5); margin-bottom: 8px; }
.block-name { font-size: 15px; font-weight: 700; color: white; }
.block-warning { font-size: 12px; color: var(--text-muted); line-height: 1.6; margin-bottom: 20px; text-align: center; }
.block-actions { display: flex; gap: 10px; }
.cancel-block-btn {
  flex: 1; padding: 13px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px; color: white;
  font-family: var(--font); font-size: 14px; font-weight: 600; cursor: pointer;
}
.confirm-block-btn {
  flex: 1; padding: 13px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border: none; border-radius: 12px; color: white;
  font-family: var(--font); font-size: 14px; font-weight: 700; cursor: pointer;
  box-shadow: var(--shadow-red);
}

/* ═══════════════════════════════════════════════════════════
   FLOATING HEARTS & COINS
═══════════════════════════════════════════════════════════ */
.floating-hearts {
  position: absolute; bottom: 80px; right: 14px;
  z-index: 60; pointer-events: none; width: 50px; height: 200px;
}
.float-heart {
  position: absolute; bottom: 0; right: 10px; font-size: 22px;
  animation: floatUp 1.5s ease-out forwards;
}
@keyframes floatUp {
  0% { transform: translateY(0) scale(0.8) rotate(var(--rot)); opacity: 1; }
  100% { transform: translateY(-180px) scale(1.2) rotate(calc(var(--rot) + 20deg)); opacity: 0; }
}

.floating-coins {
  position: absolute; bottom: 100px; left: 0; right: 0;
  z-index: 60; pointer-events: none; height: 200px;
}
.float-coin {
  position: absolute; font-size: 28px;
  animation: coinFloat 1.8s ease-out forwards;
}
@keyframes coinFloat {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  60% { opacity: 1; }
  100% { transform: translateY(-150px) scale(0.4); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════
   PiP PLAYER
═══════════════════════════════════════════════════════════ */
.pip-player {
  position: fixed; bottom: 100px; right: 16px;
  z-index: 500; width: 160px;
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 8px 30px rgba(0,0,0,0.65);
  border: 2px solid rgba(255,255,255,0.14);
  cursor: move;
  animation: popIn 0.3s ease;
}
.pip-video { position: relative; width: 100%; height: 100px; background: #000; }
.pip-canvas { width: 100%; height: 100%; display: block; }
.pip-live-badge {
  position: absolute; top: 6px; left: 6px;
  background: var(--primary); color: white;
  font-size: 9px; font-weight: 800;
  padding: 2px 6px; border-radius: 4px; letter-spacing: 0.5px;
}
.pip-controls {
  display: flex; justify-content: space-between;
  padding: 6px 8px; background: rgba(10,10,20,0.95);
}
.pip-close, .pip-expand {
  background: rgba(255,255,255,0.1); border: none; color: white;
  font-size: 13px; width: 28px; height: 28px;
  border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

/* ═══════════════════════════════════════════════════════════
   CLEAN MODE BAR & ACTIVE STATE
═══════════════════════════════════════════════════════════ */
.clean-mode-bar {
  position: absolute; bottom: 85px; left: 50%; transform: translateX(-50%);
  z-index: 99;
  background: rgba(10,10,20,0.85);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 24px; padding: 8px 16px;
  display: flex; align-items: center; gap: 12px;
  white-space: nowrap; font-size: 12px; color: white;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.clean-mode-bar button {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border: none; border-radius: 14px;
  padding: 6px 14px; color: white; font-size: 11px; font-weight: 800;
  cursor: pointer; font-family: var(--font);
  box-shadow: var(--shadow-red);
}

/* Ketika Mode Bersih Aktif: Sembunyikan semua elemen UI kecuali nama toko & viewer di header serta clean-mode-bar */
.app-container.clean-mode-active .top-badges-row,
.app-container.clean-mode-active .chat-overlay,
.app-container.clean-mode-active .pinned-msg-bar,
.app-container.clean-mode-active .bottom-bar,
.app-container.clean-mode-active .floating-more-btn,
.app-container.clean-mode-active .hammer-btn-wrap,
.app-container.clean-mode-active .floating-notice,
.app-container.clean-mode-active .floating-hearts,
.app-container.clean-mode-active .floating-coins,
.app-container.clean-mode-active .header-right {
  display: none !important;
}

.app-container.clean-mode-active .live-header {
  background: none !important;
  pointer-events: none;
}
.app-container.clean-mode-active .header-left {
  pointer-events: auto;
}

/* ═══════════════════════════════════════════════════════════
   TOAST
═══════════════════════════════════════════════════════════ */
.toast {
  position: fixed; bottom: 120px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 1200;
  background: rgba(16,16,26,0.95); color: white;
  font-size: 12px; font-weight: 600;
  padding: 10px 18px; border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.18);
  max-width: 86%;
  width: max-content;
  white-space: normal;
  text-align: center;
  line-height: 1.4;
  word-break: break-word;
  opacity: 0;
  transition: all 0.3s ease; pointer-events: none;
  box-shadow: 0 10px 30px rgba(0,0,0,0.7);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ═══════════════════════════════════════════════════════════
   CHEVRON ICON
═══════════════════════════════════════════════════════════ */
.chevron {
  width: 12px; height: 12px; fill: none;
  stroke: var(--text-muted); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ═══════════════════════════════════════════════════════════
   SCROLLBAR
═══════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }

/* ═══════════════════════════════════════════════════════════
   DESKTOP CENTERING
═══════════════════════════════════════════════════════════ */
@media (min-width: 431px) {
  body { background: #020205; }
  .app-container {
    position: absolute; top: 0; bottom: 0; left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 80px rgba(192,57,43,0.12);
  }
}

/* ═══════════════════════════════════════════════════════════
   AUTH & LOGIN MODAL
═══════════════════════════════════════════════════════════ */
.auth-overlay {
  position: absolute; inset: 0; z-index: 2000;
  background: rgba(4, 4, 10, 0.92);
  backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px 12px;
  pointer-events: auto;
  overflow-y: auto;
}

.auth-card {
  width: 100%; max-width: 380px;
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  overflow-x: hidden;
  background: #11111d;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 20px;
  padding: 22px 18px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,0.8);
  scrollbar-width: thin;
  scrollbar-color: rgba(239, 68, 68, 0.5) rgba(255,255,255,0.05);
}

.auth-card::-webkit-scrollbar {
  width: 6px;
}
.auth-card::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
}
.auth-card::-webkit-scrollbar-thumb {
  background: rgba(239, 68, 68, 0.5);
  border-radius: 6px;
}
.auth-card::-webkit-scrollbar-thumb:hover {
  background: rgba(239, 68, 68, 0.8);
}

.auth-logo { 
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px; 
}
.app-brand-logo {
  max-width: 110px;
  max-height: 80px;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
  transition: transform 0.3s ease;
}
.app-brand-logo:hover {
  transform: scale(1.05);
}
.auth-card h2 { font-size: 20px; color: white; margin-bottom: 4px; }
.auth-subtitle { font-size: 12px; color: var(--text-muted); margin-bottom: 18px; }

.preset-roles { 
  display: flex; 
  flex-direction: column; 
  gap: 8px; 
  margin-bottom: 16px;
  max-height: 250px;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(59, 130, 246, 0.5) rgba(255,255,255,0.05);
}

.preset-roles::-webkit-scrollbar {
  width: 5px;
}
.preset-roles::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
}
.preset-roles::-webkit-scrollbar-thumb {
  background: rgba(59, 130, 246, 0.5);
  border-radius: 4px;
}

.role-preset-btn {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: white; text-align: left;
  cursor: pointer;
  transition: all 0.2s;
}
.role-preset-btn:hover { background: rgba(255,255,255,0.12); transform: translateY(-2px); }
.role-preset-btn strong { font-size: 13px; margin-bottom: 2px; }
.role-preset-btn small { font-size: 11px; color: var(--text-muted); }

.role-preset-btn.toko-btn { border-color: rgba(239, 68, 68, 0.5); background: rgba(239, 68, 68, 0.1); }
.preset-badge {
  position: absolute; right: 12px; top: 12px;
  font-size: 9px; font-weight: 800;
  background: #ef4444; color: white;
  padding: 2px 6px; border-radius: 4px;
}
.preset-badge.user-badge { background: #3b82f6; }
.preset-badge.admin-badge { background: #8b5cf6; }

.auth-divider {
  display: flex; align-items: center; text-align: center;
  margin: 14px 0; color: rgba(255,255,255,0.3); font-size: 11px;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.auth-divider span { padding: 0 8px; }

#authForm input {
  width: 100%; padding: 11px 14px; margin-bottom: 10px;
  border-radius: 10px; border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06); color: white;
  font-size: 13px; outline: none; box-sizing: border-box;
}
#authForm input:focus { border-color: var(--primary); }

.auth-submit-btn {
  width: 100%; padding: 12px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white; border: none; border-radius: 12px;
  font-weight: 700; font-size: 13px; cursor: pointer;
  box-shadow: var(--shadow-red);
}

.apk-download-container {
  margin-top: 14px;
  width: 100%;
}

.apk-download-divider {
  display: flex; align-items: center; text-align: center;
  margin: 12px 0 10px 0; color: rgba(255,255,255,0.3); font-size: 11px;
}
.apk-download-divider::before, .apk-download-divider::after {
  content: ''; flex: 1; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.apk-download-divider span { padding: 0 8px; }

.apk-download-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(5, 150, 105, 0.22));
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #fff;
  text-decoration: none;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.15);
}

.apk-download-btn:hover {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.22), rgba(5, 150, 105, 0.35));
  border-color: rgba(16, 185, 129, 0.7);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.28);
  color: #fff;
}

.apk-download-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(16, 185, 129, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #34d399;
  flex-shrink: 0;
}

.apk-download-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  text-align: left;
}

.apk-download-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #f3f4f6;
}

.apk-download-meta {
  font-size: 11px;
  color: #a7f3d0;
  margin-top: 1px;
}

.apk-download-action {
  color: #34d399;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  transition: transform 0.2s;
}

.apk-download-btn:hover .apk-download-action {
  transform: translateY(2px);
  color: #6ee7b7;
}



/* ═══════════════════════════════════════════════════════════
   LOBBY / EXPLORE SCREEN
═══════════════════════════════════════════════════════════ */
.lobby-overlay {
  position: absolute; inset: 0; z-index: 900;
  background: #080811;
  display: flex; flex-direction: column;
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
.lobby-overlay::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Edge */
}

.lobby-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px; background: #11111d;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.user-profile-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 4px 10px 4px 4px;
  border-radius: 24px;
  transition: all 0.2s ease;
  user-select: none;
}
.user-profile-badge:hover {
  background: rgba(255, 255, 255, 0.08);
}
.user-profile-badge:hover img {
  border-color: #ff6b35;
  transform: scale(1.06);
  box-shadow: 0 0 12px rgba(255, 77, 0, 0.45);
}
.user-profile-badge:active {
  transform: scale(0.97);
}
.user-profile-badge img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--primary);
  transition: all 0.2s ease;
  object-fit: cover;
}
.user-profile-badge strong { font-size: 13px; color: white; display: block; }

.role-pill {
  font-size: 9px; font-weight: 800; text-transform: uppercase;
  background: #3b82f6; color: white;
  padding: 1px 6px; border-radius: 4px;
}
.role-pill.toko { background: #ef4444; }
.role-pill.admin { background: #8b5cf6; }

.lobby-action-icon-btn {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, opacity 0.15s, background 0.2s;
  flex-shrink: 0;
  padding: 0;
}
.lobby-action-icon-btn:active {
  transform: scale(0.9);
}

/* Tombol Keranjang: Merah identik dengan bar live */
.lobby-action-icon-btn.cart {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 4px 12px rgba(255, 77, 0, 0.35);
}
.lobby-action-icon-btn.cart svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Tombol Keluar: Ikon X semi-transparan elegan */
.lobby-action-icon-btn.close-x {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.lobby-action-icon-btn.close-x svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #cbd5e1;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.2s;
}
.lobby-action-icon-btn.close-x:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
}
.lobby-action-icon-btn.close-x:hover svg {
  stroke: #f87171;
}

.lobby-action-icon-btn .cart-badge-panel {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--accent);
  color: #2A1500;
  font-size: 9px;
  font-weight: 800;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 10px;
  display: flex; /* Selalu tampilkan angka (termasuk angka 0 jika kosong) */
  align-items: center;
  justify-content: center;
  border: 1.5px solid #11111d;
  box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

.lobby-content {
  padding: 16px;
  flex: 1;
  width: 100%;
  box-sizing: border-box;
}
.lobby-title-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.lobby-title-row h3 { font-size: 15px; color: white; }

.refresh-lobby-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--accent);
  width: 32px;
  height: 32px;
  border-radius: 9px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  padding: 0;
}
.refresh-lobby-btn:hover {
  background: rgba(255, 184, 0, 0.15);
  border-color: var(--accent);
  transform: rotate(45deg);
}
.refresh-lobby-btn:active {
  transform: rotate(180deg) scale(0.9);
}

.toko-host-banner {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(185, 28, 28, 0.1));
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 14px; padding: 14px; margin-bottom: 18px;
}
.host-banner-text strong { color: white; font-size: 13px; display: block; margin-bottom: 4px; }
.host-banner-text p { font-size: 11px; color: var(--text-muted); margin-bottom: 10px; }

.start-broadcast-btn {
  width: 100%; padding: 10px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white; border: none; border-radius: 10px;
  font-weight: 700; font-size: 12px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4);
}

.active-lives-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}

.live-card-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(21,21,34,0.42);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 12px;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  transition: transform 0.2s, border-color 0.2s;
}
.live-card-item:hover { transform: translateY(-2px); border-color: var(--primary); }

.live-card-thumb {
  position: relative; width: 68px; height: 68px; flex-shrink: 0;
}
.live-card-thumb img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 10px;
}
.live-card-badge {
  position: absolute; top: 4px; left: 4px;
  background: #ef4444; color: white; font-size: 8px; font-weight: 900;
  padding: 2px 6px; border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.live-card-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.live-card-info h4 {
  font-size: 13px;
  color: white;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.live-card-host {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.live-card-description {
  color: rgba(255,255,255,0.72);
  font-size: 11px;
  line-height: 1.3;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.live-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-card-follow-btn {
  background: rgba(255, 77, 0, 0.15);
  border: 1px solid rgba(255, 77, 0, 0.4);
  color: #ff6b2b;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 20px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s ease;
  margin-left: 6px;
}
.live-card-follow-btn:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
  transform: scale(1.04);
}
.live-card-follow-btn.following {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #94a3b8;
}
.live-card-follow-btn.following:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
  color: #f87171;
}

.no-live-state {
  text-align: center; padding: 40px 20px; color: var(--text-muted);
}
.no-live-state span { font-size: 40px; display: block; margin-bottom: 10px; }

/* ═══════════════════════════════════════════════════════════
   CUSTOM MODAL & DIALOG (MODERN, NO BROWSER POPUPS)
═══════════════════════════════════════════════════════════ */
.custom-modal-overlay {
  position: absolute; inset: 0; z-index: 1100;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  padding: 18px 12px;
  animation: fadeIn 0.2s ease;
  overflow-y: auto;
  box-sizing: border-box;
}
#customDialogModal.custom-modal-overlay {
  z-index: 3000;
}
#checkoutPageModal.custom-modal-overlay {
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  overflow: hidden;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.custom-modal-card {
  width: 100%; max-width: 460px;
  max-height: 88vh;
  max-height: 88dvh;
  background: rgba(18, 22, 36, 0.94);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 20px;
  padding: 20px 18px 14px 18px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.12);
  animation: scaleUp 0.25s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.custom-modal-card form {
  display: flex;
  flex-direction: column;
  width: 100%;
}

@keyframes scaleUp {
  from { transform: scale(0.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.modal-badge {
  display: inline-block;
  font-size: 9px; font-weight: 800; letter-spacing: 0.5px;
  background: rgba(239, 68, 68, 0.2); color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.4);
  padding: 2px 8px; border-radius: 6px; margin-bottom: 10px;
  align-self: flex-start;
}

/* ── MODAL MANAJEMEN PRODUK: FULL SIZE ── */
#productManagementModal.custom-modal-overlay {
  position: absolute;
  inset: 0;
  z-index: 1100;
  background: #080811;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: fadeIn 0.15s ease;
}

#productManagementModal .custom-modal-card.prod-mgmt-card {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  border-radius: 0;
  border: none;
  background: #080811;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  padding: 16px 16px 20px;
  overflow: hidden;
  box-sizing: border-box;
}

.modal-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.modal-close-x {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #94a3b8;
  font-size: 14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.modal-close-x:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

.btn-primary-compact {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(255, 77, 0, 0.35);
}

/* Showcase filter tabs */
.showcase-tabs-bar {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.showcase-tabs-bar::-webkit-scrollbar { display: none; }

.showcase-chip {
  padding: 5px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #94a3b8;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}
.showcase-chip.active {
  background: var(--primary-glass);
  border-color: var(--primary);
  color: white;
}

.prod-mgmt-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 4px;
}

.prod-mgmt-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 10px 12px;
  box-sizing: border-box;
}
.prod-mgmt-item img {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.prod-mgmt-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.prod-mgmt-name {
  font-size: 13px;
  font-weight: 700;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.prod-mgmt-meta {
  font-size: 11px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  line-height: 1.2;
}
.prod-mgmt-price {
  color: #f87171;
  font-weight: 800;
  font-size: 12px;
}
.prod-mgmt-stock {
  color: #94a3b8;
  font-size: 11px;
}
.prod-mgmt-tags {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.prod-mgmt-badge {
  background: rgba(255, 184, 0, 0.15);
  border: 1px solid rgba(255, 184, 0, 0.35);
  color: #f59e0b;
  font-size: 9.5px;
  padding: 1.5px 6px;
  border-radius: 4px;
  font-weight: 700;
  white-space: nowrap;
}
.prod-mgmt-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.btn-mgmt-edit, .btn-mgmt-del {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: all 0.2s;
  flex-shrink: 0;
}
.btn-mgmt-edit:hover {
  background: rgba(59, 130, 246, 0.25);
  border-color: #3b82f6;
  color: #60a5fa;
}
.btn-mgmt-del:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: #ef4444;
  color: #f87171;
}

/* Image Upload Preview */
.file-upload-wrap input[type="file"] {
  width: 100%;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  color: #94a3b8;
  font-size: 12px;
  cursor: pointer;
}
.img-preview-box {
  position: relative;
  width: 70px;
  height: 70px;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 8px;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
}
.img-preview-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.btn-del-preview {
  position: absolute;
  top: 2px;
  right: 2px;
  background: rgba(0,0,0,0.7);
  color: white;
  border: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-modal-card h3 {
  font-size: 17px; color: white; margin-bottom: 4px; font-weight: 700;
}
.modal-subtitle {
  font-size: 12px; color: var(--text-muted); margin-bottom: 18px; line-height: 1.4;
}

.modal-field {
  display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; text-align: left;
}

.product-pricing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(42px, 0.65fr) minmax(0, 0.95fr) minmax(0, 0.75fr);
  gap: 7px;
  align-items: start;
}

.product-pricing-grid .modal-field {
  min-width: 0;
}

.product-pricing-grid .modal-field input,
.product-pricing-grid .modal-field select {
  padding: 11px 9px;
}
.modal-field label {
  font-size: 12px; font-weight: 700; color: #cbd5e1; letter-spacing: 0.2px;
}
.modal-field input, .modal-field select, .modal-field textarea {
  width: 100%; padding: 13px 15px;
  border-radius: 12px; border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06); color: #ffffff;
  font-size: 13px; outline: none; box-sizing: border-box;
  font-family: var(--font);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.modal-field textarea {
  min-height: 85px;
  resize: vertical;
  line-height: 1.5;
}
.modal-field select option {
  background: #11111d; color: white;
}
.modal-field input:focus, .modal-field select:focus, .modal-field textarea:focus {
  border-color: #ef4444;
  background: rgba(255,255,255,0.09);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
}

@media (max-width: 420px) {
  .custom-modal-card {
    padding: 16px 14px 12px;
    border-radius: 18px;
  }

  .custom-modal-card h3 { font-size: 16px; }
  .modal-field label { font-size: 11px; }
  .product-pricing-grid { gap: 5px; }
  .product-pricing-grid .modal-field input,
  .product-pricing-grid .modal-field select {
    padding: 10px 7px;
    font-size: 12px;
  }

  .dropdown-menu {
    right: 6px;
    bottom: 74px;
    width: min(198px, calc(100vw - 12px));
    max-height: 62dvh;
  }

  .dropdown-menu button {
    min-height: 32px;
    padding: 6px 7px;
    font-size: 10px;
  }
}

.modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  position: sticky;
  bottom: -2px;
  background: rgba(18, 22, 36, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 12px 0 6px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 10;
}
.modal-actions button, .btn-confirm, .btn-cancel {
  padding: 13px 18px; border-radius: 12px;
  font-size: 13px; font-weight: 700; cursor: pointer; border: none;
  font-family: var(--font); transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  box-sizing: border-box;
  flex: 1;
}
.modal-actions button:active, .btn-confirm:active, .btn-cancel:active { transform: scale(0.97); }

.btn-cancel {
  background: rgba(255,255,255,0.08); color: #cbd5e1;
  border: 1px solid rgba(255,255,255,0.15) !important;
}
.btn-cancel:hover {
  background: rgba(255,255,255,0.13); color: #ffffff;
}
.btn-confirm {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.4);
}
.btn-confirm:hover {
  background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
  box-shadow: 0 6px 22px rgba(239, 68, 68, 0.55);
}

/* Dialog card style */
.dialog-card {
  text-align: center;
}
.dialog-card .modal-actions {
  justify-content: center;
}
.dialog-card .btn-confirm {
  min-width: 120px;
}
.dialog-icon {
  font-size: 38px; margin-bottom: 8px;
}

/* ═══════════════════════════════════════════════════════════
   STREAM PAUSE OVERLAY (Blur & Pesan Saat Jeda)
═══════════════════════════════════════════════════════════ */
.stream-pause-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 55;
  background: rgba(10, 10, 20, 0.75);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  animation: fadeIn 0.3s ease;
}

.pause-box {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 24px 20px;
  max-width: 320px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
}

.pause-icon {
  font-size: 44px;
  display: block;
  margin-bottom: 12px;
  animation: pulseDot 2s infinite ease-in-out;
}

.pause-box h3 {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 8px;
}

.pause-box p {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════
   RECORD & PAUSE TOGGLE BUTTONS (Header Toko - Pure Icon-Only)
═══════════════════════════════════════════════════════════ */
.record-toggle-btn {
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
  padding: 0;
}
.record-toggle-btn:active { transform: scale(0.90); }
.record-toggle-btn.recording {
  background: #dc2626;
  border-color: #ef4444;
  animation: pulse-cam 1.2s infinite;
}

.pause-toggle-btn {
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
  padding: 0;
}
.pause-toggle-btn:active { transform: scale(0.90); }
.pause-toggle-btn.paused {
  background: #f59e0b;
  border-color: #fbbf24;
  color: #1a1003;
}

/* ═══════════════════════════════════════════════════════════
   LOBBY TABS & HISTORY
═══════════════════════════════════════════════════════════ */
.lobby-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  background: rgba(255, 255, 255, 0.05);
  padding: 4px;
  border-radius: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.lobby-tabs::-webkit-scrollbar {
  display: none;
}

.lobby-tab-btn {
  flex: 1;
  white-space: nowrap;
  padding: 8px 10px;
  border-radius: 9px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.65);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.lobby-tab-btn.active {
  background: var(--primary);
  color: #fff;
  box-shadow: var(--shadow-red);
}

.history-ended-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.7);
  color: #e2e8f0;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* ═══════════════════════════════════════════════════════════
   LIVE PINNED PRODUCT CARD — Pojok kiri atas (di bawah profil)
═══════════════════════════════════════════════════════════ */
/* Override utama sudah di atas, blok ini hanya tambahan spesifik */
.hot-product-card .hot-badge {
  position: absolute;
  top: -9px;
  left: 8px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.5);
  letter-spacing: 0.3px;
  white-space: nowrap;
}

/* hot-close-btn extra override */
.hot-close-btn {
  background: rgba(0, 0, 0, 0.45);
  border: none;
  color: rgba(255,255,255,0.75);
  font-size: 9px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s;
}
.hot-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════
   PRODUCT SEARCH BAR & CART PANEL
═══════════════════════════════════════════════════════════ */
.product-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 6px 12px;
  margin-bottom: 12px;
  animation: slideInDown 0.2s ease;
}

.product-search-bar input {
  flex: 1;
  background: none;
  border: none;
  color: #fff;
  font-size: 13px;
  outline: none;
  font-family: var(--font);
}

.product-search-bar input::placeholder {
  color: #94a3b8;
}

.search-clear-btn {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 12px;
  cursor: pointer;
  padding: 2px;
}

/* Cart Panel (Halaman Keranjang) */
.cart-count-pill {
  background: var(--primary-glass);
  color: var(--primary-light);
  border: 1px solid var(--primary);
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 10px;
}

.cart-items-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-width: none;
}
.cart-items-list::-webkit-scrollbar {
  display: none;
}

.cart-item-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 10px;
}

.cart-item-img {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  object-fit: cover;
  background: #1e293b;
  flex-shrink: 0;
}

.cart-item-details {
  flex: 1;
  min-width: 0;
}

.cart-item-name {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-item-price {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--primary-light);
  margin-top: 2px;
}

.cart-item-qty {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cart-qty-btn {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.cart-qty-btn:active {
  background: rgba(255, 255, 255, 0.2);
}

.cart-qty-num {
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  min-width: 16px;
  text-align: center;
}

.cart-footer {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cart-total-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: #94a3b8;
}

.cart-total-price {
  font-size: 17px;
  font-weight: 900;
  color: #fff;
}

.checkout-submit-btn {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 12px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--shadow-red);
  transition: transform 0.15s;
}
.checkout-submit-btn:active {
  transform: scale(0.97);
}

.add-cart-icon-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  width: 32px;
  height: 30px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.add-cart-icon-btn:hover {
  background: var(--primary-glass);
  border-color: var(--primary);
}
.add-cart-icon-btn:active {
  transform: scale(0.92);
}

/* ═══════════════════════════════════════════════════════════
   MULTIPLE IMAGES PREVIEW GRID
═══════════════════════════════════════════════════════════ */
.multi-img-preview-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.multi-preview-item {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.2);
  background: #111;
}
.multi-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.multi-preview-item .btn-del-mini {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(239,68,68,0.9);
  color: white;
  border: none;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.multi-preview-badge {
  position: absolute;
  bottom: 2px;
  left: 2px;
  background: rgba(0,0,0,0.6);
  color: #fbbf24;
  font-size: 8px;
  padding: 1px 4px;
  border-radius: 4px;
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════
   AUCTION AUTOPIN TOGGLE IN TIMER PANEL
═══════════════════════════════════════════════════════════ */
.auction-autopin-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 10px 14px;
  margin: 6px 0 14px;
  text-align: left;
}
.auction-autopin-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.auction-icon {
  font-size: 24px;
}
.auction-text strong {
  display: block;
  font-size: 13px;
  color: #fff;
}
.auction-text small {
  display: block;
  font-size: 10px;
  color: rgba(255,255,255,0.6);
  margin-top: 2px;
}

/* Switch toggle */
.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(255,255,255,0.2);
  transition: .3s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .3s;
}
input:checked + .slider {
  background-color: #ef4444;
}
input:checked + .slider:before {
  transform: translateX(20px);
}
.slider.round {
  border-radius: 24px;
}
.slider.round:before {
  border-radius: 50%;
}

/* Timer Badge & Auction Notice */
.timer-badge-tag {
  background: rgba(239, 68, 68, 0.85);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 6px;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(239,68,68,0.4);
}
.auction-pin-notice {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 800;
  color: #fde047;
  background: rgba(0,0,0,0.65);
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid rgba(253, 224, 71, 0.4);
  display: inline-block;
}

/* ═══════════════════════════════════════════════════════════
   HAMMER CONFIG & LIVE OVERLAY FOR ALL VIEWERS
═══════════════════════════════════════════════════════════ */
.hammer-config-box {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 14px;
  text-align: left;
}
.hammer-cfg-label {
  font-size: 12px;
  font-weight: 700;
  color: #f8fafc;
  margin-bottom: 6px;
  display: block;
}
.hammer-duration-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.hammer-dur-btn {
  min-width: 0;
  min-height: 44px;
  padding: 8px 4px;
  font-size: 12px;
  line-height: 1.1;
  white-space: nowrap;
}
.hammer-result-option {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 30px;
  margin-top: 6px;
  color: #f8fafc;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.hammer-result-option span {
  color: #f8fafc;
}
.hammer-result-option input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  accent-color: #3b82f6;
}
.hammer-mode-radios {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hammer-mode-radios .radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #fff;
  cursor: pointer;
}
.hammer-rank-input {
  width: 60px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 13px;
  font-weight: 700;
  margin-left: auto;
}

/* Modal Game Ketuk Palu Live (Muncul di layar penonton & toko) */
.hammer-live-overlay {
  position: fixed;
  left: 14px;
  top: 50%;
  width: auto;
  height: auto;
  background: transparent;
  pointer-events: none;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  transform: translateY(-50%);
  animation: fadeIn 0.2s ease;
}
.hammer-live-card {
  background: linear-gradient(180deg, #272342, #151827);
  border: 1px solid rgba(129, 140, 248, 0.75);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.38), 0 0 18px rgba(99, 102, 241, 0.3);
  border-radius: 14px;
  width: fit-content;
  min-width: 96px;
  max-width: min(90vw, 360px);
  padding: 10px;
  pointer-events: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hammer-live-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 4px;
}
.hammer-live-drag-handle { cursor: grab; touch-action: none; }
.hammer-live-drag-handle:active { cursor: grabbing; }
.hammer-live-badge {
  background: #6366f1;
  color: white;
  font-size: 9px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 12px;
}
.hammer-live-close {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 16px;
  cursor: pointer;
}
.hammer-live-rule {
  font-size: 10px;
  color: #c7d2fe;
  margin-bottom: 6px;
  font-weight: 600;
}
.hammer-live-description {
  display: none;
  width: 100%;
  font-size: 12px;
  color: rgba(255,255,255,0.82);
  line-height: 1.4;
  margin-bottom: 6px;
  word-break: break-word;
}
.hammer-live-cd {
  font-size: 16px;
  font-weight: 900;
  color: #fbbf24;
  margin-bottom: 7px;
}
.hammer-live-tap-btn {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  border: 3px solid #fca5a5;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.08s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.hammer-live-tap-btn:active:not(:disabled) {
  transform: scale(0.88);
}
.hammer-live-tap-btn:disabled {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
  box-shadow: none;
  cursor: not-allowed;
}
.hammer-live-icon {
  font-size: 24px;
  line-height: 1;
}
.hammer-live-mycount {
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
}
.hammer-live-hint {
  font-size: 7px;
  font-weight: 800;
  color: #fecaca;
  letter-spacing: 0.5px;
}
.hammer-live-winner-box {
  margin-top: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  padding: 8px;
  width: fit-content;
  max-width: 100%;
  max-height: min(42vh, 300px);
  overflow-y: auto;
  box-sizing: border-box;
  font-size: 12px;
  font-weight: 700;
  color: #4ade80;
  animation: popIn 0.3s ease;
}
.hammer-winner-row {
  display: flex;
  align-items: center;
  gap: 7px;
  text-align: left;
  line-height: 1.35;
  font-size: 12px;
  padding: 6px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  white-space: nowrap;
}
.hammer-winner-row:last-child { border-bottom: none; }
.hammer-winner-row.is-selected {
  background: rgba(251,191,36,0.14);
  border: 1px solid rgba(251,191,36,0.45);
  border-radius: 8px;
  color: #fef3c7;
}
.hammer-winner-row span { color: #fbbf24; min-width: 42px; }
.hammer-winner-row strong { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.hammer-winner-empty { font-size: 10px; color: #cbd5e1; }

/* Comment Pin Styling: Cukup beri icon pin di sebelah kiri komentarnya, tanpa mengubah background berbeda */
.chat-msg.msg-pinned-comment {
  border-left: 2px solid #ef4444;
}
.chat-msg-pin-indicator {
  font-size: 11px;
  margin-right: 3px;
  color: #ef4444;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   PRODUK OUT OF STOCK (HABIS) & IMAGE CURSOR
═══════════════════════════════════════════════════════════ */
.product-item.out-of-stock {
  opacity: 0.65;
  filter: grayscale(0.2);
}
.out-of-stock-overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  color: #ef4444; font-size: 11px; font-weight: 900;
  border-radius: 8px; text-transform: uppercase;
  letter-spacing: 0.5px;
}
.btn-disabled-soldout {
  background: rgba(255,255,255,0.1) !important;
  color: #94a3b8 !important;
  cursor: not-allowed !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow: none !important;
}
.product-img-wrap {
  cursor: zoom-in;
}

/* ═══════════════════════════════════════════════════════════
   IMAGE LIGHTBOX OVERLAY (PREVIEW GAMBAR BESAR)
═══════════════════════════════════════════════════════════ */
.image-lightbox-overlay {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1201;
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn 0.2s ease;
}
.lightbox-content {
  position: relative;
  max-width: 90%;
  max-height: 85%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lightbox-close {
  position: absolute;
  top: -42px; right: 0;
  background: rgba(255,255,255,0.2);
  border: none; color: white;
  width: 34px; height: 34px; border-radius: 50%;
  font-size: 18px; cursor: pointer;
}
.lightbox-close:hover {
  background: rgba(239,68,68,0.8);
}
#lightboxMainImg {
  max-width: 100%;
  max-height: 65vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.8);
}
.lightbox-caption {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  margin-top: 10px;
  text-align: center;
}
.lightbox-thumbs-bar {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  max-width: 90vw;
  padding: 4px 0;
}
.lightbox-thumb-item {
  width: 50px;
  height: 50px;
  border-radius: 6px;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
  opacity: 0.6;
  transition: all 0.2s;
}
.lightbox-thumb-item.active, .lightbox-thumb-item:hover {
  opacity: 1;
  border-color: #ef4444;
  transform: scale(1.05);
}

/* ═══════════════════════════════════════════════════════════
   HALAMAN TRANSAKSI CHECKOUT
═══════════════════════════════════════════════════════════ */
.checkout-card {
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.7);
  animation: slideInUp 0.25s ease;
}
.checkout-header {
  padding: 14px 16px;
  background: #1e293b;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.checkout-back-btn {
  background: rgba(255,255,255,0.1);
  border: none;
  color: #fff;
  width: 30px; height: 30px; border-radius: 50%;
  cursor: pointer; font-size: 16px;
}
.checkout-header h3 {
  font-size: 15px; color: #fff; margin: 0; flex: 1;
}
.checkout-secure-badge {
  font-size: 10px; background: rgba(34,197,94,0.15);
  color: #4ade80; padding: 3px 8px; border-radius: 10px;
  font-weight: 700;
}
.checkout-body {
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.checkout-section {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 12px;
}
.checkout-sec-title {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; font-weight: 800; color: #fff; margin-bottom: 8px;
}
.btn-change-addr {
  background: transparent; border: none; color: #ef4444;
  font-size: 11px; font-weight: 700; cursor: pointer; text-decoration: underline;
}
.checkout-address-box {
  font-size: 12px; color: #cbd5e1; line-height: 1.5;
}
.checkout-addr-selected strong {
  color: #ffffff !important;
}
.checkout-addr-selected .addr-header-line {
  display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
}
.checkout-addr-selected .addr-person {
  color: #ffffff; font-weight: 600;
}
.checkout-addr-selected .addr-full {
  color: #cbd5e1; margin-top: 2px;
}
.checkout-items-list {
  display: flex; flex-direction: column; gap: 8px;
}
.checkout-item-row {
  display: flex; align-items: center; gap: 10px;
  background: rgba(0,0,0,0.25); border-radius: 8px; padding: 8px;
}
.checkout-item-row img {
  width: 44px; height: 44px; border-radius: 6px; object-fit: cover;
}
.checkout-item-info {
  flex: 1;
}
.checkout-item-detail .item-title { color: #fff; font-size: 12px; font-weight: 700; }
.checkout-item-detail .item-sub { color: #cbd5e1; font-size: 11px; margin-top: 2px; }
.checkout-item-name {
  font-size: 12px; color: #fff; font-weight: 700;
}
.checkout-item-sub {
  font-size: 11px; color: #94a3b8; margin-top: 2px;
}
.payment-methods-grid {
  display: flex; flex-direction: column; gap: 8px; margin-top: 6px;
}
.payment-method-item {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px; padding: 10px; cursor: pointer;
}
.payment-method-item input:checked + .method-info {
  color: #ef4444;
}
.method-info strong {
  display: block; font-size: 12px; color: #fff;
}
.method-info small {
  font-size: 10px; color: #94a3b8;
}
.checkout-store-pay-info {
  margin-top: 10px; padding: 10px; background: rgba(239,68,68,0.06);
  border: 1px dashed rgba(239,68,68,0.3); border-radius: 8px;
}
.checkout-summary-sec {
  display: flex; flex-direction: column; gap: 6px;
}
.summary-row {
  display: flex; justify-content: space-between; font-size: 12px; color: #94a3b8;
}
.summary-row.total-row {
  border-top: 1px solid rgba(255,255,255,0.1); padding-top: 8px; margin-top: 4px;
}
.final-total {
  font-size: 16px; color: #ef4444; font-weight: 900;
}
.free-badge {
  color: #4ade80; font-weight: 800; font-size: 10px;
}
.checkout-actions {
  padding: 12px 16px; background: #1e293b;
  display: flex; gap: 10px; border-top: 1px solid rgba(255,255,255,0.08);
}
.btn-confirm-checkout {
  flex: 2; padding: 12px; border: none; border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white; font-weight: 800; font-size: 13px; cursor: pointer;
}
.store-shipping-fee-wrap {
  padding: 10px 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
  color: #cbd5e1;
  font-size: 11px;
}
.store-shipping-fee-input { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.store-shipping-fee-input input { min-width: 0; flex: 1; padding: 7px 8px; border: 1px solid rgba(255,255,255,0.15); border-radius: 6px; background: #0f172a; color: #fff; }
.store-shipping-fee-input button { padding: 7px 10px; border: 0; border-radius: 6px; background: #16a34a; color: #fff; font-size: 11px; font-weight: 700; cursor: pointer; }
.store-shipping-details-wrap { display: grid; gap: 6px; padding: 10px 12px; border-top: 1px solid rgba(255,255,255,0.06); color: #cbd5e1; font-size: 11px; }
.store-shipping-details-wrap input[type="text"] { width: 100%; box-sizing: border-box; padding: 7px 8px; border: 1px solid rgba(255,255,255,0.15); border-radius: 6px; background: #0f172a; color: #fff; }
.package-photo-input { width: fit-content; padding: 7px 10px; border-radius: 6px; background: #2563eb; color: #fff; font-weight: 700; cursor: pointer; }
.package-photo-input input { display: none; }
.package-photo-preview { display: flex; align-items: center; gap: 8px; min-height: 16px; }
.package-photo-preview img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; border: 1px solid rgba(255,255,255,0.2); }
.package-photo-status { color: #4ade80; font-size: 10px; text-decoration: none; }
.package-photo-status.missing { color: #f87171; }
.buyer-shipping-tracking { padding: 10px 12px; border-top: 1px solid rgba(255,255,255,0.06); background: rgba(14,116,144,0.12); color: #cbd5e1; font-size: 11px; }
.buyer-shipping-heading { color: #67e8f9; font-weight: 800; margin-bottom: 7px; }
.buyer-shipping-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 5px; }
.buyer-shipping-row strong { color: #fff; text-align: right; }
.tracking-number-value { display: flex; align-items: center; gap: 5px; max-width: 68%; }
.tracking-number-value strong { overflow-wrap: anywhere; }
.tracking-copy-btn { width: 25px; height: 25px; padding: 0; border: 1px solid rgba(103,232,249,0.45); border-radius: 5px; background: rgba(8,47,73,0.8); color: #67e8f9; cursor: pointer; font-size: 15px; line-height: 1; }
.buyer-shipping-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.track-courier-btn { padding: 7px 9px; border-radius: 6px; background: #0891b2; color: #fff; font-size: 10px; font-weight: 800; text-decoration: none; }
.package-photo-link { display: inline-flex; align-items: center; gap: 5px; color: #bae6fd; font-size: 10px; font-weight: 700; text-decoration: none; }
.package-photo-link img { width: 34px; height: 34px; object-fit: cover; border-radius: 5px; border: 1px solid rgba(255,255,255,0.2); }
.review-status-badge { display: inline-flex; align-items: center; padding: 4px 7px; border-radius: 999px; font-size: 10px; font-weight: 800; }
.review-status-badge.pending { color: #fbbf24; background: rgba(245,158,11,0.14); border: 1px solid rgba(245,158,11,0.3); }
.review-status-badge.reviewed { color: #4ade80; background: rgba(34,197,94,0.14); border: 1px solid rgba(34,197,94,0.3); }
.review-photo-picker { display: inline-block; padding: 7px 10px; border-radius: 6px; background: #2563eb; color: #fff; font-size: 11px; font-weight: 700; cursor: pointer; }
.review-photo-picker input { display: none; }
.review-photo-preview { margin-top: 7px; min-height: 4px; }
.review-photo-preview-image, .review-photo-thumb { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; border: 1px solid rgba(255,255,255,0.2); }
.review-photo-thumb { display: block; margin-top: 7px; }
@media (min-width: 431px) {
  #checkoutPageModal .checkout-card { max-width: 680px; margin: 0 auto; }
}

/* ═══════════════════════════════════════════════════════════
   PROFIL PENGGUNA & ALAMAT MODAL
═══════════════════════════════════════════════════════════ */
#userProfileModal.custom-modal-overlay {
  position: absolute;
  inset: 0;
  z-index: 1100;
  background: #080811;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: fadeIn 0.15s ease;
}

#userProfileModal .profile-modal-card {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  border-radius: 0;
  border: none;
  background: #080811;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  padding: 16px 16px 24px;
  overflow: hidden;
  box-sizing: border-box;
}

#userProfileModal .profile-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#userProfileModal .profile-modal-header .panel-close {
  position: relative;
  z-index: 20;
  pointer-events: auto;
}

#userProfileModal .profile-modal-card h3 {
  color: #ffffff !important;
  font-size: 18px;
  font-weight: 800;
  margin: 6px 0 2px;
  letter-spacing: -0.3px;
}
#userProfileModal .profile-modal-card .modal-subtitle {
  color: #94a3b8 !important;
  font-size: 12px;
  margin-bottom: 12px;
  line-height: 1.4;
}

#userProfileModal textarea,
#userProfileModal input[type="text"],
#userProfileModal input[type="tel"],
#userProfileModal select {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}

#userProfileModal textarea:focus,
#userProfileModal input[type="text"]:focus,
#userProfileModal input[type="tel"]:focus,
#userProfileModal select:focus {
  border-color: #ef4444 !important;
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25) !important;
  outline: none !important;
}

#userProfileModal textarea {
  min-height: 70px;
  resize: vertical;
  line-height: 1.5;
  padding: 10px 12px;
}

#userProfileModal .avatar-hint strong {
  color: #ffffff;
  font-size: 13px;
  display: block;
}
#userProfileModal .avatar-hint small {
  color: #94a3b8;
  font-size: 11px;
}

.profile-tabs {
  display: flex;
  gap: 6px;
  margin: 8px 0 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-bottom: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.prof-tab-btn {
  flex: 1;
  text-align: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
  padding: 9px 6px;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.prof-tab-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.prof-tab-btn.active {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.5);
  box-shadow: 0 2px 10px rgba(239, 68, 68, 0.2);
}
.prof-section-content {
  overflow-y: auto;
  flex: 1;
  padding-right: 2px;
  padding-bottom: 24px;
  scrollbar-width: none;
}
.prof-section-content::-webkit-scrollbar {
  display: none;
}
.profile-avatar-row {
  display: flex; align-items: center; gap: 14px; margin-bottom: 14px;
  background: rgba(255,255,255,0.03); padding: 12px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.06);
}
.avatar-box {
  position: relative;
  width: 64px;
  height: 64px;
  min-width: 64px;
  min-height: 64px;
  max-width: 64px;
  max-height: 64px;
  flex: 0 0 64px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}
.avatar-box img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  aspect-ratio: 1 / 1;
  display: block;
  border: 2px solid #ef4444;
}
.avatar-upload-btn {
  position: absolute; bottom: 0; right: 0; width: 22px; height: 22px;
  background: #ef4444; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 11px; color: white; cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.btn-add-addr-mini {
  background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.3);
  color: #ef4444; font-size: 11px; font-weight: 700; padding: 5px 12px;
  border-radius: 8px; cursor: pointer; transition: all 0.15s;
}
.btn-add-addr-mini:hover {
  background: rgba(239,68,68,0.22);
  transform: translateY(-1px);
}
.add-addr-form-box {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px; padding: 14px; margin-bottom: 14px;
}
.user-addr-list {
  display: flex; flex-direction: column; gap: 8px;
}
.user-addr-item {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; padding: 12px; position: relative;
  color: #f8fafc;
}
.user-addr-item strong {
  color: #ffffff !important;
}
.user-addr-item.default-addr,
.user-addr-item.is-default-addr {
  border-color: rgba(239,68,68,0.5); background: rgba(239,68,68,0.06);
}
.addr-label-pill {
  font-size: 9px; font-weight: 800; background: rgba(255,255,255,0.12);
  padding: 2px 6px; border-radius: 4px; color: #ffffff !important;
}
.addr-default-pill,
.default-badge {
  font-size: 9px; font-weight: 800; background: #ef4444;
  padding: 2px 6px; border-radius: 4px; color: #ffffff !important; margin-left: 4px;
}
.addr-item-actions {
  display: flex; gap: 6px; margin-top: 8px;
}
.btn-set-default {
  background: rgba(255,255,255,0.08); border: none; color: #ffffff !important;
  font-size: 10px; padding: 5px 10px; border-radius: 6px; cursor: pointer;
}
.btn-del-addr {
  background: rgba(239,68,68,0.1); border: none; color: #ef4444 !important;
  font-size: 10px; padding: 5px 10px; border-radius: 6px; cursor: pointer;
}

/* ══════════ FILTER PERIODE TANGGAL TRANSAKSI ══════════ */
.order-period-filter-bar {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.order-period-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.period-title {
  font-size: 11.5px;
  font-weight: 700;
  color: #f1f5f9;
}
.btn-period-reset {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-period-reset:hover {
  background: #ef4444;
  color: #fff;
}
.order-period-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
}
.period-input-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.period-input-group label {
  font-size: 9.5px;
  color: #94a3b8;
  font-weight: 600;
  text-transform: uppercase;
}
.period-input-group input[type="date"] {
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  border-radius: 7px;
  padding: 5px 7px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  color-scheme: dark;
}
.period-separator {
  font-size: 10px;
  color: #64748b;
  font-weight: 700;
  margin-top: 14px;
}

/* ══════════ FILTER CHIPS RIWAYAT TRANSAKSI (WRAP KE BEBERAPA BARIS AGAR SEMUA STATUS TERLIHAT) ══════════ */
.order-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 4px;
  margin-bottom: 14px;
}
.order-filter-chip {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 20px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.order-filter-chip:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  transform: translateY(-1px);
}
.order-filter-chip:active {
  transform: scale(0.95);
}
.order-filter-chip.active {
  background: #ef4444;
  border-color: #ef4444;
  color: #fff;
  box-shadow: 0 2px 10px rgba(239, 68, 68, 0.45);
}
.order-chip-count {
  font-size: 9px;
  font-weight: 800;
  background: rgba(0, 0, 0, 0.35);
  color: #cbd5e1;
  padding: 1px 5px;
  border-radius: 10px;
  min-width: 12px;
  text-align: center;
  line-height: 1.2;
}
.order-filter-chip.active .order-chip-count {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

/* Rating Badge di Profil Pengguna */
.profile-rating-pill {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  padding: 3px 8px;
  border-radius: 12px;
}

.orders-history-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.my-order-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  padding: 12px;
  min-width: 0;
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.my-order-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
}
.order-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.order-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.order-card-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.order-card-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
}
.order-card-item-thumb {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.order-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #94a3b8;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.order-actions-row {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
  justify-content: flex-end;
  flex-wrap: wrap;
}
.btn-order-action {
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 7px;
  border: none;
  cursor: pointer;
  transition: transform 0.15s, opacity 0.15s;
}
.btn-order-action:active {
  transform: scale(0.95);
}
.btn-order-action.pay {
  background: #f59e0b;
  color: #000;
}
.btn-order-action.confirm {
  background: #22c55e;
  color: #fff;
}
.btn-order-action.cancel {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}
.btn-order-action.return {
  background: rgba(236, 72, 153, 0.15);
  color: #ec4899;
  border: 1px solid rgba(236, 72, 153, 0.3);
}

.order-role-switcher {
  display: flex;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 12px;
  gap: 4px;
}
.order-role-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
  padding: 8px 6px;
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  text-align: center;
}
.order-role-btn.active {
  background: #ef4444;
  color: #fff;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}
.order-role-badge-pill {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  margin-right: 6px;
  display: inline-block;
}
.order-role-badge-pill.sales {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.4);
}
.order-role-badge-pill.purchase {
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.4);
}
.store-status-select-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.store-status-select-wrap label {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 600;
  line-height: 1.35;
}
.store-status-select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  background: #1e1e2f;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 600;
}
.store-status-select option {
  background: #ffffff;
  color: #111827;
}

/* ═══════════════════════════════════════════════════════════
   MODAL REKENING & QRIS TOKO
═══════════════════════════════════════════════════════════ */
.store-pay-card {
  max-width: 440px; max-height: 90vh; overflow-y: auto;
}
.store-pay-section {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; padding: 12px;
}
.qris-upload-preview-box {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.qris-img-wrap {
  width: 140px; height: 140px; border-radius: 10px; overflow: hidden;
  background: #fff; padding: 6px;
}
.qris-img-wrap img {
  width: 100%; height: 100%; object-fit: contain;
}
.qris-upload-actions {
  display: flex; flex-direction: column; width: 100%; gap: 6px;
}
.btn-browse-qris {
  background: rgba(255,255,255,0.08); border: 1px dashed rgba(255,255,255,0.3);
  color: #fff; font-size: 12px; font-weight: 700; padding: 10px;
  border-radius: 10px; text-align: center; cursor: pointer;
}
.btn-broadcast-pay {
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  border: none; border-radius: 10px; color: white; padding: 10px;
  font-size: 12px; font-weight: 800; cursor: pointer;
}
.store-bank-list {
  display: flex; flex-direction: column; gap: 12px; margin: 12px 0;
}
.store-bank-item {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  background: linear-gradient(135deg, rgba(30,41,59,0.8), rgba(15,23,42,0.6));
  border: 1.5px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 14px 16px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.store-bank-item:hover {
  border-color: rgba(255,255,255,0.22);
  background: linear-gradient(135deg, rgba(30,41,59,0.95), rgba(15,23,42,0.7));
}
.store-bank-item::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(to bottom, #3b82f6, #0284c7);
}
.bank-item-content {
  flex: 1; display: flex; flex-direction: column; gap: 6px; padding-left: 4px;
}
.bank-item-title {
  font-size: 12px; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: 0.3px;
}
.bank-item-sub {
  font-size: 13px; color: #e2e8f0; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.2px;
  word-break: break-all; font-family: 'Courier New', monospace;
}
.bank-item-holder {
  font-size: 11px; color: #94a3b8;
}

/* ── 3 CARD REKENING TERPISAH (NEW DESIGN) ── */
.store-bank-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0;
}
.store-bank-card {
  border: 1.5px solid;
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  overflow: hidden;
}
.store-bank-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: inherit;
  filter: brightness(2);
  opacity: 0.5;
}
.sbc-bank-name {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.sbc-acc-number {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.5px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.sbc-holder {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.9;
}
.sbc-copy-btn {
  align-self: flex-end;
  margin-top: 6px;
  background: rgba(255,255,255,0.08);
  border: 1px solid;
  border-radius: 8px;
  padding: 5px 14px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font);
  transition: background 0.2s, transform 0.15s;
  pointer-events: auto;
  -webkit-tap-highlight-color: rgba(255,255,255,0.1);
  user-select: none;
  touch-action: manipulation;
}
.sbc-copy-btn:hover { background: rgba(255,255,255,0.16); }
.sbc-copy-btn:active { transform: scale(0.93); background: rgba(255,255,255,0.22); }

/* ── BANK ACCOUNT ACTION BUTTONS ── */
.bank-item-actions {
  display: flex; gap: 6px; flex-shrink: 0;
}
.btn-copy-bank {
  background: rgba(56, 189, 248, 0.15); border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8; font-size: 11px; font-weight: 700; padding: 6px 12px; border-radius: 8px;
  cursor: pointer; transition: all 0.2s ease; font-family: var(--font);
}
.btn-copy-bank:hover { background: rgba(56, 189, 248, 0.25); border-color: rgba(56, 189, 248, 0.6); }
.btn-copy-bank:active { transform: scale(0.95); }
.btn-del-mini {
  background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171; font-size: 14px; width: 36px; height: 36px; border-radius: 8px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.2s ease; font-family: var(--font);
}
.btn-del-mini:hover { background: rgba(239, 68, 68, 0.2); border-color: rgba(239, 68, 68, 0.5); }
.btn-del-mini:active { transform: scale(0.92); }


/* ═══════════════════════════════════════════════════════════
   PAYMENT LIVE POPUP OVERLAY (REALTIME TO ALL VIEWERS)
═══════════════════════════════════════════════════════════ */
.payment-live-overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 98; display: flex; align-items: center; justify-content: center;
  animation: fadeIn 0.2s ease;
}
.payment-live-card {
  background: linear-gradient(180deg, #1e293b, #0f172a);
  border: 2px solid #38bdf8;
  box-shadow: 0 0 35px rgba(56, 189, 248, 0.4);
  border-radius: 20px; width: 88%; max-width: 330px;
  padding: 16px; text-align: left; display: flex; flex-direction: column;
  max-height: 80vh; overflow-y: auto;
}
.payment-live-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;
}
.pay-badge {
  background: #0284c7; color: white; font-size: 10px; font-weight: 800;
  padding: 3px 8px; border-radius: 10px;
}
.pay-close-btn {
  background: transparent; border: none; color: #94a3b8; font-size: 16px; cursor: pointer;
}
.payment-live-body {
  font-size: 12px; color: #fff; display: flex; flex-direction: column; gap: 8px;
}
.payment-live-body img {
  width: 170px; height: 170px; background: white; padding: 6px; border-radius: 12px;
  align-self: center;
}
.copy-btn {
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
  color: #38bdf8; font-size: 10px; padding: 2px 6px; border-radius: 4px; cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════
   PRODUCT VARIANT SETUP (KODE, UKURAN, WARNA, STOK VARIAN)
═══════════════════════════════════════════════════════════ */
.product-variant-setup-section {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 12px;
  margin: 12px 0;
  box-sizing: border-box;
  width: 100%;
}
.variant-setup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
  gap: 8px;
}
.variant-collapse-hint {
  font-size: 11px;
  color: #38bdf8;
  font-weight: 700;
  text-decoration: underline;
  flex-shrink: 0;
}
.variant-help-text {
  font-size: 11px;
  color: #94a3b8;
  margin: 6px 0 8px 0;
  line-height: 1.4;
}
.variant-collapse-body {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(255, 255, 255, 0.15);
}
.variant-rows-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 8px;
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
}
.variant-input-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(15, 23, 42, 0.9);
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(56, 189, 248, 0.25);
  box-sizing: border-box;
  width: 100%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.variant-row-header {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
}
.variant-attrs-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.variant-attr-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0 4px 8px;
  border-left: 2px solid rgba(56, 189, 248, 0.6);
  box-sizing: border-box;
  width: 100%;
}
.variant-attr-row .v-attr-key {
  flex: 1 1 35%;
  min-width: 0;
  max-width: 120px;
}
.variant-attr-row .v-attr-val {
  flex: 2 1 50%;
  min-width: 0;
}
.btn-del-attr {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
  border-radius: 6px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  flex-shrink: 0;
  transition: all 0.15s;
}
.btn-del-attr:hover {
  background: #ef4444;
  color: #fff;
}
.variant-row-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
  font-size: 11px;
  color: #cbd5e1;
  width: 100%;
}
.variant-row-footer-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.btn-add-attr {
  background: rgba(56, 189, 248, 0.12);
  border: 1px dashed rgba(56, 189, 248, 0.6);
  color: #38bdf8;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s;
}
.btn-add-attr:hover {
  background: rgba(56, 189, 248, 0.25);
}
.v-footer-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  white-space: nowrap;
}
.v-footer-label .v-stock {
  width: 60px !important;
  text-align: center;
}
.v-footer-label .v-price {
  width: 95px !important;
}
.variant-input-row input {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: #fff;
  font-size: 12px;
  padding: 7px 9px;
  box-sizing: border-box;
  font-family: inherit;
  transition: border-color 0.2s, background 0.2s;
}
.variant-input-row input:focus {
  outline: none;
  border-color: #38bdf8;
  background: rgba(255, 255, 255, 0.12);
}
.btn-del-variant {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
  border-radius: 6px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.15s;
  flex-shrink: 0;
}
.btn-del-variant:hover {
  background: #ef4444;
  color: #fff;
}
.btn-add-variant-row {
  width: 100%;
  background: rgba(56, 189, 248, 0.12);
  border: 1px dashed #38bdf8;
  color: #38bdf8;
  border-radius: 8px;
  padding: 9px 0;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 6px;
}
.btn-add-variant-row:hover {
  background: rgba(56, 189, 248, 0.22);
}

/* ═══════════════════════════════════════════════════════════
   VARIANT SELECTION MODAL (BOTTOM SHEET PEMILIHAN VARIAN)
═══════════════════════════════════════════════════════════ */
.variant-select-sheet {
  background: #0f172a !important;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  padding: 16px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.variant-prod-header {
  display: flex;
  gap: 12px;
  align-items: center;
}
.variant-prod-thumb {
  width: 58px;
  height: 58px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.variant-prod-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.variant-prod-meta h3 {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin: 0;
}
.variant-prod-price {
  font-size: 15px;
  font-weight: 800;
  color: #f87171;
}
.variant-prod-stock {
  font-size: 11px;
  color: #94a3b8;
}
.variant-select-body {
  margin: 14px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
}
.variant-section-title {
  font-size: 12px;
  font-weight: 700;
  color: #cbd5e1;
}
.variant-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
}
.variant-card-chip {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: all 0.18s ease;
  position: relative;
}
.variant-card-chip:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(56, 189, 248, 0.5);
}
.variant-card-chip.active {
  background: rgba(56, 189, 248, 0.18);
  border: 2px solid #38bdf8;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
}
.variant-card-chip.soldout {
  opacity: 0.45;
  cursor: not-allowed;
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.05);
}
.variant-chip-title {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 4px;
}
.variant-chip-sub {
  font-size: 10px;
  color: #94a3b8;
}
.variant-chip-stock {
  font-size: 10.5px;
  font-weight: 700;
  color: #38bdf8;
  margin-top: 2px;
}
.variant-chip-stock.out {
  color: #ef4444;
}

.variant-qty-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px;
  color: #cbd5e1;
}
.variant-qty-control {
  display: flex;
  align-items: center;
  gap: 8px;
}
.variant-qty-control span {
  font-weight: 800;
  font-size: 13px;
  min-width: 24px;
  text-align: center;
  color: #fff;
}
.btn-confirm-variant {
  width: 100%;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 12px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.18s ease;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4);
}
.btn-confirm-variant:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  background: #475569;
}
.btn-confirm-variant:not(:disabled):hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}
.product-variant-badge-tag {
  display: inline-flex;
  align-items: center;
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
  font-size: 9.5px;
  font-weight: 700;
  padding: 1.5px 6px;
  border-radius: 4px;
  white-space: nowrap;
  line-height: 1.2;
}

/* ═══════════════════════════════════════════════════════════
   BUKTI PEMBAYARAN, REVIEW/ULASAN & BLOKIR PELANGGAN STYLES
   ═══════════════════════════════════════════════════════════ */
.proof-upload-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px dashed #3b82f6;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  cursor: pointer;
  margin-top: 4px;
  font-weight: 600;
}
.proof-upload-badge:hover {
  background: rgba(59, 130, 246, 0.28);
}
.proof-thumbnail-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  background: rgba(15, 23, 42, 0.7);
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid #334155;
}
.proof-thumbnail-img {
  width: 38px;
  height: 38px;
  border-radius: 4px;
  object-fit: cover;
  cursor: zoom-in;
  border: 1px solid #3b82f6;
}
.btn-verify-proof {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

/* Stars Rating Component */
.star-rating-row {
  display: flex;
  gap: 6px;
  font-size: 26px;
  cursor: pointer;
  user-select: none;
  margin: 6px 0 12px 0;
}
.star-rating-row span {
  color: #475569;
  transition: transform 0.15s ease, color 0.15s ease;
}
.star-rating-row span.filled {
  color: #fbbf24;
}
.star-rating-row span:hover {
  transform: scale(1.15);
}

/* Review Badge & Card */
.order-review-box {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 10px;
  margin-top: 8px;
}
.order-review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  margin-bottom: 4px;
}
.btn-write-review {
  background: #f59e0b;
  color: #0f172a;
  border: none;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

/* Received Condition Photo Modal & Order Card */
.received-preview-box {
  margin: 14px 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1.5px dashed rgba(255, 255, 255, 0.18);
  background: rgba(15, 23, 42, 0.8);
  min-height: 180px;
  max-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.received-preview-box img {
  max-width: 100%;
  max-height: 250px;
  object-fit: contain;
}
.received-photo-preview-placeholder {
  text-align: center;
  padding: 20px;
}
.btn-browse-condition-photo {
  display: block;
  width: 100%;
  padding: 11px;
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px dashed #38bdf8;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;
  transition: all 0.2s;
}
.btn-browse-condition-photo:hover {
  background: rgba(56, 189, 248, 0.25);
}
.btn-order-action.condition {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.4);
}
.buyer-received-condition-card {
  margin: 8px 12px 10px;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(56, 189, 248, 0.25);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.buyer-received-condition-info {
  display: flex;
  align-items: center;
  gap: 8px;
}
.buyer-received-condition-thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid #38bdf8;
  cursor: zoom-in;
}

/* Block User List */
.blocked-user-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 8px;
}
.blocked-user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.blocked-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
.btn-unblock-user {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid #ef4444;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.btn-block-chat-user {
  background: rgba(239, 68, 68, 0.18);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fca5a5;
  font-size: 10px;
  font-weight: 700;
  border-radius: 4px;
  padding: 2px 6px;
  cursor: pointer;
  margin-left: 6px;
  transition: all 0.15s ease;
}
.btn-block-chat-user:hover {
  background: #ef4444;
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════
   PROFILE SEARCH & FOLLOW / FOLLOWING TABS
═══════════════════════════════════════════════════════════ */
.prof-search-input {
  width: 100%;
  padding: 10px 36px 10px 14px;
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #fff;
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
  transition: all 0.2s ease;
}
.prof-search-input:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
}
.btn-clear-search-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #94a3b8;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer;
}
.btn-clear-search-icon:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.prof-search-dropdown-box {
  margin-top: 6px;
  max-height: 220px;
  overflow-y: auto;
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
.prof-user-row-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 6px;
  gap: 10px;
  transition: all 0.15s ease;
}
.prof-user-row-card:hover {
  background: rgba(30, 41, 59, 0.95);
  border-color: rgba(255, 255, 255, 0.15);
}
.prof-user-row-card:last-child {
  margin-bottom: 0;
}
.prof-user-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.prof-user-thumb {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.1);
}
.prof-user-info-text {
  min-width: 0;
  flex: 1;
  text-align: left;
}
.prof-user-name-line {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 6px;
}
.prof-user-username-line {
  font-size: 11.5px;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prof-role-pill {
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.prof-role-pill.toko {
  background: rgba(234, 179, 8, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(234, 179, 8, 0.4);
}
.prof-role-pill.pembeli {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.4);
}

/* Follow Sub-Tabs Segmented Bar */
.follow-subtabs-nav {
  display: flex;
  gap: 8px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 8px;
}
.follow-subtab-btn {
  flex: 1;
  padding: 8px 10px;
  border: none;
  background: transparent;
  color: #94a3b8;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.follow-subtab-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}
.follow-subtab-btn.active {
  background: linear-gradient(135deg, #0284c7, #2563eb);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35);
}

.btn-action-unfollow {
  flex-shrink: 0;
  padding: 6px 12px;
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.btn-action-unfollow:hover {
  background: #ef4444;
  color: #fff;
  border-color: #ef4444;
}
.btn-action-follow-back {
  flex-shrink: 0;
  padding: 6px 12px;
  background: linear-gradient(135deg, #0284c7, #2563eb);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.btn-action-follow-back:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}
.btn-action-following-badge {
  flex-shrink: 0;
  padding: 5px 10px;
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.btn-action-following-badge:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.4);
}
.btn-action-block {
  flex-shrink: 0;
  padding: 6px 12px;
  background: #ef4444;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.btn-action-block:hover {
  background: #dc2626;
}

/* ═══════════════════════════════════════════════════════════
   LIVE TOKO NOTIFICATION BANNER & AUTO POLL INDICATOR
═══════════════════════════════════════════════════════════ */
.live-broadcast-banner {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%) translateY(-140%);
  width: 92%;
  max-width: 440px;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.96), rgba(185, 28, 28, 0.98));
  color: #fff;
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 10px 30px rgba(239, 68, 68, 0.45), 0 4px 12px rgba(0,0,0,0.5);
  border: 1px solid rgba(255, 255, 255, 0.25);
  z-index: 99999;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.live-broadcast-banner.show {
  transform: translateX(-50%) translateY(0);
}
.live-broadcast-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid #fff;
  object-fit: cover;
  flex-shrink: 0;
  animation: pulseLiveRing 1.8s infinite;
}
@keyframes pulseLiveRing {
  0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.7); }
  70% { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.live-broadcast-info {
  flex: 1;
  min-width: 0;
}
.live-broadcast-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(0,0,0,0.25);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.live-broadcast-tag span {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #22c55e;
  border-radius: 50%;
  animation: blinkLiveDot 1s infinite;
}
@keyframes blinkLiveDot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.live-broadcast-title {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.live-broadcast-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.live-broadcast-action {
  background: #fff;
  color: #ef4444;
  border: none;
  font-size: 11px;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 20px;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.15s ease, background 0.15s ease;
}
.live-broadcast-action:hover {
  transform: scale(1.05);
  background: #fef2f2;
}
.live-broadcast-close {
  background: rgba(0,0,0,0.2);
  border: none;
  color: #fff;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: 2px;
}
.live-broadcast-close:hover {
  background: rgba(0,0,0,0.4);
}

.lobby-pulse-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.3);
  padding: 3px 8px;
  border-radius: 12px;
  margin-left: 6px;
  font-weight: 600;
}
.lobby-pulse-live-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  animation: blinkLiveDot 1.2s infinite;
}

/* ═══════════════════════════════════════════════════════════
   MULTI-GUEST LIVE & DYNAMIC LAYOUT (PiP / Split2 / Grid4 / Grid6)
   ═══════════════════════════════════════════════════════════ */
.video-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #000;
  display: flex;
}

/* Common Stream Video Box */
.stream-video-box {
  position: relative;
  overflow: hidden;
  background: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.08);
}

.stream-video-box video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #000;
}

.video-role-tag {
  position: absolute;
  bottom: 6px;
  left: 6px;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: rgba(255, 255, 255, 0.85);
  font-size: 8px;
  font-weight: 500;
  padding: 2px 5px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  pointer-events: none;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 3px;
  max-width: 85%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}
.host-role-tag {
  background: rgba(0, 0, 0, 0.25);
  border-color: rgba(255, 215, 0, 0.25);
  color: rgba(255, 225, 100, 0.9);
}
.guest-role-tag {
  background: rgba(0, 0, 0, 0.25);
  border-color: rgba(56, 189, 248, 0.25);
  color: rgba(255, 255, 255, 0.85);
}

/* ── LAYOUT 1: PiP / FLOATING (Default) ── */
.video-layout-pip {
  display: block;
}
.video-layout-pip .host-video-box {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.video-layout-pip .guest-videos-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 35;
}
.video-layout-pip .guest-video-tile {
  pointer-events: auto;
  position: absolute;
  width: 110px;
  height: 155px;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.65);
  border: 2px solid rgba(56, 189, 248, 0.7);
  cursor: grab;
  touch-action: none;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  user-select: none;
}
.video-layout-pip .guest-video-tile:active {
  cursor: grabbing;
  box-shadow: 0 12px 30px rgba(56, 189, 248, 0.45);
  border-color: #38bdf8;
}

/* ── LAYOUT 2: SPLIT 2 (1 Toko + 1 Tamu) ── */
.video-layout-split2 {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
}
.video-layout-split2 .host-video-box {
  flex: 1 1 50% !important;
  width: 100% !important;
  height: 50% !important;
  max-height: 50% !important;
  min-height: 0 !important;
  border-bottom: 2px solid rgba(255,255,255,0.25);
  box-sizing: border-box;
}
.video-layout-split2 .guest-videos-container {
  flex: 1 1 50% !important;
  width: 100% !important;
  height: 50% !important;
  max-height: 50% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box;
}
.video-layout-split2 .guest-video-tile {
  flex: 1 1 100% !important;
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
}

/* ── LAYOUT 3: GRID 4 (2x2) ── */
.video-layout-grid4 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: 1fr 1fr !important;
  gap: 2px !important;
  width: 100% !important;
  height: 100% !important;
}
.video-layout-grid4 .host-video-box {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}
.video-layout-grid4 .guest-videos-container {
  display: contents !important;
}
.video-layout-grid4 .guest-video-tile {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
}

/* ── LAYOUT 4: GRID 6 (2x3) ── */
.video-layout-grid6 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: 1fr 1fr 1fr !important;
  gap: 2px !important;
  width: 100% !important;
  height: 100% !important;
}
.video-layout-grid6 .host-video-box {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}
.video-layout-grid6 .guest-videos-container {
  display: contents !important;
}
.video-layout-grid6 .guest-video-tile {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
}

/* ── LAYOUT 5: GRID 9 (3x3) ── */
.video-layout-grid9 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-template-rows: repeat(3, 1fr) !important;
  gap: 2px !important;
  width: 100% !important;
  height: 100% !important;
}
.video-layout-grid9 .host-video-box {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}
.video-layout-grid9 .guest-videos-container {
  display: contents !important;
}
.video-layout-grid9 .guest-video-tile {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
}

/* ── LAYOUT 6: GRID 12 (3x4) ── */
.video-layout-grid12 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-template-rows: repeat(4, 1fr) !important;
  gap: 2px !important;
  width: 100% !important;
  height: 100% !important;
}
.video-layout-grid12 .host-video-box {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}
.video-layout-grid12 .guest-videos-container {
  display: contents !important;
}
.video-layout-grid12 .guest-video-tile {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
}

/* ── LAYOUT 7: GRID 16 (4x4) ── */
.video-layout-grid16 {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  grid-template-rows: repeat(4, 1fr) !important;
  gap: 2px !important;
  width: 100% !important;
  height: 100% !important;
}
.video-layout-grid16 .host-video-box {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}
.video-layout-grid16 .guest-videos-container {
  display: contents !important;
}
.video-layout-grid16 .guest-video-tile {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
}

/* ── LAYOUT 8: GRID 24 (4x6) ── */
.video-layout-grid24 {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  grid-template-rows: repeat(6, 1fr) !important;
  gap: 2px !important;
  width: 100% !important;
  height: 100% !important;
}
.video-layout-grid24 .host-video-box {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}
.video-layout-grid24 .guest-videos-container {
  display: contents !important;
}
.video-layout-grid24 .guest-video-tile {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
}

/* Guest Video Tile Controls (Kick, Mute, Drag Handle) */
.guest-video-tile {
  background: #181824;
  overflow: hidden;
  position: relative;
}

.guest-video-tile.guest-video-paused .guest-tile-video {
  filter: blur(14px);
  transform: scale(1.04);
}

.guest-pause-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 15;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.15s ease;
}

.guest-pause-btn:hover {
  background: rgba(0, 0, 0, 0.7);
  border-color: rgba(255, 255, 255, 0.45);
  transform: scale(1.08);
}
.guest-pause-btn svg {
  display: block;
  flex-shrink: 0;
}

.guest-mic-btn {
  position: absolute;
  top: 6px;
  right: 38px;
  z-index: 15;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.15s ease;
}
.guest-mic-btn:hover {
  background: rgba(0, 0, 0, 0.7);
  border-color: rgba(255, 255, 255, 0.45);
  transform: scale(1.08);
}
.guest-mic-btn.muted {
  background: rgba(239, 68, 68, 0.8) !important;
  border-color: rgba(239, 68, 68, 0.95) !important;
}

.guest-tile-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.guest-drag-handle {
  display: none !important;
}

.guest-kick-btn {
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 15;
  transition: all 0.15s ease;
  padding: 0;
}
.guest-kick-btn:hover {
  transform: scale(1.08);
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.6);
}
.guest-kick-btn svg {
  display: block;
  flex-shrink: 0;
}

/* Request Join Live Button (Bottom Bar) */
.join-live-btn {
  background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.45) !important;
  position: relative;
  transition: all 0.2s ease;
}
.join-live-btn.requested {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  animation: pulseJoin 1.5s infinite;
}
.join-live-btn.joined {
  background: linear-gradient(135deg, #10b981, #059669) !important;
}
@keyframes pulseJoin {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.6); }
  50% { transform: scale(1.06); box-shadow: 0 0 0 8px rgba(245, 158, 11, 0); }
}

/* Menu Badge Pill for Pending Requests */
.menu-badge-pill {
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 10px;
  margin-left: auto;
  border: 1px solid rgba(255,255,255,0.4);
  animation: pulseJoin 1.5s infinite;
}

/* Layout Sheet & Cards */
.layout-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}
.layout-card-opt {
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.layout-card-opt:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.25);
}
.layout-card-opt.active {
  background: rgba(192, 57, 43, 0.18);
  border-color: var(--primary-light);
  box-shadow: 0 0 16px rgba(192, 57, 43, 0.35);
}

.layout-preview-box {
  width: 100%;
  height: 75px;
  border-radius: 8px;
  background: #090912;
  border: 1px solid rgba(255,255,255,0.1);
  overflow: hidden;
  position: relative;
}

/* Previews */
.preview-pip {
  position: relative;
}
.preview-pip .preview-main-video {
  width: 100%;
  height: 100%;
  background: #2a1111;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: #ffd700;
  font-weight: 700;
}
.preview-pip .preview-guest-mini {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 38px;
  background: #0284c7;
  border-radius: 4px;
  border: 1px solid #38bdf8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  color: #fff;
  font-weight: 700;
}

.preview-split2 {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 1px;
}
.preview-split2 .preview-tile {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
}
.preview-split2 .preview-tile:first-child { background: #2a1111; color: #ffd700; }
.preview-split2 .preview-tile:last-child { background: #0c4a6e; color: #38bdf8; }

.preview-grid4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  height: 100%;
  gap: 1px;
}
.preview-grid4 .preview-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
}
.preview-grid4 .preview-tile:first-child { background: #2a1111; color: #ffd700; }
.preview-grid4 .preview-tile:not(:first-child) { background: #0c4a6e; color: #38bdf8; }

.preview-grid6 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  height: 100%;
  gap: 1px;
}
.preview-grid6 .preview-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  font-weight: 700;
}
.preview-grid6 .preview-tile:first-child { background: #2a1111; color: #ffd700; }
.preview-grid6 .preview-tile:not(:first-child) { background: #0c4a6e; color: #38bdf8; }

.layout-info strong {
  display: block;
  font-size: 12px;
  color: #fff;
  margin-bottom: 2px;
}
.layout-info small {
  font-size: 10px;
  color: #94a3b8;
  line-height: 1.3;
  display: block;
}

/* Guest Requests List in Modal */
.guest-requests-list, .active-guests-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.guest-req-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 10px 12px;
  border-radius: 12px;
  gap: 10px;
}
.guest-req-user {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.guest-req-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid #38bdf8;
  object-fit: cover;
  flex-shrink: 0;
}
.guest-req-info h4 {
  font-size: 13px;
  color: #fff;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.guest-req-info span {
  font-size: 11px;
  color: #94a3b8;
}
.guest-req-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.btn-approve-req {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  border: none;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 16px;
  cursor: pointer;
  transition: transform 0.15s;
}
.btn-approve-req:hover {
  transform: scale(1.05);
}
.btn-reject-req {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.35);
  font-size: 11px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 16px;
  cursor: pointer;
}
.btn-kick-active {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.4);
  font-size: 11px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 16px;
  cursor: pointer;
}
.no-requests-state {
  text-align: center;
  padding: 24px 12px;
  color: #94a3b8;
  font-size: 12px;
}
.no-requests-state span {
  font-size: 32px;
  display: block;
  margin-bottom: 6px;
  opacity: 0.6;
}

/* ═══════════════════════════════════════════════════════════
   DRAGGABLE LIVE TITLE WATERMARK (Tengah di bawah profil)
═══════════════════════════════════════════════════════════ */
.live-title-watermark {
  position: absolute;
  top: 58px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 45;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  transition: box-shadow 0.2s, background 0.2s, transform 0.05s ease-out;
}

.live-title-watermark.is-host-draggable {
  pointer-events: auto;
  cursor: grab;
}

.live-title-watermark.is-dragging {
  cursor: grabbing !important;
  opacity: 0.95;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(239, 68, 68, 0.6);
  transform: scale(1.04);
}

.watermark-content {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 5px 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.watermark-icon {
  font-size: 10px;
  animation: pulseDot 1.4s ease-in-out infinite;
  display: flex;
  align-items: center;
}

.watermark-text {
  font-size: 11.5px;
  font-weight: 700;
  color: #f8fafc;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
}

.watermark-drag-handle {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  cursor: grab;
  padding-left: 2px;
  line-height: 1;
  display: none;
}

.live-title-watermark.is-host-draggable .watermark-drag-handle {
  display: inline-block;
}

.live-title-watermark.is-host-draggable:hover {
  background: rgba(15, 23, 42, 0.85);
  border-color: rgba(255, 255, 255, 0.4);
}

/* App Build Version Badge */
.app-build-ver {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.14);
  border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 2px 7px;
  border-radius: 20px;
  letter-spacing: 0.5px;
  vertical-align: middle;
  margin-left: 6px;
}

/* ═══════════════════════════════════════════════════════════
   INSTANT GUEST JOIN REQUEST FLOATING POPUP (HOST NOTIFICATION)
═══════════════════════════════════════════════════════════ */
.instant-guest-req-container {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 24px);
  max-width: 460px;
  z-index: 150;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.instant-guest-req-card {
  pointer-events: auto;
  background: rgba(15, 23, 42, 0.96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1.5px solid #38bdf8;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.8), 0 0 16px rgba(56, 189, 248, 0.4);
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  animation: slideDownFade 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideDownFade {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.instant-guest-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.instant-guest-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid #38bdf8;
  object-fit: cover;
  flex-shrink: 0;
}

.instant-guest-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  overflow: hidden;
}

.instant-guest-badge {
  display: inline-block;
  font-size: 8.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.15);
  padding: 1px 5px;
  border-radius: 4px;
  margin: 0;
  flex-shrink: 0;
}

.instant-guest-info h4 {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  flex-shrink: 1;
}

.instant-guest-info p {
  font-size: 10.5px;
  color: #cbd5e1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  flex: 1;
  min-width: 0;
}

.instant-guest-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.btn-instant-approve {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #ffffff;
  border: none;
  font-size: 16px;
  font-weight: 700;
  padding: 0;
  width: 38px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.35);
  transition: transform 0.15s, background 0.15s;
  white-space: nowrap;
}

.btn-instant-approve:active {
  transform: scale(0.96);
}

.btn-instant-reject {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.4);
  font-size: 16px;
  font-weight: 600;
  padding: 0;
  width: 38px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}

.btn-instant-reject:hover {
  background: rgba(239, 68, 68, 0.25);
}

.btn-instant-reject:active {
  background: rgba(239, 68, 68, 0.35);
}

/* ═══════════════════════════════════════════════════════════
   MULTI-GUEST VIDEO TILES & DYNAMIC STREAM LAYOUTS
═══════════════════════════════════════════════════════════ */
.guest-videos-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

/* Base Guest Video Tile (PiP Floating) */
.guest-video-tile {
  position: absolute;
  width: 115px;
  height: 155px;
  border-radius: 14px;
  overflow: hidden;
  background: #0f172a;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65);
  pointer-events: auto;
  z-index: 10;
  touch-action: none;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.guest-tile-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
  display: block;
}

.video-role-tag {
  position: absolute;
  bottom: 6px;
  left: 6px;
  right: 6px;
  font-size: 9.5px;
  font-weight: 600;
  padding: 3px 6px;
  border-radius: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.guest-role-tag {
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.host-role-tag {
  background: rgba(192, 57, 43, 0.85);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  bottom: 80px;
  left: 12px;
  right: auto;
  font-size: 11px;
}



/* ── LAYOUT 2: SPLIT 2 (Bagi 2 Layar Atas/Bawah di Mobile) ── */
.video-bg.video-layout-split2 {
  display: flex;
  flex-direction: column;
}

.video-bg.video-layout-split2 .host-video-box {
  position: relative !important;
  width: 100% !important;
  height: 50% !important;
  inset: auto !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

.video-bg.video-layout-split2 .guest-videos-container {
  position: relative;
  width: 100%;
  height: 50%;
  inset: auto;
  display: flex;
}

.video-bg.video-layout-split2 .guest-video-tile {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  border: none !important;
}

/* ── LAYOUT 3: GRID 4 (2x2) ── */
.video-bg.video-layout-grid4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.video-bg.video-layout-grid4 .host-video-box {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  inset: auto !important;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.video-bg.video-layout-grid4 .guest-videos-container {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  pointer-events: auto;
}

.video-bg.video-layout-grid4 .guest-videos-container .guest-video-tile:nth-child(1) {
  grid-column: 2;
  grid-row: 1;
}

.video-bg.video-layout-grid4 .guest-videos-container .guest-video-tile:nth-child(2) {
  grid-column: 1;
  grid-row: 2;
}

.video-bg.video-layout-grid4 .guest-videos-container .guest-video-tile:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
}

.video-bg.video-layout-grid4 .guest-video-tile {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* ── LAYOUT 4: GRID 6 (2x3) ── */
.video-bg.video-layout-grid6 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

.video-bg.video-layout-grid6 .host-video-box {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  inset: auto !important;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.video-bg.video-layout-grid6 .guest-videos-container {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  pointer-events: auto;
}

.video-bg.video-layout-grid6 .guest-video-tile {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* ── LAYOUT 5: GRID 9 (3x3) ── */
.video-bg.video-layout-grid9 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}
.video-bg.video-layout-grid9 .host-video-box {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  inset: auto !important;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.video-bg.video-layout-grid9 .guest-videos-container {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  pointer-events: auto;
}
.video-bg.video-layout-grid9 .guest-video-tile {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* ── LAYOUT 6: GRID 12 (3x4) ── */
.video-bg.video-layout-grid12 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
}
.video-bg.video-layout-grid12 .host-video-box {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  inset: auto !important;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.video-bg.video-layout-grid12 .guest-videos-container {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  pointer-events: auto;
}
.video-bg.video-layout-grid12 .guest-video-tile {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* ── LAYOUT 7: GRID 16 (4x4) ── */
.video-bg.video-layout-grid16 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
}
.video-bg.video-layout-grid16 .host-video-box {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  inset: auto !important;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.video-bg.video-layout-grid16 .guest-videos-container {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  pointer-events: auto;
}
.video-bg.video-layout-grid16 .guest-video-tile {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* ── LAYOUT 8: GRID 24 (4x6) ── */
.video-bg.video-layout-grid24 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(6, 1fr);
}
.video-bg.video-layout-grid24 .host-video-box {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  inset: auto !important;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.video-bg.video-layout-grid24 .guest-videos-container {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(6, 1fr);
  pointer-events: auto;
}
.video-bg.video-layout-grid24 .guest-video-tile {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* ═══════════════════════════════════════════════════════════
   HOST ANIMATION FX STYLES & FULLSCREEN VISUALS
═══════════════════════════════════════════════════════════ */

/* Host Circle Animation Trigger Button */
.anim-circle-btn {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.75), rgba(139, 92, 246, 0.85)) !important;
  border-color: rgba(244, 114, 182, 0.9) !important;
  box-shadow: 0 0 16px rgba(236, 72, 153, 0.6) !important;
  animation: pulseAnimGlow 2s infinite ease-in-out;
}

.anim-circle-btn:hover {
  transform: scale(1.12);
  box-shadow: 0 0 24px rgba(236, 72, 153, 0.95) !important;
}

@keyframes pulseAnimGlow {
  0%, 100% {
    box-shadow: 0 0 14px rgba(236, 72, 153, 0.55);
  }
  50% {
    box-shadow: 0 0 24px rgba(236, 72, 153, 0.95), 0 0 35px rgba(139, 92, 246, 0.6);
  }
}

/* Host Animation Selection Sheet Panel */
.host-anim-sheet {
  background: rgba(15, 23, 42, 0.95) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  max-height: 80vh;
  padding-bottom: 24px;
}

.host-anim-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.host-anim-badge {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  background: linear-gradient(135deg, #ec4899, #f43f5e);
  color: #ffffff;
  padding: 3px 8px;
  border-radius: 12px;
  letter-spacing: 0.5px;
}

.host-anim-desc {
  font-size: 12px;
  color: #94a3b8;
  margin: 0 0 16px 0;
  line-height: 1.4;
}

.host-anim-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.host-anim-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}

.host-anim-card:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.host-anim-card:active {
  transform: scale(0.97);
}

.host-anim-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.host-anim-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.host-anim-info strong {
  font-size: 13.5px;
  color: #ffffff;
  font-weight: 700;
}

.host-anim-info small {
  font-size: 11px;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.host-anim-play-btn {
  font-size: 11px;
  font-weight: 700;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 6px 10px;
  border-radius: 12px;
  flex-shrink: 0;
  transition: all 0.2s;
}

.host-anim-card:hover .host-anim-play-btn {
  background: #38bdf8;
  color: #0f172a;
}

/* ═══════════════════════════════════════════════════════════
   FULLSCREEN ANIMATION OVERLAY STAGE (animFxStage)
═══════════════════════════════════════════════════════════ */
.anim-fx-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 60;
  pointer-events: none;
  overflow: hidden;
}

/* 1. BIRTHDAY FX */
.fx-birthday-cake-only {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  font-size: 76px;
  filter: drop-shadow(0 0 24px rgba(236, 72, 153, 0.85));
  animation: fxBirthdayPop 3.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  z-index: 5;
}

@keyframes fxBirthdayPop {
  0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  15% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
  25% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  80% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -60%) scale(0.6); opacity: 0; }
}

.fx-balloon {
  position: absolute;
  bottom: -90px;
  width: 50px;
  height: 65px;
  animation: floatUpBalloon 3.6s ease-out forwards;
}

.fx-balloon-body {
  width: 100%;
  height: 100%;
  border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  box-shadow: inset -4px -4px 10px rgba(0, 0, 0, 0.25), 0 6px 14px rgba(0, 0, 0, 0.35);
}

.fx-balloon-string {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 1.5px;
  height: 24px;
  background: rgba(255, 255, 255, 0.65);
}

@keyframes floatUpBalloon {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  50% { transform: translateY(-50vh) rotate(12deg); }
  100% { transform: translateY(-115vh) rotate(-15deg); opacity: 0.9; }
}

.fx-streamer {
  position: absolute;
  top: -60px;
  width: 6px;
  height: 70px;
  border-radius: 3px;
  animation: fallStreamer 3.4s ease-in forwards;
}

@keyframes fallStreamer {
  0% { transform: translateY(0) rotate(0deg) scaleY(1); opacity: 1; }
  50% { transform: translateY(50vh) rotate(360deg) scaleY(1.4); }
  100% { transform: translateY(115vh) rotate(720deg) scaleY(0.8); opacity: 0; }
}

/* 2. FIREWORKS FX */
.fx-firework-burst {
  position: absolute;
  width: 1px;
  height: 1px;
}

.fx-firework-spark {
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  animation: fireworkSparkAnim 1.6s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes fireworkSparkAnim {
  0% { transform: translate(0, 0) scale(1.4); opacity: 1; }
  60% { opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(0.2); opacity: 0; }
}

.fx-firework-ring {
  position: absolute;
  top: 0;
  left: 0;
  border: 3px solid #ffffff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: fireworkRingAnim 1s ease-out forwards;
}

@keyframes fireworkRingAnim {
  0% { width: 0; height: 0; opacity: 1; }
  100% { width: 180px; height: 180px; opacity: 0; }
}

/* 3. CONFETTI METALLIC SHOWER FX */
.fx-confetti-piece {
  position: absolute;
  top: -20px;
  border-radius: 2px;
  animation: confettiFall 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes confettiFall {
  0% {
    transform: translateY(0) translateX(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(110vh) translateX(var(--drift-x)) rotateX(var(--rot-x)) rotateY(var(--rot-y)) rotateZ(var(--rot-z));
    opacity: 0.2;
  }
}

/* 4. KISS FX */
.fx-kiss-container {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.fx-kiss-lips {
  font-size: 88px;
  animation: lipsPopKiss 3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  filter: drop-shadow(0 0 24px rgba(239, 68, 68, 0.9));
}

@keyframes lipsPopKiss {
  0% { transform: scale(0.2); opacity: 0; }
  20% { transform: scale(1.35) rotate(-10deg); opacity: 1; }
  35% { transform: scale(1.1) rotate(10deg); }
  50% { transform: scale(1.25) rotate(0deg); }
  80% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}

.fx-kiss-heart {
  position: absolute;
  font-size: 26px;
  top: 35px;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.2);
  opacity: 0;
  animation: kissHeartRadiate 1.8s ease-out forwards;
}

@keyframes kissHeartRadiate {
  0% { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(1.2); opacity: 0; }
}

/* 5. HANDSHAKE FX */
.fx-handshake-wrapper {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: handshakeWrapperPop 3.5s ease-in-out forwards;
}

.fx-handshake-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 72px;
  filter: drop-shadow(0 0 20px rgba(16, 185, 129, 0.8));
}

.fx-hand-left {
  animation: handLeftSlide 1s ease-out forwards;
}

.fx-hand-right {
  animation: handRightSlide 1s ease-out forwards;
}

.fx-hand-sparkle {
  font-size: 46px;
  animation: handSparkleSpin 1.4s infinite alternate ease-in-out;
}

@keyframes handshakeWrapperPop {
  0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
  18% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
  28% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  85% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
}

@keyframes handLeftSlide {
  0% { transform: translateX(-60px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes handRightSlide {
  0% { transform: translateX(60px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes handSparkleSpin {
  from { transform: scale(0.8) rotate(-10deg); }
  to { transform: scale(1.2) rotate(10deg); }
}

/* 6. APPLAUSE FX */
.fx-applause-wrapper {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: applauseWrapperPop 3.4s ease-in-out forwards;
}

.fx-applause-center {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 64px;
  filter: drop-shadow(0 0 20px rgba(6, 182, 212, 0.8));
}

.fx-clap-hand {
  display: inline-block;
  animation: clapAnim 0.35s infinite alternate ease-in-out;
}

.fx-clap-center {
  font-size: 78px;
  animation-delay: 0.15s;
}

@keyframes clapAnim {
  0% { transform: scale(0.9) rotate(-12deg); }
  100% { transform: scale(1.15) rotate(12deg); }
}

.fx-applause-star {
  position: absolute;
  font-size: 26px;
  animation: floatApplauseStar 2.4s ease-out forwards;
}

@keyframes floatApplauseStar {
  0% { transform: translateY(0) scale(0.4); opacity: 0; }
  30% { opacity: 1; transform: translateY(-30px) scale(1.2); }
  100% { transform: translateY(-100px) scale(0.5); opacity: 0; }
}

@keyframes applauseWrapperPop {
  0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
  18% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
  28% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  85% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
}

/* 7. KICK OUT FX (TENDANG PELANGGAN) */
.fx-kick-wrapper {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 99999;
  width: 320px;
  height: 280px;
}

.fx-kick-boot {
  position: absolute;
  font-size: 84px;
  left: -120px;
  top: 45px;
  filter: drop-shadow(0 0 16px rgba(220, 38, 38, 0.9));
  animation: kickBootStrike 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  z-index: 10;
}

@keyframes kickBootStrike {
  0% {
    transform: translateX(-100px) translateY(40px) rotate(-45deg) scale(0.6);
    opacity: 0;
  }
  20% {
    transform: translateX(0px) translateY(10px) rotate(-15deg) scale(1.2);
    opacity: 1;
  }
  30% {
    /* Impact kick point */
    transform: translateX(95px) translateY(-10px) rotate(25deg) scale(1.4);
    opacity: 1;
  }
  45% {
    transform: translateX(110px) translateY(-20px) rotate(35deg) scale(1.1);
    opacity: 0.9;
  }
  75% {
    transform: translateX(120px) translateY(-20px) rotate(35deg) scale(0.9);
    opacity: 0.5;
  }
  100% {
    transform: translateX(140px) translateY(-30px) rotate(45deg) scale(0);
    opacity: 0;
  }
}

.fx-kick-target-box {
  position: absolute;
  top: 30px;
  left: 60px;
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fx-kick-impact-star {
  position: absolute;
  font-size: 78px;
  opacity: 0;
  animation: kickImpactExplode 0.8s 0.28s ease-out forwards;
  filter: drop-shadow(0 0 20px #fbbf24);
  z-index: 12;
}

@keyframes kickImpactExplode {
  0% {
    transform: scale(0.2) rotate(0deg);
    opacity: 0;
  }
  25% {
    transform: scale(1.5) rotate(20deg);
    opacity: 1;
  }
  60% {
    transform: scale(1.8) rotate(-10deg);
    opacity: 0.8;
  }
  100% {
    transform: scale(2.4) rotate(45deg);
    opacity: 0;
  }
}

.fx-kick-avatar-fly {
  font-size: 76px;
  position: absolute;
  animation: kickAvatarFlyAway 2.2s 0.3s cubic-bezier(0.1, 0.8, 0.2, 1) forwards;
  z-index: 11;
}

@keyframes kickAvatarFlyAway {
  0% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 1;
  }
  20% {
    transform: translate(60px, -40px) scale(1.2) rotate(45deg);
    opacity: 1;
  }
  45% {
    transform: translate(180px, -140px) scale(0.85) rotate(180deg);
    opacity: 0.9;
  }
  75% {
    transform: translate(320px, -280px) scale(0.4) rotate(420deg);
    opacity: 0.6;
  }
  100% {
    transform: translate(480px, -420px) scale(0.05) rotate(720deg);
    opacity: 0;
  }
}

.fx-kick-dust {
  position: absolute;
  font-size: 38px;
  opacity: 0;
}

.fx-kick-dust-1 {
  animation: kickDustSpread1 1.2s 0.32s ease-out forwards;
}

.fx-kick-dust-2 {
  animation: kickDustSpread2 1.2s 0.35s ease-out forwards;
}

@keyframes kickDustSpread1 {
  0% { transform: translate(-20px, 20px) scale(0.4); opacity: 0; }
  30% { opacity: 0.9; transform: translate(-50px, 40px) scale(1.3); }
  100% { opacity: 0; transform: translate(-90px, 60px) scale(1.8); }
}

@keyframes kickDustSpread2 {
  0% { transform: translate(10px, 20px) scale(0.4); opacity: 0; }
  30% { opacity: 0.9; transform: translate(40px, 50px) scale(1.2); }
  100% { opacity: 0; transform: translate(70px, 75px) scale(1.6); }
}

.fx-kick-ting-star {
  position: absolute;
  font-size: 34px;
  top: -120px;
  right: -100px;
  opacity: 0;
  animation: kickTingStarFlash 0.8s 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  filter: drop-shadow(0 0 15px #ffffff);
  z-index: 15;
}

@keyframes kickTingStarFlash {
  0% { transform: scale(0.1) rotate(0deg); opacity: 0; }
  40% { transform: scale(1.6) rotate(90deg); opacity: 1; }
  70% { transform: scale(1.2) rotate(180deg); opacity: 1; }
  100% { transform: scale(0.1) rotate(270deg); opacity: 0; }
}

.fx-kick-comic-line {
  position: absolute;
  width: 48px;
  height: 4px;
  background: linear-gradient(90deg, #f59e0b, transparent);
  border-radius: 4px;
  opacity: 0;
  animation: kickComicLineBurst 0.6s 0.28s ease-out forwards;
}

@keyframes kickComicLineBurst {
  0% { opacity: 0; transform: scaleX(0.2); }
  40% { opacity: 1; transform: scaleX(1.4); }
  100% { opacity: 0; transform: scaleX(2) translateX(40px); }
}

.fx-kick-banner {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%) scale(0.5);
  background: linear-gradient(135deg, #ef4444, #991b1b);
  color: #fff;
  padding: 8px 18px;
  border-radius: 24px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(239, 68, 68, 0.6), 0 0 0 2px rgba(255, 255, 255, 0.2);
  opacity: 0;
  animation: kickBannerPop 3.2s 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  z-index: 20;
}

@keyframes kickBannerPop {
  0% {
    transform: translateX(-50%) scale(0.5) translateY(20px);
    opacity: 0;
  }
  15% {
    transform: translateX(-50%) scale(1.1) translateY(0);
    opacity: 1;
  }
  25% {
    transform: translateX(-50%) scale(1) translateY(0);
    opacity: 1;
  }
  80% {
    transform: translateX(-50%) scale(1) translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) scale(0.7) translateY(-20px);
    opacity: 0;
  }
}

/* CHAT QUICK AWARD & BLOCK HINT BUTTONS */
.chat-msg-award-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(245, 158, 11, 0.45);
  color: #fbbf24;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  width: fit-content;
}

.chat-msg-award-btn:hover {
  background: rgba(245, 158, 11, 0.35);
  border-color: #f59e0b;
  transform: scale(1.05);
}

/* 8. THUMBS UP & BEST VIEWER AWARD FX */
.fx-thumbs-wrapper {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 99999;
  width: 340px;
  height: 320px;
}

.fx-thumbs-aura {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.45) 0%, rgba(245, 158, 11, 0.15) 55%, transparent 75%);
  animation: thumbsAuraPulse 3.8s ease-in-out forwards;
  filter: blur(8px);
}

@keyframes thumbsAuraPulse {
  0% { transform: scale(0.2); opacity: 0; }
  20% { transform: scale(1.3); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.9; }
  80% { transform: scale(1.4); opacity: 0.8; }
  100% { transform: scale(1.8); opacity: 0; }
}

.fx-thumbs-crown {
  position: absolute;
  top: 15px;
  font-size: 48px;
  opacity: 0;
  animation: thumbsCrownDrop 3.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  filter: drop-shadow(0 0 14px #ffd700);
  z-index: 12;
}

@keyframes thumbsCrownDrop {
  0% { transform: translateY(-60px) scale(0.4) rotate(-15deg); opacity: 0; }
  22% { transform: translateY(0px) scale(1.2) rotate(5deg); opacity: 1; }
  35% { transform: translateY(-6px) scale(1) rotate(0deg); }
  80% { transform: translateY(0px) scale(1) rotate(0deg); opacity: 1; }
  100% { transform: translateY(-30px) scale(0.6); opacity: 0; }
}

.fx-thumbs-main {
  font-size: 104px;
  position: absolute;
  top: 50px;
  animation: thumbsMainSlam 3.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  filter: drop-shadow(0 0 24px rgba(245, 158, 11, 0.95)) drop-shadow(0 0 45px rgba(251, 191, 36, 0.7));
  z-index: 10;
}

@keyframes thumbsMainSlam {
  0% {
    transform: scale(0.2) translateY(80px) rotate(-35deg);
    opacity: 0;
  }
  18% {
    transform: scale(1.4) translateY(-15px) rotate(15deg);
    opacity: 1;
  }
  30% {
    transform: scale(1.15) translateY(0) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: scale(1.25) translateY(-5px) rotate(-8deg);
  }
  70% {
    transform: scale(1.18) translateY(0) rotate(5deg);
    opacity: 1;
  }
  85% {
    transform: scale(1.15) translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: scale(0.4) translateY(-50px);
    opacity: 0;
  }
}

.fx-thumbs-sparkle-center {
  position: absolute;
  top: 90px;
  font-size: 32px;
  animation: thumbsSparkleSpin 2.4s 0.3s infinite ease-in-out;
  z-index: 15;
}

@keyframes thumbsSparkleSpin {
  0% { transform: scale(0.8) rotate(-15deg); opacity: 0.7; }
  50% { transform: scale(1.3) rotate(15deg); opacity: 1; }
  100% { transform: scale(0.8) rotate(-15deg); opacity: 0.7; }
}

.fx-thumbs-orbit-star {
  position: absolute;
  top: 100px;
  left: 50%;
  font-size: 26px;
  opacity: 0;
  animation: thumbsStarRadiate 2.8s ease-out forwards;
  filter: drop-shadow(0 0 10px #fbbf24);
  z-index: 11;
}

@keyframes thumbsStarRadiate {
  0% { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
  25% { opacity: 1; transform: translate(calc(-50% + var(--tx) * 0.4), calc(-50% + var(--ty) * 0.4)) scale(1.2); }
  60% { opacity: 0.9; transform: translate(calc(-50% + var(--tx) * 0.8), calc(-50% + var(--ty) * 0.8)) scale(1); }
  100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0.4); opacity: 0; }
}

.fx-thumbs-banner {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%) scale(0.5);
  background: linear-gradient(135deg, #f59e0b, #b45309);
  color: #ffffff;
  padding: 9px 20px;
  border-radius: 26px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
  white-space: nowrap;
  box-shadow: 0 4px 22px rgba(245, 158, 11, 0.7), 0 0 0 2px rgba(255, 255, 255, 0.35);
  opacity: 0;
  animation: thumbsBannerPop 3.8s 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  z-index: 20;
}

/* ═══════════════════════════════════════════════════════════
   BEAUTY FILTER, FACE ACCESSORIES & VIDEO MIRRORING
═══════════════════════════════════════════════════════════ */

/* Floating Host Beauty Filter Trigger Button */
.beauty-circle-btn {
  background: linear-gradient(135deg, #ec4899, #f43f5e) !important;
  border-color: rgba(251, 113, 133, 0.9) !important;
  box-shadow: 0 0 16px rgba(236, 72, 153, 0.7) !important;
  animation: pulseBeautyGlow 2.4s infinite ease-in-out;
}
.beauty-circle-btn:hover {
  transform: scale(1.12);
  box-shadow: 0 0 24px rgba(244, 63, 94, 0.95) !important;
}
@keyframes pulseBeautyGlow {
  0%, 100% { box-shadow: 0 0 14px rgba(236, 72, 153, 0.6); }
  50% { box-shadow: 0 0 24px rgba(244, 63, 94, 0.95), 0 0 32px rgba(236, 72, 153, 0.7); }
}

/* Beauty Panel Sheet */
.beauty-sheet {
  background: rgba(15, 23, 42, 0.96) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  max-height: 85vh;
  padding-bottom: 24px;
}

.beauty-tabs-row {
  display: flex;
  gap: 8px;
  margin: 12px 0 16px;
  background: rgba(255, 255, 255, 0.06);
  padding: 4px;
  border-radius: 12px;
}
.beauty-tab-btn {
  flex: 1;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 9px;
  color: rgba(255, 255, 255, 0.75);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
}
.beauty-tab-btn.active {
  background: linear-gradient(135deg, #ec4899, #d946ef);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(236, 72, 153, 0.4);
}

.beauty-toggle-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.07);
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 16px;
}
.beauty-toggle-info {
  display: flex;
  align-items: center;
  gap: 12px;
}
.beauty-badge-icon {
  font-size: 26px;
}
.beauty-toggle-info strong {
  display: block;
  font-size: 14px;
  color: #ffffff;
  margin-bottom: 2px;
}
.beauty-toggle-info small {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
}

.beauty-controls-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.beauty-slider-item {
  background: rgba(255, 255, 255, 0.04);
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.beauty-slider-header {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 8px;
}
.beauty-slider-item input[type=range] {
  width: 100%;
  accent-color: #ec4899;
  cursor: pointer;
}

/* Accessories Grid */
.accessory-desc-note {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 12px;
}
.accessories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 4px;
}
.accessory-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 12px 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}
.accessory-card:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(236, 72, 153, 0.6);
  transform: translateY(-2px);
}
.accessory-card.active {
  background: rgba(236, 72, 153, 0.22);
  border-color: #ec4899;
  box-shadow: 0 0 12px rgba(236, 72, 153, 0.4);
}
.accessory-card .acc-icon {
  font-size: 28px;
  margin-bottom: 4px;
}
.accessory-card .acc-name {
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
}

/* Face Accessory Visual Overlay on Top of Webcam Video */
.face-accessory-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
}
.face-accessory-item {
  position: absolute;
  pointer-events: auto;
  user-select: none;
  transition: transform 0.1s ease-out;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.6));
}

/* Specific Face Accessories Styles */
.acc-hat {
  top: 14%;
  animation: gentleBob 3s ease-in-out infinite;
}
.acc-glasses {
  top: 36%;
}
.acc-mustache {
  top: 52%;
}
.acc-beard {
  top: 60%;
}
.acc-mask {
  top: 50%;
}

@keyframes gentleBob {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.02); }
}

/* Video Mirror Flip Modes */
.video-mirrored video,
.video-mirrored canvas {
  transform: scaleX(-1) !important;
}
.video-unmirrored video,
.video-unmirrored canvas {
  transform: scaleX(1) !important;
}