/* ===========================================================
   AriesLingo — Tasarım sistemi tokenları
   Genç & sosyal, sohbet odaklı. Bölüm bazlı tema renkleri.
   =========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* tweakable */
  --r: 24px;            /* köşe yuvarlaklığı */
  --font-ui: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-display: 'Space Grotesk', system-ui, sans-serif;

  /* nötr sıcak taban */
  --bg:        oklch(0.985 0.004 80);
  --bg-2:      oklch(0.965 0.006 75);
  --bg-3:      oklch(0.945 0.008 75);
  --surface:   oklch(1 0 0);
  --ink:       oklch(0.23 0.012 60);
  --ink-2:     oklch(0.44 0.012 60);
  --muted:     oklch(0.60 0.010 60);
  --line:      oklch(0.915 0.006 70);
  --line-2:    oklch(0.86 0.008 70);

  /* marka / sohbet — sıcak mercan */
  --brand:       oklch(0.64 0.185 33);
  --brand-press: oklch(0.58 0.185 33);
  --brand-soft:  oklch(0.94 0.045 40);
  --brand-tint:  oklch(0.97 0.022 40);
  --on-brand:    oklch(0.99 0.01 40);

  /* sohbet ikincil — amber */
  --amber:      oklch(0.80 0.135 70);
  --amber-soft: oklch(0.95 0.05 75);
  --amber-press: oklch(0.55 0.12 70);

  /* video — maps to theme variables so it follows theme */
  --video-bg:    var(--bg);
  --video-bg-2:  var(--bg-2);
  --video-card:  var(--surface);
  --video-line:  var(--line);
  --video-ink:   var(--ink);
  --video-muted: var(--muted);

  /* telaffuz — teal/yeşil */
  --voice:       oklch(0.62 0.115 168);
  --voice-press: oklch(0.55 0.115 168);
  --voice-soft:  oklch(0.93 0.045 168);
  --voice-tint:  oklch(0.97 0.02 168);
  --green:       oklch(0.62 0.15 145);

  /* keşfet — dünya mavisi */
  --explore:       oklch(0.55 0.155 262);
  --explore-press: oklch(0.47 0.155 262);
  --explore-soft:  oklch(0.93 0.05 262);
  --explore-tint:  oklch(0.97 0.022 262);

  --shadow-sm: 0 2px 4px rgba(30,20,10,.06), 0 3px 8px rgba(30,20,10,.05);
  --shadow-md: 0 6px 18px rgba(30,20,10,.08), 0 12px 36px rgba(30,20,10,.06);
  --shadow-lg: 0 22px 60px rgba(30,20,10,.16);

  --correction-bg:             oklch(0.975 0.025 152);
  --correction-border:         oklch(0.9 0.05 152);
  --correction-text:           var(--ink);
  --correction-highlight-bg:   oklch(0.9 0.08 152);
  --correction-highlight-text: oklch(0.42 0.13 152);
  --correction-header-text:    oklch(0.45 0.13 152);
  --chat-header-color:         oklch(0.25 0.05 285);

  /* AI tutor feedback card variables */
  --feedback-bg:               oklch(0.97 0.01 285);
  --feedback-border:           oklch(0.9 0.03 285);
  --feedback-header-text:      oklch(0.45 0.15 285);
  --feedback-text:             oklch(0.3 0.02 285);
}

