/* ========================================================
   LOVE QUIZ - ROMANTIC MOBILE APP STYLESHEET
   Design: Luxury Romantic Glassmorphism, Deep Velvet & Rose Gold
   ======================================================== */

@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;1,600&display=swap');

:root,
[data-theme="theme-midnight-rose"] {
  --bg-deep: #0a0106;
  --bg-gradient: radial-gradient(circle at 50% 10%, #3a001a 0%, #15000a 50%, #050003 100%);
  --rose-primary: #ff2a7a;
  --rose-light: #ff659e;
  --rose-glow: rgba(255, 42, 122, 0.45);
  --gold-accent: #ffd166;
  --gold-glow: rgba(255, 209, 102, 0.35);
  --purple-accent: #a238ff;
  
  --surface-card: rgba(255, 255, 255, 0.07);
  --surface-card-hover: rgba(255, 255, 255, 0.12);
  --surface-border: rgba(255, 105, 180, 0.22);
  --surface-border-active: rgba(255, 60, 140, 0.7);

  --text-main: #ffffff;
  --text-muted: #e6b8c9;
  --text-dim: #9e7587;

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-full: 9999px;

  --shadow-glow: 0 8px 32px rgba(255, 42, 122, 0.25);
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.5);

  --safe-bottom: env(safe-area-inset-bottom, 16px);
  --safe-top: env(safe-area-inset-top, 16px);

  --nav-bg: linear-gradient(180deg, rgba(28, 3, 18, 0.94) 0%, rgba(10, 1, 7, 0.98) 100%);
  --nav-border: rgba(255, 42, 122, 0.32);
  --nav-active-bg: linear-gradient(135deg, rgba(255, 42, 122, 0.24) 0%, rgba(162, 56, 255, 0.18) 100%);
}

