/* Sphere - Dark Social Platform */
:root {
  --bg-primary: #0a0a0f;
  --bg-secondary: #12121a;
  --bg-tertiary: #1a1a25;
  --border: #2a2a3a;
  --text-primary: #f0f0f5;
  --text-secondary: #8888aa;
  --text-muted: #555566;
  /* Surface colors for cards and elevated elements */
  --surface: #16161f;
  --surface-elevated: #1e1e2a;
  /* New brand colors - teal to blue */
  --accent: #0891b2;
  --accent-hover: #06d6a0;
  --accent-glow: rgba(8, 145, 178, 0.3);
  --accent-secondary: #3b82f6;
  --success: #06d6a0;
  --warning: #f59e0b;
  --danger: #ef4444;
  --gradient: linear-gradient(135deg, #06d6a0 0%, #0891b2 50%, #3b82f6 100%);
}

/* Light Theme */
html.light-theme,
[data-theme="light"] {
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f7;
  --bg-tertiary: #e8e8ed;
  --border: #d1d1d6;
  --text-primary: #1c1c1e;
  --text-secondary: #636366;
  --text-muted: #8e8e93;
  --surface: #f2f2f7;
  --surface-elevated: #ffffff;
  --accent-glow: rgba(8, 145, 178, 0.15);
  --gradient: linear-gradient(135deg, #06d6a0 0%, #0891b2 50%, #3b82f6 100%);
}

html.light-theme body,
[data-theme="light"] body {
  background: var(--bg-primary);
  color: var(--text-primary);
}

/* Reduce motion */
html.reduce-motion *,
html.reduce-motion *::before,
html.reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

/* Compact mode */
html.compact-mode .post {
  padding: 12px;
  margin-bottom: 8px;
}

html.compact-mode .view-header {
  padding: 8px 16px;
}

html.compact-mode .settings-section {
  padding: 12px 0;
}

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

html {
  height: 100%;
  width: 100%;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.5;
  overflow-x: hidden;
  min-height: 100%;
  width: 100%;
}

#app {
  min-height: 100vh;
  width: 100%;
}

/* Page containers */
.page {
  min-height: 100vh;
  width: 100%;
}

#landing-page {
  min-height: 100vh;
  width: 100%;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
}

a {
  color: var(--accent);
  text-decoration: none;
}

.hidden { display: none !important; }

/* ==========================================
   SPHERE DESIGN SYSTEM - Buttons

   Variants: .btn-primary, .btn-secondary, .btn-ghost, .btn-danger, .btn-text
   Sizes: .btn-xs, .btn-sm, (default), .btn-lg
   Modifiers: .btn-full, .btn-icon, .btn-icon-sm
   States: :hover, :active, :disabled
   ========================================== */

/* Base button reset */
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-danger,
.btn-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.btn-primary {
  background: var(--accent);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 50px;
  font-weight: 600;
  transition: background 0.2s ease, box-shadow 0.2s ease;
  will-change: background, box-shadow;
}

.btn-primary:hover {
  background: var(--accent-hover);
  box-shadow: 0 0 20px var(--accent-glow);
}

.btn-ghost {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border);
  padding: 10px 20px;
  border-radius: 50px;
  font-weight: 500;
  transition: border-color 0.2s ease, background 0.2s ease;
  will-change: border-color, background;
}

.btn-ghost:hover {
  border-color: var(--text-secondary);
  background: var(--bg-tertiary);
}

.btn-secondary {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  padding: 10px 20px;
  border-radius: 50px;
  font-weight: 500;
  transition: background 0.2s ease, border-color 0.2s ease;
  will-change: background, border-color;
}

.btn-secondary:hover {
  background: var(--bg-secondary);
  border-color: var(--accent);
}

/* Button sizes */
.btn-lg { padding: 14px 32px; font-size: 1rem; border-radius: 50px; }
.btn-sm { padding: 6px 16px; font-size: 0.8125rem; border-radius: 50px; }
.btn-xs { padding: 4px 12px; font-size: 0.75rem; border-radius: 50px; }
.btn-full { width: 100%; }

/* Button states */
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-ghost:disabled,
.btn-danger:disabled,
.btn-text:disabled {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
}

.logo-icon {
  width: 40px;
  height: 40px;
  background: var(--gradient);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.25rem;
}

.logo-icon-img {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: contain;
}

.auth-logo-img {
  width: 56px;
  height: 56px;
  margin-bottom: 8px;
}

.sidebar-logo-img {
  width: 42px;
  height: 42px;
}

/* Landing Page */
.landing-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(10, 10, 15, 0.8);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.nav-actions {
  display: flex;
  gap: 12px;
}

.landing-hero {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  padding: 120px 60px 60px;
  max-width: 1400px;
  margin: 0 auto;
  align-items: center;
}

.hero-content h1 {
  font-size: 4rem;
  line-height: 1.1;
  margin-bottom: 24px;
}

.gradient-text {
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: 1.25rem;
  color: var(--text-secondary);
  margin-bottom: 32px;
  max-width: 500px;
}

.hero-cta {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.hero-stats {
  display: flex;
  gap: 40px;
}

.stat {
  display: flex;
  flex-direction: column;
}

.stat-value {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent);
}

.stat-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* Hero Visual */
.hero-visual {
  position: relative;
  height: 500px;
}

.floating-card {
  position: absolute;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  animation: float 6s ease-in-out infinite;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.floating-card.card-1 {
  top: 50px;
  left: 20%;
  animation-delay: 0s;
}

.floating-card.card-2 {
  top: 200px;
  right: 10%;
  animation-delay: 2s;
}

.floating-card.card-3 {
  bottom: 100px;
  left: 30%;
  animation-delay: 4s;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.card-avatar {
  width: 48px;
  height: 48px;
  background: var(--gradient);
  border-radius: 50%;
}

.card-icon {
  width: 48px;
  height: 48px;
  background: var(--bg-tertiary);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--accent);
}

.card-name {
  font-weight: 600;
  margin-bottom: 4px;
}

.card-metric {
  color: var(--success);
  font-weight: 600;
}

/* Features Section */
.features-section {
  padding: 80px 60px;
  max-width: 1200px;
  margin: 0 auto;
}

.features-section h2 {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 60px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.feature-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px 24px;
  transition: all 0.3s;
}

.feature-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
}

.feature-icon {
  font-size: 2rem;
  margin-bottom: 16px;
}

.feature-card h3 {
  margin-bottom: 12px;
}

.feature-card p {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* Modal */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
}

.modal-content {
  position: relative;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 24px;
  cursor: pointer;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  margin-top: 16px;
}

/* Auth Modal */
.auth-header {
  text-align: center;
  margin-bottom: 32px;
}

.auth-header .logo-icon {
  margin: 0 auto 16px;
}

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

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--text-secondary);
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 1rem;
  transition: all 0.2s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.auth-switch {
  text-align: center;
  margin-top: 24px;
  color: var(--text-secondary);
}

.auth-switch a {
  margin-left: 4px;
}

.auth-terms {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 16px;
  line-height: 1.5;
}

.auth-terms a {
  color: var(--accent);
  text-decoration: underline;
}

.auth-terms a:hover {
  color: var(--accent-hover);
}

.auth-forgot {
  text-align: right;
  margin: -8px 0 16px 0;
  font-size: 0.875rem;
}

.auth-forgot a {
  color: var(--text-secondary);
  text-decoration: none;
}

.auth-forgot a:hover {
  color: var(--accent);
}

.auth-subtitle {
  text-align: center;
  color: var(--text-secondary);
  margin-bottom: 24px;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Reset Password Page */
.reset-password-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.reset-password-card {
  background: var(--card-bg);
  border-radius: 16px;
  padding: 40px;
  width: 100%;
  max-width: 400px;
  border: 1px solid var(--border-color);
}

#reset-password-page .landing-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 20px 40px;
  background: rgba(10, 10, 15, 0.9);
  backdrop-filter: blur(10px);
  z-index: 100;
}

/* Main App Layout - Facebook-style three-column */
#main-app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  max-width: 100vw;
  background: var(--bg-primary);
}

/* Facebook-style Top Navigation */
.fb-top-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  min-height: 56px;
  padding: 0 16px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
}

.fb-top-nav-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.fb-nav-logo {
  width: 40px;
  height: 40px;
  cursor: pointer;
}

.fb-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.fb-search-bar {
  position: relative;
  display: flex;
  align-items: center;
  width: 240px;
}

.fb-search-bar .search-icon {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  pointer-events: none;
}

.fb-search-input {
  width: 100%;
  padding: 8px 12px 8px 36px;
  background: var(--bg-tertiary);
  border: none;
  border-radius: 50px;
  color: var(--text-primary);
  font-size: 0.9rem;
}

.fb-search-input:focus {
  outline: none;
  background: var(--bg-primary);
}

.fb-top-nav-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 1;
}

.fb-nav-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 52px;
  color: var(--text-muted);
  border-radius: 8px;
  transition: background 0.2s ease;
  cursor: pointer;
  text-decoration: none;
}

.fb-nav-icon svg {
  width: 28px;
  height: 28px;
}

.fb-nav-icon:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.fb-nav-icon.active {
  color: var(--accent);
  border-bottom: 3px solid var(--accent);
  border-radius: 0;
}

.fb-top-nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: flex-end;
}

.fb-nav-icon-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--bg-tertiary);
  border: none;
  border-radius: 50%;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.2s ease;
}

.fb-nav-icon-btn svg {
  width: 20px;
  height: 20px;
}

.fb-nav-icon-btn:hover {
  background: var(--border);
}

.fb-nav-profile {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  border: none;
  padding: 0;
}

.fb-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fb-nav-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--danger);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}

.fb-nav-badge.hidden {
  display: none;
}

/* Three-Column Layout */
.fb-layout {
  display: flex;
  width: 100%;
  max-width: 100vw;
  flex: 1;
}

/* Left Sidebar - Facebook-style */
.fb-left-sidebar {
  width: 280px;
  flex-shrink: 0;
  position: sticky;
  top: 56px;
  height: calc(100vh - 56px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 8px;
  border-right: 1px solid var(--border);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.fb-left-sidebar::-webkit-scrollbar {
  width: 8px;
}

.fb-left-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.fb-left-sidebar::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

.fb-left-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fb-left-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--text-primary);
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s ease;
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font-size: 0.95rem;
}

.fb-left-item:hover {
  background: var(--bg-tertiary);
}

.fb-left-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.fb-left-icon {
  width: 36px;
  height: 36px;
  padding: 6px;
  color: var(--accent);
  flex-shrink: 0;
}

.fb-see-more {
  color: var(--text-secondary);
}

.fb-more-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fb-more-items.hidden {
  display: none;
}

.fb-left-divider {
  height: 1px;
  background: var(--border);
  margin: 8px 0;
}

.fb-shortcuts-header {
  padding: 8px 12px;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.fb-shortcuts-header h3 {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
}

/* Main Content - Centered with max-width */
.main-content {
  flex: 1;
  min-width: 0;
  max-width: 680px;
  margin: 0 auto;
  padding: 16px;
}

/* Right Sidebar - Facebook-style */
.fb-right-sidebar {
  width: 280px;
  flex-shrink: 0;
  position: sticky;
  top: 56px;
  height: calc(100vh - 56px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.fb-right-sidebar::-webkit-scrollbar {
  width: 8px;
}

.fb-right-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.fb-right-sidebar::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

.fb-sidebar-section {
  margin-bottom: 20px;
}

.fb-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.fb-sidebar-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0 0 12px 0;
}

.fb-sidebar-link {
  font-size: 0.85rem;
  color: var(--accent);
  text-decoration: none;
}

.fb-sidebar-link:hover {
  text-decoration: underline;
}

/* Sponsored Ad Carousel */
.fb-sponsored-carousel {
  overflow: hidden;
  position: relative;
}

.fb-sponsored-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  width: 200%;
}

.fb-sponsored-item {
  display: flex;
  gap: 12px;
  padding: 8px;
  border-radius: 8px;
  transition: background 0.2s ease;
  cursor: pointer;
  width: 50%;
  flex-shrink: 0;
  box-sizing: border-box;
}

.fb-sponsored-item:hover {
  background: var(--bg-tertiary);
}

.fb-sponsored-img {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  object-fit: cover;
}

.fb-sponsored-content {
  flex: 1;
}

.fb-sponsored-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.fb-sponsored-description {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Video sponsor ad rotation */
.video-sponsor-ad {
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.video-sponsor-ad.ad-fade-out {
  opacity: 0;
  transform: translateY(4px);
}

.video-sponsor-ad.ad-fade-in {
  opacity: 1;
  transform: translateY(0);
}

.fb-empty-state {
  font-size: 0.9rem;
  color: var(--text-muted);
  padding: 8px;
}

.fb-sidebar-divider {
  height: 1px;
  background: var(--border);
  margin: 16px 0;
}

/* Responsive behavior */
@media (max-width: 1280px) {
  .fb-right-sidebar {
    display: none;
  }
}

@media (max-width: 1024px) {
  .fb-left-sidebar {
    display: none;
  }

  .main-content {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .fb-search-bar {
    width: 180px;
  }

  .fb-nav-icon {
    width: 64px;
  }

  .fb-top-nav-center {
    gap: 0;
  }
}

@media (max-width: 640px) {
  .fb-top-nav-center {
    display: none;
  }

  .fb-search-bar {
    width: 140px;
  }
}

/* Sidebar */
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 20px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

.sidebar-logo {
  padding: 12px 0 24px;
}

.sidebar-nav {
  flex: 1;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  color: var(--text-primary);
  border-radius: 50px;
  margin-bottom: 4px;
  transition: all 0.2s;
  font-weight: 500;
}

.nav-item:hover {
  background: var(--bg-tertiary);
}

.nav-item.active {
  font-weight: 700;
}

.nav-item svg {
  width: 24px;
  height: 24px;
}

/* Removed unused .post-btn class (post button was redundant in sidebar) */

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.2s;
}

.sidebar-user:hover {
  background: var(--bg-tertiary);
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  object-fit: cover;
}

.user-info {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-weight: 600;
}

.user-handle {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

/* Main Content */
.main-content {
  border-right: 1px solid var(--border);
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.view-header {
  position: sticky;
  top: 0;
  background: rgba(10, 10, 15, 0.9);
  backdrop-filter: blur(10px);
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  z-index: 10;
}

.view-header h1 {
  font-size: 1.25rem;
}

.feed-tabs {
  display: flex;
  margin-top: 16px;
}

.tab {
  flex: 1;
  padding: 12px;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}

.tab:hover {
  background: var(--bg-tertiary);
}

.tab.active {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
}

/* Compose Box */
.compose-box {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
}

.compose-input {
  flex: 1;
  min-height: 60px;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 1.1rem;
  resize: none;
  outline: none;
}

.compose-input:empty:before {
  content: attr(data-placeholder);
  color: var(--text-muted);
}

/* Posts */
.post {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  transition: background 0.2s;
}

.post:hover {
  background: var(--bg-secondary);
}

.post-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.post-author {
  flex: 1;
}

.post-name {
  font-weight: 600;
}

.post-handle {
  color: var(--text-secondary);
  margin-left: 4px;
}

.post-time {
  color: var(--text-muted);
  font-size: 0.875rem;
}

.post-content {
  margin: 12px 0 12px 52px;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Truncated long posts - "See more" pattern */
.post-content-truncated {
  max-height: 5.4em; /* ~4 lines at 1.35 line-height */
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}

.post-content-expanded {
  max-height: none;
  -webkit-mask-image: none;
  mask-image: none;
}

.see-more-btn {
  display: inline-block;
  padding-left: 16px;
  margin-top: 0;
  margin-bottom: 8px;
  color: var(--text-secondary, #65676b);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

.see-more-btn:hover {
  text-decoration: underline;
  color: var(--text-primary, #1c1e21);
}

.post-content a.post-link,
.comment-text a.post-link {
  color: #1877f2;
  text-decoration: none;
  word-break: break-all;
}

.post-content a.post-link:hover,
.comment-text a.post-link:hover {
  text-decoration: underline;
}

.post-content-styled a.post-link {
  color: #fff;
  text-decoration: underline;
}

.post-media {
  margin: 12px 0 12px 52px;
  border-radius: 16px;
  overflow: hidden;
}

.post-media img,
.post-media video {
  max-width: 100%;
  max-height: 400px;
  object-fit: cover;
}

.post-actions {
  display: flex;
  gap: 60px;
  margin-left: 52px;
}

.post-action {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 50px;
  transition: all 0.2s;
}

.post-action:hover {
  color: var(--accent);
  background: var(--accent-glow);
}

.post-action.liked {
  color: var(--danger);
}

.post-action svg {
  width: 18px;
  height: 18px;
}

/* Reaction emoji in button */
.reaction-emoji {
  font-size: 18px;
  line-height: 1;
}

/* Legacy Reaction Picker - for old reaction-wrapper usage */
.reaction-wrapper {
  position: relative;
}

.reaction-wrapper .reaction-picker {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 6px 8px;
  display: flex;
  gap: 4px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  z-index: 100;
  margin-bottom: 8px;
  animation: reactionPickerSlideIn 0.2s ease;
}

@keyframes reactionPickerSlideIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

.reaction-wrapper .reaction-btn {
  font-size: 24px;
  padding: 6px;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 50%;
  transition: transform 0.15s ease, background 0.15s ease;
  line-height: 1;
}

.reaction-wrapper .reaction-btn:hover {
  transform: scale(1.3);
  background: var(--bg-tertiary);
}

/* Poll */
.poll {
  margin: 12px 0 12px 52px;
}

.poll-option-item {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}

.poll-option-item:hover {
  border-color: var(--accent);
}

.poll-option-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--accent-glow);
  z-index: 0;
}

.poll-option-text {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
}

/* Right Sidebar */
.right-sidebar {
  padding: 20px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.search-box input {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 50px;
  color: var(--text-primary);
  font-size: 0.9rem;
}

.search-box input:focus {
  outline: none;
  border-color: var(--accent);
}

.sidebar-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  margin-top: 20px;
}

.sidebar-card h3 {
  margin-bottom: 16px;
  font-size: 1.1rem;
}

/* Profile */
.profile-header {
  position: relative;
}

.profile-cover {
  height: 200px;
  background: var(--gradient);
  background-size: cover;
  background-position: center;
}

.profile-info {
  padding: 0 20px 20px;
  position: relative;
}

.profile-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 4px solid var(--bg-primary);
  margin-top: -60px;
  background: var(--bg-secondary);
  object-fit: cover;
}

.profile-actions {
  position: absolute;
  right: 20px;
  top: 16px;
  display: flex;
  gap: 12px;
}

.profile-handle {
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.profile-bio {
  margin-bottom: 16px;
}

.profile-stats {
  display: flex;
  gap: 24px;
  color: var(--text-secondary);
}

.profile-stats .stat-item {
  cursor: pointer;
  transition: color 0.2s;
}

.profile-stats .stat-item:hover {
  color: var(--accent);
}

.profile-stats strong {
  color: var(--text-primary);
  font-weight: 700;
}

.profile-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
}

/* ============================================
   FACEBOOK-STYLE PROFILE LAYOUT
   ============================================ */

.profile-header-container {
  background: var(--bg-primary);
  border-radius: 0 0 8px 8px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.profile-cover-wrapper {
  position: relative;
}

.profile-cover {
  height: 400px;
  background: linear-gradient(135deg, #0891b2 0%, #06d6a0 100%);
  background-size: cover;
  background-position: center;
  border-radius: 0;
  position: relative;
  overflow: hidden;
}

.profile-cover::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.1) 100%);
  pointer-events: none;
}

.cover-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: rgba(255,255,255,0.6);
}

.cover-placeholder svg {
  opacity: 0.5;
  margin-bottom: 8px;
}

.cover-actions {
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: flex;
  gap: 8px;
}

.cover-actions button {
  background: rgba(255,255,255,0.95);
  color: #1c1e21;
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.cover-actions button:hover {
  background: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.profile-info-section {
  display: block;
  padding: 0 16px 0;
  position: relative;
  max-width: 940px;
  margin: 0 auto;
}

.profile-avatar-wrapper {
  position: absolute;
  bottom: 16px;
  left: 16px;
  margin: 0;
  flex-shrink: 0;
  z-index: 10;
}

.profile-avatar-large {
  width: 176px;
  height: 176px;
  border-radius: 50%;
  border: 4px solid var(--bg-primary);
  object-fit: cover;
  background: var(--bg-secondary);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.profile-avatar-large:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 24px rgba(8, 145, 178, 0.25);
  border-color: var(--accent);
}

.avatar-edit-btn {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-secondary);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.profile-details {
  padding: 16px 16px 12px 16px;
  min-width: 0;
  border-bottom: 1px solid var(--border);
}

.profile-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.profile-name-row h1 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.profile-handle {
  color: var(--text-secondary);
  margin-bottom: 4px;
  font-size: 0.95rem;
}

.profile-bio {
  color: var(--text-primary);
  margin-bottom: 12px;
  line-height: 1.4;
}

.profile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 12px;
}

.profile-meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.profile-meta-item svg {
  opacity: 0.7;
}

.profile-action-buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

/* Profile Friends Row (Facebook-style) */
.profile-friends-row {
  padding: 12px 16px;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
}

.profile-friends-row-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.profile-friends-row-header h4 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.profile-friends-row-header a {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
}

.profile-friends-row-header a:hover {
  text-decoration: underline;
}

.profile-friends-avatars {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.profile-friends-avatars::-webkit-scrollbar {
  display: none;
}

.friend-avatar-item {
  text-align: center;
  min-width: 80px;
  cursor: pointer;
}

.friend-avatar-item img {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  object-fit: cover;
  margin-bottom: 4px;
  border: 1px solid var(--border);
  transition: transform 0.2s, border-color 0.2s;
}

.friend-avatar-item img:hover {
  transform: scale(1.05);
  border-color: var(--accent);
}

.friend-avatar-item span {
  font-size: 0.85rem;
  color: var(--text-primary);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
}

/* List/Grid View Toggle */
/* Profile Create Post Composer (Facebook style) */
.profile-create-post {
  background: var(--bg-primary);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--border);
}

.create-post-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.composer-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.composer-trigger {
  flex: 1;
  background: var(--bg-secondary);
  border: none;
  border-radius: 24px;
  padding: 12px 16px;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease;
}

.composer-trigger:hover {
  background: var(--bg-tertiary);
}

.composer-placeholder {
  color: var(--text-secondary);
  font-size: 15px;
}

.create-post-actions {
  display: flex;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.post-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 10px 12px;
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
}

.post-action-btn:hover {
  background: var(--bg-secondary);
}

.post-action-btn svg {
  flex-shrink: 0;
}

.post-action-btn span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.posts-view-toggle {
  display: flex;
  gap: 4px;
  background: var(--bg-secondary);
  border-radius: 8px;
  padding: 4px;
  margin-bottom: 16px;
}

.view-toggle-btn {
  flex: 1;
  padding: 8px 16px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  transition: background 0.2s, color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.view-toggle-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.view-toggle-btn.active {
  background: var(--accent);
  color: white;
}

.posts-grid-view {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.posts-grid-view .post {
  border-radius: 8px;
  overflow: hidden;
}

.posts-grid-view .post-media {
  aspect-ratio: 1;
}

.posts-grid-view .post-content {
  display: none;
}

.posts-grid-view .post-actions {
  display: none;
}

/* Featured Photos Section */
.profile-featured-section {
  background: var(--bg-primary);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.featured-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.featured-header h3 {
  font-size: 1.25rem;
  font-weight: 700;
}

.featured-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.featured-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
}

/* Profile Tabs Navigation */
.profile-tabs-nav {
  background: var(--bg-primary);
  border-radius: 8px;
  padding: 4px 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  position: sticky;
  top: 60px;
  z-index: 50;
  border-bottom: 1px solid var(--border);
}

.profile-tabs-scroll {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
}

.profile-tabs-scroll::-webkit-scrollbar {
  display: none;
}

.profile-tab {
  padding: 16px 16px;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.profile-tab:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  transform: translateY(-1px);
}

.profile-tab.active {
  color: var(--accent);
}

.profile-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #0891b2 0%, #06d6a0 100%);
  border-radius: 3px 3px 0 0;
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.profile-tab-more {
  padding: 12px;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 50%;
}

.profile-tab-more:hover {
  background: var(--bg-hover);
}

/* Profile Tabs Dropdown */
.profile-tabs-dropdown {
  position: absolute;
  right: 12px;
  top: 100%;
  background: var(--bg-primary);
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.15);
  min-width: 180px;
  z-index: 100;
  padding: 8px 0;
  border: 1px solid var(--border);
}

.profile-tabs-dropdown button {
  display: block;
  width: 100%;
  padding: 10px 16px;
  text-align: left;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text-primary);
  font-size: 14px;
  transition: background 0.15s;
}

.profile-tabs-dropdown button:hover {
  background: var(--bg-hover);
}

/* Tab Content */
.profile-tab-content {
  max-width: 940px;
  margin: 0 auto;
}

.profile-tab-panel {
  display: none;
  min-height: 200px; /* Prevent layout shift when loading content */
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
}

.profile-tab-panel.active {
  display: block;
  opacity: 1;
}

/* Prevent flickering during profile content updates */
.profile-posts-main,
.profile-intro-sidebar,
#profile-posts,
#profile-friends-grid,
#profile-photos-gallery {
  min-height: 100px;
}

/* Smooth tab content transitions */
.profile-tab-content {
  contain: layout style;
}

/* Posts Tab - Two Column Layout */
.profile-posts-layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 16px;
}

.profile-intro-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.intro-card,
.photos-card,
.friends-card {
  background: var(--bg-primary);
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--border);
}

.intro-card h4,
.photos-card h4,
.friends-card h4 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 12px;
}

/* Intro Card Items */
.intro-bio {
  color: var(--text-primary);
  margin-bottom: 16px;
  line-height: 1.5;
  text-align: center;
}

.intro-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.intro-item svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

.intro-item strong {
  color: var(--text-primary);
}

.intro-item a {
  color: var(--accent);
  text-decoration: none;
}

.intro-item a:hover {
  text-decoration: underline;
}

.photos-card-header,
.friends-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.photos-card-header a,
.friends-card-header a {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.9rem;
}

.photos-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.photos-preview-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.photos-preview-grid img:hover {
  opacity: 0.9;
  transform: scale(1.05);
}

.friends-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.friend-preview-item {
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.friend-preview-item:hover {
  transform: translateY(-2px);
}

.friend-preview-item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 4px;
  transition: opacity 0.2s ease;
}

.friend-preview-item:hover img {
  opacity: 0.9;
}

.friend-preview-item span {
  font-size: 0.8rem;
  color: var(--text-primary);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-posts-main {
  min-width: 0;
}

/* About Tab Layout */
.about-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 16px;
  background: var(--bg-primary);
  border-radius: 8px;
  overflow: hidden;
}

.about-nav {
  display: flex;
  flex-direction: column;
  padding: 8px;
  border-right: 1px solid var(--border);
}

.about-nav-item {
  padding: 12px 16px;
  background: none;
  border: none;
  text-align: left;
  color: var(--text-primary);
  font-weight: 500;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.2s;
}

.about-nav-item:hover {
  background: var(--bg-hover);
}

.about-nav-item.active {
  background: var(--accent-bg);
  color: var(--accent);
}

.about-content {
  padding: 24px;
}

.about-section {
  margin-bottom: 32px;
}

.about-section h4 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--text-primary);
}

.about-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.about-item:last-child {
  border-bottom: none;
}

.about-item-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
}

.about-item-content {
  flex: 1;
}

.about-item-content h5 {
  font-weight: 600;
  margin-bottom: 2px;
}

.about-item-content p {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.about-item-content a {
  color: var(--accent);
  text-decoration: none;
}

.about-item-content a:hover {
  text-decoration: underline;
}

.about-subsection {
  margin-bottom: 24px;
}

.about-subsection-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.btn-icon-sm {
  background: none;
  border: none;
  width: 28px;
  height: 28px;
  padding: 0;
  cursor: pointer;
  color: var(--text-secondary);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}

.btn-icon-sm:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.about-item {
  position: relative;
}

.about-item .btn-icon-sm {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.2s;
}

.about-item:hover .btn-icon-sm {
  opacity: 1;
}

.about-item-card {
  position: relative;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  transition: box-shadow 0.2s;
}

.about-item-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.about-item-card .about-item-content {
  flex: 1;
}

.about-item-card .about-item-content strong {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--text-primary);
}

.about-item-card .about-description {
  margin-top: 8px;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
}

.about-subsection h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--text-primary);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 640px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

.profile-dropdown-menu {
  animation: slideDown 0.2s ease;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-primary);
}

.profile-dropdown-menu .profile-menu-item {
  color: var(--text-primary);
  transition: background 0.15s ease;
}

.profile-dropdown-menu .profile-menu-item:hover {
  background: var(--bg-tertiary);
}

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

/* Friends Tab */
.friends-tab-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  background: var(--bg-primary);
  padding: 16px;
  border-radius: 8px;
}

.friends-tab-header h3 {
  font-size: 1.25rem;
  font-weight: 700;
}

.friends-search input {
  padding: 10px 16px;
  background: var(--bg-tertiary);
  border: none;
  border-radius: 20px;
  width: 250px;
  color: var(--text-primary);
}

.friends-filter-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.filter-btn {
  padding: 8px 16px;
  background: var(--bg-secondary);
  border: none;
  border-radius: 20px;
  color: var(--text-primary);
  font-weight: 500;
  cursor: pointer;
}

.filter-btn.active {
  background: var(--accent-bg);
  color: var(--accent);
}

.friends-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.friend-card {
  background: var(--bg-primary);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  gap: 12px;
}

.friend-card img {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  object-fit: cover;
}

.friend-card-info {
  flex: 1;
}

.friend-card-info h4 {
  font-weight: 600;
  margin-bottom: 4px;
}

.friend-card-info p {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

/* Photos Tab */
.photos-tab-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  background: var(--bg-primary);
  padding: 16px;
  border-radius: 8px;
}

.photos-tab-header h3 {
  font-size: 1.25rem;
  font-weight: 700;
}

.photos-view-toggle {
  display: flex;
  gap: 8px;
}

.view-btn {
  padding: 8px 16px;
  background: var(--bg-secondary);
  border: none;
  border-radius: 8px;
  color: var(--text-primary);
  cursor: pointer;
}

.view-btn.active {
  background: var(--accent-bg);
  color: var(--accent);
}

.photos-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.photos-gallery img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  cursor: pointer;
}

.albums-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.album-card {
  background: var(--bg-primary);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}

.album-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.album-card-info {
  padding: 12px;
}

.album-card-info h4 {
  font-weight: 600;
}

.album-card-info p {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

/* Category Buttons */
.likes-categories {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.category-btn {
  padding: 8px 16px;
  background: var(--bg-secondary);
  border: none;
  border-radius: 20px;
  color: var(--text-primary);
  cursor: pointer;
}

.category-btn.active {
  background: var(--accent-bg);
  color: var(--accent);
}

.likes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.empty-state {
  text-align: center;
  color: var(--text-muted);
  padding: 60px 20px;
}

/* Videos Gallery */
.videos-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* Reels Grid */
.reels-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.reels-grid .reel-thumb {
  aspect-ratio: 9/16;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}

/* Check-ins */
.checkins-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.checkin-card {
  background: var(--bg-primary);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  gap: 12px;
}

/* Responsive */
@media (max-width: 768px) {
  .profile-cover {
    height: 200px;
  }

  .profile-info-section {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .profile-avatar-wrapper {
    margin-right: 0;
    margin-top: -60px;
  }

  .profile-avatar-large {
    width: 120px;
    height: 120px;
  }

  .profile-name-row h1 {
    font-size: 1.5rem;
  }

  .profile-posts-layout {
    grid-template-columns: 1fr;
  }

  .profile-intro-sidebar {
    order: -1;
  }

  .about-layout {
    grid-template-columns: 1fr;
  }

  .about-nav {
    flex-direction: row;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 8px;
  }

  .about-nav-item {
    white-space: nowrap;
  }

  .friends-grid {
    grid-template-columns: 1fr;
  }

  .photos-gallery {
    grid-template-columns: repeat(3, 1fr);
  }

  .likes-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Profile Cover - No Cover State */
.profile-cover.no-cover {
  background: var(--gradient);
  background-size: cover;
}

/* Edit Profile Modal - Banner Upload */
.edit-profile-modal-content {
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
}

.banner-upload-section {
  margin-bottom: 24px;
}

.banner-upload-section > label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--text-primary);
}

.banner-preview-container {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}

.banner-preview {
  width: 100%;
  height: 120px;
  background: var(--bg-tertiary);
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}

.banner-preview.has-image .banner-placeholder {
  display: none;
}

.banner-preview.uploading {
  opacity: 0.5;
}

.banner-preview.uploading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  border: 3px solid var(--primary);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.banner-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
}

.banner-placeholder svg {
  opacity: 0.5;
}

.banner-upload-overlay {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: flex;
  gap: 8px;
}

.banner-upload-btn,
.banner-remove-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.2s;
}

.banner-upload-btn:hover,
.banner-remove-btn:hover {
  background: rgba(0, 0, 0, 0.85);
}

.banner-remove-btn {
  background: rgba(239, 68, 68, 0.8);
}

.banner-remove-btn:hover {
  background: rgba(239, 68, 68, 1);
}

.banner-remove-btn.hidden {
  display: none;
}

/* Creator Dashboard */
.creator-dashboard {
  padding: 20px;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

.stat-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}

.stat-card .stat-label {
  display: block;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.stat-card .stat-value {
  font-size: 1.75rem;
  color: var(--text-primary);
}

.creator-section {
  margin-bottom: 32px;
}

.creator-section h3 {
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

/* Ad Revenue Section */
.ad-revenue-section .section-description {
  color: var(--text-secondary);
  margin-bottom: 20px;
  font-size: 0.9rem;
}

.ad-toggle-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.04) 0%, rgba(6, 214, 160, 0.02) 100%);
  padding: 6px 8px;
  border-radius: 6px;
  margin-bottom: 4px;
  border: 1px solid rgba(8, 145, 178, 0.1);
}

.ad-toggle-info {
  flex: 1;
}

.ad-toggle-label {
  font-weight: 600;
  font-size: 0.65rem;
  margin-bottom: 0;
  color: var(--text-primary);
  line-height: 1.3;
}

.ad-toggle-description {
  color: var(--text-secondary);
  font-size: 0.55rem;
  line-height: 1.2;
}

/* ==========================================
   SPHERE DESIGN SYSTEM - Toggles

   Standard: .toggle-switch (44×24px)
   Settings: .toggle (44×24px)
   Both use: <label class="toggle(-switch)"><input type="checkbox"><span class="toggle-slider"></span></label>
   ========================================== */

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--border);
  border: none;
  border-radius: 12px;
  transition: background 0.2s ease;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  background: white;
  border-radius: 50%;
  transition: transform 0.2s ease, left 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked + .toggle-slider {
  background: var(--accent);
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateY(-50%) translateX(20px);
}

.ad-stats-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.ad-stat-card {
  background: var(--bg-tertiary);
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  border: 1px solid var(--border);
}

.ad-stat-label {
  display: block;
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin-bottom: 8px;
}

.ad-stat-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  font-family: 'Space Grotesk', sans-serif;
  color: var(--success);
}

.ad-performance-section h4 {
  margin-bottom: 16px;
  color: var(--text-primary);
  font-size: 0.95rem;
}

.ad-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.ad-metric {
  background: var(--bg-secondary);
  padding: 6px 4px;
  border-radius: 6px;
  text-align: center;
  border: 1px solid var(--border);
}

.ad-metric-value {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 1px;
}

.ad-metric-label {
  display: block;
  color: var(--text-muted);
  font-size: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

@media (max-width: 768px) {
  .ad-toggle-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .toggle-switch {
    margin-left: 0;
  }

  .ad-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
  }
}

.export-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.tiers-list {
  margin-bottom: 16px;
}

.tier-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 4px;
}

.tier-card h4 {
  margin-bottom: 2px;
  font-size: 0.7rem;
}

.tier-price {
  color: var(--accent);
  font-weight: 700;
  font-size: 0.8rem;
}

.earnings-list {
  max-height: 300px;
  overflow-y: auto;
}

.earning-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.earning-amount {
  color: var(--success);
  font-weight: 600;
}

/* Messages */
.messages-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  height: calc(100vh - 60px);
}

.conversations-list {
  border-right: 1px solid var(--border);
  overflow-y: auto;
}

.conversation-item {
  display: flex;
  gap: 12px;
  padding: 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.2s;
}

.conversation-item:hover {
  background: var(--bg-secondary);
}

.conversation-item.active {
  background: var(--bg-tertiary);
}

.messages-panel {
  display: flex;
  flex-direction: column;
}

.messages-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.messages-list {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.message {
  max-width: 70%;
  margin-bottom: 12px;
}

.message.sent {
  margin-left: auto;
}

.message-bubble {
  padding: 12px 16px;
  border-radius: 18px;
  background: var(--bg-tertiary);
}

.message.sent .message-bubble {
  background: var(--accent);
}

.message-input-area {
  padding: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 12px;
}

.message-input-area input {
  flex: 1;
  padding: 12px 16px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 50px;
  color: var(--text-primary);
}

/* Groups */
.groups-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 20px;
}

.group-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s;
}

.group-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.group-cover {
  height: 80px;
  background: var(--gradient);
}

.group-info {
  padding: 16px;
}

.group-info h4 {
  margin-bottom: 4px;
}

.group-members {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

/* Group Detail Modal */
.modal-lg {
  max-width: 700px;
}

.modal-sm {
  max-width: 400px;
}

.group-detail-header {
  margin: -32px -32px 20px -32px;
}

/* Group Detail Back Button - override .back-btn 32x32 constraint from live CSS */
#view-group-detail .view-header .back-btn {
  width: auto;
  height: auto;
  border-radius: 50px;
  padding: 8px 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}

#view-group-detail .view-header .back-btn:hover {
  background: var(--bg-tertiary);
  border-color: var(--text-secondary);
}

#view-group-detail .view-header .back-btn svg {
  flex-shrink: 0;
}

.group-detail-cover {
  height: 150px;
  background: var(--gradient);
  background-size: cover;
  background-position: center;
  border-radius: 20px 20px 0 0;
}

.group-detail-info {
  padding: 20px 32px;
}

.group-detail-info h2 {
  margin-bottom: 8px;
}

.group-detail-desc {
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.group-detail-meta {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.group-privacy-badge {
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.group-privacy-badge.public {
  background: rgba(6, 214, 160, 0.15);
  color: var(--success);
}

.group-privacy-badge.private {
  background: rgba(245, 158, 11, 0.15);
  color: var(--warning);
}

.group-privacy-badge.hidden {
  background: rgba(239, 68, 68, 0.15);
  color: var(--danger);
}

.group-detail-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.role-badge {
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 600;
}

.role-badge.owner {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #000;
}

.role-badge.admin {
  background: var(--gradient);
  color: #fff;
}

.role-badge.moderator {
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
}

/* Group Tabs */
.group-tabs {
  display: flex;
  gap: 8px;
  padding: 0 0 16px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}

.group-tabs .tab {
  padding: 8px 20px;
  border-radius: 50px;
  border: none;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s;
}

.group-tabs .tab:hover {
  color: var(--text-primary);
}

.group-tabs .tab.active {
  background: var(--accent);
  color: white;
}

.group-tab-content {
  max-height: 400px;
  overflow-y: auto;
}

/* Group Members List */
.group-members-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.group-member-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  background: var(--bg-tertiary);
  transition: background 0.2s;
}

.group-member-item:hover {
  background: var(--bg-primary);
}

.group-member-item.owner {
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.group-member-item.admin {
  border: 1px solid rgba(8, 145, 178, 0.3);
}

.member-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
}

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

.member-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.member-name {
  font-weight: 600;
  cursor: pointer;
}

.member-name:hover {
  color: var(--accent);
}

.member-username {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.member-role-badge {
  padding: 2px 8px;
  border-radius: 50px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
}

.member-role-badge.owner {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #000;
}

.member-role-badge.admin {
  background: var(--gradient);
  color: #fff;
}

.member-role-badge.moderator {
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
}

.member-actions {
  display: flex;
  gap: 8px;
}

.btn-danger-text {
  color: var(--danger) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}

.btn-danger-text:hover {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: var(--danger) !important;
}

/* Danger Zone */
.danger-zone {
  margin-top: 32px;
  padding: 20px;
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 12px;
  background: rgba(239, 68, 68, 0.05);
}

.danger-zone h4 {
  color: var(--danger);
  margin-bottom: 8px;
}

.danger-zone p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 16px;
}

.btn-danger {
  background: var(--danger);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 50px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-danger:hover {
  background: #dc2626;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
}

/* Notifications */
.notification-item {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.2s;
}

.notification-item:hover {
  background: var(--bg-secondary);
}

.notification-item.unread {
  background: var(--bg-secondary);
  border-left: 3px solid var(--accent);
}

/* Compose Modal */
.compose-full {
  display: flex;
  gap: 12px;
}

.compose-area {
  flex: 1;
}

.compose-area textarea {
  width: 100%;
  min-height: 120px;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 1.1rem;
  resize: none;
  outline: none;
}

.compose-options {
  display: flex;
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}

.file-upload,
.poll-toggle {
  padding: 8px;
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.2s;
}

.file-upload:hover,
.poll-toggle:hover {
  background: var(--bg-tertiary);
}

.file-upload input,
.poll-toggle input {
  display: none;
}

.file-upload svg,
.poll-toggle svg {
  width: 20px;
  height: 20px;
  color: var(--accent);
}

.poll-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 12px;
}

.poll-option {
  padding: 10px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
}

.media-preview {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.media-preview img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
}

/* Tip Modal */
.tip-amounts {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.tip-amount {
  flex: 1;
  padding: 16px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text-primary);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.tip-amount:hover,
.tip-amount.selected {
  border-color: var(--accent);
  background: var(--accent-glow);
}

/* Suggested User */
.suggested-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}

.suggested-user-info {
  flex: 1;
}

.suggested-user-name {
  font-weight: 600;
}

.suggested-user-handle {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

/* Hero Badge */
.hero-badge {
  display: inline-block;
  padding: 8px 18px;
  background: linear-gradient(135deg, rgba(6, 214, 160, 0.15) 0%, rgba(8, 145, 178, 0.15) 100%);
  border: 1px solid rgba(6, 214, 160, 0.3);
  border-radius: 50px;
  font-size: 0.875rem;
  color: var(--success);
  margin-bottom: 24px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Hero CTA Buttons Row */
.hero-cta {
  display: flex;
  flex-direction: row;
  gap: 16px;
  margin-bottom: 32px;
}

/* Hero Highlights */
.hero-highlights {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.highlight {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.highlight-icon {
  font-size: 1.1rem;
}

/* Hero Features Section */
.hero-features-section {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 60px;
}

.hero-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.hero-feature {
  text-align: center;
}

.hero-feature-icon {
  font-size: 2.5rem;
  margin-bottom: 16px;
}

.hero-feature h3 {
  font-size: 1.25rem;
  margin-bottom: 12px;
}

.hero-feature p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Section Header */
.section-header {
  text-align: center;
  margin-bottom: 48px;
}

.section-badge {
  display: inline-block;
  padding: 6px 14px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}

.section-badge.blue {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(99, 102, 241, 0.2) 100%);
  border-color: rgba(59, 130, 246, 0.3);
  color: #60a5fa;
}

.section-subtitle {
  color: var(--text-secondary);
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto;
}

/* Creator Section Landing */
.creator-section-landing {
  background: var(--bg-primary);
  padding: 80px 60px;
}

.creator-section-landing .features-grid {
  grid-template-columns: repeat(4, 1fr);
}

/* Fans Section Landing */
.fans-section-landing {
  background: var(--bg-secondary);
  padding: 80px 60px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.features-grid.three-col {
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.feature-card.compact {
  padding: 24px 20px;
}

.feature-card.compact h4 {
  font-size: 1rem;
  margin-bottom: 8px;
}

.feature-card.compact p {
  font-size: 0.85rem;
  line-height: 1.5;
}

.feature-icon-small {
  font-size: 1.5rem;
  margin-bottom: 12px;
}

/* CTA Section */
.cta-section {
  padding: 100px 60px;
  text-align: center;
  background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}

.cta-content h2 {
  font-size: 2.5rem;
  margin-bottom: 16px;
}

.cta-content p {
  color: var(--text-secondary);
  font-size: 1.1rem;
  margin-bottom: 32px;
}

/* Landing Page Footer */
.landing-footer {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  padding: 60px 40px 30px;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
  margin-bottom: 40px;
}

.footer-brand {
  max-width: 300px;
}

.footer-brand .logo {
  margin-bottom: 12px;
}

.footer-tagline {
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.footer-links-section {
  display: flex;
  gap: 60px;
}

.footer-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-column h4 {
  font-family: 'Space Grotesk', sans-serif;
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.footer-column a {
  color: var(--text-secondary);
  font-size: 0.9rem;
  transition: color 0.2s;
}

.footer-column a:hover {
  color: var(--accent);
}

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 24px;
  text-align: center;
}

.footer-bottom p {
  color: var(--text-muted);
  font-size: 0.85rem;
}

@media (max-width: 768px) {
  .landing-footer {
    padding: 40px 20px 20px;
  }

  .footer-content {
    flex-direction: column;
    gap: 30px;
  }

  .footer-links-section {
    flex-wrap: wrap;
    gap: 30px;
  }
}

/* User Menu Dropdown */
.sidebar-user-container {
  position: relative;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.2s;
}

.sidebar-user:hover {
  background: var(--bg-tertiary);
}

.user-menu-icon {
  width: 20px;
  height: 20px;
  color: var(--text-secondary);
  margin-left: auto;
}

.user-menu {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 8px;
  margin-bottom: 8px;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.4);
  z-index: 100;
}

.user-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: var(--text-primary);
  border-radius: 8px;
  transition: all 0.2s;
  font-weight: 500;
}

.user-menu-item:hover {
  background: var(--bg-tertiary);
}

.user-menu-item svg {
  width: 20px;
  height: 20px;
  color: var(--text-secondary);
}

.user-menu-item.logout {
  color: var(--danger);
}

.user-menu-item.logout svg {
  color: var(--danger);
}

.user-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 8px 0;
}

/* Settings Page */
.settings-container {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: calc(100vh - 60px);
}

.settings-nav {
  padding: 20px;
  border-right: 1px solid var(--border);
}

.settings-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 500;
  text-align: left;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 4px;
}

.settings-nav-item:hover {
  background: var(--bg-tertiary);
}

.settings-nav-item.active {
  background: var(--bg-tertiary);
  color: var(--accent);
}

.settings-nav-item svg {
  width: 20px;
  height: 20px;
}

.settings-content {
  padding: 32px;
  overflow-y: auto;
}

.settings-panel {
  display: none;
  max-width: 600px;
}

.settings-panel.active {
  display: block;
}

.settings-panel h2 {
  font-size: 1.5rem;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.settings-section {
  margin-bottom: 32px;
}

.settings-section h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.settings-form .form-group {
  margin-bottom: 20px;
}

.avatar-upload-section {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
}

.settings-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-tertiary);
}

.input-with-prefix {
  display: flex;
  align-items: center;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.input-with-prefix span {
  padding: 12px 0 12px 16px;
  color: var(--text-secondary);
}

.input-with-prefix input {
  flex: 1;
  background: transparent;
  border: none;
  padding-left: 4px;
}

.input-with-prefix input:focus {
  outline: none;
  box-shadow: none;
}

.form-hint {
  display: block;
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Username Edit */
.username-edit-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.username-input-group {
  position: relative;
}

.username-input-group input:disabled {
  background: transparent;
  cursor: default;
}

.username-input-group input:not(:disabled) {
  background: var(--bg-secondary);
}

.btn-edit-username {
  background: transparent;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  transition: color 0.2s;
}

.btn-edit-username:hover {
  color: var(--accent);
}

.btn-edit-username.editing {
  color: var(--success);
}

.username-availability {
  font-size: 0.85rem;
  padding: 8px 12px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.username-availability.available {
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
}

.username-availability.unavailable {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
}

.username-availability.checking {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

/* Username Confirmation Modal */
.username-confirm-content {
  text-align: center;
}

.username-confirm-content h2 {
  margin-bottom: 12px;
}

.username-confirm-content p {
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.username-confirm-content .username-change {
  background: var(--bg-tertiary);
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 20px;
}

.username-change .old-username {
  color: var(--text-muted);
  text-decoration: line-through;
  margin-bottom: 8px;
}

.username-change .new-username {
  color: var(--accent);
  font-size: 1.25rem;
  font-weight: 600;
}

.username-change .arrow {
  color: var(--text-muted);
  margin: 8px 0;
}

.username-confirm-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.username-confirm-buttons .btn-secondary {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  padding: 10px 24px;
  border-radius: 50px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s;
}

.username-confirm-buttons .btn-secondary:hover {
  background: var(--bg-secondary);
  border-color: var(--text-secondary);
}

/* Toggle Switch */
.setting-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

/* Settings toggle (label-based toggle for monetization/ads) */
.settings-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  cursor: pointer;
  position: relative;
}

.settings-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.settings-toggle span:not(.toggle-slider) {
  flex: 1;
  color: var(--text-primary);
  font-weight: 500;
}

.settings-toggle .toggle-slider {
  position: relative;
  width: 44px;
  height: 24px;
  background: var(--border);
  border: none;
  border-radius: 12px;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.settings-toggle .toggle-slider::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.settings-toggle input:checked ~ .toggle-slider {
  background: var(--accent);
}

.settings-toggle input:checked ~ .toggle-slider::before {
  transform: translateY(-50%) translateX(20px);
}

.setting-toggle:last-child {
  border-bottom: none;
}

.setting-info {
  flex: 1;
}

.setting-label {
  display: block;
  font-weight: 500;
  margin-bottom: 4px;
}

.setting-description {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.toggle {
  position: relative;
  width: 44px;
  height: 24px;
  cursor: pointer;
  flex-shrink: 0;
}

.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.toggle .toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--border);
  border: none;
  border-radius: 12px;
  transition: background 0.2s ease;
}

.toggle .toggle-slider::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.toggle input:checked + .toggle-slider {
  background: var(--accent);
}

.toggle input:checked + .toggle-slider::before {
  transform: translateY(-50%) translateX(20px);
}

/* Settings Save Feedback States */
.setting-toggle.saving {
  opacity: 0.7;
  pointer-events: none;
}

.setting-toggle.saving .toggle-slider::after {
  content: '';
  position: absolute;
  right: -30px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border: 2px solid var(--accent);
  border-top-color: transparent;
  border-radius: 50%;
  animation: settingSpin 0.8s linear infinite;
}

@keyframes settingSpin {
  to { transform: translateY(-50%) rotate(360deg); }
}

.setting-toggle.saved {
  position: relative;
}

.setting-toggle.saved::after {
  content: '✓';
  position: absolute;
  right: -30px;
  top: 50%;
  transform: translateY(-50%);
  color: #10b981;
  font-size: 14px;
  font-weight: bold;
  animation: savedPop 0.3s ease-out;
}

@keyframes savedPop {
  0% { transform: translateY(-50%) scale(0); opacity: 0; }
  50% { transform: translateY(-50%) scale(1.2); }
  100% { transform: translateY(-50%) scale(1); opacity: 1; }
}

/* Toggle clickability handled by main .toggle definition above */

/* Theme Options */
.theme-options {
  display: flex;
  gap: 16px;
}

.theme-option {
  cursor: pointer;
  text-align: center;
}

.theme-option input {
  display: none;
}

.theme-preview {
  width: 100px;
  height: 70px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 8px;
  border: 2px solid var(--border);
  transition: all 0.2s;
}

.theme-option.selected .theme-preview,
.theme-option:has(input:checked) .theme-preview {
  border-color: var(--accent);
}

.theme-preview.dark-theme {
  background: #0a0a0f;
}

.theme-preview.light-theme {
  background: #f8f8f8;
}

.theme-preview.system-theme {
  background: linear-gradient(135deg, #0a0a0f 50%, #f8f8f8 50%);
}

.theme-preview-bar {
  height: 20px;
  background: rgba(128, 128, 128, 0.3);
}

.theme-preview-content {
  padding: 8px;
}

/* Color Options */
.color-options {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.color-option {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color);
  cursor: pointer;
  border: 3px solid transparent;
  transition: all 0.2s;
}

.color-option:hover {
  transform: scale(1.1);
}

.color-option.selected,
.color-option:has(input:checked) {
  border-color: white;
  box-shadow: 0 0 0 2px var(--color);
}

.color-option input {
  display: none;
}

/* Cash Out Section */
.cash-out-section {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(6, 182, 212, 0.1) 100%);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 16px;
  padding: 24px;
}

.cash-out-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.balance-display {
  display: flex;
  flex-direction: column;
}

.balance-amount {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--success);
}

.balance-label {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.btn-cash-out {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
  color: white;
  border: none;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-cash-out:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
}

.btn-cash-out svg {
  width: 20px;
  height: 20px;
}

.cash-out-note {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

/* Cash Out Modal */
.cashout-header {
  text-align: center;
  margin-bottom: 24px;
}

.cashout-icon {
  font-size: 3rem;
  margin-bottom: 12px;
}

.cashout-balance {
  background: var(--bg-tertiary);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  margin-bottom: 24px;
}

.cashout-label {
  display: block;
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 4px;
}

.cashout-amount {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--success);
}

.cashout-summary {
  background: var(--bg-tertiary);
  border-radius: 12px;
  padding: 16px;
  margin: 20px 0;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 0.95rem;
}

.summary-row.total {
  border-top: 1px solid var(--border);
  margin-top: 8px;
  padding-top: 12px;
  font-weight: 700;
  color: var(--success);
}

.cashout-note-modal {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-top: 16px;
}

/* Payout Method Section */
.payout-method-section {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 20px;
}

.payout-method-card {
  background: var(--bg-tertiary);
  border-radius: 12px;
  padding: 20px;
}

.payout-method-loading {
  color: var(--text-muted);
  text-align: center;
}

.payout-method-connected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.payout-method-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.payout-method-icon {
  width: 48px;
  height: 48px;
  background: var(--bg-secondary);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.payout-method-details h4 {
  font-size: 1rem;
  margin-bottom: 4px;
}

.payout-method-details p {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.payout-method-actions {
  display: flex;
  gap: 8px;
}

.payout-method-not-connected {
  text-align: center;
  padding: 20px 0;
}

.payout-method-not-connected p {
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.btn-connect-payout {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--gradient);
  color: white;
  border: none;
  padding: 14px 28px;
  border-radius: 50px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-connect-payout:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px var(--accent-glow);
}

.btn-connect-payout svg {
  width: 20px;
  height: 20px;
}

/* Payout Method Modal */
.payout-header {
  text-align: center;
  margin-bottom: 24px;
}

.payout-icon {
  font-size: 3rem;
  margin-bottom: 12px;
}

.payout-subtitle {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-top: 8px;
}

.payout-type-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}

.payout-type-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--bg-tertiary);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 16px 12px;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--text-secondary);
}

.payout-type-tab:hover {
  border-color: var(--text-secondary);
}

.payout-type-tab.active {
  border-color: var(--accent);
  background: rgba(99, 102, 241, 0.1);
  color: var(--text-primary);
}

.payout-type-icon {
  font-size: 1.5rem;
}

.payout-form {
  display: none;
}

.payout-form.active {
  display: block;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.cash-out-disabled {
  opacity: 0.6;
  cursor: not-allowed !important;
}

.cash-out-disabled:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Toast Notifications */
.toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 14px 24px;
  border-radius: 12px;
  font-weight: 500;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 10000;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.toast-success {
  border-color: var(--success);
}

.toast-error {
  border-color: var(--danger);
  color: var(--danger);
}

/* Comments Modal */
.comments-modal-content {
  max-width: 600px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.comments-header {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}

.comments-header h2 {
  font-size: 1.25rem;
  margin: 0;
}

.comments-post-preview {
  padding: 16px;
  background: var(--bg-tertiary);
  border-radius: 12px;
  margin-bottom: 16px;
}

.comments-post-preview .post-preview-content {
  font-size: 0.95rem;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.comments-list {
  flex: 1;
  overflow-y: auto;
  min-height: 200px;
  max-height: 400px;
  margin-bottom: 16px;
}

.comment-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.comment-item:last-child {
  border-bottom: none;
}

.comment-content {
  flex: 1;
}

.comment-author {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.comment-name {
  font-weight: 600;
  color: var(--text-primary);
}

.comment-handle {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.comment-time {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-left: auto;
}

.comment-text {
  color: var(--text-primary);
  line-height: 1.5;
  margin-bottom: 8px;
}

.comment-actions {
  display: flex;
  gap: 16px;
}

.comment-action {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.8rem;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s;
}

.comment-action:hover {
  color: var(--accent);
  background: var(--accent-glow);
}

.comment-action svg {
  width: 14px;
  height: 14px;
}

.comment-compose {
  display: flex;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.comment-input-wrapper {
  flex: 1;
  display: flex;
  gap: 8px;
}

.comment-input-wrapper input {
  flex: 1;
  padding: 10px 16px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 50px;
  color: var(--text-primary);
  font-size: 0.9rem;
}

.comment-input-wrapper input:focus {
  outline: none;
  border-color: var(--accent);
}

.no-comments {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
}

.no-comments-icon {
  font-size: 3rem;
  margin-bottom: 12px;
}

/* Bookmark indicator on posts */
.post-action.bookmarked {
  color: var(--accent);
}

.post-action.bookmarked svg {
  fill: var(--accent);
}

/* Responsive */
@media (max-width: 1200px) {
  .right-sidebar {
    display: none;
  }

  #main-app {
    grid-template-columns: 280px minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
  #main-app {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    flex-direction: row;
    padding: 8px 16px;
    border-right: none;
    border-top: 1px solid var(--border);
    background: var(--bg-primary);
    z-index: 999;
  }

  .sidebar-logo,
  .sidebar-user,
  .nav-item span,
  .sidebar-creator-prompt {
    display: none;
  }

  .sidebar-nav {
    display: flex;
    justify-content: space-around;
    width: 100%;
  }

  .nav-item {
    padding: 12px;
    margin: 0;
  }

  .main-content {
    border: none;
    max-width: 100%;
    padding-bottom: 100px; /* Increased to ensure content doesn't get hidden behind mobile tab bar */
  }

  /* Ensure all views have bottom padding on mobile - 100px to clear tab bar */
  .view {
    padding-bottom: 100px;
  }

  .landing-hero {
    grid-template-columns: 1fr;
    padding: 100px 20px 40px;
  }

  .hero-content h1 {
    font-size: 2.5rem;
  }

  .hero-visual {
    display: none;
  }

  .features-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .features-section {
    padding: 40px 20px;
  }

  .hero-features-section {
    padding: 40px 20px;
  }

  .hero-features-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .creator-section-landing .features-grid,
  .features-grid.three-col {
    grid-template-columns: 1fr 1fr;
  }

  .cta-section {
    padding: 60px 20px;
  }

  .cta-content h2 {
    font-size: 1.75rem;
  }

  .hero-cta {
    flex-direction: column;
    gap: 12px;
  }

  .hero-highlights {
    flex-direction: column;
    gap: 12px;
  }

  .stats-row {
    grid-template-columns: 1fr;
  }

  .groups-grid {
    grid-template-columns: 1fr;
  }

  .messages-layout {
    grid-template-columns: 1fr;
  }

  /* Settings responsive */
  .settings-container {
    grid-template-columns: 1fr;
  }

  .settings-nav {
    border-right: none;
    border-bottom: 1px solid var(--border);
    display: flex;
    overflow-x: auto;
    padding: 12px;
    gap: 8px;
  }

  .settings-nav-item {
    flex-shrink: 0;
    padding: 10px 16px;
    margin: 0;
  }

  .settings-nav-item span {
    display: none;
  }

  .settings-content {
    padding: 20px;
  }

  /* Cash out responsive */
  .cash-out-card {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .balance-amount {
    font-size: 2rem;
  }

  /* User menu on mobile */
  .user-menu {
    position: fixed;
    bottom: 80px;
    left: 16px;
    right: 16px;
    z-index: 1000;
  }
}

/* ============================================
   TRANSACTION HISTORY
   ============================================ */

.transaction-history-section,
.payout-history-section {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  margin-top: 20px;
}

.section-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.section-header-row h3 {
  margin: 0;
  font-size: 1.1rem;
}

.filter-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-tab {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
}

.filter-tab:hover {
  border-color: var(--text-secondary);
  color: var(--text-primary);
}

.filter-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.transaction-stats,
.payout-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.stat-mini {
  background: var(--bg-tertiary);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}

.stat-mini-label {
  display: block;
  color: var(--text-secondary);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.stat-mini-value {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
}

.stat-mini-value.success { color: var(--success); }
.stat-mini-value.warning { color: var(--warning); }
.stat-mini-value.danger { color: var(--danger); }
.stat-mini-value.accent { color: var(--accent); }

.running-balance {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(6, 182, 212, 0.1));
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 20px;
}

.running-balance .balance-label {
  color: var(--text-secondary);
  font-weight: 500;
}

.running-balance .balance-value {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--success);
}

.transaction-list,
.payout-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 400px;
  overflow-y: auto;
}

.transaction-item,
.payout-item {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-tertiary);
  border-radius: 12px;
  padding: 16px;
  transition: all 0.2s;
}

.transaction-item:hover,
.payout-item:hover {
  background: rgba(99, 102, 241, 0.1);
  border-color: var(--accent);
}

.transaction-icon,
.payout-icon-status {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.transaction-icon.tip {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.2), rgba(251, 113, 133, 0.2));
}

.transaction-icon.subscription {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
}

.payout-icon-status.pending {
  background: rgba(245, 158, 11, 0.2);
}

.payout-icon-status.processing {
  background: rgba(59, 130, 246, 0.2);
}

.payout-icon-status.completed {
  background: rgba(16, 185, 129, 0.2);
}

.payout-icon-status.failed {
  background: rgba(239, 68, 68, 0.2);
}

.transaction-details,
.payout-details {
  flex: 1;
  min-width: 0;
}

.transaction-type,
.payout-status-text {
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 2px;
}

.transaction-sender,
.payout-destination {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.transaction-sender .sender-link {
  color: var(--accent);
  cursor: pointer;
}

.transaction-sender .sender-link:hover {
  text-decoration: underline;
}

.transaction-message {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-style: italic;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.transaction-amount,
.payout-amount {
  text-align: right;
  flex-shrink: 0;
}

.transaction-amount-value {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--success);
}

.payout-amount-value {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
}

.payout-amount-value.pending { color: var(--warning); }
.payout-amount-value.processing { color: #3b82f6; }
.payout-amount-value.completed { color: var(--success); }
.payout-amount-value.failed { color: var(--danger); text-decoration: line-through; }

.transaction-date,
.payout-date {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-badge.pending {
  background: rgba(245, 158, 11, 0.2);
  color: var(--warning);
}

.status-badge.processing {
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
}

.status-badge.completed {
  background: rgba(16, 185, 129, 0.2);
  color: var(--success);
}

.status-badge.failed {
  background: rgba(239, 68, 68, 0.2);
  color: var(--danger);
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
}

.empty-state-icon {
  font-size: 3rem;
  margin-bottom: 12px;
  opacity: 0.5;
}

.empty-state-text {
  font-size: 0.9rem;
}

/* Responsive for transaction/payout history */
@media (max-width: 768px) {
  .section-header-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .filter-tabs {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 8px;
  }

  .transaction-stats,
  .payout-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .transaction-item,
  .payout-item {
    flex-wrap: wrap;
  }

  .transaction-amount,
  .payout-amount {
    width: 100%;
    text-align: left;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
  }
}

/* ============================================
   ENHANCED CREATOR ANALYTICS
   ============================================ */

.analytics-overview-section,
.best-times-section,
.content-performance-section,
.verification-section,
.creator-alerts-section {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  margin-top: 20px;
}

.section-description {
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin-bottom: 20px;
}

.breakdown-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px;
  color: var(--text-muted);
}

.spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Earnings Breakdown */
.earnings-breakdown-card {
  background: var(--bg-tertiary);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}

.breakdown-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.breakdown-item {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  border: 1px solid var(--border);
}

.breakdown-item-icon {
  font-size: 2rem;
  margin-bottom: 8px;
}

.breakdown-item-label {
  display: block;
  color: var(--text-secondary);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.breakdown-item-value {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--success);
}

.breakdown-item-subtext {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Month Comparison */
.month-comparison-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}

.month-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.month-value {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
}

.growth-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.875rem;
}

.growth-badge.positive {
  background: rgba(16, 185, 129, 0.2);
  color: var(--success);
}

.growth-badge.negative {
  background: rgba(239, 68, 68, 0.2);
  color: var(--danger);
}

/* Top Supporters */
.top-supporters-section h4 {
  margin-bottom: 16px;
  color: var(--text-primary);
}

.supporters-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.supporter-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-tertiary);
  border-radius: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.supporter-item:hover {
  background: rgba(99, 102, 241, 0.1);
}

.supporter-rank {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
}

.supporter-rank.gold { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.supporter-rank.silver { background: linear-gradient(135deg, #94a3b8, #64748b); }
.supporter-rank.bronze { background: linear-gradient(135deg, #d97706, #b45309); }

.supporter-info {
  flex: 1;
}

.supporter-name {
  font-weight: 600;
  color: var(--text-primary);
}

.supporter-username {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.supporter-amount {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  color: var(--success);
}

.supporter-count {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.supporter-avatar {
  width: 40px;
  height: 40px;
  min-width: 40px;
  max-width: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* Best Posting Times */
.best-times-container {
  margin-bottom: 20px;
}

.heatmap-container {
  overflow-x: auto;
  padding-bottom: 10px;
}

.heatmap-grid {
  display: grid;
  grid-template-columns: 60px repeat(24, 1fr);
  gap: 2px;
  min-width: 600px;
}

.heatmap-day-label {
  display: flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  padding-right: 8px;
}

.heatmap-hour-labels {
  display: contents;
}

.heatmap-hour-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-align: center;
  padding-bottom: 4px;
}

.heatmap-cell {
  aspect-ratio: 1;
  border-radius: 4px;
  background: var(--bg-tertiary);
  min-height: 24px;
  cursor: pointer;
  transition: all 0.2s;
}

.heatmap-cell:hover {
  transform: scale(1.2);
  z-index: 10;
}

.heatmap-cell.level-0 { background: var(--bg-tertiary); }
.heatmap-cell.level-1 { background: rgba(16, 185, 129, 0.2); }
.heatmap-cell.level-2 { background: rgba(16, 185, 129, 0.4); }
.heatmap-cell.level-3 { background: rgba(16, 185, 129, 0.6); }
.heatmap-cell.level-4 { background: rgba(16, 185, 129, 0.8); }
.heatmap-cell.level-5 { background: var(--success); }

.best-times-recommendations {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.best-time-card {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(6, 182, 212, 0.1));
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 12px;
  padding: 16px 20px;
  flex: 1;
  min-width: 150px;
  text-align: center;
}

.best-time-day {
  font-weight: 700;
  color: var(--success);
  font-size: 1rem;
}

.best-time-hour {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
}

.best-time-label {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Content Performance */
.performance-breakdown {
  margin-bottom: 20px;
}

.performance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.performance-card {
  background: var(--bg-tertiary);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}

.performance-type-icon {
  font-size: 2.5rem;
  margin-bottom: 12px;
}

.performance-type-label {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.performance-count {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.performance-stats {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.perf-stat {
  text-align: center;
}

.perf-stat-value {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  color: var(--accent);
}

.perf-stat-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
}

.content-averages {
  display: flex;
  justify-content: space-around;
  background: var(--bg-tertiary);
  border-radius: 12px;
  padding: 20px;
}

.avg-stat {
  text-align: center;
}

.avg-stat-value {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
}

.avg-stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Verification Card */
.verification-card {
  background: var(--bg-tertiary);
  border-radius: 12px;
  padding: 24px;
}

.verification-status {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.verification-badge-large {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
}

.verification-badge-large.verified {
  background: linear-gradient(135deg, #1d9bf0, #0ea5e9);
}

.verification-badge-large.not-verified {
  background: var(--bg-secondary);
  border: 2px dashed var(--border);
}

.verification-info h4 {
  margin: 0 0 4px 0;
  color: var(--text-primary);
}

.verification-info p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.verification-requirements {
  background: var(--bg-secondary);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

.requirement-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 0.875rem;
}

.requirement-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}

.requirement-check.met {
  background: var(--success);
  color: white;
}

.requirement-check.not-met {
  background: var(--bg-tertiary);
  color: var(--text-muted);
}

.btn-apply-verification {
  width: 100%;
  padding: 14px 24px;
  background: linear-gradient(135deg, #1d9bf0, #0ea5e9);
  color: white;
  border: none;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-apply-verification:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(29, 155, 240, 0.3);
}

.btn-apply-verification:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Creator Alerts */
.alerts-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 400px;
  overflow-y: auto;
}

.alert-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--bg-tertiary);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s;
  border-left: 3px solid transparent;
}

.alert-item.unread {
  border-left-color: var(--accent);
  background: rgba(99, 102, 241, 0.05);
}

.alert-item:hover {
  background: rgba(99, 102, 241, 0.1);
}

.alert-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  background: var(--bg-secondary);
}

.alert-icon.milestone { background: rgba(16, 185, 129, 0.2); }
.alert-icon.earnings { background: rgba(245, 158, 11, 0.2); }
.alert-icon.engagement { background: rgba(99, 102, 241, 0.2); }
.alert-icon.tip { background: rgba(236, 72, 153, 0.2); }

.alert-content {
  flex: 1;
}

.alert-title {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.alert-message {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.alert-time {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.alert-icon svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.alert-icon.tip svg { fill: #ec4899; }
.alert-icon.subscription svg { fill: #6366f1; }
.alert-icon.milestone svg { fill: #f59e0b; }
.alert-icon.payout svg { fill: #10b981; }

/* Alerts list container */
.alerts-list.compact {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.alerts-list .alert-item {
  padding: 12px;
  margin: 0;
}

/* Earning item styling */
.earning-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.earning-type {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-primary);
}

.earning-type.tip { color: #ec4899; }
.earning-type.subscription { color: #6366f1; }
.earning-type.ad { color: #f59e0b; }
.earning-type.paid_content { color: #10b981; }

.earning-from {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Earnings list container */
.earnings-list {
  display: flex;
  flex-direction: column;
}

.earnings-list .earning-item:last-child {
  border-bottom: none;
}

/* Supporters list styling */
.supporters-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.supporter-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.supporter-rank {
  font-weight: 700;
  color: var(--accent);
  width: 24px;
  text-align: center;
}

.supporter-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.supporter-name {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-primary);
}

.supporter-username {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.supporter-amount {
  font-weight: 700;
  color: var(--success);
}

/* Transaction list styling */
.transaction-list {
  display: flex;
  flex-direction: column;
}

.transaction-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.transaction-item:last-child {
  border-bottom: none;
}

.transaction-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  flex-shrink: 0;
}

.transaction-icon svg {
  width: 20px;
  height: 20px;
  fill: var(--text-secondary);
}

.transaction-icon.tip { background: rgba(236, 72, 153, 0.15); }
.transaction-icon.tip svg { fill: #ec4899; }
.transaction-icon.subscription { background: rgba(99, 102, 241, 0.15); }
.transaction-icon.subscription svg { fill: #6366f1; }
.transaction-icon.ad { background: rgba(245, 158, 11, 0.15); }
.transaction-icon.ad svg { fill: #f59e0b; }
.transaction-icon.paid_content { background: rgba(16, 185, 129, 0.15); }
.transaction-icon.paid_content svg { fill: #10b981; }

.transaction-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.transaction-type {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
}

.transaction-details {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.transaction-time {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.transaction-amount {
  font-weight: 700;
  font-size: 1rem;
}

.transaction-amount.positive {
  color: var(--success);
}

.transaction-amount.negative {
  color: var(--danger);
}

/* Earnings stats row */
.earnings-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.earnings-stat-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}

.earnings-stat-card .stat-label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.earnings-stat-card .stat-value {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
}

/* Running balance card */
.running-balance-card {
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.15) 0%, rgba(6, 214, 160, 0.15) 100%);
  border: 1px solid var(--accent);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.balance-label {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.balance-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--success);
  font-family: 'Space Grotesk', sans-serif;
}

/* Filter bar */
.filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.filter-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-tab {
  padding: 8px 16px;
  border-radius: 20px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
}

.filter-tab:hover {
  background: var(--bg-secondary);
  border-color: var(--accent);
}

.filter-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

/* Payout method status */
.payout-method-connected {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: rgba(16, 185, 129, 0.1);
  border-radius: 12px;
}

.payout-method-connected .check-icon {
  width: 24px;
  height: 24px;
  fill: var(--success);
}

.method-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.method-name {
  font-weight: 600;
  color: var(--text-primary);
}

.method-info {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.payout-method-empty {
  text-align: center;
  padding: 24px;
}

.payout-method-empty p {
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.payout-method-warning {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: rgba(245, 158, 11, 0.1);
  border-radius: 12px;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.payout-method-warning .method-details {
  flex: 1;
}

/* Cash out content */
.cash-out-content {
  text-align: center;
}

.cash-out-balance {
  margin-bottom: 16px;
}

.cash-out-label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.cash-out-amount {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  color: var(--success);
  font-family: 'Space Grotesk', sans-serif;
}

.cash-out-note {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 16px;
}

/* Earnings breakdown */
.earnings-breakdown-chart {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.breakdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.breakdown-label {
  width: 100px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.breakdown-bar {
  flex: 1;
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  overflow: hidden;
}

.breakdown-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}

.breakdown-fill.tips { background: #ec4899; }
.breakdown-fill.subs { background: #6366f1; }
.breakdown-fill.ads { background: #f59e0b; }
.breakdown-fill.paid { background: #10b981; }

.breakdown-value {
  width: 80px;
  text-align: right;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-primary);
}

.btn-text {
  background: none;
  border: none;
  color: var(--accent);
  padding: 6px 12px;
  border-radius: 8px;
  font-weight: 500;
  transition: background 0.2s ease;
}

.btn-text:hover {
  background: rgba(8, 145, 178, 0.08);
}

@media (max-width: 768px) {
  .month-comparison-card {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .best-times-recommendations {
    flex-direction: column;
  }

  .content-averages {
    flex-wrap: wrap;
    gap: 16px;
  }
}

/* ============================================
   POST MENU (Delete Post)
   ============================================ */

.post-menu {
  margin-left: auto;
  position: relative;
  z-index: 10;
}

.post-menu-btn {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  border-radius: 50%;
  color: var(--text-muted);
  transition: all 0.2s;
  position: relative;
  z-index: 11;
  display: flex;
  align-items: center;
  justify-content: center;
}

.post-menu-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.post-menu-btn svg {
  width: 20px;
  height: 20px;
}

.post-menu-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px;
  min-width: 160px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  z-index: 100;
}

.post-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 0.9rem;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.2s;
}

.post-menu-item:hover {
  background: var(--bg-tertiary);
}

.post-menu-item.delete {
  color: var(--danger);
}

.post-menu-item.delete:hover {
  background: rgba(239, 68, 68, 0.1);
}

.post-menu-item svg {
  width: 18px;
  height: 18px;
}

.post-menu-item.report {
  color: var(--danger);
}

.post-menu-item.report:hover {
  background: rgba(239, 68, 68, 0.1);
}

.post-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 0;
}

/* Widen dropdown for more options */
.post-menu-dropdown {
  min-width: 240px;
}

/* ============================================
   HASHTAGS & MENTIONS
   ============================================ */

.hashtag {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
  transition: opacity 0.2s;
}

.hashtag:hover {
  opacity: 0.8;
  text-decoration: underline;
}

.mention {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
  transition: opacity 0.2s;
}

.mention:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* ============================================
   REPORT & EMBED MODALS
   ============================================ */

.report-reasons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.report-reason-btn {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: all 0.2s;
}

.report-reason-btn:hover {
  background: var(--bg-secondary);
  border-color: var(--primary);
}

.audience-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.audience-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: all 0.2s;
}

.audience-option:hover {
  background: var(--bg-secondary);
  border-color: var(--primary);
}

.audience-option span {
  font-size: 1.5rem;
}

.audience-option div {
  display: flex;
  flex-direction: column;
}

.audience-option small {
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* Schedule button styling */
.schedule-btn {
  color: var(--primary) !important;
  cursor: pointer;
}

.schedule-btn:hover {
  background: rgba(99, 102, 241, 0.15);
}

.schedule-btn svg {
  fill: var(--primary);
}

/* ============================================
   MESSENGER EMOJI PICKER
   ============================================ */

.messenger-emoji-picker {
  position: absolute;
  bottom: 100%;
  right: 40px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 220px;
  box-shadow: var(--shadow-lg);
  z-index: 1000;
}

.messenger-emoji-picker .emoji-btn {
  background: none;
  border: none;
  font-size: 1.4rem;
  padding: 6px;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.15s;
}

.messenger-emoji-picker .emoji-btn:hover {
  background: var(--bg-tertiary);
  transform: scale(1.2);
}

/* ============================================
   EDIT PROFILE MODAL
   ============================================ */

#edit-profile-modal .modal-content {
  max-width: 500px;
}

#edit-profile-modal .avatar-upload-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px;
  background: var(--bg-tertiary);
  border-radius: 12px;
}

#edit-profile-modal .settings-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--accent);
}

#edit-profile-modal .btn-secondary.btn-sm {
  padding: 6px 16px;
  font-size: 0.8125rem;
  border-radius: 50px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}

#edit-profile-modal .btn-secondary.btn-sm:hover {
  border-color: var(--accent);
  background: var(--bg-secondary);
}

#edit-profile-modal .form-group {
  margin-bottom: 20px;
}

#edit-profile-modal textarea {
  resize: vertical;
  min-height: 80px;
}

/* ============================================
   FRIENDS FEATURE
   ============================================ */

.friends-container {
  max-width: 800px;
  padding: 20px;
}

.friends-section {
  margin-bottom: 32px;
}

.friends-section h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 1.1rem;
  color: var(--text-primary);
}

.count-badge {
  background: var(--accent);
  color: white;
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 600;
}

.friends-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.friend-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 16px;
  transition: all 0.2s;
}

.friend-card:hover {
  border-color: var(--accent);
  background: var(--bg-tertiary);
}

.friend-card .avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
}

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

.friend-name {
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.friend-name .verified-badge {
  color: var(--accent);
  font-size: 0.9rem;
}

.friend-username {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.friend-bio {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-actions {
  display: flex;
  gap: 8px;
}

.friend-requests-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.friend-request-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 16px;
}

.friend-request-card .avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
}

.request-info {
  flex: 1;
}

.request-actions {
  display: flex;
  gap: 8px;
}

.btn-accept {
  background: var(--success);
  color: white;
  border: none;
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-accept:hover {
  filter: brightness(1.1);
}

.btn-reject {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-reject:hover {
  border-color: var(--danger);
  color: var(--danger);
}

.mutual-friends {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-top: 2px;
}

.btn-add-friend {
  background: var(--accent);
  color: white;
  border: none;
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-add-friend:hover {
  background: var(--accent-hover);
}

.btn-pending {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  cursor: default;
}

.btn-remove-friend {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-remove-friend:hover {
  border-color: var(--danger);
  color: var(--danger);
}

.empty-state {
  color: var(--text-muted);
  text-align: center;
  padding: 24px;
  background: var(--bg-secondary);
  border-radius: 12px;
  border: 1px dashed var(--border);
}

/* ============================================
   ADS SYSTEM
   ============================================ */

.ad-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 16px;
  transition: all 0.2s;
}

.ad-card:hover {
  border-color: var(--text-muted);
}

.ad-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  color: var(--text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
}

.ad-content {
  display: block;
  text-decoration: none;
  color: inherit;
}

.ad-image {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.ad-body {
  padding: 16px;
}

.ad-title {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.ad-description {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.4;
  margin-bottom: 12px;
}

.ad-cta {
  display: inline-block;
  background: var(--accent);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.85rem;
  transition: all 0.2s;
}

.ad-cta:hover {
  background: var(--accent-hover);
}

.sidebar-ad {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

.sidebar-ad .ad-label {
  padding: 0 0 8px 0;
  border-bottom: none;
  font-size: 0.7rem;
}

.sidebar-ad .ad-image {
  border-radius: 8px;
  margin-bottom: 12px;
}

/* ============================================
   APPEARANCE SETTINGS - THEME SUPPORT
   ============================================ */

/* Light theme variables */
body.theme-light {
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #e9ecef;
  --border: #dee2e6;
  --text-primary: #212529;
  --text-secondary: #495057;
  --text-muted: #6c757d;
}

body.theme-light .landing-nav {
  background: rgba(255, 255, 255, 0.9);
}

body.theme-light .modal-content {
  background: var(--bg-primary);
}

body.theme-light .post-card {
  background: var(--bg-primary);
}

body.theme-light .sidebar {
  background: var(--bg-secondary);
}

/* Accent color support */
body[data-accent="pink"] {
  --accent: #ec4899;
  --accent-hover: #f472b6;
  --accent-glow: rgba(236, 72, 153, 0.3);
  --gradient: linear-gradient(135deg, #ec4899 0%, #f472b6 50%, #fb7185 100%);
}

body[data-accent="orange"] {
  --accent: #f97316;
  --accent-hover: #fb923c;
  --accent-glow: rgba(249, 115, 22, 0.3);
  --gradient: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fdba74 100%);
}

body[data-accent="green"] {
  --accent: #10b981;
  --accent-hover: #34d399;
  --accent-glow: rgba(16, 185, 129, 0.3);
  --gradient: linear-gradient(135deg, #10b981 0%, #34d399 50%, #6ee7b7 100%);
}

body[data-accent="cyan"] {
  --accent: #06b6d4;
  --accent-hover: #22d3ee;
  --accent-glow: rgba(6, 182, 212, 0.3);
  --gradient: linear-gradient(135deg, #06b6d4 0%, #22d3ee 50%, #67e8f9 100%);
}

body[data-accent="purple"] {
  --accent: #8b5cf6;
  --accent-hover: #a78bfa;
  --accent-glow: rgba(139, 92, 246, 0.3);
  --gradient: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 50%, #c4b5fd 100%);
}

/* Theme option styling improvements */
.theme-options {
  display: flex;
  gap: 16px;
}

.theme-option {
  flex: 1;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.theme-option input {
  display: none;
}

.theme-preview {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 12px;
  border: 2px solid var(--border);
  overflow: hidden;
  transition: all 0.2s;
}

.theme-option.selected .theme-preview,
.theme-option:has(input:checked) .theme-preview {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
}

.theme-preview.dark-theme {
  background: #0a0a0f;
}

.theme-preview.dark-theme .theme-preview-bar {
  background: #1a1a25;
  height: 20%;
}

.theme-preview.dark-theme .theme-preview-content {
  background: #12121a;
  height: 80%;
}

.theme-preview.light-theme {
  background: #ffffff;
}

.theme-preview.light-theme .theme-preview-bar {
  background: #f8f9fa;
  height: 20%;
}

.theme-preview.light-theme .theme-preview-content {
  background: #e9ecef;
  height: 80%;
}

.theme-preview.system-theme {
  background: linear-gradient(135deg, #0a0a0f 50%, #ffffff 50%);
}

.theme-preview.system-theme .theme-preview-bar {
  background: linear-gradient(135deg, #1a1a25 50%, #f8f9fa 50%);
  height: 20%;
}

.theme-preview.system-theme .theme-preview-content {
  background: linear-gradient(135deg, #12121a 50%, #e9ecef 50%);
  height: 80%;
}

/* Color options */
.color-options {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.color-option {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color);
  cursor: pointer;
  border: 3px solid transparent;
  transition: all 0.2s;
  position: relative;
}

.color-option input {
  display: none;
}

.color-option.selected,
.color-option:has(input:checked) {
  border-color: var(--text-primary);
  transform: scale(1.1);
}

.color-option:hover {
  transform: scale(1.1);
}

.color-option::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--color);
}

/* ============================================
   STORIES
   ============================================ */

.stories-bar {
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
  overflow: hidden;
}

.stories-container {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 0 16px;
  scrollbar-width: none;
}

.stories-container::-webkit-scrollbar {
  display: none;
}

.story-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  min-width: 72px;
}

.story-avatar-wrapper {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  padding: 3px;
  background: var(--border);
  position: relative;
}

.story-item.unseen .story-avatar-wrapper,
.story-avatar-wrapper.has-story {
  background: var(--gradient);
}

.story-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--bg-primary);
}

.story-item.add-story .story-avatar-wrapper {
  background: var(--bg-tertiary);
}

.add-story-icon {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 22px;
  height: 22px;
  background: var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  color: white;
  border: 2px solid var(--bg-primary);
}

.story-username {
  font-size: 11px;
  color: var(--text-secondary);
  max-width: 72px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* Story Modal */
.story-modal-content {
  max-width: 400px;
}

.story-preview {
  width: 100%;
  max-height: 300px;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
  background: var(--bg-tertiary);
}

.story-preview img,
.story-preview video {
  width: 100%;
  max-height: 300px;
  object-fit: contain;
}

.poll-question-input {
  width: 100%;
  padding: 10px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.story-poll-option {
  width: 100%;
  padding: 10px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  margin-bottom: 8px;
}

/* ============================================
   STORY VIEWER MODAL
   ============================================ */

.story-viewer-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.95);
}

.story-viewer-modal .modal-backdrop {
  position: absolute;
  inset: 0;
}

.story-viewer-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 420px;
  height: 90vh;
  max-height: 750px;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.story-progress-bars {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

.story-progress-bar {
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  overflow: hidden;
}

.story-progress-bar.completed .story-progress-fill {
  width: 100% !important;
}

.story-progress-fill {
  height: 100%;
  background: #fff;
  width: 0;
  transition: none;
}

.story-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 12px 8px;
  position: absolute;
  top: 16px;
  left: 0;
  right: 0;
  z-index: 10;
}

.story-user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.story-viewer-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
}

.story-user-details {
  display: flex;
  flex-direction: column;
}

.story-viewer-name {
  font-weight: 600;
  color: #fff;
  font-size: 14px;
}

.story-viewer-time {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

.story-header-actions {
  display: flex;
  gap: 8px;
}

.story-action-btn {
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  transition: background 0.2s;
}

.story-action-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.story-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.story-media-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.story-media {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Story video - centered with proper aspect ratio */
.story-video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.story-text-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  text-align: center;
}

.story-text-content p {
  color: #fff;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.story-caption {
  position: absolute;
  bottom: 80px;
  left: 0;
  right: 0;
  padding: 16px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: #fff;
  font-size: 14px;
  text-align: center;
}

.story-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.15);
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
}

.story-viewer-container:hover .story-nav-btn {
  opacity: 1;
}

.story-nav-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

.story-prev {
  left: 8px;
}

.story-next {
  right: 8px;
}

.story-footer {
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.story-reactions {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.story-react-btn {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s;
}

.story-react-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.story-react-btn.reacted {
  animation: storyReactPop 0.5s ease-out;
}

@keyframes storyReactPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.5); }
  100% { transform: scale(1); }
}

.story-reply-box {
  display: flex;
  gap: 8px;
  align-items: center;
}

.story-reply-box input {
  flex: 1;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 24px;
  padding: 10px 16px;
  color: #fff;
  font-size: 14px;
}

.story-reply-box input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.story-send-btn {
  background: var(--gradient);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
}

.story-viewers-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  padding: 10px 20px;
  border-radius: 24px;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  margin: 0 auto;
}

.story-delete-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(239, 68, 68, 0.2);
  border: none;
  padding: 10px 20px;
  border-radius: 24px;
  color: #ef4444;
  cursor: pointer;
  font-size: 14px;
  margin: 8px auto 0;
}

.story-viewers-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-primary);
  border-radius: 16px 16px 0 0;
  max-height: 60%;
  overflow-y: auto;
  z-index: 20;
}

.story-viewers-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg-primary);
}

.story-viewers-header h3 {
  margin: 0;
  font-size: 16px;
}

.story-viewers-header button {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--text-secondary);
  cursor: pointer;
}

.story-viewers-list {
  padding: 8px 16px;
}

.story-viewer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}

.story-viewer-item-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.story-viewer-item-name {
  flex: 1;
  font-weight: 500;
}

.story-viewer-reaction {
  font-size: 20px;
}

.story-poll {
  position: absolute;
  bottom: 100px;
  left: 16px;
  right: 16px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 12px;
  padding: 16px;
}

.story-poll h4 {
  color: #fff;
  margin: 0 0 12px;
  font-size: 16px;
}

.poll-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.poll-option {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  padding: 12px 16px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s;
}

.poll-option:hover {
  background: rgba(255, 255, 255, 0.25);
}

.story-options-modal {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.story-options-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.story-options-content {
  position: relative;
  background: var(--bg-primary);
  border-radius: 16px 16px 0 0;
  width: 100%;
  max-width: 420px;
  padding: 8px;
}

.story-option-btn {
  display: block;
  width: 100%;
  padding: 16px;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 16px;
  text-align: center;
  cursor: pointer;
  border-radius: 8px;
}

.story-option-btn:hover {
  background: var(--bg-tertiary);
}

.story-option-btn.cancel {
  color: var(--text-secondary);
  margin-top: 8px;
  border-top: 1px solid var(--border);
  border-radius: 0;
}

/* Mobile Story Viewer */
@media (max-width: 768px) {
  .story-viewer-container {
    max-width: 100%;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }

  .story-nav-btn {
    opacity: 1;
    width: 36px;
    height: 36px;
  }
}

/* ============================================
   MEMORIES (On This Day)
   ============================================ */

.memories-container {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 16px;
  padding: 16px;
  margin: 8px 0 16px 0;
  animation: memoriesSlideIn 0.5s ease-out;
}

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

.memories-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.memories-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--text-primary);
}

.memories-title-icon {
  font-size: 20px;
}

.memories-date {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 400;
}

.memories-dismiss {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  transition: background 0.2s;
}

.memories-dismiss:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.memories-cards {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.memories-cards::-webkit-scrollbar {
  height: 4px;
}

.memories-cards::-webkit-scrollbar-track {
  background: transparent;
}

.memories-cards::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

.memory-card {
  flex-shrink: 0;
  width: 200px;
  background: var(--bg-secondary);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.memory-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.memory-card-media {
  width: 100%;
  height: 120px;
  object-fit: cover;
  background: var(--bg-tertiary);
}

.memory-card-content {
  padding: 12px;
}

.memory-card-year {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 4px;
}

.memory-card-text {
  font-size: 13px;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

.memory-card-actions {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
}

.memory-action-btn {
  flex: 1;
  padding: 6px;
  font-size: 12px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
}

.memory-share-btn {
  background: var(--accent);
  color: white;
}

.memory-share-btn:hover {
  background: var(--accent-hover);
}

.memory-dismiss-btn {
  background: var(--bg-tertiary);
  color: var(--text-muted);
}

.memory-dismiss-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.memories-empty {
  text-align: center;
  padding: 20px;
  color: var(--text-muted);
}

.memories-see-all {
  display: block;
  text-align: center;
  margin-top: 12px;
  color: var(--accent);
  font-size: 13px;
  text-decoration: none;
  font-weight: 500;
}

.memories-see-all:hover {
  text-decoration: underline;
}

/* Story Viewer - base styles only, main .story-viewer-container is defined above */
.story-viewer {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* .story-viewer-container is defined earlier at line ~7301 with proper centering */

.story-progress-bar {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  z-index: 10;
}

.story-progress {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,0.3);
  border-radius: 2px;
  overflow: hidden;
}

.story-progress.completed {
  background: white;
}

.story-progress.active {
  animation: story-progress 5s linear forwards;
}

@keyframes story-progress {
  from { background: linear-gradient(to right, white 0%, rgba(255,255,255,0.3) 0%); }
  to { background: linear-gradient(to right, white 100%, rgba(255,255,255,0.3) 100%); }
}

.story-header {
  position: absolute;
  top: 16px;
  left: 8px;
  right: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
}

.story-user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.story-viewer-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.story-viewer-username {
  color: white;
  font-weight: 600;
  font-size: 14px;
}

.story-viewer-time {
  color: rgba(255,255,255,0.7);
  font-size: 12px;
}

.story-close {
  background: rgba(255,255,255,0.2);
  border: none;
  color: white;
  font-size: 24px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.story-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Story media - use proper sizing for centering */
.story-media {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.story-caption-overlay {
  position: absolute;
  bottom: 80px;
  left: 16px;
  right: 16px;
  background: rgba(0,0,0,0.6);
  padding: 12px 16px;
  border-radius: 8px;
  color: white;
  font-size: 14px;
  text-align: center;
}

.story-poll {
  position: absolute;
  bottom: 100px;
  left: 16px;
  right: 16px;
  background: rgba(0,0,0,0.8);
  border-radius: 12px;
  padding: 16px;
}

.story-poll-question {
  color: white;
  font-weight: 600;
  margin-bottom: 12px;
  text-align: center;
}

.story-poll-option {
  position: relative;
  background: rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}

.story-poll-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--accent);
  opacity: 0.3;
  border-radius: 8px;
}

.story-poll-text {
  color: white;
  position: relative;
  z-index: 1;
}

.story-poll-pct {
  color: white;
  font-weight: 600;
  position: relative;
  z-index: 1;
}

.story-reactions {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.story-reaction-btn {
  background: rgba(255,255,255,0.15);
  border: none;
  font-size: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s;
}

.story-reaction-btn:hover {
  transform: scale(1.2);
  background: rgba(255,255,255,0.25);
}

/* Story Header Actions */
.story-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.story-options-btn {
  background: rgba(255,255,255,0.2);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.story-options-btn:hover {
  background: rgba(255,255,255,0.3);
}

/* Media Options Menu (shared for stories and reels) */
.media-options-menu {
  position: absolute;
  top: 60px;
  right: 8px;
  background: var(--bg-primary);
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
  min-width: 200px;
  max-width: calc(100% - 16px);
  z-index: 10000;
  overflow: hidden;
  animation: menuSlide 0.2s ease;
}

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

.media-option-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s;
  text-align: left;
}

.media-option-item:hover {
  background: var(--bg-secondary);
}

.media-option-item svg {
  flex-shrink: 0;
  opacity: 0.9;
}

.media-option-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* Report Modal */
.report-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.report-option-btn {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: all 0.2s;
}

.report-option-btn:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent);
}

/* ============================================
   REEL VIEWER
   ============================================ */

.reel-viewer {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reel-viewer.hidden {
  display: none;
}

.reel-viewer-container {
  position: relative;
  width: 100%;
  max-width: 420px;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.reel-viewer-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  z-index: 10;
  background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, transparent 100%);
}

.reel-close-btn,
.reel-options-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  opacity: 0.9;
  transition: opacity 0.2s;
}

.reel-close-btn:hover,
.reel-options-btn:hover {
  opacity: 1;
}

.reel-viewer-title {
  color: white;
  font-weight: 600;
  font-size: 16px;
}

.reel-video-container {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.reel-video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reel-overlay-info {
  position: absolute;
  bottom: 100px;
  left: 16px;
  right: 80px;
  z-index: 5;
}

.reel-creator-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  cursor: pointer;
}

.reel-creator-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid white;
}

.reel-creator-details {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.reel-creator-name {
  color: white;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.reel-creator-handle {
  color: rgba(255,255,255,0.8);
  font-size: 12px;
}

.reel-follow-btn {
  background: var(--accent);
  color: white;
  border: none;
  padding: 6px 16px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.reel-follow-btn:hover {
  transform: scale(1.05);
}

.reel-follow-btn.following {
  background: transparent;
  border: 1px solid white;
}

.reel-caption {
  color: white;
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Reel Viewer Modal (click-to-view) */
#reel-viewer-modal {
  display: none;
}

#reel-viewer-modal.active {
  display: block;
}

.reel-viewer-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg-secondary);
  border-radius: 16px;
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow: hidden;
  z-index: 10001;
  display: flex;
  flex-direction: column;
}

.reel-viewer-content .modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 12;
  background: rgba(0,0,0,0.6);
  border: none;
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reel-viewer-content .reel-video-container {
  position: relative;
  background: #000;
  max-height: 60vh;
}

.reel-viewer-content video {
  width: 100%;
  max-height: 60vh;
  object-fit: contain;
  display: block;
}

.reel-viewer-content .reel-details {
  padding: 16px;
}

.reel-viewer-content .reel-creator {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.reel-viewer-content .reel-creator img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.reel-viewer-content .reel-caption {
  color: var(--text-primary);
  margin-bottom: 12px;
}

.reel-viewer-content .reel-stats {
  display: flex;
  gap: 16px;
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 12px;
}

.reel-viewer-content .reel-actions {
  display: flex;
  gap: 12px;
  position: static;
  flex-direction: row;
}

/* Reel Options Dropdown */
.reel-options-dropdown {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10;
}

.reel-options-dropdown .reel-options-btn {
  background: rgba(0, 0, 0, 0.6);
  border: none;
  color: white;
  font-size: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.reel-options-dropdown .reel-options-btn:hover {
  background: rgba(0, 0, 0, 0.8);
}

.reel-options-menu {
  position: absolute;
  top: 42px;
  left: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  min-width: 180px;
  padding: 8px 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  display: none;
  z-index: 100;
}

.reel-options-menu.show {
  display: block;
}

.reel-options-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 14px;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s;
}

.reel-options-menu button:hover {
  background: var(--bg-hover);
}

.reel-audio {
  display: flex;
  align-items: center;
  gap: 8px;
  color: white;
  font-size: 13px;
  background: rgba(0,0,0,0.3);
  padding: 6px 12px;
  border-radius: 20px;
  width: fit-content;
}

/* Reel Actions (right side) */
.reel-actions {
  position: absolute;
  right: 12px;
  bottom: 120px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  z-index: 5;
}

.reel-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s;
}

.reel-action-btn:hover {
  transform: scale(1.1);
}

.reel-action-btn span {
  color: white;
  font-size: 12px;
  font-weight: 500;
}

.reel-action-btn.liked svg {
  animation: likeHeart 0.3s ease;
}

@keyframes likeHeart {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}

/* Reel Comments Modal */
.reel-comments-modal {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-primary);
  border-radius: 16px 16px 0 0;
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  z-index: 20;
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.reel-comments-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}

.reel-comments-header button {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--text-secondary);
}

.reel-comments-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.reel-comment {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.reel-comment .comment-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.reel-comment .comment-content {
  flex: 1;
}

.reel-comment .comment-username {
  font-weight: 600;
  font-size: 13px;
  margin-right: 8px;
}

.reel-comment .comment-text {
  font-size: 14px;
  color: var(--text-secondary);
}

.reel-comments-input {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}

.reel-comments-input input {
  flex: 1;
  padding: 10px 16px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 14px;
}

.reel-comments-input button {
  background: var(--accent);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  font-weight: 600;
  cursor: pointer;
}

/* Mobile responsive for reel viewer */
@media (max-width: 768px) {
  .reel-viewer-container {
    max-width: 100%;
  }

  .media-options-menu {
    left: 12px;
    right: 12px;
    max-width: none;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
  }

  .story-header {
    left: 0;
    right: 0;
    padding: 12px 16px;
  }

  .story-header-actions {
    gap: 4px;
  }
}

/* ============================================
   SCHEDULED POSTS
   ============================================ */

.scheduled-post-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--bg-secondary);
  border-radius: 12px;
  border: 1px solid var(--border);
  margin-bottom: 12px;
}

.scheduled-post-time {
  min-width: 60px;
  text-align: center;
  padding: 8px;
  background: var(--bg-tertiary);
  border-radius: 8px;
}

.scheduled-date {
  font-size: 12px;
  color: var(--text-secondary);
}

.scheduled-hour {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.scheduled-post-content {
  flex: 1;
  font-size: 14px;
  color: var(--text-secondary);
}

.scheduled-post-content .has-media {
  margin-left: 8px;
}

.scheduled-post-actions {
  display: flex;
  gap: 8px;
}

/* ============================================
   CREATOR ANALYTICS
   ============================================ */

.analytics-overview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.analytics-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}

.analytics-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.analytics-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
}

.analytics-value.positive {
  color: var(--success);
}

.analytics-value.negative {
  color: var(--danger);
}

.analytics-value.success {
  color: var(--success);
}

.analytics-section {
  margin-top: 24px;
}

.analytics-section h3 {
  margin-bottom: 16px;
  font-size: 16px;
  color: var(--text-primary);
}

.top-posts-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.top-post-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: var(--bg-secondary);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
}

.top-post-item:hover {
  background: var(--bg-tertiary);
}

.top-post-content {
  flex: 1;
  font-size: 13px;
  color: var(--text-secondary);
  margin-right: 16px;
}

.top-post-stats {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--text-muted);
}

.analytics-period-btn {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.analytics-period-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

/* ============================================
   ACHIEVEMENTS & GAMIFICATION
   ============================================ */

.achievements-summary {
  display: flex;
  justify-content: center;
  gap: 32px;
  padding: 24px;
  background: var(--bg-secondary);
  border-radius: 16px;
  border: 1px solid var(--border);
  margin-bottom: 24px;
}

.achievement-stat {
  text-align: center;
}

.achievement-stat-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary);
}

.achievement-stat-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.achievements-section {
  margin-bottom: 24px;
}

.achievements-section h3 {
  margin-bottom: 16px;
  font-size: 16px;
  color: var(--text-primary);
}

.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

.achievement-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}

.achievement-card.earned {
  border-color: var(--accent);
  box-shadow: 0 0 20px var(--accent-glow);
}

.achievement-card.locked {
  opacity: 0.6;
}

.achievement-card:hover {
  transform: translateY(-2px);
}

.achievement-icon {
  font-size: 36px;
  margin-bottom: 8px;
}

.achievement-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.achievement-desc {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.achievement-points {
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
}

.achievement-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-muted);
}

.progress-bar {
  flex: 1;
  height: 4px;
  background: var(--bg-tertiary);
  border-radius: 2px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.3s;
}

/* Leaderboard */
.leaderboard-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.leaderboard-tab {
  flex: 1;
  padding: 10px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.leaderboard-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.leaderboard-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-secondary);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
}

.leaderboard-item:hover {
  background: var(--bg-tertiary);
}

.leaderboard-item.current-user {
  border: 1px solid var(--accent);
}

.leaderboard-rank {
  width: 28px;
  height: 28px;
  background: var(--bg-tertiary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-secondary);
}

.leaderboard-item:nth-child(1) .leaderboard-rank {
  background: linear-gradient(135deg, #ffd700, #ffaa00);
  color: #000;
}

.leaderboard-item:nth-child(2) .leaderboard-rank {
  background: linear-gradient(135deg, #c0c0c0, #a0a0a0);
  color: #000;
}

.leaderboard-item:nth-child(3) .leaderboard-rank {
  background: linear-gradient(135deg, #cd7f32, #b8860b);
  color: #fff;
}

.leaderboard-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.leaderboard-info {
  flex: 1;
}

.leaderboard-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
}

.leaderboard-username {
  font-size: 12px;
  color: var(--text-secondary);
}

.leaderboard-score {
  font-weight: 600;
  font-size: 14px;
  color: var(--accent);
}

/* ============================================
   INTERACTIVE UI TOUR / WALKTHROUGH
   ============================================ */

/* Tour Overlay */
.tour-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tour-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* Tour Backdrop */
.tour-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 9998;
}

/* Tour Spotlight */
.tour-spotlight {
  position: fixed;
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.85),
              0 0 30px rgba(99, 102, 241, 0.6),
              inset 0 0 20px rgba(99, 102, 241, 0.2);
  z-index: 9999;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.tour-spotlight::before {
  content: '';
  position: absolute;
  inset: -4px;
  border: 2px solid var(--accent);
  border-radius: 14px;
  animation: tour-pulse 2s infinite;
}

@keyframes tour-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.02); }
}

/* Tour Tooltip */
.tour-tooltip {
  position: fixed;
  max-width: 360px;
  min-width: 280px;
  background: var(--gradient);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 16px;
  padding: 24px;
  z-index: 10001;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(99, 102, 241, 0.15);
}

.tour-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Tooltip Arrow */
.tour-tooltip::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  background: var(--gradient);
  border: 1px solid rgba(99, 102, 241, 0.3);
  transform: rotate(45deg);
}

.tour-tooltip.arrow-top::before {
  top: -9px; left: 50%; margin-left: -8px;
  border-right: none; border-bottom: none;
}

.tour-tooltip.arrow-bottom::before {
  bottom: -9px; left: 50%; margin-left: -8px;
  border-left: none; border-top: none;
}

.tour-tooltip.arrow-left::before {
  left: -9px; top: 50%; margin-top: -8px;
  border-right: none; border-top: none;
}

.tour-tooltip.arrow-right::before {
  right: -9px; top: 50%; margin-top: -8px;
  border-left: none; border-bottom: none;
}

/* Tooltip Content */
.tour-tooltip-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.tour-tooltip-icon {
  width: 48px;
  height: 48px;
  background: var(--gradient);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.tour-tooltip-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
}

.tour-tooltip-description {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 20px;
}

/* Tour Progress */
.tour-progress {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
}

.tour-progress-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  transition: all 0.3s;
}

.tour-progress-dot.active {
  background: var(--accent);
  transform: scale(1.3);
}

.tour-progress-dot.completed {
  background: var(--success);
}

.tour-progress-text {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-left: auto;
}

/* Tour Actions */
.tour-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.tour-btn {
  padding: 10px 20px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.tour-btn-primary {
  background: var(--accent);
  color: white;
  flex: 1;
}

.tour-btn-primary:hover {
  background: var(--accent-hover);
  box-shadow: 0 0 20px var(--accent-glow);
}

.tour-btn-skip {
  background: transparent;
  color: var(--text-muted);
  padding: 10px 16px;
}

.tour-btn-skip:hover { color: var(--text-secondary); }

.tour-btn-back {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.tour-btn-back:hover { border-color: var(--text-secondary); }

/* Welcome Screen */
.tour-welcome {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 480px;
  width: 90%;
  background: var(--gradient);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 24px;
  padding: 40px;
  z-index: 10001;
  text-align: center;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6), 0 0 60px rgba(99, 102, 241, 0.2);
}

.tour-welcome-icon {
  width: 80px;
  height: 80px;
  background: var(--gradient);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  margin: 0 auto 24px;
  box-shadow: 0 10px 40px rgba(99, 102, 241, 0.4);
}

.tour-welcome-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.tour-welcome-subtitle {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 32px;
}

.tour-welcome-features {
  display: flex;
  gap: 16px;
  margin-bottom: 32px;
  text-align: left;
}

.tour-welcome-feature {
  flex: 1;
  background: var(--bg-tertiary);
  border-radius: 12px;
  padding: 16px;
}

.tour-welcome-feature-icon { font-size: 24px; margin-bottom: 8px; }

.tour-welcome-feature-title {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.tour-welcome-feature-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.tour-welcome-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tour-welcome-actions .tour-btn-primary {
  padding: 14px 32px;
  font-size: 1rem;
}

/* Tour Complete Screen */
.tour-complete {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 440px;
  width: 90%;
  background: var(--gradient);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 24px;
  padding: 40px;
  z-index: 10001;
  text-align: center;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6), 0 0 60px rgba(16, 185, 129, 0.2);
}

.tour-complete-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #10b981, #059669);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  margin: 0 auto 24px;
  box-shadow: 0 10px 40px rgba(16, 185, 129, 0.4);
  animation: tour-complete-bounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes tour-complete-bounce {
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.tour-complete-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.tour-complete-subtitle {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 24px;
}

.tour-complete .tour-btn-primary {
  background: linear-gradient(135deg, #10b981, #059669);
  width: 100%;
  padding: 14px 32px;
  font-size: 1rem;
}

.tour-complete .tour-btn-primary:hover {
  box-shadow: 0 0 30px rgba(16, 185, 129, 0.4);
}

/* Settings Tour Section */
.settings-tour-section {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-top: 24px;
}

.settings-tour-section h3 { margin-bottom: 8px; }

.settings-tour-section p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 16px;
}

.tour-replay-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.tour-replay-btn:hover {
  border-color: var(--accent);
  background: rgba(99, 102, 241, 0.1);
}

.tour-replay-btn svg { width: 18px; height: 18px; }

/* Responsive Tour */
@media (max-width: 768px) {
  .tour-tooltip {
    max-width: 300px;
    min-width: 260px;
    padding: 20px;
  }

  .tour-welcome { padding: 24px; }

  .tour-welcome-features {
    flex-direction: column;
    gap: 12px;
  }

  .tour-welcome-icon {
    width: 64px;
    height: 64px;
    font-size: 32px;
  }

  .tour-welcome-title { font-size: 1.5rem; }
}

/* ============================================
   CREATOR ONBOARDING FLOW
   ============================================ */

.creator-onboarding-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.creator-onboarding-overlay.active {
  opacity: 1;
  visibility: visible;
}

.creator-onboarding-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(8px);
}

.creator-onboarding-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  margin: 20px;
}

/* Creator Invite Popup */
.creator-invite-popup {
  background: var(--gradient);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 40px;
  text-align: center;
  position: relative;
  animation: popupEnter 0.4s ease;
}

@keyframes popupEnter {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.creator-popup-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.2s;
}

.creator-popup-close:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.creator-popup-close svg {
  width: 24px;
  height: 24px;
}

.creator-invite-icon {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
}

.creator-invite-glow {
  position: absolute;
  inset: -10px;
  background: var(--gradient);
  border-radius: 50%;
  opacity: 0.3;
  filter: blur(20px);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.1); opacity: 0.5; }
}

.creator-invite-title {
  font-size: 1.75rem;
  margin-bottom: 8px;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.creator-invite-subtitle {
  color: var(--text-secondary);
  font-size: 1rem;
  margin-bottom: 32px;
}

.creator-benefits {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
  text-align: left;
}

.creator-benefit {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: rgba(99, 102, 241, 0.05);
  border: 1px solid rgba(99, 102, 241, 0.1);
  border-radius: 12px;
}

.benefit-icon {
  font-size: 24px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  border-radius: 10px;
}

.benefit-text strong {
  display: block;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.benefit-text span {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.creator-invite-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.creator-invite-actions .btn-primary {
  padding: 16px 32px;
  font-size: 1.1rem;
}

.creator-invite-actions .btn-ghost {
  color: var(--text-secondary);
  border: none;
}

/* Onboarding Steps */
.creator-onboarding-step {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 32px;
  animation: stepEnter 0.4s ease;
}

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

.onboarding-progress {
  margin-bottom: 24px;
}

.onboarding-progress-bar {
  height: 6px;
  background: var(--bg-tertiary);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}

.onboarding-progress-fill {
  height: 100%;
  background: var(--gradient);
  border-radius: 3px;
  transition: width 0.5s ease;
}

.onboarding-progress-text {
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.onboarding-header {
  text-align: center;
  margin-bottom: 28px;
}

.onboarding-step-icon {
  font-size: 48px;
  margin-bottom: 12px;
  display: block;
}

.onboarding-title {
  font-size: 1.5rem;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.onboarding-subtitle {
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.onboarding-icon-large {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
}

.onboarding-icon-glow {
  position: absolute;
  inset: -20px;
  background: var(--gradient);
  border-radius: 50%;
  opacity: 0.2;
  filter: blur(30px);
}

.onboarding-form {
  margin-bottom: 24px;
}

.onboarding-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.onboarding-actions .btn-ghost {
  color: var(--text-secondary);
  border: none;
}

/* Profile Preview in Onboarding */
.profile-preview {
  position: relative;
  margin-bottom: 24px;
}

.profile-banner-preview {
  height: 120px;
  background: linear-gradient(135deg, #2a2a4a 0%, #1a1a35 100%);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.profile-banner-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.banner-edit-btn {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-edit-btn svg {
  width: 16px;
  height: 16px;
}

.profile-avatar-preview {
  position: absolute;
  bottom: -30px;
  left: 20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 4px solid var(--bg-secondary);
  background: var(--bg-tertiary);
  overflow: hidden;
}

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

.avatar-edit-btn {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  color: white;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-avatar-preview:hover .avatar-edit-btn {
  opacity: 1;
}

.avatar-edit-btn svg {
  width: 24px;
  height: 24px;
}

/* Social Links Form */
.social-links-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.social-input label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.social-icon {
  width: 20px;
  height: 20px;
}

.social-icon.twitter { color: #1DA1F2; }
.social-icon.instagram { color: #E4405F; }
.social-icon.youtube { color: #FF0000; }
.social-icon.tiktok { color: #ffffff; }
.social-icon.website { color: var(--accent); }

/* Monetization Options */
.monetization-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.monetization-card {
  padding: 20px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 16px;
  text-align: center;
}

.monetization-icon {
  font-size: 32px;
  margin-bottom: 12px;
}

.monetization-card h4 {
  color: var(--text-primary);
  margin-bottom: 8px;
}

.monetization-card p {
  color: var(--text-secondary);
  font-size: 0.8rem;
  line-height: 1.4;
}

/* Stripe Setup */
.stripe-setup-info {
  margin-bottom: 24px;
}

.stripe-info-card {
  padding: 24px;
  background: var(--bg-tertiary);
  border-radius: 16px;
  text-align: center;
  margin-bottom: 20px;
}

.stripe-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.stripe-info-card h4 {
  margin-bottom: 8px;
}

.stripe-info-card p {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.stripe-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stripe-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-secondary);
}

.stripe-feature svg {
  width: 20px;
  height: 20px;
  color: var(--success);
}

/* First Post Suggestions */
.first-post-suggestions {
  margin-bottom: 24px;
}

.suggestion-label {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 12px;
}

.suggestion-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.suggestion-chip {
  padding: 10px 16px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text-primary);
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
}

.suggestion-chip:hover {
  border-color: var(--accent);
  background: rgba(99, 102, 241, 0.1);
}

/* Analytics Preview */
.analytics-preview {
  margin-bottom: 24px;
}

.analytics-preview-card {
  display: flex;
  justify-content: space-around;
  padding: 24px;
  background: var(--bg-tertiary);
  border-radius: 16px;
  margin-bottom: 20px;
}

.preview-stat {
  text-align: center;
}

.preview-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
  font-family: 'Space Grotesk', sans-serif;
}

.preview-label {
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.analytics-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.analytics-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-secondary);
}

.analytics-feature .feature-icon {
  font-size: 20px;
}

/* Welcome Step */
.welcome-step {
  text-align: center;
}

.welcome-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 32px 0;
  text-align: left;
}

.welcome-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-tertiary);
  border-radius: 10px;
}

.welcome-feature-icon {
  font-size: 20px;
}

.welcome-feature span {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* Complete Step */
.complete-step {
  text-align: center;
  position: relative;
  overflow: hidden;
}

.complete-icon {
  animation: bounce 1s ease infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.complete-checklist {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 32px 0;
  text-align: left;
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-tertiary);
  border-radius: 10px;
  color: var(--text-secondary);
}

.checklist-item.completed {
  color: var(--success);
}

.checklist-item svg {
  width: 20px;
  height: 20px;
}

/* Confetti Animation */
.confetti-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
}

.confetti {
  position: absolute;
  width: 10px;
  height: 10px;
  top: -10px;
  border-radius: 2px;
  animation: confettiFall 4s linear forwards;
}

@keyframes confettiFall {
  0% {
    transform: translateY(0) rotateZ(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotateZ(720deg);
    opacity: 0;
  }
}

/* Sidebar Creator Prompt */
.sidebar-creator-prompt {
  margin-top: auto;
  padding-top: 16px;
}

.creator-prompt-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.creator-prompt-card:hover {
  border-color: var(--accent);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
}

.creator-prompt-icon {
  font-size: 24px;
}

.creator-prompt-text {
  display: flex;
  flex-direction: column;
}

.creator-prompt-text strong {
  color: var(--text-primary);
  font-size: 0.9rem;
}

.creator-prompt-text span {
  color: var(--text-secondary);
  font-size: 0.75rem;
}

/* Responsive Creator Onboarding */
@media (max-width: 600px) {
  .creator-onboarding-container {
    margin: 10px;
    max-height: 95vh;
  }

  .creator-invite-popup,
  .creator-onboarding-step {
    padding: 24px;
    border-radius: 20px;
  }

  .creator-invite-title {
    font-size: 1.5rem;
  }

  .monetization-options {
    grid-template-columns: 1fr;
  }

  .welcome-features {
    grid-template-columns: 1fr;
  }

  .analytics-preview-card {
    flex-wrap: wrap;
    gap: 16px;
  }

  .preview-stat {
    flex: 1 1 calc(50% - 8px);
  }

  .onboarding-actions {
    flex-direction: column;
  }

  .onboarding-actions button {
    width: 100%;
  }
}

/* ============================================
   USER ONBOARDING FLOW
   ============================================ */

.user-onboarding-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.user-onboarding-overlay.active {
  opacity: 1;
  visibility: visible;
}

.user-onboarding-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
}

.user-onboarding-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  overflow-y: auto;
  margin: 20px;
}

.user-onboarding-card {
  background: var(--bg-secondary);
  border-radius: 24px;
  border: 1px solid var(--border);
  padding: 40px;
  animation: onboardingSlideUp 0.4s ease;
}

@keyframes onboardingSlideUp {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Welcome Screen */
.user-onboarding-welcome {
  text-align: center;
}

.onboarding-welcome-icon {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
}

.onboarding-icon-glow {
  position: absolute;
  inset: 0;
  background: var(--gradient);
  border-radius: 50%;
  opacity: 0.2;
  filter: blur(20px);
  animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {
  0%, 100% { transform: scale(1); opacity: 0.2; }
  50% { transform: scale(1.2); opacity: 0.3; }
}

.onboarding-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 12px;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.onboarding-subtitle {
  color: var(--text-secondary);
  font-size: 1.1rem;
  max-width: 400px;
  margin: 0 auto 32px;
  line-height: 1.6;
}

.onboarding-features {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-bottom: 32px;
}

.onboarding-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: var(--bg-tertiary);
  border-radius: 16px;
  flex: 1;
  max-width: 140px;
}

.feature-icon {
  font-size: 28px;
  margin-bottom: 4px;
}

.feature-title {
  font-weight: 600;
  font-size: 0.9rem;
}

.feature-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
}

.onboarding-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.onboarding-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  min-width: 180px;
}

.onboarding-btn-primary {
  background: var(--gradient);
  color: white;
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3);
}

.onboarding-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 30px rgba(99, 102, 241, 0.4);
}

.onboarding-btn-large {
  padding: 18px 36px;
  font-size: 1.1rem;
}

.onboarding-btn-skip {
  background: transparent;
  color: var(--text-muted);
  padding: 10px 20px;
  min-width: auto;
}

.onboarding-btn-skip:hover {
  color: var(--text-secondary);
}

.onboarding-btn-back {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.onboarding-btn-back:hover {
  background: var(--border);
}

/* Progress Indicator */
.onboarding-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
}

.onboarding-progress-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  transition: all 0.3s ease;
}

.onboarding-progress-dot.active {
  width: 24px;
  border-radius: 4px;
  background: var(--accent);
}

.onboarding-progress-dot.completed {
  background: var(--success);
}

.onboarding-progress-text {
  margin-left: 12px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Step Header */
.onboarding-step-header {
  text-align: center;
  margin-bottom: 28px;
}

.step-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.step-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.step-subtitle {
  color: var(--text-secondary);
  font-size: 0.95rem;
}

/* Step Content */
.onboarding-step-content {
  margin-bottom: 28px;
}

/* Step Actions */
.onboarding-step-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

/* Profile Setup */
.profile-setup {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.profile-cover-upload {
  width: 100%;
  height: 120px;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  background: var(--bg-tertiary);
  border: 2px dashed var(--border);
  transition: all 0.2s ease;
}

.profile-cover-upload:hover {
  border-color: var(--accent);
}

.cover-preview {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cover-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
}

.cover-placeholder span {
  font-size: 0.85rem;
}

.profile-avatar-section {
  display: flex;
  justify-content: center;
  margin-top: -50px;
  margin-bottom: 16px;
}

.profile-avatar-upload {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  cursor: pointer;
  border: 4px solid var(--bg-secondary);
}

.avatar-preview {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.avatar-overlay {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  color: white;
}

.profile-avatar-upload:hover .avatar-overlay {
  opacity: 1;
}

.profile-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.field-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field-group label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.field-group input,
.field-group textarea {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 1rem;
  color: var(--text-primary);
  transition: all 0.2s ease;
  width: 100%;
  font-family: inherit;
}

.field-group input:focus,
.field-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.field-group textarea {
  resize: none;
}

.char-count {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: right;
}

/* Interests Grid */
.interests-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.interest-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
  color: var(--text-primary);
}

.interest-chip:hover {
  border-color: var(--accent);
  background: rgba(99, 102, 241, 0.1);
}

.interest-chip.selected {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.interest-icon {
  font-size: 1.1rem;
}

.interest-check {
  display: none;
}

.interest-chip.selected .interest-check {
  display: block;
}

.interests-hint,
.creators-hint,
.first-post-hint {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 16px;
}

/* Creators Grid */
.creators-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  max-height: 350px;
  overflow-y: auto;
  padding: 4px;
}

.creator-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.creator-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.creator-card.selected {
  border-color: var(--accent);
  background: rgba(99, 102, 241, 0.1);
}

.creator-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 12px;
}

.creator-info {
  text-align: center;
  width: 100%;
}

.creator-name {
  font-weight: 600;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.creator-username {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.creator-bio {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-bottom: 8px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.creator-followers {
  font-size: 0.75rem;
  color: var(--accent);
  font-weight: 500;
}

.creator-follow-check {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  display: none;
  align-items: center;
  justify-content: center;
  color: white;
}

.creator-card.selected .creator-follow-check {
  display: flex;
}

.no-creators {
  text-align: center;
  padding: 40px 20px;
}

.no-creators-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.no-creators p {
  color: var(--text-secondary);
}

/* First Post */
.first-post-section {
  max-width: 100%;
}

.post-compose-card {
  background: var(--bg-tertiary);
  border-radius: 16px;
  padding: 20px;
  border: 1px solid var(--border);
}

.compose-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.compose-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.compose-name {
  font-weight: 600;
}

.compose-textarea {
  width: 100%;
  background: transparent;
  border: none;
  font-size: 1rem;
  color: var(--text-primary);
  resize: none;
  font-family: inherit;
  line-height: 1.6;
}

.compose-textarea:focus {
  outline: none;
}

.compose-textarea::placeholder {
  color: var(--text-muted);
}

.compose-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.compose-post-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 50px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.compose-post-btn:hover {
  background: var(--accent-hover);
}

/* Notification Settings */
.notification-settings {
  max-width: 100%;
}

.notification-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.notification-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: var(--bg-tertiary);
  border-radius: 12px;
  transition: background 0.2s ease;
}

.notification-item:hover {
  background: var(--border);
}

.notification-info {
  flex: 1;
}

.notification-title {
  font-weight: 500;
  margin-bottom: 2px;
}

.notification-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Note: toggle-switch is defined in the ad toggle section - do not duplicate */

/* Completion Screen */
.onboarding-complete {
  text-align: center;
}

.complete-icon {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
}

.complete-icon-glow {
  position: absolute;
  inset: 0;
  background: var(--gradient);
  border-radius: 50%;
  opacity: 0.3;
  filter: blur(20px);
  animation: pulseGlow 2s ease-in-out infinite;
}

.complete-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 12px;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.complete-subtitle {
  color: var(--text-secondary);
  font-size: 1rem;
  max-width: 360px;
  margin: 0 auto 24px;
  line-height: 1.6;
}

.complete-stats {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-bottom: 32px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-number {
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent);
}

.stat-label {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Responsive User Onboarding */
@media (max-width: 600px) {
  .user-onboarding-container {
    margin: 10px;
  }

  .user-onboarding-card {
    padding: 24px;
    border-radius: 20px;
  }

  .onboarding-title {
    font-size: 1.5rem;
  }

  .onboarding-features {
    flex-direction: column;
    align-items: center;
  }

  .onboarding-feature {
    max-width: 100%;
    width: 100%;
    flex-direction: row;
    justify-content: flex-start;
  }

  .feature-text {
    text-align: left;
  }

  .interests-grid {
    justify-content: center;
  }

  .creators-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .onboarding-step-actions {
    flex-direction: column;
  }

  .onboarding-step-actions button {
    width: 100%;
  }
}

/* ============================================
   COMPREHENSIVE MOBILE RESPONSIVENESS
   ============================================ */

/* Mobile Navigation - Hamburger Menu */
.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: background 0.2s;
}

.mobile-menu-btn:hover {
  background: var(--bg-tertiary);
}

.mobile-menu-btn svg {
  width: 28px;
  height: 28px;
}

.mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  z-index: 999;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.mobile-nav-overlay.active {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

.mobile-nav-drawer {
  position: fixed;
  top: 0;
  right: -100%;
  width: 280px;
  max-width: 85vw;
  height: 100vh;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border);
  z-index: 1000;
  transition: right 0.3s ease;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.mobile-nav-drawer.active {
  right: 0;
}

.mobile-nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.mobile-nav-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.2s;
}

.mobile-nav-close:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  color: var(--text-primary);
  border-radius: 12px;
  font-weight: 500;
  transition: all 0.2s;
}

.mobile-nav-link:hover {
  background: var(--bg-tertiary);
}

.mobile-nav-link svg {
  width: 22px;
  height: 22px;
  color: var(--text-secondary);
}

.mobile-nav-cta {
  padding-top: 20px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Tablet Breakpoint (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .landing-hero {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 120px 40px 60px;
  }

  .hero-visual {
    height: 350px;
    margin: 0 auto;
  }

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .creator-section-landing .features-grid,
  .features-grid.three-col {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .profile-header {
    padding: 0 20px;
  }

  .profile-info {
    padding: 0 20px;
  }

  .creator-dashboard {
    padding: 0 10px;
  }

  .stats-row {
    grid-template-columns: repeat(3, 1fr);
  }

  .ad-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile Breakpoint - Medium Phones (390px - 768px) */
@media (max-width: 768px) {
  /* Show mobile hamburger menu */
  .mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .nav-actions .btn-ghost {
    display: none;
  }

  /* Landing nav adjustments */
  .landing-nav {
    padding: 12px 16px;
  }

  .landing-nav .logo {
    font-size: 1.25rem;
  }

  .landing-nav .logo-icon-img {
    width: 32px;
    height: 32px;
  }

  /* Mobile-first feed */
  .posts-container {
    gap: 0;
  }

  .post {
    border-radius: 0;
    border-left: none;
    border-right: none;
    margin-bottom: 0;
    border-bottom: 1px solid var(--border);
  }

  .post:first-child {
    border-top: 1px solid var(--border);
  }

  .post-header {
    gap: 10px;
  }

  .post-author-name {
    font-size: 0.95rem;
  }

  .post-author-handle,
  .post-time {
    font-size: 0.8rem;
  }

  .post-content {
    font-size: 0.95rem;
    line-height: 1.5;
  }

  .post-media {
    border-radius: 12px;
  }

  .post-media img,
  .post-media video {
    max-height: 400px;
  }

  .post-actions {
    padding: 12px 0;
    gap: 0;
    justify-content: space-around;
  }

  .post-action {
    padding: 8px 12px;
    font-size: 0.85rem;
  }

  .post-action svg {
    width: 20px;
    height: 20px;
  }

  /* View headers */
  .view-header {
    padding: 16px;
    position: sticky;
    top: 0;
    background: var(--bg-primary);
    z-index: 50;
    border-bottom: 1px solid var(--border);
  }

  .view-header h1 {
    font-size: 1.25rem;
  }

  /* Feed tabs */
  .feed-tabs {
    gap: 0;
    margin-top: 12px;
  }

  .feed-tabs .tab {
    flex: 1;
    text-align: center;
    padding: 10px 16px;
    font-size: 0.9rem;
  }

  /* Compose box */
  .compose-box {
    padding: 12px 16px;
    gap: 12px;
  }

  .compose-box .avatar {
    width: 36px;
    height: 36px;
  }

  .compose-input {
    font-size: 0.95rem;
    min-height: 36px;
  }

  /* Stories bar */
  .stories-bar {
    padding: 12px 16px;
    gap: 12px;
  }

  .story-item {
    width: 72px;
  }

  .story-avatar {
    width: 64px;
    height: 64px;
  }

  .story-username {
    font-size: 0.7rem;
  }

  /* Profile mobile */
  .profile-cover {
    height: 150px;
    border-radius: 0;
  }

  .profile-info {
    padding: 0 16px;
    margin-top: -50px;
  }

  .profile-avatar {
    width: 100px;
    height: 100px;
    border-width: 3px;
  }

  .profile-info h1 {
    font-size: 1.5rem;
    margin-top: 12px;
  }

  .profile-handle {
    font-size: 0.95rem;
  }

  .profile-bio {
    font-size: 0.9rem;
    line-height: 1.5;
  }

  .profile-stats {
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 16px 0;
  }

  .profile-stat {
    font-size: 0.9rem;
  }

  .profile-stat strong {
    font-size: 1.1rem;
  }

  .profile-actions {
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .profile-actions .btn-primary,
  .profile-actions .btn-secondary {
    padding: 10px 20px;
    font-size: 0.9rem;
  }

  .profile-tabs {
    padding: 0;
    margin-top: 16px;
    justify-content: center;
  }

  .profile-tabs .tab {
    flex: 1;
    text-align: center;
    padding: 14px 16px;
    font-size: 0.9rem;
  }

  /* Creator dashboard mobile */
  .creator-dashboard {
    padding: 16px;
  }

  .stats-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .stat-card {
    padding: 20px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .stat-card .stat-value {
    font-size: 1.5rem;
  }

  .stat-card .stat-label {
    font-size: 0.85rem;
  }

  .creator-section {
    padding: 20px;
    margin-bottom: 16px;
  }

  .creator-section h3 {
    font-size: 1.1rem;
  }

  .export-buttons {
    flex-direction: column;
  }

  .export-buttons .btn-secondary {
    width: 100%;
    text-align: center;
  }

  .tiers-list {
    gap: 12px;
  }

  .tier-card {
    padding: 16px;
  }

  .ad-stats-row {
    grid-template-columns: 1fr 1fr;
  }

  .ad-metrics-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .ad-metric {
    padding: 16px 12px;
  }

  .ad-metric-value {
    font-size: 1.25rem;
  }

  /* Transaction history mobile */
  .section-header-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .filter-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }

  .filter-tab {
    flex-shrink: 0;
    padding: 8px 14px;
    font-size: 0.8rem;
  }

  .transaction-item,
  .payout-item {
    flex-wrap: wrap;
    gap: 12px;
  }

  .transaction-icon,
  .payout-icon {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  .transaction-details,
  .payout-details {
    min-width: 0;
    flex: 1;
  }

  .transaction-amount,
  .payout-amount {
    font-size: 1rem;
  }

  /* Messages mobile */
  .messages-layout {
    grid-template-columns: 1fr;
    height: calc(100vh - 140px);
  }

  .conversations-list {
    max-height: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .conversation-item {
    padding: 12px 16px;
  }

  .messages-panel {
    display: none;
  }

  .messages-panel.active {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: var(--bg-primary);
  }

  /* Search box */
  .search-box {
    margin: 0 16px 16px;
  }

  .search-box input {
    padding: 12px 16px;
    font-size: 1rem;
  }

  /* Friends view */
  .friends-container {
    padding: 16px;
  }

  .friends-section {
    margin-bottom: 24px;
  }

  .friends-section h3 {
    font-size: 1rem;
  }

  .friends-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .friend-card {
    padding: 16px;
  }

  /* Groups view */
  .groups-grid {
    padding: 16px;
    grid-template-columns: 1fr;
  }

  .group-card {
    padding: 16px;
  }

  /* Notifications */
  .notifications-container {
    padding: 0;
  }

  .notification-item {
    padding: 14px 16px;
    gap: 12px;
  }

  .notification-avatar {
    width: 40px;
    height: 40px;
  }

  .notification-text {
    font-size: 0.9rem;
  }

  /* Bookmarks */
  #bookmarks-posts {
    padding: 0;
  }
}

/* Small Mobile (iPhone SE - 320px-389px) */
@media (max-width: 389px) {
  .landing-nav {
    padding: 10px 12px;
  }

  .landing-nav .logo {
    font-size: 1.1rem;
    gap: 8px;
  }

  .landing-nav .logo-icon-img {
    width: 28px;
    height: 28px;
  }

  .nav-actions .btn-primary {
    padding: 8px 14px;
    font-size: 0.85rem;
  }

  /* Hero small mobile */
  .landing-hero {
    padding: 90px 16px 32px;
  }

  .hero-content h1 {
    font-size: 2rem;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  .hero-badge {
    font-size: 0.75rem;
    padding: 6px 12px;
  }

  .hero-cta .btn-lg {
    padding: 12px 24px;
    font-size: 0.95rem;
  }

  .hero-highlights {
    gap: 10px;
  }

  .highlight {
    font-size: 0.8rem;
  }

  /* Features small mobile */
  .features-section {
    padding: 32px 16px;
  }

  .features-section h2 {
    font-size: 1.5rem;
    margin-bottom: 32px;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .feature-card {
    padding: 24px 20px;
  }

  .feature-icon {
    font-size: 1.75rem;
  }

  .feature-card h3 {
    font-size: 1.1rem;
  }

  .feature-card p {
    font-size: 0.85rem;
  }

  /* Compact cards for small screens */
  .creator-section-landing .features-grid,
  .features-grid.three-col {
    grid-template-columns: 1fr;
  }

  /* CTA small mobile */
  .cta-section {
    padding: 48px 16px;
  }

  .cta-content h2 {
    font-size: 1.5rem;
  }

  .cta-content p {
    font-size: 0.95rem;
  }

  /* Stories bar small mobile */
  .stories-bar {
    padding: 10px 12px;
    gap: 10px;
  }

  .story-item {
    width: 64px;
  }

  .story-avatar {
    width: 56px;
    height: 56px;
  }

  /* Post small mobile */
  .post {
    padding: 14px;
  }

  .post-header .avatar {
    width: 38px;
    height: 38px;
  }

  .post-author-name {
    font-size: 0.9rem;
  }

  .post-content {
    font-size: 0.9rem;
  }

  .post-actions {
    padding: 10px 0;
  }

  .post-action {
    padding: 6px 8px;
    font-size: 0.8rem;
  }

  .post-action svg {
    width: 18px;
    height: 18px;
  }

  /* Profile small mobile */
  .profile-cover {
    height: 120px;
  }

  .profile-info {
    padding: 0 12px;
    margin-top: -40px;
  }

  .profile-avatar {
    width: 80px;
    height: 80px;
  }

  .profile-info h1 {
    font-size: 1.25rem;
  }

  .profile-stats {
    gap: 16px;
  }

  .profile-stat {
    font-size: 0.85rem;
  }

  .profile-actions {
    flex-direction: column;
    width: 100%;
  }

  .profile-actions .btn-primary,
  .profile-actions .btn-secondary,
  .profile-actions .btn-ghost {
    width: 100%;
    justify-content: center;
  }

  /* Creator dashboard small mobile */
  .stat-card {
    padding: 16px;
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }

  .ad-stats-row {
    grid-template-columns: 1fr;
  }

  .ad-metrics-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .ad-metric {
    padding: 12px 8px;
  }

  .ad-metric-value {
    font-size: 1.1rem;
  }

  .ad-metric-label {
    font-size: 0.7rem;
  }

  /* Settings small mobile */
  .settings-nav {
    padding: 8px;
  }

  .settings-nav-item {
    padding: 8px 12px;
  }

  .settings-content {
    padding: 16px;
  }

  .settings-section {
    margin-bottom: 24px;
  }

  .settings-section h3 {
    font-size: 1rem;
  }

  .setting-toggle {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* Mobile Modals - Full Screen */
@media (max-width: 768px) {
  .modal-content {
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    border-radius: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
  }

  .modal-content h2 {
    font-size: 1.25rem;
  }

  .modal-close {
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border-radius: 50%;
    font-size: 20px;
  }

  /* Auth modal */
  .auth-modal {
    justify-content: center;
  }

  .auth-header {
    margin-bottom: 24px;
  }

  .auth-header h2 {
    font-size: 1.5rem;
  }

  .auth-logo-img {
    width: 48px;
    height: 48px;
  }

  /* Post modal */
  #post-modal .modal-content {
    padding: 16px;
  }

  .compose-full {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .compose-area {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .compose-area textarea {
    flex: 1;
    min-height: 150px;
    font-size: 1rem;
  }

  .compose-options {
    padding: 12px 0;
  }

  .media-preview {
    max-height: 200px;
  }

  /* Comments modal */
  .comments-modal-content {
    padding: 16px;
  }

  .comments-list {
    flex: 1;
    max-height: none;
    overflow-y: auto;
  }

  .comment-compose {
    padding: 12px 0;
    border-top: 1px solid var(--border);
    margin-top: auto;
  }

  .comment-input-wrapper {
    flex: 1;
  }

  .comment-input-wrapper input {
    padding: 12px 16px;
  }

  /* Tip modal */
  .tip-amounts {
    flex-wrap: wrap;
    gap: 8px;
  }

  .tip-amount {
    flex: 1 1 calc(50% - 4px);
    padding: 14px;
    font-size: 1rem;
  }

  /* Cash out modal */
  .cashout-balance {
    padding: 20px;
  }

  .cashout-amount {
    font-size: 2rem;
  }

  .cashout-summary {
    padding: 16px;
  }

  /* Payout method modal */
  .payout-type-tabs {
    flex-direction: column;
    gap: 8px;
  }

  .payout-type-tab {
    padding: 14px 16px;
    justify-content: flex-start;
  }

  /* Group modal */
  #group-modal .modal-content,
  #tier-modal .modal-content {
    padding: 20px;
  }

  /* Story modal */
  .story-modal-content {
    padding: 16px;
  }

  .story-creator {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .story-preview {
    flex: 1;
    min-height: 200px;
    max-height: 300px;
  }
}

/* Touch-Friendly Inputs */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="url"],
  input[type="tel"],
  input[type="search"],
  input[type="date"],
  input[type="datetime-local"],
  textarea,
  select {
    font-size: 16px !important; /* Prevent iOS zoom on focus */
    padding: 14px 16px;
    min-height: 48px;
    -webkit-appearance: none;
    appearance: none;
  }

  textarea {
    min-height: 100px;
  }

  select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238888aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px;
    padding-right: 40px;
  }

  /* Touch-friendly buttons */
  .btn-primary,
  .btn-secondary,
  .btn-ghost {
    min-height: 48px;
    padding: 12px 24px;
    font-size: 1rem;
  }

  .btn-sm {
    min-height: 40px;
    padding: 10px 16px;
    font-size: 0.9rem;
  }

  /* Toggle switches - match design system (44×24 is already touch-friendly) */
  .toggle,
  .toggle-switch {
    min-width: 44px;
    min-height: 24px;
  }
}

/* Horizontal scroll prevention */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Safe area for notched devices */
@supports (padding: env(safe-area-inset-bottom)) {
  @media (max-width: 768px) {
    .sidebar {
      padding-bottom: calc(8px + env(safe-area-inset-bottom));
    }

    .main-content {
      padding-bottom: calc(100px + env(safe-area-inset-bottom));
    }

    .modal-content {
      padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }

    .comment-compose {
      padding-bottom: calc(12px + env(safe-area-inset-bottom));
    }
  }
}

/* Print styles - hide unnecessary elements */
@media print {
  .sidebar,
  .right-sidebar,
  .modal,
  .mobile-nav-drawer,
  .mobile-nav-overlay {
    display: none !important;
  }

  #main-app {
    grid-template-columns: 1fr;
  }

  .main-content {
    padding: 0;
  }
}

/* ============================================
   ADMIN & SUPPORT STYLES
   ============================================ */

/* Navigation Divider */
.nav-divider {
  height: 1px;
  background: var(--border-color);
  margin: 12px 0;
}

/* Role Badges */
.role-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.role-badge.role-user { background: var(--bg-tertiary); color: var(--text-muted); }
.role-badge.role-creator { background: rgba(236, 72, 153, 0.15); color: #ec4899; }
.role-badge.role-moderator { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.role-badge.role-developer { background: rgba(99, 102, 241, 0.15); color: #6366f1; }
.role-badge.role-admin { background: rgba(239, 68, 68, 0.15); color: #ef4444; }

.sidebar-role-badge {
  display: block;
  font-size: 10px;
  margin-top: 2px;
}

.badge-creator {
  display: inline-block;
  padding: 2px 6px;
  background: rgba(236, 72, 153, 0.15);
  color: #ec4899;
  border-radius: 8px;
  font-size: 10px;
  margin-left: 4px;
}

/* Help Center - Modernized Design */
.help-container {
  padding: 24px;
  max-width: 900px;
  margin: 0 auto;
}

.help-search {
  margin-bottom: 32px;
  position: relative;
}

.help-search input {
  width: 100%;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.08) 0%, rgba(6, 214, 160, 0.08) 100%);
  border: 1px solid rgba(8, 145, 178, 0.2);
  border-radius: 16px;
  color: var(--text-primary);
  font-size: 16px;
  backdrop-filter: blur(4px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.help-search input:focus {
  outline: none;
  border-color: rgba(8, 145, 178, 0.5);
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.12) 0%, rgba(6, 214, 160, 0.12) 100%);
  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1);
}

.help-search input::placeholder {
  color: var(--text-muted);
}

/* Category Buttons - Modern Pills */
.faq-categories {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 32px;
  align-items: center;
}

.faq-category {
  padding: 10px 20px;
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.1) 0%, rgba(6, 214, 160, 0.05) 100%);
  border: 1px solid rgba(8, 145, 178, 0.2);
  border-radius: 24px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.faq-category::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.5s;
}

.faq-category:hover {
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.15) 0%, rgba(6, 214, 160, 0.1) 100%);
  border-color: rgba(8, 145, 178, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(8, 145, 178, 0.1);
}

.faq-category.active {
  background: linear-gradient(135deg, #0891b2 0%, #06d6a0 100%);
  color: white;
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(8, 145, 178, 0.3);
  transform: translateY(-2px);
}

.faq-category.active::before {
  left: 100%;
}

/* FAQ Articles - Enhanced Cards */
#faq-articles {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-article {
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.04) 0%, rgba(6, 214, 160, 0.02) 100%);
  border: 1px solid rgba(8, 145, 178, 0.12);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(2px);
}

.faq-article:hover {
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.08) 0%, rgba(6, 214, 160, 0.05) 100%);
  border-color: rgba(8, 145, 178, 0.25);
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(8, 145, 178, 0.15);
}

.faq-article.expanded {
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.1) 0%, rgba(6, 214, 160, 0.06) 100%);
  border-color: rgba(8, 145, 178, 0.3);
  box-shadow: 0 12px 28px rgba(8, 145, 178, 0.12);
}

.faq-question {
  color: var(--text-primary);
  margin: 0;
  padding: 18px 20px;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  letter-spacing: -0.3px;
}

.faq-question::after {
  content: '▶';
  color: rgba(8, 145, 178, 0.6);
  font-size: 12px;
  margin-left: auto;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.faq-article.expanded .faq-question::after {
  transform: rotate(90deg);
  color: #06d6a0;
}

.faq-answer {
  color: var(--text-secondary);
  padding: 0 20px 18px;
  font-size: 15px;
  line-height: 1.6;
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
}

.faq-article.expanded .faq-answer {
  max-height: 500px;
  opacity: 1;
  animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.faq-category-tag {
  display: inline-block;
  padding: 4px 10px;
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.15) 0%, rgba(6, 214, 160, 0.1) 100%);
  border-radius: 6px;
  color: #0891b2;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.faq-no-results {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
  font-size: 16px;
}

.faq-article-detail {
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.05) 0%, rgba(6, 214, 160, 0.02) 100%);
  border-radius: 16px;
  border: 1px solid rgba(8, 145, 178, 0.12);
  padding: 28px;
  backdrop-filter: blur(2px);
}

.faq-article-detail h2 {
  color: var(--text-primary);
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 700;
  background: linear-gradient(135deg, #0891b2 0%, #06d6a0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.faq-content {
  color: var(--text-secondary);
  line-height: 1.8;
  white-space: pre-wrap;
}

.faq-helpful {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(8, 145, 178, 0.15);
  display: flex;
  align-items: center;
  gap: 12px;
}

.faq-helpful p {
  color: var(--text-muted);
  margin: 0;
  font-size: 14px;
}

/* Support */
.support-container {
  padding: 20px;
  max-width: 700px;
  margin: 0 auto;
}

.support-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}

.support-panel {
  display: none;
}

.support-panel.active {
  display: block;
}

.contact-form-container {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 24px;
}

.contact-form-container h3 {
  color: var(--text-primary);
  margin: 0 0 20px;
}

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

.ticket-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.ticket-card:hover {
  border-color: var(--primary);
}

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

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

.ticket-status {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.status-open { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.status-in_progress { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.status-resolved { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.status-closed { background: var(--bg-tertiary); color: var(--text-muted); }
.status-pending { background: rgba(239, 68, 68, 0.15); color: #ef4444; }

.ticket-card h4 {
  color: var(--text-primary);
  margin: 0 0 8px;
}

.ticket-card p {
  color: var(--text-muted);
  margin: 0 0 8px;
  font-size: 14px;
}

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

.ticket-detail {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 24px;
}

.ticket-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.ticket-detail-header h3 {
  color: var(--text-primary);
  margin: 0;
}

.ticket-meta {
  display: flex;
  gap: 16px;
  color: var(--text-muted);
  font-size: 13px;
  margin-bottom: 20px;
}

.ticket-messages {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.ticket-message {
  padding: 12px 16px;
  border-radius: 12px;
}

.ticket-message.original,
.ticket-message.user {
  background: var(--bg-tertiary);
  align-self: flex-start;
  max-width: 80%;
}

.ticket-message.staff {
  background: rgba(99, 102, 241, 0.1);
  align-self: flex-end;
  max-width: 80%;
}

.message-author {
  font-weight: 600;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.ticket-message p {
  color: var(--text-primary);
  margin: 0 0 4px;
}

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

.ticket-reply-form {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

.ticket-reply-form textarea {
  width: 100%;
  margin-bottom: 12px;
}

.ticket-reply-form h4 {
  color: var(--text-primary);
  margin: 0 0 12px;
  font-size: 14px;
}

.ticket-subject {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 15px;
}

.ticket-preview {
  color: var(--text-muted);
  font-size: 13px;
  margin: 4px 0 8px;
  line-height: 1.4;
}

.ticket-category {
  background: var(--bg-tertiary);
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 500;
  text-transform: capitalize;
}

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

.ticket-status.open { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.ticket-status.in_progress { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.ticket-status.resolved { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.ticket-status.closed { background: var(--bg-tertiary); color: var(--text-muted); }

.ticket-detail-meta {
  display: flex;
  gap: 16px;
  color: var(--text-muted);
  font-size: 13px;
  margin-bottom: 16px;
}

.ticket-message-card {
  background: var(--bg-tertiary);
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 20px;
}

.ticket-message-card p {
  color: var(--text-primary);
  margin: 0;
  line-height: 1.5;
  white-space: pre-wrap;
}

.ticket-replies-section {
  margin-bottom: 20px;
}

.ticket-replies-section h4 {
  color: var(--text-primary);
  margin: 0 0 12px;
}

.ticket-reply {
  padding: 12px 16px;
  border-radius: 12px;
  margin-bottom: 8px;
}

.ticket-reply.user-reply {
  background: var(--bg-tertiary);
}

.ticket-reply.staff-reply {
  background: rgba(99, 102, 241, 0.1);
  border-left: 3px solid var(--primary);
}

.reply-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.reply-author {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary);
}

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

.ticket-reply p {
  color: var(--text-primary);
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

/* Audience insights styling - grid handled by .audience-stats */

.audience-stat-label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.insight-section {
  margin-bottom: 20px;
}

.insight-section h4 {
  color: var(--text-primary);
  margin: 0 0 8px;
}

.insight-value {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--primary);
  margin: 0;
}

.top-engaged-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.engaged-follower {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--bg-tertiary);
  border-radius: 10px;
  transition: background 0.2s;
}

.engaged-follower:hover {
  background: var(--bg-hover);
}

.engaged-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.engaged-info {
  display: flex;
  flex-direction: column;
}

.engaged-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
}

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

/* Admin Dashboard */
.admin-container {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  padding: 24px;
  min-height: calc(100vh - 100px);
  max-width: 100%;
  align-items: start;
}

@media (max-width: 768px) {
  .admin-container {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px;
  }

  .admin-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .admin-nav-item {
    flex: 1;
    min-width: 100px;
    justify-content: center;
  }
}

.admin-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 12px;
  height: fit-content;
  position: sticky;
  top: 76px;
  z-index: 5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.admin-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: transparent;
  border: none;
  border-radius: 10px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  text-align: left;
}

.admin-nav-item:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  transform: translateX(2px);
}

.admin-nav-item.active {
  background: linear-gradient(135deg, #0891b2 0%, #06d6a0 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(8, 145, 178, 0.3);
}

.admin-nav-item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.admin-content {
  background: var(--surface);
  border-radius: 16px;
  padding: 28px;
  overflow-x: hidden;
  min-width: 0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--border);
}

.admin-panel {
  display: none;
}

.admin-panel.active {
  display: block;
}

/* Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: var(--bg-tertiary);
  border-radius: 12px;
}

.stat-card.warning {
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-icon svg {
  width: 24px;
  height: 24px;
}

.stat-icon.users { background: rgba(99, 102, 241, 0.15); color: #6366f1; }
.stat-icon.posts { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.stat-icon.creators { background: rgba(236, 72, 153, 0.15); color: #ec4899; }
.stat-icon.revenue { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.stat-icon.reports { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.stat-icon.tickets { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }

.stat-info {
  display: flex;
  flex-direction: column;
}

.stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
}

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

/* Activity List */
.admin-activity h3 {
  color: var(--text-primary);
  margin: 0 0 16px;
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-tertiary);
  border-radius: 8px;
  font-size: 14px;
}

.activity-action {
  color: var(--text-primary);
}

.activity-user,
.activity-target {
  color: var(--text-muted);
}

.activity-time {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 12px;
}

/* Admin Tables */
.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.panel-header h3 {
  color: var(--text-primary);
  margin: 0;
}

.panel-actions {
  display: flex;
  gap: 12px;
}

.panel-actions input,
.panel-actions select {
  padding: 8px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
}

.admin-table-wrapper {
  overflow-x: auto;
  margin: 0 -4px;
  padding: 0 4px;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 800px;
  table-layout: auto;
}

.admin-table th,
.admin-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border-color, var(--border));
  vertical-align: middle;
  height: 64px;
  box-sizing: border-box;
  white-space: nowrap;
}

/* Ad Manager column widths */
.admin-table th:nth-child(1),
.admin-table td:nth-child(1) { min-width: 140px; white-space: normal; }
.admin-table th:nth-child(2),
.admin-table td:nth-child(2) { min-width: 140px; }
.admin-table th:nth-child(3),
.admin-table td:nth-child(3) { min-width: 80px; }
.admin-table th:nth-child(4),
.admin-table td:nth-child(4) { min-width: 90px; }
.admin-table th:nth-child(10),
.admin-table td:nth-child(10) { min-width: 120px; }

.admin-table th {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  height: 44px;
}

.admin-table td {
  color: var(--text-primary);
  font-size: 14px;
}

/* User cell - flex on inner wrapper, not on td */
.user-cell-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar-sm {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

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

.status-suspended {
  color: #ef4444;
  font-weight: 500;
}

.status-active {
  color: #10b981;
  font-weight: 500;
}

/* Actions cell - position relative for dropdown */
.actions-cell {
  position: relative;
  text-align: right;
  width: 60px;
}

/* ============================================
   ADMIN ACTIONS DROPDOWN
   ============================================ */
.admin-actions-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 220px;
  background: var(--bg-secondary, #1a1a2e);
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.2);
  z-index: 1000;
  opacity: 0;
  transform: translateY(-8px) scale(0.95);
  animation: dropdownFadeIn 0.15s ease forwards;
}

@keyframes dropdownFadeIn {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.admin-actions-dropdown .dropdown-header {
  padding: 8px 12px 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}

.admin-actions-dropdown .dropdown-divider {
  height: 1px;
  background: var(--border, rgba(255,255,255,0.08));
  margin: 4px 6px;
}

.admin-actions-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: none;
  background: none;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 8px;
  width: 100%;
  text-align: left;
  transition: background 0.12s ease;
}

.admin-actions-dropdown .dropdown-item:hover {
  background: var(--bg-tertiary, rgba(255,255,255,0.06));
}

.admin-actions-dropdown .dropdown-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.7;
}

.admin-actions-dropdown .dropdown-item.danger {
  color: #ef4444;
}

.admin-actions-dropdown .dropdown-item.danger:hover {
  background: rgba(239, 68, 68, 0.1);
}

.admin-actions-dropdown .dropdown-item.danger svg {
  color: #ef4444;
}

.admin-actions-dropdown .dropdown-item.success {
  color: #10b981;
}

.admin-actions-dropdown .dropdown-item.success:hover {
  background: rgba(16, 185, 129, 0.1);
}

/* Admin action modal overlay */
.admin-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(4px);
  animation: modalOverlayIn 0.15s ease;
}

@keyframes modalOverlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.admin-modal {
  background: var(--bg-secondary, #1a1a2e);
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 16px;
  padding: 24px;
  min-width: 380px;
  max-width: 480px;
  width: 90%;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
  animation: modalSlideIn 0.2s ease;
}

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

.admin-modal h3 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.admin-modal .modal-subtitle {
  color: var(--text-muted);
  font-size: 13px;
  margin-bottom: 20px;
}

.admin-modal label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}

.admin-modal input,
.admin-modal select,
.admin-modal textarea {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-tertiary, rgba(255,255,255,0.05));
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 14px;
  margin-bottom: 16px;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.admin-modal input:focus,
.admin-modal select:focus,
.admin-modal textarea:focus {
  border-color: #0891b2;
}

.admin-modal textarea {
  min-height: 80px;
  resize: vertical;
}

.admin-modal .modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 8px;
}

.admin-modal .btn-modal-cancel {
  padding: 10px 20px;
  background: var(--bg-tertiary, rgba(255,255,255,0.05));
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 50px;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.admin-modal .btn-modal-cancel:hover {
  background: rgba(255,255,255,0.08);
}

.admin-modal .btn-modal-confirm {
  padding: 10px 20px;
  background: linear-gradient(135deg, #0891b2, #06d6a0);
  border: none;
  border-radius: 50px;
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.admin-modal .btn-modal-confirm:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(8, 145, 178, 0.3);
}

.admin-modal .btn-modal-confirm.danger {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}

.admin-modal .btn-modal-confirm.danger:hover {
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* Toast notification for admin actions */
.admin-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 14px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: white;
  z-index: 20000;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  animation: toastSlideIn 0.3s ease;
}

.admin-toast.success {
  background: linear-gradient(135deg, #0891b2, #06d6a0);
}

.admin-toast.error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}

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

.btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.btn-icon:hover {
  background: var(--bg-tertiary);
}

.status-select {
  padding: 4px 8px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 12px;
}

/* Reports */
.moderation-tabs {
  display: flex;
  gap: 8px;
}

.reports-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.report-card {
  background: var(--bg-tertiary);
  border-radius: 12px;
  padding: 16px;
}

.report-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.report-reason {
  font-weight: 600;
  color: var(--text-primary);
}

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

.report-content p {
  color: var(--text-secondary);
  margin: 4px 0;
  font-size: 14px;
}

.report-meta {
  color: var(--text-muted);
  font-size: 12px;
  margin: 12px 0;
}

.report-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.report-resolution {
  display: flex;
  gap: 16px;
  color: var(--text-muted);
  font-size: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
  margin-top: 12px;
}

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

.announcement-card {
  background: var(--bg-tertiary);
  border-radius: 12px;
  padding: 16px;
}

.announcement-card.inactive {
  opacity: 0.6;
}

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

.announcement-type {
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.type-info { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.type-warning { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.type-success { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.type-maintenance { background: rgba(239, 68, 68, 0.15); color: #ef4444; }

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

.announcement-card h4 {
  color: var(--text-primary);
  margin: 0 0 8px;
}

.announcement-card p {
  color: var(--text-muted);
  margin: 0 0 12px;
  font-size: 14px;
}

.announcement-actions {
  display: flex;
  gap: 8px;
}

/* Settings Form */
.setting-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-color);
}

.setting-item label {
  flex: 1;
  color: var(--text-primary);
}

.setting-item input[type="number"] {
  width: 100px;
  padding: 8px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
}

/* Database View */
.table-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  color: var(--text-primary);
}

.table-scroll {
  overflow-x: auto;
}

.database-table th small {
  display: block;
  font-weight: 400;
  color: var(--text-muted);
}

.database-table code {
  background: var(--bg-tertiary);
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 11px;
}

.redacted {
  color: var(--text-muted);
  font-style: italic;
}

/* Warnings List */
.warnings-list {
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 20px;
}

.warning-item {
  padding: 12px;
  background: var(--bg-tertiary);
  border-radius: 8px;
  margin-bottom: 8px;
}

.warning-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.warning-item p {
  color: var(--text-muted);
  font-size: 13px;
  margin: 4px 0;
}

/* ============================================
   ENHANCED ADMIN PANEL STYLES
   ============================================ */

/* Role Badges */
.role-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.role-badge.role-user { background: rgba(107, 114, 128, 0.15); color: #6b7280; }
.role-badge.role-creator { background: rgba(168, 85, 247, 0.15); color: #a855f7; }
.role-badge.role-moderator { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.role-badge.role-admin { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.role-badge.role-developer { background: linear-gradient(135deg, rgba(8, 145, 178, 0.2) 0%, rgba(6, 214, 160, 0.2) 100%); color: #0891b2; }

/* Status Badges */
.status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
}

.status-badge.active { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.status-badge.verified { background: linear-gradient(135deg, rgba(8, 145, 178, 0.15) 0%, rgba(6, 214, 160, 0.15) 100%); color: #0891b2; }
.status-badge.suspended { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.status-badge.open { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.status-badge.in_progress { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.status-badge.resolved { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.status-badge.closed { background: rgba(107, 114, 128, 0.15); color: #6b7280; }

/* Resolution Badges */
.resolution-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}

.resolution-badge.action_taken { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.resolution-badge.dismissed { background: rgba(107, 114, 128, 0.15); color: #6b7280; }

/* Admin User Avatar */
.admin-user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
}

.user-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-info .user-name {
  font-weight: 600;
  color: var(--text-primary);
}

.user-info .user-email {
  font-size: 12px;
  color: var(--text-muted);
}

/* Admin Table Enhancements */
.admin-table tbody tr {
  transition: background 0.15s ease;
}

.admin-table tbody tr:hover {
  background: var(--bg-tertiary);
}

.admin-table tbody tr.suspended {
  background: rgba(239, 68, 68, 0.05);
}

.ticket-subject {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Admin Ad Manager */
.admin-ad-subtabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  padding: 4px;
  background: var(--bg-tertiary);
  border-radius: 12px;
  border: 1px solid var(--border);
}

.ad-subtab {
  flex: 1;
  padding: 10px 16px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s;
}

.ad-subtab:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.ad-subtab.active {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.ad-subpanel {
  display: none;
}

.ad-subpanel.active {
  display: block;
}

.ad-status-badge,
.ad-approval-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
}

.status-active { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.status-paused { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.status-pending { background: rgba(99, 102, 241, 0.15); color: #6366f1; }
.status-completed { background: rgba(107, 114, 128, 0.15); color: #6b7280; }
.status-suspended { background: rgba(239, 68, 68, 0.15); color: #ef4444; }

.approval-pending { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.approval-approved { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.approval-rejected { background: rgba(239, 68, 68, 0.15); color: #ef4444; }

/* btn-sm color variants for admin tables */
.btn-sm.btn-success { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.btn-sm.btn-success:hover { background: #10b981; color: white; }
.btn-sm.btn-danger { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.btn-sm.btn-danger:hover { background: #ef4444; color: white; }
.btn-sm.btn-warning { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.btn-sm.btn-warning:hover { background: #f59e0b; color: white; }
.btn-sm.btn-ghost { background: var(--bg-tertiary); color: var(--text-muted); }
.btn-sm.btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); }

.admin-campaigns-list .empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
}

.admin-campaigns-list .empty-state svg {
  margin-bottom: 12px;
  color: var(--text-muted);
  opacity: 0.5;
}

/* Analytics Grid */
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}

.analytics-card {
  background: var(--bg-tertiary);
  border-radius: 16px;
  padding: 24px;
  border: 1px solid var(--border);
}

.analytics-card h3 {
  margin: 0 0 20px;
  font-size: 16px;
  color: var(--text-primary);
}

/* Metrics Container */
.metrics-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.metric-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--surface);
  border-radius: 10px;
}

.metric-row .metric-label {
  color: var(--text-secondary);
  font-size: 14px;
}

.metric-row .metric-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  background: linear-gradient(135deg, #0891b2 0%, #06d6a0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Simple Chart Styles */
.simple-chart {
  padding: 16px 0;
}

.chart-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 160px;
  gap: 8px;
  padding: 0 8px;
}

.chart-bar-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
}

.chart-bar {
  width: 100%;
  min-width: 20px;
  max-width: 40px;
  background: linear-gradient(180deg, #0891b2 0%, #06d6a0 100%);
  border-radius: 6px 6px 0 0;
  transition: all 0.3s ease;
}

.chart-bar-wrapper:hover .chart-bar {
  filter: brightness(1.1);
  transform: scaleY(1.02);
}

.chart-label {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 8px;
  text-align: center;
}

/* Activity Item Enhancement */
.activity-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: var(--bg-secondary);
  flex-shrink: 0;
}

.activity-icon.user_warned { background: rgba(245, 158, 11, 0.15); }
.activity-icon.user_suspended { background: rgba(239, 68, 68, 0.15); }
.activity-icon.post_removed { background: rgba(239, 68, 68, 0.15); }
.activity-icon.report_resolved { background: rgba(16, 185, 129, 0.15); }
.activity-icon.role_changed { background: rgba(168, 85, 247, 0.15); }

.activity-details {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.activity-text {
  color: var(--text-primary);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Admin Tab Styles */
.moderation-tabs .tab {
  padding: 8px 16px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.moderation-tabs .tab:hover {
  background: var(--surface);
  color: var(--text-primary);
}

.moderation-tabs .tab.active {
  background: linear-gradient(135deg, #0891b2 0%, #06d6a0 100%);
  color: white;
  border-color: transparent;
}

/* Report Card Enhancements */
.report-type {
  padding: 4px 10px;
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
}

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

/* Announcement Card Enhancements */
.announcement-card.active {
  border-left: 3px solid #0891b2;
}

.announcement-status.active {
  color: #10b981;
  font-weight: 600;
}

.announcement-content {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
  margin: 12px 0;
}

.announcement-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  margin-top: 12px;
}

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

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

.announcement-actions .btn-primary {
  background: linear-gradient(135deg, #0d9488, #0891b2) !important;
  color: white !important;
  padding: 6px 14px;
  font-size: 13px;
}

.announcement-actions .btn-primary:hover {
  background: linear-gradient(135deg, #0f766e, #0e7490) !important;
}

/* Loading State */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 16px;
}

.loading-state .spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top-color: #0891b2;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-state p {
  color: var(--text-muted);
  font-size: 14px;
}

/* Empty State Enhancement */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
}

.empty-state p {
  margin: 0;
  font-size: 14px;
}

/* Admin View Header Enhancement */
#view-admin .view-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.08) 0%, rgba(6, 214, 160, 0.08) 100%);
  border-bottom: 1px solid var(--border);
  margin: -20px -20px 0;
  margin-bottom: 0;
}

#view-admin .view-header h1 {
  margin: 0;
  font-size: 24px;
  background: linear-gradient(135deg, #0891b2 0%, #06d6a0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

#admin-role-badge {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  background: linear-gradient(135deg, #0891b2 0%, #06d6a0 100%);
  color: white;
}

/* Toast Notifications */
.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  padding: 12px 24px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 14px;
  z-index: 9999;
  opacity: 0;
  transition: all 0.3s;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.toast-success {
  border-color: #10b981;
}

.toast-error {
  border-color: #ef4444;
}

/* Empty states */
.empty-state {
  text-align: center;
  color: var(--text-muted);
  padding: 40px 20px;
}

/* Email Verification Banner */
.verification-banner {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.15));
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 0 16px 16px;
  animation: pulse-subtle 2s ease-in-out infinite;
}

@keyframes pulse-subtle {
  0%, 100% { border-color: rgba(99, 102, 241, 0.3); }
  50% { border-color: rgba(99, 102, 241, 0.6); }
}

.verification-banner-content {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.verification-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.verification-icon svg {
  color: white;
}

.verification-text {
  flex: 1;
  color: var(--text-primary);
  font-size: 14px;
  min-width: 200px;
}

.verification-text strong {
  color: var(--accent);
}

.verification-email {
  display: block;
  color: var(--text-secondary);
  font-size: 13px;
  margin-top: 2px;
}

.verification-banner .btn-sm {
  padding: 8px 16px;
  font-size: 13px;
  white-space: nowrap;
}

/* Verification toast message */
.verification-error-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  padding: 16px 24px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  z-index: 10000;
  animation: slideUp 0.3s ease;
  max-width: 90%;
  text-align: center;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Responsive banner */
@media (max-width: 768px) {
  .verification-banner {
    margin: 0 8px 12px;
    padding: 12px 16px;
  }

  .verification-banner-content {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }

  .verification-text {
    min-width: unset;
  }
}

/* ============================================
   PLATFORM ANNOUNCEMENTS
   ============================================ */

.announcements-container {
  padding: 0 16px;
  margin-bottom: 16px;
}

.announcement-banner {
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.15), rgba(59, 130, 246, 0.15));
  border: 1px solid rgba(8, 145, 178, 0.3);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 12px;
  position: relative;
  animation: announcementSlideIn 0.3s ease;
}

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

.announcement-banner.urgent {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(220, 38, 38, 0.15));
  border-color: rgba(239, 68, 68, 0.4);
}

.announcement-banner.feature {
  background: linear-gradient(135deg, rgba(6, 214, 160, 0.15), rgba(8, 145, 178, 0.15));
  border-color: rgba(6, 214, 160, 0.3);
}

.announcement-banner.maintenance {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(217, 119, 6, 0.15));
  border-color: rgba(245, 158, 11, 0.3);
}

.announcement-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.announcement-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
}

.announcement-banner.urgent .announcement-icon { background: var(--danger); }
.announcement-banner.feature .announcement-icon { background: var(--success); }
.announcement-banner.maintenance .announcement-icon { background: var(--warning); }

.announcement-body {
  flex: 1;
}

.announcement-title {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 15px;
  margin-bottom: 4px;
}

.announcement-content {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
}

.announcement-dismiss {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s;
  flex-shrink: 0;
}

.announcement-dismiss:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 768px) {
  .announcements-container {
    padding: 0 8px;
    margin-bottom: 12px;
  }

  .announcement-banner {
    padding: 12px 16px;
  }
}

/* ============================================
   VERIFIED BADGE SYSTEM
   ============================================ */

.verified-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 4px;
  vertical-align: middle;
  cursor: help;
  position: relative;
}

.verified-badge svg {
  width: 100%;
  height: 100%;
}

.verified-badge-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.verified-badge-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border-width: 6px;
  border-style: solid;
  border-color: var(--bg-secondary) transparent transparent transparent;
}

.verified-badge:hover .verified-badge-tooltip {
  opacity: 1;
  visibility: visible;
}

/* Creator Verified Badge - Blue checkmark */
.verified-badge.verified-creator svg {
  color: #1d9bf0;
}

/* Official Badge - Gold/Yellow checkmark */
.verified-badge.verified-official svg {
  color: #ffc107;
}

/* Badge in post header */
.post-name-wrapper {
  display: inline-flex;
  align-items: center;
}

/* Badge in comments */
.comment-name-wrapper {
  display: inline-flex;
  align-items: center;
}

/* Badge in notifications */
.notification-name-wrapper {
  display: inline-flex;
  align-items: center;
}

/* Badge in profile */
.profile-name-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.profile-verified-badge {
  width: 24px;
  height: 24px;
}

/* Admin verification controls */
.verification-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.verification-select {
  padding: 6px 10px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
}

.verification-select:focus {
  outline: none;
  border-color: var(--accent);
}

/* Clear notifications button */
.notifications-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 16px;
}

.clear-notifications-btn {
  padding: 6px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.clear-notifications-btn:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

/* Profile name row with badge */
.profile-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.profile-name-row h1 {
  margin: 0;
}

.profile-name-row .verified-badge {
  width: 24px;
  height: 24px;
}

.profile-name-row .verified-badge svg {
  width: 24px;
  height: 24px;
}

/* ============================================
   MOBILE TAB BAR OVERLAY FIX
   Comprehensive padding for all page containers
   ============================================ */

@media (max-width: 768px) {
  /* Core container padding - applies to all views */
  .view,
  .admin-container,
  .settings-container,
  .messages-layout,
  .profile-view,
  .search-view,
  .notifications-view,
  .groups-view,
  .events-view,
  .stories-view,
  .monetization-view,
  .modal-content,
  .feed-container {
    padding-bottom: 100px !important;
  }

  /* Ensure main-content and all children have room for tab bar */
  .main-content > * {
    min-height: auto;
  }

  /* Fix for scrollable content areas */
  .feed-posts,
  .post-list,
  .notification-list,
  .message-list,
  .group-list,
  .search-results,
  .user-list,
  .comment-section {
    padding-bottom: 80px;
  }

  /* Ensure sidebar (now tab bar) doesn't interfere with touch events */
  .sidebar {
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
  }

  /* Fix any fixed elements that should be above tab bar */
  .toast,
  .verification-error-toast {
    bottom: 100px !important;
  }

  .user-menu {
    bottom: 90px !important;
  }
}

/* ============================================
   ADMIN USER MANAGEMENT RESPONSIVE FIX
   Convert table to cards on mobile
   ============================================ */

@media (max-width: 768px) {
  /* Admin container needs extra bottom padding */
  .admin-container {
    padding: 12px;
    padding-bottom: 120px !important;
    min-height: auto;
  }

  .admin-content {
    padding: 12px;
    border-radius: 8px;
  }

  /* Hide table header on mobile */
  .admin-table thead {
    display: none;
  }

  /* Convert table rows to cards */
  .admin-table,
  .admin-table tbody,
  .admin-table tr,
  .admin-table td {
    display: block;
    width: 100%;
  }

  .admin-table tr {
    background: var(--bg-tertiary);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    border: 1px solid var(--border);
  }

  .admin-table td {
    padding: 8px 0;
    border-bottom: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* Add labels before content */
  .admin-table td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-right: 12px;
  }

  /* User cell special handling - make it full width and prominent */
  .admin-table td:first-child {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding-bottom: 12px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
  }

  .admin-table td:first-child::before {
    display: none;
  }

  .user-cell-inner {
    flex-direction: row !important;
    width: 100%;
  }

  .user-cell-inner img.admin-user-avatar {
    width: 48px;
    height: 48px;
  }

  /* Actions cell - make buttons more tappable */
  .admin-table td.actions-cell,
  .admin-table td:last-child {
    justify-content: flex-end;
    padding-top: 12px;
    margin-top: 8px;
    border-top: 1px solid var(--border);
  }

  .admin-table td.actions-cell::before,
  .admin-table td:last-child::before {
    display: none;
  }

  .actions-cell {
    gap: 8px;
  }

  .actions-cell .btn-icon {
    width: 44px;
    height: 44px;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Panel actions (search/filter) responsive */
  .panel-actions {
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
  }

  .panel-actions input,
  .panel-actions select {
    width: 100%;
    padding: 12px;
  }

  /* Verification select dropdown */
  .verification-select {
    padding: 10px 12px;
    font-size: 14px;
    width: auto;
    min-width: 120px;
  }

  /* Role badge sizing */
  .role-badge {
    padding: 4px 10px;
    font-size: 12px;
  }

  /* Stats grid responsive */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
  }

  .stat-card {
    padding: 16px;
  }

  .stat-value {
    font-size: 1.5rem;
  }

  /* Admin nav responsive - horizontal scroll */
  .admin-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 4px;
    padding: 8px 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .admin-nav::-webkit-scrollbar {
    display: none;
  }

  .admin-nav-item {
    flex-shrink: 0;
    min-width: auto;
    padding: 10px 14px;
    white-space: nowrap;
  }

  .admin-nav-item span {
    display: inline;
  }

  /* Panel header responsive */
  .panel-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .panel-header h2 {
    font-size: 1.25rem;
  }
}

/* Extra small devices (phones in portrait) */
@media (max-width: 480px) {
  .admin-container {
    padding: 8px;
    padding-bottom: 130px !important;
  }

  .admin-content {
    padding: 10px;
  }

  .admin-table tr {
    padding: 12px;
  }

  .stats-grid {
    grid-template-columns: 1fr !important;
  }

  .admin-nav-item {
    padding: 8px 12px;
    font-size: 13px;
  }

  /* Make status badges smaller */
  .status-active,
  .status-suspended {
    font-size: 11px;
    padding: 3px 8px;
  }

  /* Story viewer improvements for extra small screens */
  .story-viewer-container {
    max-width: 100%;
    max-height: 100vh;
  }

  .story-header {
    left: 0;
    right: 0;
    top: 8px;
    padding: 8px 12px;
  }

  .story-options-btn,
  .story-close {
    width: 28px;
    height: 28px;
    font-size: 20px;
  }

  .media-options-menu {
    left: 8px;
    right: 8px;
    top: 50px;
    min-width: auto;
    max-width: none;
  }

  .media-option-item {
    padding: 8px 12px;
    font-size: 14px;
  }
}

/* ============================================
   UI REDESIGN - Enhanced Features
   ============================================ */

/* Collapsible Sidebar */
.sidebar {
  transition: width 0.3s ease, padding 0.3s ease;
  will-change: width;
  position: relative;
}

.sidebar.collapsed {
  width: 80px;
  padding: 20px 10px;
}

.sidebar.collapsed .nav-item span,
.sidebar.collapsed .user-info,
.sidebar.collapsed .sidebar-logo span,
.sidebar.collapsed .sidebar-creator-prompt {
  display: none;
}

.sidebar.collapsed .nav-item {
  justify-content: center;
  padding: 14px;
}

.sidebar.collapsed .sidebar-user {
  justify-content: center;
  padding: 8px;
}

.sidebar.collapsed .sidebar-logo {
  justify-content: center;
}

.sidebar.collapsed .user-menu-icon {
  display: none;
}

/* Sidebar Toggle Button */
.sidebar-toggle {
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  transition: all 0.2s ease;
  color: var(--text-secondary);
}

.sidebar-toggle:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.sidebar-toggle svg {
  width: 14px;
  height: 14px;
  transition: transform 0.3s ease;
}

.sidebar.collapsed .sidebar-toggle svg {
  transform: rotate(180deg);
}

/* Mobile Bottom Navigation */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  padding: 8px 0;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0));
  z-index: 1000;
  backdrop-filter: blur(10px);
}

.mobile-bottom-nav-items {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 10px;
  font-weight: 500;
  transition: color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.mobile-nav-item svg {
  width: 24px;
  height: 24px;
}

.mobile-nav-item.active,
.mobile-nav-item:active {
  color: var(--accent);
}

.mobile-nav-item .nav-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--danger);
  color: white;
  font-size: 10px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mobile FAB (Floating Action Button) for Post */
.mobile-fab {
  display: none;
  position: fixed;
  bottom: calc(70px + env(safe-area-inset-bottom, 0));
  right: 16px;
  width: 56px;
  height: 56px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 50%;
  box-shadow: 0 4px 20px rgba(8, 145, 178, 0.4);
  cursor: pointer;
  z-index: 999;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.mobile-fab:active {
  transform: scale(0.95);
  box-shadow: 0 2px 10px rgba(8, 145, 178, 0.3);
}

.mobile-fab svg {
  width: 24px;
  height: 24px;
}

/* Skeleton Loaders */
@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.7; }
}

.skeleton {
  background: linear-gradient(90deg, var(--bg-tertiary) 0%, var(--bg-secondary) 50%, var(--bg-tertiary) 100%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  border-radius: 8px;
}

.skeleton-post {
  padding: 20px;
  border-bottom: 1px solid var(--border);
}

.skeleton-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.skeleton-lines {
  flex: 1;
}

.skeleton-line {
  height: 14px;
  margin-bottom: 8px;
  border-radius: 4px;
}

.skeleton-line:last-child {
  margin-bottom: 0;
}

.skeleton-line.short {
  width: 60%;
}

.skeleton-line.medium {
  width: 80%;
}

.skeleton-line.full {
  width: 100%;
}

.skeleton-content {
  margin-bottom: 16px;
}

.skeleton-content .skeleton-line {
  margin-bottom: 10px;
}

.skeleton-image {
  width: 100%;
  height: 200px;
  border-radius: 12px;
  margin-bottom: 16px;
}

.skeleton-actions {
  display: flex;
  gap: 24px;
}

.skeleton-action {
  width: 60px;
  height: 20px;
  border-radius: 10px;
}

/* Story Skeleton */
.skeleton-story {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.skeleton-story-avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
}

.skeleton-story-name {
  width: 50px;
  height: 10px;
  border-radius: 5px;
}

/* Page Transition Animations */
.view {
  animation: fadeIn 0.2s ease;
}

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

/* Smooth Scroll Behavior */
html {
  scroll-behavior: smooth;
}

/* Pull to Refresh - PWA Gesture */
.pull-to-refresh {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
  transform: translateY(-100%);
  opacity: 0;
  z-index: 10002;
  pointer-events: none;
  will-change: transform, opacity;
}

.pull-to-refresh.releasing {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.pull-to-refresh .ptr-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pull-to-refresh .ptr-icon {
  width: 24px;
  height: 24px;
  color: var(--accent);
  transition: transform 0.1s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pull-to-refresh .ptr-icon svg {
  width: 20px;
  height: 20px;
}

.pull-to-refresh .ptr-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

.pull-to-refresh.ready .ptr-text {
  color: var(--accent);
}

.pull-to-refresh.refreshing .ptr-icon {
  animation: ptr-spin 0.8s linear infinite;
}

.pull-to-refresh.refreshing .ptr-text {
  color: var(--accent);
}

@keyframes ptr-spin {
  to { transform: rotate(360deg); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Toast Notifications */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.toast {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 300px;
  max-width: 400px;
  animation: toastSlideIn 0.3s ease;
}

.toast.success {
  border-color: var(--success);
}

.toast.error {
  border-color: var(--danger);
}

.toast.warning {
  border-color: var(--warning);
}

.toast-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.toast.success .toast-icon { color: var(--success); }
.toast.error .toast-icon { color: var(--danger); }
.toast.warning .toast-icon { color: var(--warning); }

.toast-message {
  flex: 1;
  font-size: 14px;
}

.toast-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px;
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes toastSlideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

.toast.removing {
  animation: toastSlideOut 0.3s ease forwards;
}

/* Button Feedback */
.btn-primary:active,
.btn-ghost:active,
.btn-secondary:active,
.btn-danger:active,
.btn-text:active {
  transform: scale(0.97);
}

/* Improved Card Hover Effects */
.post:hover {
  background: rgba(255, 255, 255, 0.02);
}

/* Improved Input Focus States */
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);
}

/* Hide Scrollbar (for clean UI) */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Sticky Header Hide on Scroll */
.view-header {
  transition: transform 0.3s ease;
}

.view-header.hidden-on-scroll {
  transform: translateY(-100%);
}

/* Mobile Responsive Enhancements */
@media (max-width: 768px) {
  /* Show mobile navigation */
  .mobile-bottom-nav {
    display: block;
  }

  .mobile-fab {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Hide sidebar on mobile */
  .sidebar {
    display: none;
  }

  /* Add padding for bottom nav */
  .main-content {
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0));
  }

  /* Full-width main content */
  #main-app {
    display: block;
  }

  /* Toast positioning for mobile */
  .toast-container {
    top: auto;
    bottom: calc(80px + env(safe-area-inset-bottom, 0));
    right: 10px;
    left: 10px;
  }

  .toast {
    min-width: 0;
    max-width: 100%;
  }
}

/* ============================================
   PWA Standalone Mode - Force Mobile Layout
   When installed as a PWA, always use mobile UI
   ============================================ */
@media all and (display-mode: standalone) {
  /* Force single-column layout */
  #main-app {
    display: block !important;
  }

  /* Hide desktop sidebar */
  .sidebar {
    display: none !important;
  }

  /* Hide desktop right sidebar */
  .right-sidebar {
    display: none !important;
  }

  /* Show mobile bottom navigation */
  .mobile-bottom-nav {
    display: block !important;
  }

  .mobile-fab {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Full-width main content with safe area padding */
  .main-content {
    border: none;
    max-width: 100%;
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0));
  }

  /* Ensure all views have bottom padding for mobile nav */
  .view {
    padding-bottom: 100px;
  }

  /* Hide desktop nav center icons (tab bar) on small screens */
  .fb-top-nav-center {
    display: none;
  }

  /* Search bar compact */
  .fb-search-bar {
    width: 140px;
  }

  /* Toast positioning above bottom nav */
  .toast-container {
    top: auto;
    bottom: calc(80px + env(safe-area-inset-bottom, 0));
    right: 10px;
    left: 10px;
  }

  .toast {
    min-width: 0;
    max-width: 100%;
  }

  /* Safe area handling for notch/home indicator */
  body {
    padding-top: env(safe-area-inset-top, 0);
  }

  .fb-top-nav {
    padding-top: env(safe-area-inset-top, 0);
  }

  .mobile-bottom-nav {
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0));
  }

  /* Hide desktop-only elements */
  .fb-left-sidebar,
  .fb-right-sidebar {
    display: none !important;
  }
}

/* JS-detected standalone mode (covers iOS which doesn't support display-mode media query) */
html.pwa-standalone #main-app {
  display: block !important;
}

html.pwa-standalone .sidebar {
  display: none !important;
}

html.pwa-standalone .right-sidebar,
html.pwa-standalone .fb-right-sidebar,
html.pwa-standalone .fb-left-sidebar {
  display: none !important;
}

html.pwa-standalone .mobile-bottom-nav {
  display: block !important;
}

html.pwa-standalone .mobile-fab {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

html.pwa-standalone .main-content {
  border: none;
  max-width: 100%;
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0));
}

html.pwa-standalone .fb-top-nav-center {
  display: none;
}

html.pwa-standalone .fb-search-bar {
  width: 140px;
}

html.pwa-standalone .fb-top-nav {
  padding-top: env(safe-area-inset-top, 0);
}

html.pwa-standalone .mobile-bottom-nav {
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0));
}

/* PWA: Ensure hamburger button clears safe area */
html.pwa-standalone .mobile-sidebar-btn {
  top: calc(12px + env(safe-area-inset-top, 0));
}

/* Performance: GPU-accelerated scrolling for feed containers */
.main-content,
.fb-main-content,
.view-content {
  -webkit-overflow-scrolling: touch;
  will-change: scroll-position;
}

/* Performance: Contain paint for post cards */
.post-card,
.fb-post {
  contain: content;
}

/* Performance: Image rendering optimization */
.post-image,
.post-avatar,
.fb-post-avatar,
.story-avatar {
  content-visibility: auto;
}

/* Right Sidebar / Trending Panel Collapsible */
.right-sidebar {
  transition: width 0.3s ease, opacity 0.3s ease;
}

.right-sidebar.collapsed {
  width: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0;
}

/* Improved Loading States */
.loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-radius: 50%;
  border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}

.loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 15, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  backdrop-filter: blur(4px);
}

/* Improved Dark Mode Contrast */
::selection {
  background: var(--accent);
  color: white;
}

/* Focus Visible for Accessibility */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ============================================
   REELS STYLES
   ============================================ */

.reels-container {
  padding: 20px;
}

.reels-feed {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.reel-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.reel-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.reel-thumbnail {
  position: relative;
  aspect-ratio: 9/16;
  max-height: 400px;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
}

.reel-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reel-placeholder {
  font-size: 4rem;
}

.reel-duration {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.reel-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
}

.avatar-sm {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.reel-meta {
  display: flex;
  flex-direction: column;
}

.reel-creator {
  font-weight: 600;
  font-size: 14px;
}

.reel-stats {
  font-size: 12px;
  color: var(--text-secondary);
}

.reel-caption {
  padding: 0 12px 12px;
  font-size: 14px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================
   GAMING STYLES
   ============================================ */

.gaming-container {
  padding: 20px;
}

.gaming-section {
  margin-bottom: 32px;
}

.gaming-section h3 {
  margin-bottom: 16px;
  font-size: 1.1rem;
}

.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}

.game-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.game-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.game-icon {
  font-size: 3rem;
  margin-bottom: 12px;
}

.game-icon img {
  width: 64px;
  height: 64px;
  border-radius: 12px;
}

.game-name {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.game-category {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.game-plays {
  font-size: 12px;
  color: var(--accent);
}

.tournaments-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tournament-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: background 0.2s;
}

.tournament-card:hover {
  background: var(--bg-tertiary);
}

.tournament-icon {
  font-size: 2rem;
}

.tournament-info {
  flex: 1;
}

.tournament-info h4 {
  font-size: 1rem;
  margin-bottom: 4px;
}

.tournament-info p {
  font-size: 12px;
  color: var(--text-secondary);
}

.tournament-participants {
  font-size: 12px;
  color: var(--accent);
}

.leaderboard-list {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.leaderboard-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.leaderboard-entry:last-child {
  border-bottom: none;
}

.leaderboard-rank {
  width: 32px;
  text-align: center;
  font-weight: 700;
}

.leaderboard-name {
  flex: 1;
  font-weight: 500;
}

.leaderboard-score {
  color: var(--accent);
  font-weight: 600;
}

.gaming-groups-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gaming-group-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.2s;
}

.gaming-group-card:hover {
  background: var(--bg-tertiary);
}

.group-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.group-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.group-info h4 {
  font-size: 1rem;
  margin-bottom: 2px;
}

.group-info p {
  font-size: 12px;
  color: var(--text-secondary);
}

.group-info span {
  font-size: 12px;
  color: var(--accent);
}

.videos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.gaming-video-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s;
}

.gaming-video-card:hover {
  transform: translateY(-4px);
}

.video-thumbnail {
  position: relative;
  aspect-ratio: 16/9;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-placeholder {
  font-size: 2rem;
}

.video-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
}

.gaming-video-card h4 {
  padding: 12px 12px 4px;
  font-size: 14px;
}

.gaming-video-card p {
  padding: 0 12px 12px;
  font-size: 12px;
  color: var(--text-secondary);
}

.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: var(--text-secondary);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  :root {
    --border: #444;
    --text-secondary: #aaa;
  }
}

/* ============================================
   EVENTS STYLES
   ============================================ */

.events-container {
  padding: 0 20px 20px;
}

.events-tabs {
  display: flex;
  gap: 8px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}

.events-section {
  margin-bottom: 32px;
}

.events-section h3 {
  font-size: 1.1rem;
  margin-bottom: 16px;
  color: var(--text-primary);
}

.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.event-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.2s ease;
  cursor: pointer;
}

.event-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.event-cover {
  height: 140px;
  background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
}

.event-info {
  padding: 16px;
}

.event-date {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.event-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 8px;
  line-height: 1.3;
}

.event-location {
  color: var(--text-secondary);
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}

/* ============================================
   PAGES STYLES
   ============================================ */

.pages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.page-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.page-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.page-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-tertiary);
}

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

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

.page-info h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.page-category {
  color: var(--text-secondary);
  font-size: 13px;
  margin: 0 0 4px 0;
}

.page-stats {
  color: var(--text-secondary);
  font-size: 13px;
  margin: 0 0 8px 0;
}

.page-description {
  color: var(--text);
  font-size: 14px;
  line-height: 1.4;
  margin: 8px 0 0 0;
}

.pages-container {
  max-width: 1200px;
  margin: 0 auto;
}

.pages-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
  padding: 0 20px;
}

.pages-section {
  padding: 0 20px;
}

.pages-section h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 16px 0;
  color: var(--text);
}

/* Page Detail Back Button - override .back-btn 32x32 constraint from live CSS */
#view-page-detail .view-header .back-btn {
  width: auto;
  height: auto;
  border-radius: 50px;
  padding: 8px 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}

#view-page-detail .view-header .back-btn:hover {
  background: var(--bg-tertiary);
  border-color: var(--text-secondary);
}

#view-page-detail .view-header .back-btn svg {
  flex-shrink: 0;
}

/* Page Detail View */
.page-detail-header {
  position: relative;
  margin: -32px -32px 0 -32px;
}

.page-cover {
  height: 200px;
  background: linear-gradient(135deg, var(--sphere-blue, #6366f1), var(--sphere-purple, #a855f7));
  background-size: cover;
  background-position: center;
  position: relative;
}

.page-cover-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(transparent, var(--bg-secondary));
}

.page-profile-info {
  padding: 0 32px 24px;
  position: relative;
  margin-top: -60px;
}

.page-avatar-section {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 16px;
}

.page-detail-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sphere-blue, #6366f1), var(--sphere-purple, #a855f7));
  border: 4px solid var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
  flex-shrink: 0;
}

.page-title-section {
  flex: 1;
  padding-bottom: 8px;
}

.page-title-section h1 {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.page-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 14px;
}

.page-meta-sep {
  color: var(--text-tertiary);
}

.page-category-badge {
  background: var(--bg-tertiary);
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  text-transform: capitalize;
}

.page-profile-desc {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 16px;
}

.page-profile-actions {
  display: flex;
  gap: 8px;
}

.page-tabs-nav {
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
  padding: 0 16px;
}

.page-detail-tabs {
  display: flex;
  gap: 4px;
}

.page-detail-tabs button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}

.page-detail-tabs button:hover {
  color: var(--text-primary);
}

.page-detail-tabs button.active {
  color: var(--sphere-blue, #6366f1);
  border-bottom-color: var(--sphere-blue, #6366f1);
}

.page-detail-tab-contents {
  padding: 0 16px;
}

.page-create-post {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 16px;
}

@media (max-width: 768px) {
  .page-detail-header {
    margin: -16px -16px 0 -16px;
  }
  .page-cover {
    height: 140px;
  }
  .page-profile-info {
    padding: 0 16px 16px;
    margin-top: -40px;
  }
  .page-detail-avatar {
    width: 72px;
    height: 72px;
    font-size: 1.8rem;
  }
  .page-avatar-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .page-title-section h1 {
    font-size: 1.3rem;
  }
  .page-detail-tab-contents {
    padding: 0 8px;
  }
}

.event-attendees {
  display: flex;
  align-items: center;
  gap: 8px;
}

.event-attendees-avatars {
  display: flex;
}

.event-attendees-avatars img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--bg-secondary);
  margin-left: -8px;
}

.event-attendees-avatars img:first-child {
  margin-left: 0;
}

.event-attendees-count {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

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

.event-actions .btn-primary,
.event-actions .btn-ghost {
  flex: 1;
  padding: 8px 12px;
  font-size: 0.875rem;
}

/* Birthdays Section */
.birthdays-section {
  background: var(--bg-secondary);
  border-radius: 16px;
  padding: 20px;
}

.birthdays-grid {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.birthday-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 100px;
  padding: 16px;
  background: var(--bg-tertiary);
  border-radius: 12px;
  text-align: center;
}

.birthday-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

.birthday-name {
  font-weight: 500;
  font-size: 0.875rem;
}

.birthday-date {
  color: var(--text-secondary);
  font-size: 0.75rem;
}

/* ============================================
   MARKETPLACE STYLES
   ============================================ */

.marketplace-container {
  padding: 0 20px 20px;
}

.marketplace-filters {
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}

.marketplace-search {
  margin-bottom: 16px;
}

.marketplace-search input {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 1rem;
}

.marketplace-search input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);
}

.filter-pills {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.filter-pill {
  flex-shrink: 0;
  padding: 8px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text-secondary);
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.filter-pill:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}

.filter-pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.marketplace-section {
  margin-bottom: 32px;
}

.marketplace-section h3 {
  font-size: 1.1rem;
  margin-bottom: 16px;
  color: var(--text-primary);
}

.listings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.listing-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.2s ease;
  cursor: pointer;
}

.listing-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.listing-image {
  height: 160px;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: var(--text-muted);
}

.listing-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.listing-info {
  padding: 12px;
}

.listing-price {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 4px;
}

.listing-title {
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 8px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.listing-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 0.75rem;
}

.listing-location {
  display: flex;
  align-items: center;
  gap: 4px;
}

.listing-save {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.listing-save:hover {
  background: var(--accent);
}

.listing-save.saved {
  color: var(--danger);
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary);
}

.empty-icon {
  font-size: 3rem;
  margin-bottom: 16px;
}

.empty-subtitle {
  font-size: 0.875rem;
  margin-top: 8px;
  margin-bottom: 16px;
}

/* ==========================================================================
   FEATURE DETAIL MODALS
   ========================================================================== */

/* Event Detail Modal */
.event-detail-modal .modal-content {
  max-width: 600px;
}

.event-detail-header {
  position: relative;
  height: 200px;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  border-radius: 16px 16px 0 0;
  overflow: hidden;
}

.event-detail-header img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event-detail-date-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: white;
  border-radius: 8px;
  padding: 8px 12px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.event-detail-date-badge .month {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
}

.event-detail-date-badge .day {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.event-detail-body {
  padding: 24px;
}

.event-detail-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.event-detail-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.event-detail-info-row {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-secondary);
}

.event-detail-info-row i {
  width: 20px;
  color: var(--accent);
}

.event-detail-description {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 24px;
  white-space: pre-wrap;
}

.event-detail-host {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--bg-secondary);
  border-radius: 12px;
  margin-bottom: 24px;
}

.event-detail-host .avatar {
  width: 48px;
  height: 48px;
}

.event-detail-host-info {
  flex: 1;
}

.event-detail-host-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.event-detail-host-name {
  font-weight: 600;
}

.event-detail-attendees {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.attendees-avatars {
  display: flex;
}

.attendees-avatars .avatar {
  width: 32px;
  height: 32px;
  border: 2px solid var(--bg-primary);
  margin-left: -8px;
}

.attendees-avatars .avatar:first-child {
  margin-left: 0;
}

.attendees-count {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.event-detail-actions {
  display: flex;
  gap: 12px;
}

.event-detail-actions .btn-primary,
.event-detail-actions .btn-secondary {
  flex: 1;
  padding: 12px 20px;
}

/* Listing Detail Modal */
.listing-detail-modal .modal-content {
  max-width: 700px;
}

.listing-detail-images {
  position: relative;
  height: 300px;
  background: var(--bg-tertiary);
}

.listing-detail-images img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--bg-tertiary);
}

.listing-detail-images .no-image {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 4rem;
  color: var(--text-muted);
}

.listing-detail-body {
  padding: 24px;
}

.listing-detail-price {
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 8px;
}

.listing-detail-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 16px;
}

.listing-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
}

.listing-detail-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.listing-detail-meta-item i {
  color: var(--text-muted);
}

.listing-detail-description {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 24px;
  white-space: pre-wrap;
}

.listing-detail-seller {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--bg-secondary);
  border-radius: 12px;
  margin-bottom: 24px;
}

.listing-detail-seller .avatar {
  width: 48px;
  height: 48px;
}

.listing-detail-seller-info {
  flex: 1;
}

.listing-detail-seller-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.listing-detail-seller-name {
  font-weight: 600;
}

.listing-detail-actions {
  display: flex;
  gap: 12px;
}

.listing-detail-actions .btn-primary,
.listing-detail-actions .btn-secondary {
  flex: 1;
  padding: 12px 20px;
}

/* Video Player Modal (Reels & Gaming Videos) */
.video-player-modal .modal-content {
  max-width: 500px;
  background: #000;
}

.video-player-container {
  position: relative;
  width: 100%;
  aspect-ratio: 9/16;
  max-height: 80vh;
  background: #000;
}

.video-player-container video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.video-player-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: white;
  text-align: center;
  padding: 40px;
}

.video-player-placeholder i {
  font-size: 4rem;
  margin-bottom: 16px;
  opacity: 0.5;
}

.video-player-placeholder p {
  opacity: 0.7;
}

.video-player-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px;
  background: linear-gradient(transparent, rgba(0,0,0,0.8));
  color: white;
}

.video-player-info {
  margin-bottom: 16px;
}

.video-player-user {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.video-player-user .avatar {
  width: 40px;
  height: 40px;
  border: 2px solid white;
}

.video-player-username {
  font-weight: 600;
}

.video-player-caption {
  font-size: 0.875rem;
  opacity: 0.9;
  line-height: 1.4;
}

.video-player-actions {
  display: flex;
  gap: 24px;
}

.video-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.video-action-btn:hover {
  transform: scale(1.1);
}

.video-action-btn i {
  font-size: 1.5rem;
}

.video-action-btn span {
  font-size: 0.75rem;
}

.video-action-btn.liked i {
  color: var(--danger);
}

/* Tournament Detail Modal */
.tournament-detail-modal .modal-content {
  max-width: 600px;
}

.tournament-detail-header {
  position: relative;
  padding: 32px 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  text-align: center;
  color: white;
}

.tournament-detail-game {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.2);
  border-radius: 20px;
  font-size: 0.875rem;
  margin-bottom: 12px;
}

.tournament-detail-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.tournament-detail-prize {
  font-size: 2rem;
  font-weight: 700;
  color: #ffd700;
}

.tournament-detail-body {
  padding: 24px;
}

.tournament-detail-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.tournament-stat {
  text-align: center;
  padding: 16px;
  background: var(--bg-secondary);
  border-radius: 12px;
}

.tournament-stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--accent);
}

.tournament-stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.tournament-detail-info {
  margin-bottom: 24px;
}

.tournament-detail-info h4 {
  margin-bottom: 12px;
}

.tournament-detail-info p {
  color: var(--text-secondary);
  line-height: 1.6;
}

.tournament-detail-actions {
  display: flex;
  gap: 12px;
}

.tournament-detail-actions .btn-primary,
.tournament-detail-actions .btn-secondary {
  flex: 1;
  padding: 12px 20px;
}

/* Gaming Group Detail Modal */
.gaming-group-modal .modal-content {
  max-width: 600px;
}

.gaming-group-header {
  position: relative;
  height: 120px;
  background: linear-gradient(135deg, #11998e, #38ef7d);
}

.gaming-group-header img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gaming-group-avatar {
  position: absolute;
  bottom: -40px;
  left: 24px;
  width: 80px;
  height: 80px;
  border-radius: 16px;
  background: var(--bg-primary);
  border: 4px solid var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

.gaming-group-body {
  padding: 60px 24px 24px;
}

.gaming-group-name {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.gaming-group-game {
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.gaming-group-stats {
  display: flex;
  gap: 24px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
}

.gaming-group-stat {
  text-align: center;
}

.gaming-group-stat-value {
  font-size: 1.25rem;
  font-weight: 700;
}

.gaming-group-stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.gaming-group-description {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 24px;
}

.gaming-group-actions {
  display: flex;
  gap: 12px;
}

.gaming-group-actions .btn-primary,
.gaming-group-actions .btn-secondary {
  flex: 1;
  padding: 12px 20px;
}

/* Memories Gallery Modal */
.memories-modal .modal-content {
  max-width: 900px;
  max-height: 90vh;
}

.memories-modal .modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
}

.memories-modal .modal-body {
  padding: 24px;
  overflow-y: auto;
  max-height: calc(90vh - 80px);
}

.memories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 24px;
}

.memory-card {
  background: var(--bg-secondary);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.memory-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.memory-card-header {
  padding: 16px;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: white;
}

.memory-card-date {
  font-size: 0.875rem;
  opacity: 0.9;
  margin-bottom: 4px;
}

.memory-card-title {
  font-size: 1.1rem;
  font-weight: 600;
}

.memory-card-image {
  height: 150px;
  background: var(--bg-tertiary);
}

.memory-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.memory-card-body {
  padding: 16px;
}

.memory-card-content {
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.memory-card-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-top: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 0.75rem;
}

/* Create Event Modal */
.create-event-modal .modal-content {
  max-width: 550px;
}

.create-event-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-weight: 500;
  font-size: 0.875rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 12px 16px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 0.9rem;
  transition: border-color 0.2s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
}

/* Create Listing Modal */
.create-listing-modal .modal-content {
  max-width: 550px;
}

.image-upload-area {
  border: 2px dashed var(--border-color);
  border-radius: 12px;
  padding: 32px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.image-upload-area:hover {
  border-color: var(--accent);
  background: var(--bg-tertiary);
}

.image-upload-area i {
  font-size: 2.5rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.image-upload-area p {
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.image-upload-area small {
  color: var(--text-muted);
  font-size: 0.75rem;
}

.image-preview-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.image-preview-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
}

.image-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-preview-item .remove-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  background: rgba(0,0,0,0.6);
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}

/* Create Reel Modal */
.create-reel-modal .modal-content {
  max-width: 500px;
}

.video-upload-area {
  border: 2px dashed var(--border-color);
  border-radius: 12px;
  padding: 48px 32px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.video-upload-area:hover {
  border-color: var(--accent);
  background: var(--bg-tertiary);
}

.video-upload-area i {
  font-size: 3rem;
  color: var(--accent);
  margin-bottom: 16px;
}

.video-upload-area h4 {
  margin-bottom: 8px;
}

.video-upload-area p {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.video-preview {
  position: relative;
  aspect-ratio: 9/16;
  max-height: 400px;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
}

.video-preview video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Responsive for Feature Modals */
@media (max-width: 768px) {
  .event-detail-header,
  .listing-detail-images {
    height: 200px;
  }

  .tournament-detail-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .tournament-stat {
    padding: 12px 8px;
  }

  .memories-grid {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .video-player-modal .modal-content {
    max-width: 100%;
    margin: 0;
    border-radius: 0;
    min-height: 100vh;
  }

  .video-player-container {
    max-height: 100vh;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .events-grid {
    grid-template-columns: 1fr;
  }

  .listings-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .listing-image {
    height: 120px;
  }

  .filter-pills {
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================
   CREATOR STUDIO - ENHANCED TABBED DASHBOARD
   ============================================ */

/* Header */
.creator-header {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  background: linear-gradient(135deg, #0891b2 0%, #06d6a0 100%);
  color: white;
  border-radius: 0 0 24px 24px;
  margin-bottom: 24px;
  padding: 32px 20px 24px !important;
}

.creator-header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.creator-header h1 {
  color: white !important;
  font-size: 2rem;
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.creator-header-actions {
  display: flex;
  gap: 12px;
}

.creator-header-actions .btn-primary {
  background: white;
  color: #0891b2;
  border: none;
}

.creator-header-actions .btn-primary:hover {
  background: rgba(255,255,255,0.9);
  transform: scale(1.05);
}

/* Hero Stats Banner */
.creator-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 0 20px 24px;
  margin-top: -40px;
  position: relative;
  z-index: 10;
}

.hero-stat-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.hero-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.15);
  border-color: rgba(8, 145, 178, 0.5);
}

.hero-stat-card.primary {
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.2) 0%, rgba(6, 214, 160, 0.15) 100%);
  border: 2px solid transparent;
  border-image: linear-gradient(135deg, #0891b2, #06d6a0) 1;
  box-shadow: 0 8px 24px rgba(8, 145, 178, 0.2);
}

.hero-stat-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(8, 145, 178, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.hero-stat-card:hover .hero-stat-icon {
  transform: scale(1.1) rotate(5deg);
}

.hero-stat-card.primary .hero-stat-icon {
  background: linear-gradient(135deg, #0891b2 0%, #06d6a0 100%);
  box-shadow: 0 4px 16px rgba(8, 145, 178, 0.3);
}

.hero-stat-icon svg {
  width: 28px;
  height: 28px;
  fill: #0891b2;
}

.hero-stat-card.primary .hero-stat-icon svg {
  fill: white;
}

.hero-stat-content {
  flex: 1;
  min-width: 0;
}

.hero-stat-value {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  font-family: 'Space Grotesk', sans-serif;
  color: var(--text-primary);
  line-height: 1.2;
  background: linear-gradient(135deg, #0891b2 0%, #06d6a0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-stat-card.primary .hero-stat-value {
  background: linear-gradient(135deg, #0891b2 0%, #06d6a0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 2rem;
}

.hero-stat-label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 6px;
  font-weight: 500;
  white-space: nowrap;
  overflow: visible;
}

.hero-stat-trend {
  flex-shrink: 0;
}

.trend-badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.trend-badge.positive {
  background: linear-gradient(135deg, rgba(6, 214, 160, 0.2) 0%, rgba(6, 214, 160, 0.1) 100%);
  color: #06d6a0;
  border: 1px solid rgba(6, 214, 160, 0.3);
}

.trend-badge.negative {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(239, 68, 68, 0.1) 100%);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Tab Navigation */
.creator-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 0 20px;
  background: var(--bg-secondary);
  border-bottom: 2px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.creator-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 24px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all 0.3s ease;
  white-space: nowrap;
  position: relative;
}

.creator-tab::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(135deg, #0891b2 0%, #06d6a0 100%);
  transition: width 0.3s ease;
}

.creator-tab svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  transition: transform 0.3s ease;
}

.creator-tab:hover {
  color: #0891b2;
  background: rgba(8, 145, 178, 0.05);
}

.creator-tab:hover svg {
  transform: scale(1.1);
}

.creator-tab.active {
  color: #0891b2;
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.08) 0%, rgba(6, 214, 160, 0.05) 100%);
}

.creator-tab.active::before {
  width: 100%;
}

.creator-tab.active svg {
  transform: scale(1.15);
}

/* Tab Content */
.creator-tab-content {
  padding: 24px 20px;
}

.creator-panel {
  display: none;
}

.creator-panel.active {
  display: block;
  animation: fadeIn 0.3s ease;
}

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

/* Creator Cards */
.creator-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px;
  margin-bottom: 24px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.creator-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

.creator-card.highlight {
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.12) 0%, rgba(6, 214, 160, 0.06) 100%);
  border: 2px solid transparent;
  border-image: linear-gradient(135deg, #0891b2, #06d6a0) 1;
  box-shadow: 0 8px 24px rgba(8, 145, 178, 0.15);
}

.creator-card .card-header h3 {
  background: linear-gradient(135deg, #0891b2 0%, #06d6a0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

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

.card-header h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  padding: 0;
  border: none;
}

.card-header h4 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}

.card-description {
  color: var(--text-secondary);
  font-size: 0.8rem;
  margin-bottom: 14px;
  line-height: 1.4;
}

/* Grid Layouts */
.creator-grid-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.analytics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.analytics-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
}

.analytics-card.large {
  grid-column: span 2;
}

.analytics-card h4 {
  margin: 0 0 20px 0;
  font-size: 1rem;
  color: var(--text-primary);
}

/* Quick Actions - Creator Dashboard */
.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.quick-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 16px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text-primary);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.quick-action-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.05), rgba(6, 214, 160, 0.05));
  opacity: 0;
  transition: opacity 0.25s ease;
}

.quick-action-btn:hover {
  background: var(--bg-primary);
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(8, 145, 178, 0.15);
}

.quick-action-btn:hover::before {
  opacity: 1;
}

.quick-action-btn:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(8, 145, 178, 0.1);
}

.quick-action-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #0891b2 0%, #06d6a0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(8, 145, 178, 0.2);
  transition: all 0.25s ease;
}

.quick-action-btn:hover .quick-action-icon {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 6px 16px rgba(8, 145, 178, 0.3);
}

.quick-action-icon svg {
  width: 22px;
  height: 22px;
  fill: white;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

@media (max-width: 640px) {
  .quick-actions-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .quick-action-btn {
    padding: 18px 12px;
    gap: 10px;
  }

  .quick-action-icon {
    width: 38px;
    height: 38px;
  }

  .quick-action-icon svg {
    width: 20px;
    height: 20px;
  }
}

/* Period Selector */
.analytics-period-selector {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}

.period-btn {
  padding: 10px 20px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.period-btn:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.period-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

/* Filter Bar */
.filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 16px 20px;
  background: var(--bg-secondary);
  border-radius: 12px;
  border: 1px solid var(--border);
}

.filter-bar h4 {
  margin: 0;
  font-size: 1rem;
}

/* Running Balance Card */
.running-balance-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(6, 214, 160, 0.1) 0%, var(--bg-secondary) 100%);
  border: 1px solid var(--success);
  border-radius: 12px;
  margin-bottom: 20px;
}

.running-balance-card .balance-label {
  color: var(--text-secondary);
  font-weight: 500;
}

.running-balance-card .balance-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--success);
  font-family: 'Space Grotesk', sans-serif;
}

/* Stats Row */
.earnings-stats-row,
.payout-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

/* Compact Elements */
.alerts-list.compact {
  max-height: 250px;
  overflow-y: auto;
}

.empty-state-sm {
  color: var(--text-muted);
  text-align: center;
  padding: 16px 12px;
  font-size: 0.85rem;
  background: rgba(8, 145, 178, 0.03);
  border-radius: 8px;
  border: 1px dashed rgba(8, 145, 178, 0.15);
}

/* Cash Out Content */
.cash-out-content {
  text-align: center;
}

.cash-out-balance {
  margin-bottom: 12px;
}

.cash-out-label {
  display: block;
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin-bottom: 4px;
}

.cash-out-amount {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  color: var(--success);
  font-family: 'Space Grotesk', sans-serif;
}

.cash-out-content .cash-out-note {
  margin: 12px 0 20px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* Export Buttons */
.export-buttons-vertical {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.export-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text-primary);
  text-decoration: none;
  transition: all 0.2s ease;
}

.export-btn:hover {
  background: var(--bg-primary);
  border-color: var(--accent);
}

.export-btn svg {
  width: 24px;
  height: 24px;
  fill: var(--accent);
  flex-shrink: 0;
}

.export-btn-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.export-btn-text strong {
  font-size: 0.95rem;
}

.export-btn-text span {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* Ad Stats Mini - ULTRA COMPACT Monetize Stats */
.ad-stats-mini {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(8, 145, 178, 0.1);
}

.ad-stats-mini .ad-stat {
  text-align: center;
  flex: 1;
}

.ad-stats-mini .ad-stat-value {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  background: linear-gradient(135deg, #0891b2 0%, #06d6a0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ad-stats-mini .ad-stat-label {
  display: block;
  font-size: 0.55rem;
  color: var(--text-secondary);
  margin-top: 1px;
  text-transform: uppercase;
  letter-spacing: 0.2px;
}

/* Ad Metric Cards - ULTRA COMPACT Performance Stats */
.ad-metric-card {
  background: var(--bg-tertiary);
  padding: 6px 6px;
  border-radius: 6px;
  text-align: center;
  border: 1px solid var(--border);
  transition: all 0.15s ease;
  position: relative;
  overflow: hidden;
}

.ad-metric-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, #0891b2, #06d6a0);
  opacity: 0.5;
}

.ad-metric-card:hover {
  border-color: rgba(8, 145, 178, 0.3);
}

.ad-metric-card .ad-metric-value {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0;
  line-height: 1.2;
}

.ad-metric-card .ad-metric-label {
  display: block;
  font-size: 0.5rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1.2;
}

/* Tip Preview - ULTRA COMPACT & Styled */
.tip-jar-preview {
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.04) 0%, rgba(6, 214, 160, 0.02) 100%);
  padding: 6px 8px;
  border-radius: 6px;
  text-align: center;
  border: 1px solid rgba(8, 145, 178, 0.08);
}

.tip-amounts {
  display: flex;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
}

.tip-badge {
  padding: 2px 8px;
  background: var(--bg-secondary);
  border: 1px solid rgba(8, 145, 178, 0.2);
  border-radius: 10px;
  font-size: 0.6rem;
  font-weight: 600;
  color: #0891b2;
  transition: all 0.15s ease;
  cursor: default;
}

.tip-badge:hover {
  border-color: #0891b2;
  background: rgba(8, 145, 178, 0.06);
}

/* Monetize Tab - Facebook Creator Studio Style */
#creator-tab-monetization .creator-card {
  padding: 24px;
  margin-bottom: 20px;
  border-radius: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
}

#creator-tab-monetization .creator-card .card-header {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

#creator-tab-monetization .creator-card .card-header h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}

#creator-tab-monetization .creator-grid-2col {
  gap: 20px;
  margin-bottom: 20px;
}

#creator-tab-monetization .tiers-list {
  margin-bottom: 0;
}

#creator-tab-monetization .card-description {
  font-size: 0.9rem;
  margin-bottom: 16px;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* Monetization Tab Buttons - Platform Standard */
#creator-tab-monetization .btn-primary.btn-sm {
  padding: 8px 16px;
  font-size: 0.875rem;
  background: linear-gradient(135deg, #0891b2 0%, #06d6a0 100%);
  border: none;
  border-radius: 50px;
  font-weight: 600;
  transition: all 0.2s ease;
}

#creator-tab-monetization .btn-primary.btn-sm:hover {
  box-shadow: 0 4px 12px rgba(8, 145, 178, 0.3);
  transform: translateY(-1px);
}

#creator-tab-monetization .btn-primary {
  border-radius: 50px;
}

/* ============================================
   FACEBOOK CREATOR STUDIO STYLE OVERHAUL
   ============================================ */

/* Main Layout - Facebook-style sidebar + content */
/* IMPORTANT: Use .active to ensure view is hidden when not selected */
#view-creator.active {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bg-primary);
}

/* Creator Studio Header - Facebook style */
.creator-header {
  background: var(--bg-secondary) !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  padding: 16px 24px !important;
  position: sticky;
  top: 0;
  z-index: 100;
}

.creator-header-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.creator-header h1 {
  color: var(--text-primary) !important;
  font-size: 1.5rem !important;
  font-weight: 700;
  text-shadow: none !important;
  background: linear-gradient(135deg, #0891b2 0%, #06d6a0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.creator-header-actions .btn-primary {
  background: linear-gradient(135deg, #0891b2 0%, #06d6a0 100%) !important;
  color: white !important;
  padding: 10px 20px;
  font-weight: 600;
  border-radius: 8px;
}

.creator-header-actions .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(8, 145, 178, 0.3);
}

/* Hero Stats - Facebook Insights style */
.creator-hero-stats {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  padding: 24px !important;
  margin-top: 0 !important;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.hero-stat-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: none;
  transition: all 0.2s ease;
  min-height: 120px;
  justify-content: center;
}

.hero-stat-card:hover {
  border-color: #0891b2;
  transform: none;
  box-shadow: 0 0 0 1px #0891b2;
}

.hero-stat-card.primary {
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.08) 0%, rgba(6, 214, 160, 0.05) 100%);
  border: 2px solid #0891b2;
  box-shadow: none;
}

.hero-stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(8, 145, 178, 0.1);
}

.hero-stat-icon svg {
  width: 22px;
  height: 22px;
}

.hero-stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
}

.hero-stat-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-weight: 500;
  margin-top: 4px;
}

/* Tab Navigation - Facebook style horizontal tabs */
.creator-tabs-nav {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  padding: 0 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.creator-tab {
  padding: 14px 14px;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: transparent;
  gap: 6px;
}

.creator-tab::before {
  display: none;
}

.creator-tab svg {
  width: 18px;
  height: 18px;
}

.creator-tab:hover {
  color: #0891b2;
  background: transparent;
}

.creator-tab.active {
  color: #0891b2;
  border-bottom-color: #0891b2;
  background: transparent;
}

/* Tab Content Area */
.creator-tab-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
  width: 100%;
}

/* Creator Cards - Facebook style */
.creator-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  transition: box-shadow 0.2s ease;
}

.creator-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transform: none;
}

.creator-card.highlight {
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.06) 0%, var(--bg-secondary) 100%);
  border: 1px solid rgba(8, 145, 178, 0.3);
  box-shadow: 0 2px 8px rgba(8, 145, 178, 0.08);
  position: relative;
  overflow: hidden;
}

.creator-card.highlight::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #0891b2 0%, #06d6a0 100%);
  border-radius: 8px 0 0 8px;
}

.creator-card .card-header {
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.creator-card .card-header h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* Grid Layouts - Facebook style */
.creator-grid-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

/* Analytics Grid */
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

.analytics-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
}

.analytics-card h4 {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--text-primary);
}

/* Month-over-Month Grid */
.mom-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.mom-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  background: var(--bg-tertiary);
  border-radius: 8px;
  border: 1px solid var(--border);
  text-align: center;
}

.mom-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.mom-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
}

.mom-value.positive { color: #10b981; }
.mom-value.negative { color: #ef4444; }

/* Content Averages Grid */
.averages-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.avg-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 12px;
  background: var(--bg-tertiary);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.avg-value {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
}

.avg-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 500;
}

@media (max-width: 768px) {
  .mom-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .averages-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .averages-cards {
    grid-template-columns: 1fr;
  }
}

/* Alerts List - Facebook notification style */
.alerts-list.compact {
  max-height: 200px;
  overflow-y: auto;
}

.alert-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  background: var(--bg-tertiary);
  margin-bottom: 8px;
  transition: background 0.15s ease;
}

.alert-item:hover {
  background: rgba(8, 145, 178, 0.05);
}

.alert-item:last-child {
  margin-bottom: 0;
}

/* Earnings List - Facebook style rows */
.earnings-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.earning-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--bg-tertiary);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.earning-item:hover {
  border-color: #0891b2;
}

/* Transaction List - Facebook style table rows */
.transaction-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.transaction-item {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 16px;
  background: var(--bg-tertiary);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.transaction-item:hover {
  border-color: #0891b2;
  background: rgba(8, 145, 178, 0.02);
}

/* Payout List */
.payout-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.payout-item {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 16px;
  background: var(--bg-tertiary);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.payout-item:hover {
  border-color: #0891b2;
}

/* Supporters List */
.supporters-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.supporter-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-tertiary);
  border-radius: 8px;
}

.supporter-item:hover {
  background: rgba(8, 145, 178, 0.05);
}

/* Filter Bar */
.filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.filter-bar h4 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: var(--text-primary);
}

.filter-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg-tertiary);
  padding: 4px;
  border-radius: 8px;
}

.filter-tab {
  padding: 8px 16px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.filter-tab:hover {
  color: var(--text-primary);
}

.filter-tab.active {
  background: var(--bg-secondary);
  color: #0891b2;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Ad Metrics Grid - Facebook Ads Manager style */
.ad-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.ad-metric-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
}

.ad-metric-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.ad-metric-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* Ad Toggle Card */
.ad-toggle-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: var(--bg-tertiary);
  border-radius: 8px;
  margin-bottom: 16px;
}

.ad-toggle-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ad-toggle-label {
  font-weight: 600;
  color: var(--text-primary);
}

.ad-toggle-description {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* Ad Stats Mini */
.ad-stats-mini {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.ad-stat {
  text-align: center;
  padding: 16px;
  background: var(--bg-tertiary);
  border-radius: 8px;
}

.ad-stat-value {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
}

.ad-stat-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* Tiers List */
.tiers-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tier-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.tier-item:hover {
  border-color: #0891b2;
}

/* Tip Jar Preview */
.tip-jar-preview {
  padding: 20px;
  background: var(--bg-tertiary);
  border-radius: 8px;
  text-align: center;
}

.tip-amounts {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tip-badge {
  padding: 10px 20px;
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.1) 0%, rgba(6, 214, 160, 0.1) 100%);
  border: 1px solid rgba(8, 145, 178, 0.3);
  border-radius: 20px;
  font-weight: 600;
  color: #0891b2;
  font-size: 0.9rem;
}

/* Export Buttons */
.export-buttons-vertical {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.export-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-primary);
  transition: all 0.15s ease;
}

.export-btn:hover {
  border-color: #0891b2;
  background: rgba(8, 145, 178, 0.05);
}

.export-btn svg {
  width: 24px;
  height: 24px;
  fill: #0891b2;
}

.export-btn-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.export-btn-text strong {
  font-weight: 600;
}

.export-btn-text span {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* Audience Stats */
.audience-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.audience-stat {
  text-align: center;
  padding: 20px 12px;
  background: var(--bg-tertiary);
  border-radius: 12px;
  min-width: 0;
}

.audience-stat-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.audience-stat-label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 4px;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Demographics Container */
.demographics-container {
  min-height: 200px;
}

/* Period Selector */
.analytics-period-selector {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.period-btn {
  padding: 10px 20px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.period-btn:hover {
  border-color: #0891b2;
  color: #0891b2;
}

.period-btn.active {
  background: linear-gradient(135deg, #0891b2 0%, #06d6a0 100%);
  color: white;
  border-color: transparent;
}

/* Running Balance Card */
.running-balance-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.1) 0%, rgba(6, 214, 160, 0.05) 100%);
  border: 1px solid rgba(8, 145, 178, 0.2);
  border-radius: 12px;
  margin-bottom: 20px;
}

.balance-label {
  font-weight: 500;
  color: var(--text-secondary);
}

.balance-value {
  font-size: 1.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, #0891b2 0%, #06d6a0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Payout Method Card */
.payout-method-card {
  padding: 20px;
  background: var(--bg-tertiary);
  border-radius: 8px;
}

/* Cash Out Content */
.cash-out-content {
  text-align: center;
}

.cash-out-balance {
  margin-bottom: 16px;
}

.cash-out-label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.cash-out-amount {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  background: linear-gradient(135deg, #0891b2 0%, #06d6a0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cash-out-note {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

/* Transaction/Payout Stats Row */
.earnings-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.payout-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.payout-stats-row:empty,
.earnings-stats-row:empty {
  display: none;
}

.stat-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
}

.stat-card-value {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
}

.stat-card-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* Empty State */
.empty-state-sm {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* Performance Breakdown */
.performance-breakdown {
  min-height: 150px;
}

/* Best Times Container */
.best-times-container {
  min-height: 100px;
}

.recommendations-list {
  margin-top: 16px;
}

/* Comparison Container */
.comparison-container {
  min-height: 150px;
}

/* Averages Grid */
.averages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* ============================================
   MONETIZATION TAB - ENHANCED STYLES
   ============================================ */

/* Monetization Overview Stats */
.monetization-overview-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.monetization-stat-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: all 0.2s ease;
}

.monetization-stat-card:hover {
  border-color: #0891b2;
  box-shadow: 0 4px 12px rgba(8, 145, 178, 0.1);
}

.monetization-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.1) 0%, rgba(6, 214, 160, 0.1) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.monetization-stat-icon svg {
  width: 24px;
  height: 24px;
  fill: #0891b2;
}

.monetization-stat-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.monetization-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.monetization-stat-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 500;
}

/* Card Header Subtitle */
.card-header-subtitle {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 400;
}

/* Ad Metric Description */
.ad-metric-description {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Feature Badge */
.feature-badge {
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.feature-badge.enabled {
  background: linear-gradient(135deg, #0891b2, #06d6a0);
  color: white;
  border: none;
}

.feature-badge.disabled {
  background: rgba(107, 114, 128, 0.2);
  color: #6b7280;
  border: none;
}

/* Tip Jar Preview Enhanced */
.tip-jar-preview {
  padding: 24px;
  background: var(--bg-tertiary);
  border-radius: 12px;
  text-align: center;
}

.tip-jar-label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 16px;
  font-weight: 500;
}

.tip-amounts {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tip-badge {
  padding: 12px 24px;
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.08) 0%, rgba(6, 214, 160, 0.08) 100%);
  border: 1px solid rgba(8, 145, 178, 0.2);
  border-radius: 24px;
  font-weight: 600;
  color: #0891b2;
  font-size: 0.95rem;
  transition: all 0.2s ease;
}

.tip-badge:hover {
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.15) 0%, rgba(6, 214, 160, 0.15) 100%);
  border-color: #0891b2;
  transform: translateY(-2px);
}

.tip-badge.highlight {
  background: linear-gradient(135deg, #0891b2 0%, #06d6a0 100%);
  color: white;
  border: none;
}

/* Paid Content Actions */
.paid-content-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.btn-secondary svg {
  fill: currentColor;
}

/* Responsive Monetization */
/* Monetization responsive - consolidated below in main responsive block */

@media (max-width: 768px) {
  .monetization-stat-card {
    padding: 16px;
  }

  .tip-amounts {
    gap: 8px;
  }

  .tip-badge {
    padding: 10px 18px;
    font-size: 0.85rem;
  }

  .creator-grid-2col {
    grid-template-columns: 1fr;
  }

  .quick-actions-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ad-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .earnings-stats-row,
  .payout-stats-row {
    grid-template-columns: 1fr;
  }

  .audience-stats {
    grid-template-columns: 1fr;
  }

  .filter-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .filter-tabs {
    width: 100%;
    overflow-x: auto;
  }
}

/* Verification Hero */
.verification-hero {
  text-align: center;
  padding: 40px 20px;
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.1) 0%, var(--bg-secondary) 100%);
  border-radius: 16px;
  margin-bottom: 24px;
  border: 1px solid var(--border);
}

.verification-icon-large {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  background: var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.verification-icon-large svg {
  width: 40px;
  height: 40px;
  fill: white;
}

.verification-hero h2 {
  font-size: 1.5rem;
  margin-bottom: 8px;
}

.verification-hero p {
  color: var(--text-secondary);
  max-width: 400px;
  margin: 0 auto;
}

.verification-status-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  text-align: center;
}

/* Verified Badge Large - shown when user is verified */
.verified-badge-large {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.verified-badge-large svg {
  width: 100px;
  height: 100px;
  fill: var(--accent);
  background: rgba(8, 145, 178, 0.15);
  padding: 24px;
  border-radius: 24px;
}

.verified-badge-large span {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
}

.verified-date {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.verification-benefits-active {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.benefit-active {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
  font-size: 14px;
  padding: 6px 0;
}

.pro-analytics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.pro-analytics-stat {
  text-align: center;
  padding: 16px;
  background: var(--bg-tertiary);
  border-radius: 12px;
}

.pro-stat-value {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--primary);
}

.pro-stat-label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Benefits Grid */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  background: var(--bg-tertiary);
  border-radius: 12px;
}

.benefit-icon {
  width: 40px;
  height: 40px;
  background: rgba(8, 145, 178, 0.15);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.benefit-icon svg {
  width: 20px;
  height: 20px;
  fill: var(--accent);
}

.benefit-text strong {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.benefit-text span {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* Loading Spinner */
.loading-spinner {
  text-align: center;
  padding: 40px;
  color: var(--text-muted);
}

/* Chart Container */
.chart-container {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Responsive - Creator Studio */
@media (max-width: 1024px) {
  .creator-hero-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .creator-grid-2col {
    grid-template-columns: 1fr;
  }

  .analytics-grid {
    grid-template-columns: 1fr;
  }

  .analytics-card.large {
    grid-column: span 1;
  }

  .benefits-grid {
    grid-template-columns: 1fr;
  }

  .earnings-stats-row,
  .payout-stats-row {
    grid-template-columns: repeat(3, 1fr);
  }

  .monetization-overview-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .ad-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .averages-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .creator-hero-stats {
    grid-template-columns: repeat(2, 1fr);
    padding: 16px !important;
    gap: 12px;
  }

  .hero-stat-card {
    padding: 16px;
    min-height: auto;
  }

  .hero-stat-value {
    font-size: 1.3rem;
  }

  .creator-tabs-nav {
    padding: 0 8px;
    flex-wrap: wrap;
    gap: 0;
  }

  .creator-tab {
    padding: 10px 10px;
    font-size: 0.75rem;
    gap: 4px;
  }

  .creator-tab span {
    display: inline;
  }

  .creator-tab svg {
    width: 16px;
    height: 16px;
  }

  .creator-tab-content {
    padding: 16px;
  }

  .quick-actions-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .quick-action-btn {
    padding: 16px 12px;
    font-size: 0.8rem;
  }

  .ad-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .earnings-stats-row,
  .payout-stats-row {
    grid-template-columns: 1fr;
  }

  .audience-stats {
    grid-template-columns: 1fr;
  }

  .monetization-overview-stats {
    grid-template-columns: 1fr;
  }

  .analytics-period-selector {
    flex-wrap: wrap;
  }

  .filter-bar {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .filter-tabs {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .averages-grid {
    grid-template-columns: 1fr;
  }

  .pro-analytics-grid {
    grid-template-columns: 1fr;
  }

  .benefits-grid {
    grid-template-columns: 1fr;
  }
}

/* Upload Progress Indicator */
.upload-progress {
  width: 100%;
  margin-bottom: 12px;
}

.upload-progress.hidden {
  display: none;
}

.upload-progress-bar {
  width: 100%;
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  overflow: hidden;
}

.upload-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--gradient);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.upload-progress-text {
  display: block;
  text-align: center;
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 6px;
}

/* Submit button states */
.btn-primary:disabled,
.btn-primary.uploading {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-primary.uploading::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 8px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Creator Studio - Extra small screens */
@media (max-width: 480px) {
  .creator-hero-stats {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .hero-stat-card {
    padding: 14px;
    min-height: auto;
    flex-direction: row;
    align-items: center;
    gap: 14px;
  }

  .hero-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .hero-stat-value {
    font-size: 1.2rem;
  }

  .hero-stat-label {
    font-size: 0.8rem;
  }

  .creator-tab {
    padding: 8px 8px;
    font-size: 0.7rem;
  }

  .creator-tab svg {
    width: 14px;
    height: 14px;
  }

  .ad-metrics-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .ad-metric-card {
    padding: 12px 8px;
  }

  .creator-card {
    padding: 16px;
  }

  .verification-hero {
    padding: 24px 16px;
  }

  .verification-hero h2 {
    font-size: 1.2rem;
  }
}

/* ============================================
   ENHANCED GROUP PROFILE PAGE STYLES
   ============================================ */

/* Fullscreen Modal for Group Profile */
.modal-fullscreen {
  width: 100%;
  max-width: 100%;
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .modal-fullscreen {
    width: 95%;
    max-width: 1200px;
    height: 95vh;
    max-height: 95vh;
    border-radius: 20px;
    margin: 2.5vh auto;
  }
}

/* Group Profile Header */
.group-profile-header {
  position: relative;
  margin: -32px -32px 0 -32px;
}

.group-profile-cover {
  height: 200px;
  background: var(--gradient);
  background-size: cover;
  background-position: center;
  position: relative;
}

.group-cover-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(transparent, var(--bg-secondary));
}

.group-profile-info {
  padding: 0 32px 24px;
  position: relative;
  margin-top: -60px;
}

.group-avatar-section {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 16px;
}

.group-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  border: 4px solid var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  font-weight: 700;
  color: var(--accent);
  background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-primary));
  overflow: hidden;
}

.group-title-section {
  flex: 1;
  padding-bottom: 8px;
}

.group-title-section h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.group-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 0.9rem;
  flex-wrap: wrap;
}

.group-meta-sep {
  color: var(--text-muted);
}

.group-profile-desc {
  color: var(--text-secondary);
  margin-bottom: 16px;
  max-width: 600px;
  line-height: 1.6;
}

.group-quick-stats {
  display: flex;
  gap: 32px;
  margin-bottom: 20px;
}

.quick-stat {
  display: flex;
  flex-direction: column;
}

.quick-stat .stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  font-family: 'Space Grotesk', sans-serif;
  color: var(--accent);
}

.quick-stat .stat-label {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.group-profile-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

/* Announcements Banner */
.group-announcements-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: rgba(8, 145, 178, 0.1);
  border: 1px solid rgba(8, 145, 178, 0.3);
  border-radius: 12px;
  margin: 0 0 16px 0;
}

.announcement-icon {
  font-size: 1.25rem;
}

.announcement-content {
  flex: 1;
  font-size: 0.9rem;
}

/* Group Tabs Navigation */
.group-tabs-nav {
  position: sticky;
  top: 0;
  background: var(--bg-secondary);
  z-index: 10;
  padding: 0;
  margin: 0 -32px;
  border-bottom: 1px solid var(--border);
}

.group-tabs-nav .group-tabs {
  display: flex;
  gap: 0;
  padding: 0 32px;
  border-bottom: none;
  margin-bottom: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.group-tabs-nav .group-tabs::-webkit-scrollbar {
  display: none;
}

.group-tabs-nav .group-tabs .tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.group-tabs-nav .group-tabs .tab:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.03);
}

.group-tabs-nav .group-tabs .tab.active {
  background: transparent;
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.group-tabs-nav .group-tabs .tab svg {
  opacity: 0.7;
}

.group-tabs-nav .group-tabs .tab.active svg {
  opacity: 1;
}

/* Tab Contents Container */
.group-tab-contents {
  flex: 1;
  overflow-y: auto;
  padding: 24px 0;
}

.group-tab-content {
  max-height: none;
  overflow: visible;
}

/* Content Layout with Sidebar */
.group-content-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 900px) {
  .group-content-layout {
    grid-template-columns: 1fr 280px;
  }
}

.group-main-content {
  min-width: 0;
}

.group-sidebar {
  display: none;
}

@media (min-width: 900px) {
  .group-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
}

.sidebar-section {
  background: var(--bg-tertiary);
  border-radius: 16px;
  padding: 16px;
}

.sidebar-section h4 {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.group-admins-list,
.group-new-members {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-item,
.new-member-item {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.admin-item:hover .admin-name,
.new-member-item:hover .new-member-name {
  color: var(--accent);
}

.admin-avatar,
.new-member-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.admin-info,
.new-member-info {
  flex: 1;
  min-width: 0;
}

.admin-name,
.new-member-name {
  font-weight: 500;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s;
}

.admin-role {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Group Create Post */
.group-create-post {
  background: var(--bg-tertiary);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 20px;
}

.group-create-post textarea {
  width: 100%;
  min-height: 80px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  color: var(--text-primary);
  resize: none;
  font-family: inherit;
  font-size: 0.95rem;
}

.group-create-post textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.group-post-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

/* Members Tab Enhanced */
.members-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  gap: 16px;
  flex-wrap: wrap;
}

.members-search input {
  padding: 10px 16px;
  border-radius: 50px;
  border: 1px solid var(--border);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  min-width: 250px;
}

.members-search input:focus {
  outline: none;
  border-color: var(--accent);
}

/* Events Tab */
.events-header,
.marketplace-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.events-header h3,
.marketplace-header h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.25rem;
}

.group-events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.group-event-card {
  background: var(--bg-tertiary);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}

.group-event-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.event-cover {
  height: 120px;
  background: var(--gradient);
  background-size: cover;
  background-position: center;
}

.event-info {
  padding: 16px;
}

.event-date {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-size: 0.85rem;
  margin-bottom: 8px;
}

.event-title {
  font-weight: 600;
  margin-bottom: 4px;
}

.event-location {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.event-attendees {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 0.85rem;
}

/* Marketplace Grid */
.marketplace-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.listing-card {
  background: var(--bg-tertiary);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s;
}

.listing-card:hover {
  transform: translateY(-2px);
}

.listing-image {
  height: 160px;
  background: var(--bg-primary);
  background-size: cover;
  background-position: center;
}

.listing-info {
  padding: 12px;
}

.listing-price {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 4px;
}

.listing-title {
  font-size: 0.9rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* About Tab */
.about-content {
  max-width: 700px;
}

.about-section {
  margin-bottom: 32px;
}

.about-section h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.1rem;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.about-section p {
  color: var(--text-secondary);
  line-height: 1.7;
}

.rules-list {
  background: var(--bg-tertiary);
  border-radius: 12px;
  padding: 16px;
}

.rule-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.rule-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.rule-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
  flex-shrink: 0;
}

.rule-text {
  color: var(--text-secondary);
  line-height: 1.5;
}

.info-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  color: var(--text-muted);
}

.info-value {
  color: var(--text-primary);
  font-weight: 500;
}

/* Analytics Tab */
.analytics-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.analytics-header h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.25rem;
}

.analytics-period {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.analytics-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.analytics-card {
  background: var(--bg-tertiary);
  border-radius: 16px;
  padding: 20px;
  text-align: center;
}

.analytics-value {
  font-size: 2rem;
  font-weight: 700;
  font-family: 'Space Grotesk', sans-serif;
  color: var(--accent);
  margin-bottom: 4px;
}

.analytics-label {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.analytics-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.analytics-section {
  background: var(--bg-tertiary);
  border-radius: 16px;
  padding: 20px;
}

.analytics-section h4 {
  font-size: 1rem;
  margin-bottom: 16px;
  color: var(--text-secondary);
}

.contributors-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contributor-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.contributor-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.contributor-info {
  flex: 1;
}

.contributor-name {
  font-weight: 500;
}

.contributor-posts {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.popular-posts-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.popular-post-item {
  padding: 12px;
  background: var(--bg-secondary);
  border-radius: 10px;
}

.popular-post-content {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.popular-post-stats {
  display: flex;
  gap: 12px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Settings Tab */
.settings-sections {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 600px;
}

.settings-section {
  background: var(--bg-tertiary);
  border-radius: 16px;
  padding: 24px;
}

.settings-section h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.1rem;
  margin-bottom: 20px;
}

.settings-section.danger-zone {
  background: rgba(239, 68, 68, 0.05);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.settings-section.danger-zone h3 {
  color: var(--danger);
}

/* Empty States for Group Tabs */
.group-empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}

.group-empty-state .empty-icon {
  font-size: 3rem;
  margin-bottom: 16px;
}

.group-empty-state h4 {
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.group-empty-state p {
  margin-bottom: 20px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .group-profile-info {
    padding: 0 16px 20px;
    margin-top: -40px;
  }

  .group-avatar-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .group-avatar {
    width: 80px;
    height: 80px;
    font-size: 2rem;
  }

  .group-title-section h1 {
    font-size: 1.4rem;
  }

  .group-quick-stats {
    gap: 20px;
  }

  .quick-stat .stat-value {
    font-size: 1.25rem;
  }

  .group-tabs-nav .group-tabs {
    padding: 0 16px;
  }

  .group-tabs-nav .group-tabs .tab {
    padding: 12px 16px;
    font-size: 0.9rem;
  }

  .group-tab-contents {
    padding: 16px 0;
  }

  .analytics-summary {
    grid-template-columns: repeat(2, 1fr);
  }

  .analytics-sections {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   ENHANCED POST MODAL - FACEBOOK STYLE
   ============================================ */

.post-modal-enhanced {
  max-width: 500px;
  width: 95%;
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
}

.post-modal-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--border);
  position: relative;
}

.post-modal-header h2 {
  font-size: 1.25rem;
  font-weight: 600;
}

.post-modal-header .modal-close {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.post-modal-header .modal-close:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.post-modal-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
}

.post-modal-user .avatar {
  width: 44px;
  height: 44px;
}

.post-modal-user-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.post-modal-name {
  font-weight: 600;
  font-size: 0.95rem;
}

.audience-select {
  background: var(--bg-tertiary);
  border: none;
  color: var(--text-secondary);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.8rem;
  cursor: pointer;
}

.compose-area-wrapper {
  padding: 0 16px 16px;
  min-height: 150px;
  position: relative;
  transition: all 0.3s ease;
}

.compose-area-wrapper.has-bg {
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  margin: 0 16px 16px;
  padding: 20px;
}

.compose-area-wrapper.has-bg .post-textarea {
  background: transparent;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 600;
  color: white;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.compose-area-wrapper.has-bg .post-textarea::placeholder {
  color: rgba(255,255,255,0.7);
}

/* Background gradients */
.compose-area-wrapper.gradient-sunset { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.compose-area-wrapper.gradient-ocean { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.compose-area-wrapper.gradient-forest { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); }
.compose-area-wrapper.gradient-purple { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.compose-area-wrapper.gradient-fire { background: linear-gradient(135deg, #f12711 0%, #f5af19 100%); }
.compose-area-wrapper.gradient-rainbow { background: linear-gradient(135deg, #ff0844 0%, #ffb199 50%, #43e97b 100%); }
.compose-area-wrapper.gradient-night { background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%); }

.post-textarea {
  width: 100%;
  min-height: 120px;
  background: transparent;
  border: none;
  font-size: 1.1rem;
  color: var(--text-primary);
  resize: none;
  outline: none;
  font-family: inherit;
}

.post-textarea::placeholder {
  color: var(--text-muted);
}

/* Post Meta Badges */
.post-meta-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.meta-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-tertiary);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  cursor: pointer;
}

.meta-badge:hover {
  background: var(--bg-secondary);
}

.meta-badge .remove-badge {
  cursor: pointer;
  margin-left: 4px;
  opacity: 0.6;
}

.meta-badge .remove-badge:hover {
  opacity: 1;
}

/* Media Preview Enhanced */
.media-preview {
  display: grid;
  gap: 4px;
  padding: 0 16px;
  margin-bottom: 12px;
}

.media-preview:empty {
  display: none;
}

.media-preview.single-media {
  grid-template-columns: 1fr;
}

.media-preview.dual-media {
  grid-template-columns: 1fr 1fr;
}

.media-preview.triple-media {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.media-preview.triple-media .media-item:first-child {
  grid-row: span 2;
}

.media-preview.quad-media {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.media-preview .media-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 1;
}

.media-preview .media-item img,
.media-preview .media-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-preview .media-item .remove-media {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  background: rgba(0,0,0,0.7);
  border: none;
  border-radius: 50%;
  color: white;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* GIF Preview */
.gif-preview {
  position: relative;
  padding: 0 16px;
  margin-bottom: 12px;
}

.gif-preview img {
  width: 100%;
  max-height: 300px;
  object-fit: contain;
  border-radius: 8px;
}

.gif-preview .remove-gif {
  position: absolute;
  top: 8px;
  right: 24px;
  width: 28px;
  height: 28px;
  background: rgba(0,0,0,0.7);
  border: none;
  border-radius: 50%;
  color: white;
  font-size: 1rem;
  cursor: pointer;
}

/* Poll Options Enhanced */
.poll-options {
  padding: 16px;
  margin: 0 16px 12px;
  background: var(--bg-tertiary);
  border-radius: 8px;
}

.poll-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-weight: 600;
}

.poll-header .remove-poll {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.25rem;
  cursor: pointer;
}

.poll-option {
  width: 100%;
  padding: 12px;
  margin-bottom: 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 0.95rem;
}

.poll-option:last-child {
  margin-bottom: 0;
}

/* Background Picker */
.background-picker {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  overflow-x: auto;
}

.bg-option {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid transparent;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.bg-option:hover {
  transform: scale(1.1);
}

.bg-option.active {
  border-color: var(--accent);
}

.bg-none {
  background: var(--bg-tertiary);
  position: relative;
}

.bg-none::after {
  content: '✕';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.bg-gradient-1 { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.bg-gradient-2 { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.bg-gradient-3 { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); }
.bg-gradient-4 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.bg-gradient-5 { background: linear-gradient(135deg, #f12711 0%, #f5af19 100%); }
.bg-gradient-6 { background: linear-gradient(135deg, #ff0844 0%, #ffb199 50%, #43e97b 100%); }
.bg-gradient-7 { background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%); }

/* Post Features Box */
.post-features-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}

.features-label {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.post-feature-buttons {
  display: flex;
  gap: 4px;
}

.feature-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
  color: var(--text-secondary);
}

.feature-btn:hover {
  background: var(--bg-tertiary);
}

.feature-btn svg {
  width: 22px;
  height: 22px;
}

/* Feature button colors */
.feature-btn.live-btn { color: #ef4444; }
.feature-btn.live-btn:hover { background: rgba(239, 68, 68, 0.15); }
.feature-btn.live-btn span { font-size: 0.7rem; margin-left: 2px; font-weight: 600; }

.feature-btn.photo-btn { color: #22c55e; }
.feature-btn.photo-btn:hover { background: rgba(34, 197, 94, 0.15); }

.feature-btn.tag-btn { color: #3b82f6; }
.feature-btn.tag-btn:hover { background: rgba(59, 130, 246, 0.15); }

.feature-btn.feeling-btn { color: #f59e0b; }
.feature-btn.feeling-btn:hover { background: rgba(245, 158, 11, 0.15); }

.feature-btn.location-btn { color: #ef4444; }
.feature-btn.location-btn:hover { background: rgba(239, 68, 68, 0.15); }

.feature-btn.gif-btn {
  font-weight: 700;
  font-size: 0.7rem;
  color: #8b5cf6;
}
.feature-btn.gif-btn:hover { background: rgba(139, 92, 246, 0.15); }

.feature-btn.music-btn { color: #ec4899; }
.feature-btn.music-btn:hover { background: rgba(236, 72, 153, 0.15); }

.feature-btn.poll-btn { color: #06b6d4; }
.feature-btn.poll-btn:hover { background: rgba(6, 182, 212, 0.15); }

.feature-btn.bg-btn { color: #a855f7; }
.feature-btn.bg-btn:hover { background: rgba(168, 85, 247, 0.15); }

.post-submit-btn {
  margin: 0 16px 16px;
  width: calc(100% - 32px);
  padding: 14px;
  font-size: 1rem;
  /* Always use Sphere brand colors - not affected by theme accents */
  background: linear-gradient(135deg, #0891b2 0%, #06d6a0 100%) !important;
}

.post-submit-btn:hover {
  background: linear-gradient(135deg, #06b6d4 0%, #10b981 100%) !important;
  box-shadow: 0 0 20px rgba(8, 145, 178, 0.4);
}

/* Schedule post button - uses Sphere brand colors */
#schedule-submit-btn {
  background: linear-gradient(135deg, #0891b2 0%, #06d6a0 100%) !important;
}

#schedule-submit-btn:hover {
  background: linear-gradient(135deg, #06b6d4 0%, #10b981 100%) !important;
  box-shadow: 0 0 20px rgba(8, 145, 178, 0.4);
}

/* Comment and group post buttons - uses Sphere brand */
.comment-box .btn-primary,
.group-post-form .btn-primary {
  background: linear-gradient(135deg, #0891b2 0%, #06d6a0 100%) !important;
}

.comment-box .btn-primary:hover,
.group-post-form .btn-primary:hover {
  background: linear-gradient(135deg, #06b6d4 0%, #10b981 100%) !important;
  box-shadow: 0 0 20px rgba(8, 145, 178, 0.4);
}

/* Modal Sizes */
.modal-sm .modal-content {
  max-width: 400px;
}

.modal-md .modal-content {
  max-width: 500px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--border);
}

.modal-header h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.modal-search {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 24px;
  color: var(--text-primary);
  font-size: 0.95rem;
  margin: 16px 0;
}

/* Tag People Modal */
.tag-results {
  max-height: 250px;
  overflow-y: auto;
  margin-bottom: 16px;
}

.tag-result-item,
.tag-friend-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.2s;
}

.tag-friend-item:hover {
  background: var(--surface-elevated);
}

.tag-friend-item .friend-info {
  display: flex;
  flex-direction: column;
}

.tag-friend-item .friend-name {
  font-weight: 500;
  color: var(--text-primary);
}

.tag-friend-item .friend-username {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.selected-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.tag-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: var(--primary);
  color: white;
  border-radius: 16px;
  font-size: 0.85rem;
}

.tag-chip button {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 0 4px;
  font-size: 1.1rem;
}

/* Location Modal */
.location-results {
  max-height: 300px;
  overflow-y: auto;
  padding: 8px 0;
}

.location-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.2s;
  color: var(--text-primary);
  text-align: left;
}

.location-item:hover {
  background: var(--surface-elevated);
}

.location-icon {
  font-size: 1.25rem;
}

.location-name {
  font-weight: 500;
}

.location-hint,
.loading-hint,
.empty-hint {
  padding: 16px;
  color: var(--text-muted);
  text-align: center;
  font-size: 0.9rem;
}

/* GIF Modal - see unified styles below */

.gif-hint {
  padding: 16px;
  color: var(--text-muted);
  text-align: center;
}

.gif-note {
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
  margin: 12px 0 8px;
}

.gif-url-input {
  display: flex;
  gap: 8px;
  padding: 0 16px 16px;
}

.gif-url-input input {
  flex: 1;
  margin: 0;
}

.tag-result-item:hover {
  background: var(--bg-tertiary);
}

.tag-result-item .avatar {
  width: 40px;
  height: 40px;
}

.tag-result-item .tag-name {
  font-weight: 500;
}

.tag-result-item .tag-username {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.selected-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  padding: 0 16px;
}

.selected-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
}

.selected-tag .remove-tag {
  cursor: pointer;
  opacity: 0.8;
}

.selected-tag .remove-tag:hover {
  opacity: 1;
}

/* Feeling/Activity Modal */
.feeling-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
}

.feeling-tab {
  flex: 1;
  padding: 12px;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.feeling-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.feelings-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 16px;
  max-height: 280px;
  overflow-y: auto;
}

.feeling-item {
  padding: 10px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
  color: var(--text-primary);
}

.feeling-item:hover {
  background: var(--bg-secondary);
  border-color: var(--accent);
}

.feeling-item.selected {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.activity-detail {
  width: calc(100% - 32px);
  margin: 0 16px 16px;
  padding: 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
}

/* Location Modal */
.location-results {
  max-height: 300px;
  overflow-y: auto;
  padding: 0 16px 16px;
}

.location-hint,
.gif-hint,
.music-hint {
  color: var(--text-muted);
  text-align: center;
  padding: 40px 20px;
}

.location-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  cursor: pointer;
  border-radius: 8px;
}

.location-item:hover {
  background: var(--bg-tertiary);
}

.location-item svg {
  width: 24px;
  height: 24px;
  color: var(--accent);
}

.location-item .location-name {
  font-weight: 500;
}

.location-item .location-address {
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* GIF Modal - Grid Layout (unified) */
.gif-grid {
  padding: 16px;
  max-height: 400px;
  overflow-y: auto;
}

.gif-grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.gif-item,
.gif-option {
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 1;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.gif-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gif-item:hover,
.gif-option:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Music Modal */
.music-results {
  max-height: 350px;
  overflow-y: auto;
  padding: 0 16px 16px;
}

.music-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  cursor: pointer;
  border-radius: 8px;
}

.music-item:hover {
  background: var(--bg-tertiary);
}

.music-item .music-art {
  width: 48px;
  height: 48px;
  border-radius: 4px;
  background: var(--bg-secondary);
}

.music-item .music-info {
  flex: 1;
}

.music-item .music-title {
  font-weight: 500;
}

.music-item .music-artist {
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* Go Live Modal */
.live-setup {
  padding: 20px;
}

.live-preview {
  aspect-ratio: 16/9;
  background: var(--bg-tertiary);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
  position: relative;
}

.live-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.live-preview-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.live-preview-placeholder svg {
  margin-bottom: 12px;
  opacity: 0.5;
}

.live-options {
  margin-bottom: 20px;
}

.live-input {
  width: 100%;
  padding: 14px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 1rem;
  margin-bottom: 16px;
}

.live-source-options {
  display: flex;
  gap: 12px;
}

.live-source-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-secondary);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.live-source-btn svg {
  width: 20px;
  height: 20px;
}

.live-source-btn:hover,
.live-source-btn.active {
  border-color: var(--accent);
  color: var(--accent);
}

.live-start-btn {
  background: #ef4444;
  margin-bottom: 12px;
}

.live-start-btn:hover {
  background: #dc2626;
}

.live-disclaimer {
  color: var(--text-muted);
  font-size: 0.8rem;
  text-align: center;
}

/* Live Broadcast View (Fullscreen) */
.live-broadcast-view {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
}

.live-broadcast-view.hidden {
  display: none;
}

.live-broadcast-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.live-video-section {
  width: 100%;
  height: 100%;
  position: relative;
  background: #000;
}

.live-video-section video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.live-broadcast-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.live-broadcast-overlay > * {
  pointer-events: auto;
}

.live-top-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, transparent 100%);
}

.live-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #ef4444;
  color: white;
  padding: 6px 12px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.live-dot {
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
  animation: live-pulse 1.5s ease-in-out infinite;
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.9); }
}

.live-viewer-count {
  display: flex;
  align-items: center;
  gap: 6px;
  color: white;
  background: rgba(0,0,0,0.5);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.9rem;
}

.live-duration {
  color: white;
  background: rgba(0,0,0,0.5);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-family: monospace;
}

.live-end-btn {
  margin-left: auto;
  background: #ef4444;
  color: white;
  border: none;
  padding: 8px 20px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.live-end-btn:hover {
  background: #dc2626;
}

.live-close-btn {
  margin-left: auto;
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  padding: 8px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.live-close-btn:hover {
  background: rgba(255,255,255,0.2);
}

.live-reactions-area {
  flex: 1;
  position: relative;
  pointer-events: none;
  overflow: hidden;
}

.live-reaction-float {
  position: absolute;
  bottom: 0;
  right: 30px;
  font-size: 2rem;
  animation: float-up 3s ease-out forwards;
  pointer-events: none;
}

@keyframes float-up {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-400px) scale(0.5);
  }
}

.live-bottom-section {
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
  padding: 100px 20px 20px;
}

.live-comments-container {
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 16px;
  scrollbar-width: none;
}

.live-comments-container::-webkit-scrollbar {
  display: none;
}

.live-comments-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.live-comment {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  animation: slide-in 0.3s ease-out;
}

@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.live-comment-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.live-comment-content {
  background: rgba(255,255,255,0.15);
  padding: 8px 12px;
  border-radius: 18px;
  max-width: 300px;
}

.live-comment-name {
  color: white;
  font-weight: 600;
  font-size: 0.85rem;
  margin-right: 8px;
}

.live-comment-text {
  color: white;
  font-size: 0.9rem;
}

.live-comment-actions {
  display: flex;
  gap: 12px;
  margin-top: 4px;
  font-size: 0.75rem;
}

.live-comment-reply-btn,
.live-comment-view-replies {
  color: rgba(255,255,255,0.7);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-weight: 500;
  transition: color 0.2s;
}

.live-comment-reply-btn:hover,
.live-comment-view-replies:hover {
  color: rgba(255,255,255,1);
}

.live-comment-replies {
  margin-left: 42px;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.live-comment-reply-input-wrapper {
  margin-left: 42px;
  margin-top: 8px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.live-comment-reply-input {
  flex: 1;
  background: rgba(255,255,255,0.15);
  border: none;
  border-radius: 18px;
  padding: 8px 12px;
  color: white;
  font-size: 0.85rem;
}

.live-comment-reply-input::placeholder {
  color: rgba(255,255,255,0.6);
}

.live-comment-reply-input:focus {
  outline: none;
  background: rgba(255,255,255,0.2);
}

.live-comment-reply-send,
.live-comment-reply-cancel {
  background: none;
  border: none;
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  font-size: 0.85rem;
}

.live-comment-reply-cancel {
  color: rgba(255,255,255,0.7);
}

.live-actions-bar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.live-comment-input {
  flex: 1;
  background: rgba(255,255,255,0.15);
  border: none;
  border-radius: 24px;
  padding: 12px 20px;
  color: white;
  font-size: 1rem;
}

.live-comment-input::placeholder {
  color: rgba(255,255,255,0.6);
}

.live-comment-input:focus {
  outline: none;
  background: rgba(255,255,255,0.2);
}

.live-reaction-btn {
  background: rgba(255,255,255,0.15);
  border: none;
  padding: 10px;
  border-radius: 50%;
  font-size: 1.25rem;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
}

.live-reaction-btn:hover {
  background: rgba(255,255,255,0.25);
  transform: scale(1.1);
}

.live-reaction-btn:active {
  transform: scale(0.95);
}

/* Live Viewer Placeholder */
.live-viewer-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--gradient);
  color: white;
  text-align: center;
}

.live-viewer-avatar-container {
  position: relative;
  margin-bottom: 24px;
}

.live-viewer-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #ef4444;
}

.live-pulse-ring {
  position: absolute;
  inset: -8px;
  border: 3px solid #ef4444;
  border-radius: 50%;
  animation: pulse-ring 2s ease-out infinite;
}

@keyframes pulse-ring {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}

.live-viewer-placeholder h3 {
  font-size: 1.5rem;
  margin-bottom: 8px;
}

.live-viewer-placeholder p {
  color: rgba(255,255,255,0.7);
  margin-bottom: 4px;
}

.live-viewer-status {
  margin-top: 24px;
  font-size: 0.9rem;
  opacity: 0.6;
}

.live-streamer-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.live-header-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ef4444;
}

.live-header-name {
  color: white;
  font-weight: 600;
  display: block;
}

.live-header-title {
  color: rgba(255,255,255,0.7);
  font-size: 0.85rem;
}

/* Active Live Streams in Feed */
.active-live-streams {
  background: var(--bg-primary);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
}

.live-streams-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.live-streams-header .live-dot {
  background: #ef4444;
}

.live-streams-list {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
}

.live-stream-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-secondary);
  padding: 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  flex-shrink: 0;
  min-width: 200px;
  border: 2px solid transparent;
}

.live-stream-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
}

.live-stream-avatar-container {
  position: relative;
  flex-shrink: 0;
}

.live-stream-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #ef4444;
}

.live-badge-small {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  background: #ef4444;
  color: white;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.live-stream-info {
  flex: 1;
  min-width: 0;
}

.live-stream-name {
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-stream-title {
  color: var(--text-secondary);
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-stream-viewers {
  color: #ef4444;
  font-size: 0.8rem;
  font-weight: 500;
}

/* ============================================
   ENHANCED FEED - PHOTO GRID & INTERACTIONS
   ============================================ */

/* Multi-photo grid in feed posts */
.post-media-grid {
  display: grid;
  gap: 2px;
  border-radius: 12px;
  overflow: hidden;
  margin: 12px 0;
}

.post-media-grid.grid-1 {
  grid-template-columns: 1fr;
}

.post-media-grid.grid-2 {
  grid-template-columns: 1fr 1fr;
}

.post-media-grid.grid-3 {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.post-media-grid.grid-3 .media-grid-item:first-child {
  grid-row: span 2;
}

.post-media-grid.grid-4 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.media-grid-item {
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

.media-grid-item img,
.media-grid-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease;
}

.media-grid-item:hover img,
.media-grid-item:hover video {
  transform: scale(1.02);
}

/* More photos overlay */
.media-grid-item.has-more::after {
  content: attr(data-more);
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 600;
  color: white;
}

/* Double-tap like animation */
.post-media-grid .like-animation {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  font-size: 5rem;
  pointer-events: none;
  z-index: 10;
  animation: doubleTapLike 0.8s ease forwards;
}

@keyframes doubleTapLike {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  15% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 1;
  }
  30% {
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 1;
  }
  45% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

/* Post metadata display */
.post-feeling {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-left: 4px;
}

.post-feeling .feeling-emoji {
  font-size: 1rem;
}

.post-location {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-left: 4px;
}

.post-location svg {
  width: 14px;
  height: 14px;
}

.post-tagged {
  color: var(--accent);
  font-size: 0.9rem;
}

/* Post background in feed */
.post-content-bg {
  padding: 40px 24px;
  border-radius: 12px;
  margin: 12px 0;
  text-align: center;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.4;
  color: white;
  text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Live badge on posts */
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ef4444;
  color: white;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  animation: livePulse 2s ease infinite;
}

@keyframes livePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.live-viewer-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-left: 8px;
}

/* ============================================
   ENHANCED COMMENTS - THREADING & BADGES
   ============================================ */

.comment-thread {
  border-left: 2px solid var(--border);
  margin-left: 20px;
  padding-left: 16px;
}

.comment-item {
  padding: 12px 0;
}

.comment-item.pinned {
  background: var(--bg-tertiary);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
}

.comment-pinned-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--accent);
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  margin-left: 8px;
}

.comment-creator-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  margin-left: 8px;
}

.comment-verified-badge {
  color: var(--accent);
  margin-left: 4px;
}

.comment-reply-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 4px 8px;
}

.comment-reply-btn:hover {
  color: var(--text-secondary);
}

.comment-pin-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 4px 8px;
  margin-left: auto;
}

.comment-pin-btn:hover {
  color: var(--accent);
}

/* Responsive adjustments for enhanced post modal */
@media (max-width: 768px) {
  .post-modal-enhanced {
    max-width: 100%;
    width: 100%;
    max-height: 100vh;
    border-radius: 0;
    margin: 0;
  }

  .post-feature-buttons {
    flex-wrap: wrap;
    gap: 2px;
  }

  .feature-btn {
    width: 36px;
    height: 36px;
  }

  .feature-btn svg {
    width: 18px;
    height: 18px;
  }

  .features-label {
    display: none;
  }

  .live-source-options {
    flex-direction: column;
  }

  .feelings-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================
   FACEBOOK 2026 STYLE UI OVERHAUL
   ============================================ */

/* Enhanced Search Bar - Facebook Style */
.fb-search-container {
  position: relative;
  margin-bottom: 16px;
}

.fb-search-box {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 24px;
  transition: all 0.2s ease;
}

.fb-search-box:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.fb-search-box .search-icon {
  padding: 12px 8px 12px 16px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
}

.fb-search-box .search-icon svg {
  width: 18px;
  height: 18px;
}

.fb-search-box input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 12px 16px 12px 0;
  color: var(--text-primary);
  font-size: 0.95rem;
  outline: none;
}

.fb-search-box input::placeholder {
  color: var(--text-muted);
}

.fb-search-box .clear-btn {
  padding: 8px 12px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: none;
}

.fb-search-box .clear-btn.visible {
  display: flex;
}

/* Search Tabs - Facebook Style */
.search-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
  overflow-x: auto;
  scrollbar-width: none;
}

.search-tabs::-webkit-scrollbar {
  display: none;
}

.search-tab {
  padding: 10px 16px;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  border-radius: 20px;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.search-tab:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.search-tab.active {
  background: var(--accent);
  color: white;
}

/* Search Suggestions Dropdown */
.search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-top: 8px;
  max-height: 400px;
  overflow-y: auto;
  z-index: 100;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.search-suggestions.hidden {
  display: none;
}

.search-section-header {
  padding: 12px 16px 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-section-header button {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 0.75rem;
  cursor: pointer;
}

.search-suggestion-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.search-suggestion-item:hover {
  background: var(--bg-tertiary);
}

.search-suggestion-item .suggestion-icon {
  width: 36px;
  height: 36px;
  background: var(--bg-tertiary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
}

.search-suggestion-item .suggestion-icon svg {
  width: 18px;
  height: 18px;
}

.search-suggestion-item .suggestion-icon img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.search-suggestion-item .suggestion-text {
  flex: 1;
}

.search-suggestion-item .suggestion-text .primary {
  font-weight: 500;
  color: var(--text-primary);
}

.search-suggestion-item .suggestion-text .secondary {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.search-suggestion-item .remove-btn {
  padding: 8px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 50%;
  opacity: 0;
  transition: all 0.15s ease;
}

.search-suggestion-item:hover .remove-btn {
  opacity: 1;
}

.search-suggestion-item .remove-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

/* Enhanced Who to Follow - Facebook "People You May Know" Style */
.fb-suggestions-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-top: 16px;
  overflow: hidden;
}

.fb-suggestions-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--border);
}

.fb-suggestions-header h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.fb-suggestions-header .see-all {
  font-size: 0.875rem;
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

.fb-suggestions-header .see-all:hover {
  text-decoration: underline;
}

.fb-suggestion-user {
  display: flex;
  padding: 12px 16px;
  gap: 12px;
  transition: background 0.15s ease;
  position: relative;
}

.fb-suggestion-user:hover {
  background: var(--bg-tertiary);
}

.fb-suggestion-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.fb-suggestion-info {
  flex: 1;
  min-width: 0;
}

.fb-suggestion-name {
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
}

.fb-suggestion-name a {
  color: inherit;
  text-decoration: none;
}

.fb-suggestion-name a:hover {
  text-decoration: underline;
}

.fb-suggestion-reason {
  font-size: 0.8rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}

.fb-suggestion-reason svg {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
}

.fb-suggestion-mutuals {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.fb-mutual-avatars {
  display: flex;
  margin-right: 8px;
}

.fb-mutual-avatars img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--bg-secondary);
  margin-left: -6px;
}

.fb-mutual-avatars img:first-child {
  margin-left: 0;
}

.fb-mutual-text {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.fb-suggestion-actions {
  display: flex;
  gap: 8px;
}

.fb-follow-btn {
  padding: 6px 16px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 50px;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 1;
}

.fb-follow-btn:hover {
  background: var(--accent-hover);
}

.fb-dismiss-btn {
  padding: 6px 16px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 50px;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.fb-dismiss-btn:hover {
  background: var(--bg-primary);
  border-color: var(--text-muted);
}

.fb-suggestion-dismiss {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: all 0.15s ease;
  color: var(--text-muted);
}

.fb-suggestion-user:hover .fb-suggestion-dismiss {
  opacity: 1;
}

.fb-suggestion-dismiss:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

/* Enhanced Trending Section - Facebook Style */
.fb-trending-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-top: 16px;
  overflow: hidden;
}

.fb-trending-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--border);
}

.fb-trending-header h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.fb-trending-tabs {
  display: flex;
  gap: 2px;
  padding: 0 12px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--border);
}

.fb-trending-tabs::-webkit-scrollbar {
  display: none;
}

.fb-trending-tab {
  padding: 12px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.fb-trending-tab:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.fb-trending-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.fb-trending-item {
  display: flex;
  padding: 12px 16px;
  gap: 12px;
  cursor: pointer;
  transition: background 0.15s ease;
  border-bottom: 1px solid var(--border);
}

.fb-trending-item:last-child {
  border-bottom: none;
}

.fb-trending-item:hover {
  background: var(--bg-tertiary);
}

.fb-trending-rank {
  width: 24px;
  height: 24px;
  background: var(--bg-tertiary);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  flex-shrink: 0;
}

.fb-trending-item:nth-child(1) .fb-trending-rank,
.fb-trending-item:nth-child(2) .fb-trending-rank,
.fb-trending-item:nth-child(3) .fb-trending-rank {
  background: var(--accent);
  color: white;
}

.fb-trending-content {
  flex: 1;
  min-width: 0;
}

.fb-trending-category {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.fb-trending-topic {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fb-trending-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.fb-trending-stats span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.fb-trending-stats svg {
  width: 14px;
  height: 14px;
}

.fb-trending-image {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

/* Enhanced Navigation - Facebook Tab Bar Style */
.fb-nav-tabs {
  display: flex;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}

.fb-nav-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.fb-nav-tab:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.fb-nav-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.fb-nav-tab svg {
  width: 24px;
  height: 24px;
  margin-bottom: 4px;
}

.fb-nav-tab span {
  font-size: 0.7rem;
  font-weight: 500;
}

.fb-nav-tab .badge {
  position: absolute;
  top: 6px;
  right: calc(50% - 20px);
  min-width: 18px;
  height: 18px;
  background: var(--danger);
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

/* Enhanced Header - Facebook Style */
.fb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.fb-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.fb-header-logo {
  width: 40px;
  height: 40px;
}

.fb-header-search {
  position: relative;
  width: 280px;
}

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

.fb-header-btn {
  width: 40px;
  height: 40px;
  background: var(--bg-tertiary);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-primary);
  position: relative;
  transition: background 0.2s ease;
}

.fb-header-btn:hover {
  background: var(--border);
}

.fb-header-btn .badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  background: var(--danger);
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

.fb-header-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s ease;
}

.fb-header-avatar:hover {
  border-color: var(--accent);
}

/* Explore View Enhancement - Facebook Style */
.fb-explore-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  padding: 16px;
}

.fb-explore-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
}

.fb-explore-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.fb-explore-card-image {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.fb-explore-card-content {
  padding: 16px;
}

.fb-explore-card-title {
  font-weight: 600;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fb-explore-card-meta {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Quick Actions Bar - Facebook Style */
.fb-quick-actions {
  display: flex;
  gap: 8px;
  padding: 12px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}

.fb-quick-actions::-webkit-scrollbar {
  display: none;
}

.fb-quick-action {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text-primary);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.fb-quick-action:hover {
  background: var(--border);
}

.fb-quick-action svg {
  width: 18px;
  height: 18px;
}

/* Stories Enhancement - Facebook Style */
.fb-stories-container {
  display: flex;
  gap: 12px;
  padding: 16px;
  overflow-x: auto;
  scrollbar-width: none;
}

.fb-stories-container::-webkit-scrollbar {
  display: none;
}

.fb-story-card {
  width: 110px;
  height: 200px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.fb-story-card:hover {
  transform: scale(1.02);
}

.fb-story-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fb-story-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.6) 100%);
}

.fb-story-avatar {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid var(--accent);
  z-index: 2;
}

.fb-story-name {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: white;
  z-index: 2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fb-story-add {
  background: var(--bg-tertiary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.fb-story-add::after {
  display: none;
}

.fb-story-add-icon {
  width: 40px;
  height: 40px;
  background: var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin-bottom: 8px;
}

.fb-story-add-text {
  font-size: 0.75rem;
  color: var(--text-primary);
  font-weight: 500;
}

/* Empty State Improvements */
.fb-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
}

.fb-empty-state-icon {
  width: 80px;
  height: 80px;
  background: var(--bg-tertiary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.fb-empty-state-icon svg {
  width: 40px;
  height: 40px;
  color: var(--text-muted);
}

.fb-empty-state h3 {
  font-size: 1.125rem;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.fb-empty-state p {
  color: var(--text-muted);
  max-width: 300px;
}

/* Responsive for Facebook-style components */
@media (max-width: 1200px) {
  .fb-header-search {
    display: none;
  }
}

@media (max-width: 768px) {
  .fb-suggestion-user {
    flex-direction: column;
    align-items: flex-start;
  }

  .fb-suggestion-actions {
    width: 100%;
    margin-top: 8px;
  }

  .fb-follow-btn,
  .fb-dismiss-btn {
    flex: 1;
  }

  .fb-trending-image {
    width: 48px;
    height: 48px;
  }

  .search-tabs {
    gap: 2px;
  }

  .search-tab {
    padding: 8px 12px;
    font-size: 0.85rem;
  }
}

/* ============================================
   Explore Discovery Layout
   ============================================ */
.explore-discovery-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.explore-main-content {
  min-width: 0;
}

.explore-discovery-sidebar {
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}

.explore-discovery-sidebar .fb-suggestions-card,
.explore-discovery-sidebar .fb-trending-card {
  margin-top: 0;
  margin-bottom: 16px;
}

.explore-discovery-sidebar .fb-suggestions-card:first-child {
  margin-top: 0;
}

/* Responsive - Hide sidebar on smaller screens */
@media (max-width: 1024px) {
  .explore-discovery-layout {
    grid-template-columns: 1fr;
  }

  .explore-discovery-sidebar {
    display: none;
  }
}

/* Show discovery sidebar on explore page even on tablets */
@media (min-width: 768px) and (max-width: 1024px) {
  .explore-discovery-sidebar {
    display: block;
    position: relative;
    top: 0;
    max-height: none;
  }

  .explore-discovery-layout {
    grid-template-columns: 1fr;
  }

  .explore-discovery-sidebar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
  }

  .explore-discovery-sidebar .fb-suggestions-card,
  .explore-discovery-sidebar .fb-trending-card {
    margin-bottom: 0;
  }
}

@media (max-width: 767px) {
  .explore-discovery-sidebar {
    display: none;
  }
}

/* ================================================================
   NUMBER OVERFLOW FIX
   Prevents large numbers from breaking out of stat containers
   ================================================================ */

/* Generic stat value overflow handling */
.stat-value,
.stat-card .stat-value,
.ad-stat-value,
.stat-mini-value,
.balance-amount,
.cash-out-amount,
.analytics-value,
.audience-stat-value,
.perf-stat-value,
.avg-stat-value,
.achievement-stat-value,
.tournament-stat-value,
.gaming-group-stat-value,
.quick-stat .stat-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  display: block;
}

/* Hero stats should NOT truncate - show full values */
.hero-stat-value {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  word-wrap: break-word;
}

/* Ensure parent containers have min-width: 0 for flex/grid overflow */
.stat-card,
.hero-stat-card,
.ad-stat-card,
.stat-mini,
.balance-display,
.cash-out-balance,
.analytics-card,
.quick-stat,
.stat-info {
  min-width: 0;
  overflow: hidden;
}

/* Hero stat content needs flex containment */
.hero-stat-content {
  min-width: 0;
  overflow: hidden;
}

/* Allow stat-info to truncate properly */
.stat-info {
  flex: 1;
  min-width: 0;
}

/* Responsive font sizing for large numbers on small screens */
@media (max-width: 480px) {
  .stat-value,
  .stat-card .stat-value {
    font-size: 1.25rem;
  }

  .hero-stat-value {
    font-size: 1.2rem;
  }

  .balance-amount,
  .cash-out-amount {
    font-size: 1.75rem;
  }

  .stat-mini-value {
    font-size: 1rem;
  }

  .ad-stat-value {
    font-size: 1.25rem;
  }
}

/* Extra small screens - further reduce font sizes */
@media (max-width: 360px) {
  .stat-value,
  .stat-card .stat-value,
  .hero-stat-value {
    font-size: 1rem;
  }

  .balance-amount,
  .cash-out-amount {
    font-size: 1.5rem;
  }
}

/* Conversation Settings Modal */
.conversation-settings-list {
  padding: 8px 0;
}

.settings-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.2s;
  text-align: left;
}

.settings-option:hover {
  background: var(--bg-tertiary);
}

.settings-option svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

.settings-option.text-warning {
  color: #f59e0b;
}

.settings-option.text-warning svg {
  color: #f59e0b;
}

.settings-option.text-danger {
  color: #ef4444;
}

.settings-option.text-danger svg {
  color: #ef4444;
}

.settings-divider {
  height: 1px;
  background: var(--border);
  margin: 8px 0;
}

/* ============================================
   COSMETICS SHOP STYLING
   ============================================ */

.shop-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.shop-balance {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #000;
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 1rem;
}

.coin-icon {
  font-size: 1.25rem;
}

.coin-label {
  font-size: 0.85rem;
  opacity: 0.8;
}

.shop-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
}

.shop-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.shop-tab {
  padding: 10px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

.shop-tab:hover {
  background: var(--hover);
}

.shop-tab.active {
  background: linear-gradient(135deg, #0891b2 0%, #10b981 100%);
  border-color: transparent;
  color: white;
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.shop-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s;
}

.shop-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

.shop-item.rarity-common {
  border-color: #9ca3af;
}

.shop-item.rarity-uncommon {
  border-color: #22c55e;
}

.shop-item.rarity-rare {
  border-color: #3b82f6;
}

.shop-item.rarity-epic {
  border-color: #8b5cf6;
}

.shop-item.rarity-legendary {
  border-color: #f59e0b;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.3);
}

.shop-item-preview {
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  position: relative;
}

/* Circular display for frame-type cosmetics (profile picture frames) */
.shop-item-preview.frame-preview {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  margin: 10px auto;
  border: 4px solid var(--border);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.shop-item-preview.frame-preview img.cosmetic-preview-img {
  border-radius: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.type-icon {
  font-size: 4rem;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.shop-item-info {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.shop-item-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
}

.shop-item-rarity {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.shop-item-type {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-transform: capitalize;
}

.shop-item-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.owned-badge {
  background: #22c55e;
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 600;
}

.equipped-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #22c55e;
  color: white;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

.equipped-text {
  color: #22c55e;
  font-weight: 600;
  font-size: 0.85rem;
}

.inventory-view {
  max-width: 1400px;
  margin: 0 auto;
}

.inventory-header {
  margin-bottom: 24px;
}

.inventory-header h2 {
  margin: 0 0 8px 0;
  color: var(--text);
}

/* Modal Overlay for Cosmetics Shop */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}

/* Fix: Modal dialogs inside modal-overlay should NOT be full-screen fixed */
.modal-overlay > .modal {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  inset: auto;
  background: var(--bg-secondary);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  border: 1px solid var(--border-primary);
  overflow: hidden;
}

/* Cosmetic Preview Modal - completely self-contained, no inherited scrolling */
.cosmetic-preview-modal {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 90%;
  max-width: 420px;
  max-height: 90vh;
  background: var(--bg-secondary, #1a1a2e);
  border-radius: 16px;
  padding: 0;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  border: 1px solid var(--border, #2d2d44);
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
}

.cosmetic-preview-modal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border, #2d2d44);
  flex-shrink: 0;
}

.cosmetic-preview-modal .modal-header h2 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text, #fff);
}

.cosmetic-preview-modal .modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--text-secondary, #9ca3af);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  line-height: 1;
}

.cosmetic-preview-modal .modal-close:hover {
  background: var(--hover, rgba(255,255,255,0.1));
  color: var(--text, #fff);
}

/* Modal content area - this is where the preview and details go */
.cosmetic-preview-modal .modal-content {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  max-width: none !important;
  width: auto !important;
  position: static !important;
}

.cosmetic-preview-modal .modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid var(--border, #2d2d44);
  flex-shrink: 0;
}

/* Preview image container */
.cosmetic-preview-large {
  width: 100%;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
}

.cosmetic-preview-large img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.cosmetic-description {
  color: var(--text-muted, #9ca3af);
  margin: 12px 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

.cosmetic-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  background: var(--bg-tertiary, rgba(255,255,255,0.05));
  border-radius: 8px;
  font-size: 0.9rem;
}

.cosmetic-details span {
  color: var(--text-secondary, #9ca3af);
}

.cosmetic-details strong {
  color: var(--text, #fff);
}

/* ============================================
   ADMIN ANALYTICS STYLING
   ============================================ */

.analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 24px;
}

.analytics-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
}

.analytics-card h3 {
  margin: 0 0 16px 0;
  color: var(--text);
  font-size: 1rem;
}

.chart-container {
  min-height: 250px;
}

.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 200px;
  padding: 10px 0;
}

.chart-bar-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.chart-bar {
  width: 100%;
  background: linear-gradient(135deg, #0891b2 0%, #10b981 100%);
  border-radius: 4px 4px 0 0;
  min-height: 4px;
  position: relative;
  transition: all 0.3s;
  cursor: pointer;
}

.chart-bar:hover {
  opacity: 0.8;
}

.bar-value {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text);
  opacity: 0;
  transition: opacity 0.2s;
}

.chart-bar:hover .bar-value {
  opacity: 1;
}

.bar-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-align: center;
}

.metrics-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.metric-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--hover);
  border-radius: 8px;
  transition: all 0.2s;
}

.metric-row:hover {
  background: var(--border);
}

.metric-label {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.metric-value {
  color: var(--text);
  font-weight: 700;
  font-size: 1.1rem;
}

/* ============================================
   MESSENGER UI/UX OVERHAUL
   ============================================ */

/* Modernized conversation list */
.conversation-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.2s;
  border-bottom: 1px solid var(--border);
  position: relative;
}

.conversation-item:hover {
  background: var(--hover);
}

.conversation-item.active {
  background: linear-gradient(90deg, rgba(8, 145, 178, 0.1) 0%, rgba(16, 185, 129, 0.1) 100%);
  border-left: 3px solid #0891b2;
}

.conversation-item .avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

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

.conversation-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
  margin-bottom: 4px;
}

.conversation-preview {
  font-size: 0.85rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conversation-time {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Enhanced chat bubbles */
.message-bubble {
  max-width: 70%;
  padding: 12px 16px;
  border-radius: 18px;
  margin-bottom: 8px;
  word-wrap: break-word;
  animation: messageSlideIn 0.2s ease-out;
}

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

.message-bubble.sent {
  background: linear-gradient(135deg, #0891b2 0%, #10b981 100%);
  color: white;
  margin-left: auto;
  border-bottom-right-radius: 4px;
}

.message-bubble.received {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-bottom-left-radius: 4px;
}

.message-text {
  font-size: 0.95rem;
  line-height: 1.4;
}

.message-time {
  font-size: 0.75rem;
  opacity: 0.7;
  margin-top: 4px;
}

/* Polished input area */
.message-input-container {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 16px;
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.message-input {
  flex: 1;
  resize: none;
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 12px 20px;
  font-size: 0.95rem;
  background: var(--hover);
  color: var(--text);
  max-height: 120px;
  transition: all 0.2s;
}

.message-input:focus {
  border-color: #0891b2;
  outline: none;
  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1);
}

.send-button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0891b2 0%, #10b981 100%);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.send-button:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(8, 145, 178, 0.3);
}

.send-button:active {
  transform: scale(0.95);
}

/* Improved conversation header */
.conversation-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.conversation-header .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.conversation-header-info {
  flex: 1;
}

.conversation-header-name {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
}

.conversation-header-status {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Mobile responsiveness improvements */
@media (max-width: 768px) {
  .shop-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
  }

  .shop-item-preview {
    height: 120px;
  }

  .type-icon {
    font-size: 2.5rem;
  }

  .analytics-grid {
    grid-template-columns: 1fr;
  }

  .message-bubble {
    max-width: 85%;
  }

  .conversations-sidebar {
    width: 100% !important;
  }
}

/* ============================================
   LIFE UPDATES - Major Life Event Posts
   ============================================ */

/* Feed Post Features Bar - Main Feed Feature Buttons */
.feed-post-features {
  background: var(--surface);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
}

.feed-feature-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-evenly;
}

.feed-feature-buttons .feature-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: none;
  border-radius: 8px;
  background: var(--bg-tertiary);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 500;
  transition: all 0.2s;
  white-space: nowrap;
}

.feed-feature-buttons .feature-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.feed-feature-buttons .feature-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: inline-block;
}

.feed-feature-buttons .feature-btn span {
  font-size: 0.75rem;
}

.feed-feature-buttons .gif-text {
  font-weight: 700;
  font-size: 0.7rem;
}

/* Schedule button styling */
.feature-btn.schedule-btn { color: #3b82f6; }
.feature-btn.schedule-btn:hover { background: rgba(59, 130, 246, 0.15); }

/* Mobile responsive */
@media (max-width: 768px) {
  .feed-feature-buttons {
    gap: 3px;
  }
  .feed-feature-buttons .feature-btn {
    padding: 6px 8px;
  }
  .feed-feature-buttons .feature-btn span {
    display: none;
  }
  .feed-feature-buttons .feature-btn svg {
    width: 20px;
    height: 20px;
  }
}

/* Modal features - use feed style inside post modal */
.modal-features {
  margin: 0;
  border-radius: 0;
  border: none;
  border-top: 1px solid var(--border);
  background: transparent;
}

.modal-features .feed-feature-buttons {
  justify-content: flex-start;
}

.quick-actions-bar.secondary-actions {
  margin-top: 0;
}

.quick-actions-bar {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  background: var(--surface);
  border-radius: 12px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
}

.quick-action {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.quick-action:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
  transform: translateY(-1px);
}

.quick-action-icon {
  font-size: 1.25rem;
}

.life-updates-section {
  margin-bottom: 16px;
}

.life-update-post {
  background: var(--surface);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
  border: 1px solid var(--border);
}

.life-update-banner {
  position: relative;
  padding: 32px 24px;
  text-align: center;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.life-update-banner-content {
  position: relative;
  z-index: 2;
}

.life-update-icon-large {
  font-size: 3rem;
  margin-bottom: 12px;
  animation: bounce 0.5s ease;
}

@keyframes bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

.life-update-headline {
  font-size: 1.5rem;
  font-weight: 700;
  color: white;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
  margin-bottom: 8px;
}

.life-update-location {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.9);
}

.life-update-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
}

/* Gradient backgrounds for life updates */
.gradient-blue {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.gradient-gold {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 50%, #f9d423 100%);
}

.gradient-green {
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.gradient-pink {
  background: linear-gradient(135deg, #ee9ca7 0%, #ffdde1 100%);
  color: #333;
}

.gradient-pink .life-update-headline,
.gradient-pink .life-update-location {
  color: #333;
  text-shadow: none;
}

.gradient-purple {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.gradient-orange {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.gradient-teal {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.gradient-cyan {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.gradient-red {
  background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
}

.gradient-rainbow {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 25%, #f9d423 50%, #38ef7d 75%, #667eea 100%);
}

/* Life Update Modal */
.life-update-preview {
  margin: 16px 0;
}

.life-update-card {
  padding: 24px;
  border-radius: 12px;
  text-align: center;
  color: white;
}

.life-update-card .life-update-icon {
  font-size: 2.5rem;
  margin-bottom: 8px;
}

.life-update-card .life-update-title {
  font-size: 1.125rem;
  font-weight: 600;
}

.modal-subtitle {
  color: var(--text-muted);
  font-size: 0.875rem;
  margin-bottom: 16px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Life Update Comments */
.life-update-comments {
  padding: 16px;
  border-top: 1px solid var(--border);
  background: var(--surface-elevated);
}

.life-update-comments .comment {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.life-update-comments .comment-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.life-update-comments .comment-body {
  flex: 1;
  background: var(--surface);
  padding: 8px 12px;
  border-radius: 12px;
}

.life-update-comments .comment-author {
  font-weight: 600;
  font-size: 0.875rem;
  margin-right: 8px;
}

.life-update-comments .comment-text {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.comment-input-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.comment-input-row input {
  flex: 1;
  padding: 10px 16px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}

.loading-comments, .no-comments, .error {
  text-align: center;
  padding: 16px;
  color: var(--text-muted);
  font-size: 0.875rem;
}

/* Mobile responsiveness for life updates */
@media (max-width: 768px) {
  .quick-actions-bar {
    padding: 8px;
    gap: 6px;
  }

  .quick-action {
    padding: 8px 10px;
    font-size: 0.75rem;
  }

  .quick-action-icon {
    font-size: 1rem;
  }

  .life-update-banner {
    padding: 24px 16px;
    min-height: 140px;
  }

  .life-update-icon-large {
    font-size: 2.5rem;
  }

  .life-update-headline {
    font-size: 1.25rem;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   TIKTOK-STYLE REELS FEED
   ============================================ */

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

.reels-header h1 {
  flex: 1;
}

.reels-view-toggle {
  display: flex;
  background: var(--surface-elevated);
  border-radius: 8px;
  padding: 4px;
  border: 1px solid var(--border);
}

.toggle-btn {
  padding: 8px 12px;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toggle-btn:hover {
  color: var(--text);
  background: var(--surface);
}

.toggle-btn.active {
  background: var(--primary);
  color: white;
}

.reels-tiktok-feed {
  position: fixed;
  inset: 0;
  top: 60px;
  background: #000;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  z-index: 100;
}

body.tiktok-mode {
  overflow: hidden;
}

body.tiktok-mode .fb-top-nav {
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(10px);
}

body.tiktok-mode .fb-left-sidebar,
body.tiktok-mode .fb-right-sidebar {
  display: none;
}

.tiktok-reel {
  position: relative;
  height: calc(100vh - 60px);
  width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.tiktok-video {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: pointer;
}

.tiktok-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  background: linear-gradient(transparent 60%, rgba(0,0,0,0.8));
}

.tiktok-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 20px;
  max-width: calc(100% - 80px);
}

.tiktok-creator {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  pointer-events: auto;
  cursor: pointer;
}

.tiktok-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid white;
  object-fit: cover;
}

.tiktok-username {
  color: white;
  font-weight: 600;
  font-size: 1rem;
}

.tiktok-caption {
  color: white;
  font-size: 0.9rem;
  margin-bottom: 12px;
  line-height: 1.4;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.tiktok-audio {
  display: flex;
  align-items: center;
  gap: 8px;
  color: white;
  font-size: 0.85rem;
}

.audio-disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, #333 0%, #111 100%);
  border-radius: 50%;
  animation: spin 3s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.tiktok-actions {
  position: absolute;
  right: 16px;
  bottom: 100px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  pointer-events: auto;
}

.tiktok-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: white;
  font-size: 0.75rem;
  transition: transform 0.2s;
}

.tiktok-action:hover {
  transform: scale(1.1);
}

.tiktok-action.liked svg {
  animation: heartPop 0.3s ease;
}

@keyframes heartPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.tiktok-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.5);
  border-radius: 50%;
  padding: 20px;
  pointer-events: none;
}

.tiktok-loading,
.tiktok-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 60px);
  color: white;
  gap: 16px;
}

.tiktok-loading .spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Mobile adjustments for TikTok feed */
@media (max-width: 768px) {
  .reels-tiktok-feed {
    top: 56px;
  }

  .tiktok-reel {
    height: calc(100vh - 56px - 56px); /* Account for bottom nav */
  }

  .tiktok-actions {
    right: 12px;
    bottom: 80px;
    gap: 16px;
  }

  .tiktok-action svg {
    width: 28px;
    height: 28px;
  }

  .tiktok-info {
    padding-bottom: 60px;
  }
}

/* TikTok Reel Viewer - Fullscreen Mode */
.tiktok-reel-viewer {
  position: relative;
  width: 100%;
  height: calc(100vh - 60px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

/* Exit button for fullscreen reel view */
.tiktok-exit-btn {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 50;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.tiktok-exit-btn svg {
  width: 22px;
  height: 22px;
}

.tiktok-exit-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
  border-color: white;
}

.tiktok-video-container {
  position: relative;
  width: 100%;
  max-width: 420px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tiktok-video-container video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: pointer;
}

.tiktok-play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  padding: 24px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.tiktok-play-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.tiktok-nav-arrows {
  position: absolute;
  right: calc(50% - 260px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tiktok-nav-btn {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  transition: all 0.2s;
}

.tiktok-nav-btn:hover:not(.disabled) {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.tiktok-nav-btn.disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.tiktok-sidebar {
  position: absolute;
  right: calc(50% - 240px);
  bottom: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  z-index: 10;
}

.tiktok-sidebar .tiktok-creator {
  margin-bottom: 0;
}

.tiktok-sidebar .tiktok-creator img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid white;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.2s;
}

.tiktok-sidebar .tiktok-creator img:hover {
  transform: scale(1.1);
}

.tiktok-sidebar .tiktok-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 0.75rem;
  transition: transform 0.2s;
  padding: 0;
}

.tiktok-sidebar .tiktok-action .icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  backdrop-filter: blur(4px);
}

.tiktok-sidebar .tiktok-action .icon svg {
  width: 20px;
  height: 20px;
  fill: white;
}

.tiktok-sidebar .tiktok-action.liked .icon svg {
  fill: #ff4757;
}

.tiktok-sidebar .tiktok-action .count {
  font-size: 12px;
  font-weight: 500;
}

.tiktok-sidebar .tiktok-action:hover {
  transform: scale(1.1);
}

.tiktok-sidebar .tiktok-action.liked .icon {
  color: #ff4757;
}

.tiktok-reel-viewer .tiktok-info {
  position: absolute;
  left: calc(50% - 200px);
  bottom: 40px;
  max-width: 360px;
  pointer-events: none;
}

.tiktok-reel-viewer .tiktok-username {
  color: white;
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 8px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.tiktok-reel-viewer .tiktok-caption {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
  line-height: 1.4;
  margin-bottom: 8px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tiktok-reel-viewer .tiktok-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
}

.tiktok-counter {
  background: rgba(255, 255, 255, 0.2);
  padding: 4px 10px;
  border-radius: 12px;
  font-weight: 500;
}

.tiktok-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 60px);
  color: white;
  text-align: center;
  gap: 16px;
}

.tiktok-empty-state .empty-icon {
  font-size: 4rem;
}

.tiktok-empty-state p {
  font-size: 1.1rem;
  margin: 0;
}

.tiktok-empty-state .empty-subtitle {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
}

/* Mobile adjustments for TikTok viewer */
@media (max-width: 768px) {
  .tiktok-reel-viewer {
    height: calc(100vh - 56px - 56px);
  }

  .tiktok-video-container {
    max-width: 100%;
  }

  .tiktok-nav-arrows {
    right: 16px;
    top: auto;
    bottom: 200px;
    transform: none;
  }

  .tiktok-sidebar {
    right: 16px;
    bottom: 80px;
  }

  .tiktok-reel-viewer .tiktok-info {
    left: 16px;
    bottom: 80px;
    max-width: calc(100% - 100px);
  }
}

/* ============================================
   MEMORIES & SAVED COLLECTIONS
   ============================================ */

.saved-tab {
  padding: 8px 16px;
  border: none;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border-radius: 20px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.saved-tab:hover {
  background: var(--border);
}

.saved-tab.active {
  background: var(--color-primary);
  color: white;
}

.collection-card {
  transition: transform 0.2s, box-shadow 0.2s;
}

.collection-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.saved-item {
  transition: transform 0.2s;
}

.saved-item:hover {
  transform: translateX(4px);
}

.memories-header {
  animation: fadeInUp 0.5s ease-out;
}

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

.icon-btn {
  transition: all 0.2s;
}

.icon-btn:hover {
  transform: scale(1.1);
}

/* ============================================
   FUNDRAISERS
   ============================================ */

.fundraiser-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}

.fundraisers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.fundraiser-card {
  background: var(--card);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.fundraiser-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.fundraiser-cover {
  height: 140px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.fundraiser-category-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  text-transform: capitalize;
}

.fundraiser-info {
  padding: 16px;
}

.fundraiser-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 10px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fundraiser-creator {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.fundraiser-creator span {
  font-size: 14px;
  color: var(--text-secondary);
}

.fundraiser-progress {
  margin-bottom: 12px;
}

.progress-bar {
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.progress-text {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 13px;
}

.progress-goal {
  color: var(--text-muted);
}

.fundraiser-stats {
  font-size: 13px;
  color: var(--text-muted);
}

.fundraiser-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* Donate Modal */
.donate-amounts {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.donate-amount {
  padding: 12px;
  border: 2px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.donate-amount:hover {
  border-color: var(--primary);
}

.donate-amount.selected {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

/* ============================================
   ORDERS MANAGEMENT
   ============================================ */

.orders-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.orders-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}

.orders-tab {
  padding: 10px 20px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s;
}

.orders-tab:hover {
  background: var(--hover);
}

.orders-tab.active {
  background: var(--primary);
  color: white;
}

.orders-tab-content {
  display: none;
}

.orders-tab-content.active {
  display: block;
}

.orders-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.order-card {
  display: flex;
  gap: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.order-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1);
}

.order-image {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

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

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 6px;
}

.order-header h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-status {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  color: white;
  white-space: nowrap;
}

.order-number {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 4px 0;
}

.order-user {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 4px 0;
}

.order-price {
  font-size: 15px;
  font-weight: 600;
  color: var(--primary);
  margin: 0;
}

.order-tracking {
  font-size: 12px;
  color: var(--text-muted);
  margin: 4px 0 0 0;
}

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

.order-detail-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.order-detail-row:last-child {
  border-bottom: none;
}

/* Mobile Responsive */
@media (max-width: 600px) {
  .fundraisers-grid {
    grid-template-columns: 1fr;
  }

  .donate-amounts {
    grid-template-columns: repeat(3, 1fr);
  }

  .order-card {
    flex-direction: column;
  }

  .order-image {
    width: 100%;
    height: 150px;
  }

  .order-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Facebook-style Mega Menu */
.fb-mega-menu-overlay {
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
}

.fb-mega-menu-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.fb-mega-menu {
  position: fixed;
  top: 56px;
  right: 0;
  width: 680px;
  max-width: 90vw;
  height: calc(100vh - 56px);
  background: var(--bg-secondary);
  border-left: 1px solid var(--border);
  z-index: 999;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.5);
}

.fb-mega-menu.active {
  transform: translateX(0);
}

.fb-mega-menu-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding: 24px;
  min-height: 100%;
}

.fb-mega-menu-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fb-mega-menu-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 12px;
}

.fb-mega-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  color: var(--text-primary);
  text-decoration: none;
  transition: background 0.2s ease;
  cursor: pointer;
}

.fb-mega-menu-item:hover {
  background: var(--bg-tertiary);
}

.fb-mega-menu-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 6px;
  background: var(--bg-tertiary);
  border-radius: 50%;
  color: var(--accent);
}

.fb-mega-menu-item:hover .fb-mega-menu-icon {
  background: var(--accent);
  color: white;
}

.fb-mega-menu-item-title {
  font-weight: 600;
  font-size: 15px;
  color: var(--text-primary);
}

.fb-mega-menu-item-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.3;
}

.fb-mega-menu-create {
  border-left: 1px solid var(--border);
  padding-left: 32px;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .fb-mega-menu {
    width: 100vw;
    max-width: 100vw;
  }

  .fb-mega-menu-content {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .fb-mega-menu-create {
    border-left: none;
    border-top: 1px solid var(--border);
    padding-left: 0;
    padding-top: 24px;
  }
}

/* User Profile Dropdown Menu */
.fb-user-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1098;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
}

.fb-user-menu-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.fb-user-menu {
  position: fixed;
  top: 64px;
  right: 12px;
  width: 360px;
  max-width: calc(100vw - 24px);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  z-index: 1099;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.fb-user-menu.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.fb-user-menu-content {
  padding: 12px;
}

.fb-user-menu-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.fb-user-menu-profile:hover {
  background: var(--bg-tertiary);
}

.fb-user-menu-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
}

.fb-user-menu-info {
  flex: 1;
  min-width: 0;
}

.fb-user-menu-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fb-user-menu-username {
  font-size: 14px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fb-user-menu-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 8px;
}

.fb-user-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: background 0.2s ease;
  cursor: pointer;
}

.fb-user-menu-item:hover {
  background: var(--bg-tertiary);
}

.fb-user-menu-item svg {
  width: 20px;
  height: 20px;
  color: var(--text-secondary);
}

.fb-user-menu-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 8px 0;
}

/* ============================================
   MODERN FACEBOOK-STYLE CREATE MODALS
   ============================================ */

/* Modal Base Styles */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal.hidden {
  display: none !important;
}

.modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}

.modal-content {
  position: relative;
  background: var(--bg-secondary);
  border-radius: 16px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5), 0 0 40px rgba(8, 145, 178, 0.1);
  border: 1px solid var(--border);
  animation: modalSlideIn 0.2s ease-out;
}

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

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.modal-header h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.modal-close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  border: none;
  border-radius: 50%;
  font-size: 24px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.modal-close:hover {
  background: var(--border);
  color: var(--text-primary);
}

.modal-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
}

/* Create Post Modal */
.create-post-modal {
  max-width: 540px;
}

.post-modal-body {
  padding: 16px 20px;
}

.post-author-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.post-author-row .avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.post-author-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.post-author-info .author-name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 15px;
}

.visibility-select {
  background: var(--bg-tertiary);
  border: none;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
}

.post-textarea {
  width: 100%;
  min-height: 120px;
  background: transparent;
  border: none;
  resize: none;
  font-size: 18px;
  color: var(--text-primary);
  line-height: 1.5;
  outline: none;
}

.post-textarea::placeholder {
  color: var(--text-muted);
}

.media-preview {
  margin-top: 12px;
}

.media-preview .media-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}

.media-preview .media-item img,
.media-preview .media-item video {
  width: 100%;
  max-height: 300px;
  object-fit: cover;
  border-radius: 12px;
}

.media-preview .remove-media {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  background: rgba(0, 0, 0, 0.7);
  border: none;
  border-radius: 50%;
  color: white;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.post-additions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-tertiary);
  border-radius: 12px;
  border: 1px solid var(--border);
  margin-top: 16px;
}

.additions-label {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 15px;
}

.addition-buttons {
  display: flex;
  gap: 4px;
}

.addition-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s;
}

.addition-btn:hover {
  background: var(--bg-secondary);
}

.addition-btn svg {
  width: 24px;
  height: 24px;
}

/* Story Modal */
.create-story-modal {
  max-width: 420px;
}

/* Story upload progress bar */
.story-progress-container {
  padding: 16px 20px;
  text-align: center;
}

.story-progress-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.story-progress-bar {
  width: 100%;
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  overflow: hidden;
}

.story-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #10b981);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.story-progress-percent {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 8px;
}

.story-progress-container.hidden {
  display: none;
}

.story-modal-body {
  padding: 16px 20px;
}

.story-type-selector {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.story-type-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: var(--bg-tertiary);
  border: 2px solid var(--border);
  border-radius: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.story-type-btn svg {
  width: 32px;
  height: 32px;
}

.story-type-btn.active {
  border-color: var(--accent);
  background: rgba(8, 145, 178, 0.1);
  color: var(--accent);
}

.story-content-area {
  min-height: 300px;
}

.upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  border: 2px dashed var(--border);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.upload-zone:hover {
  border-color: var(--accent);
  background: rgba(8, 145, 178, 0.05);
}

.upload-zone svg {
  color: var(--text-muted);
  margin-bottom: 16px;
}

.upload-zone p {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.upload-zone span {
  font-size: 14px;
  color: var(--text-muted);
}

.story-preview {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
}

.story-preview img,
.story-preview video {
  width: 100%;
  max-height: 400px;
  object-fit: contain;
}

.text-story-editor {
  width: 100%;
  min-height: 300px;
  border-radius: 16px;
  padding: 40px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  color: white;
  text-align: center;
  outline: none;
}

.text-story-editor .placeholder {
  opacity: 0.6;
}

.text-bg-options {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 16px;
}

.bg-option {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s;
}

.bg-option:hover {
  transform: scale(1.1);
  border-color: white;
}

/* Reel Modal */
.create-reel-modal {
  max-width: 480px;
}

.reel-modal-body {
  padding: 20px;
}

.reel-preview {
  text-align: center;
}

.reel-preview video {
  width: 100%;
  max-height: 400px;
  border-radius: 12px;
  background: #000;
}

.reel-details {
  margin-top: 16px;
}

/* Form Groups */
.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
  font-size: 14px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 15px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.2);
  outline: none;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--text-muted);
}

/* Modern Post Cards (Facebook-style) */
.post-card {
  background: var(--bg-secondary);
  border-radius: 8px;
  padding: 0;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
  overflow: visible;
}

.post-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.post-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
}

.post-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.post-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.post-avatar:hover {
  transform: scale(1.05);
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(8, 145, 178, 0.25);
}

.post-author-info {
  flex: 1;
  min-width: 0;
}

.post-author-name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
  transition: color 0.2s;
}

.post-author-name:hover {
  color: var(--accent);
}

.post-timestamp {
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

.post-timestamp:hover {
  color: var(--text-secondary);
}

.post-menu-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: all 0.2s;
  flex-shrink: 0;
}

.post-menu-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.post-menu-btn svg {
  width: 20px;
  height: 20px;
}

.post-content {
  padding: 0 16px 12px;
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.post-image {
  width: 100%;
  max-height: 500px;
  object-fit: cover;
  background: var(--bg-tertiary);
}

.post-video {
  width: 100%;
  max-height: 500px;
  background: var(--bg-tertiary);
  border-radius: 0;
}

/* Video Post Container for Sponsor Ads */
.post-video-container {
  position: relative;
  width: 100%;
}

/* Sphere Pro Sponsor Ad Banner (positioned BELOW video, not overlaying) */
.video-sponsor-ad {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin: 0;
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.95) 0%, rgba(6, 214, 160, 0.95) 100%);
  border-radius: 0 0 10px 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.video-sponsor-ad:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.video-sponsor-ad-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.2);
  padding: 4px;
}

.video-sponsor-ad-content {
  flex: 1;
}

.video-sponsor-ad-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 2px;
}

.video-sponsor-ad-title {
  font-weight: 600;
  font-size: 14px;
  color: white;
}

.video-sponsor-ad-desc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
}

.video-sponsor-ad-close {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  border: none;
  cursor: pointer;
  color: white;
  font-size: 14px;
  transition: background 0.2s;
}

.video-sponsor-ad-close:hover {
  background: rgba(0, 0, 0, 0.4);
}

/* Toggle Switch Inline for Creator Studio - uses same design as .toggle-switch */
.toggle-switch-inline {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 500;
}

.toggle-switch-inline input {
  display: none;
}

.toggle-switch-inline .toggle-slider {
  width: 44px;
  height: 24px;
  background: var(--border);
  border-radius: 12px;
  position: relative;
  transition: background 0.2s ease;
  flex-shrink: 0;
  border: none;
}

.toggle-switch-inline .toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 50%;
  top: 50%;
  left: 3px;
  transform: translateY(-50%);
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.toggle-switch-inline .toggle-slider::after {
  display: none;
}

.toggle-switch-inline input:checked + .toggle-slider {
  background: linear-gradient(135deg, #0891b2, #06d6a0);
}

.toggle-switch-inline input:checked + .toggle-slider::before {
  transform: translateY(-50%) translateX(20px);
}

/* Ad Config Section - Improved spacing and visual hierarchy */
.ad-config-section {
  padding: 20px;
  background: var(--bg-tertiary);
  border-radius: 12px;
  border: 1px solid var(--border);
  transition: border-color 0.2s ease;
}

.ad-config-section:hover {
  border-color: var(--accent);
}

.ad-config-section h4 {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-primary);
}

.ad-config-section p {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 16px;
  line-height: 1.4;
}

/* Video Ads Configuration - Clean Layout */
.video-ads-config .card-description {
  margin-bottom: 24px;
}

.video-ads-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

@media (max-width: 768px) {
  .video-ads-grid {
    grid-template-columns: 1fr;
  }
}

.ad-config-input-group {
  margin-top: 16px;
}

.ad-config-input-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.ad-config-input,
.ad-config-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 14px;
  transition: border-color 0.2s ease;
}

.ad-config-input:focus,
.ad-config-select:focus {
  outline: none;
  border-color: var(--accent);
}

/* Sponsor Ad Preview - Polished */
.sponsor-ad-preview {
  margin-top: 24px;
  padding: 20px;
  background: var(--bg-tertiary);
  border-radius: 12px;
  border: 1px solid var(--border);
}

.sponsor-ad-preview h4 {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--text-primary);
}

.sponsor-ad-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--surface);
  border-radius: 10px;
  border: 1px solid var(--border);
}

.sponsor-ad-logo {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  object-fit: cover;
}

.sponsor-ad-info {
  flex: 1;
}

.sponsor-ad-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.sponsor-ad-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.sponsor-ad-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 4px 12px;
  background: linear-gradient(135deg, #0891b2, #06d6a0);
  color: white;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.video-ads-actions {
  margin-top: 20px;
  display: flex;
  gap: 12px;
}

/* Ad Manager Tab - Clean styles */
.ad-manager-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
}

.ad-manager-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.ad-manager-subtitle {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin: 4px 0 0;
}

.ad-manager-header .btn-primary {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.ad-wallet-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  margin-top: 12px;
}

.ad-wallet-stat {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  transition: border-color 0.2s ease;
}

.ad-wallet-stat:hover {
  border-color: rgba(8, 145, 178, 0.3);
}

.ad-wallet-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.ad-wallet-stat-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

.ad-campaigns-list {
  margin-top: 12px;
}

@media (max-width: 768px) {
  .ad-manager-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .ad-wallet-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .ad-wallet-stats-grid {
    grid-template-columns: 1fr;
  }
}

.post-engagement {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  font-size: 13px;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.post-engagement-left {
  display: flex;
  gap: 8px;
}

.post-engagement-right {
  display: flex;
  gap: 12px;
  align-items: center;
}

.post-view-count {
  cursor: default;
  opacity: 0.7;
  font-size: 12px;
}

.post-engagement-item {
  cursor: pointer;
  transition: color 0.2s;
}

.post-engagement-item:hover {
  color: var(--text-secondary);
}

.post-actions {
  display: flex;
  gap: 0;
  padding: 8px 0;
  overflow: visible;
}

.post-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.post-action-btn:hover {
  background: var(--bg-tertiary);
  color: var(--accent);
}

.post-action-btn:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 20px;
  width: 1px;
  background: var(--border);
}

.post-action-btn svg {
  width: 20px;
  height: 20px;
}

.post-action-btn.liked {
  color: var(--danger);
}

.post-action-btn.liked svg {
  fill: currentColor;
}

/* Tip button special hover */
.post-tip-btn:hover {
  color: #06d6a0 !important;
}

/* Reaction Button Wrapper and Picker */
.reaction-btn-wrapper {
  position: relative;
  display: flex;
  flex: 1;
}

/* Like button inside wrapper needs full width, and hide its divider (wrapper has it) */
.reaction-btn-wrapper .post-action-btn {
  flex: 1;
  width: 100%;
}

.reaction-btn-wrapper .post-action-btn::after {
  display: none;
}

/* Divider after reaction wrapper (since nested button's ::after won't align) */
.reaction-btn-wrapper::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 20px;
  width: 1px;
  background: var(--border);
}

/* Post reaction picker - scoped to prevent messenger.css override */
.reaction-btn-wrapper .reaction-picker {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
  z-index: 1000;
  margin-bottom: 8px;
}

.reaction-btn-wrapper .reaction-picker.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.reaction-btn-wrapper .reaction-option {
  background: none;
  border: none;
  padding: 6px;
  font-size: 24px;
  cursor: pointer;
  transition: transform 0.15s;
  border-radius: 50%;
  line-height: 1;
}

.reaction-btn-wrapper .reaction-option:hover {
  transform: scale(1.3);
  background: var(--bg-tertiary);
}

.reaction-btn-wrapper .reaction-option:active {
  transform: scale(1.1);
}

/* Search Styles */
.search-suggestions-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-top: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  max-height: 300px;
  overflow-y: auto;
  z-index: 100;
}

.search-suggestion {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.2s;
}

.search-suggestion:hover {
  background: var(--bg-tertiary);
}

.search-suggestion svg {
  color: var(--text-muted);
}

/* Search Results */
.empty-search-results {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}

.empty-search-results h3 {
  color: var(--text-primary);
  margin-bottom: 8px;
}

.search-section {
  margin-bottom: 24px;
}

.search-section h4 {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
  padding-left: 4px;
}

.search-users-grid,
.search-groups-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}

.search-user-card,
.search-group-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.search-user-card:hover,
.search-group-card:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent);
}

.search-user-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.search-group-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: white;
}

.search-user-info,
.search-group-info {
  flex: 1;
  min-width: 0;
}

.search-user-name,
.search-group-name {
  font-weight: 600;
  color: var(--text-primary);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-user-username,
.search-group-members {
  font-size: 13px;
  color: var(--text-muted);
}

/* Friend Cards */
.friend-card,
.friend-suggestion-card,
.friend-request-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.friend-card:hover,
.friend-suggestion-card:hover {
  background: var(--bg-tertiary);
}

.friend-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

.friend-name {
  font-weight: 600;
  color: var(--text-primary);
}

.friend-username {
  font-size: 13px;
  color: var(--text-muted);
}

.friend-username[onclick]:hover,
.friend-name[onclick]:hover {
  color: var(--accent, #0891b2);
  text-decoration: underline;
}

.friend-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

/* Group Cards */
.groups-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.group-card {
  display: flex;
  gap: 16px;
  padding: 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.group-card:hover {
  background: var(--bg-tertiary);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.group-avatar-placeholder {
  width: 72px;
  height: 72px;
  background: var(--gradient);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}

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

.group-name {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 16px;
  margin-bottom: 4px;
}

.group-meta {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.group-desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Event Cards */
.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.event-card {
  display: flex;
  gap: 16px;
  padding: 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.event-card:hover {
  background: var(--bg-tertiary);
  transform: translateY(-2px);
}

.event-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: var(--accent);
  border-radius: 12px;
  flex-shrink: 0;
}

.event-month {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  text-transform: uppercase;
}

.event-day {
  font-size: 24px;
  font-weight: 700;
  color: white;
}

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

.event-name {
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.event-time,
.event-location {
  font-size: 13px;
  color: var(--text-muted);
  display: block;
}

/* Suggested Users (Explore Sidebar) */
.suggested-user-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  cursor: pointer;
  border-radius: 10px;
  transition: background 0.2s;
}

.suggested-user-item:hover {
  background: var(--bg-tertiary);
}

.suggested-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

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

.suggested-name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 14px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

/* Reels Grid */
.reels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.reel-card {
  position: relative;
  aspect-ratio: 9/16;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  background: #000;
}

.reel-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reel-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  background: linear-gradient(transparent, rgba(0,0,0,0.8));
}

.reel-views {
  color: white;
  font-size: 14px;
  font-weight: 600;
}

.reel-card-caption {
  position: absolute;
  bottom: 36px;
  left: 0;
  right: 0;
  padding: 0 12px;
  color: rgba(255,255,255,0.85);
  font-size: 12px;
  line-height: 1.3;
  pointer-events: none;
}

/* Listing Cards (Marketplace) */
.listings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.listing-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s;
}

.listing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.listing-image {
  aspect-ratio: 1;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.listing-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.listing-image .no-image {
  font-size: 48px;
  opacity: 0.3;
}

.listing-info {
  padding: 12px;
}

.listing-price {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.listing-title {
  font-size: 14px;
  color: var(--text-primary);
  margin: 4px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

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

/* Fundraiser Cards */
.fundraisers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.fundraiser-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.fundraiser-card:hover {
  background: var(--bg-tertiary);
}

.fundraiser-progress {
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 12px;
}

.fundraiser-progress .progress-bar {
  height: 100%;
  background: var(--success);
  border-radius: 4px;
  transition: width 0.3s;
}

.fundraiser-card h4 {
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.fundraiser-stats {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

.fundraiser-stats .raised {
  color: var(--success);
  font-weight: 600;
}

.fundraiser-stats .goal {
  color: var(--text-muted);
}

/* Loading States */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--text-muted);
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}

.empty-state .empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-state p {
  margin-bottom: 8px;
}

.empty-state .empty-subtitle {
  font-size: 14px;
  margin-bottom: 16px;
}

/* Conversation List */
.conversation-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  cursor: pointer;
  transition: background 0.2s;
}

.conversation-item:hover {
  background: var(--bg-tertiary);
}

.conversation-item.unread {
  background: rgba(8, 145, 178, 0.05);
}

.conv-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

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

.conv-name {
  font-weight: 600;
  color: var(--text-primary);
  display: block;
}

.conv-last-message {
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

/* Notification Item */
.notification-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.2s;
}

.notification-item:hover {
  background: var(--bg-tertiary);
}

.notification-item.unread {
  background: rgba(8, 145, 178, 0.05);
}

.notif-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.notif-content {
  flex: 1;
}

.notif-content p {
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 4px;
}

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

/* Games Grid */
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

.game-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}

.game-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  border-color: var(--accent);
}

.game-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.game-info h4 {
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.game-info p {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

/* Memory Card */
.memory-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 20px;
}

.memory-header {
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.1), rgba(6, 214, 160, 0.1));
  border-bottom: 1px solid var(--border);
}

.memory-date {
  font-weight: 600;
  color: var(--accent);
}

.memory-card .post-card {
  margin: 0;
  border: none;
  border-radius: 0;
}

/* ============================================
   SETTINGS ENHANCEMENTS
   ============================================ */

/* Connected Accounts */
.connected-accounts-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.connected-account-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.account-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

/* Data Controls */
.data-controls-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.data-control-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
}

.control-info {
  flex: 1;
}

/* Blocked Users List */
.blocked-users-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 400px;
  overflow-y: auto;
}

/* Security Settings - Sessions List */
.sessions-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.session-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--bg-secondary);
  border-radius: 12px;
  border: 1px solid var(--border);
}

.session-item.current {
  border-color: var(--accent);
  background: var(--bg-tertiary);
}

.session-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  border-radius: 12px;
  color: var(--text-secondary);
}

.session-info {
  flex: 1;
}

.badge {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge-success {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

/* Login History */
.login-history {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.login-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border-radius: 10px;
}

.login-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.login-icon.success {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.login-icon.warning {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.login-icon.danger {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.login-info {
  flex: 1;
}

/* Recovery Options */
.recovery-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: var(--bg-secondary);
  border-radius: 12px;
  border: 1px solid var(--border);
}

.recovery-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.recovery-info .setting-label {
  font-weight: 600;
  color: var(--text-primary);
}

.recovery-info .setting-description {
  font-size: 13px;
  color: var(--text-secondary);
}

/* Toast Notifications */
.settings-toast {
  position: fixed;
  bottom: -100px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  padding: 14px 24px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 10000;
  transition: bottom 0.3s ease;
  font-weight: 500;
  max-width: 90%;
  text-align: center;
}

.settings-toast.show {
  bottom: 32px;
}

.settings-toast-success {
  background: linear-gradient(135deg, #0891b2, #06d6a0);
  color: white;
}

.settings-toast-error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.settings-toast-info {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
}

/* Enhanced Settings Navigation with Gradient */
.settings-nav-item {
  position: relative;
  overflow: hidden;
}

.settings-nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(135deg, #0891b2, #06d6a0);
}

/* Enhanced Form Select */
.form-select {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 15px;
  cursor: pointer;
  transition: all 0.2s;
}

.form-select:hover {
  border-color: var(--accent);
}

.form-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1);
}

/* Compact Mode */
.compact-mode .post-card {
  padding: 12px;
}

.compact-mode .settings-section {
  padding: 16px 0;
}

.compact-mode .setting-toggle {
  padding: 10px 0;
}

/* Reduce Motion */
.reduce-motion * {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

/* Enhanced Color Options with Sphere Brand */
.color-options {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.color-option {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
  background: var(--color);
}

.color-option:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.color-option input {
  display: none;
}

.color-option input:checked + * {
  border-color: var(--color);
}

.color-option.selected {
  border-color: white;
  box-shadow: 0 0 0 2px var(--color);
}

/* Gradient Text (Sphere Brand) */
.gradient-text {
  background: linear-gradient(135deg, #0891b2, #06d6a0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Settings Primary Button with Gradient */
.settings-form .btn-primary {
  background: linear-gradient(135deg, #0891b2, #06d6a0);
  border: none;
  color: white;
  font-weight: 600;
  transition: all 0.3s;
}

.settings-form .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(8, 145, 178, 0.3);
}

.settings-form .btn-primary:active {
  transform: translateY(0);
}

/* Enhanced Toggle with Gradient - all toggles */
.toggle input:checked + .toggle-slider,
.toggle-switch input:checked + .toggle-slider,
.toggle-switch-inline input:checked + .toggle-slider,
.settings-toggle input:checked ~ .toggle-slider {
  background: linear-gradient(135deg, #0891b2, #06d6a0);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .settings-container {
    flex-direction: column;
  }

  .settings-nav {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    white-space: nowrap;
  }

  .settings-nav-item {
    display: inline-flex;
    min-width: auto;
  }

  .connected-account-item {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .data-control-item {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
}

/* ============================================
   PLATFORM-WIDE ACTION BUTTON STYLING
   Consistent styling for Edit, Delete, Save buttons
   ============================================ */

/* Settings List (Admin Panel) */
.settings-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.settings-list .setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.settings-list .setting-item:last-child {
  border-bottom: none;
}

.settings-list .setting-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settings-list .setting-key {
  font-weight: 500;
  color: var(--text-primary);
  font-size: 0.9rem;
}

.settings-list .setting-value {
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
}

/* Action Button - Primary Style (Teal gradient, used for Edit buttons) */
.btn-action {
  background: linear-gradient(135deg, #0891b2, #06d6a0);
  color: white;
  border: none;
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.btn-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(8, 145, 178, 0.3);
}

/* Override btn-ghost in action contexts to make it look like a proper button */
.settings-list .btn-ghost,
.announcement-footer .btn-ghost,
.tier-actions .btn-ghost,
.tier-actions .btn-text,
.actions-cell .btn-ghost,
.moderation-actions .btn-ghost,
.ticket-actions .btn-ghost {
  background: linear-gradient(135deg, #0891b2, #06d6a0);
  color: white !important;
  border: none;
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.settings-list .btn-ghost:hover,
.announcement-footer .btn-ghost:hover,
.tier-actions .btn-ghost:hover,
.tier-actions .btn-text:hover,
.actions-cell .btn-ghost:hover,
.moderation-actions .btn-ghost:hover,
.ticket-actions .btn-ghost:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(8, 145, 178, 0.3);
  background: linear-gradient(135deg, #06d6a0, #0891b2);
  text-decoration: none;
}

/* Delete buttons - danger variant */
.announcement-footer .btn-ghost[data-delete-announcement],
.announcement-footer .btn-ghost[onclick*="delete"],
.btn-danger,
button[onclick*="delete"]:not(.post-menu-item) {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color: white !important;
}

.announcement-footer .btn-ghost[data-delete-announcement]:hover,
.announcement-footer .btn-ghost[onclick*="delete"]:hover,
.btn-danger:hover,
button[onclick*="delete"]:not(.post-menu-item):hover {
  background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* Tier Actions in Creator Studio */
.tier-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.tier-actions .btn-text {
  background: linear-gradient(135deg, #0891b2, #06d6a0);
  color: white !important;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Settings actions row */
.settings-actions {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* Icon buttons in tables (like user actions) */
.actions-cell .btn-ghost.btn-sm {
  padding: 8px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  color: var(--text-muted) !important;
  min-width: 36px;
  min-height: 36px;
}

.actions-cell .btn-ghost.btn-sm:hover {
  background: var(--bg-tertiary, rgba(255,255,255,0.06)) !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
  transform: none !important;
}

.actions-cell .btn-ghost.btn-sm svg {
  fill: currentColor;
}

/* Report/Ticket resolve buttons */
.moderation-actions,
.ticket-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

/* Secondary action button (outline style) */
.btn-action-secondary {
  background: transparent;
  color: #0891b2;
  border: 2px solid #0891b2;
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-action-secondary:hover {
  background: rgba(8, 145, 178, 0.1);
  border-color: #06d6a0;
  color: #06d6a0;
}

/* Report Actions (Moderation panel) */
.report-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.report-actions .btn-ghost {
  background: linear-gradient(135deg, #0891b2, #06d6a0);
  color: white !important;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
}

.report-actions .btn-ghost:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(8, 145, 178, 0.3);
  background: linear-gradient(135deg, #06d6a0, #0891b2);
}

/* Payout actions */
.payout-actions .btn-text,
#payout-method .btn-text {
  background: linear-gradient(135deg, #0891b2, #06d6a0);
  color: white !important;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none !important;
}

.payout-actions .btn-text:hover,
#payout-method .btn-text:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(8, 145, 178, 0.3);
  text-decoration: none !important;
}

/* Ensure btn-text always looks like a button in action contexts */
.tier-card .btn-text,
.card-actions .btn-text,
.item-actions .btn-text,
.creator-actions .btn-text {
  background: linear-gradient(135deg, #0891b2, #06d6a0);
  color: white !important;
  border: none;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.6rem;
  font-weight: 600;
  text-decoration: none !important;
}

.tier-card .btn-text:hover,
.card-actions .btn-text:hover,
.item-actions .btn-text:hover,
.creator-actions .btn-text:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(8, 145, 178, 0.3);
  text-decoration: none !important;
}

/* Profile edit button enhancement */
#edit-intro-btn {
  background: linear-gradient(135deg, #0891b2, #06d6a0) !important;
  color: white !important;
  border: none !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease;
}

#edit-intro-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(8, 145, 178, 0.3);
}

/* Friend actions buttons */
.friend-actions .btn-ghost,
.suggestion-actions .btn-ghost {
  background: linear-gradient(135deg, #0891b2, #06d6a0);
  color: white !important;
  border: none;
}

.friend-actions .btn-ghost:hover,
.suggestion-actions .btn-ghost:hover {
  background: linear-gradient(135deg, #06d6a0, #0891b2);
}

/* ============================================
   RESPONSIVE POST FEED STYLING
   ============================================ */

/* Mobile-optimized post feed */
@media (max-width: 768px) {
  .post-card {
    border-radius: 8px;
    margin-bottom: 12px;
    border: 1px solid var(--border);
  }

  .post-header {
    padding: 12px 12px;
  }

  .post-avatar {
    width: 36px;
    height: 36px;
  }

  .post-author-name {
    font-size: 14px;
  }

  .post-timestamp {
    font-size: 12px;
  }

  .post-content {
    padding: 0 12px 12px;
    font-size: 14px;
  }

  .see-more-btn {
    padding-left: 12px;
    font-size: 13px;
  }

  .post-image {
    max-height: 300px;
  }

  .post-engagement {
    padding: 8px 12px;
    font-size: 12px;
  }

  .post-actions {
    padding: 8px 0;
  }

  .post-action-btn {
    font-size: 12px;
    padding: 8px;
    gap: 6px;
  }

  .post-action-btn svg {
    width: 18px;
    height: 18px;
  }

  .post-menu-btn {
    width: 32px;
    height: 32px;
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  .post-header {
    padding: 10px 8px;
    gap: 10px;
  }

  .post-avatar {
    width: 32px;
    height: 32px;
  }

  .post-author-name {
    font-size: 13px;
  }

  .post-timestamp {
    font-size: 11px;
  }

  .post-content {
    padding: 0 8px 8px;
    font-size: 13px;
    line-height: 1.4;
  }

  .see-more-btn {
    padding-left: 8px;
    font-size: 12px;
  }

  .post-image {
    max-height: 250px;
  }

  .post-engagement {
    padding: 6px 8px;
    font-size: 11px;
    flex-direction: column;
    gap: 4px;
  }

  .post-engagement-item {
    font-size: 11px;
  }

  .post-actions {
    padding: 6px 0;
  }

  .post-action-btn {
    font-size: 11px;
    padding: 6px;
    gap: 4px;
  }

  .post-action-btn span {
    display: none;
  }

  .post-action-btn svg {
    width: 16px;
    height: 16px;
  }

  .post-menu-btn {
    width: 28px;
    height: 28px;
  }

  .post-menu-btn svg {
    width: 16px;
    height: 16px;
  }
}

/* Teal-to-green brand color enhancements */
.post-action-btn:hover {
  color: #0891b2;
}

.post-action-btn.liked {
  color: #06d6a0;
}

.post-action-btn.liked svg {
  fill: #06d6a0;
}

/* ============================================
   POST MENU DROPDOWN
   ============================================ */
.post-menu-dropdown {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  min-width: 200px;
  z-index: 1000;
  animation: menuSlideIn 0.15s ease;
}

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

.post-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 16px;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 14px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}

.post-menu-item:hover {
  background: var(--bg-tertiary);
}

.post-menu-item:first-child {
  border-radius: 8px 8px 0 0;
}

.post-menu-item:last-child {
  border-radius: 0 0 8px 8px;
}

.post-menu-item svg {
  color: var(--text-secondary);
}

.post-menu-item-danger {
  color: #ef4444;
}

.post-menu-item-danger svg {
  color: #ef4444;
}

.post-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* ============================================
   COMMENT SECTION
   ============================================ */
.comment-section {
  border-top: 1px solid var(--border);
  padding: 12px 16px;
  background: var(--bg-tertiary);
}

.comment-section.hidden {
  display: none;
}

.comment-list {
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 12px;
}

.comment-item {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.comment-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.comment-content {
  flex: 1;
  min-width: 0;
}

.comment-bubble {
  background: var(--bg-secondary);
  border-radius: 18px;
  padding: 8px 12px;
  display: inline-block;
  max-width: 100%;
}

.comment-author {
  font-weight: 600;
  font-size: 13px;
  display: block;
  color: var(--text-primary);
}

.comment-text {
  font-size: 14px;
  color: var(--text-primary);
  word-wrap: break-word;
}

.comment-meta {
  display: flex;
  gap: 12px;
  margin-top: 4px;
  padding-left: 12px;
}

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

.comment-action {
  background: none;
  border: none;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  font-weight: 600;
}

.comment-action:hover {
  color: var(--accent);
  text-decoration: underline;
}

.no-comments,
.comments-loading {
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  padding: 16px 0;
}

.comment-input-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.comment-input {
  flex: 1;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 14px;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.2s;
}

.comment-input:focus {
  border-color: var(--accent);
}

.comment-input::placeholder {
  color: var(--text-muted);
}

.comment-submit-btn {
  background: var(--accent);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: white;
  transition: transform 0.15s, background 0.15s;
}

.comment-submit-btn:hover {
  transform: scale(1.1);
  background: var(--accent-hover);
}

/* ============================================
   SHARE MODAL
   ============================================ */
.share-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
}

.share-modal-overlay.active {
  opacity: 1;
}

.share-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.share-modal-content {
  position: relative;
  background: var(--bg-secondary);
  border-radius: 12px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  transform: scale(0.95);
  transition: transform 0.2s;
}

.share-modal-overlay.active .share-modal-content {
  transform: scale(1);
}

.share-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--border);
}

.share-modal-header h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.share-modal-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.share-modal-close:hover {
  background: var(--bg-tertiary);
}

.share-options {
  padding: 8px;
}

.share-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 15px;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s;
}

.share-option:hover {
  background: var(--bg-tertiary);
}

.share-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.share-icon-feed {
  background: linear-gradient(135deg, #0891b2, #06d6a0);
  color: white;
}

.share-icon-messenger {
  background: linear-gradient(135deg, #0084ff, #00c6ff);
  color: white;
}

.share-icon-copy {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.share-external {
  padding: 16px;
  border-top: 1px solid var(--border);
}

.share-external-label {
  font-size: 13px;
  color: var(--text-muted);
  display: block;
  margin-bottom: 12px;
}

.share-external-options {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.share-external-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, background 0.15s;
}

.share-external-btn:hover {
  transform: scale(1.1);
  background: var(--bg-primary);
}

/* ===================================
   APPEARANCE CUSTOMIZATION FEATURES
   Background patterns and density modes
   =================================== */

/* Background Patterns */
.bg-pattern-dots {
  background-image: radial-gradient(circle, var(--border) 1px, transparent 1px);
  background-size: 20px 20px;
}

.bg-pattern-grid {
  background-image: 
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 20px 20px;
}

.bg-pattern-lines {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    var(--border) 10px,
    var(--border) 11px
  );
}

.bg-pattern-waves {
  background-image: 
    radial-gradient(circle at 100% 50%, transparent 20%, var(--border) 21%, var(--border) 34%, transparent 35%, transparent),
    radial-gradient(circle at 0% 50%, transparent 20%, var(--border) 21%, var(--border) 34%, transparent 35%, transparent);
  background-size: 40px 80px;
  background-position: 0 0, 20px 0;
}

.bg-pattern-geometric {
  background-image: 
    linear-gradient(30deg, var(--border) 12%, transparent 12.5%, transparent 87%, var(--border) 87.5%, var(--border)),
    linear-gradient(150deg, var(--border) 12%, transparent 12.5%, transparent 87%, var(--border) 87.5%, var(--border)),
    linear-gradient(30deg, var(--border) 12%, transparent 12.5%, transparent 87%, var(--border) 87.5%, var(--border)),
    linear-gradient(150deg, var(--border) 12%, transparent 12.5%, transparent 87%, var(--border) 87.5%, var(--border));
  background-size: 40px 70px;
  background-position: 0 0, 0 0, 20px 35px, 20px 35px;
}

/* Apply patterns only to main feed area */
#feed-page,
#profile-page,
#notifications-page,
#messages-page,
#explore-page,
#search-page,
#games-page {
  background-attachment: fixed;
}

/* Density Modes - Compact */
.density-compact .post {
  padding: 12px !important;
  margin-bottom: 8px !important;
}

.density-compact .post-header {
  margin-bottom: 8px !important;
}

.density-compact .post-content {
  font-size: 14px !important;
  line-height: 1.4 !important;
}

.density-compact .post-actions {
  padding-top: 8px !important;
  gap: 12px !important;
}

.density-compact .sidebar {
  padding: 12px !important;
}

.density-compact .nav-item {
  padding: 8px 12px !important;
  font-size: 14px !important;
}

.density-compact .card {
  padding: 12px !important;
  margin-bottom: 8px !important;
}

.density-compact .settings-section {
  padding: 12px !important;
}

/* Density Modes - Spacious */
.density-spacious .post {
  padding: 24px !important;
  margin-bottom: 20px !important;
}

.density-spacious .post-header {
  margin-bottom: 16px !important;
}

.density-spacious .post-content {
  font-size: 16px !important;
  line-height: 1.7 !important;
}

.density-spacious .post-actions {
  padding-top: 16px !important;
  gap: 20px !important;
}

.density-spacious .sidebar {
  padding: 24px !important;
}

.density-spacious .nav-item {
  padding: 14px 20px !important;
  font-size: 16px !important;
}

.density-spacious .card {
  padding: 24px !important;
  margin-bottom: 20px !important;
}

.density-spacious .settings-section {
  padding: 24px !important;
}

/* Font Size Adjustments */
[data-font-size="small"] {
  font-size: 14px;
}

[data-font-size="small"] .post-content {
  font-size: 14px;
}

[data-font-size="small"] .nav-item {
  font-size: 13px;
}

[data-font-size="large"] {
  font-size: 16px;
}

[data-font-size="large"] .post-content {
  font-size: 16px;
}

[data-font-size="large"] .nav-item {
  font-size: 16px;
}

/* Smooth transitions for appearance changes */
body,
.post,
.card,
.sidebar,
.nav-item {
  transition: padding 0.2s ease, margin 0.2s ease, font-size 0.2s ease;
}

/* ============================================
   MODERN ADMIN SETTINGS UI
   ============================================ */

.modern-settings-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 900px;
}

.settings-category {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.settings-category-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
}

.settings-category-icon {
  font-size: 24px;
}

.settings-category-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

.settings-category-content {
  padding: 8px 0;
}

.admin-setting-row {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  transition: background-color 0.2s ease;
}

.admin-setting-row:last-child {
  border-bottom: none;
}

.admin-setting-row:hover {
  background: var(--bg-secondary);
}

/* Toggle Settings */
.admin-setting-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.admin-setting-info strong {
  display: block;
  font-size: 15px;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.admin-setting-info small {
  display: block;
  font-size: 13px;
  color: var(--text-secondary);
}

/* Toggle switch styling is defined in the Design System section above */

/* Field Settings */
.admin-setting-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-setting-field label {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
}

.admin-setting-input,
.admin-setting-select {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 14px;
  transition: border-color 0.2s ease;
  max-width: 400px;
}

.admin-setting-input:focus,
.admin-setting-select:focus {
  outline: none;
  border-color: var(--accent);
}

.admin-setting-number-input {
  max-width: 200px;
}

/* Advanced Settings */
.settings-advanced {
  margin-top: 24px;
  padding: 20px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.settings-advanced details summary {
  cursor: pointer;
  padding: 12px;
  border-radius: 8px;
  user-select: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settings-advanced details summary:hover {
  background: var(--bg-secondary);
}

.settings-advanced details summary strong {
  font-size: 15px;
  color: var(--text-primary);
}

.settings-advanced details summary small {
  font-size: 13px;
  color: var(--text-secondary);
}

.settings-raw-list {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.raw-setting-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-secondary);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.raw-setting-key {
  font-family: 'Courier New', monospace;
  font-size: 13px;
  color: var(--accent);
  font-weight: 600;
  min-width: 200px;
}

.raw-setting-value {
  font-family: 'Courier New', monospace;
  font-size: 13px;
  color: var(--text-secondary);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.raw-setting-item .btn-ghost {
  margin-left: auto;
}

/* Settings Drawer Enhancements */
.settings-drawer-input[type="text"],
.settings-drawer-input[type="number"],
.settings-drawer-input[type="email"],
.settings-drawer-input[type="url"],
.settings-drawer-input[type="password"],
.settings-drawer-select,
.settings-drawer-textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.2s ease;
}

.settings-drawer-input:focus,
.settings-drawer-select:focus,
.settings-drawer-textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.settings-drawer-hint {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* Responsive */
@media (max-width: 768px) {
  .modern-settings-container {
    gap: 16px;
  }

  .admin-setting-toggle {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .toggle-switch {
    align-self: flex-start;
  }

  .admin-setting-input,
  .admin-setting-select {
    max-width: 100%;
  }
}

/* Mobile Sidebar Menu Styles */
.mobile-sidebar-btn {
  display: none;
  position: fixed;
  top: calc(12px + env(safe-area-inset-top, 0));
  left: 12px;
  background: transparent;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: background 0.2s ease;
  z-index: 1001;
  /* Ensure touch target is large enough (44x44 min for accessibility) */
  min-width: 44px;
  min-height: 44px;
}

.mobile-sidebar-btn:hover {
  background: var(--bg-tertiary);
}

.mobile-sidebar-btn svg {
  width: 24px;
  height: 24px;
}

.mobile-conversations-toggle {
  position: fixed;
  top: 12px;
  left: 12px;
  background: transparent;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: background 0.2s ease;
  z-index: 1000;
}

.mobile-conversations-toggle:hover {
  background: var(--bg-tertiary);
}

.mobile-conversations-toggle svg {
  width: 24px;
  height: 24px;
}

.mobile-sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 998;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.mobile-sidebar-overlay.active {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

.mobile-sidebar-dropdown {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  height: 100vh;
  height: 100dvh;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border);
  z-index: 999;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  padding-top: env(safe-area-inset-top, 0);
}

.mobile-sidebar-dropdown.active {
  transform: translateX(0);
}

.mobile-sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--border);
}

.mobile-sidebar-header h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--text-primary);
}

.mobile-sidebar-close {
  background: transparent;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-sidebar-close:hover {
  color: var(--accent);
}

.mobile-sidebar-close svg {
  width: 20px;
  height: 20px;
}

.mobile-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 0;
}

.mobile-sidebar-nav a,
.mobile-sidebar-nav button {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: var(--text-primary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.95rem;
  text-decoration: none;
  width: 100%;
  text-align: left;
}

.mobile-sidebar-nav a:hover,
.mobile-sidebar-nav button:hover {
  background: var(--bg-tertiary);
}

.mobile-sidebar-nav a.active {
  color: var(--accent);
  font-weight: 600;
}

.mobile-sidebar-nav svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Mobile Sidebar for Conversations on Messages View */
@media (max-width: 768px) {
  .mobile-sidebar-btn {
    display: block;
  }

  /* Only show overlay when active, dropdown always ready but off-screen */
  .mobile-sidebar-overlay.active {
    display: flex;
  }

  .mobile-sidebar-dropdown {
    display: flex;
  }

  /* Messages layout responsive for mobile */
  .messages-layout {
    position: relative;
    flex-direction: column;
  }

  .mobile-conversations-toggle {
    display: block !important;
  }

  .conversations-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px !important;
    height: 100vh;
    border-right: 1px solid var(--border);
    background: var(--bg-primary);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 997;
    overflow-y: auto;
  }

  .conversations-sidebar.mobile-open {
    transform: translateX(0);
  }

  .conversations-sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 996;
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  .conversations-sidebar-overlay.active {
    display: block;
    opacity: 1;
  }

  .messages-panel {
    flex: 1;
  }

  .online-friends-sidebar {
    display: none !important;
  }
}

/* ============================================
   REDESIGNED CREATE STORY MODAL STYLES
   ============================================ */

.modal-content.create-story-modal-redesigned {
  max-width: 1000px;
  width: 95vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
  border-radius: 20px;
  overflow: hidden;
  padding: 0;
}

.create-story-modal-redesigned .modal-header {
  padding: 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.create-story-modal-redesigned .modal-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
}

.create-story-modal-redesigned .modal-close {
  background: none;
  border: none;
  font-size: 28px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: all 0.2s;
}

.create-story-modal-redesigned .modal-close:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

/* Main content area - two-column layout */
.story-modal-main {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 24px;
  padding: 24px;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.story-editor-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Type tabs */
.story-type-tabs {
  display: flex;
  gap: 12px;
  border-bottom: 2px solid var(--border);
  padding-bottom: 12px;
}

.story-type-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
  margin-bottom: -14px;
}

.story-type-tab svg {
  width: 20px;
  height: 20px;
}

.story-type-tab:hover {
  color: var(--text-primary);
}

.story-type-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Editor content areas */
.story-editor-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 400px;
}

.story-editor-content.hidden {
  display: none;
}

/* Upload zone */
.upload-zone-redesigned {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
  border: 3px dashed var(--border);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s;
  background: rgba(8, 145, 178, 0.02);
}

.upload-zone-redesigned:hover {
  border-color: var(--accent);
  background: rgba(8, 145, 178, 0.08);
}

.upload-zone-redesigned svg {
  color: var(--accent);
  margin-bottom: 16px;
}

.upload-zone-redesigned p {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.upload-zone-redesigned span {
  font-size: 14px;
  color: var(--text-muted);
}

/* Photo preview */
.story-photo-preview {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.story-photo-preview.hidden {
  display: none;
}

.story-photo-preview img,
.story-photo-preview video {
  width: 100%;
  max-height: 400px;
  object-fit: contain;
}

/* Photo tools */
.story-tools {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 16px;
  background: var(--bg-secondary);
  border-radius: 12px;
  border: 1px solid var(--border);
}

.story-tools.hidden {
  display: none !important;
}

.tool-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tool-group label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Filter options */
.filter-options {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.filter-btn {
  position: relative;
  border: 2px solid var(--border);
  border-radius: 8px;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 1;
  transition: all 0.2s;
}

.filter-btn:hover {
  border-color: var(--accent);
}

.filter-btn.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
}

.filter-preview {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  background-size: cover;
}

/* Duration slider */
.duration-slider {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--bg-tertiary);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.duration-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  transition: all 0.2s;
}

.duration-slider::-webkit-slider-thumb:hover {
  background: var(--accent-hover);
  box-shadow: 0 0 12px var(--accent-glow);
}

.duration-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}

.duration-slider::-moz-range-thumb:hover {
  background: var(--accent-hover);
  box-shadow: 0 0 12px var(--accent-glow);
}

.duration-display {
  text-align: center;
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 600;
}

/* Text editor styles */
.text-editor-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.text-style-toolbar {
  display: flex;
  gap: 8px;
  padding: 12px;
  background: var(--bg-secondary);
  border-radius: 12px;
  border: 1px solid var(--border);
  flex-wrap: wrap;
}

.text-style-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  background: var(--bg-primary);
  border-radius: 8px;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s;
}

.text-style-btn:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent);
  color: var(--accent);
}

.text-color-picker {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}

.text-font-select,
.text-size-slider {
  padding: 8px 12px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  cursor: pointer;
  font-size: 14px;
}

.text-font-select:focus,
.text-size-slider:focus {
  outline: none;
  border-color: var(--accent);
}

/* Text editor */
.text-story-editor-redesigned {
  min-height: 300px;
  padding: 40px 30px;
  border-radius: 16px;
  border: 2px solid var(--border);
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 28px;
  font-weight: 600;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  word-wrap: break-word;
  white-space: pre-wrap;
}

.text-story-editor-redesigned:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.text-story-editor-redesigned .placeholder {
  opacity: 0.6;
}

/* Text background options */
.text-background-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.text-background-options label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.bg-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.bg-option {
  aspect-ratio: 1;
  border-radius: 12px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
}

.bg-option:hover {
  border-color: var(--accent);
  transform: scale(1.05);
}

.bg-option.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* Text duration */
.text-duration-option {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.text-duration-option label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
}

/* Preview section */
.story-preview-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.preview-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  padding: 0 4px;
}

/* Phone frame simulation */
.phone-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9/16;
  background: var(--bg-secondary);
  border-radius: 40px;
  border: 8px solid var(--bg-tertiary);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone-frame::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 25px;
  background: var(--bg-tertiary);
  border-radius: 0 0 20px 20px;
  z-index: 1;
}

.story-preview-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-size: 14px;
  padding: 20px;
  text-align: center;
  overflow: hidden;
}

.preview-placeholder {
  opacity: 0.6;
}

/* Options panel */
.story-options-panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 20px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  border-radius: 0 0 20px 20px;
}

.option-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.option-item label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
}

/* Sticker palette */
.sticker-palette {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.sticker-btn {
  aspect-ratio: 1;
  border: 2px solid var(--border);
  background: var(--bg-primary);
  border-radius: 12px;
  font-size: 24px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sticker-btn:hover {
  border-color: var(--accent);
  background: rgba(8, 145, 178, 0.1);
  transform: scale(1.1);
}

/* Music upload */
.music-upload {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.music-upload input.hidden {
  display: none;
}

.music-filename {
  font-size: 13px;
  color: var(--text-secondary);
  padding: 8px 12px;
  background: var(--bg-tertiary);
  border-radius: 8px;
  word-break: break-word;
}

.music-filename.hidden {
  display: none;
}

/* Progress bar */
.story-progress-container {
  padding: 20px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.story-progress-container.hidden {
  display: none !important;
}

.story-progress-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.story-progress-bar {
  width: 100%;
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  overflow: hidden;
}

.story-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #10b981);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.story-progress-percent {
  font-size: 13px;
  color: var(--text-muted);
  text-align: right;
}

/* Modal footer */
.create-story-modal-redesigned .modal-footer {
  padding: 20px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  background: var(--bg-secondary);
}

.create-story-modal-redesigned .btn-secondary {
  padding: 12px 24px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s;
}

.create-story-modal-redesigned .btn-secondary:hover {
  background: var(--border);
  border-color: var(--text-muted);
}

.create-story-modal-redesigned .btn-primary {
  padding: 12px 32px;
  background: linear-gradient(135deg, var(--accent), #10b981);
  border: none;
  border-radius: 8px;
  color: white;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  transition: all 0.2s;
}

.create-story-modal-redesigned .btn-primary:hover:not(:disabled) {
  box-shadow: 0 0 20px var(--accent-glow);
  transform: translateY(-2px);
}

.create-story-modal-redesigned .btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Responsive design */
@media (max-width: 1024px) {
  .story-modal-main {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .story-preview-section {
    order: -1;
  }

  .phone-frame {
    max-height: 300px;
  }

  .bg-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .sticker-palette {
    grid-template-columns: repeat(8, 1fr);
  }
}

@media (max-width: 768px) {
  .modal-content.create-story-modal-redesigned {
    max-height: 100vh;
    border-radius: 0;
    width: 100%;
  }

  .story-modal-main {
    padding: 16px;
    gap: 12px;
  }

  .upload-zone-redesigned {
    padding: 40px 20px;
  }

  .text-style-toolbar {
    gap: 4px;
  }

  .text-story-editor-redesigned {
    font-size: 20px;
    padding: 30px 20px;
    min-height: 250px;
  }

  .bg-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .story-options-panel {
    padding: 16px;
  }
}


}

/* ============================================
   LIVE STREAM FEED INTEGRATION
   ============================================ */

/* Live Stream Card */
.live-stream-card {
  background: var(--bg-primary);
  border: 2px solid var(--accent);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.2s;
}

.live-stream-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.live-stream-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.live-stream-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.live-dot {
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
  display: inline-block;
}

.live-dot.pulse {
  animation: livePulse 1.5s ease-in-out infinite;
}

@keyframes livePulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.2);
  }
}

.live-viewer-count {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
}

.live-stream-content {
  margin-bottom: 12px;
}

.live-stream-user {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.live-stream-avatar-wrapper {
  position: relative;
  width: 48px;
  height: 48px;
}

.live-stream-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}

.live-ring {
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border: 3px solid #ef4444;
  border-radius: 50%;
  animation: liveRingPulse 2s ease-in-out infinite;
}

@keyframes liveRingPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.7;
  }
}

.live-stream-info {
  flex: 1;
}

.live-stream-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.live-stream-username {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.live-stream-duration {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

.live-stream-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.live-stream-description {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 12px;
}

.live-stream-footer {
  display: flex;
  justify-content: center;
}

.live-stream-watch-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  background: linear-gradient(135deg, var(--accent), #10b981);
  border: none;
  border-radius: 8px;
  color: white;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.2s;
}

.live-stream-watch-btn:hover {
  box-shadow: 0 0 20px var(--accent-glow);
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
  .live-stream-card {
    padding: 12px;
  }

  .live-stream-avatar-wrapper,
  .live-stream-avatar {
    width: 40px;
    height: 40px;
  }
}


/* ============================================
   LIVE DISCOVER VIEW
   ============================================ */

.live-filters {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.live-filter-btn {
  padding: 9px 18px;
  background: var(--bg-secondary);
  border: 2px solid transparent;
  border-radius: 22px;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.live-filter-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  transform: translateY(-2px);
}

.live-filter-btn.active {
  background: linear-gradient(135deg, var(--accent), #10b981);
  color: white;
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}

.live-streams-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.live-discover-card {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.live-discover-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(6, 182, 212, 0.1) 100%);
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  border-radius: 14px;
}

.live-discover-card:hover {
  box-shadow: 0 12px 24px rgba(16, 185, 129, 0.15);
  transform: translateY(-6px);
  border-color: var(--accent);
}

.live-discover-card:hover::before {
  opacity: 1;
}

.live-discover-thumbnail {
  position: relative;
  width: 100%;
  height: 180px;
  background: linear-gradient(135deg, #0ea5e9 0%, #10b981 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.live-thumbnail-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.live-discover-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  padding: 6px 14px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.live-discover-viewer-count {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  z-index: 2;
  backdrop-filter: blur(4px);
}

.live-discover-duration {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  z-index: 2;
  backdrop-filter: blur(4px);
}

.live-discover-info {
  padding: 16px;
}

.live-discover-user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.live-discover-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}

.live-discover-user-info {
  flex: 1;
  min-width: 0;
}

.live-discover-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.live-discover-username {
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  margin-top: 2px;
}

.live-discover-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.5;
  margin-top: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Live Empty State Styling */
#live-empty-state {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(6, 182, 212, 0.05) 100%);
  border-radius: 16px;
  border: 2px dashed rgba(16, 185, 129, 0.2);
}

#live-empty-state svg {
  color: var(--accent);
  margin-bottom: 20px;
  opacity: 0.8;
  filter: drop-shadow(0 4px 12px rgba(16, 185, 129, 0.1));
}

#live-empty-state p:first-of-type {
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px 0;
}

#live-empty-state p:nth-of-type(2) {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0 0 24px 0;
}

#live-empty-state .btn-primary {
  background: linear-gradient(135deg, var(--accent), #10b981);
  border: none;
  padding: 10px 28px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  transition: all 0.3s ease;
}

#live-empty-state .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
}

@media (max-width: 768px) {
  .live-streams-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
  }

  .live-discover-thumbnail {
    height: 150px;
  }

  #live-empty-state {
    padding: 40px 20px;
  }
}

@media (max-width: 480px) {
  .live-streams-grid {
    grid-template-columns: 1fr;
  }

  .live-discover-thumbnail {
    height: 200px;
  }
}

/* Live notification popup */
.live-notification-popup {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 10000;
  animation: slideInRight 0.3s ease;
}

.live-notification-content {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #1a1a25 0%, #12121a 100%);
  border: 1px solid var(--danger);
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(239, 68, 68, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.live-notification-content:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(239, 68, 68, 0.4);
}

.live-notification-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--danger);
}

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

.live-notification-text strong {
  color: var(--text-primary);
  font-size: 14px;
}

.live-notification-title {
  color: var(--text-secondary);
  font-size: 12px;
}

.live-notification-indicator {
  background: var(--danger);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 4px;
  animation: pulse 1.5s infinite;
}

.live-notification-popup.fade-out {
  animation: slideOutRight 0.5s ease forwards;
}

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

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

/* ============================================
   POST CONTENT STYLED - Gradient Text Posts
   Fix alignment issues on mobile feed
   ============================================ */

.post-content-styled {
  margin: 0 !important;
  padding: 60px 32px !important;
  border-radius: 12px;
  text-align: center;
  font-size: 1.75rem;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  line-height: 1.4;
}

/* Mobile-specific adjustments for post content styled */
@media (max-width: 768px) {
  .post-content-styled {
    margin: 0 !important;
    padding: 48px 24px !important;
    min-height: 280px;
    font-size: 1.5rem;
    border-radius: 10px;
  }

  /* Ensure post cards have proper overflow handling */
  .post-card {
    overflow: hidden;
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  .post-content-styled {
    margin: 0 !important;
    padding: 40px 20px !important;
    min-height: 240px;
    font-size: 1.35rem;
    border-radius: 8px;
  }
}

/* ============================================
   POST INSIGHTS
   ============================================ */

/* See insights link on posts */
.post-insights-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  color: #2d88ff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-top: 1px solid rgba(255,255,255,0.08);
  transition: background 0.15s;
}
.post-insights-link:hover {
  background: rgba(45, 136, 255, 0.08);
}
.post-insights-link svg {
  color: #2d88ff;
}

/* Post insights panel (full-screen overlay) */
.post-insights-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.7);
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 40px;
  overflow-y: auto;
}
.post-insights-container {
  background: #242526;
  border-radius: 12px;
  width: 100%;
  max-width: 600px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
.post-insights-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  position: sticky;
  top: 0;
  background: #242526;
  z-index: 1;
  border-radius: 12px 12px 0 0;
}
.post-insights-back {
  background: none;
  border: none;
  color: #e4e6eb;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.post-insights-back:hover {
  background: rgba(255,255,255,0.1);
}
.post-insights-close {
  background: rgba(255,255,255,0.1);
  border: none;
  color: #e4e6eb;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}
.post-insights-close:hover {
  background: rgba(255,255,255,0.2);
}
.post-insights-header-info {
  flex: 1;
}
.post-insights-header-label {
  font-size: 12px;
  color: #b0b3b8;
}
.post-insights-title {
  font-size: 20px;
  font-weight: 700;
  color: #e4e6eb;
  margin: 0;
}
.post-insights-body {
  padding: 16px 20px 24px;
}
.post-insights-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 0;
  color: #b0b3b8;
}
.post-insights-error {
  text-align: center;
  color: #b0b3b8;
  padding: 48px 0;
  font-size: 14px;
}

/* Insights sections */
.insights-section {
  background: #3a3b3c;
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 12px;
}
.insights-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.insights-section-header h3 {
  font-size: 15px;
  font-weight: 600;
  color: #e4e6eb;
  margin: 0;
}
.insights-big-number {
  font-size: 32px;
  font-weight: 700;
  color: #e4e6eb;
  margin-bottom: 2px;
}
.insights-sub-label {
  font-size: 13px;
  color: #b0b3b8;
  margin-bottom: 8px;
}
.insights-empty-text {
  font-size: 15px;
  font-weight: 600;
  color: #e4e6eb;
  margin-bottom: 4px;
}
.insights-reaction-icons {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
}
.insights-reaction-emoji {
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.05);
  border-radius: 50%;
}

/* Metrics list */
.insights-metrics-list {
  display: flex;
  flex-direction: column;
}
.insights-metric-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.insights-metric-row:last-child {
  border-bottom: none;
}
.insights-metric-icon {
  font-size: 18px;
  width: 28px;
  text-align: center;
}
.insights-metric-label {
  flex: 1;
  font-size: 14px;
  color: #e4e6eb;
}
.insights-metric-value {
  font-size: 14px;
  font-weight: 600;
  color: #e4e6eb;
}

/* Mobile responsive - bottom sheet pattern */
@media (max-width: 768px) {
  .post-insights-panel {
    padding-top: 0;
    align-items: flex-end;
  }
  .post-insights-container {
    max-width: 100%;
    max-height: 85vh;
    border-radius: 16px 16px 0 0;
    min-height: auto;
    animation: slideUpInsights 0.25s ease-out;
  }
  .post-insights-header {
    border-radius: 16px 16px 0 0;
    padding-top: 12px;
  }
  .post-insights-container::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: rgba(255,255,255,0.3);
    border-radius: 2px;
    margin: 8px auto 0;
  }
}
@keyframes slideUpInsights {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* Story Insights Panel */
.story-insights-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.7);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}
.insights-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
}
.story-insights-container {
  position: relative;
  background: #242526;
  border-radius: 12px;
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
  z-index: 1;
}
.insights-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  position: sticky;
  top: 0;
  background: #242526;
  border-radius: 12px 12px 0 0;
}
.insights-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: #e4e6eb;
  margin: 0;
}
.insights-close {
  background: none;
  border: none;
  color: #e4e6eb;
  font-size: 28px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.15s;
}
.insights-close:hover {
  background: rgba(255,255,255,0.1);
}
.insights-body {
  padding: 16px 20px 24px;
}
.insights-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.insights-metric {
  background: #3a3b3c;
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}
.insights-metric-icon {
  font-size: 28px;
  margin-bottom: 8px;
}
.insights-metric-label {
  font-size: 12px;
  color: #b0b3b8;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.insights-metric-value {
  font-size: 24px;
  font-weight: 700;
  color: #e4e6eb;
}
.reaction-breakdown {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.reaction-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  font-size: 14px;
  color: #e4e6eb;
}
.reaction-item span:first-child {
  font-size: 20px;
}
.reaction-count {
  color: #b0b3b8;
  font-size: 13px;
}
.story-own-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.story-action-link {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.1);
  border: none;
  color: #e4e6eb;
  padding: 8px 12px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.2s;
}
.story-action-link:hover {
  background: rgba(255,255,255,0.2);
}

/* Reel Insights Panel */
.reel-insights-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.7);
  z-index: 9998;
  display: flex;
  justify-content: center;
  align-items: center;
}
.reel-insights-container {
  position: relative;
  background: #242526;
  border-radius: 12px;
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
  z-index: 1;
}
.interaction-breakdown {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.interaction-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  font-size: 14px;
  color: #e4e6eb;
}
.interaction-item span:first-child {
  font-size: 16px;
}
.interaction-count {
  color: #b0b3b8;
  font-size: 13px;
  font-weight: 600;
}

@media (max-width: 768px) {
  .story-insights-container,
  .reel-insights-container {
    max-width: 100%;
    width: 90%;
    max-height: 85vh;
    border-radius: 16px 16px 0 0;
    animation: slideUpInsights 0.25s ease-out;
  }
  .insights-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}