[data-theme="dark-grey"] {
  --bg:        oklch(0.20 0.01 250);
  --bg-2:      oklch(0.16 0.01 250);
  --bg-3:      oklch(0.18 0.01 250);
  --surface:   oklch(0.24 0.01 250);
  --ink:       oklch(0.96 0.005 250);
  --ink-2:     oklch(0.85 0.01 250);
  --muted:     oklch(0.65 0.01 250);
  --line:      oklch(0.28 0.01 250);
  --line-2:    oklch(0.32 0.01 250);
  --shadow-sm: 0 2px 4px rgba(0,0,0,.3), 0 3px 8px rgba(0,0,0,.25);
  --shadow-md: 0 6px 18px rgba(0,0,0,.45), 0 12px 36px rgba(0,0,0,.35);
  --shadow-lg: 0 22px 60px rgba(0,0,0,.5);
  --brand-soft: oklch(0.28 0.06 33);
  --brand-tint: oklch(0.24 0.04 33);
  --voice-soft: oklch(0.26 0.05 168);
  --voice-tint: oklch(0.22 0.03 168);
  --voice-press: oklch(0.78 0.11 168);
  --explore-soft: oklch(0.26 0.05 262);
  --explore-tint: oklch(0.22 0.03 262);
  --explore-press: oklch(0.76 0.13 262);
  --amber-soft: oklch(0.28 0.04 70);
  --brand-press: oklch(0.78 0.16 33);
  --amber-press: oklch(0.82 0.10 70);
  --green:       oklch(0.68 0.15 145);

  /* correction card & chat header readability variables */
  --correction-bg:             oklch(0.22 0.04 152);
  --correction-border:         oklch(0.32 0.06 152);
  --correction-text:           var(--ink);
  --correction-highlight-bg:   oklch(0.28 0.08 152);
  --correction-highlight-text: oklch(0.75 0.15 152);
  --correction-header-text:    oklch(0.75 0.15 152);
  --chat-header-color:         var(--ink);

  /* AI tutor feedback card variables */
  --feedback-bg:               oklch(0.24 0.04 285);
  --feedback-border:           oklch(0.34 0.06 285);
  --feedback-header-text:      oklch(0.75 0.15 285);
  --feedback-text:             var(--ink);
}

[data-theme="deep-blue"] {
  --bg:        oklch(0.18 0.03 240);
  --bg-2:      oklch(0.14 0.03 240);
  --bg-3:      oklch(0.16 0.03 240);
  --surface:   oklch(0.22 0.03 240);
  --ink:       oklch(0.95 0.01 240);
  --ink-2:     oklch(0.82 0.015 240);
  --muted:     oklch(0.62 0.012 240);
  --line:      oklch(0.26 0.03 240);
  --line-2:    oklch(0.30 0.03 240);
  --shadow-sm: 0 2px 4px rgba(0,0,0,.3), 0 3px 8px rgba(0,0,0,.25);
  --shadow-md: 0 6px 18px rgba(0,0,0,.45), 0 12px 36px rgba(0,0,0,.35);
  --shadow-lg: 0 22px 60px rgba(0,0,0,.5);
  --brand-soft: oklch(0.26 0.06 33);
  --brand-tint: oklch(0.22 0.04 33);
  --voice-soft: oklch(0.24 0.05 168);
  --voice-tint: oklch(0.20 0.03 168);
  --voice-press: oklch(0.78 0.11 168);
  --explore-soft: oklch(0.24 0.05 262);
  --explore-tint: oklch(0.20 0.03 262);
  --explore-press: oklch(0.76 0.13 262);
  --amber-soft: oklch(0.26 0.04 70);
  --brand-press: oklch(0.78 0.16 33);
  --amber-press: oklch(0.82 0.10 70);
  --green:       oklch(0.68 0.15 145);

  /* correction card & chat header readability variables */
  --correction-bg:             oklch(0.20 0.04 152);
  --correction-border:         oklch(0.30 0.06 152);
  --correction-text:           var(--ink);
  --correction-highlight-bg:   oklch(0.26 0.08 152);
  --correction-highlight-text: oklch(0.75 0.15 152);
  --correction-header-text:    oklch(0.75 0.15 152);
  --chat-header-color:         var(--ink);

  /* AI tutor feedback card variables */
  --feedback-bg:               oklch(0.24 0.04 285);
  --feedback-border:           oklch(0.34 0.06 285);
  --feedback-header-text:      oklch(0.75 0.15 285);
  --feedback-text:             var(--ink);
}