/* THEME 2: ROYAL PURPLE VELVET */
[data-theme="theme-royal-purple"] {
  --bg-deep: #080212;
  --bg-gradient: radial-gradient(circle at 50% 10%, #32074e 0%, #150226 50%, #05010d 100%);
  --rose-primary: #a855f7;
  --rose-light: #c084fc;
  --rose-glow: rgba(168, 85, 247, 0.5);
  --gold-accent: #f472b6;
  --gold-glow: rgba(244, 114, 182, 0.4);
  --purple-accent: #7c3aed;
  
  --surface-card: rgba(255, 255, 255, 0.07);
  --surface-card-hover: rgba(255, 255, 255, 0.12);
  --surface-border: rgba(168, 85, 247, 0.28);
  --surface-border-active: rgba(192, 132, 252, 0.8);

  --text-main: #ffffff;
  --text-muted: #e2d1f7;
  --text-dim: #9b84b8;

  --shadow-glow: 0 8px 32px rgba(168, 85, 247, 0.3);
  --nav-bg: linear-gradient(180deg, rgba(21, 2, 38, 0.95) 0%, rgba(8, 2, 18, 0.98) 100%);
  --nav-border: rgba(168, 85, 247, 0.35);
  --nav-active-bg: linear-gradient(135deg, rgba(168, 85, 247, 0.26) 0%, rgba(244, 114, 182, 0.2) 100%);
}

/* THEME 3: OCEAN SAPPHIRE */
[data-theme="theme-ocean-sapphire"] {
  --bg-deep: #010915;
  --bg-gradient: radial-gradient(circle at 50% 10%, #062b54 0%, #03142e 50%, #010612 100%);
  --rose-primary: #0ea5e9;
  --rose-light: #38bdf8;
  --rose-glow: rgba(14, 165, 233, 0.5);
  --gold-accent: #34d399;
  --gold-glow: rgba(52, 211, 153, 0.4);
  --purple-accent: #6366f1;
  
  --surface-card: rgba(255, 255, 255, 0.07);
  --surface-card-hover: rgba(255, 255, 255, 0.12);
  --surface-border: rgba(14, 165, 233, 0.28);
  --surface-border-active: rgba(56, 189, 248, 0.8);

  --text-main: #ffffff;
  --text-muted: #c8e1f5;
  --text-dim: #7da5c9;

  --shadow-glow: 0 8px 32px rgba(14, 165, 233, 0.3);
  --nav-bg: linear-gradient(180deg, rgba(3, 20, 46, 0.95) 0%, rgba(1, 9, 21, 0.98) 100%);
  --nav-border: rgba(14, 165, 233, 0.35);
  --nav-active-bg: linear-gradient(135deg, rgba(14, 165, 233, 0.26) 0%, rgba(99, 102, 241, 0.2) 100%);
}

/* THEME 4: EMERALD GARDEN */
[data-theme="theme-emerald-garden"] {
  --bg-deep: #010d08;
  --bg-gradient: radial-gradient(circle at 50% 10%, #063820 0%, #021a0e 50%, #010804 100%);
  --rose-primary: #10b981;
  --rose-light: #34d399;
  --rose-glow: rgba(16, 185, 129, 0.5);
  --gold-accent: #fbbf24;
  --gold-glow: rgba(251, 191, 36, 0.4);
  --purple-accent: #059669;
  
  --surface-card: rgba(255, 255, 255, 0.07);
  --surface-card-hover: rgba(255, 255, 255, 0.12);
  --surface-border: rgba(16, 185, 129, 0.28);
  --surface-border-active: rgba(52, 211, 153, 0.8);

  --text-main: #ffffff;
  --text-muted: #c8edd8;
  --text-dim: #7bb897;

  --shadow-glow: 0 8px 32px rgba(16, 185, 129, 0.3);
  --nav-bg: linear-gradient(180deg, rgba(2, 26, 14, 0.95) 0%, rgba(1, 13, 8, 0.98) 100%);
  --nav-border: rgba(16, 185, 129, 0.35);
  --nav-active-bg: linear-gradient(135deg, rgba(16, 185, 129, 0.26) 0%, rgba(251, 191, 36, 0.2) 100%);
}

/* THEME 5: SUNSET AMBER */
[data-theme="theme-sunset-gold"] {
  --bg-deep: #120602;
  --bg-gradient: radial-gradient(circle at 50% 10%, #4a1904 0%, #240a02 50%, #0c0201 100%);
  --rose-primary: #f97316;
  --rose-light: #fb923c;
  --rose-glow: rgba(249, 115, 22, 0.5);
  --gold-accent: #ffd700;
  --gold-glow: rgba(255, 215, 0, 0.45);
  --purple-accent: #e11d48;
  
  --surface-card: rgba(255, 255, 255, 0.07);
  --surface-card-hover: rgba(255, 255, 255, 0.12);
  --surface-border: rgba(249, 115, 22, 0.28);
  --surface-border-active: rgba(251, 146, 60, 0.8);

  --text-main: #ffffff;
  --text-muted: #fae1ce;
  --text-dim: #c59779;

  --shadow-glow: 0 8px 32px rgba(249, 115, 22, 0.3);
  --nav-bg: linear-gradient(180deg, rgba(36, 10, 2, 0.95) 0%, rgba(18, 6, 2, 0.98) 100%);
  --nav-border: rgba(249, 115, 22, 0.35);
  --nav-active-bg: linear-gradient(135deg, rgba(249, 115, 22, 0.26) 0%, rgba(255, 215, 0, 0.2) 100%);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

html, body {
  width: 100%;
  height: 100%;
  height: 100dvh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  overscroll-behavior: none !important;
  overscroll-behavior-y: none !important;
}

body {
  font-family: 'Hind Siliguri', 'Outfit', sans-serif;
  background: var(--bg-deep);
  color: var(--text-main);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Background Animated Canvas */
#hearts-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
}

/* App Wrapper - Desktop Preview Frame or 100% Mobile Viewport */
.app-container {
  width: 100%;
  max-width: 440px;
  height: 100%;
  height: 100dvh;
  background: var(--bg-gradient);
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  overflow: hidden;
  overscroll-behavior: none !important;
  overscroll-behavior-y: none !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(255, 42, 122, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

@media (min-width: 480px) {
  html, body {
    position: static;
    overflow: auto;
  }
  body {
    padding: 16px;
    min-height: 100vh;
    background: radial-gradient(circle at center, #240010 0%, #080005 100%);
  }
  .app-container {
    height: 94vh;
    max-height: 920px;
    border-radius: 36px;
    border: 1px solid rgba(255, 105, 180, 0.25);
  }
}

/* Top App Bar Header */
.app-header {
  padding: calc(var(--safe-top) + 8px) 18px 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(10, 1, 6, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  z-index: 10;
  flex-shrink: 0;
  touch-action: none;
  user-select: none;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.brand-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid var(--gold-accent);
  box-shadow: 0 0 14px var(--gold-glow);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: radial-gradient(circle, #2a001a 0%, #0d0107 100%);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.brand:hover .brand-avatar,
.brand-avatar:hover {
  transform: scale(1.06);
  box-shadow: 0 0 18px var(--gold-glow), 0 0 25px var(--rose-glow);
}

.brand-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.18);
  transition: transform 0.3s ease;
  display: block;
}

.brand:hover .brand-avatar img,
.brand-avatar:hover img {
  transform: scale(1.26);
}

.btn-profile-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--rose-primary);
  box-shadow: 0 0 14px var(--rose-glow);
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  background: none;
  transition: transform 0.25s ease;
  position: relative;
}

.btn-profile-avatar:active {
  transform: scale(0.92);
}

.btn-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.btn-profile-avatar .profile-pulse-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background: #00ff88;
  border-radius: 50%;
  border: 2px solid #000;
}

/* Dedicated Couple Card on Home */
.dedicated-couple-banner {
  background: linear-gradient(135deg, rgba(255, 42, 122, 0.18), rgba(162, 56, 255, 0.15));
  border: 1px solid var(--surface-border-active);
  border-radius: var(--radius-lg);
  padding: 16px 14px;
  margin-bottom: 20px;
  box-shadow: 0 8px 32px rgba(255, 42, 122, 0.2);
  text-align: center;
}

.couple-avatars-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 12px;
}

.couple-photo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.couple-photo-circle {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

.photo-rakib {
  border-color: var(--gold-accent);
  box-shadow: 0 0 18px var(--gold-glow);
}

.photo-juma {
  border-color: var(--rose-primary);
  box-shadow: 0 0 18px var(--rose-glow);
}

.couple-photo-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.couple-photo-name {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.couple-heart-connector {
  font-size: 26px;
  animation: heart-beat 1.6s infinite ease-in-out;
}

.dedicated-pill-badge {
  display: inline-block;
  background: rgba(255, 42, 122, 0.2);
  border: 1px solid var(--rose-light);
  color: #ffc4dc;
  font-size: 11px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  margin-bottom: 6px;
  font-weight: 600;
}

.dedicated-caption {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Dynamic Live Relationship Timer Display */
.relation-timer-card {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: 14px;
  margin: 14px 0;
  text-align: center;
}

.relation-timer-label {
  font-size: 11px;
  color: var(--gold-accent);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: block;
}

.relation-timer-digits {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.timer-unit-box {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  min-width: 52px;
  text-align: center;
}

.timer-val {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  display: block;
}

.timer-lbl {
  font-size: 9px;
  color: var(--text-muted);
}

.brand-text h1 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
  background: linear-gradient(90deg, #fff, #ff94c2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.2;
}

.brand-text span {
  font-size: 10px;
  color: var(--text-muted);
  display: block;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 15px;
}

.icon-btn:active {
  transform: scale(0.92);
  background: var(--surface-card-hover);
}

.icon-btn.active {
  background: var(--rose-primary);
  border-color: var(--rose-light);
  box-shadow: 0 0 12px var(--rose-glow);
}

/* Main Content Area (Scrollable Viewport) */
.main-view {
  flex: 1 1 0%;
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain !important;
  overscroll-behavior-y: contain !important;
  touch-action: pan-y;
  padding: 16px 18px calc(78px + var(--safe-bottom)) 18px;
  position: relative;
  scrollbar-width: none;
}

.main-view::-webkit-scrollbar {
  display: none;
}

/* Views Navigation Switching */
.view-section {
  display: none;
  animation: fadeInView 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.view-section.active {
  display: block;
}

@keyframes fadeInView {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Bottom App Navigation Bar (Ultra-Premium Romantic Floating Glass Dock) */
.bottom-nav {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(68px + var(--safe-bottom));
  padding: 6px 14px var(--safe-bottom) 14px;
  background: var(--nav-bg, linear-gradient(180deg, rgba(28, 3, 18, 0.94) 0%, rgba(10, 1, 7, 0.98) 100%));
  backdrop-filter: blur(32px) saturate(190%);
  -webkit-backdrop-filter: blur(32px) saturate(190%);
  border-top: 1.5px solid var(--nav-border, rgba(255, 42, 122, 0.32));
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -10px 35px rgba(0, 0, 0, 0.9), 0 -2px 16px var(--rose-glow), inset 0 1px 1px rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 20;
  flex-shrink: 0;
  touch-action: manipulation;
  user-select: none;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: transparent;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.52);
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  padding: 6px 12px;
  border-radius: 20px;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.nav-item:active {
  transform: scale(0.92);
}

.nav-item .nav-icon {
  font-size: 20px;
  transition: transform 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.28s ease;
  display: inline-block;
}

.nav-item .nav-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

/* Active Tab: Stylish Glowing Glass Pill Capsule */
.nav-item.active {
  background: var(--nav-active-bg, linear-gradient(135deg, rgba(255, 42, 122, 0.24) 0%, rgba(162, 56, 255, 0.18) 100%));
  border: 1px solid var(--rose-primary);
  box-shadow: 0 4px 18px var(--rose-glow), inset 0 0 14px var(--rose-glow);
  color: #ffffff;
  padding: 6px 15px;
}

.nav-item.active .nav-icon {
  transform: translateY(-2px) scale(1.2);
  filter: drop-shadow(0 3px 10px var(--rose-glow)) drop-shadow(0 0 14px var(--gold-glow));
  animation: navIconFloat 2.2s ease-in-out infinite alternate;
}

.nav-item.active .nav-label {
  color: #fff;
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: 0.3px;
  text-shadow: 0 0 10px var(--rose-glow), 0 0 20px var(--rose-glow);
}

.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 3.5px;
  background: linear-gradient(90deg, var(--rose-primary), var(--gold-accent));
  border-radius: 10px;
  box-shadow: 0 0 12px var(--rose-primary), 0 0 6px var(--gold-accent);
}

@keyframes navIconFloat {
  0% { transform: translateY(-2px) scale(1.2); }
  100% { transform: translateY(-4px) scale(1.25); }
}

/* Hero Banner on Home */
.home-hero {
  background: linear-gradient(145deg, rgba(255, 42, 122, 0.16), rgba(162, 56, 255, 0.08));
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 22px;
  box-shadow: var(--shadow-glow);
}

.hero-sparkle {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 20px;
  animation: float-sparkle 3s infinite ease-in-out;
}

@keyframes float-sparkle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(15deg); }
}

.hero-emoji-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 8px;
}

.hero-emoji {
  font-size: 46px;
  margin: 0 auto;
  display: block;
  text-align: center;
  filter: drop-shadow(0 6px 12px rgba(255, 42, 122, 0.4));
  animation: heart-beat 1.6s infinite ease-in-out;
}

@keyframes heart-beat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.15); }
  28% { transform: scale(1); }
  42% { transform: scale(1.12); }
  70% { transform: scale(1); }
}

.home-hero h2 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 6px;
  color: #fff;
}

.home-hero p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 18px;
}

/* Names Input Section */
.couple-names-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 18px;
}

.couple-names-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.couple-input {
  flex: 1;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  outline: none;
  transition: all 0.2s ease;
}

.couple-input:focus {
  border-color: var(--rose-primary);
  box-shadow: 0 0 10px var(--rose-glow);
}

.couple-heart-divider {
  font-size: 18px;
  color: var(--rose-primary);
}

/* Action Buttons */
.btn-primary {
  width: 100%;
  padding: 14px 20px;
  background: linear-gradient(135deg, var(--rose-primary), #d9045a);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 6px 20px var(--rose-glow);
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-primary:active {
  transform: scale(0.96);
  box-shadow: 0 2px 10px var(--rose-glow);
}

.btn-secondary {
  width: 100%;
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.btn-secondary:active {
  transform: scale(0.97);
  background: rgba(255, 255, 255, 0.12);
}

.btn-gold {
  background: linear-gradient(135deg, #ffd166, #ff9f1c);
  color: #1a0800;
  box-shadow: 0 6px 18px var(--gold-glow);
}

/* Quick Mode Cards */
.section-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}

.mode-card {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: 16px 14px;
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.mode-card:hover, .mode-card:active {
  background: var(--surface-card-hover);
  border-color: var(--surface-border-active);
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}

.mode-card-icon {
  font-size: 28px;
  margin-bottom: 8px;
}

.mode-card h3 {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}

.mode-card p {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.35;
}

/* Play/Quiz Screen Styles */
.quiz-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.quiz-badge {
  background: rgba(255, 42, 122, 0.15);
  border: 1px solid rgba(255, 42, 122, 0.3);
  color: var(--rose-light);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
}

.quiz-score-meter {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--gold-accent);
  font-weight: 700;
}

.progress-container {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;
  position: relative;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--rose-primary), var(--gold-accent));
  border-radius: 8px;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 10px var(--rose-glow);
}

/* Question Card */
.question-card {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  margin-bottom: 20px;
  position: relative;
  text-align: center;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.question-tag {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--rose-light);
  margin-bottom: 10px;
  font-weight: 600;
}

.question-text {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.45;
  color: #fff;
}

/* Options Container */
.options-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.option-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  padding: 15px 18px;
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

.option-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 105, 180, 0.4);
}

