/* ========================================
   ReplyPops — Premium Design System & Layouts
   Supports Desktop (PC) & Mobile Viewports
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

/* Fix dropdown select options contrast in all browsers */
select option {
  background-color: #161922 !important;
  color: #ffffff !important;
  padding: 10px !important;
  font-weight: 700 !important;
}

/* Ensure text selection, copy (Ctrl+C), cut (Ctrl+X), paste (Ctrl+V) works on all textboxes */
input,
textarea,
select,
.modal-input,
.modal-textarea,
#welcome-msg-text-input,
[contenteditable="true"] {
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
}

/* ── Design Tokens ── */
:root {
  /* Colors — Background (Deep Obsidian Canvas) */
  --bg-base: #0B0E14;
  --bg-surface: #141923;
  --bg-elevated: #1A2130;
  --bg-input: #171E2D;
  --bg-card-inner: #161C28;
  --bg-overlay: rgba(8, 11, 17, 0.85);

  /* Colors — Border (Refined Hairlines) */
  --border-subtle: #1C2436;
  --border-default: #212A3E;
  --border-medium: #2C3852;
  --border-strong: #364463;
  --border-input: #263147;
  --border-button: #2B3850;
  --border-muted: #3D4B66;

  /* Colors — Primary & Dynamic Accents (Default Dynamic SaaS) */
  --primary: #6366F1;
  --primary-light: #818CF8;
  --primary-bg: rgba(99, 102, 241, 0.15);
  --primary-bg-strong: rgba(99, 102, 241, 0.25);
  --platform-accent: #6366F1;
  --platform-glow: rgba(99, 102, 241, 0.25);
  --platform-tint: rgba(99, 102, 241, 0.12);

  /* Colors — Accent Secondary */
  --accent-pink: #EC4899;
  --accent-red: #ED332E;
  --accent-red-light: #F2737A;
  --accent-red-bg: rgba(237, 64, 77, 0.12);
  --accent-green: #53BF8B;
  --accent-green-bg: rgba(83, 191, 139, 0.15);
  --accent-yellow: #F6B336;
  --accent-yellow-bg: rgba(246, 179, 54, 0.15);
  --accent-gray-bg: rgba(128, 133, 143, 0.15);

  /* Colors — Text (Ultra Crisp) */
  --text-primary: #F8FAFC;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
  --text-dim: #475569;
  --text-light: #CBD5E1;
  --text-card: #E2E8F0;
  --text-label: #94A3B8;
  --text-body: #F1F5F9;
  --text-subtle: #94A3B8;
  --text-icon-muted: #64748B;

  /* Typography */
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.25);
  --shadow-modal: 0 10px 40px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.35);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Dimensions */
  --desktop-header-height: 64px;
  --mobile-header-height: 60px;
  --sidebar-width: 260px;
  --bottom-nav-height: 64px;
}

/* ═══════════════════════════════════════════════════════════
   DYNAMIC PLATFORM THEMES (Unified Shell + Platform Accents)
   ═══════════════════════════════════════════════════════════ */

/* 🎮 Discord Platform Theme (Blurple) */
body[data-platform="discord"],
body[data-screen="discord"],
#screen-discord {
  --primary: #5865F2;
  --primary-light: #7983F5;
  --primary-bg: rgba(88, 101, 242, 0.15);
  --primary-bg-strong: rgba(88, 101, 242, 0.25);
  --shadow-glow: 0 0 20px rgba(88, 101, 242, 0.35);
  --platform-accent: #5865F2;
  --platform-glow: rgba(88, 101, 242, 0.25);
  --platform-tint: rgba(88, 101, 242, 0.12);
}

/* ▶️ YouTube Studio Theme (Modern Crimson Red) */
body[data-platform="youtube"],
body[data-platform="yt"],
body[data-screen="youtube"],
#screen-youtube {
  --primary: #FF2B43;
  --primary-light: #FF5E73;
  --primary-bg: rgba(255, 43, 67, 0.15);
  --primary-bg-strong: rgba(255, 43, 67, 0.25);
  --shadow-glow: 0 0 20px rgba(255, 43, 67, 0.35);
  --platform-accent: #FF2B43;
  --platform-glow: rgba(255, 43, 67, 0.25);
  --platform-tint: rgba(255, 43, 67, 0.12);
}

/* 🟩 Kick Streaming Theme (Neon Lime) */
body[data-platform="kick"],
#accounts-content-kick {
  --primary: #53FC18;
  --primary-light: #76FF44;
  --primary-bg: rgba(83, 252, 24, 0.15);
  --primary-bg-strong: rgba(83, 252, 24, 0.25);
  --shadow-glow: 0 0 20px rgba(83, 252, 24, 0.35);
  --platform-accent: #53FC18;
  --platform-glow: rgba(83, 252, 24, 0.22);
  --platform-tint: rgba(83, 252, 24, 0.10);
}

/* 💜 Twitch Theme (Twitch Violet) */
body[data-platform="twitch"],
#accounts-content-twitch {
  --primary: #9146FF;
  --primary-light: #A970FF;
  --primary-bg: rgba(145, 70, 255, 0.15);
  --primary-bg-strong: rgba(145, 70, 255, 0.25);
  --shadow-glow: 0 0 20px rgba(145, 70, 255, 0.35);
  --platform-accent: #9146FF;
  --platform-glow: rgba(145, 70, 255, 0.25);
  --platform-tint: rgba(145, 70, 255, 0.12);
}

/* 🎵 TikTok Studio Theme (Vibrant Coral Pink) */
body[data-platform="tiktok"],
body[data-platform="tt"],
#accounts-content-tt {
  --primary: #FE2C55;
  --primary-light: #FF5A7D;
  --primary-bg: rgba(254, 44, 85, 0.15);
  --primary-bg-strong: rgba(254, 44, 85, 0.25);
  --shadow-glow: 0 0 20px rgba(254, 44, 85, 0.35);
  --platform-accent: #FE2C55;
  --platform-glow: rgba(254, 44, 85, 0.25);
  --platform-tint: rgba(254, 44, 85, 0.12);
}

/* 📷 Instagram Theme (Royal Magenta) */
body[data-platform="instagram"],
body[data-platform="ig"],
#accounts-content-ig {
  --primary: #E1306C;
  --primary-light: #E75487;
  --primary-bg: rgba(225, 48, 108, 0.15);
  --primary-bg-strong: rgba(225, 48, 108, 0.25);
  --shadow-glow: 0 0 20px rgba(225, 48, 108, 0.35);
  --platform-accent: #E1306C;
  --platform-glow: rgba(225, 48, 108, 0.25);
  --platform-tint: rgba(225, 48, 108, 0.12);
}

/* 📡 Multistream Hub Theme (Cyber Indigo) */
body[data-platform="multistream"],
body[data-screen="multistream"],
#screen-multistream {
  --primary: #6366F1;
  --primary-light: #818CF8;
  --primary-bg: rgba(99, 102, 241, 0.15);
  --primary-bg-strong: rgba(99, 102, 241, 0.25);
  --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.35);
  --platform-accent: #6366F1;
  --platform-glow: rgba(99, 102, 241, 0.25);
  --platform-tint: rgba(99, 102, 241, 0.12);
}

.ms-destination-card {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease !important;
}
.ms-destination-card:hover {
  transform: translateY(-3px);
  border-color: rgba(99, 102, 241, 0.4) !important;
  box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.45), 0 0 20px rgba(99, 102, 241, 0.15) !important;
}

/* Quick Relays Left Sidebar Controls */
.ms-quick-relay-sidebar {
  width: 250px;
  min-width: 220px;
  max-width: 270px;
  height: 100%;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.88) 0%, rgba(10, 15, 30, 0.96) 100%);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 10px 10px 8px 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(16px);
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.ms-quick-relay-scroll-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-right: 3px;
  scrollbar-width: thin;
  scrollbar-color: rgba(99, 102, 241, 0.3) transparent;
}

/* Aspect Ratio Selector Dropdown */
.ms-aspect-selector {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: rgba(15, 23, 42, 0.8) url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23818cf8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") no-repeat right 7px center / 10px;
  border: 1px solid rgba(129, 140, 248, 0.35);
  color: #c7d2fe;
  font-size: 10px;
  font-weight: 700;
  border-radius: 7px;
  padding: 3px 22px 3px 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
  height: 24px;
}
.ms-aspect-selector:hover, .ms-aspect-selector:focus {
  border-color: rgba(129, 140, 248, 0.8);
  background-color: rgba(30, 41, 59, 0.95);
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.3);
}
.ms-aspect-selector option {
  background: #0f172a;
  color: #f1f5f9;
  font-weight: 600;
  padding: 6px;
}


.ms-quick-relay-scroll-list::-webkit-scrollbar {
  width: 4px;
}
.ms-quick-relay-scroll-list::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.4);
  border-radius: 4px;
}

.ms-quick-relay-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 9px;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.6) 0%, rgba(15, 23, 42, 0.8) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  user-select: none;
}

.ms-quick-relay-card:hover {
  background: linear-gradient(135deg, rgba(45, 60, 85, 0.75) 0%, rgba(20, 32, 55, 0.9) 100%);
  border-color: rgba(99, 102, 241, 0.4);
  transform: translateX(2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.ms-quick-relay-card.is-active {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.18) 0%, rgba(15, 23, 42, 0.85) 100%);
  border-color: rgba(239, 68, 68, 0.6);
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.25);
}

@keyframes ms-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.ms-pulse-anim {
  animation: ms-pulse-dot 1.5s infinite ease-in-out;
}

/* Right Studio Controls Sidebar Deck */
.ms-studio-controls-sidebar {
  width: 250px;
  min-width: 220px;
  max-width: 270px;
  height: 100%;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.88) 0%, rgba(10, 15, 30, 0.96) 100%);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 10px 10px 8px 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(16px);
  flex-shrink: 0;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(192, 132, 252, 0.3) transparent;
}

.ms-control-deck-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.ms-control-deck-btn:hover {
  background: rgba(192, 132, 252, 0.15);
  border-color: rgba(192, 132, 252, 0.45);
  color: #fff;
  transform: translateX(2px);
}

.ms-control-deck-btn.active {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.3) 0%, rgba(147, 51, 234, 0.45) 100%) !important;
  border-color: rgba(192, 132, 252, 0.7) !important;
  color: #fff !important;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.35);
}

@media (max-width: 1200px) {
  #ms-preview-container {
    flex-wrap: wrap !important;
    height: auto !important;
    max-height: none !important;
  }
  .ms-quick-relay-sidebar, .ms-studio-controls-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 260px;
  }
}



/* ═══════════════════════════════════════════════════════════
   LIGHT THEME — Premium SaaS / AI Aesthetic
   Applied when <html data-theme="light"> is set
   ═══════════════════════════════════════════════════════════ */
[data-theme="light"] {
  /* Colors — Background */
  --bg-base: #F8F9FC;
  --bg-surface: #FFFFFF;
  --bg-elevated: #F1F3F9;
  --bg-input: #EEF0F6;
  --bg-card-inner: #F4F5FA;
  --bg-overlay: rgba(30, 30, 50, 0.45);

  /* Colors — Border */
  --border-subtle: #E5E7F0;
  --border-default: #DFE2ED;
  --border-medium: #D1D5E4;
  --border-strong: #C5CAD9;
  --border-input: #CDD2E0;
  --border-button: #B8BDD0;
  --border-muted: #D5D9E5;

  /* Colors — Primary (Purple — consistent across themes) */
  --primary: #7C3AED;
  --primary-light: #A78BFA;
  --primary-bg: rgba(124, 58, 237, 0.1);
  --primary-bg-strong: rgba(124, 58, 237, 0.08);

  /* Colors — Accent */
  --accent-pink: #DB2777;
  --accent-red: #DC2626;
  --accent-red-light: #EF4444;
  --accent-red-bg: rgba(220, 38, 38, 0.08);
  --accent-green: #059669;
  --accent-green-bg: rgba(5, 150, 105, 0.1);
  --accent-yellow: #D97706;
  --accent-yellow-bg: rgba(217, 119, 6, 0.1);
  --accent-gray-bg: rgba(107, 114, 128, 0.1);

  /* Colors — Text */
  --text-primary: #1A1D2B;
  --text-secondary: #4B5563;
  --text-muted: #6B7280;
  --text-dim: #9CA3AF;
  --text-light: #374151;
  --text-card: #374151;
  --text-label: #6B7280;
  --text-body: #1F2937;
  --text-subtle: #6B7280;
  --text-icon-muted: #9CA3AF;

  /* Shadows */
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06);
  --shadow-modal: 0 8px 30px rgba(0, 0, 0, 0.12);
  --shadow-glow: 0 0 16px rgba(124, 58, 237, 0.15);

  color-scheme: light;
}

/* ── Light Theme Component Overrides ── */
[data-theme="light"] body {
  background-color: var(--bg-base);
  color: var(--text-primary);
}

[data-theme="light"] .modal-overlay {
  background: rgba(30, 30, 50, 0.35);
}

[data-theme="light"] .modal-card {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
  border-color: var(--border-medium);
}

[data-theme="light"] .modal-card::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .modal-card::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
}
[data-theme="light"] .modal-card::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

[data-theme="light"] .header-avatar-wrap {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .header-avatar-wrap:hover {
  background: rgba(124, 58, 237, 0.08);
  border-color: rgba(124, 58, 237, 0.3);
}

[data-theme="light"] .modal-close-btn,
[data-theme="light"] .udd-close-btn {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: #4B5563 !important;
}
[data-theme="light"] .modal-close-btn:hover,
[data-theme="light"] .udd-close-btn:hover {
  background: rgba(220, 38, 38, 0.1) !important;
  border-color: rgba(220, 38, 38, 0.4) !important;
  color: #DC2626 !important;
}

[data-theme="light"] .profile-dropdown {
  background: var(--bg-surface);
  border-color: var(--border-medium);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* Bottom Nav light */
[data-theme="light"] .bottom-nav {
  background: #FFFFFF;
  border-top-color: var(--border-medium);
}
[data-theme="light"] .bottom-nav .nav-item {
  color: var(--text-muted);
}
[data-theme="light"] .bottom-nav .nav-item.active {
  color: var(--primary);
}
[data-theme="light"] .bottom-nav .nav-item svg {
  stroke: currentColor;
}

/* Sidebar light */
[data-theme="light"] .sidebar {
  background: var(--bg-surface);
  border-right-color: var(--border-medium);
}
[data-theme="light"] .sidebar-nav-item {
  color: var(--text-secondary);
}
[data-theme="light"] .sidebar-nav-item:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}
[data-theme="light"] .sidebar-nav-item.active {
  background: var(--primary-bg);
  color: var(--primary);
}

/* Desktop footer light */
[data-theme="light"] .desktop-footer {
  background: var(--bg-surface);
  border-top-color: var(--border-medium);
}

/* Stat Cards / KPI cards with inline styles in light */
[data-theme="light"] .stat-card,
[data-theme="light"] .kpi-card,
[data-theme="light"] .trigger-card {
  background: var(--bg-surface);
  border-color: var(--border-medium);
}

/* Fix all inline white text → proper dark color in light mode */
[data-theme="light"] .page-heading h1,
[data-theme="light"] .settings-section-title,
[data-theme="light"] .plan-title,
[data-theme="light"] .plan-detail {
  color: var(--text-primary) !important;
}

/* Landing page light overrides */
[data-theme="light"] .landing-page {
  background: linear-gradient(135deg, #F8F9FC 0%, #EEF0F8 50%, #F3F0FF 100%) !important;
}

[data-theme="light"] .landing-hero-title,
[data-theme="light"] .landing-section-title {
  color: var(--text-primary) !important;
}

/* Universal Scrollbar in dark mode (default) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: rgba(14, 16, 26, 0.7);
}
::-webkit-scrollbar-thumb {
  background: rgba(88, 101, 242, 0.45);
  border-radius: 8px;
  border: 2px solid rgba(14, 16, 26, 0.7);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(88, 101, 242, 0.85);
}

/* Scrollbar in light mode */
[data-theme="light"] ::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.03);
}
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
}

/* ── Referral Screens & Inline Style Overrides ── */
[data-theme="light"] #screen-referrals .page-heading h1 {
  color: var(--text-primary) !important;
}
[data-theme="light"] #screen-referrals [style*="color: #fff"],
[data-theme="light"] #screen-referrals [style*="color:#fff"],
[data-theme="light"] #screen-referrals [style*="color: #e4e4e7"] {
  color: var(--text-primary) !important;
}

/* Login card light override */
[data-theme="light"] .login-card,
[data-theme="light"] .auth-card {
  background: var(--bg-surface) !important;
  border-color: var(--border-medium) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08) !important;
}

/* Form inputs in light */
[data-theme="light"] .form-input,
[data-theme="light"] .modal-input,
[data-theme="light"] input.form-input,
[data-theme="light"] textarea.form-input,
[data-theme="light"] select.form-input,
[data-theme="light"] .pay-input {
  background: var(--bg-input) !important;
  border-color: var(--border-input) !important;
  color: var(--text-primary) !important;
}
[data-theme="light"] .form-input::placeholder,
[data-theme="light"] .modal-input::placeholder,
[data-theme="light"] .pay-input::placeholder {
  color: var(--text-dim) !important;
}
[data-theme="light"] .form-input:focus,
[data-theme="light"] .modal-input:focus,
[data-theme="light"] .pay-input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1) !important;
}

/* Settings section in light */
[data-theme="light"] .settings-section {
  background: var(--bg-surface);
  border-color: var(--border-medium);
}

/* Toggle switch light */
[data-theme="light"] .toggle {
  background: var(--border-medium);
}
[data-theme="light"] .toggle.active {
  background: var(--primary);
}

/* Pricing / Checkout / quick-buy modals */
[data-theme="light"] .modal-overlay .modal-card h3,
[data-theme="light"] .modal-overlay .modal-card h2 {
  color: var(--text-primary) !important;
}

/* Theme Toggle Button */
.theme-toggle-btn {
  width: 34px;
  height: 34px;
  background: var(--bg-input);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.25s ease;
}
.theme-toggle-btn:hover {
  background: var(--primary-bg);
  border-color: var(--primary);
  color: var(--primary);
}
/* Dark mode: show sun, hide moon */
.theme-toggle-btn .sun-icon { display: block; }
.theme-toggle-btn .moon-icon { display: none; }
/* Light mode: show moon, hide sun */
[data-theme="light"] .theme-toggle-btn .sun-icon { display: none; }
[data-theme="light"] .theme-toggle-btn .moon-icon { display: block; }

/* ═══════════════════════════════════════════════════
   LIGHT MODE — COMPREHENSIVE CARD & TEXT OVERRIDES
   Ensures ALL cards have light backgrounds (#FFFFFF)
   and crisp dark readable text (#1E293B / #475569)
   ═══════════════════════════════════════════════════ */

/* Target ALL card-like containers inside .screen in Light Mode */
[data-theme="light"] .screen .stat-card,
[data-theme="light"] .screen .kpi-card,
[data-theme="light"] .screen .content-card,
[data-theme="light"] .screen .platform-hub-card,
[data-theme="light"] .screen .platform-card,
[data-theme="light"] .screen .account-card,
[data-theme="light"] .screen .trigger-card,
[data-theme="light"] .screen .workspace-sub-sidebar,
[data-theme="light"] .screen .workspace-action-sidebar,
[data-theme="light"] .screen div[style*="background: rgba(18,"],
[data-theme="light"] .screen div[style*="background:rgba(18,"],
[data-theme="light"] .screen div[style*="background: rgba(15,"],
[data-theme="light"] .screen div[style*="background:rgba(15,"],
[data-theme="light"] .screen div[style*="background: rgba(12,"],
[data-theme="light"] .screen div[style*="background:rgba(12,"],
[data-theme="light"] .screen div[style*="background: rgba(20,"],
[data-theme="light"] .screen div[style*="background:rgba(20,"],
[data-theme="light"] .screen div[style*="background: var(--bg-card)"],
[data-theme="light"] .screen div[style*="background:var(--bg-card)"] {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

/* Explicitly Preserve & Protect ALL Platform Logo Backgrounds in Light Mode */
[data-theme="light"] div[style*="background:#1877f2"],
[data-theme="light"] div[style*="background: #1877f2"] {
  background: #1877F2 !important;
}
[data-theme="light"] div[style*="background:#0a66c2"],
[data-theme="light"] div[style*="background: #0a66c2"] {
  background: #0A66C2 !important;
}
[data-theme="light"] div[style*="background:#010101"],
[data-theme="light"] div[style*="background: #010101"],
[data-theme="light"] div[style*="background:#000000"],
[data-theme="light"] div[style*="background: #000000"] {
  background: #000000 !important;
}
[data-theme="light"] div[style*="background:#ff0000"],
[data-theme="light"] div[style*="background: #ff0000"] {
  background: #FF0000 !important;
}
[data-theme="light"] div[style*="background:#07c160"],
[data-theme="light"] div[style*="background: #07c160"] {
  background: #07C160 !important;
}
[data-theme="light"] div[style*="background:linear-gradient(135deg,#25d366,#128c7e)"] {
  background: linear-gradient(135deg, #25d366, #128c7e) !important;
}
[data-theme="light"] div[style*="background:linear-gradient(135deg,#24a1de,#1d8fc2)"] {
  background: linear-gradient(135deg, #24a1de, #1d8fc2) !important;
}
[data-theme="light"] div[style*="background:white"] {
  background: #FFFFFF !important;
}

/* Fix Hero Welcome Banner in Dashboard in Light Mode */
[data-theme="light"] .dash-stagger-1 {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.1) 0%, rgba(99, 102, 241, 0.1) 50%, rgba(219, 39, 119, 0.08) 100%) !important;
  border-color: rgba(124, 58, 237, 0.3) !important;
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.08) !important;
}
[data-theme="light"] #dashboard-welcome {
  color: #1E293B !important;
}
[data-theme="light"] .dash-stagger-1 p {
  color: #475569 !important;
}
[data-theme="light"] .dash-stagger-1 [style*="color: #fff"],
[data-theme="light"] .dash-stagger-1 [style*="color:#fff"] {
  color: #1E293B !important;
}

/* Target ALL text inside cards and screens in Light Mode */
[data-theme="light"] .screen [style*="color: #ffffff"],
[data-theme="light"] .screen [style*="color:#ffffff"],
[data-theme="light"] .screen [style*="color: #fff"],
[data-theme="light"] .screen [style*="color:#fff"] {
  color: #1E293B !important;
}

[data-theme="light"] .screen [style*="color: #d4d4d8"],
[data-theme="light"] .screen [style*="color:#d4d4d8"],
[data-theme="light"] .screen [style*="color: #a1a1aa"],
[data-theme="light"] .screen [style*="color:#a1a1aa"],
[data-theme="light"] .screen [style*="color: #71717a"],
[data-theme="light"] .screen [style*="color:#71717a"],
[data-theme="light"] .screen [style*="color: #e4e4e7"],
[data-theme="light"] .screen [style*="color:#e4e4e7"],
[data-theme="light"] .screen [style*="color: #94a3b8"],
[data-theme="light"] .screen [style*="color:#94a3b8"],
[data-theme="light"] .screen [style*="color: #64748b"],
[data-theme="light"] .screen [style*="color:#64748b"] {
  color: #64748B !important;
}

/* Stat values, headings, titles in cards */
[data-theme="light"] .screen .stat-value,
[data-theme="light"] .screen .card-title,
[data-theme="light"] .screen [style*="font-weight: 800"],
[data-theme="light"] .screen [style*="font-weight: 700"],
[data-theme="light"] .screen [style*="font-weight:800"],
[data-theme="light"] .screen [style*="font-weight:700"] {
  color: #0F172A !important;
}

/* Stat labels and muted text in cards */
[data-theme="light"] .screen .stat-label,
[data-theme="light"] .screen [style*="font-size: 11px"],
[data-theme="light"] .screen [style*="font-size: 12px"] {
  color: #475569 !important;
}

/* ═══════════════════════════════════════════════════
   LIGHT MODE — CRISP BLACK TEXT ON ALL BUTTONS & TABS
   ═══════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════
   LIGHT MODE — INTERNATIONAL SAAS BUTTON & CONTRAST RULES
   ═══════════════════════════════════════════════════ */

/* 1. All Solid, Gradient, and Saturated Action Buttons ALWAYS have crisp white text */
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-save,
[data-theme="light"] .profile-btn-save,
[data-theme="light"] #btn-save-profile,
[data-theme="light"] .btn-copy-ref,
[data-theme="light"] .btn-upgrade-badge,
[data-theme="light"] .btn-upgrade-limits,
[data-theme="light"] .btn-update-pass,
[data-theme="light"] button.btn-primary,
[data-theme="light"] button.btn-save,
[data-theme="light"] [class*="btn-primary"],
[data-theme="light"] button[style*="linear-gradient"],
[data-theme="light"] a[style*="linear-gradient"],
[data-theme="light"] button[style*="background: linear-gradient"],
[data-theme="light"] button[style*="background:linear-gradient"],
[data-theme="light"] button[style*="background: #10b981"],
[data-theme="light"] button[style*="background:#10b981"],
[data-theme="light"] button[style*="background: #a855f7"],
[data-theme="light"] button[style*="background:#a855f7"],
[data-theme="light"] button[style*="background: #6366f1"],
[data-theme="light"] button[style*="background:#6366f1"],
[data-theme="light"] button[style*="background: #5865f2"],
[data-theme="light"] button[style*="background:#5865f2"],
[data-theme="light"] button[id*="btn-plan-"],
[data-theme="light"] #btn-auth-submit,
[data-theme="light"] #btn-reg-submit {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

[data-theme="light"] .btn-primary span,
[data-theme="light"] .btn-save span,
[data-theme="light"] .profile-btn-save span,
[data-theme="light"] #btn-save-profile span,
[data-theme="light"] .btn-copy-ref span,
[data-theme="light"] .btn-upgrade-badge span,
[data-theme="light"] .btn-upgrade-limits span,
[data-theme="light"] .btn-update-pass span,
[data-theme="light"] button[style*="linear-gradient"] span,
[data-theme="light"] a[style*="linear-gradient"] span {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

/* 2. Secondary, Ghost, Outline, and Light Surface Buttons have dark readable text */
[data-theme="light"] .btn-secondary,
[data-theme="light"] .btn-ghost,
[data-theme="light"] .btn-manage,
[data-theme="light"] .btn-change-photo,
[data-theme="light"] .workspace-action-sidebar button,
[data-theme="light"] .workspace-sub-sidebar button {
  color: #0F172A !important;
  font-weight: 600 !important;
}

/* Switch Platform Button styling for Dark and Light modes */
.btn-switch-platform {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.25), rgba(236, 72, 153, 0.3)) !important;
  border: 1px solid #c084fc !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(168, 85, 247, 0.35) !important;
  cursor: pointer;
  transition: all 0.2s ease;
}

[data-theme="light"] .btn-switch-platform {
  background: linear-gradient(135deg, #E9D5FF 0%, #F472B6 100%) !important;
  border: 1px solid #A855F7 !important;
  color: #000000 !important;
  font-weight: 900 !important;
  box-shadow: 0 4px 16px rgba(168, 85, 247, 0.25) !important;
}

/* Specific Button Background Overrides in Light Mode for Maximum Contrast */
/* 1. Header + New Trigger Button */
[data-theme="light"] .btn-new-trigger-header,
[data-theme="light"] button[onclick*="modal-add-trigger"] {
  background: #C4B5FD !important; /* Soft Pastel Purple */
  border: 1px solid #8B5CF6 !important;
  color: #000000 !important;
  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.25) !important;
}

/* 2. Create / Schedule Button (Instagram / FB / YT Workspace) */
[data-theme="light"] #btn-add-post-ig,
[data-theme="light"] #btn-add-post-fb,
[data-theme="light"] #btn-add-post-yt,
[data-theme="light"] button[id*="btn-add-post"] {
  background: linear-gradient(135deg, #E9D5FF 0%, #C084FC 100%) !important;
  border: 1px solid #A855F7 !important;
  color: #000000 !important;
}
[data-theme="light"] #btn-add-post-ig span,
[data-theme="light"] #btn-add-post-fb span,
[data-theme="light"] #btn-add-post-yt span {
  color: #000000 !important;
}

/* 3. Schedule Story Button */
[data-theme="light"] #btn-add-story-ig,
[data-theme="light"] #btn-add-story-fb,
[data-theme="light"] button[id*="btn-add-story"] {
  background: linear-gradient(135deg, #FBCFE8 0%, #F472B6 100%) !important;
  border: 1px solid #EC4899 !important;
  color: #000000 !important;
}
[data-theme="light"] #btn-add-story-ig span,
[data-theme="light"] #btn-add-story-fb span {
  color: #000000 !important;
}

/* 4. Sync Posts Button */
[data-theme="light"] #btn-sync-posts-ig,
[data-theme="light"] #btn-sync-posts-fb,
[data-theme="light"] button[id*="btn-sync-posts"] {
  background: #BFDBFE !important;
  border: 1px solid #3B82F6 !important;
  color: #000000 !important;
}
[data-theme="light"] #btn-sync-posts-ig span,
[data-theme="light"] #btn-sync-posts-fb span {
  color: #000000 !important;
}

/* 5. Disconnect Button */
[data-theme="light"] #btn-disconnect-account-ig,
[data-theme="light"] #btn-disconnect-account-fb,
[data-theme="light"] button[id*="btn-disconnect"] {
  background: #FECDD3 !important;
  border: 1px solid #E11D48 !important;
  color: #991B1B !important;
}
[data-theme="light"] #btn-disconnect-account-ig span,
[data-theme="light"] #btn-disconnect-account-fb span {
  color: #991B1B !important;
}

/* 6. Account Tabs / Selected Profile (e.g., ainotes.pk) */
[data-theme="light"] .account-tab {
  background: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
}
[data-theme="light"] .account-tab .account-tab-name {
  color: #000000 !important;
  font-weight: 800 !important;
}
[data-theme="light"] .account-tab .account-tab-platform {
  color: #475569 !important;
}
[data-theme="light"] .account-tab.active {
  background: linear-gradient(135deg, #F3E8FF 0%, #E9D5FF 100%) !important;
  border: 2px solid #A855F7 !important;
  box-shadow: 0 4px 16px rgba(168, 85, 247, 0.25) !important;
}
[data-theme="light"] .account-tab.active .account-tab-name {
  color: #000000 !important;
  font-weight: 900 !important;
}
[data-theme="light"] .account-tab.active .account-tab-platform {
  color: #581C87 !important;
  font-weight: 700 !important;
}

/* 7. Media Filter Tabs (All Content, Reels, Posts, Stories, Active Triggers) */
[data-theme="light"] .media-filter-tab {
  background: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
  color: #000000 !important;
}
[data-theme="light"] .media-filter-tab.active {
  background: #A855F7 !important;
  border-color: #A855F7 !important;
  color: #FFFFFF !important;
}

/* 8. User Pill Badge (e.g. 0 / 100 Users) */
[data-theme="light"] #limit-badge-ig,
[data-theme="light"] [id*="limit-badge"] {
  background: #FCE7F3 !important;
  border-color: #F472B6 !important;
  color: #831843 !important;
  font-weight: 900 !important;
}

/* ═══════════════════════════════════════════════════
   ALWAYS DARK: LANDING PAGE & LOGIN / AUTH SCREEN
   Ensures Landing/Login page is ALWAYS sleek dark black
   (#0b0c10 / rgba(18,19,25,0.95)) regardless of light theme
   ═══════════════════════════════════════════════════ */
[data-theme="light"] #standalone-landing-page {
  background: #0b0c10 !important;
  color: #ffffff !important;
}

[data-theme="light"] #standalone-login-view,
[data-theme="light"] #standalone-register-view {
  background: rgba(18, 19, 25, 0.95) !important;
  border-color: rgba(168, 85, 247, 0.3) !important;
  color: #ffffff !important;
  box-shadow: 0 25px 60px rgba(0,0,0,0.8) !important;
}

[data-theme="light"] #standalone-login-view div,
[data-theme="light"] #standalone-login-view label,
[data-theme="light"] #standalone-login-view span,
[data-theme="light"] #standalone-register-view div,
[data-theme="light"] #standalone-register-view label,
[data-theme="light"] #standalone-register-view span {
  color: #ffffff !important;
}

[data-theme="light"] #standalone-login-view p,
[data-theme="light"] #standalone-login-view label,
[data-theme="light"] #standalone-register-view p,
[data-theme="light"] #standalone-register-view label {
  color: #a1a1aa !important;
}

[data-theme="light"] #standalone-login-view input,
[data-theme="light"] #standalone-register-view input,
[data-theme="light"] #standalone-register-view select {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

[data-theme="light"] #btn-auth-submit,
[data-theme="light"] #btn-reg-submit {
  background: linear-gradient(135deg, #a855f7 0%, #6366f1 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

[data-theme="light"] .btn-social-auth {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}

[data-theme="light"] .btn-discord-auth {
  background: rgba(88, 101, 242, 0.15) !important;
  border-color: rgba(88, 101, 242, 0.4) !important;
  color: #ffffff !important;
}

/* Global: Any element inside main-content/screen with hardcoded white text */
[data-theme="light"] .screen h1,
[data-theme="light"] .screen h2,
[data-theme="light"] .screen h3 {
  color: var(--text-primary) !important;
}
[data-theme="light"] .screen p {
  color: var(--text-secondary) !important;
}

/* Inline border overrides */
[data-theme="light"] .screen [style*="border-color: rgba(255,255,255,"],
[data-theme="light"] .screen [style*="border: 1px solid rgba(255,255,255,"] {
  border-color: var(--border-medium) !important;
}

/* Checkout modal order summary & pricing panels */
[data-theme="light"] .modal-overlay [style*="background: rgba(255,255,255,0.01)"],
[data-theme="light"] .modal-overlay [style*="background: rgba(255,255,255,0.02)"],
[data-theme="light"] .modal-overlay [style*="background: rgba(0,0,0,"] {
  background: var(--bg-elevated) !important;
}
[data-theme="light"] .modal-overlay [style*="color: #6b7280"],
[data-theme="light"] .modal-overlay [style*="color:#6b7280"] {
  color: var(--text-muted) !important;
}
[data-theme="light"] .modal-overlay [style*="color: #52525b"],
[data-theme="light"] .modal-overlay [style*="color:#52525b"] {
  color: var(--text-muted) !important;
}
[data-theme="light"] .modal-overlay [style*="color: #4b5563"],
[data-theme="light"] .modal-overlay [style*="color:#4b5563"] {
  color: var(--text-dim) !important;
}

/* Checkout & modal border overrides */
[data-theme="light"] .modal-overlay [style*="border-bottom: 1px solid rgba(255,255,255,"],
[data-theme="light"] .modal-overlay [style*="border-top: 1px solid rgba(255,255,255,"],
[data-theme="light"] .modal-overlay [style*="border-right: 1px solid rgba(255,255,255,"],
[data-theme="light"] .modal-overlay [style*="border: 1px solid rgba(255,255,255,"] {
  border-color: var(--border-medium) !important;
}

/* Table row borders in light */
[data-theme="light"] .screen tr[style*="border-bottom: 1px solid rgba(255,255,255,"],
[data-theme="light"] .modal-card tr[style*="border-bottom: 1px solid rgba(255,255,255,"] {
  border-bottom-color: var(--border-medium) !important;
}

/* Referral link input in light mode */
[data-theme="light"] #ref-link-input {
  background: var(--bg-input) !important;
  border-color: var(--border-input) !important;
  color: var(--primary) !important;
}

/* Landing page cards */
[data-theme="light"] .landing-page .plan-card,
[data-theme="light"] .landing-page [class*="card"] {
  background: var(--bg-surface) !important;
  border-color: var(--border-medium) !important;
}

/* Notification badges & small inline badges */
[data-theme="light"] .notification-row {
  border-color: var(--border-medium);
}

/* Danger section */
[data-theme="light"] .danger-section {
  background: rgba(220, 38, 38, 0.04) !important;
  border-color: rgba(220, 38, 38, 0.15) !important;
}
[data-theme="light"] .btn-danger {
  background: rgba(220, 38, 38, 0.1) !important;
  color: #DC2626 !important;
  border: 1px solid rgba(220, 38, 38, 0.3) !important;
}

/* Discord & YouTube screen dark drawers */
[data-theme="light"] #spam-drawer,
[data-theme="light"] #words-drawer,
[data-theme="light"] #periodic-drawer,
[data-theme="light"] #u-yt-chat-stream-box,
[data-theme="light"] #story-media-preview-wrap,
[data-theme="light"] #post-media-preview-wrap {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: var(--border-medium) !important;
}

/* Quick buy / Checkout modal dark backgrounds */
[data-theme="light"] .modal-overlay > div[style*="background: #0c0c14"],
[data-theme="light"] .modal-overlay > div[style*="background:#0c0c14"],
[data-theme="light"] .modal-overlay > div[style*="background: #0d0d15"],
[data-theme="light"] .modal-overlay > div[style*="background: #101018"] {
  background: var(--bg-surface) !important;
  border-color: var(--border-medium) !important;
}

/* Card brand chips */
[data-theme="light"] .card-brand-chip {
  border-color: var(--border-medium) !important;
}


/* ── Reset & Base ── */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-base);
  color: var(--text-primary);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ── SPA Navigation Structure ── */
.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.body-row {
  display: flex;
  flex: 1;
  width: 100%;
}

.screen {
  display: none !important;
  opacity: 0;
}

.screen.active {
  display: block !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ── Modals & Overlays System ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  padding: 20px 12px;
  overflow-y: auto;
  box-sizing: border-box;
}

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

.modal-card {
  background: var(--bg-surface, #16161D);
  border: 1px solid var(--border-default, #29292F);
  border-radius: var(--radius-lg, 16px);
  padding: 20px 24px;
  width: 100%;
  max-width: 580px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  margin: auto;
  position: relative;
}

.modal-card::-webkit-scrollbar {
  width: 6px;
}
.modal-card::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}
.modal-card::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}
.modal-card::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.4);
}

.modal-card-wide {
  max-width: 720px;
}

.modal-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.modal-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.modal-form-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.modal-input,
.modal-textarea {
  background: var(--bg-input, #212129);
  border: 1px solid var(--border-input, #383842);
  border-radius: var(--radius-md, 8px);
  padding: 10px 14px;
  color: var(--text-primary);
  font-size: 14px;
  outline: none;
  width: 100%;
}

.modal-input:focus,
.modal-textarea:focus {
  border-color: var(--primary);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}

/* ── Desktop Sidebar Nav Styling ── */
.sidebar {
  width: 260px;
  min-width: 260px;
  max-width: 260px;
  background: var(--bg-surface);
  border-right: 1px solid var(--border-default);
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: calc(100vh - var(--desktop-header-height, 64px));
  flex-shrink: 0;
  box-sizing: border-box;
}

/* ── Selected Box Animations & Shimmer Keyframes ── */
@keyframes activeBoxPulse {
  0%, 100% {
    box-shadow: 0 0 16px rgba(139, 92, 246, 0.35), inset 0 0 0 1px rgba(168, 85, 247, 0.5);
    border-color: rgba(168, 85, 247, 0.6);
  }
  50% {
    box-shadow: 0 0 26px rgba(139, 92, 246, 0.7), inset 0 0 0 1.5px rgba(236, 72, 153, 0.7);
    border-color: rgba(236, 72, 153, 0.8);
  }
}

@keyframes activeShimmerBg {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes activeDotGlow {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 6px rgba(139, 92, 246, 0.8);
  }
  50% {
    transform: scale(1.4);
    box-shadow: 0 0 16px rgba(168, 85, 247, 1);
  }
}

@keyframes activeEmojiBounce {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-3px) scale(1.25);
  }
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  z-index: 10;
  box-sizing: border-box;
  width: 100%;
}

.sidebar-nav-item * {
  pointer-events: none;
}

button, input[type="button"], input[type="submit"], .btn-primary, .btn-secondary, .btn-manage, .btn-action-glow, .btn-trigger-action, .btn-connect-card, .btn-howto-connect, .media-filter-tab, .platform-tab {
  cursor: pointer !important;
  pointer-events: auto !important;
}

.sidebar-nav-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}

.sidebar-nav-item.active {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.28) 0%, rgba(99, 102, 241, 0.22) 50%, rgba(236, 72, 153, 0.25) 100%);
  background-size: 200% 200%;
  animation: activeShimmerBg 5s ease infinite, activeBoxPulse 2.5s ease-in-out infinite;
  color: #ffffff;
  font-weight: 700;
}

.sidebar-nav-item .sidebar-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #64748b !important;
  opacity: 0.6;
  transition: all 0.3s ease;
}

/* ── Discord Suite Dedicated Active Theme (Official Discord Blurple) ── */
@keyframes discordActivePulse {
  0%, 100% {
    box-shadow: 0 0 14px rgba(88, 101, 242, 0.4), inset 0 0 8px rgba(88, 101, 242, 0.2);
    border-color: rgba(88, 101, 242, 0.6);
  }
  50% {
    box-shadow: 0 0 24px rgba(88, 101, 242, 0.75), inset 0 0 14px rgba(88, 101, 242, 0.4);
    border-color: #a5b4fc;
  }
}

/* ── DISCORD THEMED GLOWING ACTIVE SIDEBAR PILL BOX (#5865F2 Blurple Theme) ── */
.sidebar-nav-item.active,
#discord-sidebar-menu .sidebar-nav-item.active {
  position: relative !important;
  background: linear-gradient(135deg, rgba(88, 101, 242, 0.32) 0%, rgba(99, 102, 241, 0.4) 100%) !important;
  border: 2px solid #5865f2 !important;
  border-radius: 14px !important;
  box-shadow: 0 0 24px rgba(88, 101, 242, 0.6), inset 0 0 14px rgba(88, 101, 242, 0.3) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}

.sidebar-nav-item.active .sidebar-dot,
#discord-sidebar-menu .sidebar-nav-item.active .sidebar-dot {
  background: #5865f2 !important;
  opacity: 1 !important;
  box-shadow: 0 0 12px #5865f2, 0 0 6px #818cf8 !important;
  transform: scale(1.35) !important;
}

.sidebar-nav-item.active .sidebar-label,
#discord-sidebar-menu .sidebar-nav-item.active .sidebar-label {
  color: #ffffff !important;
  font-weight: 800 !important;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.7) !important;
}

/* ── Uniform Sidebar Item Layout & Fixed Sizing ── */
#discord-sidebar-menu .sidebar-nav-item,
#main-sidebar-menu .sidebar-nav-item,
#youtube-sidebar-menu .sidebar-nav-item {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 14px !important;
  white-space: nowrap !important;
  margin-bottom: 2px !important;
}

#discord-sidebar-menu .sidebar-label,
#main-sidebar-menu .sidebar-label,
#youtube-sidebar-menu .sidebar-label {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.2 !important;
  font-size: 12.5px !important;
  flex: 1 !important;
}

/* ── YOUTUBE DEDICATED RED ACTIVE THEME ── */
#youtube-sidebar-menu .sidebar-nav-item.active {
  position: relative !important;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.28) 0%, rgba(220, 38, 38, 0.35) 100%) !important;
  border: 2px solid #ef4444 !important;
  border-radius: 14px !important;
  box-shadow: 0 0 24px rgba(239, 68, 68, 0.55), inset 0 0 14px rgba(239, 68, 68, 0.28) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}

#youtube-sidebar-menu .sidebar-nav-item.active .sidebar-dot {
  background: #ef4444 !important;
  opacity: 1 !important;
  box-shadow: 0 0 12px #ef4444 !important;
  transform: scale(1.35) !important;
}

/* ── Discord Pill Button & Smooth News Channel Ticker ── */
@keyframes discordPillPulse {
  0%, 100% {
    box-shadow: 0 4px 18px rgba(88, 101, 242, 0.55), 0 0 25px rgba(88, 101, 242, 0.35);
    border-color: rgba(255, 255, 255, 0.3);
  }
  50% {
    box-shadow: 0 6px 30px rgba(88, 101, 242, 0.95), 0 0 45px rgba(139, 92, 246, 0.7);
    border-color: #ffffff;
  }
}

/* ── Sequence-Driven Motion Graphics Pill Component ── */
.motion-pill-button {
  position: relative !important;
  width: 100% !important;
  height: 44px !important;
  border-radius: 14px !important;
  margin-top: 6px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  cursor: pointer !important;
  user-select: none !important;
  isolation: isolate !important;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.motion-pill-button:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
}

/* Glass & Border Themes (Crisp Frosted Glass with White Sheen & Official Brand Accent) */
.motion-pill-button.discord-pill-news-ticker {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(88, 101, 242, 0.22) 40%, rgba(20, 24, 45, 0.85) 100%) !important;
  border: 1.5px solid rgba(129, 140, 248, 0.55) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25), 0 0 12px rgba(88, 101, 242, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.25) !important;
  backdrop-filter: blur(12px) !important;
}
.motion-pill-button.discord-pill-news-ticker:hover {
  border-color: rgba(165, 180, 252, 0.85) !important;
  box-shadow: 0 6px 22px rgba(88, 101, 242, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.35) !important;
}

.motion-pill-button.youtube-pill-news-ticker {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 0, 0, 0.22) 40%, rgba(38, 16, 20, 0.85) 100%) !important;
  border: 1.5px solid rgba(248, 113, 113, 0.55) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25), 0 0 12px rgba(255, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.25) !important;
  backdrop-filter: blur(12px) !important;
}
.motion-pill-button.youtube-pill-news-ticker:hover {
  border-color: rgba(252, 165, 165, 0.85) !important;
  box-shadow: 0 6px 22px rgba(255, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.35) !important;
}

.motion-pill-button.multistream-pill-news-ticker {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(16, 185, 129, 0.22) 40%, rgba(14, 34, 26, 0.85) 100%) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.55) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25), 0 0 12px rgba(16, 185, 129, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.25) !important;
  backdrop-filter: blur(12px) !important;
}
.motion-pill-button.multistream-pill-news-ticker:hover {
  border-color: rgba(110, 231, 183, 0.85) !important;
  box-shadow: 0 6px 22px rgba(16, 185, 129, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.35) !important;
}

/* Specular Shimmer Sweep */
.motion-pill-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  transform: skewX(-25deg);
  animation: pillSpecularSweep 5.5s infinite ease-in-out;
  pointer-events: none;
  z-index: 1;
}

@keyframes pillSpecularSweep {
  0%, 65% { left: -120%; }
  100% { left: 220%; }
}

/* ── Stage 1: Platform Logo State Machine ── */
.pill-brand-logo {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 20px !important;
  height: 20px !important;
  opacity: 0;
  transform: translate(-50%, 100%) scale(0.7) !important;
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 3 !important;
  pointer-events: none !important;
}

.pill-brand-logo svg {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
}

.discord-pill-news-ticker .pill-brand-logo svg {
  fill: #5865F2 !important;
  filter: drop-shadow(0 0 6px rgba(88, 101, 242, 0.8)) !important;
}

.youtube-pill-news-ticker .pill-brand-logo svg {
  fill: #FF0000 !important;
  filter: drop-shadow(0 0 6px rgba(255, 0, 0, 0.8)) !important;
}

.pill-brand-logo.ms-globe {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #10b981 !important;
  filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.8)) !important;
}

/* State: Center */
.motion-pill-button.logo-center .pill-brand-logo {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1.22) !important;
}

/* State: Left Anchor */
.motion-pill-button.logo-left .pill-brand-logo {
  opacity: 1 !important;
  left: 14px !important;
  transform: translate(0, -50%) scale(1) !important;
}

/* State: Cross-Dissolved */
.motion-pill-button.logo-dissolved .pill-brand-logo {
  opacity: 0 !important;
  left: 14px !important;
  transform: translate(-6px, -50%) scale(0.65) !important;
}

/* ── Stage 2: Brand Text Label ── */
.pill-brand-label {
  position: absolute !important;
  top: 50% !important;
  left: 14px !important;
  width: 66px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  transform: translateY(-50%) scale(1) !important;
  opacity: 1 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Plus Jakarta Sans', 'Inter', 'Segoe UI', Roboto, sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  color: #ffffff !important;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 4 !important;
  pointer-events: none !important;
}

.discord-pill-news-ticker .pill-brand-label {
  color: #FFFFFF !important;
  text-shadow: 0 0 10px rgba(88, 101, 242, 0.9), 0 1px 2px rgba(0, 0, 0, 0.6) !important;
}
.youtube-pill-news-ticker .pill-brand-label {
  color: #FFFFFF !important;
  text-shadow: 0 0 10px rgba(255, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 0.6) !important;
}
.multistream-pill-news-ticker .pill-brand-label {
  color: #FFFFFF !important;
  text-shadow: 0 0 10px rgba(16, 185, 129, 0.9), 0 1px 2px rgba(0, 0, 0, 0.6) !important;
}

/* Label State: Locked on Left */
.motion-pill-button.label-locked .pill-brand-label {
  opacity: 1 !important;
  transform: translateY(-50%) scale(1) !important;
}

/* ── Stage 3: Feature Ticker Viewport: UNIFORM PERFECT VERTICAL ALIGNMENT (X = 88px) ── */
.pill-ticker-viewport,
.discord-pill-news-ticker .pill-ticker-viewport,
.youtube-pill-news-ticker .pill-ticker-viewport,
.multistream-pill-news-ticker .pill-ticker-viewport {
  position: absolute !important;
  left: 88px !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  height: 22px !important;
  overflow: hidden !important;
  opacity: 1 !important;
  transition: opacity 0.4s ease !important;
  z-index: 2 !important;
}

.motion-pill-button.ticker-active .pill-ticker-viewport {
  opacity: 1 !important;
}

/* ── True Directional Conveyor: ALWAYS Enters from Right (+35px) ➔ Rest in Center (0px) ➔ Exits to Left (-35px) ── */
.pill-ticker-item {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 22px !important;
  line-height: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Plus Jakarta Sans', 'Inter', 'Segoe UI', Roboto, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  letter-spacing: 0.15px !important;
  opacity: 1 !important;
  transform: translateX(0px) scale(1) !important;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease !important;
  pointer-events: none !important;
}

/* IN from Right Side (Glides into center) */
.pill-ticker-item.enter {
  opacity: 1 !important;
  transform: translateX(0px) scale(1) !important;
}

/* OUT to Opposite (Left) Side (Glides out through the left) */
.pill-ticker-item.exit {
  opacity: 0 !important;
  transform: translateX(-35px) scale(0.96) !important;
}

.news-live-badge {
  font-size: 8px !important;
  font-weight: 900 !important;
  background: rgba(255, 255, 255, 0.28) !important;
  color: #ffffff !important;
  padding: 2px 6px !important;
  border-radius: 999px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.25) !important;
  flex-shrink: 0 !important;
}

.sidebar-nav-item.active .sidebar-dot {
  background: #a855f7;
  animation: activeDotGlow 1.8s infinite ease-in-out;
}

/* Active Box Emoji Styling & Animation */
.nav-emoji {
  display: inline-block;
  margin-left: auto;
  font-size: 15px;
  transition: transform 0.25s ease;
}

.sidebar-nav-item.active .nav-emoji {
  animation: activeEmojiBounce 2s ease-in-out infinite;
}

.sidebar-nav-item:hover .nav-emoji {
  transform: scale(1.2) rotate(6deg);
}

/* ── Desktop Header ── */
.desktop-header {
  height: var(--desktop-header-height);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 99;
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  transition: transform 0.2s ease;
}

.header-logo:hover {
  transform: scale(1.02);
}

.header-logo-icon {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 40%, #8b5cf6 75%, #ec4899 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.45), 0 4px 12px rgba(139, 92, 246, 0.35), inset 0 1.5px 2px rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.header-logo:hover .header-logo-icon {
  transform: rotate(-6deg) scale(1.1);
  box-shadow: 0 0 28px rgba(6, 182, 212, 0.75), 0 6px 18px rgba(236, 72, 153, 0.5), inset 0 1.5px 2.5px rgba(255, 255, 255, 0.9);
}

.header-logo-text {
  font-family: var(--font-heading, 'Outfit', 'Inter', sans-serif);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.5px;
  background: linear-gradient(135deg, #ffffff 45%, #38bdf8 80%, #c084fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  filter: drop-shadow(0 2px 12px rgba(6, 182, 212, 0.35));
  transition: all 0.25s ease;
}

.logo-version-badge {
  font-size: 9.5px;
  font-weight: 900;
  padding: 2.5px 7px;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.25), rgba(139, 92, 246, 0.3));
  border: 1px solid rgba(6, 182, 212, 0.55);
  color: #22d3ee;
  letter-spacing: 0.8px;
  -webkit-text-fill-color: #22d3ee;
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.35);
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

/* ── Dashboard Nav Item Dedicated Design ── */
#main-sidebar-menu .sidebar-nav-item[data-screen="dashboard"] {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.08) 0%, rgba(59, 130, 246, 0.05) 100%) !important;
  border: 1px solid rgba(6, 182, 212, 0.22) !important;
  border-radius: 12px !important;
  color: #cbd5e1 !important;
  font-weight: 600 !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  padding: 0 12px !important;
  height: 42px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 4px !important;
}

#main-sidebar-menu .sidebar-nav-item[data-screen="dashboard"]:hover {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.18) 0%, rgba(59, 130, 246, 0.12) 100%) !important;
  border-color: rgba(6, 182, 212, 0.5) !important;
  color: #ffffff !important;
  box-shadow: 0 0 14px rgba(6, 182, 212, 0.25), inset 0 0 8px rgba(6, 182, 212, 0.1) !important;
}

#main-sidebar-menu .sidebar-nav-item[data-screen="dashboard"].active {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.2) 0%, rgba(59, 130, 246, 0.15) 100%) !important;
  border: 1.5px solid rgba(6, 182, 212, 0.8) !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 0 14px rgba(6, 182, 212, 0.3), inset 0 0 10px rgba(6, 182, 212, 0.15) !important;
}

#main-sidebar-menu .sidebar-nav-item[data-screen="dashboard"] .sidebar-label {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-shadow: none !important;
}

.nav-icon-wrap {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.nav-icon-wrap.dash-icon {
  background: rgba(6, 182, 212, 0.14);
  border: 1px solid rgba(6, 182, 212, 0.3);
  color: #22d3ee;
  border-radius: 8px;
}

#main-sidebar-menu .sidebar-nav-item[data-screen="dashboard"]:hover .nav-icon-wrap.dash-icon,
#main-sidebar-menu .sidebar-nav-item[data-screen="dashboard"].active .nav-icon-wrap.dash-icon {
  background: linear-gradient(135deg, #06b6d4, #2563eb);
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.4);
  border-radius: 8px;
}

.nav-tag-badge {
  margin-left: auto;
  font-size: 9px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(6, 182, 212, 0.15);
  border: 1px solid rgba(6, 182, 212, 0.35);
  color: #22d3ee;
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
}

#main-sidebar-menu .sidebar-nav-item[data-screen="dashboard"].active .nav-tag-badge {
  background: rgba(6, 182, 212, 0.25);
  color: #67e8f9;
  font-weight: 800;
  border-color: rgba(6, 182, 212, 0.6);
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.3);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-right: 12px;
}

.btn-new-trigger-header {
  padding: 8px 16px;
  background: var(--primary);
  border: none;
  border-radius: var(--radius-md);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
  transition: transform var(--transition-fast), background var(--transition-fast);
}

.btn-new-trigger-header:active {
  transform: scale(0.96);
  background: #7c4fe0;
}

.header-notification {
  width: 32px;
  height: 32px;
  background: var(--bg-input);
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
}

.header-notification .dot {
  width: 6px;
  height: 6px;
  background: var(--accent-pink);
  border-radius: var(--radius-full);
}

.header-avatar-wrap {
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  margin-right: 8px;
  vertical-align: middle;
}

.header-avatar-btn {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  cursor: pointer;
  padding: 4px 10px 4px 6px !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all 0.2s ease;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  height: 36px !important;
  min-width: 52px !important;
}

.header-avatar-btn:hover,
.header-avatar-wrap:hover .header-avatar-btn {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(168, 85, 247, 0.4);
}

.header-avatar {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  max-width: 26px !important;
  max-height: 26px !important;
  background: var(--primary);
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 800;
  font-size: 11px;
  color: #ffffff;
  overflow: hidden !important;
}

.avatar-caret {
  color: var(--text-muted);
  font-size: 10px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  margin-top: 0 !important;
}

/* Profile Dropdown Menu */
.profile-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: rgba(20, 24, 38, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55);
  min-width: 190px;
  display: none;
  flex-direction: column;
  padding: 6px;
  z-index: 9999;
}

.profile-dropdown.open {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  animation: fadeIn var(--transition-fast) forwards;
}

.profile-dropdown-item {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #e2e8f0;
  transition: all 0.2s ease;
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.profile-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.profile-dropdown-item.logout-item {
  color: #f87171;
}

.profile-dropdown-item.logout-item:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #ff6b6b;
}

.profile-dropdown-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 4px 0;
}

/* ── Interactive Modal Close & Cross Button Animations ── */
.modal-close-btn,
.udd-close-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #a1a1aa !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 20px !important;
  line-height: 1 !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  outline: none !important;
}

.modal-close-btn:hover,
.udd-close-btn:hover {
  background: rgba(239, 68, 68, 0.25) !important;
  border-color: rgba(239, 68, 68, 0.6) !important;
  color: #ffffff !important;
  transform: rotate(90deg) scale(1.15) !important;
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.5) !important;
}

.modal-close-btn:active,
.udd-close-btn:active {
  transform: rotate(90deg) scale(0.9) !important;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.3) !important;
}

.btn-got-it {
  padding: 10px 24px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.35), rgba(99, 102, 241, 0.35)) !important;
  border: 1px solid rgba(168, 85, 247, 0.6) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 15px rgba(168, 85, 247, 0.25) !important;
  outline: none !important;
}

.btn-got-it:hover {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.6), rgba(99, 102, 241, 0.6)) !important;
  border-color: rgba(168, 85, 247, 0.9) !important;
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow: 0 6px 22px rgba(168, 85, 247, 0.45) !important;
}

.btn-got-it:active {
  transform: translateY(0) scale(0.96) !important;
  box-shadow: 0 2px 10px rgba(168, 85, 247, 0.2) !important;
}

/* ── Mobile Header ── */
.mobile-header {
  display: none;
  /* Desktop by default */
  height: var(--mobile-header-height);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-default);
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

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

/* ── Desktop Sidebar ── */
.sidebar {
  width: var(--sidebar-width);
  background: var(--bg-surface);
  border-right: 1px solid var(--border-default);
  padding: 16px 12px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: calc(100vh - var(--desktop-header-height));
  position: sticky;
  top: var(--desktop-header-height);
  box-sizing: border-box;
}

#main-sidebar-menu,
#discord-sidebar-menu,
#youtube-sidebar-menu {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
}

#main-sidebar-menu::-webkit-scrollbar,
#discord-sidebar-menu::-webkit-scrollbar,
#youtube-sidebar-menu::-webkit-scrollbar {
  width: 4px;
}
#main-sidebar-menu::-webkit-scrollbar-thumb,
#discord-sidebar-menu::-webkit-scrollbar-thumb,
#youtube-sidebar-menu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  color: var(--text-secondary);
}

.sidebar-nav-item .sidebar-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--text-dim);
  transition: background var(--transition-fast);
}

.sidebar-nav-item .sidebar-label {
  font-size: 14px;
  font-weight: 500;
}

.sidebar-nav-item:hover {
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-primary);
}

/* Active styling is dynamically handled by Screenshot 2 exact match rule */

/* ── Main Content Area ── */
.main-content {
  flex: 1;
  padding: 24px 32px;
  max-width: 100%;
  width: 100%;
}

/* 🎮 DISCORD SUITE HIGH-PERFORMANCE DEDICATED SCROLL SYSTEM */
@media (min-width: 769px) {
  body[data-screen="discord"] {
    overflow: hidden !important;
  }

  body[data-screen="discord"] .desktop-footer {
    display: none !important;
  }

  body[data-screen="discord"] .main-content {
    height: calc(100vh - var(--desktop-header-height)) !important;
    max-height: calc(100vh - var(--desktop-header-height)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scroll-behavior: smooth !important;
    padding: 24px 32px 100px 32px !important;
    box-sizing: border-box !important;
  }
}

/* Discord Specific Scrollbars & Containers */
#screen-discord {
  min-height: 100%;
  padding-bottom: 40px;
}

#discord-main-overview-section {
  padding-bottom: 40px;
}

#discord-inline-plugin-workspace {
  margin-bottom: 40px;
}

#plugin-workspace-master-bar {
  position: sticky;
  top: -24px;
  z-index: 30;
  background: rgba(18, 19, 26, 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 16px 16px 0 0;
  padding: 14px 18px !important;
  margin: -24px -24px 20px -24px !important;
  border-bottom: 1px solid rgba(88, 101, 242, 0.25) !important;
}

@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Page Headings ── */
.page-heading-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
}

.page-heading {
  margin-bottom: 24px;
}

.page-heading h1 {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.page-heading p {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* ── Stat Cards Grid Layout ── */
.stats-row,
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 24px;
}

.stat-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.stat-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stat-dot {
  width: 9px;
  height: 9px;
  border-radius: var(--radius-full);
}

.stat-dot.purple {
  background: var(--primary);
}

.stat-dot.pink {
  background: var(--accent-pink);
}

.stat-dot.green {
  background: var(--accent-green);
}

.stat-dot.yellow {
  background: var(--accent-yellow);
}

.stat-value {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
}

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

.stat-trend {
  font-size: 11px;
  font-weight: 500;
  margin-top: 4px;
}

.stat-trend.purple {
  color: var(--primary-light);
}

.stat-trend.green {
  color: var(--accent-green);
}

.stat-trend.yellow {
  color: var(--accent-yellow);
}

.stat-trend.pink {
  color: var(--accent-pink);
}

/* ── Layout Grid and Rows ── */
.two-col-row {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
}

.flex-1 {
  flex: 1;
}

.flex-2 {
  flex: 2;
}

/* ── Content Cards ── */
.content-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.card-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--accent-green);
}

.card-title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
}

/* ── Timeline ── */
.timeline-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
}

.timeline-item+.timeline-item {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.timeline-avatar {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-full);
  background: rgba(139, 92, 246, 0.25);
  flex-shrink: 0;
}

.timeline-content {
  flex: 1;
  min-width: 0;
}

.timeline-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-body);
}

.timeline-time {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
}

/* ── Triggers ── */
.trigger-item {
  background: var(--bg-input);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 8px;
}

.trigger-item:last-child {
  margin-bottom: 0;
}

.trigger-keyword {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary-light);
  margin-bottom: 4px;
}

.trigger-reply {
  font-size: 12px;
  color: var(--text-subtle);
}

/* ── Platform List (Dashboard) ── */
.platform-list-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
}

.platform-list-item+.platform-list-item {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.pl-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pl-info {
  flex: 1;
}

.pl-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-body);
}

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

/* ── Quick Actions ── */
.quick-action-btn {
  width: 100%;
  padding: 12px;
  background: var(--bg-input);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  color: var(--text-card);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  margin-bottom: 8px;
  transition: all var(--transition-fast);
}

.quick-action-btn:last-child {
  margin-bottom: 0;
}

.quick-action-btn:hover {
  background: var(--bg-elevated);
  border-color: var(--border-strong);
}

.platform-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 24px;
}

.platform-tab {
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-light);
  background: var(--bg-card-inner);
  border: 1px solid var(--border-medium);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.platform-tab:hover {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-1px);
}

.platform-tab.active {
  color: #fff;
}

.platform-tab[data-platform="ig"].active {
  background: var(--accent-pink);
  border-color: var(--accent-pink);
}

.platform-tab[data-platform="yt"].active {
  background: var(--accent-red);
  border-color: var(--accent-red);
}

.platform-tab[data-platform="tt"].active {
  background: #00f2fe !important;
  border-color: #00f2fe !important;
  color: #000000 !important;
  font-weight: 700 !important;
}

.platform-tab[data-platform="fb"].active {
  background: #1877F2 !important;
  border-color: #1877F2 !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

.platform-tab[data-platform="li"].active {
  background: #0A66C2 !important;
  border-color: #0A66C2 !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

.platform-tab[data-platform="wa"].active {
  background: #25D366 !important;
  border-color: #25D366 !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

.platform-tab[data-platform="wc"].active {
  background: #07C160 !important;
  border-color: #07C160 !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

.platform-tab[data-platform="tg"].active {
  background: #24A1DE !important;
  border-color: #24A1DE !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

.platform-tab[data-platform="dc"].active {
  background: #5865F2 !important;
  border-color: #5865F2 !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

.platform-tab[data-platform="gm"].active {
  background: #EA4335 !important;
  border-color: #EA4335 !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

.platform-tab[data-platform="kick"].active {
  background: #53FC18 !important;
  border-color: #53FC18 !important;
  color: #000000 !important;
  font-weight: 700 !important;
  box-shadow: 0 0 14px rgba(83, 252, 24, 0.4) !important;
}

.platform-tab[data-platform="twitch"].active {
  background: #9146FF !important;
  border-color: #9146FF !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  box-shadow: 0 0 14px rgba(145, 70, 255, 0.4) !important;
}

/* Platform-Specific Triggers Brand Themes */
#triggers-container.ig .toggle.active {
  background: var(--accent-pink);
}

#triggers-container.ig .trigger-row-keyword {
  color: #f472b6;
  /* High contrast brand pink */
}

#triggers-container.yt .toggle.active {
  background: var(--accent-red);
}

#triggers-container.yt .trigger-row-keyword {
  color: var(--accent-red-light);
  /* High contrast brand red */
}

#triggers-container.tg .toggle.active {
  background: #24A1DE;
}

#triggers-container.tg .trigger-row-keyword {
  color: #38bdf8;
}

#triggers-container.dc .toggle.active {
  background: #5865F2;
}

#triggers-container.dc .trigger-row-keyword {
  color: #818cf8;
}

#triggers-container.gm .toggle.active {
  background: #EA4335;
}

#triggers-container.gm .trigger-row-keyword {
  color: #f87171;
}

.platform-tab.disabled {
  color: var(--text-dim);
  opacity: 0.6;
  cursor: not-allowed;
}

.trigger-list {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: 16px;
}

.trigger-row {
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.trigger-row:last-child {
  margin-bottom: 0;
}

.toggle {
  width: 40px;
  height: 22px;
  border-radius: 20px;
  background: var(--border-muted);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast);
  margin-top: 2px;
}

.toggle.active {
  background: var(--primary);
}

.toggle::after {
  content: '';
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: var(--radius-full);
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform var(--transition-fast);
}

.toggle.active::after {
  transform: translateX(18px);
}

.trigger-row-content {
  flex: 1;
  min-width: 0;
}

.trigger-row-keyword {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-light);
  margin-bottom: 4px;
}

.trigger-row-reply {
  font-size: 13px;
  color: var(--text-light);
  margin-bottom: 4px;
}

.trigger-row-scope {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-dim);
}

.trigger-row-scope .scope-dot {
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  background: var(--text-dim);
}

.trigger-row-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.btn-edit,
.btn-delete {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  border: none;
  transition: all var(--transition-fast);
}

.btn-edit {
  background: transparent;
  border: 1px solid var(--border-button);
  color: var(--text-light);
}

.btn-delete {
  background: var(--accent-red-bg);
  color: var(--accent-red-light);
}

.btn-edit:hover {
  background: rgba(255, 255, 255, 0.02);
}

.btn-delete:hover {
  opacity: 0.9;
}

/* ── Connected Accounts ── */
.platform-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: 24px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.platform-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
}

.platform-icon.instagram {
  background: var(--accent-pink);
}

.platform-icon.youtube {
  background: var(--accent-red);
}

.platform-icon.tiktok {
  background: var(--text-icon-muted);
}

.platform-info {
  flex: 1;
}

.platform-name {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.platform-name span {
  font-size: 16px;
  font-weight: 600;
}

.badge {
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
}

.badge.connected {
  background: var(--accent-green-bg);
  color: var(--accent-green);
}

.badge.premium {
  background: var(--accent-yellow-bg);
  color: var(--accent-yellow);
}

.badge.coming-soon {
  background: var(--accent-gray-bg);
  color: var(--text-muted);
}

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

.btn-manage,
.btn-notify {
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-manage {
  border: 1px solid var(--primary);
  background: transparent;
  color: var(--primary-light);
}

.btn-manage:hover {
  background: var(--primary-bg);
}

.btn-notify {
  border: none;
  background: var(--bg-elevated);
  color: var(--text-muted);
}

.section-heading {
  margin: 32px 0 16px;
}

.section-heading h2 {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
}

.section-heading p {
  font-size: 13px;
  color: var(--text-secondary);
}

.account-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.account-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  background: var(--bg-card-inner);
  border: 1px solid var(--border-medium);
  cursor: pointer;
}

.account-tab.active {
  background: var(--primary);
  border-color: var(--primary);
}

.account-tab-icon {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
}

.account-tab-info .account-tab-name {
  font-size: 13px;
  font-weight: 600;
}

.account-tab-info .account-tab-platform {
  font-size: 11px;
  color: var(--text-muted);
}

.account-tab.active .account-tab-platform {
  color: rgba(229, 217, 250, 0.8);
}

/* ── Analytics (Charts) ── */
.bar-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  height: 160px;
  padding-top: 16px;
}

.bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.bar {
  width: 24px;
  background: var(--primary);
  border-radius: var(--radius-sm);
  transition: height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  min-height: 4px;
}

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

/* Breakdown Progress Bars */
.platform-breakdown-item {
  margin-bottom: 16px;
}

.platform-breakdown-item:last-child {
  margin-bottom: 0;
}

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

.breakdown-name {
  font-size: 12px;
  font-weight: 500;
}

.breakdown-percent {
  font-size: 12px;
  font-weight: 600;
}

.breakdown-bar {
  height: 8px;
  background: var(--border-default);
  border-radius: 4px;
  overflow: hidden;
}

.breakdown-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.breakdown-fill.pink {
  background: var(--accent-pink);
}

.breakdown-fill.red {
  background: var(--accent-red);
}

/* ── Settings Screen ── */
.settings-section {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: 24px;
  margin-bottom: 24px;
}

.settings-section-title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
}

.profile-photo-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.profile-avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--primary);
}

.btn-change-photo {
  padding: 8px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-light);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.settings-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-light);
}

.form-input {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-input);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text-card);
  font-size: 13px;
  outline: none;
}

.btn-save {
  padding: 10px 24px;
  background: var(--primary);
  border: none;
  border-radius: var(--radius-md);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.notification-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
}

.notification-row+.notification-row {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.notification-label {
  font-size: 13px;
  color: var(--text-card);
}

/* Billing & Danger Zone settings elements */
.plan-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.plan-title {
  font-size: 13px;
  color: var(--text-muted);
}

.plan-detail {
  font-size: 16px;
  font-weight: 600;
}

.plan-usage {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.plan-bar {
  height: 8px;
  background: var(--border-default);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 20px;
}

.plan-bar-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 4px;
  transition: width 0.8s ease;
}

.btn-manage-billing {
  padding: 10px 20px;
  background: transparent;
  border: 1px solid var(--primary);
  border-radius: var(--radius-md);
  color: var(--primary-light);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.danger-section {
  border-color: rgba(237, 64, 77, 0.3);
}

.danger-text {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.btn-danger {
  padding: 10px 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--accent-red);
  background: transparent;
  color: var(--accent-red-light);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

/* Button generic helper */
.btn-primary-sm {
  padding: 8px 16px;
  background: var(--primary);
  border: none;
  border-radius: var(--radius-md);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

/* ── Desktop Footer ── */
.desktop-footer {
  background: transparent;
  border-top: none;
  min-height: auto;
  height: auto;
  display: block;
  padding: 0;
  margin-top: auto;
  width: 100%;
  box-sizing: border-box;
}

/* ═════════════════════════════════════════════════════════════════
   📌 GLOBAL MODAL OVERLAY ENGINE
   ═════════════════════════════════════════════════════════════════ */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 99999;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}
.modal-overlay.active {
  display: flex !important;
}

/* ═════════════════════════════════════════════════════════════════
   ⚡ INFINITE SCROLLING SOCIAL PLATFORMS MARQUEE
   ═════════════════════════════════════════════════════════════════ */
.marquee-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 10px 0;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-track {
  display: flex;
  gap: 16px;
  width: max-content;
  will-change: transform;
}

.marquee-track-left {
  animation: scrollLeft 36s linear infinite;
}

.marquee-track-right {
  animation: scrollRight 36s linear infinite;
}

.marquee-container:hover .marquee-track {
  animation-play-state: paused;
}

.platform-marquee-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(18, 19, 26, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 12px 20px;
  white-space: nowrap;
  transition: all 0.25s ease;
  cursor: pointer;
}
.platform-marquee-card:hover {
  background: rgba(168, 85, 247, 0.18);
  border-color: rgba(168, 85, 247, 0.5);
  box-shadow: 0 8px 25px rgba(168, 85, 247, 0.25);
  transform: translateY(-2px);
}

.platform-marquee-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.platform-marquee-title {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
}

.platform-marquee-sub {
  font-size: 11px;
  color: #a1a1aa;
  margin-top: 1px;
}

@keyframes scrollLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes scrollRight {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

/* ── Dedicated Page Transition Animation ── */
@keyframes pageSlideIn {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.animate-page-enter {
  animation: pageSlideIn 0.38s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ── Neon Tab Glow Animation & Single-Line Tab Styling ── */
@keyframes neonTabPulse {
  0% {
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.5), 0 0 20px rgba(168, 85, 247, 0.3);
    border-color: rgba(168, 85, 247, 0.7);
  }
  50% {
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.9), 0 0 35px rgba(168, 85, 247, 0.6);
    border-color: rgba(192, 132, 252, 1);
  }
  100% {
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.5), 0 0 20px rgba(168, 85, 247, 0.3);
    border-color: rgba(168, 85, 247, 0.7);
  }
}

.sim-tab-btn {
  padding: 8px 14px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #a1a1aa !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  margin: 3px !important;
}

.sim-tab-btn:hover {
  background: rgba(168, 85, 247, 0.18) !important;
  color: #ffffff !important;
  border-color: rgba(168, 85, 247, 0.5) !important;
}

.sim-tab-btn.active {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.4) 0%, rgba(99, 102, 241, 0.4) 100%) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  border-color: rgba(192, 132, 252, 0.9) !important;
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.6), 0 0 28px rgba(168, 85, 247, 0.3) !important;
  animation: neonTabPulse 2.2s infinite ease-in-out !important;
}

/* ── Live Pulsing Indicator Dots Animation ── */
@keyframes liveDotPulsePurple {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.8); opacity: 0.8; }
  70% { transform: scale(1.25); box-shadow: 0 0 0 8px rgba(168, 85, 247, 0); opacity: 1; }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(168, 85, 247, 0); opacity: 0.8; }
}

@keyframes liveDotPulsePink {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.8); opacity: 0.8; }
  70% { transform: scale(1.25); box-shadow: 0 0 0 8px rgba(236, 72, 153, 0); opacity: 1; }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(236, 72, 153, 0); opacity: 0.8; }
}

@keyframes liveDotPulseGreen {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.8); opacity: 0.8; }
  70% { transform: scale(1.25); box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); opacity: 1; }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); opacity: 0.8; }
}

@keyframes liveDotPulseYellow {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.8); opacity: 0.8; }
  70% { transform: scale(1.25); box-shadow: 0 0 0 8px rgba(245, 158, 11, 0); opacity: 1; }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); opacity: 0.8; }
}

.stat-dot.purple { animation: liveDotPulsePurple 2s infinite ease-in-out !important; }
.stat-dot.pink { animation: liveDotPulsePink 2.2s infinite ease-in-out !important; }
.stat-dot.green { animation: liveDotPulseGreen 1.8s infinite ease-in-out !important; }
.stat-dot.yellow { animation: liveDotPulseYellow 2.4s infinite ease-in-out !important; }

/* ── Staggered Entrance Animation for Dashboard Cards ── */
@keyframes dashCardSlideUp {
  0% { opacity: 0; transform: translateY(28px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.dash-stagger-1 { animation: dashCardSlideUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both; }
.dash-stagger-2 { animation: dashCardSlideUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both; }
.dash-stagger-3 { animation: dashCardSlideUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both; }
.dash-stagger-4 { animation: dashCardSlideUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.24s both; }
.dash-stagger-5 { animation: dashCardSlideUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.30s both; }

/* ═════════════════════════════════════════════════════════════════
   🌐 STANDALONE LANDING NAVBAR & DROPDOWN ENGINE
   ═════════════════════════════════════════════════════════════════ */
.standalone-nav-link {
  color: #a1a1aa;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  padding: 6px 4px;
}
.standalone-nav-link:hover {
  color: #ffffff;
}

.nav-dropdown-btn {
  background: none;
  border: none;
  color: #a1a1aa;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 4px;
  transition: all 0.2s ease;
}
.nav-dropdown-btn:hover,
.nav-dropdown-wrap.active .nav-dropdown-btn {
  color: #ffffff;
}

.nav-dropdown-menu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: absolute;
  top: calc(100% + 4px);
  left: -10px;
  background: rgba(15, 16, 22, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85), 0 0 30px rgba(168, 85, 247, 0.15);
  z-index: 1200;
}
.nav-dropdown-wrap:hover .nav-dropdown-menu,
.nav-dropdown-wrap.open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  display: block !important;
}

.nav-dropdown-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
  color: #ffffff;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}
.nav-dropdown-item:hover {
  background: rgba(168, 85, 247, 0.15);
  border-color: rgba(168, 85, 247, 0.3);
  transform: translateX(3px);
}
.nav-dropdown-item-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.nav-dropdown-item:hover .nav-dropdown-item-icon {
  background: rgba(168, 85, 247, 0.25);
  border-color: rgba(168, 85, 247, 0.5);
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.3);
}

.standalone-mobile-toggle {
  display: none;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
}

/* Responsive Breakpoints */
@media (max-width: 900px) {
  .standalone-desktop-nav {
    display: none !important;
  }
  .standalone-mobile-toggle {
    display: flex !important;
  }
  .auth-grid-container {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

.footer-logo-icon {
  width: 18px;
  height: 18px;
  background: var(--primary);
  border-radius: 6px;
}

.footer-logo-text {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-light);
}

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

.footer-links a {
  color: var(--text-muted);
  font-size: 12px;
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--text-primary);
}

.footer-right {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--text-dim);
}

/* ── Mobile Bottom Nav (Initially hidden) ── */
.bottom-nav {
  display: none;
}

/* ── Modals (Universal) ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

.modal-overlay.open {
  display: flex;
  animation: fadeIn 0.25s ease forwards;
}

.modal-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-2xl);
  width: 100%;
  max-width: 480px;
  padding: 32px;
  box-shadow: var(--shadow-modal);
  animation: scaleUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-card-wide {
  max-width: 920px;
}

.modal-handle {
  display: none;
  /* Only show on mobile */
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes scaleUp {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.modal-title {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 24px;
}

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

.modal-form-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-light);
  margin-bottom: 8px;
}

.modal-input,
.modal-textarea {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-input);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text-card);
  font-size: 13px;
  outline: none;
  font-family: var(--font-body);
}

.modal-input:focus,
.modal-textarea:focus {
  border-color: var(--primary);
}

.modal-textarea {
  resize: none;
  min-height: 80px;
}

.response-type-toggle {
  display: flex;
  gap: 4px;
  background: rgba(0, 0, 0, 0.2);
  padding: 4px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-default);
}

.response-type-btn {
  flex: 1;
  padding: 10px;
  font-size: 13px;
  color: var(--text-subtle);
  background: var(--bg-input);
  border: 1px solid var(--border-strong);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.response-type-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 600;
}

.modal-actions {
  position: sticky;
  bottom: -24px;
  z-index: 50;
  background: var(--bg-surface, #16161D);
  padding: 12px 0 4px 0;
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.modal-actions button {
  flex: 1;
  padding: 12px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
}

.modal-actions .btn-secondary {
  background: transparent;
  border: 1px solid var(--border-button);
  color: var(--text-light);
}

.modal-actions .btn-primary {
  background: var(--primary);
  border: none;
  color: #fff;
}

/* ── Pricing Cards ── */
.pricing-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: -16px;
  margin-bottom: 24px;
}

.pricing-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: start;
}

.pricing-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-xl);
  padding: 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 310px;
}

.pricing-card.featured {
  background: var(--primary-bg-strong);
  border-color: var(--primary);
  min-height: 347px;
  margin-top: -18px;
  /* Lift featured card slightly on desktop */
}

.pricing-badge {
  display: inline-block;
  padding: 3px 12px;
  background: var(--primary);
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 12px;
  align-self: flex-start;
}

.pricing-plan-name {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 4px;
}

.pricing-price {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 2px;
}

.pricing-limit {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.pricing-features {
  list-style: none;
  margin-bottom: auto;
  /* Push select button to bottom */
}

.pricing-features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-light);
  margin-bottom: 10px;
}

.pricing-features li .feature-dot {
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
}

.pricing-features li .feature-dot.gray {
  background: var(--text-dim);
}

.pricing-features li .feature-dot.purple {
  background: var(--primary-light);
}

.pricing-card button {
  width: 100%;
  padding: 10px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 16px;
  font-family: var(--font-body);
}

.pricing-card button.outline {
  background: transparent;
  border: 1px solid var(--border-muted);
  color: var(--text-light);
}

.pricing-card button.filled {
  background: var(--primary);
  border: none;
  color: #fff;
}

/* Universal Discord Welcome Templates Grid (2 in 1 line) */
#welcome-templates-container {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  margin-bottom: 24px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ========================================
   RESPONSIVE DESIGN — 100% MOBILE & TABLET MASTER OVERHAUL
   ======================================== */

@media (max-width: 768px) {

  /* Dimensions & Shell */
  :root {
    --desktop-header-height: 0px;
    --mobile-header-height: 56px;
    --bottom-nav-height: 64px;
  }

  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    background: var(--bg-base);
    -webkit-text-size-adjust: 100%;
  }

  .app-shell {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    background: var(--bg-base);
    min-height: 100vh;
    overflow-x: hidden;
  }

  /* Show / Hide Views */
  .desktop-header {
    display: none !important;
  }

  .mobile-header {
    display: flex !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: calc(var(--mobile-header-height) + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 14px 0 14px;
    background: rgba(15, 17, 23, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    align-items: center;
    justify-content: space-between;
    z-index: 999;
    box-sizing: border-box;
  }

  .sidebar {
    display: none !important;
  }

  .desktop-footer {
    display: none !important;
  }

  .bottom-nav {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    transform: none;
    height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
    background: rgba(15, 17, 23, 0.94);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    align-items: center;
    justify-content: space-around;
    padding: 0 8px env(safe-area-inset-bottom, 0px) 8px;
    z-index: 1000;
    box-sizing: border-box;
  }

  /* Body Padding adjustments for mobile sticky headers & bottom navs */
  .body-row {
    flex-direction: column;
    width: 100%;
  }

  .main-content {
    padding: 14px 12px calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 12px) + 24px) 12px !important;
    margin-top: calc(var(--mobile-header-height) + env(safe-area-inset-top, 0px)) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* Universal iOS Zoom Prevention & Input Polish */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* Grid Conversions & Dashboard Reflow */
  .dash-main-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
  }

  .dash-main-grid > div {
    width: 100% !important;
  }

  .dash-stats-grid,
  .stats-row,
  .stat-grid-4,
  .quick-hubs-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    margin-bottom: 8px !important;
  }

  .quick-hub-card {
    padding: 12px 10px !important;
    min-height: 135px !important;
    border-radius: 14px !important;
  }

  .stat-card {
    padding: 14px 12px !important;
    border-radius: 14px !important;
    min-height: 96px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }

  .stat-card .stat-value {
    font-size: 20px !important;
    font-weight: 800 !important;
  }

  .stat-card .stat-label {
    font-size: 10.5px !important;
    line-height: 1.3 !important;
  }

  .dash-charts-grid,
  .dash-stagger-3 {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
  }

  .dash-charts-grid > div {
    width: 100% !important;
  }

  /* Welcome Banner Wrap & Alignment */
  .welcome-banner,
  .welcome-banner-card {
    padding: 18px 14px !important;
    border-radius: 16px !important;
  }

  .welcome-banner-actions,
  .welcome-actions-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .welcome-banner-actions button,
  .welcome-banner-actions a,
  .welcome-actions-row > div {
    flex: 1 1 auto !important;
    min-width: 130px !important;
    text-align: center !important;
    justify-content: center !important;
  }

  .two-col-row {
    flex-direction: column !important;
    gap: 14px !important;
  }

  .settings-form-row {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Modals to Native Mobile Bottom Sheets */
  .modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .modal-card {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 24px 24px 0 0 !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    animation: slideUp 0.35s cubic-bezier(0.32, 0.72, 0, 1) !important;
    box-sizing: border-box !important;
  }

  .modal-handle {
    display: block !important;
    width: 42px !important;
    height: 5px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 3px !important;
    margin: 0 auto 18px !important;
  }

  @keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

  .modal-overlay.closing .modal-card {
    animation: slideDown 0.25s ease forwards !important;
  }

  @keyframes slideDown {
    from { transform: translateY(0); }
    to { transform: translateY(100%); }
  }

  /* Pricing modal stack on mobile */
  .pricing-cards {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .pricing-card.featured {
    margin-top: 0 !important;
    min-height: auto !important;
  }

  /* Navigation Item Polish */
  .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    min-height: 48px;
    min-width: 52px;
  }

  .nav-item .nav-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .nav-item .nav-icon svg {
    width: 20px;
    height: 20px;
    stroke: var(--text-muted);
    fill: none;
    stroke-width: 1.8;
  }

  .nav-item .nav-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.2px;
  }

  .nav-item.active .nav-icon svg {
    stroke: #ec4899;
    filter: drop-shadow(0 0 6px rgba(236, 72, 153, 0.6));
  }

  .nav-item.active .nav-label {
    color: #ec4899;
    font-weight: 700;
  }

  /* 3-Column Workspace Responsive Mobile Reflow: Order Sub-Sidebar (1), Action Sidebar (2), Main Area (3) */
  .workspace-grid-layout,
  .workspace-grid-layout-3col {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
  }

  .workspace-grid-layout-3col > div {
    width: 100% !important;
  }

  .workspace-sub-sidebar {
    order: 1 !important;
    position: static !important;
    top: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 12px !important;
    border-radius: 14px !important;
  }

  /* Move Publishing & Control action buttons up to the top below profiles */
  .workspace-action-sidebar {
    order: 2 !important;
    position: static !important;
    top: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 12px !important;
    border-radius: 14px !important;
    gap: 10px !important;
    margin-bottom: 2px !important;
  }

  .workspace-action-sidebar > div:first-child {
    padding-bottom: 6px !important;
  }

  /* Action Buttons Grid in Mobile Action Sidebar */
  .workspace-action-sidebar > div:last-child {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* If 3 buttons: let the primary action span full width */
  .workspace-action-sidebar > div:last-child > button:first-child:nth-last-child(3) {
    grid-column: span 2 !important;
  }

  /* If only 1 button: span full width */
  .workspace-action-sidebar > div:last-child > button:only-child {
    grid-column: span 2 !important;
  }

  .workspace-action-sidebar .btn-manage,
  .workspace-action-sidebar .btn-disconnect {
    padding: 8px 10px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    border-radius: 9px !important;
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .workspace-main-area {
    order: 3 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Horizontal Profile Picker on Mobile */
  .vertical-account-list {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 8px !important;
    padding-bottom: 8px !important;
    width: 100% !important;
  }

  .vertical-account-list::-webkit-scrollbar {
    height: 4px;
  }

  .vertical-account-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
  }

  .account-tab {
    flex-shrink: 0 !important;
    padding: 8px 14px !important;
    border-radius: 12px !important;
  }

  /* Filter Tabs Momentum Scrolling on Mobile */
  .account-content-filters,
  .filter-tabs,
  .sub-tabs,
  .yt-sub-tabs {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
    gap: 6px !important;
    padding-bottom: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .filter-tab,
  .sub-tab {
    flex-shrink: 0 !important;
    padding: 8px 14px !important;
    font-size: 12px !important;
  }

  /* Post Row Mobile Layout */
  .account-post-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 14px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .post-row-left {
    width: 100% !important;
  }

  .post-row-right,
  .account-post-actions {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  .btn-set-trigger,
  .btn-toggle-ai-reply {
    min-height: 36px !important;
    padding: 6px 12px !important;
  }

  /* ═══════════════════════════════════════════════════════════════
     CONNECTED ACCOUNTS REFLOW & MOBILE ALIGNMENT (STRICTLY <= 768px)
     ═══════════════════════════════════════════════════════════════ */
  .connected-account-header-card,
  .platform-card,
  .platform-card-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    padding: 16px 14px !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .platform-card .platform-info {
    width: 100% !important;
  }

  .platform-card .platform-name {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .connected-account-header-card > div:last-child,
  .platform-card-header > div:last-child,
  .platform-card > div:last-child {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }

  .btn-connect-card,
  .btn-howto-connect,
  .platform-card .btn-connect-card,
  .platform-card .btn-howto-connect {
    width: 100% !important;
    justify-content: center !important;
    min-height: 38px !important;
    height: 38px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    text-align: center !important;
    padding: 4px 8px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  #accounts-directory-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100% !important;
  }

  .platform-hub-card {
    padding: 16px 14px !important;
  }

  /* Content Cards in Main Area */
  [id^="posts-card-"],
  .workspace-main-area > .content-card {
    padding: 12px 10px !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  /* Filter Tabs Momentum Scrolling on Mobile */
  .media-filter-bar {
    display: flex !important;
    gap: 6px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 6px !important;
    margin-bottom: 12px !important;
    scrollbar-width: none !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .media-filter-bar::-webkit-scrollbar {
    display: none !important;
  }

  .media-filter-tab {
    padding: 6px 12px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
    min-height: 32px !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
  }

  /* Post List Row Cards on Mobile -> Upgraded to 2-Column Grid Across All Social Media */
  .posts-grid-container {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .post-list-row-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    gap: 6px !important;
    padding: 8px !important;
    border-radius: 12px !important;
    background: rgba(18, 19, 26, 0.88) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    transition: all 0.2s ease !important;
  }

  .post-list-row-card > a:first-child,
  .post-list-row-card > .post-list-thumb {
    width: 100% !important;
    display: block !important;
    flex-shrink: 0 !important;
  }

  .post-list-row-card .post-list-thumb {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #0b0f19 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
  }

  .post-list-row-card .post-list-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  .post-list-row-card .post-list-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 2px !important;
    flex: 1 !important;
  }

  .post-list-row-card .post-list-title-row {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .post-list-row-card .post-card-caption {
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #ffffff !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: break-word !important;
    margin: 0 !important;
    min-height: 28px !important;
    max-height: 28px !important;
  }

  .post-list-row-card .post-card-type-badge {
    font-size: 8px !important;
    padding: 1px 4px !important;
    border-radius: 4px !important;
    flex-shrink: 0 !important;
    line-height: 1.2 !important;
  }

  .post-list-row-card .post-list-meta-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 3px !important;
    margin-top: 2px !important;
  }

  .post-list-row-card .post-list-meta-tag {
    font-size: 8.5px !important;
    padding: 1px 5px !important;
    border-radius: 4px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: #94a3b8 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  .post-list-row-card .post-list-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    width: 100% !important;
    margin-top: 6px !important;
    padding-top: 6px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  }

  .post-list-row-card .post-list-actions .action-btn-animated {
    width: 100% !important;
    min-height: 26px !important;
    height: 26px !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    padding: 2px 6px !important;
    border-radius: 6px !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .post-list-row-card .btn-set-trigger {
    grid-column: auto !important;
    min-height: 30px !important;
    height: 30px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    border-radius: 7px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ═══════════════════════════════════════════════════════════════
     DISCORD AUTOMATION & PLUGIN WORKSPACE OVERHAUL (MOBILE <= 768px)
     ═══════════════════════════════════════════════════════════════ */
  /* Discord Screen Header & Action Row */
  #screen-discord .page-heading {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    margin-bottom: 18px !important;
    padding: 16px 14px !important;
    background: rgba(18, 20, 30, 0.75) !important;
    border-radius: 18px !important;
    border: 1px solid rgba(88, 101, 242, 0.25) !important;
  }

  #screen-discord .page-heading > div:first-child {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
  }

  #screen-discord .page-heading > div:last-child {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  #dc-account-badge-wrap {
    width: 100% !important;
    justify-content: center !important;
    min-height: 38px !important;
    box-sizing: border-box !important;
  }

  #dc-switch-account-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    width: 100% !important;
  }

  #dc-switch-account-wrap > span {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
  }

  #dc-switch-account-select {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
  }

  #btn-dc-connect-top,
  #btn-dc-disconnect-top {
    width: 100% !important;
    min-height: 44px !important;
    justify-content: center !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    margin-top: 2px !important;
  }

  /* ═══════════════════════════════════════════════════════════════
     DISCORD OVERVIEW QUICK METRICS (2x2 SMART COMPACT GRID ON MOBILE)
     ═══════════════════════════════════════════════════════════════ */
  .dc-overview-metrics-grid,
  #discord-main-overview-section .dc-overview-metrics-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .dc-overview-metrics-grid .dc-metric-card {
    padding: 12px 10px !important;
    border-radius: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-align: center !important;
    gap: 8px !important;
    min-height: 102px !important;
    box-sizing: border-box !important;
  }

  .dc-overview-metrics-grid .dc-metric-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
    font-size: 17px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  .dc-overview-metrics-grid .dc-metric-text {
    width: 100% !important;
    text-align: center !important;
  }

  .dc-overview-metrics-grid .dc-metric-title {
    font-size: 10.5px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: var(--text-muted) !important;
    margin-bottom: 2px !important;
    text-align: center !important;
  }

  .dc-overview-metrics-grid .dc-metric-value {
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    margin: 2px 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
  }

  .dc-overview-metrics-grid .dc-metric-sub {
    font-size: 9.5px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
  }

  /* Hide Creator Live Usage & Executive Analytics Strip on Mobile View */
  #dc-creator-analytics-strip,
  .dc-creator-analytics-strip {
    display: none !important;
  }

  /* ═══════════════════════════════════════════════════════════════
     ALL 10 DISCORD PLUGINS OVERVIEW (2x2 CENTER-ALIGNED SMART GRID ON MOBILE)
     ═══════════════════════════════════════════════════════════════ */
  .dc-plugins-overview-grid,
  #screen-discord .dc-plugins-overview-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .dc-plugins-overview-grid > div {
    padding: 14px 10px 12px 10px !important;
    border-radius: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
    min-height: 220px !important;
  }

  /* Top Card Container: Center-aligned */
  .dc-plugins-overview-grid > div > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
  }

  /* Plugin Header Row on Mobile: Centered stack of icon, title, badge */
  .dc-plugins-overview-grid > div > div:first-child > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 6px !important;
    margin-bottom: 8px !important;
    width: 100% !important;
  }

  /* Title & Icon container: Centered */
  .dc-plugins-overview-grid > div > div:first-child > div:first-child > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    text-align: center !important;
  }

  /* Icon: Centered at top */
  .dc-plugins-overview-grid > div > div:first-child > div:first-child > div:first-child > div:first-child {
    width: 34px !important;
    height: 34px !important;
    font-size: 17px !important;
    border-radius: 10px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  /* Title: Centered */
  .dc-plugins-overview-grid > div > div:first-child > div:first-child > div:first-child > strong {
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    text-align: center !important;
    width: 100% !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* Badge: Centered below title */
  .dc-plugins-overview-grid > div > div:first-child > div:first-child > span[class*="dc-plugin-badge"] {
    font-size: 8.5px !important;
    font-weight: 700 !important;
    padding: 2px 7px !important;
    border-radius: 5px !important;
    align-self: center !important;
    margin: 0 auto !important;
    display: inline-block !important;
    text-align: center !important;
  }

  /* Plugin Description (2-line clamp on mobile, centered) */
  .dc-plugins-overview-grid > div > div:first-child > p {
    font-size: 10px !important;
    line-height: 1.35 !important;
    color: #94a3b8 !important;
    margin: 0 0 8px 0 !important;
    text-align: center !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    width: 100% !important;
  }

  /* Bottom Container (Usage + Button): Centered */
  .dc-plugins-overview-grid > div > div:last-child {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  /* Usage Activity Box: Centered */
  .dc-plugins-overview-grid > div > div:last-child > div:first-child {
    padding: 6px 8px !important;
    border-radius: 8px !important;
    margin-bottom: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    gap: 2px !important;
  }

  .dc-plugins-overview-grid > div > div:last-child > div:first-child > span {
    font-size: 9px !important;
    color: #94a3b8 !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }

  .dc-plugins-overview-grid > div > div:last-child > div:first-child > strong {
    font-size: 10.5px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
    text-align: center !important;
  }

  /* Configure Button: Centered */
  .dc-plugins-overview-grid > div > div:last-child > button {
    padding: 7px 6px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    width: 100% !important;
    min-height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 4px !important;
    box-sizing: border-box !important;
  }

  /* Master Plugin Header Bar */
  #plugin-workspace-master-bar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    padding: 16px 14px !important;
    background: rgba(14, 16, 26, 0.85) !important;
    border-radius: 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-sizing: border-box !important;
  }

  /* Top Navigation & Title Row */
  #plugin-workspace-master-bar > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
  }

  /* Back Button & Fast Plugin Switcher on Mobile */
  #plugin-workspace-nav-row {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  #plugin-workspace-master-bar button[onclick*="overview"] {
    flex: 1 !important;
    min-height: 42px !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    border-radius: 10px !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  #fast-plugin-switcher {
    flex: 1.2 !important;
    min-height: 42px !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
    max-width: 55% !important;
  }

  #plugin-workspace-master-bar > div:first-child > div:last-child {
    width: 100% !important;
  }

  #plugin-workspace-master-bar > div:first-child > div:last-child > div:first-child {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    flex-wrap: wrap !important;
  }

  #inline-plugin-title {
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
  }

  #plugin-active-status-pill {
    padding: 4px 10px !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    border-radius: 12px !important;
  }

  #inline-plugin-subtitle {
    font-size: 11.5px !important;
    margin-top: 4px !important;
    line-height: 1.4 !important;
  }

  /* Controls Section: Channel Selector & Switch side-by-side smart row */
  #plugin-workspace-master-bar > div:last-child {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 2px !important;
    box-sizing: border-box !important;
  }

  #master-channel-rename-pill {
    width: 100% !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    padding: 6px 10px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }

  #master-plugin-channel-select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 1 !important;
    font-size: 11.5px !important;
  }

  /* Toggle Switch Box: Clean label on left, 46px switch on right */
  #plugin-workspace-master-bar > div:last-child > div:last-child {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 42px !important;
    padding: 6px 10px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    background: rgba(0, 0, 0, 0.45) !important;
  }

  #plugin-toggle-label {
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.3px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* EXACT 46px SWITCH ON MOBILE - SLEEK & COMPACT */
  #plugin-workspace-master-bar label.premium-glow-switch,
  label.premium-glow-switch {
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 24px !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    position: relative !important;
    margin: 0 !important;
  }

  label.premium-glow-switch .premium-glow-slider {
    width: 46px !important;
    height: 24px !important;
  }

  label.premium-glow-switch .premium-glow-slider:before {
    height: 18px !important;
    width: 18px !important;
    left: 3px !important;
    bottom: 3px !important;
  }

  label.premium-glow-switch input:checked + .premium-glow-slider:before {
    transform: translateX(22px) !important;
  }

  /* Smart Plugin Disabled Card */
  #plugin-disabled-overlay,
  .smart-plugin-disabled-card {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-height: 240px !important;
    max-height: 340px !important;
    padding: 28px 16px !important;
    border-radius: 18px !important;
    border: 1px dashed rgba(239, 68, 68, 0.45) !important;
    box-sizing: border-box !important;
    margin: 6px 0 16px 0 !important;
    display: none;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Inline Plugin Body 2-Column Split -> Stacks Cleanly on Mobile */
  #inline-plugin-body > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
    flex-wrap: wrap !important;
  }

  #inline-plugin-body > div > div:first-child {
    width: 100% !important;
    min-width: 0 !important;
    padding: 16px 14px !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
  }

  #inline-plugin-body > div > div:last-child {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin-top: 4px !important;
  }

  /* Universal Mobile Polish for All 10 Discord Plugins */
  #inline-plugin-body div[style*="background: #0f111a"],
  #inline-plugin-body div[style*="background: rgba(0,0,0,0.25)"],
  #inline-plugin-body div[style*="background: rgba(0, 0, 0, 0.25)"] {
    padding: 14px 12px !important;
    border-radius: 14px !important;
    margin-bottom: 14px !important;
    box-sizing: border-box !important;
  }

  #inline-plugin-body input[type="text"],
  #inline-plugin-body input[type="number"],
  #inline-plugin-body select,
  #inline-plugin-body textarea {
    font-size: 13px !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  #inline-plugin-body button[onclick*="save"],
  #inline-plugin-body button[onclick*="Save"] {
    width: 100% !important;
    min-height: 42px !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    border-radius: 10px !important;
    justify-content: center !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  #inline-plugin-body > div > div:last-child ul {
    padding-left: 16px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  #inline-plugin-body > div > div:last-child li {
    margin-bottom: 6px !important;
  }

  /* Template Row Cards inside #welcome-templates-container (2 in 1 line on mobile) */
  #welcome-templates-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-bottom: 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #welcome-templates-container > div {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px 10px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #welcome-templates-container > div > div:first-child {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #welcome-templates-container > div > div:first-child img {
    width: 38px !important;
    height: 38px !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
  }

  #welcome-templates-container > div > div:first-child > div {
    min-width: 0 !important;
    flex: 1 !important;
    overflow: hidden !important;
  }

  #welcome-templates-container > div > div:first-child > div > div:first-child {
    font-size: 12px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #welcome-templates-container > div > div:first-child > div > div:last-child {
    font-size: 9.5px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #welcome-templates-container > div > div:last-child {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    width: 100% !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-sizing: border-box !important;
  }

  #welcome-templates-container > div > div:last-child > button:first-child {
    flex: 1 !important;
    min-height: 32px !important;
    padding: 4px 6px !important;
    justify-content: center !important;
    font-size: 11px !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
  }

  #welcome-templates-container > div > div:last-child > button:nth-child(2) {
    min-height: 32px !important;
    width: 32px !important;
    padding: 0 !important;
    justify-content: center !important;
    font-size: 12px !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
  }

  #welcome-templates-container > div > div:last-child > div:last-child {
    width: 38px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
    border-radius: 10px !important;
    margin-left: 2px !important;
  }

  #welcome-templates-container > div > div:last-child > div:last-child > div {
    width: 16px !important;
    height: 16px !important;
  }

  /* Welcome Editor Popup Modal on Mobile */
  #welcome-popup-editor {
    padding: 8px !important;
  }

  #welcome-popup-editor > div {
    width: 100% !important;
    max-width: 100% !important;
    height: 96vh !important;
    padding: 16px 12px !important;
    border-radius: 18px !important;
  }

  #welcome-popup-editor div[style*="grid-template-columns: 460px 1fr"],
  #welcome-popup-editor div[style*="460px 1fr"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    overflow-y: auto !important;
  }

  #live-card-frame-preview {
    flex-direction: column !important;
    text-align: center !important;
    padding: 16px 12px !important;
    gap: 12px !important;
  }

  #card-preview-dp-box {
    margin-right: 0 !important;
  }
}

@media (max-width: 480px) {
  .main-content {
    padding: 12px 10px calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 8px) + 36px) 10px !important;
  }

  .stat-grid-4 {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .stat-card {
    padding: 12px 10px !important;
  }

  .stat-card .stat-value {
    font-size: 18px !important;
  }

  .stat-card .stat-label {
    font-size: 11px !important;
  }
}

/* ── Connected Accounts Sub Tabs ── */
.sub-tabs {
  display: flex;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 4px;
  margin-bottom: 24px;
  width: fit-content;
  gap: 4px;
}

.sub-tab {
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: var(--font-body);
}

.sub-tab.active {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.2);
}

.sub-tab:hover:not(.active) {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.03);
}

.subtab-content {
  animation: fadeIn var(--transition-fast) forwards;
}

/* ── Recent Posts / Videos Rows & Action Buttons ── */
.account-post-row {
  background: var(--bg-input);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.account-post-row:last-child {
  margin-bottom: 0;
}

.post-row-left {
  flex: 1;
  min-width: 0;
}

.post-row-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.post-row-meta {
  font-size: 12px;
  color: var(--text-muted);
}

/* ── Action Buttons & Badges Styling ── */
.btn-set-trigger {
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid var(--accent-pink);
  background: var(--accent-pink);
  color: #FFFFFF !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all var(--transition-fast);
}

.btn-set-trigger:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

.btn-toggle-ai-reply {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 20px;
  border: 1px solid var(--border-medium);
  background: var(--bg-surface);
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all var(--transition-fast);
}

.btn-toggle-ai-reply .status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  display: inline-block;
}

.btn-toggle-ai-reply.active {
  border-color: var(--accent-pink);
  background: rgba(236, 72, 153, 0.15);
  color: var(--accent-pink);
}

.btn-toggle-ai-reply.active .status-dot {
  background: var(--accent-pink);
}

.btn-disconnect {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
}

.media-filter-tab {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--border-default);
  background: var(--bg-card-inner);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.media-filter-tab.active {
  border-color: var(--accent-pink);
  background: rgba(236, 72, 153, 0.15);
  color: #FFFFFF;
}

/* ── Instagram Automation Screen ── */
.follow-gate-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.follow-gate-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.follow-gate-trigger-info {
  flex: 1;
  min-width: 0;
}

.follow-gate-keyword {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-pink);
  margin-bottom: 2px;
}

.follow-gate-reply {
  font-size: 12px;
  color: var(--text-subtle);
  word-break: break-word;
}

.follow-gate-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  white-space: nowrap;
  margin-left: 8px;
}

.follow-gate-badge.enabled {
  background: var(--accent-green-bg);
  color: var(--accent-green);
}

.follow-gate-badge.disabled {
  background: var(--accent-gray-bg);
  color: var(--text-dim);
}

.follow-gate-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.follow-gate-field-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}

.follow-gate-field-row .field-label {
  color: var(--text-secondary);
  min-width: 140px;
  font-size: 12px;
}

.follow-gate-field-row .field-value {
  color: var(--text-body);
  font-weight: 500;
  flex: 1;
  word-break: break-word;
}

.follow-gate-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.btn-edit-fg,
.btn-simulate-fg {
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-edit-fg {
  background: transparent;
  border: 1px solid var(--border-button);
  color: var(--text-light);
}

.btn-edit-fg:hover {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-primary);
}

.btn-simulate-fg {
  background: var(--primary-bg);
  border: 1px solid var(--primary);
  color: var(--primary-light);
}

.btn-simulate-fg:hover {
  background: var(--primary);
  color: #fff;
}

/* Confirmation table */
.confirmation-table-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.confirmation-table-header .col-user { flex: 1; min-width: 140px; }
.confirmation-table-header .col-status { width: 100px; }
.confirmation-table-header .col-date { width: 160px; }

.confirmation-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text-body);
}

.confirmation-row:hover {
  background: rgba(255, 255, 255, 0.02);
}

.confirmation-row .col-user { flex: 1; min-width: 140px; font-family: monospace; color: var(--text-light); }
.confirmation-row .col-status { width: 100px; }
.confirmation-row .col-date { width: 160px; color: var(--text-dim); }

.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 600;
}

.status-badge.confirmed {
  background: var(--accent-green-bg);
  color: var(--accent-green);
}

.status-badge.pending {
  background: var(--accent-yellow-bg);
  color: var(--accent-yellow);
}

/* 🔒 Discord Pro White-Label Branding Card Locked & Premium State */
#dc-pro-branding-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(24, 20, 48, 0.92) 0%, rgba(17, 24, 39, 0.95) 50%, rgba(15, 17, 26, 0.98) 100%) !important;
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
  border-radius: 22px !important;
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.6), 0 0 30px -5px rgba(168, 85, 247, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  transition: all 0.3s ease;
}

#dc-pro-branding-card:hover {
  border-color: rgba(168, 85, 247, 0.5) !important;
  box-shadow: 0 20px 48px -10px rgba(0, 0, 0, 0.7), 0 0 36px -5px rgba(168, 85, 247, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

.dc-card-top-stripe {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #ec4899 0%, #a855f7 35%, #6366f1 70%, #38bdf8 100%);
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
}

.dc-branding-section-box {
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(168, 85, 247, 0.2);
  border-radius: 16px;
  padding: 20px;
  transition: all 0.25s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.dc-branding-section-box:hover {
  border-color: rgba(168, 85, 247, 0.38);
  background: rgba(15, 23, 42, 0.7);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 16px rgba(168, 85, 247, 0.1);
}

.dc-discord-mockup-wrap {
  background: #313338;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.dc-discord-bot-tag {
  background: #5865f2;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: middle;
}

#dc-pro-branding-card.is-locked {
  border-color: rgba(236, 72, 153, 0.35) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(236, 72, 153, 0.12) !important;
}

#dc-pro-branding-card.is-locked #dc-branding-form-container {
  filter: blur(5px) grayscale(35%);
  -webkit-filter: blur(5px) grayscale(35%);
  pointer-events: none !important;
  user-select: none !important;
  opacity: 0.55;
  transition: all 0.3s ease;
}

#dc-pro-branding-card.is-locked #dc-branding-locked-overlay {
  display: flex !important;
}

#dc-pro-branding-card.is-locked #dc-branding-pro-lock-banner {
  display: block !important;
}

#dc-pro-branding-card.is-locked #dc-branding-save-btn {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

#dc-pro-branding-card.is-locked #dc-branding-switch-wrap {
  opacity: 0.5 !important;
  pointer-events: none !important;
}

/* IG account summary card */
.ig-account-summary-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ig-account-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--accent-pink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ig-account-info {
  flex: 1;
}

.ig-account-username {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.ig-account-profile-url {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Follow-gate toggle in trigger modal — only shown for IG platform */
#modal-add-trigger.platform-ig #fg-modal-section {
  display: block;
}

#modal-add-trigger.platform-yt #fg-modal-section,
#modal-add-trigger.platform-tt #fg-modal-section {
  display: none;
}

/* 🎥 YouTube triggers: keep comment auto-reply mode visible */
#modal-add-trigger.platform-yt #modal-comment-mode-group,
#modal-add-trigger.platform-yt #mode-list-container,
#modal-add-trigger.platform-yt #mode-custom-container {
  display: block;
}

.modal-fg-section .notification-row {
  padding: 0;
}

/* ── Platform-Themed Trigger Modal Buttons ── */

/* Instagram / Facebook — Pink Theme */
#modal-add-trigger.platform-ig .response-type-btn.active {
  background: var(--accent-pink);
  border-color: var(--accent-pink);
  color: #fff;
  font-weight: 600;
}

#modal-add-trigger.platform-ig .modal-actions .btn-primary {
  background: var(--accent-pink);
}

#modal-add-trigger.platform-ig .modal-input:focus,
#modal-add-trigger.platform-ig .modal-textarea:focus {
  border-color: var(--accent-pink);
}

#modal-add-trigger.platform-ig #btn-open-create-list {
  border-color: var(--accent-pink);
  background: var(--accent-pink);
  color: #fff;
}

#modal-add-trigger.platform-ig #btn-open-create-list:hover {
  background: var(--accent-pink);
  color: #fff;
  opacity: 0.9;
}

/* YouTube — Red Theme */
#modal-add-trigger.platform-yt .response-type-btn.active {
  background: var(--accent-red);
  border-color: var(--accent-red);
  color: #fff;
  font-weight: 600;
}

#modal-add-trigger.platform-yt .modal-actions .btn-primary {
  background: var(--accent-red);
}

#modal-add-trigger.platform-yt .modal-input:focus,
#modal-add-trigger.platform-yt .modal-textarea:focus {
  border-color: var(--accent-red);
}

#modal-add-trigger.platform-yt #btn-open-create-list {
  border-color: var(--accent-red);
  background: var(--accent-red);
  color: #fff;
}

#modal-add-trigger.platform-yt #btn-open-create-list:hover {
  background: var(--accent-red);
  color: #fff;
  opacity: 0.9;
}

/* ── Instagram OAuth Connect Button ── */
#btn-connect-instagram,
#btn-connect-instagram-ig {
  padding: 8px 16px;
  background: var(--accent-pink);
  border: none;
  border-radius: var(--radius-md);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#btn-connect-instagram:hover,
#btn-connect-instagram-ig:hover {
  background: #e03a80;
  transform: scale(0.98);
}

#btn-connect-instagram:active,
#btn-connect-instagram-ig:active {
  transform: scale(0.96);
}

/* ── Toast Notifications ── */
.toast {
  background: var(--bg-surface);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  padding: 14px 20px;
  min-width: 300px;
  max-width: 420px;
  font-size: 13px;
  color: var(--text-body);
  box-shadow: var(--shadow-modal);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  opacity: 0;
  transform: translateX(120%);
  transition: opacity 0.3s ease, transform 0.3s ease;
  position: relative;
  overflow: hidden;
}

.toast.show {
  opacity: 1;
  transform: translateX(0);
}

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

.toast-success .toast-icon {
  color: var(--accent-green);
}

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

.toast-error .toast-icon {
  color: var(--accent-red-light);
}

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

.toast-info .toast-icon {
  color: var(--primary-light);
}

.toast-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.toast-content {
  flex: 1;
  line-height: 1.4;
}

.toast-close {
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toast-close:hover {
  color: var(--text-primary);
}

/* ── Instagram OAuth Demo Badge ── */
.oauth-demo-badge {
  display: inline-block;
  background: rgba(255,193,7,0.15);
  color: #ffc107;
  border: 1px solid rgba(255,193,7,0.3);
  border-radius: 20px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  margin-left: 8px;
  vertical-align: middle;
}

/* ── Comment Manager Premium Dark Buttons ── */
.btn-mode-tab {
  flex: 1;
  padding: 8px 16px;
  font-size: 13px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 600;
  transition: all var(--transition-fast);
  text-align: center;
}

.btn-mode-tab:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.03);
}

.btn-mode-tab.active {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* Edit / New List / Add Buttons */
.btn-trigger-action {
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-button);
  color: var(--text-light);
  border-radius: var(--radius-md);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-trigger-action:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--text-subtle);
}

/* Platform specific modal actions and buttons overrides */
#modal-add-trigger.platform-ig .btn-mode-tab.active {
  background: rgba(236, 72, 153, 0.12) !important;
  border-color: rgba(236, 72, 153, 0.3) !important;
  color: var(--accent-pink) !important;
  box-shadow: 0 0 10px rgba(236, 72, 153, 0.15);
}

#modal-add-trigger.platform-ig #btn-open-create-list {
  background: rgba(236, 72, 153, 0.1);
  border-color: rgba(236, 72, 153, 0.4);
  color: var(--accent-pink);
}

#modal-add-trigger.platform-ig #btn-open-create-list:hover {
  background: var(--accent-pink);
  color: #fff;
  opacity: 1;
}

#modal-add-trigger.platform-yt .btn-mode-tab.active {
  background: rgba(237, 51, 46, 0.12) !important;
  border-color: rgba(237, 51, 46, 0.3) !important;
  color: var(--accent-red-light) !important;
  box-shadow: 0 0 10px rgba(237, 51, 46, 0.15);
}

#modal-add-trigger.platform-yt #btn-open-create-list {
  background: rgba(237, 51, 46, 0.1);
  border-color: rgba(237, 51, 46, 0.4);
  color: var(--accent-red-light);
}

#modal-add-trigger.platform-yt #btn-open-create-list:hover {
  background: var(--accent-red);
  color: #fff;
  opacity: 1;
}

/* Multi-Keyword Tag Chips & Container */
.keyword-tags-container:focus-within {
  border-color: #ec4899 !important;
  box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.2) !important;
}

#modal-add-trigger.platform-yt .keyword-tags-container:focus-within {
  border-color: #ed332e !important;
  box-shadow: 0 0 0 3px rgba(237, 51, 46, 0.2) !important;
}

.trigger-kw-chip {
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.trigger-kw-chip:hover {
  transform: translateY(-1px);
}

.trigger-kw-chip .btn-remove-kw:hover {
  opacity: 1 !important;
  transform: scale(1.15);
}

/* Trigger Button Active/Inactive/None State Badges */
.btn-toggle-trigger-active {
  transition: all 0.2s ease !important;
  font-weight: 600 !important;
}

.btn-toggle-trigger-active.state-on {
  border-color: #10B981 !important;
  background: rgba(16, 185, 129, 0.12) !important;
  color: #10B981 !important;
}
.btn-toggle-trigger-active.state-on:hover {
  background: rgba(16, 185, 129, 0.22) !important;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.25) !important;
}

.btn-toggle-trigger-active.state-off {
  border-color: #EF4444 !important;
  background: rgba(239, 68, 68, 0.12) !important;
  color: #EF4444 !important;
}
.btn-toggle-trigger-active.state-off:hover {
  background: rgba(239, 68, 68, 0.22) !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.25) !important;
}

.btn-toggle-trigger-active.state-none {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  color: var(--text-muted) !important;
}
.btn-toggle-trigger-active.state-none:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

/* Plan accounts limit badge responsive layout */
@media (max-width: 768px) {
  #screen-accounts .page-heading {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  #accounts-plan-limit-badge {
    text-align: left !important;
    align-self: flex-start !important;
    width: 100% !important;
  }
}

/* ========================================
   Theme Toggle Button & Light Mode System
   ======================================== */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  border: 1px solid var(--border-medium);
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.theme-toggle-btn:hover {
  background: var(--bg-elevated);
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-1px);
}

/* Sun/Moon icon visibility based on theme */
.sun-icon { display: block; }
.moon-icon { display: none; }

[data-theme="light"] .sun-icon { display: none; }
[data-theme="light"] .moon-icon { display: block; }

/* ── Comprehensive Light Theme Tokens ── */
[data-theme="light"] {
  --bg-base: #F8FAFC;
  --bg-surface: #FFFFFF;
  --bg-elevated: #F1F5F9;
  --bg-input: #FFFFFF;
  --bg-card-inner: #F8FAFC;
  --bg-overlay: rgba(15, 23, 42, 0.4);

  --border-subtle: #E2E8F0;
  --border-default: #CBD5E1;
  --border-medium: #CBD5E1;
  --border-strong: #94A3B8;
  --border-input: #CBD5E1;
  --border-button: #CBD5E1;
  --border-muted: #94A3B8;

  --primary: #7C3AED;
  --primary-light: #6D28D9;
  --primary-bg: rgba(124, 58, 237, 0.08);
  --primary-bg-strong: rgba(124, 58, 237, 0.15);

  --accent-pink: #DB2777;
  --accent-red: #DC2626;
  --accent-red-light: #B91C1C;
  --accent-red-bg: rgba(220, 38, 38, 0.08);
  --accent-green: #059669;
  --accent-green-bg: rgba(5, 150, 105, 0.1);
  --accent-yellow: #D97706;
  --accent-yellow-bg: rgba(217, 119, 6, 0.1);
  --accent-gray-bg: rgba(100, 116, 139, 0.1);

  --text-primary: #0F172A;
  --text-secondary: #334155;
  --text-muted: #475569;
  --text-dim: #64748B;
  --text-light: #1E293B;
  --text-card: #0F172A;
  --text-label: #475569;
  --text-body: #1E293B;
  --text-subtle: #475569;
  --text-icon-muted: #64748B;
}

/* ── Light Mode Component Overrides for 100% Visibility ── */
[data-theme="light"] body {
  background-color: var(--bg-base);
  color: var(--text-primary);
}

[data-theme="light"] .desktop-header,
[data-theme="light"] .mobile-header {
  background: #FFFFFF;
  border-bottom: 1px solid #E2E8F0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .sidebar {
  background: #FFFFFF;
  border-right: 1px solid #E2E8F0;
}

[data-theme="light"] .sidebar-nav-item:hover {
  background: #F1F5F9;
  color: #0F172A;
}

[data-theme="light"] .sidebar-nav-item.active {
  background: rgba(124, 58, 237, 0.08);
  color: var(--primary);
  border-left: 3px solid var(--primary);
}

[data-theme="light"] .content-card,
[data-theme="light"] .platform-card,
[data-theme="light"] .metric-card,
[data-theme="light"] .trigger-card,
[data-theme="light"] .modal-content,
[data-theme="light"] .billing-plan-card,
[data-theme="light"] .pricing-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .form-input,
[data-theme="light"] .modal-input,
[data-theme="light"] .modal-textarea,
[data-theme="light"] select {
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  color: #0F172A;
}

[data-theme="light"] .form-input:focus,
[data-theme="light"] .modal-input:focus,
[data-theme="light"] .modal-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

[data-theme="light"] .trigger-row,
[data-theme="light"] .trigger-card-inner,
[data-theme="light"] .confirmation-row,
[data-theme="light"] .platform-breakdown-item,
[data-theme="light"] .timeline-item {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
}

[data-theme="light"] .profile-dropdown {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .profile-dropdown-item:hover {
  background: #F1F5F9;
  color: #0F172A;
}

[data-theme="light"] .btn-trigger-action,
[data-theme="light"] .btn-toggle-ai-reply.active,
[data-theme="light"] .btn-toggle-ai-reply.active * {
  background: #FCE7F3 !important;
  border-color: #F472B6 !important;
  color: #9D174D !important; /* Rich Dark Magenta text for 100% readability */
  font-weight: 700 !important;
}

[data-theme="light"] .btn-mode-tab {
  background: #F1F5F9;
  border: 1px solid #CBD5E1;
  color: #1E293B;
}

[data-theme="light"] .btn-mode-tab.active {
  background: var(--primary);
  color: #FFFFFF;
  border-color: var(--primary);
}

[data-theme="light"] .toast {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  color: #0F172A;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .header-logo-icon {
  background: linear-gradient(135deg, #0284c7 0%, #4f46e5 50%, #9333ea 100%) !important;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.3), inset 0 1.5px 2px rgba(255, 255, 255, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
}

[data-theme="light"] .header-logo-text {
  background: linear-gradient(135deg, #0f172a 45%, #4f46e5 80%, #9333ea 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.08)) !important;
}

[data-theme="light"] .logo-version-badge {
  background: #eef2ff !important;
  border: 1px solid #c7d2fe !important;
  color: #4f46e5 !important;
  -webkit-text-fill-color: #4f46e5 !important;
  box-shadow: 0 1px 4px rgba(79, 70, 229, 0.15) !important;
}

/* Comprehensive Light Theme Contrast & Text Visibility Master Rules */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] .page-heading h1,
[data-theme="light"] .card-title,
[data-theme="light"] .section-title,
[data-theme="light"] .stat-value,
[data-theme="light"] .kpi-value,
[data-theme="light"] .metric-value,
[data-theme="light"] .plan-title {
  color: #0F172A !important;
}

[data-theme="light"] p,
[data-theme="light"] .text-secondary,
[data-theme="light"] .card-subtext,
[data-theme="light"] .setting-desc {
  color: #334155 !important;
}

[data-theme="light"] .text-muted,
[data-theme="light"] .stat-label,
[data-theme="light"] .kpi-label,
[data-theme="light"] .metric-label,
[data-theme="light"] .form-label {
  color: #64748B !important;
}

/* Light Theme Social Hover Navigation Pills */
[data-theme="light"] .social-hover-pill {
  background: #F8FAFC !important;
  border: 1.5px solid rgba(var(--theme-color-rgb), 0.3) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .social-hover-pill:hover,
[data-theme="light"] .social-hover-pill.active {
  background: #FFFFFF !important;
  border-color: var(--theme-color) !important;
  box-shadow: 0 4px 18px rgba(var(--theme-color-rgb), 0.22) !important;
}

[data-theme="light"] .social-hover-pill .social-text-label {
  color: var(--theme-color) !important;
  opacity: 0.55;
}

[data-theme="light"] .social-hover-pill:hover .social-text-label,
[data-theme="light"] .social-hover-pill.active .social-text-label {
  color: #0F172A !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Light Theme Quick Automation & Campaign Cards */
[data-theme="light"] .campaign-card,
[data-theme="light"] .action-card,
[data-theme="light"] .stat-card,
[data-theme="light"] .platform-hub-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] .campaign-card:hover,
[data-theme="light"] .stat-card:hover {
  background: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08) !important;
}

/* ── Account Post Row Cards & Grids Styling ── */
.account-post-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  margin-bottom: 12px;
  border-radius: 12px;
  background: var(--bg-card-inner);
  border: 1px solid var(--border-subtle);
  transition: all var(--transition-fast);
}

.account-post-row:hover {
  border-color: var(--border-medium);
}

[data-theme="light"] .account-post-row {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .account-post-row:hover {
  background: #FFFFFF;
  border-color: #CBD5E1;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .account-post-row .post-row-title {
  color: #0F172A !important;
}

[data-theme="light"] .card-title,
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4 {
  color: #0F172A;
}

[data-theme="light"] .btn-edit-trigger {
  background: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  color: #1E293B !important;
}

[data-theme="light"] .btn-edit-trigger:hover {
  background: #F1F5F9 !important;
  border-color: #94A3B8 !important;
}

[data-theme="light"] .content-card,
[data-theme="light"] .platform-card {
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.04);
}

/* ── Modern Instagram-Style Compact Posts & Reels Media Card Grid ── */
.posts-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.post-media-card {
  background: var(--bg-card-inner, #161622);
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
}

.post-media-card:hover {
  transform: translateY(-3px);
  border-color: rgba(225, 48, 108, 0.4);
  box-shadow: 0 10px 25px -4px rgba(0,0,0,0.4), 0 0 15px rgba(225, 48, 108, 0.2);
}

.post-card-header {
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.05));
  background: rgba(255,255,255,0.02);
}

.post-card-author {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}

.post-card-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(45deg, #F09433 0%, #E6683C 25%, #DC2743 50%, #CC2366 75%, #BC1888 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #fff;
  font-weight: bold;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(220, 39, 67, 0.3);
}

.post-card-handle {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary, #F8FAFC);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.post-card-type-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(225, 48, 108, 0.18), rgba(193, 53, 132, 0.18));
  color: #F472B6;
  border: 1px solid rgba(225, 48, 108, 0.35);
  flex-shrink: 0;
}

.post-card-media-wrapper {
  position: relative;
  width: 100%;
  height: 140px;
  background: #09090E;
  overflow: hidden;
}

.post-card-media-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.post-media-card:hover .post-card-media-wrapper img {
  transform: scale(1.04);
}

.post-card-overlay-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(8px);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 10px;
  color: #fff;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.post-card-body {
  padding: 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.post-card-caption {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-primary, #E2E8F0);
  font-weight: 500;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-card-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 8px 6px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
  margin-bottom: 10px;
}

.post-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.post-stat-val {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary, #FFFFFF);
}

.post-stat-lbl {
  font-size: 9px;
  color: var(--text-muted, #94A3B8);
  margin-top: 1px;
}

/* Crisp & Responsive Card Action Buttons */
.post-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
}

.post-card-actions .btn-toggle-ai-reply {
  padding: 4px 8px !important;
  font-size: 10px !important;
  border-radius: 6px !important;
  flex-shrink: 0;
}

.post-card-actions .btn-set-trigger {
  padding: 5px 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  background: linear-gradient(135deg, #E1306C, #C13584) !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(225, 48, 108, 0.3) !important;
  cursor: pointer;
  white-space: nowrap;
}

.post-card-actions .btn-set-trigger:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

/* Light Mode Overrides for Post Media Cards */
[data-theme="light"] .post-media-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

[data-theme="light"] .post-media-card:hover {
  border-color: #EC4899;
  box-shadow: 0 10px 25px -4px rgba(236,72,153,0.2);
}

[data-theme="light"] .post-card-header {
  background: #F8FAFC;
  border-bottom: 1px solid #E2E8F0;
}

[data-theme="light"] .post-card-handle,
[data-theme="light"] .post-card-caption {
  color: #0F172A !important;
}

[data-theme="light"] .post-card-stats-grid {
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
}

[data-theme="light"] .post-stat-val {
  color: #0F172A;
}

[data-theme="light"] .post-stat-lbl {
  color: #64748B;
}

/* ── Premium Platform Header & Sync / Disconnect Buttons ── */
.btn-connect-card {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 20px;
  background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
  color: #ffffff;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(168, 85, 247, 0.35);
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
}

.btn-connect-card:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 24px rgba(168, 85, 247, 0.55);
  filter: brightness(1.1);
}

.btn-connect-card:active {
  transform: translateY(0);
}

.btn-howto-connect {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.06);
  color: #f1f5f9;
  border: 1px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
}

.btn-howto-connect:hover {
  background: rgba(168, 85, 247, 0.2);
  border-color: rgba(168, 85, 247, 0.6);
  color: #ffffff;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 20px rgba(168, 85, 247, 0.3);
}

.btn-howto-connect:active {
  transform: translateY(0);
}

.btn-manage {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.15), rgba(59, 130, 246, 0.25)) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
}

.btn-manage:hover {
  background: linear-gradient(135deg, #0284c7, #2563eb) !important;
  border-color: #7dd3fc !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(56, 189, 248, 0.45) !important;
}

.btn-disconnect {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(185, 28, 28, 0.25)) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
}

.btn-disconnect:hover {
  background: linear-gradient(135deg, #dc2626, #991b1b) !important;
  border-color: #fca5a5 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.45) !important;
}

.btn-compact-action {
  padding: 6px 14px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

/* ── Visual Glassmorphic Platform Directory Hub Cards ── */
.platform-hub-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 20px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(12px);
}

.platform-hub-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #a855f7, #ec4899);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.platform-hub-card:hover {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
  border-color: rgba(168, 85, 247, 0.4);
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(168, 85, 247, 0.2);
}

.platform-hub-card:hover::before {
  opacity: 1;
}

.ph-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ph-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.ph-card-body h3 {
  margin: 0 0 6px 0;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
}

.ph-card-body p {
  margin: 0;
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.4;
}

.ph-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.ph-count {
  font-size: 11px;
  font-weight: 600;
  color: #c084fc;
}

.ph-action-link {
  font-size: 11px;
  font-weight: 700;
  color: #ec4899;
  transition: transform 0.2s ease;
}

.platform-hub-card:hover .ph-action-link {
  transform: translateX(3px);
}

/* ── Premium Segmented Glass Filter Bar & Rich Filled Badges ── */
.media-filter-bar {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 10px 14px 6px !important;
  margin-bottom: 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}

.media-filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #cbd5e1;
  background: linear-gradient(135deg, #1e1f2e 0%, #151624 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none;
  position: relative;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.media-filter-tab:hover {
  color: #ffffff;
  background: linear-gradient(135deg, #2d2f45 0%, #1e1f33 100%);
  border-color: #c084fc;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 22px rgba(168, 85, 247, 0.35);
}

.media-filter-tab:active {
  transform: translateY(0);
}

.media-filter-tab.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%) !important;
  border: 1px solid #f472b6 !important;
  box-shadow: 0 8px 24px rgba(236, 72, 153, 0.5) !important;
  font-weight: 800 !important;
}

/* ⚡ Inactive Active Triggers Pill (Subtle amber accent, NOT active by default) */
.media-filter-tab.filter-btn-active-triggers {
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.12) 0%, rgba(180, 83, 9, 0.08) 100%);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fbbf24;
  font-weight: 700;
  box-shadow: none;
  animation: none;
}

.media-filter-tab.filter-btn-active-triggers:hover {
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.25) 0%, rgba(180, 83, 9, 0.18) 100%);
  border-color: #fbbf24;
  color: #ffffff;
  transform: translateY(-2px) scale(1.02);
}

.media-filter-tab.filter-btn-active-triggers.active {
  background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%) !important;
  border: 1px solid #fef08a !important;
  color: #000000 !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.6) !important;
  animation: triggerGlowPulse 2.5s infinite ease-in-out !important;
}

@keyframes triggerGlowPulse {
  0% {
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
  }
  50% {
    box-shadow: 0 0 22px rgba(245, 158, 11, 0.7);
  }
  100% {
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
  }
}

/* ── Streamlined Compact Post List Row Format & Animated Action Buttons ── */
.posts-grid-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.post-list-row-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px 16px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.post-list-row-card:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(168, 85, 247, 0.35) !important;
  transform: translateX(4px) translateY(-1px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 15px rgba(168, 85, 247, 0.15) !important;
}

.post-list-thumb {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: #181824;
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
}

.post-list-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.post-list-row-card:hover .post-list-thumb img {
  transform: scale(1.1);
}

.post-list-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.post-list-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.post-list-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.post-list-meta-tag {
  font-size: 11px;
  color: var(--text-secondary, #94a3b8);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

.post-list-meta-tag.highlight {
  color: #c084fc;
  border-color: rgba(192, 132, 252, 0.25);
  background: rgba(192, 132, 252, 0.08);
  font-weight: 600;
}

.post-list-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Slick Animated Buttons */
.action-btn-animated {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.action-btn-animated:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.action-btn-animated:active {
  transform: translateY(0);
}

.action-btn-animated.active {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.4);
  color: #34d399;
}

.action-btn-animated.active:hover {
  background: rgba(16, 185, 129, 0.25);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);
}

.action-btn-animated.primary {
  background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
  border: none;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3);
}

.action-btn-animated.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(168, 85, 247, 0.5);
  filter: brightness(1.1);
}

.action-btn-animated.danger {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.3);
  color: #f87171;
}

.action-btn-animated.danger:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.6);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
}

/* ── Glowing Glassmorphism Scheduled Post Card Styling ── */
@keyframes scheduledAmberGlow {
  0% {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 12px rgba(245, 158, 11, 0.15), inset 0 0 12px rgba(245, 158, 11, 0.05);
    border-color: rgba(245, 158, 11, 0.4);
  }
  50% {
    box-shadow: 0 6px 26px rgba(0, 0, 0, 0.4), 0 0 22px rgba(245, 158, 11, 0.3), inset 0 0 18px rgba(245, 158, 11, 0.1);
    border-color: rgba(251, 191, 36, 0.7);
  }
  100% {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 12px rgba(245, 158, 11, 0.15), inset 0 0 12px rgba(245, 158, 11, 0.05);
    border-color: rgba(245, 158, 11, 0.4);
  }
}

@keyframes pulseDot {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 0 6px #fbbf24;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.75;
    box-shadow: 0 0 14px #fbbf24;
  }
}

.post-list-row-card.is-scheduled-post {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(30, 27, 75, 0.35) 50%, rgba(245, 158, 11, 0.04) 100%) !important;
  border: 1px solid rgba(245, 158, 11, 0.45) !important;
  animation: scheduledAmberGlow 4s ease-in-out infinite !important;
  position: relative !important;
  backdrop-filter: blur(8px) !important;
}

.post-list-row-card.is-scheduled-post:hover {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.14) 0%, rgba(45, 30, 90, 0.45) 50%, rgba(245, 158, 11, 0.08) 100%) !important;
  border-color: rgba(251, 191, 36, 0.85) !important;
  transform: translateX(4px) translateY(-2px) !important;
  box-shadow: 0 10px 32px rgba(245, 158, 11, 0.25), 0 0 24px rgba(245, 158, 11, 0.2) !important;
}

.post-list-thumb.is-scheduled-thumb {
  border: 2px solid rgba(245, 158, 11, 0.6) !important;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.3);
}

.scheduled-media-img {
  filter: blur(1.5px) brightness(0.7);
  transition: filter 0.3s ease, transform 0.3s ease;
}

.post-list-row-card.is-scheduled-post:hover .scheduled-media-img {
  filter: blur(0px) brightness(1);
  transform: scale(1.08);
}

.scheduled-thumb-glass-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(1.5px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.3s ease;
}

.post-list-row-card.is-scheduled-post:hover .scheduled-thumb-glass-overlay {
  opacity: 0.85;
}

.scheduled-clock-icon-glow {
  font-size: 16px;
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.8));
}

.scheduled-thumb-countdown {
  font-size: 9px;
  font-weight: 800;
  color: #fbbf24;
  text-shadow: 0 0 8px rgba(245, 158, 11, 0.9);
  white-space: nowrap;
  letter-spacing: 0.2px;
  padding: 1px 4px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 4px;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

/* Scheduled Banner Header */
.scheduled-post-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 10px;
  margin-bottom: 2px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 8px;
}

.scheduled-banner-left {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pulse-amber-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fbbf24;
  display: inline-block;
  animation: pulseDot 2s infinite ease-in-out;
}

.scheduled-banner-title {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #fbbf24;
  text-transform: uppercase;
}

.scheduled-banner-right {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.scheduled-timer-pill {
  font-size: 10px;
  font-weight: 800;
  color: #ffffff;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.85), rgba(217, 119, 6, 0.95));
  padding: 2px 8px;
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
  white-space: nowrap;
}

.scheduled-time-pill {
  font-size: 10px;
  font-weight: 600;
  color: #fbbf24;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(245, 158, 11, 0.35);
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

.post-list-meta-tag.scheduled-meta {
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.35);
  font-weight: 700;
}

.post-list-meta-tag.scheduled-date-meta {
  color: #fde68a;
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(245, 158, 11, 0.2);
  font-weight: 600;
}

/* ── Instagram Story Visual Highlights & Gradient Ring ── */
.story-thumb-ring {
  position: relative;
  border-radius: 12px;
  padding: 2px;
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.story-badge-scheduled {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #f59e0b !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

.story-badge-active {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #10b981 !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

/* ── Sleek Sub-Sidebar & Action Toolbar Layout ── */
.workspace-grid-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 20px;
  align-items: start;
  margin-top: 16px;
}

/* ── Expanded Full-Width 3-Column Workspace Grid ── */
.workspace-grid-layout-3col {
  display: grid;
  grid-template-columns: 210px 1fr 260px;
  gap: 18px;
  align-items: start;
  margin-top: 14px;
  width: 100%;
}

@media (max-width: 1400px) {
  .workspace-grid-layout-3col {
    grid-template-columns: 190px 1fr 240px;
    gap: 14px;
  }
}

@media (max-width: 1100px) {
  .workspace-grid-layout-3col {
    grid-template-columns: 180px 1fr;
  }
}

@media (max-width: 768px) {
  .workspace-grid-layout,
  .workspace-grid-layout-3col {
    grid-template-columns: 1fr;
  }
}

.vertical-account-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.account-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.account-tab:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateX(3px);
}

.account-tab.active {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.18) 0%, rgba(99, 102, 241, 0.18) 100%);
  border: 1.5px solid rgba(168, 85, 247, 0.5);
  box-shadow: 0 4px 20px rgba(168, 85, 247, 0.25);
}

.account-tab-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.account-tab-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

.account-tab-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.account-tab-name {
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-tab-platform {
  font-size: 11px;
  color: #9ca3af;
  white-space: nowrap;
}

.btn-action-glow {
  transition: all 0.25s ease;
}

.btn-action-glow:hover {
  transform: translateY(-2px);
  filter: brightness(1.15);
}

/* ==========================================================================
   DYNAMIC UI ANIMATION SYSTEM & GLASSMORPHISM VISUAL EFFECTS
   ========================================================================== */

/* Keyframe Animations */
@keyframes rfPulseGlow {
  0%, 100% {
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.35), 0 0 30px rgba(139, 92, 246, 0.15);
  }
  50% {
    box-shadow: 0 0 25px rgba(236, 72, 153, 0.5), 0 0 45px rgba(139, 92, 246, 0.3);
  }
}

@keyframes rfMeshFloat {
  0% {
    transform: translate(0px, 0px) scale(1) rotate(0deg);
  }
  33% {
    transform: translate(30px, -25px) scale(1.08) rotate(5deg);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.95) rotate(-5deg);
  }
  100% {
    transform: translate(0px, 0px) scale(1) rotate(0deg);
  }
}

@keyframes rfShimmerSlide {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes rfBadgeRipple {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

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

/* Background Animated Gradient Mesh Containers */
.animated-mesh-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  opacity: 0.65;
}

.animated-mesh-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  animation: rfMeshFloat 18s ease-in-out infinite;
  will-change: transform;
}

.animated-mesh-blob-1 {
  top: -10%;
  left: 15%;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.28) 0%, rgba(99, 102, 241, 0.05) 70%);
}

.animated-mesh-blob-2 {
  bottom: 10%;
  right: 10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.22) 0%, rgba(139, 92, 246, 0.05) 70%);
  animation-delay: -6s;
}

.animated-mesh-blob-3 {
  top: 40%;
  left: 50%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, rgba(16, 185, 129, 0.04) 70%);
  animation-delay: -12s;
}

/* Interactive Card Dynamic Effects */
.card, .workspace-card, .stat-card, .metric-card {
  position: relative;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
  overflow: hidden;
}

.card:hover, .workspace-card:hover, .stat-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35), 0 0 20px rgba(139, 92, 246, 0.25);
  border-color: rgba(139, 92, 246, 0.4) !important;
}

/* Dynamic Shimmer Overlay on Interactive Elements */
.shimmer-active {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0) 100%);
  background-size: 200% 100%;
  animation: rfShimmerSlide 3s infinite;
}

/* Dynamic Status Indicators */
.pulse-online-badge {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #10B981;
  animation: rfBadgeRipple 2s infinite ease-in-out;
}

/* Action Button Glowing Animations */
.btn-primary, .btn-purple, .btn-interactive {
  position: relative;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.3);
}

.btn-primary:hover, .btn-purple:hover, .btn-interactive:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.5), 0 0 12px rgba(236, 72, 153, 0.3);
  filter: brightness(1.08);
}

.btn-primary:active, .btn-purple:active, .btn-interactive:active {
  transform: translateY(0px) scale(0.98);
}

/* Sleek Compact Range Sliders for OBS Hub */
.obs-slider-compact {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  max-width: 180px;
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.12);
  outline: none;
  margin: 4px 0;
  transition: all 0.2s ease;
}

.obs-slider-compact::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #10b981;
  cursor: pointer;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
  transition: transform 0.15s ease;
}

.obs-slider-compact::-webkit-slider-thumb:hover {
  transform: scale(1.3);
}

.obs-slider-compact.red::-webkit-slider-thumb {
  background: #ef4444;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.6);
}

.obs-slider-compact.pink::-webkit-slider-thumb {
  background: #ec4899;
  box-shadow: 0 0 6px rgba(236, 72, 153, 0.6);
}

/* Premium Cyber-Neon Social Navigation System with Ultra-Glow Aura & Clean Alignment */
.social-hover-pill {
  position: relative;
  overflow: hidden;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  height: 44px;
  cursor: pointer;
  border-radius: 12px;
  transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
  background: var(--bg-gradient, rgba(255, 255, 255, 0.03)) !important;
  border: 1.5px solid var(--border-color, rgba(255, 255, 255, 0.12)) !important;
  padding: 0 14px !important;
  margin-bottom: 6px;
  user-select: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
}

/* Define Themes & Vibrant Neon Palettes */
.social-hover-pill.ig {
  --theme-color: #ff2d78;
  --theme-color-rgb: 255, 45, 120;
  --bg-gradient: linear-gradient(135deg, rgba(255,45,120,0.12), rgba(255,45,120,0.03));
  --bg-hover-gradient: linear-gradient(135deg, rgba(255,45,120,0.32), rgba(255,45,120,0.12));
  --border-color: rgba(255,45,120,0.35);
}
.social-hover-pill.tt {
  --theme-color: #00f2fe;
  --theme-color-rgb: 0, 242, 254;
  --bg-gradient: linear-gradient(135deg, rgba(0,242,254,0.12), rgba(0,242,254,0.03));
  --bg-hover-gradient: linear-gradient(135deg, rgba(0,242,254,0.32), rgba(0,242,254,0.12));
  --border-color: rgba(0,242,254,0.35);
}
.social-hover-pill.li {
  --theme-color: #00a6ff;
  --theme-color-rgb: 0, 166, 255;
  --bg-gradient: linear-gradient(135deg, rgba(0,166,255,0.12), rgba(0,166,255,0.03));
  --bg-hover-gradient: linear-gradient(135deg, rgba(0,166,255,0.32), rgba(0,166,255,0.12));
  --border-color: rgba(0,166,255,0.35);
}
.social-hover-pill.tw {
  --theme-color: #ffffff;
  --theme-color-rgb: 255, 255, 255;
  --bg-gradient: linear-gradient(135deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02));
  --bg-hover-gradient: linear-gradient(135deg, rgba(255,255,255,0.28), rgba(255,255,255,0.08));
  --border-color: rgba(255,255,255,0.28);
}
.social-hover-pill.fb {
  --theme-color: #2d88ff;
  --theme-color-rgb: 45, 136, 255;
  --bg-gradient: linear-gradient(135deg, rgba(45,136,255,0.12), rgba(45,136,255,0.03));
  --bg-hover-gradient: linear-gradient(135deg, rgba(45,136,255,0.32), rgba(45,136,255,0.12));
  --border-color: rgba(45,136,255,0.35);
}
.social-hover-pill.wa {
  --theme-color: #25d366;
  --theme-color-rgb: 37, 211, 102;
  --bg-gradient: linear-gradient(135deg, rgba(37,211,102,0.12), rgba(37,211,102,0.03));
  --bg-hover-gradient: linear-gradient(135deg, rgba(37,211,102,0.32), rgba(37,211,102,0.12));
  --border-color: rgba(37,211,102,0.35);
}
.social-hover-pill.tg {
  --theme-color: #00b4ff;
  --theme-color-rgb: 0, 180, 255;
  --bg-gradient: linear-gradient(135deg, rgba(0,180,255,0.12), rgba(0,180,255,0.03));
  --bg-hover-gradient: linear-gradient(135deg, rgba(0,180,255,0.32), rgba(0,180,255,0.12));
  --border-color: rgba(0,180,255,0.35);
}
.social-hover-pill.gm {
  --theme-color: #ea4335;
  --theme-color-rgb: 234, 67, 53;
  --bg-gradient: linear-gradient(135deg, rgba(234,67,53,0.12), rgba(234,67,53,0.03));
  --bg-hover-gradient: linear-gradient(135deg, rgba(234,67,53,0.32), rgba(234,67,53,0.12));
  --border-color: rgba(234,67,53,0.35);
}
.social-hover-pill.wc {
  --theme-color: #96588a;
  --theme-color-rgb: 150, 88, 138;
  --bg-gradient: linear-gradient(135deg, rgba(150,88,138,0.12), rgba(150,88,138,0.03));
  --bg-hover-gradient: linear-gradient(135deg, rgba(150,88,138,0.32), rgba(150,88,138,0.12));
  --border-color: rgba(150,88,138,0.35);
}

#sidebar-more-socials-wrapper {
  display: none;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
  animation: fadeInDown 0.25s ease-out;
}
#sidebar-more-socials-wrapper.expanded {
  display: flex !important;
}

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

.social-hover-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box;
}

/* ── 1. Resting State: Icon in MID (center) & on top, Text in BG & Dim ── */
.social-logo-icon {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  z-index: 3 !important;
  pointer-events: none !important;
  transition: all 0.36s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.social-logo-icon svg {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
}

/* Dim text behind icon in resting state */
.social-text-label {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 100% !important;
  text-align: center !important;
  padding: 0 10px !important;
  font-weight: 900 !important;
  font-size: 11px !important;
  letter-spacing: 5px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  opacity: 0.28 !important;
  color: var(--theme-color) !important;
  text-shadow: 0 0 8px rgba(var(--theme-color-rgb), 0.3) !important;
  z-index: 1 !important;
  user-select: none !important;
  pointer-events: none !important;
  transition: all 0.36s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* ── 2. Hover & Selected (Active) State: Icon slides to corner, Text glows bright white across full button ── */
.social-hover-pill:hover,
.social-hover-pill.active {
  background: var(--bg-hover-gradient, rgba(255, 255, 255, 0.12)) !important;
  border-color: var(--theme-color) !important;
  box-shadow: 0 0 14px rgba(var(--theme-color-rgb), 0.35), inset 0 0 10px rgba(var(--theme-color-rgb), 0.12) !important;
}

/* Icon moves smoothly to the left corner on hover/select */
.social-hover-pill:hover .social-logo-icon,
.social-hover-pill.active .social-logo-icon {
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) scale(1.12) !important;
}

/* Text illuminates bright white, centered across the full button width with wide spacing */
.social-hover-pill:hover .social-text-label,
.social-hover-pill.active .social-text-label {
  left: 0 !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 100% !important;
  text-align: center !important;
  padding-left: 28px !important;
  padding-right: 12px !important;
  font-size: 11.5px !important;
  font-weight: 900 !important;
  letter-spacing: 5px !important;
  opacity: 1 !important;
  color: #ffffff !important;
  text-shadow: 0 0 10px rgba(var(--theme-color-rgb), 0.7) !important;
  z-index: 2 !important;
}

.social-hover-pill.ig:hover .social-logo-icon,
.social-hover-pill.ig.active .social-logo-icon {
  filter: drop-shadow(0 0 8px rgba(255, 45, 120, 0.85)) !important;
}
.social-hover-pill.tt:hover .social-logo-icon,
.social-hover-pill.tt.active .social-logo-icon {
  filter: drop-shadow(0 0 8px rgba(0, 242, 254, 0.85)) !important;
}
.social-hover-pill.li:hover .social-logo-icon,
.social-hover-pill.li.active .social-logo-icon {
  filter: drop-shadow(0 0 8px rgba(0, 166, 255, 0.85)) !important;
}
.social-hover-pill.tw:hover .social-logo-icon,
.social-hover-pill.tw.active .social-logo-icon {
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.85)) !important;
}
.social-hover-pill.fb:hover .social-logo-icon,
.social-hover-pill.fb.active .social-logo-icon {
  filter: drop-shadow(0 0 8px rgba(45, 136, 255, 0.85)) !important;
}
.social-hover-pill.wa:hover .social-logo-icon,
.social-hover-pill.wa.active .social-logo-icon {
  filter: drop-shadow(0 0 8px rgba(37, 211, 102, 0.85)) !important;
}
.social-hover-pill.tg:hover .social-logo-icon,
.social-hover-pill.tg.active .social-logo-icon {
  filter: drop-shadow(0 0 8px rgba(0, 180, 255, 0.85)) !important;
}
.social-hover-pill.gm:hover .social-logo-icon,
.social-hover-pill.gm.active .social-logo-icon {
  filter: drop-shadow(0 0 8px rgba(234, 67, 53, 0.85)) !important;
}
.social-hover-pill.wc:hover .social-logo-icon,
.social-hover-pill.wc.active .social-logo-icon {
  filter: drop-shadow(0 0 8px rgba(150, 88, 138, 0.85)) !important;
}

/* ── Coming Soon Pill State with Visible Platform Branding & Glowing Badge ── */
.social-hover-pill.pill-coming-soon {
  border-color: rgba(168, 85, 247, 0.5) !important;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.12), rgba(20, 22, 30, 0.95)) !important;
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.3), inset 0 0 12px rgba(168, 85, 247, 0.15) !important;
  position: relative !important;
  cursor: pointer !important;
}

.social-hover-pill.pill-coming-soon .social-logo-icon {
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) scale(1.08) !important;
  opacity: 1 !important;
  filter: drop-shadow(0 0 10px rgba(var(--theme-color-rgb), 0.85)) !important;
  z-index: 3 !important;
  pointer-events: none !important;
}

.social-hover-pill.pill-coming-soon .social-text-label {
  left: 44px !important;
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: auto !important;
  text-align: left !important;
  padding: 0 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  opacity: 1 !important;
  color: #ffffff !important;
  text-shadow: 0 0 10px rgba(var(--theme-color-rgb), 0.7) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

.social-hover-pill.pill-coming-soon::after {
  content: '🚀 SOON';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: 0.6px;
  color: #ffffff;
  background: linear-gradient(135deg, #9333ea, #db2777);
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 3.5px 8px;
  border-radius: 20px;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.7), inset 0 1px 2px rgba(255, 255, 255, 0.4);
  z-index: 5;
  pointer-events: none;
  animation: pulseSoonGlow 2.5s infinite alternate;
}

@keyframes pulseSoonGlow {
  0% {
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.5);
    transform: translateY(-50%) scale(1);
  }
  100% {
    box-shadow: 0 0 16px rgba(236, 72, 153, 0.8), 0 0 24px rgba(168, 85, 247, 0.5);
    transform: translateY(-50%) scale(1.04);
  }
}

@keyframes pulseSoonGlow {
  0% {
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.5);
    transform: translateY(-50%) scale(1);
  }
  100% {
    box-shadow: 0 0 16px rgba(236, 72, 153, 0.8), 0 0 24px rgba(168, 85, 247, 0.5);
    transform: translateY(-50%) scale(1.04);
  }
}

@keyframes gateCardPop {
  0% {
    opacity: 0;
    transform: scale(0.92) translateY(14px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes gateIconPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 25px rgba(168, 85, 247, 0.4);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 0 45px rgba(236, 72, 153, 0.65), 0 0 60px rgba(168, 85, 247, 0.4);
  }
}

.social-hover-pill.pill-coming-soon:hover {
  border-color: #c084fc !important;
  box-shadow: 0 0 24px rgba(168, 85, 247, 0.55), inset 0 0 16px rgba(168, 85, 247, 0.25) !important;
}

/* ── Disabled / Off Pill State with Visible Platform Branding ── */
.social-hover-pill.pill-disabled-off {
  border-color: rgba(239, 68, 68, 0.4) !important;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(20, 22, 30, 0.92)) !important;
  position: relative !important;
  cursor: pointer !important;
}

.social-hover-pill.pill-disabled-off .social-logo-icon {
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  opacity: 0.75 !important;
  z-index: 3 !important;
  pointer-events: none !important;
}

.social-hover-pill.pill-disabled-off .social-text-label {
  left: 44px !important;
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: auto !important;
  text-align: left !important;
  padding: 0 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  opacity: 0.75 !important;
  color: #fca5a5 !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

.social-hover-pill.pill-disabled-off::after {
  content: 'OFF 🔴';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.25);
  border: 1px solid rgba(239, 68, 68, 0.45);
  padding: 3px 7px;
  border-radius: 20px;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
  z-index: 5;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM NEON 3D MASTER PLUGIN ON/OFF TOGGLE SWITCHES
   ═══════════════════════════════════════════════════════════════ */
.premium-glow-switch {
  position: relative;
  display: inline-block;
  width: 64px;
  height: 32px;
  cursor: pointer;
  user-select: none;
}

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

.premium-glow-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #1e2230;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 34px;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6), 0 0 10px rgba(0, 0, 0, 0.3);
}

.premium-glow-slider:before {
  position: absolute;
  content: "";
  height: 24px;
  width: 24px;
  left: 4px;
  bottom: 3px;
  background: linear-gradient(135deg, #ffffff, #cbd5e1);
  border-radius: 50%;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45), inset 0 -1px 2px rgba(0, 0, 0, 0.2);
}

/* Checked (ON) State with Vibrant Neon Glow */
.premium-glow-switch input:checked + .premium-glow-slider {
  background: linear-gradient(135deg, #10b981, #059669);
  border-color: #34d399;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.55), inset 0 1px 3px rgba(255, 255, 255, 0.3);
}

.premium-glow-switch input:checked + .premium-glow-slider:before {
  transform: translateX(32px);
  background: #ffffff;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.9), 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Active Press / Tactile Animation */
.premium-glow-switch:active .premium-glow-slider:before {
  width: 28px;
}

/* Status Pills */
.plugin-status-pill {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.plugin-status-pill.active {
  background: rgba(16, 185, 129, 0.18);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.25);
}

.plugin-status-pill.disabled {
  background: rgba(239, 68, 68, 0.18);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.4);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.25);
}

/* ════════ ProChat Style Interactive Badges & Speech-Bubble Tooltips ════════ */
.deck-badge-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  min-width: 17px;
  border-radius: 4px;
  font-size: 10px;
  line-height: 1;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.15s ease, filter 0.15s ease;
  user-select: none;
}

.deck-badge-chip:hover {
  transform: scale(1.15);
  filter: brightness(1.2);
  z-index: 100;
}

.deck-badge-chip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #ffffff;
  color: #0f172a;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  pointer-events: none;
  z-index: 9999;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  letter-spacing: -0.1px;
}

.deck-badge-chip::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border-width: 5px 5px 0 5px;
  border-style: solid;
  border-color: #ffffff transparent transparent transparent;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  pointer-events: none;
  z-index: 9999;
}

.deck-badge-chip:hover::after,
.deck-badge-chip:hover::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ════════ ProChat Cosmic Nebula / Galaxy Effect ════════ */
@keyframes cosmicNebulaShift {
  0% { 
    background-position: 0% 50%; 
    filter: hue-rotate(0deg) brightness(1); 
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.45);
  }
  50% { 
    background-position: 100% 50%; 
    filter: hue-rotate(30deg) brightness(1.25); 
    box-shadow: 0 0 35px rgba(236, 72, 153, 0.65), inset 0 0 15px rgba(192, 132, 252, 0.4);
  }
  100% { 
    background-position: 0% 50%; 
    filter: hue-rotate(0deg) brightness(1); 
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.45);
  }
}

.deck-cosmic-card {
  position: relative;
  background: radial-gradient(circle at 30% 50%, rgba(216, 180, 254, 0.95), rgba(168, 85, 247, 0.8), rgba(88, 28, 135, 0.95)), 
              repeating-radial-gradient(circle at 70% 30%, rgba(244, 114, 182, 0.7), rgba(147, 51, 234, 0.85) 15px, rgba(15, 23, 42, 0.95) 35px);
  background-size: 200% 200%;
  animation: cosmicNebulaShift 6s ease-in-out infinite;
  border-radius: 12px;
  padding: 8px 10px;
}

.deck-cosmic-card-inner {
  background: rgba(10, 10, 15, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 7px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  backdrop-filter: blur(8px);
}

/* ════════ ProChat Emote Party Blue-Pink Gradient Card with Floating Emotes ════════ */
@keyframes floatUpAndFade {
  0% { transform: translateY(0px) scale(0.8); opacity: 0.4; }
  50% { transform: translateY(-12px) scale(1.15) rotate(10deg); opacity: 1; }
  100% { transform: translateY(-22px) scale(0.85) rotate(-10deg); opacity: 0; }
}

.deck-emote-party-card {
  background: linear-gradient(90deg, #3b82f6 0%, #a855f7 50%, #ec4899 100%);
  border-radius: 12px;
  padding: 8px 10px 10px 10px;
  position: relative;
  box-shadow: 0 4px 20px rgba(236, 72, 153, 0.45);
  overflow: visible !important;
}

.deck-floating-emotes-wrap {
  position: absolute;
  top: -12px;
  right: 18px;
  display: flex;
  gap: 8px;
  pointer-events: none;
}

.deck-floating-emote {
  font-size: 14px;
  display: inline-block;
  animation: floatUpAndFade 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.deck-floating-emote:nth-child(2) {
  animation-delay: 0.7s;
}

.deck-floating-emote:nth-child(3) {
  animation-delay: 1.4s;
}

.deck-emote-party-card-inner {
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 7px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* ════════ ProChat Cheering Bits Gem Badges & Gem Pulse Animation ════════ */
@keyframes gemPulse {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.18) rotate(8deg); filter: drop-shadow(0 0 8px currentColor); }
}

.deck-bit-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
  line-height: 1.3;
}

.deck-bit-pill span:first-child {
  display: inline-block;
  animation: gemPulse 1.8s ease-in-out infinite;
}

.deck-bit-1000 {
  background: rgba(20, 184, 166, 0.22);
  border: 1px solid rgba(20, 184, 166, 0.6);
  color: #2dd4bf;
  box-shadow: 0 0 10px rgba(20, 184, 166, 0.4);
}

.deck-bit-100 {
  background: rgba(168, 85, 247, 0.22);
  border: 1px solid rgba(168, 85, 247, 0.6);
  color: #d8b4fe;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.4);
}

/* ════════ Neon Green Flame Flicker ════════ */
@keyframes flameFlicker {
  0% { transform: scale(1) translateY(0); filter: drop-shadow(0 0 6px #22c55e); }
  50% { transform: scale(1.15) translateY(-2px); filter: drop-shadow(0 0 14px #4ade80); }
  100% { transform: scale(1) translateY(0); filter: drop-shadow(0 0 6px #22c55e); }
}

.deck-neon-flame {
  display: inline-block;
  vertical-align: middle;
  animation: flameFlicker 1.4s ease-in-out infinite;
}

/* ════════ Stream Sources & Live Chat Deck Responsive Styles ════════ */
.deck-split-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 18px;
  margin-bottom: 24px;
}

@media (max-width: 900px) {
  .deck-split-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

@media (max-width: 640px) {
  .deck-source-card {
    padding: 8px 10px !important;
  }
  .deck-msg-row {
    font-size: 11.5px !important;
  }
  #u-deck-chat-messages-container {
    max-height: 380px !important;
    min-height: 280px !important;
    padding: 10px 10px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   CHATGPT-STYLE SIDEBAR PROFILE FOOTER & POPOVER (MATCHES UI)
   ═══════════════════════════════════════════════════════════ */
.sidebar-profile-footer {
  margin-top: auto;
  position: relative;
  padding-top: 10px;
  border-top: 1px solid var(--border-default);
  width: 100%;
  flex-shrink: 0;
  box-sizing: border-box;
}

.chatgpt-profile-pill {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.chatgpt-profile-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

.chatgpt-profile-pill.active {
  background: rgba(99, 102, 241, 0.12);
  border-color: rgba(139, 92, 246, 0.45);
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.chatgpt-avatar-circle {
  width: 33px;
  height: 33px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3f3f46, #27272a);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  font-weight: 700;
  font-size: 12.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-transform: uppercase;
  background-size: cover;
  background-position: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.chatgpt-avatar-circle.gold {
  background: linear-gradient(135deg, #d97706, #b45309) !important;
  border-color: rgba(251, 191, 36, 0.4) !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(217, 119, 6, 0.4);
}

.chatgpt-pill-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.chatgpt-pill-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}

.chatgpt-pill-sub {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1.25;
  margin-top: 1.5px;
}

/* ── Sleek Upgrade Button Inside Pill (Free Tier) ── */
.chatgpt-pill-upgrade-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8.5px;
  font-size: 10.5px;
  font-weight: 600;
  font-family: inherit;
  color: #e0e7ff;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.28), rgba(168, 85, 247, 0.35));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(192, 132, 252, 0.45);
  border-radius: 9999px;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 1.3;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
}

.chatgpt-pill-upgrade-btn svg {
  color: #fbbf24;
  filter: drop-shadow(0 0 3px rgba(251, 191, 36, 0.6));
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.chatgpt-pill-upgrade-btn:hover {
  background: linear-gradient(135deg, #6366f1, #9333ea);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 14px rgba(147, 51, 234, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transform: translateY(-1px);
}

.chatgpt-pill-upgrade-btn:hover svg {
  transform: scale(1.18) rotate(15deg);
}

.chatgpt-pill-upgrade-btn:active {
  transform: translateY(0) scale(0.96);
}

/* ── Floating Popover Menu (ChatGPT Clone - Glassmorphic Ultra) ── */
.chatgpt-profile-popover {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  width: 248px;
  background: rgba(18, 20, 29, 0.76);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  padding: 7px;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(0.97);
  transition: opacity 0.2s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s ease;
  pointer-events: none;
  box-sizing: border-box;
}

.chatgpt-profile-popover.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.chatgpt-popover-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.18s ease;
  user-select: none;
  border: 1px solid transparent;
}

.chatgpt-popover-header:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.chatgpt-popover-header:hover .chatgpt-popover-chevron {
  color: #ffffff;
  transform: translateX(2px);
}

.chatgpt-popover-meta {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.chatgpt-popover-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chatgpt-popover-sub {
  font-size: 11.5px;
  color: #a1a1aa;
}

.chatgpt-popover-chevron {
  color: #71717a;
  flex-shrink: 0;
  transition: transform 0.18s ease, color 0.18s ease;
}

.chatgpt-popover-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  margin: 6px 4px;
}

.chatgpt-popover-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 11px;
  color: #e4e4e7;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  border: 1px solid transparent;
}

.chatgpt-popover-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateX(2px);
}

.chatgpt-popover-item svg {
  color: #94a3b8;
  flex-shrink: 0;
  transition: color 0.16s ease, transform 0.16s ease;
}

.chatgpt-popover-item:hover svg {
  color: #ffffff;
  transform: scale(1.08);
}

.chatgpt-popover-item.danger:hover {
  background: rgba(239, 68, 68, 0.14);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.2);
  box-shadow: 0 2px 10px rgba(239, 68, 68, 0.15);
}

.chatgpt-popover-item.danger:hover svg {
  color: #ef4444;
}

.chatgpt-popover-item .item-chevron-right {
  margin-left: auto;
  color: #71717a;
  transition: transform 0.16s ease, color 0.16s ease;
}

.chatgpt-popover-item:hover .item-chevron-right {
  color: #ffffff;
  transform: translateX(2px);
}

/* ═══════════════════════════════════════════════════
   SETTINGS & CREATOR PROFILE SCREEN STYLING
   ═══════════════════════════════════════════════════ */

.profile-main-card,
.profile-ref-card,
.profile-quota-section,
.profile-security-section {
  background: var(--bg-surface);
  border: 1px solid var(--border-medium);
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-card);
  transition: all 0.25s ease;
}

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

.profile-section-heading {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.profile-header-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.profile-verified-badge {
  font-size: 11.5px;
  font-weight: 700;
  color: #10B981;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
  padding: 4px 12px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.profile-verified-badge .status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10B981;
}

.profile-id-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  padding: 4px 10px;
  border-radius: 8px;
  font-family: monospace;
}

.profile-photo-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 20px;
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  margin-bottom: 22px;
}

.profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a855f7, #6366f1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(168, 85, 247, 0.4);
}

.profile-photo-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.profile-photo-desc {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.btn-change-photo {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-medium);
  color: var(--text-primary);
  font-size: 11.5px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-change-photo:hover {
  background: rgba(255, 255, 255, 0.15);
}

.profile-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

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

.profile-field-input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  background: var(--bg-input);
  border: 1px solid var(--border-input);
  color: var(--text-primary);
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.profile-field-input.readonly {
  opacity: 0.8;
  cursor: not-allowed;
}

.profile-plan-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border-input);
  border-radius: 10px;
  min-height: 42px;
  box-sizing: border-box;
}

.profile-plan-text {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-upgrade-badge {
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
  border: none;
  color: #FFFFFF !important;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 20px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
  transition: all 0.2s ease;
}

.btn-upgrade-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.5);
}

.profile-save-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.profile-btn-save {
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
  border: none;
  color: #FFFFFF !important;
  font-size: 13px;
  font-weight: 800;
  padding: 10px 24px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
  transition: all 0.2s ease;
}

.profile-btn-save:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.45);
}

/* ── Profile Referral Section ── */
.profile-ref-card {
  background: linear-gradient(145deg, rgba(20, 24, 35, 0.95), rgba(15, 23, 42, 0.95));
}

.profile-ref-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 12px;
}

.profile-ref-subtitle {
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 4px 0 0 0;
}

.profile-btn-hub-link {
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.3);
  color: #C084FC !important;
  font-size: 11.5px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.profile-ref-bar {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-medium);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 20px;
}

.profile-ref-bar-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 11px;
}

.profile-ref-bar-tag {
  font-weight: 800;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.profile-ref-rate-tag {
  font-weight: 700;
  color: #10B981;
}

.profile-ref-input-row {
  display: flex;
  gap: 8px;
}

.profile-ref-input {
  flex: 1;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-input);
  border-radius: 8px;
  padding: 8px 14px;
  font-family: monospace;
  font-size: 13px;
  color: #34D399;
}

.btn-copy-ref {
  background: #10B981;
  border: none;
  color: #FFFFFF !important;
  font-size: 12px;
  font-weight: 800;
  padding: 0 16px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.3);
  transition: all 0.2s ease;
}

.btn-copy-ref:hover {
  background: #059669;
}

.btn-share-social {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: all 0.2s ease;
}

.btn-share-social.whatsapp {
  background: #25D366;
  color: #FFF;
}

.btn-share-social.telegram {
  background: #24A1DE;
  color: #FFF;
}

.profile-ref-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}

.profile-stat-item {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 14px;
}

.profile-stat-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.profile-stat-val {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.profile-stat-val.text-purple { color: #C084FC; }
.profile-stat-val.text-emerald { color: #34D399; }
.profile-stat-val.text-amber { color: #FBBF24; }

.profile-stat-sub {
  font-size: 10.5px;
  color: var(--text-muted);
}

.profile-stat-sub.text-success { color: #10B981; }

/* ── Quota Box ── */
.profile-quota-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 14px;
}

.profile-quota-box {
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 16px;
}

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

.profile-quota-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
}

.profile-quota-val {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text-primary);
}

.profile-quota-track {
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 6px;
}

.profile-quota-bar {
  height: 100%;
  background: linear-gradient(90deg, #6366F1, #A855F7);
  border-radius: 6px;
}

.profile-quota-sub {
  font-size: 11px;
  color: var(--text-muted);
}

.profile-channels-list {
  font-size: 12px;
  color: var(--text-muted);
  margin: 6px 0 10px 0;
}

.btn-upgrade-limits {
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.35);
  color: #A5B4FC !important;
  font-size: 11.5px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* ── Security ── */
.profile-security-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}

.profile-checkbox-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.btn-update-pass {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-medium);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* ═══════════════════════════════════════════════════
   LIGHT THEME OVERRIDES FOR PROFILE & SETTINGS
   ═══════════════════════════════════════════════════ */

[data-theme="light"] .profile-main-card,
[data-theme="light"] .profile-ref-card,
[data-theme="light"] .profile-quota-section,
[data-theme="light"] .profile-security-section {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .profile-section-heading {
  color: #0F172A !important;
}

[data-theme="light"] .profile-id-tag {
  background: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
  color: #475569 !important;
}

[data-theme="light"] .profile-photo-row {
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
}

[data-theme="light"] .profile-photo-title {
  color: #0F172A !important;
}

[data-theme="light"] .profile-photo-desc {
  color: #64748B !important;
}

[data-theme="light"] .btn-change-photo {
  background: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .btn-change-photo:hover {
  background: #F1F5F9 !important;
}

[data-theme="light"] .profile-field-label {
  color: #334155 !important;
  font-weight: 600 !important;
}

[data-theme="light"] .profile-field-input {
  background: #F8FAFC !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}

[data-theme="light"] .profile-field-input:focus {
  background: #FFFFFF !important;
  border-color: #6366F1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

[data-theme="light"] .profile-field-input.readonly {
  background: #F1F5F9 !important;
  color: #475569 !important;
}

[data-theme="light"] .profile-plan-box {
  background: #F8FAFC !important;
  border-color: #CBD5E1 !important;
}

[data-theme="light"] .profile-plan-text {
  color: #0F172A !important;
}

[data-theme="light"] .profile-ref-subtitle {
  color: #64748B !important;
}

[data-theme="light"] .profile-btn-hub-link {
  background: #F3E8FF !important;
  border-color: #D8B4FE !important;
  color: #7E22CE !important;
}

[data-theme="light"] .profile-ref-bar {
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
}

[data-theme="light"] .profile-ref-bar-tag {
  color: #0F172A !important;
}

[data-theme="light"] .profile-ref-input {
  background: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  color: #059669 !important;
  font-weight: 700 !important;
}

[data-theme="light"] .profile-stat-item {
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
}

[data-theme="light"] .profile-stat-label {
  color: #64748B !important;
}

[data-theme="light"] .profile-stat-val {
  color: #0F172A !important;
}

[data-theme="light"] .profile-stat-val.text-purple { color: #7E22CE !important; }
[data-theme="light"] .profile-stat-val.text-emerald { color: #059669 !important; }
[data-theme="light"] .profile-stat-val.text-amber { color: #D97706 !important; }

[data-theme="light"] .profile-stat-sub {
  color: #64748B !important;
}

[data-theme="light"] .profile-quota-box {
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
}

[data-theme="light"] .profile-quota-title {
  color: #0F172A !important;
}

[data-theme="light"] .profile-quota-val {
  color: #0F172A !important;
}

[data-theme="light"] .profile-quota-track {
  background: #E2E8F0 !important;
}

[data-theme="light"] .profile-quota-sub {
  color: #64748B !important;
}

[data-theme="light"] .profile-channels-list {
  color: #475569 !important;
}

[data-theme="light"] .btn-upgrade-limits {
  background: #EEF2FF !important;
  border-color: #C7D2FE !important;
  color: #4338CA !important;
}

[data-theme="light"] .profile-checkbox-wrap {
  color: #334155 !important;
}

[data-theme="light"] .btn-update-pass {
  background: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}

/* ═══════════════════════════════════════════════════
   LIGHT THEME OVERRIDES FOR CHATGPT PROFILE WIDGET
   ═══════════════════════════════════════════════════ */

[data-theme="light"] .chatgpt-profile-pill {
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .chatgpt-profile-pill:hover {
  background: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
}

[data-theme="light"] .chatgpt-pill-name {
  color: #0F172A !important;
}

[data-theme="light"] .chatgpt-pill-sub {
  color: #64748B !important;
}

[data-theme="light"] .chatgpt-profile-popover {
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(24px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .chatgpt-popover-header:hover {
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
}

[data-theme="light"] .chatgpt-popover-name {
  color: #0F172A !important;
}

[data-theme="light"] .chatgpt-popover-sub {
  color: #64748B !important;
}

[data-theme="light"] .chatgpt-popover-chevron {
  color: #94A3B8 !important;
}

[data-theme="light"] .chatgpt-popover-header:hover .chatgpt-popover-chevron {
  color: #0F172A !important;
}

[data-theme="light"] .chatgpt-popover-divider {
  background: #E2E8F0 !important;
}

[data-theme="light"] .chatgpt-popover-item {
  color: #334155 !important;
  font-weight: 600 !important;
}

[data-theme="light"] .chatgpt-popover-item:hover {
  background: #F1F5F9 !important;
  color: #0F172A !important;
  border-color: transparent !important;
}

[data-theme="light"] .chatgpt-popover-item svg {
  color: #64748B !important;
}

[data-theme="light"] .chatgpt-popover-item:hover svg {
  color: #6366F1 !important;
}

[data-theme="light"] .chatgpt-popover-item.danger {
  color: #DC2626 !important;
}

[data-theme="light"] .chatgpt-popover-item.danger:hover {
  background: #FEE2E2 !important;
  color: #B91C1C !important;
}

[data-theme="light"] .chatgpt-popover-item.danger svg {
  color: #EF4444 !important;
}

[data-theme="light"] .chatgpt-popover-item.danger:hover svg {
  color: #DC2626 !important;
}

[data-theme="light"] .chatgpt-popover-item .item-chevron-right {
  color: #94A3B8 !important;
}

[data-theme="light"] .chatgpt-popover-item:hover .item-chevron-right {
  color: #0F172A !important;
}

/* ═══════════════════════════════════════════════════
   LIGHT THEME OVERRIDES FOR BILLING & REFERRALS
   ═══════════════════════════════════════════════════ */

/* Billing Hero Banner */
[data-theme="light"] #billing-current-plan-hero {
  background: linear-gradient(135deg, #F8FAFC 0%, #EEF2FF 100%) !important;
  border: 1.5px solid #C7D2FE !important;
  box-shadow: 0 10px 30px rgba(99, 102, 241, 0.08) !important;
}

[data-theme="light"] #billing-hero-plan-title {
  color: #0F172A !important;
}

[data-theme="light"] #billing-hero-plan-price {
  color: #4F46E5 !important;
}

[data-theme="light"] #billing-hero-renewal-date,
[data-theme="light"] #billing-hero-payment-method {
  color: #1E293B !important;
}

[data-theme="light"] #billing-current-plan-hero [style*="background: rgba(0,0,0,0.25)"] {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

[data-theme="light"] #billing-current-plan-hero [style*="color: #e2e8f0"] {
  color: #0F172A !important;
}

[data-theme="light"] #billing-current-plan-hero [style*="background: rgba(255,255,255,0.08)"] {
  background: #E2E8F0 !important;
}

[data-theme="light"] #billing-current-plan-hero [style*="background: rgba(255,255,255,0.06)"] {
  background: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}

/* Billing Currency & Cycle Switchers */
[data-theme="light"] #screen-billing [style*="background: rgba(15, 23, 42, 0.8)"] {
  background: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
  box-shadow: none !important;
}

[data-theme="light"] #billing-curr-btn-usd,
[data-theme="light"] #billing-curr-btn-pkr:not([style*="linear-gradient"]),
[data-theme="light"] #billing-cycle-btn-yearly:not([style*="linear-gradient"]),
[data-theme="light"] #billing-cycle-btn-monthly:not([style*="linear-gradient"]) {
  color: #475569 !important;
}

/* Pricing Grid Title in Billing */
[data-theme="light"] #billing-plans-grid-section h2 {
  color: #0F172A !important;
}

[data-theme="light"] #billing-plans-grid-section p {
  color: #64748B !important;
}

/* 5 Dynamic Tier Cards in Billing */
[data-theme="light"] .billing-tier-card {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .billing-tier-card [style*="color: #fff"],
[data-theme="light"] .billing-tier-card [style*="color:#fff"] {
  color: #0F172A !important;
}

[data-theme="light"] .billing-tier-card [style*="color: #cbd5e1"],
[data-theme="light"] .billing-tier-card [style*="color:#cbd5e1"] {
  color: #334155 !important;
}

[data-theme="light"] .billing-tier-card [style*="color: #94a3b8"],
[data-theme="light"] .billing-tier-card [style*="color:#94a3b8"] {
  color: #64748B !important;
}

[data-theme="light"] .billing-tier-card [style*="background: rgba(255,255,255,0.06)"] {
  background: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
  box-shadow: none !important;
}

[data-theme="light"] .billing-tier-card [style*="background: rgba(255,255,255,0.05)"] {
  background: #F8FAFC !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}

/* Invoices and Payment Method Card in Billing */
[data-theme="light"] #screen-billing [style*="background: rgba(14, 18, 30, 0.85)"] {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] #screen-billing table tr {
  border-bottom-color: #E2E8F0 !important;
}

[data-theme="light"] #screen-billing table thead tr {
  color: #64748B !important;
  border-bottom-color: #CBD5E1 !important;
}

[data-theme="light"] #screen-billing table tbody tr {
  color: #0F172A !important;
}

[data-theme="light"] #screen-billing table tbody tr [style*="color: #fff"] {
  color: #0F172A !important;
}

/* Referrals Screen Light Overrides */
[data-theme="light"] #screen-referrals [style*="background: rgba(0,0,0,0.25)"] {
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
}

[data-theme="light"] #screen-referrals [style*="color: #fff"],
[data-theme="light"] #screen-referrals [style*="color:#fff"] {
  color: #0F172A !important;
}

[data-theme="light"] #screen-referrals [style*="color: #a1a1aa"] {
  color: #64748B !important;
}

[data-theme="light"] #screen-referrals input.modal-input {
  background: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  color: #059669 !important;
}

[data-theme="light"] #referrals-log-tbody tr {
  border-bottom-color: #E2E8F0 !important;
}

[data-theme="light"] #referrals-log-tbody td[style*="color: #fff"] {
  color: #0F172A !important;
}

/* Analytics Light Overrides */
[data-theme="light"] #screen-analytics [style*="background: rgba(18, 19, 25, 0.85)"] {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] #screen-analytics [style*="color: #fff"],
[data-theme="light"] #screen-analytics [style*="color:#fff"] {
  color: #0F172A !important;
}

[data-theme="light"] #screen-analytics [style*="color: #a1a1aa"] {
  color: #64748B !important;
}

[data-theme="light"] #screen-analytics table thead tr {
  color: #64748B !important;
  border-bottom-color: #CBD5E1 !important;
}

[data-theme="light"] #screen-analytics table tbody tr {
  border-bottom-color: #E2E8F0 !important;
  color: #0F172A !important;
}

/* Multistream Screen Light Overrides */
[data-theme="light"] #screen-multistream [style*="background: linear-gradient(135deg, rgba(20, 24, 33, 0.9)"] {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] #screen-multistream [style*="background: rgba(0,0,0,0.3)"] {
  background: #F8FAFC !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}

[data-theme="light"] #screen-multistream [style*="background: rgba(255,255,255,0.06)"] {
  background: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}

/* ══════════════════════════════════════════════════════════════════
   ⚡ QUICK CONNECT STUDIO (FULL PAGE SCREEN & HEADER BUTTON)
   ══════════════════════════════════════════════════════════════════ */
.btn-quick-connect {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.22), rgba(20, 184, 166, 0.18));
  border: 1px solid rgba(6, 182, 212, 0.45);
  color: #fff;
  padding: 7px 16px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(6, 182, 212, 0.2);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  margin-right: 8px;
}

.btn-quick-connect:hover {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.35), rgba(20, 184, 166, 0.3));
  border-color: rgba(6, 182, 212, 0.75);
  box-shadow: 0 4px 20px rgba(6, 182, 212, 0.45);
  transform: translateY(-1px);
}

.btn-quick-connect.active {
  background: linear-gradient(135deg, #0891b2, #0d9488);
  border-color: #06b6d4;
  box-shadow: 0 0 16px rgba(6, 182, 212, 0.4);
}

.qc-btn-icon {
  font-size: 14px;
  filter: drop-shadow(0 0 5px #22d3ee);
}

/* ──── Screen: Quick Connect Studio Base Layout (Deep Obsidian Canvas) ──── */
#screen-quick-connect {
  background: transparent !important;
  color: var(--text-primary);
  min-height: calc(100vh - 120px);
  position: relative;
}

/* Page Header */
.qc-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.qc-page-header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.qc-current-plan-card {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.08), rgba(20, 184, 166, 0.05));
  border: 1px solid rgba(6, 182, 212, 0.2);
  border-radius: 12px;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.25s ease;
  min-width: 140px;
}

.qc-current-plan-card:hover {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(20, 184, 166, 0.1));
  border-color: rgba(6, 182, 212, 0.5);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(6, 182, 212, 0.15);
}

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

.qc-stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.qc-stat-chip.connected {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.28);
  color: #34d399;
}

.qc-stat-chip.connected .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 8px #34d399;
}

.qc-stat-chip.available {
  background: rgba(6, 182, 212, 0.12);
  border: 1px solid rgba(6, 182, 212, 0.28);
  color: #67e8f9;
}

.qc-stat-chip.tier {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(20, 184, 166, 0.08));
  border: 1px solid rgba(6, 182, 212, 0.25);
  color: #67e8f9;
}

/* Category Filter Bar */
.qc-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.qc-filter-btn {
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: #94a3b8;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.qc-filter-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
}

.qc-filter-btn.active {
  background: rgba(6, 182, 212, 0.18);
  border-color: #06b6d4;
  color: #fff;
  box-shadow: 0 2px 14px rgba(6, 182, 212, 0.35);
}

/* Platform Cards Responsive Grid */
.qc-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

/* Platform Card */
.qc-card {
  background: linear-gradient(165deg, #0f1a1e 0%, #111520 50%, #0f1218 100%);
  border: 1px solid rgba(6, 182, 212, 0.1);
  border-radius: 18px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.qc-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.4), rgba(20, 184, 166, 0.25), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.qc-card:hover::before {
  opacity: 1;
}

.qc-card:hover {
  transform: translateY(-4px);
  border-color: rgba(6, 182, 212, 0.45);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 0 30px rgba(6, 182, 212, 0.12), 0 0 60px rgba(20, 184, 166, 0.06);
}

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

.qc-card-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.qc-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.qc-card-icon svg {
  width: 24px;
  height: 24px;
}

.qc-card-meta {
  min-width: 0;
}

.qc-card-title {
  font-size: 14.5px;
  font-weight: 800;
  color: #f8fafc;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qc-card-subtitle {
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qc-card-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

.qc-card-badge.free {
  background: rgba(255, 255, 255, 0.06);
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.qc-card-badge.available {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(20, 184, 166, 0.12));
  color: #67e8f9;
  border: 1px solid rgba(6, 182, 212, 0.35);
  font-weight: 700;
}

.qc-card-badge.social {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.qc-card-body {
  margin-bottom: 18px;
  font-size: 11.5px;
  color: #cbd5e1;
  line-height: 1.55;
}

.qc-card-features {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.qc-card-feature-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: #94a3b8;
}

.qc-card-feature-item span.check {
  color: #06b6d4;
  font-weight: 900;
}

.qc-card-footer {
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.qc-status-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
}

.qc-status-indicator.connected {
  color: #34d399;
}

.qc-status-indicator.ready {
  color: #64748b;
}

.qc-btn-connect-page {
  padding: 8px 18px;
  background: linear-gradient(135deg, #06b6d4, #14b8a6);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  color: #ffffff;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 16px rgba(6, 182, 212, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: all 0.25s ease;
}

.qc-btn-connect-page:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #22d3ee, #2dd4bf);
  box-shadow: 0 8px 24px rgba(6, 182, 212, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.qc-btn-disconnect-page {
  padding: 6px 13px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
  color: #f87171;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.qc-btn-disconnect-page:hover {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.45);
  color: #fca5a5;
}

/* Card State: CONNECTED */
.qc-card.connected {
  border-color: rgba(16, 185, 129, 0.3);
  background: linear-gradient(165deg, rgba(16, 185, 129, 0.06) 0%, #13162a 40%, #111520 100%);
  box-shadow: 0 8px 28px rgba(16, 185, 129, 0.1), 0 4px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(16, 185, 129, 0.1);
}

.qc-card.connected::before {
  background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.4), rgba(52, 211, 153, 0.2), transparent);
  opacity: 1;
}

.qc-card.connected:hover {
  border-color: rgba(16, 185, 129, 0.55);
  box-shadow: 0 16px 40px rgba(16, 185, 129, 0.16), 0 8px 28px rgba(0, 0, 0, 0.45);
}

/* LIGHT THEME OVERRIDES */
[data-theme="light"] .btn-quick-connect {
  background: linear-gradient(135deg, #ecfeff, #e0f2fe);
  border-color: #67e8f9;
  color: #0e7490;
  box-shadow: 0 2px 8px rgba(6, 182, 212, 0.08);
}

[data-theme="light"] .btn-quick-connect:hover {
  background: linear-gradient(135deg, #cffafe, #bae6fd);
  border-color: #06b6d4;
  color: #155e75;
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.15);
}

[data-theme="light"] #screen-quick-connect {
  background: #F8FAFC !important;
}

[data-theme="light"] .qc-page-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .qc-current-plan-card {
  background: linear-gradient(135deg, #ecfeff, #f0fdfa);
  border-color: #99f6e4;
}

[data-theme="light"] #qc-fullpage-plan-name {
  color: #0f172a !important;
}

[data-theme="light"] .qc-filter-btn {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #475569;
}

[data-theme="light"] .qc-filter-btn.active {
  background: #ecfeff;
  border-color: #06b6d4;
  color: #0e7490;
}

[data-theme="light"] .qc-card {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .qc-card:hover {
  border-color: #06b6d4;
  box-shadow: 0 12px 28px rgba(6, 182, 212, 0.12);
}

[data-theme="light"] .qc-card-title {
  color: #0f172a;
}

[data-theme="light"] .qc-card-subtitle {
  color: #64748b;
}

[data-theme="light"] .qc-card-body {
  color: #475569;
}

[data-theme="light"] .qc-card-feature-item {
  color: #64748b;
}

[data-theme="light"] .qc-card-footer {
  border-top-color: #f1f5f9;
}

[data-theme="light"] .qc-card.connected {
  background: linear-gradient(165deg, #f0fdf4, #ffffff);
  border-color: #86efac;
}

[data-theme="light"] .qc-card::before {
  background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.15), transparent);
}

[data-theme="light"] .qc-card.connected::before {
  background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.25), transparent);
}

[data-theme="light"] .qc-card-badge.available {
  background: linear-gradient(135deg, #ecfeff, #f0fdfa);
  color: #0891b2;
  border-color: #99f6e4;
}

[data-theme="light"] .qc-btn-connect-page {
  box-shadow: 0 4px 14px rgba(6, 182, 212, 0.25);
}

/* Light Theme Overrides for Header Logo & Dashboard Nav */
[data-theme="light"] .header-logo-text {
  background: linear-gradient(135deg, #0f172a 40%, #0891b2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: none;
}

[data-theme="light"] .logo-version-badge {
  background: #e0f2fe;
  border-color: #67e8f9;
  color: #0891b2;
  -webkit-text-fill-color: #0891b2;
}

[data-theme="light"] #main-sidebar-menu .sidebar-nav-item[data-screen="dashboard"] {
  background: rgba(6, 182, 212, 0.05) !important;
  border-color: rgba(6, 182, 212, 0.2) !important;
  color: #334155 !important;
}

[data-theme="light"] #main-sidebar-menu .sidebar-nav-item[data-screen="dashboard"] .sidebar-label {
  color: #334155 !important;
}

[data-theme="light"] #main-sidebar-menu .sidebar-nav-item[data-screen="dashboard"].active {
  background: linear-gradient(135deg, #e0f2fe 0%, #ecfeff 100%) !important;
  border-color: #0891b2 !important;
  box-shadow: 0 2px 10px rgba(6, 182, 212, 0.15) !important;
}

[data-theme="light"] #main-sidebar-menu .sidebar-nav-item[data-screen="dashboard"].active .sidebar-label {
  color: #0e7490 !important;
}

[data-theme="light"] #main-sidebar-menu .sidebar-nav-item[data-screen="dashboard"].active .nav-tag-badge {
  background: #0891b2;
  color: #ffffff;
}

/* ═══════════════════════════════════════════════════════════════
   🚀 CONNECTED PLATFORMS & MULTI-HUB QUICK LAUNCH CARDS
   ═══════════════════════════════════════════════════════════════ */
.quick-hub-card {
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
}

.quick-hub-card:hover {
  transform: translateY(-3px) !important;
  filter: brightness(1.08) !important;
}

.quick-hub-card:active {
  transform: scale(0.96) !important;
  filter: brightness(0.95) !important;
}

.quick-hub-card.hub-card-yt:hover {
  border-color: rgba(239, 68, 68, 0.65) !important;
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.22) !important;
}

.quick-hub-card.hub-card-dc:hover {
  border-color: rgba(88, 101, 242, 0.65) !important;
  box-shadow: 0 8px 24px rgba(88, 101, 242, 0.22) !important;
}

.quick-hub-card.hub-card-ms:hover {
  border-color: rgba(6, 182, 212, 0.65) !important;
  box-shadow: 0 8px 24px rgba(6, 182, 212, 0.22) !important;
}

.quick-hub-card.hub-card-ig:hover {
  border-color: rgba(236, 72, 153, 0.65) !important;
  box-shadow: 0 8px 24px rgba(236, 72, 153, 0.22) !important;
}

.quick-hub-card.hub-card-tw:hover {
  border-color: rgba(56, 189, 248, 0.65) !important;
  box-shadow: 0 8px 24px rgba(56, 189, 248, 0.22) !important;
}

.quick-hub-card.hub-card-fb:hover {
  border-color: rgba(59, 130, 246, 0.65) !important;
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.22) !important;
}

/* Light Theme Overrides for Quick Hubs */
[data-theme="light"] .quick-hub-card {
  background: #ffffff !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
}
[data-theme="light"] .quick-hub-card > div > div:nth-child(2) {
  color: #0f172a !important;
}
[data-theme="light"] .quick-hub-card > div > div:nth-child(3) {
  color: #64748b !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   YOUTUBE STUDIO & OBS STREAM OVERLAYS MOBILE-ONLY RESPONSIVE STYLES
   (Preserves 100% desktop/PC view untouched, activates only on screens <= 768px)
   ═══════════════════════════════════════════════════════════════════════════ */
.yt-mobile-subtab-nav {
  display: none;
}

@media (max-width: 768px) {
  /* 1. Mobile Subtab Switcher Bar */
  .yt-mobile-subtab-nav {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
    margin-bottom: 18px !important;
    background: rgba(14, 16, 24, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 6px !important;
    border-radius: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: sticky !important;
    top: 64px !important;
    z-index: 50 !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
  }

  .yt-mobile-tab-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 4px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    color: #94a3b8 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    gap: 3px !important;
    text-align: center !important;
    user-select: none !important;
  }

  .yt-mobile-tab-btn span:first-child {
    font-size: 15px !important;
    line-height: 1 !important;
  }

  .yt-mobile-tab-btn.active {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.22), rgba(220, 38, 38, 0.3)) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 12px rgba(239, 68, 68, 0.35) !important;
  }

  /* 2. Top YouTube Studio Platform Card */
  #accounts-content-yt .platform-card {
    padding: 16px 14px !important;
    border-radius: 16px !important;
    margin-bottom: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  #accounts-content-yt .platform-card .platform-info {
    width: 100% !important;
  }

  #accounts-content-yt .platform-card .platform-name {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  #accounts-content-yt .platform-card > div:nth-child(3) {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #accounts-content-yt .btn-connect-card,
  #accounts-content-yt .btn-disconnect-card,
  #accounts-content-yt .btn-howto-connect {
    width: 100% !important;
    min-height: 42px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  #yt-oauth-error-banner:empty {
    display: none !important;
    padding: 0 !important;
    border: none !important;
    margin: 0 !important;
  }

  /* 3. OBS Stream Overlays Hub (Command Center) Mobile Overhauls */
  #yt-subtab-content-obs > div {
    padding: 16px 12px !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  /* Top Bar Header */
  #yt-subtab-content-obs > div > div:first-of-type {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding-bottom: 14px !important;
    margin-bottom: 16px !important;
    width: 100% !important;
  }

  #yt-subtab-content-obs > div > div:first-of-type > div:last-child {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  #yt-obs-header-channel {
    max-width: 190px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Main 2-Column Grid (240px 1fr) -> Stack Vertically */
  #yt-subtab-content-obs div[style*="grid-template-columns: 240px 1fr"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Left Column: Overlay Components Sidebar -> 2x2 Grid on Mobile */
  #yt-subtab-content-obs div[style*="grid-template-columns: 240px 1fr"] > div:first-child {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #yt-subtab-content-obs div[style*="grid-template-columns: 240px 1fr"] > div:first-child > div:first-child {
    grid-column: 1 / -1 !important;
    margin-bottom: 2px !important;
    padding-left: 2px !important;
  }

  #obs-side-item-chat,
  #obs-side-item-subscriber,
  #obs-side-item-counter,
  #obs-side-item-branding {
    padding: 10px 8px !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
    min-height: 44px !important;
  }

  #obs-side-item-chat span,
  #obs-side-item-subscriber span,
  #obs-side-item-counter span,
  #obs-side-item-branding span {
    font-size: 11.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Master OBS Browser Source Card */
  #yt-subtab-content-obs div[style*="background: rgba(15, 23, 42, 0.6)"] {
    padding: 14px 12px !important;
    border-radius: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #yt-subtab-content-obs div[style*="background: rgba(15, 23, 42, 0.6)"] > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
  }

  /* OBS URL Input + Buttons Row -> Stack Cleanly */
  #yt-subtab-content-obs div[style*="margin-bottom: 14px;"][style*="display: flex; gap: 10px;"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #obs-chat-overlay-url-input {
    width: 100% !important;
    font-size: 11px !important;
    padding: 10px 12px !important;
    box-sizing: border-box !important;
  }

  #yt-subtab-content-obs div[style*="margin-bottom: 14px;"][style*="display: flex; gap: 10px;"] > button {
    width: 100% !important;
    min-height: 40px !important;
    font-size: 12.5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* OBS Status Strip -> 2x2 Grid */
  #obs-yt-status-strip {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    font-size: 11px !important;
    box-sizing: border-box !important;
  }

  /* OBS Toggle Pills -> 2-Column Grid */
  #yt-subtab-content-obs div[style*="display: flex; gap: 10px; align-items: center; flex-wrap: wrap;"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #yt-subtab-content-obs div[style*="display: flex; gap: 10px; align-items: center; flex-wrap: wrap;"] label {
    padding: 7px 10px !important;
    font-size: 10.5px !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  /* Customizer + Preview Monitor Split Grid (0.8fr 1.2fr) -> Stack Vertically */
  #yt-subtab-content-obs div[style*="grid-template-columns: 0.8fr 1.2fr"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #yt-subtab-content-obs div[style*="background: rgba(15, 23, 42, 0.5)"] {
    padding: 14px 12px !important;
    border-radius: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Range Sliders on Mobile */
  #yt-subtab-content-obs .obs-slider-compact {
    max-width: 100% !important;
    flex: 1 !important;
  }

  /* 16:9 Canvas Preview Monitor */
  #obs-chat-preview-canvas-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    box-sizing: border-box !important;
    border-radius: 10px !important;
  }

  /* Multi-Platform Stats Grid inside Counter Tab */
  #obs-subtab-counter-content div[style*="grid-template-columns: 1.2fr 1fr 1fr"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }

  #obs-subtab-counter-content div[style*="grid-template-columns: 1.2fr 1fr 1fr"] > div:first-child {
    grid-column: 1 / -1 !important;
  }

  /* 4. Dashboard Stats Subtab */
  #yt-subtab-content-dashboard div[style*="grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #yt-subtab-content-dashboard div[style*="grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #yt-subtab-content-dashboard .glass-card {
    padding: 14px 12px !important;
    border-radius: 14px !important;
  }

  #yt-subtab-content-dashboard .glass-card div[style*="font-size: 26px"] {
    font-size: 20px !important;
  }

  /* 5. Live Streams / Live Chat Deck Subtab */
  #yt-live-studio-header-card {
    padding: 12px 12px !important;
    border-radius: 14px !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
  }

  #yt-live-studio-header-card h3 {
    font-size: 14px !important;
    line-height: 1.25 !important;
  }

  #yt-live-studio-header-card div[style*="font-size: 11.5px"] {
    font-size: 10.5px !important;
  }

  #u-yt-live-status-badge {
    font-size: 9.5px !important;
    padding: 3px 8px !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
  }

  #yt-live-header-controls-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding-top: 8px !important;
  }

  #yt-live-header-controls-grid > div {
    padding: 7px 8px !important;
    border-radius: 10px !important;
    min-width: 0 !important;
  }

  #u-yt-live-mode-status-text {
    font-size: 9.5px !important;
    gap: 4px !important;
  }

  #yt-live-header-controls-grid span[style*="font-size: 11px"] {
    font-size: 10px !important;
  }

  #u-yt-live-bot-badge {
    font-size: 8.5px !important;
    padding: 2px 5px !important;
    border-radius: 6px !important;
  }

  #yt-live-bot-features-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #yt-live-bot-features-grid .content-card {
    padding: 10px 8px !important;
    border-radius: 12px !important;
    min-height: auto !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    background: rgba(18, 19, 26, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  #yt-live-bot-features-grid .content-card > div:first-child > div:first-child {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 6px !important;
    margin-bottom: 4px !important;
  }

  #yt-live-bot-features-grid .content-card div[style*="font-size: 13.5px"] {
    font-size: 11.5px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    color: #ffffff !important;
    word-break: break-word !important;
  }

  #yt-live-bot-features-grid .content-card div[style*="font-size: 10.5px"] {
    font-size: 9px !important;
    line-height: 1.25 !important;
    margin-top: 2px !important;
    color: #94a3b8 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  #yt-live-bot-features-grid .content-card label[style*="width: 34px"] {
    width: 30px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
  }

  #yt-live-bot-features-grid .content-card label[style*="width: 34px"] div[style*="border-radius: 9px"] {
    border-radius: 8px !important;
  }

  #yt-live-bot-features-grid .content-card label[style*="width: 34px"] div[style*="width: 12px"] {
    width: 10px !important;
    height: 10px !important;
    top: 3px !important;
  }

  #yt-live-bot-features-grid .btn-secondary-sm {
    width: 100% !important;
    margin-top: 8px !important;
    padding: 6px 4px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 28px !important;
  }

  #yt-live-bot-features-grid .content-card div[style*="font-size: 11.5px"][style*="color: #f59e0b"] {
    font-size: 9.5px !important;
    padding: 5px 4px !important;
    margin-top: 8px !important;
    border-radius: 8px !important;
    min-height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .deck-split-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  #u-deck-chat-messages-container {
    max-height: 340px !important;
    min-height: 240px !important;
    padding: 10px !important;
  }

  /* Streamer Outbound Reply Bar */
  #yt-subtab-content-livestreams div[style*="display: flex; align-items: center; gap: 8px;"][style*="padding: 10px 14px;"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  #u-deck-outbound-input {
    min-width: 180px !important;
    flex: 1 !important;
  }

  /* 6. Videos & Shorts Subtab (2 Videos Side-by-Side on Mobile) */
  #yt-subtab-content-videos .workspace-grid-layout-3col {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #yt-subtab-content-videos .workspace-sub-sidebar {
    position: static !important;
    top: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 10px !important;
  }

  #yt-subtab-content-videos .workspace-action-sidebar {
    position: static !important;
    top: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #posts-card-yt {
    padding: 12px 10px !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  #media-filter-bar-yt {
    display: flex !important;
    gap: 6px !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    padding-bottom: 8px !important;
    margin-bottom: 12px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #media-filter-bar-yt::-webkit-scrollbar {
    display: none !important;
  }

  #media-filter-bar-yt .media-filter-tab {
    font-size: 11px !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
  }

  /* ═══ 2-by-2 Videos Grid on Mobile ═══ */
  #posts-container-yt {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #posts-container-yt .post-media-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 8px !important;
    border-radius: 12px !important;
    background: rgba(18, 19, 26, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 6px !important;
  }

  #posts-container-yt .post-list-thumb {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #0b0f19 !important;
    display: block !important;
    position: relative !important;
  }

  #posts-container-yt .post-list-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  #posts-container-yt .post-list-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 4px !important;
  }

  #posts-container-yt .post-list-title-row {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #posts-container-yt .post-card-caption {
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #ffffff !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    word-break: break-word !important;
    margin: 0 !important;
    height: 28px !important;
    max-height: 28px !important;
  }

  #posts-container-yt .post-card-type-badge {
    font-size: 8px !important;
    padding: 1px 4px !important;
    border-radius: 4px !important;
    flex-shrink: 0 !important;
    line-height: 1.2 !important;
  }

  #posts-container-yt .post-list-meta-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 3px !important;
    margin-top: 2px !important;
  }

  #posts-container-yt .post-list-meta-tag {
    font-size: 9px !important;
    padding: 1px 5px !important;
    border-radius: 4px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: #94a3b8 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  #posts-container-yt .post-list-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    width: 100% !important;
    margin-top: 6px !important;
    padding-top: 6px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  }

  #posts-container-yt .post-list-actions .action-btn-animated {
    width: 100% !important;
    min-height: 28px !important;
    height: 28px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 2px 6px !important;
    border-radius: 6px !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  #posts-container-yt .btn-set-trigger {
    grid-column: auto !important;
    min-height: 32px !important;
    height: 32px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    border: none !important;
    box-shadow: 0 2px 10px rgba(239, 68, 68, 0.35) !important;
  }

  /* 7. Unconnected Hero Card */
  #yt-unconnected-hero-view {
    padding: 10px 6px !important;
    margin: 10px auto !important;
  }

  #yt-unconnected-hero-view .glass-card {
    padding: 24px 16px !important;
    border-radius: 18px !important;
  }

  #hero-btn-connect-yt {
    width: 100% !important;
    justify-content: center !important;
    padding: 14px 20px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
  }

  /* 8. Dashboard Welcome Hero Banner (Mobile Optimization) */
  #dash-welcome-hero-banner {
    padding: 16px 14px !important;
    border-radius: 16px !important;
    margin-bottom: 16px !important;
    gap: 14px !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  #dash-welcome-user-info {
    gap: 12px !important;
    align-items: center !important;
    width: 100% !important;
    display: flex !important;
  }

  #dash-user-initials {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important;
    font-size: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #dashboard-welcome {
    font-size: 18px !important;
    line-height: 1.25 !important;
    margin: 0 0 3px 0 !important;
  }

  #dashboard-hero-subtitle {
    font-size: 11px !important;
    line-height: 1.4 !important;
    color: #a1a1aa !important;
  }

  #dash-welcome-action-btns {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
  }

  #dash-welcome-action-btns > button,
  #dash-welcome-action-btns > div {
    flex: 1 !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 9px 10px !important;
    font-size: 11.5px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
  }

  /* 9. Creator Referral & Rewards Section (Mobile 2x2 Grid & Clean Share Row) */
  .profile-ref-card {
    padding: 16px 12px !important;
    border-radius: 16px !important;
  }

  .profile-ref-header {
    flex-direction: column !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
  }

  .profile-ref-subtitle {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
  }

  .profile-btn-hub-link {
    width: 100% !important;
    justify-content: center !important;
    min-height: 36px !important;
    font-size: 11.5px !important;
    box-sizing: border-box !important;
  }

  .profile-ref-bar {
    padding: 12px !important;
    border-radius: 12px !important;
    margin-bottom: 14px !important;
    box-sizing: border-box !important;
  }

  .profile-ref-bar-top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 8px !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  .profile-ref-bar-tag {
    font-size: 10px !important;
  }

  .profile-ref-rate-tag {
    font-size: 10px !important;
  }

  .profile-ref-input-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .profile-ref-input {
    width: 100% !important;
    flex: 1 1 100% !important;
    font-size: 11px !important;
    padding: 9px 10px !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  .btn-copy-ref {
    flex: 1 !important;
    justify-content: center !important;
    min-height: 38px !important;
    height: 38px !important;
    font-size: 12px !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
  }

  .btn-share-social {
    width: 38px !important;
    height: 38px !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
  }

  /* 2-by-2 Referral Stats Cards on Mobile */
  .profile-ref-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .profile-stat-item {
    padding: 10px 10px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    background: rgba(0, 0, 0, 0.28) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .profile-stat-label {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    margin-bottom: 3px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: #9ca3af !important;
  }

  .profile-stat-val {
    font-size: 17px !important;
    font-weight: 800 !important;
    margin-bottom: 2px !important;
    line-height: 1.2 !important;
  }

  .profile-stat-sub {
    font-size: 9.5px !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ANALYTICS & INTELLIGENCE RESPONSIVE UI SYSTEM
   ═══════════════════════════════════════════════════════════════ */
.analytics-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}

.analytics-range-pills {
  display: flex;
  gap: 8px;
  align-items: center;
}

.analytics-range-btn {
  padding: 7px 14px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: #a1a1aa;
  cursor: pointer;
  transition: all 0.2s ease;
}

.analytics-range-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.analytics-range-btn.active {
  font-weight: 700;
  border: 1px solid rgba(168, 85, 247, 0.5);
  background: rgba(168, 85, 247, 0.2);
  color: #c084fc;
}

.analytics-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 24px;
}

.analytics-stat-card {
  background: rgba(18, 19, 25, 0.85);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.analytics-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.analytics-charts-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.analytics-chart-card {
  background: rgba(18, 19, 25, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 24px;
  box-sizing: border-box;
}

.analytics-breakdown-card {
  background: rgba(18, 19, 25, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

.analytics-table-card {
  background: rgba(18, 19, 25, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 24px;
  box-sizing: border-box;
}

.analytics-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.analytics-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Tablet Responsive View (992px and below) ── */
@media (max-width: 992px) {
  .analytics-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
    margin-bottom: 20px !important;
  }

  .analytics-charts-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

/* ── Mobile Responsive View (600px and below) ── */
@media (max-width: 600px) {
  #screen-analytics {
    padding: 10px 4px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .analytics-header-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    margin-bottom: 16px !important;
  }

  .analytics-header-titles h1 {
    font-size: 21px !important;
    line-height: 1.25 !important;
  }

  .analytics-header-titles p {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  .analytics-range-pills {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .analytics-range-btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 8px 6px !important;
    font-size: 11.5px !important;
    box-sizing: border-box !important;
  }

  .analytics-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
  }

  .analytics-stat-card {
    padding: 14px 12px !important;
    border-radius: 14px !important;
    min-width: 0 !important;
  }

  .analytics-card-label {
    font-size: 10.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .analytics-card-val {
    font-size: 20px !important;
    margin-bottom: 2px !important;
  }

  .analytics-card-sub {
    font-size: 10px !important;
    line-height: 1.25 !important;
  }

  .analytics-charts-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-bottom: 16px !important;
  }

  .analytics-chart-card,
  .analytics-breakdown-card,
  .analytics-table-card {
    padding: 16px 14px !important;
    border-radius: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .analytics-chart-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }

  .analytics-table-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .analytics-table-header button {
    width: 100% !important;
    padding: 10px !important;
    text-align: center !important;
    justify-content: center !important;
  }

  #analytics-bar-chart-container {
    height: 160px !important;
    padding: 5px 0 !important;
  }

  .analytics-bar-fill {
    width: 22px !important;
  }
}

@keyframes dc-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Hide Plugin Workspace Back Button & Fast Switcher on Desktop/PC View (Kept for Mobile View) */
#plugin-workspace-nav-row {
  display: none !important;
}

@media (max-width: 768px) {
  #plugin-workspace-nav-row {
    display: flex !important;
    width: 100% !important;
    align-items: center !important;
    gap: 8px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ULTRA-PREMIUM LIGHT THEME — COMPLETE REFINEMENT & OVERRIDES
   Ensures crystal-clear contrast, clean white cards, crisp typography,
   and flawless SaaS aesthetics across every single screen & component.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Universal Light Mode Backgrounds & Text Colors ── */
[data-theme="light"] {
  --bg-base: #F8FAFC !important;
  --bg-surface: #FFFFFF !important;
  --bg-elevated: #F1F5F9 !important;
  --bg-input: #F8FAFC !important;
  --bg-card-inner: #FFFFFF !important;
  --text-primary: #0F172A !important;
  --text-secondary: #334155 !important;
  --text-muted: #64748B !important;
  --text-dim: #94A3B8 !important;
  --border-subtle: #E2E8F0 !important;
  --border-default: #CBD5E1 !important;
  --border-medium: #94A3B8 !important;
  --border-input: #CBD5E1 !important;
}

[data-theme="light"] body,
[data-theme="light"] .main-content,
[data-theme="light"] .screen {
  background-color: #F8FAFC !important;
  color: #0F172A !important;
}

/* Headings & Text hierarchy in Light Mode */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] .card-title,
[data-theme="light"] .page-heading h1 {
  color: #0F172A !important;
}

[data-theme="light"] p,
[data-theme="light"] .page-heading p,
[data-theme="light"] .card-subtitle {
  color: #475569 !important;
}

/* ── 2. Header Polish ── */
[data-theme="light"] .desktop-header {
  background: #FFFFFF !important;
  border-bottom: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

[data-theme="light"] .header-logo span {
  color: #0F172A !important;
}

[data-theme="light"] .btn-quick-connect {
  background: #F5F3FF !important;
  border: 1px solid #DDD6FE !important;
  color: #7C3AED !important;
  box-shadow: 0 1px 2px rgba(124, 58, 237, 0.05) !important;
}

[data-theme="light"] .btn-quick-connect:hover {
  background: #EDE9FE !important;
  border-color: #C4B5FD !important;
}

[data-theme="light"] .btn-theme-toggle {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  color: #334155 !important;
}

/* ── 3. Sidebar Polish ── */
[data-theme="light"] aside.sidebar {
  background: #FFFFFF !important;
  border-right: 1px solid #E2E8F0 !important;
  box-shadow: 1px 0 3px rgba(0, 0, 0, 0.02) !important;
}

[data-theme="light"] .sidebar-nav-item {
  color: #475569 !important;
}

[data-theme="light"] .sidebar-nav-item:hover {
  background: #F8FAFC !important;
  color: #0F172A !important;
}

[data-theme="light"] .sidebar-nav-item.active {
  background: #F5F3FF !important;
  color: #7C3AED !important;
  border-color: #DDD6FE !important;
}

[data-theme="light"] .sidebar-nav-item.active .sidebar-label {
  color: #7C3AED !important;
  font-weight: 800 !important;
}

/* Sidebar Motion Pills (Discord, YouTube, Multistream) */
[data-theme="light"] .motion-pill-button {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .motion-pill-button.discord-pill-news-ticker {
  background: #EEF2FF !important;
  border: 1.5px solid #C7D2FE !important;
}
[data-theme="light"] .motion-pill-button.discord-pill-news-ticker:hover {
  background: #E0E7FF !important;
  border-color: #818CF8 !important;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15) !important;
}

[data-theme="light"] .motion-pill-button.youtube-pill-news-ticker {
  background: #FEF2F2 !important;
  border: 1.5px solid #FECACA !important;
}
[data-theme="light"] .motion-pill-button.youtube-pill-news-ticker:hover {
  background: #FEE2E2 !important;
  border-color: #F87171 !important;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.15) !important;
}

[data-theme="light"] .motion-pill-button.multistream-pill-news-ticker {
  background: #F0FDF4 !important;
  border: 1.5px solid #BBF7D0 !important;
}
[data-theme="light"] .motion-pill-button.multistream-pill-news-ticker:hover {
  background: #DCFCE7 !important;
  border-color: #34D399 !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15) !important;
}

[data-theme="light"] .pill-brand-label {
  color: #0F172A !important;
  text-shadow: none !important;
  font-weight: 800 !important;
}

[data-theme="light"] .pill-ticker-item {
  color: #334155 !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

[data-theme="light"] .news-live-badge {
  background: #FFFFFF !important;
  color: #4338CA !important;
  border: 1px solid #C7D2FE !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* Sidebar Social Hover Pills */
[data-theme="light"] .social-hover-pill {
  background: #FFFFFF !important;
  border: 1.5px solid #E2E8F0 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

[data-theme="light"] .social-hover-pill .social-text-label {
  color: #475569 !important;
  opacity: 1 !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}

[data-theme="light"] .social-hover-pill:hover,
[data-theme="light"] .social-hover-pill.active {
  background: #F8FAFC !important;
  border-color: var(--theme-color) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .social-hover-pill:hover .social-text-label,
[data-theme="light"] .social-hover-pill.active .social-text-label {
  color: #0F172A !important;
}

/* Sidebar Profile Card & Popover */
[data-theme="light"] .chatgpt-style-user-pill {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}
[data-theme="light"] .chatgpt-pill-name {
  color: #0F172A !important;
}
[data-theme="light"] .chatgpt-pill-plan {
  color: #64748B !important;
}
[data-theme="light"] .chatgpt-style-profile-popover {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
}
[data-theme="light"] .chatgpt-popover-item {
  color: #334155 !important;
}
[data-theme="light"] .chatgpt-popover-item:hover {
  background: #F1F5F9 !important;
  color: #0F172A !important;
}
[data-theme="light"] .chatgpt-popover-divider {
  background: #E2E8F0 !important;
}

/* ── 4. Dashboard Screen Polish ── */
[data-theme="light"] #dash-welcome-hero-banner {
  background: linear-gradient(135deg, #F5F3FF 0%, #EEF2FF 50%, #F8FAFC 100%) !important;
  border: 1px solid #DDD6FE !important;
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.08) !important;
}

[data-theme="light"] #dash-welcome-hero-banner h1,
[data-theme="light"] #dash-welcome-user-info div[style*="font-size: 20px"] {
  color: #0F172A !important;
}

[data-theme="light"] #dashboard-hero-subtitle {
  color: #475569 !important;
}
[data-theme="light"] #dashboard-hero-subtitle strong {
  color: #1E293B !important;
}

[data-theme="light"] #dash-welcome-action-btns > div {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  color: #334155 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

/* Dashboard Top 4 Stat Cards */
[data-theme="light"] .dash-stats-grid .stat-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] .dash-stats-grid .stat-card:hover {
  background: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
  transform: translateY(-2px);
}

[data-theme="light"] .dash-stats-grid .stat-value {
  color: #0F172A !important;
}

[data-theme="light"] .dash-stats-grid .stat-label {
  color: #64748B !important;
}

/* Live Platform Command Hub Container */
[data-theme="light"] .dash-stagger-2-5 {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] .dash-stagger-2-5 div[style*="color: #fff"],
[data-theme="light"] .dash-stagger-2-5 div[style*="color:#fff"] {
  color: #0F172A !important;
}

[data-theme="light"] .dash-stagger-2-5 button {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  color: #7C3AED !important;
}
[data-theme="light"] .dash-stagger-2-5 button:hover {
  background: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
}

/* Dashboard 6 Quick Hub Cards */
[data-theme="light"] .quick-hub-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] .quick-hub-card:hover {
  background: #F8FAFC !important;
  border-color: #CBD5E1 !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06) !important;
}

[data-theme="light"] .quick-hub-card div[style*="font-size: 13px"],
[data-theme="light"] .quick-hub-card div[style*="font-size:13px"] {
  color: #0F172A !important;
}

[data-theme="light"] .quick-hub-card div[style*="font-size: 10px"],
[data-theme="light"] .quick-hub-card div[style*="font-size:10px"] {
  color: #64748B !important;
}

[data-theme="light"] .quick-hub-card > div:last-child {
  border-top: 1px solid #F1F5F9 !important;
}

[data-theme="light"] .quick-hub-card.hub-card-yt > div:last-child {
  color: #DC2626 !important;
}
[data-theme="light"] .quick-hub-card.hub-card-dc > div:last-child {
  color: #4F46E5 !important;
}
[data-theme="light"] .quick-hub-card.hub-card-ms > div:last-child {
  color: #0891B2 !important;
}
[data-theme="light"] .quick-hub-card.hub-card-ig > div:last-child {
  color: #DB2777 !important;
}
[data-theme="light"] .quick-hub-card.hub-card-tw > div:last-child {
  color: #0284C7 !important;
}
[data-theme="light"] .quick-hub-card.hub-card-fb > div:last-child {
  color: #2563EB !important;
}

/* Volume Trends Chart & System Health */
[data-theme="light"] .dash-stagger-3 > div {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] .dash-stagger-3 div[style*="font-size: 13.5px"],
[data-theme="light"] .dash-stagger-3 div[style*="font-size: 12px"] {
  color: #0F172A !important;
}

[data-theme="light"] .dash-stagger-3 div[style*="font-size: 10px"] {
  color: #64748B !important;
}

[data-theme="light"] .dash-stagger-3 span[style*="background: rgba(168,85,247"] {
  background: #F5F3FF !important;
  border: 1px solid #DDD6FE !important;
  color: #7C3AED !important;
}

/* Right Column: Operator Profile, Live Activity Stream, Connected Hubs */
[data-theme="light"] .dash-stagger-5 > div {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] #profile-card-name {
  color: #0F172A !important;
}

[data-theme="light"] #profile-card-email {
  color: #7C3AED !important;
}

[data-theme="light"] .dash-stagger-5 div[style*="background: rgba(255,255,255,0.04)"] {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  color: #64748B !important;
}

[data-theme="light"] .dash-stagger-5 div[style*="font-size: 13px"],
[data-theme="light"] .dash-stagger-5 div[style*="font-size: 14px"] {
  color: #0F172A !important;
}

[data-theme="light"] #dash-live-activity-list > div {
  border-bottom: 1px solid #F1F5F9 !important;
}
[data-theme="light"] #dash-live-activity-list > div:hover {
  background: #F8FAFC !important;
}

[data-theme="light"] #dash-live-activity-list div[style*="font-size: 11.5px"] {
  color: #0F172A !important;
}

[data-theme="light"] #dash-live-activity-list div[style*="font-size: 10px"] {
  color: #64748B !important;
}

[data-theme="light"] #dash-live-activity-list span[style*="font-size: 9.5px"] {
  color: #94A3B8 !important;
}

/* ── 5. Analytics & Intelligence Screen Polish ── */
[data-theme="light"] #screen-analytics {
  background: #F8FAFC !important;
}

[data-theme="light"] .analytics-header-titles h1 {
  color: #0F172A !important;
}

[data-theme="light"] .analytics-header-titles p {
  color: #64748B !important;
}

[data-theme="light"] .analytics-range-btn {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #475569 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

[data-theme="light"] .analytics-range-btn:hover {
  background: #F1F5F9 !important;
  color: #0F172A !important;
}

[data-theme="light"] .analytics-range-btn.active {
  background: #7C3AED !important;
  border-color: #7C3AED !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.25) !important;
}

/* Analytics 4 KPI Cards */
[data-theme="light"] .analytics-stat-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] .analytics-stat-card:hover {
  background: #FFFFFF !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08) !important;
}

[data-theme="light"] .analytics-card-label {
  color: #64748B !important;
}

[data-theme="light"] .analytics-card-val {
  color: #0F172A !important;
}

/* Analytics Charts Grid */
[data-theme="light"] .analytics-chart-card,
[data-theme="light"] .analytics-breakdown-card,
[data-theme="light"] .analytics-table-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] #analytics-chart-title,
[data-theme="light"] .analytics-breakdown-card div[style*="font-size: 16px"],
[data-theme="light"] .analytics-table-card div[style*="font-size: 16px"] {
  color: #0F172A !important;
}

[data-theme="light"] .analytics-chart-header div[style*="font-size: 12px"],
[data-theme="light"] .analytics-breakdown-card div[style*="font-size: 12px"],
[data-theme="light"] .analytics-table-card div[style*="font-size: 12px"] {
  color: #64748B !important;
}

[data-theme="light"] #analytics-bar-chart-container {
  border-bottom: 1px solid #E2E8F0 !important;
}

[data-theme="light"] .analytics-bar-day {
  color: #64748B !important;
}

[data-theme="light"] .analytics-bar-val {
  color: #475569 !important;
}

[data-theme="light"] .analytics-breakdown-card button {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
}

[data-theme="light"] .analytics-breakdown-card button:hover {
  background: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
}

[data-theme="light"] .analytics-table-card table thead tr {
  border-bottom: 1px solid #E2E8F0 !important;
}

[data-theme="light"] .analytics-table-card table thead th {
  color: #64748B !important;
}

[data-theme="light"] .analytics-table-card table tbody tr {
  border-bottom: 1px solid #F1F5F9 !important;
}

[data-theme="light"] .analytics-table-card table tbody tr:hover {
  background: #F8FAFC !important;
}

[data-theme="light"] .analytics-table-card table tbody td {
  color: #334155 !important;
}

/* ── 6. Trigger Builder Screen Polish ── */
[data-theme="light"] #screen-triggers .platform-tab {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #475569 !important;
}

[data-theme="light"] #screen-triggers .platform-tab:hover {
  background: #F1F5F9 !important;
  color: #0F172A !important;
}

[data-theme="light"] #screen-triggers .platform-tab.active {
  background: #7C3AED !important;
  border-color: #7C3AED !important;
  color: #FFFFFF !important;
}

[data-theme="light"] .trigger-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] .trigger-card:hover {
  border-color: #CBD5E1 !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
}

[data-theme="light"] .trigger-keyword {
  color: #7C3AED !important;
  background: #F5F3FF !important;
  border: 1px solid #DDD6FE !important;
}

[data-theme="light"] .trigger-reply {
  color: #334155 !important;
}

/* ── 7. Quick Connect Screen Polish ── */
[data-theme="light"] .qc-page-header {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] .qc-page-title-wrap h1 {
  color: #0F172A !important;
}

[data-theme="light"] .qc-current-plan-card {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}

[data-theme="light"] #qc-fullpage-plan-name {
  color: #0F172A !important;
}

[data-theme="light"] .qc-filter-btn {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #475569 !important;
}

[data-theme="light"] .qc-filter-btn:hover {
  background: #F1F5F9 !important;
  color: #0F172A !important;
}

[data-theme="light"] .qc-filter-btn.active {
  background: #7C3AED !important;
  border-color: #7C3AED !important;
  color: #FFFFFF !important;
}

[data-theme="light"] .qc-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] .qc-card:hover {
  border-color: #CBD5E1 !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08) !important;
}

/* ── 8. YouTube Live Studio Screen Polish ── */
[data-theme="light"] #screen-youtube .yt-studio-card,
[data-theme="light"] #screen-youtube .obs-dock-card,
[data-theme="light"] #screen-youtube .yt-stream-card,
[data-theme="light"] #screen-youtube .yt-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] #screen-youtube .yt-card-title,
[data-theme="light"] #screen-youtube h2,
[data-theme="light"] #screen-youtube h3 {
  color: #0F172A !important;
}

/* ── 9. Settings, Billing & Referrals Screens Polish ── */
[data-theme="light"] .settings-section,
[data-theme="light"] .plan-card,
[data-theme="light"] .referral-card,
[data-theme="light"] .billing-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] .plan-card.active-plan {
  border: 2px solid #7C3AED !important;
  box-shadow: 0 4px 18px rgba(124, 58, 237, 0.12) !important;
}

[data-theme="light"] .referral-stat-box,
[data-theme="light"] .referral-link-box {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}

/* ── 10. DISCORD AUTOMATION & ALL 10 PLUGINS LIGHT THEME ── */

/* Swapped Discord & YouTube Sub-Sidebars in Light Mode */
[data-theme="light"] #discord-sidebar-menu,
[data-theme="light"] #youtube-sidebar-menu {
  background: #FFFFFF !important;
}

[data-theme="light"] #discord-sidebar-menu button,
[data-theme="light"] #youtube-sidebar-menu button {
  background: #F8FAFC !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
}

[data-theme="light"] #discord-sidebar-menu button:hover,
[data-theme="light"] #youtube-sidebar-menu button:hover {
  background: #F1F5F9 !important;
  border-color: #94A3B8 !important;
}

[data-theme="light"] #discord-sidebar-plugins-list div[style*="text-transform: uppercase"],
[data-theme="light"] #discord-sidebar-plugins-list div[style*="text-transform:uppercase"] {
  color: #4F46E5 !important;
}

[data-theme="light"] #youtube-sidebar-items-list div[style*="text-transform: uppercase"],
[data-theme="light"] #youtube-sidebar-items-list div[style*="text-transform:uppercase"] {
  color: #DC2626 !important;
}

/* Discord & YouTube Unconnected Hero View */
.platform-unconnected-hero-container {
  min-height: calc(100vh - 140px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  padding: 20px 16px;
  box-sizing: border-box;
}

.platform-unconnected-hero-container.hidden,
.platform-unconnected-hero-container[style*="display: none"],
.platform-unconnected-hero-container[style*="display:none"] {
  display: none !important;
}

.unconnected-back-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 20px;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
}
.unconnected-back-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateX(-3px);
}
[data-theme="light"] .unconnected-back-btn {
  background: #F1F5F9;
  border-color: #CBD5E1;
  color: #475569;
}
[data-theme="light"] .unconnected-back-btn:hover {
  background: #E2E8F0;
  color: #0F172A;
}

[data-theme="light"] #discord-unconnected-hero-view .glass-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.06) !important;
}

[data-theme="light"] #discord-unconnected-hero-view h1 {
  color: #0F172A !important;
}

[data-theme="light"] #discord-unconnected-hero-view p {
  color: #64748B !important;
}

/* Discord Top Server Switcher Header Card */
[data-theme="light"] #dc-top-server-switcher-card,
[data-theme="light"] .dc-top-server-switcher-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] #dc-header-title {
  color: #0F172A !important;
}

[data-theme="light"] #dc-header-desc {
  color: #64748B !important;
}

[data-theme="light"] #dc-account-badge-wrap {
  background: #EEF2FF !important;
  border: 1px solid #C7D2FE !important;
  color: #4338CA !important;
}

[data-theme="light"] #dc-connected-account-name {
  color: #0F172A !important;
}

[data-theme="light"] #dc-switch-account-select {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
}

/* Discord Overview Screen (Cards & Metrics) */
[data-theme="light"] #discord-main-overview-section .dc-metric-card,
[data-theme="light"] .dc-metric-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] .dc-metric-title {
  color: #64748B !important;
}

[data-theme="light"] .dc-metric-value {
  color: #0F172A !important;
}

[data-theme="light"] #dc-overview-timeframe-bar {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}

[data-theme="light"] #dc-overview-timeframe-bar button {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #475569 !important;
}

[data-theme="light"] #dc-overview-timeframe-bar button.active {
  background: #4F46E5 !important;
  color: #FFFFFF !important;
  border-color: #4F46E5 !important;
}

[data-theme="light"] #dc-overview-10-plugins-grid > div,
[data-theme="light"] .dc-overview-plugin-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] #dc-overview-10-plugins-grid > div:hover,
[data-theme="light"] .dc-overview-plugin-card:hover {
  background: #F8FAFC !important;
  border-color: #CBD5E1 !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08) !important;
}

[data-theme="light"] #dc-overview-10-plugins-grid h3,
[data-theme="light"] #dc-overview-10-plugins-grid div[style*="font-weight: 800"],
[data-theme="light"] #dc-overview-10-plugins-grid div[style*="font-weight:800"] {
  color: #0F172A !important;
}

[data-theme="light"] #dc-overview-10-plugins-grid p,
[data-theme="light"] #dc-overview-10-plugins-grid div[style*="color: #94a3b8"],
[data-theme="light"] #dc-overview-10-plugins-grid div[style*="color:#94a3b8"] {
  color: #64748B !important;
}

/* ── DISCORD OVERVIEW & EXECUTIVE ANALYTICS STRIP (NO BLACK BARS) ── */
[data-theme="light"] #dc-creator-analytics-strip,
[data-theme="light"] .dc-creator-analytics-strip {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] #dc-creator-analytics-strip h2,
[data-theme="light"] #dc-creator-analytics-strip h2 span {
  color: #0F172A !important;
}

[data-theme="light"] #dc-creator-analytics-strip p {
  color: #64748B !important;
}

[data-theme="light"] #dc-creator-analytics-strip > div:first-child {
  border-bottom: 1px solid #E2E8F0 !important;
}

[data-theme="light"] #dc-creator-analytics-strip div[style*="background: rgba(0,0,0,0.45)"],
[data-theme="light"] #dc-creator-analytics-strip div[style*="background:rgba(0,0,0,0.45)"] {
  background: #F8FAFC !important;
  border: 1px solid #CBD5E1 !important;
  box-shadow: none !important;
}

[data-theme="light"] .dc-analytics-metrics-grid > div {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}

[data-theme="light"] .dc-analytics-metrics-grid div[style*="font-size: 11.5px"],
[data-theme="light"] .dc-analytics-metrics-grid div[style*="font-size:11.5px"] {
  color: #475569 !important;
}

[data-theme="light"] #dc-stat-total-triggers,
[data-theme="light"] #dc-stat-time-saved,
[data-theme="light"] #dc-stat-interactions,
[data-theme="light"] #dc-stat-success-rate {
  color: #0F172A !important;
}

[data-theme="light"] .dc-analytics-metrics-grid div[style*="font-size: 11px"],
[data-theme="light"] .dc-analytics-metrics-grid div[style*="font-size:11px"] {
  color: #64748B !important;
}

/* Overview 10 Plugins Container Strip */
[data-theme="light"] #discord-main-overview-section > .glass-card,
[data-theme="light"] #discord-main-overview-section div[style*="background: rgba(22, 25, 34"],
[data-theme="light"] #discord-main-overview-section div[style*="background:rgba(22, 25, 34"] {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] #discord-main-overview-section h2,
[data-theme="light"] #discord-main-overview-section h2 span {
  color: #0F172A !important;
}

[data-theme="light"] #discord-main-overview-section p {
  color: #64748B !important;
}

[data-theme="light"] .dc-plugins-overview-grid .glass-card,
[data-theme="light"] .dc-plugins-overview-grid > div {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] .dc-plugins-overview-grid strong {
  color: #0F172A !important;
}

[data-theme="light"] .dc-plugins-overview-grid p {
  color: #64748B !important;
}

[data-theme="light"] .dc-plugins-overview-grid div[style*="background: rgba(0,0,0,0.4)"],
[data-theme="light"] .dc-plugins-overview-grid div[style*="background:rgba(0,0,0,0.4)"] {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  color: #475569 !important;
}

/* ── ALL 10 DISCORD INLINE PLUGIN WORKSPACES LIGHT MODE ── */
[data-theme="light"] #discord-inline-plugin-workspace {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.06) !important;
}

/* Master Plugin Workspace Bar */
[data-theme="light"] #plugin-workspace-master-bar {
  background: #FFFFFF !important;
  border-bottom: 1px solid #E2E8F0 !important;
}

[data-theme="light"] #inline-plugin-title,
[data-theme="light"] #plugin-workspace-master-bar h2 {
  color: #0F172A !important;
}

[data-theme="light"] #inline-plugin-subtitle {
  color: #64748B !important;
}

[data-theme="light"] #fast-plugin-switcher {
  background: #F8FAFC !important;
  border: 1px solid #CBD5E1 !important;
  color: #4F46E5 !important;
}

/* DISABLED OVERLAY CARD IN LIGHT MODE (CLEAN LIGHT/SLATE CARD) */
[data-theme="light"] #plugin-disabled-overlay,
[data-theme="light"] .smart-plugin-disabled-card {
  background: #F8FAFC !important;
  border: 1.5px dashed #CBD5E1 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] #plugin-disabled-overlay h3 {
  color: #0F172A !important;
}

[data-theme="light"] #plugin-disabled-overlay p {
  color: #64748B !important;
}

[data-theme="light"] #plugin-disabled-overlay strong {
  color: #0F172A !important;
}

[data-theme="light"] #plugin-disabled-overlay div[style*="background: rgba(239, 68, 68"],
[data-theme="light"] #plugin-disabled-overlay div[style*="background:rgba(239, 68, 68"] {
  background: #FEE2E2 !important;
  border: 1px solid #FCA5A5 !important;
}

[data-theme="light"] #plugin-workspace-nav-row button {
  background: #F8FAFC !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
}

[data-theme="light"] #master-channel-rename-pill {
  background: #F8FAFC !important;
  border: 1px solid #CBD5E1 !important;
  box-shadow: none !important;
}

[data-theme="light"] #master-plugin-channel-select {
  color: #0F172A !important;
}

[data-theme="light"] #master-plugin-channel-select option {
  background: #FFFFFF !important;
  color: #0F172A !important;
}

[data-theme="light"] #btn-sync-discord-channels {
  border-color: #CBD5E1 !important;
  color: #4F46E5 !important;
}

[data-theme="light"] #plugin-workspace-master-bar div[style*="background: rgba(0,0,0,0.45)"],
[data-theme="light"] #plugin-workspace-master-bar div[style*="background:rgba(0,0,0,0.45)"] {
  background: #F8FAFC !important;
  border: 1px solid #CBD5E1 !important;
  box-shadow: none !important;
}

/* Left & Right Column Containers inside all 10 plugins */
[data-theme="light"] #inline-plugin-body > div > div,
[data-theme="light"] #inline-plugin-body div[style*="background: #0f111a"],
[data-theme="light"] #inline-plugin-body div[style*="background:#0f111a"] {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

/* Plugin Right Sidebar "How to Use" Card */
[data-theme="light"] #inline-plugin-body div[style*="calc(35% - 20px)"] > div {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}

[data-theme="light"] #inline-plugin-body h3,
[data-theme="light"] #inline-plugin-body h3 span {
  color: #0F172A !important;
}

[data-theme="light"] #inline-plugin-body ul {
  color: #475569 !important;
}

[data-theme="light"] #inline-plugin-body li {
  color: #475569 !important;
}

[data-theme="light"] #inline-plugin-body strong {
  color: #0F172A !important;
}

[data-theme="light"] #inline-plugin-body code {
  background: #EEF2FF !important;
  color: #4F46E5 !important;
  border: 1px solid #C7D2FE !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
}

/* Hero Banners inside plugins (AI Assistant, Private Channels, Welcome, etc.) */
[data-theme="light"] #inline-plugin-body div[style*="linear-gradient(135deg, rgba(88,101,242,0.15)"],
[data-theme="light"] #inline-plugin-body div[style*="linear-gradient(135deg,rgba(88,101,242,0.15)"] {
  background: linear-gradient(135deg, #EEF2FF 0%, #F5F3FF 100%) !important;
  border: 1.5px solid #C7D2FE !important;
}

[data-theme="light"] #inline-plugin-body div[style*="linear-gradient(135deg, rgba(88,101,242,0.15)"] div[style*="font-size: 15px"],
[data-theme="light"] #inline-plugin-body div[style*="linear-gradient(135deg, rgba(88,101,242,0.15)"] div[style*="font-weight: 800"] {
  color: #0F172A !important;
}

[data-theme="light"] #inline-plugin-body div[style*="linear-gradient(135deg, rgba(88,101,242,0.15)"] div[style*="font-size: 12px"] {
  color: #475569 !important;
}

/* Sub-cards and Containers inside all 10 Plugins */
[data-theme="light"] #inline-plugin-body div[style*="background: rgba(0,0,0,0.25)"],
[data-theme="light"] #inline-plugin-body div[style*="background:rgba(0,0,0,0.25)"],
[data-theme="light"] #inline-plugin-body div[style*="background: rgba(255,255,255,0.03)"],
[data-theme="light"] #inline-plugin-body div[style*="background:rgba(255,255,255,0.03)"],
[data-theme="light"] #inline-plugin-body div[style*="background: rgba(0,0,0,0.3)"],
[data-theme="light"] #inline-plugin-body div[style*="background:rgba(0,0,0,0.3)"],
[data-theme="light"] #inline-plugin-body div[style*="background: rgba(255,255,255,0.02)"] {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}

[data-theme="light"] #inline-plugin-body div[style*="color: #fff"],
[data-theme="light"] #inline-plugin-body div[style*="color:#fff"],
[data-theme="light"] #inline-plugin-body span[style*="color: #fff"],
[data-theme="light"] #inline-plugin-body span[style*="color:#fff"] {
  color: #0F172A !important;
}

[data-theme="light"] #inline-plugin-body div[style*="color: #94a3b8"],
[data-theme="light"] #inline-plugin-body div[style*="color:#94a3b8"],
[data-theme="light"] #inline-plugin-body label[style*="color: #94a3b8"],
[data-theme="light"] #inline-plugin-body label[style*="color:#94a3b8"] {
  color: #64748B !important;
}

/* AI Assistant Plugin Specifics (Persona Cards, Triggers, RAG, Simulator) */
[data-theme="light"] #ai-persona-card-admin_bro,
[data-theme="light"] #ai-persona-card-support,
[data-theme="light"] #ai-persona-card-trader,
[data-theme="light"] #ai-persona-card-gaming {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
}

[data-theme="light"] #ai-persona-card-admin_bro:hover,
[data-theme="light"] #ai-persona-card-support:hover,
[data-theme="light"] #ai-persona-card-trader:hover,
[data-theme="light"] #ai-persona-card-gaming:hover {
  background: #F8FAFC !important;
  border-color: #CBD5E1 !important;
}

[data-theme="light"] #card-mode-dedicated,
[data-theme="light"] #card-mode-smart_question,
[data-theme="light"] #card-mode-mention_only {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
}

[data-theme="light"] #ai-custom-prompt-container {
  background: #F8FAFC !important;
}

[data-theme="light"] #ai-sim-bot-msg {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
}

[data-theme="light"] #inline-plugin-body div[style*="background: #090a10"],
[data-theme="light"] #inline-plugin-body div[style*="background:#090a10"] {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}

/* Form inputs, Selects and Textareas across all Plugins */
[data-theme="light"] #inline-plugin-body input[type="text"],
[data-theme="light"] #inline-plugin-body input[type="number"],
[data-theme="light"] #inline-plugin-body textarea,
[data-theme="light"] #inline-plugin-body select {
  background: #FFFFFF !important;
  border: 1.5px solid #CBD5E1 !important;
  color: #0F172A !important;
}

[data-theme="light"] #inline-plugin-body input:focus,
[data-theme="light"] #inline-plugin-body textarea:focus,
[data-theme="light"] #inline-plugin-body select:focus {
  border-color: #4F46E5 !important;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15) !important;
}

[data-theme="light"] #inline-plugin-body select option {
  background: #FFFFFF !important;
  color: #0F172A !important;
}

/* Welcome Plugin Modal and Card Templates */
[data-theme="light"] #welcome-templates-container > div {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] #welcome-templates-container > div div[style*="color: #fff"],
[data-theme="light"] #welcome-templates-container > div div[style*="color:#fff"] {
  color: #0F172A !important;
}

/* Audit Logs List Entries */
[data-theme="light"] #audit-logs-container > div {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] #audit-logs-container > div div[style*="font-size: 12.5px"],
[data-theme="light"] #audit-logs-container > div div[style*="font-size:12.5px"],
[data-theme="light"] #audit-logs-container > div div[style*="font-size: 13px"],
[data-theme="light"] #audit-logs-container > div div[style*="font-size:13px"],
[data-theme="light"] #audit-logs-container > div div[style*="color: #e2e8f0"],
[data-theme="light"] #audit-logs-container > div div[style*="color:#e2e8f0"],
[data-theme="light"] #audit-logs-container > div div[style*="color: #f1f5f9"],
[data-theme="light"] #audit-logs-container > div div[style*="color:#f1f5f9"] {
  color: #0F172A !important;
}

[data-theme="light"] #audit-logs-container > div span[style*="color: #64748b"],
[data-theme="light"] #audit-logs-container > div span[style*="color:#64748b"] {
  color: #64748B !important;
}

[data-theme="light"] .audit-filter-pill {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #475569 !important;
}

[data-theme="light"] .audit-filter-pill.active {
  background: #EF4444 !important;
  color: #FFFFFF !important;
  border-color: #EF4444 !important;
}

/* Leveling & Ranks Plugin Light Mode Overrides */
[data-theme="light"] #inline-plugin-body div[style*="background: rgba(17,18,24"],
[data-theme="light"] #inline-plugin-body div[style*="background:rgba(17,18,24"],
[data-theme="light"] #inline-plugin-body div:has(> #lvl-calc-grid) {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] #inline-plugin-body div:has(> #lvl-calc-grid) > div:first-child,
[data-theme="light"] #inline-plugin-body div[style*="Live Leveling Difficulty Preview"] {
  color: #0F172A !important;
}

[data-theme="light"] #lvl-calc-grid > div {
  background: #F8FAFC !important;
  border: 1px solid #CBD5E1 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] #lvl-calc-grid > div div[style*="color: #fbbf24"],
[data-theme="light"] #lvl-calc-grid > div div[style*="color:#fbbf24"] {
  color: #D97706 !important;
  font-weight: 800 !important;
}

[data-theme="light"] #lvl-calc-grid > div div[style*="color: #fff"],
[data-theme="light"] #lvl-calc-grid > div div[style*="color:#fff"] {
  color: #0F172A !important;
  font-weight: 800 !important;
}

[data-theme="light"] #lvl-calc-grid > div div[style*="color: #a1a1aa"],
[data-theme="light"] #lvl-calc-grid > div div[style*="color:#a1a1aa"] {
  color: #64748B !important;
  font-weight: 600 !important;
}

/* Leveling Weekly Top 10 Report Box */
[data-theme="light"] #inline-plugin-body div[style*="Weekly Top 10 Leaderboard"] {
  color: #0F172A !important;
}

[data-theme="light"] #inline-plugin-body div[style*="background: rgba(0,0,0,0.25)"],
[data-theme="light"] #inline-plugin-body div[style*="background:rgba(0,0,0,0.25)"] {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] #inline-plugin-body div[style*="background: rgba(0,0,0,0.25)"] div[style*="color: #fff"],
[data-theme="light"] #inline-plugin-body div[style*="background: rgba(0,0,0,0.25)"] div[style*="color:#fff"] {
  color: #0F172A !important;
}

[data-theme="light"] #inline-plugin-body div[style*="background: rgba(0,0,0,0.25)"] div[style*="color: #a1a1aa"],
[data-theme="light"] #inline-plugin-body div[style*="background: rgba(0,0,0,0.25)"] div[style*="color:#a1a1aa"] {
  color: #64748B !important;
}

/* Leveling Preset Selection Buttons in Light Mode */
[data-theme="light"] [id^="btn-preset-"] {
  background: #FFFFFF !important;
  border: 1.5px solid #CBD5E1 !important;
  color: #334155 !important;
}

[data-theme="light"] [id^="btn-preset-"]:hover {
  background: #F1F5F9 !important;
  border-color: #94A3B8 !important;
}

/* Universal Inline Plugin Body Glass / Dark Overrides */
[data-theme="light"] #inline-plugin-body .glass-card,
[data-theme="light"] #inline-plugin-body div[style*="background: rgba(0,0,0"],
[data-theme="light"] #inline-plugin-body div[style*="background:rgba(0,0,0"],
[data-theme="light"] #inline-plugin-body div[style*="background: rgba(255,255,255,0.03)"],
[data-theme="light"] #inline-plugin-body div[style*="background:rgba(255,255,255,0.03)"],
[data-theme="light"] #inline-plugin-body div[style*="background: rgba(255,255,255,0.02)"],
[data-theme="light"] #inline-plugin-body div[style*="background:rgba(255,255,255,0.02)"],
[data-theme="light"] #inline-plugin-body div[style*="background: rgba(255,255,255,0.04)"],
[data-theme="light"] #inline-plugin-body div[style*="background:rgba(255,255,255,0.04)"] {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
}

[data-theme="light"] #inline-plugin-body p,
[data-theme="light"] #inline-plugin-body span[style*="color: #94a3b8"],
[data-theme="light"] #inline-plugin-body span[style*="color:#94a3b8"],
[data-theme="light"] #inline-plugin-body div[style*="color: #94a3b8"],
[data-theme="light"] #inline-plugin-body div[style*="color:#94a3b8"],
[data-theme="light"] #inline-plugin-body div[style*="color: #a1a1aa"],
[data-theme="light"] #inline-plugin-body div[style*="color:#a1a1aa"] {
  color: #64748B !important;
}

/* ── 11. YOUTUBE LIVE STUDIO & OBS OVERLAYS IN LIGHT MODE ── */
[data-theme="light"] #yt-unconnected-hero-view .glass-card,
[data-theme="light"] #accounts-content-yt .platform-card,
[data-theme="light"] #screen-youtube .platform-card,
[data-theme="light"] #screen-youtube .glass-card,
[data-theme="light"] #screen-youtube .content-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] #yt-unconnected-hero-view h1,
[data-theme="light"] #screen-youtube h1,
[data-theme="light"] #screen-youtube h2,
[data-theme="light"] #screen-youtube h3,
[data-theme="light"] #screen-youtube h4 {
  color: #0F172A !important;
}

[data-theme="light"] #yt-unconnected-hero-view p,
[data-theme="light"] #screen-youtube p {
  color: #64748B !important;
}

[data-theme="light"] #yt-unconnected-hero-view div[style*="background: rgba(0,0,0,0.3)"],
[data-theme="light"] #yt-unconnected-hero-view div[style*="background:rgba(0,0,0,0.3)"] {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}

[data-theme="light"] #yt-unconnected-hero-view strong,
[data-theme="light"] #screen-youtube strong {
  color: #0F172A !important;
}

/* YouTube Live Auto-Moderator Studio Banner & Controls */
[data-theme="light"] #yt-live-studio-header-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] #u-yt-live-stream-title,
[data-theme="light"] #u-yt-live-channel-name {
  color: #0F172A !important;
}

[data-theme="light"] #yt-live-header-controls-grid {
  border-top: 1px solid #E2E8F0 !important;
}

[data-theme="light"] #yt-live-header-controls-grid > div {
  background: #F8FAFC !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
}

[data-theme="light"] #yt-live-header-controls-grid span[style*="color: white"],
[data-theme="light"] #yt-live-header-controls-grid span[style*="color:white"] {
  color: #0F172A !important;
}

/* YouTube Live Bot Feature Cards */
[data-theme="light"] #yt-live-bot-features-grid .content-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] #yt-live-bot-features-grid .content-card div[style*="color: white"],
[data-theme="light"] #yt-live-bot-features-grid .content-card div[style*="color:white"] {
  color: #0F172A !important;
}

[data-theme="light"] #yt-live-bot-features-grid .btn-secondary-sm {
  background: #F8FAFC !important;
  border: 1px solid #CBD5E1 !important;
  color: #334155 !important;
}

[data-theme="light"] #yt-live-bot-features-grid .btn-secondary-sm:hover {
  background: #F1F5F9 !important;
  border-color: #94A3B8 !important;
}

/* Multi-Stream Sources Controller & Live Chat Deck Split Grid */
[data-theme="light"] .deck-split-grid > div,
[data-theme="light"] .deck-split-grid .content-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] .deck-split-grid div[style*="background: linear-gradient"],
[data-theme="light"] .deck-split-grid div[style*="background:linear-gradient"] {
  background: #F8FAFC !important;
  border-bottom: 1px solid #E2E8F0 !important;
}

[data-theme="light"] .deck-split-grid strong,
[data-theme="light"] .deck-split-grid div[style*="color: #fff"],
[data-theme="light"] .deck-split-grid div[style*="color:#fff"] {
  color: #0F172A !important;
}

[data-theme="light"] .deck-source-card {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}

[data-theme="light"] .deck-source-card:hover {
  background: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
}

[data-theme="light"] .deck-source-card div[style*="color: #fff"],
[data-theme="light"] .deck-source-card div[style*="color:#fff"] {
  color: #0F172A !important;
}

/* Chat Deck Streamer Outbound Reply Bar */
[data-theme="light"] .deck-split-grid div[style*="background: rgba(0,0,0,0.5)"],
[data-theme="light"] .deck-split-grid div[style*="background:rgba(0,0,0,0.5)"] {
  background: #F8FAFC !important;
  border-top: 1px solid #E2E8F0 !important;
}

[data-theme="light"] #u-deck-outbound-input {
  background: #FFFFFF !important;
  border: 1.5px solid #CBD5E1 !important;
  color: #0F172A !important;
}

/* OBS Stream Overlays Command Center (Dedicated Overhaul) */
[data-theme="light"] #yt-subtab-content-obs > div {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.06) !important;
  color: #0F172A !important;
}

[data-theme="light"] #yt-subtab-content-obs div[style*="border-bottom: 1px solid rgba(255, 255, 255, 0.06)"],
[data-theme="light"] #yt-subtab-content-obs div[style*="border-bottom:1px solid rgba(255,255,255,0.06)"] {
  border-bottom: 1px solid #E2E8F0 !important;
}

[data-theme="light"] #yt-subtab-content-obs h2,
[data-theme="light"] #yt-subtab-content-obs h3,
[data-theme="light"] #yt-subtab-content-obs h4 {
  color: #0F172A !important;
}

/* OBS Sidebar Items */
[data-theme="light"] #obs-side-item-chat,
[data-theme="light"] #obs-side-item-subscriber,
[data-theme="light"] #obs-side-item-counter,
[data-theme="light"] #obs-side-item-branding {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}

[data-theme="light"] #obs-side-item-chat:hover,
[data-theme="light"] #obs-side-item-subscriber:hover,
[data-theme="light"] #obs-side-item-counter:hover,
[data-theme="light"] #obs-side-item-branding:hover {
  background: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
}

[data-theme="light"] #obs-side-item-chat span,
[data-theme="light"] #obs-side-item-subscriber span,
[data-theme="light"] #obs-side-item-counter span,
[data-theme="light"] #obs-side-item-branding span {
  color: #0F172A !important;
}

/* Master OBS Browser Source Card */
[data-theme="light"] #yt-subtab-content-obs div[style*="background: rgba(15, 23, 42"],
[data-theme="light"] #yt-subtab-content-obs div[style*="background:rgba(15, 23, 42"] {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] #yt-subtab-content-obs span[style*="color: #ffffff"],
[data-theme="light"] #yt-subtab-content-obs span[style*="color:#ffffff"] {
  color: #0F172A !important;
}

[data-theme="light"] #obs-chat-overlay-url-input {
  background: #FFFFFF !important;
  border: 1.5px solid #CBD5E1 !important;
  color: #059669 !important;
  font-weight: 700 !important;
}

[data-theme="light"] #obs-yt-status-strip {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  color: #475569 !important;
}

[data-theme="light"] #obs-yt-status-strip span {
  color: #475569 !important;
}

[data-theme="light"] #obs-subtab-chat-content select,
[data-theme="light"] #obs-subtab-chat-content input,
[data-theme="light"] #obs-chat-theme-select,
[data-theme="light"] #obs-chat-position-select,
[data-theme="light"] #obs-chat-flow-select,
[data-theme="light"] #obs-chat-width-select {
  background: #FFFFFF !important;
  border: 1.5px solid #CBD5E1 !important;
  color: #0F172A !important;
}

/* ── 12. MULTI-STREAM & ACCOUNTS WORKSPACES IN LIGHT MODE ── */
[data-theme="light"] #screen-multistream .glass-card,
[data-theme="light"] #screen-multistream .platform-card,
[data-theme="light"] #screen-multistream .content-card,
[data-theme="light"] #screen-accounts .platform-card,
[data-theme="light"] #screen-accounts .content-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] #screen-multistream h1,
[data-theme="light"] #screen-multistream h2,
[data-theme="light"] #screen-multistream h3,
[data-theme="light"] #screen-multistream h4 {
  color: #0F172A !important;
}

[data-theme="light"] #screen-multistream p {
  color: #64748B !important;
}

/* Multistream Ingest Keys Container */
[data-theme="light"] #screen-multistream input[type="text"],
[data-theme="light"] #screen-multistream input[type="password"] {
  background: #FFFFFF !important;
  border: 1.5px solid #CBD5E1 !important;
  color: #0F172A !important;
}

[data-theme="light"] #screen-multistream button[onclick*="togglePasswordVisibility"],
[data-theme="light"] #screen-multistream button[onclick*="copyTextInputVal"] {
  background: #F8FAFC !important;
  border: 1px solid #CBD5E1 !important;
  color: #334155 !important;
}

[data-theme="light"] #screen-multistream button[onclick*="togglePasswordVisibility"]:hover,
[data-theme="light"] #screen-multistream button[onclick*="copyTextInputVal"]:hover {
  background: #F1F5F9 !important;
  border-color: #94A3B8 !important;
}

/* Dual Studio Stream Monitor Box (16:9 & 9:16) */
[data-theme="light"] #screen-multistream div[style*="linear-gradient(135deg, rgba(20, 24, 33"],
[data-theme="light"] #screen-multistream div[style*="linear-gradient(135deg,rgba(20,24,33"] {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05) !important;
}

[data-theme="light"] #screen-multistream span[style*="color: #818cf8"],
[data-theme="light"] #screen-multistream span[style*="color:#818cf8"] {
  color: #4F46E5 !important;
}

[data-theme="light"] #screen-multistream button[onclick*="setMsPreviewHeight"] {
  background: #F8FAFC !important;
  border: 1px solid #CBD5E1 !important;
  color: #334155 !important;
}

[data-theme="light"] #screen-multistream button[onclick*="setMsPreviewHeight"]:hover {
  background: #EEF2FF !important;
  border-color: #6366F1 !important;
  color: #4F46E5 !important;
}

[data-theme="light"] #screen-multistream button[onclick*="toggleMsPreviewFullscreen"] {
  background: rgba(16, 185, 129, 0.1) !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  color: #059669 !important;
}

[data-theme="light"] #screen-multistream button[onclick*="setMsVerticalTemplate"]:hover {
  background: #EEF2FF !important;
  border-color: #6366F1 !important;
  color: #4F46E5 !important;
}

/* Multistream Plan Limits Strip in Light Mode */
[data-theme="light"] #ms-plan-limits-strip {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] #ms-plan-limits-strip span,
[data-theme="light"] #ms-plan-limits-strip strong[style*="color: #fff"] {
  color: #0F172A !important;
}

/* Multistream Relay Destination Cards */
[data-theme="light"] #multistream-destinations-grid > div {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] #multistream-destinations-grid > div strong,
[data-theme="light"] #multistream-destinations-grid > div div[style*="color: #fff"],
[data-theme="light"] #multistream-destinations-grid > div div[style*="color:#fff"] {
  color: #0F172A !important;
}

[data-theme="light"] #multistream-destinations-grid button[onclick*="openMultistreamManageModal"] {
  background: #F8FAFC !important;
  border: 1px solid #CBD5E1 !important;
  color: #334155 !important;
}

[data-theme="light"] #multistream-destinations-grid button[onclick*="openMultistreamManageModal"]:hover {
  background: #F1F5F9 !important;
  border-color: #94A3B8 !important;
}

/* Add Destination Modal in Light Mode */
[data-theme="light"] #ms-add-dest-modal > div,
[data-theme="light"] #ms-manage-dest-modal > div {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12) !important;
}

[data-theme="light"] #ms-add-dest-modal h3,
[data-theme="light"] #ms-manage-dest-modal h3 {
  color: #0F172A !important;
}

[data-theme="light"] #ms-modal-platform-trigger,
[data-theme="light"] #ms-modal-platform-options,
[data-theme="light"] #ms-manage-platform-trigger,
[data-theme="light"] #ms-manage-platform-options {
  background: #FFFFFF !important;
  border: 1.5px solid #CBD5E1 !important;
  color: #0F172A !important;
}

/* ── 13. REFERRAL & REWARD POINTS PROGRAM IN LIGHT MODE ── */
[data-theme="light"] #screen-referrals h1,
[data-theme="light"] #screen-referrals h2,
[data-theme="light"] #screen-referrals h3,
[data-theme="light"] #screen-referrals h4 {
  color: #0F172A !important;
}

[data-theme="light"] #screen-referrals p {
  color: #64748B !important;
}

/* Milestone Progress Card */
[data-theme="light"] #screen-referrals div[style*="linear-gradient(135deg, rgba(18,19,25"],
[data-theme="light"] #screen-referrals div[style*="linear-gradient(135deg,rgba(18,19,25"] {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06) !important;
}

[data-theme="light"] #screen-referrals span[style*="color: #c084fc"],
[data-theme="light"] #screen-referrals span[style*="color:#c084fc"] {
  color: #7C3AED !important;
  font-weight: 800 !important;
}

[data-theme="light"] #screen-referrals div[style*="background: rgba(255,255,255,0.08)"],
[data-theme="light"] #screen-referrals div[style*="background:rgba(255,255,255,0.08)"] {
  background: #E2E8F0 !important;
  border: 1px solid #CBD5E1 !important;
}

[data-theme="light"] #screen-referrals div[style*="color: #a1a1aa"],
[data-theme="light"] #screen-referrals div[style*="color:#a1a1aa"],
[data-theme="light"] #screen-referrals span[style*="color: #a1a1aa"],
[data-theme="light"] #screen-referrals span[style*="color:#a1a1aa"] {
  color: #64748B !important;
}

/* Referral Control & Stat Cards */
[data-theme="light"] #screen-referrals div[style*="background: var(--bg-surface)"] {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] #ref-link-input {
  background: #F8FAFC !important;
  border: 1.5px solid #CBD5E1 !important;
  color: #059669 !important;
  font-weight: 700 !important;
}

[data-theme="light"] #ref-stat-invites {
  color: #0F172A !important;
}

/* Reward Redemption Catalog & Items */
[data-theme="light"] #screen-referrals div[style*="background: rgba(0,0,0,0.25)"],
[data-theme="light"] #screen-referrals div[style*="background:rgba(0,0,0,0.25)"] {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}

[data-theme="light"] #screen-referrals div[style*="background: rgba(0,0,0,0.25)"] h4 {
  color: #0F172A !important;
}

[data-theme="light"] #screen-referrals div[style*="background: rgba(0,0,0,0.25)"] p {
  color: #64748B !important;
}

/* ═════════════════════════════════════════════════════════════════
   STATE-OF-THE-ART REAL-TIME AUTOMATION SHOWCASE & PHONE MOCKUP
   ═════════════════════════════════════════════════════════════════ */
.sim-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  user-select: none;
}
.sim-tab-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
  transform: translateY(-2px);
}
.sim-tab-btn.active {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.25), rgba(99, 102, 241, 0.25));
  border-color: #a855f7;
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 0 25px rgba(168, 85, 247, 0.4), inset 0 0 12px rgba(168, 85, 247, 0.2);
  transform: translateY(-2px);
}
[data-theme="light"] .sim-tab-btn {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  color: #475569;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}
[data-theme="light"] .sim-tab-btn:hover {
  background: #F8FAFC;
  border-color: #CBD5E1;
  color: #0F172A;
}
[data-theme="light"] .sim-tab-btn.active {
  background: linear-gradient(135deg, #F3E8FF, #EEF2FF);
  border-color: #8B5CF6;
  color: #6D28D9;
  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.15);
}

/* Typing Dots Animation */
@keyframes typingBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-5px); opacity: 1; }
}
.typing-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c084fc;
  animation: typingBounce 1.4s infinite ease-in-out both;
}
.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }
.typing-dot:nth-child(3) { animation-delay: 0s; }

/* Pulse Glow for Verification Badges */
@keyframes pulseVerified {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
  70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
.pulse-verified {
  animation: pulseVerified 2s infinite;
}

/* Light mode for showcase card */
[data-theme="light"] .sim-showcase-container {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08) !important;
}
[data-theme="light"] .sim-header-strip {
  background: #F8FAFC !important;
  border-bottom: 1px solid #E2E8F0 !important;
}
[data-theme="light"] .sim-inspector-box {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}
[data-theme="light"] .sim-stat-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}
[data-theme="light"] .sim-stat-val {
  color: #0F172A !important;
}

/* ═══════════════════════════════════════════════════
   GLOBAL BULLETPROOF AUTH MODAL OVERLAY
   ═══════════════════════════════════════════════════ */
#modal-standalone-auth {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 99999999 !important;
  background: rgba(7, 8, 14, 0.88) !important;
  backdrop-filter: blur(25px) !important;
  -webkit-backdrop-filter: blur(25px) !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  pointer-events: auto !important;
}

#modal-standalone-auth.active,
#modal-standalone-auth[style*="display: flex"],
#modal-standalone-auth[style*="display:flex"],
#modal-standalone-auth[style*="display: block"],
#modal-standalone-auth[style*="display:block"] {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ── Country Flag Dropdown Styles ── */
.country-opt:hover {
  background: rgba(168, 85, 247, 0.22) !important;
  color: #38bdf8 !important;
}

#custom-country-dropdown-menu::-webkit-scrollbar {
  width: 5px;
}
#custom-country-dropdown-menu::-webkit-scrollbar-thumb {
  background: rgba(168, 85, 247, 0.35);
  border-radius: 4px;
}

/* ── Glassy OTP Verification System (ReplyPops Brand Violet/Indigo Theme) ── */
.glassy-otp-wrapper {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

.glassy-otp-glow-bg {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.35) 0%, rgba(139, 92, 246, 0.2) 45%, rgba(0, 0, 0, 0) 70%);
  border-radius: 50%;
  filter: blur(48px);
  pointer-events: none;
  z-index: 0;
  transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.glassy-otp-glow-bg.success-mode {
  background: radial-gradient(circle, rgba(16, 185, 129, 0.45) 0%, rgba(5, 150, 105, 0.2) 50%, rgba(0, 0, 0, 0) 70%);
}

.glassy-otp-card {
  position: relative;
  z-index: 1;
  background: rgba(18, 22, 34, 0.95);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border: 1.5px solid rgba(99, 102, 241, 0.28);
  border-radius: 24px;
  padding: 36px 30px;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.85), 0 0 35px rgba(99, 102, 241, 0.15);
  overflow: hidden;
  text-align: center;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.glassy-otp-card.success-mode {
  border-color: rgba(16, 185, 129, 0.6);
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.9), 0 0 50px rgba(16, 185, 129, 0.3);
}



/* Badge Icon */
.glassy-otp-badge {
  position: relative;
  width: 62px;
  height: 62px;
  margin: 0 auto 18px auto;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.15));
  border: 1.5px solid rgba(99, 102, 241, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #A5B4FC;
  box-shadow: 0 0 25px rgba(99, 102, 241, 0.3), inset 0 0 14px rgba(99, 102, 241, 0.15);
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.glassy-otp-badge.success-badge {
  border-color: #10B981;
  color: #10B981;
  background: rgba(16, 185, 129, 0.15);
  box-shadow: 0 0 36px rgba(16, 185, 129, 0.5), inset 0 0 16px rgba(16, 185, 129, 0.2);
  transform: scale(1.1) rotate(360deg);
}

/* Title & Two-Tone Accent */
.glassy-otp-title {
  font-size: 24px;
  font-weight: 800;
  color: #F8FAFC;
  letter-spacing: -0.4px;
  margin: 0 0 6px 0;
  line-height: 1.2;
}

.glassy-otp-accent {
  background: linear-gradient(135deg, #818CF8 0%, #C084FC 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}

.glassy-otp-subtitle {
  font-size: 13.5px;
  color: #94A3B8;
  margin: 0 0 24px 0;
  line-height: 1.5;
}

.glassy-otp-chip {
  display: inline-block;
  padding: 3px 10px;
  background: rgba(99, 102, 241, 0.14);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 8px;
  color: #C7D2FE;
  font-weight: 700;
  font-size: 12.5px;
}

/* OTP Boxes Container */
.glassy-otp-boxes-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 0 auto 22px auto;
  min-height: 64px;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.glassy-otp-box-item {
  position: relative;
  width: 48px;
  height: 56px;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (min-width: 480px) {
  .glassy-otp-box-item {
    width: 52px;
    height: 60px;
  }
}

.glassy-otp-input-digit {
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  color: #F8FAFC;
  background: #141A26;
  border: 1.5px solid #232D42;
  border-radius: 14px;
  outline: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.45);
  box-sizing: border-box;
}

.glassy-otp-input-digit:hover {
  border-color: rgba(99, 102, 241, 0.45);
}

.glassy-otp-input-digit:focus {
  border-color: #818CF8 !important;
  background: #1A2238 !important;
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.5), inset 0 0 8px rgba(99, 102, 241, 0.2) !important;
  transform: translateY(-2px);
}

.glassy-otp-input-digit.has-value {
  border-color: #818CF8;
  background: #1A2238;
  color: #FFFFFF;
  box-shadow: 0 0 14px rgba(99, 102, 241, 0.3);
}

/* ════════ EXACT CONVERGING DIAMOND ORBIT ANIMATION (FROM VIDEO) ════════ */
.glassy-otp-boxes-wrap.is-verifying {
  width: 130px;
  height: 130px;
  margin: 10px auto 26px auto;
  animation: diamondOrbitSpin 2.4s ease-in-out infinite;
}

.glassy-otp-boxes-wrap.is-verifying .glassy-otp-box-item {
  position: absolute;
  width: 36px;
  height: 42px;
}

.glassy-otp-boxes-wrap.is-verifying .glassy-otp-box-item:nth-child(1) {
  top: 2px;
  left: calc(50% - 18px);
  transform: rotate(0deg);
}
.glassy-otp-boxes-wrap.is-verifying .glassy-otp-box-item:nth-child(2) {
  top: 22px;
  right: 6px;
  transform: rotate(60deg);
}
.glassy-otp-boxes-wrap.is-verifying .glassy-otp-box-item:nth-child(3) {
  bottom: 22px;
  right: 6px;
  transform: rotate(120deg);
}
.glassy-otp-boxes-wrap.is-verifying .glassy-otp-box-item:nth-child(4) {
  bottom: 2px;
  left: calc(50% - 18px);
  transform: rotate(180deg);
}
.glassy-otp-boxes-wrap.is-verifying .glassy-otp-box-item:nth-child(5) {
  bottom: 22px;
  left: 6px;
  transform: rotate(240deg);
}
.glassy-otp-boxes-wrap.is-verifying .glassy-otp-box-item:nth-child(6) {
  top: 22px;
  left: 6px;
  transform: rotate(300deg);
}

.glassy-otp-boxes-wrap.is-verifying .glassy-otp-input-digit {
  border-color: #818CF8 !important;
  color: #C7D2FE !important;
  background: rgba(99, 102, 241, 0.25) !important;
  box-shadow: 0 0 24px rgba(99, 102, 241, 0.8), inset 0 0 10px rgba(139, 92, 246, 0.4) !important;
  pointer-events: none;
  font-size: 18px;
}

@keyframes diamondOrbitSpin {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(0.88); }
  100% { transform: rotate(360deg) scale(1); }
}

/* ═══════════════════════════════════════════════════════════════════
   💳 NEXT-GEN PAYMENT CHECKOUT V3 VERIFICATION ENGINE (EXACT VIDEO MATCH)
   ═══════════════════════════════════════════════════════════════════ */
.payment-v3-modal-card {
  position: relative;
  background: rgba(14, 18, 28, 0.96);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border: 1.5px solid rgba(99, 102, 241, 0.3);
  border-radius: 26px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.95), 0 0 45px rgba(99, 102, 241, 0.2);
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.payment-v3-stage {
  position: relative;
  width: 100%;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 34px 24px;
  box-sizing: border-box;
}

/* 4 Concentric Glowing Radar Rings */
.payment-radar-container {
  position: relative;
  width: 270px;
  height: 270px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}

.payment-radar-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(139, 92, 246, 0.4);
  background: radial-gradient(circle, rgba(139, 92, 246, 0.08) 0%, rgba(99, 102, 241, 0.02) 70%, transparent 100%);
  box-shadow: 0 0 22px rgba(139, 92, 246, 0.25), inset 0 0 15px rgba(99, 102, 241, 0.15);
  pointer-events: none;
  animation: paymentRadarPulse 3s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

.payment-radar-ring:nth-child(1) { width: 140px; height: 140px; animation-delay: 0s; }
.payment-radar-ring:nth-child(2) { width: 180px; height: 180px; animation-delay: 0.5s; }
.payment-radar-ring:nth-child(3) { width: 225px; height: 225px; animation-delay: 1.0s; }
.payment-radar-ring:nth-child(4) { width: 270px; height: 270px; animation-delay: 1.5s; }

@keyframes paymentRadarPulse {
  0% { transform: scale(0.93); opacity: 0.35; }
  50% { transform: scale(1.04); opacity: 0.95; }
  100% { transform: scale(0.93); opacity: 0.35; }
}

/* Progress SVG Track */
.payment-progress-svg {
  position: absolute;
  width: 170px;
  height: 170px;
  transform: rotate(-90deg);
  z-index: 3;
}

.payment-progress-bg-circle {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 6;
}

.payment-progress-bar-circle {
  fill: none;
  stroke: #38bdf8;
  stroke-width: 6.5;
  stroke-linecap: round;
  stroke-dasharray: 471;
  stroke-dashoffset: 471;
  filter: drop-shadow(0 0 10px #38bdf8);
  transition: stroke-dashoffset 0.12s linear, stroke 0.4s ease;
}

.payment-progress-bar-circle.is-success {
  stroke: #10B981 !important;
  filter: drop-shadow(0 0 14px #10b981) !important;
}

/* Center Floating Lock Badge */
.payment-center-badge {
  position: absolute;
  z-index: 4;
  width: 66px;
  height: 66px;
  border-radius: 20px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  box-shadow: 0 0 32px rgba(139, 92, 246, 0.7), inset 0 0 14px rgba(255, 255, 255, 0.3);
  animation: centerBadgeFloat 2.2s ease-in-out infinite alternate;
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.payment-center-badge.is-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 0 45px rgba(16, 185, 129, 0.85), inset 0 0 18px rgba(255, 255, 255, 0.45) !important;
  transform: scale(1.15) rotate(360deg);
}

@keyframes centerBadgeFloat {
  0% { transform: translateY(-3px) scale(0.98); }
  100% { transform: translateY(3px) scale(1.02); }
}

/* Text and Percentage Display */
.payment-status-title {
  font-size: 15.5px;
  font-weight: 700;
  color: #cbd5e1;
  margin-top: 10px;
  margin-bottom: 4px;
  letter-spacing: 0.3px;
  transition: color 0.3s ease;
  text-align: center;
}

.payment-percentage-text {
  font-size: 28px;
  font-weight: 900;
  font-family: var(--font-heading, 'Space Grotesk', sans-serif);
  color: #ffffff;
  letter-spacing: -0.5px;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
  text-align: center;
}

.payment-percentage-text.is-success {
  color: #10B981;
  text-shadow: 0 0 25px rgba(16, 185, 129, 0.8);
}

/* Confetti Ambient Burst */
.payment-confetti-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
  display: none;
}

.payment-confetti-wrap.active {
  display: block;
}

.payment-particle {
  position: absolute;
  border-radius: 50%;
  animation: confettiFall 2.8s cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
}

@keyframes confettiFall {
  0% { transform: translateY(0) scale(0); opacity: 1; }
  50% { transform: translateY(80px) scale(1.4); opacity: 0.9; }
  100% { transform: translateY(180px) scale(0.6); opacity: 0; }
}

/* Snappy Ghost Trail Effect */
.ghost-trail-digit {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 800;
  color: #C084FC;
  text-shadow: 0 0 18px rgba(139, 92, 246, 0.95), 0 0 30px rgba(99, 102, 241, 0.8);
  pointer-events: none;
  animation: ghostTrailRise 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  z-index: 10;
}

@keyframes ghostTrailRise {
  0% {
    opacity: 0.95;
    transform: translateY(0) scale(1) rotate(0deg);
    filter: blur(0px);
  }
  100% {
    opacity: 0;
    transform: translateY(-36px) scale(1.4) rotate(-8deg);
    filter: blur(5px);
  }
}

/* Shaking Error Animation */
.glassy-otp-boxes-wrap.is-shaking {
  animation: otpShake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.glassy-otp-boxes-wrap.is-shaking .glassy-otp-input-digit {
  border-color: #ED332E !important;
  box-shadow: 0 0 18px rgba(237, 51, 46, 0.45) !important;
}

@keyframes otpShake {
  10%, 90% { transform: translate3d(-4px, 0, 0); }
  20%, 80% { transform: translate3d(6px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-6px, 0, 0); }
  40%, 60% { transform: translate3d(6px, 0, 0); }
}

/* Verify & Proceed Button */
.glassy-otp-btn-submit {
  width: 100%;
  padding: 14px 20px;
  font-size: 14.5px;
  font-weight: 700;
  color: #FFFFFF;
  background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #7C3AED 100%);
  border: none;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.25s ease;
  margin-bottom: 18px;
}

.glassy-otp-btn-submit:hover:not(:disabled) {
  box-shadow: 0 6px 30px rgba(99, 102, 241, 0.7);
  transform: translateY(-1px);
}

.glassy-otp-btn-submit:active:not(:disabled) {
  transform: translateY(1px);
}

.glassy-otp-btn-submit:disabled {
  background: #1A2130;
  color: #64748B;
  border: 1px solid #212A3E;
  box-shadow: none;
  cursor: not-allowed;
}

/* Inputs focus enhancement */
#forgot-input-email:focus,
#forgot-input-newpass:focus,
#forgot-input-confirmpass:focus,
#reg-input-name:focus,
#reg-input-email:focus,
#reg-input-password:focus,
#reg-input-confirm-password:focus {
  border-color: #818CF8 !important;
  box-shadow: 0 0 16px rgba(99, 102, 241, 0.35) !important;
}

/* Success View Crossfade */
.glassy-otp-success-view {
  display: none;
  animation: otpFadeInScale 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes otpFadeInScale {
  0% { opacity: 0; transform: scale(0.92) translateY(12px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Center Checkmark Pill Box */
.glassy-otp-success-check-pill {
  width: 100%;
  max-width: 220px;
  height: 64px;
  margin: 0 auto 24px auto;
  background: rgba(16, 185, 129, 0.1);
  border: 1.5px solid rgba(16, 185, 129, 0.5);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 28px rgba(16, 185, 129, 0.3), inset 0 0 12px rgba(16, 185, 129, 0.15);
  animation: checkPillPulse 2s ease-in-out infinite;
}

@keyframes checkPillPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 28px rgba(16, 185, 129, 0.3); }
  50% { transform: scale(1.03); box-shadow: 0 0 40px rgba(16, 185, 129, 0.45); }
}

.glassy-otp-btn-success {
  width: 100%;
  padding: 14px 20px;
  font-size: 14.5px;
  font-weight: 700;
  color: #FFFFFF;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  border: none;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 4px 24px rgba(16, 185, 129, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.25s ease;
}

.glassy-otp-btn-success:hover {
  box-shadow: 0 6px 30px rgba(16, 185, 129, 0.6);
  transform: translateY(-1px);
}


/* ── Use Cases & Docs Viewer Modal Styling ── */
#modal-usecase-doc-viewer.active,
#modal-usecase-doc-viewer[style*="display: flex"],
#modal-usecase-doc-viewer[style*="display:flex"] {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

[data-theme="light"] #modal-usecase-doc-viewer .modal-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.15) !important;
}

[data-theme="light"] #udd-title {
  color: #0F172A !important;
}

[data-theme="light"] #udd-body {
  color: #334155 !important;
}

[data-theme="light"] #udd-body h4 {
  color: #0F172A !important;
}

[data-theme="light"] #udd-body p {
  color: #475569 !important;
}

[data-theme="light"] #udd-body strong {
  color: #0F172A !important;
}

[data-theme="light"] #udd-body ul li {
  color: #475569 !important;
}

[data-theme="light"] #udd-body ol li {
  color: #475569 !important;
}

[data-theme="light"] #udd-body div[style*="background: #0d0e12"] {
  background: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
}

[data-theme="light"] #udd-body div[style*="background: rgba(255,255,255,0.03)"] {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}

[data-theme="light"] #udd-body div[style*="color: #a1a1aa"] {
  color: #64748B !important;
}

[data-theme="light"] #landing-doc-engine-version {
  color: #94A3B8 !important;
}

/* ==========================================================================
   💸 SUPER CHAT & CREATOR TIPPING HUB STYLES (DARK & LIGHT THEMES)
   ========================================================================== */

/* Sidebar Super Chat Motion Pill */
.superchat-pill-news-ticker {
  background: rgba(16, 185, 129, 0.08) !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
}
.superchat-pill-news-ticker:hover {
  background: rgba(16, 185, 129, 0.16) !important;
  border-color: rgba(16, 185, 129, 0.5) !important;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.25) !important;
}
.superchat-pill-news-ticker.active {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.22), rgba(5, 150, 105, 0.22)) !important;
  border-color: #10b981 !important;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.35) !important;
}

/* Creator Card Styling */
.sc-creator-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.sc-creator-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}
.sc-creator-card.active {
  background: rgba(16, 185, 129, 0.12) !important;
  border-color: #10b981 !important;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.25) !important;
}

/* Preset Buttons */
.sc-preset-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Payment Method Cards */
.sc-payment-card:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.07);
}

/* Responsive Grid for Studio */
@media (max-width: 1100px) {
  .sc-studio-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Light Mode Overrides for Super Chat ── */
[data-theme="light"] #screen-superchat h1,
[data-theme="light"] #screen-superchat h2,
[data-theme="light"] #screen-superchat h3 {
  color: #0F172A !important;
}

[data-theme="light"] #screen-superchat .sc-studio-grid > div > div {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05) !important;
}

[data-theme="light"] .sc-creator-card {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}
[data-theme="light"] .sc-creator-card:hover {
  background: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
}
[data-theme="light"] .sc-creator-card.active {
  background: #ECFDF5 !important;
  border-color: #10B981 !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.2) !important;
}
[data-theme="light"] .sc-creator-card div[style*="color: #fff"],
[data-theme="light"] .sc-creator-card div[style*="color:#fff"] {
  color: #0F172A !important;
}

[data-theme="light"] #sc-selected-creator-banner {
  background: #ECFDF5 !important;
  border: 1px solid #A7F3D0 !important;
}
[data-theme="light"] #sc-target-name {
  color: #0F172A !important;
}

[data-theme="light"] #sc-creator-search-input,
[data-theme="light"] #sc-supporter-name-input,
[data-theme="light"] #sc-custom-amount-input,
[data-theme="light"] #sc-message-input,
[data-theme="light"] #sc-my-public-link,
[data-theme="light"] #sc-obs-alert-url {
  background: #F8FAFC !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
}

[data-theme="light"] .sc-payment-card {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}
[data-theme="light"] .sc-payment-card span[style*="color: #fff"],
[data-theme="light"] .sc-payment-card span[style*="color:#fff"],
[data-theme="light"] .sc-payment-card div[style*="color: #fff"],
[data-theme="light"] .sc-payment-card div[style*="color:#fff"] {
  color: #0F172A !important;
}
[data-theme="light"] .sc-payment-card.active {
  background: #ECFDF5 !important;
  border-color: #10B981 !important;
}

[data-theme="light"] #sc-live-feed-container > div,
[data-theme="light"] #sc-leaderboard-container > div {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}
[data-theme="light"] #sc-live-feed-container > div div[style*="color: #fff"],
[data-theme="light"] #sc-leaderboard-container > div div[style*="color: #fff"],
[data-theme="light"] #sc-leaderboard-container div[style*="color: #fff"],
[data-theme="light"] .sc-creator-card span[style*="color: #fff"] {
  color: #0F172A !important;
}
[data-theme="light"] #sc-live-feed-container > div div[style*="color: #cbd5e1"],
[data-theme="light"] #sc-leaderboard-container > div div[style*="color: #cbd5e1"],
[data-theme="light"] #screen-superchat p[style*="color: #cbd5e1"] {
  color: #475569 !important;
}

/* ═══════════════ SUPER CHAT SUITE THEME INTEGRATION ═══════════════ */
.sc-sub-nav-item {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.sc-sub-nav-item:hover:not(.active) {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
}

[data-theme="light"] .sc-main-container {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05) !important;
}

[data-theme="light"] .sc-sub-sidebar {
  background: #F8FAFC !important;
  border-right: 1px solid #E2E8F0 !important;
}

[data-theme="light"] .sc-profile-box {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] .sc-creator-name-text,
[data-theme="light"] .sc-page-title,
[data-theme="light"] .sc-breadcrumb-title,
[data-theme="light"] .sc-card-title-text,
[data-theme="light"] .sc-stat-val,
[data-theme="light"] #sc-transactions-body div[style*="color: #ffffff"],
[data-theme="light"] #sc-transactions-body div[style*="color:#ffffff"] {
  color: #0F172A !important;
}

[data-theme="light"] .sc-sub-nav-item {
  color: #64748B !important;
}
[data-theme="light"] .sc-sub-nav-item:hover:not(.active) {
  background: #F1F5F9 !important;
  color: #0F172A !important;
}
[data-theme="light"] .sc-sub-nav-item.active {
  background: rgba(14, 165, 233, 0.1) !important;
  border-color: rgba(14, 165, 233, 0.3) !important;
  border-left: 3px solid #0ea5e9 !important;
  color: #0284c7 !important;
}

[data-theme="light"] .sc-footer-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
}

[data-theme="light"] .sc-top-bar {
  border-bottom: 1px solid #E2E8F0 !important;
}

[data-theme="light"] .sc-metric-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] .sc-challenge-box,
[data-theme="light"] .sc-challenge-panel,
[data-theme="light"] .sc-sound-drop-card,
[data-theme="light"] .sc-jumpscare-panel {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}

[data-theme="light"] .sc-table-container {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] .sc-table-header {
  background: #F8FAFC !important;
  border-bottom: 1px solid #E2E8F0 !important;
  color: #64748B !important;
}

[data-theme="light"] .sc-creators-panel,
[data-theme="light"] .sc-sender-panel {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
}

/* 💸 Super Chat Dedicated Sidebar in Light & Dark Mode */
#superchat-sidebar-menu {
  animation: fadeIn 0.2s ease;
}

[data-theme="light"] #superchat-sidebar-menu {
  color: #0F172A !important;
}

[data-theme="light"] #superchat-sidebar-menu button[onclick*="switchScreen('dashboard')"],
[data-theme="light"] .sc-header-back-btn {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}

[data-theme="light"] #superchat-sidebar-menu button[onclick*="switchScreen('dashboard')"]:hover,
[data-theme="light"] .sc-header-back-btn:hover {
  background: #F1F5F9 !important;
  border-color: #94A3B8 !important;
}

[data-theme="light"] #superchat-sidebar-menu .sc-profile-box {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] #superchat-sidebar-menu .sc-creator-name-text {
  color: #0F172A !important;
}

[data-theme="light"] #superchat-sidebar-menu .sidebar-nav-item {
  color: #475569 !important;
}

[data-theme="light"] #superchat-sidebar-menu .sidebar-nav-item:hover {
  background: #F1F5F9 !important;
  color: #0F172A !important;
}

[data-theme="light"] #superchat-sidebar-menu .sidebar-nav-item.active {
  background: rgba(14, 165, 233, 0.1) !important;
  border-color: rgba(14, 165, 233, 0.3) !important;
  border-left: 3px solid #0ea5e9 !important;
  color: #0284c7 !important;
}

[data-theme="light"] #superchat-sidebar-menu .sc-footer-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] #superchat-sidebar-menu .sc-card-title-text {
  color: #0F172A !important;
}

/* Super Chat Subview Headings & Texts in Light Mode */
[data-theme="light"] #sc-subview-dashboard h1,
[data-theme="light"] #sc-subview-dashboard h2,
[data-theme="light"] #sc-subview-flares h2,
[data-theme="light"] #sc-subview-challenges h2,
[data-theme="light"] #sc-subview-drops h2,
[data-theme="light"] #sc-subview-jumpscares h2,
[data-theme="light"] #sc-active-challenge-title,
[data-theme="light"] #sc-top-supporter-name,
[data-theme="light"] #sc-target-name,
[data-theme="light"] .sc-sound-drop-card div[style*="color: #fff"],
[data-theme="light"] .sc-sound-drop-card div[style*="color:#fff"],
[data-theme="light"] .sc-challenge-panel div[style*="color: #fff"],
[data-theme="light"] .sc-challenge-panel div[style*="color:#fff"],
[data-theme="light"] .sc-jumpscare-panel div[style*="color: #fff"],
[data-theme="light"] .sc-jumpscare-panel div[style*="color:#fff"] {
  color: #0F172A !important;
}

[data-theme="light"] #sc-global-creator-mode-banner {
  background: #EFF6FF !important;
  border: 1px solid #BFDBFE !important;
}

[data-theme="light"] #sc-global-creator-mode-banner span[style*="color: #93c5fd"],
[data-theme="light"] #sc-global-creator-mode-banner span[style*="color:#93c5fd"] {
  color: #2563EB !important;
}

[data-theme="light"] #sc-global-creator-mode-banner span[style*="color: #60a5fa"],
[data-theme="light"] #sc-global-creator-mode-banner span[style*="color:#60a5fa"] {
  color: #1D4ED8 !important;
}

/* ═══════════════ DROPFLARES LEADERBOARD SUITE STYLES ═══════════════ */
.sc-lb-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sc-lb-toggle-btn {
  background: transparent;
  color: #94a3b8;
}

.sc-lb-toggle-btn.active {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(168, 85, 247, 0.4) !important;
}

[data-theme="light"] .sc-lb-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06) !important;
}

[data-theme="light"] #sc-subview-leaderboard h1 {
  color: #0F172A !important;
  text-shadow: none !important;
}

[data-theme="light"] .sc-lb-card h2,
[data-theme="light"] .sc-lb-card h3 {
  color: #0F172A !important;
}

[data-theme="light"] .sc-lb-card div[style*="color: #ffffff"],
[data-theme="light"] .sc-lb-card div[style*="color:#ffffff"],
[data-theme="light"] .sc-lb-card span[style*="color: #ffffff"],
[data-theme="light"] .sc-lb-card span[style*="color:#ffffff"] {
  color: #0F172A !important;
}

[data-theme="light"] .sc-lb-pill-toggle {
  background: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
}

[data-theme="light"] .sc-lb-toggle-btn {
  color: #64748B !important;
}

[data-theme="light"] .sc-lb-toggle-btn.active {
  background: linear-gradient(135deg, #9333ea, #db2777) !important;
  color: #FFFFFF !important;
}

[data-theme="light"] #lb-general-podium > div > div:last-child {
  background: #F8FAFC !important;
  border: 1.5px solid #CBD5E1 !important;
}

[data-theme="light"] .sc-mini-podium-grid > div > div:last-child {
  background: #F8FAFC !important;
  border: 1px solid #CBD5E1 !important;
}

[data-theme="light"] #lb-extended-table > div {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}

/* ══════════════════════════════════════════════════════════════
   GLOBAL PLATFORM NOTIFICATION CENTER & HEADER BELL SUITE
   ══════════════════════════════════════════════════════════════ */

.global-notif-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.global-notif-btn {
  width: 34px;
  height: 34px;
  background: var(--bg-input, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--border-strong, rgba(255, 255, 255, 0.12));
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted, #94a3b8);
  position: relative;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.global-notif-btn:hover {
  background: rgba(59, 130, 246, 0.15);
  border-color: #3b82f6;
  color: #60a5fa;
  transform: translateY(-1px);
}

.global-notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 10px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #0f172a;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.6);
  transition: transform 0.2s ease;
}

.global-notif-btn:hover .global-notif-badge {
  transform: scale(1.1);
}

/* ── Global Notification Dropdown Panel ── */
.global-notif-dropdown-panel {
  position: fixed;
  top: 64px;
  right: 24px;
  width: 420px;
  max-width: calc(100vw - 32px);
  max-height: calc(85vh);
  background: rgba(15, 23, 42, 0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255,255,255,0.05);
  z-index: 9999999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: notifSlideDown 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.global-notif-header {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.notif-action-btn {
  padding: 4px 9px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.notif-action-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
}

/* Category Filter Tabs */
.global-notif-tabs {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  overflow-x: auto;
  scrollbar-width: none;
}

.global-notif-tabs::-webkit-scrollbar {
  display: none;
}

.notif-tab-btn {
  padding: 5px 11px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}

.notif-tab-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.notif-tab-btn.active {
  background: linear-gradient(135deg, #3b82f6, #6366f1) !important;
  border-color: #60a5fa !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(59, 130, 246, 0.4);
}

/* Notifications List Container */
.global-notif-list {
  padding: 8px 10px;
  overflow-y: auto;
  max-height: 400px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.notif-item-card {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.notif-item-card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateX(2px);
}

.notif-item-card.unread {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.3);
}

.notif-icon-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.notif-content-wrap {
  flex: 1;
  min-width: 0;
}

.notif-top-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}

.notif-item-title {
  font-size: 12.5px;
  font-weight: 800;
  color: #f8fafc;
  line-height: 1.3;
}

.notif-time-ago {
  font-size: 10px;
  color: #64748b;
  font-weight: 600;
  white-space: nowrap;
}

.notif-item-desc {
  font-size: 11.5px;
  color: #cbd5e1;
  line-height: 1.45;
  margin-bottom: 6px;
  word-break: break-word;
}

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

.notif-action-pill {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
  cursor: pointer;
}

.notif-action-pill:hover {
  background: rgba(59, 130, 246, 0.3);
}

.notif-unread-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3b82f6;
  box-shadow: 0 0 8px #3b82f6;
  flex-shrink: 0;
  margin-top: 5px;
}

.global-notif-footer {
  padding: 10px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ══════ LIGHT MODE FOR NOTIFICATION CENTER ══════ */
[data-theme="light"] .global-notif-btn {
  background: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
  color: #475569 !important;
}

[data-theme="light"] .global-notif-btn:hover {
  background: #E2E8F0 !important;
  border-color: #3b82f6 !important;
  color: #2563eb !important;
}

[data-theme="light"] .global-notif-badge {
  border: 2px solid #FFFFFF !important;
}

[data-theme="light"] .global-notif-dropdown-panel {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(15, 23, 42, 0.05) !important;
}

[data-theme="light"] .global-notif-header {
  background: #F8FAFC !important;
  border-bottom: 1px solid #E2E8F0 !important;
}

[data-theme="light"] .notif-panel-title {
  color: #0F172A !important;
}

[data-theme="light"] .notif-action-btn {
  background: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
  color: #334155 !important;
}

[data-theme="light"] .notif-action-btn:hover {
  background: #E2E8F0 !important;
  color: #0F172A !important;
}

[data-theme="light"] .global-notif-tabs {
  background: #F8FAFC !important;
  border-bottom: 1px solid #E2E8F0 !important;
}

[data-theme="light"] .notif-tab-btn {
  background: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
  color: #475569 !important;
}

[data-theme="light"] .notif-tab-btn.active {
  background: linear-gradient(135deg, #2563eb, #4f46e5) !important;
  color: #FFFFFF !important;
}

[data-theme="light"] .notif-item-card {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}

[data-theme="light"] .notif-item-card:hover {
  background: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
}

[data-theme="light"] .notif-item-card.unread {
  background: #EFF6FF !important;
  border-color: #BFDBFE !important;
}

[data-theme="light"] .notif-item-title {
  color: #0F172A !important;
}

[data-theme="light"] .notif-item-desc {
  color: #334155 !important;
}

[data-theme="light"] .global-notif-footer {
  background: #F8FAFC !important;
  border-top: 1px solid #E2E8F0 !important;
}

/* Super Chat Gamer Ranks & Dropdown Light Mode */
[data-theme="light"] #sc-amount-dropdown {
  background: #FFFFFF !important;
  border: 1.5px solid #CBD5E1 !important;
  color: #0F172A !important;
}

[data-theme="light"] #sc-supporter-name-input,
[data-theme="light"] #sc-custom-amount-input,
[data-theme="light"] #sc-message-input {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
}

[data-theme="light"] .sc-preset-btn:not(.active) {
  background: #F8FAFC !important;
  border-color: #CBD5E1 !important;
  color: #475569 !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   DISCORD PLUGINS LIGHT MODE DEEP REFINEMENT
   ══════════════════════════════════════════════════════════════════════════════ */

/* Audit Logs Invisibility & Box Fix in Light Mode */
[data-theme="light"] #audit-logs-container > div {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] #audit-logs-container > div div[style*="font-size: 13px"],
[data-theme="light"] #audit-logs-container > div div[style*="font-size:13px"],
[data-theme="light"] #audit-logs-container > div div[style*="color: #f1f5f9"],
[data-theme="light"] #audit-logs-container > div div[style*="color:#f1f5f9"] {
  color: #0F172A !important;
}

[data-theme="light"] #audit-logs-container > div div[style*="color: #94a3b8"],
[data-theme="light"] #audit-logs-container > div div[style*="color:#94a3b8"] {
  color: #64748B !important;
}

/* Leveling Live Difficulty Preview in Light Mode */
[data-theme="light"] div:has(> #lvl-calc-grid),
[data-theme="light"] #inline-plugin-body div[style*="background: rgba(17,18,24"],
[data-theme="light"] #inline-plugin-body div[style*="background:rgba(17,18,24"],
[data-theme="light"] #inline-plugin-body div[style*="background: rgba(17, 18, 24"] {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}

[data-theme="light"] #lvl-calc-grid > div,
[data-theme="light"] #inline-plugin-body div[style*="background: rgba(0,0,0,0.4)"],
[data-theme="light"] #inline-plugin-body div[style*="background:rgba(0,0,0,0.4)"] {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] #lvl-calc-grid > div div[style*="color: #fff"],
[data-theme="light"] #lvl-calc-grid > div div[style*="color:#fff"] {
  color: #0F172A !important;
}

[data-theme="light"] #lvl-calc-grid > div div[style*="color: #a1a1aa"],
[data-theme="light"] #lvl-calc-grid > div div[style*="color:#a1a1aa"] {
  color: #64748B !important;
}

[data-theme="light"] #lvl-calc-grid > div div[style*="color: #fbbf24"],
[data-theme="light"] #lvl-calc-grid > div div[style*="color:#fbbf24"] {
  color: #D97706 !important;
}

/* Auto-Role Timing and Selection Cards in Light Mode */
[data-theme="light"] #tab-autorole label,
[data-theme="light"] #inline-plugin-body label[style*="background: rgba(88,101,242"],
[data-theme="light"] #inline-plugin-body label[style*="background:rgba(88,101,242"] {
  color: #0F172A !important;
}

[data-theme="light"] #tab-autorole label span[style*="color: #a1a1aa"],
[data-theme="light"] #inline-plugin-body label span[style*="color: #a1a1aa"],
[data-theme="light"] #inline-plugin-body label span[style*="color:#a1a1aa"] {
  color: #64748B !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   SUPER CHAT HEADER QUICK ACTIONS (Leaderboard & All Ranks Buttons)
   ══════════════════════════════════════════════════════════════════════════════ */
.sc-header-actions {
  display: none !important;
  align-items: center;
  gap: 8px;
  user-select: none;
}

/* Only show when on Super Chat screen */
body[data-screen="superchat"] .desktop-header .sc-header-actions {
  display: flex !important;
  animation: scHeaderFadeSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Auto-hide immediately on any other screen */
body:not([data-screen="superchat"]) .sc-header-actions {
  display: none !important;
}

@keyframes scHeaderFadeSlideIn {
  0% {
    opacity: 0;
    transform: translateY(-6px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.sc-hdr-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
  white-space: nowrap;
}

.sc-hdr-action-btn .sc-hdr-btn-icon {
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sc-hdr-leaderboard-btn {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(217, 119, 6, 0.25));
  border: 1px solid rgba(245, 158, 11, 0.45);
  color: #fbbf24;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
}

.sc-hdr-leaderboard-btn:hover {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border-color: #f59e0b;
  color: #000000;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.45);
  transform: translateY(-1px);
}

.sc-hdr-ranks-btn {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.15), rgba(37, 99, 235, 0.25));
  border: 1px solid rgba(56, 189, 248, 0.45);
  color: #38bdf8;
  box-shadow: 0 2px 8px rgba(56, 189, 248, 0.15);
}

.sc-hdr-ranks-btn:hover {
  background: linear-gradient(135deg, #38bdf8, #2563eb);
  border-color: #38bdf8;
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(56, 189, 248, 0.45);
  transform: translateY(-1px);
}

/* Light Mode Overrides for Super Chat Header Buttons */
[data-theme="light"] .sc-hdr-leaderboard-btn {
  background: #FEF3C7 !important;
  border: 1px solid #FCD34D !important;
  color: #92400E !important;
  box-shadow: 0 1px 3px rgba(245, 158, 11, 0.12) !important;
}

[data-theme="light"] .sc-hdr-leaderboard-btn:hover {
  background: linear-gradient(135deg, #F59E0B, #D97706) !important;
  border-color: #D97706 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35) !important;
}

[data-theme="light"] .sc-hdr-ranks-btn {
  background: #E0F2FE !important;
  border: 1px solid #BAE6FD !important;
  color: #0369A1 !important;
  box-shadow: 0 1px 3px rgba(56, 189, 248, 0.12) !important;
}

[data-theme="light"] .sc-hdr-ranks-btn:hover {
  background: linear-gradient(135deg, #0284C7, #2563EB) !important;
  border-color: #0284C7 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35) !important;
}

/* Modal Light Mode Polish for All Ranks / Supporter Badges */
[data-theme="light"] #modal-supporter-ranked-badges .modal-card {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.18) !important;
}

[data-theme="light"] #modal-supporter-ranked-badges .modal-card > div:first-child {
  background: linear-gradient(135deg, #F0F9FF, #F8FAFC) !important;
  border-color: #E2E8F0 !important;
}

[data-theme="light"] #modal-supporter-ranked-badges h2 {
  color: #0F172A !important;
  text-shadow: none !important;
}

[data-theme="light"] #modal-supporter-ranked-badges p {
  color: #64748B !important;
}

[data-theme="light"] #modal-supporter-ranked-badges .codex-tab:not(.active) {
  background: #F1F5F9 !important;
  color: #475569 !important;
  border-color: #CBD5E1 !important;
}

[data-theme="light"] #codex-current-user-status {
  background: #E0F2FE !important;
  border-color: #BAE6FD !important;
  color: #0369A1 !important;
}

[data-theme="light"] #modal-supporter-ranked-badges .supporter-badge-card {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05) !important;
}

[data-theme="light"] #modal-supporter-ranked-badges .supporter-badge-card.current-rank {
  background: #F0F9FF !important;
}

[data-theme="light"] #modal-supporter-ranked-badges .codex-xp-box {
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
}

[data-theme="light"] #modal-supporter-ranked-badges .codex-xp-text {
  color: #0F172A !important;
}

[data-theme="light"] #modal-supporter-ranked-badges .codex-desc-text {
  color: #475569 !important;
}

[data-theme="light"] #modal-supporter-ranked-badges .modal-card > div:last-child {
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
}

/* ════════ YouTube Studio Ranks & Badges View in Light Mode ════════ */
[data-theme="light"] #sc-subtab-ranks {
  color: #0F172A !important;
}

[data-theme="light"] #sc-ranks-hero-banner {
  background: linear-gradient(135deg, rgba(241, 245, 249, 0.95), rgba(224, 242, 254, 0.7)) !important;
  border-color: #CBD5E1 !important;
  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.05) !important;
}

[data-theme="light"] #sc-ranks-hero-banner h3 {
  color: #0F172A !important;
}

[data-theme="light"] #sc-ranks-hero-banner p {
  color: #64748B !important;
}

[data-theme="light"] #sc-ranks-current-card {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] .sc-ranks-subnav-btn:not(.active) {
  background: #F1F5F9 !important;
  color: #475569 !important;
  border-color: #CBD5E1 !important;
}

[data-theme="light"] .sc-rank-card,
[data-theme="light"] .sc-badge-card {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05) !important;
}

[data-theme="light"] .sc-rank-card.current-rank {
  background: #F0F9FF !important;
  border-color: #38BDF8 !important;
}

[data-theme="light"] .sc-rank-card .codex-xp-box,
[data-theme="light"] .sc-badge-card .codex-xp-box {
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
}

[data-theme="light"] .sc-rank-card .codex-desc-text,
[data-theme="light"] .sc-badge-card .codex-desc-text {
  color: #475569 !important;
}

[data-theme="light"] .sc-rank-card .codex-xp-text,
[data-theme="light"] .sc-badge-card .codex-xp-text {
  color: #0F172A !important;
}

/* Super Chat Sender Panel & Dedicated Stream Preview Stage Light Mode */
[data-theme="light"] .sc-sender-panel {
  background: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
}

[data-theme="light"] .sc-creators-panel {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] #sc-supporter-name-input,
[data-theme="light"] #sc-message-input,
[data-theme="light"] #sc-creator-search-input {
  background: #F8FAFC !important;
  border: 1.5px solid #CBD5E1 !important;
  color: #0F172A !important;
}

[data-theme="light"] #sc-amount-dropdown {
  background: #F0FDF4 !important;
  border-color: #86EFAC !important;
  color: #15803D !important;
}

[data-theme="light"] #sc-supporter-progression-card {
  background: #F0F9FF !important;
  border-color: #BAE6FD !important;
  box-shadow: 0 2px 8px rgba(56, 189, 248, 0.08) !important;
}

[data-theme="light"] .sc-stream-preview-stage {
  background: #FFFFFF !important;
  border-color: #BAE6FD !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06) !important;
}

[data-theme="light"] .sc-stream-preview-stage h3 {
  color: #0F172A !important;
}

[data-theme="light"] .sc-stream-preview-stage span[style*="color: #94a3b8"] {
  color: #64748B !important;
}

/* ═══════════════════════════════════════════════════════════════════
   🎮 3D GAMING MASTERPIECE SUPER CHAT & VOICE FLARE CARDS ENGINE 🎮
   Ultra-High-End 3D Thematic Stream Overlay Alert Visualizer
   ═══════════════════════════════════════════════════════════════════ */

.sc-3d-gaming-card {
  position: relative;
  width: 100%;
  max-width: 620px;
  min-height: 125px;
  border-radius: 18px;
  padding: 16px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-sizing: border-box;
  overflow: visible;
  perspective: 1000px;
  transform-style: preserve-3d;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85);
}

/* 3D Sheen Sweep Animation */
.sc-3d-gaming-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  transform: skewX(-25deg);
  pointer-events: none;
  border-radius: 18px;
  animation: scLightSheen 4.5s ease-in-out infinite;
}

@keyframes scLightSheen {
  0% { left: -100%; opacity: 0; }
  20% { left: 160%; opacity: 1; }
  100% { left: 160%; opacity: 0; }
}

/* ── Top-Left Floating 3D Crest & Level Capsule ── */
.sc-3d-crest-wrap {
  position: absolute;
  top: -16px;
  left: 18px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 10;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.7));
}

.sc-3d-shield-badge {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 10px currentColor);
  animation: scShieldPulse 2.5s ease-in-out infinite alternate;
}

@keyframes scShieldPulse {
  0% { transform: scale(0.96) rotate(-2deg); }
  100% { transform: scale(1.06) rotate(2deg); }
}

.sc-3d-lvl-pill {
  background: #090d16;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.5px;
  text-transform: lowercase;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.8), inset 0 1px 3px rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── Main Message / Voice Visualizer Section ── */
.sc-3d-card-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding-top: 6px;
  z-index: 2;
}

.sc-3d-says-tag {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.sc-3d-message-display {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14.5px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.42;
  word-break: break-word;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), 0 0 2px rgba(0, 0, 0, 0.9);
}

/* ── Voice Waveform Equalizer Display ── */
.sc-3d-waveform-display {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 38px;
  padding: 4px 0;
}

.sc-wave-bar {
  width: 4px;
  height: 10px;
  border-radius: 4px;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
  animation: scWaveBounce 1.2s ease-in-out infinite alternate;
}

.sc-wave-bar:nth-child(2) { animation-delay: 0.1s; height: 18px; }
.sc-wave-bar:nth-child(3) { animation-delay: 0.25s; height: 26px; }
.sc-wave-bar:nth-child(4) { animation-delay: 0.15s; height: 32px; }
.sc-wave-bar:nth-child(5) { animation-delay: 0.35s; height: 16px; }
.sc-wave-bar:nth-child(6) { animation-delay: 0.05s; height: 28px; }
.sc-wave-bar:nth-child(7) { animation-delay: 0.3s; height: 36px; }
.sc-wave-bar:nth-child(8) { animation-delay: 0.2s; height: 22px; }
.sc-wave-bar:nth-child(9) { animation-delay: 0.4s; height: 30px; }
.sc-wave-bar:nth-child(10) { animation-delay: 0.12s; height: 14px; }

@keyframes scWaveBounce {
  0% { transform: scaleY(0.35); opacity: 0.6; }
  100% { transform: scaleY(1.2); opacity: 1; filter: brightness(1.3); }
}

/* ── Vertical Glowing Laser Divider ── */
.sc-3d-laser-divider {
  width: 2px;
  align-self: stretch;
  background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.6) 70%, transparent 100%);
  box-shadow: 0 0 12px currentColor;
  margin: 0 4px;
  opacity: 0.75;
}

/* ── Right Supporter & Amount Section ── */
.sc-3d-right-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  min-width: 140px;
  flex-shrink: 0;
  z-index: 2;
}

.sc-3d-sent-by-text {
  font-size: 9.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  opacity: 0.9;
}

.sc-3d-sender-name {
  font-size: 15px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 155px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

.sc-3d-amount-tag {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.3px;
  text-shadow: 0 0 14px currentColor, 0 2px 4px rgba(0, 0, 0, 0.9);
  line-height: 1.1;
  margin-top: 1px;
}

/* ═══════════════════════════════════════════════════════════════════
   🎨 10 AUTHENTIC 3D THEMATIC CARD SKINS 🎨
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. TIER 1: 3D CYBER IRON SCOUT (LVL 1-5) ── */
.sc-theme-tier1 {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0b1120 100%);
  border: 2.5px solid #38bdf8;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.8), 0 0 22px rgba(56, 189, 248, 0.4), inset 0 0 16px rgba(56, 189, 248, 0.15);
  color: #38bdf8;
}
.sc-theme-tier1 .sc-3d-lvl-pill { border-color: #38bdf8; color: #7dd3fc; }
.sc-theme-tier1 .sc-3d-says-tag { color: #38bdf8; }
.sc-theme-tier1 .sc-3d-sent-by-text { color: #7dd3fc; }
.sc-theme-tier1 .sc-3d-amount-tag { color: #38bdf8; }

/* ── 2. TIER 2: 3D BRONZE GLADIATOR (LVL 6-15) ── */
.sc-theme-tier2 {
  background: linear-gradient(135deg, #1c130c 0%, #2d1a0d 50%, #140c06 100%);
  border: 2.5px solid #f97316;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.8), 0 0 24px rgba(249, 115, 22, 0.45), inset 0 0 16px rgba(249, 115, 22, 0.2);
  color: #f97316;
}
.sc-theme-tier2 .sc-3d-lvl-pill { border-color: #f97316; color: #fdba74; }
.sc-theme-tier2 .sc-3d-says-tag { color: #f97316; }
.sc-theme-tier2 .sc-3d-sent-by-text { color: #fdba74; }
.sc-theme-tier2 .sc-3d-amount-tag { color: #f97316; }

/* ── 3. TIER 3: 3D SILVER VANGUARD (LVL 16-30) ── */
.sc-theme-tier3 {
  background: linear-gradient(135deg, #0c1829 0%, #172a45 50%, #08101d 100%);
  border: 2.5px solid #60a5fa;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.8), 0 0 26px rgba(96, 165, 250, 0.5), inset 0 0 18px rgba(96, 165, 250, 0.22);
  color: #60a5fa;
}
.sc-theme-tier3 .sc-3d-lvl-pill { border-color: #60a5fa; color: #93c5fd; }
.sc-theme-tier3 .sc-3d-says-tag { color: #60a5fa; }
.sc-theme-tier3 .sc-3d-sent-by-text { color: #93c5fd; }
.sc-theme-tier3 .sc-3d-amount-tag { color: #60a5fa; }

/* ── 4. TIER 4: 3D GOLD SENTINEL (LVL 31-45) ── */
.sc-theme-tier4 {
  background: linear-gradient(135deg, #1f1604 0%, #352507 50%, #171003 100%);
  border: 2.5px solid #fbbf24;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.85), 0 0 30px rgba(251, 191, 36, 0.55), inset 0 0 20px rgba(251, 191, 36, 0.25);
  color: #fbbf24;
}
.sc-theme-tier4 .sc-3d-lvl-pill { border-color: #fbbf24; color: #fde68a; }
.sc-theme-tier4 .sc-3d-says-tag { color: #fbbf24; }
.sc-theme-tier4 .sc-3d-sent-by-text { color: #fde68a; }
.sc-theme-tier4 .sc-3d-amount-tag { color: #fbbf24; }

/* ── 5. TIER 5: 3D BIOHAZARD TOXIC ACID SLIME (LVL 46-60) [IMAGE 2 STYLE] ── */
.sc-theme-tier5 {
  background: linear-gradient(135deg, #07190b 0%, #0d2813 50%, #041006 100%);
  border: 3px solid #22c55e;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9), 0 0 38px rgba(34, 197, 94, 0.65), inset 0 0 24px rgba(34, 197, 94, 0.35);
  color: #22c55e;
}
.sc-theme-tier5::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 22px;
  border: 1.5px dashed rgba(74, 222, 128, 0.6);
  pointer-events: none;
  filter: drop-shadow(0 0 6px #22c55e);
  animation: scSlimePulse 3s ease-in-out infinite alternate;
}
@keyframes scSlimePulse {
  0% { transform: scale(0.995); opacity: 0.6; }
  100% { transform: scale(1.015); opacity: 1; }
}
.sc-theme-tier5 .sc-3d-lvl-pill { border-color: #22c55e; color: #86efac; box-shadow: 0 0 12px rgba(34, 197, 94, 0.4); }
.sc-theme-tier5 .sc-3d-says-tag { color: #a3e635; font-weight: 900; }
.sc-theme-tier5 .sc-3d-sent-by-text { color: #86efac; }
.sc-theme-tier5 .sc-3d-amount-tag { color: #22c55e; text-shadow: 0 0 18px #22c55e, 0 2px 4px #000; }

/* ── 6. TIER 6: 3D GLACIER FROST ICE SHARDS (LVL 61-75) [IMAGE 1 STYLE] ── */
.sc-theme-tier6 {
  background: linear-gradient(135deg, #041829 0%, #092c48 50%, #03101c 100%);
  border: 3px solid #00e5ff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9), 0 0 40px rgba(0, 229, 255, 0.7), inset 0 0 26px rgba(0, 229, 255, 0.38);
  color: #00e5ff;
}
.sc-theme-tier6::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 22px;
  border: 1.5px solid rgba(0, 229, 255, 0.65);
  pointer-events: none;
  filter: drop-shadow(0 0 8px #00e5ff);
  animation: scFrostGlint 3s ease-in-out infinite alternate;
}
@keyframes scFrostGlint {
  0% { transform: scale(0.995); opacity: 0.7; }
  100% { transform: scale(1.015); opacity: 1; filter: drop-shadow(0 0 14px #00e5ff); }
}
.sc-theme-tier6 .sc-3d-lvl-pill { border-color: #00e5ff; color: #a5f3fc; box-shadow: 0 0 14px rgba(0, 229, 255, 0.5); }
.sc-theme-tier6 .sc-3d-says-tag { color: #38bdf8; font-weight: 900; }
.sc-theme-tier6 .sc-3d-sent-by-text { color: #7dd3fc; }
.sc-theme-tier6 .sc-3d-amount-tag { color: #00e5ff; text-shadow: 0 0 18px #00e5ff, 0 2px 4px #000; }

/* ── 7. TIER 7: 3D DRAGON MAGMA INFERNO (LVL 76-85) ── */
.sc-theme-tier7 {
  background: linear-gradient(135deg, #220606 0%, #3b0d0d 50%, #150303 100%);
  border: 3px solid #ef4444;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9), 0 0 42px rgba(239, 68, 68, 0.75), inset 0 0 26px rgba(239, 68, 68, 0.4);
  color: #ef4444;
}
.sc-theme-tier7 .sc-3d-lvl-pill { border-color: #ef4444; color: #fca5a5; }
.sc-theme-tier7 .sc-3d-says-tag { color: #f97316; }
.sc-theme-tier7 .sc-3d-sent-by-text { color: #fca5a5; }
.sc-theme-tier7 .sc-3d-amount-tag { color: #ef4444; text-shadow: 0 0 20px #ef4444, 0 2px 4px #000; }

/* ── 8. TIER 8: 3D CYBERPUNK HOLO-MECHA (LVL 86-94) ── */
.sc-theme-tier8 {
  background: linear-gradient(135deg, #180624 0%, #290d3d 50%, #100318 100%);
  border: 3px solid #c084fc;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9), 0 0 44px rgba(192, 132, 252, 0.75), inset 0 0 26px rgba(192, 132, 252, 0.4);
  color: #c084fc;
}
.sc-theme-tier8 .sc-3d-lvl-pill { border-color: #c084fc; color: #e9d5ff; }
.sc-theme-tier8 .sc-3d-says-tag { color: #c084fc; }
.sc-theme-tier8 .sc-3d-sent-by-text { color: #e9d5ff; }
.sc-theme-tier8 .sc-3d-amount-tag { color: #c084fc; text-shadow: 0 0 20px #c084fc, 0 2px 4px #000; }

/* ── 9. TIER 9: 3D COSMIC VOID NEBULA (LVL 95-98) ── */
.sc-theme-tier9 {
  background: linear-gradient(135deg, #120326 0%, #200742 50%, #0a0117 100%);
  border: 3px solid #e879f9;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.95), 0 0 48px rgba(232, 121, 249, 0.8), inset 0 0 28px rgba(232, 121, 249, 0.45);
  color: #e879f9;
}
.sc-theme-tier9 .sc-3d-lvl-pill { border-color: #e879f9; color: #f5d0fe; }
.sc-theme-tier9 .sc-3d-says-tag { color: #e879f9; }
.sc-theme-tier9 .sc-3d-sent-by-text { color: #f5d0fe; }
.sc-theme-tier9 .sc-3d-amount-tag { color: #e879f9; text-shadow: 0 0 22px #e879f9, 0 2px 4px #000; }

/* ── 10. TIER 10: 3D SOVEREIGN GOD-MODE PROTOCOL (LVL 99-100) ── */
.sc-theme-tier10 {
  background: linear-gradient(135deg, #241802 0%, #422d05 50%, #170f01 100%);
  border: 3.5px solid #fde047;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.95), 0 0 55px rgba(253, 224, 71, 0.85), inset 0 0 32px rgba(253, 224, 71, 0.5);
  color: #fde047;
}
.sc-theme-tier10::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 24px;
  border: 2px solid rgba(253, 224, 71, 0.7);
  pointer-events: none;
  filter: drop-shadow(0 0 12px #fde047);
  animation: scGodRayRotate 4s ease-in-out infinite alternate;
}
@keyframes scGodRayRotate {
  0% { transform: scale(0.99); filter: drop-shadow(0 0 8px #fde047); }
  100% { transform: scale(1.02); filter: drop-shadow(0 0 20px #fde047); }
}
.sc-theme-tier10 .sc-3d-lvl-pill { border-color: #fde047; color: #fef08a; box-shadow: 0 0 16px rgba(253, 224, 71, 0.6); }
.sc-theme-tier10 .sc-3d-says-tag { color: #fde047; font-weight: 900; }
.sc-theme-tier10 .sc-3d-sent-by-text { color: #fef08a; }
.sc-theme-tier10 .sc-3d-amount-tag { color: #fde047; text-shadow: 0 0 24px #fde047, 0 2px 4px #000; }

/* ═══════════════════════════════════════════════════════════════════
   🎬 ULTRA-DYNAMIC 3D POPUP ENTRANCE ANIMATIONS 🎬
   ═══════════════════════════════════════════════════════════════════ */

/* 1. Cyber Drop */
.sc-anim-cyber-drop {
  animation: scCyberDropAnim 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes scCyberDropAnim {
  0% { transform: perspective(1000px) translateY(-80px) rotateX(45deg) scale(0.7); opacity: 0; }
  60% { transform: perspective(1000px) translateY(10px) rotateX(-10deg) scale(1.04); opacity: 1; }
  100% { transform: perspective(1000px) translateY(0) rotateX(0deg) scale(1); opacity: 1; }
}

/* 2. Frost Ice Shatter */
.sc-anim-frost-shatter {
  animation: scFrostShatterAnim 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes scFrostShatterAnim {
  0% { transform: perspective(1000px) scale(0.5) rotateZ(-6deg); opacity: 0; filter: blur(10px) brightness(2.5); }
  60% { transform: perspective(1000px) scale(1.08) rotateZ(2deg); opacity: 1; filter: blur(0px) brightness(1.3); }
  100% { transform: perspective(1000px) scale(1) rotateZ(0deg); opacity: 1; filter: brightness(1); }
}

/* 3. Slime Acid Burst */
.sc-anim-slime-burst {
  animation: scSlimeBurstAnim 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.35) forwards;
}
@keyframes scSlimeBurstAnim {
  0% { transform: perspective(1000px) scaleY(0.2) scaleX(1.4) translateY(60px); opacity: 0; }
  50% { transform: perspective(1000px) scaleY(1.15) scaleX(0.9) translateY(-15px); opacity: 1; }
  75% { transform: perspective(1000px) scaleY(0.95) scaleX(1.03) translateY(4px); opacity: 1; }
  100% { transform: perspective(1000px) scale(1) translateY(0); opacity: 1; }
}

/* 4. Meteor Slam */
.sc-anim-meteor-slam {
  animation: scMeteorSlamAnim 0.65s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes scMeteorSlamAnim {
  0% { transform: perspective(1000px) translateY(-140px) scale(1.3); opacity: 0; filter: brightness(3); }
  70% { transform: perspective(1000px) translateY(8px) scale(0.97); opacity: 1; filter: brightness(1.4); }
  100% { transform: perspective(1000px) translateY(0) scale(1); opacity: 1; filter: brightness(1); }
}

/* 5. Divine God Ascend */
.sc-anim-god-ascend {
  animation: scGodAscendAnim 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes scGodAscendAnim {
  0% { transform: perspective(1000px) scale(0.4) rotateY(40deg); opacity: 0; filter: drop-shadow(0 0 50px #fde047); }
  60% { transform: perspective(1000px) scale(1.06) rotateY(-8deg); opacity: 1; filter: drop-shadow(0 0 35px #fde047); }
  100% { transform: perspective(1000px) scale(1) rotateY(0deg); opacity: 1; filter: drop-shadow(0 0 20px #fde047); }
}

/* 6. Holo Hologram Warp */
.sc-anim-holo-warp {
  animation: scHoloWarpAnim 0.75s ease-out forwards;
}
@keyframes scHoloWarpAnim {
  0% { transform: perspective(1000px) scaleX(0.05) scaleY(1.8); opacity: 0; filter: hue-rotate(90deg) contrast(2); }
  45% { transform: perspective(1000px) scaleX(1.1) scaleY(0.9); opacity: 0.9; }
  100% { transform: perspective(1000px) scale(1); opacity: 1; filter: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   🎙️ STREAM AI VOICE & 🎭 EMOTION MOOD ENGINE STYLES
   ═══════════════════════════════════════════════════════════════════════════════ */
.sc-voice-section {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 14px;
}

[data-theme="light"] .sc-voice-section {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

.sc-voice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.sc-voice-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.sc-voice-chip:hover {
  background: rgba(56, 189, 248, 0.1);
  border-color: rgba(56, 189, 248, 0.4);
  transform: translateY(-1px);
}

.sc-voice-chip.active {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(168, 85, 247, 0.2));
  border-color: #38bdf8;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.35);
}

.sc-voice-chip-icon {
  font-size: 16px;
  line-height: 1;
}

.sc-voice-chip-name {
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
}

.sc-voice-chip-desc {
  font-size: 9px;
  font-weight: 600;
  color: #94a3b8;
}

[data-theme="light"] .sc-voice-chip {
  background: #F8FAFC !important;
  border-color: #CBD5E1 !important;
}

[data-theme="light"] .sc-voice-chip.active {
  background: #EFF6FF !important;
  border-color: #2563EB !important;
  box-shadow: 0 0 12px rgba(37, 99, 235, 0.2) !important;
}

[data-theme="light"] .sc-voice-chip-name {
  color: #0F172A !important;
}

[data-theme="light"] .sc-voice-chip-desc {
  color: #64748B !important;
}

/* 🎭 Stream Emotion Mood Grid */
.sc-mood-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.sc-mood-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 800;
  color: #cbd5e1;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.sc-mood-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
  transform: scale(1.03);
}

.sc-mood-pill.active {
  transform: scale(1.05);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.sc-mood-pill[data-mood="laughing"].active {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border-color: #fbbf24;
  color: #000;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.45);
}

.sc-mood-pill[data-mood="crying"].active {
  background: linear-gradient(135deg, #0284c7, #0369a1);
  border-color: #38bdf8;
  color: #fff;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.45);
}

.sc-mood-pill[data-mood="romantic"].active {
  background: linear-gradient(135deg, #ec4899, #be185d);
  border-color: #f472b6;
  color: #fff;
  box-shadow: 0 0 16px rgba(236, 72, 153, 0.45);
}

.sc-mood-pill[data-mood="seductive"].active {
  background: linear-gradient(135deg, #e11d48, #9f1239);
  border-color: #fb7185;
  color: #fff;
  box-shadow: 0 0 18px rgba(225, 29, 72, 0.55);
}

.sc-mood-pill[data-mood="hype"].active {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  border-color: #a78bfa;
  color: #fff;
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.45);
}

.sc-mood-pill[data-mood="shocked"].active {
  background: linear-gradient(135deg, #a855f7, #7e22ce);
  border-color: #c084fc;
  color: #fff;
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.5);
}

.sc-mood-pill[data-mood="angry"].active {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  border-color: #f87171;
  color: #fff;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.55);
}

.sc-mood-pill[data-mood="happy"].active {
  background: linear-gradient(135deg, #10b981, #059669);
  border-color: #34d399;
  color: #fff;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.5);
}

.sc-mood-pill[data-mood="robot"].active {
  background: linear-gradient(135deg, #06b6d4, #0891b2);
  border-color: #22d3ee;
  color: #000;
  box-shadow: 0 0 16px rgba(6, 182, 212, 0.45);
}

.sc-mood-pill[data-mood="hero"].active {
  background: linear-gradient(135deg, #eab308, #ca8a04);
  border-color: #fde047;
  color: #000;
  box-shadow: 0 0 16px rgba(234, 179, 8, 0.5);
}

[data-theme="light"] .sc-mood-pill {
  background: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
  color: #334155 !important;
}

/* 🔊 Test Voice & Audio Listening Button */
.sc-audio-test-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  margin-top: 10px;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.15), rgba(168, 85, 247, 0.18));
  border: 1.5px solid rgba(56, 189, 248, 0.4);
  border-radius: 10px;
  color: #38bdf8;
  font-size: 11.5px;
  font-weight: 900;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 10px rgba(56, 189, 248, 0.15);
}

.sc-audio-test-btn:hover {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.3), rgba(168, 85, 247, 0.3));
  border-color: #38bdf8;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(56, 189, 248, 0.35);
}

.sc-audio-test-btn.playing {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  border-color: #34d399 !important;
  color: #fff !important;
  animation: scAudioPulse 1s infinite alternate;
}

@keyframes scAudioPulse {
  0% { box-shadow: 0 0 10px rgba(16, 185, 129, 0.4); }
  100% { box-shadow: 0 0 22px rgba(16, 185, 129, 0.8); }
}

[data-theme="light"] .sc-audio-test-btn {
  background: #F0F9FF !important;
  border-color: #0284C7 !important;
  color: #0284C7 !important;
}

[data-theme="light"] .sc-audio-test-btn:hover {
  background: #0284C7 !important;
  color: #FFFFFF !important;
}

/* 3D Mood Tag on Overlay Card */
.sc-3d-mood-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fde047;
  letter-spacing: 0.3px;
  margin-left: 6px;
}

/* ==========================================================================
   Light Mode Overrides: Audit Logs & Leveling Difficulty Preview
   ========================================================================== */
[data-theme="light"] #audit-logs-container > div {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] #audit-logs-container > div div[style*="font-size: 13px"],
[data-theme="light"] #audit-logs-container > div div[style*="font-size:13px"],
[data-theme="light"] #audit-logs-container > div div[style*="color: #f1f5f9"],
[data-theme="light"] #audit-logs-container > div div[style*="color:#f1f5f9"] {
  color: #0F172A !important;
}

[data-theme="light"] div:has(> #lvl-calc-grid),
[data-theme="light"] #inline-plugin-body div[style*="background: rgba(17,18,24"],
[data-theme="light"] #inline-plugin-body div[style*="background:rgba(17,18,24"] {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}

[data-theme="light"] #lvl-calc-grid > div {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] #lvl-calc-grid > div div[style*="color: #fff"],
[data-theme="light"] #lvl-calc-grid > div div[style*="color:#fff"] {
  color: #0F172A !important;
}

[data-theme="light"] #lvl-calc-grid > div div[style*="color: #a1a1aa"],
[data-theme="light"] #lvl-calc-grid > div div[style*="color:#a1a1aa"] {
  color: #64748B !important;
}

[data-theme="light"] #lvl-calc-grid > div div[style*="color: #fbbf24"],
[data-theme="light"] #lvl-calc-grid > div div[style*="color:#fbbf24"] {
  color: #D97706 !important;
}

/* ==========================================================================
/* ==========================================================================
   YouTube Super Chat Voice Studio: Voice Gender & Mood Engine
   ========================================================================== */
.sc-voice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

.sc-voice-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.sc-voice-chip:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(56, 189, 248, 0.5);
  transform: translateY(-1px);
}

.sc-voice-chip.active {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.22), rgba(168, 85, 247, 0.22)) !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.4) !important;
}

.sc-voice-chip.active[data-voice="uzma"] {
  background: linear-gradient(135deg, rgba(244, 114, 182, 0.22), rgba(236, 72, 153, 0.22)) !important;
  border-color: #f472b6 !important;
  box-shadow: 0 0 16px rgba(244, 114, 182, 0.4) !important;
}

.sc-voice-chip-icon {
  font-size: 22px;
  flex-shrink: 0;
  line-height: 1;
}

.sc-voice-chip-title {
  font-size: 12px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
}

.sc-voice-chip-sub {
  font-size: 9.5px;
  font-weight: 600;
  color: #94a3b8;
  margin-top: 2px;
}

.sc-voice-chip.active .sc-voice-chip-title {
  color: #38bdf8;
}

.sc-voice-chip.active[data-voice="uzma"] .sc-voice-chip-title {
  color: #f472b6;
}

/* Light Mode Overrides: YouTube Super Chat Voice Studio */
[data-theme="light"] .sc-voice-chip {
  background: #FFFFFF !important;
  border: 1.5px solid #CBD5E1 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}

[data-theme="light"] .sc-voice-chip:hover {
  background: #F8FAFC !important;
  border-color: #38bdf8 !important;
}

[data-theme="light"] .sc-voice-chip .sc-voice-chip-title {
  color: #0F172A !important;
}

[data-theme="light"] .sc-voice-chip .sc-voice-chip-sub {
  color: #64748B !important;
}

[data-theme="light"] .sc-voice-chip.active {
  background: #F0F9FF !important;
  border-color: #0284C7 !important;
  box-shadow: 0 0 14px rgba(2, 132, 199, 0.2) !important;
}

[data-theme="light"] .sc-voice-chip.active .sc-voice-chip-title {
  color: #0369A1 !important;
}

[data-theme="light"] .sc-voice-chip.active[data-voice="uzma"] {
  background: #FDF2F8 !important;
  border-color: #DB2777 !important;
  box-shadow: 0 0 14px rgba(219, 39, 119, 0.2) !important;
}

[data-theme="light"] .sc-voice-chip.active[data-voice="uzma"] .sc-voice-chip-title {
  color: #BE185D !important;
}

[data-theme="light"] .sc-mood-pill {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
}

[data-theme="light"] .sc-mood-pill:hover {
  background: #F1F5F9 !important;
  border-color: #94A3B8 !important;
}

[data-theme="light"] .sc-mood-pill.active {
  background: #0F172A !important;
  color: #FFFFFF !important;
  border-color: #0F172A !important;
}

[data-theme="light"] .sc-3d-mood-badge {
  background: rgba(15, 23, 42, 0.08) !important;
  border: 1px solid rgba(15, 23, 42, 0.15) !important;
  color: #B45309 !important;
}

/* 🪄 Main AI Enhance Dialogue Trigger Button */
.sc-enhance-dialogue-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 9999px;
  border: 1px solid rgba(168, 85, 247, 0.4);
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(59, 130, 246, 0.15));
  color: #E2E8F0;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(168, 85, 247, 0.2);
  outline: none;
}

.sc-enhance-dialogue-btn:hover {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.35), rgba(59, 130, 246, 0.25));
  border-color: #C084FC;
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.4);
}

.sc-enhance-sparkle-pill {
  background: linear-gradient(135deg, #A855F7, #EC4899);
  color: #FFFFFF;
  font-size: 9px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 9999px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* Light Mode Overrides for Main Enhance Button */
[data-theme="light"] .sc-enhance-dialogue-btn {
  background: #FAF5FF !important;
  border: 1.5px solid #D8B4FE !important;
  color: #7E22CE !important;
  box-shadow: 0 1px 4px rgba(147, 51, 234, 0.15) !important;
}

[data-theme="light"] .sc-enhance-dialogue-btn:hover {
  background: #F3E8FF !important;
  border-color: #A855F7 !important;
  color: #6B21A8 !important;
  box-shadow: 0 3px 10px rgba(147, 51, 234, 0.25) !important;
}

.sc-enhanced-box {
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.85), rgba(30, 41, 59, 0.75));
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.45), 0 0 16px rgba(56, 189, 248, 0.1);
  backdrop-filter: blur(12px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sc-enhanced-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-wrap: wrap;
}

.sc-enhanced-tag {
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.18), rgba(249, 115, 22, 0.18));
  border: 1px solid rgba(234, 179, 8, 0.45);
  color: #FDE047;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 6px rgba(234, 179, 8, 0.15);
  letter-spacing: 0.2px;
}

/* 🔘 Modern Action Mini Buttons (Re-Enhance & Reset) */
.sc-enhanced-mini-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 8px;
  border: 1px solid rgba(56, 189, 248, 0.35);
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.15), rgba(14, 165, 233, 0.1));
  color: #38BDF8;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  outline: none;
}

.sc-enhanced-mini-btn:hover {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.25), rgba(14, 165, 233, 0.2));
  border-color: #38BDF8;
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.3);
}

.sc-enhanced-mini-btn:active {
  transform: translateY(0);
}

.sc-enhanced-mini-btn.reset {
  border: 1px solid rgba(244, 63, 94, 0.35);
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.12), rgba(225, 29, 72, 0.08));
  color: #FB7185;
}

.sc-enhanced-mini-btn.reset:hover {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.22), rgba(225, 29, 72, 0.18));
  border-color: #FB7185;
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(244, 63, 94, 0.3);
}

/* 🎛️ Dual-Mode Tab Switcher (Spoken Audio vs Stream Display) */
.sc-enhanced-tabs {
  display: flex;
  background: rgba(0, 0, 0, 0.35);
  padding: 4px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  gap: 6px;
  margin-bottom: 10px;
}

.sc-enhanced-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 7px;
  border: 1px solid transparent;
  background: transparent;
  color: #94A3B8;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
}

.sc-enhanced-tab:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #F1F5F9;
}

.sc-enhanced-tab.active {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.25), rgba(14, 165, 233, 0.35));
  border: 1px solid rgba(56, 189, 248, 0.55);
  color: #FFFFFF;
  box-shadow: 0 2px 10px rgba(56, 189, 248, 0.25);
}

#sc-tab-btn-display.sc-enhanced-tab.active {
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.25), rgba(16, 185, 129, 0.35));
  border: 1px solid rgba(52, 211, 153, 0.55);
  color: #FFFFFF;
  box-shadow: 0 2px 10px rgba(52, 211, 153, 0.25);
}

/* 💡 Suggestion Banner & Auto-Tune Button */
.sc-suggestion-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(56, 189, 248, 0.12));
  border: 1px dashed rgba(168, 85, 247, 0.35);
  border-radius: 10px;
}

.sc-suggestion-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 800;
  border-radius: 8px;
  border: none;
  background: linear-gradient(135deg, #A855F7, #6366F1);
  color: #FFFFFF;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(168, 85, 247, 0.35);
  outline: none;
  white-space: nowrap;
}

.sc-suggestion-btn:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.5);
  opacity: 0.95;
}

/* ==========================================================================
   ☀️ Light Theme Support for Dialogue Expression Studio
   ========================================================================== */

[data-theme="light"] .sc-enhanced-box {
  background: #FFFFFF !important;
  border: 1.5px solid #E2E8F0 !important;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.07) !important;
}

[data-theme="light"] .sc-enhanced-header {
  border-bottom: 1px solid #E2E8F0 !important;
}

[data-theme="light"] .sc-enhanced-tag {
  background: #FEF3C7 !important;
  border-color: #FCD34D !important;
  color: #B45309 !important;
}

[data-theme="light"] .sc-enhanced-mini-btn {
  background: #F0F9FF !important;
  border: 1.5px solid #BAE6FD !important;
  color: #0284C7 !important;
  box-shadow: 0 1px 3px rgba(2, 132, 199, 0.1) !important;
}

[data-theme="light"] .sc-enhanced-mini-btn:hover {
  background: #E0F2FE !important;
  border-color: #0284C7 !important;
  color: #0369A1 !important;
  box-shadow: 0 3px 8px rgba(2, 132, 199, 0.2) !important;
}

[data-theme="light"] .sc-enhanced-mini-btn.reset {
  background: #FFF1F2 !important;
  border: 1.5px solid #FECDD3 !important;
  color: #E11D48 !important;
  box-shadow: 0 1px 3px rgba(225, 29, 72, 0.1) !important;
}

[data-theme="light"] .sc-enhanced-mini-btn.reset:hover {
  background: #FFE4E6 !important;
  border-color: #E11D48 !important;
  color: #BE123C !important;
  box-shadow: 0 3px 8px rgba(225, 29, 72, 0.2) !important;
}

[data-theme="light"] .sc-enhanced-tabs {
  background: #F1F5F9 !important;
  border: 1px solid #E2E8F0 !important;
}

[data-theme="light"] .sc-enhanced-tab {
  color: #64748B !important;
}

[data-theme="light"] .sc-enhanced-tab:hover {
  background: #E2E8F0 !important;
  color: #0F172A !important;
}

[data-theme="light"] .sc-enhanced-tab.active {
  background: #FFFFFF !important;
  border: 1.5px solid #0284C7 !important;
  color: #0369A1 !important;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.15) !important;
}

[data-theme="light"] #sc-tab-btn-display.sc-enhanced-tab.active {
  background: #FFFFFF !important;
  border: 1.5px solid #059669 !important;
  color: #047857 !important;
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.15) !important;
}

[data-theme="light"] #sc-spoken-script-input,
[data-theme="light"] #sc-display-text-input {
  background: #FFFFFF !important;
  border: 1.5px solid #CBD5E1 !important;
  color: #0F172A !important;
}

[data-theme="light"] #sc-spoken-script-input:focus,
[data-theme="light"] #sc-display-text-input:focus {
  border-color: #9333EA !important;
  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.15) !important;
}

[data-theme="light"] .sc-suggestion-banner {
  background: #FAF5FF !important;
  border: 1px dashed #C084FC !important;
}

[data-theme="light"] #sc-suggestion-text {
  color: #581C87 !important;
}

[data-theme="light"] .sc-suggestion-btn {
  background: linear-gradient(135deg, #9333EA, #4F46E5) !important;
  box-shadow: 0 2px 8px rgba(147, 51, 234, 0.3) !important;
}

/* ==========================================================================
   ☀️ Light Theme Overrides: Audit Logs, Leveling Preview, Auto-Role, Support Tickets
   ========================================================================== */

/* Audit Logs Container & Description Invisibility Fix */
[data-theme="light"] #audit-logs-container > div {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] #audit-logs-container > div div[style*="font-size: 13px"],
[data-theme="light"] #audit-logs-container > div div[style*="font-size:13px"],
[data-theme="light"] #audit-logs-container > div div[style*="color: #f1f5f9"],
[data-theme="light"] #audit-logs-container > div div[style*="color:#f1f5f9"],
[data-theme="light"] #audit-logs-container > div div[style*="color: #ffffff"],
[data-theme="light"] #audit-logs-container > div div[style*="color:#ffffff"] {
  color: #0F172A !important;
}

/* Leveling Difficulty Preview Box in Light Mode */
[data-theme="light"] div:has(> #lvl-calc-grid),
[data-theme="light"] #inline-plugin-body div[style*="background: rgba(17,18,24"],
[data-theme="light"] #inline-plugin-body div[style*="background:rgba(17,18,24"] {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}

[data-theme="light"] #lvl-calc-grid > div {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] #lvl-calc-grid > div div[style*="color: #fff"],
[data-theme="light"] #lvl-calc-grid > div div[style*="color:#fff"] {
  color: #0F172A !important;
}

[data-theme="light"] #lvl-calc-grid > div div[style*="color: #a1a1aa"],
[data-theme="light"] #lvl-calc-grid > div div[style*="color:#a1a1aa"] {
  color: #64748B !important;
}

[data-theme="light"] #lvl-calc-grid > div div[style*="color: #fbbf24"],
[data-theme="light"] #lvl-calc-grid > div div[style*="color:#fbbf24"] {
  color: #D97706 !important;
}

/* Auto-Role Timing & Option Cards in Light Mode */
[data-theme="light"] #tab-autorole label,
[data-theme="light"] #inline-plugin-body label[style*="background: rgba(88,101,242"],
[data-theme="light"] #inline-plugin-body label[style*="background:rgba(88,101,242"] {
  background: #F8FAFC !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}

[data-theme="light"] #tab-autorole label div[style*="color: #fff"],
[data-theme="light"] #tab-autorole label div[style*="color:#fff"] {
  color: #0F172A !important;
}

[data-theme="light"] #tab-autorole label div[style*="color: #94a3b8"],
[data-theme="light"] #tab-autorole label div[style*="color:#94a3b8"] {
  color: #64748B !important;
}

/* ═══════════════════════════════════════════════════════════════
   WALLET & DEPOSIT PILL & MODAL STYLES (LIGHT / DARK THEME)
   ═══════════════════════════════════════════════════════════════ */
.sc-hdr-wallet-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(56, 189, 248, 0.35);
  border-color: #38bdf8 !important;
}

.sc-wallet-add-btn:hover {
  background: #7dd3fc !important;
  transform: scale(1.04);
}

.dep-amt-btn:hover {
  border-color: #38bdf8 !important;
  color: #fff !important;
}

.dep-gw-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.sc-payment-card:hover {
  border-color: #38bdf8 !important;
  transform: translateY(-1px);
}

[data-theme="light"] .sc-hdr-wallet-pill {
  background: #F0F9FF !important;
  border-color: #BAE6FD !important;
}

[data-theme="light"] .sc-hdr-wallet-pill #header-wallet-balance-val {
  color: #0284C7 !important;
}

[data-theme="light"] #modal-wallet-deposit > div,
[data-theme="light"] #modal-paid-prank-confirm > div {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

[data-theme="light"] #modal-wallet-deposit h3,
[data-theme="light"] #modal-paid-prank-confirm h3 {
  color: #0F172A !important;
}

[data-theme="light"] #modal-wallet-deposit input[type="number"] {
  background: #F8FAFC !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}

/* Super Chat Payment Gateway Grid Responsive Styling */
@media (max-width: 680px) {
  .sc-payment-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ⚡ NEXT-GEN CYBERPUNK SUPER CHAT & LIVE STREAM STUDIO PRO ⚡
   ═══════════════════════════════════════════════════════════════════ */

.sc-modern-studio-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(360px, 1fr);
  gap: 22px;
  align-items: start;
}

@media (max-width: 1100px) {
  .sc-modern-studio-layout {
    grid-template-columns: 1fr;
  }
}

.sc-studio-card {
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  position: relative;
  overflow: hidden;
}

.sc-studio-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.6), rgba(168, 85, 247, 0.6), transparent);
}

.sc-sticky-obs-stage {
  position: sticky;
  top: 24px;
  z-index: 10;
}

/* 🎯 Streamer Hero Header Bar */
.sc-creator-hero-bar {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(56, 189, 248, 0.08), rgba(15, 23, 42, 0.6));
  border: 1.5px solid rgba(16, 185, 129, 0.3);
  border-radius: 16px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.sc-creator-hero-bar:hover {
  border-color: rgba(16, 185, 129, 0.5);
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.15);
}

.sc-avatar-live-pulse {
  position: relative;
}

.sc-avatar-live-pulse::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid #ef4444;
  animation: scLiveRadarPulse 2s cubic-bezier(0.24, 0, 0.38, 1) infinite;
  pointer-events: none;
}

@keyframes scLiveRadarPulse {
  0% { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* 🎮 Super Chat Tier Chips Grid */
.sc-tier-chips-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.sc-amount-pill {
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: #cbd5e1;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  gap: 2px;
  user-select: none;
}

.sc-amount-pill:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(56, 189, 248, 0.4);
  transform: translateY(-2px);
}

.sc-amount-pill.active {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(168, 85, 247, 0.15));
  border-color: #38bdf8;
  color: #fff;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.35);
  transform: translateY(-2px);
}

.sc-amount-pill .sc-pill-tier-name {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.75;
}

.sc-amount-pill .sc-pill-amt {
  font-size: 12.5px;
  font-weight: 900;
}

/* 🎙️ Animated Audio Wave Visualizer inside Voice Chip */
.sc-mini-wave {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 14px;
}

.sc-mini-wave span {
  width: 3px;
  background: #38bdf8;
  border-radius: 2px;
  animation: scWaveBar 1.2s ease-in-out infinite alternate;
}

.sc-mini-wave span:nth-child(1) { height: 6px; animation-delay: 0.1s; }
.sc-mini-wave span:nth-child(2) { height: 14px; animation-delay: 0.3s; }
.sc-mini-wave span:nth-child(3) { height: 9px; animation-delay: 0.2s; }
.sc-mini-wave span:nth-child(4) { height: 12px; animation-delay: 0.4s; }

@keyframes scWaveBar {
  0% { transform: scaleY(0.4); }
  100% { transform: scaleY(1.1); }
}

/* 🚀 Cyber Gradient Send Button */
.sc-cyber-send-btn {
  width: 100%;
  padding: 15px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 900;
  border: none;
  background: linear-gradient(135deg, #10b981 0%, #059669 40%, #0284c7 100%);
  background-size: 200% auto;
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.45);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  letter-spacing: 0.4px;
  position: relative;
  overflow: hidden;
}

.sc-cyber-send-btn::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transform: rotate(45deg);
  animation: scBtnSheen 4s infinite;
  pointer-events: none;
}

@keyframes scBtnSheen {
  0% { transform: translateX(-100%) rotate(45deg); }
  25% { transform: translateX(100%) rotate(45deg); }
  100% { transform: translateX(100%) rotate(45deg); }
}

.sc-cyber-send-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(16, 185, 129, 0.65), 0 0 20px rgba(56, 189, 248, 0.3);
}

.sc-cyber-send-btn:active {
  transform: translateY(1px);
}

/* 🖥️ OBS Simulated Stream Stage Backdrop */
.sc-obs-stage-monitor {
  position: relative;
  width: 100%;
  min-height: 280px;
  background: radial-gradient(circle at 50% 30%, rgba(15, 23, 42, 0.85) 0%, rgba(2, 6, 23, 0.98) 100%);
  border: 1px dashed rgba(56, 189, 248, 0.25);
  border-radius: 16px;
  padding: 40px 18px 24px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: visible;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6);
}

.sc-obs-stage-monitor::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 24px 24px;
  border-radius: 16px;
  pointer-events: none;
}

/* ── Light Mode Overrides for Studio ── */
[data-theme="light"] .sc-studio-card {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06) !important;
}

[data-theme="light"] .sc-creator-hero-bar {
  background: linear-gradient(135deg, #F0FDF4, #F0F9FF) !important;
  border-color: #86EFAC !important;
}

[data-theme="light"] .sc-amount-pill {
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
  color: #334155 !important;
}

[data-theme="light"] .sc-amount-pill:hover {
  background: #EFF6FF !important;
  border-color: #93C5FD !important;
}

[data-theme="light"] .sc-amount-pill.active {
  background: #EFF6FF !important;
  border-color: #2563EB !important;
  color: #1D4ED8 !important;
  box-shadow: 0 0 14px rgba(37, 99, 235, 0.2) !important;
}

[data-theme="light"] .sc-obs-stage-monitor {
  background: #0F172A !important;
}

/* ── Full-Width Responsive Footer Styling ── */
.desktop-footer, .fullwidth-app-footer {
  width: 100% !important;
  box-sizing: border-box !important;
}
@media (max-width: 1024px) {
  .desktop-footer div[style*="grid-template-columns: 2.2fr"],
  .desktop-footer div[style*="grid-template-columns: 2fr"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 36px !important;
  }
}
@media (max-width: 640px) {
  .desktop-footer {
    padding: 36px 18px 24px 18px !important;
  }
  .desktop-footer div[style*="grid-template-columns: 2.2fr"],
  .desktop-footer div[style*="grid-template-columns: 2fr"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
}

/* ── YouTube Dashboard Filter Pills ── */
.yt-filter-pill {
  cursor: pointer !important;
  user-select: none;
  font-family: inherit;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.yt-filter-pill:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}
.yt-filter-pill:active {
  transform: scale(0.96);
}
.yt-filter-pill.active {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ════════ Discord Pro White-Label Branding Card & Preview ════════ */
#dc-pro-branding-card {
  background: linear-gradient(135deg, rgba(24, 20, 56, 0.88), rgba(15, 23, 42, 0.95)) !important;
  border: 1px solid rgba(168, 85, 247, 0.38) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55), 0 0 24px rgba(168, 85, 247, 0.12) !important;
  overflow: hidden;
  position: relative;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.dc-card-top-stripe {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #ec4899, #a855f7, #6366f1, #38bdf8);
  box-shadow: 0 0 12px rgba(236, 72, 153, 0.6);
}

.dc-branding-section-box {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(168, 85, 247, 0.22);
  border-radius: 16px;
  padding: 18px 20px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dc-branding-section-box:hover {
  border-color: rgba(168, 85, 247, 0.45);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.dc-discord-mockup-wrap {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #313338;
  border: 1px solid #1e1f22;
  border-radius: 12px;
  padding: 14px 16px;
  font-family: 'gg sans', 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35);
}

.dc-discord-bot-tag {
  background: #5865f2;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  padding: 1.5px 5px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  letter-spacing: 0.2px;
  line-height: 1.2;
}

/* 🔒 Locked State for Free Tier Users */
#dc-pro-branding-card.is-locked #dc-branding-form-container {
  filter: blur(5px) grayscale(35%) !important;
  -webkit-filter: blur(5px) grayscale(35%) !important;
  pointer-events: none !important;
  user-select: none !important;
  opacity: 0.5 !important;
  transition: filter 0.3s ease, opacity 0.3s ease;
}

#dc-pro-branding-card.is-locked #dc-branding-locked-overlay {
  display: flex !important;
}

#dc-pro-branding-card.is-locked #dc-branding-pro-lock-banner {
  display: block !important;
}

#dc-pro-branding-card.is-locked #dc-branding-save-btn {
  opacity: 0.4 !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
  filter: grayscale(80%) !important;
}

#dc-pro-branding-card.is-locked #dc-branding-switch-wrap,
#dc-pro-branding-card.is-locked #dc-branding-switch-label,
#dc-pro-branding-card.is-locked #dc-branding-enabled,
#dc-pro-branding-card.is-locked #dc-branding-upload-btn,
#dc-pro-branding-card.is-locked #dc-branding-remove-btn {
  opacity: 0.5 !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* 🔓 Unlocked State for Pro Tier Users */
#dc-pro-branding-card:not(.is-locked) #dc-branding-form-container {
  filter: none !important;
  -webkit-filter: none !important;
  pointer-events: auto !important;
  user-select: auto !important;
  opacity: 1 !important;
}

#dc-pro-branding-card:not(.is-locked) #dc-branding-locked-overlay {
  display: none !important;
}

#dc-pro-branding-card:not(.is-locked) #dc-branding-pro-lock-banner {
  display: none !important;
}

#dc-pro-branding-card:not(.is-locked) #dc-branding-save-btn {
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  filter: none !important;
}

#dc-pro-branding-card:not(.is-locked) #dc-branding-switch-wrap,
#dc-pro-branding-card:not(.is-locked) #dc-branding-switch-label,
#dc-pro-branding-card:not(.is-locked) #dc-branding-enabled,
#dc-pro-branding-card:not(.is-locked) #dc-branding-upload-btn,
#dc-pro-branding-card:not(.is-locked) #dc-branding-remove-btn {
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* ══════════════════════════════════════════════════════════════
   LIVE STREAM CHAT DECK PLATFORM LOGO BADGES & TAGS
   ══════════════════════════════════════════════════════════════ */
.stream-deck-platform-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4.5px !important;
  padding: 1.5px 7px !important;
  border-radius: 6px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  user-select: none !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.2s ease !important;
}

.stream-deck-platform-tag svg {
  display: block !important;
  flex-shrink: 0 !important;
}

.stream-deck-platform-tag.tag-yt {
  background: rgba(239, 68, 68, 0.16) !important;
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
  color: #f87171 !important;
}
.stream-deck-platform-tag.tag-yt:hover {
  background: rgba(239, 68, 68, 0.25) !important;
  border-color: rgba(239, 68, 68, 0.6) !important;
}

.stream-deck-platform-tag.tag-twitch {
  background: rgba(145, 70, 255, 0.16) !important;
  border: 1px solid rgba(145, 70, 255, 0.4) !important;
  color: #c084fc !important;
}
.stream-deck-platform-tag.tag-twitch:hover {
  background: rgba(145, 70, 255, 0.25) !important;
  border-color: rgba(145, 70, 255, 0.6) !important;
}

.stream-deck-platform-tag.tag-kick {
  background: rgba(83, 252, 24, 0.16) !important;
  border: 1px solid rgba(83, 252, 24, 0.45) !important;
  color: #4ade80 !important;
}
.stream-deck-platform-tag.tag-kick:hover {
  background: rgba(83, 252, 24, 0.25) !important;
  border-color: rgba(83, 252, 24, 0.65) !important;
}

.stream-deck-platform-tag.tag-tiktok {
  background: rgba(254, 44, 85, 0.16) !important;
  border: 1px solid rgba(254, 44, 85, 0.4) !important;
  color: #fb7185 !important;
}
.stream-deck-platform-tag.tag-tiktok:hover {
  background: rgba(254, 44, 85, 0.25) !important;
  border-color: rgba(254, 44, 85, 0.6) !important;
}

.stream-deck-platform-tag.tag-rumble {
  background: rgba(132, 204, 22, 0.16) !important;
  border: 1px solid rgba(132, 204, 22, 0.4) !important;
  color: #a3e635 !important;
}
.stream-deck-platform-tag.tag-rumble:hover {
  background: rgba(132, 204, 22, 0.25) !important;
  border-color: rgba(132, 204, 22, 0.6) !important;
}

.stream-deck-platform-tag.tag-discord {
  background: rgba(88, 101, 242, 0.16) !important;
  border: 1px solid rgba(88, 101, 242, 0.4) !important;
  color: #818cf8 !important;
}
.stream-deck-platform-tag.tag-discord:hover {
  background: rgba(88, 101, 242, 0.25) !important;
  border-color: rgba(88, 101, 242, 0.6) !important;
}

.stream-deck-platform-tag.tag-streamer {
  background: rgba(239, 68, 68, 0.22) !important;
  border: 1px solid rgba(239, 68, 68, 0.5) !important;
  color: #fca5a5 !important;
}

/* ── Content Type Selection Cards (Create Modal) ── */
.content-type-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 6px;
}

.content-type-card {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  overflow: hidden;
}

.content-type-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(139, 92, 246, 0.45);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.content-type-card:has(input[type="radio"]:checked),
.content-type-card.active {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.18) 0%, rgba(236, 72, 153, 0.12) 100%) !important;
  border: 1.5px solid #a855f7 !important;
  box-shadow: 0 0 24px rgba(168, 85, 247, 0.3), inset 0 0 12px rgba(168, 85, 247, 0.1) !important;
}

.content-type-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.content-type-card:hover .content-type-icon-box {
  transform: scale(1.1) rotate(-4deg);
}

.content-type-icon-box.icon-photo {
  background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 50%, #6366f1 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.28);
}

.content-type-icon-box.icon-reel {
  background: linear-gradient(135deg, #f43f5e 0%, #ec4899 50%, #a855f7 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.28);
}

.content-type-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.content-type-title {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.2px;
}

.content-type-subtitle {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.content-type-radio-indicator {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.content-type-radio-indicator::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
  opacity: 0;
  transform: scale(0.4);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.content-type-card:has(input[type="radio"]:checked) .content-type-radio-indicator,
.content-type-card.active .content-type-radio-indicator {
  border-color: #a855f7;
  background: #a855f7;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.7);
}

.content-type-card:has(input[type="radio"]:checked) .content-type-radio-indicator::after,
.content-type-card.active .content-type-radio-indicator::after {
  opacity: 1;
  transform: scale(1);
}

/* ════════ Discord Server Multi-DP Circular Avatar Row & Switcher ════════ */
.dc-server-avatar-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.dc-server-round-avatar-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50% !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #1e1f22 !important;
  border: 2px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0 !important;
}

.dc-server-round-avatar-wrap:hover {
  transform: scale(1.08);
  border-color: #5865f2 !important;
  box-shadow: 0 4px 14px rgba(88, 101, 242, 0.45) !important;
}

.dc-server-avatar-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50% !important;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  background: #1e1f22;
  user-select: none;
}

.dc-server-avatar-item img,
.dc-server-round-avatar-wrap .dc-guild-dp-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.dc-server-avatar-item .dc-guild-dp-fallback,
.dc-server-round-avatar-wrap .dc-guild-dp-fallback {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #2b2d31;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #dbdee1;
  letter-spacing: 0.5px;
  pointer-events: none;
}

/* Active Server: Glow, Big, Vibrant (Screenshot style) */
.dc-server-avatar-item.is-active {
  width: 44px;
  height: 44px;
  border: 2.5px solid #5865f2 !important;
  box-shadow: 0 0 16px rgba(88, 101, 242, 0.75), 0 2px 8px rgba(0, 0, 0, 0.4) !important;
  opacity: 1;
  transform: scale(1.06);
  z-index: 2;
}

/* Inactive Server: Slightly Smaller, Dimmed, Grayscale */
.dc-server-avatar-item.is-inactive {
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
  opacity: 0.55;
  filter: grayscale(30%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.dc-server-avatar-item.is-inactive:hover {
  opacity: 1;
  filter: grayscale(0%);
  transform: scale(1.12);
  border-color: rgba(88, 101, 242, 0.85) !important;
  box-shadow: 0 0 12px rgba(88, 101, 242, 0.5);
  z-index: 3;
}

/* Mini Cross (✕) Delete / Disconnect Button on Top-Right Corner of Avatar */
.dc-server-avatar-remove-btn {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #ef4444;
  color: #ffffff;
  border: 1.5px solid #0f111a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 900;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.6);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  z-index: 5;
  padding: 0;
  line-height: 1;
}

.dc-server-avatar-item:hover .dc-server-avatar-remove-btn {
  opacity: 1;
  transform: scale(1);
}

.dc-server-avatar-remove-btn:hover {
  background: #dc2626 !important;
  transform: scale(1.25) !important;
}

/* Add Server Round Plus Button */
.dc-server-avatar-add-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px dashed rgba(88, 101, 242, 0.6);
  background: rgba(88, 101, 242, 0.08);
  color: #818cf8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.dc-server-avatar-add-btn:hover {
  background: rgba(88, 101, 242, 0.25);
  border-color: #5865f2;
  color: #ffffff;
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(88, 101, 242, 0.4);
}

[data-theme="light"] .dc-server-round-avatar-wrap,
[data-theme="light"] .dc-server-avatar-item {
  background: #e3e5e8 !important;
  border-color: #cbd5e1 !important;
}

/* Strictly PKR Pricing Mode (EasyPaisa & Local Wallets Compliance) */
#landing-curr-switcher-container,
#billing-curr-switcher-container,
.landing-curr-btn,
#landing-curr-btn-usd,
#billing-curr-btn-usd,
#rf-reg-global {
  display: none !important;
}

/* ==========================================================================
   🎮 Ultra-Modern Cyberpunk / Linear Glassmorphic Calendar & Time Picker
   ========================================================================== */

.flatpickr-calendar {
  background: linear-gradient(165deg, rgba(20, 21, 33, 0.96) 0%, rgba(11, 12, 18, 0.98) 100%) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  border: 1px solid rgba(139, 92, 246, 0.35) !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.08), 0 10px 30px rgba(139, 92, 246, 0.22) !important;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  width: 320px !important;
  padding: 12px 10px 10px 10px !important;
  color: #f8fafc !important;
  animation: fpPopIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 9999999 !important;
  overflow: hidden !important;
}

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

/* Quick Presets Bar */
.fp-custom-presets-bar {
  padding: 4px 6px 10px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  margin-bottom: 8px;
}
.fp-presets-title {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #a78bfa;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.fp-presets-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.fp-chip {
  background: rgba(139, 92, 246, 0.12);
  border: 1px solid rgba(139, 92, 246, 0.28);
  color: #e2e8f0;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}
.fp-chip:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.35), rgba(236, 72, 153, 0.35));
  border-color: rgba(168, 85, 247, 0.6);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
  border-bottom-color: rgba(20, 21, 33, 0.96) !important;
}

.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after {
  border-top-color: rgba(11, 12, 18, 0.98) !important;
}

/* Month Navigation */
.flatpickr-months {
  background: transparent !important;
  padding: 4px 6px 6px 6px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  margin-bottom: 6px !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

.flatpickr-months .flatpickr-month {
  color: #ffffff !important;
  fill: #ffffff !important;
  height: 34px !important;
}

.flatpickr-current-month {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 !important;
}

.flatpickr-current-month .cur-month {
  font-weight: 800 !important;
  color: #f8fafc !important;
  letter-spacing: -0.2px !important;
}

.flatpickr-current-month input.cur-year {
  font-weight: 800 !important;
  color: #a78bfa !important;
  background: rgba(139, 92, 246, 0.12) !important;
  border-radius: 6px !important;
  padding: 2px 4px !important;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  color: #cbd5e1 !important;
  fill: #cbd5e1 !important;
  padding: 6px 8px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  top: 4px !important;
  height: 28px !important;
  width: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.35), rgba(99, 102, 241, 0.35)) !important;
  border-color: rgba(168, 85, 247, 0.5) !important;
  color: #ffffff !important;
  fill: #ffffff !important;
  transform: scale(1.08) !important;
}

/* Weekday Row */
span.flatpickr-weekday {
  color: #94a3b8 !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
}

.flatpickr-rContainer {
  padding: 2px 0 !important;
}

.flatpickr-days {
  width: 100% !important;
}

.dayContainer {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  justify-content: space-around !important;
}

/* Day Tiles */
.flatpickr-day {
  color: #e2e8f0 !important;
  border-radius: 10px !important;
  height: 36px !important;
  line-height: 36px !important;
  max-width: 36px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  margin: 2px !important;
  border: 1px solid transparent !important;
  transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.flatpickr-day:hover {
  background: rgba(139, 92, 246, 0.25) !important;
  border-color: rgba(139, 92, 246, 0.5) !important;
  color: #ffffff !important;
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25) !important;
}

.flatpickr-day.today {
  border-color: #8b5cf6 !important;
  color: #a78bfa !important;
  background: rgba(139, 92, 246, 0.1) !important;
  font-weight: 800 !important;
  position: relative !important;
}
.flatpickr-day.today::after {
  content: '';
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #a78bfa;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #ec4899 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  transform: scale(1.08) !important;
}

/* Past / Disabled Days */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: #475569 !important;
  opacity: 0.2 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  background: transparent !important;
  border-color: transparent !important;
  text-decoration: line-through !important;
}

/* Time Picker Section - Futuristic Digital Hub */
.flatpickr-time {
  background: linear-gradient(135deg, rgba(15, 16, 24, 0.95), rgba(22, 24, 38, 0.95)) !important;
  border: 1px solid rgba(139, 92, 246, 0.25) !important;
  border-radius: 12px !important;
  margin-top: 8px !important;
  padding: 6px 10px !important;
  height: 48px !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

.flatpickr-time input {
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  font-family: monospace, sans-serif !important;
  letter-spacing: 0.5px !important;
}

.flatpickr-time input:hover,
.flatpickr-time input:focus {
  background: rgba(139, 92, 246, 0.2) !important;
  border-color: rgba(139, 92, 246, 0.5) !important;
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.3) !important;
}

.flatpickr-time .flatpickr-am-pm {
  color: #ffffff !important;
  background: linear-gradient(135deg, #8b5cf6, #6366f1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  padding: 4px 10px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4) !important;
}

.flatpickr-time .flatpickr-am-pm:hover {
  background: linear-gradient(135deg, #a78bfa, #8b5cf6) !important;
  transform: scale(1.05) !important;
}

.flatpickr-time .flatpickr-time-separator {
  color: #a78bfa !important;
  font-weight: 900 !important;
  font-size: 16px !important;
}

/* Custom Input Field Trigger */
.flatpickr-custom-input {
  cursor: pointer !important;
  background: linear-gradient(135deg, rgba(20, 22, 34, 0.9), rgba(12, 13, 20, 0.9)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23a78bfa' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='4' ry='4'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3Ccircle cx='8' cy='14' r='1' fill='%23a78bfa'%3E%3C/circle%3E%3Ccircle cx='12' cy='14' r='1' fill='%23a78bfa'%3E%3C/circle%3E%3Ccircle cx='16' cy='14' r='1' fill='%23a78bfa'%3E%3C/circle%3E%3Ccircle cx='8' cy='18' r='1' fill='%23a78bfa'%3E%3C/circle%3E%3Ccircle cx='12' cy='18' r='1' fill='%23a78bfa'%3E%3C/circle%3E%3C/svg%3E") no-repeat right 14px center !important;
  padding-right: 44px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  border: 1px solid rgba(139, 92, 246, 0.35) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  transition: all 0.2s ease !important;
}
.flatpickr-custom-input:hover,
.flatpickr-custom-input:focus {
  border-color: #a78bfa !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25), 0 6px 20px rgba(0, 0, 0, 0.4) !important;
}

/* ==========================================================================
   SCHEDULED POSTS VISUAL ENGINE & FROSTED GLASSMORPHISM (DISCORD / CYBERPUNK THEME)
   ========================================================================== */
.post-list-row-card.is-scheduled-post {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.07) 0%, rgba(30, 27, 75, 0.45) 45%, rgba(15, 23, 42, 0.75) 100%) !important;
  border: 1px solid rgba(245, 158, 11, 0.42) !important;
  box-shadow: 0 4px 24px -2px rgba(245, 158, 11, 0.12), inset 0 1px 0 rgba(245, 158, 11, 0.28) !important;
  backdrop-filter: blur(14px) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.post-list-row-card.is-scheduled-post::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.85);
  z-index: 2;
}

.post-list-row-card.is-scheduled-post:hover {
  border-color: rgba(245, 158, 11, 0.75) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 24px rgba(245, 158, 11, 0.25) !important;
  transform: translateX(3px) translateY(-1px) !important;
}

/* Frosted Thumbnail Glass with Glowing Clock */
.post-list-thumb.is-scheduled-thumb {
  border: 1px solid rgba(245, 158, 11, 0.45) !important;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.25) !important;
}

.scheduled-media-img {
  filter: brightness(0.85) contrast(1.05) saturate(0.9);
  transition: filter 0.3s ease;
}

.post-list-row-card.is-scheduled-post:hover .scheduled-media-img {
  filter: brightness(0.95) contrast(1.05);
}

.scheduled-thumb-glass-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.62);
  backdrop-filter: blur(3.5px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: inherit;
  z-index: 3;
}

.scheduled-clock-icon-glow {
  font-size: 19px;
  line-height: 1;
  filter: drop-shadow(0 0 8px #fbbf24);
  animation: clockGlowPulse 2s infinite ease-in-out;
}

@keyframes clockGlowPulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 6px #fbbf24);
  }
  50% {
    transform: scale(1.18);
    filter: drop-shadow(0 0 12px #fbbf24);
  }
}

.scheduled-thumb-countdown {
  font-size: 9px;
  font-weight: 800;
  color: #fbbf24;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.3px;
  white-space: nowrap;
  border: 1px solid rgba(245, 158, 11, 0.4);
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

/* Scheduled Post Banner in Info Section */
.scheduled-post-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
  padding: 5px 10px;
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.16) 0%, rgba(245, 158, 11, 0.04) 100%);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 8px;
  backdrop-filter: blur(8px);
}

.scheduled-banner-left {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.scheduled-banner-title {
  color: #fbbf24;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.scheduled-banner-right {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.scheduled-timer-pill {
  background: rgba(245, 158, 11, 0.22);
  color: #fbbf24;
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid rgba(245, 158, 11, 0.5);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.15);
}

.scheduled-time-pill {
  color: #e2e8f0;
  font-size: 10.5px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.pulse-amber-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fbbf24;
  box-shadow: 0 0 8px #fbbf24;
  animation: pulseAmberGlow 1.8s infinite ease-in-out;
  flex-shrink: 0;
}

@keyframes pulseAmberGlow {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 0 6px #fbbf24;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.6;
    box-shadow: 0 0 14px #fbbf24;
  }
}

.post-list-meta-tag.scheduled-meta {
  color: #fbbf24 !important;
  background: rgba(245, 158, 11, 0.14) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
  font-weight: 700 !important;
}

.post-list-meta-tag.scheduled-date-meta {
  color: #e2e8f0 !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  font-weight: 600 !important;
}

[data-theme="light"] .post-list-row-card.is-scheduled-post {
  background: linear-gradient(135deg, rgba(254, 243, 199, 0.6) 0%, #FFFFFF 100%) !important;
  border: 1.5px solid #F59E0B !important;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.12) !important;
}

[data-theme="light"] .scheduled-post-banner {
  background: #FFFBEB !important;
  border-color: #FDE68A !important;
}

[data-theme="light"] .scheduled-banner-title {
  color: #B45309 !important;
}

[data-theme="light"] .scheduled-time-pill {
  color: #78350F !important;
  background: #FEF3C7 !important;
  border-color: #FCD34D !important;
}

[data-theme="light"] .scheduled-thumb-glass-overlay {
  background: rgba(255, 255, 255, 0.72) !important;
}

[data-theme="light"] .scheduled-thumb-countdown {
  background: #FFFFFF !important;
  color: #B45309 !important;
  border-color: #F59E0B !important;
}

/* ══════════════════════════════════════════════════════════════════
   OBS MULTI-PLATFORM COUNTER SMART CONTROLS & DIMMED STATE
   ══════════════════════════════════════════════════════════════════ */
.obs-plat-card {
  transition: all 0.25s ease-in-out;
}

.obs-plat-card.is-platform-dim {
  opacity: 0.38 !important;
  filter: grayscale(0.65) !important;
  border: 1px dashed rgba(255, 255, 255, 0.12) !important;
  background: rgba(10, 14, 23, 0.4) !important;
}

.obs-plat-card.is-platform-dim:hover {
  opacity: 0.7 !important;
  filter: grayscale(0.2) !important;
}

.obs-locked-handle-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
  font-size: 10px;
  font-weight: 700;
  padding: 5px 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
  cursor: default;
}

.obs-locked-handle-badge .badge-icon {
  font-size: 11px;
  flex-shrink: 0;
}

.obs-account-switcher {
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 4px 6px !important;
  background: #040508 !important;
  border: 1px solid rgba(59, 130, 246, 0.5) !important;
  border-radius: 6px !important;
  color: #60a5fa !important;
  width: 100% !important;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.15) !important;
}

/* ══════════════════════════════════════════════════════════════════
   STREAM DECK SPLIT GRID: 50% / 50% EQUAL DUAL VIEW
   ══════════════════════════════════════════════════════════════════ */
.deck-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}

@media (max-width: 992px) {
  .deck-split-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   LIVE STREAM CHAT 3-DOT QUICK MODERATION ACTIONS MENU
   ══════════════════════════════════════════════════════════════════ */
.deck-chat-dot-btn {
  background: transparent;
  border: none;
  color: #64748b;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  padding: 1px 6px;
  border-radius: 6px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  opacity: 0.7;
}

.deck-chat-dot-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  opacity: 1;
  transform: scale(1.15);
}

#deck-chat-action-menu-dropdown {
  position: fixed;
  z-index: 9999999;
  background: #090d16;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.8), 0 0 24px rgba(99, 102, 241, 0.25);
  padding: 6px;
  min-width: 185px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  backdrop-filter: blur(16px);
  animation: deckMenuPop 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes deckMenuPop {
  from { opacity: 0; transform: scale(0.93) translateY(-4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.deck-action-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: #cbd5e1;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: all 0.15s ease;
  font-family: inherit;
}

.deck-action-menu-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.deck-action-menu-item.warning:hover {
  background: rgba(245, 158, 11, 0.2);
  color: #fcd34d;
}

.deck-action-menu-item.danger:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}

.deck-action-menu-item.highlight:hover {
  background: rgba(168, 85, 247, 0.2);
  color: #d8b4fe;
}