[data-theme="purple-dream"] {
  --bg:        oklch(0.16 0.025 290);
  --bg-2:      oklch(0.12 0.025 290);
  --bg-3:      oklch(0.14 0.025 290);
  --surface:   oklch(0.20 0.028 290);
  --ink:       oklch(0.96 0.01 290);
  --ink-2:     oklch(0.84 0.015 290);
  --muted:     oklch(0.64 0.012 290);
  --line:      oklch(0.24 0.02 290);
  --line-2:    oklch(0.28 0.02 290);
  --shadow-sm: 0 2px 4px rgba(0,0,0,.3), 0 3px 8px rgba(0,0,0,.25);
  --shadow-md: 0 6px 18px rgba(0,0,0,.45), 0 12px 36px rgba(0,0,0,.35);
  --shadow-lg: 0 22px 60px rgba(0,0,0,.5);
  --brand-soft: oklch(0.25 0.06 33);
  --brand-tint: oklch(0.21 0.04 33);
  --voice-soft: oklch(0.23 0.05 168);
  --voice-tint: oklch(0.19 0.03 168);
  --voice-press: oklch(0.78 0.11 168);
  --explore-soft: oklch(0.23 0.05 262);
  --explore-tint: oklch(0.19 0.03 262);
  --explore-press: oklch(0.76 0.13 262);
  --amber-soft: oklch(0.25 0.04 70);
  --brand-press: oklch(0.78 0.16 33);
  --amber-press: oklch(0.82 0.10 70);
  --green:       oklch(0.68 0.15 145);

  /* correction card & chat header readability variables */
  --correction-bg:             oklch(0.18 0.04 152);
  --correction-border:         oklch(0.28 0.06 152);
  --correction-text:           var(--ink);
  --correction-highlight-bg:   oklch(0.24 0.08 152);
  --correction-highlight-text: oklch(0.75 0.15 152);
  --correction-header-text:    oklch(0.75 0.15 152);
  --chat-header-color:         var(--ink);

  /* AI tutor feedback card variables */
  --feedback-bg:               oklch(0.24 0.04 285);
  --feedback-border:           oklch(0.34 0.06 285);
  --feedback-header-text:      oklch(0.75 0.15 285);
  --feedback-text:             var(--ink);
}

[data-theme="green-mint"] {
  --bg:        oklch(0.97 0.018 150);
  --bg-2:      oklch(0.94 0.025 150);
  --bg-3:      oklch(0.92 0.025 150);
  --surface:   oklch(1 0 0);
  --ink:       oklch(0.22 0.035 150);
  --ink-2:     oklch(0.40 0.025 150);
  --muted:     oklch(0.58 0.018 150);
  --line:      oklch(0.89 0.02 150);
  --line-2:    oklch(0.84 0.025 150);
  --brand-soft: oklch(0.95 0.045 150);
  --brand-tint: oklch(0.98 0.022 150);
  --voice-soft: oklch(0.94 0.045 168);
  --voice-tint: oklch(0.97 0.02 168);
  --explore-soft: oklch(0.94 0.045 262);
  --explore-tint: oklch(0.97 0.02 262);
  --green:       oklch(0.62 0.15 145);

  /* correction card & chat header readability variables */
  --correction-bg:             oklch(0.965 0.03 150);
  --correction-border:         oklch(0.88 0.05 150);
  --correction-text:           var(--ink);
  --correction-highlight-bg:   oklch(0.88 0.08 150);
  --correction-highlight-text: oklch(0.35 0.12 150);
  --correction-header-text:    oklch(0.38 0.12 150);
  --chat-header-color:         oklch(0.20 0.04 150);

  /* AI tutor feedback card variables */
  --feedback-bg:               oklch(0.97 0.01 285);
  --feedback-border:           oklch(0.9 0.03 285);
  --feedback-header-text:      oklch(0.45 0.15 285);
  --feedback-text:             oklch(0.3 0.02 285);
}

* { box-sizing: border-box; }

.el-app {
  font-family: var(--font-ui);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 17px; /* Standart metin boyutu (İdeal mobil okunabilirlik) */
  line-height: 1.5;
}
.el-app button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
.el-app input, .el-app select, .el-app textarea { font-family: inherit; color: inherit; }
.el-app h1,.el-app h2,.el-app h3,.el-app h4 { font-family: var(--font-display); margin: 0; letter-spacing: -0.02em; }
.el-app p { margin: 0; }

