/* ═══════════════════════════════════════════
   app.css — gecached voor repeat-visitors
   Aanpassingen voor betere performance:
   - prefers-reduced-motion support
   - will-change hints op animating elementen
   - content-visibility voor off-screen sections
═══════════════════════════════════════════ */

/* Respecteer systeem-instellingen voor minder beweging.
   Mensen met vestibulaire problemen (of batterij-besparing-modus op iOS)
   krijgen automatisch een rustigere UI. Scheelt ook CPU/GPU op mobiel. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════
   BROADCAST VIEWER COUNTER WIDGET
═══════════════════════════════════════════ */
#broadcast-viewer-widget {
  position: absolute;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: none;
  align-items: center;
  gap: 7px;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 7px 18px 7px 12px;
  pointer-events: none;
  box-shadow: 0 4px 24px rgba(0,0,0,.5), 0 0 0 1px rgba(255,0,215,.15);
}
#broadcast-viewer-widget .bvw-pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ff3b6b;
  flex-shrink: 0;
  animation: bvwPulse 1.6s ease-in-out infinite;
}
@keyframes bvwPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,59,107,.7); }
  50%      { box-shadow: 0 0 0 5px rgba(255,59,107,0); }
}
#broadcast-viewer-widget .bvw-eye {
  color: rgba(255,255,255,.55);
  flex-shrink: 0;
}
#broadcast-viewer-widget .bvw-num {
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.5px;
  line-height: 1;
  min-width: 24px;
  text-align: right;
  transition: color .2s;
}
#broadcast-viewer-widget .bvw-num.bvw-bump {
  animation: bvwBump .35s cubic-bezier(.36,.07,.19,.97);
  color: #ff00d7;
}
@keyframes bvwBump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  70%  { transform: scale(.92); }
  100% { transform: scale(1); }
}
#broadcast-viewer-widget .bvw-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
  letter-spacing: .8px;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════
   BROADCAST WARNING MODAL
═══════════════════════════════════════════ */
#broadcast-warning-modal .modal {
  max-width: 420px;
  text-align: center;
}
#broadcast-warning-modal .bw-icon {
  font-size: 48px;
  margin-bottom: 12px;
  display: block;
}
#broadcast-warning-modal h2 {
  color: #ffb74d !important;
  font-size: 20px !important;
  letter-spacing: 1px !important;
  margin-bottom: 10px !important;
}
#broadcast-warning-modal .bw-body {
  color: var(--muted2);
  font-size: 14px;
  line-height: 1.65;
  margin-bottom: 22px;
}
#broadcast-warning-modal .bw-body strong {
  color: var(--text);
}
#broadcast-warning-modal .bw-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
#broadcast-warning-modal .bw-btn-confirm {
  flex: 1;
  padding: 11px 0;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .2s;
}
#broadcast-warning-modal .bw-btn-confirm:hover { opacity: .85; }
#broadcast-warning-modal .bw-btn-cancel {
  flex: 1;
  padding: 11px 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border2);
  background: var(--surface3);
  color: var(--muted2);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
}
#broadcast-warning-modal .bw-btn-cancel:hover { background: var(--surface2); }
#broadcast-warning-modal .bw-checkbox-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 18px;
  font-size: 13px;
  color: var(--muted2);
  cursor: pointer;
}
#broadcast-warning-modal .bw-checkbox-row input { cursor: pointer; accent-color: var(--accent); }

/* ═══════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════ */
:root {
  --bg: #4a4a4e;
  --surface: #4a4a4e;
  --surface2: #4a4a4e;
  --surface3: #040404;
  --border: rgba(255,255,255,.06);
  --border2: rgba(255,255,255,.12);
  --accent: #d20267;
  --accent2: #d10367;
  --accent-dim: rgba(232,25,122,.15);
  --online: #00e676;
  --text: #fff;
  --muted: #6b6b7f;
  --muted2: #fff;
  --male: #4da6ff;
  --female: #d10367;
  --header-h: 54px;
  --cam-bar-h: 52px;
  --nav-h: 62px;
  --font-head: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --radius: 12px;
  --radius-sm: 8px;
  --glow: 0 0 20px rgba(232,25,122,.4);
}

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0 }
html { height: 100%; -webkit-text-size-adjust: 100% }
body {
  height: 100%; overflow: hidden;
  background: #000; color: var(--text);
  font-family: var(--font-body); font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════════════════
   SCROLLBARS
═══════════════════════════════════════════ */
::-webkit-scrollbar { width: 3px; height: 3px }
::-webkit-scrollbar-track { background: transparent }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px }
::-webkit-scrollbar-thumb:hover { background: rgba(232,25,122,.4) }

/* ═══════════════════════════════════════════
   TAGLINE BANNER
═══════════════════════════════════════════ */
#tagline-banner {
  background: linear-gradient(90deg, var(--bg) 0%, #1a0a13 50%, var(--bg) 100%);
  border-bottom: 1px solid rgba(232,25,122,.12);
  padding: 6px 16px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
#tagline-banner::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(232,25,122,.04), transparent);
  pointer-events: none;
}
#tagline-inner {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  max-width: 700px; margin: 0 auto;
}
.tl-flag { font-size: 16px; line-height: 1; flex-shrink: 0 }
.tl-text { display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center }
.tl-title {
  font-family: var(--font-head);
  font-size: 20px; letter-spacing: 3px; font-weight: 800;
  background: linear-gradient(90deg, #ff9de2, #e8197a, #ffb3d9);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  line-height: 1.1;
}
.tl-sub { font-size: 9px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.25) }

@media(max-width:540px) {
  #tagline-banner { padding: 5px 10px }
  .tl-title { font-size: 16px; letter-spacing: 2px }
  .tl-flag { font-size: 13px }
}

/* ═══════════════════════════════════════════
   HEADER
═══════════════════════════════════════════ */
#header {
  height: var(--header-h);
  background: rgb(8, 8, 9);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
  position: relative; z-index: 100; flex-shrink: 0;
}
#logo {
  font-size: 22px; letter-spacing: 1px; font-weight: 800;
  color: var(--text); white-space: nowrap;
}
#logo span { color: var(--accent2) }

#header-right { display: flex; align-items: center; gap: 8px; min-width: 0 }
#user-count {
  font-size: 11px; color: #fff;
  display: flex; align-items: center; gap: 5px; white-space: nowrap;
   border: 1px solid rgb(30, 28, 32);
  border-radius: 20px; padding: 3px 9px;
}
#user-count .dot { width: 6px; height: 6px; border-radius: 50%; background: #d10367;  flex-shrink: 0 }
#user-count b { color: #fff; font-weight: 700 }

#btn-auth {
  background: var(--accent);
  color: #fff; border: none; border-radius: var(--radius-sm);
  padding: 7px 14px; font-family: var(--font-body); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all .2s; white-space: nowrap; letter-spacing: .3px;
}
#btn-auth:hover { background: var(--accent2); box-shadow: var(--glow) }
#btn-logout {
  background: var(--surface3); color: var(--muted2);
  border: 1px solid var(--border2); border-radius: var(--radius-sm);
  padding: 6px 10px; font-family: var(--font-body); font-size: 11px; font-weight: 600;
  cursor: pointer; transition: all .2s; white-space: nowrap;
}
#btn-logout:hover { background: var(--surface2); color: var(--text) }
#user-avatar-sm { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 2px solid var(--accent); cursor: pointer; flex-shrink: 0 }
#user-name-sm { font-size: 12px; font-weight: 600; color: var(--text); cursor: pointer; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
#btn-admin { background: rgba(232,25,122,.12); color: var(--accent2); border: 1px solid rgba(232,25,122,.25); border-radius: var(--radius-sm); padding: 6px 10px; font-family: var(--font-body); font-size: 11px; font-weight: 600; cursor: pointer; transition: all .2s; white-space: nowrap; display: none }
#btn-admin:hover { background: rgba(232,25,122,.25) }

/* Back to discover button */
#btn-back-discover {
  display: flex;
  align-items: center; gap: 6px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  color: var(--muted2);
  padding: 6px 12px;
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all .2s; white-space: nowrap; flex-shrink: 0;
}
#btn-back-discover:hover { background: var(--surface3); color: var(--text); border-color: var(--accent) }
#btn-back-discover svg { flex-shrink: 0 }

/* RADIO in cam-bar */
#radio-player {
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0; margin-left: auto;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px; padding: 4px 10px 4px 8px;
}
#radio-label {
  font-size: 10px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
  transition: color .3s;
}
#radio-label.playing { color: var(--accent) }
#radio-wave {
  display: none; align-items: flex-end; gap: 2px; height: 14px;
}
#radio-wave.active { display: flex }
#radio-wave span {
  display: block; width: 3px; border-radius: 2px;
  background: var(--accent);
  animation: radioBar 1s ease-in-out infinite;
}
#radio-wave span:nth-child(1){ height:4px;  animation-delay:0s }
#radio-wave span:nth-child(2){ height:10px; animation-delay:.15s }
#radio-wave span:nth-child(3){ height:7px;  animation-delay:.3s }
#radio-wave span:nth-child(4){ height:12px; animation-delay:.1s }
@keyframes radioBar {
  0%,100%{ transform:scaleY(1) }
  50%    { transform:scaleY(.3) }
}
#radio-play-btn, #radio-stop-btn {
  width: 26px; height: 26px; border-radius: 50%; border: none;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .2s; flex-shrink: 0; padding: 0;
}
#radio-play-btn { background: var(--accent); color: #fff }
#radio-play-btn:hover { box-shadow: 0 0 10px rgba(232,25,122,.6); transform: scale(1.08) }
#radio-stop-btn { background: var(--surface3); border: 1px solid var(--border2); color: var(--muted2) }
#radio-stop-btn:hover { background: rgba(239,68,68,.2); border-color: #ef4444; color: #ef4444 }
@keyframes radioGlow { 0%,100%{opacity:1}50%{opacity:.4} }