.option-btn:active {
  transform: scale(0.97);
}

.option-btn.selected-correct {
  background: linear-gradient(135deg, rgba(255, 42, 122, 0.35), rgba(76, 175, 80, 0.25));
  border-color: var(--rose-primary);
  box-shadow: 0 0 16px var(--rose-glow);
}

.option-btn.playful-no {
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Playful reaction popup */
.reaction-toast {
  background: rgba(26, 3, 16, 0.94);
  border: 1px solid var(--rose-primary);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  color: #fff;
  font-size: 13px;
  text-align: center;
  margin-bottom: 16px;
  animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 8px 24px var(--rose-glow);
}

@keyframes popIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

/* Result / Win Reward Screen */
.result-card {
  text-align: center;
  padding: 24px 16px;
}

.love-meter-dual-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 18px;
}

.meter-side-couple {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.meter-couple-avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6);
  animation: float-sparkle 3s infinite ease-in-out;
}

.meter-couple-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.meter-couple-label {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}

.love-meter-wrap {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 0;
  flex-shrink: 0;
}

.love-meter-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.love-meter-circle-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 10;
}

.love-meter-circle-val {
  fill: none;
  stroke: url(#loveGrad);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 440;
  stroke-dashoffset: 440;
  transition: stroke-dashoffset 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.love-meter-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.love-meter-score {
  font-size: 34px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 0 15px var(--rose-glow);
}

.love-meter-sub {
  font-size: 11px;
  color: var(--rose-light);
  font-weight: 600;
}

.round-chip {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  border-radius: var(--radius-full);
  padding: 4px 12px;
  font-size: 11px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.round-chip.active {
  background: var(--rose-primary);
  border-color: var(--rose-light);
  box-shadow: 0 0 10px var(--rose-glow);
}

.reward-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #fff;
}

.reward-badge-pill {
  display: inline-block;
  background: linear-gradient(135deg, var(--gold-accent), #ff9f1c);
  color: #120309;
  font-weight: 700;
  font-size: 12px;
  padding: 4px 14px;
  border-radius: var(--radius-full);
  margin-bottom: 16px;
  box-shadow: 0 4px 12px var(--gold-glow);
}

.reward-message-box {
  background: rgba(255, 42, 122, 0.1);
  border: 1px dashed var(--surface-border-active);
  border-radius: var(--radius-md);
  padding: 18px 16px;
  margin-bottom: 20px;
  position: relative;
}

.reward-message-box p {
  font-size: 14px;
  line-height: 1.6;
  color: #ffe6f0;
}

.reward-quote {
  font-style: italic;
  font-size: 12px;
  color: var(--gold-accent);
  margin-top: 10px;
  display: block;
}

/* Certificate Card Generator */
.certificate-preview {
  background: radial-gradient(circle at center, #2d0014 0%, #150009 100%);
  border: 2px solid var(--gold-accent);
  border-radius: var(--radius-md);
  padding: 20px;
  text-align: center;
  margin-bottom: 20px;
  position: relative;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7);
}

.cert-corner-flower {
  position: absolute;
  font-size: 16px;
}
.cert-tl { top: 6px; left: 6px; }
.cert-tr { top: 6px; right: 6px; }
.cert-bl { bottom: 6px; left: 6px; }
.cert-br { bottom: 6px; right: 6px; }

.cert-heading {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  color: var(--gold-accent);
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.cert-couples {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin: 8px 0;
}

.cert-desc {
  font-size: 12px;
  color: var(--text-muted);
}

/* Custom Game Builder Styles */
.builder-card {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 16px;
}

.form-group {
  margin-bottom: 14px;
}

.form-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.form-control {
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  outline: none;
  transition: all 0.2s ease;
}

.form-control:focus {
  border-color: var(--rose-primary);
  box-shadow: 0 0 10px var(--rose-glow);
}

.screen-card-item {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-bottom: 12px;
  position: relative;
}

.screen-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.screen-number {
  font-size: 12px;
  font-weight: 700;
  color: var(--rose-light);
}

.btn-remove-screen {
  background: none;
  border: none;
  color: #ff5c77;
  font-size: 12px;
  cursor: pointer;
  padding: 2px 6px;
}

/* Leaderboard Table */
.leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.leader-item {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.2s ease;
}

.leader-item:hover {
  background: var(--surface-card-hover);
  border-color: var(--rose-primary);
}

.leader-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.leader-rank {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.leader-rank.top-1 {
  background: linear-gradient(135deg, #ffd700, #ffae00);
  color: #000;
}
.leader-rank.top-2 {
  background: linear-gradient(135deg, #e0e0e0, #a0a0a0);
  color: #000;
}
.leader-rank.top-3 {
  background: linear-gradient(135deg, #cd7f32, #99551c);
  color: #fff;
}

.leader-info h4 {
  font-size: 14px;
  color: #fff;
  font-weight: 600;
}

.leader-info span {
  font-size: 11px;
  color: var(--text-dim);
}

.leader-score {
  text-align: right;
}

.leader-score-val {
  font-size: 16px;
  font-weight: 800;
  color: var(--rose-light);
}

.leader-score-badge {
  font-size: 10px;
  color: var(--gold-accent);
}

/* Romantic Letters Tab */
.letters-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.letter-card {
  background: linear-gradient(145deg, rgba(255, 42, 122, 0.12), rgba(0, 0, 0, 0.4));
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: 16px;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
}

.letter-card:hover {
  transform: translateY(-2px);
  border-color: var(--rose-primary);
  box-shadow: var(--shadow-glow);
}

.letter-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.letter-card-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

.letter-card-preview {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.45;
  margin-bottom: 10px;
}

.letter-seal-btn {
  font-size: 12px;
  color: var(--rose-light);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Modal Popup */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 16px;
}

.modal-overlay.active {
  display: flex !important;
}

#answer-popup-modal {
  z-index: 100010 !important;
}
#answer-popup-modal.active {
  display: flex !important;
}

#mood-quiz-modal {
  z-index: 100015 !important;
}
#mood-quiz-modal.active {
  display: flex !important;
}

#photo-viewer-modal {
  z-index: 100020 !important;
}
#photo-viewer-modal.active {
  display: flex !important;
}

.modal-content {
  background: linear-gradient(150deg, #2b0216, #120109);
  border: 1px solid var(--rose-primary);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 380px;
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  padding: 24px 20px;
  position: relative;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.9), 0 0 30px var(--rose-glow);
  animation: modalScale 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  scrollbar-width: thin;
  scrollbar-color: var(--rose-primary) transparent;
}

@keyframes modalScale {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

.modal-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

/* Confetti Container */
#confetti-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 99;
}

/* Gatekeeper Entry Modal */
.gatekeeper-overlay {
  z-index: 99999 !important;
  background: rgba(10, 1, 6, 0.94) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  pointer-events: auto !important;
}

.gatekeeper-overlay.unlocking {
  opacity: 0;
  pointer-events: none !important;
}

.gatekeeper-card {
  position: relative !important;
  z-index: 100000 !important;
  border: 2px solid var(--rose-primary) !important;
  box-shadow: 0 0 50px rgba(255, 42, 122, 0.5) !important;
  pointer-events: auto !important;
}

.gatekeeper-card button {
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 100001 !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

@keyframes shakeInput {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}

.shake-error {
  animation: shakeInput 0.4s ease-in-out;
  border-color: #ff5c77 !important;
}

/* ========================================================
   MOOD QUIZ & CATEGORY SELECTOR SYSTEM
   ======================================================== */

.mood-launcher-btn {
  background: linear-gradient(135deg, #ff2a7a 0%, #ffd166 100%) !important;
  color: #120109 !important;
  font-weight: 800 !important;
  letter-spacing: 0.4px;
  border: 1px solid rgba(255, 209, 102, 0.7) !important;
  box-shadow: 0 4px 22px rgba(255, 42, 122, 0.45) !important;
  animation: pulse-glow-btn 2.6s infinite ease-in-out;
  cursor: pointer;
  transition: all 0.25s ease;
}

@keyframes pulse-glow-btn {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(255, 42, 122, 0.45), 0 0 12px rgba(255, 209, 102, 0.3);
    transform: translateY(0);
  }
  50% {
    box-shadow: 0 6px 28px rgba(255, 42, 122, 0.75), 0 0 22px rgba(255, 209, 102, 0.55);
    transform: translateY(-2px);
  }
}

.mood-launcher-btn:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 8px 30px rgba(255, 42, 122, 0.65), 0 0 25px rgba(255, 209, 102, 0.6) !important;
}

.mood-modal-card {
  border: 1.5px solid var(--rose-primary) !important;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.95), 0 0 35px rgba(255, 42, 122, 0.45) !important;
  background: linear-gradient(155deg, #2b0216 0%, #16000c 50%, #0a0006 100%) !important;
}

.mood-choice-btn {
  width: 100%;
  padding: 13px 16px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.mood-choice-btn:hover, .mood-choice-btn:active {
  background: linear-gradient(135deg, rgba(255, 42, 122, 0.32), rgba(255, 209, 102, 0.18));
  border-color: var(--rose-primary);
  transform: translateX(4px);
  box-shadow: 0 4px 18px rgba(255, 42, 122, 0.3);
}

.mood-arrow {
  color: var(--rose-light);
  font-size: 15px;
  transition: transform 0.2s ease;
}

.mood-choice-btn:hover .mood-arrow {
  transform: translateX(4px);
  color: var(--gold-accent);
}

/* 8 Categories Grid */
.mood-categories-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 6px;
}

.mood-cat-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: 12px 10px;
  cursor: pointer;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
}

.mood-cat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 50% 0%, var(--cat-accent, #ff2a7a) 0%, transparent 75%);
  opacity: 0.16;
  pointer-events: none;
}

.mood-cat-card:hover, .mood-cat-card:active {
  transform: translateY(-3px) scale(1.02);
  border-color: var(--cat-accent, var(--rose-primary));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 18px var(--cat-accent, var(--rose-glow));
}

.mood-cat-icon {
  font-size: 26px;
  margin-bottom: 2px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}

.mood-cat-name {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}

.mood-cat-desc {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.3;
  margin-top: 2px;
}

.mood-cat-badge {
  font-size: 10px;
  color: var(--gold-accent);
  background: rgba(255, 209, 102, 0.15);
  border: 1px solid rgba(255, 209, 102, 0.35);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-weight: 700;
  margin-top: 4px;
}

/* ========================================================
   HOME HERO LIVE SESSION TIMER & LAST ACTIVE BADGE
   ======================================================== */
.hero-session-tracker-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  margin-bottom: 12px;
}