/* ---- shared atoms ---- */
.el-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 700; font-size: 16.5px; line-height: 1.15;
  padding: 14px 28px; border-radius: 999px; transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
  white-space: nowrap;
  border-bottom: 3px solid rgba(0,0,0,0.18);
}
.el-btn:active { transform: translateY(2px) scale(.98); border-bottom-width: 2px; }
.el-btn--brand { background: var(--brand); color: var(--on-brand); box-shadow: 0 4px 12px oklch(0.64 0.185 33 / .2); border-bottom-color: oklch(0.50 0.15 33); }
.el-btn--brand:hover { background: var(--brand-press); }
.el-btn--ghost { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); border-bottom-color: var(--line-2); }
.el-btn--ghost:hover { background: var(--bg-2); }
.el-btn--dark { background: oklch(0.97 0.005 258); color: var(--video-bg); border-bottom-color: oklch(0.85 0.005 258); }
.el-btn--voice { background: var(--voice); color: #fff; box-shadow: 0 4px 12px oklch(0.62 0.115 168 / .2); border-bottom-color: oklch(0.50 0.10 168); }
.el-btn--block { display: flex; width: 100%; }

.el-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 17.5px; font-weight: 700; padding: 8px 16px; border-radius: 999px;
  background: var(--bg-2); color: var(--ink-2);
}
.el-chip--brand { background: var(--brand-soft); color: var(--brand-press); }
.el-chip--voice { background: var(--voice-soft); color: var(--voice-press); }
.el-chip--amber { background: var(--amber-soft); color: oklch(0.5 0.13 60); }
.el-chip--lock  { background: oklch(0.24 0.014 258 / .9); color: #fff; }

.el-card {
  background: var(--surface); border-radius: var(--r);
  box-shadow: var(--shadow-sm);
}

/* level dots */
.lvl { display: inline-flex; gap: 6px; align-items: center; }
.lvl i { width: 9px; height: 9px; border-radius: 99px; background: var(--line-2); display: block; }
.lvl i.on { background: var(--brand); }

/* progress */
.bar { height: 9px; border-radius: 99px; background: var(--bg-2); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 99px; background: var(--brand); transition: width .5s cubic-bezier(.2,.8,.2,1); }
.bar--voice > span { background: var(--voice); }

/* avatar (anonim) */
.av {
  width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 17.5px; color: #fff; font-weight: 700;
}

/* scrollbars (web) */
.el-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.el-scroll::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; border: 3px solid var(--bg); }
.el-scroll::-webkit-scrollbar-track { background: transparent; }