/* ═══════════════════════════════════════════
   APP LAYOUT
═══════════════════════════════════════════ */
#app { display: flex; flex-direction: column; height: calc(100dvh - var(--header-h)); overflow: hidden }
#layout { display: flex; flex: 1 1 auto; min-height: 0; overflow: hidden }

/* ═══════════════════════════════════════════
   DESKTOP SIDEBAR
═══════════════════════════════════════════ */
#desktop-sidebar {
  display: none;
  width: 220px;
  flex-shrink: 0;
  background: #060606;
  border-right: 1px solid rgba(255,255,255,.06);
  flex-direction: column;
  overflow: hidden;
  z-index: 50;
}
@media (min-width: 1024px) {
  #desktop-sidebar { display: flex; }
}

/* Nav section */
.dsb-section-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgb(255, 255, 255);
  padding: 18px 18px 8px;
}
.dsb-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 10px; }
.dsb-nav-btn {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: none; background: none;
  color: rgba(255,255,255,.6);
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all .18s; text-align: left; width: 100%;
  position: relative;
}
.dsb-nav-btn svg { flex-shrink: 0; opacity: .7; transition: opacity .18s; }
.dsb-nav-btn:hover { background: rgba(255,255,255,.05); color: #fff; }
.dsb-nav-btn:hover svg { opacity: 1; }
.dsb-nav-btn.active {
  background: rgba(210, 208, 209, 0.15);
  color: #fff;
}
.dsb-nav-btn.active svg { opacity: 1; color: var(--accent); }
.dsb-nav-btn .dsb-badge {
  margin-left: auto;
  background: var(--accent);
  color: #fff;
  font-size: 10px; font-weight: 700;
  border-radius: 999px;
  padding: 1px 7px;
  line-height: 16px;
  min-width: 20px; text-align: center;
}

/* Divider */
.dsb-divider { height: 1px; background: rgba(255,255,255,.06); margin: 10px 0; }

/* Live Now section */
.dsb-live-list { display: flex; flex-direction: column; gap: 2px; padding: 0 10px; flex: 1; overflow-y: auto; }
.dsb-live-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px;
  cursor: pointer; transition: background .15s;
}
.dsb-live-item:hover { background: rgba(255,255,255,.05); }
.dsb-live-av {
  position: relative; flex-shrink: 0;
  width: 36px; height: 36px;
}
.dsb-live-av img {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--accent);
}
.dsb-live-dot {
  position: absolute; bottom: 0; right: 0;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--online);
  border: 2px solid #0d0d14;
}
.dsb-live-info { flex: 1; min-width: 0; }
.dsb-live-name { font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsb-live-status { font-size: 10px; color: var(--accent); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; display: flex; align-items: center; gap: 4px; }
.dsb-live-status::before { content:''; display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--online); animation: livePulse 1.5s ease-in-out infinite; }
@keyframes livePulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.dsb-live-viewers { font-size: 10px; color: rgba(255,255,255,.35); display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
.dsb-live-empty { padding: 14px 18px; font-size: 12px; color: rgba(255,255,255,.25); font-style: italic; }

/* VIP button at bottom */
.dsb-vip-wrap { padding: 14px 12px; flex-shrink: 0; }
.dsb-vip-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 12px;
  background: linear-gradient(135deg, #d10367, #d10367);
  border: none; border-radius: 12px;
  color: #fff; font-family: var(--font-head); font-size: 13px; font-weight: 700;
  cursor: pointer; letter-spacing: .5px;
  transition: opacity .2s, transform .15s;
  box-shadow: 0 4px 20px rgb(209, 3, 103);
}
.dsb-vip-btn:hover { opacity: .88; transform: translateY(-1px); }

/* ═══════════════════════════════════════════
   CAM AREA
═══════════════════════════════════════════ */
#cam-area { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: #000; }
#cam-main { display: flex; flex: 1 1 auto; min-height: 0; overflow: hidden }

/* ═══════════════════════════════════════════
   LIVE PANEL — hidden (moved to discover.html)
═══════════════════════════════════════════ */
#live-panel { display: none !important }
#live-panel-hd {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
#live-panel-hd .lp-title {
  font-family: var(--font-head); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 2px; color: var(--muted2); flex: 1;
}
#live-count-badge {
  background: var(--accent); color: #fff;
  border-radius: 20px; font-size: 10px; font-weight: 700;
  padding: 2px 8px; min-width: 20px; text-align: center;
}
#live-users-list {
  flex: 1 1 auto; overflow-y: auto; overflow-x: hidden;
  padding: 8px; display: grid; grid-template-columns: 1fr 1fr;
  gap: 6px; align-content: start;
}
#live-users-list .live-empty { grid-column: 1/-1 }
.live-empty { color: var(--muted); font-size: 12px; text-align: center; padding: 24px 10px; line-height: 1.6 }

/* Card style */
.live-user-item {
  flex-direction: column; align-items: stretch; gap: 0;
  padding: 0; border-radius: 10px; overflow: hidden;
  cursor: pointer; transition: transform .18s, box-shadow .18s, border-color .18s;
  border: 1.5px solid transparent; margin-bottom: 0;
  position: relative; background: var(--surface3);
}
.live-user-item:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 6px 24px rgba(232,25,122,.25) }
.live-user-item.watching { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(232,25,122,.3), var(--glow) }
.live-user-item.vip-locked { opacity: .5; cursor: not-allowed }
.live-user-item.vip-locked:hover { transform: none; border-color: transparent; box-shadow: none }

.lu-card-img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; background: var(--surface3) }
.lu-card-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,.9));
  padding: 20px 6px 6px;
}
.lu-card-name { font-size: 10px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2 }
.lu-card-meta { display: flex; align-items: center; gap: 3px; margin-top: 2px }
.lu-card-viewers { font-size: 9px; color: rgba(255,255,255,.65); display: flex; align-items: center; gap: 2px }