.hero-live-timer-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(0, 255, 136, 0.45);
  box-shadow: 0 0 12px rgba(0, 255, 136, 0.25);
  padding: 4px 11px; /* smaller and sleek */
  border-radius: var(--radius-full);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.pulse-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #00ff88;
  box-shadow: 0 0 8px #00ff88;
  animation: live-pulse 1.4s infinite ease-in-out;
  flex-shrink: 0;
}

@keyframes live-pulse {
  0%, 100% {
    transform: scale(0.9);
    opacity: 0.7;
    box-shadow: 0 0 5px #00ff88;
  }
  50% {
    transform: scale(1.3);
    opacity: 1;
    box-shadow: 0 0 12px #00ff88, 0 0 18px rgba(0, 255, 136, 0.6);
  }
}

.live-timer-lbl {
  font-size: 10.5px;
  color: #a8ffd2;
  font-weight: 600;
  white-space: nowrap;
}

.live-timer-val {
  font-size: 11px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.3px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hero-last-session-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 42, 122, 0.12);
  border: 1px dashed rgba(255, 42, 122, 0.4);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 10px;
  color: #ffb8d4;
  margin-top: 2px;
  display: none; /* revealed when lastSession exists */
}

.hero-last-session-badge strong {
  color: var(--gold-accent);
}

/* ========================================================
   RANK PAGE: LARGE ROUND COUPLE AVATARS (CLOSER & CLICKABLE)
   ======================================================== */
.rank-couple-header-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: linear-gradient(135deg, rgba(255, 42, 122, 0.18), rgba(162, 56, 255, 0.14));
  border: 1px solid var(--surface-border-active);
  border-radius: var(--radius-lg);
  padding: 18px 12px;
  margin-bottom: 18px;
  box-shadow: 0 10px 32px rgba(255, 42, 122, 0.25);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
}

.rank-avatar-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  z-index: 2;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.rank-avatar-unit:hover {
  transform: translateY(-2px) scale(1.02);
}

.rank-avatar-unit:active {
  transform: scale(0.95);
}

.rank-avatar-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  border: 3.5px solid;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@media (min-width: 400px) {
  .rank-avatar-circle {
    width: 88px;
    height: 88px;
  }
}

.rank-avatar-circle:hover {
  transform: scale(1.06);
}