/* entrance */
@keyframes el-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes el-pop  { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes el-sheet{ from { transform: translateY(100%); } to { transform: none; } }
@keyframes el-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes el-pulse{ 0%,100% { transform: scale(1); opacity:.5 } 50% { transform: scale(1.18); opacity:0 } }
.el-rise { animation: el-rise .45s cubic-bezier(.2,.8,.2,1) both; }

/* float-up puan rozeti */
@keyframes el-float { 0%{opacity:0; transform:translateY(8px) scale(.8)} 22%{opacity:1; transform:translateY(0) scale(1)} 100%{opacity:0; transform:translateY(-26px) scale(1)} }

/* mic pulse rings */
.mic-ring { position: absolute; inset: 0; border-radius: 999px; border: 2px solid var(--voice); animation: el-pulse 1.8s ease-out infinite; }

/* ===========================================================
   STAGE (yan yana mobil + web sahnesi)
   =========================================================== */
.stage {
  min-height: 100vh; width: 100%;
  background:
    radial-gradient(1200px 600px at 15% -5%, oklch(0.96 0.02 40), transparent 60%),
    radial-gradient(1000px 700px at 100% 110%, oklch(0.95 0.02 170), transparent 55%),
    oklch(0.95 0.006 75);
  font-family: var(--font-ui); color: var(--ink);
  padding: 40px clamp(20px, 4vw, 64px) 80px;
}
.stage-head { max-width: 720px; margin: 0 auto 30px; }
.stage-badge { display: inline-flex; align-items:center; gap:8px; font-size: 17.5px; font-weight: 700; color: var(--brand-press); background: var(--surface); padding: 7px 13px; border-radius: 999px; box-shadow: var(--shadow-sm); }
.stage-head h1 { font-family: var(--font-display); font-size: clamp(30px, 4vw, 44px); margin: 18px 0 10px; letter-spacing: -0.03em; }
.stage-head p { color: var(--ink-2); font-size: 16.5px; line-height: 1.6; max-width: 60ch; }
.stage-grid {
  display: flex; gap: clamp(28px, 4vw, 64px); align-items: flex-start;
  justify-content: center; flex-wrap: wrap;
}
.frame-wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.frame-label { display:flex; align-items:center; gap: 9px; font-weight: 700; font-size: 16.5px; color: var(--ink-2); }
.frame-label .dot { width: 9px; height: 9px; border-radius: 99px; background: var(--brand); }
.frame-note { font-size: 17.5px; color: var(--muted); max-width: 380px; text-align: center; }

/* tap feedback util */
.tap { transition: transform .12s ease, background .15s ease; }
.tap:active { transform: scale(.97); }

/* scrollbar gizleme */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* AI yazıyor animasyonu */
@keyframes typing {
  from { transform: translateY(0px); opacity: 0.4; }
  to { transform: translateY(-4px); opacity: 1; }
}

/* ===========================================================
   KELİME KARTLARI (Flashcards) 3D Döndürme Efektleri
   =========================================================== */
.fc-perspective {
  perspective: 1000px;
  width: 100%;
  max-width: 440px;
  height: 330px;
  margin: 0 auto;
  cursor: pointer;
}
.fc-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;
}
.fc-perspective.flipped .fc-inner {
  transform: rotateY(180deg);
}
.fc-front, .fc-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: var(--r);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: var(--shadow-md);
  border: 1.5px solid var(--line);
}
.fc-front {
  background: linear-gradient(135deg, var(--brand-tint), var(--surface));
  color: var(--ink);
}
.fc-back {
  background: linear-gradient(135deg, var(--voice-tint), var(--surface));
  color: var(--ink);
  transform: rotateY(180deg);
  border-color: var(--voice);
}

/* Ken Burns panning/zooming animation for Cinematic AI mode */
@keyframes kenBurnsZoom {
  0% {
    transform: scale(1.02) translate(0, 0);
  }
  50% {
    transform: scale(1.12) translate(-1.5%, 1%);
  }
  100% {
    transform: scale(1.2) translate(-1%, -0.5%);
  }
}
.ken-burns {
  animation: kenBurnsZoom 20s ease-in-out infinite alternate;
}

/* Animation classes for interactive video player graphics overlay */
@keyframes floatAnim {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
  100% { transform: translateY(0px); }
}
@keyframes popIn {
  0% { transform: scale(0.85); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes slideUpFade {
  0% { transform: translateY(15px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes shakeHand {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-8deg); }
  75% { transform: rotate(8deg); }
}
@keyframes pulseGlow {
  0%, 100% { opacity: 0.2; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.05); }
}
@keyframes rotateSlow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.anim-float {
  animation: floatAnim 4s ease-in-out infinite;
}
.anim-pop {
  animation: popIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.anim-slide-up {
  animation: slideUpFade 0.5s ease-out forwards;
}
.anim-shake {
  animation: shakeHand 1.5s ease-in-out infinite;
}
.anim-pulse-glow {
  animation: pulseGlow 3s ease-in-out infinite;
}
.anim-rotate {
  animation: rotateSlow 25s linear infinite;
}

/* Explore Video & Article Feed Card Hover Animations */
.video-feed-card:hover {
  transform: translateY(-4px) scale(1.01);
  border-color: var(--brand-soft) !important;
  box-shadow: var(--shadow-md) !important;
}
.video-feed-card:hover .feed-card-thumb {
  transform: scale(1.06);
}
.video-feed-card:hover .play-hover-btn {
  transform: scale(1) !important;
  opacity: 1 !important;
}
.video-feed-card:hover .feed-card-title {
  color: var(--brand-press) !important;
}
.article-feed-card:hover {
  transform: translateY(-4px) scale(1.01);
  border-color: var(--brand-soft) !important;
  box-shadow: var(--shadow-md) !important;
}
.article-feed-card:hover h4 {
  color: var(--brand-press) !important;
}

/* Interactive Transcript word styles */
.interactive-word {
  display: inline-block;
  cursor: pointer;
  transition: all 0.15s ease;
}
.interactive-word:hover {
  background: var(--brand-soft);
  color: var(--brand-press) !important;
  border-radius: 4px;
  text-decoration: underline;
}

/* ===========================================================
   MOBILE VIEW GLOBALS OVERRIDES
   =========================================================== */
.el-app--mobile {
  font-size: 14.5px !important;
}
.el-app--mobile .el-btn {
  padding: 10px 20px !important;
  font-size: 14.5px !important;
}
.el-app--mobile .el-chip {
  padding: 6px 12px !important;
  font-size: 14px !important;
}

/* ===========================================================
   SIDEBAR NAV STYLING (Main Menu rearrangement)
   =========================================================== */
.sidenav-section-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 18px 0 6px 12px;
  font-family: var(--font-display);
}

.sidenav-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  text-align: left;
  width: 100%;
  background: transparent;
  color: var(--ink-2);
  font-weight: 600;
  font-size: 15.5px;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  border: none;
  cursor: pointer;
  position: relative;
}

.sidenav-btn:hover {
  background: var(--bg-2);
  color: var(--ink);
  transform: translateX(4px);
}

.sidenav-btn.active {
  font-weight: 800;
  transform: translateX(4px);
  padding-left: 14px;
}

.sidenav-btn.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 4px;
  border-radius: 99px;
  background: var(--brand);
}