.lu-live-badge {
  position: absolute; top: 5px; left: 5px;
  background: #e8197a; color: #fff;
  font-size: 8px; font-weight: 800; letter-spacing: .5px;
  border-radius: 4px; padding: 2px 5px;
  display: flex; align-items: center; gap: 3px; line-height: 1.4;
}
.lu-live-badge .live-dot { width: 4px; height: 4px; border-radius: 50%; background: #fff; animation: livePulse 1.4s ease-in-out infinite; flex-shrink: 0 }
@keyframes livePulse { 0%,100%{opacity:1}50%{opacity:.25} }
@keyframes spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

.lu-free-badge {
  position: absolute; top: 5px; right: 5px;
  background: rgba(0,0,0,.5); backdrop-filter: blur(4px);
  color: var(--accent2); border: 1px solid rgba(255,77,166,.4);
  font-size: 7px; font-weight: 800; letter-spacing: .3px;
  border-radius: 4px; padding: 2px 5px; line-height: 1.4;
}
.lu-vip-badge-card {
  position: absolute; top: 5px; right: 5px;
  background: linear-gradient(135deg, #f59e0b, #f97316); color: #fff;
  font-size: 7px; font-weight: 800; border-radius: 4px; padding: 2px 5px; line-height: 1.4;
}
.lu-slot-ind { position: absolute; bottom: 5px; right: 5px; font-size: 8px; background: var(--accent); color: #fff; border-radius: 3px; padding: 1px 5px; font-weight: 700 }

/* Hide old list sub-elements on desktop */
.live-user-item .lu-info { display: none }
.live-user-item .lu-av-wrap { display: none }

/* lu-av (old list style fallback) */
.live-user-item .lu-av { display: none }
.lu-badge { display: none }
.lu-viewer-count { display: none }

/* broadcasting-locked state */
.vslot.broadcasting-self { border-color: #da0a72 !important; box-shadow: 0 0 0 2px rgb(209, 3, 103) !important; }
.vslot.broadcasting-self .vslot-name { color: #939393 !important; font-weight: 700 }
#live-users-list.broadcasting-locked .live-user-item { opacity: .3; cursor: not-allowed; pointer-events: none }
#live-users-list.broadcasting-locked::after {
  content: '🔴 Stop cam to watch others';
  display: block; font-size: 10px; font-weight: 600;
  color: var(--accent2); text-align: center;
  padding: 8px 6px 2px; opacity: .85; letter-spacing: .2px;
}

/* VIP cam badge */
.vip-cam-badge { display: inline-flex; align-items: center; gap: 2px; font-size: 9px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #f59e0b, #f97316); border-radius: 4px; padding: 1px 5px; letter-spacing: .4px; margin-left: 3px; line-height: 1.5; flex-shrink: 0 }

/* ═══════════════════════════════════════════
   VIEWER AREA
═══════════════════════════════════════════ */
#viewer-area {
  flex: 1 1 auto; display: flex; flex-direction: column;
  gap: 4px; padding: 4px; min-height: 0; overflow: hidden;
}
.vslot {
  flex: 1 1 0; background: #141414;
   overflow: hidden;
  position: relative; 
  display: flex; align-items: center; justify-content: center;
  min-height: 0; transition: border-color .2s;
}
.vslot.has-stream { border-color: rgba(232,25,122,.15) }
.vslot video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000;  }
.vslot-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; color: #f9f9f9; user-select: none; pointer-events: none; text-align: center; padding: 0; position: absolute; inset: 0; overflow: hidden }
.vslot-empty svg { display: none }
.vslot-empty span { font-size: 12px; font-weight: 500; line-height: 1.5; max-width: 160px }

/* Hero state inside vslot-1 when empty */
.vslot-hero { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; position: absolute; inset: 0; overflow: hidden; pointer-events: none }
.hero-img { width: 100%; height: 100%; object-fit: contain; object-position: center top; display: block; opacity: .92 }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.5) 45%, transparent 75%); pointer-events: none }
.hero-text { position: absolute; bottom: 0; left: 0; right: 0; padding: 28px 24px 32px; text-align: center }
.hero-text h2 {  font-size: clamp(18px,3vw,28px); font-weight: 800; letter-spacing: 1px; background: linear-gradient(135deg, #fff 0%, #fff 55%, #fff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 8px; line-height: 1.2 }
.hero-text p { font-size: clamp(11px,1.5vw,14px); color: rgba(255,255,255,.65); line-height: 1.6; max-width: 340px; margin: 0 auto 18px }
.hero-cta { display: inline-flex; align-items: center; gap: 7px; background: #d10367; color: #fff; border: none; border-radius: 8px; padding: 10px 22px; font-family: var(--font-head); font-size: 13px; font-weight: 700; letter-spacing: .5px; cursor: pointer; pointer-events: all; transition: all .2s; text-decoration: none }
.hero-cta:hover { opacity: .88; transform: translateY(-1px) }
.hero-cta-models { background: transparent; border: 1.5px solid rgba(255,255,255,.3); color: rgba(255,255,255,.85) }
.hero-cta-models:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.6); color: #fff }
.hero-cta:hover { background: var(--accent2); box-shadow: var(--glow) }
.hero-cta svg { flex-shrink: 0 }
.vslot-overlay { position: absolute; top: 10px; left: 10px; right: auto; bottom: auto; background: none; padding: 0; display: flex; align-items: center; gap: 6px; pointer-events: none }
.vslot-name { font-size: 12px; font-weight: 700; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.9); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: rgba(0,0,0,.52); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.12); border-radius: 20px; padding: 4px 10px; pointer-events: none }
.vslot-ctrls { display: flex; gap: 5px; pointer-events: all }
.vslot-btn { background: rgba(0,0,0,.52); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.15); border-radius: 50%; color: #fff; width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .18s; flex-shrink: 0 }
.vslot-btn:hover { background: rgba(232,25,122,.55); border-color: var(--accent); transform: scale(1.08) }
.vslot-btn.muted { background: rgba(239,68,68,.52); border-color: rgba(239,68,68,.7) }
.vslot-expand-btn { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,.6); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.12); border-radius: 6px; color: var(--muted2); padding: 4px 8px; font-size: 13px; cursor: pointer; opacity: 0; transition: opacity .2s, background .15s; z-index: 2; line-height: 1 }
.vslot:hover .vslot-expand-btn { opacity: 1 }
.vslot-expand-btn:hover { background: var(--accent); color: #fff }
.vslot-num { position: absolute; top: 8px; left: 10px; font-size: 9px; font-weight: 700; color: rgba(255,255,255,.25); letter-spacing: .5px; pointer-events: none }

/* Gift/tip overlay buttons */
/* ── ANIMATED RING GIFT / TIP BUTTONS ON CAM SLOT ── */
@keyframes vsSpinRing    { from{transform:rotate(0deg)}   to{transform:rotate(360deg)} }
@keyframes vsSpinRingRev { from{transform:rotate(0deg)}   to{transform:rotate(-360deg)} }
@keyframes vsTokenPulse  { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.08);opacity:.85} }
@keyframes vsCoinBounce  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
@keyframes vsGiftPulse   { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.1);opacity:.88} }
@keyframes vsGiftBounce  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }

.vslot-gift-btn, .vslot-tip-btn {
  position: absolute; top: 177px; cursor: pointer;
  display: none; flex-direction: column; align-items: center;
  gap: 3px; z-index: 6; text-decoration: none;
  transition: transform .15s; background: none; border: none;
}
.vslot-gift-btn { right: 10px; }
.vslot-tip-btn  { right: 10px; top: 255px; display:none;}
.vslot-gift-btn:hover, .vslot-tip-btn:hover { transform: scale(1.1); }
.vslot-gold-btn {
  position: absolute; bottom: 79px;  cursor: pointer;
  display: none; flex-direction: column; align-items: center;
  gap: 3px; z-index: 6; text-decoration: none;
  transition: transform .15s; background: none; border: none;
  right: 10px;
  top:416px;
}
.vslot-gold-btn:hover { transform: scale(1.1); }
.vs-ring-gold {
}
.vs-ring-gold.r2 {
}
.vs-ring-inner.gold-style {
}
@keyframes vsGoldPulse {
  0%,100% { box-shadow: 0 0 10px rgba(245,197,24,.3), inset 0 0 5px rgba(255,215,0,.1); }
  50%      { box-shadow: 0 0 22px rgba(245,197,24,.65), inset 0 0 10px rgba(255,215,0,.25); }
}

/* ring wrap */
.vs-ring-wrap {
  position: relative; width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
}
/* gift rings (pink) */
.vs-ring-g {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2.5px solid transparent;
  border-top-color: #ec0f8d; border-right-color: #ff6ec7;
  animation: vsSpinRing 2.2s linear infinite;
}
.vs-ring-g.r2 {
  inset: 5px;
  border-top-color: transparent; border-bottom-color: #ff00e8; border-left-color: #d208b8;
  animation: vsSpinRingRev 3s linear infinite; opacity: .6;
}
/* token rings (purple) */
.vs-ring-t {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2.5px solid transparent;
  border-top-color: #d80b93; border-right-color: #5108d2;
  animation: vsSpinRing 1.8s linear infinite;
}
.vs-ring-t.r2 {
  inset: 5px;
  border-top-color: transparent; border-bottom-color: #c040e8; border-left-color: #df9aee;
  animation: vsSpinRingRev 2.4s linear infinite; opacity: .6;
}
/* inner circle */
.vs-ring-inner {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(15,0,25,.92), rgba(30,0,50,.95));
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 1px;
}
.vs-ring-inner.gift-style {
  border: 1.5px solid rgba(236,15,141,.8);
  box-shadow: 0 0 12px rgba(236,15,141,.3), inset 0 0 6px rgba(236,15,141,.12);
  animation: vsGiftPulse 2.6s ease-in-out infinite;
}
.vs-ring-inner.token-style {
  border: 1.5px solid rgb(230 15 236);
  box-shadow: 0 0 12px rgba(196,15,236,.2), inset 0 0 6px rgba(236,15,141,.1);
  animation: vsTokenPulse 2.2s ease-in-out infinite;
}
.vs-ring-img {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
}
.vs-ring-img.gift-bounce { animation: vsGiftBounce 2s ease-in-out infinite; }
.vs-ring-img.coin-bounce { animation: vsCoinBounce 1.6s ease-in-out infinite; }
.vs-ring-img img { width:50px; height:50px; object-fit:contain; display:block; }
.vs-ring-label {
  font-size: 8px; font-weight: 800; color: #fff;
  letter-spacing: .06em; text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0,0,0,.8); line-height: 1;
}

/* Reconnect overlay */
.vslot-reconnect-overlay { display: none; position: absolute; inset: 0; z-index: 20; background: rgba(10,10,15,.92); flex-direction: column; align-items: center; justify-content: center; gap: 10px; backdrop-filter: blur(8px) }
.vslot-reconnect-overlay.show { display: flex }
.vslot-reconnect-overlay .rc-icon { font-size: 30px; line-height: 1 }
.vslot-reconnect-overlay .rc-text { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.6); text-align: center; line-height: 1.4; max-width: 130px }
.vslot-reconnect-overlay .rc-btn { background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm); padding: 7px 16px; font-family: var(--font-body); font-size: 12px; font-weight: 700; cursor: pointer; transition: background .2s; margin-top: 4px }
.vslot-reconnect-overlay .rc-btn:hover { background: var(--accent2) }
.vslot-reconnect-overlay .rc-spinner { width: 20px; height: 20px; border: 2px solid rgba(255,255,255,.15); border-top-color: var(--accent); border-radius: 50%; animation: rcSpin .7s linear infinite; display: none }
@keyframes rcSpin { to { transform: rotate(360deg) } }

