@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

:root {
  /* Colors */
  --bg-dark-void: #000000;
  --bg-dark-space: #000000;
  --bg-dark-slate: #0b0f19;
  --bg-glass: rgba(0, 0, 0, 0.5);
  --color-teal: #64ffda;
  --color-teal-bright: #00f2fe;
  --color-teal-muted: #1e4d46;
  --color-blue-accent: #0077b6;
  --text-primary: #f8f9fa;
  --text-secondary: #cdd6f4;
  --text-muted: #8d99ae;
  /* Gradation */
  --gradient-primary: linear-gradient(135deg, #64ffda 0%, #0077b6 100%);
  --gradient-dark: linear-gradient(180deg, var(--bg-dark-void) 0%, var(--bg-dark-space) 100%);
  --gradient-glass: linear-gradient(135deg, rgba(22, 34, 63, 0.8) 0%, rgba(13, 21, 39, 0.9) 100%);
  --gradient-glow: linear-gradient(90deg, #64ffda, #00f2fe, #0077b6);
  /* Spacing & Borders */
  --border-radius-sm: 8px;
  --border-radius-md: 16px;
  --border-radius-lg: 24px;
  --border-glass: 1px solid rgba(100, 255, 218, 0.12);
  --border-glass-hover: 1px solid rgba(100, 255, 218, 0.3);
  /* Shadows & Glows */
  --shadow-teal: 0 0 20px rgba(100, 255, 218, 0.15);
  --shadow-teal-strong: 0 0 30px rgba(100, 255, 218, 0.35);
  --shadow-card: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  --transition-smooth: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
  --transition-fast: all 0.15s ease;
}

/* Reset & Baseline styles moved to global.css */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-fast);
}

button,
input,
select,
textarea {
  font-family: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

/* Base Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-dark-void);
}

::-webkit-scrollbar-thumb {
  background: var(--bg-dark-slate);
  border-radius: var(--border-radius-sm);
  border: 2px solid var(--bg-dark-void);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-teal-muted);
}

/* Global Container & Main Content layout styles moved to global.css */
/* Header & Navbar */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(100, 255, 218, 0.06);
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
  transition: var(--transition-smooth);
}

.navbar.scrolled {
  height: 70px;
  background: rgba(0, 0, 0, 0.75);
  border-bottom: 1px solid rgba(100, 255, 218, 0.12);
}

.logo {
  display: flex;
  align-items: center;
  font-family: 'Outfit', sans-serif;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}

.logo-text {
  background: linear-gradient(135deg, #ffffff 40%, var(--color-teal) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.logo-dot {
  width: 8px;
  height: 8px;
  background: var(--color-teal);
  border-radius: 50%;
  margin-left: 4px;
  box-shadow: 0 0 10px var(--color-teal);
  display: inline-block;
}

.nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
  align-items: center;
}

.nav-links a {
  font-weight: 500;
  font-size: 15px;
  color: var(--text-secondary);
  padding: 6px 4px;
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-teal);
  transition: var(--transition-fast);
  box-shadow: 0 0 8px var(--color-teal);
}

.nav-links a:hover,
.nav-links li.active a {
  color: var(--color-teal);
}

.nav-links li.active a::after {
  width: 100%;
}

.navbar .logo {
  flex-shrink: 0;
}

.nav-auth {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

/* Desktop Header Stabilization - Prevents layout flexing/shifting when toggling languages */
@media (min-width: 769px) {
  body:not(.logged-in) .navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    box-sizing: border-box;
  }

  body:not(.logged-in) .navbar .logo {
    position: absolute;
    left: 40px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    flex-shrink: 0;
  }

  body:not(.logged-in) .nav-links {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    gap: 28px;
    white-space: nowrap;
  }

  body:not(.logged-in) .nav-auth {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
  }
}

/* ==========================================================================
   LANGUAGE SWITCHER (Harmonized with Sign In Button Style)
   ========================================================================== */
.lang-switch-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: 82px !important;
  min-width: 82px !important;
  max-width: 82px !important;
  height: 30px;
  background: rgba(100, 255, 218, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--color-teal);
  border-radius: 18px;
  padding: 2px;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  user-select: none;
  box-sizing: border-box;
}

.lang-switch-container:hover {
  border-color: var(--color-teal);
  box-shadow: 0 0 12px rgba(100, 255, 218, 0.22);
}

.lang-switch-track {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

/* Gliding Active Pill (Solid Teal like filled Sign In button) */
.lang-glider {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: var(--color-teal);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(100, 255, 218, 0.3);
  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  z-index: 1;
  pointer-events: none;
  box-sizing: border-box;
}

.lang-switch-container[data-active-lang="tr"] .lang-glider {
  transform: translateX(100%);
}

.lang-btn {
  position: relative;
  z-index: 2;
  flex: 1;
  height: 100%;
  background: transparent;
  border: none;
  color: var(--color-teal);
  font-size: 11px;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  border-radius: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.05em;
  transition: color 0.25s ease;
  outline: none;
  padding: 0;
  box-sizing: border-box;
}

.lang-btn:hover:not(.active) {
  color: #ffffff;
}

.lang-btn.active {
  color: #0d1527;
  font-weight: 800;
  text-shadow: none;
}

#nav-btn-login {
  width: 104px !important;
  min-width: 104px !important;
  max-width: 104px !important;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  box-sizing: border-box;
  white-space: nowrap;
  padding: 0 !important;
  height: 38px !important;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: var(--border-radius-sm);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: var(--transition-smooth);
  gap: 8px;
}

.btn-outline {
  border: 1.5px solid var(--color-teal, #64ffda);
  color: var(--color-teal, #64ffda);
  background: transparent;
  transition: all var(--transition-fast, 0.25s ease);
}

.btn-outline:hover {
  background: var(--color-teal, #64ffda);
  color: var(--bg-dark-void, #0d1527);
  border-color: var(--color-teal, #64ffda);
  box-shadow: 0 4px 15px var(--color-teal, rgba(100, 255, 218, 0.35));
}

.btn-primary {
  background: var(--gradient-primary);
  color: var(--bg-dark-void);
  box-shadow: 0 4px 14px rgba(100, 255, 218, 0.25);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(100, 255, 218, 0.4);
}

.user-info-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.user-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 14px 5px 5px;
  height: 42px;
  box-sizing: border-box;
  background: rgba(22, 34, 63, 0.5);
  border: 1px solid rgba(100, 255, 218, 0.15);
  border-radius: 30px;
  cursor: pointer;
  align-self: center;
  margin: 0;
  transition: var(--transition-fast);
}

.user-badge:hover {
  border-color: var(--color-teal-bright);
  box-shadow: var(--shadow-teal);
}

.btn-mailbox {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  box-sizing: border-box;
  background: rgba(22, 34, 63, 0.5);
  border: 1px solid rgba(100, 255, 218, 0.15);
  cursor: pointer;
  transition: var(--transition-smooth);
  font-size: 18px;
  align-self: center;
  margin: 0;
}

.btn-mailbox:hover {
  border-color: var(--color-teal-bright);
  box-shadow: var(--shadow-teal);
  transform: scale(1.05);
}

.mailbox-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ef233c;
  color: white;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 10px;
  border: 2px solid var(--bg-dark-void);
  display: none;
}

/* Admin Tabs */
.admin-tab-btn {
  padding: 10px 20px;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid transparent;
  border-bottom: 2px solid transparent;
  border-radius: 4px 4px 0 0;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
}

.admin-tab-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.02);
}

.admin-tab-btn.active {
  color: var(--color-teal);
  border-bottom: 2px solid var(--color-teal);
  background: rgba(100, 255, 218, 0.05);
}

/* Admin Dashboard Background Styling */
body:not(.theme-warm-sepia) #page-admin .glass-card,
body:not(.theme-warm-sepia) .admin-tab-content {
  background: rgba(13, 21, 39, 0.55) !important;
}

body:not(.theme-warm-sepia) #page-admin .glass-card:hover,
body:not(.theme-warm-sepia) .admin-tab-content:hover,
body:not(.theme-warm-sepia) .admin-tab-content.glass-card:hover {
  background: rgba(13, 21, 39, 0.55) !important;
}


/* Performance Stat Pills */
.stat-pill {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  font-size: 13px;
  font-family: monospace;
  color: var(--text-primary);
  text-align: center;
  min-width: 40px;
}

.stat-pill.xp {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.avatar-mini {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: none;
}

.username-mini {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.burger-menu {
  display: none;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  padding: 4px;
}

.burger-menu span {
  display: block;
  width: 25px;
  height: 2px;
  background: var(--text-primary);
  transition: var(--transition-fast);
}

/* Page Architecture Routing styles moved to global.css */
/* Glassmorphism Cards */
.glass-card {
  background: var(--gradient-glass);
  border: var(--border-glass);
  border-radius: var(--border-radius-md);
  padding: 30px;
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: var(--transition-smooth);
}

.glass-card:hover {
  transform: translateY(-4px);
  border: var(--border-glass-hover);
  box-shadow: var(--shadow-card), var(--shadow-teal);
}

/* --- HOME PAGE STYLE --- */
.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 60px 0;
  gap: 40px;
  position: relative;
}

/* Hero Particle Canvas */
#hero-particle-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 0;
  pointer-events: none;
}

.hero-content {
  flex: 1;
  max-width: 650px;
  position: relative;
  z-index: 1;
}

.hero-image {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
}

.badge-tag {
  display: inline-block;
  padding: 6px 14px;
  background: transparent !important;
  border: 1px solid var(--color-teal);
  color: var(--color-teal);
  font-size: 13px;
  font-weight: 600;
  border-radius: 30px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 24px;
}

.hero h1 {
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.1;
  margin-bottom: 20px;
}

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

.hero-desc {
  font-size: 18px;
  color: var(--text-secondary);
  margin-bottom: 36px;
  max-width: 550px;
}

.hero-ctas {
  display: flex;
  gap: 16px;
}

.hero-image {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.hero-circle-art {
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(100, 255, 218, 0.1) 0%, rgba(0, 119, 182, 0.02) 70%);
  border: 1px dashed rgba(100, 255, 218, 0.25);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  animation: spin 30s linear infinite;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

.hero-dashboard-preview {
  position: absolute;
  width: 80%;
  background: rgba(22, 34, 63, 0.85);
  border: 1px solid rgba(100, 255, 218, 0.2);
  border-radius: var(--border-radius-md);
  padding: 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
}

.preview-header {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 12px;
  margin-bottom: 16px;
}

.preview-dots {
  display: flex;
  gap: 6px;
}

.preview-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}

.preview-dot:first-child {
  background: #ff5f56;
}

.preview-dot:nth-child(2) {
  background: #ffbd2e;
}

.preview-dot:nth-child(3) {
  background: #27c93f;
}

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

.preview-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  margin-bottom: 10px;
  width: 100%;
}

.preview-bar.half {
  width: 60%;
}

.preview-bar.teal {
  background: var(--color-teal);
  width: 85%;
}

/* Features Grid */
.features-section {
  padding: 100px 0;
}

.section-title-wrap {
  text-align: center;
  margin-bottom: 60px;
}

.section-title {
  font-size: 38px;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.section-subtitle {
  color: var(--text-muted);
  max-width: 700px;
  margin: 0 auto;
  font-size: 16px;
}

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

/* Base feature card & Bento Card styling */
.glass-card.feature-card {
  position: relative;
  overflow: hidden;
  background: rgba(10, 16, 28, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 28px 24px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 2;
}

.bento-card .card-top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 16px;
}

.bento-card .feature-icon {
  margin-bottom: 0 !important;
  width: 44px !important;
  height: 44px !important;
  font-size: 20px !important;
  border-radius: 14px !important;
}

.bento-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tag-cyan { background: rgba(100, 255, 218, 0.12); color: #64ffda; border: 1px solid rgba(100, 255, 218, 0.3); }
.tag-amber { background: rgba(255, 179, 0, 0.12); color: #ffca28; border: 1px solid rgba(255, 179, 0, 0.35); }
.tag-purple { background: rgba(168, 85, 247, 0.12); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.35); }
.tag-emerald { background: rgba(16, 185, 129, 0.12); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3); }
.tag-pink { background: rgba(244, 63, 94, 0.12); color: #fb7185; border: 1px solid rgba(244, 63, 94, 0.3); }
.tag-blue { background: rgba(88, 101, 242, 0.12); color: #8ea1ff; border: 1px solid rgba(88, 101, 242, 0.35); }

.bento-card h3 {
  font-size: 19px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin-bottom: 8px !important;
}

.bento-card p {
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: var(--text-secondary) !important;
  margin-bottom: 18px !important;
}

/* Micro Preview Widgets Inside Bento Cards */
.bento-preview-widget {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 12px 14px;
  margin-top: auto;
  width: 100%;
  box-sizing: border-box;
}

/* Music Visualizer Widget */
.widget-music .music-player-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.widget-music .equalizer-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 14px;
}
.widget-music .equalizer-bars span {
  width: 3px;
  background: var(--color-teal);
  border-radius: 2px;
  animation: eq-bounce 1.2s infinite ease-in-out alternate;
}
.widget-music .equalizer-bars span:nth-child(1) { height: 60%; animation-delay: 0.1s; }
.widget-music .equalizer-bars span:nth-child(2) { height: 100%; animation-delay: 0.3s; }
.widget-music .equalizer-bars span:nth-child(3) { height: 40%; animation-delay: 0.2s; }
.widget-music .equalizer-bars span:nth-child(4) { height: 80%; animation-delay: 0.4s; }

@keyframes eq-bounce {
  0% { transform: scaleY(0.4); }
  100% { transform: scaleY(1); }
}

.widget-music .music-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}
.widget-music .lyric-prompt {
  font-size: 12px;
  color: #fff;
}
.widget-music .blank-input {
  color: var(--color-teal);
  border-bottom: 1.5px solid var(--color-teal);
  font-weight: 700;
  padding: 0 4px;
}

/* Social Leaderboard Widget */
.widget-social {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.leader-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;
}
.leader-chip.gold { background: rgba(255, 179, 0, 0.1); color: #ffca28; }
.leader-chip.streak { background: rgba(255, 255, 255, 0.04); color: var(--text-secondary); }

/* Register Switcher Widget */
.widget-register .register-chips {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.widget-register .reg-pill {
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
}
.widget-register .reg-pill.active {
  background: rgba(168, 85, 247, 0.2);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.4);
}
.widget-register .reg-text {
  font-size: 11.5px;
  color: #fff;
}
.widget-register .highlight-term {
  color: #c084fc;
  font-weight: 700;
}

/* Wordbook Widget */
.wordbook-item .wordbook-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.wordbook-item .wb-term { font-size: 12px; font-weight: 700; color: #34d399; }
.wordbook-item .wb-tag { font-size: 10px; color: var(--text-muted); }
.wordbook-item .wb-mastery-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}
.wordbook-item .wb-progress {
  height: 100%;
  background: #34d399;
  border-radius: 2px;
}

/* XP Widget */
.widget-xp .xp-level-badge {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  color: #fb7185;
  margin-bottom: 6px;
}
.widget-xp .xp-track {
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}
.widget-xp .xp-fill {
  height: 100%;
  background: linear-gradient(90deg, #f43f5e, #fb7185);
  border-radius: 2px;
}

/* Community Live Widget */
.widget-community .discord-live-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: #8ea1ff;
}
.widget-community .live-pulse {
  width: 8px;
  height: 8px;
  background: #5865F2;
  border-radius: 50%;
  box-shadow: 0 0 10px #5865F2;
  animation: pulse-live 1.8s infinite ease-in-out;
}
@keyframes pulse-live {
  0% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.7; }
}

/* Mouse spotlight glow mask */
.glass-card.feature-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(300px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
      var(--spotlight-color, rgba(100, 255, 218, 0.07)),
      transparent 80%);
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 1;
  pointer-events: none;
}

.glass-card.feature-card:hover::before {
  opacity: 1;
}

/* Individual card hover colors and configurations */
.features-grid .feature-card:nth-child(1) {
  --spotlight-color: rgba(100, 255, 218, 0.08);
  --icon-hover-border: rgba(100, 255, 218, 0.4);
  --icon-hover-glow: rgba(100, 255, 218, 0.25);
  --theme-hover-border: rgba(100, 255, 218, 0.3);
  --theme-hover-shadow: rgba(100, 255, 218, 0.1);
}

.features-grid .feature-card:nth-child(2) {
  --spotlight-color: rgba(0, 242, 254, 0.08);
  --icon-hover-border: rgba(0, 242, 254, 0.4);
  --icon-hover-glow: rgba(0, 242, 254, 0.25);
  --theme-hover-border: rgba(0, 242, 254, 0.3);
  --theme-hover-shadow: rgba(0, 242, 254, 0.1);
}

.features-grid .feature-card:nth-child(3) {
  --spotlight-color: rgba(168, 85, 247, 0.08);
  --icon-hover-border: rgba(168, 85, 247, 0.4);
  --icon-hover-glow: rgba(168, 85, 247, 0.25);
  --theme-hover-border: rgba(168, 85, 247, 0.3);
  --theme-hover-shadow: rgba(168, 85, 247, 0.1);
}

.glass-card.feature-card:hover {
  transform: translateY(-8px) scale(1.015);
  border-color: var(--theme-hover-border);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 25px var(--theme-hover-shadow);
}

/* Feature Icon Box */
.feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.02);
}

.feature-icon.icon-cyan { background: rgba(100, 255, 218, 0.08); border-color: rgba(100, 255, 218, 0.25); }
.feature-icon.icon-amber { background: rgba(255, 179, 0, 0.08); border-color: rgba(255, 179, 0, 0.25); }
.feature-icon.icon-purple { background: rgba(168, 85, 247, 0.08); border-color: rgba(168, 85, 247, 0.25); }
.feature-icon.icon-emerald { background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.25); }
.feature-icon.icon-pink { background: rgba(244, 63, 94, 0.08); border-color: rgba(244, 63, 94, 0.25); }
.feature-icon.icon-blue { background: rgba(88, 101, 242, 0.08); border-color: rgba(88, 101, 242, 0.25); }

.glass-card.feature-card:hover .feature-icon {
  transform: scale(1.08) !important;
  box-shadow: 0 0 20px var(--icon-hover-glow);
}

.feature-card h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 21px;
  font-weight: 700;
  margin-bottom: 12px;
  position: relative;
  z-index: 2;
}

.feature-card p {
  color: var(--text-secondary);
  font-size: 14.5px;
  line-height: 1.6;
  position: relative;
  z-index: 2;
}

/* Scroll Reveal Base Parameters */
.scroll-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger reveals based on reveal-index */
.scroll-reveal.visible[style*="--reveal-index"] {
  transition-delay: calc(var(--reveal-index, 0) * 0.15s);
}

/* --- STORIES PAGE --- */
.stories-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  align-items: start;
}

.filter-sidebar {
  position: static;
}

.filter-group {
  margin-bottom: 30px;
}

.filter-group:last-child {
  margin-bottom: 0;
}

.filter-group h4 {
  font-size: 15px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}

.filter-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.filter-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: rgba(22, 34, 63, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--border-radius-sm);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-fast);
}

.filter-pill:hover,
.filter-pill.active {
  background: rgba(100, 255, 218, 0.08);
  border-color: var(--color-teal);
  color: var(--color-teal);
}

.filter-count {
  font-size: 11px;
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 6px;
  border-radius: 10px;
  color: var(--text-muted);
}

.filter-pill.active .filter-count {
  background: var(--color-teal-muted);
  color: var(--color-teal);
}

.stories-feed-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

.stories-count {
  font-size: 15px;
  color: var(--text-muted);
}

.stories-search-wrapper {
  position: relative;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.stories-search-wrapper::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 32px;
  background: linear-gradient(135deg, var(--color-teal), rgba(0, 180, 216, 0.4));
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 0;
  pointer-events: none;
  filter: blur(4px);
}

.stories-search-wrapper:focus-within::before,
.stories-search-wrapper:hover::before {
  opacity: 0.6;
}

.stories-search-input {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 10px 16px 10px 42px !important;
  background: rgba(10, 15, 30, 0.75) !important;
  backdrop-filter: blur(12px);
  border: 1px solid var(--color-teal) !important;
  border-radius: 30px !important;
  font-size: 13.5px;
  color: var(--text-primary);
  outline: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.stories-search-input:focus {
  background: rgba(13, 21, 39, 0.95) !important;
  border-color: #64ffda !important;
  box-shadow: 0 0 20px rgba(100, 255, 218, 0.3), inset 0 0 10px rgba(100, 255, 218, 0.08) !important;
}

.stories-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
  transition: all 0.3s ease;
}

.stories-search-input:focus ~ .stories-search-icon .search-svg-icon,
.stories-search-wrapper:focus-within .search-svg-icon {
  color: #64ffda !important;
  transform: scale(1.15) rotate(-8deg);
  filter: drop-shadow(0 0 8px rgba(100, 255, 218, 0.6));
}

.sort-select-wrapper {
  position: relative;
  min-width: 220px;
}

.sort-select {
  display: none;
}

.custom-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: var(--border-glass);
  padding: 10px 16px;
  border-radius: var(--border-radius-sm);
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
  font-weight: 500;
  transition: var(--transition-fast);
  user-select: none;
}

.custom-select-trigger:hover {
  border-color: rgba(100, 255, 218, 0.4);
  box-shadow: 0 0 15px rgba(100, 255, 218, 0.1);
  background: rgba(255, 255, 255, 0.02);
}

.custom-select-trigger.open {
  border-color: var(--color-teal);
  box-shadow: 0 0 20px rgba(100, 255, 218, 0.2);
  background: rgba(0, 0, 0, 0.6);
}

.custom-select-arrow {
  font-size: 10px;
  color: var(--color-teal);
  transition: transform 0.3s ease;
  margin-left: 12px;
}

.custom-select-trigger.open .custom-select-arrow {
  transform: rotate(180deg);
}

.custom-select-options {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  background: rgba(10, 15, 26, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--border-radius-sm);
  list-style: none;
  padding: 6px;
  margin: 0;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(100, 255, 218, 0.05);
  max-height: 240px;
  overflow-y: auto;
}

.custom-select-options::-webkit-scrollbar {
  width: 6px;
}

.custom-select-options::-webkit-scrollbar-track {
  background: transparent;
}

.custom-select-options::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.custom-select-options::-webkit-scrollbar-thumb:hover {
  background: var(--color-teal);
}

.custom-select-options.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.custom-select-option {
  padding: 10px 14px;
  font-size: 13.5px;
  color: var(--text-secondary);
  border-radius: 6px;
  cursor: pointer;
  transition: var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.custom-select-option:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  padding-left: 18px;
}

.custom-select-option.active {
  background: linear-gradient(135deg, rgba(100, 255, 218, 0.15) 0%, rgba(100, 255, 218, 0.02) 100%);
  color: var(--color-teal);
  font-weight: 600;
  border-left: 2px solid var(--color-teal);
  border-radius: 0 6px 6px 0;
}

.custom-select-option.active::after {
  content: "✓";
  font-size: 11px;
  color: var(--color-teal);
}

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

@media (max-width: 1100px) {
  .stories-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .stories-grid {
    grid-template-columns: 1fr;
  }
}

/* Pagination Styling */
.stories-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
}

.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.page-btn:hover:not(:disabled) {
  color: var(--color-teal);
  border-color: rgba(100, 255, 218, 0.3);
  background: rgba(100, 255, 218, 0.03);
  transform: translateY(-1px);
}

.page-btn.active {
  color: #0d1527;
  background: var(--color-teal);
  border-color: var(--color-teal);
  box-shadow: 0 0 12px rgba(100, 255, 218, 0.3);
}

.page-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.page-btn-nav {
  width: auto;
  padding: 0 16px;
  border-radius: 20px;
}

.story-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.story-card-meta {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.badge-level {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.level-a1 {
  background: #3b82f6 !important;
  color: #ffffff !important;
}

.level-a2 {
  background: #10b981 !important;
  color: #ffffff !important;
}

.level-b1 {
  background: #f59e0b !important;
  color: #ffffff !important;
}

.level-b2 {
  background: #ef4444 !important;
  color: #ffffff !important;
}

.level-c1 {
  background: #8b5cf6 !important;
  color: #ffffff !important;
}

.level-c2 {
  background: #ec4899 !important;
  color: #ffffff !important;
}

.badge-interest {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.badge-lock {
  background: rgba(255, 100, 100, 0.1);
  color: #ff6b6b;
  border: 1px solid rgba(255, 100, 100, 0.2);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  margin-left: auto;
  /* Push it to the far right of the flex container */
}

.story-card h3 {
  font-size: 18px;
  margin-bottom: 12px;
  line-height: 1.3;
}

.story-card p {
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 24px;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.story-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 16px;
  font-size: 13px;
  color: var(--text-muted);
}

.story-read-time {
  display: flex;
  align-items: center;
  gap: 4px;
}

.story-card .btn-read {
  color: var(--color-teal);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.story-card .btn-read:hover {
  color: var(--color-teal-bright);
}

/* Interactive Modal Reader */
.reader-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(6, 11, 19, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 2000;
  display: none;
  justify-content: center;
  align-items: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.reader-modal.active {
  display: flex;
  opacity: 1;
}

.reader-container {
  width: 100%;
  max-width: 900px;
  height: 90vh;
  background: var(--bg-dark-space);
  border: var(--border-glass-hover);
  border-radius: var(--border-radius-md);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.reader-header {
  padding: 24px 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.reader-title-wrap h3 {
  font-size: 22px;
  margin-bottom: 4px;
}

.reader-title-meta {
  display: flex;
  gap: 12px;
}

.btn-close-reader {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.btn-close-reader:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.reader-body {
  flex-grow: 1;
  overflow-y: auto;
  padding: 40px 48px;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 40px;
}

.reader-text {
  font-family: 'Outfit', sans-serif;
  font-size: 19px;
  line-height: 1.85;
  color: var(--text-secondary);
}

.reader-text p {
  margin-bottom: 24px;
}

/* Clickable words inside stories */
.vocab-word {
  color: var(--color-teal);
  border-bottom: 1.5px dashed var(--color-teal);
  cursor: pointer;
  padding: 0 2px;
  transition: var(--transition-fast);
}

.vocab-word:hover {
  background: rgba(100, 255, 218, 0.12);
  color: var(--color-teal-bright);
}

.reader-sidebar {
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  padding-left: 30px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 0;
  align-self: start;
}

.vocab-panel-title {
  font-size: 15px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

.vocab-card-placeholder {
  color: var(--text-muted);
  font-size: 14px;
  font-style: italic;
  padding: 20px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--border-radius-sm);
  border: 1px dashed rgba(255, 255, 255, 0.05);
  text-align: center;
}

.vocab-card-active {
  background: rgba(100, 255, 218, 0.03);
  border: 1px solid rgba(100, 255, 218, 0.2);
  border-radius: var(--border-radius-sm);
  padding: 20px;
  box-shadow: var(--shadow-teal);
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    transform: translateY(10px);
    opacity: 0;
  }

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

.vocab-term {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-teal);
  margin-bottom: 6px;
}

.vocab-pos {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 12px;
}

.vocab-definition {
  font-size: 14px;
  color: var(--text-primary);
  margin-bottom: 14px;
}

.vocab-ex-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 4px;
  display: block;
}

.vocab-example {
  font-size: 13px;
  color: var(--text-secondary);
  font-style: italic;
  background: rgba(0, 0, 0, 0.15);
  padding: 8px;
  border-left: 2px solid var(--color-teal);
  border-radius: 0 4px 4px 0;
}

.reader-footer {
  padding: 20px 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.15);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.reader-progress-bar {
  flex-grow: 1;
  max-width: 400px;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.reader-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--gradient-primary);
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* --- DICTIONARY PAGE --- */
.dictionary-hero {
  text-align: center;
  padding: 30px 0;
}

.dictionary-search-container {
  max-width: 680px;
  margin: 30px auto;
  position: relative;
}

.dictionary-search-box {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, rgba(22, 34, 63, 0.75) 0%, rgba(13, 21, 39, 0.9) 100%);
  border: 1px solid rgba(100, 255, 218, 0.2);
  border-radius: 40px;
  padding: 6px 10px 6px 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 0 15px rgba(100, 255, 218, 0.03);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.dictionary-search-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 40px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(100, 255, 218, 0.4), rgba(0, 242, 254, 0.1), rgba(168, 85, 247, 0.3));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.dictionary-search-box:focus-within {
  border-color: rgba(100, 255, 218, 0.5);
  box-shadow: 0 0 25px rgba(100, 255, 218, 0.25), 0 10px 35px rgba(0, 0, 0, 0.45);
  transform: translateY(-1px);
}

.dictionary-search-box:focus-within::before {
  opacity: 1;
}

.dictionary-input {
  flex-grow: 1;
  font-size: 17px;
  padding: 12px 0;
  font-weight: 500;
  color: var(--text-primary);
  background: transparent;
  border: none;
  outline: none;
}

.dictionary-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.dictionary-btn-search {
  width: 46px;
  height: 46px;
  background: linear-gradient(135deg, var(--color-teal) 0%, #00b4d8 100%);
  color: #0d1527;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(100, 255, 218, 0.3);
  flex-shrink: 0;
}

.dictionary-btn-search:hover {
  background: linear-gradient(135deg, #00f2fe 0%, var(--color-teal) 100%);
  transform: scale(1.08) rotate(5deg);
  box-shadow: 0 6px 20px rgba(0, 242, 254, 0.5);
}

.dictionary-btn-search:active {
  transform: scale(0.95);
}

.search-svg-icon {
  stroke: #0d1527;
  transition: transform 0.2s ease;
}

.dictionary-btn-search:hover .search-svg-icon {
  transform: scale(1.1);
}

.dict-autocomplete-wrapper {
  position: relative;
  width: 100%;
}

.dict-autocomplete-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 100%;
  max-height: 280px;
  overflow-y: auto;
  background: rgba(13, 21, 39, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(100, 255, 218, 0.2);
  border-radius: 14px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
  z-index: 100;
  list-style: none;
  padding: 6px 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.dict-autocomplete-dropdown::-webkit-scrollbar {
  width: 6px;
}

.dict-autocomplete-dropdown::-webkit-scrollbar-thumb {
  background: rgba(100, 255, 218, 0.2);
  border-radius: 6px;
}

.dict-autocomplete-item {
  padding: 12px 20px;
  font-size: 15px;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  border-left: 3px solid transparent;
}

.dict-autocomplete-item:hover,
.dict-autocomplete-item.active-autocomplete-item {
  background: linear-gradient(90deg, rgba(100, 255, 218, 0.15) 0%, rgba(100, 255, 218, 0.02) 100%);
  color: var(--color-teal);
  border-left: 3px solid var(--color-teal);
  padding-left: 23px;
}

.dict-suggestions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.dict-suggest-tag {
  font-size: 13px;
  background: rgba(22, 34, 63, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 6px 12px;
  border-radius: 20px;
  cursor: pointer;
  color: var(--text-secondary);
}

.dict-suggest-tag:hover {
  border-color: var(--color-teal);
  color: var(--color-teal);
}

/* .dictionary-results-container and .dict-glass-card structural styles moved to global.css */
.dict-result-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 24px;
  margin-bottom: 32px;
}

.dict-result-word-info h2 {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text-primary);
  background: linear-gradient(135deg, #ffffff 40%, var(--color-teal) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 8px;
}

.dict-ipa-wrapper {
  display: flex;
  align-items: center;
  gap: 16px;
}

.dict-result-ipa {
  font-size: 15px;
  color: var(--color-teal);
  font-family: 'Outfit', 'Inter', monospace;
  background: rgba(100, 255, 218, 0.08);
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid rgba(100, 255, 218, 0.15);
  letter-spacing: 0.5px;
}

.btn-dict-speak {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.btn-dict-speak:hover {
  background: rgba(100, 255, 218, 0.1);
  border-color: var(--color-teal);
  color: var(--color-teal);
  transform: translateY(-1px);
}

.btn-dict-speak.speaking {
  background: rgba(100, 255, 218, 0.15);
  border-color: var(--color-teal);
  color: var(--color-teal-bright);
  animation: speakPulse 1.5s infinite ease-in-out;
}

@keyframes speakPulse {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.8;
    transform: scale(0.97);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* .dict-results-grid and .dict-tabs-sidebar structural layout styles moved to global.css */
.dict-sidebar-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-left: 8px;
  margin-bottom: 4px;
}

.dict-context-tabs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 0;
}

.dict-context-tab-btn {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 16px;
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
}

.tab-btn-content {
  display: flex;
  align-items: center;
  gap: 14px;
}

.tab-icon {
  font-size: 20px;
  background: rgba(255, 255, 255, 0.03);
  padding: 8px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.tab-text-wrapper {
  display: flex;
  flex-direction: column;
}

.dict-context-tab-btn h4 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 2px;
  color: var(--text-primary);
}

.dict-context-tab-btn span {
  font-size: 11px;
  color: var(--text-muted);
}

.dict-context-tab-btn:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateX(4px);
}

.dict-context-tab-btn.active {
  background: rgba(100, 255, 218, 0.04);
  border-color: var(--color-teal);
  box-shadow: 0 4px 20px rgba(100, 255, 218, 0.08);
}

.dict-context-tab-btn.active .tab-icon {
  background: rgba(100, 255, 218, 0.1);
  transform: scale(1.1);
}

.dict-context-tab-btn.active h4 {
  color: var(--color-teal-bright);
}

.dict-context-tab-btn.active span {
  color: var(--text-secondary);
}

/* .dict-meanings-column structural styles moved to global.css */
.dict-sentences-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Sentence items and highlighting */
.dict-sentence-item {
  background: rgba(15, 23, 42, 0.35);
  border-left: 3px solid var(--color-blue-accent);
  padding: 16px 20px;
  border-radius: 0 12px 12px 0;
  transition: all 0.2s ease;
  margin-bottom: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.02);
  border-right: 1px solid rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}

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

.dict-sentence-item:hover {
  border-left-color: var(--color-teal);
  background: rgba(15, 23, 42, 0.5);
  box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.02);
}

.dict-sentence-en {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 6px;
  line-height: 1.5;
}

.dict-sentence-en strong {
  color: var(--color-teal-bright);
  background: rgba(100, 255, 218, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(100, 255, 218, 0.15);
  font-weight: 600;
}

.dict-sentence-tr {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.4;
  padding-left: 2px;
}

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

.dict-empty-state h3 {
  font-size: 20px;
  margin-bottom: 10px;
  color: var(--text-secondary);
}

/* --- ECOSYSTEM PAGE --- */
.ecosystem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
  padding: 10px 0 30px 0;
  max-width: 1180px;
  margin: 0 auto;
}

@media (max-width: 1024px) {
  .ecosystem-grid {
    grid-template-columns: 1fr;
  }
}

.ecosystem-hero {
  text-align: center;
  padding: 20px 0 0 0;
}

.ecosystem-visuals {
  display: flex;
  justify-content: center;
  position: relative;
}

.discord-card {
  max-width: 440px;
  width: 100%;
  border: 1px solid rgba(88, 101, 242, 0.2);
}

.discord-card:hover {
  border-color: rgba(88, 101, 242, 0.5);
  box-shadow: 0 0 30px rgba(88, 101, 242, 0.2);
}

.discord-header {
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.discord-icon {
  width: 50px;
  height: 50px;
  background: #5865f2;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.discord-header-text h3 {
  font-size: 20px;
  color: var(--text-primary);
}

.discord-status {
  font-size: 12px;
  color: #3ba55d;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.status-dot {
  width: 8px;
  height: 8px;
  background: #3ba55d;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 8px #3ba55d;
}

.discord-desc {
  font-size: 15px;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.discord-features-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 30px;
}

.discord-features-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text-secondary);
}

.discord-features-list li::before {
  content: '✓';
  color: var(--color-teal);
  font-weight: 700;
}

.btn-discord {
  background: #5865f2;
  color: white;
  width: 100%;
}

.btn-discord:hover {
  background: #4752c4;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(88, 101, 242, 0.4);
}

.app-store-grid {
  display: flex;
  gap: 16px;
  margin-top: 30px;
}

.app-badge-placeholder {
  flex: 1;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--border-radius-sm);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: not-allowed;
  opacity: 0.7;
}

.app-badge-placeholder:hover {
  opacity: 0.95;
}

.app-badge-icon {
  font-size: 24px;
  color: var(--text-muted);
}

.app-badge-text {
  text-align: left;
}

.app-badge-text span {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.app-badge-text strong {
  font-size: 14px;
  color: var(--text-secondary);
}

/* --- ABOUT US PAGE --- */
.about-hero {
  text-align: center;
  padding: 30px 0 30px 0;
  max-width: 800px;
  margin: 0 auto;
}

.about-hero h1 {
  font-size: 54px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 20px;
  background: linear-gradient(135deg, #ffffff 45%, var(--color-teal) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.02em;
}

.about-hero p {
  font-size: 19px;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 680px;
  margin: 0 auto;
}

.team-section {
  padding: 60px 0;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 40px;
  margin-top: 40px;
}

.team-card {
  position: relative;
  text-align: center;
  padding: 48px 32px;
  background: rgba(13, 21, 39, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.4s, box-shadow 0.4s;
  overflow: hidden;
  z-index: 2;
}

.team-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(320px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
      var(--spotlight-color, rgba(100, 255, 218, 0.08)),
      transparent 80%);
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 1;
  pointer-events: none;
}

.team-card:hover::before {
  opacity: 1;
}

.team-card:hover {
  transform: translateY(-8px);
  border-color: var(--team-hover-border, rgba(100, 255, 218, 0.35));
  box-shadow: 0 15px 35px var(--team-hover-shadow, rgba(100, 255, 218, 0.08));
}

.team-card:nth-child(1) {
  --spotlight-color: rgba(100, 255, 218, 0.08);
  --team-hover-border: rgba(100, 255, 218, 0.35);
  --team-hover-shadow: rgba(100, 255, 218, 0.08);
  --avatar-shadow: var(--shadow-teal);
  --avatar-border: var(--color-teal);
}

.team-card:nth-child(2) {
  --spotlight-color: rgba(0, 180, 216, 0.08);
  --team-hover-border: rgba(0, 180, 216, 0.35);
  --team-hover-shadow: rgba(0, 180, 216, 0.08);
  --avatar-shadow: 0 0 15px rgba(0, 180, 216, 0.3);
  --avatar-border: #00b4d8;
}

.team-avatar-frame {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  margin: 0 auto 24px auto;
  position: relative;
  border: 2px solid var(--avatar-border, var(--color-teal));
  padding: 5px;
  box-shadow: var(--avatar-shadow, var(--shadow-teal));
  background: rgba(0, 0, 0, 0.2);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s;
  z-index: 2;
}

.team-card:hover .team-avatar-frame {
  transform: scale(1.05);
  box-shadow: var(--avatar-shadow, var(--shadow-teal)), 0 0 25px var(--avatar-border, var(--color-teal));
}

.team-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.team-card h3 {
  font-size: 20px;
  font-weight: 700;
  color: white;
  margin-bottom: 8px;
  position: relative;
  z-index: 2;
}

.team-role {
  font-size: 12px;
  color: var(--avatar-border, var(--color-teal));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
  position: relative;
  z-index: 2;
}

.team-bio {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  position: relative;
  z-index: 2;
}

.linkedin-btn {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 5px;
  margin-top: 6px;
  padding: 4px 10px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--color-teal, #64ffda);
  background: rgba(100, 255, 218, 0.08);
  border: 1px solid rgba(100, 255, 218, 0.25);
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: relative;
  z-index: 2;
  line-height: 1;
}

.linkedin-btn:hover {
  color: #0d1527 !important;
  background: var(--color-teal, #64ffda);
  border-color: var(--color-teal, #64ffda);
  transform: translateY(-1.5px) scale(1.02);
  box-shadow: 0 4px 12px rgba(100, 255, 218, 0.3);
}

.creator-cyan .linkedin-btn {
  color: #00b4d8;
  background: rgba(0, 180, 216, 0.08);
  border-color: rgba(0, 180, 216, 0.25);
}

.creator-cyan .linkedin-btn:hover {
  color: #090d16 !important;
  background: #00b4d8 !important;
  border-color: #00b4d8 !important;
  box-shadow: 0 4px 12px rgba(0, 180, 216, 0.35);
}

.creator-purple .linkedin-btn {
  color: #c084fc;
  background: rgba(168, 85, 247, 0.08);
  border-color: rgba(168, 85, 247, 0.25);
}

.creator-purple .linkedin-btn:hover {
  color: #ffffff !important;
  background: #a855f7 !important;
  border-color: #a855f7 !important;
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.35);
}

.linkedin-icon {
  width: 12px;
  height: 12px;
  transition: transform 0.25s ease;
}

.linkedin-btn:hover .linkedin-icon {
  transform: scale(1.15);
}

.partners-section {
  padding: 60px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.partners-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
  margin-top: 40px;
}

.partner-logo {
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 12px 24px;
  border-radius: 10px;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  letter-spacing: 0.02em;
}

.partner-logo:hover {
  color: white;
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* --- PROFILE PAGE --- */
.profile-nav-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid transparent;
  border-left: 3px solid transparent;
  border-radius: 4px;
  font-weight: 600;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
}

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

.profile-nav-btn.active {
  background: rgba(100, 255, 218, 0.08);
  color: var(--color-teal);
  border-left: 3px solid var(--color-teal);
}

.profile-nav-btn .icon {
  font-size: 18px;
}

.profile-tab-content {
  display: none;
  animation: fadeIn 0.3s ease;
}

.profile-tab-content.active {
  display: block;
}

.profile-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 40px;
  align-items: start;
}

.profile-card-left {
  text-align: center;
  padding: 40px 30px;
}

.profile-avatar-big {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  object-fit: cover;
  border: none;
  box-shadow: none;
  margin: 0 auto 20px auto;
}

.profile-name-title {
  font-size: 22px;
  margin-bottom: 6px;
}

.profile-level-badge {
  display: inline-block;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--color-teal);
  border: 1.5px solid var(--color-teal);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  padding: 5px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 30px;
  letter-spacing: 0.5px;
}

.profile-meta-details {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

.profile-meta-item {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

.profile-meta-item span {
  color: var(--text-muted);
}

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

.btn-logout,
#btn-profile-logout {
  margin-top: auto !important;
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  background: rgba(239, 68, 68, 0.12) !important;
  border: 1.5px solid rgba(239, 68, 68, 0.45) !important;
  color: #ef4444 !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  border-radius: 12px !important;
  transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}

.btn-logout:hover,
#btn-profile-logout:hover {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4) !important;
  transform: translateY(-2px) !important;
}

.profile-right-hub {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.dashboard-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.stat-item-card {
  padding: 24px;
  text-align: center;
}

.stat-val {
  font-size: 36px;
  font-weight: 800;
  color: var(--color-teal);
  margin-bottom: 6px;
  line-height: 1;
}

.stat-lbl {
  font-size: 13px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.settings-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

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

.form-row label {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 600;
}

.form-input,
.form-select {
  background: rgba(6, 11, 19, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px 16px;
  border-radius: var(--border-radius-sm);
  color: var(--text-primary);
  font-size: 15px;
  width: 100%;
}

.form-input:focus,
.form-select:focus {
  border-color: var(--color-teal);
}

.avatar-selector-grid {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.avatar-option {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
  transition: var(--transition-fast);
}

/* --- Theme Visual Color Palette Grid --- */
.theme-palette-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 12px;
  width: 100%;
  margin-top: 8px;
}

.theme-palette-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.theme-palette-card:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(100, 255, 218, 0.35);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}

.theme-palette-card.active {
  background: linear-gradient(135deg, rgba(100, 255, 218, 0.12) 0%, rgba(0, 242, 254, 0.06) 100%) !important;
  border-color: #64ffda !important;
  box-shadow: 0 0 18px rgba(100, 255, 218, 0.28), inset 0 0 10px rgba(100, 255, 218, 0.08) !important;
}

.palette-swatch-preview {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 0 4px rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.25);
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.theme-palette-card:hover .palette-swatch-preview {
  transform: scale(1.1);
}

.theme-palette-card.active .palette-swatch-preview {
  border-color: #ffffff;
  box-shadow: 0 0 14px rgba(100, 255, 218, 0.6);
}

.palette-color-dots {
  display: flex;
  gap: 3px;
  align-items: center;
}

.color-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.palette-info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow: hidden;
}

.palette-name {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.palette-desc {
  font-size: 10.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.palette-check {
  display: none;
  font-size: 13px;
  font-weight: 850;
  color: #64ffda;
  margin-left: auto;
}

.theme-palette-card.active .palette-check {
  display: block;
}

@media (max-width: 600px) {
  .theme-palette-grid {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .theme-palette-card {
    padding: 10px 8px !important;
    gap: 8px !important;
    border-radius: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .palette-swatch-preview {
    width: 30px !important;
    height: 30px !important;
  }

  .palette-name {
    font-size: 11.5px !important;
  }

  .palette-desc {
    font-size: 9px !important;
  }
}

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

.avatar-option.selected {
  border-color: var(--color-teal);
  box-shadow: var(--shadow-teal);
  transform: scale(1.1);
}

/* --- REVOLUTIONIZED ACHIEVEMENTS & MILESTONES SYSTEM --- */
.achievements-dashboard-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(16px);
  border-radius: 16px;
}

.achievements-dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.achievements-header-stats {
  display: flex;
  gap: 12px;
}

.ach-stat-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 8px 16px;
  border-radius: 12px;
  min-width: 90px;
}

.ach-stat-val {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-teal);
}

.ach-stat-lbl {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.achievements-progress-track {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  overflow: hidden;
}

.achievements-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #00b4d8 0%, #64ffda 100%);
  border-radius: 4px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 10px rgba(100, 255, 218, 0.4);
}

/* Achievements Filter Pills */
.achievements-filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.ach-filter-pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ach-filter-pill:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  transform: translateY(-1px);
}

.ach-filter-pill.active {
  background: rgba(100, 255, 218, 0.15);
  border-color: var(--color-teal);
  color: var(--color-teal);
  box-shadow: 0 0 12px rgba(100, 255, 218, 0.2);
}

.ach-filter-pill.tier-btn-bronze.active {
  background: rgba(205, 127, 50, 0.2);
  border-color: #cd7f32;
  color: #e69c55;
  box-shadow: 0 0 12px rgba(205, 127, 50, 0.3);
}

.ach-filter-pill.tier-btn-silver.active {
  background: rgba(192, 192, 192, 0.2);
  border-color: #c0c0c0;
  color: #e0e0e0;
  box-shadow: 0 0 12px rgba(192, 192, 192, 0.3);
}

.ach-filter-pill.tier-btn-gold.active {
  background: rgba(255, 215, 0, 0.2);
  border-color: #ffd700;
  color: #ffe047;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.3);
}

.ach-filter-pill.tier-btn-diamond.active {
  background: rgba(0, 240, 255, 0.2);
  border-color: #00f0ff;
  color: #70f8ff;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.35);
}

.ach-filter-pill.tier-btn-mythic.active {
  background: linear-gradient(135deg, rgba(255, 51, 102, 0.3), rgba(255, 153, 0, 0.3));
  border-color: #ff6b00;
  color: #ffaa55;
  box-shadow: 0 0 16px rgba(255, 107, 0, 0.4);
}

/* Achievements List Grid */
.milestones-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.milestone-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: rgba(22, 34, 63, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 16px;
  border-radius: 14px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.milestone-card:hover {
  transform: translateY(-3px);
  background: rgba(22, 34, 63, 0.55);
}

/* Locked Card Styling */
.milestone-card.locked {
  opacity: 0.65;
  filter: grayscale(0.2);
}

.milestone-card.locked:hover {
  opacity: 0.85;
}

/* Tier Specific Glowing Borders for Unlocked Cards */
.milestone-card.unlocked.tier-bronze {
  border-color: rgba(205, 127, 50, 0.35);
  background: linear-gradient(135deg, rgba(205, 127, 50, 0.08) 0%, rgba(22, 34, 63, 0.4) 100%);
  box-shadow: 0 4px 15px rgba(205, 127, 50, 0.12);
}

.milestone-card.unlocked.tier-silver {
  border-color: rgba(192, 192, 192, 0.4);
  background: linear-gradient(135deg, rgba(192, 192, 192, 0.08) 0%, rgba(22, 34, 63, 0.4) 100%);
  box-shadow: 0 4px 15px rgba(192, 192, 192, 0.14);
}

.milestone-card.unlocked.tier-gold {
  border-color: rgba(255, 215, 0, 0.45);
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(22, 34, 63, 0.45) 100%);
  box-shadow: 0 4px 20px rgba(255, 215, 0, 0.18);
}

.milestone-card.unlocked.tier-diamond {
  border-color: rgba(0, 240, 255, 0.5);
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.12) 0%, rgba(22, 34, 63, 0.5) 100%);
  box-shadow: 0 4px 25px rgba(0, 240, 255, 0.22);
}

.milestone-card.unlocked.tier-mythic {
  border-color: rgba(255, 107, 0, 0.65);
  background: linear-gradient(135deg, rgba(255, 51, 102, 0.15) 0%, rgba(255, 153, 0, 0.1) 50%, rgba(22, 34, 63, 0.55) 100%);
  box-shadow: 0 4px 30px rgba(255, 80, 0, 0.3);
  animation: mythicCardPulse 4s infinite alternate ease-in-out;
}

@keyframes mythicCardPulse {
  0% {
    box-shadow: 0 4px 25px rgba(255, 51, 102, 0.25);
    border-color: rgba(255, 51, 102, 0.5);
  }
  100% {
    box-shadow: 0 4px 35px rgba(255, 153, 0, 0.45);
    border-color: rgba(255, 153, 0, 0.8);
  }
}

/* Milestone Icons */
.milestone-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.3s ease;
}

.milestone-card.unlocked .milestone-icon {
  transform: scale(1.05);
}

.milestone-card.unlocked.tier-bronze .milestone-icon {
  background: rgba(205, 127, 50, 0.15);
  border-color: rgba(205, 127, 50, 0.3);
}

.milestone-card.unlocked.tier-silver .milestone-icon {
  background: rgba(192, 192, 192, 0.15);
  border-color: rgba(192, 192, 192, 0.3);
}

.milestone-card.unlocked.tier-gold .milestone-icon {
  background: rgba(255, 215, 0, 0.15);
  border-color: rgba(255, 215, 0, 0.35);
}

.milestone-card.unlocked.tier-diamond .milestone-icon {
  background: rgba(0, 240, 255, 0.15);
  border-color: rgba(0, 240, 255, 0.4);
}

.milestone-card.unlocked.tier-mythic .milestone-icon {
  background: linear-gradient(135deg, rgba(255, 51, 102, 0.25), rgba(255, 153, 0, 0.25));
  border-color: rgba(255, 107, 0, 0.5);
  box-shadow: 0 0 15px rgba(255, 107, 0, 0.4);
}

/* Milestone Info Content */
.milestone-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

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

.milestone-info h4 {
  font-size: 14px;
  font-weight: 700;
  margin: 0;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.milestone-card.unlocked .milestone-info h4 {
  color: var(--text-primary);
}

.milestone-tier-badge {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.milestone-tier-badge.tier-bronze { color: #cd7f32; border-color: rgba(205, 127, 50, 0.4); background: rgba(205, 127, 50, 0.1); }
.milestone-tier-badge.tier-silver { color: #c0c0c0; border-color: rgba(192, 192, 192, 0.4); background: rgba(192, 192, 192, 0.1); }
.milestone-tier-badge.tier-gold { color: #ffd700; border-color: rgba(255, 215, 0, 0.4); background: rgba(255, 215, 0, 0.1); }
.milestone-tier-badge.tier-diamond { color: #00f0ff; border-color: rgba(0, 240, 255, 0.4); background: rgba(0, 240, 255, 0.1); }
.milestone-tier-badge.tier-mythic { color: #ff9900; border-color: rgba(255, 107, 0, 0.5); background: rgba(255, 51, 102, 0.15); }

.milestone-info p {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
  margin: 2px 0 6px 0;
}

/* Item Progress Bar inside Card */
.milestone-card-progress {
  margin-top: auto;
  padding-top: 4px;
}

.milestone-card-progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-muted);
  margin-bottom: 3px;
  font-weight: 600;
}

.milestone-card-mini-track {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  overflow: hidden;
}

.milestone-card-mini-fill {
  height: 100%;
  background: var(--color-teal);
  border-radius: 2px;
  transition: width 0.4s ease;
}

/* --- AUTH MODAL SYSTEM --- */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(6, 11, 19, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 3000;
  display: none;
  justify-content: center;
  align-items: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal-overlay.active {
  display: flex;
  opacity: 1;
}

.modal-card {
  width: 100%;
  max-width: 420px;
  background: var(--bg-dark-space);
  border: var(--border-glass-hover);
  border-radius: var(--border-radius-md);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  padding: 40px;
  position: relative;
  transform: translateY(20px);
  transition: transform 0.3s ease;
}

.modal-overlay.active .modal-card {
  transform: translateY(0);
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  color: var(--text-muted);
}

.modal-close:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.modal-title {
  font-size: 26px;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.modal-subtitle {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 24px;
}

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

.modal-btn-submit {
  margin-top: 10px;
  width: 100%;
}

.modal-footer-switch {
  text-align: center;
  margin-top: 20px;
  font-size: 13px;
  color: var(--text-muted);
}

.modal-footer-switch .switch-label {
  color: var(--text-muted, #94a3b8);
  cursor: default;
  font-weight: 400;
  text-decoration: none;
}

.modal-footer-switch .switch-link,
.modal-footer-switch #switch-to-register,
.modal-footer-switch #switch-to-login {
  color: var(--color-teal, #64ffda);
  cursor: pointer;
  font-weight: 600;
}

.modal-footer-switch .switch-link:hover,
.modal-footer-switch #switch-to-register:hover,
.modal-footer-switch #switch-to-login:hover {
  color: var(--color-teal-bright, #00f2fe);
}

/* Footer Section */
.global-footer {
  background: rgba(6, 11, 19, 0.95);
  border-top: 1px solid rgba(100, 255, 218, 0.05);
  padding: 60px 40px 30px 40px;
  margin-top: 80px;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
  margin-bottom: 40px;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

.footer-info {
  max-width: 320px;
}

.footer-info .logo {
  margin-bottom: 16px;
}

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

.footer-links-col h4 {
  font-size: 15px;
  color: var(--text-primary);
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.footer-links-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links-col a {
  font-size: 14px;
  color: var(--text-muted);
}

.footer-links-col a:hover {
  color: var(--color-teal);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--text-muted);
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

.footer-socials {
  display: flex;
  gap: 16px;
}

.footer-social-icon {
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  transition: var(--transition-fast);
}

.footer-social-icon:hover {
  background: rgba(100, 255, 218, 0.08);
  color: var(--color-teal);
}

/* Response and Alerts styling */
.toast-msg {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 12px 24px;
  background: var(--bg-dark-slate);
  border: 1px solid var(--color-teal);
  color: var(--text-primary);
  border-radius: var(--border-radius-sm);
  box-shadow: var(--shadow-teal);
  font-size: 14px;
  font-weight: 500;
  z-index: 5000;
  animation: slideUp 0.3s ease;
}

.toast-msg.error {
  border-color: #ef4444;
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.25);
}

/* Responsive breakpoint media queries */
@media (max-width: 992px) {
  .hero {
    flex-direction: column;
    text-align: center;
    padding: 40px 0;
  }

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

  .hero-desc {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-ctas {
    justify-content: center;
  }

  .hero-image {
    width: 100%;
    margin-top: 40px;
  }

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

  .filter-sidebar {
    position: static;
  }

  .filter-options {
    flex-direction: row;
    flex-wrap: wrap;
  }

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

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

@media (max-width: 768px) {
  .navbar {
    padding: 0 20px;
  }

  .nav-links {
    position: fixed;
    top: 80px;
    left: 0;
    width: 100%;
    height: calc(100vh - 80px);
    background: var(--bg-dark-void);
    flex-direction: column;
    padding: 40px 0;
    gap: 24px;
    z-index: 999;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
  }

  .nav-links.mobile-active {
    transform: translateX(0);
  }

  .burger-menu {
    display: flex;
  }

  .nav-auth {
    margin-right: 16px;
    gap: 10px;
    flex-shrink: 0;
  }

  .lang-switch-container {
    width: 74px;
    height: 28px;
    padding: 2px;
    border-radius: 16px;
    flex-shrink: 0;
  }

  .lang-glider {
    border-radius: 12px;
  }

  .lang-btn {
    font-size: 10px;
    border-radius: 12px;
  }

  #nav-btn-login {
    min-width: 86px;
    flex-shrink: 0;
  }

  .mock-reader-widget {
    height: 350px !important;
    max-width: 100% !important;
  }

  .mock-reader-widget .widget-content {
    padding: 14px 16px !important;
  }

  .mock-reader-widget .mock-story-text {
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-top: 2px !important;
  }

  .mock-reader-widget .mock-popover {
    top: 115px !important;
    left: 12px !important;
    right: 12px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
  }

  .mock-reader-widget .popover-header {
    margin-bottom: 4px !important;
  }

  .mock-reader-widget .popover-term {
    font-size: 15px !important;
  }

  .mock-reader-widget .popover-def {
    font-size: 12px !important;
    margin-bottom: 6px !important;
    line-height: 1.35 !important;
  }

  .mock-reader-widget .popover-example {
    font-size: 11.5px !important;
    line-height: 1.35 !important;
    padding-left: 8px !important;
  }

  .reader-body {
    grid-template-columns: 1fr;
    padding: 24px 20px;
  }

  .reader-sidebar {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-left: 0;
    padding-top: 24px;
  }

  .dict-results-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .dict-context-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .dict-context-tab-btn {
    padding: 12px 8px;
    text-align: center;
  }

  .dict-context-tab-btn:hover {
    transform: none;
  }

  .tab-btn-content {
    flex-direction: column;
    gap: 6px;
  }

  .tab-icon {
    padding: 6px;
    font-size: 16px;
  }

  .dict-context-tab-btn span {
    display: none;
  }

  .dict-context-tab-btn h4 {
    font-size: 13px;
  }

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

  .milestones-list {
    grid-template-columns: 1fr;
  }
}

.modal-gate-ctas {
  display: flex;
  gap: 16px;
  margin-top: 24px;
}

@media (max-width: 480px) {
  .nav-auth {
    gap: 6px;
    margin-right: 6px;
    flex-shrink: 0;
  }

  .lang-switch-container {
    width: 68px;
    height: 26px;
    border-radius: 14px;
    padding: 2px;
    flex-shrink: 0;
  }

  .lang-glider {
    border-radius: 10px;
  }

  .lang-btn {
    font-size: 9.5px;
    border-radius: 10px;
  }

  #nav-btn-login {
    min-width: 76px;
    flex-shrink: 0;
    padding: 6px 10px !important;
    font-size: 11.5px !important;
  }

  .mock-reader-widget {
    height: 340px !important;
  }

  .mock-reader-widget .widget-content {
    padding: 10px 12px !important;
  }

  .mock-reader-widget .mock-story-text {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  .mock-reader-widget .mock-popover {
    top: 108px !important;
    left: 8px !important;
    right: 8px !important;
    padding: 10px 12px !important;
  }

  .mock-reader-widget .popover-term {
    font-size: 14px !important;
  }

  .mock-reader-widget .popover-def {
    font-size: 11.5px !important;
    margin-bottom: 5px !important;
    line-height: 1.3 !important;
  }

  .mock-reader-widget .popover-example {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

  .modal-gate-ctas {
    flex-direction: column;
    gap: 12px;
  }
}

/* Gateway Action Cards Section */
.gateway-section {
  padding: 60px 0;
  width: 100%;
}

.gateway-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
  max-width: 1000px;
  margin: 0 auto;
}

/* Gateway Cards styling */
.gateway-card {
  background: var(--gradient-glass);
  border: var(--border-glass-hover);
  border-radius: var(--border-radius-lg);
  padding: 40px 32px;
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: var(--transition-smooth);
}

.gateway-card:hover {
  transform: translateY(-8px);
  border-color: var(--color-teal);
  box-shadow: var(--shadow-card), var(--shadow-teal-strong);
}

.scroll-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.gateway-card .card-icon {
  font-size: 40px;
  margin-bottom: 20px;
  background: rgba(100, 255, 218, 0.06);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(100, 255, 218, 0.15);
  box-shadow: var(--shadow-teal);
  transition: var(--transition-smooth);
}

.gateway-card:hover .card-icon {
  background: rgba(100, 255, 218, 0.15);
  transform: scale(1.05);
}

.gateway-card .card-subtitle {
  color: var(--color-teal);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 12px;
}

.gateway-card h2 {
  font-size: 28px;
  margin-bottom: 12px;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.gateway-card p {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 30px;
  flex-grow: 1;
}

.gateway-card .btn {
  padding: 12px 30px;
  font-size: 14px;
  letter-spacing: 0.02em;
}

/* Responsive constraints for Gateway Cards */
@media (max-width: 768px) {
  .gateway-section {
    padding: 40px 0;
  }

  .gateway-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
  }
}

/* =========================================
   LOGIN & ADMIN LAYOUT (FOUC PREVENTION)
========================================= */
/* Hide Guest UI for logged in users instantly */
body.logged-in #nav-btn-login {
  display: none !important;
}

body.logged-in #nav-btn-mailbox {
  display: flex !important;
}

body.logged-in #nav-user-badge {
  display: flex !important;
}

body.logged-in #nav-btn-logout {
  display: block !important;
}

/* Desktop Top-Bar Red Log Out Button */
#nav-btn-logout {
  background: rgba(239, 68, 68, 0.12) !important;
  border: 1.5px solid rgba(239, 68, 68, 0.45) !important;
  color: #ef4444 !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  border-radius: 12px !important;
  transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.15) !important;
}

#nav-btn-logout:hover {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4) !important;
  transform: translateY(-2px) !important;
}

/* Global Red Cancel / Close Glass Button with Hover Effect */
.btn-danger-glass {
  background: rgba(239, 68, 68, 0.15) !important;
  border: 1.5px solid rgba(239, 68, 68, 0.45) !important;
  color: #ef4444 !important;
  font-weight: 700 !important;
  border-radius: 30px !important;
  padding: 9px 24px !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.15) !important;
}

.btn-danger-glass:hover {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.45) !important;
  transform: translateY(-2px) !important;
}

body.logged-in .nav-links li[data-page="home"] {
  display: none !important;
}

body.admin-mode #nav-btn-mailbox {
  display: none !important;
}

/* Default state for admin-only links */
.admin-only-link {
  display: none;
}

/* Visibility rules for Admin Mode */
body.admin-mode .admin-only-link {
  display: block;
}

body.admin-mode .nav-links li[data-page="about"],
body.logged-in .nav-links li[data-page="profile"],
body.admin-mode li#nav-admin-link {
  display: none !important;
}

body.admin-mode .admin-tabs-nav {
  display: none !important;
}

body.logged-in .navbar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 260px;
  height: 111.2vh !important;
  /* Zoom compensation (100vh / 0.9 = 111.11vh) */
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 30px 20px 40px 20px;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: none !important;
  z-index: 100;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-teal, rgba(100, 255, 218, 0.4)) transparent;
}

body.logged-in .navbar::-webkit-scrollbar {
  width: 4px;
}

body.logged-in .navbar::-webkit-scrollbar-track {
  background: transparent;
}

body.logged-in .navbar::-webkit-scrollbar-thumb {
  background: var(--color-teal, rgba(100, 255, 218, 0.4));
  border-radius: 4px;
}

body.logged-in .navbar::-webkit-scrollbar-thumb:hover {
  background: var(--color-teal-bright, rgba(100, 255, 218, 0.7));
}

body.logged-in .navbar .logo {
  margin-bottom: 40px;
  font-size: 28px;
  width: 100%;
  padding-left: 16px;
  /* Align perfectly with nav link text */
  margin-top: 10px;
  /* Give breathing room from top */
}

body.logged-in .nav-links {
  flex-direction: column;
  width: 100%;
  gap: 8px;
}

body.logged-in .nav-links li {
  width: 100%;
}

body.logged-in .nav-links li a {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-radius: 8px;
  width: 100%;
  transition: all 0.2s;
  color: var(--text-secondary);
  font-weight: 500;
  border-left: 3px solid transparent;
  box-sizing: border-box;
}

body.logged-in .nav-links li a:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-teal);
  border-left-color: rgba(100, 255, 218, 0.3);
}

body.logged-in .nav-links li.active a {
  background: rgba(100, 255, 218, 0.08);
  color: var(--color-teal);
  border-left-color: var(--color-teal);
  font-weight: 600;
}

/* Remove bottom active indicator for sidebar */
body.logged-in .nav-links li a::after {
  display: none;
}

/* Admin specific overrides inside sidebar */
body.admin-mode .nav-links li#nav-admin-link a {
  color: #f59e0b;
}

body.admin-mode .nav-links li#nav-admin-link.active a {
  background: rgba(245, 158, 11, 0.1);
  border-left-color: #f59e0b;
}

body.logged-in .nav-auth {
  margin-top: auto;
  width: 100%;
  flex-direction: column;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 24px;
}

body.logged-in .user-badge {
  width: 100%;
  justify-content: center;
  padding: 12px 16px;
  margin-left: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.2s;
  box-sizing: border-box;
}

body.logged-in .user-badge:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

/* body.logged-in .main-content layout styles moved to global.css */
body.logged-in .global-footer {
  display: none;
}

/* Global Scale Mismatch Fix for Logged-in Desktop users */
@media (min-width: 769px) {
  body.logged-in {
    zoom: 0.9;
  }
}

/* Mobile Unified Override */
@media (max-width: 768px) {
  body.logged-in .navbar {
    position: relative;
    width: 100%;
    height: auto !important;
    flex-direction: row;
    padding: 20px;
    background: rgba(0, 0, 0, 0.4) !important;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    overflow-y: visible !important;
  }

  body.logged-in .main-content,
  body.logged-in .global-footer {
    margin-left: 0;
    width: 100%;
    padding: 20px;
  }

  body.logged-in .nav-links {
    display: none;
    /* Let burger menu handle it */
  }

  body.logged-in .nav-auth {
    margin-top: 0;
    width: auto;
    flex-direction: row;
    align-items: center;
  }

  body.logged-in .navbar .logo {
    margin-bottom: 0;
    width: auto;
    padding-left: 0;
    margin-top: 0;
  }
}

/* Dictionary POS Tags and Meanings */
.dict-meaning-block {
  margin-top: 0;
  margin-bottom: 24px;
  background: rgba(22, 34, 63, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);
}

.dict-meaning-block:last-child {
  margin-bottom: 0;
}

.dict-meaning-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.dict-meaning-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.dict-meaning-def {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.45;
  width: 100%;
  word-break: break-word;
}

.pos-tag {
  display: inline-block;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.pos-tag.verb {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.pos-tag.noun {
  background: rgba(59, 130, 246, 0.15);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.pos-tag.adj,
.pos-tag.adjective {
  background: rgba(16, 185, 129, 0.15);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.pos-tag.adv,
.pos-tag.adverb {
  background: rgba(245, 158, 11, 0.15);
  color: #fcd34d;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.pos-tag.idiom {
  background: rgba(139, 92, 246, 0.15);
  color: #c4b5fd;
  border: 1px solid rgba(139, 92, 246, 0.3);
}

.pos-tag.pronoun {
  background: rgba(236, 72, 153, 0.15);
  color: #fbcfe8;
  border: 1px solid rgba(236, 72, 153, 0.3);
}

.pos-tag.preposition {
  background: rgba(14, 165, 233, 0.15);
  color: #7dd3fc;
  border: 1px solid rgba(14, 165, 233, 0.3);
}

.pos-tag.conjunction {
  background: rgba(168, 85, 247, 0.15);
  color: #e9d5ff;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.pos-tag.interjection {
  background: rgba(234, 179, 8, 0.15);
  color: #fef08a;
  border: 1px solid rgba(234, 179, 8, 0.3);
}

.pos-tag.determiner {
  background: rgba(99, 102, 241, 0.15);
  color: #c7d2fe;
  border: 1px solid rgba(99, 102, 241, 0.3);
}

.pos-tag.phrase {
  background: rgba(20, 184, 166, 0.15);
  color: #99f6e4;
  border: 1px solid rgba(20, 184, 166, 0.3);
}

.pos-tag.abbreviation {
  background: rgba(107, 114, 128, 0.15);
  color: #e5e7eb;
  border: 1px solid rgba(107, 114, 128, 0.3);
}

/* ==========================================================================
   HOMEPAGE SCROLL STORYTELLING SYSTEM
   ========================================================================== */
.scrolly-container {
  position: relative;
  height: 240vh;
  /* Tightened scroll duration */
}

.scrolly-sticky {
  position: sticky;
  top: 100px;
  /* Offset to clear guest top navbar */
  height: calc(100vh - 160px);
  /* Fill the viewport box */
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-lg);
}

.scrolly-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.92) translateY(30px);
  filter: blur(10px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.8s;
  padding: 0 20px;
  z-index: 2;
}

.scrolly-slide.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(0);
  filter: blur(0);
}

/* Ambient Shifting Background Glow */
.scrolly-ambient-glow {
  position: absolute;
  width: 650px;
  height: 650px;
  border-radius: 50%;
  background: var(--scrolly-glow-color, rgba(168, 85, 247, 0.18));
  filter: blur(150px);
  z-index: 1;
  pointer-events: none;
  transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1),
    background 1.5s cubic-bezier(0.16, 1, 0.3, 1);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
}

/* Top Progress Tracking Bar */
.scrolly-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--color-teal), #00f2fe);
  box-shadow: 0 0 8px rgba(0, 242, 254, 0.5);
  z-index: 100;
  transition: width 0.1s ease-out;
}

/* Vertical Slide Dot Indicators */
.scrolly-dots {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 100;
}

.scrolly-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  position: relative;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.scrolly-dot:hover {
  background: rgba(100, 255, 218, 0.6);
  transform: scale(1.2);
}

.scrolly-dot.active {
  background: var(--color-teal);
  box-shadow: 0 0 12px var(--color-teal);
  transform: scale(1.25);
  height: 24px;
  /* Morph to pill */
  border-radius: 4px;
}

/* Hover tooltips on dots */
.scrolly-dot::after {
  content: attr(title);
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  background: rgba(8, 12, 24, 0.95);
  border: 1px solid rgba(100, 255, 218, 0.15);
  padding: 6px 12px;
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.scrolly-dot:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

/* Premium Staggered Content Cascades */
.scrolly-card>* {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.scrolly-slide.active .scrolly-card>* {
  opacity: 1;
  transform: translateY(0);
}

.scrolly-slide.active .scrolly-card .card-icon {
  transition-delay: 0.15s;
}

.scrolly-slide.active .scrolly-card .card-subtitle {
  transition-delay: 0.22s;
}

.scrolly-slide.active .scrolly-card h2 {
  transition-delay: 0.29s;
}

.scrolly-slide.active .scrolly-card p {
  transition-delay: 0.36s;
}

.scrolly-slide.active .scrolly-card .btn {
  transition-delay: 0.43s;
}

/* Parallax Hero Exit Split */
.scrolly-slide.slide-hero .hero-content {
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.9s ease, filter 0.9s ease;
}

.scrolly-slide.slide-hero .hero-image {
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.9s ease, filter 0.9s ease;
}

.scrolly-slide.slide-hero.active .hero-content,
.scrolly-slide.slide-hero.active .hero-image {
  transform: translate(0, 0) scale(1);
  opacity: 1;
  filter: blur(0);
}

.scrolly-slide.slide-hero:not(.active) .hero-content {
  transform: translateX(-100px) scale(0.96);
  opacity: 0;
  filter: blur(8px);
}

.scrolly-slide.slide-hero:not(.active) .hero-image {
  transform: translateX(100px) scale(0.96);
  opacity: 0;
  filter: blur(8px);
}

/* Split Layout for Widgets */
.scrolly-split-layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 48px;
  width: 100%;
  max-width: 1120px;
  align-items: center;
  justify-content: center;
  z-index: 2;
  position: relative;
}

.scrolly-feature-preview {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* Mock Widgets Base Styles */
.mock-widget {
  width: 100%;
  max-width: 480px;
  height: 330px;
  background: rgba(10, 16, 28, 0.65);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(100, 255, 218, 0.15);
  border-radius: 20px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.widget-header {
  height: 38px;
  background: rgba(0, 0, 0, 0.35);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  padding: 0 18px;
  gap: 6px;
}

.widget-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.widget-dot.red {
  background: #ff5f56;
}

.widget-dot.yellow {
  background: #ffbd2e;
}

.widget-dot.green {
  background: #27c93f;
}

.widget-title {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  margin-left: 8px;
}

.widget-content {
  flex-grow: 1;
  padding: 24px;
  position: relative;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Mock Reader Elements */
.mock-story-text {
  font-size: 16px;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 8px;
}

.mock-highlight {
  position: relative;
  color: var(--color-teal);
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px dashed rgba(100, 255, 218, 0.45);
  padding: 0 2px;
  transition: all 0.3s ease;
}

.mock-highlight.clicked {
  background: rgba(100, 255, 218, 0.12);
  border-bottom-color: var(--color-teal);
}

.mock-popover {
  position: absolute;
  top: 130px;
  left: 24px;
  right: 24px;
  background: rgba(8, 18, 32, 0.96);
  border: 1px solid rgba(100, 255, 218, 0.25);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 20px rgba(100, 255, 218, 0.15);
  border-radius: 14px;
  padding: 18px;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.95);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.mock-popover.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

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

.popover-term {
  font-family: 'Outfit', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
}

.popover-pos {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-teal);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.popover-def {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 8px;
  line-height: 1.45;
}

.popover-example {
  font-size: 12.5px;
  color: var(--text-muted);
  font-style: italic;
  border-left: 2px solid rgba(100, 255, 218, 0.3);
  padding-left: 8px;
}

/* Mock Lookup Elements */
.mock-search-bar {
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 10px 16px;
  gap: 12px;
  margin-bottom: 18px;
}

.search-icon {
  color: var(--text-muted);
  font-size: 14px;
}

.mock-search-input-wrap {
  font-family: monospace;
  font-size: 14.5px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
}

.mock-search-cursor {
  color: var(--color-teal);
  animation: mock-blink 1s infinite step-end;
  font-weight: bold;
  margin-left: 1px;
}

@keyframes mock-blink {

  from,
  to {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

.mock-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}

.mock-tab {
  flex-grow: 1;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 8px 0;
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.3s ease;
}

.mock-tab.active {
  background: rgba(100, 255, 218, 0.08);
  border-color: rgba(100, 255, 218, 0.3);
  color: var(--color-teal);
  box-shadow: 0 0 12px rgba(100, 255, 218, 0.06);
}

.mock-result-box {
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  padding: 16px;
  height: 100px;
  display: flex;
  align-items: center;
  position: relative;
}

.result-sentence {
  position: absolute;
  left: 16px;
  right: 16px;
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.4s ease;
  pointer-events: none;
}

.result-sentence.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.sentence-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 6px;
}

.sentence-text {
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
}

.sentence-text .text-glow {
  color: #00f2fe;
  text-shadow: 0 0 10px rgba(0, 242, 254, 0.4);
  font-weight: 600;
}

/* Mock Cursor Pointer */
.mock-cursor {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
  z-index: 100;
  pointer-events: none;
  transition: top 1.2s cubic-bezier(0.25, 1, 0.5, 1),
    left 1.2s cubic-bezier(0.25, 1, 0.5, 1),
    transform 0.2s ease;
  top: 110%;
  /* Hidden by default */
  left: 50%;
}

.mock-cursor.clicking {
  transform: scale(0.7);
  background: var(--color-teal);
  box-shadow: 0 0 15px var(--color-teal);
}

/* Stack styling inside slides */
.scrolly-slide .hero {
  width: 100%;
  margin: 0;
  padding: 0;
  justify-content: space-around;
}

.scrolly-card-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 620px;
}

.scrolly-card {
  width: 100%;
  background: var(--bg-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: var(--border-glass);
  padding: 44px;
  border-radius: var(--border-radius-lg);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-card);
  transition: var(--transition-smooth);
}

.scrolly-card:hover {
  border-color: rgba(100, 255, 218, 0.4);
  box-shadow: 0 0 35px rgba(100, 255, 218, 0.2), var(--shadow-card);
  transform: translateY(-8px);
}

/* Mouse Scroll Down Indicator */
.scroll-indicator {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0.6;
  animation: pulse-scroll 2.5s infinite ease-in-out;
  pointer-events: none;
  z-index: 10;
}

.indicator-mouse {
  width: 20px;
  height: 32px;
  border: 2px solid var(--text-muted);
  border-radius: 12px;
  position: relative;
}

.indicator-wheel {
  width: 4px;
  height: 8px;
  background-color: var(--color-teal);
  border-radius: 2px;
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  animation: scroll-wheel 1.6s infinite ease-in-out;
}

.indicator-text {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  font-weight: 600;
}

@keyframes pulse-scroll {

  0%,
  100% {
    opacity: 0.4;
  }

  50% {
    opacity: 0.8;
  }
}

@keyframes scroll-wheel {
  0% {
    transform: translate(-50%, 0);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, 8px);
    opacity: 0;
  }
}

/* Responsive adjustment for scrollytelling */
@media (max-width: 991px) {
  .scrolly-split-layout {
    grid-template-columns: 1fr;
    max-width: 620px;
    gap: 0;
  }

  .scrolly-feature-preview {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: 16px !important;
  }

  .scrolly-slide .hero {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }

  .scrolly-slide .hero-content {
    max-width: 100%;
  }

  .scrolly-slide .hero-image {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: 16px !important;
  }

  .scrolly-card>*,
  .scrolly-slide .scrolly-card>*,
  .scrolly-slide:not(.active) .scrolly-card>*,
  .scrolly-slide.active .scrolly-card>* {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }
}

/* ==========================================
   ADMIN CMS CONTENT PUBLISHER SUB-TABS
   ========================================== */
.cms-mode-switcher {
  display: flex;
  gap: 12px;
  margin-bottom: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 15px;
}

.cms-sub-tab-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
}

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

.cms-sub-tab-btn.active {
  color: #64ffda;
  background: rgba(100, 255, 218, 0.1);
  border: 1px solid rgba(100, 255, 218, 0.4);
}

.cms-subpage {
  animation: fadeInCMS 0.25s ease-out;
}

@keyframes fadeInCMS {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

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

/* ==========================================
   SMART TAGGING & LIVE PREVIEW SYSTEM
   ========================================== */
.cms-smart-tag-panel {
  display: none;
  background: rgba(18, 18, 18, 0.95);
  border: 1px solid rgba(100, 255, 218, 0.25);
  border-top: none;
  border-radius: 0 0 8px 8px;
  margin-top: -1px;
  max-height: 180px;
  overflow-y: auto;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  padding: 4px 0;
}

.smart-tag-item {
  padding: 8px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
  transition: all 0.15s ease-in-out;
  color: var(--text-secondary);
}

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

.smart-tag-item:hover,
.smart-tag-item.active {
  background: rgba(100, 255, 218, 0.08);
  color: var(--color-teal) !important;
}

.smart-tag-item .tag-left {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}

.smart-tag-item .tag-word {
  font-weight: 600;
  font-size: 13px;
}

.smart-tag-item .tag-pos {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(255, 255, 255, 0.05);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--text-muted);
}

.smart-tag-item .tag-def {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 250px;
}

.smart-tag-item.custom-opt {
  color: var(--color-teal);
  font-style: italic;
  font-weight: 500;
  font-size: 13px;
  justify-content: flex-start;
}

.cms-live-preview-container {
  margin-top: 24px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.01);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.2);
}

.vocab-word-preview {
  color: var(--color-teal);
  text-decoration: underline dotted;
  text-underline-offset: 4px;
  cursor: help;
  position: relative;
  font-weight: 500;
  transition: color 0.2s;
}

.vocab-word-preview:hover {
  color: #00f2fe;
}

/* Tooltip on Hover in Live Preview */
.vocab-word-preview::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translate(-50%, 4px);
  background: rgba(15, 15, 15, 0.98);
  border: 1px solid rgba(100, 255, 218, 0.35);
  color: var(--text-primary);
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.45;
  white-space: normal;
  width: 240px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
  z-index: 1000;
  text-align: left;
}

.vocab-word-preview:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* --- MY WORDBOOK PAGE (WORD PRACTICE ARENA) --- */
.wordbook-top-bar {
  margin-bottom: 24px;
}

.wordbook-mode-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.cyber-word-chip {
  background: rgba(18, 30, 58, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 10px 14px;
  border-radius: 14px;
  color: white;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.cyber-word-chip:hover {
  background: rgba(100, 255, 218, 0.08);
  border-color: rgba(100, 255, 218, 0.3);
  transform: translateX(4px);
}

.cyber-word-chip.active {
  background: rgba(100, 255, 218, 0.22) !important;
  border-color: #64ffda !important;
  box-shadow: 0 0 20px rgba(100, 255, 218, 0.45), inset 0 0 12px rgba(100, 255, 218, 0.2) !important;
  transform: translateY(-2px);
}

.cyber-word-chip.active span:first-child {
  color: #64ffda !important;
  text-shadow: 0 0 10px rgba(100, 255, 218, 0.5);
}

/* Flowing Drag and Transfer Animations */
.cyber-word-chip.dragging {
  opacity: 0.4;
  transform: scale(0.95);
  border: 1.5px dashed #64ffda !important;
}

.cyber-word-chip.drag-over {
  border-color: #ffb703 !important;
  box-shadow: 0 0 15px rgba(255, 183, 3, 0.4) !important;
  transform: scale(1.03);
}

.wordbook-list-container.drag-target-active,
#quantum-word-matrix-list.drag-target-active {
  border: 2px dashed rgba(100, 255, 218, 0.4) !important;
  background: rgba(100, 255, 218, 0.04) !important;
  border-radius: 16px;
}

.chip-flowing-out {
  animation: flowOut 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.chip-flowing-in {
  animation: flowIn 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes flowOut {
  0% { transform: scale(1) translateY(0); opacity: 1; }
  50% { transform: scale(0.85) translateY(-10px); opacity: 0.5; }
  100% { transform: scale(0.6) translateY(-20px); opacity: 0; }
}

@keyframes flowIn {
  0% { transform: scale(0.7) translateY(15px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* Cool Cyber-Glass Shuffle Buttons (No Emojis, Sleek SVG & Hover Spin) */
#practice-flashcard-inner.flipped {
  transform: rotateY(180deg);
}

.cool-shuffle-btn {
  background: linear-gradient(135deg, rgba(100, 255, 218, 0.08), rgba(18, 30, 58, 0.85));
  border: 1px solid var(--color-teal);
  color: var(--color-teal);
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 20px;
  padding: 7px 16px;
  font-size: 11px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  position: relative;
  overflow: hidden;
  margin-left: auto;
}

.cool-shuffle-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(100, 255, 218, 0.25), transparent);
  transition: left 0.5s ease;
}

.cool-shuffle-btn:hover::before {
  left: 100%;
}

.cool-shuffle-btn:hover {
  background: linear-gradient(135deg, rgba(100, 255, 218, 0.22), rgba(0, 180, 216, 0.3));
  border-color: #64ffda;
  color: #ffffff;
  box-shadow: 0 0 20px rgba(100, 255, 218, 0.4);
  transform: translateY(-1px);
}

.cool-shuffle-btn:active {
  transform: scale(0.95);
}

.cool-shuffle-btn svg {
  width: 13px;
  height: 13px;
  transition: transform 0.4s ease;
  flex-shrink: 0;
}

.cool-shuffle-btn:hover svg {
  transform: rotate(180deg);
}

/* Compact matrix header shuffle button variant */
.cool-shuffle-btn.cool-shuffle-btn-sm {
  padding: 4px 12px;
  font-size: 10px;
  border-radius: 12px;
  letter-spacing: 0.06em;
  margin-left: 0;
}

/* Animated Tab Vector Icons for Saved Vocabulary & Word Practice */
.animated-tab-icon {
  display: inline-block;
  vertical-align: middle;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
}

.wordbook-mode-btn:hover .animated-tab-icon {
  transform: scale(1.25);
  filter: drop-shadow(0 0 6px currentColor);
}

.wordbook-mode-btn.active .animated-tab-icon.tab-icon-deck {
  animation: pulseDeck 2.5s infinite ease-in-out;
}

.wordbook-mode-btn.active .animated-tab-icon.tab-icon-target {
  animation: spinTarget 8s infinite linear;
}

@keyframes pulseDeck {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 2px rgba(13, 21, 39, 0.5));
  }
  50% {
    transform: translateY(-2px) scale(1.15);
    filter: drop-shadow(0 0 8px rgba(13, 21, 39, 0.8));
  }
}

@keyframes spinTarget {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.15);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

.word-practice-arena-card {
  position: relative;
  overflow: hidden;
}

.word-practice-arena-card::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(100, 255, 218, 0.04) 0%, transparent 65%);
  pointer-events: none;
}

.dictation-playing {
  animation: soundwaveRing 0.8s infinite alternate ease-in-out;
  box-shadow: 0 0 20px rgba(100, 255, 218, 0.6) !important;
}

@keyframes soundwaveRing {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(100, 255, 218, 0.7); }
  100% { transform: scale(1.12); box-shadow: 0 0 0 12px rgba(100, 255, 218, 0); }
}

.streak-badge {
  box-shadow: 0 0 15px rgba(255, 183, 3, 0.15);
  animation: streakPulse 2s infinite ease-in-out;
}

@keyframes streakPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

.letter-tile {
  background: linear-gradient(135deg, rgba(22, 38, 74, 0.95), rgba(13, 21, 39, 0.95));
  border: 1px solid rgba(100, 255, 218, 0.35);
  color: var(--color-teal);
  font-size: 17px;
  font-weight: 800;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  user-select: none;
  text-transform: uppercase;
  box-shadow: 0 6px 14px rgba(0,0,0,0.3);
}

.letter-tile:hover {
  background: var(--color-teal);
  color: #0d1527;
  transform: translateY(-4px) scale(1.12);
  box-shadow: 0 10px 22px rgba(100, 255, 218, 0.4);
}

.letter-tile:active {
  transform: translateY(1px) scale(0.96);
}

.letter-tile.used {
  opacity: 0.25;
  cursor: pointer;
  border-color: rgba(255, 255, 255, 0.08);
  transform: none;
  box-shadow: none;
}

.study-tab-btn {
  background: transparent;
  color: var(--text-muted);
  border: none;
  font-family: inherit;
  transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.study-tab-btn:hover {
  color: white;
  background: rgba(255, 255, 255, 0.06) !important;
}

.study-tab-btn.active {
  color: var(--color-teal) !important;
  background: rgba(100, 255, 218, 0.1) !important;
  border-bottom: none !important;
  box-shadow: 0 4px 16px rgba(100, 255, 218, 0.15);
}

.quiz-option-btn {
  background: rgba(18, 30, 58, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: white !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  font-size: 14px !important;
  font-weight: 600;
  text-align: left !important;
  transition: all 0.25s ease !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.quiz-option-btn:hover {
  background: rgba(100, 255, 218, 0.08) !important;
  border-color: rgba(100, 255, 218, 0.3) !important;
  transform: translateX(4px);
}

.pos-filter-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  padding: 5px 12px;
  border-radius: 16px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.165, 0.84, 0.44, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pos-filter-btn:hover {
  background: rgba(100, 255, 218, 0.12);
  color: white;
  border-color: rgba(100, 255, 218, 0.35);
  transform: translateY(-1px);
}

.pos-filter-btn.active {
  background: var(--color-teal);
  color: #0d1527;
  border-color: var(--color-teal);
  box-shadow: 0 4px 14px rgba(100, 255, 218, 0.35);
  font-weight: 900;
}

.wordbook-list-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.wordbook-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px;
  gap: 14px;
  position: relative;
  background: rgba(18, 30, 58, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.3s, box-shadow 0.3s;
}

.wordbook-card:hover {
  transform: translateY(-3px);
  border-color: rgba(100, 255, 218, 0.3);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3), 0 0 15px rgba(100, 255, 218, 0.05);
}

.wordbook-audio-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  color: var(--color-teal);
  transition: all 0.2s ease;
  margin-left: 6px;
}

.wordbook-audio-btn:hover {
  background: var(--color-teal);
  color: #0d1527;
  transform: scale(1.12);
}

.wordbook-card-content {
  flex-grow: 1;
}

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

.wordbook-card-term {
  font-size: 20px;
  font-weight: 700;
  color: white;
}

.wordbook-card-def {
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.5;
  margin-bottom: 12px;
}

.wordbook-card-ex {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
  padding-left: 12px;
  border-left: 2px solid rgba(100, 255, 218, 0.3);
}

/* Danger Action Button (Red counterpart to .btn-linkedin-style) */
.btn-danger-style,
#detail-modal-delete {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 20px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #ef233c !important;
  background: rgba(239, 35, 60, 0.03) !important;
  border: 1px solid #ef233c !important;
  border-radius: 24px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  box-shadow: none !important;
}

.btn-danger-style:hover,
#detail-modal-delete:hover {
  color: #0d1527 !important;
  background: #ef233c !important;
  border-color: #ef233c !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(239, 35, 60, 0.4) !important;
}

/* Sleek Admin & Dashboard Action Buttons (Edit & Delete) */
.btn-admin-edit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--color-teal, #64ffda) !important;
  background: rgba(100, 255, 218, 0.04) !important;
  border: 1px solid var(--color-teal, #64ffda) !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  box-shadow: none !important;
  line-height: 1.2 !important;
}

.btn-admin-edit:hover {
  background: var(--color-teal, #64ffda) !important;
  border-color: var(--color-teal, #64ffda) !important;
  color: #0d1527 !important;
  box-shadow: 0 4px 14px rgba(100, 255, 218, 0.35) !important;
  transform: translateY(-1.5px) !important;
}

.btn-admin-delete {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #ef233c !important;
  background: rgba(239, 35, 60, 0.04) !important;
  border: 1px solid #ef233c !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  box-shadow: none !important;
  line-height: 1.2 !important;
}

.btn-admin-delete:hover {
  background: #ef233c !important;
  border-color: #ef233c !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(239, 35, 60, 0.4) !important;
  transform: translateY(-1.5px) !important;
}

/* 3D Flashcards */
.flashcard-container-card {
  background: rgba(13, 21, 39, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.flashcard-deck {
  perspective: 1000px;
  width: 100%;
  max-width: 400px;
  height: 280px;
  margin: 0 auto 24px auto;
}

.flashcard-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
  cursor: pointer;
}

.flashcard-inner.flipped {
  transform: rotateY(180deg);
}

.flashcard-front,
.flashcard-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 32px;
  box-sizing: border-box;
  background: rgba(18, 30, 58, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.flashcard-front {
  color: white;
}

.flashcard-back {
  transform: rotateY(180deg);
  background: rgba(10, 25, 47, 0.95);
  border-color: rgba(100, 255, 218, 0.2);
}

.flashcard-term {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.flashcard-hint {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 16px;
}

.flashcard-pos {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-teal);
  margin-bottom: 12px;
}

.flashcard-def {
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.55;
  margin-bottom: 16px;
  text-align: center;
}

.flashcard-ex {
  font-size: 13px;
  color: var(--text-secondary);
  font-style: italic;
  text-align: center;
  opacity: 0.85;
}

.flashcard-inner:hover .flashcard-front {
  border-color: rgba(255, 255, 255, 0.15);
}

.flashcard-inner:hover .flashcard-back {
  border-color: rgba(100, 255, 218, 0.35);
}

/* Study Hub Styling */
.study-hub-card {
  background: rgba(13, 21, 39, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);
}

.study-tab-btn {
  background: transparent;
  color: var(--text-muted);
  border: none;
  font-family: inherit;
  transition: all 0.2s ease;
}

.study-tab-btn:hover {
  color: white;
  background: rgba(255, 255, 255, 0.03);
}

.study-tab-btn.active {
  color: var(--color-teal) !important;
  background: rgba(100, 255, 218, 0.06) !important;
  border-bottom: 2px solid var(--color-teal) !important;
  box-shadow: 0 2px 8px rgba(100, 255, 218, 0.05);
}

/* Flashcard Mastery Stars */
.flashcard-mastery-indicator {
  position: absolute;
  top: 16px;
  right: 20px;
  font-size: 14px;
  letter-spacing: 2px;
  color: #ffb703;
  text-shadow: 0 0 6px rgba(255, 183, 3, 0.4);
}

/* Quiz Option Buttons */
.quiz-option-btn {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.quiz-option-btn:hover:not(:disabled) {
  background: rgba(100, 255, 218, 0.05);
  border-color: rgba(100, 255, 218, 0.3);
  color: white;
  transform: translateX(4px);
}

.quiz-option-btn.correct {
  background: rgba(46, 196, 182, 0.15) !important;
  border-color: #2ec4b6 !important;
  color: #2ec4b6 !important;
  font-weight: 600;
  box-shadow: 0 0 10px rgba(46, 196, 182, 0.1);
}

.quiz-option-btn.wrong {
  background: rgba(239, 71, 111, 0.15) !important;
  border-color: #ef476f !important;
  color: #ef476f !important;
  text-decoration: line-through;
}

/* Feedback message classes */
.feedback-success {
  color: #2ec4b6;
  text-shadow: 0 0 8px rgba(46, 196, 182, 0.3);
  animation: bounceMini 0.4s ease;
}

.feedback-error {
  color: #ef476f;
  text-shadow: 0 0 8px rgba(239, 71, 111, 0.3);
  animation: shakeMini 0.4s ease;
}

/* Animations */
@keyframes bounceMini {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

@keyframes shakeMini {

  0%,
  100% {
    transform: translateX(0);
  }

  20%,
  60% {
    transform: translateX(-4px);
  }

  40%,
  80% {
    transform: translateX(4px);
  }
}

.shake-element {
  animation: shakeMini 0.4s ease;
}

/* --- SCOREBOARD PAGE --- */
.scoreboard-hero {
  text-align: center;
  padding: 30px 0 30px 0;
  max-width: 800px;
  margin: 0 auto;
}

.scoreboard-hero h2 {
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 20px;
  background: linear-gradient(135deg, #ffffff 45%, #fdca53 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.02em;
}

.scoreboard-hero p {
  color: var(--text-secondary);
  line-height: 1.6;
}

.scoreboard-container {
  max-width: 720px;
  margin: 20px auto 60px auto;
}

.scoreboard-card-wrap {
  padding: 30px;
  background: rgba(13, 21, 39, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.scoreboard-header-row {
  display: grid;
  grid-template-columns: 60px 65px 1fr 120px;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.scoreboard-row-item {
  display: grid;
  grid-template-columns: 60px 65px 1fr 120px;
  padding: 16px 20px;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  transition: background 0.3s;
}

/* --- 🏆 3D CHAMPION PODIUM STAGE --- */
.scoreboard-podium-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 16px;
  margin: 10px 0 36px 0;
  padding: 36px 20px 24px 20px;
  background: radial-gradient(circle at 50% 30%, rgba(255, 209, 102, 0.08) 0%, rgba(13, 21, 39, 0.6) 75%);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1), 0 15px 35px rgba(0, 0, 0, 0.4);
}

.scoreboard-podium-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 209, 102, 0.8), transparent);
}

.podium-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 190px;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
}

.podium-item:hover {
  transform: translateY(-8px);
}

/* Podium Positions (1st = Center, 2nd = Left, 3rd = Right) */
.podium-item-rank-1 { order: 2; z-index: 3; }
.podium-item-rank-2 { order: 1; z-index: 2; }
.podium-item-rank-3 { order: 3; z-index: 1; }

.podium-avatar-stage {
  position: relative;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.podium-crown {
  font-size: 26px;
  line-height: 1;
  margin-bottom: -6px;
  z-index: 4;
  filter: drop-shadow(0 4px 10px rgba(255, 215, 0, 0.6));
  animation: crownFloat 3s ease-in-out infinite alternate;
}

@keyframes crownFloat {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-4px) scale(1.08); }
}

.podium-avatar-ring {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  position: relative;
  padding: 3px;
  background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.05));
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.podium-item-rank-1 .podium-avatar-ring {
  width: 86px;
  height: 86px;
  background: linear-gradient(135deg, #ffd166, #ff9f1c);
  box-shadow: 0 0 25px rgba(255, 209, 102, 0.5);
}

.podium-item-rank-2 .podium-avatar-ring {
  background: linear-gradient(135deg, #e0e0e0, #8a9ba8);
  box-shadow: 0 0 20px rgba(224, 224, 224, 0.35);
}

.podium-item-rank-3 .podium-avatar-ring {
  background: linear-gradient(135deg, #e0a96d, #8c5319);
  box-shadow: 0 0 20px rgba(224, 169, 109, 0.35);
}

.podium-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: #0d1527;
}

.podium-info {
  text-align: center;
  margin-bottom: 10px;
}

.podium-username {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}

.podium-item-rank-1 .podium-username {
  font-size: 17px;
  color: #ffe6a7;
}

.podium-title-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 20px;
  margin-top: 4px;
  display: inline-block;
}

.podium-item-rank-1 .podium-title-tag {
  background: rgba(255, 209, 102, 0.18);
  color: #ffd166;
  border: 1px solid rgba(255, 209, 102, 0.4);
}

.podium-item-rank-2 .podium-title-tag {
  background: rgba(224, 224, 224, 0.15);
  color: #e0e0e0;
  border: 1px solid rgba(224, 224, 224, 0.3);
}

.podium-item-rank-3 .podium-title-tag {
  background: rgba(205, 127, 50, 0.18);
  color: #f4a261;
  border: 1px solid rgba(205, 127, 50, 0.3);
}

.podium-xp {
  font-size: 14px;
  font-weight: 800;
  color: var(--color-teal);
  margin-top: 2px;
}

.podium-pedestal {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 12px;
  border-radius: 14px 14px 8px 8px;
  position: relative;
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.15), 0 10px 25px rgba(0,0,0,0.4);
}

.podium-item-rank-1 .podium-pedestal {
  height: 125px;
  background: linear-gradient(180deg, rgba(255, 209, 102, 0.25) 0%, rgba(13, 21, 39, 0.85) 100%);
  border: 1px solid rgba(255, 209, 102, 0.4);
}

.podium-item-rank-2 .podium-pedestal {
  height: 95px;
  background: linear-gradient(180deg, rgba(192, 192, 192, 0.2) 0%, rgba(13, 21, 39, 0.85) 100%);
  border: 1px solid rgba(192, 192, 192, 0.3);
}

.podium-item-rank-3 .podium-pedestal {
  height: 75px;
  background: linear-gradient(180deg, rgba(205, 127, 50, 0.2) 0%, rgba(13, 21, 39, 0.85) 100%);
  border: 1px solid rgba(205, 127, 50, 0.3);
}

.podium-number {
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}

.podium-item-rank-1 .podium-number { color: #ffd166; }
.podium-item-rank-2 .podium-number { color: #c0c0c0; }
.podium-item-rank-3 .podium-number { color: #cd7f32; }

/* Rank Movement Indicators */
.rank-trend-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 12px;
  text-align: center;
  width: fit-content;
}

.rank-trend-up {
  background: rgba(46, 213, 115, 0.15);
  color: #2ed573;
  border: 1px solid rgba(46, 213, 115, 0.3);
}

.rank-trend-down {
  background: rgba(255, 71, 87, 0.15);
  color: #ff4757;
  border: 1px solid rgba(255, 71, 87, 0.3);
}

.rank-trend-same {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.rank-trend-new {
  background: rgba(100, 255, 218, 0.15);
  color: var(--color-teal);
  border: 1px solid rgba(100, 255, 218, 0.3);
}

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

.scoreboard-row-item.current-user {
  background: rgba(100, 255, 218, 0.03);
  border-left: 3px solid var(--color-teal);
  padding-left: 17px;
}

.scoreboard-rank {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-muted);
}

.scoreboard-row-item:nth-child(1) .scoreboard-rank {
  color: #ffd166;
}

.scoreboard-row-item:nth-child(2) .scoreboard-rank {
  color: #c0c0c0;
}

.scoreboard-row-item:nth-child(3) .scoreboard-rank {
  color: #cd7f32;
}

.scoreboard-user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.scoreboard-avatar-wrap {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 10px;
}

.scoreboard-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: none;
}

.scoreboard-username {
  font-size: 15px;
  font-weight: 600;
  color: white;
}

.scoreboard-level {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-teal);
  background: rgba(100, 255, 218, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.scoreboard-xp-value {
  font-size: 16px;
  font-weight: 700;
  color: white;
  text-align: right;
}

.scoreboard-countdown-bar {
  text-align: center;
  margin-top: 30px;
  font-size: 13px;
  color: var(--text-muted);
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
  padding-top: 20px;
}

#reset-timer-countdown {
  font-weight: 700;
  color: var(--color-teal);
}

/* --- ABOUT US FEEDBACK FORM --- */
#feedback-content:focus {
  border-color: var(--color-teal) !important;
  box-shadow: 0 0 10px rgba(100, 255, 218, 0.1);
}

/* Zoom Compensation for Modals & Background Canvas when body zoom is 0.9 */
@media (min-width: 769px) {

  body.logged-in .reader-modal,
  body.logged-in .modal-overlay {
    zoom: 1.11111;
  }

  body.logged-in #hero-particle-canvas {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    zoom: 1.111111 !important;
  }
}

/* --- USER MENU PAGE DASHBOARD --- */
.menu-grid {
  display: grid;
  grid-template-columns: 2fr 1.1fr;
  /* 2/3 left column, 1/3 right column */
  gap: 24px;
  align-items: start;
}

.menu-welcome-card {
  grid-column: 1 / -1;
  /* Spans across both columns */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 40px !important;
  border-radius: var(--border-radius-md);
  border: var(--border-glass);
  background: linear-gradient(135deg, rgba(22, 34, 63, 0.4) 0%, rgba(10, 25, 47, 0.4) 100%) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), inset 0 0 30px rgba(100, 255, 218, 0.02);
  flex-wrap: wrap;
  gap: 20px;
}

.welcome-left {
  flex: 1 1 300px;
}

.menu-welcome-wrap {
  flex-grow: 1;
}

.menu-greeting {
  font-size: 38px;
  font-weight: 800;
  margin: 10px 0;
  letter-spacing: -0.03em;
}

.menu-subtitle {
  color: var(--text-secondary);
  font-size: 14.5px;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  height: 22px;
  line-height: 22px;
}

.menu-streak-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 16px 14px !important;
  border-radius: var(--border-radius-md);
  border: var(--border-glass);
  flex: 0 0 135px;
  min-height: 135px;
  height: 135px;
  background: var(--gradient-glass);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.streak-icon {
  font-size: 26px;
  animation: floatStreak 3s ease-in-out infinite;
}

@keyframes floatStreak {

  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-5px) scale(1.1);
    filter: drop-shadow(0 0 10px rgba(255, 100, 0, 0.4));
  }
}

.streak-val {
  font-size: 16px;
  font-weight: 800;
  color: white;
  line-height: 1.1;
}

.streak-lbl {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Where to Begin - Launchpad Grid */
.menu-launchpad {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.panel-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  color: var(--text-primary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 10px;
}

.launchpad-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.launchpad-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  padding: 30px 20px !important;
  min-height: 255px;
  border-radius: var(--border-radius-md);
  border: var(--border-glass);
  background: var(--gradient-glass);
  cursor: pointer;
  overflow: hidden;
  transition: var(--transition-smooth);
}

.launchpad-card:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: rgba(100, 255, 218, 0.25);
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.5), 0 0 25px rgba(100, 255, 218, 0.08);
}

.card-glow-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.3;
  transition: opacity 0.5s ease;
}

.launchpad-card:hover .card-glow-overlay {
  opacity: 0.7;
}

.card-icon-wrap {
  font-size: 36px;
  flex-shrink: 0;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04) !important;
  border-radius: 20px !important;
  border: 1.5px solid var(--color-teal, rgba(100, 255, 218, 0.25)) !important;
  margin-bottom: 15px;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
}

.launchpad-card:hover .card-icon-wrap {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: var(--color-teal, #64ffda) !important;
  transform: scale(1.08) translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25), 0 0 15px var(--color-teal, rgba(100, 255, 218, 0.3)) !important;
}

.card-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 15px;
}

.card-body h4 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px 0;
  color: white;
}

.card-body p {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.4;
}

.card-action {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-teal, #64ffda) !important;
  opacity: 0.9 !important;
  transition: all 0.25s ease !important;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.launchpad-card:hover .card-action {
  opacity: 1 !important;
  color: var(--color-teal, #64ffda) !important;
  transform: translateX(4px) scale(1.05) !important;
}

/* Sidebar Stats Stack & Widgets */
.menu-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.menu-stats-card,
.menu-activity-card {
  padding: 24px !important;
  border-radius: var(--border-radius-md);
  border: var(--border-glass);
  background: var(--gradient-glass);
  min-height: 255px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media (max-width: 1024px) {
  .menu-grid {
    grid-template-columns: 1fr;
  }

  .menu-welcome-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px !important;
  }

  .welcome-right {
    width: 100%;
  }

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

.stats-sidebar-card {
  padding: 24px !important;
  border-radius: var(--border-radius-md);
  border: var(--border-glass);
  background: var(--gradient-glass);
}

.sidebar-card-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 20px 0;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.8;
}

/* Circular Chart */
.proficiency-progress-container {
  display: flex;
  align-items: center;
  gap: 20px;
}

.progress-ring-wrap {
  position: relative;
  width: 120px;
  height: 120px;
  flex-shrink: 0;
}

.progress-ring__circle {
  transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1);
  stroke-dasharray: 314.16;
  stroke-dashoffset: 314.16;
}

.progress-ring-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.prog-val {
  font-size: 22px;
  font-weight: 800;
  color: white;
  line-height: 1;
}

.prog-lbl {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-teal);
  text-transform: uppercase;
  margin-top: 4px;
}

.proficiency-stats {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 1;
}

.prof-stat-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  padding-bottom: 6px;
}

.prof-stat-row span {
  color: var(--text-muted);
}

.prof-stat-row strong {
  color: white;
}

/* Weekly Bar Chart */
.activity-chart-wrapper {
  margin-top: 10px;
}

.activity-chart-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 100px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 5px;
  gap: 10px;
}

.chart-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
  height: 100%;
  justify-content: flex-end;
  min-width: 0;
}

.bar-chart-wrap {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  min-height: 0;
}

.bar-chart-bar {
  width: 100%;
  background: linear-gradient(to top, rgba(100, 255, 218, 0.1) 0%, var(--color-teal) 100%);
  border-radius: 4px 4px 0 0;
  height: 0;
  transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-teal);
  position: relative;
  flex-shrink: 0;
}

.bar-chart-bar::after {
  content: attr(data-day);
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 700;
  background: var(--bg-dark-slate);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2px 4px;
  border-radius: 3px;
  color: white;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  white-space: nowrap;
}

.bar-chart-bar:hover::after {
  opacity: 1;
}

.bar-lbl {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
}

.bar-chart-bar.is-today {
  background: linear-gradient(to top, rgba(0, 242, 254, 0.25) 0%, #00f2fe 100%) !important;
  box-shadow: 0 0 15px rgba(0, 242, 254, 0.4) !important;
}

.bar-lbl.lbl-today {
  color: #00f2fe !important;
  font-weight: 700;
}

/* Word of the Day Card */
.word-of-the-day-card {
  position: relative;
  background: linear-gradient(135deg, rgba(22, 34, 63, 0.95) 0%, rgba(10, 25, 47, 0.95) 100%) !important;
  border: 1px solid rgba(100, 255, 218, 0.25) !important;
  box-shadow: 0 10px 40px rgba(100, 255, 218, 0.08), inset 0 0 20px rgba(100, 255, 218, 0.05);
  overflow: hidden;
  padding: 24px !important;
  border-radius: var(--border-radius-md);
  min-height: 255px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.wotd-particles {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, rgba(100, 255, 218, 0.15) 0%, transparent 70%);
  filter: blur(10px);
  pointer-events: none;
  animation: rotateWotdGlow 12s linear infinite;
}

@keyframes rotateWotdGlow {
  0% {
    transform: rotate(0deg) translate(0, 0);
  }

  50% {
    transform: rotate(180deg) translate(10px, -10px);
  }

  100% {
    transform: rotate(360deg) translate(0, 0);
  }
}

.wotd-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 10px;
}

.wotd-titles {
  flex-grow: 1;
}

.btn-wotd-speaker {
  background: rgba(100, 255, 218, 0.06);
  border: 1px solid rgba(100, 255, 218, 0.2);
  color: var(--color-teal);
  font-size: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 0 10px rgba(100, 255, 218, 0.05);
}

.btn-wotd-speaker:hover {
  background: var(--color-teal);
  color: var(--bg-dark-slate);
  transform: scale(1.1);
  box-shadow: var(--shadow-teal);
}

.wotd-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.wotd-action-btn {
  flex: 1;
  font-size: 12px;
  padding: 10px 14px;
  border-radius: var(--border-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
}

/* Micro-Illustration Visual Containers */
.card-visual {
  position: relative;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
}

/* 1. Stories: Book Page Flip */
.visual-stories {
  width: 30px;
  height: 22px;
  border: 2px solid var(--color-teal);
  border-radius: 3px;
  position: relative;
  background: rgba(100, 255, 218, 0.05);
}

.book-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.book-spine {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: var(--color-teal);
}

.book-pages {
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  display: flex;
}

.book-page {
  flex: 1;
  background: transparent;
  position: relative;
  transform-origin: left center;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.book-page.page-2 {
  transform-origin: left center;
}

.launchpad-card:hover .book-page.page-2 {
  transform: rotateY(-140deg);
  background: rgba(100, 255, 218, 0.25);
  box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.3);
}

/* 2. Dictionary: Scanning Magnifying Lens */
.visual-dictionary {
  width: 32px;
  height: 32px;
  position: relative;
}

.search-glass {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  z-index: 2;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-lens {
  width: 14px;
  height: 14px;
  border: 2.5px solid #00f2fe;
  border-radius: 50%;
  background: rgba(0, 242, 254, 0.1);
  box-shadow: 0 0 8px rgba(0, 242, 254, 0.2);
}

.glass-handle {
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 7px;
  height: 2.5px;
  background: #00f2fe;
  transform: rotate(45deg);
  transform-origin: left center;
}

.search-lines {
  position: absolute;
  right: 2px;
  bottom: 6px;
  width: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sl {
  height: 2px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 1px;
  transition: background 0.3s ease, width 0.3s ease;
}

.sl-1 {
  width: 12px;
}

.sl-2 {
  width: 8px;
}

.launchpad-card:hover .search-glass {
  transform: translate(8px, 4px) scale(1.1);
}

.launchpad-card:hover .sl {
  background: #00f2fe;
}

.launchpad-card:hover .sl-1 {
  width: 6px;
}

.launchpad-card:hover .sl-2 {
  width: 12px;
}

/* 3. Wordbook: 3D Flashcard Flip */
.visual-wordbook {
  width: 24px;
  height: 30px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.flashcard {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
}

.card-front {
  background: linear-gradient(135deg, rgba(0, 119, 182, 0.2) 0%, rgba(0, 119, 182, 0.5) 100%);
  border: 1.5px solid #0077b2;
  color: white;
  z-index: 2;
  transform: rotateY(0deg);
}

.card-back {
  background: #0077b2;
  border: 1.5px solid #00f2fe;
  color: white;
  transform: rotateY(180deg);
}

.launchpad-card:hover .visual-wordbook {
  transform: rotateY(180deg) scale(1.05);
}

/* 4. Scoreboard: Rising Podium Bars */
.visual-scoreboard {
  width: 32px;
  height: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3px;
}

.podium {
  width: 7px;
  background: linear-gradient(to top, rgba(245, 158, 11, 0.2) 0%, #f59e0b 100%);
  border-radius: 2px 2px 0 0;
  transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.bar-1 {
  height: 8px;
}

.bar-2 {
  height: 18px;
}

.bar-3 {
  height: 12px;
}

.launchpad-card:hover .bar-1 {
  height: 16px;
}

.launchpad-card:hover .bar-2 {
  height: 22px;
}

.launchpad-card:hover .bar-3 {
  height: 18px;
}

/* 5. Ecosystem: Connecting Node Pulse */
.visual-ecosystem {
  width: 32px;
  height: 32px;
  position: relative;
}

.node {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8b5cf6;
  border: 1px solid white;
  z-index: 2;
  transition: transform 0.4s ease, background 0.4s ease;
}

.n-1 {
  top: 4px;
  left: 13px;
}

.n-2 {
  bottom: 6px;
  left: 4px;
}

.n-3 {
  bottom: 6px;
  right: 4px;
}

.link {
  position: absolute;
  height: 2px;
  background: rgba(139, 92, 246, 0.3);
  transform-origin: left center;
  z-index: 1;
  transition: background 0.4s ease;
}

.l-1 {
  width: 16px;
  top: 7px;
  left: 16px;
  transform: rotate(120deg) scaleX(0.9);
}

.l-2 {
  width: 16px;
  top: 7px;
  left: 16px;
  transform: rotate(60deg) scaleX(0.9);
}

.launchpad-card:hover .node {
  transform: scale(1.3);
  background: #a78bfa;
  box-shadow: 0 0 8px #8b5cf6;
}

.launchpad-card:hover .link {
  background: #8b5cf6;
}

/* Word of the Day Card */
/* Word of the Day Card */
.word-of-the-day-card {
  position: relative;
  background: linear-gradient(135deg, rgba(22, 34, 63, 0.95) 0%, rgba(10, 25, 47, 0.95) 100%) !important;
  border: 1px solid rgba(100, 255, 218, 0.25) !important;
  box-shadow: 0 10px 40px rgba(100, 255, 218, 0.08), inset 0 0 20px rgba(100, 255, 218, 0.05);
  overflow: hidden;
  padding: 24px !important;
  border-radius: var(--border-radius-md);
  min-height: 255px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 1 350px;
  max-width: 450px;
}

.wotd-particles {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, rgba(100, 255, 218, 0.15) 0%, transparent 70%);
  filter: blur(10px);
  pointer-events: none;
  animation: rotateWotdGlow 12s linear infinite;
}

@keyframes rotateWotdGlow {
  0% {
    transform: rotate(0deg) translate(0, 0);
  }

  50% {
    transform: rotate(180deg) translate(10px, -10px);
  }

  100% {
    transform: rotate(360deg) translate(0, 0);
  }
}

/* Top Bar Row: WOTD Badge on Left, POS Tag on Right */
.wotd-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 12px;
}

.wotd-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-teal, #64ffda);
  background: transparent !important;
  border: 1.5px solid currentColor !important;
  padding: 4px 12px;
  border-radius: 30px;
  margin: 0;
}

.word-of-the-day-card .pos-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 6px;
  margin: 0;
}

/* POS specific badge themes matching dictionary styles */
.word-of-the-day-card .pos-tag.adjective {
  background: rgba(0, 119, 182, 0.15) !important;
  color: #90e0ef !important;
  border: 1px solid rgba(0, 119, 182, 0.3) !important;
}

.word-of-the-day-card .pos-tag.noun {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #a7f3d0 !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

.word-of-the-day-card .pos-tag.verb {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #fca5a5 !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

.word-of-the-day-card .pos-tag.idiom {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #fde68a !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

/* Main Word Line */
.wotd-header-row {
  margin-bottom: 12px;
  width: 100%;
}

.wotd-word-line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.wotd-term {
  font-size: 30px;
  font-weight: 850;
  color: white;
  margin: 0;
  letter-spacing: -0.02em;
  text-transform: capitalize;
  background: linear-gradient(135deg, #ffffff 0%, #a5b4fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.btn-wotd-speaker {
  font-size: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: white;
  margin: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}

.btn-wotd-speaker:hover,
.btn-wotd-speaker:active {
  background: rgba(100, 255, 218, 0.2);
  border-color: rgba(100, 255, 218, 0.5);
  transform: scale(1.1);
}

.wotd-ipa {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
  display: inline-block;
  margin: 0;
}

.wotd-example-box {
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 20px;
}

.ex-en {
  font-size: 14px;
  color: var(--text-secondary);
  font-style: italic;
  margin: 0;
}

/* Today's Session Card */
.menu-session-card {
  padding: 24px !important;
  border-radius: var(--border-radius-md);
  border: var(--border-glass);
  background: var(--gradient-glass);
  min-height: auto !important;
  /* doesn't need huge height */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@keyframes pulseTimer {

  0%,
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0px rgba(100, 255, 218, 0));
  }

  50% {
    transform: scale(1.08);
    filter: drop-shadow(0 0 10px rgba(100, 255, 218, 0.4));
  }
}

/* Avatar borders wrap (Rocket League style level borders!) */
.avatar-border-wrap {
  position: relative;
  display: inline-block;
  border-radius: 50%;
  box-sizing: border-box;
  z-index: 1;
  --orbit-radius: -69px;
  /* Default orbit radius for large avatar (130px / 2 + 4px) */
}

.avatar-border-wrap>* {
  border-radius: 50%;
  display: block;
  position: relative;
  z-index: 3;
}

/* Pseudo-element border overlay (Discord style decorations!) */
.avatar-border-wrap::after {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 50%;
  pointer-events: none;
  box-sizing: border-box;
  transition: all var(--transition-fast);
  z-index: 2;
}

/* 1. Default (plain glowing border) */
.avatar-border-wrap.border-default::after {
  border: 2px solid rgba(100, 255, 218, 0.25);
  box-shadow: 0 0 10px rgba(100, 255, 218, 0.1);
}

/* 2. Bronze Recruit (Unlocks at 100 XP) */
.avatar-border-wrap.border-bronze::after {
  border: 3px solid #cd7f32;
  box-shadow: 0 0 12px rgba(205, 127, 50, 0.4);
}

/* 3. Silver Scholar (Unlocks at 3-day active streak) */
.avatar-border-wrap.border-silver::after {
  border: 3px solid #b8c0c8;
  box-shadow: 0 0 15px rgba(184, 192, 200, 0.5);
}

/* 4. Golden Champion (Unlocks at 500 XP) - Premium Gold conic pulse */
.avatar-border-wrap.border-gold::after {
  border: 4px solid transparent;
  background-image: linear-gradient(#0c1524, #0c1524), linear-gradient(135deg, #ffe066, #f59e0b, #b45309);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.6);
  animation: pulseGoldBorder 2.5s infinite ease-in-out;
}

@keyframes pulseGoldBorder {

  0%,
  100% {
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.4);
  }

  50% {
    box-shadow: 0 0 25px rgba(245, 158, 11, 0.8);
  }
}

/* 5. Emerald Reader (Unlocks after 5 Stories) */
.avatar-border-wrap.border-emerald::after {
  border: 4px solid transparent;
  background-image: linear-gradient(#0c1524, #0c1524), linear-gradient(135deg, #34d399, #10b981, #065f46);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.6);
  animation: pulseEmeraldBorder 2s infinite ease-in-out;
}

@keyframes pulseEmeraldBorder {

  0%,
  100% {
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
  }

  50% {
    box-shadow: 0 0 28px rgba(16, 185, 129, 0.8);
  }
}

/* 6. Void Nebula Border (Unlocks after 15 lookups) - Rotating Cyber Hue gradient */
/* Shared GPU-Accelerated Spin Keyframe for All Animated Level Borders */
@keyframes spinBorderRing {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes pulseDefaultGlow {
  0%, 100% {
    box-shadow: 0 0 8px rgba(100, 255, 218, 0.3);
    border-color: rgba(100, 255, 218, 0.4);
  }
  50% {
    box-shadow: 0 0 22px rgba(100, 255, 218, 0.9);
    border-color: #64ffda;
  }
}

.avatar-border-wrap.border-default::after {
  border: 2px solid rgba(100, 255, 218, 0.4);
  box-shadow: 0 0 12px rgba(100, 255, 218, 0.3);
  animation: pulseDefaultGlow 2.5s infinite ease-in-out;
}

/* 6. Void Nebula Border - Vibrant Spinning Cyber Gradient */
.avatar-border-wrap.border-nebula::after {
  border: 3.5px solid transparent;
  background-image: linear-gradient(#080410, #080410), conic-gradient(from 0deg, #c084fc, #6366f1, #06b6d4, #f43f5e, #c084fc);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 0 18px rgba(192, 132, 252, 0.8);
  animation: spinBorderRing 3s linear infinite;
}

/* 9. Cosmic Glitch - High Contrast Neon Glitch Shift */
.avatar-border-wrap.border-glitch::after {
  border: 3.5px solid transparent;
  background-image: linear-gradient(#0c1524, #0c1524), linear-gradient(90deg, #ff007f, #00f3ff, #ff007f);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 0 16px rgba(255, 0, 127, 0.8);
  animation: glitchPulse 0.8s infinite steps(2);
}

@keyframes glitchPulse {
  0%, 100% {
    transform: translate(0, 0);
    box-shadow: 3px -2px 14px rgba(255, 0, 127, 0.8);
  }
  50% {
    transform: translate(-2px, 1px);
    box-shadow: -3px 2px 14px rgba(0, 243, 255, 0.9);
  }
}

/* 10. Storm - Lightning Flash */
.avatar-border-wrap.border-storm::after {
  border: 3.5px solid transparent;
  background-image: linear-gradient(#0c1524, #0c1524), conic-gradient(from 0deg, #00ffff, #3b82f6, #7000ff, #00ffff);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 0 15px rgba(0, 242, 254, 0.6);
  animation: spinBorderRing 2s linear infinite;
}

/* 12. Black Hole - Swirling Accretion Disk */
.avatar-border-wrap.border-blackhole::after {
  border: 4px solid transparent;
  background-image: linear-gradient(#000000, #000000), conic-gradient(from 0deg, #000 0%, #d4a373 25%, #fff 50%, #000 75%, #d4a373 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 0 20px rgba(212, 163, 115, 0.8);
  animation: spinBorderRing 2.5s linear infinite;
}

/* 13. Magic Mists - Spinning Aquatic Mist Ring */
.avatar-border-wrap.border-mists::after {
  border: 3.5px solid transparent;
  background-image: linear-gradient(#0c1524, #0c1524), conic-gradient(from 0deg, #00f2fe, #4facfe, #f093fb, #00f2fe);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 0 18px rgba(0, 242, 254, 0.7);
  animation: spinBorderRing 4s linear infinite;
}

/* 11. Star Orbit - Spinning Gold Trail & Orbiting Star */
.avatar-border-wrap.border-star::before {
  content: '⭐';
  position: absolute;
  font-size: 10px;
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 50%;
  left: 50%;
  z-index: 5;
  animation: orbitStar 3.5s linear infinite;
  text-shadow: 0 0 8px #facc15;
  pointer-events: none;
}

.avatar-border-wrap.border-star::after {
  border: 3.5px solid transparent;
  background-image: linear-gradient(#0c1524, #0c1524), conic-gradient(from 0deg, transparent 50%, rgba(250, 204, 21, 0.5) 75%, #facc15 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 0 16px rgba(250, 204, 21, 0.6);
  animation: spinBorderRing 3.5s linear infinite;
}

@keyframes orbitStar {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) translateY(var(--orbit-radius)) rotate(0deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(360deg) translateY(var(--orbit-radius)) rotate(-360deg);
  }
}

@keyframes rotateStarTrail {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Small Layout overrides for thick borders */
#mini-avatar-wrap {
  --orbit-radius: -20px;
}

.scoreboard-avatar-wrap {
  --orbit-radius: -26px;
}

.border-option-item .avatar-border-wrap {
  --orbit-radius: -26px;
}

/* Thin down border widths and reduce offsets for small viewports */
#mini-avatar-wrap::after,
.scoreboard-avatar-wrap::after,
.border-option-item .avatar-border-wrap::after {
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
}

#mini-avatar-wrap.border-default::after,
.scoreboard-avatar-wrap.border-default::after,
.border-option-item .avatar-border-wrap.border-default::after {
  border-width: 1px;
}

#mini-avatar-wrap.border-nebula::after,
#mini-avatar-wrap.border-glitch::after,
#mini-avatar-wrap.border-mists::after,
#mini-avatar-wrap.border-star::after,
#mini-avatar-wrap.border-blackhole::after,
#mini-avatar-wrap.border-storm::after,
.scoreboard-avatar-wrap.border-nebula::after,
.scoreboard-avatar-wrap.border-glitch::after,
.scoreboard-avatar-wrap.border-mists::after,
.scoreboard-avatar-wrap.border-star::after,
.scoreboard-avatar-wrap.border-blackhole::after,
.scoreboard-avatar-wrap.border-storm::after,
.border-option-item .avatar-border-wrap.border-nebula::after,
.border-option-item .avatar-border-wrap.border-glitch::after,
.border-option-item .avatar-border-wrap.border-mists::after,
.border-option-item .avatar-border-wrap.border-star::after,
.border-option-item .avatar-border-wrap.border-blackhole::after,
.border-option-item .avatar-border-wrap.border-storm::after,
#mini-avatar-wrap.border-gold::after,
.scoreboard-avatar-wrap.border-gold::after,
.border-option-item .avatar-border-wrap.border-gold::after,
#mini-avatar-wrap.border-emerald::after,
.scoreboard-avatar-wrap.border-emerald::after,
.border-option-item .avatar-border-wrap.border-emerald::after,
#mini-avatar-wrap.border-fire::after,
.scoreboard-avatar-wrap.border-fire::after,
.border-option-item .avatar-border-wrap.border-fire::after,
#mini-avatar-wrap.border-electric::after,
.scoreboard-avatar-wrap.border-electric::after,
.border-option-item .avatar-border-wrap.border-electric::after {
  border-width: 2px;
}

#mini-avatar-wrap.border-bronze::after,
.scoreboard-avatar-wrap.border-bronze::after,
.border-option-item .avatar-border-wrap.border-bronze::after,
#mini-avatar-wrap.border-silver::after,
.scoreboard-avatar-wrap.border-silver::after,
.border-option-item .avatar-border-wrap.border-silver::after {
  border-width: 1.5px;
}

/* Resize orbiting star size for small viewports */
#mini-avatar-wrap.border-star::before,
.scoreboard-avatar-wrap.border-star::before,
.border-option-item .avatar-border-wrap.border-star::before {
  font-size: 8px;
  width: 10px;
  height: 10px;
}

/* Small viewport overrides for magic mists */
#mini-avatar-wrap.border-mists::before,
.scoreboard-avatar-wrap.border-mists::before,
.border-option-item .avatar-border-wrap.border-mists::before {
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-width: 1.5px;
}

/* Small viewport overrides for storm clouds and rings */
#mini-avatar-wrap.border-storm::before,
.scoreboard-avatar-wrap.border-storm::before,
.border-option-item .avatar-border-wrap.border-storm::before {
  animation-name: stormBackCloudSmall;
}

#mini-avatar-wrap.border-storm::after,
.scoreboard-avatar-wrap.border-storm::after,
.border-option-item .avatar-border-wrap.border-storm::after {
  animation-name: stormFrontRingSmall;
}

@keyframes stormBackCloudSmall {

  0%,
  84%,
  90%,
  94%,
  98%,
  100% {
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
    background: radial-gradient(circle at center, #0f172a 40%, #020617 90%);
    filter: brightness(1);
  }

  86%,
  92% {
    background: #ffffff;
    box-shadow:
      0 0 8px #ffffff,
      -6px -6px 12px #00ffff,
      6px 6px 12px #3b82f6,
      0 0 15px rgba(0, 242, 254, 0.6);
    filter: brightness(1.4);
  }

  96% {
    background: #e2e8f0;
    box-shadow:
      0 0 5px #ffffff,
      4px -4px 8px #00ffff,
      -4px 4px 8px #3b82f6;
    filter: brightness(1.2);
  }
}

@keyframes stormFrontRingSmall {

  0%,
  84%,
  90%,
  94%,
  98%,
  100% {
    border-color: transparent;
    box-shadow: 0 0 3px rgba(148, 163, 184, 0.2);
  }

  86%,
  92% {
    border-color: #ffffff;
    box-shadow: 0 0 8px #ffffff, 0 0 12px #00f2fe;
  }

  96% {
    border-color: #e2e8f0;
    box-shadow: 0 0 5px #ffffff;
  }
}

/* Grid Selector UI for Profile Borders */
.border-selector-grid {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.border-option-item {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  transition: all var(--transition-fast);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.border-option-item:hover {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
}

.border-option-item.selected {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
}

.border-option-item.locked {
  cursor: pointer;
  opacity: 0.75;
}

.border-option-item .lock-icon {
  font-size: 14px;
  position: absolute;
  z-index: 5;
  color: white;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Premium Tab Navigation Icons in Profile Sidebar */
.profile-nav-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  border-radius: var(--border-radius-sm);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  text-align: left;
  transition: all var(--transition-fast);
  color: var(--text-secondary);
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

.profile-nav-btn span {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.profile-nav-btn.active {
  background: rgba(100, 255, 218, 0.08);
  border-color: var(--color-teal, #64ffda) !important;
  color: var(--color-teal, #64ffda) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2), 0 0 12px var(--color-teal, rgba(100, 255, 218, 0.2)) !important;
}

.profile-nav-btn.active span {
  color: var(--color-teal, #64ffda) !important;
  font-weight: 800 !important;
}

.profile-nav-btn .tab-card-visual {
  width: 24px;
  height: 24px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* 1. Overview chart icon */
.visual-overview {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 3px !important;
  position: relative !important;
  width: 24px;
  height: 24px;
  padding-bottom: 2px;
}

.visual-overview .chart-col {
  width: 4px;
  border-radius: 2px;
  border: 1.5px solid var(--color-teal, #64ffda);
  background: transparent;
  transition: all 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.visual-overview .col-1 {
  height: 10px;
}
.visual-overview .col-2 {
  height: 16px;
}
.visual-overview .col-3 {
  height: 13px;
}

.visual-overview .chart-line {
  position: absolute;
  top: 4px;
  left: 2px;
  right: 2px;
  height: 1.5px;
  background: var(--color-teal, #64ffda);
  opacity: 0.4;
  border-radius: 1px;
}

.profile-nav-btn:hover .visual-overview .chart-col,
.profile-nav-btn.active .visual-overview .chart-col {
  border-color: var(--color-teal, #64ffda) !important;
  background: var(--color-teal, #64ffda) !important;
  box-shadow: 0 0 8px var(--color-teal, rgba(100, 255, 218, 0.4)) !important;
}

.profile-nav-btn:hover .visual-overview .col-1,
.profile-nav-btn.active .visual-overview .col-1 {
  height: 14px;
}
.profile-nav-btn:hover .visual-overview .col-2,
.profile-nav-btn.active .visual-overview .col-2 {
  height: 18px;
}
.profile-nav-btn:hover .visual-overview .col-3,
.profile-nav-btn.active .visual-overview .col-3 {
  height: 15px;
}


/* 2. Settings Palette & Brush Icon */
.visual-settings {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  width: 24px;
  height: 24px;
}

.visual-settings .palette-swatch {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1.5px solid var(--color-teal, #64ffda);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.visual-settings .dot {
  position: absolute;
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
  background: var(--color-teal, #64ffda);
}

.visual-settings .dot-1 {
  top: 3px;
  left: 4px;
}
.visual-settings .dot-2 {
  bottom: 3px;
  right: 4px;
}

.visual-settings .brush-sparkle {
  position: absolute;
  top: -1px;
  right: -1px;
  font-size: 8px;
  color: var(--color-teal, #64ffda);
  line-height: 1;
  transition: all 0.3s ease;
}

.profile-nav-btn:hover .visual-settings .palette-swatch,
.profile-nav-btn.active .visual-settings .palette-swatch {
  border-color: var(--color-teal, #64ffda) !important;
  transform: rotate(45deg) scale(1.08);
  box-shadow: 0 0 8px var(--color-teal, rgba(100, 255, 218, 0.4)) !important;
}

.profile-nav-btn:hover .visual-settings .brush-sparkle,
.profile-nav-btn.active .visual-settings .brush-sparkle {
  transform: scale(1.3) rotate(20deg);
  color: var(--color-teal, #64ffda) !important;
}


/* 3. Achievements Trophy & Star Icon */
.visual-achievements {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  width: 24px;
  height: 24px;
}

.visual-achievements .trophy-cup {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.visual-achievements .cup-top {
  width: 14px;
  height: 10px;
  border: 1.5px solid var(--color-teal, #64ffda);
  border-radius: 0 0 7px 7px;
  background: transparent;
  transition: all 0.25s ease;
}

.visual-achievements .cup-stem {
  width: 3.5px;
  height: 4px;
  background: var(--color-teal, #64ffda);
  border-radius: 1px;
}

.visual-achievements .cup-base {
  width: 11px;
  height: 2.5px;
  background: var(--color-teal, #64ffda);
  border-radius: 2px;
}

.visual-achievements .trophy-star {
  position: absolute;
  top: -4px;
  font-size: 7px;
  color: var(--color-teal, #64ffda);
  line-height: 1;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.profile-nav-btn:hover .visual-achievements .cup-top,
.profile-nav-btn.active .visual-achievements .cup-top {
  border-color: var(--color-teal, #64ffda) !important;
  background: rgba(100, 255, 218, 0.15) !important;
  box-shadow: 0 0 8px var(--color-teal, rgba(100, 255, 218, 0.4)) !important;
}

.profile-nav-btn:hover .visual-achievements .trophy-star,
.profile-nav-btn.active .visual-achievements .trophy-star {
  transform: translateY(-2px) scale(1.3) rotate(15deg);
  color: var(--color-teal, #64ffda) !important;
}

/* Animated Visual: Friends */
.visual-friends {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  width: 24px;
  height: 24px;
}

.visual-friends .friend-user {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.visual-friends .user-1 {
  left: 1px;
  z-index: 2;
}

.visual-friends .user-2 {
  right: 1px;
  opacity: 0.75;
  z-index: 1;
}

.visual-friends .friend-head {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--color-teal, #64ffda);
  background: transparent;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.visual-friends .friend-body {
  width: 11px;
  height: 6px;
  border-radius: 6px 6px 0 0;
  border: 1.5px solid var(--color-teal, #64ffda);
  border-bottom: none;
  background: transparent;
  margin-top: 1px;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.profile-nav-btn:hover .visual-friends .user-1,
.profile-nav-btn.active .visual-friends .user-1 {
  transform: translateX(1px) scale(1.08);
}

.profile-nav-btn:hover .visual-friends .user-2,
.profile-nav-btn.active .visual-friends .user-2 {
  transform: translateX(-1px) scale(1.08);
  opacity: 1;
}

.profile-nav-btn:hover .visual-friends .friend-head,
.profile-nav-btn:hover .visual-friends .friend-body,
.profile-nav-btn.active .visual-friends .friend-head,
.profile-nav-btn.active .visual-friends .friend-body {
  border-color: var(--color-teal, #64ffda) !important;
  background: var(--color-teal, #64ffda) !important;
}

/* Animated Visual: My Assignments */
.visual-assignments {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  width: 24px;
  height: 24px;
}

.visual-assignments .assignment-clipboard {
  width: 16px;
  height: 20px;
  border: 1.5px solid var(--color-teal, #64ffda);
  border-radius: 3px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 3px;
  transition: all 0.25s ease;
}

.visual-assignments .clip-top {
  position: absolute;
  top: -3px;
  width: 7px;
  height: 3px;
  border: 1.5px solid var(--color-teal, #64ffda);
  border-bottom: none;
  border-radius: 2px 2px 0 0;
  background: var(--bg-card, #0f172a);
}

.visual-assignments .paper-line {
  height: 1.5px;
  background: var(--color-teal, #64ffda);
  border-radius: 1px;
  margin-bottom: 2.5px;
  transition: all 0.25s ease;
}

.visual-assignments .line-1 {
  width: 9px;
}

.visual-assignments .line-2 {
  width: 6px;
}

.visual-assignments .paper-check {
  font-size: 7px;
  font-weight: 900;
  color: var(--color-teal, #64ffda);
  line-height: 1;
  opacity: 0.8;
  transition: all 0.25s ease;
}

.profile-nav-btn:hover .visual-assignments .assignment-clipboard,
.profile-nav-btn.active .visual-assignments .assignment-clipboard {
  border-color: var(--color-teal, #64ffda) !important;
  box-shadow: 0 0 8px var(--color-teal, rgba(100, 255, 218, 0.4)) !important;
  transform: scale(1.08) translateY(-1px);
}

.profile-nav-btn:hover .visual-assignments .paper-check,
.profile-nav-btn.active .visual-assignments .paper-check {
  opacity: 1 !important;
  color: var(--color-teal, #64ffda) !important;
  transform: scale(1.2);
}

/* LinkedIn-Style Action Buttons */
.btn-linkedin-style {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-teal) !important;
  background: rgba(100, 255, 218, 0.03) !important;
  border: 1px solid var(--color-teal) !important;
  border-radius: 24px !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  box-shadow: none !important;
}

.btn-linkedin-style:hover {
  color: #0d1527 !important;
  background: var(--color-teal) !important;
  border-color: var(--color-teal) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(100, 255, 218, 0.3) !important;
}

.btn-linkedin-style.btn-primary-filled {
  color: #0d1527 !important;
  background: var(--color-teal) !important;
  border-color: var(--color-teal) !important;
  box-shadow: 0 4px 14px rgba(100, 255, 218, 0.15) !important;
}

.btn-linkedin-style.btn-primary-filled:hover {
  background: var(--color-teal-bright) !important;
  border-color: var(--color-teal-bright) !important;
  color: #0d1527 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(100, 255, 218, 0.35) !important;
}

/* Story Cover Images */
.story-card-image {
  height: 160px;
  background-size: cover;
  background-position: center;
  border-radius: var(--border-radius-sm);
  margin-bottom: 16px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.reader-story-image {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: var(--border-radius-sm);
  margin-bottom: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Listening Gym Styling */
.lyric-blank-input {
  background: rgba(255, 255, 255, 0.05);
  border: none;
  border-bottom: 2px dashed rgba(255, 255, 255, 0.3);
  color: var(--color-teal);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  padding: 0 6px;
  margin: 0 4px;
  width: 120px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.lyric-blank-input:focus {
  outline: none;
  border-bottom-color: var(--color-teal);
  background: rgba(100, 255, 218, 0.08);
}

.lyric-blank-input.correct {
  border-bottom: 2px solid #2ec4b6 !important;
  background: rgba(46, 196, 182, 0.15) !important;
  color: #2ec4b6 !important;
  box-shadow: 0 2px 8px rgba(46, 196, 182, 0.1);
}

.lyric-blank-input.revealed-blank {
  border-bottom: 2px dashed #9d4edd !important;
  background: rgba(157, 78, 221, 0.15) !important;
  color: #c77dff !important;
  box-shadow: 0 2px 8px rgba(157, 78, 221, 0.15);
}

.lyric-blank-input.incorrect {
  border-bottom: 2px solid #ef476f !important;
  background: rgba(239, 71, 111, 0.15) !important;
  color: #ef476f !important;
  box-shadow: 0 2px 8px rgba(239, 71, 111, 0.1);
  animation: shakeMini 0.4s ease;
}

.listening-song-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  gap: 16px;
  transition: all 0.3s;
}

.listening-song-card:hover {
  transform: translateY(-2px);
  border-color: rgba(100, 255, 218, 0.25);
  box-shadow: 0 8px 24px rgba(100, 255, 218, 0.05);
}

#listening-player-slider {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  outline: none;
  transition: background 0.1s;
}

#listening-player-slider::-webkit-slider-runnable-track {
  height: 6px;
}

#listening-player-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-teal);
  cursor: pointer;
  margin-top: -4px;
  box-shadow: 0 0 8px var(--color-teal);
}

.revealed-answer-text {
  color: #ffb703;
  font-size: 11px;
  font-weight: 500;
  display: block;
  line-height: 1;
  margin-top: 2px;
}

#listening-lyrics-board {
  word-wrap: break-word !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* 6. Listening: EQ Audio Waveform Card Visual */
.visual-listening {
  width: 28px;
  height: 20px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2.5px;
}

.eq-bar {
  flex: 1;
  height: 4px;
  background: linear-gradient(to top, rgba(236, 72, 153, 0.2) 0%, #ec4899 100%);
  border-radius: 1px;
  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  animation: eqPulse 1s ease-in-out infinite alternate;
}

.eq-bar:nth-child(1) {
  height: 6px;
  animation-delay: 0.1s;
}

.eq-bar:nth-child(2) {
  height: 16px;
  animation-delay: 0.3s;
}

.eq-bar:nth-child(3) {
  height: 9px;
  animation-delay: 0.2s;
}

.eq-bar:nth-child(4) {
  height: 13px;
  animation-delay: 0.4s;
}

.eq-bar:nth-child(5) {
  height: 7px;
  animation-delay: 0.15s;
}

@keyframes eqPulse {
  0% {
    transform: scaleY(0.5);
  }

  100% {
    transform: scaleY(1.3);
  }
}

.launchpad-card:hover .eq-bar {
  background: linear-gradient(to top, rgba(236, 72, 153, 0.5) 0%, #f472b6 100%);
  animation-duration: 0.5s;
}

.form-input.incorrect {
  border-color: #ef476f !important;
  box-shadow: 0 0 10px rgba(239, 71, 111, 0.2) !important;
  animation: shakeMini 0.4s ease;
}

/* ==========================================================================
   LISTENING GYM & FRIENDS UPDATES
   ========================================================================== */

.tracks-hud-bar {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 14px 24px !important;
  background: rgba(22, 34, 63, 0.35) !important;
  border: 1.5px solid var(--color-teal) !important;
  border-radius: var(--border-radius-md);
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(100, 255, 218, 0.18) !important;
  position: relative;
  z-index: 150;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (min-width: 1025px) {
  .tracks-hud-bar .tracks-hud-left-controls {
    width: 220px !important;
    flex-shrink: 0 !important;
  }

  .tracks-hud-bar .stories-search-wrapper {
    width: 280px !important;
    margin: 0 auto !important;
    flex-shrink: 0 !important;
  }

  .tracks-hud-bar .sort-select-wrapper {
    width: 220px !important;
    flex-shrink: 0 !important;
  }
}

/* Dedicated Music Card Grid Layout (4 cards per row) */
.listening-song-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 20px;
}

@media (max-width: 1200px) {
  .listening-song-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 850px) {
  .listening-song-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 580px) {
  .listening-song-grid {
    grid-template-columns: 1fr;
  }
}

/* Redefined Card layout (Vertical Spotify-Style Card) */
.listening-song-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  min-height: 380px;
  height: auto;
  padding: 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(100, 255, 218, 0.2) !important;
  position: relative;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
  box-sizing: border-box;
}

.listening-song-card:hover {
  transform: translateY(-6px) scale(1.015);
  border-color: var(--color-teal) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 0 25px rgba(100, 255, 218, 0.25) !important;
}

/* Void Nebula Theme Overrides for Track Cards */
.theme-void-nebula .listening-song-card {
  border-color: rgba(192, 132, 252, 0.3) !important;
}
.theme-void-nebula .listening-song-card:hover {
  border-color: #c084fc !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 0 25px rgba(192, 132, 252, 0.35) !important;
}

/* Cosmic Emerald Theme Overrides for Track Cards */
.theme-cosmic-emerald .listening-song-card {
  border-color: rgba(16, 185, 129, 0.3) !important;
}
.theme-cosmic-emerald .listening-song-card:hover {
  border-color: #10b981 !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 0 25px rgba(16, 185, 129, 0.35) !important;
}

/* Cyberpunk Theme Overrides for Track Cards */
.theme-cyberpunk .listening-song-card {
  border-color: rgba(0, 242, 254, 0.3) !important;
}
.theme-cyberpunk .listening-song-card:hover {
  border-color: #00f2fe !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 0 25px rgba(0, 242, 254, 0.35) !important;
}

/* Matrix Theme Overrides for Track Cards */
.theme-matrix .listening-song-card {
  border-color: rgba(34, 197, 94, 0.3) !important;
}
.theme-matrix .listening-song-card:hover {
  border-color: #22c55e !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 0 25px rgba(34, 197, 94, 0.35) !important;
}

/* Neon Sunset Theme Overrides for Track Cards */
.theme-neon-sunset .listening-song-card {
  border-color: rgba(249, 115, 22, 0.3) !important;
}
.theme-neon-sunset .listening-song-card:hover {
  border-color: #f97316 !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 0 25px rgba(249, 115, 22, 0.35) !important;
}

/* Sakura Pink Theme Overrides for Track Cards */
.theme-sakura-pink .listening-song-card {
  border-color: rgba(236, 72, 153, 0.3) !important;
}
.theme-sakura-pink .listening-song-card:hover {
  border-color: #ec4899 !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 0 25px rgba(236, 72, 153, 0.35) !important;
}

/* Rose Neon Theme Overrides for Track Cards */
.theme-rose-neon .listening-song-card {
  border-color: rgba(255, 42, 133, 0.3) !important;
}
.theme-rose-neon .listening-song-card:hover {
  border-color: #ff2a85 !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 0 25px rgba(255, 42, 133, 0.35) !important;
}

/* Warm Sepia Theme Overrides for Track Cards */
.theme-warm-sepia .listening-song-card {
  border-color: rgba(180, 83, 9, 0.25) !important;
  background: rgba(253, 246, 227, 0.9) !important;
}
.theme-warm-sepia .listening-song-card:hover {
  border-color: #d97706 !important;
  box-shadow: 0 16px 36px rgba(67, 52, 34, 0.15), 0 0 25px rgba(217, 119, 6, 0.3) !important;
}


/* Cover Image Wrapper with aspect ratio */
.listening-song-cover {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, rgba(13, 21, 39, 0.85), rgba(0, 180, 216, 0.15));
}

.listening-song-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.listening-song-card:hover .listening-song-cover img {
  transform: scale(1.07);
}

/* Hover Play Overlay on Album Cover */
.listening-cover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}

.listening-song-card:hover .listening-cover-overlay {
  opacity: 1;
}

.listening-cover-play-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-teal);
  color: #0d1527 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(100, 255, 218, 0.45);
  transform: translateY(8px);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.2s;
  cursor: pointer;
}

.listening-song-card:hover .listening-cover-play-btn {
  transform: translateY(0);
}

.listening-cover-play-btn:hover {
  background: var(--color-teal-bright) !important;
  transform: scale(1.08) !important;
}

/* Floating Mastered Badge */
.listening-mastered-float-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  background: rgba(10, 25, 47, 0.85);
  backdrop-filter: blur(4px);
  border: 1px solid var(--color-teal);
  color: var(--color-teal);
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 12px;
  letter-spacing: 0.05em;
  box-shadow: 0 0 10px rgba(100, 255, 218, 0.2);
}

/* Mastered Badge Under Button */
.listening-mastered-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(46, 204, 113, 0.12);
  border: 1px solid rgba(46, 204, 113, 0.3);
  color: #2ecc71;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  gap: 4px;
  margin-top: 4px;
  box-shadow: 0 2px 8px rgba(46, 204, 113, 0.1);
}

/* Active Player Cover Art Breathing Pulse Glow */
@keyframes playingGlow {

  0%,
  100% {
    box-shadow: 0 8px 24px rgba(100, 255, 218, 0.15);
    border-color: rgba(100, 255, 218, 0.15);
  }

  50% {
    box-shadow: 0 8px 36px rgba(100, 255, 218, 0.45);
    border-color: var(--color-teal);
  }
}

.playing-pulse {
  animation: playingGlow 2s infinite ease-in-out;
}

/* Scoreboard Tab Buttons */
.scoreboard-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 12px;
}

.sb-tab-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  padding: 8px 18px;
  border-radius: 20px;
  transition: all 0.3s;
}

.sb-tab-btn.active {
  background: rgba(100, 255, 218, 0.08) !important;
  color: var(--color-teal) !important;
}

.sb-tab-btn:not(.active):hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

/* Friends Panel Elements */
.friend-row-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  transition: all 0.25s ease;
}

.friend-row-item:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

/* Profile Level Progress Bar & Widget styling */
.profile-level-progress-wrapper {
  margin-top: 15px;
  margin-bottom: 25px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 16px 20px;
}

.profile-level-progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}

.profile-level-progress-title {
  font-weight: 600;
  color: white;
}

.profile-level-progress-bar {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.profile-level-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-teal), var(--color-teal-bright));
  box-shadow: 0 0 10px rgba(100, 255, 218, 0.4);
  border-radius: 4px;
  width: 0%;
  transition: width 0.6s cubic-bezier(0.1, 0.8, 0.2, 1);
}

/* CEFR Progress & Milestones Dashboard Widget */
.cefr-roadmap-container {
  margin-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 14px;
}

.cefr-milestones-track {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  margin-top: 16px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.05);
  height: 6px;
  border-radius: 3px;
  padding: 0 4px;
}

.cefr-track-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--color-teal), #00f2fe);
  box-shadow: 0 0 8px rgba(100, 255, 218, 0.5);
  border-radius: 3px;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
  width: 0%;
}

.cefr-milestone {
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg-dark-space, #000);
  border: 2px solid rgba(255, 255, 255, 0.18);
  color: var(--text-muted);
  font-size: 8.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: -1px;
  /* Align with track center */
}

.cefr-milestone.active {
  background: var(--color-teal);
  border-color: #64ffda;
  color: #0c1524;
  box-shadow: 0 0 12px var(--color-teal), inset 0 0 4px rgba(255, 255, 255, 0.6);
  transform: scale(1.12);
}

.cefr-milestone.passed {
  background: #00b4d8;
  border-color: #00b4d8;
  color: white;
  box-shadow: 0 0 8px rgba(0, 180, 216, 0.3);
}

.cefr-milestone .milestone-tooltip {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: rgba(12, 21, 36, 0.96);
  border: 1px solid rgba(100, 255, 218, 0.3);
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 99;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}

.cefr-milestone .milestone-tooltip strong {
  color: var(--color-teal);
  display: block;
  font-size: 11.5px;
  margin-bottom: 2px;
}

.cefr-milestone:hover {
  transform: scale(1.15);
  border-color: var(--color-teal);
}

.cefr-milestone:hover .milestone-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* progress ring wrap hover state */
.progress-ring-wrap {
  position: relative;
  width: 120px;
  height: 120px;
  flex-shrink: 0;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.progress-ring-wrap:hover {
  transform: scale(1.06);
}

.progress-ring-wrap::after {
  content: '';
  position: absolute;
  top: 6px;
  left: 6px;
  right: 6px;
  bottom: 6px;
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(100, 255, 218, 0.1);
  z-index: -1;
  transition: box-shadow 0.3s ease;
}

.progress-ring-wrap:hover::after {
  box-shadow: 0 0 28px rgba(100, 255, 218, 0.3);
}

/* ==========================================================================
   REVOLUTIONIZED MEMBERS DIRECTORY STYLES
   ========================================================================== */

.directory-sub-tabs {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 8px;
}

.directory-sub-tab-btn {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 4px 4px 0 0;
}

.directory-sub-tab-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.02);
}

.directory-sub-tab-btn.active {
  color: var(--color-teal);
  border-bottom-color: var(--color-teal);
  background: rgba(100, 255, 218, 0.03);
}

.directory-sub-tab-btn span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: 6px;
  transition: all 0.2s ease;
}

.directory-sub-tab-btn.active span {
  background: rgba(100, 255, 218, 0.15);
  color: var(--color-teal);
}

.directory-actions-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  align-items: center;
}

.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.role-badge.admin {
  background: rgba(0, 180, 216, 0.1);
  color: #00b4d8;
  border: 1px solid rgba(0, 180, 216, 0.25);
  box-shadow: 0 0 10px rgba(0, 180, 216, 0.05);
}

.role-badge.learner {
  background: rgba(100, 255, 218, 0.08);
  color: var(--color-teal);
  border: 1px solid rgba(100, 255, 218, 0.2);
}

.member-list-item {
  display: grid;
  grid-template-columns: 2.2fr 1.8fr 1.2fr 1.2fr 1fr 1fr 1.2fr;
  align-items: center;
  padding: 16px;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  margin-bottom: 12px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.member-list-item:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(100, 255, 218, 0.15);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.member-list-header {
  display: grid;
  grid-template-columns: 2.2fr 1.8fr 1.2fr 1.2fr 1fr 1fr 1.2fr;
  align-items: center;
  padding: 0 16px 12px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 12px;
}

@media (max-width: 1024px) {

  .member-list-item,
  .member-list-header {
    grid-template-columns: 2fr 1.8fr 1.2fr 1fr 1.2fr;
  }

  .member-list-item .hide-md,
  .member-list-header .hide-md {
    display: none;
  }
}

@media (max-width: 768px) {

  .member-list-item,
  .member-list-header {
    grid-template-columns: 2.5fr 1.5fr 1.2fr;
  }

  .member-list-item .hide-sm,
  .member-list-header .hide-sm {
    display: none;
  }
}

/* CMS Overhaul Dashboard Styles */
.cms-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.cms-metric-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.3s ease;
}

.cms-metric-card:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(100, 255, 218, 0.15);
}

.cms-metric-card .metric-label {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.05em;
}

.cms-metric-card .metric-value {
  font-size: 22px;
  font-weight: 750;
  color: white;
}

/* Modern Card Layout for Existing Stories */
.cms-stories-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 15px;
}

.cms-story-row-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 12px 16px;
  transition: all 0.25s ease;
  gap: 16px;
}

.cms-story-row-card:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(100, 255, 218, 0.2);
  transform: translateX(4px);
}

.cms-story-thumb {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(13, 21, 39, 0.8), rgba(0, 180, 216, 0.2));
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  overflow: hidden;
}

.cms-story-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cms-story-details {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cms-story-title {
  color: white;
  font-weight: 600;
  font-size: 15px;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cms-story-meta-tags {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* Two-column layout for publisher workspace */
.cms-editor-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 30px;
  align-items: start;
}

@media (max-width: 992px) {
  .cms-editor-grid {
    grid-template-columns: 1fr;
  }
}

/* Interactive phone preview simulator */
.cms-live-phone-preview {
  background: #090e1a;
  border: 8px solid rgba(255, 255, 255, 0.08);
  border-radius: 36px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
  height: 600px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: sticky;
  top: 20px;
}

.cms-phone-notch {
  width: 110px;
  height: 18px;
  background: rgba(255, 255, 255, 0.08);
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  margin: 0 auto;
  flex-shrink: 0;
}

.cms-phone-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 16px 20px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
}

.cms-phone-screen::-webkit-scrollbar {
  width: 4px;
}

.cms-phone-screen::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.cms-phone-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 12px;
  margin-bottom: 16px;
  display: flex;
  gap: 12px;
  align-items: center;
}

.cms-phone-cover {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  overflow: hidden;
  flex-shrink: 0;
}

.cms-phone-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cms-phone-title-wrap {
  flex: 1;
  min-width: 0;
}

.cms-phone-title {
  color: white;
  font-weight: 700;
  font-size: 15px;
  margin: 0 0 2px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cms-phone-meta {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  gap: 6px;
}

.cms-phone-content p {
  margin: 0 0 16px 0;
  text-align: justify;
}

.cms-phone-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 12px;
  margin-top: auto;
  text-align: center;
  font-size: 11px;
  color: var(--color-teal);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ==========================================================================
   LISTENING GYM: REVOLUTIONIZED 2-COLUMN STUDIO PRACTICE SYSTEM
   ========================================================================== */

/* 1. Main Studio Layout Grid */
.listening-studio-layout {
  display: grid;
  grid-template-columns: 390px 1fr;
  gap: 28px;
  max-width: 1240px;
  margin: 0 auto 40px auto;
  align-items: start;
}

@media (max-width: 950px) {
  .listening-studio-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* 2. Left Studio Panel (Media & Player Hub) */
.listening-left-studio {
  padding: 20px;
  border-radius: 20px;
  background: rgba(13, 21, 39, 0.75);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(100, 255, 218, 0.15);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: sticky;
  top: 90px;
  z-index: 10;
  align-self: start;
}

/* Media Stage (Vinyl Disc + Album Cover) */
.studio-media-stage {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 24px;
  padding-top: 10px;
}

.vinyl-container {
  position: relative;
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Album Cover Frame */
.studio-album-cover {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 16px;
  overflow: hidden;
  z-index: 2;
  background: rgba(100, 255, 218, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), inset 0 0 15px rgba(255, 255, 255, 0.05);
  transition: all 0.4s ease;
}

.studio-album-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sliding Spinning Vinyl Record Disc */
.vinyl-disc {
  position: absolute;
  top: 10px;
  right: -30px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle at center, #111 0%, #080808 30%, #151515 50%, #050505 70%, #000 100%);
  border: 2px solid #222;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
  z-index: 1;
  transition: right 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.vinyl-container.playing .vinyl-disc {
  right: -55px;
  animation: vinylSpin 3.5s linear infinite;
}

.vinyl-groove {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.07);
  pointer-events: none;
}

.groove-1 {
  width: 160px;
  height: 160px;
}

.groove-2 {
  width: 110px;
  height: 110px;
}

.vinyl-center-label {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-teal), #00b4d8);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(100, 255, 218, 0.4);
  border: 3px solid #111;
}

.vinyl-spindle {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #000;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

@keyframes vinylSpin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Track Metadata */
.studio-track-info {
  text-align: center;
  width: 100%;
  margin-bottom: 20px;
}

.studio-track-title {
  color: white;
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 4px 0;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.studio-track-artist {
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 14px 0;
}

.studio-track-badges {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.studio-track-badges .source-tag {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  border-color: rgba(255, 255, 255, 0.1);
  margin: 0 !important;
}

.studio-track-badges .blanks-tag {
  background: rgba(100, 255, 218, 0.1);
  color: var(--color-teal);
  margin: 0 !important;
}

/* Equalizer Audio Waveform Visualizer */
.studio-eq-visualizer {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  height: 28px;
  margin-bottom: 20px;
}

.studio-eq-bar {
  width: 4px;
  height: 6px;
  background: linear-gradient(to top, rgba(100, 255, 218, 0.3), var(--color-teal));
  border-radius: 2px;
  transition: height 0.2s ease;
}

.studio-eq-visualizer.active .bar-1 {
  animation: eqBarPulse 0.8s ease-in-out infinite alternate 0.1s;
}

.studio-eq-visualizer.active .bar-2 {
  animation: eqBarPulse 0.8s ease-in-out infinite alternate 0.3s;
}

.studio-eq-visualizer.active .bar-3 {
  animation: eqBarPulse 0.8s ease-in-out infinite alternate 0.15s;
}

.studio-eq-visualizer.active .bar-4 {
  animation: eqBarPulse 0.8s ease-in-out infinite alternate 0.4s;
}

.studio-eq-visualizer.active .bar-5 {
  animation: eqBarPulse 0.8s ease-in-out infinite alternate 0.25s;
}

.studio-eq-visualizer.active .bar-6 {
  animation: eqBarPulse 0.8s ease-in-out infinite alternate 0.35s;
}

.studio-eq-visualizer.active .bar-7 {
  animation: eqBarPulse 0.8s ease-in-out infinite alternate 0.05s;
}

@keyframes eqBarPulse {
  0% {
    height: 6px;
    opacity: 0.4;
  }

  100% {
    height: 26px;
    opacity: 1;
  }
}

/* Custom Audio Player Deck */
.studio-player-deck {
  width: 100%;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 14px 12px;
  box-sizing: border-box;
}

.studio-seeker-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.studio-seeker-row .time-stamp {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  min-width: 32px;
  font-variant-numeric: tabular-nums;
}

.studio-timeline-slider {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  accent-color: var(--color-teal);
  cursor: pointer;
  background: rgba(255, 255, 255, 0.1);
}

.studio-controls-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  width: 100%;
  box-sizing: border-box;
}

.audio-ctrl-btn {
  padding: 6px 8px !important;
  font-size: 11px !important;
  border-radius: 20px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: unset !important;
  height: 36px;
}

.studio-play-btn {
  border-radius: 24px !important;
  padding: 8px 14px !important;
  font-size: 12px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 4px 16px rgba(100, 255, 218, 0.3) !important;
  flex-shrink: 0;
  min-width: unset !important;
  height: 38px;
}

.studio-speed-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.studio-speed-wrapper .speed-label {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 600;
}

.studio-speed-select {
  padding: 4px 4px !important;
  font-size: 11px !important;
  width: 58px !important;
  border-radius: 8px !important;
  background: #090e18 !important;
  color: white !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  cursor: pointer;
}

/* Spotify Deck & Warning */
.studio-spotify-deck {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
}

.studio-spotify-warning {
  padding: 10px 14px;
  background: rgba(255, 183, 3, 0.1);
  border-left: 3px solid #ffb703;
  border-radius: 8px;
  font-size: 11px;
  color: #ffb703;
  line-height: 1.4;
  margin-top: 14px;
  width: 100%;
  box-sizing: border-box;
}

/* 3. Right Studio Panel (Interactive Karaoke Gym) */
.listening-right-studio {
  padding: 28px;
  border-radius: 20px;
  background: rgba(13, 21, 39, 0.75);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(100, 255, 218, 0.15);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  min-height: 580px;
}

.karaoke-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.karaoke-title {
  color: white;
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 4px 0;
  letter-spacing: -0.01em;
}

.karaoke-subtitle {
  color: var(--text-muted);
  font-size: 13px;
  margin: 0;
}

.karaoke-progress-pill {
  background: rgba(100, 255, 218, 0.08);
  border: 1px solid rgba(100, 255, 218, 0.2);
  color: var(--color-teal);
  font-weight: 700;
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 20px;
  white-space: nowrap;
}

/* Glassmorphic Karaoke Lyric Paper Board */
.karaoke-lyric-paper {
  flex: 1;
  background: rgba(8, 14, 26, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  font-size: 17px;
  color: #e2e8f0;
  line-height: 2.3;
  text-align: center !important;
  box-sizing: border-box;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3);
}

.karaoke-lyric-paper .lyric-line {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center !important;
  text-align: center !important;
  width: 100%;
  gap: 8px;
  flex-wrap: wrap;
}

.karaoke-lyric-paper .line-num {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  min-width: 20px;
  user-select: none;
  opacity: 0.5;
}

/* Action Deck & Buttons */
.karaoke-action-deck {
  display: flex;
  gap: 12px;
  align-items: center;
}

.karaoke-btn-check {
  flex: 2;
  padding: 12px 20px !important;
  font-size: 13px !important;
  border-radius: 24px !important;
  box-shadow: 0 4px 16px rgba(100, 255, 218, 0.25) !important;
}

.karaoke-action-sub-group {
  display: flex;
  gap: 10px;
  flex: 3;
  align-items: center;
}

.karaoke-btn-sub {
  flex: 1;
  padding: 12px 16px !important;
  font-size: 13px !important;
  border-radius: 24px !important;
}

/* Score Banner Celebration */
.karaoke-score-banner {
  margin-top: 16px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  min-height: 28px;
  transition: all 0.3s ease;
}

/* Scoped layout overrides strictly for About Us & Ecosystem Odyssey pages */
body.logged-in #page-about,
body.logged-in #page-ecosystem {
  margin-top: -40px !important;
  margin-left: -40px !important;
  margin-right: -40px !important;
  margin-bottom: -40px !important;
  width: calc(100% + 80px) !important;
  box-sizing: border-box;
}

body:not(.logged-in) #page-about,
body:not(.logged-in) #page-ecosystem {
  margin-top: -100px !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  width: 100vw !important;
  box-sizing: border-box;
}

/* ==========================================
   UNIQUE ABOUT US ODYSSEY SCROLL SYSTEM
   ========================================== */
.about-odyssey-container {
  position: relative;
  height: 250vh;
  width: 100%;
  margin: 0;
  left: 0;
  right: 0;
}

.about-odyssey-container.has-4-stages {
  height: 330vh;
}

.about-odyssey-sticky {
  position: sticky;
  top: 80px;
  height: calc(100vh - 80px);
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

/* Timeline Navigator at Top of Stage */
.about-timeline-nav {
  position: absolute;
  top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 840px;
  padding: 8px 16px;
  background: rgba(10, 15, 30, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  backdrop-filter: blur(12px);
  z-index: 50;
  box-sizing: border-box;
}

.about-timeline-nav .timeline-track-fill {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--color-teal), #00b4d8, #a855f7);
  z-index: 1;
  transition: width 0.3s ease-out;
  pointer-events: none;
}

.about-timeline-nav .timeline-step {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-timeline-nav .timeline-step .step-num {
  font-size: 11px;
  font-weight: 800;
  font-family: monospace;
  color: var(--text-muted);
  transition: color 0.3s;
}

.about-timeline-nav .timeline-step .step-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  transition: color 0.3s;
}

.about-timeline-nav .timeline-step:hover {
  border-color: rgba(100, 255, 218, 0.4);
  background: rgba(100, 255, 218, 0.08);
}

.about-timeline-nav .timeline-step.active {
  background: rgba(100, 255, 218, 0.15);
  border-color: var(--color-teal);
  box-shadow: 0 0 16px rgba(100, 255, 218, 0.25);
}

.about-timeline-nav .timeline-step.active .step-num {
  color: var(--color-teal);
}

.about-timeline-nav .timeline-step.active .step-label {
  color: white;
}

/* Shifting Ambient Aura */
.about-ambient-aura {
  position: absolute;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: var(--about-aura-color, rgba(100, 255, 218, 0.18));
  filter: blur(140px);
  z-index: 1;
  pointer-events: none;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), background 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Stage Slides with 3D Slide Effects */
.about-stage-slide {
  position: absolute;
  top: 75px;
  left: 0;
  width: 100%;
  height: calc(100% - 75px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateX(60px) scale(0.95) rotateY(-5deg);
  filter: blur(10px);
  transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 2;
  box-sizing: border-box;
  padding: 10px;
}

.about-stage-slide.slide-creators {
  align-items: center;
  padding-top: 10px;
}

.about-stage-slide.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0) scale(1) rotateY(0deg);
  filter: blur(0);
  pointer-events: auto;
  z-index: 10;
}

/* Stage 1: Philosophy Card */
.about-stage-card {
  width: 100%;
  max-width: 920px;
  padding: 40px;
  background: rgba(13, 21, 39, 0.65);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  text-align: center;
  box-sizing: border-box;
}

.stage-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: rgba(100, 255, 218, 0.1);
  border: 1px solid rgba(100, 255, 218, 0.3);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-teal);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}

.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-teal);
  box-shadow: 0 0 8px var(--color-teal);
}

.stage-title {
  font-size: 38px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 14px;
  color: white;
}

.stage-subtitle {
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 680px;
  margin: 0 auto 32px auto;
}

.philosophy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  text-align: left;
}

.phil-box {
  padding: 24px 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  transition: all 0.3s ease;
}

.phil-box:hover {
  background: rgba(100, 255, 218, 0.06);
  border-color: rgba(100, 255, 218, 0.25);
  transform: translateY(-4px);
}

.phil-icon {
  font-size: 28px;
  margin-bottom: 12px;
}

.phil-box h4 {
  font-size: 15px;
  font-weight: 700;
  color: white;
  margin-bottom: 8px;
}

.phil-box p {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

/* Stage 2: Creators Section */
.creators-stage-wrapper {
  width: 95%;
  max-width: 980px;
  text-align: center;
  margin: 0 auto;
}

.creators-header {
  margin-bottom: 20px;
}

.creators-header .section-title {
  font-size: 28px;
  line-height: 1.2;
  margin-bottom: 6px;
}

.creators-header .section-subtitle {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 auto;
}

.creators-card-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 48px;
  row-gap: 16px;
  width: 100%;
  position: relative;
}

/* --- Stage Synergy Header Badges (EXACT Match of 'The Anti-Textbook Approach' .badge-tag) --- */

.philosophy-synergy-badge,
.creators-synergy-badge,
.partners-synergy-badge,
.feedback-synergy-badge {
  background: transparent !important;
  border: 1px solid var(--color-teal) !important;
  color: var(--color-teal) !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px) !important;
  transition: all 0.3s ease !important;
}

.philosophy-synergy-badge .synergy-text,
.creators-synergy-badge .synergy-text,
.partners-synergy-badge .synergy-text,
.feedback-synergy-badge .synergy-text {
  color: var(--color-teal) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

.philosophy-synergy-badge .synergy-dash,
.partners-synergy-badge .synergy-dash,
.feedback-synergy-dash {
  background: var(--color-teal) !important;
  width: 8px !important;
  height: 2px !important;
  margin: 0 4px !important;
  display: block !important;
}

/* Desktop Vertical Dash for CO — FOUNDERS Badge */
.creators-synergy-badge .synergy-dash {
  background: var(--color-teal) !important;
  width: 2px !important;
  height: 8px !important;
  margin: 3px 0 !important;
  display: block !important;
}

.philosophy-synergy-badge:hover,
.creators-synergy-badge:hover,
.partners-synergy-badge:hover,
.feedback-synergy-badge:hover {
  background: rgba(100, 255, 218, 0.16) !important;
  border-color: var(--color-teal) !important;
  box-shadow: 0 0 16px rgba(100, 255, 218, 0.3) !important;
}

/* Specific Badge Layout Positioning (Preserving Exact Dimensions & Placement) */
.philosophy-synergy-badge {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  margin: 0 auto 16px auto !important;
  padding: 8px 22px !important;
  border-radius: 20px !important;
  width: fit-content !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.philosophy-synergy-badge .synergy-text {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 4px !important;
}

.creators-synergy-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 10px;
  border-radius: 20px;
  pointer-events: auto;
}

.creators-synergy-badge .synergy-text {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 3px !important;
}

.partners-synergy-badge {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  margin: 0 auto 24px auto !important;
  padding: 8px 22px !important;
  border-radius: 20px !important;
  width: fit-content !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.partners-synergy-badge .synergy-text {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 4px !important;
}

/* --- Logged-In User Theme Dynamic Adaptations for About Us Badges --- */

/* Warm Sepia Theme */
.theme-warm-sepia .philosophy-synergy-badge,
.theme-warm-sepia .creators-synergy-badge,
.theme-warm-sepia .partners-synergy-badge,
.theme-warm-sepia .feedback-synergy-badge {
  background: rgba(217, 119, 6, 0.12) !important;
  border-color: #d97706 !important;
  box-shadow: none !important;
}
.theme-warm-sepia .philosophy-synergy-badge .synergy-text,
.theme-warm-sepia .creators-synergy-badge .synergy-text,
.theme-warm-sepia .partners-synergy-badge .synergy-text,
.theme-warm-sepia .feedback-synergy-badge .synergy-text {
  color: #b45309 !important;
}
.theme-warm-sepia .philosophy-synergy-badge .synergy-dash,
.theme-warm-sepia .creators-synergy-badge .synergy-dash,
.theme-warm-sepia .partners-synergy-badge .synergy-dash,
.theme-warm-sepia .feedback-synergy-badge .synergy-dash {
  background: #b45309 !important;
}

/* Cyberpunk Neon Theme */
.theme-cyberpunk .philosophy-synergy-badge,
.theme-cyberpunk .creators-synergy-badge,
.theme-cyberpunk .partners-synergy-badge,
.theme-cyberpunk .feedback-synergy-badge {
  background: rgba(255, 0, 127, 0.12) !important;
  border-color: #ff007f !important;
  box-shadow: none !important;
}
.theme-cyberpunk .philosophy-synergy-badge .synergy-text,
.theme-cyberpunk .creators-synergy-badge .synergy-text,
.theme-cyberpunk .partners-synergy-badge .synergy-text,
.theme-cyberpunk .feedback-synergy-badge .synergy-text {
  color: #ff007f !important;
}
.theme-cyberpunk .philosophy-synergy-badge .synergy-dash,
.theme-cyberpunk .creators-synergy-badge .synergy-dash,
.theme-cyberpunk .partners-synergy-badge .synergy-dash,
.theme-cyberpunk .feedback-synergy-badge .synergy-dash {
  background: #ff007f !important;
}

/* Matrix Theme */
.theme-matrix .philosophy-synergy-badge,
.theme-matrix .creators-synergy-badge,
.theme-matrix .partners-synergy-badge,
.theme-matrix .feedback-synergy-badge {
  background: rgba(0, 255, 102, 0.12) !important;
  border-color: #00ff66 !important;
  box-shadow: none !important;
}
.theme-matrix .philosophy-synergy-badge .synergy-text,
.theme-matrix .creators-synergy-badge .synergy-text,
.theme-matrix .partners-synergy-badge .synergy-text,
.theme-matrix .feedback-synergy-badge .synergy-text {
  color: #00ff66 !important;
}
.theme-matrix .philosophy-synergy-badge .synergy-dash,
.theme-matrix .creators-synergy-badge .synergy-dash,
.theme-matrix .partners-synergy-badge .synergy-dash,
.theme-matrix .feedback-synergy-badge .synergy-dash {
  background: #00ff66 !important;
}

/* Cosmic Emerald Theme */
.theme-cosmic-emerald .philosophy-synergy-badge,
.theme-cosmic-emerald .creators-synergy-badge,
.theme-cosmic-emerald .partners-synergy-badge,
.theme-cosmic-emerald .feedback-synergy-badge {
  background: rgba(16, 185, 129, 0.12) !important;
  border-color: #10b981 !important;
  box-shadow: none !important;
}
.theme-cosmic-emerald .philosophy-synergy-badge .synergy-text,
.theme-cosmic-emerald .creators-synergy-badge .synergy-text,
.theme-cosmic-emerald .partners-synergy-badge .synergy-text,
.theme-cosmic-emerald .feedback-synergy-badge .synergy-text {
  color: #10b981 !important;
}
.theme-cosmic-emerald .philosophy-synergy-badge .synergy-dash,
.theme-cosmic-emerald .creators-synergy-badge .synergy-dash,
.theme-cosmic-emerald .partners-synergy-badge .synergy-dash,
.theme-cosmic-emerald .feedback-synergy-badge .synergy-dash {
  background: #10b981 !important;
}

/* Sakura Pink & Rose Neon Themes */
.theme-sakura-pink .philosophy-synergy-badge,
.theme-sakura-pink .creators-synergy-badge,
.theme-sakura-pink .partners-synergy-badge,
.theme-rose-neon .philosophy-synergy-badge,
.theme-rose-neon .creators-synergy-badge,
.theme-rose-neon .partners-synergy-badge {
  background: rgba(244, 63, 94, 0.12) !important;
  border-color: #f43f5e !important;
  box-shadow: none !important;
}
.theme-sakura-pink .philosophy-synergy-badge .synergy-text,
.theme-sakura-pink .creators-synergy-badge .synergy-text,
.theme-sakura-pink .partners-synergy-badge .synergy-text,
.theme-rose-neon .philosophy-synergy-badge .synergy-text,
.theme-rose-neon .creators-synergy-badge .synergy-text,
.theme-rose-neon .partners-synergy-badge .synergy-text {
  color: #f43f5e !important;
}
.theme-sakura-pink .synergy-dash,
.theme-rose-neon .synergy-dash {
  background: #f43f5e !important;
}

.synergy-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 850;
  color: #c084fc;
  text-transform: uppercase;
  line-height: 1;
}

.synergy-text span {
  display: block;
  text-align: center;
}

.synergy-dash {
  width: 2px !important;
  height: 8px !important;
  background: #c084fc !important;
  border-radius: 1px !important;
  margin: 3px 0 !important;
  display: block !important;
}

.creator-card {
  width: 100%;
  padding: 18px 22px;
  background: rgba(13, 21, 39, 0.65);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  text-align: left;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 18px;
}

/* Background Color Light-Up Glow on Hover (Founder 1: Teal) */
.creator-card.creator-teal:hover {
  background: radial-gradient(circle at top left, rgba(100, 255, 218, 0.22), rgba(13, 21, 39, 0.85));
  border-color: rgba(100, 255, 218, 0.45);
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(100, 255, 218, 0.18), inset 0 0 20px rgba(100, 255, 218, 0.08);
}

/* Background Color Light-Up Glow on Hover (Founder 2: Cyan) */
.creator-card.creator-cyan:hover {
  background: radial-gradient(circle at top left, rgba(0, 180, 216, 0.22), rgba(13, 21, 39, 0.85));
  border-color: rgba(0, 180, 216, 0.45);
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(0, 180, 216, 0.18), inset 0 0 20px rgba(0, 180, 216, 0.08);
}

/* Background Color Light-Up Glow on Hover (Founder 3: Purple) */
.creator-card.creator-purple:hover {
  background: radial-gradient(circle at top left, rgba(168, 85, 247, 0.22), rgba(13, 21, 39, 0.85));
  border-color: rgba(168, 85, 247, 0.45);
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(168, 85, 247, 0.18), inset 0 0 20px rgba(168, 85, 247, 0.08);
}

/* Empty Creator Slot Style */
.creator-card.creator-empty {
  border: 1px dashed rgba(255, 255, 255, 0.15);
  background: rgba(13, 21, 39, 0.35);
  opacity: 0.75;
}

.creator-card.creator-empty:hover {
  opacity: 1;
  border-color: rgba(100, 255, 218, 0.35);
  background: rgba(13, 21, 39, 0.55);
  transform: translateY(-4px);
}

.creator-avatar-wrap.border-empty {
  border: 1.5px dashed rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.03);
}

.empty-avatar-icon {
  font-size: 24px;
  color: var(--text-muted);
  font-weight: 300;
  line-height: 1;
}

.creator-avatar-wrap {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  padding: 3.5px;
  flex-shrink: 0;
  border: 2.5px solid var(--color-teal);
  box-shadow: 0 0 25px rgba(100, 255, 218, 0.35);
  transition: all 0.3s ease;
}

.creator-avatar-wrap.border-cyan {
  border-color: #00b4d8;
  box-shadow: 0 0 25px rgba(0, 180, 216, 0.35);
}

.creator-avatar-wrap.border-purple {
  border-color: #a855f7;
  box-shadow: 0 0 25px rgba(168, 85, 247, 0.35);
}

.creator-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 20%;
}

.creator-details-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.creator-info h3 {
  font-size: 16px;
  font-weight: 700;
  color: white;
  margin-bottom: 2px;
}

.creator-role {
  font-size: 11px;
  color: var(--color-teal);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 2px;
}

.creator-avatar-wrap.border-cyan ~ .creator-details-col .creator-role {
  color: #00b4d8;
}

.creator-avatar-wrap.border-purple ~ .creator-details-col .creator-role {
  color: #a855f7;
}

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

.creator-bio {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.45;
  margin-top: 6px;
  margin-bottom: 8px;
}

.creator-chip {
  display: inline-block;
  padding: 6px 12px;
  background: rgba(0, 180, 216, 0.1);
  border: 1px solid rgba(0, 180, 216, 0.3);
  border-radius: 16px;
  font-size: 11px;
  color: #00b4d8;
  font-weight: 600;
}



/* Stage 3: Partners & Sponsors */
.partners-stage-wrapper {
  width: 100%;
  max-width: 960px;
  text-align: center;
}

.partners-header {
  margin-bottom: 24px;
}

.sponsors-rich-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.sponsor-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  background: rgba(13, 21, 39, 0.65);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  text-align: left;
  transition: all 0.3s ease;
}

.sponsor-card:hover {
  background: rgba(20, 184, 166, 0.08);
  border-color: rgba(100, 255, 218, 0.3);
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(100, 255, 218, 0.1);
}

.sponsor-icon {
  font-size: 32px;
  flex-shrink: 0;
  padding: 12px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.sponsor-details h4 {
  font-size: 16px;
  font-weight: 700;
  color: white;
  margin-bottom: 4px;
}

.sponsor-role {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-teal);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.sponsor-details p {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0;
}

/* Empty Sponsor Slot Style */
.sponsor-card.sponsor-empty {
  border: 1.5px dashed rgba(255, 255, 255, 0.18) !important;
  background: rgba(13, 21, 39, 0.35) !important;
  opacity: 0.75;
}

.sponsor-card.sponsor-empty:hover {
  opacity: 1;
  border-color: rgba(100, 255, 218, 0.35) !important;
  background: rgba(13, 21, 39, 0.55) !important;
  transform: translateY(-4px) !important;
}

.sponsor-icon.border-empty {
  border: 1.5px dashed rgba(255, 255, 255, 0.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border-radius: 14px !important;
  font-size: 22px !important;
  color: var(--text-muted) !important;
  font-weight: 300 !important;
  width: 58px !important;
  height: 58px !important;
  padding: 0 !important;
}

@media (max-width: 900px) {
  .creators-card-row {
    flex-direction: column;
  }

  .creators-synergy-badge {
    flex-direction: row;
  }

  .synergy-text {
    flex-direction: row;
    align-items: center;
    gap: 1px;
  }

  .synergy-dash {
    width: 10px !important;
    height: 2px !important;
    margin: 0 3px !important;
  }

  .sponsors-rich-grid {
    grid-template-columns: 1fr;
  }

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

  .manifesto-banner {
    flex-direction: column;
    gap: 8px;
  }

  .stage-title {
    font-size: 28px;
  }

  .stage-nav-btn {
    display: none !important;
  }
}

/* On-Screen Symmetrical Circular Stage Navigation Buttons */
/* On-Screen Symmetrical Circular Stage Navigation Buttons */
.stage-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(13, 21, 39, 0.85);
  border: 1px solid var(--color-teal) !important;
  color: var(--color-teal) !important;
  cursor: pointer;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.stage-nav-btn.prev {
  left: 20px;
}

.stage-nav-btn.next {
  right: 20px;
}

.stage-nav-btn:hover {
  background: rgba(100, 255, 218, 0.15) !important;
  border-color: #64ffda !important;
  color: #64ffda !important;
  box-shadow: 0 0 20px rgba(100, 255, 218, 0.35) !important;
  transform: translateY(-50%) scale(1.1) !important;
}

/* System Theme Overrides for Next & Prev Buttons */
.theme-void-nebula .stage-nav-btn,
.theme-void-nebula .ecosystem-nav-arrows .stage-nav-btn,
.theme-void-nebula #flashcard-btn-prev,
.theme-void-nebula #flashcard-btn-next,
.theme-void-nebula #quiz-btn-next {
  border-color: #c084fc !important;
  color: #c084fc !important;
}
.theme-void-nebula .stage-nav-btn:hover,
.theme-void-nebula .ecosystem-nav-arrows .stage-nav-btn:hover,
.theme-void-nebula #flashcard-btn-prev:hover,
.theme-void-nebula #flashcard-btn-next:hover,
.theme-void-nebula #quiz-btn-next:hover {
  background: rgba(192, 132, 252, 0.15) !important;
  border-color: #c084fc !important;
  color: #ffffff !important;
  box-shadow: 0 0 20px rgba(192, 132, 252, 0.4) !important;
}

.theme-cosmic-emerald .stage-nav-btn,
.theme-cosmic-emerald .ecosystem-nav-arrows .stage-nav-btn,
.theme-cosmic-emerald #flashcard-btn-prev,
.theme-cosmic-emerald #flashcard-btn-next,
.theme-cosmic-emerald #quiz-btn-next {
  border-color: #10b981 !important;
  color: #10b981 !important;
}
.theme-cosmic-emerald .stage-nav-btn:hover,
.theme-cosmic-emerald .ecosystem-nav-arrows .stage-nav-btn:hover,
.theme-cosmic-emerald #flashcard-btn-prev:hover,
.theme-cosmic-emerald #flashcard-btn-next:hover,
.theme-cosmic-emerald #quiz-btn-next:hover {
  background: rgba(16, 185, 129, 0.15) !important;
  border-color: #10b981 !important;
  color: #ffffff !important;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.4) !important;
}

.theme-cyberpunk .stage-nav-btn,
.theme-cyberpunk .ecosystem-nav-arrows .stage-nav-btn,
.theme-cyberpunk #flashcard-btn-prev,
.theme-cyberpunk #flashcard-btn-next,
.theme-cyberpunk #quiz-btn-next {
  border-color: #00f2fe !important;
  color: #00f2fe !important;
}
.theme-cyberpunk .stage-nav-btn:hover,
.theme-cyberpunk .ecosystem-nav-arrows .stage-nav-btn:hover,
.theme-cyberpunk #flashcard-btn-prev:hover,
.theme-cyberpunk #flashcard-btn-next:hover,
.theme-cyberpunk #quiz-btn-next:hover {
  background: rgba(0, 242, 254, 0.15) !important;
  border-color: #00f2fe !important;
  color: #0d1527 !important;
  box-shadow: 0 0 20px rgba(0, 242, 254, 0.4) !important;
}

.theme-matrix .stage-nav-btn,
.theme-matrix .ecosystem-nav-arrows .stage-nav-btn,
.theme-matrix #flashcard-btn-prev,
.theme-matrix #flashcard-btn-next,
.theme-matrix #quiz-btn-next {
  border-color: #22c55e !important;
  color: #22c55e !important;
}
.theme-matrix .stage-nav-btn:hover,
.theme-matrix .ecosystem-nav-arrows .stage-nav-btn:hover,
.theme-matrix #flashcard-btn-prev:hover,
.theme-matrix #flashcard-btn-next:hover,
.theme-matrix #quiz-btn-next:hover {
  background: rgba(34, 197, 94, 0.15) !important;
  border-color: #22c55e !important;
  color: #0d1527 !important;
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.4) !important;
}

.theme-neon-sunset .stage-nav-btn,
.theme-neon-sunset .ecosystem-nav-arrows .stage-nav-btn,
.theme-neon-sunset #flashcard-btn-prev,
.theme-neon-sunset #flashcard-btn-next,
.theme-neon-sunset #quiz-btn-next {
  border-color: #f97316 !important;
  color: #f97316 !important;
}
.theme-neon-sunset .stage-nav-btn:hover,
.theme-neon-sunset .ecosystem-nav-arrows .stage-nav-btn:hover,
.theme-neon-sunset #flashcard-btn-prev:hover,
.theme-neon-sunset #flashcard-btn-next:hover,
.theme-neon-sunset #quiz-btn-next:hover {
  background: rgba(249, 115, 22, 0.15) !important;
  border-color: #f97316 !important;
  color: #ffffff !important;
  box-shadow: 0 0 20px rgba(249, 115, 22, 0.4) !important;
}

.theme-sakura-pink .stage-nav-btn,
.theme-sakura-pink .ecosystem-nav-arrows .stage-nav-btn,
.theme-sakura-pink #flashcard-btn-prev,
.theme-sakura-pink #flashcard-btn-next,
.theme-sakura-pink #quiz-btn-next {
  border-color: #ec4899 !important;
  color: #ec4899 !important;
}
.theme-sakura-pink .stage-nav-btn:hover,
.theme-sakura-pink .ecosystem-nav-arrows .stage-nav-btn:hover,
.theme-sakura-pink #flashcard-btn-prev:hover,
.theme-sakura-pink #flashcard-btn-next:hover,
.theme-sakura-pink #quiz-btn-next:hover {
  background: rgba(236, 72, 153, 0.15) !important;
  border-color: #ec4899 !important;
  color: #ffffff !important;
  box-shadow: 0 0 20px rgba(236, 72, 153, 0.4) !important;
}

.theme-rose-neon .stage-nav-btn,
.theme-rose-neon .ecosystem-nav-arrows .stage-nav-btn,
.theme-rose-neon #flashcard-btn-prev,
.theme-rose-neon #flashcard-btn-next,
.theme-rose-neon #quiz-btn-next {
  border-color: #ff2a85 !important;
  color: #ff2a85 !important;
}
.theme-rose-neon .stage-nav-btn:hover,
.theme-rose-neon .ecosystem-nav-arrows .stage-nav-btn:hover,
.theme-rose-neon #flashcard-btn-prev:hover,
.theme-rose-neon #flashcard-btn-next:hover,
.theme-rose-neon #quiz-btn-next:hover {
  background: rgba(255, 42, 133, 0.15) !important;
  border-color: #ff2a85 !important;
  color: #ffffff !important;
  box-shadow: 0 0 20px rgba(255, 42, 133, 0.4) !important;
}

.theme-warm-sepia .stage-nav-btn,
.theme-warm-sepia .ecosystem-nav-arrows .stage-nav-btn,
.theme-warm-sepia #flashcard-btn-prev,
.theme-warm-sepia #flashcard-btn-next,
.theme-warm-sepia #quiz-btn-next {
  border-color: #d97706 !important;
  color: #d97706 !important;
  background: rgba(217, 119, 6, 0.08) !important;
}
.theme-warm-sepia .stage-nav-btn:hover,
.theme-warm-sepia .ecosystem-nav-arrows .stage-nav-btn:hover,
.theme-warm-sepia #flashcard-btn-prev:hover,
.theme-warm-sepia #flashcard-btn-next:hover,
.theme-warm-sepia #quiz-btn-next:hover {
  background: #d97706 !important;
  border-color: #d97706 !important;
  color: #ffffff !important;
  box-shadow: 0 0 20px rgba(217, 119, 6, 0.4) !important;
}

/* --- System Theme Overrides for CMS Sub-Tab Buttons (.cms-sub-tab-btn) --- */
.theme-void-nebula .cms-sub-tab-btn.active {
  color: #c084fc !important;
  background: rgba(192, 132, 252, 0.12) !important;
  border: 1px solid rgba(192, 132, 252, 0.45) !important;
  box-shadow: 0 0 12px rgba(192, 132, 252, 0.2) !important;
}

.theme-cosmic-emerald .cms-sub-tab-btn.active {
  color: #10b981 !important;
  background: rgba(16, 185, 129, 0.12) !important;
  border: 1px solid rgba(16, 185, 129, 0.45) !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.2) !important;
}

.theme-cyberpunk .cms-sub-tab-btn.active {
  color: #00f2fe !important;
  background: rgba(0, 242, 254, 0.12) !important;
  border: 1px solid rgba(0, 242, 254, 0.45) !important;
  box-shadow: 0 0 12px rgba(0, 242, 254, 0.2) !important;
}

.theme-matrix .cms-sub-tab-btn.active {
  color: #22c55e !important;
  background: rgba(34, 197, 94, 0.12) !important;
  border: 1px solid rgba(34, 197, 94, 0.45) !important;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.2) !important;
}

.theme-neon-sunset .cms-sub-tab-btn.active {
  color: #f97316 !important;
  background: rgba(249, 115, 22, 0.12) !important;
  border: 1px solid rgba(249, 115, 22, 0.45) !important;
  box-shadow: 0 0 12px rgba(249, 115, 22, 0.2) !important;
}

.theme-sakura-pink .cms-sub-tab-btn.active {
  color: #ec4899 !important;
  background: rgba(236, 72, 153, 0.12) !important;
  border: 1px solid rgba(236, 72, 153, 0.45) !important;
  box-shadow: 0 0 12px rgba(236, 72, 153, 0.2) !important;
}

.theme-rose-neon .cms-sub-tab-btn.active {
  color: #ff2a85 !important;
  background: rgba(255, 42, 133, 0.12) !important;
  border: 1px solid rgba(255, 42, 133, 0.45) !important;
  box-shadow: 0 0 12px rgba(255, 42, 133, 0.2) !important;
}

.theme-warm-sepia .cms-sub-tab-btn.active {
  color: #b45309 !important;
  background: rgba(217, 119, 6, 0.12) !important;
  border: 1.5px solid rgba(217, 119, 6, 0.4) !important;
  font-weight: 800 !important;
}


/* Revolutionized Step 1 Manifesto Card & Grid */
.philosophy-stage-card {
  max-width: 900px !important;
}

.manifesto-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 24px;
  text-align: left;
}

.manifesto-card {
  position: relative;
  padding: 24px 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
  transition: all 0.35s ease;
  overflow: hidden;
}

.manifesto-card:hover {
  background: rgba(100, 255, 218, 0.06);
  border-color: rgba(100, 255, 218, 0.3);
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(100, 255, 218, 0.12);
}

.manifesto-num {
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 13px;
  font-weight: 900;
  font-family: monospace;
  color: rgba(255, 255, 255, 0.15);
}

.manifesto-icon {
  font-size: 26px;
  margin-bottom: 12px;
}

.manifesto-card h4 {
  font-size: 16px;
  font-weight: 700;
  color: white;
  margin-bottom: 8px;
}

.manifesto-card p {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 14px;
}

.manifesto-example {
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  font-size: 12px;
  color: var(--text-secondary);
  border-left: 3px solid var(--color-teal);
}

.ex-tag {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-teal);
  text-transform: uppercase;
  margin-right: 4px;
}

.text-glow {
  color: var(--color-teal);
  font-weight: 700;
  text-shadow: 0 0 10px rgba(100, 255, 218, 0.5);
}

.manifesto-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.m-chip {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
}

.m-chip.casual {
  background: rgba(100, 255, 218, 0.12);
  color: var(--color-teal);
  border: 1px solid rgba(100, 255, 218, 0.3);
}

.m-chip.formal {
  background: rgba(0, 180, 216, 0.12);
  color: #00b4d8;
  border: 1px solid rgba(0, 180, 216, 0.3);
}

.m-chip.pro {
  background: rgba(168, 85, 247, 0.12);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.manifesto-metric {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(100, 255, 218, 0.1);
  border-radius: 10px;
  font-size: 12px;
  color: white;
  font-weight: 600;
}

.metric-val {
  font-weight: 800;
  color: var(--color-teal);
}

/* Manifesto Bottom Paradigm Banner */
.manifesto-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.banner-badge {
  color: var(--color-teal);
  font-weight: 700;
}

.banner-divider {
  color: rgba(255, 255, 255, 0.2);
}

/* ==========================================
   UNIQUE ECOSYSTEM ODYSSEY SCROLL SYSTEM
   ========================================== */
.ecosystem-odyssey-container {
  position: relative;
  height: 250vh;
  width: 100%;
  margin: 0;
  left: 0;
  right: 0;
}

.ecosystem-odyssey-sticky {
  position: sticky;
  top: 80px;
  height: calc(100vh - 80px);
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.ecosystem-ambient-aura {
  position: absolute;
  top: 45%;
  left: 50%;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  background: rgba(88, 101, 242, 0.18);
  filter: blur(120px);
  transform: translate(-50%, -50%) scale(1);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 0;
}

/* Main Two-Column Layout (Left Controls Dock + Stage Center) */
.ecosystem-main-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  width: 100%;
  max-width: 1080px;
  z-index: 10;
}

/* Left Control Panel Dock */
.ecosystem-left-controls {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px 20px;
  background: rgba(10, 15, 30, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  backdrop-filter: blur(16px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  width: 210px;
  flex-shrink: 0;
}

.controls-header {
  display: flex;
  justify-content: center;
  gap: 4px;
}

.controls-title {
  font-size: 16px;
  font-weight: 800;
  color: white;
  margin: 0;
}

/* Vertical Timeline Step Links */
.ecosystem-timeline-nav.vertical {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ecosystem-timeline-nav.vertical .timeline-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
  font-size: 13px;
  color: var(--text-secondary);
  transform: none !important;
}

.ecosystem-timeline-nav.vertical .timeline-step:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: var(--color-teal) !important;
  color: var(--color-teal) !important;
  transform: none !important;
}

.ecosystem-timeline-nav.vertical .timeline-step.active {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: var(--color-teal) !important;
  color: var(--color-teal) !important;
  transform: none !important;
  box-shadow: 0 0 12px rgba(100, 255, 218, 0.25) !important;
}

/* System Theme Overrides for Timeline Steps */
.theme-void-nebula .ecosystem-timeline-nav.vertical .timeline-step.active,
.theme-void-nebula .ecosystem-timeline-nav.vertical .timeline-step:hover {
  border-color: #c084fc !important;
  color: #c084fc !important;
  box-shadow: 0 0 12px rgba(192, 132, 252, 0.25) !important;
}

.theme-cosmic-emerald .ecosystem-timeline-nav.vertical .timeline-step.active,
.theme-cosmic-emerald .ecosystem-timeline-nav.vertical .timeline-step:hover {
  border-color: #10b981 !important;
  color: #10b981 !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.25) !important;
}

.theme-cyberpunk .ecosystem-timeline-nav.vertical .timeline-step.active,
.theme-cyberpunk .ecosystem-timeline-nav.vertical .timeline-step:hover {
  border-color: #00f2fe !important;
  color: #00f2fe !important;
  box-shadow: 0 0 12px rgba(0, 242, 254, 0.25) !important;
}

.theme-matrix .ecosystem-timeline-nav.vertical .timeline-step.active,
.theme-matrix .ecosystem-timeline-nav.vertical .timeline-step:hover {
  border-color: #22c55e !important;
  color: #22c55e !important;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.25) !important;
}

.theme-neon-sunset .ecosystem-timeline-nav.vertical .timeline-step.active,
.theme-neon-sunset .ecosystem-timeline-nav.vertical .timeline-step:hover {
  border-color: #f97316 !important;
  color: #f97316 !important;
  box-shadow: 0 0 12px rgba(249, 115, 22, 0.25) !important;
}

.theme-sakura-pink .ecosystem-timeline-nav.vertical .timeline-step.active,
.theme-sakura-pink .ecosystem-timeline-nav.vertical .timeline-step:hover {
  border-color: #ec4899 !important;
  color: #ec4899 !important;
  box-shadow: 0 0 12px rgba(236, 72, 153, 0.25) !important;
}

.theme-rose-neon .ecosystem-timeline-nav.vertical .timeline-step.active,
.theme-rose-neon .ecosystem-timeline-nav.vertical .timeline-step:hover {
  border-color: #ff2a85 !important;
  color: #ff2a85 !important;
  box-shadow: 0 0 12px rgba(255, 42, 133, 0.25) !important;
}

.theme-warm-sepia .ecosystem-timeline-nav.vertical .timeline-step.active,
.theme-warm-sepia .ecosystem-timeline-nav.vertical .timeline-step:hover {
  border-color: #d97706 !important;
  color: #d97706 !important;
  box-shadow: 0 0 12px rgba(217, 119, 6, 0.25) !important;
}


/* Navigation Arrows inside Left Control Dock */
.ecosystem-nav-arrows {
  display: flex;
  gap: 10px;
  width: 100%;
  margin-top: 6px;
}

.ecosystem-nav-arrows .stage-nav-btn {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  transform: none !important;
  flex: 1;
  height: 42px;
  width: auto;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-teal) !important;
  color: var(--color-teal) !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.ecosystem-nav-arrows .stage-nav-btn:hover {
  background: rgba(100, 255, 218, 0.15) !important;
  border-color: #64ffda !important;
  color: #64ffda !important;
  transform: none !important;
  box-shadow: 0 0 15px rgba(100, 255, 218, 0.3) !important;
}

/* Center Stage Area */
.ecosystem-stage-wrapper {
  position: relative;
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 520px;
}

.ecosystem-stage-slide {
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transform: translateX(60px) scale(0.94) rotateY(-6deg);
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 10;
}

.ecosystem-stage-slide.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1) rotateY(0deg);
  z-index: 20;
}

/* Discord Stage Dual Layout (Embed Left, Info Right) */
.discord-dual-layout {
  display: flex;
  gap: 24px;
  align-items: stretch;
  max-width: 760px;
  width: 100%;
}

.discord-embed-column {
  flex: 1.1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 320px;
}

.discord-iframe-container {
  flex-grow: 1;
  height: 380px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(88, 101, 242, 0.3);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.discord-info-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 22px;
  gap: 14px;
  border-radius: 16px;
  background: rgba(14, 20, 32, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
}

.discord-embed-phone iframe {
  width: 100%;
  height: 100%;
  border: none;
}

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

.discord-header-info,
.instagram-header-info,
.apps-header-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.discord-icon-wrapper {
  width: 40px;
  height: 40px;
  background: #5865F2;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 16px rgba(88, 101, 242, 0.4);
}

.instagram-icon-wrapper {
  width: 40px;
  height: 40px;
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 16px rgba(225, 48, 108, 0.4);
}

.apps-icon-wrapper {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, rgba(100, 255, 218, 0.2), rgba(100, 255, 218, 0.05));
  border: 1px solid rgba(100, 255, 218, 0.3);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 0 16px rgba(100, 255, 218, 0.2);
}

.live-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-teal);
  background: rgba(100, 255, 218, 0.08);
  border: 1px solid rgba(100, 255, 218, 0.25);
  padding: 4px 10px;
  border-radius: 12px;
}

.pulse-dot {
  width: 6px;
  height: 6px;
  background: var(--color-teal);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--color-teal);
  animation: pulseGlow 2s infinite;
}

@keyframes pulseGlow {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.4;
    transform: scale(1.3);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.card-title {
  font-size: 18px;
  font-weight: 800;
  color: white;
  margin-top: 2px;
}

.card-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

/* Discord Live Lounge Box */
.discord-lounge-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(88, 101, 242, 0.2);
  border-radius: 14px;
}

.lounge-box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.status-live {
  color: #7983f5;
}

.lounge-channels-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.channel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}

.channel-row.active-voice {
  background: rgba(88, 101, 242, 0.1);
  border-color: rgba(88, 101, 242, 0.25);
}

.channel-name {
  font-size: 13px;
  font-weight: 600;
  color: white;
}

.channel-type {
  font-size: 11px;
  color: #7983f5;
  background: rgba(88, 101, 242, 0.18);
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 700;
}

/* Instagram Showcase Box */
.insta-showcase-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(225, 48, 108, 0.2);
  border-radius: 14px;
  text-align: center;
}

.insta-avatar-ring {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  margin-bottom: 10px;
  box-shadow: 0 0 16px rgba(225, 48, 108, 0.3);
}

.insta-avatar-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #1c2541;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.insta-handle {
  color: white;
  font-size: 15px;
  margin-bottom: 2px;
}

.insta-bio {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.insta-stats-row {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--text-muted);
}

.btn-instagram {
  width: 100%;
  text-align: center;
  padding: 11px 18px;
  font-weight: 700;
  border-radius: 12px;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(45deg, #dc2743, #cc2366, #bc1888);
  color: white;
  border: none;
  box-shadow: 0 4px 15px rgba(225, 48, 108, 0.35);
  transition: all 0.3s ease;
}

.btn-instagram:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(225, 48, 108, 0.5);
}

.btn-join-discord {
  width: 100%;
  text-align: center;
  padding: 11px 18px;
  font-weight: 700;
  border-radius: 12px;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.apps-highlights-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 6px 0;
}

.app-feature-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}

/* ==========================================================================
   STORIES REVOLUTION EFFECTS
   ========================================================================== */

/* Staggered Card Fade-In */
@keyframes storyCardFadeIn {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.story-card-animated {
  animation: storyCardFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Card Hover Lift and Sheen */
.story-card.glass-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), 
              border-color 0.3s ease, 
              box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  background: linear-gradient(135deg, rgba(22, 34, 63, 0.45) 0%, rgba(13, 21, 39, 0.55) 100%);
  border: 1px solid rgba(100, 255, 218, 0.2) !important;
}

.story-card.glass-card:hover {
  transform: translateY(-8px) scale(1.015);
  border-color: var(--color-teal) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 
              0 0 25px rgba(100, 255, 218, 0.25) !important;
}

.story-card .btn-read {
  border: 1px solid var(--color-teal) !important;
  color: var(--color-teal) !important;
  background: rgba(100, 255, 218, 0.05) !important;
  transition: all 0.25s ease !important;
}

.story-card .btn-read:hover {
  color: #0d1527 !important;
  background: var(--color-teal) !important;
  border-color: var(--color-teal) !important;
  box-shadow: 0 0 15px rgba(100, 255, 218, 0.4) !important;
  transform: translateY(-2px) !important;
}

/* Void Nebula Theme Overrides */
.theme-void-nebula .story-card.glass-card {
  border-color: rgba(192, 132, 252, 0.3) !important;
}
.theme-void-nebula .story-card.glass-card:hover {
  border-color: #c084fc !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 25px rgba(192, 132, 252, 0.35) !important;
}
.theme-void-nebula .story-card .btn-read {
  border-color: #c084fc !important;
  color: #c084fc !important;
  background: rgba(192, 132, 252, 0.08) !important;
}
.theme-void-nebula .story-card .btn-read:hover {
  background: #c084fc !important;
  border-color: #c084fc !important;
  color: #ffffff !important;
  box-shadow: 0 0 15px rgba(192, 132, 252, 0.5) !important;
}

/* Cosmic Emerald Theme Overrides */
.theme-cosmic-emerald .story-card.glass-card {
  border-color: rgba(16, 185, 129, 0.3) !important;
}
.theme-cosmic-emerald .story-card.glass-card:hover {
  border-color: #10b981 !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 25px rgba(16, 185, 129, 0.35) !important;
}
.theme-cosmic-emerald .story-card .btn-read {
  border-color: #10b981 !important;
  color: #10b981 !important;
  background: rgba(16, 185, 129, 0.08) !important;
}
.theme-cosmic-emerald .story-card .btn-read:hover {
  background: #10b981 !important;
  border-color: #10b981 !important;
  color: #ffffff !important;
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.5) !important;
}

/* Cyberpunk Theme Overrides */
.theme-cyberpunk .story-card.glass-card {
  border-color: rgba(0, 242, 254, 0.3) !important;
}
.theme-cyberpunk .story-card.glass-card:hover {
  border-color: #00f2fe !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 25px rgba(0, 242, 254, 0.35) !important;
}
.theme-cyberpunk .story-card .btn-read {
  border-color: #00f2fe !important;
  color: #00f2fe !important;
  background: rgba(0, 242, 254, 0.08) !important;
}
.theme-cyberpunk .story-card .btn-read:hover {
  background: #00f2fe !important;
  border-color: #00f2fe !important;
  color: #0d1527 !important;
  box-shadow: 0 0 15px rgba(0, 242, 254, 0.5) !important;
}

/* Matrix Theme Overrides */
.theme-matrix .story-card.glass-card {
  border-color: rgba(34, 197, 94, 0.3) !important;
}
.theme-matrix .story-card.glass-card:hover {
  border-color: #22c55e !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 25px rgba(34, 197, 94, 0.35) !important;
}
.theme-matrix .story-card .btn-read {
  border-color: #22c55e !important;
  color: #22c55e !important;
  background: rgba(34, 197, 94, 0.08) !important;
}
.theme-matrix .story-card .btn-read:hover {
  background: #22c55e !important;
  border-color: #22c55e !important;
  color: #0d1527 !important;
  box-shadow: 0 0 15px rgba(34, 197, 94, 0.5) !important;
}

/* Neon Sunset Theme Overrides */
.theme-neon-sunset .story-card.glass-card {
  border-color: rgba(249, 115, 22, 0.3) !important;
}
.theme-neon-sunset .story-card.glass-card:hover {
  border-color: #f97316 !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 25px rgba(249, 115, 22, 0.35) !important;
}
.theme-neon-sunset .story-card .btn-read {
  border-color: #f97316 !important;
  color: #f97316 !important;
  background: rgba(249, 115, 22, 0.08) !important;
}
.theme-neon-sunset .story-card .btn-read:hover {
  background: #f97316 !important;
  border-color: #f97316 !important;
  color: #ffffff !important;
  box-shadow: 0 0 15px rgba(249, 115, 22, 0.5) !important;
}

/* Sakura Pink Theme Overrides */
.theme-sakura-pink .story-card.glass-card {
  border-color: rgba(236, 72, 153, 0.3) !important;
}
.theme-sakura-pink .story-card.glass-card:hover {
  border-color: #ec4899 !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 25px rgba(236, 72, 153, 0.35) !important;
}
.theme-sakura-pink .story-card .btn-read {
  border-color: #ec4899 !important;
  color: #ec4899 !important;
  background: rgba(236, 72, 153, 0.08) !important;
}
.theme-sakura-pink .story-card .btn-read:hover {
  background: #ec4899 !important;
  border-color: #ec4899 !important;
  color: #ffffff !important;
  box-shadow: 0 0 15px rgba(236, 72, 153, 0.5) !important;
}

/* Rose Neon Theme Overrides */
.theme-rose-neon .story-card.glass-card {
  border-color: rgba(255, 42, 133, 0.3) !important;
}
.theme-rose-neon .story-card.glass-card:hover {
  border-color: #ff2a85 !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 25px rgba(255, 42, 133, 0.35) !important;
}
.theme-rose-neon .story-card .btn-read {
  border-color: #ff2a85 !important;
  color: #ff2a85 !important;
  background: rgba(255, 42, 133, 0.08) !important;
}
.theme-rose-neon .story-card .btn-read:hover {
  background: #ff2a85 !important;
  border-color: #ff2a85 !important;
  color: #ffffff !important;
  box-shadow: 0 0 15px rgba(255, 42, 133, 0.5) !important;
}


/* Reflective Sheen Sweep */
.story-card.glass-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg, 
    rgba(255, 255, 255, 0) 0%, 
    rgba(255, 255, 255, 0.06) 50%, 
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  pointer-events: none;
  transition: none;
}

.story-card.glass-card:hover::after {
  left: 150%;
  transition: left 0.8s ease-in-out;
}

/* Cover image subtle zoom on card hover */
.story-card-image {
  overflow: hidden;
  position: relative;
  transition: border-color 0.3s ease;
}

.story-card:hover .story-card-image {
  border-color: rgba(100, 255, 218, 0.3);
}

/* Card Badge Glows */
.badge-level {
  letter-spacing: 0.05em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.badge-interest {
  letter-spacing: 0.03em;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Premium Locked State Overlay styling */
.story-card-locked {
  filter: grayscale(0.3) opacity(0.85);
  cursor: not-allowed;
}

.story-card-locked-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(6, 11, 19, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.3s ease;
  padding: 20px;
  text-align: center;
}

.story-card-locked:hover .story-card-locked-overlay {
  opacity: 1;
}

.lock-shield {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 183, 3, 0.15);
  border: 1.5px solid #ffb703;
  color: #ffb703;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 12px;
  box-shadow: 0 0 15px rgba(255, 183, 3, 0.3);
  animation: lockPulse 2s infinite ease-in-out;
}

@keyframes lockPulse {
  0% { box-shadow: 0 0 5px rgba(255, 183, 3, 0.2); }
  50% { box-shadow: 0 0 20px rgba(255, 183, 3, 0.5); }
  100% { box-shadow: 0 0 5px rgba(255, 183, 3, 0.2); }
}

.lock-text {
  font-size: 13px;
  font-weight: 700;
  color: #ffb703;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.lock-subtext {
  font-size: 11px;
  color: var(--text-secondary);
}

/* Verified Check Badge for read stories */
.badge-read {
  background: rgba(16, 185, 129, 0.16) !important;
  color: #10b981 !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
  border-radius: 6px !important;
  padding: 3px 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.25) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  animation: badgePop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes badgePop {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* Premium Guest Banner styling */
#stories-more-banner.glass-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(13, 21, 39, 0.8) 0%, rgba(6, 11, 19, 0.9) 100%) !important;
  border: 1px solid rgba(100, 255, 218, 0.2) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 0 0 20px rgba(100, 255, 218, 0.05);
}

#stories-more-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(at 0% 0%, rgba(100, 255, 218, 0.1) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(0, 119, 182, 0.15) 0px, transparent 50%);
  pointer-events: none;
}

#stories-more-banner h3 {
  font-size: 1.8rem;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 12px;
}

/* Reader Mode Themes & Typography */
.reader-container {
  transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

/* 1. Theme Dark Space (default) */
.reader-theme-dark {
  background: #000000 !important;
  color: var(--text-primary) !important;
}
.reader-theme-dark .reader-text {
  color: var(--text-secondary) !important;
}
.reader-theme-dark .reader-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.reader-theme-dark .reader-sidebar {
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}

/* 2. Theme Deep Sea */
.reader-theme-sea {
  background: #060b13 !important;
  color: #f8f9fa !important;
  border-color: rgba(0, 180, 216, 0.25) !important;
}
.reader-theme-sea .reader-text {
  color: #cdd6f4 !important;
}
.reader-theme-sea .reader-header {
  border-bottom: 1px solid rgba(0, 180, 216, 0.12);
}
.reader-theme-sea .reader-sidebar {
  border-left: 1px solid rgba(0, 180, 216, 0.12);
}

/* --- PROFILE SYSTEM THEME ACCENTS FOR STORY READER LIGHT MODE (.reader-theme-sepia) --- */
:root {
  --reader-sepia-accent: #007a8a;
  --reader-sepia-accent-bg: rgba(0, 122, 138, 0.12);
  --reader-sepia-accent-border: rgba(0, 122, 138, 0.35);
}

.theme-deep-space,
.theme-void-black {
  --reader-sepia-accent: #007a8a;
  --reader-sepia-accent-bg: rgba(0, 122, 138, 0.12);
  --reader-sepia-accent-border: rgba(0, 122, 138, 0.35);
}

.theme-void-nebula {
  --reader-sepia-accent: #7c3aed;
  --reader-sepia-accent-bg: rgba(124, 58, 237, 0.12);
  --reader-sepia-accent-border: rgba(124, 58, 237, 0.35);
}

.theme-cosmic-emerald {
  --reader-sepia-accent: #059669;
  --reader-sepia-accent-bg: rgba(5, 150, 105, 0.12);
  --reader-sepia-accent-border: rgba(5, 150, 105, 0.35);
}

.theme-cyberpunk {
  --reader-sepia-accent: #0284c7;
  --reader-sepia-accent-bg: rgba(2, 132, 199, 0.12);
  --reader-sepia-accent-border: rgba(2, 132, 199, 0.35);
}

.theme-matrix {
  --reader-sepia-accent: #16a34a;
  --reader-sepia-accent-bg: rgba(22, 163, 74, 0.12);
  --reader-sepia-accent-border: rgba(22, 163, 74, 0.35);
}

.theme-neon-sunset,
.theme-warm-sepia {
  --reader-sepia-accent: #d97706;
  --reader-sepia-accent-bg: rgba(217, 119, 6, 0.12);
  --reader-sepia-accent-border: rgba(217, 119, 6, 0.35);
}

/* 3. Theme Warm Sepia (Light Mode) */
.reader-theme-sepia {
  background: #fdf6e3 !important;
  color: #433422 !important;
  border-color: rgba(67, 52, 34, 0.15) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3) !important;
}
.reader-theme-sepia .reader-text {
  color: #5c4a37 !important;
}
.reader-theme-sepia .reader-header {
  border-bottom: 1px solid rgba(67, 52, 34, 0.12) !important;
  background: transparent !important;
}
.reader-theme-sepia .reader-title-wrap h3 {
  color: #433422 !important;
  font-weight: 850 !important;
}
.reader-theme-sepia #reader-int,
.reader-theme-sepia .badge-interest {
  background: var(--reader-sepia-accent-bg) !important;
  color: var(--reader-sepia-accent) !important;
  border: 1px solid var(--reader-sepia-accent-border) !important;
  font-weight: 800 !important;
}
.reader-theme-sepia .text-scaler,
.reader-theme-sepia .theme-selector {
  background: rgba(67, 52, 34, 0.05) !important;
  border: 1px solid rgba(67, 52, 34, 0.15) !important;
}
.reader-theme-sepia .control-btn {
  color: #433422 !important;
}
.reader-theme-sepia .btn-close-reader {
  background: rgba(67, 52, 34, 0.05) !important;
  color: #433422 !important;
  border: 1px solid rgba(67, 52, 34, 0.15) !important;
}
.reader-theme-sepia .btn-close-reader:hover {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #ef4444 !important;
}
.reader-theme-sepia .reader-sidebar {
  border-left: 1px solid rgba(67, 52, 34, 0.12) !important;
  background: transparent !important;
}
.reader-theme-sepia .reader-footer {
  border-top: 1px solid rgba(67, 52, 34, 0.12) !important;
  background: transparent !important;
}
.reader-theme-sepia .reader-progress-bar {
  background: rgba(67, 52, 34, 0.1) !important;
  border: 1px solid rgba(67, 52, 34, 0.15) !important;
}
.reader-theme-sepia .reader-progress-fill {
  background: var(--reader-sepia-accent) !important;
}
.reader-theme-sepia #reader-progress-pct {
  color: var(--reader-sepia-accent) !important;
  font-weight: 800 !important;
}
.reader-theme-sepia #btn-complete-reading {
  background: var(--reader-sepia-accent-bg) !important;
  color: var(--reader-sepia-accent) !important;
  border: 1px solid var(--reader-sepia-accent-border) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  transition: all 0.25s ease !important;
}
.reader-theme-sepia #btn-complete-reading:hover {
  background: var(--reader-sepia-accent) !important;
  color: #ffffff !important;
  border-color: var(--reader-sepia-accent) !important;
}
.reader-theme-sepia .vocab-panel-title {
  color: #433422 !important;
}
.reader-theme-sepia .vocab-card-placeholder {
  color: #8c765c !important;
  background: rgba(67, 52, 34, 0.04) !important;
  border: 1px dashed rgba(67, 52, 34, 0.2) !important;
}
.reader-theme-sepia .vocab-word {
  color: var(--reader-sepia-accent) !important;
  border-bottom: 1.5px dashed var(--reader-sepia-accent) !important;
}
.reader-theme-sepia .vocab-word:hover {
  background: var(--reader-sepia-accent-bg) !important;
}
.reader-theme-sepia .vocab-card-active {
  background: rgba(67, 52, 34, 0.04) !important;
  border: 1px solid rgba(67, 52, 34, 0.15) !important;
}
.reader-theme-sepia .vocab-term {
  color: #433422 !important;
}
.reader-theme-sepia .vocab-pos,
.reader-theme-sepia .pos-tag {
  background: var(--reader-sepia-accent-bg) !important;
  color: var(--reader-sepia-accent) !important;
  border: 1px solid var(--reader-sepia-accent-border) !important;
  font-weight: 800 !important;
}
.reader-theme-sepia .vocab-definition {
  color: #5c4a37 !important;
}
.reader-theme-sepia .vocab-ex-label {
  color: #000000 !important;
  font-weight: 800 !important;
}
.reader-theme-sepia .vocab-example {
  color: #433422 !important;
  border-left: 3px solid var(--reader-sepia-accent) !important;
  background: rgba(67, 52, 34, 0.03) !important;
  padding: 8px 12px !important;
  border-radius: 0 8px 8px 0 !important;
}

/* Base Full Pill Capsule Style for Add to Wordbook (Matches Move to Matrix Reel) */
.vocab-save-btn,
#btn-add-vocab-wordbook {
  display: flex !important;
  width: 100% !important;
  margin-top: 16px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 20px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  border-radius: 9999px !important;
  color: var(--color-teal) !important;
  background: rgba(13, 21, 39, 0.6) !important;
  border: 1px solid rgba(100, 255, 218, 0.3) !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
}

.vocab-save-btn:hover,
#btn-add-vocab-wordbook:hover {
  color: #0d1527 !important;
  background: var(--color-teal) !important;
  border-color: var(--color-teal) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(100, 255, 218, 0.35) !important;
}

.vocab-save-btn.is-saved,
#btn-add-vocab-wordbook.is-saved {
  color: #ffb703 !important;
  background: rgba(255, 183, 3, 0.12) !important;
  border: 1px solid rgba(255, 183, 3, 0.4) !important;
  box-shadow: none !important;
}

.reader-theme-sepia #btn-add-vocab-wordbook,
.reader-theme-sepia .vocab-save-btn {
  background: var(--reader-sepia-accent-bg) !important;
  color: var(--reader-sepia-accent) !important;
  border: 1px solid var(--reader-sepia-accent-border) !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  transition: all 0.25s ease !important;
}
.reader-theme-sepia #btn-add-vocab-wordbook:hover,
.reader-theme-sepia .vocab-save-btn:hover {
  background: var(--reader-sepia-accent) !important;
  color: #ffffff !important;
  border-color: var(--reader-sepia-accent) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px var(--reader-sepia-accent-bg) !important;
}
.reader-theme-sepia #btn-add-vocab-wordbook.is-saved,
.reader-theme-sepia .vocab-save-btn.is-saved {
  background: rgba(217, 119, 6, 0.1) !important;
  color: #b45309 !important;
  border: 1px solid rgba(217, 119, 6, 0.35) !important;
  box-shadow: none !important;
}

/* 4. Theme Midnight Slate */
.reader-theme-midnight {
  background: #0f172a !important;
  color: #f1f5f9 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
.reader-theme-midnight .reader-text {
  color: #cbd5e1 !important;
}
.reader-theme-midnight .reader-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.reader-theme-midnight .reader-sidebar {
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

/* --- High-Specificity Protections for Story Reader Modal Themes under App Themes (e.g. Warm Sepia) --- */

/* 1. Reader Theme Dark (Black) Protection */
.theme-warm-sepia .reader-theme-dark .reader-title-wrap h3,
.theme-warm-sepia .reader-theme-dark .reader-text,
.theme-warm-sepia .reader-theme-dark .reader-text p,
.theme-warm-sepia .reader-theme-dark .vocab-panel-title,
.theme-warm-sepia .reader-theme-dark .vocab-card-placeholder,
.theme-warm-sepia .reader-theme-dark .vocab-term,
.theme-warm-sepia .reader-theme-dark .vocab-definition,
.theme-warm-sepia .reader-theme-dark .vocab-example,
.theme-warm-sepia .reader-theme-dark .vocab-ex-label,
.theme-warm-sepia .reader-theme-dark .control-btn,
.theme-warm-sepia .reader-theme-dark #reader-progress-pct {
  color: #e2e8f0 !important;
}
.theme-warm-sepia .reader-theme-dark .reader-text p {
  color: #cbd5e1 !important;
}
.theme-warm-sepia .reader-theme-dark .vocab-word,
.reader-theme-dark .vocab-word {
  color: #64ffda !important;
  border-bottom: 1.5px dashed #64ffda !important;
  font-weight: 700 !important;
}
.theme-warm-sepia .reader-theme-dark .vocab-word:hover,
.reader-theme-dark .vocab-word:hover {
  background: rgba(100, 255, 218, 0.15) !important;
}
.theme-warm-sepia .reader-theme-dark .vocab-panel-title {
  color: #64ffda !important;
  font-weight: 800 !important;
}
.theme-warm-sepia .reader-theme-dark .vocab-card-placeholder {
  color: #9ca3af !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
.theme-warm-sepia .reader-theme-dark .vocab-card-active,
.reader-theme-dark .vocab-card-active {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(100, 255, 218, 0.3) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}
.theme-warm-sepia .reader-theme-dark .vocab-pos,
.theme-warm-sepia .reader-theme-dark .pos-tag,
.reader-theme-dark .vocab-pos,
.reader-theme-dark .pos-tag {
  background: rgba(100, 255, 218, 0.12) !important;
  color: #64ffda !important;
  border: 1px solid rgba(100, 255, 218, 0.35) !important;
  font-weight: 800 !important;
}
.theme-warm-sepia .reader-theme-dark .vocab-example,
.reader-theme-dark .vocab-example {
  color: #cbd5e1 !important;
  border-left: 3px solid #f97316 !important;
  background: rgba(249, 115, 22, 0.08) !important;
}
.theme-warm-sepia .reader-theme-dark .btn-close-reader {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* 2. Reader Theme Deep Sea (Dark Blue) Protection */
.theme-warm-sepia .reader-theme-sea .reader-title-wrap h3,
.theme-warm-sepia .reader-theme-sea .reader-text,
.theme-warm-sepia .reader-theme-sea .reader-text p,
.theme-warm-sepia .reader-theme-sea .vocab-panel-title,
.theme-warm-sepia .reader-theme-sea .vocab-card-placeholder,
.theme-warm-sepia .reader-theme-sea .vocab-term,
.theme-warm-sepia .reader-theme-sea .vocab-definition,
.theme-warm-sepia .reader-theme-sea .vocab-example,
.theme-warm-sepia .reader-theme-sea .vocab-ex-label,
.theme-warm-sepia .reader-theme-sea .control-btn,
.theme-warm-sepia .reader-theme-sea #reader-progress-pct {
  color: #f8f9fa !important;
}
.theme-warm-sepia .reader-theme-sea .reader-text p {
  color: #cdd6f4 !important;
}
.theme-warm-sepia .reader-theme-sea .vocab-word,
.reader-theme-sea .vocab-word {
  color: #00b4d8 !important;
  border-bottom: 1.5px dashed #00b4d8 !important;
  font-weight: 700 !important;
}
.theme-warm-sepia .reader-theme-sea .vocab-word:hover,
.reader-theme-sea .vocab-word:hover {
  background: rgba(0, 180, 216, 0.15) !important;
}
.theme-warm-sepia .reader-theme-sea .vocab-panel-title {
  color: #00b4d8 !important;
  font-weight: 800 !important;
}
.theme-warm-sepia .reader-theme-sea .vocab-card-placeholder {
  color: #a6adc8 !important;
  background: rgba(0, 180, 216, 0.04) !important;
  border-color: rgba(0, 180, 216, 0.15) !important;
}
.theme-warm-sepia .reader-theme-sea .vocab-card-active,
.reader-theme-sea .vocab-card-active {
  background: rgba(0, 180, 216, 0.04) !important;
  border: 1px solid rgba(0, 180, 216, 0.3) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}
.theme-warm-sepia .reader-theme-sea .vocab-pos,
.theme-warm-sepia .reader-theme-sea .pos-tag,
.reader-theme-sea .vocab-pos,
.reader-theme-sea .pos-tag {
  background: rgba(0, 180, 216, 0.12) !important;
  color: #00b4d8 !important;
  border: 1px solid rgba(0, 180, 216, 0.35) !important;
  font-weight: 800 !important;
}
.theme-warm-sepia .reader-theme-sea .vocab-example,
.reader-theme-sea .vocab-example {
  color: #bac2de !important;
  border-left: 3px solid #00b4d8 !important;
  background: rgba(0, 180, 216, 0.08) !important;
}
.theme-warm-sepia .reader-theme-sea .btn-close-reader {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #f8f9fa !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* 3. Reader Theme Midnight Slate Protection */
.theme-warm-sepia .reader-theme-midnight .reader-title-wrap h3,
.theme-warm-sepia .reader-theme-midnight .reader-text,
.theme-warm-sepia .reader-theme-midnight .reader-text p,
.theme-warm-sepia .reader-theme-midnight .vocab-panel-title,
.theme-warm-sepia .reader-theme-midnight .vocab-card-placeholder,
.theme-warm-sepia .reader-theme-midnight .vocab-term,
.theme-warm-sepia .reader-theme-midnight .vocab-definition,
.theme-warm-sepia .reader-theme-midnight .vocab-example,
.theme-warm-sepia .reader-theme-midnight .vocab-ex-label,
.theme-warm-sepia .reader-theme-midnight .control-btn,
.theme-warm-sepia .reader-theme-midnight #reader-progress-pct {
  color: #f1f5f9 !important;
}
.theme-warm-sepia .reader-theme-midnight .reader-text p {
  color: #cbd5e1 !important;
}
.theme-warm-sepia .reader-theme-midnight .vocab-word,
.reader-theme-midnight .vocab-word {
  color: #38bdf8 !important;
  border-bottom: 1.5px dashed #38bdf8 !important;
  font-weight: 700 !important;
}
.theme-warm-sepia .reader-theme-midnight .vocab-word:hover,
.reader-theme-midnight .vocab-word:hover {
  background: rgba(56, 189, 248, 0.15) !important;
}
.theme-warm-sepia .reader-theme-midnight .vocab-panel-title {
  color: #38bdf8 !important;
  font-weight: 800 !important;
}
.theme-warm-sepia .reader-theme-midnight .vocab-card-placeholder {
  color: #94a3b8 !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
.theme-warm-sepia .reader-theme-midnight .vocab-card-active,
.reader-theme-midnight .vocab-card-active {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}
.theme-warm-sepia .reader-theme-midnight .vocab-pos,
.theme-warm-sepia .reader-theme-midnight .pos-tag,
.reader-theme-midnight .vocab-pos,
.reader-theme-midnight .pos-tag {
  background: rgba(56, 189, 248, 0.12) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  font-weight: 800 !important;
}
.theme-warm-sepia .reader-theme-midnight .vocab-example,
.reader-theme-midnight .vocab-example {
  color: #e2e8f0 !important;
  border-left: 3px solid #38bdf8 !important;
  background: rgba(56, 189, 248, 0.08) !important;
}
.theme-warm-sepia .reader-theme-midnight .btn-close-reader {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #f1f5f9 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* 4. Reader Theme Warm Sepia (Light Mode - 3rd Option, Matches Image 3) */
.theme-warm-sepia .reader-theme-sepia,
.reader-theme-sepia {
  background: #fdf6e3 !important;
  color: #433422 !important;
  border-color: rgba(67, 52, 34, 0.15) !important;
}
.theme-warm-sepia .reader-theme-sepia .reader-title-wrap h3,
.reader-theme-sepia .reader-title-wrap h3 {
  color: #21150b !important;
  font-weight: 850 !important;
}
.theme-warm-sepia .reader-theme-sepia .reader-text,
.theme-warm-sepia .reader-theme-sepia .reader-text p,
.reader-theme-sepia .reader-text,
.reader-theme-sepia .reader-text p {
  color: #5c4a37 !important;
}
.theme-warm-sepia .reader-theme-sepia .vocab-word,
.reader-theme-sepia .vocab-word {
  color: #d97706 !important;
  border-bottom: 1px dashed #d97706 !important;
  font-weight: 500 !important;
}
.theme-warm-sepia .reader-theme-sepia .vocab-word:hover,
.reader-theme-sepia .vocab-word:hover {
  background: rgba(217, 119, 6, 0.12) !important;
}
.theme-warm-sepia .reader-theme-sepia .vocab-panel-title,
.reader-theme-sepia .vocab-panel-title {
  color: #b45309 !important;
  font-weight: 800 !important;
}
.theme-warm-sepia .reader-theme-sepia .vocab-card-placeholder,
.reader-theme-sepia .vocab-card-placeholder {
  color: #8c6d52 !important;
  background: rgba(67, 52, 34, 0.04) !important;
  border: 1px dashed rgba(67, 52, 34, 0.2) !important;
}
.theme-warm-sepia .reader-theme-sepia .vocab-card-active,
.reader-theme-sepia .vocab-card-active {
  background: rgba(67, 52, 34, 0.04) !important;
  border: 1px solid rgba(217, 119, 6, 0.3) !important;
}
.theme-warm-sepia .reader-theme-sepia .vocab-pos,
.theme-warm-sepia .reader-theme-sepia .pos-tag,
.reader-theme-sepia .vocab-pos,
.reader-theme-sepia .pos-tag {
  background: rgba(217, 119, 6, 0.12) !important;
  color: #b45309 !important;
  border: 1px solid rgba(217, 119, 6, 0.35) !important;
  font-weight: 700 !important;
}
.theme-warm-sepia .reader-theme-sepia .vocab-term,
.reader-theme-sepia .vocab-term {
  color: #21150b !important;
  font-weight: 800 !important;
}
.theme-warm-sepia .reader-theme-sepia .vocab-definition,
.reader-theme-sepia .vocab-definition {
  color: #433422 !important;
}
.theme-warm-sepia .reader-theme-sepia .vocab-ex-label,
.reader-theme-sepia .vocab-ex-label {
  color: #78350f !important;
  font-weight: 750 !important;
}
.theme-warm-sepia .reader-theme-sepia .vocab-example,
.reader-theme-sepia .vocab-example {
  color: #5c4a37 !important;
  border-left: 3px solid #d97706 !important;
  background: rgba(217, 119, 6, 0.06) !important;
}
.theme-warm-sepia .reader-theme-sepia .btn-close-reader,
.reader-theme-sepia .btn-close-reader {
  background: rgba(217, 119, 6, 0.12) !important;
  color: #b45309 !important;
  border: 1px solid rgba(217, 119, 6, 0.35) !important;
  font-weight: 700 !important;
  border-radius: 9999px !important;
}
.theme-warm-sepia .reader-theme-sepia #btn-complete-reading,
.reader-theme-sepia #btn-complete-reading {
  background: rgba(217, 119, 6, 0.12) !important;
  color: #b45309 !important;
  border: 1px solid rgba(217, 119, 6, 0.35) !important;
  font-weight: 700 !important;
  border-radius: 9999px !important;
}

/* --- 🎨 Animated Active Theme Button Indicator & Mark --- */
.theme-btn {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: scale(1) !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
}

.theme-btn:hover {
  transform: scale(1.15) !important;
}

.theme-btn.active {
  transform: scale(1.25) !important;
  animation: popThemeBtn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  z-index: 5 !important;
}

.theme-btn::after {
  content: '✓' !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  font-family: system-ui, -apple-system, sans-serif !important;
  opacity: 0 !important;
  transform: scale(0) rotate(-20deg) !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  pointer-events: none !important;
  line-height: 1 !important;
}

.theme-btn.active::after {
  opacity: 1 !important;
  transform: scale(1) rotate(0deg) !important;
}

/* Individual Theme Active Glowing Rings & Checkmark Colors */
.theme-btn-dark.active {
  box-shadow: 0 0 0 2.5px #64ffda, 0 0 12px rgba(100, 255, 218, 0.6) !important;
}
.theme-btn-dark.active::after {
  color: #64ffda !important;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.9) !important;
}

.theme-btn-sea.active {
  box-shadow: 0 0 0 2.5px #00b4d8, 0 0 12px rgba(0, 180, 216, 0.6) !important;
}
.theme-btn-sea.active::after {
  color: #00b4d8 !important;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.9) !important;
}

.theme-btn-sepia.active {
  box-shadow: 0 0 0 2.5px #965c28, 0 0 12px rgba(150, 92, 40, 0.5) !important;
}
.theme-btn-sepia.active::after {
  color: #433422 !important;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.8) !important;
}

.theme-btn-midnight.active {
  box-shadow: 0 0 0 2.5px #38bdf8, 0 0 12px rgba(56, 189, 248, 0.6) !important;
}
.theme-btn-midnight.active::after {
  color: #38bdf8 !important;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.9) !important;
}

@keyframes popThemeBtn {
  0% { transform: scale(0.9); }
  50% { transform: scale(1.35); }
  100% { transform: scale(1.25); }
}

/* Text Scaling controls styling inside header */
.control-btn:hover {
  opacity: 1 !important;
  background: rgba(255, 255, 255, 0.1);
}

/* Paragraph Focus Mode styling */
.reader-text p {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
  transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease;
}

.reader-text.focus-mode-active p {
  opacity: 0.4;
  filter: blur(0.4px);
}

.reader-text.focus-mode-active p.paragraph-highlighted {
  opacity: 1;
  transform: scale(1.005);
  filter: blur(0);
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.1);
}

.reader-theme-sepia .reader-text.focus-mode-active p.paragraph-highlighted {
  text-shadow: 0 0 1px rgba(67, 52, 34, 0.1);
}

/* TTS Pronounce button */
.btn-tts-pronounce {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(100, 255, 218, 0.1);
  border: 1px solid rgba(100, 255, 218, 0.2);
  color: var(--color-teal);
  cursor: pointer;
  font-size: 11px;
  transition: all 0.2s ease;
  margin-left: 8px;
  vertical-align: middle;
}

.btn-tts-pronounce:hover {
  background: var(--color-teal);
  color: #0d1527;
  transform: scale(1.1);
}

.reader-theme-sepia .btn-tts-pronounce {
  background: var(--reader-sepia-accent-bg);
  border-color: var(--reader-sepia-accent-border);
  color: var(--reader-sepia-accent);
}
.reader-theme-sepia .btn-tts-pronounce:hover {
  background: var(--reader-sepia-accent);
  color: #fff;
}

/* ==========================================================================
   LAYOUT REVOLUTION: HUD BAR & FULL-WIDTH GRID
   ========================================================================== */

/* Old sidebar grid overrides */
.stories-layout {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

/* HUD controls bar */
.stories-hud-bar {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 16px !important;
  padding: 16px 24px !important;
  background: rgba(22, 34, 63, 0.35) !important;
  border: 1.5px solid var(--color-teal) !important;
  border-radius: var(--border-radius-md);
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(100, 255, 218, 0.18) !important;
  position: relative;
  z-index: 150; /* Ensure dropdowns overlay the grid cards */
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Segmented control style for Proficiency level */
.level-filter-segmented {
  display: flex;
  background: rgba(0, 0, 0, 0.3) !important;
  padding: 4px !important;
  border-radius: 30px !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  align-items: center;
  gap: 2px;
}

.level-filter-segmented .filter-pill {
  padding: 8px 16px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 20px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  color: var(--text-secondary) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  box-shadow: none !important;
}

.level-filter-segmented .filter-pill:hover {
  color: var(--color-teal) !important;
  background: rgba(100, 255, 218, 0.05) !important;
}

.level-filter-segmented .filter-pill.active {
  background: var(--color-teal) !important;
  color: #0d1527 !important;
  box-shadow: 0 4px 12px rgba(100, 255, 218, 0.25) !important;
}

.level-filter-segmented .filter-pill .filter-count {
  font-size: 10px;
  opacity: 0.8;
  background: rgba(255, 255, 255, 0.12);
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 700;
  margin-left: 2px;
  transition: all 0.2s;
}

.level-filter-segmented .filter-pill.active .filter-count {
  background: rgba(0, 0, 0, 0.15);
  color: #0d1527;
}

/* Expand Grid layout to full width */
.stories-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  width: 100% !important;
  gap: 28px !important;
}

/* Styled triggers inside HUD bar */
.stories-hud-bar .custom-select-trigger,
.tracks-hud-bar .custom-select-trigger,
.tracks-toggle-btn-styled,
.level-filter-segmented,
.stories-search-input {
  border: 1px solid rgba(100, 255, 218, 0.35) !important;
  color: var(--text-primary) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.stories-hud-bar .custom-select-trigger:hover,
.tracks-hud-bar .custom-select-trigger:hover,
.tracks-toggle-btn-styled:hover,
.stories-search-input:focus {
  border-color: #64ffda !important;
  color: #64ffda !important;
  box-shadow: 0 0 15px rgba(100, 255, 218, 0.25) !important;
}

.tracks-toggle-btn-styled {
  position: relative !important;
  overflow: hidden !important;
  user-select: none !important;
}

.tracks-toggle-btn-styled::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent) !important;
  transition: left 0.6s ease !important;
  pointer-events: none !important;
}

.tracks-toggle-btn-styled:hover::before {
  left: 100% !important;
}

.tracks-toggle-btn-styled:active {
  transform: translateY(0) scale(0.98) !important;
}

.stories-hud-bar .custom-select-trigger.active,
.tracks-hud-bar .custom-select-trigger.active,
.tracks-toggle-btn-styled.active {
  border-color: #64ffda !important;
  color: #64ffda !important;
  background: rgba(100, 255, 218, 0.12) !important;
  box-shadow: 0 0 18px rgba(100, 255, 218, 0.3) !important;
}

/* System Theme Overrides for Outer Container HUD Box & Inner Controls */
/* Void Nebula Theme */
.theme-void-nebula .stories-hud-bar,
.theme-void-nebula .tracks-hud-bar {
  border-color: #c084fc !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(192, 132, 252, 0.25) !important;
}
.theme-void-nebula .stories-hud-bar .custom-select-trigger,
.theme-void-nebula .tracks-hud-bar .custom-select-trigger,
.theme-void-nebula .tracks-toggle-btn-styled,
.theme-void-nebula .level-filter-segmented,
.theme-void-nebula .stories-search-input {
  border-color: rgba(192, 132, 252, 0.35) !important;
}
.theme-void-nebula .stories-hud-bar .custom-select-trigger:hover,
.theme-void-nebula .tracks-hud-bar .custom-select-trigger:hover,
.theme-void-nebula .tracks-toggle-btn-styled:hover,
.theme-void-nebula .stories-search-input:focus,
.theme-void-nebula .tracks-toggle-btn-styled.active {
  border-color: #c084fc !important;
  color: #c084fc !important;
  box-shadow: 0 0 15px rgba(192, 132, 252, 0.35) !important;
}

/* Cosmic Emerald Theme */
.theme-cosmic-emerald .stories-hud-bar,
.theme-cosmic-emerald .tracks-hud-bar {
  border-color: #10b981 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(16, 185, 129, 0.25) !important;
}
.theme-cosmic-emerald .stories-hud-bar .custom-select-trigger,
.theme-cosmic-emerald .tracks-hud-bar .custom-select-trigger,
.theme-cosmic-emerald .tracks-toggle-btn-styled,
.theme-cosmic-emerald .level-filter-segmented,
.theme-cosmic-emerald .stories-search-input {
  border-color: rgba(16, 185, 129, 0.35) !important;
}
.theme-cosmic-emerald .stories-hud-bar .custom-select-trigger:hover,
.theme-cosmic-emerald .tracks-hud-bar .custom-select-trigger:hover,
.theme-cosmic-emerald .tracks-toggle-btn-styled:hover,
.theme-cosmic-emerald .stories-search-input:focus,
.theme-cosmic-emerald .tracks-toggle-btn-styled.active {
  border-color: #10b981 !important;
  color: #10b981 !important;
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.35) !important;
}

/* Cyberpunk Theme */
.theme-cyberpunk .stories-hud-bar,
.theme-cyberpunk .tracks-hud-bar {
  border-color: #00f2fe !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 242, 254, 0.25) !important;
}
.theme-cyberpunk .stories-hud-bar .custom-select-trigger,
.theme-cyberpunk .tracks-hud-bar .custom-select-trigger,
.theme-cyberpunk .tracks-toggle-btn-styled,
.theme-cyberpunk .level-filter-segmented,
.theme-cyberpunk .stories-search-input {
  border-color: rgba(0, 242, 254, 0.35) !important;
}
.theme-cyberpunk .stories-hud-bar .custom-select-trigger:hover,
.theme-cyberpunk .tracks-hud-bar .custom-select-trigger:hover,
.theme-cyberpunk .tracks-toggle-btn-styled:hover,
.theme-cyberpunk .stories-search-input:focus,
.theme-cyberpunk .tracks-toggle-btn-styled.active {
  border-color: #00f2fe !important;
  color: #00f2fe !important;
  box-shadow: 0 0 15px rgba(0, 242, 254, 0.35) !important;
}

/* Matrix Theme */
.theme-matrix .stories-hud-bar,
.theme-matrix .tracks-hud-bar {
  border-color: #22c55e !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(34, 197, 94, 0.25) !important;
}
.theme-matrix .stories-hud-bar .custom-select-trigger,
.theme-matrix .tracks-hud-bar .custom-select-trigger,
.theme-matrix .tracks-toggle-btn-styled,
.theme-matrix .level-filter-segmented,
.theme-matrix .stories-search-input {
  border-color: rgba(34, 197, 94, 0.35) !important;
}
.theme-matrix .stories-hud-bar .custom-select-trigger:hover,
.theme-matrix .tracks-hud-bar .custom-select-trigger:hover,
.theme-matrix .tracks-toggle-btn-styled:hover,
.theme-matrix .stories-search-input:focus,
.theme-matrix .tracks-toggle-btn-styled.active {
  border-color: #22c55e !important;
  color: #22c55e !important;
  box-shadow: 0 0 15px rgba(34, 197, 94, 0.35) !important;
}

/* Neon Sunset Theme */
.theme-neon-sunset .stories-hud-bar,
.theme-neon-sunset .tracks-hud-bar {
  border-color: #f97316 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(249, 115, 22, 0.25) !important;
}
.theme-neon-sunset .stories-hud-bar .custom-select-trigger,
.theme-neon-sunset .tracks-hud-bar .custom-select-trigger,
.theme-neon-sunset .tracks-toggle-btn-styled,
.theme-neon-sunset .level-filter-segmented,
.theme-neon-sunset .stories-search-input {
  border-color: rgba(249, 115, 22, 0.35) !important;
}
.theme-neon-sunset .stories-hud-bar .custom-select-trigger:hover,
.theme-neon-sunset .tracks-hud-bar .custom-select-trigger:hover,
.theme-neon-sunset .tracks-toggle-btn-styled:hover,
.theme-neon-sunset .stories-search-input:focus,
.theme-neon-sunset .tracks-toggle-btn-styled.active {
  border-color: #f97316 !important;
  color: #f97316 !important;
  box-shadow: 0 0 15px rgba(249, 115, 22, 0.35) !important;
}

/* Sakura Pink Theme */
.theme-sakura-pink .stories-hud-bar,
.theme-sakura-pink .tracks-hud-bar {
  border-color: #ec4899 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(236, 72, 153, 0.25) !important;
}
.theme-sakura-pink .stories-hud-bar .custom-select-trigger,
.theme-sakura-pink .tracks-hud-bar .custom-select-trigger,
.theme-sakura-pink .tracks-toggle-btn-styled,
.theme-sakura-pink .level-filter-segmented,
.theme-sakura-pink .stories-search-input {
  border-color: rgba(236, 72, 153, 0.35) !important;
}
.theme-sakura-pink .stories-hud-bar .custom-select-trigger:hover,
.theme-sakura-pink .tracks-hud-bar .custom-select-trigger:hover,
.theme-sakura-pink .tracks-toggle-btn-styled:hover,
.theme-sakura-pink .stories-search-input:focus,
.theme-sakura-pink .tracks-toggle-btn-styled.active {
  border-color: #ec4899 !important;
  color: #ec4899 !important;
  box-shadow: 0 0 15px rgba(236, 72, 153, 0.35) !important;
}

/* Rose Neon Theme */
.theme-rose-neon .stories-hud-bar,
.theme-rose-neon .tracks-hud-bar {
  border-color: #ff2a85 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 42, 133, 0.25) !important;
}
.theme-rose-neon .stories-hud-bar .custom-select-trigger,
.theme-rose-neon .tracks-hud-bar .custom-select-trigger,
.theme-rose-neon .tracks-toggle-btn-styled,
.theme-rose-neon .level-filter-segmented,
.theme-rose-neon .stories-search-input {
  border-color: rgba(255, 42, 133, 0.35) !important;
}
.theme-rose-neon .stories-hud-bar .custom-select-trigger:hover,
.theme-rose-neon .tracks-hud-bar .custom-select-trigger:hover,
.theme-rose-neon .tracks-toggle-btn-styled:hover,
.theme-rose-neon .stories-search-input:focus,
.theme-rose-neon .tracks-toggle-btn-styled.active {
  border-color: #ff2a85 !important;
  color: #ff2a85 !important;
  box-shadow: 0 0 15px rgba(255, 42, 133, 0.35) !important;
}

/* System Theme Overrides for Stories and Tracks Count Values */
.theme-void-nebula #stories-count-val,
.theme-void-nebula #tracks-count-val {
  color: #c084fc !important;
}
.theme-cosmic-emerald #stories-count-val,
.theme-cosmic-emerald #tracks-count-val {
  color: #10b981 !important;
}
.theme-cyberpunk #stories-count-val,
.theme-cyberpunk #tracks-count-val {
  color: #00f2fe !important;
}
.theme-matrix #stories-count-val,
.theme-matrix #tracks-count-val {
  color: #22c55e !important;
}
.theme-neon-sunset #stories-count-val,
.theme-neon-sunset #tracks-count-val {
  color: #f97316 !important;
}
.theme-sakura-pink #stories-count-val,
.theme-sakura-pink #tracks-count-val {
  color: #ec4899 !important;
}
.theme-rose-neon #stories-count-val,
.theme-rose-neon #tracks-count-val {
  color: #ff2a85 !important;
}
.theme-warm-sepia #stories-count-val,
.theme-warm-sepia #tracks-count-val {
  color: #d97706 !important;
}

/* High Contrast Light Mode Comprehensive Overrides for Warm Sepia Theme */
.theme-warm-sepia {
  color: #21150b !important;
}

/* Custom Scrollbars for Warm Sepia Theme (Sidebar & Global) */
.theme-warm-sepia,
.theme-warm-sepia *,
.theme-warm-sepia .navbar,
body.logged-in.theme-warm-sepia .navbar {
  scrollbar-color: rgba(180, 83, 9, 0.35) transparent !important;
}

.theme-warm-sepia .navbar::-webkit-scrollbar,
body.logged-in.theme-warm-sepia .navbar::-webkit-scrollbar {
  width: 5px !important;
}

.theme-warm-sepia .navbar::-webkit-scrollbar-track,
body.logged-in.theme-warm-sepia .navbar::-webkit-scrollbar-track {
  background: transparent !important;
}

.theme-warm-sepia .navbar::-webkit-scrollbar-thumb,
body.logged-in.theme-warm-sepia .navbar::-webkit-scrollbar-thumb {
  background: rgba(180, 83, 9, 0.35) !important;
  border-radius: 4px !important;
}

.theme-warm-sepia .navbar::-webkit-scrollbar-thumb:hover,
body.logged-in.theme-warm-sepia .navbar::-webkit-scrollbar-thumb:hover {
  background: rgba(180, 83, 9, 0.6) !important;
}

.theme-warm-sepia::-webkit-scrollbar,
.theme-warm-sepia *::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

.theme-warm-sepia::-webkit-scrollbar-track,
.theme-warm-sepia *::-webkit-scrollbar-track {
  background: transparent !important;
}

.theme-warm-sepia::-webkit-scrollbar-thumb,
.theme-warm-sepia *::-webkit-scrollbar-thumb {
  background: rgba(180, 83, 9, 0.35) !important;
  border-radius: 6px !important;
}

.theme-warm-sepia::-webkit-scrollbar-thumb:hover,
.theme-warm-sepia *::-webkit-scrollbar-thumb:hover {
  background: rgba(180, 83, 9, 0.6) !important;
}

/* 1. All Containers, Cards, Modals, Popups, Drawers, Sidebars, Navigation Header */
.theme-warm-sepia .glass-card,
.theme-warm-sepia .dict-glass-card,
.theme-warm-sepia .nav-sidebar,
.theme-warm-sepia .nav-header,
.theme-warm-sepia .modal-card,
.theme-warm-sepia .mobile-nav-drawer,
.theme-warm-sepia .stories-hud-bar,
.theme-warm-sepia .tracks-hud-bar,
.theme-warm-sepia .story-card.glass-card,
.theme-warm-sepia .profile-tab-content .glass-card,
.theme-warm-sepia .theme-preview-popup,
.theme-warm-sepia .cms-metric-card,
.theme-warm-sepia .stat-card,
.theme-warm-sepia .karaoke-lyric-paper,
.theme-warm-sepia .philosophy-stage-card,
.theme-warm-sepia .reading-gym-intro-card,
.theme-warm-sepia .about-stage-card {
  background: #ffffff !important;
  border: 1.5px solid rgba(180, 83, 9, 0.25) !important;
  color: #21150b !important;
  box-shadow: 0 8px 24px rgba(67, 52, 34, 0.12) !important;
}

/* 2. All Headings, Titles, Bold Text & Accents */
.theme-warm-sepia h1,
.theme-warm-sepia h2,
.theme-warm-sepia h3,
.theme-warm-sepia h4,
.theme-warm-sepia h5,
.theme-warm-sepia h6,
.theme-warm-sepia .section-title,
.theme-warm-sepia .nav-logo-text,
.theme-warm-sepia .song-title,
.theme-warm-sepia .story-title,
.theme-warm-sepia .word-title,
.theme-warm-sepia .profile-name,
.theme-warm-sepia .theme-preview-title,
.theme-warm-sepia .metric-value,
.theme-warm-sepia .user-name,
.theme-warm-sepia strong,
.theme-warm-sepia b {
  color: #21150b !important;
}

/* 3. All Paragraphs, Descriptions, Body Text, Spans, Labels, Table Data, List Items */
.theme-warm-sepia p,
.theme-warm-sepia span,
.theme-warm-sepia div,
.theme-warm-sepia label,
.theme-warm-sepia td,
.theme-warm-sepia th,
.theme-warm-sepia li,
.theme-warm-sepia i,
.theme-warm-sepia em,
.theme-warm-sepia small,
.theme-warm-sepia .nav-link,
.theme-warm-sepia .song-artist,
.theme-warm-sepia .story-excerpt,
.theme-warm-sepia .theme-preview-subtitle,
.theme-warm-sepia .metric-label,
.theme-warm-sepia .user-level,
.theme-warm-sepia .profile-joined,
.theme-warm-sepia .profile-bio {
  color: #3d2b1a !important;
}

/* 4. Navigation Links & Hover States */
.theme-warm-sepia .nav-links li a {
  color: #3d2b1a !important;
}
.theme-warm-sepia .nav-links li a:hover,
.theme-warm-sepia .nav-links li.active a {
  color: #b45309 !important;
  background: rgba(217, 119, 6, 0.12) !important;
}

/* 5. Inputs, Search Bars, Form Fields, Textareas, Selects */
.theme-warm-sepia input,
.theme-warm-sepia textarea,
.theme-warm-sepia select,
.theme-warm-sepia .form-input,
.theme-warm-sepia .stories-search-input,
.theme-warm-sepia .custom-select-trigger,
.theme-warm-sepia .custom-select-options,
.theme-warm-sepia .level-filter-segmented,
.theme-warm-sepia .lyric-blank-input {
  background: #ffffff !important;
  border: 1.5px solid #d97706 !important;
  color: #21150b !important;
  box-shadow: 0 2px 8px rgba(67, 52, 34, 0.06) !important;
}

.theme-warm-sepia input::placeholder,
.theme-warm-sepia textarea::placeholder {
  color: #8c6d52 !important;
}

.theme-warm-sepia .custom-select-option {
  color: #21150b !important;
}
.theme-warm-sepia .custom-select-option:hover,
.theme-warm-sepia .custom-select-option.active {
  background: rgba(217, 119, 6, 0.15) !important;
  color: #b45309 !important;
  font-weight: 700 !important;
}

/* 6. Buttons & Interactive Controls */
.theme-warm-sepia .btn-linkedin-style,
.theme-warm-sepia .btn-primary,
.theme-warm-sepia .story-card .btn-read {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
  color: #ffffff !important;
  border: 1px solid #b45309 !important;
  font-weight: 750 !important;
  box-shadow: 0 4px 14px rgba(180, 83, 9, 0.35) !important;
}
.theme-warm-sepia .btn-linkedin-style:hover,
.theme-warm-sepia .btn-primary:hover,
.theme-warm-sepia .story-card .btn-read:hover {
  background: linear-gradient(135deg, #b45309 0%, #92400e 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(180, 83, 9, 0.45) !important;
}

.theme-warm-sepia .btn-outline,
.theme-warm-sepia .stage-nav-btn,
.theme-warm-sepia .tracks-toggle-btn-styled {
  background: #ffffff !important;
  color: #b45309 !important;
  border: 1.5px solid #b45309 !important;
  font-weight: 700 !important;
}
.theme-warm-sepia .btn-outline:hover,
.theme-warm-sepia .stage-nav-btn:hover,
.theme-warm-sepia .tracks-toggle-btn-styled:hover,
.theme-warm-sepia .tracks-toggle-btn-styled.active {
  background: #b45309 !important;
  color: #ffffff !important;
}

/* 7. Tables, Admin Panel & CMS Lists */
.theme-warm-sepia table,
.theme-warm-sepia thead,
.theme-warm-sepia tbody,
.theme-warm-sepia tr,
.theme-warm-sepia th,
.theme-warm-sepia td {
  background: #ffffff !important;
  color: #21150b !important;
  border-color: rgba(180, 83, 9, 0.18) !important;
}
.theme-warm-sepia th {
  background: #f7ede2 !important;
  color: #21150b !important;
  font-weight: 800 !important;
}

/* 8. Dictionary Cards & Search Items */
.theme-warm-sepia .dict-glass-card,
.theme-warm-sepia .dict-result-item,
.theme-warm-sepia .word-card {
  background: #ffffff !important;
  border: 1.5px solid rgba(180, 83, 9, 0.22) !important;
  color: #21150b !important;
}
.theme-warm-sepia .pos-tag,
.theme-warm-sepia .badge,
.theme-warm-sepia .badge-interest {
  background: rgba(217, 119, 6, 0.15) !important;
  color: #b45309 !important;
  border: 1px solid rgba(180, 83, 9, 0.3) !important;
  font-weight: 750 !important;
}

/* 9. Karaoke & Lyric Highlights */
.theme-warm-sepia .karaoke-lyric-paper {
  background: #ffffff !important;
  color: #21150b !important;
}
.theme-warm-sepia .lyric-line.active,
.theme-warm-sepia .karaoke-line.active {
  color: #b45309 !important;
  font-weight: 850 !important;
}

/* 10. My Wordbook Light Mode Overrides */
.theme-warm-sepia .cyber-word-chip {
  background: #ffffff !important;
  border: 1.5px solid rgba(180, 83, 9, 0.25) !important;
  color: #21150b !important;
  box-shadow: 0 4px 12px rgba(67, 52, 34, 0.08) !important;
}
.theme-warm-sepia .cyber-word-chip:hover {
  background: rgba(217, 119, 6, 0.1) !important;
  border-color: #d97706 !important;
  color: #b45309 !important;
}
.theme-warm-sepia .cyber-word-chip.active {
  background: #d97706 !important;
  border-color: #b45309 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(180, 83, 9, 0.35) !important;
}
.theme-warm-sepia .cyber-word-chip.active span:first-child {
  color: #ffffff !important;
  text-shadow: none !important;
}
.theme-warm-sepia .wordbook-card {
  background: #ffffff !important;
  border: 1.5px solid rgba(180, 83, 9, 0.22) !important;
  box-shadow: 0 8px 24px rgba(67, 52, 34, 0.08) !important;
}
.theme-warm-sepia .wordbook-card:hover {
  border-color: #d97706 !important;
  box-shadow: 0 12px 30px rgba(67, 52, 34, 0.14) !important;
}
.theme-warm-sepia .wordbook-card-term {
  color: #21150b !important;
  font-weight: 800 !important;
}
.theme-warm-sepia .wordbook-card-def {
  color: #3d2b1a !important;
}
.theme-warm-sepia .wordbook-card-ex {
  color: #735438 !important;
  border-left-color: #d97706 !important;
}
.theme-warm-sepia .wordbook-audio-btn {
  background: rgba(217, 119, 6, 0.12) !important;
  border-color: rgba(180, 83, 9, 0.3) !important;
  color: #b45309 !important;
}
.theme-warm-sepia .wordbook-audio-btn:hover {
  background: #d97706 !important;
  color: #ffffff !important;
}

/* 11. Scoreboard Light Mode Overrides */
.theme-warm-sepia .scoreboard-podium-wrapper {
  background: linear-gradient(180deg, #ffffff 0%, #f7ede2 100%) !important;
  border: 1.5px solid rgba(180, 83, 9, 0.25) !important;
  box-shadow: 0 12px 32px rgba(67, 52, 34, 0.1) !important;
}
.theme-warm-sepia .podium-username {
  color: #21150b !important;
  font-weight: 800 !important;
}
.theme-warm-sepia .podium-item-rank-1 .podium-username {
  color: #b45309 !important;
}
.theme-warm-sepia .podium-xp {
  color: #d97706 !important;
  font-weight: 850 !important;
}
.theme-warm-sepia .podium-item-rank-1 .podium-pedestal {
  background: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%) !important;
  border: 1.5px solid #f59e0b !important;
}
.theme-warm-sepia .podium-item-rank-2 .podium-pedestal {
  background: linear-gradient(180deg, #f3f4f6 0%, #e5e7eb 100%) !important;
  border: 1.5px solid #9ca3af !important;
}
.theme-warm-sepia .podium-item-rank-3 .podium-pedestal {
  background: linear-gradient(180deg, #ffedd5 0%, #fed7aa 100%) !important;
  border: 1.5px solid #f97316 !important;
}
.theme-warm-sepia .podium-item-rank-1 .podium-number { color: #b45309 !important; }
.theme-warm-sepia .podium-item-rank-2 .podium-number { color: #4b5563 !important; }
.theme-warm-sepia .podium-item-rank-3 .podium-number { color: #c2410c !important; }

.theme-warm-sepia .podium-item-rank-1 .podium-title-tag {
  background: #fde68a !important;
  color: #78350f !important;
  border-color: #f59e0b !important;
}
.theme-warm-sepia .podium-item-rank-2 .podium-title-tag {
  background: #e5e7eb !important;
  color: #1f2937 !important;
  border-color: #9ca3af !important;
}
.theme-warm-sepia .podium-item-rank-3 .podium-title-tag {
  background: #fed7aa !important;
  color: #7c2d12 !important;
  border-color: #f97316 !important;
}

.theme-warm-sepia .scoreboard-container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.theme-warm-sepia .scoreboard-card-wrap,
.theme-warm-sepia .scoreboard-table-card {
  background: #ffffff !important;
  border: 1.5px solid rgba(180, 83, 9, 0.22) !important;
  box-shadow: 0 12px 32px rgba(67, 52, 34, 0.12) !important;
}
.theme-warm-sepia .scoreboard-podium-wrapper::before {
  display: none !important;
}
.theme-warm-sepia .scoreboard-header-row {
  border-bottom: 1.5px solid rgba(180, 83, 9, 0.2) !important;
  color: #3d2b1a !important;
  font-weight: 800 !important;
  background: #f7ede2 !important;
}
.theme-warm-sepia .scoreboard-row-item {
  border-bottom: 1px solid rgba(180, 83, 9, 0.12) !important;
  color: #21150b !important;
  background: #ffffff !important;
}
.theme-warm-sepia .scoreboard-row-item:hover {
  background: #fdf6e3 !important;
}
.theme-warm-sepia .scoreboard-row-item.current-user {
  background: rgba(217, 119, 6, 0.12) !important;
  border-left: 4px solid #d97706 !important;
}
.theme-warm-sepia .scoreboard-rank {
  color: #5c4735 !important;
  font-weight: 800 !important;
}
.theme-warm-sepia .scoreboard-username {
  color: #21150b !important;
  font-weight: 750 !important;
}
.theme-warm-sepia .scoreboard-user-level {
  color: #735438 !important;
}
.theme-warm-sepia .scoreboard-xp-val {
  color: #b45309 !important;
  font-weight: 850 !important;
}

/* 12. Ecosystem Page Light Mode Overrides */
.theme-warm-sepia .philosophy-stage-card,
.theme-warm-sepia .manifesto-card,
.theme-warm-sepia .feature-box,
.theme-warm-sepia .about-stage-card {
  background: #ffffff !important;
  border: 1.5px solid rgba(180, 83, 9, 0.22) !important;
  box-shadow: 0 8px 24px rgba(67, 52, 34, 0.08) !important;
}
.theme-warm-sepia .manifesto-card:hover,
.theme-warm-sepia .feature-box:hover {
  background: #fffcf7 !important;
  border-color: #d97706 !important;
  box-shadow: 0 12px 30px rgba(67, 52, 34, 0.14) !important;
}
.theme-warm-sepia .manifesto-num {
  color: rgba(180, 83, 9, 0.35) !important;
  font-weight: 900 !important;
}
.theme-warm-sepia .manifesto-card h4,
.theme-warm-sepia .feature-box h4,
.theme-warm-sepia .about-stage-card h3,
.theme-warm-sepia .about-stage-card h4 {
  color: #21150b !important;
  font-weight: 800 !important;
}
.theme-warm-sepia .manifesto-card p,
.theme-warm-sepia .feature-box p,
.theme-warm-sepia .about-stage-card p {
  color: #3d2b1a !important;
}
.theme-warm-sepia .ecosystem-timeline-nav.vertical {
  background: #ffffff !important;
  border: 1.5px solid rgba(180, 83, 9, 0.22) !important;
}
.theme-warm-sepia .ecosystem-timeline-nav.vertical .timeline-step {
  color: #3d2b1a !important;
  background: #f7ede2 !important;
  border: 1px solid rgba(180, 83, 9, 0.2) !important;
}
.theme-warm-sepia .ecosystem-timeline-nav.vertical .timeline-step.active,
.theme-warm-sepia .ecosystem-timeline-nav.vertical .timeline-step:hover {
  background: #d97706 !important;
  color: #ffffff !important;
  border-color: #b45309 !important;
  box-shadow: 0 4px 14px rgba(180, 83, 9, 0.35) !important;
}

/* 13. High-Contrast Light Mode Overrides for Screenshot Components */

/* Image 1: Scoreboard Header & Tabs */
.theme-warm-sepia .scoreboard-card-header .section-title {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: initial !important;
  color: #21150b !important;
  font-weight: 850 !important;
}

.theme-warm-sepia .scoreboard-card-header p,
.theme-warm-sepia #scoreboard-hero-subtitle {
  color: #3d2b1a !important;
}

.theme-warm-sepia .scoreboard-tabs {
  border-bottom-color: rgba(180, 83, 9, 0.2) !important;
}

.theme-warm-sepia .sb-tab-btn {
  color: #5c4a37 !important;
  background: transparent !important;
  font-weight: 700 !important;
  transition: all 0.25s ease !important;
}

.theme-warm-sepia .sb-tab-btn:hover,
.theme-warm-sepia .sb-tab-btn:not(.active):hover {
  color: #d97706 !important;
  background: rgba(217, 119, 6, 0.12) !important;
}

.theme-warm-sepia .sb-tab-btn.active {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(180, 83, 9, 0.35) !important;
  font-weight: 800 !important;
}

/* Image 2: Wordbook View Switcher / Segmented Control */
.theme-warm-sepia .wordbook-view-toggle {
  background: #f7ede2 !important;
  border: 1.5px solid rgba(180, 83, 9, 0.25) !important;
  box-shadow: inset 0 2px 6px rgba(67, 52, 34, 0.06) !important;
}

.theme-warm-sepia .wordbook-mode-btn {
  background: transparent !important;
  color: #3d2b1a !important;
  font-weight: 700 !important;
}

.theme-warm-sepia .wordbook-mode-btn.active {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(180, 83, 9, 0.35) !important;
}

.theme-warm-sepia .wordbook-mode-btn.active span,
.theme-warm-sepia .wordbook-mode-btn.active svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Image 3: Dictionary Search Bar & Quick Suggestion Chips */
.theme-warm-sepia .dictionary-search-box {
  background: #ffffff !important;
  border: 1.5px solid #d97706 !important;
  box-shadow: 0 6px 20px rgba(67, 52, 34, 0.08) !important;
}

.theme-warm-sepia .dictionary-search-box::before {
  display: none !important;
}

.theme-warm-sepia .dictionary-input {
  color: #21150b !important;
  font-weight: 600 !important;
}

.theme-warm-sepia .dictionary-input::placeholder {
  color: #8c6d52 !important;
}

.theme-warm-sepia .dictionary-btn-search {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(180, 83, 9, 0.3) !important;
}

.theme-warm-sepia .dict-suggest-tag,
.theme-warm-sepia .dict-suggestions button {
  background: #f7ede2 !important;
  border: 1.5px solid rgba(180, 83, 9, 0.25) !important;
  color: #21150b !important;
  font-weight: 700 !important;
}

.theme-warm-sepia .dict-suggest-tag:hover,
.theme-warm-sepia .dict-suggestions button:hover {
  background: #d97706 !important;
  color: #ffffff !important;
  border-color: #b45309 !important;
}

/* Image 4: Ecosystem Left Control Dock / Explore Hubs */
.theme-warm-sepia .ecosystem-left-controls {
  background: #ffffff !important;
  border: 1.5px solid rgba(180, 83, 9, 0.25) !important;
  box-shadow: 0 8px 24px rgba(67, 52, 34, 0.1) !important;
}

.theme-warm-sepia .ecosystem-left-controls .badge-tag {
  background: rgba(217, 119, 6, 0.12) !important;
  color: #b45309 !important;
  border: 1.5px solid rgba(180, 83, 9, 0.3) !important;
  font-weight: 800 !important;
}

.theme-warm-sepia .ecosystem-timeline-nav.vertical .timeline-step {
  background: #f7ede2 !important;
  border: 1.5px solid rgba(180, 83, 9, 0.2) !important;
  color: #21150b !important;
}

.theme-warm-sepia .ecosystem-timeline-nav.vertical .timeline-step .step-num {
  color: #8c6d52 !important;
}

.theme-warm-sepia .ecosystem-timeline-nav.vertical .timeline-step .step-label {
  color: #21150b !important;
  font-weight: 700 !important;
}

.theme-warm-sepia .ecosystem-timeline-nav.vertical .timeline-step.active {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
  border-color: #b45309 !important;
  box-shadow: 0 4px 14px rgba(180, 83, 9, 0.35) !important;
}

.theme-warm-sepia .ecosystem-timeline-nav.vertical .timeline-step.active .step-num,
.theme-warm-sepia .ecosystem-timeline-nav.vertical .timeline-step.active .step-label {
  color: #ffffff !important;
}

.theme-warm-sepia .ecosystem-nav-arrows .stage-nav-btn {
  background: #ffffff !important;
  border: 1.5px solid #b45309 !important;
  color: #b45309 !important;
}

.theme-warm-sepia .ecosystem-nav-arrows .stage-nav-btn:hover {
  background: #b45309 !important;
  color: #ffffff !important;
}

/* Image 5: Word of the Day Card */
.theme-warm-sepia .word-of-the-day-card {
  background: #ffffff !important;
  border: 1.5px solid rgba(180, 83, 9, 0.25) !important;
  box-shadow: 0 8px 24px rgba(67, 52, 34, 0.1) !important;
}

.theme-warm-sepia .wotd-badge {
  background: transparent !important;
  color: #b45309 !important;
  border: 1.5px solid currentColor !important;
  font-weight: 800 !important;
}

.theme-warm-sepia .word-of-the-day-card .pos-tag {
  background: rgba(217, 119, 6, 0.15) !important;
  color: #b45309 !important;
  border: 1.5px solid rgba(180, 83, 9, 0.3) !important;
  font-weight: 800 !important;
}

.theme-warm-sepia .wotd-term {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: initial !important;
  color: #21150b !important;
  font-weight: 850 !important;
}

.theme-warm-sepia .wotd-ipa {
  color: #5c4735 !important;
  font-weight: 700 !important;
}

.theme-warm-sepia .btn-wotd-speaker {
  background: #f7ede2 !important;
  border: 1.5px solid rgba(180, 83, 9, 0.25) !important;
  color: #21150b !important;
}

.theme-warm-sepia .wotd-def {
  color: #21150b !important;
}

.theme-warm-sepia .wotd-example-box p,
.theme-warm-sepia .wotd-example-box .ex-en {
  color: #3d2b1a !important;
  font-style: italic !important;
}

.theme-warm-sepia .wotd-action-btn,
.theme-warm-sepia #btn-wotd-save,
.theme-warm-sepia #btn-wotd-explore {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  border: 1px solid #b45309 !important;
  box-shadow: 0 4px 14px rgba(180, 83, 9, 0.3) !important;
}

/* 14. Fixes for the 5 New Screenshots */

/* Screenshot 1: Proficiency Badge */
.theme-warm-sepia .profile-level-badge {
  background: #f7ede2 !important;
  border: 1.5px solid #d97706 !important;
  color: #21150b !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 8px rgba(67, 52, 34, 0.08) !important;
}

/* Screenshot 2: Profile Nav Menu Sub-Tabs */
.theme-warm-sepia .profile-nav-btn {
  background: transparent !important;
  border-color: transparent !important;
  color: #3d2b1a !important;
  font-weight: 600 !important;
}

.theme-warm-sepia .profile-nav-btn.active {
  background: rgba(217, 119, 6, 0.14) !important;
  border: 1.5px solid #d97706 !important;
  color: #b45309 !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 12px rgba(180, 83, 9, 0.15) !important;
}

.theme-warm-sepia .profile-nav-btn .tab-card-visual,
.theme-warm-sepia .profile-nav-btn.active .tab-card-visual {
  color: #b45309 !important;
}

/* Screenshot 3: Inner Input Focus & Outline Removal */
.theme-warm-sepia .dictionary-input,
.theme-warm-sepia .dictionary-input:focus,
.theme-warm-sepia #dict-search-input {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #21150b !important;
}

/* Screenshot 4: Cool Shuffle Button */
.theme-warm-sepia .cool-shuffle-btn {
  background: #ffffff !important;
  border: 1.5px solid #d97706 !important;
  color: #b45309 !important;
  font-weight: 850 !important;
  box-shadow: 0 4px 12px rgba(67, 52, 34, 0.08) !important;
}

.theme-warm-sepia .cool-shuffle-btn::before {
  display: none !important;
}

.theme-warm-sepia .cool-shuffle-btn svg,
.theme-warm-sepia .cool-shuffle-btn path {
  stroke: #b45309 !important;
  color: #b45309 !important;
}

.theme-warm-sepia .cool-shuffle-btn:hover {
  background: #d97706 !important;
  color: #ffffff !important;
  border-color: #b45309 !important;
}

.theme-warm-sepia .cool-shuffle-btn:hover svg,
.theme-warm-sepia .cool-shuffle-btn:hover path {
  stroke: #ffffff !important;
  color: #ffffff !important;
}

/* Screenshot 5: Ecosystem Left Control Dock & Timeline Box Fix */
.theme-warm-sepia .ecosystem-left-controls {
  background: #ffffff !important;
  border: 1.5px solid rgba(180, 83, 9, 0.25) !important;
  box-shadow: 0 8px 24px rgba(67, 52, 34, 0.1) !important;
  overflow: hidden !important;
}

.theme-warm-sepia .ecosystem-timeline-nav.vertical {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* Screenshot 6: About Us Horizontal Stage Timeline Nav Bar (.about-timeline-nav) */
.theme-warm-sepia .about-timeline-nav {
  background: #f7ede2 !important;
  border: 1.5px solid rgba(180, 83, 9, 0.25) !important;
  box-shadow: 0 6px 20px rgba(67, 52, 34, 0.08) !important;
}

.theme-warm-sepia .about-timeline-nav .timeline-step {
  background: #ffffff !important;
  border: 1.5px solid rgba(180, 83, 9, 0.2) !important;
  color: #21150b !important;
  box-shadow: 0 2px 6px rgba(67, 52, 34, 0.04) !important;
}

.theme-warm-sepia .about-timeline-nav .timeline-step .step-num {
  color: #8c6d52 !important;
}

.theme-warm-sepia .about-timeline-nav .timeline-step .step-label {
  color: #21150b !important;
  font-weight: 700 !important;
}

.theme-warm-sepia .about-timeline-nav .timeline-step:hover {
  border-color: #d97706 !important;
  background: rgba(217, 119, 6, 0.1) !important;
}

.theme-warm-sepia .about-timeline-nav .timeline-step.active {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
  border-color: #b45309 !important;
  box-shadow: 0 4px 14px rgba(180, 83, 9, 0.35) !important;
}

.theme-warm-sepia .about-timeline-nav .timeline-step.active .step-num,
.theme-warm-sepia .about-timeline-nav .timeline-step.active .step-label {
  color: #ffffff !important;
  font-weight: 800 !important;
}

.theme-warm-sepia .about-timeline-nav .timeline-track-fill {
  background: linear-gradient(90deg, #d97706, #b45309) !important;
}

/* Screenshot 7: Dictionary Search Result Word Title, IPA Badge, Context Tabs & Definition Cards */
.theme-warm-sepia #dict-res-word,
.theme-warm-sepia .dict-result-word-info h2 {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: initial !important;
  color: #21150b !important;
  font-weight: 850 !important;
}

.theme-warm-sepia .dict-result-ipa,
.theme-warm-sepia #dict-res-ipa {
  background: #f7ede2 !important;
  border: 1.5px solid #d97706 !important;
  color: #b45309 !important;
  font-weight: 750 !important;
}

.theme-warm-sepia .btn-dict-speak,
.theme-warm-sepia #dict-btn-speak {
  background: #ffffff !important;
  border: 1.5px solid rgba(180, 83, 9, 0.25) !important;
  color: #21150b !important;
  font-weight: 700 !important;
}

.theme-warm-sepia .dict-context-tab-btn {
  background: #ffffff !important;
  border: 1.5px solid rgba(180, 83, 9, 0.22) !important;
  color: #3d2b1a !important;
  box-shadow: 0 4px 12px rgba(67, 52, 34, 0.05) !important;
}

.theme-warm-sepia .dict-context-tab-btn h4 {
  color: #21150b !important;
  font-weight: 750 !important;
}

.theme-warm-sepia .dict-context-tab-btn span {
  color: #735438 !important;
}

.theme-warm-sepia .dict-context-tab-btn:hover {
  border-color: #d97706 !important;
  background: #fffcf7 !important;
}

.theme-warm-sepia .dict-context-tab-btn.active {
  background: rgba(217, 119, 6, 0.12) !important;
  border: 1.5px solid #d97706 !important;
  box-shadow: 0 4px 14px rgba(180, 83, 9, 0.15) !important;
}

.theme-warm-sepia .dict-context-tab-btn.active h4 {
  color: #b45309 !important;
  font-weight: 800 !important;
}

.theme-warm-sepia .dict-meaning-block,
.theme-warm-sepia .dict-def-card,
.theme-warm-sepia .dict-level-card {
  background: #ffffff !important;
  border: 1.5px solid rgba(180, 83, 9, 0.25) !important;
  color: #21150b !important;
  box-shadow: 0 8px 24px rgba(67, 52, 34, 0.1) !important;
}

.theme-warm-sepia .dict-meaning-def {
  color: #21150b !important;
  font-weight: 750 !important;
}

.theme-warm-sepia .dict-sentence-item {
  background: #f7ede2 !important;
  border-left: 4px solid #d97706 !important;
  border-top: 1px solid rgba(180, 83, 9, 0.15) !important;
  border-right: 1px solid rgba(180, 83, 9, 0.15) !important;
  border-bottom: 1px solid rgba(180, 83, 9, 0.15) !important;
  color: #21150b !important;
}

.theme-warm-sepia .dict-sentence-en {
  color: #21150b !important;
  font-weight: 700 !important;
}

.theme-warm-sepia .dict-sentence-en strong {
  color: #b45309 !important;
  background: rgba(217, 119, 6, 0.15) !important;
  border: 1px solid rgba(180, 83, 9, 0.3) !important;
}

.theme-warm-sepia .dict-sentence-tr {
  color: #5c4735 !important;
}

.theme-warm-sepia .btn-add-meaning-wordbook,
.theme-warm-sepia .btn-add-wordbook {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
  color: #ffffff !important;
  border: 1px solid #b45309 !important;
  font-weight: 750 !important;
}

/* ==========================================================================
   WARM SEPIA THEME COMPREHENSIVE CONTRAST & LEGIBILITY OVERRIDES
   ========================================================================== */

/* 1. Student Task Cards & Resource Cards */
.theme-warm-sepia .assignment-card-v2 {
  background: rgba(253, 246, 227, 0.95) !important;
  border-color: rgba(180, 83, 9, 0.25) !important;
  box-shadow: 0 10px 25px rgba(67, 52, 34, 0.1) !important;
}

.theme-warm-sepia .assignment-card-v2::before {
  background: linear-gradient(90deg, #d97706, #f59e0b) !important;
}

.theme-warm-sepia .assignment-v2-title {
  color: #433422 !important;
}

.theme-warm-sepia .assignment-v2-desc {
  color: #78350f !important;
}

.theme-warm-sepia .assignment-resource-card {
  background: rgba(245, 158, 11, 0.1) !important;
  border-color: rgba(217, 119, 6, 0.25) !important;
}

.theme-warm-sepia .assignment-resource-card:hover {
  background: rgba(245, 158, 11, 0.18) !important;
  border-color: rgba(217, 119, 6, 0.45) !important;
}

.theme-warm-sepia .assignment-resource-card .resource-title {
  color: #433422 !important;
}

.theme-warm-sepia .assignment-resource-card .resource-subtext {
  color: #78350f !important;
}

.theme-warm-sepia .assignment-v2-body div[style*="Assigned by"] span {
  color: #78350f !important;
}

.theme-warm-sepia .assignment-v2-body div[style*="Assigned by"] strong {
  color: #d97706 !important;
}

.theme-warm-sepia .assignment-v2-footer {
  border-top-color: rgba(180, 83, 9, 0.15) !important;
}

.theme-warm-sepia .assignment-v2-deadline {
  color: #78350f !important;
}

.theme-warm-sepia .btn-start-task-glow {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.3) !important;
}

.theme-warm-sepia .btn-toggle-done-v2 {
  background: rgba(217, 119, 6, 0.12) !important;
  color: #d97706 !important;
  border-color: rgba(217, 119, 6, 0.35) !important;
}

.theme-warm-sepia .assignment-type-badge-v2.story {
  background: rgba(217, 119, 6, 0.12) !important;
  color: #d97706 !important;
  border-color: rgba(217, 119, 6, 0.35) !important;
}


/* Warm Sepia Completed Task Theme Overrides */
.theme-warm-sepia .assignment-card-v2.completed-card {
  background: linear-gradient(145deg, rgba(247, 222, 215, 0.98) 0%, rgba(242, 211, 203, 0.98) 100%) !important;
  border: 1.5px solid rgba(220, 38, 38, 0.45) !important;
  box-shadow: 0 10px 25px rgba(185, 28, 28, 0.12) !important;
}

.theme-warm-sepia .assignment-card-v2.completed-card::before {
  background: linear-gradient(90deg, #dc2626, #ef4444) !important;
}

.theme-warm-sepia .assignment-card-v2.completed-card .assignment-v2-title {
  color: #2a1207 !important;
}

.theme-warm-sepia .assignment-card-v2.completed-card .assignment-v2-desc {
  color: #4a2713 !important;
}

.theme-warm-sepia .assignment-card-v2.completed-card .assignment-resource-card {
  background: rgba(240, 198, 189, 0.55) !important;
  border-color: rgba(220, 38, 38, 0.35) !important;
}

.theme-warm-sepia .assignment-card-v2.completed-card .assignment-resource-card .resource-title {
  color: #200d04 !important;
}

.theme-warm-sepia .assignment-card-v2.completed-card .assignment-resource-card .resource-subtext {
  color: #6e300d !important;
}

.theme-warm-sepia .assignment-card-v2.completed-card .assignment-resource-card .resource-arrow {
  color: #dc2626 !important;
}

.theme-warm-sepia .assignment-card-v2.completed-card .assignment-v2-deadline {
  color: #dc2626 !important;
  font-weight: 700 !important;
}

.theme-warm-sepia .assignment-card-v2.completed-card .btn-student-done,
.theme-warm-sepia .assignment-card-v2.completed-card .btn-toggle-done-v2 {
  border-color: #dc2626 !important;
  color: #dc2626 !important;
  background: transparent !important;
}

.theme-warm-sepia .assignment-card-v2.completed-card .btn-student-done:hover,
.theme-warm-sepia .assignment-card-v2.completed-card .btn-toggle-done-v2:hover {
  background: #dc2626 !important;
  color: #ffffff !important;
}

/* Warm Sepia Launchpad Card Icon Wrap & Launch Action Theme Overrides */
.theme-warm-sepia .launchpad-card {
  background: rgba(253, 246, 227, 0.95) !important;
  border: 1.5px solid rgba(180, 83, 9, 0.25) !important;
}

.theme-warm-sepia .launchpad-card:hover {
  border-color: rgba(217, 119, 6, 0.5) !important;
  box-shadow: 0 15px 45px rgba(67, 52, 34, 0.15), 0 0 25px rgba(217, 119, 6, 0.15) !important;
}

.theme-warm-sepia .card-icon-wrap {
  background: rgba(245, 158, 11, 0.12) !important;
  border: 1.5px solid rgba(217, 119, 6, 0.4) !important;
  box-shadow: 0 4px 14px rgba(180, 83, 9, 0.1) !important;
}

.theme-warm-sepia .launchpad-card:hover .card-icon-wrap {
  background: rgba(245, 158, 11, 0.2) !important;
  border-color: #d97706 !important;
  box-shadow: 0 6px 20px rgba(180, 83, 9, 0.25), 0 0 15px rgba(217, 119, 6, 0.3) !important;
}

.theme-warm-sepia .card-action {
  color: #d97706 !important;
  opacity: 0.95 !important;
  font-weight: 800 !important;
}

.theme-warm-sepia .launchpad-card:hover .card-action {
  color: #b45309 !important;
}

.theme-warm-sepia .card-body h4 {
  color: #433422 !important;
}

.theme-warm-sepia .card-body p {
  color: #78350f !important;
}

/* Warm Sepia Animated Emoji/Icon Element Accents */
.theme-warm-sepia .book-cover,
.theme-warm-sepia .book-spine {
  border-color: #d97706 !important;
}
.theme-warm-sepia .book-page {
  border-color: rgba(217, 119, 6, 0.5) !important;
}
.theme-warm-sepia .glass-lens,
.theme-warm-sepia .glass-handle {
  border-color: #d97706 !important;
  background: rgba(245, 158, 11, 0.2) !important;
}
.theme-warm-sepia .flashcard {
  border: 1.5px solid #d97706 !important;
  color: #d97706 !important;
  background: rgba(245, 158, 11, 0.15) !important;
}
.theme-warm-sepia .podium {
  background: linear-gradient(to top, #d97706 0%, #f59e0b 100%) !important;
}
.theme-warm-sepia .node {
  background: #d97706 !important;
  box-shadow: 0 0 8px #f59e0b !important;
}
.theme-warm-sepia .link {
  background: rgba(217, 119, 6, 0.5) !important;
}
.theme-warm-sepia .eq-bar {
  background: linear-gradient(to top, #d97706 0%, #f59e0b 100%) !important;
}

/* 2. Notification Bell & Header Circle Buttons */
.theme-warm-sepia .notification-trigger,
.theme-warm-sepia #btn-header-notifications,
.theme-warm-sepia .header-icon-btn {
  background: rgba(253, 246, 227, 0.9) !important;
  border: 1px solid rgba(180, 83, 9, 0.25) !important;
  color: #d97706 !important;
  box-shadow: 0 4px 12px rgba(67, 52, 34, 0.08) !important;
}

.theme-warm-sepia .notification-trigger:hover,
.theme-warm-sepia #btn-header-notifications:hover,
.theme-warm-sepia .header-icon-btn:hover {
  background: rgba(245, 158, 11, 0.18) !important;
  border-color: rgba(217, 119, 6, 0.45) !important;
}

/* 3. Empty State Boxes ("No Mentor Notes Yet") */
.theme-warm-sepia #student-mentor-notes-container div[style*="border: 1px dashed"] {
  background: rgba(253, 246, 227, 0.9) !important;
  border-color: rgba(180, 83, 9, 0.25) !important;
}

.theme-warm-sepia #student-mentor-notes-container div[style*="font-weight: 700; color: white"],
.theme-warm-sepia #student-mentor-notes-container div[style*="font-weight: 800; color: white"] {
  color: #433422 !important;
}

.theme-warm-sepia #student-mentor-notes-container div[style*="color: var(--text-muted)"] {
  color: #78350f !important;
}

/* 4. Milestones & Achievements System */
.theme-warm-sepia .milestone-card {
  background: rgba(253, 246, 227, 0.95) !important;
  border-color: rgba(180, 83, 9, 0.2) !important;
  box-shadow: 0 4px 14px rgba(67, 52, 34, 0.08) !important;
}

.theme-warm-sepia .milestone-card:hover {
  background: rgba(253, 246, 227, 1) !important;
  border-color: rgba(217, 119, 6, 0.4) !important;
  box-shadow: 0 8px 22px rgba(67, 52, 34, 0.14) !important;
}

.theme-warm-sepia .milestone-title {
  color: #433422 !important;
}

.theme-warm-sepia .milestone-desc,
.theme-warm-sepia .milestone-progress-text,
.theme-warm-sepia .milestone-unlocked-at {
  color: #78350f !important;
}

.theme-warm-sepia .milestone-icon {
  background: rgba(217, 119, 6, 0.12) !important;
  border-color: rgba(217, 119, 6, 0.25) !important;
  color: #d97706 !important;
}

.theme-warm-sepia .milestone-progress-track {
  background: rgba(180, 83, 9, 0.15) !important;
}

.theme-warm-sepia .milestone-progress-fill {
  background: linear-gradient(90deg, #d97706, #f59e0b) !important;
}

/* 5. Mentor Dashboard - Broadcast Studio & Mailbox Preview Drawer */
.theme-warm-sepia .mentor-tabs-bar {
  background: rgba(253, 246, 227, 0.7) !important;
}

.theme-warm-sepia .mentor-tab-pill {
  background: rgba(253, 246, 227, 0.9) !important;
  border-color: rgba(180, 83, 9, 0.2) !important;
  color: #433422 !important;
}

.theme-warm-sepia .mentor-tab-pill.active {
  background: linear-gradient(135deg, #d97706, #f59e0b) !important;
  color: #ffffff !important;
}

.theme-warm-sepia div[style*="background: rgba(13, 21, 39, 0.75)"] {
  background: rgba(253, 246, 227, 0.95) !important;
  border-color: rgba(180, 83, 9, 0.25) !important;
}

.theme-warm-sepia div[style*="background: rgba(13, 21, 39, 0.75)"] span {
  color: #433422 !important;
}

.theme-warm-sepia .btn-preset-chip {
  background: rgba(217, 119, 6, 0.12) !important;
  border-color: rgba(217, 119, 6, 0.3) !important;
  color: #d97706 !important;
}

.theme-warm-sepia #page-mentor input.form-input,
.theme-warm-sepia #page-mentor textarea.form-input {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(180, 83, 9, 0.3) !important;
  color: #433422 !important;
}

/* User Mailbox Preview Card in Broadcast Studio */
.theme-warm-sepia div[style*="background: rgba(13, 21, 39, 0.85)"] {
  background: rgba(253, 246, 227, 0.95) !important;
  border-color: rgba(180, 83, 9, 0.25) !important;
}

.theme-warm-sepia #tab-preview-title {
  color: #433422 !important;
}

.theme-warm-sepia #tab-preview-message {
  color: #78350f !important;
}

.theme-warm-sepia #tab-preview-recipient-badge {
  background: rgba(217, 119, 6, 0.12) !important;
  border-color: rgba(217, 119, 6, 0.35) !important;
  color: #d97706 !important;
}

/* 6. View Switcher Controls (Grid vs Table Roster View) */
.theme-warm-sepia .view-toggle-group {
  background: rgba(253, 246, 227, 0.9) !important;
  border-color: rgba(180, 83, 9, 0.25) !important;
}

.theme-warm-sepia .view-toggle-btn {
  color: #78350f !important;
}

.theme-warm-sepia .view-toggle-btn:hover {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #433422 !important;
}

.theme-warm-sepia .view-toggle-btn.active {
  background: rgba(217, 119, 6, 0.2) !important;
  color: #d97706 !important;
  border-color: rgba(217, 119, 6, 0.45) !important;
}

/* 7. Class Roster Table View Overrides */
.theme-warm-sepia .data-table {
  background: rgba(253, 246, 227, 0.95) !important;
}

.theme-warm-sepia .data-table thead tr {
  background: rgba(245, 158, 11, 0.12) !important;
  border-bottom-color: rgba(180, 83, 9, 0.2) !important;
  color: #78350f !important;
}

.theme-warm-sepia .data-table th {
  color: #78350f !important;
}

.theme-warm-sepia .roster-table-row {
  border-bottom: 1px solid rgba(180, 83, 9, 0.12) !important;
}

.theme-warm-sepia .roster-table-row:hover {
  background: rgba(245, 158, 11, 0.1) !important;
}

.theme-warm-sepia .roster-table-row td div[style*="font-weight: 700; color: white"] {
  color: #433422 !important;
}

.theme-warm-sepia .roster-table-row td[style*="color: var(--text-secondary)"] {
  color: #78350f !important;
}

.theme-warm-sepia .roster-table-row td[style*="color: #00f2fe"] {
  color: #d97706 !important;
}

.theme-warm-sepia .completed-tasks-pill {
  background: rgba(217, 119, 6, 0.12) !important;
  color: #d97706 !important;
  border: 1px solid rgba(217, 119, 6, 0.3) !important;
}

.theme-warm-sepia .btn-table-action.profile {
  background: rgba(217, 119, 6, 0.12) !important;
  color: #d97706 !important;
  border-color: rgba(217, 119, 6, 0.3) !important;
}

.theme-warm-sepia .btn-table-action.assign {
  background: linear-gradient(135deg, #d97706, #f59e0b) !important;
  color: #ffffff !important;
}

.theme-warm-sepia .btn-table-action.remove {
  background: rgba(239, 68, 68, 0.1) !important;
  color: #ef4444 !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}

/* 8. Notification & Mailbox Ring Bell Icon Styling */
.theme-warm-sepia .bell-icon,
.theme-warm-sepia #btn-header-notifications svg,
.theme-warm-sepia .notification-trigger svg {
  color: #d97706 !important;
  stroke: #d97706 !important;
}

.theme-warm-sepia .notification-badge {
  background: #d97706 !important;
  color: #ffffff !important;
}

.theme-warm-sepia .btn-mailbox,
.theme-warm-sepia #nav-btn-mailbox,
body.theme-warm-sepia #nav-btn-mailbox,
body.theme-warm-sepia .btn-mailbox {
  background: rgba(253, 246, 227, 0.95) !important;
  border: 1px solid rgba(180, 83, 9, 0.3) !important;
  color: #d97706 !important;
  box-shadow: 0 4px 14px rgba(67, 52, 34, 0.1) !important;
}

.theme-warm-sepia .btn-mailbox:hover,
.theme-warm-sepia #nav-btn-mailbox:hover,
body.theme-warm-sepia #nav-btn-mailbox:hover {
  background: rgba(245, 158, 11, 0.18) !important;
  border-color: rgba(217, 119, 6, 0.5) !important;
  color: #b45309 !important;
  box-shadow: 0 6px 18px rgba(67, 52, 34, 0.15) !important;
}

.theme-warm-sepia .mailbox-badge {
  background: #d97706 !important;
  color: #ffffff !important;
  border-color: #fdf6e3 !important;
}


@media (max-width: 1200px) {
  .stories-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 900px) {
  .stories-hud-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .hud-left {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .stories-search-wrapper {
    width: 100% !important;
  }
  .level-filter-segmented {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    justify-content: flex-start;
    padding: 6px !important;
  }
  .hud-right {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .custom-select-wrapper,
  .sort-select-wrapper {
    width: 100% !important;
  }
}

@media (max-width: 600px) {
  .stories-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================
   SENTENCE FILL / FILL IN BLANKS PRACTICE STYLES
   ========================================== */
.fillblanks-stage-card {
  background: rgba(13, 21, 39, 0.92);
  border: 1px solid rgba(100, 255, 218, 0.2);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.45);
}

.fill-word-bank-box {
  background: rgba(10, 25, 47, 0.85);
  border: 1px solid rgba(100, 255, 218, 0.25);
  border-radius: 16px;
  padding: 16px 20px;
  margin-bottom: 24px;
  box-shadow: inset 0 2px 10px rgba(0,0,0,0.3);
}

.fill-word-chips-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
  min-height: 48px;
}

.fill-word-chip {
  background: linear-gradient(135deg, rgba(18, 30, 58, 0.9), rgba(10, 25, 47, 0.95));
  border: 1.5px solid rgba(100, 255, 218, 0.35);
  border-radius: 12px;
  padding: 8px 16px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  cursor: grab;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.22s cubic-bezier(0.165, 0.84, 0.44, 1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.fill-word-chip:hover {
  border-color: #64ffda;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(100, 255, 218, 0.35);
  background: rgba(100, 255, 218, 0.12);
}

.fill-word-chip.selected {
  border-color: #ffb703 !important;
  background: rgba(255, 183, 3, 0.2) !important;
  color: #ffb703 !important;
  box-shadow: 0 0 20px rgba(255, 183, 3, 0.5) !important;
  transform: scale(1.05);
}

.fill-word-chip.used {
  opacity: 0.25;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: none;
  transform: scale(0.95);
}

.fill-word-chip.dragging {
  opacity: 0.5;
  transform: scale(0.95);
}

.sentence-fill-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}

.sentence-fill-item {
  background: rgba(18, 30, 58, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 16px 20px;
  transition: all 0.25s ease;
}

.sentence-fill-item:hover {
  border-color: rgba(100, 255, 218, 0.25);
  background: rgba(18, 30, 58, 0.85);
}

.sentence-fill-text {
  font-size: 15px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

.sentence-blank-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  padding: 4px 14px;
  margin: 0 4px;
  border-bottom: 2px dashed #64ffda;
  background: rgba(100, 255, 218, 0.08);
  border-radius: 8px;
  color: var(--color-teal);
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  vertical-align: middle;
  transition: all 0.2s ease;
  user-select: none;
}

.sentence-blank-slot:hover {
  background: rgba(100, 255, 218, 0.16);
  border-color: #64ffda;
  box-shadow: 0 0 10px rgba(100, 255, 218, 0.25);
}

.sentence-blank-slot.drag-over {
  background: rgba(255, 183, 3, 0.2) !important;
  border-color: #ffb703 !important;
  box-shadow: 0 0 15px rgba(255, 183, 3, 0.4) !important;
  transform: scale(1.04);
}

.sentence-blank-slot.filled {
  background: rgba(100, 255, 218, 0.18);
  border: 1px solid #64ffda;
  color: #ffffff;
  font-weight: 900;
  box-shadow: 0 0 12px rgba(100, 255, 218, 0.2);
}

.sentence-blank-slot.correct {
  background: rgba(46, 204, 113, 0.25) !important;
  border: 1.5px solid #2ecc71 !important;
  color: #2ecc71 !important;
  box-shadow: 0 0 16px rgba(46, 204, 113, 0.4) !important;
}

.sentence-blank-slot.incorrect {
  background: rgba(239, 35, 60, 0.25) !important;
  border: 1.5px solid #ef233c !important;
  color: #ef233c !important;
  box-shadow: 0 0 16px rgba(239, 35, 60, 0.4) !important;
  animation: slotShake 0.4s ease;
}

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

/* Practice Submode Switcher Tabs Desktop */
.practice-submode-switcher {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
  background: rgba(13, 21, 39, 0.85);
  padding: 5px;
  border-radius: 24px;
  border: 1px solid rgba(100, 255, 218, 0.2);
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

.practice-mode-btn {
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 800;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
  background: transparent;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.practice-mode-btn.active {
  background: var(--color-teal) !important;
  color: #0d1527 !important;
}

.fillblanks-lock-badge {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(255, 183, 3, 0.15);
  color: #ffb703;
  font-weight: 800;
}

/* Flashcards & Fill in Blanks Component Layouts */
.flashcard-actions-row {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  align-items: center;
}

.flashcard-actions-row .practice-btn-danger {
  flex: 1;
}
.flashcard-actions-row .practice-btn-primary {
  flex: 2;
}

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

.fillblanks-header-title {
  color: white;
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 4px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.fillblanks-count-badge {
  font-size: 11px;
  font-weight: 800;
  background: rgba(100, 255, 218, 0.12);
  color: var(--color-teal);
  border: 1px solid rgba(100, 255, 218, 0.3);
  padding: 3px 10px;
  border-radius: 12px;
}

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

.fillblanks-actions-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.fillblanks-actions-row .practice-btn-primary {
  flex: 2;
}
.fillblanks-actions-row .practice-btn-secondary {
  flex: 1;
}

.fillblanks-feedback-banner {
  padding: 14px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  margin-bottom: 16px;
}

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

.sentence-item-num {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 700;
}

.fill-word-bank-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--color-teal);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* ==========================================
   UNIFIED WORD PRACTICE STUDIO BUTTON STYLES
   ========================================== */
.practice-btn-primary {
  background: linear-gradient(135deg, #64ffda 0%, #00b4d8 100%) !important;
  color: #0d1527 !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  border-radius: 14px !important;
  border: none !important;
  padding: 14px 24px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 4px 18px rgba(100, 255, 218, 0.35) !important;
  transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.practice-btn-primary:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 24px rgba(100, 255, 218, 0.55) !important;
  filter: brightness(1.08) !important;
}

.practice-btn-primary:active {
  transform: translateY(0) scale(0.98) !important;
}

.practice-btn-secondary {
  background: rgba(18, 30, 58, 0.8) !important;
  border: 1.5px solid rgba(100, 255, 218, 0.3) !important;
  color: var(--color-teal) !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-radius: 14px !important;
  padding: 13px 20px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
}

.practice-btn-secondary:hover {
  background: rgba(100, 255, 218, 0.14) !important;
  border-color: #64ffda !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(100, 255, 218, 0.3) !important;
}

.practice-btn-warning {
  background: rgba(255, 183, 3, 0.1) !important;
  border: 1.5px solid rgba(255, 183, 3, 0.45) !important;
  color: #ffb703 !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-radius: 14px !important;
  padding: 13px 20px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  box-shadow: 0 4px 14px rgba(255, 183, 3, 0.15) !important;
}

.practice-btn-warning:hover {
  background: rgba(255, 183, 3, 0.22) !important;
  border-color: #ffb703 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(255, 183, 3, 0.4) !important;
}

.practice-btn-danger {
  background: rgba(239, 35, 60, 0.1) !important;
  border: 1.5px solid rgba(239, 35, 60, 0.45) !important;
  color: #ef233c !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-radius: 14px !important;
  padding: 13px 20px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  box-shadow: 0 4px 14px rgba(239, 35, 60, 0.15) !important;
}

.practice-btn-danger:hover {
  background: rgba(239, 35, 60, 0.22) !important;
  border-color: #ef233c !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(239, 35, 60, 0.4) !important;
}

/* ADMIN MANAGE WORDS STYLES */
.category-card-choice {
  background: rgba(13, 21, 39, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: all 0.25s ease;
  user-select: none;
}

.category-card-choice:hover {
  border-color: rgba(100, 255, 218, 0.4);
  background: rgba(100, 255, 218, 0.06);
  transform: translateY(-2px);
}

.category-card-choice.active {
  background: rgba(100, 255, 218, 0.12);
  border-color: var(--color-teal);
  box-shadow: 0 4px 16px rgba(100, 255, 218, 0.15);
}

.category-card-choice .cat-icon {
  font-size: 20px;
  margin-bottom: 4px;
}

.category-card-choice .cat-name {
  font-weight: 700;
  font-size: 12px;
  color: white;
  margin-bottom: 2px;
}

.category-card-choice .cat-desc {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.2;
}

.admin-cat-pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
  padding: 5px 12px;
  border-radius: 16px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.admin-cat-pill:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.admin-cat-pill.active {
  background: var(--color-teal);
  color: #0d1527;
  border-color: var(--color-teal);
  box-shadow: 0 2px 10px rgba(100, 255, 218, 0.3);
}

.admin-pos-filter-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.admin-pos-filter-btn:hover {
  color: white;
  border-color: rgba(255, 255, 255, 0.2);
}

.admin-pos-filter-btn.active {
  background: rgba(0, 180, 216, 0.2);
  color: #00b4d8;
  border-color: #00b4d8;
  font-weight: 700;
}

/* COOL HIGH-TECH IELTS TOGGLE BUTTON STYLES */
.ielts-toggle-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px !important;
  border-radius: 50px !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: 0.05em !important;
  cursor: pointer;
  border: 1.5px solid rgba(236, 72, 153, 0.3) !important;
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.08), rgba(168, 85, 247, 0.08)) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
  user-select: none;
  overflow: hidden;
}

.ielts-toggle-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transition: left 0.6s ease;
}

.ielts-toggle-btn:hover::before {
  left: 100%;
}

.ielts-toggle-btn:hover {
  border-color: rgba(236, 72, 153, 0.6) !important;
  color: #ffffff !important;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 20px rgba(236, 72, 153, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
}

.ielts-toggle-btn:active {
  transform: translateY(0) scale(0.98);
}

.ielts-toggle-btn .ielts-glow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

/* ACTIVE / TOGGLED ON STATE */
.ielts-toggle-btn.active {
  background: linear-gradient(135deg, #ec4899 0%, #a855f7 100%) !important;
  border-color: #f472b6 !important;
  color: #ffffff !important;
  box-shadow: 0 0 25px rgba(236, 72, 153, 0.6), 0 4px 15px rgba(168, 85, 247, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.4) !important;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.ielts-toggle-btn.active .ielts-glow-dot {
  background: #ffffff;
  box-shadow: 0 0 10px #ffffff, 0 0 18px #ec4899;
  animation: pulse-glow-dot 1.5s infinite alternate;
}

@keyframes pulse-glow-dot {
  from { transform: scale(1); opacity: 0.8; }
  to { transform: scale(1.4); opacity: 1; }
}

.admin-ielts-pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
  padding: 5px 12px;
  border-radius: 16px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.admin-ielts-pill:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.admin-ielts-pill.active {
  background: #ec4899;
  color: #ffffff;
  border-color: #ec4899;
  box-shadow: 0 2px 10px rgba(236, 72, 153, 0.4);
}

/* COOL HIGH-TECH TRACKS TOGGLE BUTTON STYLES (UNCOMPLETED FILTER) */
.tracks-toggle-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px !important;
  border-radius: 50px !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: 0.05em !important;
  cursor: pointer;
  border: 1.5px solid rgba(0, 242, 254, 0.3) !important;
  background: linear-gradient(135deg, rgba(0, 242, 254, 0.08), rgba(79, 172, 254, 0.08)) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
  user-select: none;
  overflow: hidden;
  white-space: nowrap;
}

.tracks-toggle-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transition: left 0.6s ease;
}

.tracks-toggle-btn:hover::before {
  left: 100%;
}

.tracks-toggle-btn:hover {
  border-color: rgba(0, 242, 254, 0.6) !important;
  color: #ffffff !important;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 20px rgba(0, 242, 254, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
}

.tracks-toggle-btn:active {
  transform: translateY(0) scale(0.98);
}

.tracks-toggle-btn .tracks-glow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
}

/* ACTIVE / TOGGLED ON STATE */
.tracks-toggle-btn.active {
  background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%) !important;
  border-color: #00f2fe !important;
  color: #0d1b2a !important;
  box-shadow: 0 0 25px rgba(0, 242, 254, 0.6), 0 4px 15px rgba(79, 172, 254, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.5) !important;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

.tracks-toggle-btn.active .tracks-glow-dot {
  background: #0d1b2a;
  box-shadow: 0 0 10px #ffffff, 0 0 18px #00f2fe;
  animation: pulse-glow-dot-cyan 1.5s infinite alternate;
}

@keyframes pulse-glow-dot-cyan {
  from { transform: scale(1); opacity: 0.8; }
  to { transform: scale(1.4); opacity: 1; }
}

.track-blanks-badge,
.blanks-tag {
  background: rgba(192, 132, 252, 0.14) !important;
  color: #c084fc !important;
  border: 1px solid rgba(192, 132, 252, 0.3) !important;
  margin-bottom: 0 !important;
  padding: 4px 10px;
  font-size: 11px;
  border-radius: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.track-incomplete-badge {
  background: rgba(255, 183, 3, 0.14) !important;
  color: #ffb703 !important;
  border: 1px solid rgba(255, 183, 3, 0.3) !important;
  margin-bottom: 0 !important;
  padding: 4px 10px;
  font-size: 11px;
  border-radius: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* REVOLUTIONIZED RANDOM NICKNAME BUTTON & ANIMATION */
@keyframes diceSpin {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.25); }
  100% { transform: rotate(360deg) scale(1); }
}
.dice-spin {
  animation: diceSpin 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-randomize-revolution {
  background: linear-gradient(135deg, rgba(100, 255, 218, 0.15) 0%, rgba(56, 189, 248, 0.15) 100%) !important;
  color: #64ffda !important;
  border: 1px solid rgba(100, 255, 218, 0.4) !important;
  border-radius: 8px !important;
  padding: 4px 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 0 14px rgba(100, 255, 218, 0.18) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  letter-spacing: 0.02em !important;
  user-select: none !important;
}
.btn-randomize-revolution:hover {
  background: linear-gradient(135deg, rgba(100, 255, 218, 0.35) 0%, rgba(56, 189, 248, 0.35) 100%) !important;
  border-color: #64ffda !important;
  box-shadow: 0 0 20px rgba(100, 255, 218, 0.45) !important;
  transform: translateY(-1px) scale(1.02) !important;
  color: #ffffff !important;
}
.btn-randomize-revolution:active {
  transform: translateY(0) scale(0.96) !important;
}

/* GENDER SELECT BUTTONS FOR RANDOM NICKNAME (INSIDE INPUT BOX) */
.input-with-actions-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.input-with-actions-wrapper .form-input {
  padding-right: 85px !important;
}

.input-actions-inside {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 5;
}

.btn-gender-inside {
  background: rgba(56, 189, 248, 0.18) !important;
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
  color: #38bdf8 !important;
  border-radius: 6px !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  user-select: none !important;
}

.btn-gender-inside.male {
  background: rgba(56, 189, 248, 0.18) !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
  color: #38bdf8 !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.2) !important;
}

.btn-gender-inside.male:hover {
  background: rgba(56, 189, 248, 0.35) !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.5) !important;
  transform: scale(1.08) !important;
}

.btn-gender-inside.female {
  background: rgba(244, 114, 182, 0.18) !important;
  border-color: rgba(244, 114, 182, 0.4) !important;
  color: #f472b6 !important;
  box-shadow: 0 0 10px rgba(244, 114, 182, 0.2) !important;
}

.btn-gender-inside.female:hover {
  background: rgba(244, 114, 182, 0.35) !important;
  box-shadow: 0 0 14px rgba(244, 114, 182, 0.5) !important;
  transform: scale(1.08) !important;
}

.btn-gender-inside:active {
  transform: scale(0.92) !important;
}

.btn-random-inside {
  background: linear-gradient(135deg, rgba(100, 255, 218, 0.18) 0%, rgba(56, 189, 248, 0.18) 100%) !important;
  border: 1px solid rgba(100, 255, 218, 0.4) !important;
  color: #64ffda !important;
  border-radius: 6px !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  font-size: 15px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  user-select: none !important;
}

.btn-random-inside:hover {
  background: linear-gradient(135deg, rgba(100, 255, 218, 0.35) 0%, rgba(56, 189, 248, 0.35) 100%) !important;
  border-color: #64ffda !important;
  box-shadow: 0 0 14px rgba(100, 255, 218, 0.5) !important;
  transform: scale(1.08) !important;
}

.btn-random-inside:active {
  transform: scale(0.92) !important;
}

.dice-svg-icon, .gender-icon {
  display: inline-block;
  vertical-align: middle;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes diceSpinAnim {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.3); }
  100% { transform: rotate(360deg) scale(1); }
}

.dice-spin {
  animation: diceSpinAnim 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Sentence Management System Styles */
.badge-tag.tag-casual {
  background: rgba(100, 255, 218, 0.15) !important;
  color: #64ffda !important;
  border: 1px solid rgba(100, 255, 218, 0.35) !important;
}

.badge-tag.tag-formal {
  background: rgba(0, 180, 216, 0.15) !important;
  color: #00b4d8 !important;
  border: 1px solid rgba(0, 180, 216, 0.35) !important;
}

.badge-tag.tag-academic {
  background: rgba(157, 78, 221, 0.15) !important;
  color: #c77dff !important;
  border: 1px solid rgba(157, 78, 221, 0.35) !important;
}

.badge-tag.tag-slang {
  background: rgba(255, 159, 28, 0.15) !important;
  color: #ff9f1c !important;
  border: 1px solid rgba(255, 159, 28, 0.35) !important;
}

.meaning-radio-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.meaning-radio-card:hover, .meaning-radio-card.active {
  background: rgba(100, 255, 218, 0.06);
  border-color: rgba(100, 255, 218, 0.4);
}

.meaning-radio-card input[type="radio"] {
  accent-color: #64ffda;
  margin-top: 3px;
}

.sentence-card {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px;
  transition: all 0.2s ease;
}

.sentence-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.35);
}

.sentence-dropdown-item {
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.15s ease;
}

.sentence-dropdown-item:hover {
  background: rgba(100, 255, 218, 0.15);
  color: #64ffda;
}

@media (min-width: 1025px) {
  .nav-links .nav-icon,
  .nav-links .nav-arrow {
    display: none !important;
  }
}

@media (max-width: 1024px) {
  /* --- 1. Global Viewport & Container Overrides --- */
  html, body {
    overflow-x: hidden !important;
  }

  body.logged-in {
    zoom: 1 !important;
  }

  main.main-content,
  body.logged-in .main-content {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 85px 16px 40px 16px !important;
    box-sizing: border-box !important;
  }

  /* --- 2. Navbar & Mobile Menu Drawer --- */
  .navbar,
  body.logged-in .navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 70px !important;
    background: rgba(6, 11, 19, 0.94) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-right: none !important;
    z-index: 2000 !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 16px !important;
    overflow: visible !important;
  }

  .navbar .logo,
  body.logged-in .navbar .logo {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 22px !important;
    width: auto !important;
  }

  /* Prominent Glowing Hamburger Button (≡) */
  .burger-menu {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    cursor: pointer !important;
    z-index: 2005 !important;
    border-radius: 12px !important;
    background: rgba(100, 255, 218, 0.08) !important;
    border: 1.5px solid rgba(100, 255, 218, 0.25) !important;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
  }

  .burger-menu:hover,
  .burger-menu:active {
    background: rgba(100, 255, 218, 0.18) !important;
    border-color: rgba(100, 255, 218, 0.5) !important;
    transform: scale(1.05) !important;
  }

  .burger-menu span {
    display: block !important;
    width: 22px !important;
    height: 2.5px !important;
    background: var(--color-teal, #64ffda) !important;
    border-radius: 3px !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }

  /* Active Burger Transform (X shape) */
  .burger-menu.active {
    background: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
  }

  .burger-menu.active span {
    background: #f87171 !important;
  }

  .burger-menu.active span:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg) !important;
  }
  .burger-menu.active span:nth-child(2) {
    opacity: 0 !important;
  }
  .burger-menu.active span:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg) !important;
  }

  .nav-links,
  body.logged-in .nav-links {
    display: none !important;
    position: fixed !important;
    top: 70px !important;
    left: 0 !important;
    width: 100% !important;
    height: calc(100vh - 70px) !important;
    background: rgba(6, 11, 19, 0.97) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    padding: 20px 16px 40px 16px !important;
    gap: 10px !important;
    z-index: 1999 !important;
    overflow-y: auto !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .nav-links.mobile-active,
  body.logged-in .nav-links.mobile-active {
    display: flex !important;
    transform: none !important;
  }

  .nav-links li,
  body.logged-in .nav-links li {
    width: 100% !important;
  }

  /* Hide admin & authenticated-only items by default on mobile unless allowed */
  .admin-only-link,
  .nav-links li#nav-admin-link,
  .nav-links li#nav-link-wordbook,
  .nav-links li#nav-link-listening,
  .nav-links li#nav-link-profile {
    display: none !important;
  }

  body.admin-mode .admin-only-link,
  body.admin-mode .nav-links li#nav-admin-link {
    display: block !important;
  }

  body.logged-in .nav-links li#nav-link-wordbook,
  body.logged-in .nav-links li#nav-link-listening {
    display: block !important;
  }

  .nav-links li a,
  body.logged-in .nav-links li a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
    width: 100% !important;
    padding: 14px 18px !important;
    min-height: 52px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, rgba(22, 34, 63, 0.55) 0%, rgba(13, 21, 39, 0.85) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-left: 3.5px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-sizing: border-box !important;
  }

  .nav-links li a::after,
  .nav-links li.active a::after,
  body.logged-in .nav-links li a::after,
  body.logged-in .nav-links li.active a::after {
    display: none !important;
    content: none !important;
  }

  .nav-links li a:active,
  .nav-links li a:hover {
    background: linear-gradient(135deg, rgba(22, 34, 63, 0.8) 0%, rgba(13, 21, 39, 0.95) 100%) !important;
    border-color: rgba(100, 255, 218, 0.35) !important;
    border-left-color: var(--color-teal, #64ffda) !important;
    box-shadow: 0 6px 20px rgba(100, 255, 218, 0.15), inset 0 0 12px rgba(100, 255, 218, 0.05) !important;
    transform: translateX(4px) !important;
  }

  .nav-links li.active a,
  body.logged-in .nav-links li.active a {
    background: linear-gradient(135deg, rgba(100, 255, 218, 0.14) 0%, rgba(13, 21, 39, 0.9) 100%) !important;
    border-color: rgba(100, 255, 218, 0.45) !important;
    border-left: 4px solid var(--color-teal, #64ffda) !important;
    color: var(--color-teal, #64ffda) !important;
    box-shadow: 0 0 22px rgba(100, 255, 218, 0.22), inset 0 0 15px rgba(100, 255, 218, 0.08) !important;
  }

  .nav-icon {
    width: 22px !important;
    height: 22px !important;
    margin-right: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    color: var(--color-teal, #64ffda) !important;
    transition: color 0.3s ease, transform 0.3s ease !important;
  }

  .nav-icon svg {
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor !important;
  }

  .nav-label {
    flex: 1 !important;
    text-align: left !important;
  }

  .nav-arrow {
    width: 16px !important;
    height: 16px !important;
    color: rgba(255, 255, 255, 0.35) !important;
    transition: transform 0.3s ease, color 0.3s ease !important;
    flex-shrink: 0 !important;
  }

  .nav-links li.active .nav-arrow,
  .nav-links li a:hover .nav-arrow {
    color: var(--color-teal, #64ffda) !important;
    transform: translateX(3px) !important;
  }

  .nav-links .admin-only-link a {
    color: #f59e0b !important;
    border-color: rgba(245, 158, 11, 0.2) !important;
    border-left-color: #f59e0b !important;
  }

  .nav-auth,
  body.logged-in .nav-auth {
    margin-top: 0 !important;
    width: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 !important;
    border-top: none !important;
  }

  /* By default on mobile, hide user-info-group and user badge for guests */
  .user-info-group,
  #nav-user-badge,
  #nav-btn-mailbox,
  body:not(.logged-in) .user-info-group,
  body:not(.logged-in) #nav-user-badge,
  body:not(.logged-in) #nav-btn-mailbox {
    display: none !important;
  }

  body.logged-in .user-info-group {
    margin: 0 !important;
    width: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
  }

  /* Top-bar user badge: 100% Perfect Circle Button on mobile (Logged-In Only) */
  body.logged-in #nav-user-badge {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    flex-shrink: 0 !important;
  }

  #nav-user-badge:hover,
  #nav-user-badge:active {
    background: rgba(100, 255, 218, 0.15) !important;
    border-color: rgba(100, 255, 218, 0.4) !important;
    transform: scale(1.05) !important;
  }

  #nav-user-badge #mini-username {
    display: none !important;
  }

  #mini-avatar-wrap {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
  }

  #mini-avatar-wrap #mini-avatar {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    display: block !important;
    object-fit: cover !important;
    margin: 0 !important;
  }

  #mini-avatar-wrap::after {
    border-radius: 50% !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
  }

  .btn-mailbox,
  body.logged-in #nav-btn-mailbox,
  body.logged-in .btn-mailbox {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }

  body.logged-in #nav-btn-mailbox:hover,
  body.logged-in #nav-btn-mailbox:active {
    background: rgba(100, 255, 218, 0.15) !important;
    border-color: rgba(100, 255, 218, 0.4) !important;
    transform: scale(1.05) !important;
  }

  /* Hide raw desktop logout button in top mobile header */
  body.logged-in #nav-btn-logout {
    display: none !important;
  }

  /* Mobile Drawer Logout Item (Vibrant Solid Red) */
  .mobile-drawer-logout-item {
    padding: 16px 12px 24px 12px !important;
    margin-top: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .mobile-drawer-logout-btn {
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    border: 1px solid rgba(239, 68, 68, 0.6) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.4) !important;
    transition: all 0.25s ease !important;
  }

  .mobile-drawer-logout-btn svg {
    stroke: #ffffff !important;
  }

  .mobile-drawer-logout-btn:hover,
  .mobile-drawer-logout-btn:active {
    background: linear-gradient(135deg, #f87171 0%, #b91c1c 100%) !important;
    box-shadow: 0 6px 22px rgba(239, 68, 68, 0.6) !important;
  }

  /* --- 3. Grid Layout Reflows into Single Column Stacks --- */

  /* Home & Hero */
  .hero {
    flex-direction: column !important;
    text-align: center !important;
    gap: 24px !important;
    padding: 10px 0 30px 0 !important;
  }
  .hero-content {
    width: 100% !important;
    align-items: center !important;
  }
  .hero-image {
    width: 100% !important;
    max-width: 100% !important;
  }
  .scrolly-split-layout {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Multi-column Grids */
  .menu-grid,
  .stories-layout,
  .dict-results-grid,
  .listening-studio-layout,
  .profile-layout,
  .admin-layout,
  .cms-editor-grid,
  .reader-body {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .profile-layout > * {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #page-profile,
  .profile-layout,
  .profile-right-hub,
  .profile-tab-content,
  #ptab-settings,
  #settings-form {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .profile-card-left {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 24px 16px !important;
    overflow: hidden !important;
  }

  .profile-tab-content .glass-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 20px 14px !important;
    overflow: hidden !important;
  }

  #ptab-settings h3,
  .profile-tab-content h3 {
    font-size: 16px !important;
    margin-bottom: 16px !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  #ptab-settings label {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-bottom: 10px !important;
    display: block !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
  }

  #ptab-settings .btn-linkedin-style {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    height: 44px !important;
    margin-top: 18px !important;
    font-size: 13.5px !important;
    box-sizing: border-box !important;
  }

  .theme-palette-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .theme-palette-card {
    padding: 10px 8px !important;
    gap: 8px !important;
    border-radius: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .palette-swatch-preview {
    width: 30px !important;
    height: 30px !important;
    flex-shrink: 0 !important;
  }

  .palette-name {
    font-size: 11.5px !important;
  }

  .palette-desc {
    font-size: 9px !important;
  }

  .border-selector-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    margin-top: 8px !important;
  }

  .avatar-selector-grid {
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    margin-top: 8px !important;
  }

  .avatar-selector-grid[style*="display: none"] {
    display: none !important;
  }

  .avatar-selector-grid:not([style*="display: none"]) {
    display: flex !important;
  }

  .avatar-option {
    width: 42px !important;
    height: 42px !important;
    flex-shrink: 0 !important;
  }

  .border-option-item {
    width: 52px !important;
    height: 52px !important;
    flex-shrink: 0 !important;
  }

  .menu-sidebar {
    width: 100% !important;
  }

  /* Card Grids */
  .features-grid,
  .ecosystem-grid,
  .team-grid,
  .manifesto-grid,
  .sponsors-rich-grid,
  .philosophy-grid,
  .gateway-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Responsive Story & Music Track Grids */
  .stories-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  .listening-song-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  /* Filters & HUD Bars */
  .stories-hud-bar,
  .tracks-hud-bar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 16px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .hud-filters-row,
  .hud-search-row,
  .tracks-hud-left-controls,
  .tracks-hud-bar .stories-search-wrapper,
  .tracks-hud-bar .sort-select-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 10px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }

  .topic-select-wrapper,
  .sort-select-wrapper {
    width: 100% !important;
    max-width: 100% !important;
  }

  .hud-search-row > div {
    width: 100% !important;
  }

  .stories-search-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .stories-search-input {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #tracks-uncompleted-toggle-btn {
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* Segmented Level Filter Pills (Smooth Horizontal Swipe on Mobile) */
  .level-filter-segmented {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 5px 8px !important;
    border-radius: 25px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .level-filter-segmented::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .level-filter-segmented .filter-pill {
    flex: 0 0 auto !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    border-radius: 20px !important;
  }

  .stories-hud-spacer {
    display: none !important;
  }

  /* Admin Manage Members Mobile Overhaul */
  #admin-tab-members {
    padding: 14px 10px !important;
    box-sizing: border-box !important;
  }

  .directory-actions-bar {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
    width: 100% !important;
  }

  .directory-actions-bar #admin-members-search {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .directory-actions-bar .custom-select-wrapper {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .directory-actions-bar > button {
    width: 100% !important;
    height: 42px !important;
    justify-content: center !important;
    border-radius: 12px !important;
  }

  .directory-sub-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    margin-bottom: 18px !important;
    padding: 4px !important;
    background: rgba(0, 0, 0, 0.25) !important;
    border-radius: 12px !important;
    border-bottom: none !important;
  }

  .directory-sub-tab-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 4px !important;
    font-size: 11px !important;
    border-radius: 8px !important;
    border-bottom: none !important;
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .directory-sub-tab-btn span {
    margin-left: 0 !important;
    margin-top: 4px !important;
    font-size: 10px !important;
  }

  .member-list-header {
    display: none !important;
  }

  .member-list-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 14px 12px !important;
    background: rgba(255, 255, 255, 0.025) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
    margin-bottom: 12px !important;
    font-size: 13px !important;
  }

  .member-card-main-col {
    width: 100% !important;
  }

  .member-card-stats-row {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .member-card-actions-row {
    width: 100% !important;
    display: flex !important;
    gap: 8px !important;
    justify-content: space-between !important;
  }

  .member-card-actions-row .btn {
    flex: 1 !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    border-radius: 8px !important;
  }

  /* Admin Manage Stories (CMS) Mobile Overhaul */
  #admin-tab-cms {
    padding: 14px 10px !important;
    box-sizing: border-box !important;
  }

  .cms-mode-switcher {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    margin-bottom: 18px !important;
    padding: 4px !important;
    background: rgba(0, 0, 0, 0.25) !important;
    border-radius: 12px !important;
    border-bottom: none !important;
  }

  .cms-sub-tab-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 4px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    border-bottom: none !important;
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .cms-metrics-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
  }

  .cms-metric-card {
    padding: 10px 12px !important;
    border-radius: 10px !important;
  }

  .cms-metric-card .metric-label {
    font-size: 10.5px !important;
  }

  .cms-metric-card .metric-value {
    font-size: 16px !important;
    margin-top: 4px !important;
  }

  .cms-story-row-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 10px !important;
    padding: 16px 14px !important;
    background: rgba(255, 255, 255, 0.025) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    margin-bottom: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .cms-story-row-card .cms-story-thumb {
    width: 54px !important;
    height: 54px !important;
    margin: 0 auto !important;
    flex-shrink: 0 !important;
    border-radius: 12px !important;
  }

  .cms-story-row-card .cms-story-details {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 6px !important;
  }

  .cms-story-row-card .cms-story-title {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    text-align: center !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    margin: 2px 0 6px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    color: #ffffff !important;
  }

  .cms-story-row-card .cms-story-meta-tags {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 4px !important;
  }

  .cms-story-row-card > div:last-child {
    width: 100% !important;
    display: flex !important;
    gap: 10px !important;
    margin-top: 6px !important;
    box-sizing: border-box !important;
  }

  .cms-story-row-card > div:last-child .btn {
    flex: 1 !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
  }

  .cms-editor-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }

  .cms-live-phone-preview {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    position: static !important;
    height: 480px !important;
    border-radius: 24px !important;
    border-width: 6px !important;
  }

  /* Admin Manage Tracks (Listening Gym) Mobile Overhaul */
  #admin-tab-listening {
    padding: 14px 10px !important;
    box-sizing: border-box !important;
  }

  .admin-track-card,
  #admin-tab-listening .cms-story-row-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 10px !important;
    padding: 16px 14px !important;
    background: rgba(255, 255, 255, 0.025) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    margin-bottom: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .admin-track-thumb,
  #admin-tab-listening .cms-story-thumb {
    width: 56px !important;
    height: 56px !important;
    margin: 0 auto 4px auto !important;
    flex-shrink: 0 !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .admin-track-details,
  #admin-tab-listening .cms-story-details {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 4px !important;
    margin: 0 auto !important;
  }

  .admin-track-title,
  #admin-tab-listening .cms-story-title,
  #admin-tab-listening h4 {
    display: block !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    text-align: center !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    margin: 2px auto 4px auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
    color: #ffffff !important;
  }

  .admin-track-artist,
  #admin-tab-listening p {
    display: block !important;
    text-align: center !important;
    font-size: 13px !important;
    color: var(--text-muted) !important;
    margin: 0 auto 6px auto !important;
    width: 100% !important;
  }

  .admin-track-meta,
  #admin-tab-listening .cms-story-meta-tags {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 auto 4px auto !important;
  }

  .admin-track-actions,
  #admin-tab-listening .cms-story-row-card > div:last-child {
    width: 100% !important;
    display: flex !important;
    gap: 10px !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 6px !important;
    box-sizing: border-box !important;
  }

  .admin-track-actions .btn,
  #admin-tab-listening .cms-story-row-card .btn {
    flex: 1 !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
  }

  /* Admin Manage Sentences (Dictionary CMS) Mobile Overhaul */
  #admin-tab-dict {
    padding: 14px 10px !important;
    box-sizing: border-box !important;
  }

  #dict-subpage-sentences {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #sentence-word-search {
    width: 100% !important;
    height: 44px !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
  }

  #sentence-word-dropdown {
    max-height: 240px !important;
    z-index: 9999 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .dict-sentence-pair-row,
  [class*="dict-ex-row-"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
    margin-bottom: 12px !important;
    background: rgba(255, 255, 255, 0.025) !important;
    padding: 12px 10px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-sizing: border-box !important;
  }

  .dict-sentence-pair-row > div,
  [class*="dict-ex-row-"] > div {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .dict-sentence-pair-row > button,
  [class*="dict-ex-row-"] > button:last-child {
    width: 100% !important;
    height: 36px !important;
    margin-top: 4px !important;
    align-self: center !important;
    border-radius: 8px !important;
  }

  #sentence-meanings-list .glass-card {
    padding: 12px !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
  }

  #admin-tab-dict .cms-editor-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }

  #admin-tab-dict .cms-preview-column {
    width: 100% !important;
    margin-top: 10px !important;
    box-sizing: border-box !important;
  }

  #admin-tab-dict .cms-phone-mockup {
    position: static !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Admin Broadcasts Mobile Overhaul */
  #admin-tab-broadcasts {
    padding: 14px 10px !important;
    box-sizing: border-box !important;
  }

  .broadcast-compose-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin-bottom: 20px !important;
  }

  #admin-tab-broadcasts .glass-card {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 16px 14px !important;
  }

  #broadcast-preview-card {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #preview-title {
    max-width: 100% !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  #admin-broadcasts-tbody tr {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 12px 10px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  #admin-broadcasts-tbody td {
    display: block !important;
    padding: 2px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    word-break: break-word !important;
    text-align: left !important;
  }

  #admin-broadcasts-tbody td:last-child {
    margin-top: 6px !important;
  }

  #admin-broadcasts-tbody td:last-child > div {
    justify-content: flex-start !important;
    width: 100% !important;
    display: flex !important;
    gap: 8px !important;
  }

  #admin-broadcasts-tbody td:last-child .btn {
    flex: 1 !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Admin User Feedbacks Mobile Overhaul */
  #admin-tab-feedbacks {
    padding: 14px 10px !important;
    box-sizing: border-box !important;
  }

  #admin-tab-feedbacks .glass-card {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 16px 12px !important;
  }

  #admin-feedbacks-tbody tr {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 14px 12px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 14px !important;
    margin-bottom: 12px !important;
    box-sizing: border-box !important;
  }

  #admin-feedbacks-tbody td {
    display: block !important;
    padding: 2px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    word-break: break-word !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }

  #admin-feedbacks-tbody td:nth-child(1) {
    font-size: 11px !important;
  }

  #admin-feedbacks-tbody td:nth-child(2) {
    font-size: 13px !important;
    font-weight: 600 !important;
  }

  #admin-feedbacks-tbody td:nth-child(3) {
    font-size: 13px !important;
    line-height: 1.4 !important;
    background: rgba(0, 0, 0, 0.15) !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
    margin: 4px 0 !important;
    text-decoration: none !important;
  }

  #admin-feedbacks-tbody td:last-child {
    margin-top: 8px !important;
    display: flex !important;
    gap: 8px !important;
    width: 100% !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
  }

  #admin-feedbacks-tbody td:last-child .btn {
    flex: 1 !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    border-radius: 8px !important;
    margin-right: 0 !important;
  }

  .admin-table-wrapper {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Modals */
  .modal-card,
  .modal-content {
    width: 94vw !important;
    max-width: 600px !important;
    max-height: 90vh !important;
    padding: 20px 16px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
  }

  /* --- 📖 Mobile Story Reader Modal & Controls --- */
  .reader-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    background: rgba(6, 11, 19, 0.88) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    z-index: 2000 !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    display: none;
    justify-content: center !important;
    align-items: center !important;
    overflow: hidden !important;
  }

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

  .reader-container {
    width: 100% !important;
    height: calc(100dvh - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    border-radius: 18px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .reader-header {
    padding: 12px 14px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    position: relative !important;
  }

  .reader-title-wrap {
    flex: 1 1 auto !important;
    padding-right: 42px !important;
  }

  .reader-title-wrap h3 {
    font-size: 17px !important;
    line-height: 1.25 !important;
    margin-bottom: 2px !important;
  }

  .btn-close-reader,
  #close-reader {
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 100 !important;
    cursor: pointer !important;
  }

  .reader-controls {
    width: 100% !important;
    margin: 0 !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  .theme-selector {
    gap: 10px !important;
  }

  .theme-selector .theme-btn {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    cursor: pointer !important;
  }

  .reader-body {
    padding: 14px 12px !important;
    flex: 1 !important;
    overflow-y: auto !important;
  }

  .reader-text {
    line-height: 1.65 !important;
  }

  .reader-sidebar {
    display: none !important;
  }

  /* Mobile Context Vocabulary Bottom Popover Sheet */
  .mobile-vocab-popup {
    position: absolute !important;
    bottom: 60px !important;
    left: 10px !important;
    right: 10px !important;
    background: rgba(13, 21, 39, 0.96) !important;
    border: 1px solid rgba(100, 255, 218, 0.4) !important;
    border-radius: 20px !important;
    padding: 16px 18px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(100, 255, 218, 0.2) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    z-index: 1000 !important;
    display: none;
    animation: slideUpPopup 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .mobile-vocab-popup.active {
    display: block !important;
  }

  .mobile-vocab-close {
    position: absolute !important;
    top: 12px !important;
    right: 14px !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    font-size: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
  }

  /* Theme-aware Mobile Story Reader Close Button & Vocabulary Popover */
  .reader-theme-sepia .btn-close-reader,
  .reader-theme-sepia #close-reader {
    background: rgba(67, 52, 34, 0.12) !important;
    border: 1px solid rgba(67, 52, 34, 0.25) !important;
    color: #433422 !important;
  }

  .reader-theme-sepia .mobile-vocab-popup {
    background: #fcf8f2 !important;
    border: 1px solid rgba(67, 52, 34, 0.25) !important;
    box-shadow: 0 16px 40px rgba(67, 52, 34, 0.25) !important;
    color: #433422 !important;
  }

  .reader-theme-sepia .mobile-vocab-popup .vocab-term {
    color: #8c531b !important;
  }

  .reader-theme-sepia .mobile-vocab-popup .vocab-pos {
    color: #a06325 !important;
  }

  .reader-theme-sepia .mobile-vocab-popup .vocab-definition {
    color: #433422 !important;
  }

  .reader-theme-sepia .mobile-vocab-popup .vocab-ex-label {
    color: #7a5c3e !important;
  }

  .reader-theme-sepia .mobile-vocab-popup .vocab-example {
    background: rgba(67, 52, 34, 0.08) !important;
    color: #5c4a37 !important;
    border-left-color: #965c28 !important;
  }

  .reader-theme-sepia .mobile-vocab-close {
    background: rgba(67, 52, 34, 0.12) !important;
    border: 1px solid rgba(67, 52, 34, 0.25) !important;
    color: #433422 !important;
  }

  .reader-theme-sea .btn-close-reader,
  .reader-theme-sea #close-reader {
    background: rgba(0, 180, 216, 0.18) !important;
    border: 1px solid rgba(0, 180, 216, 0.35) !important;
    color: #64ffda !important;
  }

  .reader-theme-sea .mobile-vocab-popup {
    background: rgba(9, 19, 35, 0.96) !important;
    border: 1px solid rgba(0, 180, 216, 0.4) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(0, 180, 216, 0.2) !important;
  }

  .reader-theme-sea .mobile-vocab-close {
    background: rgba(0, 180, 216, 0.15) !important;
    border: 1px solid rgba(0, 180, 216, 0.3) !important;
    color: #00b4d8 !important;
  }

  .reader-theme-midnight .btn-close-reader,
  .reader-theme-midnight #close-reader {
    background: rgba(56, 189, 248, 0.18) !important;
    border: 1px solid rgba(56, 189, 248, 0.35) !important;
    color: #38bdf8 !important;
  }

  .reader-theme-midnight .mobile-vocab-popup {
    background: rgba(15, 23, 42, 0.96) !important;
    border: 1px solid rgba(56, 189, 248, 0.4) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(56, 189, 248, 0.2) !important;
  }

  .reader-theme-midnight .mobile-vocab-close {
    background: rgba(56, 189, 248, 0.15) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    color: #38bdf8 !important;
  }

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



  /* --- 1. Search Bar & Search Icon Button Mobile Fix --- */
  .dictionary-search-box {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 4px 6px 4px 16px !important;
    border-radius: 30px !important;
    max-width: 100% !important;
  }

  .dictionary-input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    padding-right: 8px !important;
    font-size: 15px !important;
  }

  .dictionary-btn-search,
  button.dictionary-btn-search,
  #dict-btn-search {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(100, 255, 218, 0.3) !important;
  }

  /* --- 2. Dictionary Search Output (Header, IPA, Context Tabs, Cards, Add Button) --- */
  .dict-result-header {
    padding-bottom: 16px !important;
    margin-bottom: 20px !important;
  }

  .dict-result-word-info h2 {
    font-size: 32px !important;
    word-break: break-word !important;
  }

  .dict-ipa-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .btn-dict-speak {
    width: auto !important;
    min-height: 0 !important;
    padding: 6px 14px !important;
    flex-shrink: 0 !important;
  }

  .dict-context-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .dict-context-tab-btn {
    padding: 10px 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .dict-context-tab-btn span {
    display: none !important;
  }

  .dict-meaning-block {
    padding: 16px 12px !important;
    margin-bottom: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .dict-meaning-header {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .dict-meaning-top-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
  }

  .dict-meaning-def {
    width: 100% !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    color: #ffffff !important;
    word-break: break-word !important;
  }

  .btn-add-meaning-wordbook,
  button.btn-add-meaning-wordbook {
    width: auto !important;
    min-width: 68px !important;
    max-width: 90px !important;
    min-height: 32px !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
    box-sizing: border-box !important;
  }

  .dict-sentence-item {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  /* --- 🎵 Mobile Tracks Catalog & Music Practice Studio Optimization --- */
  .listening-catalog-container {
    padding: 0 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .tracks-hud-bar {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 14px 12px !important;
    border-radius: 18px !important;
  }

  .tracks-hud-left-controls,
  .tracks-hud-bar .stories-search-wrapper,
  .tracks-hud-bar .sort-select-wrapper {
    width: 100% !important;
    margin: 0 !important;
  }

  .listening-practice-container {
    padding: 0 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .listening-studio-layout {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    width: 100% !important;
  }

  .listening-left-studio {
    padding: 16px 14px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    position: relative !important;
    top: auto !important;
    align-self: stretch !important;
  }

  .studio-media-stage {
    margin-bottom: 14px !important;
    overflow: hidden !important;
    padding-top: 4px !important;
  }

  .vinyl-container {
    width: 160px !important;
    height: 160px !important;
  }

  .studio-album-cover {
    width: 140px !important;
    height: 140px !important;
    border-radius: 14px !important;
  }

  .vinyl-disc {
    width: 140px !important;
    height: 140px !important;
    top: 10px !important;
    right: -15px !important;
  }

  .vinyl-container.playing .vinyl-disc {
    right: -28px !important;
  }

  .groove-1 {
    width: 110px !important;
    height: 110px !important;
  }

  .groove-2 {
    width: 75px !important;
    height: 75px !important;
  }

  .vinyl-center-label {
    width: 48px !important;
    height: 48px !important;
  }

  .studio-track-title {
    font-size: 18px !important;
  }

  .studio-track-artist {
    font-size: 13px !important;
    margin-bottom: 8px !important;
  }

  .studio-player-deck {
    padding: 12px 10px !important;
    border-radius: 14px !important;
  }

  .studio-seeker-row {
    gap: 8px !important;
    margin-bottom: 12px !important;
  }

  .studio-controls-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  .audio-ctrl-btn {
    padding: 8px 12px !important;
    font-size: 12px !important;
    height: 38px !important;
    border-radius: 20px !important;
  }

  .studio-play-btn {
    padding: 8px 18px !important;
    font-size: 13px !important;
    height: 40px !important;
    border-radius: 22px !important;
  }

  .studio-speed-wrapper {
    width: 100% !important;
    justify-content: center !important;
    margin-top: 4px !important;
  }

  .studio-speed-select {
    height: 34px !important;
    width: 80px !important;
    font-size: 12px !important;
    text-align: center !important;
  }

  .listening-right-studio {
    padding: 18px 14px !important;
    border-radius: 18px !important;
    min-height: auto !important;
  }

  .karaoke-header-row {
    margin-bottom: 14px !important;
    padding-bottom: 12px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .karaoke-title {
    font-size: 17px !important;
  }

  .karaoke-lyric-paper {
    padding: 16px 10px !important;
    font-size: 15px !important;
    line-height: 2.1 !important;
    max-height: none !important;
    overflow: visible !important;
    border-radius: 14px !important;
    text-align: center !important;
  }

  .karaoke-lyric-paper .lyric-line {
    margin-bottom: 12px !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
  }

  /* Prevent browser input zoom on mobile touch focus */
  .lyric-blank-input,
  .blank-input {
    font-size: 16px !important;
    width: clamp(75px, 25vw, 115px) !important;
    min-width: 65px !important;
    max-width: 120px !important;
    height: 36px !important;
    padding: 2px 6px !important;
    margin: 2px 3px !important;
    border-radius: 6px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  .karaoke-action-deck {
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .karaoke-btn-check {
    width: 100% !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    min-height: 44px !important;
    border-radius: 24px !important;
  }

  .karaoke-action-sub-group {
    display: flex !important;
    gap: 8px !important;
    width: 100% !important;
    flex-direction: row !important;
  }

  .karaoke-btn-sub {
    flex: 1 !important;
    padding: 10px 4px !important;
    font-size: 12px !important;
    min-height: 40px !important;
    border-radius: 20px !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  /* --- Menu Page (#page-menu) Mobile Optimization --- */
  #page-menu {
    padding: 10px 4px 30px 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .menu-welcome-card {
    padding: 20px 16px !important;
    border-radius: 20px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

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

  .menu-greeting {
    font-size: 26px !important;
    line-height: 1.25 !important;
    margin: 8px 0 !important;
  }

  .menu-subtitle {
    font-size: 13.5px !important;
    line-height: 1.45 !important;
    white-space: normal !important;
    height: auto !important;
    margin: 4px 0 10px 0 !important;
  }

  /* Active Streak Glowing Mobile Card */
  .menu-streak-card {
    min-height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 14px 18px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.16) 0%, rgba(217, 119, 6, 0.08) 100%) !important;
    border: 1.5px solid rgba(245, 158, 11, 0.35) !important;
    box-shadow: 0 6px 22px rgba(245, 158, 11, 0.15) !important;
    box-sizing: border-box !important;
  }

  .menu-streak-card .streak-icon {
    font-size: 34px !important;
    margin-bottom: 0 !important;
    filter: drop-shadow(0 0 12px rgba(245, 158, 11, 0.6)) !important;
    animation: floatStreak 2.5s ease-in-out infinite !important;
  }

  .menu-streak-card .streak-info {
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }

  .menu-streak-card .streak-val {
    font-size: 22px !important;
    font-weight: 850 !important;
    color: #fbbf24 !important;
    line-height: 1.1 !important;
  }

  .menu-streak-card .streak-lbl {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
  }

  /* Word of the Day Glassmorphic Mobile Card */
  .word-of-the-day-card {
    position: relative !important;
    padding: 20px 16px 18px 16px !important;
    border-radius: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    flex: none !important;
    background: linear-gradient(135deg, rgba(22, 34, 63, 0.95) 0%, rgba(10, 25, 47, 0.95) 100%) !important;
    border: 1.5px solid rgba(100, 255, 218, 0.3) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4) !important;
    box-sizing: border-box !important;
    margin-top: 4px !important;
  }

  .wotd-badge {
    display: inline-block !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--color-teal, #64ffda) !important;
    background: transparent !important;
    border: 1.5px solid currentColor !important;
    padding: 3px 10px !important;
    border-radius: 30px !important;
    margin-bottom: 8px !important;
  }

  .wotd-corner-actions {
    position: absolute !important;
    right: 14px !important;
    top: 14px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    z-index: 10 !important;
  }

  .btn-wotd-speaker {
    width: 34px !important;
    height: 34px !important;
    font-size: 15px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 50% !important;
  }

  .wotd-header-row {
    margin-top: 4px !important;
    width: 100% !important;
  }

  .wotd-word-line {
    display: flex !important;
    align-items: baseline !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
  }

  .wotd-term {
    font-size: 26px !important;
    font-weight: 850 !important;
    color: #ffffff !important;
    letter-spacing: -0.02em !important;
  }

  .wotd-ipa {
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.6) !important;
  }

  .wotd-def {
    font-size: 14px !important;
    line-height: 1.45 !important;
    color: #e2e8f0 !important;
    margin: 10px 0 !important;
  }

  .wotd-example-box {
    padding: 10px 14px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border-left: 3px solid #64ffda !important;
    margin-bottom: 14px !important;
  }

  .ex-en {
    font-size: 13px !important;
    color: var(--text-secondary) !important;
  }

  .wotd-actions {
    display: flex !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .wotd-action-btn {
    flex: 1 !important;
    height: 38px !important;
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 20px !important;
  }

  /* Launchpad Grid Mobile Reflow */
  .menu-launchpad {
    gap: 16px !important;
    width: 100% !important;
  }

  .launchpad-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  .launchpad-card {
    padding: 18px 12px !important;
    min-height: 160px !important;
    border-radius: 16px !important;
  }

  .card-icon-wrap {
    width: 52px !important;
    height: 52px !important;
    font-size: 26px !important;
    margin-bottom: 10px !important;
  }

  .card-body h4 {
    font-size: 15px !important;
    margin-bottom: 4px !important;
  }

  .card-body p {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

  .card-action {
    font-size: 12px !important;
    margin-top: 8px !important;
  }

  /* Menu Sidebar & Stats Widgets Mobile */
  .menu-sidebar {
    gap: 16px !important;
    width: 100% !important;
  }

  .menu-stats-card,
  .menu-activity-card,
  .menu-session-card {
    padding: 18px 16px !important;
    min-height: auto !important;
    border-radius: 18px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* CEFR Roadmap Responsive Timeline */
  .cefr-roadmap-container {
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 14px !important;
  }

  .cefr-milestones-track {
    padding: 0 4px !important;
    position: relative !important;
  }

  .cefr-milestone {
    width: 32px !important;
    height: 32px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
  }

  .milestone-tooltip {
    left: 50% !important;
    transform: translateX(-50%) translateY(6px) !important;
    max-width: 220px !important;
    width: max-content !important;
    font-size: 11px !important;
    padding: 8px 12px !important;
    z-index: 100 !important;
  }

  /* Weekly Activity Chart Mobile */
  .activity-chart-wrapper {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .activity-chart-grid {
    height: 130px !important;
    gap: 6px !important;
    align-items: flex-end !important;
  }

  .bar-chart-bar {
    min-width: 12px !important;
    border-radius: 4px 4px 0 0 !important;
  }

  .bar-lbl {
    font-size: 10px !important;
    margin-top: 4px !important;
  }

  /* --- 🃏 Word Practice Studio (#wordbook-view-practice & #page-wordbook) Mobile Optimization --- */
  #page-wordbook {
    padding: 10px 4px 30px 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #wordbook-view-practice {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 4px !important;
    box-sizing: border-box !important;
  }

  /* Practice Submode Switcher Tabs (3-Column Native Mobile Segment Bar) */
  .practice-submode-switcher {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
    padding: 4px !important;
    margin: 0 0 16px 0 !important;
    box-sizing: border-box !important;
    background: rgba(13, 21, 39, 0.85) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.4) !important;
  }

  .practice-mode-btn {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 3px !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    text-align: center !important;
    border-radius: 12px !important;
    gap: 3px !important;
    box-sizing: border-box !important;
    min-height: 52px !important;
  }

  .practice-mode-btn svg {
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0 !important;
  }

  .practice-mode-btn span {
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.15 !important;
    text-align: center !important;
    font-size: 10px !important;
    font-weight: 800 !important;
  }

  .fillblanks-lock-badge {
    font-size: 8px !important;
    padding: 1px 3px !important;
    border-radius: 6px !important;
    display: inline-block !important;
    margin-top: 1px !important;
    margin-left: 0 !important;
  }

  /* Subpanel 1: Flashcards (Basic, Sleek & Cool Mobile Card) */
  #practice-panel-flashcards {
    width: 100% !important;
  }

  #practice-flashcard,
  .holographic-flashcard-wrap {
    min-height: 210px !important;
    width: 100% !important;
    margin: 0 auto 16px auto !important;
    box-sizing: border-box !important;
  }

  .flashcard-inner {
    min-height: 210px !important;
    padding: 16px 14px !important;
    border-radius: 16px !important;
    background: rgba(13, 21, 39, 0.94) !important;
    border: 1px solid rgba(100, 255, 218, 0.2) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4) !important;
    box-sizing: border-box !important;
  }

  .flashcard-front {
    padding: 44px 12px 16px 12px !important;
    min-height: 180px !important;
    gap: 6px !important;
    box-sizing: border-box !important;
    justify-content: flex-start !important;
  }

  .flashcard-back {
    padding: 24px 12px 16px 12px !important;
    min-height: 180px !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    justify-content: center !important;
  }

  .flashcard-front > div:first-child {
    top: 6px !important;
    left: 8px !important;
    right: 8px !important;
  }

  #flashcard-front-def {
    font-size: 15px !important;
    line-height: 1.4 !important;
    margin: 4px 0 0 0 !important;
    font-weight: 700 !important;
    max-width: 100% !important;
    text-align: center !important;
  }

  #flashcard-back-term {
    font-size: 26px !important;
    font-weight: 900 !important;
    letter-spacing: 0.04em !important;
  }

  #flashcard-back-ex {
    font-size: 11.5px !important;
    line-height: 1.35 !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    max-width: 100% !important;
  }

  #flashcard-mastery-stars {
    font-size: 10.5px !important;
  }

  #flashcard-front-pos {
    font-size: 9.5px !important;
    padding: 2px 10px !important;
  }

  .wordbook-audio-btn {
    width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
  }

  /* Subpanel 2: Word Forging Mobile Adjustment (Basic, Sleek & Cool Stage) */
  #practice-panel-forge {
    width: 100% !important;
  }

  #practice-panel-forge .quantum-stage-card {
    padding: 18px 14px !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
  }

  #spelling-pos {
    font-size: 9.5px !important;
    padding: 3px 10px !important;
  }

  #quantum-mastery-status {
    font-size: 11px !important;
  }

  #spelling-definition {
    font-size: 15px !important;
    line-height: 1.4 !important;
    margin-bottom: 16px !important;
    min-height: auto !important;
  }

  #spelling-input {
    font-size: 18px !important;
    padding: 10px !important;
    height: 42px !important;
    border-radius: 10px !important;
    letter-spacing: 0.05em !important;
  }

  #spelling-letter-bank button,
  .spelling-tile {
    width: 36px !important;
    height: 36px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    border-radius: 8px !important;
  }

  /* --- Sleek Mobile Practice Buttons (Flashcards, Word Forge, Fill-in-Blanks) --- */
  #wordbook-view-practice .practice-btn-primary,
  #wordbook-view-practice .practice-btn-secondary,
  #wordbook-view-practice .practice-btn-warning,
  #wordbook-view-practice .practice-btn-danger {
    height: 38px !important;
    min-height: 38px !important;
    padding: 6px 10px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    box-sizing: border-box !important;
  }

  #wordbook-view-practice .practice-btn-primary svg,
  #wordbook-view-practice .practice-btn-secondary svg,
  #wordbook-view-practice .practice-btn-warning svg,
  #wordbook-view-practice .practice-btn-danger svg {
    width: 13px !important;
    height: 13px !important;
    flex-shrink: 0 !important;
  }

  /* Flashcards Dock: 2x2 Grid Layout */
  .flashcard-actions-row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 14px !important;
  }

  .flashcard-actions-row .practice-btn-danger,
  .flashcard-actions-row .practice-btn-primary,
  .flashcard-actions-row .practice-btn-secondary {
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    font-size: 11px !important;
    padding: 6px 8px !important;
    border-radius: 10px !important;
  }

  /* Subpanel 2: Word Forge Workshop */
  #practice-panel-forge {
    width: 100% !important;
  }

  .quantum-stage-card {
    padding: 16px 12px !important;
    border-radius: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #spelling-definition {
    font-size: 14px !important;
    min-height: auto !important;
    margin-bottom: 14px !important;
  }

  #spelling-input {
    font-size: 17px !important;
    padding: 10px !important;
    border-radius: 10px !important;
  }

  #spelling-letter-bank {
    gap: 6px !important;
    justify-content: center !important;
  }

  .letter-tile,
  .letter-chip {
    min-width: 34px !important;
    height: 34px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
  }

  #practice-panel-forge div[style*="display: flex"] {
    display: flex !important;
    flex-direction: row !important;
    gap: 6px !important;
    width: 100% !important;
    margin-top: 14px !important;
  }

  /* Subpanel 3: Fill-in-Blanks Workshop */
  #practice-panel-fillblanks {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .fillblanks-stage-card {
    padding: 16px 12px !important;
    border-radius: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .fillblanks-header-row {
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
    padding-bottom: 10px !important;
  }

  .fillblanks-header-title {
    font-size: 15px !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .fillblanks-subtitle {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  .fillblanks-reset-btn {
    padding: 4px 10px !important;
    font-size: 11px !important;
    height: 32px !important;
    min-height: 32px !important;
    border-radius: 8px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }

  .sentence-fill-item {
    padding: 12px 10px !important;
    border-radius: 12px !important;
    background: rgba(13, 21, 39, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .sentence-fill-text {
    font-size: 13px !important;
    line-height: 1.55 !important;
  }

  .fillblanks-actions-row {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 14px !important;
  }

  .fillblanks-actions-row .practice-btn-primary {
    flex: 1.4 !important;
    height: 38px !important;
    min-height: 38px !important;
    font-size: 11px !important;
    padding: 6px 8px !important;
    white-space: nowrap !important;
  }

  .fillblanks-actions-row .practice-btn-secondary {
    flex: 1 !important;
    height: 38px !important;
    min-height: 38px !important;
    font-size: 11px !important;
    padding: 6px 8px !important;
    white-space: nowrap !important;
  }

  .fill-blank-input,
  .blank-input {
    font-size: 16px !important;
    min-width: 65px !important;
    max-width: 110px !important;
    height: 36px !important;
    padding: 4px 6px !important;
    border-radius: 8px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
}

/* --- Small Mobile Phones (<= 600px) --- */
@media (max-width: 600px) {
  .stories-grid,
  .listening-song-grid,
  .dashboard-stats-grid,
  .launchpad-grid {
    grid-template-columns: 1fr !important;
  }

  h1, .hero-title, .menu-greeting {
    font-size: 1.8rem !important;
    line-height: 1.25 !important;
  }

  h2, .section-title {
    font-size: 1.4rem !important;
  }

  .btn,
  .practice-btn-primary,
  .practice-btn-secondary,
  .btn-block,
  .modal-card .btn {
    width: 100% !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
  }

  .user-info-group {
    gap: 6px !important;
  }
  .username-mini {
    display: none !important;
  }

  /* --- 🏆 Mobile Scoreboard & 3D Podium Optimization --- */
  .scoreboard-container {
    margin: 10px auto 40px auto !important;
    padding: 0 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .scoreboard-card-wrap {
    padding: 16px 10px !important;
    border-radius: 16px !important;
  }

  .scoreboard-hero {
    padding: 16px 0 !important;
  }

  .scoreboard-hero h2 {
    font-size: 1.6rem !important;
    margin-bottom: 8px !important;
  }

  /* Scaled 3D Champion Podium for Phone Screens */
  .scoreboard-podium-wrapper {
    padding: 24px 6px 16px 6px !important;
    gap: 6px !important;
    margin: 10px 0 24px 0 !important;
    border-radius: 16px !important;
  }

  .podium-item {
    max-width: 110px !important;
  }

  .podium-crown {
    font-size: 20px !important;
    margin-bottom: -4px !important;
  }

  .podium-avatar-ring {
    width: 52px !important;
    height: 52px !important;
    padding: 2px !important;
  }

  .podium-item-rank-1 .podium-avatar-ring {
    width: 68px !important;
    height: 68px !important;
  }

  .podium-username {
    font-size: 11px !important;
    max-width: 75px !important;
  }

  .podium-item-rank-1 .podium-username {
    font-size: 13px !important;
  }

  .podium-title-tag {
    font-size: 9px !important;
    padding: 1px 6px !important;
  }

  .podium-xp {
    font-size: 11px !important;
  }

  .podium-number {
    font-size: 20px !important;
  }

  .podium-item-rank-1 .podium-pedestal { height: 90px !important; }
  .podium-item-rank-2 .podium-pedestal { height: 70px !important; }
  .podium-item-rank-3 .podium-pedestal { height: 55px !important; }

  /* Responsive Leaderboard Table Rows (Ranks 4th, 5th, 6th...) */
  .scoreboard-header-row {
    grid-template-columns: 36px 44px 1fr auto !important;
    padding: 8px 10px !important;
    font-size: 10px !important;
    letter-spacing: 0.03em !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
  }

  .scoreboard-header-row span {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .scoreboard-row-item {
    grid-template-columns: 36px 44px 1fr auto !important;
    padding: 11px 12px !important;
    border-radius: 14px !important;
    margin-bottom: 6px !important;
    background: rgba(13, 21, 39, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    align-items: center !important;
  }

  .scoreboard-row-item.current-user {
    background: rgba(100, 255, 218, 0.08) !important;
    border: 1px solid rgba(100, 255, 218, 0.3) !important;
    border-left: 4px solid var(--color-teal, #64ffda) !important;
    padding-left: 10px !important;
  }

  .scoreboard-rank {
    font-size: 14px !important;
    font-weight: 800 !important;
    text-align: center !important;
  }

  .rank-trend-badge {
    font-size: 9.5px !important;
    padding: 2px 5px !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .scoreboard-user-info {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    overflow: hidden !important;
    min-width: 0 !important;
  }

  .scoreboard-avatar-wrap {
    width: 36px !important;
    height: 36px !important;
    flex-shrink: 0 !important;
    margin-right: 6px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  .scoreboard-avatar {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
  }

  .scoreboard-username {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: #ffffff !important;
  }

  .scoreboard-level {
    font-size: 9px !important;
    padding: 2px 5px !important;
    border-radius: 6px !important;
    font-weight: 800 !important;
    flex-shrink: 0 !important;
  }

  .scoreboard-xp-value {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: var(--color-teal, #64ffda) !important;
    white-space: nowrap !important;
    text-align: right !important;
  }

  /* Mobile Toast & Popup Notification Adjustments (Daily Reward, Theme Preview, Alerts) */
  .toast-msg {
    bottom: 24px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: calc(100vw - 32px) !important;
    max-width: 390px !important;
    padding: 12px 18px !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    text-align: center !important;
    border-radius: 16px !important;
    background: rgba(13, 21, 39, 0.94) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid var(--color-teal, #64ffda) !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5), 0 0 20px rgba(100, 255, 218, 0.25) !important;
    z-index: 999999 !important;
    animation: mobileToastBounce 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  }

  .toast-msg.error {
    border-color: #ef4444 !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5), 0 0 20px rgba(239, 68, 68, 0.35) !important;
  }

  @keyframes mobileToastBounce {
    from {
      opacity: 0;
      transform: translate(-50%, 25px) scale(0.94);
    }
    to {
      opacity: 1;
      transform: translate(-50%, 0) scale(1);
    }
  }

  /* --- 🚀 Mobile GPU Hardware Acceleration --- */
  .scrolly-card,
  .about-stage-card,
  .ecosystem-stage-slide,
  .feature-card,
  .scrolly-slide,
  .hero-content,
  .hero-image,
  .podium-item,
  .scroll-reveal {
    will-change: transform, opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform-style: preserve-3d;
  }

  /* --- 🏠 Mobile Home Page & Scrolly Experience Optimization --- */
  body.logged-in #page-home,
  body:not(.logged-in) #page-home {
    margin: 0 !important;
    width: 100% !important;
    padding: 16px 8px 36px 8px !important;
  }

  .scrolly-container {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    position: relative !important;
    overflow: visible !important;
  }

  .scrolly-sticky {
    position: relative !important;
    top: 0 !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 36px !important;
  }

  /* Hide progress bar, dots, scroll indicators, and ambient glow on mobile for clean natural vertical reading flow */
  .scrolly-progress-bar,
  .scrolly-dots,
  .scroll-indicator,
  .scrolly-ambient-glow {
    display: none !important;
  }

  /* Render all scrolly slides vertically in natural reading order without animations on mobile */
  .scrolly-slide,
  .scrolly-slide:not(.active),
  .scrolly-slide.active {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
    pointer-events: auto !important;
    z-index: 1 !important;
    margin-bottom: 36px !important;
  }

  .scrolly-slide.slide-hero .hero-content,
  .scrolly-slide.slide-hero .hero-image,
  .scrolly-slide.slide-hero:not(.active) .hero-content,
  .scrolly-slide.slide-hero:not(.active) .hero-image,
  .scrolly-card,
  .scrolly-card>*,
  .scrolly-slide .scrolly-card>*,
  .scrolly-slide:not(.active) .scrolly-card>*,
  .scrolly-slide.active .scrolly-card>* {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }

  .scrolly-split-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .scrolly-card-wrap,
  .scrolly-feature-preview {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .scrolly-card {
    padding: 20px 16px !important;
    border-radius: 18px !important;
    margin-bottom: 0 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
  }

  .scrolly-feature-preview .mock-widget {
    margin-top: 0 !important;
    border-radius: 18px !important;
  }

  .scrolly-card h2 {
    font-size: 1.5rem !important;
    line-height: 1.25 !important;
    margin-bottom: 12px !important;
  }

  .scrolly-card p {
    font-size: 14px !important;
    line-height: 1.55 !important;
    margin-bottom: 20px !important;
  }

  .hero h1 {
    font-size: 1.8rem !important;
    line-height: 1.2 !important;
    margin-bottom: 14px !important;
  }

  .hero-desc {
    font-size: 14.5px !important;
    line-height: 1.5 !important;
    margin-bottom: 24px !important;
    max-width: 100% !important;
  }

  .scrolly-dots {
    right: 10px !important;
    gap: 10px !important;
  }

  .scrolly-dot {
    width: 6px !important;
    height: 6px !important;
  }

  .scrolly-dot.active {
    height: 18px !important;
  }

  .feature-card {
    padding: 24px 18px !important;
    border-radius: 18px !important;
  }

  .feature-card h3 {
    font-size: 18px !important;
    margin-bottom: 8px !important;
  }

  .feature-card p {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
  }

  .scroll-indicator {
    margin-top: 16px !important;
  }

  /* Scaled Hero Circle Art & Animated Terminal Preview for Phone Screens */
  .hero-circle-art {
    width: 240px !important;
    height: 240px !important;
  }

  .hero-dashboard-preview {
    width: 88% !important;
    padding: 14px 16px !important;
    font-size: 12px !important;
  }

  .scrolly-feature-preview .mock-reader-preview,
  .scrolly-feature-preview .mock-player-preview,
  .scrolly-feature-preview .mock-dict-preview {
    width: 100% !important;
    max-width: 320px !important;
    transform: scale(0.9) !important;
    transform-origin: top center !important;
  }

  /* --- 🌐 Mobile Ecosystem Page Optimization --- */
  body.logged-in #page-ecosystem,
  body:not(.logged-in) #page-ecosystem {
    margin: 0 !important;
    width: 100% !important;
    padding: 16px 8px 36px 8px !important;
  }

  .ecosystem-odyssey-container {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    position: relative !important;
    overflow: visible !important;
  }

  .ecosystem-odyssey-sticky {
    position: relative !important;
    top: 0 !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
  }

  /* Hide left control bar, timeline, and ambient aura on mobile for clean natural vertical reading flow */
  .ecosystem-left-controls,
  .ecosystem-timeline-nav,
  .ecosystem-ambient-aura {
    display: none !important;
  }

  .ecosystem-main-layout {
    flex-direction: column !important;
    gap: 24px !important;
    width: 100% !important;
    padding: 0 !important;
  }

  .ecosystem-right-slides {
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
  }

  .ecosystem-stage-wrapper {
    height: auto !important;
    min-height: auto !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 40px !important;
  }

  /* Render all ecosystem stage slides vertically in natural reading order without animations */
  .ecosystem-stage-slide,
  .ecosystem-stage-slide:not(.active),
  .ecosystem-stage-slide.active {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
    pointer-events: auto !important;
    z-index: 1 !important;
    margin-bottom: 40px !important;
  }

  .discord-dual-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .discord-info-column {
    order: 1 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .discord-embed-column {
    order: 2 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 12px !important;
  }

  .creators-card-row {
    flex-direction: column !important;
    gap: 12px !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .creator-card {
    max-width: 100% !important;
    padding: 16px 14px !important;
  }

  /* --- 🏛️ Mobile About Us Page Optimization --- */
  .about-hero {
    padding: 16px 0 !important;
  }

  .about-hero h1 {
    font-size: 1.8rem !important;
    line-height: 1.25 !important;
    margin-bottom: 12px !important;
  }

  .about-hero p {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  body.logged-in #page-about,
  body:not(.logged-in) #page-about {
    margin: 0 !important;
    width: 100% !important;
    padding: 16px 8px 36px 8px !important;
  }

  .about-odyssey-container,
  .about-odyssey-container.has-4-stages {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    position: relative !important;
    overflow: visible !important;
  }

  .about-odyssey-sticky {
    position: relative !important;
    top: 0 !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
  }

  /* Disable Timeline Nav, Ambient Aura & Stage Arrows on Mobile for Clean Natural Flow */
  .about-timeline-nav,
  .stage-nav-btn,
  .about-ambient-aura,
  .about-mobile-swipe-hint {
    display: none !important;
  }

  /* Render all stage slides vertically in natural reading order without animations */
  .about-stage-slide:not(#about-stage-feedback),
  .about-stage-slide.active:not(#about-stage-feedback) {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
    pointer-events: auto !important;
    z-index: 1 !important;
    margin-bottom: 28px !important;
  }

  /* Guest users (who do not have accounts) must NEVER see the Feedback section */
  #about-stage-feedback {
    display: none !important;
  }

  #about-stage-feedback.user-feedback-visible {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
    pointer-events: auto !important;
    z-index: 1 !important;
    margin-bottom: 28px !important;
  }

  .about-stage-card {
    padding: 20px 14px !important;
    border-radius: 20px !important;
    max-height: none !important;
    overflow-y: visible !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Mobile Philosophy Grid Spacing */
  .philosophy-stage-card .manifesto-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
  }

  /* Mobile Creators Card Grid Optimization (Single Column Full Width) */
  .creators-card-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
  }

  .creators-synergy-badge,
  .partners-synergy-badge,
  .philosophy-synergy-badge {
    order: -1 !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    margin: 0 auto 16px auto !important;
    padding: 7px 18px !important;
    border-radius: 20px !important;
    width: fit-content !important;
  }

  .creators-synergy-badge {
    margin: 0 auto 0 auto !important;
  }

  .creators-synergy-badge .synergy-text,
  .partners-synergy-badge .synergy-text,
  .philosophy-synergy-badge .synergy-text {
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 11.5px !important;
    letter-spacing: 0.08em !important;
  }

  .creators-synergy-badge .synergy-dash,
  .partners-synergy-badge .synergy-dash,
  .philosophy-synergy-dash {
    width: 8px !important;
    height: 2px !important;
    margin: 0 4px !important;
  }

  .creator-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px 14px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
  }

  .creator-avatar-wrap {
    width: 96px !important;
    height: 96px !important;
  }

  .creator-bio {
    font-size: 12px !important;
    line-height: 1.5 !important;
    margin: 10px 0 !important;
  }

  /* Mobile Partners & Sponsors Grid Optimization (Single Column Full Width) */
  .sponsors-rich-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
  }

  .sponsor-card {
    width: 100% !important;
    padding: 16px 14px !important;
    gap: 12px !important;
    box-sizing: border-box !important;
  }

  /* Mobile Touch Swipe Gesture Indicator for About Us Page */
  .about-mobile-swipe-hint {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    position: absolute !important;
    bottom: 12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: rgba(13, 21, 39, 0.88) !important;
    border: 1px solid rgba(100, 255, 218, 0.35) !important;
    color: var(--color-teal) !important;
    padding: 5px 14px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    z-index: 25 !important;
    pointer-events: none !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45) !important;
    animation: swipePulse 2.5s infinite ease-in-out !important;
  }

  @keyframes swipePulse {
    0%, 100% { opacity: 0.85; transform: translateX(-50%) scale(1); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.05); }
  }
}

/* Floating Bottom-Right Style Preview Popup */
.theme-preview-popup {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  left: auto !important;
  z-index: 99999 !important;
  padding: 16px 20px !important;
  border-radius: 18px !important;
  background: rgba(13, 21, 39, 0.88) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid var(--border-glass-hover, rgba(100, 255, 218, 0.3)) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), 0 0 25px var(--shadow-teal, rgba(100, 255, 218, 0.2)) !important;
  animation: popupSlideUp 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-width: 380px;
  width: calc(100vw - 48px);
}

@keyframes popupSlideUp {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.theme-preview-popup-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.theme-preview-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.theme-preview-icon {
  font-size: 20px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.theme-preview-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.theme-preview-title {
  font-weight: 750;
  font-size: 13.5px;
  color: #ffffff;
}

.theme-preview-subtitle {
  font-size: 12px;
  color: var(--text-secondary);
}

.theme-preview-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.theme-preview-actions .btn-sm {
  padding: 7px 16px !important;
  font-size: 12px !important;
  border-radius: 20px !important;
}

/* Red Cancel Button for Profile Preview Popup (All Themes) */
#btn-popup-cancel,
.theme-preview-actions #btn-popup-cancel {
  background: rgba(239, 68, 68, 0.15) !important;
  border: 1px solid rgba(239, 68, 68, 0.5) !important;
  color: #ef4444 !important;
  box-shadow: 0 2px 10px rgba(239, 68, 68, 0.2) !important;
  transition: all 0.2s ease !important;
}

#btn-popup-cancel:hover,
.theme-preview-actions #btn-popup-cancel:hover {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4) !important;
}

.theme-warm-sepia #btn-popup-cancel,
.theme-warm-sepia .theme-preview-actions #btn-popup-cancel {
  background: rgba(220, 38, 38, 0.12) !important;
  border: 1.5px solid #dc2626 !important;
  color: #dc2626 !important;
}

.theme-warm-sepia #btn-popup-cancel:hover,
.theme-warm-sepia .theme-preview-actions #btn-popup-cancel:hover {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
}

@media (max-width: 768px) {
  .theme-preview-popup {
    bottom: 20px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: calc(100vw - 32px) !important;
    max-width: 390px !important;
    padding: 14px 16px !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
    animation: mobileToastBounce 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  }
}

/* ==========================================
   NOTIFICATION CARD & FRIEND REQUEST STYLES
   ========================================== */
.notif-card {
  padding: 16px 18px;
  border-left: 3.5px solid var(--color-teal);
  cursor: pointer;
  position: relative;
  border-radius: 16px;
  background: rgba(13, 21, 39, 0.55);
  backdrop-filter: blur(16px);
  margin-bottom: 12px;
  transition: all 0.25s ease;
  box-sizing: border-box;
  width: 100%;
}

.notif-card.unread {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

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

.notif-header-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.notif-card-title {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
}

.notif-card-title.unread-title {
  color: #ffffff;
}

.notif-card-date {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.notif-sender-info {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 10px 0;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.notif-sender-name {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notif-sender-email {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notif-card-body {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.45;
  margin-bottom: 12px;
}

.notif-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  gap: 10px;
}

.notif-action-btns {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.notif-btn-accept {
  padding: 6px 16px;
  font-size: 11.5px;
  font-weight: 700;
  color: #0d1527;
  background: var(--color-teal, #64ffda);
  border: 1px solid var(--color-teal, #64ffda);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.notif-btn-accept:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(100, 255, 218, 0.35);
}

.notif-btn-decline {
  padding: 6px 16px;
  font-size: 11.5px;
  font-weight: 700;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.notif-btn-decline:hover {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4);
  transform: translateY(-1px);
}

.notif-btn-delete {
  background: none;
  border: none;
  font-size: 14px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s, transform 0.2s;
  padding: 4px 8px;
  border-radius: 8px;
}

.notif-btn-delete:hover {
  opacity: 1;
  transform: scale(1.15);
}

@media (max-width: 768px) {
  .notif-card {
    padding: 14px;
  }

  .notif-card-header {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .notif-header-title-wrap {
    width: 100% !important;
    justify-content: space-between !important;
  }

  .notif-card-date {
    font-size: 10.5px !important;
  }
}

/* ==========================================
   MY FRIENDS LIST & MOBILE RESPONSIVENESS
   ========================================== */
.my-friend-row-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: 8px;
  transition: all 0.2s ease;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
}

.my-friend-row-card.is-me {
  background: rgba(0, 180, 216, 0.12);
  border: 1px solid rgba(0, 180, 216, 0.4);
}

.my-friend-info-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.my-friend-rank {
  font-size: 15px;
  font-weight: 800;
  color: #64ffda;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.my-friend-rank.is-me-rank {
  color: var(--color-teal);
}

.my-friend-avatar {
  width: 40px !important;
  height: 40px !important;
  flex-shrink: 0 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
}

.my-friend-text-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.my-friend-name {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.my-friend-you-badge {
  font-size: 10.5px;
  background: rgba(100, 255, 218, 0.2);
  color: #64ffda;
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 600;
  flex-shrink: 0;
}

.my-friend-meta {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.my-friend-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.my-friend-btn-cheer {
  padding: 6px 10px;
  font-size: 11px;
  background: rgba(100, 255, 218, 0.1);
  color: #64ffda;
  border: 1px solid rgba(100, 255, 218, 0.2);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  width: auto;
  height: auto;
}

.my-friend-btn-cheer:hover {
  background: rgba(100, 255, 218, 0.25);
  transform: translateY(-1px);
}

.my-friend-btn-challenge {
  padding: 6px 10px;
  font-size: 11px;
  background: rgba(255, 215, 0, 0.1);
  color: #ffd700;
  border: 1px solid rgba(255, 215, 0, 0.2);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  width: auto;
  height: auto;
}

.my-friend-btn-challenge:hover {
  background: rgba(255, 215, 0, 0.25);
  transform: translateY(-1px);
}

.my-friend-btn-view {
  padding: 6px 14px !important;
  font-size: 11.5px !important;
  border-radius: 12px !important;
  width: auto !important;
  height: auto !important;
}

@media (max-width: 768px) {
  .my-friend-row-card {
    padding: 10px 12px !important;
    gap: 8px !important;
  }

  .my-friend-info-left {
    gap: 8px !important;
  }

  .my-friend-rank {
    font-size: 13.5px !important;
    width: 20px !important;
  }

  .my-friend-avatar {
    width: 34px !important;
    height: 34px !important;
  }

  .my-friend-name {
    font-size: 13px !important;
  }

  .my-friend-meta {
    font-size: 10.5px !important;
  }

  .my-friend-actions {
    gap: 5px !important;
  }

  .my-friend-btn-cheer,
  .my-friend-btn-challenge {
    padding: 4px 8px !important;
    font-size: 10.5px !important;
    border-radius: 10px !important;
  }

  .my-friend-btn-view {
    padding: 5px 10px !important;
    font-size: 11px !important;
    border-radius: 10px !important;
  }
}

/* ==========================================
   THEME-ADAPTIVE EMPTY DECK BADGE & ICON RING
   ========================================== */
.empty-deck-badge-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 14px !important;
  border-radius: 20px !important;
  background: rgba(100, 255, 218, 0.08) !important;
  border: 1px solid var(--color-teal, #64ffda) !important;
  color: var(--color-teal, #64ffda) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 20px !important;
  box-shadow: 0 0 15px rgba(100, 255, 218, 0.15) !important;
  transition: all 0.3s ease !important;
}

.empty-deck-icon-ring {
  width: 68px !important;
  height: 68px !important;
  margin: 0 auto 20px auto !important;
  border-radius: 50% !important;
  background: rgba(100, 255, 218, 0.08) !important;
  border: 1px solid var(--color-teal, #64ffda) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 0 25px rgba(100, 255, 218, 0.2) !important;
  position: relative !important;
  color: var(--color-teal, #64ffda) !important;
  transition: all 0.3s ease !important;
}

.empty-deck-icon-ring svg {
  stroke: var(--color-teal, #64ffda) !important;
  transition: stroke 0.3s ease !important;
}

/* Theme 1: Cyberpunk */
.theme-cyberpunk .empty-deck-badge-tag {
  background: rgba(0, 242, 254, 0.1) !important;
  border-color: #00f2fe !important;
  color: #00f2fe !important;
  box-shadow: 0 0 15px rgba(0, 242, 254, 0.3) !important;
}

.theme-cyberpunk .empty-deck-icon-ring {
  background: rgba(0, 242, 254, 0.1) !important;
  border-color: #00f2fe !important;
  color: #00f2fe !important;
  box-shadow: 0 0 25px rgba(0, 242, 254, 0.35) !important;
}

.theme-cyberpunk .empty-deck-icon-ring svg {
  stroke: #00f2fe !important;
}

/* Theme 2: Matrix */
.theme-matrix .empty-deck-badge-tag {
  background: rgba(34, 197, 94, 0.1) !important;
  border-color: #22c55e !important;
  color: #22c55e !important;
  box-shadow: 0 0 15px rgba(34, 197, 94, 0.3) !important;
}

.theme-matrix .empty-deck-icon-ring {
  background: rgba(34, 197, 94, 0.1) !important;
  border-color: #22c55e !important;
  color: #22c55e !important;
  box-shadow: 0 0 25px rgba(34, 197, 94, 0.35) !important;
}

.theme-matrix .empty-deck-icon-ring svg {
  stroke: #22c55e !important;
}

/* Theme 3: Cosmic Emerald */
.theme-cosmic-emerald .empty-deck-badge-tag {
  background: rgba(16, 185, 129, 0.1) !important;
  border-color: #10b981 !important;
  color: #10b981 !important;
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.3) !important;
}

.theme-cosmic-emerald .empty-deck-icon-ring {
  background: rgba(16, 185, 129, 0.1) !important;
  border-color: #10b981 !important;
  color: #10b981 !important;
  box-shadow: 0 0 25px rgba(16, 185, 129, 0.35) !important;
}

.theme-cosmic-emerald .empty-deck-icon-ring svg {
  stroke: #10b981 !important;
}

/* Theme 4: Void Nebula */
.theme-void-nebula .empty-deck-badge-tag {
  background: rgba(168, 85, 247, 0.12) !important;
  border-color: #a855f7 !important;
  color: #c084fc !important;
  box-shadow: 0 0 15px rgba(168, 85, 247, 0.35) !important;
}

.theme-void-nebula .empty-deck-icon-ring {
  background: rgba(168, 85, 247, 0.12) !important;
  border-color: #a855f7 !important;
  color: #c084fc !important;
  box-shadow: 0 0 25px rgba(168, 85, 247, 0.4) !important;
}

.theme-void-nebula .empty-deck-icon-ring svg {
  stroke: #c084fc !important;
}

/* Theme 5: Neon Sunset */
.theme-neon-sunset .empty-deck-badge-tag {
  background: rgba(255, 126, 95, 0.1) !important;
  border-color: #ff7e5f !important;
  color: #ff7e5f !important;
  box-shadow: 0 0 15px rgba(255, 126, 95, 0.3) !important;
}

.theme-neon-sunset .empty-deck-icon-ring {
  background: rgba(255, 126, 95, 0.1) !important;
  border-color: #ff7e5f !important;
  color: #ff7e5f !important;
  box-shadow: 0 0 25px rgba(255, 126, 95, 0.35) !important;
}

.theme-neon-sunset .empty-deck-icon-ring svg {
  stroke: #ff7e5f !important;
}

/* Theme 6: Sakura Pink */
.theme-sakura-pink .empty-deck-badge-tag {
  background: rgba(236, 72, 153, 0.1) !important;
  border-color: #ec4899 !important;
  color: #ec4899 !important;
  box-shadow: 0 0 15px rgba(236, 72, 153, 0.3) !important;
}

.theme-sakura-pink .empty-deck-icon-ring {
  background: rgba(236, 72, 153, 0.1) !important;
  border-color: #ec4899 !important;
  color: #ec4899 !important;
  box-shadow: 0 0 25px rgba(236, 72, 153, 0.35) !important;
}

.theme-sakura-pink .empty-deck-icon-ring svg {
  stroke: #ec4899 !important;
}

/* Theme 7: Rose Neon */
.theme-rose-neon .empty-deck-badge-tag {
  background: rgba(244, 63, 94, 0.1) !important;
  border-color: #f43f5e !important;
  color: #f43f5e !important;
  box-shadow: 0 0 15px rgba(244, 63, 94, 0.3) !important;
}

.theme-rose-neon .empty-deck-icon-ring {
  background: rgba(244, 63, 94, 0.1) !important;
  border-color: #f43f5e !important;
  color: #f43f5e !important;
  box-shadow: 0 0 25px rgba(244, 63, 94, 0.35) !important;
}

.theme-rose-neon .empty-deck-icon-ring svg {
  stroke: #f43f5e !important;
}

/* Theme 8: Warm Sepia */
.theme-warm-sepia .empty-deck-badge-tag {
  background: rgba(217, 119, 6, 0.1) !important;
  border-color: #d97706 !important;
  color: #d97706 !important;
  box-shadow: 0 0 15px rgba(217, 119, 6, 0.3) !important;
}

.theme-warm-sepia .empty-deck-icon-ring {
  background: rgba(217, 119, 6, 0.1) !important;
  border-color: #d97706 !important;
  color: #d97706 !important;
  box-shadow: 0 0 25px rgba(217, 119, 6, 0.35) !important;
}

.theme-warm-sepia .empty-deck-icon-ring svg {
  stroke: #d97706 !important;
}

/* ==========================================
   THEME-ADAPTIVE COMING SOON BADGE TAG
   ========================================== */
.coming-soon-badge-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--color-teal, #64ffda) !important;
  background: rgba(100, 255, 218, 0.08) !important;
  border: 1px solid var(--color-teal, #64ffda) !important;
  padding: 4px 12px !important;
  border-radius: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  box-shadow: 0 0 12px rgba(100, 255, 218, 0.15) !important;
  transition: all 0.3s ease !important;
}

/* Theme 1: Cyberpunk */
.theme-cyberpunk .coming-soon-badge-tag {
  background: rgba(0, 242, 254, 0.1) !important;
  border-color: #00f2fe !important;
  color: #00f2fe !important;
  box-shadow: 0 0 15px rgba(0, 242, 254, 0.3) !important;
}

/* Theme 2: Matrix */
.theme-matrix .coming-soon-badge-tag {
  background: rgba(34, 197, 94, 0.1) !important;
  border-color: #22c55e !important;
  color: #22c55e !important;
  box-shadow: 0 0 15px rgba(34, 197, 94, 0.3) !important;
}

/* Theme 3: Cosmic Emerald */
.theme-cosmic-emerald .coming-soon-badge-tag {
  background: rgba(16, 185, 129, 0.1) !important;
  border-color: #10b981 !important;
  color: #10b981 !important;
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.3) !important;
}

/* Theme 4: Void Nebula */
.theme-void-nebula .coming-soon-badge-tag {
  background: rgba(168, 85, 247, 0.12) !important;
  border-color: #a855f7 !important;
  color: #c084fc !important;
  box-shadow: 0 0 15px rgba(168, 85, 247, 0.35) !important;
}

/* Theme 5: Neon Sunset */
.theme-neon-sunset .coming-soon-badge-tag {
  background: rgba(255, 126, 95, 0.1) !important;
  border-color: #ff7e5f !important;
  color: #ff7e5f !important;
  box-shadow: 0 0 15px rgba(255, 126, 95, 0.3) !important;
}

/* Theme 6: Sakura Pink */
.theme-sakura-pink .coming-soon-badge-tag {
  background: rgba(236, 72, 153, 0.1) !important;
  border-color: #ec4899 !important;
  color: #ec4899 !important;
  box-shadow: 0 0 15px rgba(236, 72, 153, 0.3) !important;
}

/* Theme 7: Rose Neon */
.theme-rose-neon .coming-soon-badge-tag {
  background: rgba(244, 63, 94, 0.1) !important;
  border-color: #f43f5e !important;
  color: #f43f5e !important;
  box-shadow: 0 0 15px rgba(244, 63, 94, 0.3) !important;
}

/* Theme 8: Warm Sepia */
.theme-warm-sepia .coming-soon-badge-tag {
  background: rgba(217, 119, 6, 0.1) !important;
  border-color: #d97706 !important;
  color: #d97706 !important;
  box-shadow: 0 0 15px rgba(217, 119, 6, 0.3) !important;
}

/* ==========================================
   REVOLUTIONARY BROADCAST & TARGETING SYSTEM STYLES
   ========================================== */
.broadcast-audience-selector {
  display: flex;
  gap: 8px;
  background: rgba(0, 0, 0, 0.2);
  padding: 4px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.audience-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.22s ease;
}

.audience-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}

.audience-btn.active {
  background: linear-gradient(135deg, rgba(0, 180, 216, 0.2), rgba(100, 255, 218, 0.15));
  border: 1px solid rgba(100, 255, 218, 0.4);
  color: #64ffda;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(0, 180, 216, 0.15);
}

.audience-btn[data-audience="EVERYONE"].active {
  background: linear-gradient(135deg, rgba(0, 180, 216, 0.25), rgba(0, 119, 182, 0.25));
  border-color: #00b4d8;
  color: #00b4d8;
  box-shadow: 0 0 12px rgba(0, 180, 216, 0.25);
}

.audience-btn[data-audience="ADMINS"].active {
  background: linear-gradient(135deg, rgba(255, 183, 3, 0.2), rgba(247, 127, 0, 0.2));
  border-color: #ffb703;
  color: #ffb703;
  box-shadow: 0 0 12px rgba(255, 183, 3, 0.25);
}

.broadcast-user-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(18, 30, 58, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
}

.broadcast-user-item:hover {
  background: rgba(18, 30, 58, 0.95);
  border-color: rgba(100, 255, 218, 0.25);
}

.broadcast-user-item.selected {
  background: rgba(0, 180, 216, 0.12);
  border-color: rgba(0, 180, 216, 0.4);
}

.broadcast-user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.broadcast-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.broadcast-user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.broadcast-user-email {
  font-size: 11px;
  color: var(--text-muted);
}

/* ==========================================
   ACHIEVEMENT UNLOCKED & CONFETTI POPUP STYLES
   ========================================== */
#achievement-unlocked-banner {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(-120px) scale(0.9);
  z-index: 999999;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  background: rgba(13, 21, 39, 0.95);
  border: 1.5px solid rgba(255, 183, 3, 0.5);
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(255, 183, 3, 0.35);
  backdrop-filter: blur(16px);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  opacity: 0;
  pointer-events: none;
  width: max-content;
  max-width: 90vw;
}

#achievement-unlocked-banner.active {
  transform: translateX(-50%) translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

#achievement-unlocked-banner.tier-bronze {
  border-color: rgba(205, 127, 50, 0.6);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 25px rgba(205, 127, 50, 0.3);
}

#achievement-unlocked-banner.tier-silver {
  border-color: rgba(192, 192, 192, 0.6);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 25px rgba(192, 192, 192, 0.3);
}

#achievement-unlocked-banner.tier-gold {
  border-color: rgba(255, 183, 3, 0.6);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(255, 183, 3, 0.35);
}

#achievement-unlocked-banner.tier-diamond {
  border-color: rgba(0, 180, 216, 0.6);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(0, 180, 216, 0.35);
}

#achievement-unlocked-banner.tier-mythic {
  border-color: rgba(224, 170, 255, 0.7);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 35px rgba(224, 170, 255, 0.45);
}

.ach-banner-icon {
  font-size: 36px;
  line-height: 1;
  animation: achIconTrophyBounce 1.2s ease infinite alternate;
}

@keyframes achIconTrophyBounce {
  0% { transform: scale(1) rotate(-6deg); }
  100% { transform: scale(1.18) rotate(6deg); }
}

.ach-banner-tag {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #ffb703;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.ach-banner-title {
  font-size: 16px;
  font-weight: 850;
  color: #ffffff;
  margin-bottom: 2px;
}

.ach-banner-desc {
  font-size: 12px;
  color: var(--text-secondary);
}

.ach-banner-xp {
  color: #64ffda;
  font-weight: 800;
}

/* ==========================================================================
   LEXIS MENTOR COMMAND CENTER STYLES
   ========================================================================== */

/* Hero Command Center Banner */
.mentor-hero-banner {
  position: relative;
  overflow: hidden;
  padding: 32px 36px;
  border-radius: 24px;
  background: var(--bg-glass);
  border: 1px solid rgba(168, 85, 247, 0.25);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  margin-bottom: 28px;
}

.mentor-hero-ambient-glow {
  position: absolute;
  top: -40%;
  right: -10%;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.2) 0%, rgba(0, 242, 254, 0.1) 45%, transparent 70%);
  pointer-events: none;
  filter: blur(40px);
}

.mentor-hero-content {
  position: relative;
  z-index: 2;
}

.mentor-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent !important;
  color: var(--color-teal);
  border: 1px solid rgba(100, 255, 218, 0.35);
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.mentor-badge .pulse-dot {
  background: var(--color-teal);
  box-shadow: 0 0 10px var(--color-teal);
}

.pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-teal);
  box-shadow: 0 0 10px var(--color-teal);
  animation: mentorPulse 2s infinite;
}

@keyframes mentorPulse {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

/* Theme Color Overrides for Mentor Command Center & Student Hub Badge Tags */
.theme-void-nebula .mentor-badge {
  background: transparent !important;
  color: #c084fc !important;
  border-color: rgba(192, 132, 252, 0.4) !important;
}
.theme-void-nebula .mentor-badge .pulse-dot {
  background: #c084fc !important;
  box-shadow: 0 0 10px #c084fc !important;
}

.theme-cosmic-emerald .mentor-badge {
  background: transparent !important;
  color: #10b981 !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
}
.theme-cosmic-emerald .mentor-badge .pulse-dot {
  background: #10b981 !important;
  box-shadow: 0 0 10px #10b981 !important;
}

.theme-cyberpunk .mentor-badge {
  background: transparent !important;
  color: #00f2fe !important;
  border-color: rgba(0, 242, 254, 0.4) !important;
}
.theme-cyberpunk .mentor-badge .pulse-dot {
  background: #00f2fe !important;
  box-shadow: 0 0 10px #00f2fe !important;
}

.theme-matrix .mentor-badge {
  background: transparent !important;
  color: #22c55e !important;
  border-color: rgba(34, 197, 94, 0.4) !important;
}
.theme-matrix .mentor-badge .pulse-dot {
  background: #22c55e !important;
  box-shadow: 0 0 10px #22c55e !important;
}

.theme-neon-sunset .mentor-badge {
  background: transparent !important;
  color: #f97316 !important;
  border-color: rgba(249, 115, 22, 0.4) !important;
}
.theme-neon-sunset .mentor-badge .pulse-dot {
  background: #f97316 !important;
  box-shadow: 0 0 10px #f97316 !important;
}

.theme-sakura-pink .mentor-badge {
  background: transparent !important;
  color: #ec4899 !important;
  border-color: rgba(236, 72, 153, 0.4) !important;
}
.theme-sakura-pink .mentor-badge .pulse-dot {
  background: #ec4899 !important;
  box-shadow: 0 0 10px #ec4899 !important;
}

.theme-rose-neon .mentor-badge {
  background: transparent !important;
  color: #ff2a85 !important;
  border-color: rgba(255, 42, 133, 0.4) !important;
}
.theme-rose-neon .mentor-badge .pulse-dot {
  background: #ff2a85 !important;
  box-shadow: 0 0 10px #ff2a85 !important;
}

.theme-warm-sepia .mentor-badge {
  background: transparent !important;
  color: #d97706 !important;
  border-color: rgba(180, 83, 9, 0.4) !important;
}
.theme-warm-sepia .mentor-badge .pulse-dot {
  background: #d97706 !important;
  box-shadow: 0 0 10px #d97706 !important;
}

.mentor-title {
  font-size: 2rem;
  font-weight: 800;
  color: white;
  margin: 10px 0 6px 0;
  letter-spacing: -0.02em;
}

.mentor-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  max-width: 620px;
  line-height: 1.5;
}

/* Metric Cards Grid */
.mentor-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.mentor-stat-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  border-radius: 18px;
  background: rgba(13, 21, 39, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.mentor-stat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(168, 85, 247, 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.stat-icon-bg {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.stat-icon-bg.cyan { background: rgba(0, 242, 254, 0.12); border: 1px solid rgba(0, 242, 254, 0.3); }
.stat-icon-bg.gold { background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.3); }
.stat-icon-bg.green { background: rgba(16, 185, 129, 0.12); border: 1px solid rgba(16, 185, 129, 0.3); }
.stat-icon-bg.purple { background: rgba(168, 85, 247, 0.12); border: 1px solid rgba(168, 85, 247, 0.3); }

.stat-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.stat-value {
  font-size: 24px;
  font-weight: 800;
  margin-top: 2px;
  line-height: 1.1;
}

.stat-value.text-cyan { color: #00f2fe; text-shadow: 0 0 12px rgba(0, 242, 254, 0.3); }
.stat-value.text-gold { color: #f59e0b; text-shadow: 0 0 12px rgba(245, 158, 11, 0.3); }
.stat-value.text-green { color: #10b981; text-shadow: 0 0 12px rgba(16, 185, 129, 0.3); }
.stat-value.text-purple { color: #c084fc; text-shadow: 0 0 12px rgba(192, 132, 252, 0.3); }

.stat-subtext {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* Mentor Pill Navigation Tabs */
.mentor-tabs-bar {
  display: flex;
  gap: 8px;
  background: rgba(0, 0, 0, 0.3);
  padding: 6px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.mentor-tab-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 12px;
  background: transparent;
  color: var(--text-muted);
  font-size: 13.5px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mentor-tab-pill:hover {
  color: white;
  background: rgba(255, 255, 255, 0.05);
}

.mentor-tab-pill.active {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.25) 0%, rgba(0, 242, 254, 0.15) 100%);
  color: white;
  border: 1px solid rgba(168, 85, 247, 0.4);
  box-shadow: 0 4px 15px rgba(168, 85, 247, 0.2);
}

.pill-badge {
  background: rgba(255, 255, 255, 0.12);
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
}

.mentor-tab-pill.active .pill-badge {
  background: #c084fc;
  color: #080f1d;
}

/* View Switcher Controls */
.view-toggle-group {
  background: rgba(0, 0, 0, 0.3);
  padding: 4px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  gap: 4px;
}

.view-toggle-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.view-toggle-btn:hover {
  color: white;
  background: rgba(255, 255, 255, 0.05);
}

.view-toggle-btn.active {
  background: rgba(168, 85, 247, 0.25);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.4);
}

/* Student Roster Cards Grid View */
/* Student Roster Cards Grid View */
.students-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 18px;
}

.student-card {
  padding: 22px 20px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(13, 21, 39, 0.78) 0%, rgba(8, 14, 27, 0.88) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.student-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 242, 254, 0.4);
  box-shadow: 0 12px 36px rgba(0, 242, 254, 0.15);
}

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

.student-avatar-frame {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  padding: 3px;
  flex-shrink: 0;
  position: relative;
}

.student-avatar-frame img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.student-card-name {
  font-size: 16px;
  font-weight: 800;
  color: white;
  line-height: 1.2;
}

.student-card-email {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 2px;
  word-break: break-all;
}

.student-card-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  background: rgba(0, 0, 0, 0.35);
  padding: 12px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  margin-bottom: 16px;
}

.student-stat-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.student-stat-pill .lbl {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.student-stat-pill .val {
  font-size: 14px;
  font-weight: 800;
  color: white;
  margin-top: 3px;
}

/* Action Buttons Container (Single Equal Row) */
.student-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 14px;
  width: 100%;
}

.btn-student-profile {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 10px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 12px;
  border: 1.5px solid rgba(168, 85, 247, 0.4);
  background: rgba(168, 85, 247, 0.12);
  color: #c084fc;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.15);
  white-space: nowrap;
}

.btn-student-profile:hover {
  background: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%);
  border-color: #a855f7;
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(168, 85, 247, 0.45);
  transform: translateY(-2px);
}

.btn-student-assign {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 10px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 12px;
  border: 1.5px solid rgba(0, 242, 254, 0.4);
  background: rgba(0, 242, 254, 0.12);
  color: #00f2fe;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
  box-shadow: 0 4px 14px rgba(0, 242, 254, 0.15);
  white-space: nowrap;
}

.btn-student-assign:hover {
  background: linear-gradient(135deg, #00f2fe 0%, #00b4d8 100%);
  border-color: #00f2fe;
  color: #080f1d;
  box-shadow: 0 6px 20px rgba(0, 242, 254, 0.45);
  transform: translateY(-2px);
}

.btn-student-remove {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  border-radius: 12px;
  border: 1.5px solid rgba(239, 68, 68, 0.45);
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.15);
}

.btn-student-remove:hover {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  border-color: #ef4444;
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.45);
  transform: translateY(-2px);
}

.cefr-badge {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.cefr-badge.a1, .cefr-badge.a2 { background: rgba(16, 185, 129, 0.15); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); }
.cefr-badge.b1, .cefr-badge.b2 { background: rgba(0, 242, 254, 0.15); color: #00f2fe; border: 1px solid rgba(0, 242, 254, 0.3); }
.cefr-badge.c1, .cefr-badge.c2 { background: rgba(168, 85, 247, 0.15); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.3); }

/* Assignment Glass Cards */
.assignment-card {
  padding: 22px;
  border-radius: 20px;
  background: rgba(13, 21, 39, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.assignment-card:hover {
  transform: translateY(-3px);
  border-color: rgba(168, 85, 247, 0.35);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

/* Premium Upgraded Student Assignment Cards Grid */
.assignments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

.assignment-card-v2 {
  position: relative;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(17, 26, 47, 0.85) 0%, rgba(10, 16, 30, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.assignment-card-v2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #00f2fe, #a855f7);
  opacity: 0.65;
  transition: opacity 0.3s ease;
}

.assignment-card-v2:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 242, 254, 0.4);
  box-shadow: 0 16px 36px rgba(0, 242, 254, 0.15);
}

.assignment-card-v2:hover::before {
  opacity: 1;
}

.assignment-card-v2.completed-card {
  border-color: rgba(239, 68, 68, 0.35) !important;
  background: linear-gradient(145deg, rgba(30, 12, 14, 0.85) 0%, rgba(20, 8, 10, 0.95) 100%) !important;
}

.assignment-card-v2.completed-card::before {
  background: linear-gradient(90deg, #ef4444, #f87171) !important;
}

.assignment-card-v2.expired-card {
  border-color: rgba(244, 63, 94, 0.35);
}

.assignment-card-v2.expired-card::before {
  background: linear-gradient(90deg, #f43f5e, #fb7185);
}

/* Header & Tags */
.assignment-v2-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.assignment-type-badge-v2 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.assignment-type-badge-v2.story {
  background: rgba(0, 242, 254, 0.12);
  color: #00f2fe;
  border: 1px solid rgba(0, 242, 254, 0.3);
}

.assignment-type-badge-v2.track {
  background: rgba(236, 72, 153, 0.12);
  color: #ec4899;
  border: 1px solid rgba(236, 72, 153, 0.3);
}

.assignment-type-badge-v2.wordbook {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.assignment-type-badge-v2.custom {
  background: rgba(168, 85, 247, 0.12);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.assignment-urgency-v2 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 30px !important;
  background: transparent !important;
  border: 1.5px solid currentColor !important;
}

.assignment-urgency-v2 .pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor !important;
  box-shadow: 0 0 8px currentColor !important;
}

.assignment-urgency-v2.active {
  color: #10b981 !important;
  border: 1.5px solid #10b981 !important;
  background: transparent !important;
}

.assignment-urgency-v2.active .pulse-dot {
  background: #10b981 !important;
  box-shadow: 0 0 8px #10b981 !important;
}

.assignment-urgency-v2.due-soon {
  color: #f59e0b !important;
}

.assignment-urgency-v2.expired {
  color: #f43f5e !important;
}

.assignment-urgency-v2.completed {
  color: #ef4444 !important;
  border: 1.5px solid #ef4444 !important;
  background: transparent !important;
}

.assignment-urgency-v2.completed .pulse-dot {
  background: #ef4444 !important;
  box-shadow: 0 0 8px #ef4444 !important;
}

/* Card Body */
.assignment-v2-body {
  flex: 1;
}

.assignment-v2-title {
  font-size: 17px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.35;
  margin: 0 0 8px 0;
  letter-spacing: -0.01em;
}

.assignment-v2-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 14px;
  word-break: break-word;
}

.assignment-resource-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(0, 242, 254, 0.05);
  border: 1px solid rgba(0, 242, 254, 0.2);
  margin: 12px 0 16px 0;
  cursor: pointer;
  transition: all 0.25s ease;
  width: 100%;
}

.assignment-resource-card:hover {
  background: rgba(0, 242, 254, 0.12);
  border-color: rgba(0, 242, 254, 0.45);
  transform: translateX(3px);
  box-shadow: 0 4px 18px rgba(0, 242, 254, 0.18);
}

.resource-icon-badge {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.resource-icon-badge.story {
  background: linear-gradient(135deg, rgba(0, 242, 254, 0.25), rgba(79, 172, 254, 0.25));
  color: #00f2fe;
  border: 1px solid rgba(0, 242, 254, 0.35);
}

.resource-icon-badge.track {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.25), rgba(168, 85, 247, 0.25));
  color: #ec4899;
  border: 1px solid rgba(236, 72, 153, 0.35);
}

.resource-icon-badge.wordbook {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(251, 191, 36, 0.25));
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.resource-icon-badge.custom {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.25), rgba(192, 132, 252, 0.25));
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.35);
}

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

.resource-title {
  font-weight: 800;
  font-size: 13.5px;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.resource-subtext {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.resource-arrow {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-teal, #64ffda) !important;
  opacity: 0.85;
  transition: transform 0.2s ease, color 0.2s ease;
}

.assignment-resource-card:hover .resource-arrow {
  transform: translateX(3px);
  opacity: 1;
}

/* Footer & Actions */
.assignment-v2-footer {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.assignment-v2-deadline {
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.assignment-v2-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.btn-start-task-glow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: linear-gradient(135deg, var(--color-teal, #00f2fe) 0%, #00c6ff 100%) !important;
  color: #080f1d !important;
  font-weight: 800 !important;
  font-size: 13.5px !important;
  padding: 9px 22px !important;
  border-radius: 25px !important;
  border: none !important;
  letter-spacing: 0.03em !important;
  box-shadow: 0 4px 18px rgba(0, 242, 254, 0.4), 0 0 12px rgba(0, 242, 254, 0.2) !important;
  transition: all 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  cursor: pointer !important;
}

.btn-start-task-glow:hover {
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow: 0 8px 24px rgba(0, 242, 254, 0.6), 0 0 16px rgba(0, 242, 254, 0.35) !important;
}

/* --- System Theme Adaptive "Done ✓" & "Undo" Buttons --- */
.btn-student-done,
.btn-toggle-done-v2,
.btn-toggle-done-v2.btn-outline {
  margin-left: auto !important;
  border: 1.5px solid var(--color-teal, #64ffda) !important;
  color: var(--color-teal, #64ffda) !important;
  background: transparent !important;
  border-radius: 16px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.btn-student-done:hover,
.btn-toggle-done-v2:hover,
.btn-toggle-done-v2.btn-outline:hover {
  background: var(--color-teal, #64ffda) !important;
  color: #0d1527 !important;
  border-color: var(--color-teal, #64ffda) !important;
  box-shadow: 0 4px 14px rgba(100, 255, 218, 0.35) !important;
}

/* Theme 1: Cyberpunk */
.theme-cyberpunk .btn-outline,
.theme-cyberpunk .btn-student-done,
.theme-cyberpunk .btn-toggle-done-v2,
.theme-cyberpunk .btn-toggle-done-v2.btn-outline {
  border-color: #00f2fe !important;
  color: #00f2fe !important;
  background: rgba(0, 242, 254, 0.08) !important;
}
.theme-cyberpunk .btn-outline:hover,
.theme-cyberpunk .btn-student-done:hover,
.theme-cyberpunk .btn-toggle-done-v2:hover,
.theme-cyberpunk .btn-toggle-done-v2.btn-outline:hover {
  background: #00f2fe !important;
  color: #080f1d !important;
  box-shadow: 0 4px 14px rgba(0, 242, 254, 0.4) !important;
}

/* Theme 2: Matrix */
.theme-matrix .btn-outline,
.theme-matrix .btn-student-done,
.theme-matrix .btn-toggle-done-v2,
.theme-matrix .btn-toggle-done-v2.btn-outline {
  border-color: #22c55e !important;
  color: #22c55e !important;
  background: rgba(34, 197, 94, 0.08) !important;
}
.theme-matrix .btn-outline:hover,
.theme-matrix .btn-student-done:hover,
.theme-matrix .btn-toggle-done-v2:hover,
.theme-matrix .btn-toggle-done-v2.btn-outline:hover {
  background: #22c55e !important;
  color: #05160b !important;
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.4) !important;
}

/* Theme 3: Cosmic Emerald */
.theme-cosmic-emerald .btn-outline,
.theme-cosmic-emerald .btn-student-done,
.theme-cosmic-emerald .btn-toggle-done-v2,
.theme-cosmic-emerald .btn-toggle-done-v2.btn-outline {
  border-color: #10b981 !important;
  color: #10b981 !important;
  background: rgba(16, 185, 129, 0.08) !important;
}
.theme-cosmic-emerald .btn-outline:hover,
.theme-cosmic-emerald .btn-student-done:hover,
.theme-cosmic-emerald .btn-toggle-done-v2:hover,
.theme-cosmic-emerald .btn-toggle-done-v2.btn-outline:hover {
  background: #10b981 !important;
  color: #042f2e !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4) !important;
}

/* Theme 4: Void Nebula */
.theme-void-nebula .btn-outline,
.theme-void-nebula .btn-student-done,
.theme-void-nebula .btn-toggle-done-v2,
.theme-void-nebula .btn-toggle-done-v2.btn-outline {
  border-color: #a855f7 !important;
  color: #c084fc !important;
  background: rgba(168, 85, 247, 0.08) !important;
}
.theme-void-nebula .btn-outline:hover,
.theme-void-nebula .btn-student-done:hover,
.theme-void-nebula .btn-toggle-done-v2:hover,
.theme-void-nebula .btn-toggle-done-v2.btn-outline:hover {
  background: #a855f7 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.4) !important;
}

/* Theme 5: Neon Sunset */
.theme-neon-sunset .btn-outline,
.theme-neon-sunset .btn-student-done,
.theme-neon-sunset .btn-toggle-done-v2,
.theme-neon-sunset .btn-toggle-done-v2.btn-outline {
  border-color: #ff7e5f !important;
  color: #ff7e5f !important;
  background: rgba(255, 126, 95, 0.08) !important;
}
.theme-neon-sunset .btn-outline:hover,
.theme-neon-sunset .btn-student-done:hover,
.theme-neon-sunset .btn-toggle-done-v2:hover,
.theme-neon-sunset .btn-toggle-done-v2.btn-outline:hover {
  background: #ff7e5f !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(255, 126, 95, 0.4) !important;
}

/* Theme 6: Sakura Pink */
.theme-sakura-pink .btn-outline,
.theme-sakura-pink .btn-student-done,
.theme-sakura-pink .btn-toggle-done-v2,
.theme-sakura-pink .btn-toggle-done-v2.btn-outline {
  border-color: #ec4899 !important;
  color: #ec4899 !important;
  background: rgba(236, 72, 153, 0.08) !important;
}
.theme-sakura-pink .btn-outline:hover,
.theme-sakura-pink .btn-student-done:hover,
.theme-sakura-pink .btn-toggle-done-v2:hover,
.theme-sakura-pink .btn-toggle-done-v2.btn-outline:hover {
  background: #ec4899 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(236, 72, 153, 0.4) !important;
}

/* Theme 7: Rose Neon */
.theme-rose-neon .btn-outline,
.theme-rose-neon .btn-student-done,
.theme-rose-neon .btn-toggle-done-v2,
.theme-rose-neon .btn-toggle-done-v2.btn-outline {
  border-color: #f43f5e !important;
  color: #f43f5e !important;
  background: rgba(244, 63, 94, 0.08) !important;
}
.theme-rose-neon .btn-outline:hover,
.theme-rose-neon .btn-student-done:hover,
.theme-rose-neon .btn-toggle-done-v2:hover,
.theme-rose-neon .btn-toggle-done-v2.btn-outline:hover {
  background: #f43f5e !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(244, 63, 94, 0.4) !important;
}

/* Theme 8: Warm Sepia */
.theme-warm-sepia .btn-outline,
.theme-warm-sepia .btn-student-done,
.theme-warm-sepia .btn-toggle-done-v2,
.theme-warm-sepia .btn-toggle-done-v2.btn-outline {
  border-color: #d97706 !important;
  color: #d97706 !important;
  background: rgba(217, 119, 6, 0.08) !important;
}
.theme-warm-sepia .btn-outline:hover,
.theme-warm-sepia .btn-student-done:hover,
.theme-warm-sepia .btn-toggle-done-v2:hover,
.theme-warm-sepia .btn-toggle-done-v2.btn-outline:hover {
  background: #d97706 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.4) !important;
}

/* Sidebar Navigation Theme-Adaptive Scrollbar Colors */
.theme-cyberpunk .navbar::-webkit-scrollbar-thumb { background: rgba(0, 242, 254, 0.4) !important; }
.theme-cyberpunk .navbar::-webkit-scrollbar-thumb:hover { background: rgba(0, 242, 254, 0.75) !important; }
.theme-cyberpunk .navbar { scrollbar-color: rgba(0, 242, 254, 0.4) transparent !important; }

.theme-matrix .navbar::-webkit-scrollbar-thumb { background: rgba(34, 197, 94, 0.4) !important; }
.theme-matrix .navbar::-webkit-scrollbar-thumb:hover { background: rgba(34, 197, 94, 0.75) !important; }
.theme-matrix .navbar { scrollbar-color: rgba(34, 197, 94, 0.4) transparent !important; }

.theme-cosmic-emerald .navbar::-webkit-scrollbar-thumb { background: rgba(16, 185, 129, 0.4) !important; }
.theme-cosmic-emerald .navbar::-webkit-scrollbar-thumb:hover { background: rgba(16, 185, 129, 0.75) !important; }
.theme-cosmic-emerald .navbar { scrollbar-color: rgba(16, 185, 129, 0.4) transparent !important; }

.theme-void-nebula .navbar::-webkit-scrollbar-thumb { background: rgba(168, 85, 247, 0.4) !important; }
.theme-void-nebula .navbar::-webkit-scrollbar-thumb:hover { background: rgba(168, 85, 247, 0.75) !important; }
.theme-void-nebula .navbar { scrollbar-color: rgba(168, 85, 247, 0.4) transparent !important; }

.theme-neon-sunset .navbar::-webkit-scrollbar-thumb { background: rgba(255, 126, 95, 0.4) !important; }
.theme-neon-sunset .navbar::-webkit-scrollbar-thumb:hover { background: rgba(255, 126, 95, 0.75) !important; }
.theme-neon-sunset .navbar { scrollbar-color: rgba(255, 126, 95, 0.4) transparent !important; }

.theme-sakura-pink .navbar::-webkit-scrollbar-thumb { background: rgba(236, 72, 153, 0.4) !important; }
.theme-sakura-pink .navbar::-webkit-scrollbar-thumb:hover { background: rgba(236, 72, 153, 0.75) !important; }
.theme-sakura-pink .navbar { scrollbar-color: rgba(236, 72, 153, 0.4) transparent !important; }

.theme-rose-neon .navbar::-webkit-scrollbar-thumb { background: rgba(244, 63, 94, 0.4) !important; }
.theme-rose-neon .navbar::-webkit-scrollbar-thumb:hover { background: rgba(244, 63, 94, 0.75) !important; }
.theme-rose-neon .navbar { scrollbar-color: rgba(244, 63, 94, 0.4) transparent !important; }

.assignment-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.assignment-type-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.assignment-type-tag.story { background: rgba(0, 242, 254, 0.15); color: #00f2fe; border: 1px solid rgba(0, 242, 254, 0.3); }
.assignment-type-tag.track { background: rgba(236, 72, 153, 0.15); color: #ec4899; border: 1px solid rgba(236, 72, 153, 0.3); }
.assignment-type-tag.wordbook { background: rgba(245, 158, 11, 0.15); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.3); }
.assignment-type-tag.custom { background: rgba(168, 85, 247, 0.15); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.3); }

.assignment-urgency-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
}

.assignment-urgency-badge.active { background: rgba(16, 185, 129, 0.15); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); }
.assignment-urgency-badge.expired { background: rgba(244, 63, 94, 0.15); color: #f43f5e; border: 1px solid rgba(244, 63, 94, 0.3); }
.assignment-urgency-badge.completed { background: rgba(168, 85, 247, 0.15); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.3); }

.assignment-title-text {
  font-size: 16px;
  font-weight: 800;
  color: white;
  line-height: 1.3;
  margin-bottom: 6px;
}

.assignment-progress-wrap {
  margin: 14px 0 16px 0;
}

.assignment-progress-info {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.assignment-progress-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  overflow: hidden;
}

.assignment-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #00f2fe 0%, #c084fc 100%);
  border-radius: 10px;
  transition: width 0.3s ease;
}

/* Panel & Feed Cards for Overview & Broadcasts */
.mentor-panel-card {
  padding: 24px;
  border-radius: 20px;
}

.panel-title {
  font-size: 16px;
  font-weight: 800;
  color: white;
}

.top-learner-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(13, 21, 39, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 10px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.top-learner-row:hover {
  background: rgba(0, 242, 254, 0.04);
  border-color: rgba(0, 242, 254, 0.25);
  transform: translateX(4px);
}

.rank-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
  min-width: 42px;
  text-align: center;
}

.rank-pill.gold {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #f59e0b;
}

.rank-pill.silver {
  background: rgba(148, 163, 184, 0.15);
  border: 1px solid rgba(148, 163, 184, 0.4);
  color: #cbd5e1;
}

.rank-pill.bronze {
  background: rgba(217, 119, 6, 0.15);
  border: 1px solid rgba(217, 119, 6, 0.4);
  color: #f97316;
}

.rank-pill.standard {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
}

.xp-leader-pill {
  background: rgba(0, 242, 254, 0.1);
  border: 1px solid rgba(0, 242, 254, 0.3);
  color: #00f2fe;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.completed-tasks-pill {
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.35);
  color: #c084fc;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

/* Table Roster View Row & Button Actions */
.roster-table-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 14px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.roster-table-row:hover {
  background: rgba(0, 242, 254, 0.04) !important;
}

.btn-table-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 12px;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
  white-space: nowrap;
}

.btn-table-action.profile {
  border: 1.5px solid rgba(168, 85, 247, 0.4);
  background: rgba(168, 85, 247, 0.12);
  color: #c084fc;
  box-shadow: 0 2px 10px rgba(168, 85, 247, 0.15);
}

.btn-table-action.profile:hover {
  background: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%);
  border-color: #a855f7;
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(168, 85, 247, 0.45);
  transform: translateY(-2px);
}

.btn-table-action.assign {
  border: 1.5px solid rgba(0, 242, 254, 0.4);
  background: rgba(0, 242, 254, 0.12);
  color: #00f2fe;
  box-shadow: 0 2px 10px rgba(0, 242, 254, 0.15);
}

.btn-table-action.assign:hover {
  background: linear-gradient(135deg, #00f2fe 0%, #00b4d8 100%);
  border-color: #00f2fe;
  color: #080f1d;
  box-shadow: 0 4px 16px rgba(0, 242, 254, 0.45);
  transform: translateY(-2px);
}

.btn-table-action.remove {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1.5px solid rgba(239, 68, 68, 0.45);
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  font-size: 12px;
  box-shadow: 0 2px 10px rgba(239, 68, 68, 0.15);
}

.btn-table-action.remove:hover {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  border-color: #ef4444;
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.45);
  transform: translateY(-2px);
}

/* Quick Broadcast Preset Buttons */
.btn-preset-chip {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.35);
  color: #c084fc;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
  white-space: nowrap;
}

.btn-preset-chip:hover {
  background: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%);
  border-color: #a855f7;
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(168, 85, 247, 0.45);
  transform: translateY(-2px);
}
.btn-create-assignment-glow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 22px !important;
  border-radius: 30px !important;
  background: linear-gradient(135deg, #00f2fe 0%, #a855f7 100%) !important;
  color: #080f1d !important;
  font-weight: 800 !important;
  font-size: 13.5px !important;
  letter-spacing: 0.02em !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 4px 20px rgba(0, 242, 254, 0.35), 0 0 12px rgba(168, 85, 247, 0.25) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-transform: uppercase;
}

.btn-create-assignment-glow:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 8px 28px rgba(0, 242, 254, 0.55), 0 0 22px rgba(168, 85, 247, 0.45) !important;
  color: #040914 !important;
}

.btn-create-assignment-glow.btn-sm {
  padding: 8px 16px !important;
  font-size: 12px !important;
}

/* ==========================================================================
   Mobile & Tablet Responsiveness for Mentor Command Center (max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
  /* Mentor Hero Header Banner */
  .mentor-hero-banner {
    padding: 22px 18px !important;
    margin-bottom: 20px !important;
    border-radius: 18px !important;
  }
  
  .mentor-hero-content {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 18px !important;
    width: 100% !important;
  }

  .mentor-hero-text {
    max-width: 100% !important;
  }

  .mentor-title {
    font-size: 1.45rem !important;
    line-height: 1.25 !important;
  }

  .mentor-subtitle {
    font-size: 12.5px !important;
  }

  .mentor-hero-actions {
    width: 100% !important;
    margin-left: 0 !important;
    min-width: unset !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .mentor-hero-actions button {
    width: 100% !important;
    justify-content: center !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
  }

  /* Mentor Quick Stats Grid */
  .mentor-stats-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
  }

  .mentor-stat-card {
    padding: 16px 18px !important;
  }

  /* Pill Navigation Bar */
  .mentor-tabs-bar {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    width: 100% !important;
    padding-bottom: 6px !important;
    margin-bottom: 18px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mentor-tabs-bar::-webkit-scrollbar {
    display: none;
  }

  .mentor-tab-pill {
    flex-shrink: 0 !important;
    font-size: 12.5px !important;
    padding: 8px 14px !important;
  }

  /* Class Roster Toolbar & Custom Dropdowns */
  .mentor-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
  }

  .mentor-toolbar > div:first-child {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .mentor-toolbar .form-input,
  .mentor-toolbar .custom-select-wrapper {
    max-width: 100% !important;
    width: 100% !important;
  }

  .mentor-toolbar > div:last-child {
    justify-content: space-between !important;
    width: 100% !important;
  }

  /* Student Roster Card Grid */
  .students-card-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .student-glass-card {
    padding: 18px !important;
  }

  .student-glass-card .student-card-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .student-glass-card .student-card-header > div:last-child {
    align-self: flex-end !important;
  }

  /* Assignments Hub Grid */
  /* Assignments Hub Grid & Filter Toolbar */
  .mentor-assignments-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    margin-bottom: 18px !important;
  }

  .assignment-filter-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .assignment-filter-btn {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 12px !important;
    padding: 7px 14px !important;
    white-space: nowrap !important;
    border-radius: 20px !important;
  }

  .mentor-assignments-toolbar > button {
    width: 100% !important;
    margin-left: 0 !important;
    justify-content: center !important;
    padding: 11px 16px !important;
    font-size: 13.5px !important;
  }

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

  /* Announcements / Notifications 1x2 Matrix Grid & Target Audience Mobile Adaptations */
  .broadcast-matrix-grid,
  #mentor-tab-content-broadcasts > div:first-child {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .user-mailbox-preview-box {
    padding: 16px 14px !important;
  }

  .preview-badge-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  #tab-preview-recipient-badge {
    max-width: 100% !important;
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.4 !important;
  }

  /* Previous Broadcasts / Notifications Log Mobile Adaptations */
  #mentor-broadcasts-history div[style*="margin-bottom: 12px"] > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  #mentor-broadcasts-history div[style*="margin-bottom: 12px"] > div:first-child > div:last-child {
    width: 100% !important;
    justify-content: space-between !important;
  }

  /* Target Audience Buttons (Everyone / Specific Users / Admins Only) Mobile Adaptation */
  .broadcast-audience-selector {
    flex-direction: column !important;
    gap: 6px !important;
    padding: 6px !important;
  }

  .audience-btn {
    width: 100% !important;
    padding: 10px 14px !important;
    justify-content: flex-start !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    border-radius: 10px !important;
  }

  /* Mentor Modals Responsiveness */
  #modal-create-assignment .modal-card,
  #modal-add-class-student .modal-card {
    max-width: 95vw !important;
    padding: 22px 18px !important;
    max-height: 90vh !important;
    border-radius: 18px !important;
  }

  #modal-create-assignment form > div[style*="display: grid"],
  #modal-create-assignment form .grid-2 {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  #modal-create-assignment .form-row {
    margin-bottom: 16px !important;
  }

  /* Top Active Learners Leaderboard Mobile Styling */
  .top-learner-row {
    padding: 12px 14px !important;
  }

  .top-learner-row > div:first-child {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .top-learner-row > div:last-child {
    gap: 6px !important;
  }

  .rank-pill {
    min-width: 36px !important;
    padding: 3px 8px !important;
    font-size: 11px !important;
  }

  .completed-tasks-pill,
  .xp-leader-pill {
    padding: 4px 9px !important;
    font-size: 11.5px !important;
  }
}

@media (max-width: 480px) {
  .mentor-hero-banner {
    padding: 18px 14px !important;
  }

  .mentor-title {
    font-size: 1.3rem !important;
  }

  .student-glass-card .student-stats-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* Top Active Learners Leaderboard Mobile Phone Layout */
  .top-learner-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 12px 14px !important;
  }

  .top-learner-row > div:first-child {
    width: 100% !important;
    justify-content: flex-start !important;
  }

  .top-learner-row > div:last-child {
    width: 100% !important;
    justify-content: space-between !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding-top: 8px !important;
    margin-top: 2px !important;
  }

  /* Menu Page Mobile Phone Enhancements (< 480px) */
  #page-menu .welcome-left a.btn-linkedin-style {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
  }

  #page-menu .proficiency-progress-container {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 14px !important;
  }

  #page-menu .proficiency-stats {
    width: 100% !important;
  }

  #page-menu .prof-stat-row {
    font-size: 12px !important;
    padding: 3px 0 !important;
  }

  #page-menu .launchpad-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  #page-menu .launchpad-card {
    padding: 14px 10px !important;
    min-height: 150px !important;
  }

  #page-menu .card-body p {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
}

/* --- System Theme Adaptive Assignment Filter Buttons --- */
.student-assignment-filter-btn,
.assignment-filter-btn {
  border-radius: 20px !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
  padding: 5px 14px !important;
  transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  background: transparent !important;
}

/* 1. All Tasks Pill -> Adapts to system theme */
.student-assignment-filter-btn[data-sfilter="all"],
.assignment-filter-btn[data-filter="all"] {
  border: 1.5px solid var(--color-teal, #64ffda) !important;
  color: var(--color-teal, #64ffda) !important;
  background: transparent !important;
}

.student-assignment-filter-btn[data-sfilter="all"].active,
.assignment-filter-btn[data-filter="all"].active {
  background: var(--color-teal, #64ffda) !important;
  color: #0d1527 !important;
  border-color: var(--color-teal, #64ffda) !important;
  box-shadow: 0 0 14px rgba(100, 255, 218, 0.35) !important;
}

/* 2. Pending / Active Pill -> Crisp Green */
.student-assignment-filter-btn[data-sfilter="active"],
.assignment-filter-btn[data-filter="active"] {
  border: 1.5px solid #10b981 !important;
  color: #10b981 !important;
  background: transparent !important;
}

.student-assignment-filter-btn[data-sfilter="active"].active,
.assignment-filter-btn[data-filter="active"].active {
  background: #10b981 !important;
  color: #042f2e !important;
  border-color: #10b981 !important;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.4) !important;
}

/* 3. Completed Pill -> Crimson Red */
.student-assignment-filter-btn[data-sfilter="completed"],
.assignment-filter-btn[data-filter="completed"] {
  border: 1.5px solid #ef4444 !important;
  color: #ef4444 !important;
  background: transparent !important;
}

.student-assignment-filter-btn[data-sfilter="completed"].active,
.assignment-filter-btn[data-filter="completed"].active {
  background: #ef4444 !important;
  color: #ffffff !important;
  border-color: #ef4444 !important;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.4) !important;
}

/* 4. Expired Pill -> Amber Gold */
.student-assignment-filter-btn[data-sfilter="expired"],
.assignment-filter-btn[data-filter="expired"] {
  border: 1.5px solid #f59e0b !important;
  color: #f59e0b !important;
  background: transparent !important;
}

.student-assignment-filter-btn[data-sfilter="expired"].active,
.assignment-filter-btn[data-filter="expired"].active {
  background: #f59e0b !important;
  color: #451a03 !important;
  border-color: #f59e0b !important;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.4) !important;
}

/* Theme Adaptations for All Tasks Pill */
.theme-cyberpunk .student-assignment-filter-btn[data-sfilter="all"],
.theme-cyberpunk .assignment-filter-btn[data-filter="all"] {
  border-color: #00f2fe !important;
  color: #00f2fe !important;
}
.theme-cyberpunk .student-assignment-filter-btn[data-sfilter="all"].active,
.theme-cyberpunk .assignment-filter-btn[data-filter="all"].active {
  background: #00f2fe !important;
  color: #080f1d !important;
  border-color: #00f2fe !important;
  box-shadow: 0 0 14px rgba(0, 242, 254, 0.4) !important;
}

.theme-matrix .student-assignment-filter-btn[data-sfilter="all"],
.theme-matrix .assignment-filter-btn[data-filter="all"] {
  border-color: #22c55e !important;
  color: #22c55e !important;
}
.theme-matrix .student-assignment-filter-btn[data-sfilter="all"].active,
.theme-matrix .assignment-filter-btn[data-filter="all"].active {
  background: #22c55e !important;
  color: #05160b !important;
  border-color: #22c55e !important;
  box-shadow: 0 0 14px rgba(34, 197, 94, 0.4) !important;
}

.theme-cosmic-emerald .student-assignment-filter-btn[data-sfilter="all"],
.theme-cosmic-emerald .assignment-filter-btn[data-filter="all"] {
  border-color: #10b981 !important;
  color: #10b981 !important;
}
.theme-cosmic-emerald .student-assignment-filter-btn[data-sfilter="all"].active,
.theme-cosmic-emerald .assignment-filter-btn[data-filter="all"].active {
  background: #10b981 !important;
  color: #042f2e !important;
  border-color: #10b981 !important;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.4) !important;
}

.theme-void-nebula .student-assignment-filter-btn[data-sfilter="all"],
.theme-void-nebula .assignment-filter-btn[data-filter="all"] {
  border-color: #a855f7 !important;
  color: #a855f7 !important;
}
.theme-void-nebula .student-assignment-filter-btn[data-sfilter="all"].active,
.theme-void-nebula .assignment-filter-btn[data-filter="all"].active {
  background: #a855f7 !important;
  color: #ffffff !important;
  border-color: #a855f7 !important;
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.4) !important;
}

.theme-neon-sunset .student-assignment-filter-btn[data-sfilter="all"],
.theme-neon-sunset .assignment-filter-btn[data-filter="all"] {
  border-color: #ff7e5f !important;
  color: #ff7e5f !important;
}
.theme-neon-sunset .student-assignment-filter-btn[data-sfilter="all"].active,
.theme-neon-sunset .assignment-filter-btn[data-filter="all"].active {
  background: #ff7e5f !important;
  color: #ffffff !important;
  border-color: #ff7e5f !important;
  box-shadow: 0 0 14px rgba(255, 126, 95, 0.4) !important;
}

.theme-sakura-pink .student-assignment-filter-btn[data-sfilter="all"],
.theme-sakura-pink .assignment-filter-btn[data-filter="all"] {
  border-color: #ec4899 !important;
  color: #ec4899 !important;
}
.theme-sakura-pink .student-assignment-filter-btn[data-sfilter="all"].active,
.theme-sakura-pink .assignment-filter-btn[data-filter="all"].active {
  background: #ec4899 !important;
  color: #ffffff !important;
  border-color: #ec4899 !important;
  box-shadow: 0 0 14px rgba(236, 72, 153, 0.4) !important;
}

.theme-rose-neon .student-assignment-filter-btn[data-sfilter="all"],
.theme-rose-neon .assignment-filter-btn[data-filter="all"] {
  border-color: #f43f5e !important;
  color: #f43f5e !important;
}
.theme-rose-neon .student-assignment-filter-btn[data-sfilter="all"].active,
.theme-rose-neon .assignment-filter-btn[data-filter="all"].active {
  background: #f43f5e !important;
  color: #ffffff !important;
  border-color: #f43f5e !important;
  box-shadow: 0 0 14px rgba(244, 63, 94, 0.4) !important;
}

.theme-warm-sepia .student-assignment-filter-btn[data-sfilter="all"],
.theme-warm-sepia .assignment-filter-btn[data-filter="all"] {
  border-color: #d97706 !important;
  color: #d97706 !important;
}
.theme-warm-sepia .student-assignment-filter-btn[data-sfilter="all"].active,
.theme-warm-sepia .assignment-filter-btn[data-filter="all"].active {
  background: #d97706 !important;
  color: #ffffff !important;
  border-color: #d97706 !important;
  box-shadow: 0 0 14px rgba(217, 119, 6, 0.4) !important;
}

/* --- System Theme Adaptations for Assigned Tasks Cards --- */
.assignment-mentor-name {
  color: var(--color-teal, #64ffda) !important;
}

.assignment-resource-card {
  border: 1px solid var(--color-teal, rgba(100, 255, 218, 0.3)) !important;
  background: rgba(100, 255, 218, 0.04) !important;
  border-radius: 14px !important;
  transition: all 0.25s ease !important;
}

.assignment-resource-card:hover {
  border-color: var(--color-teal, #64ffda) !important;
  box-shadow: 0 4px 14px rgba(100, 255, 218, 0.15) !important;
}

.btn-start-task-glow {
  background: linear-gradient(135deg, var(--color-teal, #00f2fe) 0%, #4facfe 100%) !important;
  color: #080f1d !important;
  box-shadow: 0 4px 14px rgba(0, 242, 254, 0.35) !important;
  border-radius: 20px !important;
  font-weight: 700 !important;
}

/* Theme 1: Cyberpunk */
.theme-cyberpunk .assignment-card-v2::before {
  background: linear-gradient(90deg, #00f2fe, #4facfe) !important;
}
.theme-cyberpunk .assignment-mentor-name {
  color: #00f2fe !important;
}
.theme-cyberpunk .assignment-resource-card {
  border-color: rgba(0, 242, 254, 0.35) !important;
  background: rgba(0, 242, 254, 0.05) !important;
}
.theme-cyberpunk .btn-start-task-glow {
  background: linear-gradient(135deg, #00f2fe 0%, #00c6ff 100%) !important;
  color: #080f1d !important;
  box-shadow: 0 4px 14px rgba(0, 242, 254, 0.35) !important;
}

/* Theme 2: Matrix */
.theme-matrix .assignment-card-v2::before {
  background: linear-gradient(90deg, #22c55e, #10b981) !important;
}
.theme-matrix .assignment-mentor-name {
  color: #22c55e !important;
}
.theme-matrix .assignment-resource-card {
  border-color: rgba(34, 197, 94, 0.35) !important;
  background: rgba(34, 197, 94, 0.05) !important;
}
.theme-matrix .btn-start-task-glow {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
  color: #05160b !important;
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.35) !important;
}

/* Theme 3: Cosmic Emerald */
.theme-cosmic-emerald .assignment-card-v2::before {
  background: linear-gradient(90deg, #10b981, #06b6d4) !important;
}
.theme-cosmic-emerald .assignment-mentor-name {
  color: #10b981 !important;
}
.theme-cosmic-emerald .assignment-resource-card {
  border-color: rgba(16, 185, 129, 0.35) !important;
  background: rgba(16, 185, 129, 0.05) !important;
}
.theme-cosmic-emerald .btn-start-task-glow {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #042f2e !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
}

/* Theme 4: Void Nebula */
.theme-void-nebula .assignment-card-v2::before {
  background: linear-gradient(90deg, #a855f7, #c084fc) !important;
}
.theme-void-nebula .assignment-mentor-name {
  color: #c084fc !important;
}
.theme-void-nebula .assignment-resource-card {
  border-color: rgba(168, 85, 247, 0.35) !important;
  background: rgba(168, 85, 247, 0.05) !important;
}
.theme-void-nebula .btn-start-task-glow {
  background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.35) !important;
}

/* Theme 5: Neon Sunset */
.theme-neon-sunset .assignment-card-v2::before {
  background: linear-gradient(90deg, #ff7e5f, #f59e0b) !important;
}
.theme-neon-sunset .assignment-mentor-name {
  color: #ff7e5f !important;
}
.theme-neon-sunset .assignment-resource-card {
  border-color: rgba(255, 126, 95, 0.35) !important;
  background: rgba(255, 126, 95, 0.05) !important;
}
.theme-neon-sunset .btn-start-task-glow {
  background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(255, 126, 95, 0.35) !important;
}

/* Theme 6: Sakura Pink */
.theme-sakura-pink .assignment-card-v2::before {
  background: linear-gradient(90deg, #ec4899, #f472b6) !important;
}
.theme-sakura-pink .assignment-mentor-name {
  color: #ec4899 !important;
}
.theme-sakura-pink .assignment-resource-card {
  border-color: rgba(236, 72, 153, 0.35) !important;
  background: rgba(236, 72, 153, 0.05) !important;
}
.theme-sakura-pink .btn-start-task-glow {
  background: linear-gradient(135deg, #ec4899 0%, #db2777 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(236, 72, 153, 0.35) !important;
}

/* Theme 7: Rose Neon */
.theme-rose-neon .assignment-card-v2::before {
  background: linear-gradient(90deg, #f43f5e, #fb7185) !important;
}
.theme-rose-neon .assignment-mentor-name {
  color: #f43f5e !important;
}
.theme-rose-neon .assignment-resource-card {
  border-color: rgba(244, 63, 94, 0.35) !important;
  background: rgba(244, 63, 94, 0.05) !important;
}
.theme-rose-neon .btn-start-task-glow {
  background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(244, 63, 94, 0.35) !important;
}

/* Theme 8: Warm Sepia */
.theme-warm-sepia .assignment-card-v2::before {
  background: linear-gradient(90deg, #d97706, #f59e0b) !important;
}
.theme-warm-sepia .assignment-mentor-name {
  color: #d97706 !important;
}
.theme-warm-sepia .assignment-resource-card {
  border-color: rgba(180, 83, 9, 0.35) !important;
  background: rgba(245, 158, 11, 0.08) !important;
}
.theme-warm-sepia .btn-start-task-glow {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.35) !important;
}

/* --- 🎨 Warm Sepia Theme Overrides for Word Practice (Flash Cards, Word Forging, Fill in Blanks) --- */

/* Subpanel 1: Flash Cards */
.theme-warm-sepia #practice-panel-flashcards .holographic-flashcard-wrap,
.theme-warm-sepia #practice-flashcard,
.theme-warm-sepia #practice-flashcard-inner,
.theme-warm-sepia .flashcard-inner {
  background: #ffffff !important;
  border: 1.5px solid rgba(180, 83, 9, 0.25) !important;
  box-shadow: 0 12px 32px rgba(67, 52, 34, 0.12) !important;
  color: #21150b !important;
}

.theme-warm-sepia .flashcard-front {
  background: #ffffff !important;
  color: #21150b !important;
}

.theme-warm-sepia .flashcard-back {
  background: #fdf6e3 !important;
  color: #21150b !important;
}

.theme-warm-sepia #flashcard-front-def {
  color: #21150b !important;
  font-weight: 700 !important;
}

.theme-warm-sepia #flashcard-back-term {
  color: #21150b !important;
  font-weight: 900 !important;
}

.theme-warm-sepia #flashcard-back-ex {
  background: rgba(217, 119, 6, 0.06) !important;
  color: #5c4a37 !important;
  border-left: 3px solid #d97706 !important;
}

.theme-warm-sepia #flashcard-front-pos,
.theme-warm-sepia #flashcard-back-pos {
  background: rgba(217, 119, 6, 0.12) !important;
  color: #b45309 !important;
  border: 1px solid rgba(217, 119, 6, 0.35) !important;
  font-weight: 800 !important;
}

.theme-warm-sepia #flashcard-mastery-stars {
  color: #d97706 !important;
  font-weight: 800 !important;
}

.theme-warm-sepia #flashcard-progress {
  color: #b45309 !important;
  font-weight: 800 !important;
}

/* Subpanel 2: Word Forging */
.theme-warm-sepia #practice-panel-forge .quantum-stage-card,
.theme-warm-sepia .quantum-stage-card {
  background: #ffffff !important;
  border: 1.5px solid rgba(180, 83, 9, 0.25) !important;
  box-shadow: 0 12px 32px rgba(67, 52, 34, 0.12) !important;
  color: #21150b !important;
}

.theme-warm-sepia #spelling-pos {
  background: rgba(217, 119, 6, 0.12) !important;
  color: #b45309 !important;
  border: 1px solid rgba(217, 119, 6, 0.35) !important;
  font-weight: 800 !important;
}

.theme-warm-sepia #quantum-mastery-status {
  color: #d97706 !important;
  font-weight: 800 !important;
}

.theme-warm-sepia #spelling-definition {
  color: #21150b !important;
  font-weight: 700 !important;
}

.theme-warm-sepia #practice-panel-forge div[style*="background: rgba(10, 25, 47"],
.theme-warm-sepia #practice-panel-forge div[style*="background:rgba(10, 25, 47"] {
  background: #fdf6e3 !important;
  border: 1px solid rgba(180, 83, 9, 0.2) !important;
}

.theme-warm-sepia #spelling-input {
  background: #ffffff !important;
  border: 2px solid #d97706 !important;
  color: #21150b !important;
  box-shadow: 0 2px 8px rgba(67, 52, 34, 0.08) !important;
}

.theme-warm-sepia #spelling-letter-bank button,
.theme-warm-sepia .forging-letter-tile,
.theme-warm-sepia .forging-tile {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
  color: #78350f !important;
  border: 1.5px solid #d97706 !important;
  font-weight: 800 !important;
  box-shadow: 0 3px 8px rgba(180, 83, 9, 0.18) !important;
}

.theme-warm-sepia #spelling-letter-bank button:hover,
.theme-warm-sepia .forging-letter-tile:hover {
  background: #d97706 !important;
  color: #ffffff !important;
}

/* Subpanel 3: Fill in Blanks */
.theme-warm-sepia #practice-panel-fillblanks .fillblanks-stage-card,
.theme-warm-sepia .fillblanks-stage-card {
  background: #ffffff !important;
  border: 1.5px solid rgba(180, 83, 9, 0.25) !important;
  box-shadow: 0 12px 32px rgba(67, 52, 34, 0.12) !important;
  color: #21150b !important;
}

.theme-warm-sepia .fillblanks-header-title {
  color: #21150b !important;
  font-weight: 850 !important;
}

.theme-warm-sepia .fillblanks-count-badge {
  background: rgba(217, 119, 6, 0.12) !important;
  color: #b45309 !important;
  border: 1px solid rgba(217, 119, 6, 0.35) !important;
}

.theme-warm-sepia .fillblanks-subtitle {
  color: #5c4a37 !important;
}

.theme-warm-sepia .fill-blank-input,
.theme-warm-sepia input.blank-input {
  background: #ffffff !important;
  border: 1.5px solid #d97706 !important;
  color: #21150b !important;
}

.theme-warm-sepia .fill-blank-input:focus,
.theme-warm-sepia input.blank-input:focus {
  border-color: #b45309 !important;
  box-shadow: 0 0 10px rgba(217, 119, 6, 0.25) !important;
}

/* Practice Action Buttons for Warm Sepia Theme */
.theme-warm-sepia .practice-btn-primary {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
  color: #ffffff !important;
  border: 1px solid #b45309 !important;
  box-shadow: 0 4px 14px rgba(180, 83, 9, 0.3) !important;
}

.theme-warm-sepia .practice-btn-primary:hover {
  background: linear-gradient(135deg, #b45309 0%, #92400e 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(180, 83, 9, 0.4) !important;
}

.theme-warm-sepia .practice-btn-secondary,
.theme-warm-sepia .fillblanks-reset-btn {
  background: rgba(217, 119, 6, 0.12) !important;
  color: #b45309 !important;
  border: 1px solid rgba(217, 119, 6, 0.35) !important;
  font-weight: 700 !important;
}

.theme-warm-sepia .practice-btn-secondary:hover,
.theme-warm-sepia .fillblanks-reset-btn:hover {
  background: rgba(217, 119, 6, 0.2) !important;
  color: #78350f !important;
}

.theme-warm-sepia .practice-btn-warning {
  background: rgba(217, 119, 6, 0.15) !important;
  color: #b45309 !important;
  border: 1px solid rgba(217, 119, 6, 0.4) !important;
  font-weight: 700 !important;
}

.theme-warm-sepia .practice-btn-danger {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #dc2626 !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
  font-weight: 700 !important;
}

/* --- Practice Submode Switcher Tabs Header (Image 1) --- */
.theme-warm-sepia .practice-submode-switcher,
.theme-warm-sepia .practice-submode-nav,
.theme-warm-sepia .practice-mode-nav {
  background: #fdf6e3 !important;
  border: 1.5px solid rgba(180, 83, 9, 0.25) !important;
  box-shadow: 0 6px 20px rgba(67, 52, 34, 0.12) !important;
}

.theme-warm-sepia .practice-mode-btn {
  color: #5c4a37 !important;
  background: transparent !important;
  font-weight: 700 !important;
}

.theme-warm-sepia .practice-mode-btn:hover {
  color: #d97706 !important;
  background: rgba(217, 119, 6, 0.12) !important;
}

.theme-warm-sepia .practice-mode-btn.active {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(180, 83, 9, 0.35) !important;
  font-weight: 800 !important;
}

/* --- Fill in Blanks Target Word Bank Box & Chips (Image 2) --- */
.theme-warm-sepia .fill-word-bank-box,
.theme-warm-sepia #fillblanks-word-bank,
.theme-warm-sepia .fillblanks-bank-container {
  background: #fdf6e3 !important;
  border: 1.5px solid rgba(180, 83, 9, 0.25) !important;
  box-shadow: inset 0 2px 8px rgba(67, 52, 34, 0.06) !important;
}

.theme-warm-sepia .fill-word-bank-title,
.theme-warm-sepia .target-word-bank-title {
  color: #78350f !important;
  font-weight: 800 !important;
}

.theme-warm-sepia .fill-word-chip,
.theme-warm-sepia .bank-word-chip {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
  color: #78350f !important;
  border: 1.5px solid #d97706 !important;
  font-weight: 800 !important;
  box-shadow: 0 3px 8px rgba(180, 83, 9, 0.18) !important;
}

.theme-warm-sepia .fill-word-chip:hover,
.theme-warm-sepia .bank-word-chip:hover {
  background: #d97706 !important;
  color: #ffffff !important;
}

.theme-warm-sepia .fill-word-chip.selected,
.theme-warm-sepia .bank-word-chip.selected {
  background: #b45309 !important;
  color: #ffffff !important;
  border-color: #b45309 !important;
  box-shadow: 0 0 16px rgba(180, 83, 9, 0.4) !important;
}

.theme-warm-sepia .fill-word-chip.used,
.theme-warm-sepia .bank-word-chip.used {
  opacity: 0.3 !important;
  background: rgba(67, 52, 34, 0.1) !important;
  border-color: rgba(67, 52, 34, 0.2) !important;
  color: #8c6d52 !important;
}

/* --- Sentence Fill Items & Cards (Image 2) --- */
.theme-warm-sepia .sentence-fill-container,
.theme-warm-sepia .sentence-list {
  background: transparent !important;
}

.theme-warm-sepia .sentence-fill-item,
.theme-warm-sepia .sentence-card,
.theme-warm-sepia .sentence-box {
  background: #ffffff !important;
  border: 1.5px solid rgba(180, 83, 9, 0.2) !important;
  box-shadow: 0 4px 14px rgba(67, 52, 34, 0.06) !important;
}

.theme-warm-sepia .sentence-fill-item:hover,
.theme-warm-sepia .sentence-card:hover {
  border-color: #d97706 !important;
  background: #fffcf7 !important;
}

.theme-warm-sepia .sentence-fill-text,
.theme-warm-sepia .sentence-text {
  color: #21150b !important;
  font-weight: 600 !important;
}

.theme-warm-sepia .sentence-fill-item span[style*="color"],
.theme-warm-sepia .sentence-index-lbl {
  color: #8c6d52 !important;
  font-weight: 700 !important;
}

.theme-warm-sepia .sentence-blank-slot,
.theme-warm-sepia .blank-slot,
.theme-warm-sepia .blank-drop-zone {
  background: rgba(217, 119, 6, 0.08) !important;
  border-bottom: 2px dashed #d97706 !important;
  color: #b45309 !important;
  font-weight: 800 !important;
}

.theme-warm-sepia .sentence-blank-slot:hover,
.theme-warm-sepia .blank-slot:hover {
  background: rgba(217, 119, 6, 0.18) !important;
  border-color: #b45309 !important;
}

.theme-warm-sepia .sentence-blank-slot.filled,
.theme-warm-sepia .blank-slot.filled {
  background: rgba(217, 119, 6, 0.15) !important;
  border: 1.5px solid #d97706 !important;
  color: #78350f !important;
  font-weight: 900 !important;
}

.theme-warm-sepia .sentence-blank-slot.correct,
.theme-warm-sepia .blank-slot.correct {
  background: rgba(16, 185, 129, 0.15) !important;
  border: 1.5px solid #10b981 !important;
  color: #047857 !important;
}

.theme-warm-sepia .sentence-blank-slot.incorrect,
.theme-warm-sepia .blank-slot.incorrect {
  background: rgba(239, 68, 68, 0.15) !important;
  border: 1.5px solid #ef4444 !important;
  color: #b91c1c !important;
}

/* --- 🌐 Warm Sepia Theme Overrides for Ecosystem Platform Cards (Discord, Instagram, Mobile Apps) --- */

/* All 3 Platform Stage Cards */
.theme-warm-sepia .discord-stage-card,
.theme-warm-sepia .instagram-stage-card,
.theme-warm-sepia .apps-stage-card {
  background: #ffffff !important;
  border: 1.5px solid rgba(180, 83, 9, 0.25) !important;
  box-shadow: 0 12px 32px rgba(67, 52, 34, 0.12) !important;
  color: #21150b !important;
}

.theme-warm-sepia .discord-stage-card h3,
.theme-warm-sepia .instagram-stage-card h3,
.theme-warm-sepia .apps-stage-card h3 {
  color: #21150b !important;
  font-weight: 850 !important;
}

.theme-warm-sepia .discord-stage-card .card-desc,
.theme-warm-sepia .instagram-stage-card .card-desc,
.theme-warm-sepia .apps-stage-card .card-desc {
  color: #5c4a37 !important;
}

/* 1. Discord Card Badges */
.theme-warm-sepia .discord-header-info span {
  color: #4752c4 !important;
  font-weight: 800 !important;
}

/* 2. Instagram Card Showcase & Button (Image 2 Fix) */
.theme-warm-sepia .insta-showcase-box {
  background: #fdf6e3 !important;
  border: 1.5px solid rgba(180, 83, 9, 0.2) !important;
  box-shadow: inset 0 2px 8px rgba(67, 52, 34, 0.06) !important;
}

.theme-warm-sepia .insta-handle {
  color: #21150b !important;
  font-weight: 850 !important;
}

.theme-warm-sepia .insta-bio {
  color: #5c4a37 !important;
}

.theme-warm-sepia .insta-stats-row,
.theme-warm-sepia .insta-stats-row strong {
  color: #8c6d52 !important;
  font-weight: 700 !important;
}

.theme-warm-sepia .btn-instagram,
.theme-warm-sepia .btn-instagram span {
  background: linear-gradient(45deg, #dc2743, #cc2366, #bc1888) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 15px rgba(225, 48, 108, 0.35) !important;
}

.theme-warm-sepia .btn-instagram:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(225, 48, 108, 0.5) !important;
}

/* 3. Mobile Apps Card Icon, Status & Store Placeholders (Image 3 Fix) */
.theme-warm-sepia .apps-icon-wrapper {
  background: rgba(217, 119, 6, 0.12) !important;
  border: 1px solid rgba(217, 119, 6, 0.35) !important;
  box-shadow: 0 0 16px rgba(217, 119, 6, 0.2) !important;
}

.theme-warm-sepia .coming-soon-status-card {
  background: #fdf6e3 !important;
  border: 1.5px solid rgba(180, 83, 9, 0.2) !important;
}

.theme-warm-sepia .coming-soon-badge-tag {
  background: rgba(217, 119, 6, 0.12) !important;
  color: #b45309 !important;
  border: 1.5px solid #d97706 !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.2) !important;
}

.theme-warm-sepia .coming-soon-status-card p {
  color: #5c4a37 !important;
}

.theme-warm-sepia .app-badge-placeholder {
  background: #fdf6e3 !important;
  border: 1.5px solid rgba(180, 83, 9, 0.25) !important;
  opacity: 0.85 !important;
}

.theme-warm-sepia .app-badge-icon {
  color: #78350f !important;
}

.theme-warm-sepia .app-badge-text,
.theme-warm-sepia .app-badge-text span {
  color: #8c6d52 !important;
}

.theme-warm-sepia .app-badge-text strong {
  color: #21150b !important;
  font-weight: 850 !important;
}

/* --- 👥 Warm Sepia Theme Overrides for Admin Manage Members --- */

/* 1. Admin Tabs Bar & Buttons */
.theme-warm-sepia .admin-tabs-nav {
  border-bottom: 1.5px solid rgba(180, 83, 9, 0.2) !important;
}

.theme-warm-sepia .admin-tab-btn {
  color: #5c4a37 !important;
  background: transparent !important;
  font-weight: 700 !important;
  border-radius: 20px !important;
  transition: all 0.25s ease !important;
}

.theme-warm-sepia .admin-tab-btn:hover {
  color: #d97706 !important;
  background: rgba(217, 119, 6, 0.12) !important;
}

.theme-warm-sepia .admin-tab-btn.active {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(180, 83, 9, 0.35) !important;
  font-weight: 800 !important;
}

/* 2. Main Stage Card (#admin-tab-members) */
.theme-warm-sepia #admin-tab-members,
.theme-warm-sepia .admin-tab-content {
  background: #ffffff !important;
  border: 1.5px solid rgba(180, 83, 9, 0.25) !important;
  box-shadow: 0 12px 32px rgba(67, 52, 34, 0.12) !important;
  color: #21150b !important;
}

.theme-warm-sepia #admin-tab-members:hover,
.theme-warm-sepia .admin-tab-content:hover,
.theme-warm-sepia #page-admin .glass-card:hover,
.theme-warm-sepia .admin-tab-content.glass-card:hover {
  background: #ffffff !important;
  box-shadow: 0 12px 32px rgba(67, 52, 34, 0.12) !important;
  transform: none !important;
}

.theme-warm-sepia #admin-tab-members h3 {
  color: #21150b !important;
  font-weight: 850 !important;
}

/* 3. Top Stats Badges */
.theme-warm-sepia #admin-total-users {
  background: #fdf6e3 !important;
  color: #5c4a37 !important;
  border: 1px solid rgba(180, 83, 9, 0.25) !important;
  font-weight: 750 !important;
}

.theme-warm-sepia #admin-total-learners {
  background: rgba(217, 119, 6, 0.12) !important;
  color: #b45309 !important;
  border: 1px solid rgba(217, 119, 6, 0.35) !important;
  font-weight: 750 !important;
}

.theme-warm-sepia #admin-total-admins {
  background: rgba(180, 83, 9, 0.12) !important;
  color: #78350f !important;
  border: 1px solid rgba(180, 83, 9, 0.35) !important;
  font-weight: 750 !important;
}

/* 4. Actions & Search & Filter Bar */
.theme-warm-sepia #admin-members-search {
  background: #ffffff !important;
  border: 1.5px solid #d97706 !important;
  color: #21150b !important;
  font-weight: 600 !important;
}

.theme-warm-sepia .custom-select-trigger,
.theme-warm-sepia #custom-admin-level-trigger,
.theme-warm-sepia #custom-admin-sort-trigger {
  background: #ffffff !important;
  border: 1.5px solid rgba(180, 83, 9, 0.25) !important;
  color: #21150b !important;
  font-weight: 600 !important;
}

.theme-warm-sepia .custom-select-options,
.theme-warm-sepia #custom-admin-level-options,
.theme-warm-sepia #custom-admin-sort-options {
  background: #ffffff !important;
  border: 1.5px solid rgba(180, 83, 9, 0.25) !important;
  box-shadow: 0 8px 24px rgba(67, 52, 34, 0.15) !important;
}

.theme-warm-sepia .custom-select-option {
  color: #3d2b1a !important;
}

.theme-warm-sepia .custom-select-option:hover,
.theme-warm-sepia .custom-select-option.active {
  background: rgba(217, 119, 6, 0.12) !important;
  color: #d97706 !important;
  font-weight: 750 !important;
}

/* 5. Directory Sub-Tabs */
.theme-warm-sepia .directory-sub-tabs {
  border-bottom: 1.5px solid rgba(180, 83, 9, 0.2) !important;
}

.theme-warm-sepia .directory-sub-tab-btn {
  color: #5c4a37 !important;
  background: transparent !important;
  font-weight: 700 !important;
}

.theme-warm-sepia .directory-sub-tab-btn:hover {
  color: #d97706 !important;
}

.theme-warm-sepia .directory-sub-tab-btn.active {
  color: #d97706 !important;
  border-bottom: 2px solid #d97706 !important;
  font-weight: 850 !important;
}

.theme-warm-sepia .directory-sub-tab-btn span {
  background: rgba(217, 119, 6, 0.12) !important;
  color: #b45309 !important;
  font-weight: 800 !important;
}

/* 6. Member Table Header & Member Rows */
.theme-warm-sepia .member-list-header {
  background: #f7ede2 !important;
  border-bottom: 1.5px solid rgba(180, 83, 9, 0.2) !important;
  color: #3d2b1a !important;
  font-weight: 800 !important;
  border-radius: 8px 8px 0 0 !important;
}

.theme-warm-sepia .member-list-item {
  background: #ffffff !important;
  border: 1.5px solid rgba(180, 83, 9, 0.15) !important;
  box-shadow: 0 2px 8px rgba(67, 52, 34, 0.04) !important;
  color: #21150b !important;
}

.theme-warm-sepia .member-list-item:hover {
  background: #fdf6e3 !important;
  border-color: #d97706 !important;
  box-shadow: 0 6px 18px rgba(67, 52, 34, 0.1) !important;
}

.theme-warm-sepia .member-list-item div[style*="font-size: 14px"] {
  color: #21150b !important;
  font-weight: 750 !important;
}

.theme-warm-sepia .member-list-item div[style*="font-size: 11px"],
.theme-warm-sepia .member-list-item .hide-md {
  color: #8c6d52 !important;
}

.theme-warm-sepia .member-list-item .hide-sm[style*="font-size: 13px"] {
  color: #433422 !important;
}

.theme-warm-sepia .role-badge.admin {
  background: rgba(180, 83, 9, 0.15) !important;
  color: #78350f !important;
  border: 1px solid rgba(180, 83, 9, 0.4) !important;
  font-weight: 800 !important;
}

.theme-warm-sepia .role-badge.mentor {
  background: rgba(217, 119, 6, 0.15) !important;
  color: #b45309 !important;
  border: 1px solid rgba(217, 119, 6, 0.4) !important;
  font-weight: 800 !important;
}

.theme-warm-sepia .role-badge.learner {
  background: rgba(67, 52, 34, 0.08) !important;
  color: #5c4a37 !important;
  border: 1px solid rgba(67, 52, 34, 0.25) !important;
  font-weight: 800 !important;
}

.theme-warm-sepia .badge-level {
  background: #fef3c7 !important;
  color: #b45309 !important;
  border: 1px solid #d97706 !important;
  font-weight: 850 !important;
}

.theme-warm-sepia .stat-pill.xp {
  background: rgba(217, 119, 6, 0.12) !important;
  color: #b45309 !important;
  border: 1px solid rgba(217, 119, 6, 0.35) !important;
  font-weight: 850 !important;
}

.theme-warm-sepia .member-card-actions-row button:first-child {
  background: rgba(217, 119, 6, 0.12) !important;
  color: #b45309 !important;
  border: 1px solid rgba(217, 119, 6, 0.35) !important;
  font-weight: 700 !important;
}

.theme-warm-sepia .btn-admin-edit {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #d97706 !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
  font-weight: 700 !important;
}

.theme-warm-sepia .btn-admin-delete {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #dc2626 !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
  font-weight: 700 !important;
}

/* 7. Admin Member Modal */
.theme-warm-sepia #admin-member-modal .modal-card,
.theme-warm-sepia #admin-member-detail-modal .modal-card {
  background: #ffffff !important;
  border: 1.5px solid rgba(180, 83, 9, 0.25) !important;
  box-shadow: 0 16px 40px rgba(67, 52, 34, 0.2) !important;
  color: #21150b !important;
}

.theme-warm-sepia #admin-member-modal-title {
  color: #21150b !important;
  font-weight: 850 !important;
}

.theme-warm-sepia #admin-member-form label {
  color: #3d2b1a !important;
  font-weight: 700 !important;
}

.theme-warm-sepia #admin-member-form .form-input {
  background: #ffffff !important;
  border: 1.5px solid #d97706 !important;
  color: #21150b !important;
}

.theme-warm-sepia #admin-member-submit-btn {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  border: 1px solid #b45309 !important;
}