.avatar-click-hint {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background: rgba(0, 0, 0, 0.75);
  font-size: 10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

.rank-photo-rakib {
  border-color: var(--gold-accent);
  box-shadow: 0 0 20px rgba(255, 209, 102, 0.5), inset 0 0 10px rgba(255, 209, 102, 0.3);
}

.rank-photo-juma {
  border-color: var(--rose-primary);
  box-shadow: 0 0 20px rgba(255, 42, 122, 0.6), inset 0 0 10px rgba(255, 42, 122, 0.3);
}

.rank-avatar-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rank-avatar-name {
  font-size: 14.5px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.rank-avatar-role {
  font-size: 10px;
  color: var(--gold-accent);
  background: rgba(0, 0, 0, 0.45);
  padding: 3px 9px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 209, 102, 0.3);
  white-space: nowrap;
}

/* Center Romantic Love Heart */
.rank-center-love-group {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  flex-shrink: 0;
  padding: 0 4px;
}

.rank-heart-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.rank-pulsing-heart {
  font-size: 32px;
  animation: heart-beat 1.4s infinite ease-in-out;
  filter: drop-shadow(0 0 14px rgba(255, 42, 122, 0.85));
}

.rank-heart-glow {
  position: absolute;
  width: 48px;
  height: 48px;
  background: radial-gradient(circle, rgba(255, 42, 122, 0.55) 0%, transparent 70%);
  border-radius: 50%;
  animation: pulse-glow 2s infinite alternate;
  pointer-events: none;
}

/* ========================================================
   PHOTO VIEWER LIGHTBOX POPUP MODAL
   ======================================================== */
.photo-viewer-card {
  max-width: 330px !important;
  text-align: center;
  padding: 24px 18px !important;
  border: 1.5px solid var(--rose-primary) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.95), 0 0 35px rgba(255, 42, 122, 0.5) !important;
  background: linear-gradient(160deg, #2b0216 0%, #16000c 50%, #0a0006 100%) !important;
  animation: modalScale 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.photo-viewer-img-wrap {
  width: 210px;
  height: 210px;
  margin: 10px auto 16px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--rose-primary);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 25px rgba(255, 42, 122, 0.6);
  position: relative;
  animation: photoZoomIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.photo-viewer-img-wrap.border-rakib {
  border-color: var(--gold-accent) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 25px rgba(255, 209, 102, 0.6) !important;
}

.photo-viewer-img-wrap.border-juma {
  border-color: var(--rose-primary) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 25px rgba(255, 42, 122, 0.6) !important;
}

.photo-viewer-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-viewer-caption {
  margin-bottom: 16px;
}

.photo-viewer-caption h3 {
  color: #fff;
  font-size: 21px;
  font-weight: 800;
  margin-bottom: 5px;
  letter-spacing: 0.3px;
}

.photo-viewer-caption span {
  font-size: 12.5px;
  color: var(--gold-accent);
  background: rgba(255, 209, 102, 0.15);
  border: 1px solid rgba(255, 209, 102, 0.3);
  padding: 4px 14px;
  border-radius: var(--radius-full);
  display: inline-block;
  font-weight: 700;
}

.btn-viewer-close {
  background: linear-gradient(135deg, var(--rose-primary), #9333ea) !important;
  margin-top: 4px;
}

@keyframes photoZoomIn {
  from {
    transform: scale(0.65);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Rakib Photo Face Centering */
img[src*="rakib.png"] {
  object-fit: cover !important;
  object-position: center 15% !important;
}

/* ========================================================
   REAL-TIME EFFORT & RANKING SCORE BOX IN PHOTO VIEWER
   ======================================================== */
.photo-viewer-card {
  max-width: 350px !important;
}

.photo-viewer-img-wrap {
  width: 175px !important;
  height: 175px !important;
  margin: 6px auto 12px !important;
}

.photo-viewer-effort-box {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 42, 122, 0.35);
  border-radius: 16px;
  padding: 12px 14px;
  margin-bottom: 14px;
  text-align: left;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
}

.effort-box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.effort-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.effort-icon {
  font-size: 26px;
  filter: drop-shadow(0 2px 6px rgba(255, 209, 102, 0.5));
}

.effort-rank-title {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}

.effort-calc-sub {
  font-size: 9.5px;
  color: #ffb8d2;
  display: block;
}

.effort-score-badge {
  background: linear-gradient(135deg, #ff2a7a, #ffd700);
  color: #120108;
  font-size: 13.5px;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(255, 42, 122, 0.45);
  letter-spacing: 0.5px;
}

/* Interactive Progress Bar */
.effort-progress-wrap {
  cursor: pointer;
  margin-bottom: 12px;
  padding: 6px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.22s ease;
  user-select: none;
}

.effort-progress-wrap:hover, .effort-progress-wrap:active {
  background: rgba(255, 42, 122, 0.2);
  border-color: rgba(255, 42, 122, 0.5);
  transform: scale(1.02);
}

.effort-progress-track {
  width: 100%;
  height: 14px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
}

.effort-progress-fill {
  height: 100%;
  border-radius: 7px;
  background: linear-gradient(90deg, #ff0055, #ff2a7a, #ffd700);
  position: relative;
  transition: width 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 0 12px rgba(255, 42, 122, 0.7);
}

.effort-progress-shimmer {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
  animation: effortShimmer 2s infinite;
}

@keyframes effortShimmer {
  100% { left: 100%; }
}

.effort-progress-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 5px;
  font-size: 9.5px;
  color: #ffd6e7;
}

.effort-level-tag {
  color: var(--gold-accent);
  font-weight: 700;
}

/* Effort Metrics Grid */
.effort-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.effort-metric-item {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 6px 4px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.effort-metric-icon {
  font-size: 14px;
}

.effort-metric-lbl {
  font-size: 9px;
  color: var(--rose-light);
  display: block;
}

.effort-metric-val {
  font-size: 11.5px;
  font-weight: 800;
  color: #fff;
  display: block;
}

/* Motivation Alert Popup Modal */
.effort-motivation-card {
  max-width: 340px !important;
  text-align: center;
  padding: 24px 18px !important;
  border: 2px solid var(--rose-primary) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.95), 0 0 35px rgba(255, 42, 122, 0.6) !important;
  background: linear-gradient(160deg, #2b0216 0%, #16000c 60%, #0a0006 100%) !important;
  animation: modalScale 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.motivation-icon {
  font-size: 42px;
  margin-bottom: 6px;
  animation: heart-beat 1.2s infinite ease-in-out;
}

.motivation-title {
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 4px;
}

.motivation-person-tag {
  font-size: 11px;
  color: var(--gold-accent);
  margin-bottom: 12px;
  font-weight: 600;
}

.motivation-text {
  font-size: 13px;
  color: #ffeef4;
  line-height: 1.55;
  margin-bottom: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed rgba(255, 42, 122, 0.3);
  padding: 12px;
  border-radius: 12px;
  text-align: left;
}

.motivation-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ========================================================
   JHUMA PROFILE AVATAR UPLOAD & CONTROLS
   ======================================================== */
.jhuma-profile-avatar-wrap {
  position: relative;
  width: 106px;
  height: 106px;
  margin: 0 auto 8px auto;
}

.jhuma-profile-avatar-label {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;
  border-radius: 50%;
  user-select: none;
}

.jhuma-profile-circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  border: 3.5px solid var(--rose-primary);
  box-shadow: 0 0 25px var(--rose-glow);
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.jhuma-profile-avatar-label:hover .jhuma-profile-circle,
.jhuma-profile-avatar-label:active .jhuma-profile-circle {
  transform: scale(1.05);
  box-shadow: 0 0 32px var(--rose-glow), 0 0 15px rgba(255, 209, 102, 0.5);
}

.jhuma-profile-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.jhuma-avatar-overlay-hint {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
  border-radius: 50%;
}

.jhuma-avatar-overlay-hint span {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: rgba(255, 42, 122, 0.85);
  padding: 3px 8px;
  border-radius: var(--radius-full);
}

.jhuma-profile-avatar-label:hover .jhuma-avatar-overlay-hint {
  opacity: 1;
}

.jhuma-crown-badge {
  position: absolute;
  bottom: -2px;
  right: 2px;
  font-size: 20px;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.7));
  z-index: 2;
  pointer-events: none;
}

.jhuma-camera-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: linear-gradient(135deg, #ff2a7a, #a238ff);
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  border: 2px solid #ffffff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6);
  z-index: 3;
  transition: transform 0.2s ease;
}

.jhuma-profile-avatar-label:hover .jhuma-camera-badge,
.jhuma-profile-avatar-label:active .jhuma-camera-badge {
  transform: scale(1.15) rotate(10deg);
}

.jhuma-avatar-actions-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}

.btn-change-avatar {
  background: rgba(255, 42, 122, 0.2);
  border: 1px solid rgba(255, 42, 122, 0.5);
  color: #ff9ec7;
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: var(--radius-full);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s ease;
  user-select: none;
}

.btn-change-avatar:hover, .btn-change-avatar:active {
  background: var(--rose-primary);
  color: #fff;
  border-color: var(--rose-primary);
  box-shadow: 0 2px 12px var(--rose-glow);
  transform: translateY(-1px);
}

.btn-reset-avatar {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #e5e5e5;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: var(--radius-full);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
}

.btn-reset-avatar:hover, .btn-reset-avatar:active {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.jhuma-avatar-status-msg {
  font-size: 11px;
  color: var(--gold-accent);
  background: rgba(255, 209, 102, 0.12);
  border: 1px solid rgba(255, 209, 102, 0.3);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  margin: 0 auto 10px auto;
  display: inline-block;
  animation: fadeInDown 0.25s ease-out;
}

/* ========================================================
   DEDICATED JHUMA BUTTON & MISS TRACKER CARD
   ======================================================== */
.jhuma-btn-wrapper {
  margin-bottom: 16px;
}

.btn-jhuma-special {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(135deg, rgba(255, 42, 122, 0.92), rgba(162, 56, 255, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 24px rgba(255, 42, 122, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  cursor: pointer;
  color: #fff;
  text-align: left;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-jhuma-special:active {
  transform: scale(0.98);
}

.jhuma-btn-pill {
  background: #ffffff;
  color: var(--rose-primary);
  font-size: 13px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
}

.jhuma-btn-text-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.jhuma-btn-main {
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}

.jhuma-btn-hint {
  font-size: 10.5px;
  color: #ffd8eb;
  line-height: 1.2;
}

.jhuma-btn-arrow {
  font-size: 14px;
  color: #fff;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.btn-jhuma-special.active .jhuma-btn-arrow {
  transform: rotate(180deg);
}

/* Active Miss Time Details Card */
.jhuma-miss-card {
  background: rgba(18, 2, 12, 0.85);
  border: 1px solid var(--surface-border-active);
  border-radius: var(--radius-md);
  padding: 16px 14px;
  margin-bottom: 20px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: fadeInDown 0.3s ease-out;
}

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

.miss-metrics-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.miss-metric-pill {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.metric-icon {
  font-size: 22px;
  flex-shrink: 0;
}

.metric-details {
  display: flex;
  flex-direction: column;
}

.metric-lbl {
  font-size: 10.5px;
  color: var(--text-muted);
}

.metric-val {
  font-size: 15px;
  font-weight: 800;
  color: var(--gold-accent);
}

.miss-last-active-row {
  background: rgba(255, 42, 122, 0.1);
  border: 1px solid rgba(255, 42, 122, 0.25);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.last-active-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.last-active-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.last-active-lbl {
  font-size: 11px;
  color: #ffb5d2;
}

.last-active-val {
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}

/* ========================================================
   7-DAY SERIAL HISTORY & DYNAMIC PROGRESS BARS (১-৭ দিন হিস্ট্রি)
   ======================================================== */
.seven-days-history-card {
  background: rgba(20, 2, 14, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: 16px 14px;
  margin-bottom: 22px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}

.history-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.history-title-box {
  display: flex;
  align-items: center;
  gap: 8px;
}

.history-icon {
  font-size: 22px;
}

.history-title-box h3 {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
}

.history-sub {
  font-size: 10px;
  color: var(--text-muted);
  display: block;
  margin-top: 2px;
}

.history-pill-tag {
  font-size: 10px;
  color: var(--gold-accent);
  background: rgba(255, 209, 102, 0.15);
  border: 1px solid rgba(255, 209, 102, 0.3);
  padding: 3px 8px;
  border-radius: var(--radius-full);
  font-weight: 700;
  flex-shrink: 0;
}

.history-days-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Individual Day Row Item */
.history-day-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.history-day-card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 105, 180, 0.35);
}

.history-day-card.active {
  border-color: var(--surface-border-active);
  background: rgba(255, 42, 122, 0.08);
}

.history-day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.history-date-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.history-date-title {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.history-date-badge {
  font-size: 9.5px;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  background: rgba(255, 42, 122, 0.2);
  color: #ff9ec7;
  border: 1px solid rgba(255, 42, 122, 0.35);
}

.history-day-summary {
  display: flex;
  align-items: center;
  gap: 8px;
}

.history-total-time {
  font-size: 13px;
  font-weight: 800;
  color: var(--gold-accent);
}

.history-chevron {
  font-size: 11px;
  color: var(--text-dim);
  transition: transform 0.25s ease;
}

.history-day-card.active .history-chevron {
  transform: rotate(180deg);
}

/* Progress Bar Track & Fill */
.history-progress-track {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
}

.history-progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, #ff2a7a 0%, #ffd166 100%);
  box-shadow: 0 0 10px rgba(255, 42, 122, 0.6);
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Sessions Breakdown Dropdown / Accordion */
.history-sessions-dropdown {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: fadeInDown 0.25s ease-out;
}

.session-entry-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 11.5px;
}

.session-entry-time {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #ffe6f0;
}

.session-entry-bullet {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rose-primary);
  box-shadow: 0 0 6px var(--rose-glow);
}

.session-entry-duration {
  font-weight: 700;
  color: var(--gold-accent);
  background: rgba(255, 209, 102, 0.12);
  border: 1px solid rgba(255, 209, 102, 0.25);
  padding: 2px 7px;
  border-radius: var(--radius-full);
  font-size: 10.5px;
}

/* ========================================================
   PROFILE MODAL SCROLL & EXPANSION ENHANCEMENTS
   ======================================================== */
#profile-modal .modal-content {
  max-height: 90vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--rose-primary) transparent;
}

#profile-modal .modal-content::-webkit-scrollbar {
  width: 5px;
}

#profile-modal .modal-content::-webkit-scrollbar-thumb {
  background: var(--rose-primary);
  border-radius: 4px;
}

/* ========================================================
   MEETUP HISTORY SECTION & ACCORDION (PROFILE MODAL)
   ======================================================== */
.meetup-accordion-wrap {
  margin: 14px 0;
  text-align: left;
}

.btn-meetup-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, rgba(255, 42, 122, 0.18), rgba(162, 56, 255, 0.18));
  border: 1px solid rgba(255, 42, 122, 0.45);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  color: #fff;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(255, 42, 122, 0.15);
}

.btn-meetup-toggle:hover, .btn-meetup-toggle:focus {
  background: linear-gradient(135deg, rgba(255, 42, 122, 0.28), rgba(162, 56, 255, 0.28));
  border-color: var(--rose-primary);
  box-shadow: 0 6px 20px rgba(255, 42, 122, 0.35);
}

.btn-meetup-toggle.active {
  border-color: var(--gold-accent);
  box-shadow: 0 0 18px rgba(255, 209, 102, 0.25);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.meetup-toggle-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.meetup-toggle-icon {
  font-size: 22px;
  filter: drop-shadow(0 0 8px var(--rose-glow));
}

.meetup-toggle-text {
  display: flex;
  flex-direction: column;
}

.meetup-toggle-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.3px;
}

.meetup-toggle-sub {
  font-size: 10.5px;
  color: var(--rose-light);
  opacity: 0.9;
}

.meetup-toggle-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.meetup-badge-pill {
  background: var(--gold-accent);
  color: #120109;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.meetup-arrow-icon {
  font-size: 11px;
  color: var(--text-dim);
  transition: transform 0.25s ease;
}

.btn-meetup-toggle.active .meetup-arrow-icon {
  transform: rotate(180deg);
  color: var(--gold-accent);
}

/* Dropdown Container */
.meetup-dropdown-container {
  background: rgba(18, 1, 9, 0.88);
  border: 1px solid rgba(255, 42, 122, 0.35);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: 14px 12px;
  animation: fadeInDown 0.25s ease-out;
}

/* Status Bar */
.meetup-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 12px;
}

.meetup-stat-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.meetup-stat-lbl {
  font-size: 11.5px;
  color: var(--text-dim);
}

.meetup-stat-num {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--gold-accent);
}

.meetup-cloud-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: #a8ffb2;
}