/* Own cam preview */
#my-cam-wrap { display: none; position: absolute; bottom: 110px; left: 6px; width: 100px; height: 70px; border-radius: 8px; overflow: hidden; z-index: 10; background: #000; border: 1.5px solid #272526; }
#my-cam-preview { width: 100%; height: 100%; object-fit: cover; display: block }
.my-cam-label { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.6); color: var(--online); font-size: 9px; font-weight: 700; text-align: center; padding: 2px; letter-spacing: .5px }

/* Resume banner */
#resume-banner { display: none; position: fixed; bottom: 78px; left: 50%; transform: translateX(-50%); z-index: 300; background: rgba(17,17,24,.96); border: 1.5px solid var(--accent); border-radius: 12px; padding: 10px 18px; display: flex; align-items: center; gap: 10px; box-shadow: 0 4px 30px rgba(0,0,0,.8), var(--glow); backdrop-filter: blur(12px); white-space: nowrap; animation: bannerIn .3s ease }
#resume-banner.hidden { display: none !important }
@keyframes bannerIn { from{opacity:0;transform:translateX(-50%) translateY(14px)}to{opacity:1;transform:translateX(-50%) translateY(0)} }
#resume-banner span { font-size: 13px; font-weight: 600; color: var(--text) }
#resume-banner .rb-btn { background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm); padding: 6px 14px; font-family: var(--font-body); font-size: 12px; font-weight: 700; cursor: pointer; transition: background .2s }
#resume-banner .rb-btn:hover { background: var(--accent2) }
#resume-banner .rb-dismiss { background: none; border: none; color: var(--muted); font-size: 18px; cursor: pointer; padding: 0 4px; line-height: 1 }

/* Fullscreen overlay */
/* ── FULLSCREEN — Instagram Live style ── */
#cam-fullscreen {
  display: none; position: fixed; inset: 0; z-index: 500;
  background: #000;
}
#cam-fullscreen.open { display: block }

#cam-fs-inner {
  position: relative; width: 100%; height: 100%;
  background: #000; overflow: hidden;
}

#cam-fs-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background: #000; display: block;
}

#cam-fs-bar {
  position: absolute; top: 0; left: 0; right: 0;
  padding: env(safe-area-inset-top, 14px) 16px 40px;
  padding-top: max(env(safe-area-inset-top, 0px), 14px);
  background: linear-gradient(to bottom, rgba(0,0,0,.65) 0%, transparent 100%);
  display: flex; align-items: center; justify-content: space-between;
  z-index: 10;
}
#cam-fs-name {
  font-size: 16px; font-weight: 700; font-family: var(--font-head);
  color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.8);
  display: flex; align-items: center; gap: 8px;
}
#cam-fs-name::before {
  content: '';
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #ff3b30; box-shadow: 0 0 8px #ff3b30;
  flex-shrink: 0;
}
#cam-fs-close {
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255,255,255,.25);
  border-radius: 50%; color: #fff;
  width: 36px; height: 36px;
  font-size: 16px; font-weight: 700;
  cursor: pointer; transition: background .2s;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; line-height: 1; padding: 0;
}
#cam-fs-close:hover { background: rgba(232,25,122,.6); border-color: var(--accent); }

#cam-fs-tap-close {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 80px; z-index: 9;
  background: linear-gradient(to top, rgba(0,0,0,.5) 0%, transparent 100%);
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 16px);
}
#cam-fs-tap-close span {
  font-size: 12px; color: rgba(255,255,255,.5); font-weight: 600;
  letter-spacing: .5px; text-transform: uppercase;
}

/* ═══════════════════════════════════════════
   CAM BAR
═══════════════════════════════════════════ */
#cam-bar {
  height: var(--cam-bar-h);
  background: #060606;
  border-top: 1px solid var(--border);
  display: none; align-items: center; gap: 8px;
  padding: 0 12px; flex-shrink: 0;
}
#cam-bar.broadcasting { display: flex; }
#btn-start-cam {
  background: var(--accent); color: #fff; border: none;
  border-radius: var(--radius-sm); padding: 9px 16px;
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; gap: 6px;
  transition: all .2s; white-space: nowrap;
}
#btn-start-cam:hover { background: var(--accent2); box-shadow: var(--glow) }
#btn-start-cam:disabled { background: var(--surface3); color: var(--muted); cursor: not-allowed; box-shadow: none }
#btn-stop-cam {
  background: rgba(0, 0, 0, 0.87); border: 1px solid rgb(232, 25, 122);
  color: #fff; border-radius: var(--radius-sm); padding: 8px 14px;
  font-size: 12px; font-weight: 600; cursor: pointer;
  display: none; align-items: center; gap: 5px; white-space: nowrap;
  font-family: var(--font-body);
}
#btn-stop-cam:hover { background: rgba(239,68,68,.22) }
#btn-mute-mic {
  background: #000; border: 1px solid var(--border2); color: #eee;
  border-radius: var(--radius-sm); padding: 8px 12px;
  font-size: 12px; font-weight: 600; cursor: pointer;
  display: none; align-items: center; gap: 5px; white-space: nowrap;
  transition: all .2s; font-family: var(--font-body);
}
#btn-mute-mic:hover { background: rgba(239,68,68,.12); color: #ef4444; border-color: #ef4444 }
#btn-mute-mic.mic-muted { background: rgba(239,68,68,.18); color: #ef4444; border-color: #ef4444 }
#cam-status { font-size: 11px; color: var(--muted2); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* VIP-only toggle */
#vip-only-wrap { display: none; align-items: center; gap: 6px; flex-shrink: 0; margin-left: 2px }
#vip-only-wrap label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; white-space: nowrap }
#vip-only-wrap .vip-toggle-label { font-size: 11px; font-weight: 700; color: var(--muted2); letter-spacing: .3px }
#vip-only-chk { appearance: none; -webkit-appearance: none; width: 34px; height: 19px; border-radius: 10px; background: var(--surface3); border: 1.5px solid var(--border2); cursor: pointer; position: relative; transition: background .2s, border-color .2s; flex-shrink: 0; outline: none }
#vip-only-chk::after { content: ''; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--muted); transition: transform .2s, background .2s }
#vip-only-chk:checked { background: linear-gradient(135deg, #f59e0b, #f97316); border-color: #f59e0b }
#vip-only-chk:checked::after { transform: translateX(15px); background: #fff }