.sidenav-btn.active.color-brand {
  background: var(--brand-tint);
  color: var(--brand-press);
}
.sidenav-btn.active.color-brand::before {
  background: var(--brand);
}

.sidenav-btn.active.color-voice {
  background: var(--voice-soft);
  color: var(--voice-press);
}
.sidenav-btn.active.color-voice::before {
  background: var(--voice);
}

.sidenav-btn.active.color-explore {
  background: var(--explore-soft);
  color: var(--explore-press);
}
.sidenav-btn.active.color-explore::before {
  background: var(--explore);
}

.sidenav-btn.active.color-neutral {
  background: var(--bg-2);
  color: var(--ink);
}
.sidenav-btn.active.color-neutral::before {
  background: var(--muted);
}

/* Sidebar Dropdown Menu Styling */
.sidenav-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10.5px 14px;
  border-radius: 12px;
  width: 100%;
  background: transparent;
  color: var(--ink-2);
  font-weight: 600;
  font-size: 15.5px;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  border: none;
  cursor: pointer;
  user-select: none;
}

.sidenav-dropdown-header:hover {
  background: var(--bg-2);
  color: var(--ink);
}

.sidenav-dropdown-header.open {
  color: var(--ink);
  font-weight: 750;
  background: var(--bg-2);
}

.sidenav-dropdown-chevron {
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  color: var(--muted);
  display: flex;
  align-items: center;
}

.sidenav-dropdown-header.open .sidenav-dropdown-chevron {
  transform: rotate(90deg);
}

.sidenav-sub-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-left: 24px;
  padding-left: 10px;
  border-left: 1.5px solid var(--line);
  margin-top: 2px;
  margin-bottom: 6px;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sidenav-sub-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  text-align: left;
  width: 100%;
  background: transparent;
  color: var(--ink-2);
  font-weight: 600;
  font-size: 14.5px;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  border: none;
  cursor: pointer;
}

.sidenav-sub-btn:hover {
  background: var(--bg-2);
  color: var(--ink);
  transform: translateX(3px);
}

.sidenav-sub-btn.active {
  font-weight: 850;
  transform: translateX(3px);
}

.sidenav-sub-btn.active.color-brand {
  background: var(--brand-tint);
  color: var(--brand-press);
}
.sidenav-sub-btn.active.color-voice {
  background: var(--voice-soft);
  color: var(--voice-press);
}
.sidenav-sub-btn.active.color-explore {
  background: var(--explore-soft);
  color: var(--explore-press);
}
.sidenav-sub-btn.active.color-neutral {
  background: var(--bg-2);
  color: var(--ink);
}