.cloud-sync-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #39ff14;
  box-shadow: 0 0 6px #39ff14;
  display: inline-block;
}

/* Open Add Form Button */
.btn-open-meetup-form {
  width: 100%;
  background: linear-gradient(135deg, rgba(255, 42, 122, 0.85), rgba(255, 107, 107, 0.85));
  border: none;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(255, 42, 122, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  margin-bottom: 12px;
}

.btn-open-meetup-form:active {
  transform: scale(0.97);
}

/* Add Form Box */
.meetup-form-box {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 42, 122, 0.4);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-bottom: 14px;
  animation: fadeInDown 0.25s ease-out;
}

.meetup-form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}

.meetup-form-tag {
  font-size: 12px;
  font-weight: 700;
  color: var(--rose-light);
}

.btn-close-form-x {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}

.meetup-field-group {
  margin-bottom: 10px;
}

.meetup-field-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: #ffd1dc;
  margin-bottom: 4px;
}

.meetup-field-row {
  display: flex;
  gap: 8px;
}

.meetup-form-control {
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 7px 10px;
  color: #fff;
  font-size: 12px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.meetup-form-control:focus {
  border-color: var(--rose-primary);
  box-shadow: 0 0 10px rgba(255, 42, 122, 0.35);
  background: rgba(255, 255, 255, 0.12);
}

.meetup-time-selectors {
  display: flex;
  gap: 4px;
}

.meetup-select {
  flex: 1;
  cursor: pointer;
  background: #2b0216;
  color: #fff;
}

.meetup-select option {
  background: #1f0110;
  color: #fff;
}

.meetup-btn-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.btn-meetup-save {
  flex: 1;
  background: linear-gradient(135deg, var(--rose-primary), #ff4d8d);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.btn-meetup-save:active {
  transform: scale(0.97);
}

.btn-meetup-cancel {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-dim);
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 11px;
  cursor: pointer;
}

.meetup-form-status {
  font-size: 11px;
  margin-top: 8px;
  padding: 5px 8px;
  border-radius: 4px;
  text-align: center;
}

/* Meetup List & Cards */
.meetup-cards-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 2px;
}

.meetup-cards-list::-webkit-scrollbar {
  width: 4px;
}

.meetup-cards-list::-webkit-scrollbar-thumb {
  background: rgba(255, 42, 122, 0.4);
  border-radius: 4px;
}

.meetup-empty-card {
  text-align: center;
  padding: 18px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 42, 122, 0.25);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.5;
}

.meetup-record-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 42, 122, 0.25);
  border-left: 3px solid var(--rose-primary);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  transition: background 0.2s ease, border-color 0.2s ease;
  animation: fadeInDown 0.25s ease-out;
}

.meetup-record-card:hover {
  background: rgba(255, 42, 122, 0.07);
  border-color: rgba(255, 42, 122, 0.45);
}

.meetup-card-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 20px;
}

.meetup-card-date {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 5px;
}

.meetup-card-badge-num {
  font-size: 10px;
  font-weight: 700;
  background: rgba(255, 42, 122, 0.2);
  color: var(--rose-light);
  padding: 2px 7px;
  border-radius: var(--radius-full);
}

.meetup-card-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: #ffd6e7;
  flex-wrap: wrap;
}

.meetup-card-time {
  display: flex;
  align-items: center;
  gap: 4px;
}

.meetup-card-duration {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  color: var(--gold-accent);
  background: rgba(255, 209, 102, 0.12);
  padding: 2px 6px;
  border-radius: 4px;
}

.meetup-card-location {
  font-size: 11.5px;
  color: #f7e6ef;
  background: rgba(0, 0, 0, 0.25);
  padding: 5px 8px;
  border-radius: 5px;
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.meetup-card-del-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  font-size: 12px;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.2s, transform 0.2s;
  padding: 4px;
  color: #ff6b81;
}

.meetup-card-del-btn:hover {
  opacity: 1;
  transform: scale(1.15);
}

/* ========================================================
   JHUMA LIVE & LAST LOCATION TRACKER (VIEW REWARDS)
   ======================================================== */
.jhuma-location-card {
  background: linear-gradient(145deg, rgba(38, 3, 24, 0.95), rgba(18, 1, 9, 0.95));
  border: 1px solid rgba(255, 42, 122, 0.45);
  box-shadow: 0 8px 24px rgba(255, 42, 122, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  padding: 16px 14px;
  margin-bottom: 20px;
  text-align: left;
  animation: fadeInDown 0.3s ease-out;
}

.jhuma-loc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(255, 42, 122, 0.3);
}

.jhuma-loc-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.jhuma-loc-radar-icon {
  font-size: 26px;
  filter: drop-shadow(0 0 10px var(--rose-glow));
  animation: heart-beat 2.2s infinite ease-in-out;
}

.jhuma-loc-title {
  font-size: 14.5px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.3px;
  margin: 0 0 2px 0;
}

.jhuma-loc-subtitle {
  font-size: 11px;
  color: var(--rose-light);
  opacity: 0.9;
}

.jhuma-loc-status-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 4px 9px;
  border-radius: var(--radius-full);
  font-size: 10.5px;
  color: #a8ffb2;
}

.loc-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #39ff14;
  box-shadow: 0 0 8px #39ff14;
  display: inline-block;
  animation: pulse-dot 1.8s infinite;
}

@keyframes pulse-dot {
  0% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.7; }
}