/* ═══════════════════════════════════════════
   CHAT PANEL
═══════════════════════════════════════════ */
#chat-panel {
  width: 340px; flex-shrink: 0;
  background: #0d0d0d;
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden;
}
#chat-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
  background: rgba(0, 0, 0, 0.5);
}
#chat-header .ch-title {
  font-family: var(--font-head); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 2px; color: var(--text);
  display: flex; align-items: center; gap: 7px;
}
.online-dot { width: 7px; height: 7px; border-radius: 50%; background: #d10367;  }
#chat-user-count { font-size: 11px; color: #fff; font-weight: 500 }

#chat-messages {
  flex: 1 1 auto; overflow-y: auto; padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
  scroll-behavior: smooth; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.chat-msg { display: flex; gap: 9px; align-items: flex-start; animation: msgIn .18s ease }
@keyframes msgIn { from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)} }
.chat-msg .av { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--surface3); border: 1.5px solid var(--border2); margin-top: 1px; cursor: pointer }
.chat-msg .body { min-width: 0; flex: 1 }
.chat-msg .uname { font-size: 11px; font-weight: 700; margin-bottom: 3px; display: flex; align-items: center; gap: 5px }
.chat-msg .uname .name-link { cursor: pointer; transition: color .15s; color: var(--accent2) }
.chat-msg .uname .name-link:hover { color: #fff; text-decoration: underline }
.chat-msg .uname .name-link.name-male {color: #08d3cc !important }
.chat-msg .uname .name-link.name-female { color: var(--female) !important }
.chat-msg .uname .name-link.name-male:hover { color: #8ac8ff !important }
.chat-msg .uname .name-link.name-female:hover { color: #ffb3d6 !important }
.chat-msg .ts { font-size: 10px; color: var(--muted); font-weight: 400 }
.chat-msg .text { font-size: 13px; line-height: 1.45; word-break: break-word; color: var(--text) }
.chat-msg .msg-age { font-size: 10px; color: var(--muted2); font-weight: 500; background: rgba(255,255,255,.06); border-radius: 3px; padding: 0 4px; margin-left: 3px }
.chat-msg.system .text { color: #fff; font-style: italic; font-size: 11px }
.chat-msg:hover .pm-btn { opacity: 1 }
.pm-btn { opacity: 0; background: rgba(232,25,122,.12); border: 1px solid rgba(232,25,122,.25); color: var(--accent2); border-radius: 4px; font-size: 9px; padding: 1px 6px; cursor: pointer; transition: opacity .15s, background .15s; white-space: nowrap; font-family: var(--font-body) }
.pm-btn:hover { background: rgba(232,25,122,.28) }

/* VIP badge in chat */
.vip-badge { display: inline-flex; align-items: center; font-size: 9px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #565603, #f0c20d); border-radius: 4px; padding: 1px 5px; letter-spacing: .5px; margin-left: 3px; vertical-align: middle; line-height: 1.5; flex-shrink: 0 }
.vip-badge::before { content: '👑'; margin-right: 2px; font-size: 8px }

/* Chat input */
#chat-input-area {
  border-top: 1px solid var(--border);
  padding: 10px;
  display: flex; gap: 8px;
  background: rgba(10,10,15,.7);
  flex-shrink: 0; align-items: flex-end;
}
#chat-input {
  flex: 1; background: var(--surface3);
  border: 1.5px solid var(--border2); border-radius: 10px;
  color: var(--text); padding: 9px 13px;
  font-family: var(--font-body); font-size: 13px;
  outline: none; resize: none; max-height: 90px; min-height: 38px;
  line-height: 1.4; transition: border-color .2s; -webkit-appearance: none;
}
#chat-input::placeholder { color: var(--muted) }
#chat-input:focus { border-color: var(--accent) }
#btn-send {
  background: var(--accent); color: #fff; border: none; border-radius: 10px;
  width: 38px; height: 38px; flex-shrink: 0; cursor: pointer;
  transition: all .15s; display: flex; align-items: center; justify-content: center;
}
#btn-send:hover { background: var(--accent2); box-shadow: var(--glow) }
#btn-send:active { transform: scale(.92) }

/* Ad banner */
#ad-banner { border-top: 1px solid var(--border); background: var(--surface2); padding: 6px 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; min-height: 58px; max-height: 68px; overflow: hidden }
#ad-banner .ad-inner { width: 100%; height: 58px; background: rgba(255,255,255,.02); border: 1px dashed rgba(255,255,255,.1); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--muted); cursor: pointer; transition: border-color .2s; text-align: center; padding: 4px }
#ad-banner .ad-inner:hover { border-color: rgba(232,25,122,.3); color: var(--muted2) }
#ad-banner img { max-width: 100%; max-height: 58px; object-fit: contain }

/* ═══════════════════════════════════════════
   MODALS
═══════════════════════════════════════════ */
.modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.88); z-index: 1000; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(8px); padding: 16px }
.modal-overlay.hidden { display: none }
.modal {
  background: #161616; border: 1px solid var(--border2);
  border-top: 2px solid var(--accent); border-radius: 16px;
  width: 100%; max-width: 420px; padding: 30px 26px;
  box-shadow: 0 30px 90px rgba(0,0,0,.9), var(--glow);
  position: relative; max-height: 90vh; overflow-y: auto;
}
.modal h2 { font-family: var(--font-head); font-size: 28px; letter-spacing: 2px; color: #fff; margin-bottom: 4px }
.modal .sub { color: var(--muted2); font-size: 13px; margin-bottom: 22px }
.modal-tabs { display: flex; margin-bottom: 22px; border-bottom: 1px solid var(--border); gap: 0 }
.modal-tab { flex: 1; background: none; border: none; color: var(--muted); font-family: var(--font-body); font-size: 14px; font-weight: 600; padding: 10px; cursor: pointer; border-bottom: 2px solid transparent; transition: all .2s; margin-bottom: -1px }
.modal-tab.active { color: var(--accent2); border-bottom-color: var(--accent) }
.form-field { margin-bottom: 14px }
.form-field label { display: block; font-size: 11px; color: var(--muted2); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .7px; font-weight: 600 }
.form-field input, .form-field select, .form-field textarea { width: 100%; background: var(--surface3); border: 1.5px solid var(--border2); border-radius: var(--radius-sm); color: var(--text); padding: 10px 12px; font-family: var(--font-body); font-size: 14px; outline: none; transition: border-color .2s; -webkit-appearance: none }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--accent) }
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--muted) }
.form-error { color: #ef4444; font-size: 12px; margin-top: -8px; margin-bottom: 12px; display: none }
.form-error.show { display: block }
.btn-primary { width: 100%; background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm); padding: 12px; font-family: var(--font-body); font-size: 14px; font-weight: 700; cursor: pointer; transition: all .2s; margin-top: 4px; letter-spacing: .3px }
.btn-primary:hover { background: var(--accent2); box-shadow: var(--glow) }
.btn-primary:disabled { background: var(--surface3); color: var(--muted); cursor: not-allowed; box-shadow: none }
.btn-danger { width: 100%; background: rgba(239,68,68,.12); color: #ef4444; border: 1px solid rgba(239,68,68,.25); border-radius: var(--radius-sm); padding: 10px; font-family: var(--font-body); font-size: 13px; font-weight: 700; cursor: pointer; transition: all .2s; margin-top: 6px }
.btn-danger:hover { background: rgba(239,68,68,.22) }
.modal-close { position: absolute; top: 14px; right: 16px; background: var(--surface3); border: 1px solid var(--border2); color: var(--muted2); font-size: 16px; cursor: pointer; line-height: 1; padding: 5px 8px; border-radius: 6px; transition: all .2s }
.modal-close:hover { background: rgba(239,68,68,.15); color: #ef4444; border-color: rgba(239,68,68,.3) }

/* Profile */
#profile-modal .profile-av-wrap { display: flex; align-items: center; gap: 16px; margin-bottom: 20px }
#profile-av-img { width: 66px; height: 66px; border-radius: 50%; object-fit: cover; border: 2px solid var(--accent); background: var(--surface3) }
#profile-av-upload { font-size: 12px; color: #e1e1e1; cursor: pointer; display: block; font-weight: 600 }
#profile-av-file { display: none }

/* View profile modal */
#view-profile-modal .vp-header { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border) }
#vp-avatar { width: 100px; height: 108px; border-radius: 50%; object-fit: cover; border: 2px solid var(--accent); background: var(--surface3); flex-shrink: 0 }
#vp-username { font-family: var(--font-head); font-size: 22px; letter-spacing: 1px; color: #fff; }
#vp-joined { font-size: 11px; color: var(--muted); margin-top: 2px }
#vp-bio { font-size: 13px; color: var(--muted2); line-height: 1.5; margin-bottom: 16px; min-height: 20px }
#vp-bio:empty::before { content: 'No bio.'; color: var(--muted) }
#btn-send-pm { width: 100%; background: var(--surface3); color: var(--text); border: 1px solid var(--border2); border-radius: var(--radius-sm); padding: 10px; font-family: var(--font-body); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .2s; display: flex; align-items: center; justify-content: center; gap: 7px }
#btn-send-pm:hover { background: var(--accent); border-color: var(--accent); color: #fff }

/* PM modal */
#pm-modal .pm-to { font-size: 12px; color: var(--muted2); margin-bottom: 12px }
#pm-modal .pm-to b { color: var(--accent2) }
#pm-textarea { width: 100%; background: var(--surface3); border: 1.5px solid var(--border2); border-radius: var(--radius-sm); color: var(--text); padding: 10px 12px; font-family: var(--font-body); font-size: 13px; outline: none; resize: vertical; min-height: 90px; line-height: 1.45; transition: border-color .2s }
#pm-textarea:focus { border-color: var(--accent) }
#pm-textarea::placeholder { color: var(--muted) }

/* PM inbox button */
#pm-inbox-btn { background: var(--surface3); border: 1px solid var(--border2); color: var(--muted2); border-radius: var(--radius-sm); padding: 5px 9px; font-size: 11px; font-weight: 600; cursor: pointer; position: relative; transition: all .2s; display: none; align-items: center; gap: 5px }
#pm-inbox-btn:hover { background: var(--surface2); color: var(--text) }
#pm-inbox-badge { background: #ef4444; color: #fff; border-radius: 50%; width: 16px; height: 16px; font-size: 9px; font-weight: 700; display: none; align-items: center; justify-content: center; position: absolute; top: -6px; right: -6px; border: 2px solid var(--surface) }
#pm-inbox-badge.show { display: flex }

/* Admin modal */
#admin-modal .modal { max-width: 580px }
#admin-modal h2 { color: #ef4444 }
.admin-tabs { display: flex; gap: 0; margin-bottom: 16px; border-bottom: 1px solid var(--border) }
.admin-tab { flex: 1; background: none; border: none; color: var(--muted); font-family: var(--font-body); font-size: 13px; font-weight: 600; padding: 9px; cursor: pointer; border-bottom: 2px solid transparent; transition: all .2s; margin-bottom: -1px }
.admin-tab.active { color: #ef4444; border-bottom-color: #ef4444 }
.admin-search { width: 100%; background: var(--surface3); border: 1.5px solid var(--border2); border-radius: var(--radius-sm); color: var(--text); padding: 9px 12px; font-family: var(--font-body); font-size: 13px; outline: none; margin-bottom: 12px; transition: border-color .2s }
.admin-search:focus { border-color: var(--accent) }
.admin-search::placeholder { color: var(--muted) }
.admin-user-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border) }
.admin-user-row:last-child { border-bottom: none }
.admin-user-row .aur-av { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--surface3); border: 1.5px solid var(--border2) }
.admin-user-row .aur-name { flex: 1; font-size: 13px; font-weight: 600; color: var(--text) }
.admin-user-row .aur-email { font-size: 11px; color: var(--muted) }
.admin-user-row .aur-badges { display: flex; gap: 4px; align-items: center }
.badge-banned { background: rgba(239,68,68,.15); color: #ef4444; border: 1px solid rgba(239,68,68,.3); border-radius: 3px; font-size: 10px; padding: 2px 6px; font-weight: 700 }
.badge-online { background: rgba(0,230,118,.1); color: var(--online); border: 1px solid rgba(0,230,118,.3); border-radius: 3px; font-size: 10px; padding: 2px 6px; font-weight: 700 }
.aur-actions { display: flex; gap: 5px }
.aur-btn { background: var(--surface3); border: 1px solid var(--border2); color: var(--muted2); border-radius: 3px; padding: 4px 9px; font-size: 11px; font-weight: 600; cursor: pointer; transition: all .15s; font-family: var(--font-body) }
.aur-btn:hover { background: var(--surface2); color: var(--text) }
.aur-btn.kick { color: #f59e0b }
.aur-btn.kick:hover { background: rgba(245,158,11,.15); border-color: rgba(245,158,11,.4) }
.aur-btn.ban { color: #ef4444 }
.aur-btn.ban:hover { background: rgba(239,68,68,.15); border-color: rgba(239,68,68,.4) }
.aur-btn.unban { color: var(--online) }
.aur-btn.unban:hover { background: rgba(0,230,118,.1); border-color: rgba(0,230,118,.4) }
.aur-btn.cam-block { color: #f97316 }
.aur-btn.cam-block:hover { background: rgba(249,115,22,.15); border-color: rgba(249,115,22,.4) }
.aur-btn.cam-unblock { color: #a78bfa }
.aur-btn.cam-unblock:hover { background: rgba(167,139,250,.15); border-color: rgba(167,139,250,.4) }
.badge-cam-blocked { background: rgba(249,115,22,.15); color: #f97316; border: 1px solid rgba(249,115,22,.3); border-radius: 3px; font-size: 10px; padding: 2px 6px; font-weight: 700 }
.admin-msg-row { display: flex; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border); align-items: flex-start; font-size: 12px }
.admin-msg-row:last-child { border-bottom: none }
.admin-msg-row .amr-user { font-weight: 700; color: var(--accent2); min-width: 80px; flex-shrink: 0 }
.admin-msg-row .amr-text { color: var(--muted2); flex: 1; word-break: break-word }
.admin-msg-row .amr-ts { color: var(--muted); white-space: nowrap; font-size: 10px }
.admin-empty { color: var(--muted); font-size: 13px; text-align: center; padding: 20px 0 }
#admin-users-list, #admin-msgs-list { max-height: 360px; overflow-y: auto }

/* Gender picker */
.gender-picker { display: flex; gap: 10px; margin-bottom: 14px }
.gender-btn { flex: 1; border: 2px solid rgb(0, 0, 1); background: #323232; border-radius: var(--radius); padding: 12px 8px; cursor: pointer; text-align: center; transition: all .2s; font-family: var(--font-body) }
.gender-btn:hover { border-color: var(--border2); background: var(--surface2) }
.gender-btn.selected-male { border-color: var(--male); background: rgba(77,166,255,.1) }
.gender-btn.selected-female { border-color: var(--female); background: rgba(255,77,166,.1) }
.gender-btn .gb-icon { font-size: 26px; display: block; margin-bottom: 4px; color: #fff;}
.gender-btn .gb-label { font-size: 13px; font-weight: 600; display: block; color: #fff;}
.gender-btn.selected-male .gb-label { color: var(--male) }
.gender-btn.selected-female .gb-label { color: var(--female) }

/* ═══════════════════════════════════════════
   BOTTOM NAV
═══════════════════════════════════════════ */
#bottom-nav {
  display: none; position: fixed; bottom: 0; left: 0; right: 0;
  height: var(--nav-h);
  background: rgb(8, 8, 9);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
  z-index: 300; padding: 0 4px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
#bottom-nav .nav-items { display: flex; height: 100%; align-items: center; justify-content: space-around }
.nav-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; background: none; border: none; color: #fff;
  cursor: pointer; padding: 6px 14px; border-radius: var(--radius); transition: all .2s;
  position: relative; min-width: 52px;
}
.nav-btn.active { color: var(--accent2) }
.nav-btn svg { transition: transform .2s }
.nav-btn.active svg { transform: scale(1.1) }
.nav-btn span { font-size: 10px; font-weight: 600; letter-spacing: .3px }
.nav-badge { position: absolute; top: 4px; right: 8px; background: #ef4444; color: #fff; border-radius: 50%; width: 16px; height: 16px; font-size: 9px; font-weight: 700; display: none; align-items: center; justify-content: center; border: 2px solid var(--surface) }
.nav-badge.show { display: flex }

/* Mobile chat toggle FAB */
#mobile-chat-toggle { display: none; position: fixed; bottom: 16px; right: 16px; z-index: 200; background: var(--accent); color: #fff; border: none; border-radius: 50%; width: 52px; height: 52px; font-size: 20px; cursor: pointer; align-items: center; justify-content: center; box-shadow: 0 4px 24px rgba(232,25,122,.5); transition: transform .2s }
#mobile-chat-toggle:hover { transform: scale(1.08) }
.badge { position: absolute; top: -4px; right: -4px; background: #ef4444; color: #fff; border-radius: 50%; width: 18px; height: 18px; font-size: 10px; font-weight: 700; display: none; align-items: center; justify-content: center; border: 2px solid var(--bg) }
.badge.show { display: flex }


/* ═══════════════════════════════════════════
   PM INBOX — WhatsApp-style
═══════════════════════════════════════════ */
#pm-inbox-modal .modal {
  max-width: 520px; padding: 0; overflow: hidden;
  display: flex; flex-direction: column;
  height: min(680px, 90vh); border-top: none; border-radius: 16px;
}
#pm-inbox-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  flex-shrink: 0;
}
#pm-inbox-header h2 { font-family: var(--font-head); font-size: 22px; letter-spacing: 2px; color: #fff; flex: 1; margin: 0 }
#pm-inbox-close-btn { background: rgba(255,255,255,.2); border: none; color: #fff; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; transition: background .2s; flex-shrink: 0 }
#pm-inbox-close-btn:hover { background: rgba(255,255,255,.35) }
#pm-disabled-notice { padding: 14px 18px; background: rgba(239,68,68,.07); border-bottom: 1px solid rgba(239,68,68,.18); display: flex; align-items: center; gap: 8px; font-size: 12px; color: #ef4444; flex-shrink: 0 }
#pm-disabled-notice svg { flex-shrink: 0; opacity: .7 }
#pm-disabled-notice.hidden { display: none }
#pm-toggle-row { padding: 10px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; flex-shrink: 0; background: var(--surface) }
#pm-toggle-row .pt-label { font-size: 12px; color: var(--muted2); font-weight: 600; flex: 1 }
#pm-toggle-row .pt-sub { font-size: 10px; color: var(--muted); margin-top: 1px }
#pm-enabled-chk { appearance: none; -webkit-appearance: none; width: 38px; height: 22px; border-radius: 11px; background: var(--surface3); border: 1.5px solid var(--border2); cursor: pointer; position: relative; transition: background .2s, border-color .2s; flex-shrink: 0; outline: none }
#pm-enabled-chk::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: transform .2s, background .2s }
#pm-enabled-chk:checked { background: linear-gradient(135deg, var(--accent), var(--accent2)); border-color: var(--accent) }
#pm-enabled-chk:checked::after { transform: translateX(16px); background: #fff }
#pm-panes { display: flex; flex: 1 1 auto; min-height: 0; overflow: hidden }
#pm-threads-pane { width: 180px; flex-shrink: 0; border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; background: var(--surface) }
#pm-threads-pane-hd { padding: 10px 12px 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted2); border-bottom: 1px solid var(--border); flex-shrink: 0 }
#pm-threads-scroll { flex: 1 1 auto; overflow-y: auto; padding: 4px }
.pm-thread-item { display: flex; align-items: center; gap: 8px; padding: 8px 8px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; margin-bottom: 2px; position: relative; transition: background .15s }
.pm-thread-item:hover { background: var(--surface2) }
.pm-thread-item.active { background: rgba(232,25,122,.1); border-color: rgba(232,25,122,.3) }
.pm-thread-item .th-av { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--surface3); border: 2px solid var(--border2) }
.pm-thread-item.active .th-av { border-color: var(--accent) }
.pm-thread-item .th-info { flex: 1; min-width: 0 }
.pm-thread-item .th-name { font-size: 12px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.pm-thread-item.unread .th-name { color: var(--accent2) }
.pm-thread-item .th-preview { font-size: 10px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px }
.pm-thread-item .th-unread { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 9px; font-weight: 700; display: none; align-items: center; justify-content: center; flex-shrink: 0 }
.pm-thread-item.unread .th-unread { display: flex }
.pm-thread-item .th-del { position: absolute; top: 4px; right: 4px; width: 16px; height: 16px; border-radius: 4px; background: rgba(239,68,68,.15); border: none; color: #ef4444; font-size: 10px; cursor: pointer; display: none; align-items: center; justify-content: center; transition: background .15s; line-height: 1 }
.pm-thread-item:hover .th-del { display: flex }
.pm-thread-item .th-del:hover { background: rgba(239,68,68,.35) }
.pm-no-threads { padding: 32px 12px; text-align: center; font-size: 12px; color: var(--muted); line-height: 1.6 }
.pm-no-threads svg { opacity: .15; margin-bottom: 8px; display: block; margin-left: auto; margin-right: auto }
#pm-conv-pane { flex: 1 1 auto; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); min-width: 0 }
#pm-conv-header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--surface); border-bottom: 1px solid var(--border); flex-shrink: 0 }
#pm-conv-back { background: none; border: none; color: var(--muted2); font-size: 22px; cursor: pointer; padding: 0; line-height: 1; display: none }
#pm-conv-av { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--surface3); border: 2px solid var(--border2); flex-shrink: 0 }
#pm-conv-name { font-size: 14px; font-weight: 700; color: var(--text); flex: 1 }
#pm-conv-del { background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.2); color: #ef4444; border-radius: 6px; padding: 5px 10px; font-size: 11px; font-weight: 600; cursor: pointer; transition: background .15s; white-space: nowrap; font-family: var(--font-body) }
#pm-conv-del:hover { background: rgba(239,68,68,.22) }
#pm-conv-empty { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); text-align: center; padding: 24px }
#pm-conv-empty svg { opacity: .12; margin-bottom: 12px }
#pm-conv-empty p { font-size: 13px; line-height: 1.6 }
#pm-conv-msgs { flex: 1 1 auto; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; scroll-behavior: smooth }
.pm-date-sep { text-align: center; font-size: 10px; color: var(--muted); margin: 8px 0; display: flex; align-items: center; gap: 8px }
.pm-date-sep::before, .pm-date-sep::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.06) }
.pm-msg-row { display: flex; flex-direction: column; margin-bottom: 2px; animation: msgIn .18s ease }
.pm-msg-row.mine { align-items: flex-end }
.pm-msg-row.theirs { align-items: flex-start }
.pm-msg-bubble { max-width: 80%; padding: 8px 12px; font-size: 13px; line-height: 1.5; word-break: break-word; position: relative }
.pm-msg-row.theirs .pm-msg-bubble { background: var(--surface3); color: var(--text); border-radius: 18px 18px 18px 4px }
.pm-msg-row.mine .pm-msg-bubble { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; border-radius: 18px 18px 4px 18px; box-shadow: 0 2px 10px rgba(232,25,122,.3) }
.pm-msg-meta { font-size: 10px; color: var(--muted); margin-top: 2px; padding: 0 4px; display: flex; align-items: center; gap: 4px }
.pm-msg-row.mine .pm-msg-meta { flex-direction: row-reverse }
#pm-reply-area { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; background: var(--surface); border-top: 1px solid var(--border); flex-shrink: 0 }
#pm-reply-area.hidden { display: none !important }
#pm-conv-textarea { flex: 1; background: var(--surface3); border: 1.5px solid var(--border2); border-radius: 20px; color: var(--text); padding: 8px 14px; font-family: var(--font-body); font-size: 13px; outline: none; resize: none; max-height: 90px; min-height: 38px; line-height: 1.4; transition: border-color .2s; -webkit-appearance: none }
#pm-conv-textarea:focus { border-color: var(--accent) }
#pm-conv-textarea::placeholder { color: var(--muted) }
#pm-reply-send { background: var(--accent); color: #fff; border: none; border-radius: 50%; width: 38px; height: 38px; flex-shrink: 0; cursor: pointer; transition: all .15s; display: flex; align-items: center; justify-content: center }
#pm-reply-send:hover { background: var(--accent2); transform: scale(1.05) }
#pm-reply-send:active { transform: scale(.92) }
#pm-reply-send:disabled { background: var(--surface3); cursor: not-allowed; transform: none }
#pm-blocked-notice { padding: 10px 14px; background: rgba(239,68,68,.06); border-top: 1px solid rgba(239,68,68,.14); font-size: 11px; color: #ef4444; text-align: center; flex-shrink: 0; display: none }

/* PM (old modal style - kept for compatibility) */
#pm-inbox-modal .modal { max-width: 480px }
.pm-thread { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .15s; border-radius: var(--radius-sm) }
.pm-thread:hover { background: var(--surface2); padding-left: 6px }
.pm-thread:last-child { border-bottom: none }
.pm-thread .pt-av { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--surface3); border: 1.5px solid var(--border2); flex-shrink: 0 }
.pm-thread .pt-body { flex: 1; min-width: 0 }
.pm-thread .pt-name { font-size: 13px; font-weight: 700; color: var(--accent2); margin-bottom: 2px }
.pm-thread .pt-preview { font-size: 12px; color: var(--muted2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.pm-thread.unread .pt-name { color: #fff }
.pm-thread.unread .pt-preview { color: var(--text) }
.pm-unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; align-self: center; display: none }
.pm-thread.unread .pm-unread-dot { display: block }
#pm-conv-area { display: none; flex-direction: column; gap: 8px; margin-top: 12px; max-height: 300px; overflow-y: auto }
#pm-conv-area.open { display: flex }
.pm-msg-ts { font-size: 10px; color: var(--muted); margin-bottom: 4px }
.pm-msg-row.mine .pm-msg-ts { text-align: right }

/* ═══════════════════════════════════════════
   MOBILE RESPONSIVE
═══════════════════════════════════════════ */
@media(max-width:700px) {
  :root { --header-h: 50px; --cam-bar-h: 42px }
  #user-count { display: none }
  #logo { font-size: 20px }
  #app { height: calc(100dvh - var(--header-h) - var(--nav-h)); overflow: hidden }
  #layout { flex-direction: column; height: 100% }
  #cam-area { flex: 1 1 auto; height: auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden }
  #cam-main { flex: 1 1 auto; min-height: 0; flex-direction: column-reverse; overflow: hidden }
  #cam-bar { flex-shrink: 0 }
  #bottom-nav { display: block }
  #mobile-chat-toggle { display: none !important }

  /* Live panel hidden on mobile too */

  /* Viewer slots */
  #viewer-area { flex: 1 1 auto; flex-direction: column; overflow: hidden; gap: 4px; padding: 4px; min-height: 0 }
  #vslot-1 { flex: 1 1 auto; width: 100%; min-height: 0; border-radius: 10px; }
  #vslot-2 { flex: 0 0 90px; height: 90px; width: 100%; border-radius: 10px; cursor: pointer }
  #vslot-2 .vslot-empty svg { width: 20px; height: 20px }
  #vslot-2 .vslot-empty span { font-size: 9px }
  .vslot video { object-fit: contain; width: 100dvw !important;height: 100dvh !important;flex-shrink: 0;}
  .vslot-expand-btn { opacity: 1 }

  /* Chat panel: slide up from bottom */
  #chat-panel { width: 100%; border-left: none; position: fixed; bottom: var(--nav-h); left: 0; right: 0; height: 47vh; transform: translateY(100%); transition: transform .3s cubic-bezier(.4,0,.2,1); z-index: 150; border-radius: 16px 16px 0 0 }
  #chat-panel.mobile-open { transform: translateY(0) }
  #cam-bar { height: var(--cam-bar-h); padding: 0 8px; gap: 6px }
  #btn-start-cam { font-size: 11px; padding: 9px 10px; gap: 5px }
  #btn-stop-cam { font-size: 11px; padding: 7px 10px }
  #chat-input-area { padding: 8px }

  /* PM inbox mobile */
  #pm-inbox-modal .modal { height: 100dvh; border-radius: 0; max-width: 100% }
  #pm-panes { flex-direction: column }
  #pm-threads-pane { width: 100%; height: 100%; border-right: none; border-bottom: none }
  #pm-threads-pane.hidden-mobile { display: none }
  #pm-conv-pane { height: 100% }
  #pm-conv-pane.hidden-mobile { display: none }
  #pm-conv-back { display: block }
  #pm-inbox-modal .modal-overlay { padding: 0 }
}

@media(max-width:400px) {
  #logo { font-size: 18px }
  #btn-auth { font-size: 11px; padding: 6px 10px }
}

.hidden { display: none !important }

/* ═══════════════════════════════════════════
   ANIMATED RING ICONS — PROFILE BIO LINKS
═══════════════════════════════════════════ */
@keyframes spinRing    { from{transform:rotate(0deg)}   to{transform:rotate(360deg)} }
@keyframes spinRingRev { from{transform:rotate(0deg)}   to{transform:rotate(-360deg)} }
@keyframes tokenPulse  { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.08);opacity:.85} }
@keyframes coinBounce  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
@keyframes giftPulse   { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.1);opacity:.88} }
@keyframes giftBounce  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }

/* Wrapper for the two link fields side-by-side */
.bio-link-preview-row {
  display: flex;
  gap: 18px;
  margin-bottom: 6px;
  align-items: flex-start;
}
.bio-link-field-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Shared ring icon preview */
.bio-link-icon-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* --- Token / Gift ring (same style as live.html) --- */
.blp-ring-wrap {
  position: relative;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blp-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2.5px solid transparent;
  border-top-color: #d80b93;
  border-right-color: #5108d2;
  animation: spinRing 1.8s linear infinite;
}
.blp-ring.ring2 {
  inset: 5px;
  border-top-color: transparent;
  border-bottom-color: #c040e8;
  border-left-color: #df9aee;
  animation: spinRingRev 2.4s linear infinite;
  opacity: 0.6;
}
/* Gift variant */
.blp-ring.gft   { border-top-color: #ec0f8d; border-right-color: #ff6ec7; animation-duration: 2.2s; }
.blp-ring.gft.ring2 { border-bottom-color: #ff00e8; border-left-color: #d208b8; animation-duration: 3s; }

.blp-inner {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(15,0,25,.92), rgba(30,0,50,.95));
  border: 1.5px solid rgb(230 15 236);
  box-shadow: 0 0 12px rgba(196,15,236,.18), inset 0 0 6px rgba(236,15,141,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1px;
  animation: tokenPulse 2.2s ease-in-out infinite;
}
.blp-inner.gft-inner-style {
  border-color: rgba(236,15,141,.8);
  box-shadow: 0 0 12px rgba(236,15,141,.22), inset 0 0 6px rgba(236,15,141,.12);
  animation: giftPulse 2.6s ease-in-out infinite;
}
.blp-img {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  animation: coinBounce 1.6s ease-in-out infinite;
}
.blp-img.gft-bounce { animation: giftBounce 2s ease-in-out infinite; }
.blp-img img { width:100%; height:100%; object-fit:contain; display:block; }
.blp-sublabel {
  font-size: 9px; font-weight: 800; color: rgba(255,255,255,.55);
  letter-spacing: .08em; text-transform: uppercase; line-height: 1;
  text-align: center;
}

/* ═══════════════════════════════════════════
   VIP FLOAT BUTTON
═══════════════════════════════════════════ */
#vip-float-btn {
  position: fixed; right: 18px; bottom: 164px; z-index: 9998;
  width: 72px; height: 72px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; text-decoration: none; transition: opacity .4s, transform .3s;
}
#vip-float-btn.hidden { opacity: 0; pointer-events: none; transform: scale(.5) }
#vip-float-btn .vip-circle {
  position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(135deg, #201f20, #040404);
  box-shadow: 0 0 20px rgba(232,25,122,.7), 0 4px 16px rgba(0,0,0,.5);
  animation: vipSpinCircle 3s linear infinite, vipPulse 2s ease-in-out infinite;
}
#vip-float-btn .vip-circle::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2.5px dashed rgba(255,255,255,.4); animation: vipSpinCircle 6s linear infinite reverse }
#vip-float-btn .vip-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px }
#vip-float-btn .vip-icon { font-size: 24px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)) }
#vip-float-btn .vip-label { font-family: var(--font-head); font-size: 14px; letter-spacing: 2px; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.7); line-height: 1 }
#vip-float-btn:hover .vip-circle { animation: vipSpinCircle .8s linear infinite, vipPulse 1s ease-in-out infinite; box-shadow: 0 0 36px rgba(255,77,166,1), 0 6px 24px rgba(0,0,0,.6) }
@keyframes vipSpinCircle { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes vipPulse { 0%,100%{box-shadow:0 0 20px rgba(232,25,122,.7),0 4px 16px rgba(0,0,0,.5)} 50%{box-shadow:0 0 36px rgba(255,77,166,1),0 4px 20px rgba(0,0,0,.6)} }









/* ═══════════════════════════════════════════
   PASSWORD EYE TOGGLE
═══════════════════════════════════════════ */
.pw-wrap {
  position: relative; display: flex; align-items: center;
}
.pw-wrap input {
  width: 100%; padding-right: 42px !important;
}
.pw-eye {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: 40px; display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--muted); transition: color .2s;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 0; flex-shrink: 0;
}
.pw-eye:hover { color: var(--accent2) }
.pw-eye:focus { outline: none }

/* ═══════════════════════════════════════════
   DISCOVER PANEL (inline overlay)
═══════════════════════════════════════════ */
#discover-panel {
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0;
  bottom: 0;
  background: #161515;
  z-index: 120;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 1024px) {
  #discover-panel { left: 220px; }
}
#discover-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 20px 100px;
}
#discover-hero {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 20px;
}
#discover-hero-text h2 {
   font-size: 26px; font-weight: 800;
  background: linear-gradient(135deg, #fff 0%, #fff 60%, #fff 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: 4px;
}
#discover-hero-text p { font-size: 13px; color: var(--muted2) }
#discover-filters { display: flex; gap: 6px; flex-wrap: wrap }
.dc-filter {
  background: var(--surface2); border: 1px solid var(--border2);
  color: var(--muted2); border-radius: 20px;
  padding: 6px 14px; font-family: var(--font-body); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all .2s; white-space: nowrap;
}
.dc-filter:hover { border-color: var(--accent); color: var(--text) }
.dc-filter.active { background: rgba(0, 0, 0, 0.15);  color: #adadad; }

#discover-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
}
.dc-card {
  background: var(--surface2); border-radius: 12px; overflow: hidden;
  border: 1.5px solid var(--border);
  cursor: pointer; transition: transform .18s, border-color .18s, box-shadow .18s;
  position: relative;
}
.dc-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 10px 32px rgba(232,25,122,.2);
}
.dc-card img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block;
  background: var(--surface3);
}
.dc-live-badge {
  position: absolute; top: 7px; left: 7px;
  background: #ff008f; color: #fff;
  font-size: 8px; font-weight: 800; letter-spacing: .5px;
  border-radius: 4px; padding: 2px 6px;
  display: flex; align-items: center; gap: 3px;
}
.dc-live-badge .ld { width: 4px; height: 4px; border-radius: 50%; background: #fff; animation: livePulse 1.4s infinite }
.dc-type-badge {
  position: absolute; top: 7px; right: 7px;
  border-radius: 4px; padding: 2px 6px;
  font-size: 8px; font-weight: 800;
}
.dc-type-badge.free { background: rgba(0,0,0,.55); backdrop-filter: blur(4px); color: #fff; border: 1px solid rgba(255,77,166,.4) }
.dc-type-badge.vip  { background: linear-gradient(135deg,#f59e0b,#f97316); color: #fff }
.dc-viewers {
  position: absolute; bottom: 46px; right: 7px;
  background: rgba(0,0,0,.6); backdrop-filter: blur(4px);
  color: rgba(255,255,255,.85); border-radius: 4px;
  padding: 2px 7px; font-size: 10px; font-weight: 600;
}
.dc-info { padding: 8px 10px 10px; background: var(--surface3) }
.dc-name {
  font-family: var(--font-head); font-size: 13px; font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 4px;
}
.dc-meta { display: flex; align-items: center; justify-content: space-between }
.dc-online { display: flex; align-items: center; gap: 3px; font-size: 10px; color: #fff; font-weight: 600 }
.dc-online .od { width: 5px; height: 5px; border-radius: 50%; background: #ff008f; box-shadow: 0 0 5px var(--online) }
.dc-watch { background: var(--accent); color: #fff; border: none; border-radius: 5px; padding: 4px 10px; font-size: 10px; font-weight: 700; cursor: pointer; font-family: var(--font-body); pointer-events: none }
.dc-card:hover .dc-watch { background: var(--accent2) }

#discover-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; padding: 60px 20px; color: var(--muted); text-align: center;
}
#discover-empty svg { opacity: .1 }
#discover-empty p { font-size: 14px; color: var(--muted2) }

@media(max-width:700px) {
  #discover-panel { top: var(--header-h) }
  #discover-inner { padding: 16px 12px 90px }
  #discover-hero-text h2 { font-size: 20px }
  #discover-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px }
}




/* ── News strip ── */
#news-strip {
  position: absolute;
  top: 12px; left: 0; right: 0;
  z-index: 5;
  padding: 0 16px;
  pointer-events: none;          /* so it doesn't block cam-slot clicks */
}
#news-strip-inner {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  pointer-events: all;
}
.news-thumb {
  display: flex; align-items: center; gap: 10px;
  background: rgba(8,8,16,.82); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.1); border-radius: 10px;
  padding: 8px 12px; cursor: pointer; text-decoration: none;
  transition: border-color .2s, transform .18s;
  max-width: 220px; flex-shrink: 1;
  animation: newsIn .4s ease both;
}
.news-thumb:hover { border-color: var(--accent); transform: translateY(-2px) }
.news-thumb-img {
  width: 44px; height: 44px; border-radius: 7px;
  object-fit: cover; flex-shrink: 0; background: var(--surface3);
}
.news-thumb-img-placeholder {
  width: 44px; height: 44px; border-radius: 7px;
  background: var(--surface3); display: flex; align-items: center;
  justify-content: center; font-size: 18px; flex-shrink: 0;
}
.news-thumb-body { min-width: 0 }
.news-thumb-label {
  font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--accent); margin-bottom: 2px;
}
.news-thumb-title {
  font-family: var(--font-head); font-size: 12px; font-weight: 700; color: var(--text);
  line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 140px;
}
.news-thumb-excerpt {
  font-size: 10px; color: rgba(255,255,255,.45); line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px;
}
@keyframes newsIn {
  from { opacity: 0; transform: translateY(-8px) }
  to   { opacity: 1; transform: translateY(0) }
}