.jhuma-loc-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

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

.jhuma-loc-device-item {
  border-left: 3px solid var(--rose-primary);
  background: rgba(255, 42, 122, 0.05);
}

.jhuma-loc-item-icon {
  font-size: 18px;
  line-height: 1.2;
}

.jhuma-loc-detail {
  flex: 1;
}

.jhuma-loc-lbl {
  display: block;
  font-size: 10.5px;
  color: var(--text-dim);
  margin-bottom: 3px;
  font-weight: 600;
}

.jhuma-loc-val {
  font-size: 12.5px;
  color: #fff;
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
}

.jhuma-loc-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

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

.jhuma-loc-val-sm {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--gold-accent);
}

.jhuma-loc-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Interactive Map Preview Card & Leaflet Satellite View */
.jhuma-map-preview-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 42, 122, 0.45);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 42, 122, 0.15);
  background: #0b0105;
  height: 260px;
}

.jhuma-leaflet-map {
  width: 100%;
  height: 100%;
  z-index: 1;
}

.jhuma-gmaps-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #111;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

/* Map Top Controls Bar */
.map-controls-top-row {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1000;
  pointer-events: none;
}

.map-view-switcher {
  display: flex;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 42, 122, 0.4);
  border-radius: var(--radius-full);
  padding: 2px;
  pointer-events: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.btn-map-type {
  background: transparent;
  border: none;
  color: #ffd6e7;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-map-type.active {
  background: var(--rose-primary);
  color: #fff;
  box-shadow: 0 0 10px rgba(255, 42, 122, 0.6);
}

.jhuma-map-live-badge {
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 42, 122, 0.4);
  border-radius: var(--radius-full);
  padding: 4px 10px;
  font-size: 10.5px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* Custom Leaflet Marker Styling */
.jhuma-custom-leaflet-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.leaflet-marker-avatar-wrap {
  position: relative;
  width: 44px;
  height: 44px;
}

.leaflet-marker-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 0 14px var(--rose-primary);
  display: block;
}

.leaflet-marker-crown {
  position: absolute;
  top: -8px;
  right: -4px;
  font-size: 16px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

.leaflet-marker-radar {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255, 42, 122, 0.45);
  animation: radar-ripple 2s infinite ease-out;
  pointer-events: none;
}

@keyframes radar-ripple {
  0% { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Google Maps Live Session Button */
.btn-google-maps-live {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #1a73e8 0%, #1557b0 100%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 4px 16px rgba(26, 115, 232, 0.45);
  border-radius: 10px;
  padding: 12px 14px;
  color: #fff;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  margin-top: 12px;
}

.btn-google-maps-live:hover, .btn-google-maps-live:active {
  transform: scale(0.98);
  box-shadow: 0 6px 20px rgba(26, 115, 232, 0.6);
}

.gmaps-live-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gmaps-live-icon {
  font-size: 24px;
}

.gmaps-live-text {
  display: flex;
  flex-direction: column;
}

.gmaps-live-title {
  font-size: 12.5px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.2px;
}

.gmaps-live-sub {
  font-size: 10.5px;
  color: #d2e3fc;
}

.gmaps-live-arrow {
  font-size: 16px;
  color: #fff;
}

/* Link Update Tool */
.gmaps-link-update-wrap {
  margin-top: 4px;
  text-align: center;
}

.btn-toggle-link-edit {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 10.5px;
  cursor: pointer;
  padding: 4px 8px;
  text-decoration: underline;
  opacity: 0.8;
}

.btn-toggle-link-edit:hover {
  opacity: 1;
  color: var(--rose-light);
}

.gmaps-link-edit-box {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  animation: fadeInDown 0.25s ease-out;
}

.input-gmaps-link {
  flex: 1;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 42, 122, 0.35);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11px;
  color: #fff;
  outline: none;
}

.btn-save-gmaps-link {
  background: var(--rose-primary);
  border: none;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
}

.btn-refresh-loc {
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 42, 122, 0.35);
  color: #ffd6e7;
  font-size: 11.5px;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-refresh-loc:active {
  background: rgba(255, 42, 122, 0.2);
}

/* ========================================================
   ROMANTIC CHAT SYSTEM & USER AUTH STYLES
   ======================================================== */

/* Header Chat Button */
.chat-btn-wrap {
  position: relative;
  font-size: 17px !important;
}

.chat-unread-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 9px;
  height: 9px;
  background: #39ff14;
  border-radius: 50%;
  box-shadow: 0 0 8px #39ff14;
  animation: pulse-green 1.5s infinite;
}

/* Profile Logout Button */
.btn-profile-logout {
  position: absolute;
  top: 14px;
  left: 16px;
  background: rgba(255, 60, 60, 0.18);
  border: 1px solid rgba(255, 80, 80, 0.4);
  color: #ff94a4;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s ease;
  z-index: 10;
}

.btn-profile-logout:active {
  background: rgba(255, 60, 60, 0.35);
  color: #fff;
  transform: scale(0.96);
}

/* User Visit & Activity Stats Card */
.user-visits-stat-card {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 42, 122, 0.25);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin-bottom: 14px;
}

.user-visit-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.visit-avatar {
  font-size: 16px;
}

.visit-label {
  font-size: 11px;
  color: var(--text-muted);
}

.visit-number {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--gold-accent);
}

.user-visit-sep {
  width: 1px;
  height: 28px;
  background: rgba(255, 255, 255, 0.12);
}

/* Chat Modal Container */
.chat-modal-overlay {
  z-index: 10050 !important;
  touch-action: pan-y;
  overscroll-behavior: none !important;
  overscroll-behavior-y: none !important;
}

.chat-modal-card {
  max-width: 420px !important;
  width: 95% !important;
  height: 85vh !important;
  height: 85dvh !important;
  max-height: 640px !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1.5px solid var(--rose-primary) !important;
  box-shadow: 0 0 40px rgba(255, 42, 122, 0.35) !important;
  touch-action: none !important;
  overscroll-behavior: none !important;
  overscroll-behavior-y: none !important;
}

.chat-header {
  flex-shrink: 0 !important;
  touch-action: none !important;
  overscroll-behavior: none !important;
  overscroll-behavior-y: none !important;
}

.chat-stats-pill {
  flex-shrink: 0 !important;
  touch-action: none !important;
  overscroll-behavior: none !important;
  overscroll-behavior-y: none !important;
}

.chat-quick-emojis {
  flex-shrink: 0 !important;
  touch-action: pan-x !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  overscroll-behavior-y: contain !important;
}

.chat-input-bar {
  flex-shrink: 0 !important;
  touch-action: none !important;
  overscroll-behavior: none !important;
  overscroll-behavior-y: none !important;
}

/* Chat Header */
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(180deg, #2a0314, #18020b);
  border-bottom: 1px solid rgba(255, 42, 122, 0.3);
}

.chat-header-user {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chat-avatar-wrap {
  position: relative;
  width: 44px;
  height: 44px;
}

.chat-avatar-wrap img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--rose-primary);
  box-shadow: 0 0 12px var(--rose-glow);
}

.chat-avatar-badge {
  position: absolute;
  bottom: -4px;
  right: -2px;
  font-size: 13px;
}

.chat-live-pulse-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  background: #39ff14;
  border-radius: 50%;
  box-shadow: 0 0 8px #39ff14;
  border: 1.5px solid #18020b;
}

.chat-user-info h3 {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 2px 0;
}

.chat-presence-text {
  font-size: 11.5px;
  color: #ffd6e7;
  display: flex;
  align-items: center;
  gap: 4px;
}

.chat-presence-text .status-indicator {
  color: #39ff14;
  font-size: 11px;
}

.chat-presence-text.offline .status-indicator {
  color: #a0a0a0;
}

.chat-close-btn {
  position: static !important;
  font-size: 20px;
  color: #ffd6e7;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
}

/* Chat Stats Pill Bar */
.chat-stats-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.45);
  font-size: 11px;
  color: #ffccd5;
  border-bottom: 1px dashed rgba(255, 42, 122, 0.2);
}

.chat-stats-pill .sep {
  color: rgba(255, 255, 255, 0.3);
}

.chat-stats-pill strong {
  color: var(--gold-accent);
}

/* Chat Messages Body - Stable & Jitter-Free Ultra Smooth Scrolling */
.chat-messages-container {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  overscroll-behavior-y: contain !important;
  touch-action: pan-y !important;
  padding: 14px 14px 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: radial-gradient(circle at 50% 20%, #20020f, #0d0107);
  scrollbar-width: thin;
  scrollbar-color: var(--rose-primary) transparent;
}

.chat-messages-container::-webkit-scrollbar {
  width: 5px;
}

.chat-messages-container::-webkit-scrollbar-thumb {
  background: var(--rose-primary);
  border-radius: 4px;
}

.chat-messages-container * {
  touch-action: pan-y;
}

.chat-loading-placeholder {
  margin: auto;
  color: #ffccd5;
  font-size: 12.5px;
  opacity: 0.8;
}

/* Message Rows & Bubbles */
.chat-msg-row {
  display: flex;
  flex-direction: column;
  max-width: 82%;
  contain: layout style;
}

.chat-msg-row.new-incoming {
  animation: fadeInMsg 0.22s ease-out;
}

.chat-msg-row.sent {
  align-self: flex-end;
  align-items: flex-end;
}

.chat-msg-row.received {
  align-self: flex-start;
  align-items: flex-start;
}

.chat-bubble {
  padding: 9px 14px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.45;
  word-break: break-word;
}

.chat-msg-row.sent .chat-bubble {
  background: linear-gradient(135deg, #ff2a7a, #e6005c);
  color: #fff;
  border-bottom-right-radius: 3px;
  box-shadow: 0 4px 14px rgba(255, 42, 122, 0.35);
}

.chat-msg-row.received .chat-bubble {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 42, 122, 0.35);
  color: #ffeef4;
  border-bottom-left-radius: 3px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.chat-msg-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: rgba(255, 214, 231, 0.65);
  margin-top: 3px;
  padding: 0 4px;
}

.chat-seen-indicator {
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  margin-left: 2px;
  user-select: none;
  cursor: pointer;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  transition: all 0.2s ease;
}

.chat-seen-indicator.is-seen {
  color: #39ff14 !important; /* Green double check for Seen */
  letter-spacing: -2px;
  text-shadow: 0 0 6px rgba(57, 255, 20, 0.7);
}

.chat-seen-indicator.not-seen {
  color: #ff3366 !important; /* Red single check for Unseen */
  letter-spacing: 0;
  text-shadow: 0 0 6px rgba(255, 51, 102, 0.65);
}

.chat-msg-detail-popup {
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  background: rgba(22, 2, 14, 0.96);
  border: 1px solid rgba(255, 42, 122, 0.5);
  border-radius: 8px;
  padding: 4px 10px;
  margin-top: 4px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: fadeInMsg 0.18s ease-out;
}

.chat-msg-row.sent .chat-msg-detail-popup {
  align-self: flex-end;
}

.chat-msg-row.received .chat-msg-detail-popup {
  align-self: flex-start;
}

.chat-sender-tag {
  font-weight: 700;
  color: var(--gold-accent);
}

/* Quick Emojis Bar */
.chat-quick-emojis {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(10, 1, 6, 0.85);
  overflow-x: auto;
  border-top: 1px solid rgba(255, 42, 122, 0.2);
}

.btn-quick-emoji {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 42, 122, 0.25);
  color: #fff;
  font-size: 13px;
  padding: 4px 8px;
  border-radius: var(--radius-full);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.btn-quick-emoji:active {
  transform: scale(1.15);
  background: rgba(255, 42, 122, 0.3);
}

/* Chat Input Bar */
.chat-input-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #14010a;
  border-top: 1px solid rgba(255, 42, 122, 0.3);
}

.chat-input-field {
  flex: 1;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 42, 122, 0.4);
  border-radius: var(--radius-full);
  padding: 10px 16px;
  color: #fff;
  font-size: 13.5px;
  outline: none;
  transition: border-color 0.2s ease;
}

.chat-input-field:focus {
  border-color: var(--rose-primary);
  box-shadow: 0 0 12px rgba(255, 42, 122, 0.35);
}

.btn-chat-send {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rose-primary), #ff6097);
  border: none;
  color: #fff;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(255, 42, 122, 0.5);
  transition: transform 0.15s ease;
}

.btn-chat-send:active {
  transform: scale(0.92);
}

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

/* Hide Header Chat Button as requested (Floating Head is active everywhere) */
#btn-chat-toggle, .chat-btn-wrap {
  display: none !important;
}

/* ========================================================
   MESSENGER FLOATING CHAT HEAD (Draggable & Minimizable)
   ======================================================== */
.messenger-chat-head {
  position: fixed;
  right: 16px;
  bottom: 95px;
  width: 62px;
  height: 62px;
  z-index: 99999 !important;
  cursor: grab;
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-touch-callout: none !important;
  border-radius: 50% !important;
  background: transparent !important;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto !important;
  animation: messengerFloatPulse 3.5s infinite ease-in-out;
}

.messenger-chat-head * {
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  touch-action: none !important;
}

.messenger-chat-head.is-dragging {
  cursor: grabbing !important;
  animation: none !important;
  transform: scale(1.15) !important;
  transition: none !important;
}

.messenger-chat-head.snapping {
  transition: left 0.32s cubic-bezier(0.175, 0.885, 0.32, 1.275), top 0.2s ease-out !important;
}

.messenger-chat-head.pop-bounce {
  animation: popBounceAnim 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.messenger-chat-head.hidden-during-chat,
.messenger-chat-head.hidden-logged-out {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.messenger-head-avatar-wrap {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  padding: 2.5px;
  background: linear-gradient(135deg, #ff2a7a, #ffd700, #ff0055);
  box-shadow: 0 8px 24px rgba(255, 42, 122, 0.5), 0 0 16px rgba(255, 215, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

.messenger-head-avatar-wrap img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: #18020b;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

.messenger-head-role-badge {
  position: absolute;
  top: -4px;
  left: -2px;
  font-size: 14px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}

.messenger-head-live-dot {
  position: absolute;
  bottom: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  background: #39ff14;
  border-radius: 50%;
  border: 2px solid #18020b;
  box-shadow: 0 0 8px #39ff14;
}

.messenger-head-chat-icon {
  position: absolute;
  bottom: -2px;
  right: -2px;
  font-size: 14px;
  background: #ff2a7a;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

.messenger-unread-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 11px;
  background: #ff0055;
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 4px 12px rgba(255, 0, 85, 0.65);
  animation: badgePulse 1.8s infinite;
  z-index: 10;
}

@keyframes messengerFloatPulse {
  0%, 100% {
    transform: translateY(0);
    box-shadow: 0 8px 24px rgba(255, 42, 122, 0.45);
  }
  50% {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(255, 42, 122, 0.65);
  }
}

@keyframes popBounceAnim {
  0% { transform: scale(0.6); }
  50% { transform: scale(1.22); }
  100% { transform: scale(1); }
}

@keyframes badgePulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); box-shadow: 0 0 16px rgba(255, 0, 85, 0.95); }
  100% { transform: scale(1); }
}

/* Chat Header Minimize Button */
.chat-minimize-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 42, 122, 0.35);
  color: #ffd6e7;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}

.chat-minimize-btn:hover {
  background: rgba(255, 42, 122, 0.3);
  color: #fff;
  transform: scale(1.1);
}

.chat-minimize-btn:active {
  transform: scale(0.92);
}

/* ========================================================
   THEME SELECTOR DROPDOWN STYLING (Profile Page)
   ======================================================== */
.theme-selector-wrap {
  margin-bottom: 14px;
  width: 100%;
}

.btn-theme-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  color: #fff;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.btn-theme-toggle:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: var(--rose-primary);
}

.theme-toggle-left {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}

.theme-toggle-icon {
  font-size: 22px;
  filter: drop-shadow(0 2px 6px var(--rose-glow));
}

.theme-toggle-text {
  display: flex;
  flex-direction: column;
}

.theme-toggle-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
}

.theme-toggle-sub {
  font-size: 11px;
  color: var(--rose-light);
}

.theme-toggle-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.theme-mini-swatches {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.4);
  padding: 3px 6px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.mini-swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 4px rgba(0,0,0,0.5);
}

.theme-arrow-icon {
  font-size: 11px;
  color: var(--rose-light);
  transition: transform 0.3s ease;
}

.btn-theme-toggle.expanded .theme-arrow-icon {
  transform: rotate(180deg);
}

.theme-dropdown-container {
  margin-top: 8px;
  background: rgba(14, 2, 9, 0.95);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 20px var(--rose-glow);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: themeFadeIn 0.25s ease-out;
}

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

.theme-palette-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.theme-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.22s ease;
  user-select: none;
}

.theme-card-row:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.theme-card-row.active {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
  border-color: var(--rose-primary);
  box-shadow: 0 4px 16px var(--rose-glow), inset 0 0 10px rgba(255, 255, 255, 0.05);
}

.theme-card-info {
  display: flex;
  flex-direction: column;
  text-align: left;
  flex: 1;
}

.theme-card-info .theme-name {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.theme-card-info .theme-desc {
  font-size: 10.5px;
  color: var(--text-muted);
}

.theme-swatch-group {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 10px;
}

.swatch-circle {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.theme-check-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.theme-card-row.active .theme-check-badge {
  background: var(--rose-primary);
  color: #fff;
  border-color: var(--rose-primary);
  box-shadow: 0 2px 8px var(--rose-glow);
}