﻿<style>
:root{--primary:#2D7A5F;--primary-dark:#1E5A45;--primary-light:#3D9A7A;--primary-lighter:rgba(45,122,95,0.2);--background:#0F1A17;--background-secondary:#1A2E26;--card-bg:#1E2E28;--text-primary:#F0F5F3;--text-secondary:#A8B5B0;--text-light:#6B7A75;--accent-orange:#FF6B35;--accent-gold:#FFB800;--accent-purple:#8B5CF6;--shadow-sm:0 2px 12px rgba(0,0,0,0.3);--shadow-md:0 8px 25px rgba(0,0,0,0.4);--shadow-lg:0 15px 40px rgba(0,0,0,0.5);--radius:20px;--radius-sm:12px;--radius-lg:28px;--border-color:#2A3E38;--tech-grid:rgba(45,122,95,0.08);--tech-glow:rgba(45,122,95,0.12);--tech-ring:rgba(45,122,95,0.06);--xp-toast-bg:#FFB800;--xp-toast-text:#1A1A1A;--levelup-overlay-bg:rgba(30,90,69,0.96);--levelup-text:#F0F5F3;--levelup-glow:#FFD700;--input-bg:#1A2E26;--correct-bg:rgba(34,197,94,0.15);--correct-border:#22C55E;--correct-text:#86EFAC;--incorrect-bg:rgba(239,68,68,0.15);--incorrect-border:#EF4444;--incorrect-text:#FCA5A5;--btn-secondary-bg:#1A2E26;--btn-secondary-text:#F0F5F3;--btn-secondary-border:#2A3E38;--btn-primary-border:rgba(117,198,160,0.28);--btn-primary-shadow:0 12px 26px rgba(0,0,0,0.32);--btn-secondary-hover:#243B33;--btn-icon-bg:#20352E;--btn-icon-hover:#28443B;--btn-icon-border:rgba(117,198,160,0.2);--btn-ghost-hover:rgba(117,198,160,0.12);--hero-bg-start:#1A4A35;--hero-bg-end:#0D2E20;--hero-border:rgba(117,198,160,0.26);--hero-shadow:0 12px 40px rgba(13,46,32,0.5);--hero-shimmer:rgba(255,255,255,0.1);--wotd-bg-start:#3D9A7A;--wotd-bg-end:#1E5A45;--announce-bg-start:#F59E0B;--announce-bg-end:#B45309;--announce-text:#1A1A1A;--levelup-card-start:#F7FBF9;--levelup-card-end:#EAF5F0;--levelup-card-border:rgba(45,122,95,0.18)}
[data-theme="forest"]{--primary:#2D7A5F;--primary-dark:#1E5A45;--primary-light:#3D9A7A;--primary-lighter:rgba(45,122,95,0.2);--background:#0F1A17;--background-secondary:#1A2E26;--card-bg:#1E2E28;--text-primary:#F0F5F3;--text-secondary:#A8B5B0;--text-light:#6B7A75;--border-color:#2A3E38;--tech-grid:rgba(45,122,95,0.08);--tech-glow:rgba(45,122,95,0.12);--tech-ring:rgba(45,122,95,0.06);--levelup-overlay-bg:rgba(30,90,69,0.96);--input-bg:#1A2E26;--btn-secondary-bg:#1A2E26;--btn-secondary-text:#F0F5F3;--btn-secondary-border:#2A3E38;--btn-primary-border:rgba(117,198,160,0.28);--btn-primary-shadow:0 12px 26px rgba(0,0,0,0.32);--btn-secondary-hover:#243B33;--btn-icon-bg:#20352E;--btn-icon-hover:#28443B;--btn-icon-border:rgba(117,198,160,0.2);--btn-ghost-hover:rgba(117,198,160,0.12);--hero-bg-start:#1A4A35;--hero-bg-end:#0D2E20;--hero-border:rgba(117,198,160,0.26);--hero-shadow:0 12px 40px rgba(13,46,32,0.5);--hero-shimmer:rgba(255,255,255,0.1)}
[data-theme="galaxy"]{--primary:#6D5EF5;--primary-dark:#34237D;--primary-light:#8B7DFF;--primary-lighter:rgba(109,94,245,0.18);--background:#0A0C18;--background-secondary:#141935;--card-bg:#191F3C;--text-primary:#EEF2FF;--text-secondary:#A9B4E6;--text-light:#7C89B8;--border-color:#2B3566;--tech-grid:rgba(120,127,255,0.12);--tech-glow:rgba(109,94,245,0.18);--tech-ring:rgba(125,211,252,0.09);--levelup-overlay-bg:rgba(42,35,104,0.96);--input-bg:#131833;--btn-secondary-bg:#141935;--btn-secondary-text:#EEF2FF;--btn-secondary-border:#2B3566;--btn-primary-border:rgba(173,165,255,0.3);--btn-primary-shadow:0 12px 28px rgba(21,20,53,0.45);--btn-secondary-hover:#1C2450;--btn-icon-bg:#182048;--btn-icon-hover:#212B5F;--btn-icon-border:rgba(173,165,255,0.2);--btn-ghost-hover:rgba(173,165,255,0.12);--correct-bg:rgba(34,197,94,0.14);--incorrect-bg:rgba(239,68,68,0.14);--hero-bg-start:#2A2F74;--hero-bg-end:#121734;--hero-border:rgba(173,165,255,0.3);--hero-shadow:0 12px 42px rgba(10,12,24,0.56);--hero-shimmer:rgba(191,182,255,0.16);--wotd-bg-start:#5B5BD6;--wotd-bg-end:#312E81;--announce-bg-start:#8B7DFF;--announce-bg-end:#4C3FC9;--announce-text:#EEF2FF;--levelup-card-start:#F4F2FF;--levelup-card-end:#E7E9FF;--levelup-card-border:rgba(109,94,245,0.2)}
[data-theme="cosmic"]{--primary:#22A6A1;--primary-dark:#0E5C63;--primary-light:#43C6C1;--primary-lighter:rgba(34,166,161,0.18);--background:#07141C;--background-secondary:#10242F;--card-bg:#132B38;--text-primary:#ECFBFF;--text-secondary:#A3C6CF;--text-light:#6E8E97;--border-color:#264655;--tech-grid:rgba(34,166,161,0.1);--tech-glow:rgba(45,212,191,0.16);--tech-ring:rgba(34,211,238,0.08);--levelup-overlay-bg:rgba(13,81,87,0.96);--input-bg:#10242F;--btn-secondary-bg:#10242F;--btn-secondary-text:#ECFBFF;--btn-secondary-border:#264655;--btn-primary-border:rgba(127,242,233,0.26);--btn-primary-shadow:0 12px 28px rgba(3,24,31,0.42);--btn-secondary-hover:#16313F;--btn-icon-bg:#13303D;--btn-icon-hover:#1A3B4A;--btn-icon-border:rgba(127,242,233,0.18);--btn-ghost-hover:rgba(127,242,233,0.1);--correct-bg:rgba(34,197,94,0.14);--incorrect-bg:rgba(239,68,68,0.14);--hero-bg-start:#0E5C63;--hero-bg-end:#091E29;--hero-border:rgba(127,242,233,0.24);--hero-shadow:0 12px 40px rgba(5,23,31,0.52);--hero-shimmer:rgba(170,255,248,0.14);--wotd-bg-start:#1E7490;--wotd-bg-end:#0E5C63;--announce-bg-start:#22A6A1;--announce-bg-end:#0F766E;--announce-text:#ECFBFF;--levelup-card-start:#F0FEFF;--levelup-card-end:#DFF8FB;--levelup-card-border:rgba(34,166,161,0.18)}
[data-theme="bnw"]{--primary:#E5E7EB;--primary-dark:#111111;--primary-light:#FFFFFF;--primary-lighter:rgba(255,255,255,0.12);--background:#080808;--background-secondary:#141414;--card-bg:#101010;--text-primary:#F5F5F5;--text-secondary:#CFCFCF;--text-light:#8E8E8E;--border-color:#3A3A3A;--tech-grid:rgba(255,255,255,0.06);--tech-glow:rgba(255,255,255,0.08);--tech-ring:rgba(255,255,255,0.04);--levelup-overlay-bg:rgba(10,10,10,0.96);--input-bg:#111111;--btn-secondary-bg:#151515;--btn-secondary-text:#F5F5F5;--btn-secondary-border:#4A4A4A;--btn-primary-border:rgba(255,255,255,0.32);--btn-primary-shadow:0 12px 28px rgba(0,0,0,0.45);--btn-secondary-hover:#1F1F1F;--btn-icon-bg:#171717;--btn-icon-hover:#202020;--btn-icon-border:rgba(255,255,255,0.18);--btn-ghost-hover:rgba(255,255,255,0.08);--correct-bg:rgba(255,255,255,0.08);--incorrect-bg:rgba(255,255,255,0.06);--hero-bg-start:#1A1A1A;--hero-bg-end:#050505;--hero-border:rgba(255,255,255,0.18);--hero-shadow:0 12px 40px rgba(0,0,0,0.65);--hero-shimmer:rgba(255,255,255,0.12);--wotd-bg-start:#1D1D1D;--wotd-bg-end:#070707;--announce-bg-start:#F3F4F6;--announce-bg-end:#D4D4D8;--announce-text:#111111;--levelup-card-start:#FAFAFA;--levelup-card-end:#E5E7EB;--levelup-card-border:rgba(17,17,17,0.18)}
@keyframes pageLiftIn{from{opacity:0;transform:translateY(14px) scale(.996)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes pageSoftIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes sectionLiftIn{from{opacity:0;transform:translateY(12px) scale(.992)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes staggerRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes tapPulse{0%{transform:scale(1)}45%{transform:scale(.992)}100%{transform:scale(1)}}
@keyframes contentSwapIn{from{opacity:.28;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.page-enter{animation:pageLiftIn .34s cubic-bezier(.22,.78,.18,1)}
.page-soft-enter{animation:pageSoftIn .2s ease-out}
.page-enter .hero-card,
.page-enter .theme-banner-wotd,
.page-enter .theme-banner-announce,
.page-enter .quiz-start,
.page-enter .reading-start,
.page-enter .reading-card,
.page-enter .reading-questions,
.page-enter .quiz-header,
.page-enter .quiz-results,
.page-enter .profile-card,
.page-enter .auth-card,
.page-enter .page-header{animation:sectionLiftIn .38s cubic-bezier(.22,.78,.18,1) both}
.stagger-in{opacity:0;animation:staggerRise .34s cubic-bezier(.22,.78,.18,1) forwards;animation-delay:var(--stagger-delay,0ms)}
.motion-pop{animation:tapPulse .28s ease}
.content-swap{animation:contentSwapIn .22s ease-out}
.content-swap-question{animation:contentSwapIn .18s ease-out}
*{margin:0;padding:0;box-sizing:border-box}
html{max-width:100%;overflow-x:hidden}
body{font-family:'Poppins',sans-serif;background-color:var(--background);color:var(--text-primary);min-height:100vh;display:flex;flex-direction:column;transition:background-color 0.3s ease,color 0.3s ease;max-width:100%;overflow-x:hidden}
.home-progressive-loading [data-home-progressive="idle"]{
  content-visibility:auto;
  contain-intrinsic-size:0 360px;
}

/* Internal Starter Placement v1 - gated via ?placementInternal=1 / #starter-placement */
.placement-internal-page {
  min-height: 100dvh;
  width: 100%;
  padding: clamp(16px, 3vw, 34px);
  color: #f5fffb;
  background:
    radial-gradient(circle at 12% 8%, rgba(85, 230, 193, 0.22), transparent 34%),
    radial-gradient(circle at 88% 18%, rgba(96, 165, 250, 0.16), transparent 30%),
    linear-gradient(145deg, #06110f 0%, #071915 48%, #061016 100%);
  overflow-x: hidden;
  box-sizing: border-box;
}

.placement-shell {
  width: min(1040px, 100%);
  margin: 0 auto;
  min-height: calc(100dvh - clamp(32px, 6vw, 68px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}

.placement-shell--question,
.placement-shell--result {
  justify-content: flex-start;
}

.placement-hero-card,
.placement-question-card,
.placement-result-card {
  border: 1px solid color-mix(in srgb, var(--primary, #55e6c1) 38%, rgba(255, 255, 255, 0.16));
  border-radius: clamp(22px, 3vw, 34px);
  background:
    linear-gradient(145deg, rgba(12, 37, 32, 0.94), rgba(8, 18, 27, 0.96)),
    color-mix(in srgb, var(--background-secondary, #0d221d) 82%, #000 18%);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.placement-hero-card,
.placement-result-card {
  padding: clamp(24px, 5vw, 54px);
}

.placement-eyebrow {
  margin: 0 0 10px;
  color: color-mix(in srgb, var(--primary-light, #bbf7d0) 82%, #fff 18%);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.placement-hero-card h1,
.placement-topbar h1,
.placement-result-card h1 {
  margin: 0;
  color: #f8fffd;
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.placement-hero-card h1 {
  font-size: clamp(2.7rem, 8vw, 5.9rem);
}

.placement-topbar h1 {
  font-size: clamp(1.8rem, 4vw, 3.1rem);
}

.placement-result-card h1 {
  font-size: clamp(2rem, 5vw, 4.2rem);
  max-width: 900px;
}

.placement-copy {
  max-width: 720px;
  margin: 16px 0 0;
  color: rgba(245, 255, 251, 0.76);
  font-size: clamp(1rem, 2vw, 1.18rem);
  line-height: 1.65;
}

.placement-result-subtitle {
  display: inline-flex;
  margin: 14px 0 2px;
  padding: 9px 14px;
  border: 1px solid color-mix(in srgb, var(--primary, #55e6c1) 32%, rgba(255, 255, 255, 0.12));
  border-radius: 999px;
  color: color-mix(in srgb, var(--primary-light, #bbf7d0) 88%, #fff 12%);
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.86rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.placement-meta-grid,
.placement-result-main,
.placement-skill-results {
  display: grid;
  gap: 12px;
}

.placement-meta-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: clamp(22px, 4vw, 36px) 0;
}

.placement-meta-grid > div,
.placement-result-main > div,
.placement-skill-results > div,
.placement-notice,
.placement-passage {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.055);
}

.placement-meta-grid > div,
.placement-result-main > div,
.placement-skill-results > div {
  border-radius: 18px;
  padding: 16px;
}

.placement-meta-grid strong,
.placement-result-main strong,
.placement-skill-results strong {
  display: block;
  color: #f7fffb;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
}

.placement-result-main small {
  display: block;
  margin-top: 6px;
  color: color-mix(in srgb, var(--primary-light, #bbf7d0) 76%, #fff 24%);
  font-size: 0.86rem;
  font-weight: 800;
}

.placement-meta-grid span,
.placement-result-main span,
.placement-skill-results span,
.placement-skill-results small {
  display: block;
  color: rgba(245, 255, 251, 0.66);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.placement-primary-btn,
.placement-secondary-btn,
.placement-back-btn,
.placement-pill {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  font-weight: 900;
}

.placement-primary-btn,
.placement-secondary-btn,
.placement-back-btn {
  cursor: pointer;
  transition: transform 0.16s ease, opacity 0.16s ease, border-color 0.16s ease;
}

.placement-primary-btn {
  min-height: 54px;
  padding: 0 28px;
  color: #062019;
  background: linear-gradient(135deg, var(--primary-light, #bbf7d0), var(--primary, #55e6c1));
  box-shadow: 0 18px 38px color-mix(in srgb, var(--primary, #55e6c1) 22%, transparent);
}

.placement-secondary-btn,
.placement-back-btn {
  min-height: 44px;
  padding: 0 18px;
  color: #f5fffb;
  background: rgba(255, 255, 255, 0.08);
}

.placement-primary-btn:hover,
.placement-secondary-btn:hover,
.placement-back-btn:hover,
.placement-option:hover {
  transform: translateY(-1px);
}

.placement-primary-btn:disabled,
.placement-secondary-btn:disabled {
  cursor: not-allowed;
  opacity: 0.42;
  transform: none;
}

.placement-back-btn {
  align-self: flex-start;
}

.placement-warning {
  margin: 14px 0 0;
  color: #fde68a;
}

.placement-topbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
}

.placement-pill {
  padding: 10px 14px;
  color: #cffafe;
  background: rgba(14, 165, 233, 0.12);
  white-space: nowrap;
}

.placement-question-card {
  padding: clamp(18px, 3vw, 32px);
}

.placement-passage {
  max-height: min(32dvh, 280px);
  overflow: auto;
  margin-bottom: 18px;
  border-radius: 20px;
  padding: clamp(16px, 2vw, 22px);
  color: rgba(245, 255, 251, 0.78);
  line-height: 1.7;
}

.placement-passage p {
  margin: 0;
}

.placement-question-card h2 {
  margin: 0 0 clamp(18px, 3vw, 28px);
  color: #fff;
  font-size: clamp(1.45rem, 3.4vw, 2.6rem);
  line-height: 1.18;
  letter-spacing: -0.03em;
}

.placement-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.placement-option {
  min-height: 76px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.84);
  color: rgba(245, 255, 251, 0.86);
  text-align: left;
  font-size: clamp(0.95rem, 1.6vw, 1.08rem);
  font-weight: 800;
  line-height: 1.35;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.placement-option.selected {
  color: #041510;
  border-color: var(--primary-light, #bbf7d0);
  background: linear-gradient(135deg, var(--primary-light, #bbf7d0), var(--primary, #55e6c1));
}

.placement-question-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: clamp(18px, 3vw, 28px);
}

.placement-question-actions .placement-primary-btn,
.placement-question-actions .placement-secondary-btn {
  min-width: min(220px, 46%);
}

.placement-result-main {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: clamp(20px, 3vw, 30px) 0 12px;
}

.placement-skill-results {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 14px;
}

.placement-notice {
  border-radius: 18px;
  padding: 15px 16px;
  color: rgba(245, 255, 251, 0.78);
  line-height: 1.55;
  margin-top: 12px;
}

.placement-notice--soft {
  color: #fde68a;
  background: rgba(245, 158, 11, 0.08);
}

.placement-recommendation-card {
  margin-top: 14px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--primary, #55e6c1) 34%, rgba(255, 255, 255, 0.12));
  border-radius: 20px;
  background:
    radial-gradient(circle at 12% 20%, color-mix(in srgb, var(--primary, #55e6c1) 18%, transparent), transparent 42%),
    rgba(255, 255, 255, 0.055);
}

.placement-recommendation-card span {
  display: block;
  color: color-mix(in srgb, var(--primary-light, #bbf7d0) 86%, #fff 14%);
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.placement-recommendation-card p {
  margin: 10px 0 0;
  color: rgba(245, 255, 251, 0.82);
  font-size: 1rem;
  line-height: 1.6;
}

.placement-action-placeholder {
  margin: 14px 10px 0 0;
  opacity: 0.55;
}

@media (max-width: 720px) {
  .placement-internal-page {
    padding: 8px;
  }

  .placement-shell {
    min-height: calc(100dvh - 16px);
    gap: 8px;
  }

  .placement-meta-grid,
  .placement-result-main,
  .placement-skill-results,
  .placement-options,
  .placement-topbar {
    grid-template-columns: 1fr;
  }

  .placement-topbar {
    align-items: stretch;
  }

  .placement-shell--result .placement-back-btn {
    min-height: 36px;
    padding: 0 14px;
    font-size: 0.78rem;
  }

  .placement-result-card {
    padding: 15px;
    border-radius: 22px;
  }

  .placement-result-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 12px 0 8px;
  }

  .placement-skill-results {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 8px;
  }

  .placement-result-main > div,
  .placement-skill-results > div {
    border-radius: 14px;
    padding: 10px;
  }

  .placement-result-main strong,
  .placement-skill-results strong {
    font-size: clamp(1.1rem, 5vw, 1.45rem);
  }

  .placement-result-main span,
  .placement-skill-results span,
  .placement-skill-results small {
    font-size: 0.62rem;
    letter-spacing: 0.06em;
  }

  .placement-pill {
    justify-self: flex-start;
  }

  .placement-question-card {
    padding: 16px;
  }

  .placement-passage {
    max-height: 26dvh;
  }

  .placement-option {
    min-height: 64px;
  }

  .placement-result-card h1 {
    font-size: clamp(1.7rem, 10vw, 2.55rem);
    line-height: 1.02;
  }

  .placement-result-subtitle {
    display: flex;
    width: fit-content;
    max-width: 100%;
    font-size: 0.7rem;
    margin-top: 8px;
    padding: 8px 12px;
  }

  .placement-copy {
    margin-top: 12px;
    font-size: 0.9rem;
    line-height: 1.45;
  }

  .placement-notice {
    border-radius: 14px;
    padding: 10px 12px;
    font-size: 0.8rem;
    line-height: 1.45;
  }

  .placement-recommendation-card {
    margin-top: 8px;
    padding: 12px;
    border-radius: 16px;
  }

  .placement-recommendation-card p {
    margin-top: 6px;
    font-size: 0.82rem;
    line-height: 1.45;
  }

  .placement-action-placeholder {
    margin-top: 8px;
    min-height: 40px;
    padding: 0 14px;
    font-size: 0.78rem;
  }

  .placement-question-actions {
    position: sticky;
    bottom: 10px;
    padding: 10px;
    margin: 16px -8px -8px;
    border-radius: 18px;
    background: rgba(4, 16, 14, 0.9);
  }
}
.home-progressive-ready [data-home-progressive="idle"]{
  content-visibility:auto;
  contain-intrinsic-size:0 360px;
}
#mainPage.home-progressive-loading .hero-card::after,
#mainPage.home-progressive-loading .xp-progress-fill,
#mainPage.home-progressive-loading .daily-goal-progress-fill,
#mainPage.home-progressive-loading .main-home-progress__fill,
#mainPage.home-progressive-loading .tech-bg-grid,
#mainPage.home-progressive-loading .tech-scanline{
  animation:none !important;
  transition:none !important;
}
#mainPage.home-progressive-loading .tech-bg-grid,
#mainPage.home-progressive-loading .tech-scanline{
  opacity:.28;
}
#mainPage.home-progressive-ready [data-home-progressive="idle"]{
  animation:none;
}
.geo-background{position:fixed;top:0;left:0;width:100dvw;height:100%;z-index:-3;animation:geoBackgroundPulse 20s ease-in-out infinite;overflow:hidden;contain:paint}
.geo-background.forest{background:radial-gradient(ellipse at 30% 20%,rgba(45,122,95,0.18),transparent 45%),radial-gradient(ellipse at 75% 80%,rgba(30,90,69,0.22),transparent 40%),linear-gradient(135deg,#09130F 0%,#0F1A17 48%,#173328 100%)}
.geo-background.galaxy{background:radial-gradient(circle at 20% 20%,rgba(124,58,237,0.35),transparent 28%),radial-gradient(circle at 80% 15%,rgba(59,130,246,0.28),transparent 30%),radial-gradient(ellipse at 60% 70%,rgba(109,94,245,0.12),transparent 40%),linear-gradient(135deg,#070A17 0%,#0A0C18 45%,#151B39 100%)}
.geo-background.cosmic{background:radial-gradient(circle at 25% 18%,rgba(45,212,191,0.22),transparent 24%),radial-gradient(circle at 78% 20%,rgba(34,211,238,0.18),transparent 26%),radial-gradient(ellipse at 50% 80%,rgba(22,166,161,0.12),transparent 40%),linear-gradient(135deg,#051017 0%,#07141C 50%,#123040 100%)}
.geo-background.bnw{background:radial-gradient(circle at 20% 20%,rgba(255,255,255,0.08),transparent 24%),radial-gradient(circle at 80% 18%,rgba(255,255,255,0.05),transparent 26%),repeating-linear-gradient(135deg,rgba(255,255,255,0.015) 0 2px,transparent 2px 14px),linear-gradient(135deg,#020202 0%,#0A0A0A 46%,#151515 100%)}
[data-theme="bnw"] .settings-option--primary,
[data-theme="bnw"] .quiz-btn:not(.secondary),
[data-theme="bnw"] .reading-btn.primary,
[data-theme="bnw"] .continue-btn,
[data-theme="bnw"] .auth-btn:not(.secondary),
[data-theme="bnw"] .modal-btn.confirm,
[data-theme="bnw"] .mini-btn.primary,
[data-theme="bnw"] .challenge-submit-btn,
[data-theme="bnw"] .word-popup-speaker,
[data-theme="bnw"] .session-mode-chip.active,
[data-theme="bnw"] .daily-goal-btn{
  color:#111111 !important;
}

/* Performance containment: keep high-change cards from invalidating the full page. */
.card-vfx-target,
.hero-card,
.daily-goal-card,
.main-home-card,
.main-home-mini,
.journey-hub-shell,
.journey-proto-header,
.journey-proto-map-card,
.journey-proto-detail-card,
.progress-section,
.reading-card,
.quiz-start,
.reading-start,
.lab-shop-shell,
.lab-shop-card,
.lab-arena-panel,
.duel-surface,
.duel-expansion-shell,
.settings-more-modal,
.theme-picker-modal {
  contain: content;
}

.card-vfx-target,
.lab-shop-card,
.journey-hub-card,
.main-home-card,
.main-home-quick-card,
.duel-surface,
.lab-arena-panel {
  transform: translateZ(0);
  backface-visibility: hidden;
}

.tsparticles-container,
.englishlab-dock__pill,
.main-home-progress__fill,
.daily-goal-progress-fill,
.progress-fill,
.xp-progress-fill,
.xp-progress-mini-fill,
.hero-card,
.daily-goal-card,
.stat-badge.streak,
.stagger-in {
  will-change: transform, opacity;
}
[data-theme="bnw"] .theme-banner-announce,
[data-theme="bnw"] .theme-banner-announce *,
[data-theme="bnw"] .theme-banner-wotd .wotd-pill,
[data-theme="bnw"] .theme-banner-wotd .wotd-word,
[data-theme="bnw"] .theme-banner-wotd .wotd-link,
[data-theme="bnw"] .theme-banner-wotd .wotd-arrow{
  color:#111111 !important;
}
@keyframes geoBackgroundPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.06)}}
.top-bar{height:70px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;background:var(--card-bg);box-shadow:var(--shadow-sm);position:sticky;top:0;z-index:100;transition:background 0.3s ease;gap:8px;overflow:visible}
.profile-section{display:flex;align-items:center;gap:12px;cursor:pointer;padding:8px 12px;border-radius:50px;transition:all 0.2s ease;flex-shrink:0}
.profile-section:hover{background:var(--background-secondary)}
.avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-light));display:flex;align-items:center;justify-content:center;color:white;font-weight:600;font-size:18px;box-shadow:0 2px 8px rgba(45,122,95,0.3);overflow:hidden}
.user-name{font-weight:600;font-size:15px;color:var(--text-primary)}
.stats-section{display:flex;align-items:center;gap:8px;margin-right:8px;flex-shrink:1;min-width:0;overflow:visible}
.stat-badge{display:flex;align-items:center;gap:8px;padding:12px 20px;background:var(--background-secondary);border-radius:50px;font-weight:600;font-size:15px;transition:all 0.2s ease;border:1px solid transparent}
.stat-badge.streak{color:#FF6B35;background:linear-gradient(135deg,rgba(255,107,53,0.2),rgba(255,107,53,0.08));border-color:rgba(255,107,53,0.4);box-shadow:0 2px 8px rgba(255,107,53,0.15)}
.stat-badge.streak:hover{background:linear-gradient(135deg,rgba(255,107,53,0.3),rgba(255,107,53,0.15));box-shadow:0 4px 16px rgba(255,107,53,0.25);transform:translateY(-1px)}
.stat-badge.xp{color:#FFB800;background:linear-gradient(135deg,rgba(255,184,0,0.2),rgba(255,184,0,0.08));border-color:rgba(255,184,0,0.4);box-shadow:0 2px 8px rgba(255,184,0,0.15)}
.stat-badge.xp:hover{background:linear-gradient(135deg,rgba(255,184,0,0.3),rgba(255,184,0,0.15));box-shadow:0 4px 16px rgba(255,184,0,0.25);transform:translateY(-1px)}
.stat-badge.ecoins{color:#F7D46A;background:linear-gradient(135deg,rgba(247,212,106,0.24),rgba(31,122,92,0.14));border-color:rgba(247,212,106,0.38);box-shadow:0 2px 8px rgba(247,212,106,0.18)}
.stat-badge.ecoins:hover{background:linear-gradient(135deg,rgba(247,212,106,0.32),rgba(31,122,92,0.18));box-shadow:0 4px 16px rgba(247,212,106,0.24);transform:translateY(-1px)}
.stat-badge.ecoins{cursor:pointer;user-select:none}
.stat-badge.ecoins:focus-visible{outline:2px solid rgba(247,212,106,0.78);outline-offset:3px}
.stat-badge.level{background:linear-gradient(135deg,var(--primary-lighter),rgba(45,122,95,0.15));color:var(--primary);border-color:rgba(45,122,95,0.4);box-shadow:0 2px 8px rgba(45,122,95,0.15)}
.stat-badge.level:hover{box-shadow:0 4px 16px rgba(45,122,95,0.25);transform:translateY(-1px)}
.stat-badge .xp-icon{font-size:20px;filter:drop-shadow(0 1px 2px rgba(255,184,0,0.5))}
.stat-badge .ecoin-icon{font-size:18px;filter:drop-shadow(0 1px 3px rgba(247,212,106,0.45));display:inline-block;transform:translateY(-0.5px)}
.stat-badge .streak-icon{
  --streak-flame-outer-1:#ffe29b;
  --streak-flame-outer-2:#ffb43a;
  --streak-flame-outer-3:#f97316;
  --streak-flame-inner-1:#fff8dd;
  --streak-flame-inner-2:#ffd36a;
  --streak-flame-inner-3:#ff9448;
  --streak-flame-spark:#fff0bf;
  --streak-flame-glow:#ffb347;
  width:30px;
  height:30px;
  display:inline-grid;
  place-items:center;
  flex-shrink:0;
  transition:filter 0.5s ease,transform 0.5s ease;
}
.stat-badge .streak-icon svg{
  width:28px;
  height:28px;
  display:block;
}
.stat-badge .streak-icon .streak-flame-stop--outer-1{stop-color:var(--streak-flame-outer-1)}
.stat-badge .streak-icon .streak-flame-stop--outer-2{stop-color:var(--streak-flame-outer-2)}
.stat-badge .streak-icon .streak-flame-stop--outer-3{stop-color:var(--streak-flame-outer-3)}
.stat-badge .streak-icon .streak-flame-stop--inner-1{stop-color:var(--streak-flame-inner-1)}
.stat-badge .streak-icon .streak-flame-stop--inner-2{stop-color:var(--streak-flame-inner-2)}
.stat-badge .streak-icon .streak-flame-stop--inner-3{stop-color:var(--streak-flame-inner-3)}
.stat-badge .streak-icon .flame-spark,
.stat-badge .streak-icon .flame-spark-trail{fill:var(--streak-flame-spark);stroke:var(--streak-flame-spark)}
.stat-badge .streak-icon .flame-core-glow{fill:var(--streak-flame-glow)}

/* ── Streak Fire States ── */
/* DEAD: user belum ngerjain apa-apa hari ini */
.stat-badge.streak.streak-dead{
  color:#6B7A75;
  background:linear-gradient(135deg,rgba(107,122,117,0.15),rgba(107,122,117,0.06));
  border-color:rgba(107,122,117,0.3);
  box-shadow:none;
  transition:all 0.6s ease;
}
.stat-badge.streak.streak-dead:hover{
  background:linear-gradient(135deg,rgba(107,122,117,0.2),rgba(107,122,117,0.1));
  box-shadow:none;
  transform:translateY(-1px);
}
.stat-badge.streak.streak-dead .streak-icon{
  filter:grayscale(1) brightness(0.7);
  animation:none;
  transform:scale(0.92);
}

/* ALIVE: sudah ngerjain aktivitas hari ini */
.stat-badge.streak.streak-alive{
  color:#FF6B35;
  background:linear-gradient(135deg,rgba(255,107,53,0.25),rgba(255,107,53,0.1));
  border-color:rgba(255,107,53,0.5);
  box-shadow:0 2px 12px rgba(255,107,53,0.25),0 0 0 0 rgba(255,107,53,0.4);
  animation:none;
  transition:all 0.6s ease;
}
.stat-badge.streak.streak-alive:hover{
  box-shadow:0 4px 20px rgba(255,107,53,0.4),0 0 24px rgba(255,107,53,0.2);
}
.stat-badge.streak.streak-alive .streak-icon{
  filter:none;
  animation:streakFireDance 1.8s ease-in-out infinite;
}
@keyframes streakFireDance{
  0%,100%{transform:scale(1) rotate(-2deg)}
  25%    {transform:scale(1.12) rotate(2deg)}
  50%    {transform:scale(1.08) rotate(-1deg)}
  75%    {transform:scale(1.14) rotate(3deg)}
}
@keyframes streakGlowPulse{
  0%,100%{box-shadow:0 2px 12px rgba(255,107,53,0.25),0 0 0 0 rgba(255,107,53,0.4)}
  50%    {box-shadow:0 4px 20px rgba(255,107,53,0.35),0 0 16px rgba(255,107,53,0.18)}
}
.stat-badge.streak.streak-alive.streak-tier-base{
  color:#FF6B35;
  background:linear-gradient(135deg,rgba(255,107,53,0.25),rgba(255,107,53,0.1));
  border-color:rgba(255,107,53,0.5);
}
.stat-badge.streak.streak-alive.streak-tier-red{
  color:#FF5D4D;
  background:linear-gradient(135deg,rgba(255,93,77,0.28),rgba(255,93,77,0.1));
  border-color:rgba(255,93,77,0.56);
  box-shadow:0 2px 12px rgba(255,93,77,0.25),0 0 0 0 rgba(255,93,77,0.36);
}
.stat-badge.streak.streak-tier-red .streak-icon{
  --streak-flame-outer-1:#ffd5bf;
  --streak-flame-outer-2:#ff7a59;
  --streak-flame-outer-3:#ef4444;
  --streak-flame-inner-1:#fff0e8;
  --streak-flame-inner-2:#ffb297;
  --streak-flame-inner-3:#ff5e57;
  --streak-flame-spark:#ffe2da;
  --streak-flame-glow:#ff6b57;
}
.stat-badge.streak.streak-alive.streak-tier-purple{
  color:#B566FF;
  background:linear-gradient(135deg,rgba(181,102,255,0.26),rgba(181,102,255,0.1));
  border-color:rgba(181,102,255,0.52);
  box-shadow:0 2px 14px rgba(181,102,255,0.26),0 0 0 0 rgba(181,102,255,0.34);
}
.stat-badge.streak.streak-tier-purple .streak-icon{
  --streak-flame-outer-1:#f3ddff;
  --streak-flame-outer-2:#c084fc;
  --streak-flame-outer-3:#7c3aed;
  --streak-flame-inner-1:#f8efff;
  --streak-flame-inner-2:#ddc2ff;
  --streak-flame-inner-3:#a855f7;
  --streak-flame-spark:#f4e7ff;
  --streak-flame-glow:#b566ff;
}
.stat-badge.streak.streak-alive.streak-tier-blue{
  color:#63AFFF;
  background:linear-gradient(135deg,rgba(99,175,255,0.28),rgba(99,175,255,0.1));
  border-color:rgba(99,175,255,0.52);
  box-shadow:0 2px 14px rgba(99,175,255,0.26),0 0 0 0 rgba(99,175,255,0.32);
}
.stat-badge.streak.streak-tier-blue .streak-icon{
  --streak-flame-outer-1:#ddeeff;
  --streak-flame-outer-2:#60a5fa;
  --streak-flame-outer-3:#1d4ed8;
  --streak-flame-inner-1:#f2f8ff;
  --streak-flame-inner-2:#b9d8ff;
  --streak-flame-inner-3:#3b82f6;
  --streak-flame-spark:#edf6ff;
  --streak-flame-glow:#6cb6ff;
}
.stat-badge.streak.streak-alive.streak-tier-red .streak-icon{
  filter:none;
}
.stat-badge.streak.streak-alive.streak-tier-purple .streak-icon{
  filter:none;
}
.stat-badge.streak.streak-alive.streak-tier-blue .streak-icon{
  filter:none;
}
/* Smooth transition saat status berubah */
.stat-badge.streak{transition:color 0.6s ease,background 0.6s ease,border-color 0.6s ease}
.streak-celebration-overlay{
  position:fixed;
  inset:0;
  z-index:2200;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  overflow:hidden;
}
.streak-celebration-overlay.show{display:flex}
.streak-celebration-backdrop{
  position:absolute;
  inset:0;
  border:none;
  background:rgba(2,6,12,0.8);
  backdrop-filter:blur(18px) saturate(.9);
  opacity:0;
  transition:opacity .38s ease;
}
.streak-celebration-overlay.show .streak-celebration-backdrop{opacity:1}
.streak-celebration-card{
  --streak-ring:#FFB347;
  --streak-ring-alt:#FFE29B;
  --streak-glow:rgba(255,179,71,0.34);
  --streak-glow-alt:rgba(255,226,155,0.24);
  --streak-flare:rgba(255,160,62,0.18);
  position:relative;
  z-index:1;
  width:min(760px,calc(100% - 8px));
  padding:28px 28px 24px;
  border-radius:34px;
  border:1px solid rgba(255,255,255,0.08);
  background:
    radial-gradient(circle at top, var(--streak-flare), transparent 34%),
    linear-gradient(180deg,rgba(10,19,28,0.96),rgba(7,14,22,0.985));
  box-shadow:0 34px 90px rgba(0,0,0,0.42),0 0 0 1px rgba(255,255,255,0.04);
  opacity:0;
  transform:translateY(22px) scale(.88);
  filter:blur(6px);
  transition:opacity .42s ease,transform .42s cubic-bezier(.16,1,.3,1),filter .42s ease;
}
.streak-celebration-overlay.show .streak-celebration-card{
  opacity:1;
  transform:translateY(0) scale(1);
  filter:none;
}
.streak-celebration-overlay.is-closing .streak-celebration-backdrop{
  opacity:0;
}
.streak-celebration-overlay.is-closing .streak-celebration-card{
  opacity:0;
  transform:translateY(16px) scale(.94);
  filter:blur(5px);
}
.streak-celebration-card.streak-tier-red{
  --streak-ring:#FF624F;
  --streak-ring-alt:#FFB29F;
  --streak-glow:rgba(255,84,67,0.34);
  --streak-glow-alt:rgba(255,188,170,0.22);
  --streak-flare:rgba(255,88,74,0.18);
}
.streak-celebration-card.streak-tier-purple{
  --streak-ring:#B566FF;
  --streak-ring-alt:#E1C3FF;
  --streak-glow:rgba(181,102,255,0.34);
  --streak-glow-alt:rgba(225,195,255,0.22);
  --streak-flare:rgba(168,85,247,0.18);
}
.streak-celebration-card.streak-tier-blue{
  --streak-ring:#5AA8FF;
  --streak-ring-alt:#D7EBFF;
  --streak-glow:rgba(90,168,255,0.36);
  --streak-glow-alt:rgba(215,235,255,0.22);
  --streak-flare:rgba(59,130,246,0.2);
}
.streak-celebration-close{
  position:absolute;
  top:14px;
  right:14px;
  width:42px;
  height:42px;
  border:none;
  border-radius:999px;
  background:rgba(255,255,255,0.05);
  color:var(--text-primary);
  font-size:26px;
  line-height:1;
  cursor:pointer;
}
.streak-celebration-stage{
  position:relative;
  min-height:430px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,0.06);
  overflow:hidden;
  background:
    radial-gradient(circle at center, rgba(255,255,255,0.03), transparent 45%),
    radial-gradient(circle at center, var(--streak-glow-alt), transparent 40%),
    linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.01));
}
.streak-celebration-halo,
.streak-celebration-flare,
.streak-celebration-ring,
.streak-celebration-core,
.streak-celebration-embers,
.streak-celebration-rays{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.streak-celebration-halo{
  border-radius:999px;
  filter:blur(24px);
}
.streak-celebration-halo--one{
  width:380px;
  height:380px;
  background:radial-gradient(circle,var(--streak-glow),transparent 68%);
  animation:rewardHaloPulse 2.4s ease-in-out 2 both;
}
.streak-celebration-halo--two{
  width:270px;
  height:270px;
  background:radial-gradient(circle,var(--streak-glow-alt),transparent 68%);
  animation:rewardHaloPulse 2.8s ease-in-out 2 reverse both;
}
.streak-celebration-flare{
  border-radius:999px;
  opacity:.72;
  filter:blur(10px);
}
.streak-celebration-flare--left{
  width:220px;
  height:26px;
  background:linear-gradient(90deg,transparent,var(--streak-ring),transparent);
  animation:rewardFlareSwingLeft 2.4s ease-in-out 2 both;
}
.streak-celebration-flare--right{
  width:220px;
  height:26px;
  background:linear-gradient(90deg,transparent,var(--streak-ring-alt),transparent);
  animation:rewardFlareSwingRight 2.6s ease-in-out 2 both;
}
.streak-celebration-flare--top{
  width:34px;
  height:230px;
  background:linear-gradient(180deg,transparent,var(--streak-ring-alt),transparent);
  animation:rewardFlareVertical 2.3s ease-in-out 2 both;
}
.streak-celebration-ring{
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.08);
}
.streak-celebration-ring--outer{
  width:340px;
  height:340px;
  border-color:rgba(255,255,255,0.18);
  box-shadow:0 0 34px var(--streak-glow);
  animation:rewardSpinClockwise 5s linear both;
}
.streak-celebration-ring--inner{
  width:260px;
  height:260px;
  border-style:dashed;
  border-color:rgba(255,255,255,0.2);
  animation:rewardSpinCounter 5s linear both;
}
.streak-celebration-ring--pulse{
  width:182px;
  height:182px;
  border-color:rgba(255,255,255,0.24);
  animation:rewardPulseRing 1.8s ease-in-out 2 both;
}
.streak-celebration-ring--shockwave{
  width:148px;
  height:148px;
  border-color:rgba(255,255,255,0.24);
  animation:rewardShockwave 1.55s ease-out 3 both;
}
.streak-celebration-rays{
  width:340px;
  height:340px;
}
.streak-celebration-ray{
  position:absolute;
  left:50%;
  top:50%;
  width:4px;
  height:146px;
  margin-left:-2px;
  margin-top:-73px;
  border-radius:999px;
  background:linear-gradient(180deg,transparent,var(--streak-ring-alt),transparent);
  opacity:.42;
  animation:rewardRayPulse 1.7s ease-in-out 3 both;
}
.streak-celebration-ray--1{transform:rotate(18deg)}
.streak-celebration-ray--2{transform:rotate(62deg);animation-delay:.35s}
.streak-celebration-ray--3{transform:rotate(108deg);animation-delay:.7s}
.streak-celebration-ray--4{transform:rotate(152deg);animation-delay:1.05s}
.streak-celebration-embers{
  width:390px;
  height:390px;
}
.streak-celebration-ember{
  position:absolute;
  left:50%;
  top:50%;
  width:12px;
  height:12px;
  margin-left:-6px;
  margin-top:-6px;
  border-radius:999px;
  background:radial-gradient(circle,var(--streak-ring-alt),var(--streak-ring));
  box-shadow:0 0 16px var(--streak-glow);
}
.streak-celebration-ember--1{animation:emberOrbitOne 2.3s ease-in-out 2 both}
.streak-celebration-ember--2{animation:emberOrbitTwo 2.05s ease-in-out 2 both}
.streak-celebration-ember--3{animation:emberOrbitThree 2.55s ease-in-out 2 both}
.streak-celebration-ember--4{animation:emberOrbitFour 2.15s ease-in-out 2 both}
.streak-celebration-ember--5{animation:emberOrbitFive 2.65s ease-in-out 2 both}
.streak-celebration-ember--6{animation:emberOrbitSix 2.25s ease-in-out 2 both}
.streak-celebration-ember--7{animation:emberOrbitSeven 2.45s ease-in-out 2 both}
.streak-celebration-ember--8{animation:emberOrbitEight 2.85s ease-in-out 2 both}
.streak-celebration-core{
  width:220px;
  height:220px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 30% 26%, rgba(255,255,255,0.14), transparent 26%),
    radial-gradient(circle at center, rgba(255,255,255,0.08), transparent 58%),
    linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.015));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 18px 40px rgba(0,0,0,0.26);
  animation:rewardCoreLift 1.65s ease-in-out 3 both;
}
.streak-celebration-flame{
  width:176px;
  height:176px;
  display:grid;
  place-items:center;
  animation:rewardFlameGrow 1.35s ease-in-out 3 both;
}
.streak-celebration-flame .streak-flame-svg{
  width:160px;
  height:160px;
}
.streak-flame-svg .flame-shadow{
  fill:rgba(0,0,0,0.24);
  transform-origin:center;
  animation:flameShadowPulse 2.6s ease-in-out infinite;
}
.streak-flame-svg .flame-back{
  transform-origin:center 70%;
  animation:flameSway 2.3s ease-in-out infinite;
}
.streak-flame-svg .flame-core{
  transform-origin:center 72%;
  animation:flameCorePulse 1.8s ease-in-out infinite;
}
.streak-flame-svg .flame-core-glow{
  opacity:.18;
  filter:blur(5px);
  animation:flameGlowPulse 1.8s ease-in-out infinite;
}
.streak-flame-svg .flame-spark--one{
  animation:flameSparkRise 2.1s ease-in-out infinite;
}
.streak-flame-svg .flame-spark--two{
  animation:flameSparkRise 2.1s ease-in-out infinite .45s;
}
.streak-celebration-copy{
  display:grid;
  justify-items:center;
  text-align:center;
  gap:10px;
  margin-top:18px;
}
.streak-celebration-eyebrow{
  font-size:12px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-secondary);
}
.streak-celebration-title{
  font-size:clamp(30px,5vw,48px);
  line-height:1.04;
  font-weight:800;
  color:var(--text-primary);
}
.streak-celebration-message{
  max-width:44ch;
  color:var(--text-secondary);
  line-height:1.72;
  font-size:15px;
}
.streak-celebration-chips{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-top:4px;
}
.streak-celebration-chips span{
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.05);
  color:var(--text-primary);
  font-size:13px;
  font-weight:600;
}
@keyframes flameSway{
  0%,100%{transform:rotate(-2deg) scaleY(.98)}
  50%{transform:rotate(2.5deg) scaleY(1.05)}
}
@keyframes flameCorePulse{
  0%,100%{transform:translateY(0) scale(.96)}
  50%{transform:translateY(-.6px) scale(1.06)}
}
@keyframes flameGlowPulse{
  0%,100%{opacity:.12;transform:scale(.9)}
  50%{opacity:.28;transform:scale(1.14)}
}
@keyframes flameSparkRise{
  0%,100%{opacity:.14;transform:translateY(0) scale(.7)}
  50%{opacity:.92;transform:translateY(-4px) scale(1.05)}
}
@keyframes flameShadowPulse{
  0%,100%{opacity:.2;transform:scaleX(.94)}
  50%{opacity:.32;transform:scaleX(1.08)}
}
@keyframes rewardHaloPulse{
  0%,100%{opacity:.48;transform:translate(-50%,-50%) scale(.92)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}
}
@keyframes rewardSpinClockwise{
  from{transform:translate(-50%,-50%) rotate(0deg)}
  to{transform:translate(-50%,-50%) rotate(360deg)}
}
@keyframes rewardSpinCounter{
  from{transform:translate(-50%,-50%) rotate(360deg)}
  to{transform:translate(-50%,-50%) rotate(0deg)}
}
@keyframes rewardPulseRing{
  0%,100%{opacity:.38;transform:translate(-50%,-50%) scale(.92)}
  50%{opacity:.92;transform:translate(-50%,-50%) scale(1.12)}
}
@keyframes rewardCoreLift{
  0%,100%{transform:translate(-50%,-50%) translateY(0) scale(.96)}
  50%{transform:translate(-50%,-50%) translateY(-6px) scale(1.04)}
}
@keyframes rewardFlameGrow{
  0%,100%{transform:scale(.92) rotate(-4deg);filter:drop-shadow(0 0 16px rgba(255,255,255,0.16))}
  50%{transform:scale(1.08) rotate(4deg);filter:drop-shadow(0 0 28px rgba(255,255,255,0.24))}
}
@keyframes rewardFlareSwingLeft{
  0%,100%{transform:translate(-50%,-50%) rotate(-22deg) scaleX(.86);opacity:.3}
  50%{transform:translate(-50%,-50%) rotate(-8deg) scaleX(1.16);opacity:.82}
}
@keyframes rewardFlareSwingRight{
  0%,100%{transform:translate(-50%,-50%) rotate(24deg) scaleX(.9);opacity:.28}
  50%{transform:translate(-50%,-50%) rotate(10deg) scaleX(1.14);opacity:.78}
}
@keyframes rewardFlareVertical{
  0%,100%{transform:translate(-50%,-50%) scaleY(.82);opacity:.24}
  50%{transform:translate(-50%,-50%) scaleY(1.1);opacity:.68}
}
@keyframes rewardShockwave{
  0%{opacity:.74;transform:translate(-50%,-50%) scale(.78)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(2)}
}
@keyframes rewardRayPulse{
  0%,100%{opacity:.2;height:132px}
  50%{opacity:.64;height:172px}
}
@keyframes emberOrbitOne{
  0%,100%{transform:translate(0,0) scale(.72);opacity:.2}
  30%{transform:translate(76px,-84px) scale(1.18);opacity:1}
  60%{transform:translate(108px,-12px) scale(.9);opacity:.54}
}
@keyframes emberOrbitTwo{
  0%,100%{transform:translate(0,0) scale(.7);opacity:.18}
  35%{transform:translate(-92px,-70px) scale(1.12);opacity:1}
  66%{transform:translate(-112px,16px) scale(.86);opacity:.5}
}
@keyframes emberOrbitThree{
  0%,100%{transform:translate(0,0) scale(.68);opacity:.18}
  30%{transform:translate(10px,-116px) scale(1.2);opacity:1}
  64%{transform:translate(78px,-56px) scale(.92);opacity:.55}
}
@keyframes emberOrbitFour{
  0%,100%{transform:translate(0,0) scale(.7);opacity:.2}
  28%{transform:translate(-14px,98px) scale(1.1);opacity:.9}
  58%{transform:translate(-92px,62px) scale(.86);opacity:.48}
}
@keyframes emberOrbitFive{
  0%,100%{transform:translate(0,0) scale(.7);opacity:.2}
  32%{transform:translate(102px,46px) scale(1.06);opacity:.95}
  62%{transform:translate(44px,106px) scale(.82);opacity:.46}
}
@keyframes emberOrbitSix{
  0%,100%{transform:translate(0,0) scale(.72);opacity:.2}
  26%{transform:translate(-104px,14px) scale(1.08);opacity:.92}
  56%{transform:translate(-40px,-102px) scale(.88);opacity:.5}
}
@keyframes emberOrbitSeven{
  0%,100%{transform:translate(0,0) scale(.72);opacity:.2}
  28%{transform:translate(118px,-26px) scale(1.04);opacity:.9}
  58%{transform:translate(12px,-124px) scale(.9);opacity:.48}
}
@keyframes emberOrbitEight{
  0%,100%{transform:translate(0,0) scale(.72);opacity:.18}
  30%{transform:translate(-118px,-30px) scale(1.08);opacity:.92}
  62%{transform:translate(-8px,126px) scale(.86);opacity:.46}
}
.stat-badge .level-icon{font-size:18px}
.xp-progress-mini{position:absolute;bottom:2px;left:10px;right:10px;height:3px;background:rgba(0,0,0,0.1);border-radius:3px;overflow:hidden}
.xp-progress-mini-fill{height:100%;background:linear-gradient(90deg,#FFD700,#FFB800);border-radius:3px;transition:width 0.5s ease}
.settings-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--btn-icon-bg);border-radius:50%;cursor:pointer;transition:all 0.2s ease;border:1px solid var(--btn-icon-border);color:var(--text-primary);font-size:18px;flex-shrink:0;box-shadow:var(--shadow-sm)}
.settings-icon:hover{background:var(--btn-icon-hover);transform:rotate(30deg);border-color:var(--primary)}
.topbar-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;position:relative}
.notification-bell{position:relative;overflow:visible}
.notification-bell:hover{transform:translateY(-1px)}
.notification-badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#EF4444;color:#fff;border:2px solid var(--card-bg);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;line-height:1;box-shadow:var(--shadow-sm)}
.announcement-card{background:var(--background-secondary);border:1px solid var(--border-color);border-radius:16px;padding:16px 18px;min-width:0;overflow:hidden;transition:background .2s ease,border-color .2s ease,box-shadow .2s ease,opacity .2s ease}
.announcement-card.unread{border-color:var(--primary);box-shadow:0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent),0 0 22px color-mix(in srgb, var(--primary) 18%, transparent)}
.announcement-card.read{opacity:.78;background:color-mix(in srgb, var(--background-secondary) 88%, #000 12%)}
.announcement-card.archived{opacity:.72}
.announcement-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:8px;min-width:0}
.announcement-card-top > div:first-child{min-width:0;flex:1}
.announcement-card-title{font-size:16px;font-weight:700;color:var(--text-primary);overflow-wrap:anywhere;word-break:break-word}
.announcement-card-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.announcement-pill{font-size:11px;font-weight:700;padding:5px 9px;border-radius:999px;background:var(--btn-icon-bg);border:1px solid var(--border-color);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.4px}
.announcement-card-message{font-size:14px;line-height:1.7;color:var(--text-primary);margin-bottom:12px;white-space:pre-line;overflow-wrap:anywhere;word-break:break-word}
.announcement-card-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.announcement-switch{display:inline-flex;align-items:center;justify-content:center;padding:9px 14px;border-radius:999px;border:1px solid var(--border-color);background:var(--btn-secondary-bg);color:var(--text-primary);font:600 13px 'Poppins',sans-serif;cursor:pointer;transition:all .2s ease}
.announcement-switch:hover{border-color:var(--primary);transform:translateY(-1px)}
.announcement-switch.active{background:var(--primary-lighter);border-color:var(--primary);color:var(--primary)}
.announcement-switch.archive{min-width:98px}
.speaker-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--btn-icon-bg);border-radius:50%;cursor:pointer;transition:all 0.2s ease;border:1px solid var(--btn-icon-border);color:var(--text-primary);flex-shrink:0;box-shadow:var(--shadow-sm)}
.speaker-btn:hover{background:var(--btn-icon-hover);border-color:var(--primary)}
.settings-panel{position:absolute;top:calc(100% + 8px);right:0;background:color-mix(in srgb,var(--card-bg) 94%, #ffffff 6%);border-radius:20px;padding:10px;box-shadow:0 28px 60px rgba(0,0,0,0.28);display:none;z-index:1300;min-width:200px;border:1px solid rgba(255,255,255,0.08);backdrop-filter:blur(18px)}
.settings-panel.show{display:grid;gap:8px;animation:slideDown 0.2s ease}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
.settings-option{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;color:var(--text-primary);transition:all 0.15s ease;border:1px solid transparent;background:none;width:100%;text-align:left;font-family:inherit}
.settings-option:hover{background:var(--background-secondary);border-color:var(--btn-icon-border)}
.settings-option.danger{color:#EF4444}
.settings-panel__header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 2px 2px}
.settings-panel__eyebrow{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}
.settings-panel__close{width:30px;height:30px;border:none;border-radius:50%;background:var(--background-secondary);color:var(--text-secondary);cursor:pointer;font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center}
.settings-panel__close:hover{color:var(--text-primary);background:rgba(255,255,255,0.08)}
.settings-option--compact{justify-content:space-between;padding:13px 14px;border-radius:16px;background:rgba(255,255,255,0.03);border-color:rgba(255,255,255,0.06)}
.settings-option--compact:hover{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.1)}
.settings-option-main{display:inline-flex;align-items:center;gap:10px;min-width:0}
.settings-chip{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);font-size:11px;font-weight:800;letter-spacing:.04em;color:var(--text-secondary)}
.settings-volume-card{display:grid;gap:10px;padding:13px 14px;border-radius:18px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06)}
.settings-volume-head{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px;font-weight:700;color:var(--text-primary)}
.settings-volume-card input[type="range"]{width:100%;cursor:pointer;accent-color:var(--primary)}
.settings-sound-card{gap:12px}
.settings-sound-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.settings-mini-action{
  min-width:0;
  border:none;
  border-radius:14px;
  padding:12px 12px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 18%, transparent),color-mix(in srgb,var(--primary-light) 12%, transparent));
  color:var(--text-primary);
  font:700 13px 'Poppins',sans-serif;
  cursor:pointer;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background-color .22s ease,color .22s ease,opacity .22s ease;
  border:1px solid color-mix(in srgb,var(--primary) 20%, transparent);
  box-shadow:0 10px 22px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.04);
}
.settings-mini-action:hover{
  background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 28%, transparent),color-mix(in srgb,var(--primary-light) 18%, transparent));
  border-color:color-mix(in srgb,var(--primary) 38%, transparent);
  box-shadow:0 14px 28px rgba(0,0,0,0.16),0 0 18px color-mix(in srgb,var(--primary) 14%, transparent);
}
.settings-option--primary{justify-content:center;border-radius:16px;background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;border-color:transparent;box-shadow:0 16px 30px rgba(45,122,95,0.22)}
.settings-option--primary:hover{background:linear-gradient(135deg,var(--primary-light),var(--primary));color:#fff;border-color:transparent}
.settings-refresh-option{justify-content:flex-start;overflow:hidden}
.settings-refresh-option .refresh-icon{font-size:16px;line-height:1;flex-shrink:0}
.settings-refresh-option .refresh-text-wrap{display:flex;align-items:center;gap:8px;max-width:96px;transition:max-width .28s ease,opacity .2s ease}
.settings-refresh-option .refresh-title{white-space:nowrap}
.settings-refresh-option .refresh-version{display:inline-flex;align-items:center;justify-content:center;padding:3px 8px;border-radius:999px;background:var(--background-secondary);border:1px solid var(--btn-icon-border);font-size:11px;font-weight:700;opacity:0;transform:translateX(-6px);transition:opacity .24s ease,transform .24s ease}
.settings-refresh-option.expanded .refresh-text-wrap,
.settings-refresh-option:hover .refresh-text-wrap{max-width:220px}
.settings-refresh-option.expanded .refresh-version,
.settings-refresh-option:hover .refresh-version{opacity:1;transform:translateX(0)}
.settings-more-modal{width:min(440px,92vw);max-width:440px;max-height:calc(100dvh - 120px);padding:0;text-align:left;border:1px solid rgba(255,255,255,0.08);background:linear-gradient(180deg,color-mix(in srgb,var(--card-bg) 92%, #ffffff 8%) 0%,var(--card-bg) 100%)}
.settings-more-shell{display:grid;gap:16px;padding:22px 18px}
.settings-more-header{display:grid;gap:8px}
.settings-more-kicker{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}
.settings-more-title{font-size:24px;font-weight:800;line-height:1.15;color:var(--text-primary);margin:0}
.settings-more-copy{font-size:14px;line-height:1.65;color:var(--text-secondary);margin:0}
.settings-more-group{display:grid;gap:10px;padding:16px;border-radius:20px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06)}
.settings-more-group-title{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}
.settings-more-option{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:14px 15px;border:none;border-radius:16px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);color:var(--text-primary);font:600 14px 'Poppins',sans-serif;cursor:pointer;text-align:left;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background-color .22s ease,color .22s ease,opacity .22s ease}
.settings-more-option:hover{background:rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.12)}
.settings-more-option.danger{color:#F87171}
.settings-more-refresh .refresh-text-wrap{max-width:220px}
.settings-more-refresh .refresh-version{opacity:1;transform:none}
.settings-more-role-actions{display:grid;gap:10px}
.settings-more-group--help{background:linear-gradient(135deg,rgba(65,204,190,0.08),rgba(44,143,228,0.04),rgba(255,255,255,0.03));border-color:rgba(65,204,190,0.18)}
.settings-more-actions{justify-content:stretch}
.settings-more-actions .modal-btn{width:100%}
.guided-tutorial-active{overflow:hidden}
.guided-tutorial-overlay{position:fixed;inset:0;display:none;z-index:3200;pointer-events:none}
.guided-tutorial-overlay.show{display:block}
.guided-tutorial-backdrop{position:absolute;inset:0;background:rgba(4,12,11,0.5);backdrop-filter:blur(1px)}
.guided-tutorial-spotlight{position:absolute;border-radius:26px;border:1px solid rgba(125,241,232,0.72);background:rgba(125,241,232,0.08);box-shadow:0 0 0 9999px rgba(4,12,11,0.56),0 18px 52px rgba(0,0,0,0.26),0 0 0 1px rgba(255,255,255,0.08) inset,0 0 30px rgba(125,241,232,0.32);transition:top .42s cubic-bezier(.16,1,.3,1),left .42s cubic-bezier(.16,1,.3,1),width .42s cubic-bezier(.16,1,.3,1),height .42s cubic-bezier(.16,1,.3,1),opacity .22s ease;will-change:top,left,width,height,opacity;transform:translate3d(0,0,0);contain:layout style paint}
.guided-tutorial-spotlight::after{content:"";position:absolute;inset:-7px;border-radius:inherit;border:1px solid rgba(125,241,232,0.34);opacity:.9;animation:guidedSpotlightPulse 1.7s ease-in-out infinite;pointer-events:none}
.guided-tutorial-spotlight.is-hidden{opacity:0}
.guided-tutorial-card{position:absolute;width:min(360px,calc(100vw - 24px));padding:18px 18px 16px;border-radius:24px;border:1px solid rgba(125,241,232,0.24);background:linear-gradient(180deg,rgba(17,33,31,0.97) 0%,rgba(12,23,22,0.99) 100%);box-shadow:0 30px 70px rgba(0,0,0,0.32),0 0 32px rgba(65,204,190,0.12);pointer-events:auto;transition:top .42s cubic-bezier(.16,1,.3,1),left .42s cubic-bezier(.16,1,.3,1),transform .24s ease,opacity .22s ease;will-change:top,left,transform,opacity;transform:translate3d(0,0,0);contain:layout style paint}
.guided-tutorial-card--centered{max-width:min(400px,calc(100vw - 24px))}
.guided-tutorial-kicker{margin-bottom:10px;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:rgba(125,241,232,0.88)}
.guided-tutorial-title{margin:0 0 10px;font-size:24px;line-height:1.15;font-weight:800;color:var(--text-primary)}
.guided-tutorial-body{margin:0;font-size:14px;line-height:1.68;color:var(--text-secondary)}
.guided-tutorial-progress{display:flex;align-items:center;gap:8px;margin-top:16px}
.guided-tutorial-dot{width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,0.14);transition:transform .22s ease,background-color .22s ease,opacity .22s ease}
.guided-tutorial-dot.is-active{width:24px;background:linear-gradient(135deg,var(--primary),#6de0ff)}
.guided-tutorial-dot.is-done{background:rgba(125,241,232,0.76)}
.guided-tutorial-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:18px;flex-wrap:wrap}
.guided-tutorial-btn{min-width:88px;padding:11px 16px;border-radius:999px;border:1px solid rgba(255,255,255,0.08);font:700 13px 'Poppins',sans-serif;cursor:pointer;pointer-events:auto}
.guided-tutorial-btn.ghost{background:rgba(255,255,255,0.04);color:var(--text-primary)}
.guided-tutorial-btn.primary{background:linear-gradient(135deg,var(--primary),#58d2ff);color:#06211d;border-color:transparent;box-shadow:0 14px 34px rgba(65,204,190,0.26)}
.guided-tutorial-btn:disabled{opacity:.46;cursor:default}
.guided-tutorial-btn:not(:disabled):hover{transform:translateY(-1px)}
@keyframes guidedSpotlightPulse{0%,100%{transform:scale(1);opacity:.42}50%{transform:scale(1.035);opacity:.95}}
.page-container{max-width:900px;margin:0 auto;padding:30px 20px;width:100%;flex:1}
.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}
.page-title{font-size:28px;font-weight:700;color:var(--text-primary)}
.page-close{padding:10px 20px;background:var(--btn-secondary-bg);border:2px solid var(--btn-secondary-border);border-radius:50px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;color:var(--text-primary);transition:all 0.2s ease}
.page-close:hover{background:var(--primary-lighter);color:var(--primary);border-color:var(--primary)}
.admin-table-shell{
  background:var(--card-bg);
  border:1px solid var(--border-color);
  border-radius:18px;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.admin-table thead th{
  background:var(--background-secondary);
  color:var(--text-secondary);
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.6px;
  border-bottom:1px solid var(--border-color);
}
.admin-table tbody tr{
  background:var(--card-bg);
}
.admin-table tbody tr:nth-child(even){
  background:color-mix(in srgb, var(--card-bg) 85%, var(--background-secondary) 15%);
}
.admin-table tbody td{
  border-bottom:1px solid var(--border-color);
  color:var(--text-primary);
}
.admin-mobile-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.admin-mobile-card{
  background:var(--card-bg);
  border:1px solid var(--border-color);
  border-radius:18px;
  padding:14px;
  box-shadow:var(--shadow-sm);
}
.admin-mobile-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}
.admin-mobile-card-user{min-width:0;flex:1}
.admin-mobile-card-name{
  font-weight:700;
  font-size:15px;
  color:var(--text-primary);
  word-break:break-word;
}
.admin-mobile-card-email{
  margin-top:4px;
  font-size:12px;
  color:var(--text-secondary);
  overflow-wrap:anywhere;
}
.admin-mobile-card-pill{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:48px;
  padding:7px 10px;
  border-radius:999px;
  background:var(--background-secondary);
  border:1px solid var(--border-color);
  color:var(--text-primary);
  font-size:12px;
  font-weight:700;
}
.admin-mobile-card-meta{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-bottom:12px;
}
.admin-mobile-meta-item{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:10px 12px;
  border-radius:14px;
  background:var(--background-secondary);
  border:1px solid var(--border-color);
}
.admin-mobile-meta-item span{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--text-secondary);
}
.admin-mobile-meta-item strong{
  font-size:14px;
  color:var(--text-primary);
}
.admin-mobile-role-row{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:12px;
}
.admin-mobile-inline-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--text-secondary);
}
.admin-mobile-select{
  width:100%;
  padding:11px 12px;
  border-radius:12px;
  border:1px solid var(--border-color);
  background:var(--background-secondary);
  color:var(--text-primary);
  font-size:14px;
}
.admin-mobile-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.admin-mobile-btn{
  border:none;
  border-radius:12px;
  padding:10px 12px;
  color:#fff;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  box-shadow:var(--shadow-sm);
}
.admin-mobile-btn.gold{background:var(--accent-gold);color:#111827}
.admin-mobile-btn.green{background:var(--primary)}
.admin-mobile-btn.blue{background:#2563EB}
.admin-mobile-btn.teal{background:#0F766E}
.admin-mobile-btn.purple{background:#8B5CF6}
.admin-mobile-btn.amber{background:#F59E0B;color:#111827}
.admin-mobile-btn.red{background:#EF4444}
.admin-mobile-btn.red-dark{background:#7F1D1D}
.wordlab-monitor{
  display:grid;
  gap:20px;
}
.wordlab-monitor-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:22px;
  border:1px solid color-mix(in srgb,var(--primary) 35%,var(--border-color));
  border-radius:22px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--primary-lighter) 70%,var(--card-bg)),var(--card-bg));
}
.wordlab-monitor-heading span,
.wordlab-monitor-section-heading span{
  display:block;
  margin-bottom:5px;
  color:var(--primary);
  font-size:11px;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.wordlab-monitor-heading h2,
.wordlab-monitor-section-heading h3{
  margin:0;
  color:var(--text-primary);
}
.wordlab-monitor-heading h2{font-size:27px}
.wordlab-monitor-heading p{
  max-width:670px;
  margin:8px 0 0;
  color:var(--text-secondary);
  font-size:14px;
  line-height:1.65;
}
.wordlab-monitor-filters{
  display:flex;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
  padding:16px;
  border:1px solid var(--border-color);
  border-radius:18px;
  background:var(--card-bg);
}
.wordlab-monitor-filters label{
  display:grid;
  flex:1 1 190px;
  gap:6px;
}
.wordlab-monitor-filters label > span{
  color:var(--text-secondary);
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.wordlab-monitor-filters .quiz-btn{min-height:43px}
.wordlab-monitor-metrics,
.wordlab-monitor-detail-summary{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(145px,1fr));
  gap:12px;
}
.wordlab-monitor-metric{
  display:grid;
  gap:6px;
  min-height:126px;
  padding:17px;
  border:1px solid var(--border-color);
  border-radius:18px;
  background:var(--card-bg);
  box-shadow:var(--shadow-sm);
}
.wordlab-monitor-metric > span{
  color:var(--text-secondary);
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.wordlab-monitor-metric > strong{
  align-self:end;
  color:var(--text-primary);
  font-size:25px;
}
.wordlab-monitor-metric > small{color:var(--text-secondary);line-height:1.45}
.wordlab-monitor-metric.is-success{border-color:rgba(16,185,129,.36);background:linear-gradient(145deg,rgba(16,185,129,.11),var(--card-bg))}
.wordlab-monitor-metric.is-warning{border-color:rgba(245,158,11,.38);background:linear-gradient(145deg,rgba(245,158,11,.11),var(--card-bg))}
.wordlab-monitor-section-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-top:4px;
}
.wordlab-monitor-section-heading h3{font-size:19px}
.wordlab-monitor-section-heading > small{color:var(--text-secondary)}
.wordlab-monitor-weak-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:10px;
}
.wordlab-monitor-weak-card{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  padding:13px 14px;
  border:1px solid var(--border-color);
  border-radius:16px;
  background:var(--background-secondary);
}
.wordlab-monitor-weak-card > span{
  color:var(--text-secondary);
  font-size:11px;
  font-weight:800;
}
.wordlab-monitor-weak-card > div:nth-child(2){display:grid;min-width:0;flex:1;gap:2px}
.wordlab-monitor-weak-card strong{color:var(--text-primary)}
.wordlab-monitor-weak-card small{overflow:hidden;color:var(--text-secondary);text-overflow:ellipsis;white-space:nowrap}
.wordlab-monitor-weak-score{display:grid;text-align:right}
.wordlab-monitor-weak-score strong{font-size:18px}
.wordlab-monitor-student-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:14px;
}
.wordlab-monitor-student-card{
  display:grid;
  gap:13px;
  padding:17px;
  border:1px solid var(--border-color);
  border-radius:20px;
  background:var(--card-bg);
  box-shadow:var(--shadow-sm);
}
.wordlab-monitor-student-card.is-complete{border-top:3px solid #10B981}
.wordlab-monitor-student-card.is-pending{border-top:3px solid #F59E0B}
.wordlab-monitor-student-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.wordlab-monitor-student-head > div{display:grid;min-width:0;gap:3px}
.wordlab-monitor-student-head strong{overflow:hidden;color:var(--text-primary);font-size:15px;text-overflow:ellipsis;white-space:nowrap}
.wordlab-monitor-student-head small{overflow:hidden;color:var(--text-secondary);text-overflow:ellipsis;white-space:nowrap}
.wordlab-monitor-state{
  flex:0 0 auto;
  padding:6px 9px;
  border-radius:999px;
  background:var(--background-secondary);
  color:var(--text-primary);
  font-size:10px;
  font-weight:800;
}
.is-complete .wordlab-monitor-state{background:rgba(16,185,129,.13);color:#10B981}
.is-pending .wordlab-monitor-state{background:rgba(245,158,11,.13);color:#D97706}
.wordlab-monitor-student-meta{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
}
.wordlab-monitor-student-meta span,
.wordlab-monitor-weak-row span{
  padding:5px 8px;
  border:1px solid var(--border-color);
  border-radius:999px;
  background:var(--background-secondary);
  color:var(--text-secondary);
  font-size:10px;
  font-weight:700;
}
.wordlab-monitor-mini-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.wordlab-monitor-mini-grid > div{
  display:grid;
  gap:3px;
  padding:10px;
  border-radius:12px;
  background:var(--background-secondary);
}
.wordlab-monitor-mini-grid span{color:var(--text-secondary);font-size:9px;font-weight:800;text-transform:uppercase}
.wordlab-monitor-mini-grid strong{color:var(--text-primary);font-size:15px}
.wordlab-monitor-weak-row{display:flex;gap:6px;min-height:27px;flex-wrap:wrap}
.wordlab-monitor-weak-row span{border-color:rgba(245,158,11,.25);background:rgba(245,158,11,.09);color:#D97706}
.wordlab-monitor-weak-row span.is-clear{border-color:rgba(16,185,129,.25);background:rgba(16,185,129,.09);color:#10B981}
.wordlab-monitor-detail-btn{width:100%}
.wordlab-monitor-empty,
.wordlab-monitor-loading{
  grid-column:1/-1;
  padding:28px;
  border:1px dashed var(--border-color);
  border-radius:18px;
  color:var(--text-secondary);
  text-align:center;
}
.wordlab-monitor-detail-list{display:grid;gap:9px;margin-top:18px}
.wordlab-monitor-detail-list h4{margin:0;color:var(--text-primary)}
.wordlab-monitor-detail-word{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 12px;
  border:1px solid var(--border-color);
  border-radius:13px;
  background:var(--background-secondary);
}
.wordlab-monitor-detail-word > div{display:grid;gap:2px}
.wordlab-monitor-detail-word strong{color:var(--text-primary)}
.wordlab-monitor-detail-word small,
.wordlab-monitor-detail-word > span{color:var(--text-secondary);font-size:11px}
@media (max-width:700px){
  .wordlab-monitor{gap:16px}
  .wordlab-monitor-heading{display:grid;padding:18px}
  .wordlab-monitor-heading h2{font-size:23px}
  .wordlab-monitor-heading .quiz-btn{width:100%}
  .wordlab-monitor-filters{display:grid;grid-template-columns:1fr;padding:13px}
  .wordlab-monitor-filters label{width:100%}
  .wordlab-monitor-filters .quiz-btn{width:100%}
  .wordlab-monitor-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .wordlab-monitor-metric{min-height:112px;padding:13px}
  .wordlab-monitor-metric > strong{font-size:21px}
  .wordlab-monitor-section-heading{align-items:flex-start;flex-direction:column}
  .wordlab-monitor-weak-grid,.wordlab-monitor-student-grid{grid-template-columns:1fr}
  .wordlab-monitor-student-card{padding:14px}
  .wordlab-monitor-student-head{display:grid}
  .wordlab-monitor-state{justify-self:start}
  .wordlab-monitor-mini-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wordlab-monitor-detail-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wordlab-monitor-detail-word{align-items:flex-start;flex-direction:column}
}
.admin-self-card{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:18px;
  margin-bottom:16px;
  border-radius:20px;
  border:1px solid var(--border-color);
  background:linear-gradient(135deg,var(--primary-lighter),rgba(255,255,255,0.03));
  box-shadow:var(--shadow-sm);
  position:relative;
  overflow:hidden;
}
.admin-self-card::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,0.08),transparent 55%);
}
.admin-self-copy{min-width:0;flex:1}
.admin-self-eyebrow{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.8px;
  color:var(--text-secondary);
  margin-bottom:6px;
}
.admin-self-title{
  font-size:22px;
  font-weight:800;
  color:var(--text-primary);
  line-height:1.2;
}
.admin-self-meta{
  margin-top:6px;
  font-size:13px;
  color:var(--text-secondary);
  overflow-wrap:anywhere;
}
.admin-self-actions{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  min-width:min(100%,380px);
}
#adminPage select,
#adminPage input,
#adminPage textarea{
  border:1px solid var(--border-color);
  background:var(--card-bg);
  color:var(--text-primary);
  box-shadow:var(--shadow-sm);
}
#adminPage button{
  box-shadow:var(--shadow-sm);
}
#adminPage .page-header{
  gap:12px;
  flex-wrap:wrap;
}
#adminContent > div:not(.admin-table-shell){
  border:1px solid var(--border-color);
  border-radius:18px;
}
.appearance-studio-card label{
  display:grid;
  gap:6px;
  color:var(--text-secondary);
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
}
.appearance-studio-card code{
  color:var(--primary);
  font-weight:800;
}
.appearance-studio-shell{
  display:grid;
  gap:18px;
  padding:20px;
  overflow:hidden;
}
.appearance-studio-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  flex-wrap:wrap;
  padding:18px;
  border:1px solid var(--border-color);
  border-radius:22px;
  background:
    radial-gradient(circle at 0% 0%, rgba(85,230,193,.16), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
}
.appearance-studio-header h3{
  margin:4px 0 8px;
  font-size:clamp(24px,3vw,38px);
  letter-spacing:-.04em;
}
.appearance-studio-header p{
  margin:0;
  max-width:720px;
  color:var(--text-secondary);
  line-height:1.6;
}
.appearance-studio-kicker{
  color:#9ff5dc;
  font-size:11px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.appearance-studio-header-actions,
.appearance-studio-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.appearance-studio-tabs{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.appearance-studio-tab{
  appearance:none;
  display:grid;
  gap:4px;
  padding:14px 16px;
  border:1px solid var(--border-color);
  border-radius:18px;
  background:rgba(255,255,255,.045);
  color:var(--text-primary);
  text-align:left;
  cursor:pointer;
  transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.appearance-studio-tab strong{
  font-size:14px;
  letter-spacing:.02em;
}
.appearance-studio-tab span{
  color:var(--text-secondary);
  font-size:11px;
}
.appearance-studio-tab:hover{
  transform:translateY(-1px);
  border-color:rgba(85,230,193,.42);
}
.appearance-studio-tab.is-active{
  background:linear-gradient(135deg, rgba(85,230,193,.2), rgba(247,212,106,.08));
  border-color:rgba(85,230,193,.55);
  box-shadow:0 14px 34px rgba(0,0,0,.16);
}
.appearance-studio-panel{
  display:none;
}
.appearance-studio-panel.is-active{
  display:block;
}
.appearance-studio-grid,
.appearance-studio-bulk-layout{
  display:grid;
  grid-template-columns:minmax(360px,1.05fr) minmax(300px,.95fr);
  gap:18px;
  align-items:start;
}
.appearance-studio-editor,
.appearance-studio-bulk-layout{
  min-width:0;
}
.appearance-studio-fieldset,
.appearance-studio-guide-card{
  display:grid;
  gap:12px;
  padding:16px;
  border:1px solid var(--border-color);
  border-radius:20px;
  background:rgba(255,255,255,.04);
}
.appearance-studio-fieldset + .appearance-studio-fieldset{
  margin-top:12px;
}
.appearance-studio-fieldset-title{
  color:#feeaa8;
  font-size:11px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.appearance-studio-field-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.appearance-studio-field{
  display:grid;
  gap:7px;
  color:var(--text-secondary);
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
}
.appearance-studio-field > span{
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:10px;
}
.appearance-studio-field.is-hidden,
#appearanceStudioLayerWrap.is-hidden,
#appearanceStudioNameplateWrap.is-hidden{
  display:none !important;
}
.appearance-studio-chip-groups{
  display:grid;
  gap:12px;
}
.appearance-studio-chip-group{
  display:grid;
  gap:7px;
}
.appearance-studio-chip-group > span{
  color:var(--text-secondary);
  font-size:10px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.appearance-studio-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.appearance-studio-chip{
  appearance:none;
  padding:9px 12px;
  border:1px solid var(--border-color);
  border-radius:999px;
  background:rgba(255,255,255,.045);
  color:var(--text-primary);
  font-weight:900;
  font-size:12px;
  cursor:pointer;
}
.appearance-studio-chip.is-active{
  border-color:rgba(85,230,193,.7);
  background:rgba(85,230,193,.16);
  color:#d9fff3;
}
.appearance-studio-context-note{
  display:grid;
  gap:3px;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(85,230,193,.2);
  background:rgba(85,230,193,.08);
}
.appearance-studio-context-note strong{
  color:var(--text-primary);
}
.appearance-studio-context-note span,
.appearance-studio-mini-note,
.appearance-studio-safe-note,
.appearance-studio-preview-foot{
  color:var(--text-secondary);
  font-size:12px;
  line-height:1.6;
}
.appearance-studio-safe-note{
  margin:12px 0 0;
}
.appearance-studio-preview-shell{
  position:sticky;
  top:12px;
  display:grid;
  gap:12px;
  padding:18px;
  border:1px solid rgba(85,230,193,.22);
  border-radius:24px;
  background:
    radial-gradient(circle at 50% 0%, rgba(85,230,193,.12), transparent 42%),
    rgba(15,23,42,.28);
  text-align:center;
}
.appearance-studio-preview-title{
  color:var(--text-secondary);
  font-size:11px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.appearance-studio-preview-stage{
  min-height:230px;
  display:grid;
  place-items:center;
  border:1px dashed rgba(255,255,255,.14);
  border-radius:20px;
  background:rgba(0,0,0,.12);
  padding:14px;
}
.appearance-studio-catalog{
  margin-top:16px;
  border:1px solid var(--border-color);
  border-radius:20px;
  background:rgba(255,255,255,.035);
  overflow:hidden;
}
.appearance-studio-catalog summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  cursor:pointer;
  color:var(--text-primary);
  font-weight:900;
}
.appearance-studio-catalog summary strong{
  color:#9ff5dc;
  font-size:12px;
}
.appearance-studio-catalog-list{
  display:grid;
  gap:10px;
  padding:0 14px 14px;
}
.appearance-studio-catalog-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  border:1px solid var(--border-color);
  border-radius:16px;
  background:rgba(255,255,255,.04);
}
.appearance-studio-catalog-meta{
  color:#f7d46a;
  font-size:12px;
  font-weight:900;
}
.appearance-studio-catalog-sub{
  color:var(--text-secondary);
  font-size:12px;
  overflow-wrap:anywhere;
}
.appearance-studio-catalog-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.appearance-studio-guide-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.appearance-studio-guide-card h4{
  margin:0;
  font-size:22px;
  letter-spacing:-.03em;
}
.appearance-studio-guide-card p,
.appearance-studio-guide-card li{
  color:var(--text-secondary);
  line-height:1.65;
}
.appearance-studio-guide-card ul{
  margin:0;
  padding-left:18px;
}
.appearance-bulk-preview{
  min-height:180px;
  max-height:560px;
  overflow:auto;
  border:1px solid var(--border-color);
  border-radius:18px;
  padding:12px;
  background:rgba(15,23,42,.18);
}
.appearance-bulk-summary{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  padding:8px 10px;
  border:1px solid var(--border-color);
  border-radius:14px;
  margin-bottom:10px;
  color:var(--text-secondary);
  font-size:12px;
  font-weight:800;
}
.appearance-bulk-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:10px;
}
.appearance-bulk-item{
  display:grid;
  gap:8px;
  padding:12px;
  border:1px solid var(--border-color);
  border-radius:16px;
  background:rgba(255,255,255,.04);
}
.appearance-bulk-item.valid{border-color:rgba(85,230,193,.45)}
.appearance-bulk-item.warn{border-color:rgba(254,234,168,.5)}
.appearance-bulk-item.error{border-color:rgba(255,118,117,.58);opacity:.82}
.appearance-bulk-select{
  display:flex !important;
  grid-template-columns:none !important;
  flex-direction:row !important;
  align-items:center;
  justify-content:space-between;
}
.appearance-bulk-status{
  padding:4px 8px;
  border-radius:999px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.appearance-bulk-status.valid{background:rgba(85,230,193,.16);color:#9ff5dc}
.appearance-bulk-status.warn{background:rgba(254,234,168,.16);color:#feeaa8}
.appearance-bulk-status.error{background:rgba(255,118,117,.16);color:#ffaaa8}
.appearance-bulk-avatar{
  display:grid;
  place-items:center;
  min-height:88px;
}
.appearance-bulk-meta{
  display:grid;
  gap:3px;
  color:var(--text-secondary);
  font-size:12px;
  overflow-wrap:anywhere;
}
.appearance-bulk-meta strong{
  color:var(--text-primary);
}
.appearance-bulk-message{
  padding:8px;
  border-radius:12px;
  background:rgba(0,0,0,.18);
  color:var(--text-secondary);
  font-size:11px;
  line-height:1.5;
}
@media (max-width: 860px){
  .appearance-studio-tabs,
  .appearance-studio-grid,
  .appearance-studio-bulk-layout,
  .appearance-studio-guide-grid,
  .appearance-studio-field-grid{
    grid-template-columns:1fr;
  }
  .appearance-studio-preview-shell{
    position:relative;
    top:auto;
  }
  .appearance-studio-catalog-row{
    align-items:flex-start;
    flex-direction:column;
  }
  .appearance-studio-catalog-actions .quiz-btn,
  .appearance-studio-header-actions .quiz-btn,
  .appearance-studio-actions .quiz-btn{
    width:100%;
  }
  .appearance-studio-card > div:nth-child(2){
    grid-template-columns:1fr !important;
  }
  .appearance-studio-card > div:nth-child(2) > div:first-child > div:first-child{
    grid-template-columns:1fr !important;
  }
  .appearance-studio-card > div{
    grid-template-columns:1fr !important;
  }
}
.quiz-start{ text-align:center; padding:40px; background:var(--card-bg); border-radius:var(--radius); box-shadow:var(--shadow-md); }
.quiz-start-icon{font-size:64px;margin-bottom:16px}
.quiz-start h2{font-size:24px;margin-bottom:8px;color:var(--text-primary)}
.quiz-start p{color:var(--text-secondary);margin-bottom:24px}

/* Advanced Quiz Mode Styling */
.quiz-start.advanced-mode {
    /* Distinct background colour using accent purple for advanced mode */
    background: var(--accent-purple);
    color: #fff;
    border: 2px solid var(--accent-purple);
}
.quiz-start.advanced-mode h2,
.quiz-start.advanced-mode p,
.quiz-start.advanced-mode .quiz-info-item span + span {
    color: #fff;
}
.quiz-start.advanced-mode .quiz-start-icon {
    /* Larger icon for emphasis */
    font-size: 72px;
    margin-bottom: 20px;
}
.quiz-start.advanced-mode .quiz-btn {
    background: #fff;
    color: var(--accent-purple);
}
.quiz-start.advanced-mode .quiz-btn:hover {
    background: #F3E8FF;
    color: var(--accent-purple);
}

/* Elite Quiz Mode Styling */
.quiz-start.elite-mode {
    /* Use the gold accent for elite mode and dark text for contrast */
    background: var(--accent-gold);
    color: var(--primary-dark);
    border: 2px solid var(--accent-gold);
}
.quiz-start.elite-mode h2,
.quiz-start.elite-mode p,
.quiz-start.elite-mode .quiz-info-item span + span {
    color: var(--primary-dark);
}
.quiz-start.elite-mode .quiz-start-icon {
    font-size: 72px;
    margin-bottom: 20px;
    color: var(--primary-dark);
}
.quiz-start.elite-mode .quiz-btn {
    background: var(--primary-dark);
    color: var(--accent-gold);
}
.quiz-start.elite-mode .quiz-btn:hover {
    background: var(--primary);
    color: var(--accent-gold);
}
.level-select{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px}
.level-option{padding:14px 16px;border:2px solid var(--border-color);border-radius:var(--radius-sm);text-align:center;cursor:pointer;transition:all 0.2s ease;background:var(--card-bg)}
.level-option:hover{border-color:var(--primary);transform:translateY(-2px)}
.level-option.selected{border-color:var(--primary);background:var(--primary-lighter)}
.level-option-title{font-weight:600;font-size:15px;margin-bottom:2px;color:var(--text-primary)}
.level-option-count{font-size:12px;color:var(--text-secondary)}
.quiz-info{display:flex;justify-content:center;gap:24px;margin-bottom:24px}
.quiz-info-item{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text-secondary)}
.session-mode-card{margin:0 0 22px;padding:16px 18px;border-radius:18px;background:linear-gradient(135deg,rgba(255,255,255,0.06),rgba(255,255,255,0.03));border:1px solid var(--border-color);box-shadow:var(--shadow-sm);text-align:left}
.session-mode-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.session-mode-kicker{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary);font-weight:700}
.session-mode-summary{font-size:14px;font-weight:800;color:var(--text-primary)}
.session-mode-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.session-mode-chip{appearance:none;border:none;border-radius:999px;padding:12px 14px;background:rgba(255,255,255,0.04);border:1px solid var(--border-color);color:var(--text-primary);font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;transition:transform .18s ease,background-color .18s ease,border-color .18s ease,box-shadow .18s ease}
.session-mode-chip:hover{border-color:var(--primary)}
.session-mode-chip.active{background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 92%, #fff),color-mix(in srgb,var(--primary-light) 90%, #fff));color:#08232b;border-color:transparent;box-shadow:0 10px 22px rgba(0,0,0,0.18)}
.session-mode-note{margin-top:12px;font-size:13px;line-height:1.55;color:var(--text-secondary)}
.session-mode-timer{display:inline-flex;align-items:center;justify-content:center;min-width:108px;padding:10px 14px;border-radius:999px;background:color-mix(in srgb,var(--primary) 14%, var(--background-secondary));border:1px solid color-mix(in srgb,var(--primary) 24%, var(--border-color));font-size:15px;font-weight:800;color:var(--text-primary);margin:0 0 16px}
.session-mode-timer--inline{margin:0 0 18px}
.session-mode-timer.warning{border-color:#f59e0b;color:#fbbf24;box-shadow:0 0 0 1px rgba(245,158,11,0.14)}
.session-mode-timer.danger{border-color:#ef4444;color:#fda4af;box-shadow:0 0 0 1px rgba(239,68,68,0.18)}
.quiz-start-insights{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:-4px 0 24px}
.quiz-start-insight-card{padding:14px 16px;border-radius:18px;background:linear-gradient(135deg,rgba(255,255,255,0.06),rgba(255,255,255,0.03));border:1px solid var(--border-color);text-align:left;box-shadow:var(--shadow-sm)}
.quiz-start-insight-card--wide{grid-column:1 / -1}
.quiz-start-insight-label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:6px}
.quiz-start-insight-value{font-size:22px;font-weight:800;color:var(--text-primary);line-height:1.1}
.quiz-start-insight-meta{margin-top:6px;font-size:13px;line-height:1.55;color:var(--text-secondary)}
.quiz-start-insight-chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.quiz-start-insight-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:12px;font-weight:700;color:var(--text-primary)}
.quiz-start-insight-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.quiz-start-insight-btn{border:none;border-radius:999px;padding:10px 14px;background:linear-gradient(135deg,rgba(65,204,190,0.96),rgba(44,143,228,0.92));color:#08131d;font-size:13px;font-weight:800;cursor:pointer;box-shadow:0 10px 22px rgba(0,0,0,0.18)}
.quiz-start-insight-btn.secondary{background:rgba(255,255,255,0.06);color:var(--text-primary);border:1px solid var(--border-color);box-shadow:none}
.quiz-btn{padding:16px 48px;background:linear-gradient(135deg,var(--primary),var(--primary-light));color:white;border:1px solid var(--btn-primary-border);border-radius:50px;font-size:16px;font-weight:600;cursor:pointer;transition:all 0.2s ease;font-family:inherit;box-shadow:var(--btn-primary-shadow)}
.quiz-btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(45,122,95,0.3)}
.quiz-btn.secondary{background:var(--background-secondary);color:var(--text-primary);border:2px solid var(--border-color)}
.quiz-btn.secondary:hover{border-color:var(--primary)}
.quiz-progress{font-size:14px;color:var(--text-secondary);margin-bottom:16px}
.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Quiz Header - Question Container */
.quiz-header {
    background: var(--card-bg);
    border-radius: var(--radius-sm);
    padding: 20px 24px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(255, 255, 255, 0.08);
    animation: quizHeaderFadeIn 0.4s ease-out;
    position:relative;
    overflow:visible;
}

/* Journey map-only override */
.journey-shell--englishlab.journey-shell--map-only{
  padding-bottom:104px;
}

.journey-shell--englishlab .journey-map-stage{
  position:relative;
  min-height:calc(100svh - 154px);
  overflow:hidden;
  border-radius:32px;
  border:1px solid rgba(163,189,214,.16);
  background:rgba(14,26,39,.82);
  box-shadow:0 24px 70px rgba(0,0,0,.42);
  backdrop-filter:blur(18px);
}

.journey-shell--englishlab .journey-map-stage__hud{
  position:absolute;
  left:18px;
  right:18px;
  top:18px;
  z-index:8;
  display:flex;
  justify-content:flex-end;
  pointer-events:none;
}

.journey-shell--englishlab .journey-map-stage__meta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius:999px;
  padding:10px 14px;
  font-size:.9rem;
  color:#eef7ff;
  background:rgba(7,16,24,.72);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 16px 32px rgba(0,0,0,.18);
  backdrop-filter:blur(18px);
}

.journey-shell--englishlab.journey-shell--map-only .journey-map-card{
  min-height:calc(100svh - 154px);
  padding:0;
  border:none;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
}

.journey-shell--englishlab.journey-shell--map-only .journey-map-scroll{
  height:calc(100svh - 154px);
  min-height:620px;
  padding:28px 18px 34px;
  border:none;
  background:
    radial-gradient(circle at top, rgba(94,234,212,.09), transparent 28%),
    radial-gradient(circle at bottom, rgba(251,191,36,.06), transparent 22%),
    rgba(6,16,24,.88);
  border-radius:30px;
}

.journey-shell--englishlab .journey-map__row.is-selected,
.journey-shell--englishlab .journey-map__row.is-popup-closing{
  z-index:8;
}

.journey-shell--englishlab .journey-level-popup{
  --popup-x:-50%;
  position:absolute;
  left:50%;
  bottom:calc(100% + 18px);
  width:min(320px, calc(100vw - 56px));
  padding:16px 16px 14px;
  border-radius:22px;
  color:#eef7ff;
  background:linear-gradient(180deg, rgba(12,24,38,.96), rgba(8,15,26,.92));
  border:1px solid rgba(94,234,212,.18);
  box-shadow:0 22px 44px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.03) inset;
  backdrop-filter:blur(22px);
  transform:translate(var(--popup-x), 14px) scale(.92);
  opacity:0;
  animation:journeyPopupIn 220ms cubic-bezier(.22,1,.36,1) forwards;
}

.journey-shell--englishlab .journey-level-popup::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-8px;
  width:16px;
  height:16px;
  background:linear-gradient(135deg, rgba(8,15,26,.96), rgba(12,24,38,.94));
  border-right:1px solid rgba(94,234,212,.14);
  border-bottom:1px solid rgba(94,234,212,.14);
  transform:translateX(-50%) rotate(45deg);
}

.journey-shell--englishlab .journey-level-popup--left{
  left:0;
  --popup-x:0%;
}

.journey-shell--englishlab .journey-level-popup--left::after{
  left:56px;
  transform:translateX(0) rotate(45deg);
}

.journey-shell--englishlab .journey-level-popup--right{
  left:auto;
  right:0;
  --popup-x:0%;
}

.journey-shell--englishlab .journey-level-popup--right::after{
  left:auto;
  right:56px;
  transform:translateX(0) rotate(45deg);
}

.journey-shell--englishlab .journey-level-popup.is-closing{
  animation:journeyPopupOut 180ms ease forwards;
  pointer-events:none;
}

.journey-shell--englishlab .journey-level-popup__close{
  position:absolute;
  top:10px;
  right:10px;
  width:30px;
  height:30px;
  border:none;
  border-radius:999px;
  color:#d5e3f0;
  background:rgba(255,255,255,.05);
  font-size:18px;
  line-height:1;
}

.journey-shell--englishlab .journey-level-popup__eyebrow{
  margin:0 0 8px;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.68rem;
  color:#89a4b9;
}

.journey-shell--englishlab .journey-level-popup h3{
  margin:0 28px 10px 0;
  font-size:1.15rem;
  line-height:1.15;
  color:#f4fbff;
}

.journey-shell--englishlab .journey-level-popup__body{
  margin:0;
  color:#a8bfd1;
  font-size:.9rem;
  line-height:1.6;
}

.journey-shell--englishlab .journey-level-popup__chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}

.journey-shell--englishlab .journey-level-popup__chips span{
  display:inline-flex;
  align-items:center;
  padding:8px 10px;
  border-radius:999px;
  color:#d7e6f4;
  font-size:.8rem;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}

.journey-shell--englishlab .journey-level-popup__actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:14px;
}

.journey-shell--englishlab .journey-level-popup__actions .primary-button,
.journey-shell--englishlab .journey-level-popup__actions .secondary-button{
  min-height:46px;
  border-radius:15px;
}

.journey-shell--englishlab .journey-level-popup__footnote{
  margin-top:12px;
  color:#86a0b5;
  font-size:.8rem;
  line-height:1.55;
}

@keyframes journeyPopupIn{
  from{opacity:0;transform:translate(var(--popup-x), 14px) scale(.92)}
  to{opacity:1;transform:translate(var(--popup-x), 0) scale(1)}
}

@keyframes journeyPopupOut{
  from{opacity:1;transform:translate(var(--popup-x), 0) scale(1)}
  to{opacity:0;transform:translate(var(--popup-x), 14px) scale(.92)}
}

@media(max-width:960px){
  .journey-shell--englishlab .journey-map-stage{
    border-radius:24px;
  }
  .journey-shell--englishlab .journey-map-stage__hud{
    left:14px;
    right:14px;
    top:14px;
  }
  .journey-shell--englishlab.journey-shell--map-only .journey-map-scroll{
    height:calc(100svh - 148px);
    min-height:560px;
    padding:22px 12px 30px;
    border-radius:24px;
  }
  .journey-shell--englishlab .journey-level-popup{
    width:min(292px, calc(100vw - 34px));
  }
  .journey-shell--englishlab .journey-level-popup__actions{
    grid-template-columns:1fr;
  }
}

@keyframes quizHeaderFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.quiz-header-number {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.quiz-header-question {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.5;
}

.combo-flame-indicator{
  position:absolute;
  top:-14px;
  right:14px;
  z-index:2;
  transition:transform .22s ease, filter .22s ease, opacity .22s ease;
}
.combo-flame-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:8px 12px 8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  background:color-mix(in srgb, var(--card-bg) 85%, #0b1318 15%);
  box-shadow:0 10px 24px rgba(0,0,0,0.26);
  color:#7d868f;
}
.combo-flame-icon{
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:currentColor;
  transform-origin:center bottom;
}
.combo-flame-icon svg{
  width:100%;
  height:100%;
  display:block;
}
.combo-flame-value{
  font-size:13px;
  font-weight:800;
  line-height:1;
  letter-spacing:.01em;
  color:#e9eef2;
}
.combo-flame-indicator.off .combo-flame-pill{
  color:#6d7680;
  border-color:rgba(148,163,184,0.18);
  background:linear-gradient(135deg, rgba(55,65,81,0.58), rgba(17,24,39,0.92));
}
.combo-flame-indicator.warm .combo-flame-pill{
  color:#f59e0b;
  border-color:rgba(245,158,11,0.32);
  background:linear-gradient(135deg, rgba(245,158,11,0.16), rgba(249,115,22,0.1), rgba(15,23,42,0.94));
  box-shadow:0 12px 28px rgba(245,158,11,0.18);
}
.combo-flame-indicator.hot .combo-flame-pill{
  color:#fb923c;
  border-color:rgba(251,146,60,0.4);
  background:linear-gradient(135deg, rgba(251,146,60,0.22), rgba(245,158,11,0.12), rgba(15,23,42,0.94));
  box-shadow:0 14px 30px rgba(251,146,60,0.22);
}
.combo-flame-indicator.purple .combo-flame-pill{
  color:#a855f7;
  border-color:rgba(168,85,247,0.44);
  background:linear-gradient(135deg, rgba(168,85,247,0.24), rgba(99,102,241,0.14), rgba(15,23,42,0.94));
  box-shadow:0 16px 32px rgba(168,85,247,0.24);
}
.combo-flame-indicator.broken .combo-flame-pill{
  color:#94a3b8;
  border-color:rgba(148,163,184,0.28);
  background:linear-gradient(135deg, rgba(71,85,105,0.3), rgba(15,23,42,0.94));
}
.combo-flame-indicator.warm .combo-flame-icon,
.combo-flame-indicator.hot .combo-flame-icon,
.combo-flame-indicator.purple .combo-flame-icon{
  animation:comboFlamePulse 1.05s ease-in-out infinite;
}
.combo-flame-indicator.purple .combo-flame-icon{
  animation-duration:.9s;
}
@keyframes comboFlamePulse{
  0%,100%{transform:scale(1) translateY(0)}
  50%{transform:scale(1.12) translateY(-1px)}
}

/* Hide old quiz-question-number on Quiz page only */
#quizQuestionScreen .quiz-question-number{display:none}

/* Hide quiz-progress on Quiz question screen - redundant with quiz-header */
#quizQuestionScreen .quiz-progress{display:none}
.quiz-question-number{font-size:13px;color:var(--text-secondary);margin-bottom:8px}
.quiz-question{font-size:20px;font-weight:600;margin-bottom:24px;color:var(--text-primary)}
.quiz-options{display:flex;flex-direction:column;gap:12px}
.quiz-option{display:flex;align-items:center;gap:16px;padding:16px 20px;border:2px solid var(--border-color);border-radius:var(--radius-sm);background:var(--card-bg);cursor:pointer;transition:background-color 0.18s ease,border-color 0.18s ease,box-shadow 0.18s ease,opacity 0.18s ease;text-align:left;font-family:inherit;font-size:15px;color:var(--text-primary)}
.quiz-option:hover:not(:disabled){border-color:var(--primary);box-shadow:0 10px 22px rgba(0,0,0,0.16)}
.quiz-option.selected{border-color:var(--primary);background:var(--primary-lighter)}
.quiz-option:disabled{cursor:default}
.quiz-option.correct{border-color:var(--correct-border);background:var(--correct-bg);color:var(--correct-text);box-shadow:0 0 0 1px rgba(34,197,94,0.14)}
.quiz-option.incorrect{border-color:var(--incorrect-border);background:var(--incorrect-bg);color:var(--incorrect-text);box-shadow:0 0 0 1px rgba(239,68,68,0.12)}
.quiz-toolbox{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:0 0 10px;flex-wrap:nowrap}
.quiz-toolbox-label{display:grid;gap:2px;padding:8px 12px;border-radius:16px;background:rgba(255,255,255,0.05);border:1px solid var(--border-color);color:var(--text-secondary);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.quiz-toolbox-label strong{color:var(--text-primary);font-size:12px;letter-spacing:0;text-transform:none}
.quiz-toolbox-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:0;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:none;border-radius:16px;background:linear-gradient(135deg,rgba(85,230,193,0.22),rgba(72,219,251,0.13));border:1px solid rgba(85,230,193,0.26);color:var(--text-primary);font-family:inherit;font-weight:900;cursor:pointer;box-shadow:0 10px 22px rgba(0,0,0,0.16);transition:transform .18s ease,opacity .18s ease,filter .18s ease}
.quiz-toolbox-btn--gold{background:linear-gradient(135deg,rgba(247,212,106,0.24),rgba(255,159,67,0.12));border-color:rgba(247,212,106,0.28)}
.quiz-toolbox-btn--xp{background:linear-gradient(135deg,rgba(59,130,246,0.22),rgba(14,165,233,0.12));border-color:rgba(96,165,250,0.3)}
.quiz-toolbox-btn:not(:disabled):hover{transform:translateY(-2px);filter:saturate(1.08)}
.quiz-toolbox-btn:disabled{opacity:.48;cursor:not-allowed;box-shadow:none}
.quiz-toolbox-icon{font-size:20px;line-height:1}
.quiz-toolbox-count{position:absolute;top:-7px;right:-7px;display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:rgba(0,0,0,0.72);color:#f7d46a;font-size:10px;font-weight:900;border:1px solid rgba(255,255,255,0.18);box-shadow:0 6px 14px rgba(0,0,0,0.22)}
.quiz-top-insight-removed{display:none !important}
.quiz-option.lifeline-hidden{display:none !important}
.quiz-option.skip-ticket-target{box-shadow:0 0 0 2px rgba(247,212,106,0.34),0 0 28px rgba(247,212,106,0.24)}
.quiz-header.skip-ticket-flash{animation:skipTicketPulse .9s cubic-bezier(.2,.8,.2,1)}
@keyframes skipTicketPulse{0%{box-shadow:0 0 0 rgba(247,212,106,0)}35%{box-shadow:0 0 0 4px rgba(247,212,106,0.28),0 0 42px rgba(247,212,106,0.28)}100%{box-shadow:var(--shadow-sm)}}
.option-letter{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--background-secondary);border-radius:8px;font-weight:600;font-size:14px;flex-shrink:0;color:var(--text-primary)}
.quiz-option.correct .option-letter{background:var(--correct-border);color:white}
.quiz-option.incorrect .option-letter{background:var(--incorrect-border);color:white}
.quiz-feedback{padding:16px;border-radius:var(--radius-sm);margin-top:20px;display:none}
.quiz-feedback.show{display:block;animation:fadeIn 0.3s ease}
.quiz-feedback.correct{background:var(--correct-bg);border:1px solid var(--correct-border)}
.quiz-feedback.incorrect{background:var(--incorrect-bg);border:1px solid var(--incorrect-border)}
.feedback-icon{font-size:24px;margin-bottom:8px}
.feedback-title{font-weight:600;font-size:16px;margin-bottom:4px}
.quiz-feedback.correct .feedback-title{color:var(--correct-text)}
.quiz-feedback.incorrect .feedback-title{color:var(--incorrect-text)}
.feedback-explanation{font-size:14px;color:var(--text-secondary)}
.feedback-micro-lesson{margin-top:12px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);display:grid;gap:6px}
.feedback-micro-lesson__title{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-primary)}
.feedback-micro-lesson__lead{font-size:13px;line-height:1.55;color:var(--text-primary)}
.feedback-micro-lesson__body{font-size:13px;line-height:1.6;color:var(--text-secondary)}
.feedback-micro-actions{margin-top:12px;display:flex;flex-wrap:wrap;gap:10px}
.feedback-micro-action-btn{border:none;border-radius:999px;padding:10px 14px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.1);color:var(--text-primary);font-size:12px;font-weight:800;cursor:pointer}
.feedback-micro-action-btn.primary{background:linear-gradient(135deg,rgba(65,204,190,0.96),rgba(44,143,228,0.92));color:#08131d;border:none}
.feedback-micro-action-note{padding:12px 14px;border-radius:16px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);color:var(--text-secondary);font-size:13px;line-height:1.55}
.elish-learning-actions{margin-top:14px;display:grid;gap:10px;padding:12px;border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 12%,transparent),rgba(255,255,255,0.04));border:1px solid color-mix(in srgb,var(--primary) 24%,var(--border-color));box-shadow:0 14px 32px rgba(0,0,0,0.14)}
.elish-learning-card-title{font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--text-primary)}
.elish-learning-intro{margin:0;font-size:13px;line-height:1.55;color:var(--text-secondary)}
.elish-learning-btn{width:max-content;border:none;border-radius:999px;padding:10px 15px;background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--primary) 68%,#ffffff 32%));color:var(--button-text,#08131d);font-family:inherit;font-size:12px;font-weight:900;cursor:pointer;box-shadow:0 12px 28px color-mix(in srgb,var(--primary) 28%,transparent);transition:transform .18s ease,opacity .18s ease,filter .18s ease}
.elish-learning-btn--wide{width:100%;justify-content:center;padding:13px 16px}
.elish-learning-btn:not(:disabled):hover{transform:translateY(-1px);filter:saturate(1.08)}
.elish-learning-btn:disabled{opacity:.68;cursor:wait;transform:none;filter:none}
.elish-learning-status{min-height:16px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary)}
.elish-learning-output{display:grid;gap:10px}
.elish-learning-response{white-space:pre-line;padding:14px 15px;border-radius:16px;background:color-mix(in srgb,var(--card-bg) 78%,#000000 22%);border:1px solid color-mix(in srgb,var(--primary) 20%,var(--border-color));color:var(--text-primary);font-size:13px;line-height:1.7;overflow-wrap:anywhere}
.elish-writing-review{margin-top:16px;padding:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 16%,var(--card-bg)),color-mix(in srgb,var(--background-secondary) 82%,var(--accent-gold) 18%))}
.quiz-nav-buttons{display:flex;justify-content:space-between;margin-top:20px}
.quiz-nav-btn{padding:12px 24px;background:var(--background-secondary);border:none;border-radius:50px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;color:var(--text-primary);transition:all 0.2s ease}
.quiz-nav-btn:hover{background:var(--primary-lighter);color:var(--primary)}
#backQuestionBtnFinal{display:none !important}
.quiz-results{text-align:center;padding:40px}
.results-icon{font-size:72px;margin-bottom:16px}
.results-title{font-size:28px;font-weight:700;margin-bottom:8px;color:var(--text-primary)}
.results-score{font-size:48px;font-weight:700;color:var(--primary);margin-bottom:8px}
.results-score span{font-size:24px;color:var(--text-secondary)}
.results-xp{font-size:20px;font-weight:600;color:var(--accent-gold);margin-bottom:16px}
.results-message{font-size:16px;color:var(--text-secondary);margin-bottom:30px}
.results-buttons{display:flex;gap:16px;justify-content:center}
.micro-lesson-modal-shell{max-width:min(92vw,620px)}
.micro-lesson-shell{display:grid;gap:16px}
.micro-lesson-hero{padding:18px;border-radius:20px;background:linear-gradient(135deg,rgba(65,204,190,0.14),rgba(44,143,228,0.08),rgba(255,255,255,0.03));border:1px solid rgba(255,255,255,0.08);display:grid;gap:12px}
.micro-lesson-tag{display:inline-flex;align-items:center;width:max-content;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.08);color:var(--text-primary);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.micro-lesson-summary{font-size:15px;line-height:1.7;color:var(--text-primary)}
.micro-lesson-stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.micro-lesson-stat{padding:12px 14px;border-radius:16px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);display:grid;gap:4px}
.micro-lesson-stat span{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--text-secondary)}
.micro-lesson-stat strong{font-size:16px;line-height:1.25;color:var(--text-primary)}
.micro-lesson-card{margin-top:0}
.micro-lesson-next{font-size:14px;line-height:1.7;color:var(--text-secondary)}
.micro-lesson-actions{justify-content:flex-end}
.daily-goal-card{
  position:relative;
  overflow:hidden;
  margin-bottom:20px;
  padding:22px 24px;
  border-radius:34px;
  border:1px solid color-mix(in srgb, var(--primary) 18%, var(--border-color));
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--primary-light) 18%, transparent), transparent 34%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--card-bg) 82%, var(--primary) 18%) 0%,
      color-mix(in srgb, var(--background-secondary) 78%, var(--primary-dark) 22%) 48%,
      color-mix(in srgb, var(--card-bg) 90%, #ffffff 10%) 100%);
  color:var(--text-primary);
  box-shadow:var(--shadow-md);
}
.daily-goal-card::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,0.06), transparent 48%);
}
.daily-goal-top,
.daily-goal-meta,
.daily-goal-actions{position:relative;z-index:1}
.daily-goal-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin-bottom:16px;
  flex-wrap:wrap;
}
.daily-goal-kicker{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--text-secondary);
  margin-bottom:8px;
}
.daily-goal-title{
  font-size:24px;
  line-height:1.2;
  margin:0;
  color:var(--text-primary);
}
.daily-goal-reward{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:8px 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  color:var(--text-primary);
  background:var(--btn-icon-bg);
  border:1px solid var(--btn-icon-border);
}
.daily-goal-progress{
  position:relative;
  z-index:1;
  height:14px;
  border-radius:999px;
  background:color-mix(in srgb, var(--background-secondary) 84%, #ffffff 16%);
  overflow:hidden;
}
.daily-goal-progress-fill{
  height:100%;
  width:0;
  border-radius:inherit;
  background:linear-gradient(90deg, var(--primary-light) 0%, var(--primary) 100%);
  box-shadow:0 8px 18px color-mix(in srgb, var(--primary) 36%, transparent);
  transition:width .28s ease;
}
.daily-goal-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:12px;
  font-size:13px;
  font-weight:700;
  color:var(--text-secondary);
}
.daily-goal-copy{
  position:relative;
  z-index:1;
  margin:14px 0 0;
  font-size:14px;
  line-height:1.65;
  color:var(--text-secondary);
}
.daily-goal-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
.daily-goal-btn{
  min-height:42px;
  padding:10px 18px;
  border:none;
  border-radius:999px;
  background:var(--primary);
  color:var(--background);
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  box-shadow:var(--btn-primary-shadow);
}
.daily-goal-btn:hover{
  transform:translateY(-1px);
}
.daily-goal-btn.secondary{
  background:var(--btn-secondary-bg);
  color:var(--btn-secondary-text);
  border:1px solid var(--btn-secondary-border);
  box-shadow:none;
}
.daily-goal-card.goal-complete{
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--correct-text) 20%, transparent), transparent 34%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--card-bg) 80%, var(--correct-border) 20%) 0%,
      color-mix(in srgb, var(--background-secondary) 74%, var(--correct-border) 26%) 48%,
      color-mix(in srgb, var(--card-bg) 90%, #ffffff 10%) 100%);
  border-color:color-mix(in srgb, var(--correct-border) 30%, var(--border-color));
  box-shadow:var(--shadow-md);
}
.daily-goal-card.goal-complete .daily-goal-progress-fill{
  background:linear-gradient(90deg, var(--correct-text) 0%, var(--correct-border) 100%);
  box-shadow:0 8px 18px color-mix(in srgb, var(--correct-border) 32%, transparent);
}
.reading-start{text-align:center;padding:40px;background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow-md)}
.reading-card{background:var(--card-bg);border-radius:var(--radius);padding:30px;margin-bottom:24px;box-shadow:var(--shadow-md)}
.reading-title{font-size:24px;font-weight:700;margin-bottom:8px;color:var(--text-primary)}
.reading-level{font-size:14px;color:var(--text-secondary);margin-bottom:20px}
.reading-text{font-size:17px;line-height:1.8;color:var(--text-primary)}
.reading-text .reading-token{padding:2px 4px;border-radius:4px;transition:all 0.15s ease}
.reading-text .word{cursor:pointer;padding:2px 4px;border-radius:4px;transition:all 0.15s ease}
.reading-text .word:hover{background:var(--primary-lighter);color:var(--primary)}
.reading-questions{background:var(--card-bg);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow-md)}
.reading-questions-title{font-size:20px;font-weight:600;margin-bottom:20px;color:var(--text-primary)}
.reading-question{margin-bottom:24px}
.reading-question-text{font-size:16px;font-weight:600;margin-bottom:12px;color:var(--text-primary)}
.reading-options{display:flex;flex-direction:column;gap:8px}
.reading-option{padding:14px 18px;border:2px solid var(--border-color);border-radius:var(--radius-sm);background:var(--card-bg);cursor:pointer;transition:background-color 0.18s ease,border-color 0.18s ease,box-shadow 0.18s ease,opacity 0.18s ease;text-align:left;font-family:inherit;font-size:14px;color:var(--text-primary)}
.reading-option:hover:not(:disabled){border-color:var(--primary);box-shadow:0 10px 22px rgba(0,0,0,0.14)}
.reading-option.selected{border-color:var(--primary);background:var(--primary-lighter)}
.reading-option.correct{border-color:var(--correct-border);background:var(--correct-bg);color:var(--correct-text);box-shadow:0 0 0 1px rgba(34,197,94,0.14)}
.reading-option.incorrect{border-color:var(--incorrect-border);background:var(--incorrect-bg);color:var(--incorrect-text);box-shadow:0 0 0 1px rgba(239,68,68,0.12)}

/* Add icons to reading answers to clearly indicate correct/incorrect selections */
.reading-option.correct::after{
    content:'✓';
    color:#22C55E;
    font-weight:700;
    margin-left:8px;
}
.reading-option.incorrect::after{
    content:'✗';
    color:#EF4444;
    font-weight:700;
    margin-left:8px;
}

/* Highlighted words in the passage when showing reasons for answers */
.word.highlight,.reading-token.highlight{
    background:linear-gradient(90deg,#FFF3B0,#FFE58A);
    border-radius:4px;
    padding:2px 4px;
}

/* Advanced Reading Mode Styles */
.reading-start.advanced-mode{
    background: var(--accent-purple);
    color: #fff;
    border: 2px solid var(--accent-purple);
}
/* When in advanced mode, enlarge the icon and ensure text within the card is white */
.reading-start.advanced-mode .quiz-start-icon {
    font-size: 72px;
    margin-bottom: 20px;
    color: #fff;
}
.reading-start.advanced-mode h2,
.reading-start.advanced-mode p,
.reading-start.advanced-mode .quiz-info-item span + span {
    color: #fff;
}
.reading-start.advanced-mode .reading-btn.primary {
    background: #fff;
    color: var(--accent-purple);
}
.reading-start.advanced-mode .reading-btn.primary:hover {
    background: #F3E8FF;
    color: var(--accent-purple);
}

/* Elite Reading Mode Styles */
.reading-start.elite-mode{
    background: var(--accent-gold);
    color: var(--primary-dark);
    border: 2px solid var(--accent-gold);
}
/* Elite reading card uses a larger icon and consistent dark text for better contrast */
.reading-start.elite-mode .quiz-start-icon {
    font-size: 72px;
    margin-bottom: 20px;
    color: var(--primary-dark);
}
.reading-start.elite-mode h2,
.reading-start.elite-mode p,
.reading-start.elite-mode .quiz-info-item span + span {
    color: var(--primary-dark);
}
.reading-start.elite-mode .reading-btn.primary{
    background:var(--primary-dark);
    color:var(--accent-gold);
}
.reading-start.elite-mode .reading-btn.primary:hover{
    background:var(--primary);
    color:var(--accent-gold);
}
.reading-submit{text-align:center;margin-top:24px}
.reading-buttons{display:flex;gap:12px;justify-content:center;margin-top:20px}
.reading-btn{padding:14px 32px;border-radius:50px;font-size:15px;font-weight:600;cursor:pointer;transition:all 0.2s ease;font-family:inherit}
.reading-btn.primary{background:linear-gradient(135deg,var(--primary),var(--primary-light));color:white;border:1px solid var(--btn-primary-border);box-shadow:var(--btn-primary-shadow)}
.reading-btn.primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(45,122,95,0.28)}
.reading-btn.secondary{background:var(--background-secondary);color:var(--text-primary);border:2px solid var(--border-color)}
.reading-btn.secondary:hover{border-color:var(--primary)}
.reading-build-zone,.reading-build-bank{display:flex;flex-wrap:wrap;gap:10px;padding:14px;border-radius:14px;border:2px dashed var(--border-color);background:var(--background-secondary);min-height:64px}
.reading-build-bank{margin-top:12px;background:var(--card-bg);border-style:solid}
.reading-build-actions{display:flex;justify-content:flex-end;margin-top:12px}
.reading-build-token{padding:10px 14px;border-radius:999px;border:1px solid var(--btn-icon-border);background:var(--card-bg);color:var(--text-primary);font-size:14px;font-weight:600;cursor:pointer;transition:all 0.18s ease}
.reading-build-token:hover{transform:translateY(-1px);border-color:var(--primary);background:var(--primary-lighter)}
.reading-build-slot{display:inline-flex;align-items:center;justify-content:center;min-width:88px;padding:10px 14px;border-radius:999px;border:1px dashed var(--border-color);color:var(--text-light);font-size:13px;background:rgba(255,255,255,0.02)}
.reading-build-feedback{margin-top:14px;padding:12px 16px;border-radius:12px;font-size:14px;font-weight:600}
.listening-controls{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.listening-meta{display:flex;gap:10px;flex-wrap:wrap}
.listening-meta span,.writing-badge{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;background:var(--background-secondary);border:1px solid var(--border-color);font-size:13px;font-weight:600;color:var(--text-primary)}
.listening-instruction{font-size:14px;color:var(--text-secondary);margin-bottom:16px}
.listening-audio-hint{font-size:13px;color:var(--text-secondary);margin:-4px 0 14px;padding:10px 12px;border-radius:12px;background:var(--background-secondary);border:1px solid var(--border-color)}
.listening-transcript{padding:16px 18px;border-radius:14px;background:var(--background-secondary);border:1px solid var(--border-color);font-size:14px;line-height:1.8;color:var(--text-secondary);white-space:pre-line}
.writing-prompt-text{font-size:15px;line-height:1.7;color:var(--text-secondary);margin-bottom:16px}
.writing-checklist{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.writing-checklist-item{padding:10px 12px;border-radius:12px;background:var(--background-secondary);border:1px solid var(--border-color);font-size:14px;color:var(--text-primary)}
.writing-textarea{min-height:220px;resize:vertical;line-height:1.7}
.writing-helper-row{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:10px;font-size:13px;color:var(--text-secondary)}
.writing-feedback-details{margin-top:18px;text-align:left;background:var(--background-secondary);border:1px solid var(--border-color);border-radius:14px;padding:16px 18px;color:var(--text-primary)}
.writing-rubric{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:16px}
.writing-rubric-row{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:12px;background:var(--card-bg);border:1px solid var(--border-color);font-size:13px}
.writing-feedback-details ul{margin:0;padding-left:18px}
.writing-feedback-details li{margin-bottom:8px}
.reading-build-feedback.correct{background:var(--correct-bg);border:1px solid var(--correct-border);color:var(--correct-text)}
.reading-build-feedback.incorrect{background:var(--incorrect-bg);border:1px solid var(--incorrect-border);color:var(--incorrect-text)}
.word-popup{position:fixed;background:var(--card-bg);border-radius:var(--radius-sm);padding:16px;box-shadow:var(--shadow-lg);z-index:1000;display:none;min-width:200px;border:1px solid var(--border-color)}
.word-popup.show{display:block;animation:fadeIn 0.2s ease}
.word-popup-word{font-size:18px;font-weight:700;margin-bottom:4px;color:var(--primary)}
.word-popup-meaning{font-size:14px;margin-bottom:4px;color:var(--text-primary)}
.word-popup-pronunciation{font-size:12px;color:var(--text-secondary);margin-bottom:12px;font-style:italic}
.word-popup-speaker{padding:6px 12px;background:linear-gradient(135deg,var(--primary),var(--primary-light));color:white;border:1px solid var(--btn-primary-border);border-radius:20px;font-size:12px;cursor:pointer;font-family:inherit}
.toast{position:fixed;top:calc(env(safe-area-inset-top,0px) + 18px);left:50%;width:min(560px,calc(100vw - 28px));transform:translate3d(-50%,-120%,0) scale(.98);background:linear-gradient(135deg,rgba(240,245,243,.98),rgba(205,255,232,.96));color:#081510;padding:14px 24px;border:1px solid rgba(255,255,255,.55);border-radius:22px;font-weight:800;font-size:14px;line-height:1.35;text-align:center;z-index:2147482000;opacity:0;transition:transform .28s cubic-bezier(.2,.9,.2,1),opacity .22s ease;box-shadow:0 18px 60px rgba(0,0,0,.36),0 0 0 1px rgba(117,198,160,.18) inset;pointer-events:none;will-change:transform,opacity}
.toast.show{transform:translate3d(-50%,0,0) scale(1);opacity:1}
.toast.toast--success{background:linear-gradient(135deg,var(--primary-light),#d9f99d);color:#06150f;border-color:rgba(255,255,255,.5);box-shadow:0 18px 60px rgba(0,0,0,.36),0 0 28px rgba(117,198,160,.24)}
.toast.toast--reward{background:linear-gradient(135deg,#fff7ad,#64ffda 58%,#7dd3fc);color:#07111f;border-color:rgba(255,255,255,.68);box-shadow:0 20px 70px rgba(0,0,0,.42),0 0 36px rgba(255,215,0,.34)}
.toast.toast--error{background:linear-gradient(135deg,#fecaca,#fb7185);color:#2a0508;border-color:rgba(255,255,255,.52);box-shadow:0 18px 60px rgba(0,0,0,.38),0 0 28px rgba(239,68,68,.22)}
.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);display:none;align-items:center;justify-content:center;z-index:1500;padding:20px;overflow:auto}
.modal-overlay.show{display:flex}
.modal{background:var(--card-bg);border-radius:var(--radius);padding:30px;max-width:400px;width:90%;max-height:calc(100dvh - 40px);text-align:center;animation:scaleIn 0.2s ease;overflow:auto}
@keyframes scaleIn{from{opacity:0;transform:scale(0.9)}to{opacity:1;transform:scale(1)}}
.modal h3{font-size:20px;font-weight:700;margin-bottom:12px;color:var(--text-primary)}
.modal p{font-size:14px;color:var(--text-secondary);margin-bottom:24px}
.modal-buttons{display:flex;gap:12px;justify-content:center}
.modal-btn{padding:12px 28px;border-radius:50px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:all 0.2s ease}
.modal-btn.cancel{background:var(--btn-secondary-bg);color:var(--btn-secondary-text);border:2px solid var(--btn-secondary-border)}
.modal-btn.cancel:hover{border-color:var(--primary);background:var(--primary-lighter)}
.modal-btn.confirm{background:linear-gradient(135deg,var(--primary),var(--primary-light));color:white;border:1px solid var(--btn-primary-border);box-shadow:var(--btn-primary-shadow)}
.modal-btn.confirm:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(45,122,95,0.28)}
.modal-btn.danger{background:#EF4444;color:white;border:1px solid rgba(153,27,27,0.28);box-shadow:0 8px 20px rgba(239,68,68,0.24)}
.modal-btn.danger:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(239,68,68,0.32)}
.admin-action-modal .form-group{margin-bottom:14px}
.admin-action-modal .form-input,
.admin-action-modal textarea,
.admin-action-modal select{width:100%}
.admin-action-modal{
  width:min(760px,96vw) !important;
  max-height:calc(100vh - 40px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.admin-question-editor{
  width:min(880px,96vw) !important;
}
#adminActionModal{
  align-items:flex-start;
  justify-content:center;
}
#adminActionFields{
  flex:1 1 auto;
  min-height:0;
  max-height:calc(100dvh - 220px);
  overflow:auto;
  padding-right:6px;
}
.admin-action-modal .modal-buttons{
  position:sticky;
  bottom:0;
  margin-top:16px;
  padding-top:16px;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, var(--card-bg) 28%);
  justify-content:flex-end;
  flex-wrap:wrap;
}
.admin-action-note{
  margin-top:10px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--border-color);
  background:var(--background-secondary);
  color:var(--text-secondary);
  font-size:13px;
  line-height:1.55;
}
.admin-action-warning{
  color:#FCA5A5;
  border-color:rgba(239,68,68,0.28);
  background:rgba(127,29,29,0.16);
}
.admin-question-form{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding-bottom:8px;
}
.admin-question-form-section{
  padding:16px;
  border:1px solid var(--border-color);
  border-radius:16px;
  background:var(--background-secondary);
}
.admin-question-form-section-title{
  font-size:12px;
  font-weight:800;
  letter-spacing:.7px;
  text-transform:uppercase;
  color:var(--text-secondary);
  margin-bottom:14px;
}
.admin-question-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px;
}
.admin-question-grid-wide{
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
#quizPage,#readingPage{display:none}
#mainPage,#profilePage,#loginPage,#registerPage{display:none}
.main-container{max-width:900px;margin:0 auto;padding:30px 20px;flex:1;width:100%}
.hero-card{
  background:
    radial-gradient(ellipse 70% 80% at 50% 45%, rgba(255,255,255,0.08) 0%, transparent 70%),
    linear-gradient(135deg,var(--hero-bg-start),var(--hero-bg-end));
  border-radius:34px;
  padding:50px 40px;
  text-align:center;
  color:white;
  margin-bottom:30px;
  position:relative;
  overflow:hidden;
  border:1px solid var(--hero-border);
  box-shadow:var(--hero-shadow), 0 0 0 0 var(--primary);
  animation: heroBorderPulse 6s ease-in-out infinite;
}

/* Dot-grid texture overlay */
.hero-card::before{
  content:'';
  position:absolute;
  inset:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity:1;
  pointer-events:none;
}

/* Shimmer sweep — diagonal, clearly visible */
.hero-card::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:3;
  background:linear-gradient(
    115deg,
    transparent     20%,
    rgba(255,255,255,0.10) 38%,
    rgba(255,255,255,0.28) 48%,
    rgba(255,255,255,0.32) 50%,
    rgba(255,255,255,0.28) 52%,
    rgba(255,255,255,0.10) 62%,
    transparent     80%
  );
  transform:translateX(-140%);
  animation:heroShimmerSweep 4.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes heroShimmerSweep{
  0%,30%  { transform:translateX(-140%) }
  65%,100%{ transform:translateX(180%)  }
}

/* Border glow pulse */
@keyframes heroBorderPulse{
  0%,100%{ box-shadow:var(--hero-shadow), 0 0 0px 0px transparent }
  50%    { box-shadow:var(--hero-shadow), 0 0 18px 2px rgba(var(--primary-rgb,45,212,191),0.18) }
}

/* Decorative glowing orb — top-right corner */
.hero-card .hero-deco-orb{
  position:absolute;
  top:-60px;
  right:-60px;
  width:200px;
  height:200px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,0.10) 0%, transparent 70%);
  pointer-events:none;
}

/* Decorative rings */
.hero-card .hero-deco-ring{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.10);
  pointer-events:none;
  animation:heroDRingPulse 8s ease-in-out infinite;
}
.hero-card .hero-deco-ring-1{
  width:260px; height:260px;
  bottom:-100px; left:-80px;
  animation-delay: -2s;
}
.hero-card .hero-deco-ring-2{
  width:160px; height:160px;
  bottom:-50px; left:-20px;
  border-color:rgba(255,255,255,0.07);
  animation-delay: -5s;
}
@keyframes heroDRingPulse{
  0%,100%{ opacity:0.5; transform:scale(1)   }
  50%    { opacity:1;   transform:scale(1.04) }
}

/* ── Hero Card: Premium True-3D Flip ── */
.hero-flip-card{
  padding:0;
  cursor:pointer;
  perspective:1400px;
  min-height:290px;
  transform-origin:center center;
  will-change:transform;
}
.hero-flip-card:focus-visible{outline:2px solid rgba(255,255,255,0.7);outline-offset:4px}
.hero-flip-card::before{display:none}

/* Inner container rotates in 3D */
.hero-flip-inner{
  position:relative;
  width:100%;
  min-height:290px;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  transform-origin:center center;
  transition:transform 0.72s cubic-bezier(0.34,1.12,0.64,1);
  will-change:transform;
}

/* Flipped state = rotate 180deg */
.hero-flip-card.flipped .hero-flip-inner{
  transform:rotateY(180deg);
}

/* Direction-specific flip animation (overrides transition briefly) */
.hero-flip-card.flip-animating-right .hero-flip-inner{
  animation:heroFlipRight 0.72s cubic-bezier(0.34,1.12,0.64,1) forwards;
}
.hero-flip-card.flip-animating-left .hero-flip-inner{
  animation:heroFlipLeft  0.72s cubic-bezier(0.34,1.12,0.64,1) forwards;
}

@keyframes heroFlipRight{
  0%  {transform:rotateY(0deg)   scale(1);    filter:brightness(1)}
  35% {transform:rotateY(-95deg) scale(0.94); filter:brightness(0.78)}
  50% {transform:rotateY(-180deg) scale(0.95);filter:brightness(0.88)}
  72% {transform:rotateY(-178deg) scale(1.01);filter:brightness(1.04)}
  100%{transform:rotateY(-180deg) scale(1);   filter:brightness(1)}
}
@keyframes heroFlipLeft{
  0%  {transform:rotateY(-180deg) scale(1);   filter:brightness(1)}
  35% {transform:rotateY(-85deg)  scale(0.94);filter:brightness(0.78)}
  50% {transform:rotateY(0deg)    scale(0.95);filter:brightness(0.88)}
  72% {transform:rotateY(2deg)    scale(1.01);filter:brightness(1.04)}
  100%{transform:rotateY(0deg)    scale(1);   filter:brightness(1)}
}

/* Each face: absolutely positioned, backface hidden */
.hero-face{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:46px 40px;
  border-radius:var(--radius);
  overflow:hidden;
  background:linear-gradient(135deg,var(--hero-bg-start),var(--hero-bg-end));
  border:1px solid var(--hero-border);
  box-shadow:var(--hero-shadow);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transition:box-shadow 0.3s ease;
}
.hero-face::before{
  content:'';
  position:absolute;
  inset:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity:.45;
}
.hero-face-back::after{content:none}
.hero-face > *{position:relative;z-index:1}

/* Front face: normal position */
.hero-face-front{
  opacity:1;
  visibility:visible;
  transform:rotateY(0deg);
}

/* Back face: pre-rotated 180deg so it faces backward initially */
.hero-face-back{
  justify-content:center;
  align-items:stretch;
  padding:0;
  transform:rotateY(180deg);
  opacity:1;
  visibility:visible;
}

/* Flipped state fully handled by backface-visibility — no extra rules needed */

.hero-flip-hint{margin-top:16px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.74)}

/* Premium mascot: float + breath combined */
.hero-mascot-art{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center center;
  filter:drop-shadow(0 20px 36px rgba(0,0,0,.28)) drop-shadow(0 4px 10px rgba(0,0,0,.18));
  transform-origin:center bottom;
  animation:mascotFloat 5s ease-in-out infinite;
}
@keyframes mascotFloat{
  0%,100%{ transform:scale(1.00) }
  50%    { transform:scale(1.04) }
}
@keyframes heroMascotBreath{0%,100%{transform:scale(1.01)}50%{transform:scale(1.03)}}

/* Hover tilt — subtle only, no rotateX to avoid overflow */
@media (hover: hover) {
  .hero-flip-card{
    transition:transform 0.3s cubic-bezier(.22,.78,.18,1),box-shadow 0.3s ease;
  }
  .hero-flip-card:not(.flip-animating-left):not(.flip-animating-right):hover{
    transform:perspective(1400px) rotateY(calc(var(--hover-tilt,0) * 2deg)) scale(1.004);
    box-shadow:var(--hero-shadow),0 18px 40px rgba(0,0,0,0.28);
  }
}
.theme-banner-wotd{background:linear-gradient(135deg,var(--wotd-bg-start),var(--wotd-bg-end)) !important;color:#fff !important;border:1px solid var(--btn-icon-border);box-shadow:var(--shadow-sm);border-radius:28px}
.theme-banner-announce{background:linear-gradient(135deg,var(--announce-bg-start),var(--announce-bg-end)) !important;color:var(--announce-text) !important;border:1px solid var(--btn-icon-border);box-shadow:var(--shadow-sm);border-radius:28px}
.hero-title{font-size:32px;font-weight:700;margin-bottom:8px;position:relative;z-index:4}
.hero-subtitle{font-size:16px;opacity:0.9;margin-bottom:20px;position:relative;z-index:4}
.level-badge{display:inline-block;padding:6px 16px;background:rgba(255,255,255,0.2);border-radius:50px;font-size:14px;font-weight:600;position:relative;z-index:4}
.xp-progress{
  width:100%;
  max-width:220px;
  height:6px;
  background:rgba(255,255,255,0.15);
  border-radius:99px;
  margin:14px auto 0;
  position:relative;
  z-index:4;
  overflow:hidden;
}
.xp-progress-fill{
  height:100%;
  background:linear-gradient(90deg, rgba(245,158,11,0.7), rgba(251,191,36,0.95), rgba(245,158,11,0.7));
  border-radius:99px;
  transition:width 0.5s ease;
  box-shadow:0 0 8px rgba(251,191,36,0.45);
  background-size:200% 100%;
  animation:xpFillShimmer 3s linear infinite;
}
@keyframes xpFillShimmer{
  0%  { background-position:200% center }
  100%{ background-position:-200% center }
}
.xp-progress-text{font-size:11px;margin-top:6px;opacity:0.65;position:relative;z-index:4;letter-spacing:0.02em}
.cards-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.menu-card{background:var(--card-bg);border-radius:var(--radius);padding:40px 30px;text-align:center;cursor:pointer;transition:all 0.3s ease;box-shadow:var(--shadow-sm);border:2px solid transparent;min-width:0}
.menu-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md),0 0 20px var(--tech-glow);border-color:var(--primary)}
.menu-card:active{transform:translateY(0) scale(.992)}
.menu-card-icon{font-size:56px;margin-bottom:16px;display:block;transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1),filter 0.35s ease;will-change:transform}

/* ─── Card icon: float saat idle, scale+glow saat hover ─── */
.menu-card:hover .menu-card-icon{
  transform:translateY(-6px) scale(1.12);
  filter:drop-shadow(0 8px 16px rgba(0,0,0,0.35)) drop-shadow(0 0 12px var(--tech-glow));
}

/* ─── Staggered idle float animation tiap kartu ─── */
.menu-card:nth-child(odd)  .menu-card-icon{animation:iconFloatA 3.8s ease-in-out infinite}
.menu-card:nth-child(even) .menu-card-icon{animation:iconFloatB 4.2s ease-in-out infinite}
.menu-card:nth-child(3n)   .menu-card-icon{animation:iconFloatA 3.4s ease-in-out infinite;animation-delay:-1.2s}
.menu-card:nth-child(4n)   .menu-card-icon{animation:iconFloatB 4.6s ease-in-out infinite;animation-delay:-0.8s}
.menu-card:hover .menu-card-icon{animation:none} /* berhenti saat hover, biar scale-nya presisi */

@keyframes iconFloatA{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-5px)}
}
@keyframes iconFloatB{
  0%,100%{transform:translateY(-2px)}
  50%    {transform:translateY(3px)}
}

.menu-card-title{font-size:22px;font-weight:700;margin-bottom:8px;color:var(--text-primary);overflow-wrap:anywhere;word-break:break-word}
.menu-card-desc{font-size:14px;color:var(--text-secondary);overflow-wrap:anywhere;word-break:break-word}
.secret-card{position:relative}
.secret-card.locked{opacity:0.72;cursor:not-allowed}
.secret-card.locked:not([class*="card-"]):hover{transform:none;box-shadow:var(--shadow-sm);border-color:transparent}
.secret-lock{position:absolute;top:16px;right:16px;font-size:20px}
.secret-req{position:absolute;bottom:16px;left:16px;right:16px;font-size:12px;color:var(--text-secondary)}
.profile-card{max-width:500px;margin:50px auto;background:var(--card-bg);border-radius:var(--radius-lg);padding:50px 40px;text-align:center;box-shadow:var(--shadow-lg)}
.profile-welcome h1{font-size:26px;margin-bottom:8px;color:var(--text-primary)}
.profile-welcome p{color:var(--text-secondary);margin-bottom:30px}
.avatar-selection{margin-bottom:30px}
.avatar-selection label{display:block;font-size:14px;font-weight:600;color:var(--text-secondary);margin-bottom:12px}
.avatar-options{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.avatar-option{width:56px;height:56px;display:flex;align-items:center;justify-content:center;font-size:28px;border:2px solid var(--border-color);border-radius:50%;cursor:pointer;transition:all 0.2s ease;background:var(--card-bg)}
.avatar-option:hover{border-color:var(--primary);transform:scale(1.1)}
.avatar-option.selected{border-color:var(--primary);background:var(--primary-lighter)}
.name-input-group{margin-bottom:30px}
.name-input-group label{display:block;font-size:14px;font-weight:600;color:var(--text-secondary);margin-bottom:8px}
.name-input{width:100%;padding:16px 20px;border:2px solid var(--border-color);border-radius:var(--radius-sm);font-size:16px;font-family:inherit;outline:none;background:var(--card-bg);color:var(--text-primary);transition:all 0.2s ease;text-align:center}
.name-input:focus{border-color:var(--primary)}
.continue-btn{width:100%;padding:18px 32px;background:linear-gradient(135deg,var(--primary),var(--primary-light));color:white;border:1px solid var(--btn-primary-border);border-radius:50px;font-size:16px;font-weight:600;cursor:pointer;transition:all 0.2s ease;font-family:inherit;box-shadow:var(--btn-primary-shadow)}
.continue-btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(45,122,95,0.3)}
.auth-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;position:relative}
.auth-card{background:var(--card-bg);border-radius:var(--radius-lg);padding:50px 40px;max-width:420px;width:100%;box-shadow:var(--shadow-lg);text-align:center;animation:slideUp 0.5s ease;position:relative;overflow:hidden;transition:background 0.3s ease}
.auth-card::before{content:'';position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,var(--primary),var(--accent-purple))}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.auth-logo{font-size:48px;margin-bottom:16px}
.auth-title{font-size:26px;font-weight:700;color:var(--text-primary);margin-bottom:8px}
.auth-subtitle{color:var(--text-secondary);font-size:15px;margin-bottom:30px}
.auth-form{text-align:left}
.form-group{margin-bottom:20px}
.form-group label{display:block;font-size:14px;font-weight:600;color:var(--text-secondary);margin-bottom:8px}
.form-input{width:100%;padding:14px 16px;border:2px solid var(--border-color);border-radius:var(--radius-sm);font-size:15px;font-family:inherit;transition:all 0.2s ease;outline:none;background:var(--input-bg);color:var(--text-primary)}
.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(45,122,95,0.1)}
.form-input.error{border-color:#EF4444}
.form-error{font-size:12px;color:#EF4444;margin-top:6px;display:none}
.form-error.show{display:block}
.auth-btn{width:100%;padding:16px 32px;background:linear-gradient(135deg,var(--primary),var(--primary-light));color:white;border:1px solid var(--btn-primary-border);border-radius:50px;font-size:16px;font-weight:600;cursor:pointer;transition:all 0.2s ease;font-family:inherit;margin-top:10px;box-shadow:var(--btn-primary-shadow)}
.auth-btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(45,122,95,0.3)}
.auth-btn.secondary{background:var(--btn-secondary-bg);color:var(--btn-secondary-text);border:2px solid var(--btn-secondary-border);box-shadow:none}
.auth-btn.secondary:hover{background:var(--primary-lighter);border-color:var(--primary);box-shadow:var(--shadow-sm)}
.auth-divider{display:flex;align-items:center;margin:24px 0}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border-color)}
.auth-divider span{padding:0 12px;font-size:13px;color:var(--text-light)}
.auth-switch{font-size:14px;color:var(--text-secondary);margin-top:20px}
.auth-switch a{color:var(--primary);font-weight:600;cursor:pointer;text-decoration:none}
.auth-switch a:hover{text-decoration:underline}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:24px}
.stats-card{background:var(--background-secondary);border-radius:var(--radius-sm);padding:20px;text-align:center;transition:all 0.2s ease}
.stats-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.stats-icon{font-size:28px;margin-bottom:8px}
.stats-value{font-size:24px;font-weight:700;color:var(--text-primary);margin-bottom:4px}
.stats-label{font-size:12px;color:var(--text-secondary);font-weight:500;text-transform:uppercase;letter-spacing:0.5px}
.stats-card.highlight{background:linear-gradient(135deg,var(--primary-lighter),rgba(255,255,255,0.04));border:1px solid var(--btn-icon-border)}
.stats-card.highlight .stats-value{color:var(--primary)}
.accuracy-bar{height:10px;background:var(--border-color);border-radius:10px;overflow:hidden;margin-top:8px}
.accuracy-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--primary-light));border-radius:10px;transition:width 0.5s ease}
.level-progress-section{margin-top:24px;padding-top:24px;border-top:1px solid var(--border-color)}
.level-progress-title{font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:12px}
.level-progress-bar{height:14px;background:var(--border-color);border-radius:14px;overflow:hidden;position:relative}
.level-progress-fill{height:100%;background:linear-gradient(90deg,var(--accent-gold),#FFD700);border-radius:14px;transition:width 0.5s ease;position:relative}
.level-progress-fill::after{content:'';position:absolute;right:8px;top:50%;transform:translateY(-50%);width:10px;height:10px;background:white;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,0.2)}
.level-progress-text{display:flex;justify-content:space-between;margin-top:8px;font-size:13px;color:var(--text-secondary)}
.profile-header{display:flex;align-items:center;gap:16px;margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid var(--border-color)}
.profile-avatar-large{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-light));display:flex;align-items:center;justify-content:center;color:white;font-weight:600;font-size:32px;box-shadow:0 4px 15px rgba(45,122,95,0.3);overflow:hidden}
.stats-modal{max-width:760px !important;width:min(92vw,760px);max-height:min(90vh,920px);padding:0;overflow:auto;border:1px solid var(--border-color);background:linear-gradient(180deg,color-mix(in srgb,var(--card-bg) 88%, #ffffff 12%) 0%,var(--card-bg) 100%)}
.stats-modal-shell{padding:26px}
.stats-modal-header{margin-bottom:20px}
.stats-modal-eyebrow{display:inline-flex;align-items:center;padding:7px 11px;border-radius:999px;background:var(--background-secondary);border:1px solid var(--border-color);font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--text-secondary);margin-bottom:12px}
.stats-modal-title{font-size:28px;font-weight:800;color:var(--text-primary);margin-bottom:8px}
.stats-modal-subtitle{font-size:14px;line-height:1.7;color:var(--text-secondary);margin:0}
.stats-hero{display:flex;align-items:center;gap:18px;padding:18px;border-radius:22px;background:linear-gradient(135deg,var(--primary-lighter),rgba(255,255,255,0.03));border:1px solid var(--btn-icon-border);margin-bottom:18px}
.stats-modal[data-profile-theme="theme_neon"]{border-color:rgba(85,230,193,.55);box-shadow:0 0 0 1px rgba(85,230,193,.18),0 24px 80px rgba(0,206,201,.16)}
.stats-modal[data-profile-theme="theme_neon"] .stats-hero{background:radial-gradient(circle at 18% 0%,rgba(85,230,193,.28),transparent 42%),linear-gradient(135deg,rgba(0,206,201,.18),rgba(4,18,15,.82));border-color:rgba(85,230,193,.65);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 32px rgba(85,230,193,.16)}
.stats-modal[data-profile-theme="theme_gold"]{border-color:rgba(247,212,106,.7);box-shadow:0 0 0 1px rgba(247,212,106,.22),0 24px 80px rgba(247,148,29,.16)}
.stats-modal[data-profile-theme="theme_gold"] .stats-hero{position:relative;overflow:hidden;background:radial-gradient(circle at 16% 0%,rgba(255,228,128,.34),transparent 42%),linear-gradient(135deg,rgba(247,212,106,.2),rgba(30,20,8,.85));border-color:rgba(247,212,106,.72);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 34px rgba(247,212,106,.18)}
.stats-modal[data-profile-theme="theme_gold"] .stats-hero::after{content:"";position:absolute;inset:-40% auto -40% -30%;width:28%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:rotate(18deg);animation:themeGoldSheen 4.8s ease-in-out infinite;pointer-events:none}
@keyframes themeGoldSheen{0%,55%{left:-35%;opacity:0}70%{opacity:.9}100%{left:115%;opacity:0}}
.stats-modal[data-profile-theme="theme_sakura"]{border-color:rgba(255,126,179,.58);box-shadow:0 0 0 1px rgba(255,184,209,.18),0 24px 80px rgba(255,126,179,.14)}
.stats-modal[data-profile-theme="theme_sakura"] .stats-hero{background:radial-gradient(circle at 18% 0%,rgba(255,184,209,.3),transparent 42%),linear-gradient(135deg,rgba(255,126,179,.22),rgba(29,16,23,.86));border-color:rgba(255,184,209,.58)}
.stats-modal[data-profile-theme="theme_abyss"]{border-color:rgba(72,219,251,.52);box-shadow:0 0 0 1px rgba(72,219,251,.16),0 24px 80px rgba(3,7,18,.62)}
.stats-modal[data-profile-theme="theme_abyss"] .stats-hero{background:radial-gradient(circle at 20% 0%,rgba(72,219,251,.24),transparent 44%),linear-gradient(135deg,rgba(7,89,133,.2),rgba(3,7,18,.92));border-color:rgba(72,219,251,.52)}
.stats-modal[data-profile-theme="theme_midnight"]{border-color:rgba(196,181,253,.52);box-shadow:0 0 0 1px rgba(162,155,254,.16),0 24px 80px rgba(76,63,201,.16)}
.stats-modal[data-profile-theme="theme_midnight"] .stats-hero{background:radial-gradient(circle at 18% 0%,rgba(196,181,253,.25),transparent 42%),linear-gradient(135deg,rgba(76,63,201,.24),rgba(14,10,30,.88));border-color:rgba(196,181,253,.52)}
.stats-modal[data-profile-theme="theme_emerald"]{border-color:rgba(85,230,193,.52);box-shadow:0 0 0 1px rgba(16,185,129,.16),0 24px 80px rgba(6,95,70,.18)}
.stats-modal[data-profile-theme="theme_emerald"] .stats-hero{background:radial-gradient(circle at 18% 0%,rgba(85,230,193,.25),transparent 42%),linear-gradient(135deg,rgba(16,185,129,.22),rgba(6,26,18,.88));border-color:rgba(85,230,193,.52)}
.stats-modal[data-profile-theme="theme_ruby"]{border-color:rgba(251,113,133,.56);box-shadow:0 0 0 1px rgba(239,68,68,.16),0 24px 80px rgba(239,68,68,.16)}
.stats-modal[data-profile-theme="theme_ruby"] .stats-hero{position:relative;overflow:hidden;background:radial-gradient(circle at 18% 0%,rgba(251,113,133,.28),transparent 42%),linear-gradient(135deg,rgba(239,68,68,.22),rgba(26,7,10,.9));border-color:rgba(251,113,133,.56)}
.stats-modal[data-profile-theme="theme_ruby"] .stats-hero::after{content:"";position:absolute;inset:-30% auto -30% -35%;width:24%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent);transform:rotate(18deg);animation:themeGoldSheen 5.4s ease-in-out infinite;pointer-events:none}
.stats-hero-avatar{width:92px;height:92px;flex-shrink:0;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center}
.stats-hero-copy{flex:1;min-width:0}
.stats-hero-name{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.stats-hero-rank{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.stats-hero-pills{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.stats-hero-pill{padding:12px 14px;border-radius:16px;background:var(--card-bg);border:1px solid var(--border-color);display:flex;flex-direction:column;gap:6px}
.stats-hero-pill span{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text-secondary)}
.stats-hero-pill strong{font-size:18px;color:var(--text-primary)}
.stats-grid-refined{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:0}
.stats-grid-refined .stats-card{padding:16px;border:1px solid var(--border-color);box-shadow:none}
.stats-grid-refined .stats-value{font-size:22px}
.stats-progress-refined{margin-top:18px;padding:18px;border-top:none;border-radius:18px;background:var(--background-secondary);border:1px solid var(--border-color)}
.stats-visual-stack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
.stats-visual-panel{background:var(--background-secondary);border:1px solid var(--border-color);border-radius:18px;padding:16px;min-height:180px}
.stats-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}
.stats-action-btn{padding:13px 16px;border-radius:16px;border:1px solid var(--border-color);font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .2s ease}
.stats-action-btn.gold{background:linear-gradient(135deg,#78350F,#FBBF24);color:#fff;border-color:rgba(251,191,36,0.25)}
.stats-action-btn.cyan{background:linear-gradient(135deg,#164E63,#22D3EE);color:#fff;border-color:rgba(34,211,238,0.25)}
.stats-action-btn.neutral{background:var(--btn-secondary-bg);color:var(--btn-secondary-text);border-color:var(--btn-secondary-border)}
.stats-action-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.stats-close-wrap{margin-top:16px}
.avatar-svg{width:100%;height:100%;display:block}
.avatar-builder-layout{display:grid;grid-template-columns:220px 1fr;gap:18px;align-items:start;margin-bottom:18px}
.avatar-builder-preview-wrap{background:var(--background-secondary);border:1px solid var(--border-color);border-radius:18px;padding:18px}
.avatar-builder-preview{width:180px;height:180px;margin:0 auto}
.avatar-builder-controls{display:flex;flex-direction:column;gap:12px;max-height:420px;overflow:auto;padding-right:4px}
.avatar-builder-section{padding:12px;border:1px solid var(--border-color);border-radius:14px;background:var(--background-secondary)}
.avatar-builder-section h4{font-size:13px;font-weight:700;color:var(--text-primary);margin-bottom:10px;text-transform:uppercase;letter-spacing:.6px}
.avatar-builder-options{display:flex;flex-wrap:wrap;gap:8px}
.avatar-builder-chip{padding:8px 12px;border-radius:999px;border:1px solid var(--btn-icon-border);background:var(--card-bg);color:var(--text-primary);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s ease}
.avatar-builder-chip:hover{border-color:var(--primary);transform:translateY(-1px)}
.avatar-builder-chip.active{background:var(--primary-lighter);border-color:var(--primary);color:var(--primary)}
.profile-info{text-align:left;flex:1}
.profile-name{font-size:22px;font-weight:700;color:var(--text-primary);margin-bottom:4px}
.profile-rank{font-size:13px;color:var(--accent-purple);font-weight:600}
.change-username-section{margin-top:20px;padding-top:20px;border-top:1px solid var(--border-color)}
.change-username-btn{width:100%;padding:12px;background:var(--background-secondary);color:var(--text-primary);border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:all 0.2s ease}
.change-username-btn:hover{background:var(--primary-lighter);border-color:var(--primary)}
.change-username-btn:disabled{opacity:0.5;cursor:not-allowed}
.icon-action-btn{background:var(--btn-icon-bg);border:1px solid var(--btn-icon-border);cursor:pointer;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;transition:all 0.2s ease;color:var(--primary);box-shadow:var(--shadow-sm)}
.icon-action-btn:hover{background:var(--btn-icon-hover);border-color:var(--primary);transform:translateY(-1px)}
.icon-action-btn.subtle{color:var(--text-secondary)}
.mini-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:999px;font-weight:600;cursor:pointer;transition:all 0.2s ease;font-family:inherit;font-size:14px}
.mini-btn.primary{background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;border:1px solid var(--btn-primary-border);box-shadow:var(--btn-primary-shadow)}
.mini-btn.primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(45,122,95,0.28)}
.mini-btn.secondary{background:var(--btn-secondary-bg);color:var(--btn-secondary-text);border:2px solid var(--btn-secondary-border)}
.mini-btn.secondary:hover{background:var(--primary-lighter);border-color:var(--primary)}
.mini-btn.warning{background:#FEF3C7;color:#92400E;border:2px solid #F59E0B}
.mini-btn.warning:hover{filter:brightness(0.98);transform:translateY(-1px)}
.mini-btn.ghost{background:transparent;color:var(--text-secondary);border:1px solid transparent}
.mini-btn.ghost:hover{background:var(--btn-ghost-hover);color:var(--text-primary)}
.quiz-btn,.reading-btn,.auth-btn,.continue-btn,.mini-btn,.page-close,.settings-option,.settings-more-option,.modal-btn,.icon-action-btn,.change-username-btn,.quiz-nav-btn,.quiz-option,.reading-option,.reading-build-token,.avatar-builder-chip{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background-color .22s ease,color .22s ease,opacity .22s ease}
.quiz-btn:active,.reading-btn:active,.auth-btn:active,.continue-btn:active,.mini-btn:active,.page-close:active,.settings-option:active,.settings-more-option:active,.modal-btn:active,.icon-action-btn:active,.change-username-btn:active,.quiz-nav-btn:active,.quiz-option:active,.reading-option:active,.reading-build-token:active,.avatar-builder-chip:active{transform:scale(.985)}
.streak-fire{display:flex;align-items:center;justify-content:center;gap:6px}
.streak-fire .stats-icon{margin-bottom:0}
.best-streak{font-size:11px;color:var(--text-light);margin-top:4px}
.quiz-score-display{position:absolute;top:20px;right:20px;padding:8px 16px;background:var(--primary-lighter);border-radius:50px;font-size:14px;font-weight:600;color:var(--primary)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@media(max-width:768px){
.modal-overlay{
  align-items:flex-start;
  padding:14px 14px calc(104px + env(safe-area-inset-bottom));
}
.modal{
  width:100%;
  max-height:calc(100dvh - 120px - env(safe-area-inset-bottom));
  padding:22px 18px;
}
.guided-tutorial-card{
  width:calc(100vw - 24px);
  max-width:none;
  padding:16px 15px 15px;
  border-radius:22px;
}
.guided-tutorial-title{
  font-size:21px;
}
.guided-tutorial-body{
  font-size:13px;
  line-height:1.62;
}
.guided-tutorial-actions{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.guided-tutorial-btn{
  min-width:0;
  width:100%;
  padding:11px 10px;
  font-size:12px;
}
.streak-celebration-overlay{
  padding:14px;
}
.streak-celebration-card{
  width:min(100%,calc(100% - 4px));
  padding:20px 18px 18px;
  border-radius:26px;
}
.streak-celebration-stage{
  min-height:320px;
  border-radius:22px;
}
.streak-celebration-halo--one{width:260px;height:260px}
.streak-celebration-halo--two{width:188px;height:188px}
.streak-celebration-ring--outer{width:250px;height:250px}
.streak-celebration-ring--inner{width:188px;height:188px}
.streak-celebration-ring--pulse{width:132px;height:132px}
.streak-celebration-ring--shockwave{width:116px;height:116px}
.streak-celebration-rays{width:250px;height:250px}
.streak-celebration-ray{height:116px;margin-top:-58px}
.streak-celebration-embers{width:270px;height:270px}
.streak-celebration-core{width:148px;height:148px}
.streak-celebration-flame{width:118px;height:118px}
.streak-celebration-flame .streak-flame-svg{width:104px;height:104px}
.streak-celebration-title{font-size:28px}
.streak-celebration-message{font-size:13px;line-height:1.62}
.streak-celebration-chips span{padding:9px 12px;font-size:12px}
#adminActionModal{
  align-items:flex-start;
}
.admin-action-modal{
  width:100% !important;
  max-height:calc(100vh - 28px);
  padding:18px 16px;
}
#adminActionFields{
  max-height:calc(100dvh - 210px);
  padding-right:2px;
}
.admin-action-modal .modal-buttons{
  justify-content:stretch;
}
.admin-action-modal .modal-btn{
  flex:1 1 140px;
}
.admin-question-editor{
  width:100% !important;
}
.admin-question-form{
  gap:12px;
}
.admin-question-form-section{
  padding:14px;
  border-radius:14px;
}
.admin-question-grid,
.admin-question-grid-wide{
  grid-template-columns:1fr;
}
  /* ── Top bar ── */
  .top-bar{padding:0 12px;height:60px;gap:6px}
  .profile-section{padding:6px 8px;gap:8px}
  .user-name{display:none}
  .avatar{width:34px;height:34px;font-size:15px}
  .stats-section{gap:5px;margin-right:6px;flex-shrink:1;min-width:0;overflow:visible}
  .stat-badge{padding:5px 10px;font-size:11px;gap:5px}
  .stat-badge .xp-icon{font-size:14px}
  .stat-badge .ecoin-icon{font-size:13px}
  .stat-badge .streak-icon{width:21px;height:21px}
  .stat-badge .streak-icon svg{width:20px;height:20px}
  .stat-badge .level-icon{font-size:13px}
  .stat-badge.level{display:none}
  .settings-icon{width:34px;height:34px;font-size:16px;flex-shrink:0}
  .speaker-btn{width:34px!important;height:34px!important;flex-shrink:0}
  .topbar-actions{gap:6px}
  .settings-panel{right:0;left:auto;min-width:220px}
  .xp-toast{right:8px;top:70px;font-size:13px;padding:8px 16px}
  .theme-banner-wotd,
  .theme-banner-announce{padding:14px 14px !important}
  .theme-banner-wotd > div,
  .theme-banner-announce > div{align-items:flex-start !important}

  /* ── Page containers ── */
  .main-container{padding:16px 12px}
  .page-container{padding:16px 12px}
  .page-header{display:grid;grid-template-columns:minmax(0,1fr) auto;margin-bottom:16px;gap:10px;align-items:start}
  .page-title{font-size:20px;line-height:1.2;min-width:0}
  .page-close{padding:8px 12px;font-size:12px;min-height:auto;white-space:nowrap;border:none;background:color-mix(in srgb,var(--background-secondary) 82%, #ffffff 18%);color:var(--text-primary);opacity:.92;box-shadow:none}
  .page-close:hover{border:none;background:color-mix(in srgb,var(--background-secondary) 68%, #ffffff 32%);color:var(--text-primary)}

  /* ── Hero card ── */
  .hero-card{padding:28px 18px;margin-bottom:20px}
  .hero-flip-card{padding:0;min-height:236px}
  .hero-flip-inner{min-height:236px}
  .hero-face{padding:28px 18px}
  .hero-face-back{padding:0}
  .hero-title{font-size:21px;line-height:1.3}
  .hero-subtitle{font-size:13px;margin-bottom:14px}
  .level-badge{font-size:13px;padding:5px 14px}
  .xp-progress{max-width:100%}
  .hero-flip-hint{margin-top:12px;font-size:11px}
  .hero-mascot-art{width:100%;height:100%}

  /* ── Menu cards grid ── */
  .cards-grid{grid-template-columns:1fr 1fr;gap:14px}
  .menu-card{padding:18px 14px;border-radius:16px;min-height:auto}
  .menu-card-icon{font-size:38px;margin-bottom:10px}
  .menu-card-title{font-size:15px;margin-bottom:4px}
  .menu-card-desc{font-size:12px;line-height:1.5}
  .secret-req{font-size:11px;bottom:10px;left:10px;right:10px}

  /* ── Level select boxes ── */
  .level-select{grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
  .level-option{padding:12px 10px;border-radius:10px;text-align:center}
  .level-option-title{font-size:13px;margin-bottom:2px}
  .level-option-count{font-size:11px}

  /* ── Quiz start screen ── */
  .quiz-start{padding:22px 16px;border-radius:16px}
  .quiz-start-icon{font-size:44px;margin-bottom:12px}
  .quiz-start h2{font-size:19px;margin-bottom:6px}
  .quiz-start p{font-size:13px;margin-bottom:16px}
  .quiz-info{flex-direction:column;gap:6px;margin-bottom:18px;align-items:flex-start;padding:0 4px}
  .quiz-info-item{font-size:13px;gap:6px}
  .session-mode-card{padding:14px;border-radius:16px;margin-bottom:18px}
  .session-mode-head{align-items:flex-start;flex-direction:column;gap:6px;margin-bottom:10px}
  .session-mode-summary{font-size:13px}
  .session-mode-picker{gap:8px}
  .session-mode-chip{padding:11px 12px;font-size:12px}
  .session-mode-note{margin-top:10px;font-size:12px}
  .session-mode-timer{width:100%;justify-content:center;font-size:14px;padding:10px 12px;margin:0 0 14px}
  .quiz-btn{padding:13px 32px;font-size:15px;width:100%;border-radius:12px}
  .quiz-btn.secondary{width:auto}

  /* ── Quiz question screen ── */
  .quiz-score-display{top:12px;right:12px;padding:6px 12px;font-size:13px}
  .quiz-header{padding:14px 16px;margin-bottom:16px;border-radius:12px}
  .quiz-header-number{font-size:11px;margin-bottom:6px}
  .quiz-header-question{font-size:16px;line-height:1.5}
  .quiz-options{gap:10px}
  .quiz-option{padding:13px 14px;font-size:14px;gap:10px;border-radius:10px}
  .option-letter{width:28px;height:28px;font-size:13px;border-radius:6px}
  .quiz-feedback{padding:14px;border-radius:10px;margin-top:14px}
  .quiz-start-insights{grid-template-columns:1fr;gap:10px;margin:-2px 0 18px}
  .quiz-start-insight-card{padding:13px 14px;border-radius:16px}
  .quiz-start-insight-value{font-size:20px}
  .quiz-start-insight-actions{flex-direction:column}
  .quiz-start-insight-btn{width:100%;text-align:center}
  .feedback-icon{font-size:20px;margin-bottom:6px}
  .feedback-title{font-size:14px}
  .feedback-explanation{font-size:13px}
  .feedback-micro-actions{flex-direction:column}
  .feedback-micro-action-btn{width:100%;text-align:center}
  .quiz-nav-buttons{flex-wrap:wrap;gap:8px;margin-top:14px}
  .quiz-nav-btn{padding:10px 18px;font-size:13px;flex:1;text-align:center}

  /* ── Quiz results ── */
  .quiz-results{padding:28px 18px;border-radius:16px}
  .results-icon{font-size:56px;margin-bottom:12px}
  .results-title{font-size:22px;margin-bottom:6px}
  .results-score{font-size:40px;margin-bottom:6px}
  .results-score span{font-size:20px}
  .results-xp{font-size:17px;margin-bottom:12px}
  .results-message{font-size:14px;margin-bottom:20px}
  .results-buttons{flex-direction:column;align-items:stretch;gap:10px}
  .results-buttons .quiz-btn{width:100%;border-radius:12px}

  /* ── Reading start screen ── */
  .reading-start{padding:22px 16px;border-radius:16px}
  .reading-buttons{flex-direction:column;gap:10px}
  .reading-btn{width:100%;text-align:center;padding:13px 24px;font-size:15px;border-radius:12px}

  /* ── Reading content ── */
  .reading-card{padding:18px 14px;border-radius:14px;margin-bottom:16px}
  .reading-title{font-size:19px;margin-bottom:6px}
  .reading-level{font-size:13px;margin-bottom:14px}
  .reading-text{font-size:15px;line-height:1.9}
  .reading-questions{padding:18px 14px;border-radius:14px}
  .reading-questions-title{font-size:17px;margin-bottom:14px}
  .reading-question{margin-bottom:18px}
  .reading-question-text{font-size:14px;margin-bottom:10px;line-height:1.5}
  .reading-options{gap:8px}
  .reading-option{padding:12px 14px;font-size:13px;border-radius:10px}
  .reading-submit{margin-top:18px}
  .reading-build-zone,.reading-build-bank{gap:8px;padding:12px;border-radius:12px}
  .reading-build-token,.reading-build-slot{font-size:13px;padding:9px 12px}
  .writing-rubric,.progress-insight-grid,.minigame-grid,.matchpair-layout,.diagnostic-result-columns,.mastery-board,.study-plan-grid{grid-template-columns:1fr}
  .diagnostic-status-grid{grid-template-columns:1fr}
  .diagnostic-import-actions{flex-direction:column;align-items:stretch}
  .placement-queue-toolbar{align-items:stretch}
  .placement-queue-stats,
  .placement-queue-chipbar,
  .placement-queue-actions{width:100%}
  .placement-queue-actions .quiz-btn,
  .placement-queue-actions .reading-btn,
  .placement-queue-row-actions .quiz-btn,
  .placement-queue-row-actions .reading-btn{width:100%}
  .placement-queue-score-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .diagnostic-topline,.diagnostic-result-head,.diagnostic-progress-text{flex-direction:column;align-items:flex-start}
  .diagnostic-hero{padding:28px 18px}
  .diagnostic-timer,.diagnostic-score-badge{min-width:0}

  /* ── Word popup ── */
  .word-popup{min-width:160px;max-width:calc(100vw - 32px);padding:14px;border-radius:12px}
  .word-popup-word{font-size:16px}
  .word-popup-meaning{font-size:13px}
  .word-popup-pronunciation{font-size:11px;margin-bottom:10px}
  .word-popup-speaker{font-size:11px;padding:5px 10px}

  /* ── Challenge mode ── */
  .challenge-container{padding:16px 12px}
  .challenge-header{margin-bottom:14px}
  .challenge-title{font-size:20px}
  .challenge-close{padding:8px 14px;font-size:13px}
  .challenge-timer{margin-bottom:18px}
  .challenge-timer-display{font-size:40px;letter-spacing:1px}
  .challenge-progress{font-size:13px}
  .challenge-question-card{padding:18px 14px;border-radius:14px;margin-bottom:14px}
  .challenge-question-number{font-size:12px;margin-bottom:6px}
  .challenge-question-text{font-size:16px;margin-bottom:16px;line-height:1.5}
  .challenge-options{gap:10px}
  .challenge-option{padding:12px 14px;font-size:14px;gap:10px;border-radius:10px}
  .challenge-results{padding:24px 16px;border-radius:16px}
  .challenge-results-icon{font-size:56px;margin-bottom:12px}
  .challenge-results-title{font-size:22px;margin-bottom:6px}
  .challenge-results-score{font-size:40px;margin-bottom:6px}
  .challenge-results-score span{font-size:20px}
  .challenge-results-xp{font-size:17px;margin-bottom:12px}
  .challenge-results-message{font-size:14px;margin-bottom:20px}
  .challenge-results-buttons{flex-direction:column;align-items:stretch;gap:10px}
  .challenge-results-buttons .quiz-btn{width:100%;border-radius:12px}

  /* ── Vocabulary page ── */
  .vocab-mastery-hero,.vocab-mastery-bars,.vocab-quiz-options{grid-template-columns:1fr}
  .vocab-quiz-head{flex-direction:column}
  .vocab-mastery-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vocab-card{flex-direction:column;align-items:flex-start;gap:10px;padding:14px;border-radius:12px}
  .vocab-word{font-size:17px}
  .vocab-meaning{font-size:13px}
  .vocab-actions{width:100%;gap:8px;justify-content:flex-start}
  .vocab-btn{flex:1;text-align:center;padding:8px 6px;font-size:12px;border-radius:8px}

  /* ── Progress / stats section ── */
  .progress-section{padding:16px 14px;border-radius:12px}
  .progress-title{font-size:17px}
  .progress-text{font-size:13px}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:10px;margin-top:16px}
  .stats-card{padding:14px;border-radius:10px}
  .stats-icon{font-size:22px;margin-bottom:6px}
  .stats-value{font-size:20px;margin-bottom:2px}
  .stats-label{font-size:11px}
  .stats-modal{width:min(96vw,760px);max-height:min(94dvh,920px)}
  .stats-modal-shell{padding:16px}
  .stats-modal-title{font-size:22px}
  .stats-modal-subtitle{font-size:13px;line-height:1.55}
  .stats-hero{padding:14px;gap:12px;align-items:center;border-radius:18px}
  .stats-hero-avatar{width:68px;height:68px;font-size:28px}
  .stats-hero-pills{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .stats-hero-pill{padding:10px 10px;border-radius:14px}
  .stats-hero-pill span{font-size:10px}
  .stats-hero-pill strong{font-size:16px}
  .stats-grid-refined{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .stats-visual-stack{grid-template-columns:1fr}
  .stats-actions{grid-template-columns:1fr}
  .stats-action-btn{width:100%}

  /* ── Modals ── */
  .modal{padding:22px 18px;border-radius:16px;max-height:min(88vh,760px);overflow:auto}
  .modal h3{font-size:17px}
  .modal p{font-size:13px;margin-bottom:18px}
  .modal-buttons{flex-wrap:wrap;gap:10px}
  .modal-btn{flex:1;padding:11px 16px;font-size:13px}

  /* ── Level-up overlay ── */
  .levelup-card{padding:36px 22px;width:90%;max-width:340px}
  .levelup-icon{font-size:64px;margin-bottom:12px}
  .levelup-title{font-size:22px;letter-spacing:1px}
  .levelup-level{font-size:40px;margin:12px 0}
  .levelup-message{font-size:14px}
  .levelup-hint{font-size:12px}

  /* ── Auth pages ── */
  .auth-card{padding:28px 20px;border-radius:20px}
  .auth-logo{font-size:36px;margin-bottom:12px}
  .auth-title{font-size:22px}
  .auth-subtitle{font-size:13px;margin-bottom:22px}
  .form-group{margin-bottom:16px}
  .form-input{padding:13px 14px;font-size:14px}
  .auth-btn{padding:14px 28px;font-size:15px}
  .profile-card{margin:16px auto;padding:28px 20px;border-radius:20px}
  .profile-welcome h1{font-size:20px}
  .avatar-option{width:46px;height:46px;font-size:22px}
  .avatar-builder-layout{grid-template-columns:1fr}
  .avatar-builder-preview{width:150px;height:150px}
  .name-input{padding:13px 16px;font-size:15px}
  .continue-btn{padding:15px 24px;font-size:15px}
  .announcement-card{padding:14px}
  .announcement-card-top{flex-direction:column}
  .announcement-card-actions{justify-content:flex-start}
  #adminPage .page-container > div[style*="border-bottom:2px solid"],
  #teacherTabBar{overflow-x:auto;flex-wrap:nowrap !important;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px !important}
  #adminPage .page-container > div[style*="border-bottom:2px solid"]::-webkit-scrollbar,
  #teacherTabBar::-webkit-scrollbar{display:none}
  .admin-tab{flex:0 0 auto;padding:10px 14px;font-size:13px}
  .admin-self-card{flex-direction:column}
  .admin-self-actions{width:100%;min-width:0}
  .settings-panel{
    right:0;
    left:auto;
    min-width:0;
    width:min(82vw,248px);
    max-height:calc(100dvh - 88px);
    overflow:auto;
    overscroll-behavior:contain;
    border-radius:20px;
    padding:10px;
  }
  .settings-option{padding:12px 14px}
  .settings-option--compact{padding:12px 13px}
  .settings-volume-card{padding:12px 13px}
  .settings-more-modal{
    width:min(92vw,420px);
    max-height:calc(100dvh - 128px - env(safe-area-inset-bottom));
  }
  .settings-more-shell{padding:18px 15px}
  .settings-more-title{font-size:21px}
  .settings-more-copy{font-size:13px;line-height:1.55}
  .settings-more-group{padding:14px}
  .settings-more-option{padding:13px 14px;font-size:13px}
  #teacherClassFilter{max-width:none !important;width:100%}
  #teacherPage .page-container > div[style*="margin-bottom:20px"]{align-items:stretch !important}
  #teacherPage .page-container > div[style*="margin-bottom:20px"] .quiz-btn{width:100%}
  #adminContent{min-width:0}

  /* ── Toast ── */
  .toast{top:calc(env(safe-area-inset-top,0px) + 12px);font-size:13px;padding:12px 16px;border-radius:18px;width:min(420px,calc(100vw - 20px))}

  /* ── Result screens fit better on mobile ── */
  #quizPage:has(#quizResults.show) .page-header,
  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .page-header,
  #readingPage:has(#readingResults[style*="display: block"]) .page-header,
  #listeningPage:has(#listeningResults[style*="display: block"]) .page-header,
  #writingPage:has(#writingResults[style*="display: block"]) .page-header,
  #challengePage:has(#challengeQuestionScreen[style*="display: block"]) .challenge-header,
  #challengePage:has(#challengeResults[style*="display: block"]) .challenge-header{
    display:none;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .page-container{
    padding-top:10px;
    padding-bottom:96px;
  }

  #challengePage:has(#challengeQuestionScreen[style*="display: block"]) .challenge-container{
    padding-top:10px;
    padding-bottom:92px;
  }

  #quizPage:has(#quizResults.show) .page-container,
  #readingPage:has(#readingResults[style*="display: block"]) .page-container,
  #listeningPage:has(#listeningResults[style*="display: block"]) .page-container,
  #writingPage:has(#writingResults[style*="display: block"]) .page-container{
    min-height:calc(100dvh - 86px);
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding-top:12px;
    padding-bottom:92px;
  }

  #challengePage:has(#challengeResults[style*="display: block"]) .challenge-container{
    min-height:calc(100dvh - 86px);
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding-top:12px;
    padding-bottom:92px;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .speed-banner,
  #challengePage:has(#challengeQuestionScreen[style*="display: block"]) .speed-banner{
    margin:4px 0 7px;
    padding:7px 9px;
    border-radius:12px;
    gap:3px;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .speed-banner-label,
  #challengePage:has(#challengeQuestionScreen[style*="display: block"]) .speed-banner-label{
    font-size:10px;
    letter-spacing:.08em;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .speed-banner-message,
  #challengePage:has(#challengeQuestionScreen[style*="display: block"]) .speed-banner-message{
    font-size:10.5px;
    line-height:1.35;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .quiz-score-display{
    margin-top:4px;
    padding:5px 10px;
    font-size:12px;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .quiz-progress{
    font-size:12px;
    margin-bottom:10px;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .quiz-header{
    margin-bottom:8px;
    padding:16px 12px 12px;
    border-radius:14px;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .quiz-header-question{
    font-size:14px;
    line-height:1.42;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .quiz-header-number,
  #challengePage:has(#challengeQuestionScreen[style*="display: block"]) .challenge-question-number{
    font-size:11px;
    margin-bottom:6px;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .combo-flame-indicator,
  #challengePage:has(#challengeQuestionScreen[style*="display: block"]) .combo-flame-indicator{
    top:-12px;
    right:12px;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .combo-flame-pill,
  #challengePage:has(#challengeQuestionScreen[style*="display: block"]) .combo-flame-pill{
    min-height:32px;
    gap:6px;
    padding:6px 10px 6px 8px;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .combo-flame-icon,
  #challengePage:has(#challengeQuestionScreen[style*="display: block"]) .combo-flame-icon{
    width:18px;
    height:18px;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .combo-flame-value,
  #challengePage:has(#challengeQuestionScreen[style*="display: block"]) .combo-flame-value{
    font-size:11px;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .quiz-options,
  #challengePage:has(#challengeQuestionScreen[style*="display: block"]) .challenge-options{
    gap:7px;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .quiz-option,
  #challengePage:has(#challengeQuestionScreen[style*="display: block"]) .challenge-option{
    padding:9px 11px;
    min-height:46px;
    border-radius:11px;
    font-size:12.5px;
    gap:9px;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .option-letter,
  #challengePage:has(#challengeQuestionScreen[style*="display: block"]) .option-letter{
    width:26px;
    height:26px;
    font-size:12px;
    border-radius:7px;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .quiz-feedback.show{
    position:static;
    left:auto;
    right:auto;
    bottom:auto;
    z-index:auto;
    margin-top:10px;
    padding:10px 12px;
    border-radius:12px;
    box-shadow:none;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .feedback-icon{
    font-size:20px;
    margin-bottom:4px;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .feedback-title{
    font-size:14px;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .feedback-explanation{
    font-size:12px;
    line-height:1.45;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .quiz-nav-buttons{
    position:static;
    left:auto;
    right:auto;
    bottom:auto;
    z-index:auto;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    margin-top:10px;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .quiz-nav-btn{
    width:100%;
    min-width:0;
    padding:12px 10px;
    border-radius:14px;
    font-size:13px;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) #submitQuizSection{
    position:static;
    left:auto;
    right:auto;
    bottom:auto;
    z-index:auto;
    margin-top:10px !important;
    text-align:left;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) #backQuestionBtnFinal{
    display:none !important;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) #submitQuizSection .quiz-btn,
  #quizPage:has(#quizQuestionScreen[style*="display: block"]) #submitQuizSection .quiz-nav-btn{
    width:100%;
    min-width:0;
    padding:12px 10px;
    border-radius:14px;
    font-size:13px;
  }

  #challengePage:has(#challengeQuestionScreen[style*="display: block"]) .challenge-timer{
    margin-bottom:10px;
  }

  #challengePage:has(#challengeQuestionScreen[style*="display: block"]) .challenge-timer-display{
    font-size:34px;
  }

  #challengePage:has(#challengeQuestionScreen[style*="display: block"]) .challenge-question-card{
    padding:16px 12px 12px;
    border-radius:14px;
    margin-bottom:0;
  }

  #challengePage:has(#challengeQuestionScreen[style*="display: block"]) .challenge-question-text{
    font-size:14px;
    line-height:1.4;
    margin-bottom:10px;
  }

  #quizPage:has(#quizResults.show) .quiz-results,
  #readingPage:has(#readingResults[style*="display: block"]) .quiz-results,
  #listeningPage:has(#listeningResults[style*="display: block"]) .quiz-results,
  #writingPage:has(#writingResults[style*="display: block"]) .quiz-results,
  #challengePage:has(#challengeResults[style*="display: block"]) .challenge-results{
    padding:22px 16px 18px;
    border-radius:18px;
    margin:0;
  }

  #quizPage:has(#quizResults.show) .results-icon,
  #readingPage:has(#readingResults[style*="display: block"]) .results-icon,
  #listeningPage:has(#listeningResults[style*="display: block"]) .results-icon,
  #writingPage:has(#writingResults[style*="display: block"]) .results-icon,
  #challengePage:has(#challengeResults[style*="display: block"]) .challenge-results-icon{
    font-size:46px;
    margin-bottom:8px;
  }

  #quizPage:has(#quizResults.show) .results-title,
  #readingPage:has(#readingResults[style*="display: block"]) .results-title,
  #listeningPage:has(#listeningResults[style*="display: block"]) .results-title,
  #writingPage:has(#writingResults[style*="display: block"]) .results-title,
  #challengePage:has(#challengeResults[style*="display: block"]) .challenge-results-title{
    font-size:20px;
    margin-bottom:4px;
  }

  #quizPage:has(#quizResults.show) .results-score,
  #readingPage:has(#readingResults[style*="display: block"]) .results-score,
  #listeningPage:has(#listeningResults[style*="display: block"]) .results-score,
  #writingPage:has(#writingResults[style*="display: block"]) .results-score,
  #challengePage:has(#challengeResults[style*="display: block"]) .challenge-results-score{
    font-size:34px;
    margin-bottom:4px;
  }

  #quizPage:has(#quizResults.show) .results-score span,
  #readingPage:has(#readingResults[style*="display: block"]) .results-score span,
  #listeningPage:has(#listeningResults[style*="display: block"]) .results-score span,
  #writingPage:has(#writingResults[style*="display: block"]) .results-score span,
  #challengePage:has(#challengeResults[style*="display: block"]) .challenge-results-score span{
    font-size:17px;
  }

  #quizPage:has(#quizResults.show) .results-xp,
  #readingPage:has(#readingResults[style*="display: block"]) .results-xp,
  #listeningPage:has(#listeningResults[style*="display: block"]) .results-xp,
  #writingPage:has(#writingResults[style*="display: block"]) .results-xp,
  #challengePage:has(#challengeResults[style*="display: block"]) .challenge-results-xp{
    font-size:15px;
    margin-bottom:8px;
  }

  #quizPage:has(#quizResults.show) .results-message,
  #readingPage:has(#readingResults[style*="display: block"]) .results-message,
  #listeningPage:has(#listeningResults[style*="display: block"]) .results-message,
  #writingPage:has(#writingResults[style*="display: block"]) .results-message,
  #challengePage:has(#challengeResults[style*="display: block"]) .challenge-results-message{
    font-size:13px;
    line-height:1.55;
    margin-bottom:12px;
  }

  #quizPage:has(#quizResults.show) #quizTutorSummaryCard,
  #challengePage:has(#challengeResults[style*="display: block"]) #challengeTutorSummaryCard{
    display:none;
  }

  #quizPage:has(#quizResults.show) .ai-tutor-card--summary,
  #challengePage:has(#challengeResults[style*="display: block"]) .ai-tutor-card--summary{
    margin-top:12px;
    padding:12px 14px;
    gap:10px;
    border-radius:16px;
  }

  #quizPage:has(#quizResults.show) .ai-tutor-card--summary .ai-tutor-avatar,
  #challengePage:has(#challengeResults[style*="display: block"]) .ai-tutor-card--summary .ai-tutor-avatar{
    width:42px;
    height:42px;
    border-radius:14px;
  }

  #quizPage:has(#quizResults.show) .ai-tutor-card--summary .ai-tutor-name,
  #challengePage:has(#challengeResults[style*="display: block"]) .ai-tutor-card--summary .ai-tutor-name{
    margin-bottom:4px;
    font-size:11px;
  }

  #quizPage:has(#quizResults.show) .ai-tutor-card--summary .ai-tutor-message,
  #challengePage:has(#challengeResults[style*="display: block"]) .ai-tutor-card--summary .ai-tutor-message{
    font-size:12px;
    line-height:1.5;
  }

  #quizPage:has(#quizResults.show) .coach-summary-points,
  #challengePage:has(#challengeResults[style*="display: block"]) .coach-summary-points{
    gap:6px;
    margin-top:8px;
  }

  #quizPage:has(#quizResults.show) .coach-summary-point,
  #challengePage:has(#challengeResults[style*="display: block"]) .coach-summary-point{
    font-size:12px;
    line-height:1.45;
  }

  #quizPage:has(#quizResults.show) .results-buttons,
  #readingPage:has(#readingResults[style*="display: block"]) .reading-buttons,
  #listeningPage:has(#listeningResults[style*="display: block"]) .reading-buttons,
  #writingPage:has(#writingResults[style*="display: block"]) .reading-buttons,
  #challengePage:has(#challengeResults[style*="display: block"]) .challenge-results-buttons{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
    margin-top:14px;
  }

  #quizPage:has(#quizResults.show) .results-buttons .quiz-btn,
  #readingPage:has(#readingResults[style*="display: block"]) .reading-buttons .reading-btn,
  #listeningPage:has(#listeningResults[style*="display: block"]) .reading-buttons .reading-btn,
  #writingPage:has(#writingResults[style*="display: block"]) .reading-buttons .reading-btn,
  #challengePage:has(#challengeResults[style*="display: block"]) .challenge-results-buttons .quiz-btn{
    width:100%;
    min-width:0;
    padding:12px 10px;
    border-radius:14px;
    font-size:13px;
  }

  .coach-advice-modal{
    width:calc(100vw - 24px);
    padding:20px 16px;
    border-radius:18px;
  }

  .coach-advice-title{
    font-size:20px;
  }

  .micro-lesson-stat-grid{
    grid-template-columns:1fr;
  }

  .micro-lesson-summary,
  .micro-lesson-next{
    font-size:14px;
  }

  .coach-advice-card{
    padding:14px 12px;
    border-radius:16px;
    grid-template-columns:44px minmax(0,1fr);
    gap:10px;
  }

  .coach-advice-card .ai-tutor-avatar{
    width:44px;
    height:44px;
    border-radius:14px;
  }

  .coach-advice-card .ai-tutor-name{
    font-size:11px;
    margin-bottom:6px;
  }

  .coach-advice-card .ai-tutor-message{
    font-size:13px;
    line-height:1.55;
  }

  .coach-advice-card .coach-summary-points{
    gap:10px;
    margin-top:10px;
  }

  .coach-advice-card .coach-summary-point{
    display:grid;
    grid-template-columns:1fr;
    gap:4px;
    padding:8px 10px;
    border-radius:12px;
    background:rgba(255,255,255,0.03);
    font-size:12px;
    line-height:1.55;
    word-break:normal;
    overflow-wrap:anywhere;
  }

  .coach-advice-card .coach-summary-point-mark{
    display:none;
  }

  .coach-advice-card .coach-summary-point strong{
    display:block;
    font-size:11px;
    line-height:1.2;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--primary);
    margin-bottom:2px;
  }
}

/* ── Extra small phones ── */
@media(max-width:400px){
  .stat-badge.xp{display:none}
  .stat-badge.ecoins{padding:5px 9px}
  .top-bar{height:56px}
  .cards-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .menu-card{padding:16px 10px}
  .menu-card-icon{font-size:32px}
  .menu-card-title{font-size:13px}
  .menu-card-desc{display:none}
  .hero-title{font-size:18px}
  .hero-subtitle{font-size:12px}
  .quiz-header-question{font-size:15px}
  .challenge-timer-display{font-size:34px}
}
@media(max-width:520px){
  .cards-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .menu-card{padding:16px 10px;text-align:center}
  .menu-card-icon{font-size:30px;margin-bottom:8px}
  .menu-card-title{font-size:13px}
  .menu-card-desc{display:none}
  .quiz-score-display{position:static;margin-top:10px;display:inline-flex}
  .stats-grid{grid-template-columns:1fr}
  .modal{width:calc(100vw - 20px)}
  .settings-panel{left:auto;right:0;width:min(82vw,248px);max-width:248px}
  .stats-modal{width:calc(100vw - 12px);max-height:calc(100dvh - 12px)}
  .stats-modal-shell{padding:14px}
  .stats-hero{flex-direction:row;align-items:center;gap:10px;padding:12px}
  .stats-hero-avatar{width:60px;height:60px;font-size:24px}
  .stats-hero-pills{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .stats-hero-pill{padding:9px 8px}
  .stats-hero-pill strong{font-size:15px}
  .stats-grid-refined{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .stats-grid-refined .stats-card{padding:12px}
  .stats-grid-refined .stats-icon{font-size:20px}
  .stats-grid-refined .stats-value{font-size:18px}
  .settings-panel__header{padding:2px 0 0}
  .settings-panel__close{width:28px;height:28px}
  .settings-panel__eyebrow{font-size:10px}
  .settings-more-modal{width:calc(100vw - 20px)}
  .settings-more-shell{padding:16px 14px}
  .admin-mobile-card{padding:12px}
  .admin-mobile-actions{grid-template-columns:1fr 1fr}
  .admin-mobile-btn{padding:10px 8px;font-size:11px}
  .admin-self-actions{grid-template-columns:1fr 1fr}
  .admin-self-title{font-size:18px}
}
/* Stage 2 - Speaker */
.music-control{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--background-secondary);border-radius:50%;cursor:pointer;transition:all 0.2s ease;border:none;color:var(--text-primary)}
.music-control:hover{background:var(--primary-lighter)}
.music-control.muted{color:var(--text-light)}
.speaker-bars{display:flex;align-items:flex-end;justify-content:center;gap:2px;height:16px}
.speaker-bar{width:3px;background:currentColor;border-radius:2px}
.speaker-bar:nth-child(1){height:6px}
.speaker-bar:nth-child(2){height:10px}
.speaker-bar:nth-child(3){height:14px}
.speaker-bar:nth-child(4){height:8px}
.music-control.playing .speaker-bar{animation:speakerBar 0.5s ease-in-out infinite alternate}
.music-control.playing .speaker-bar:nth-child(2){animation-delay:0.1s}
.music-control.playing .speaker-bar:nth-child(3){animation-delay:0.2s}
.music-control.playing .speaker-bar:nth-child(4){animation-delay:0.3s}
@keyframes speakerBar{from{height:4px}to{height:16px}}
.music-control .muted-icon{display:none}
.music-control.muted .playing-icon{display:none}
.music-control.muted .muted-icon{display:block}
.music-control .playing-icon{display:block}

#adminTabBar{
  overflow-x:auto !important;
  overflow-y:hidden !important;
  flex-wrap:nowrap !important;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  touch-action:pan-x;
  overscroll-behavior-x:contain;
}
#adminTabBar::-webkit-scrollbar{display:none}
#adminTabBar .admin-tab{
  flex:0 0 auto !important;
  white-space:nowrap;
}
.admin-tab-shell{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:24px;
}
.admin-tab-shell #adminTabBar{
  flex:1 1 auto;
  margin-bottom:0 !important;
}
.admin-tab-nav{
  width:38px;
  height:38px;
  border:none;
  border-radius:999px;
  background:var(--background-secondary);
  color:var(--text-primary);
  font-size:18px;
  font-weight:700;
  cursor:pointer;
  flex:0 0 auto;
  box-shadow:var(--shadow-sm);
}
.admin-tab-nav:hover{
  background:var(--primary);
  color:#fff;
}

/* Challenge Mode */
.challenge-page{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#2a1a1a 0%,#1a1212 50%,#2d1818 100%);z-index:50;display:none;overflow-y:auto}
.challenge-page.show{display:block}
.challenge-container{max-width:600px;margin:0 auto;padding:30px 20px;min-height:100vh}
.challenge-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.challenge-title{font-size:24px;font-weight:700;color:#fff}
.challenge-close{background:rgba(255,255,255,0.1);border:none;color:#fff;padding:10px 20px;border-radius:50px;cursor:pointer;font-size:14px;font-weight:600;font-family:inherit}
.challenge-close:hover{background:rgba(255,255,255,0.2)}
.challenge-timer{text-align:center;margin-bottom:30px}
.challenge-timer-display{font-size:56px;font-weight:700;color:#fff;font-family:'Poppins',sans-serif;letter-spacing:2px}
.challenge-timer-display.pulse{animation:timerPulse 0.5s ease-in-out infinite}
.challenge-timer-display.warning{color:#ff6b6b}
.challenge-timer-display.danger{color:#ff4444}
@keyframes timerPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes timerPulseIntense{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.12);opacity:0.9}}
.challenge-progress{font-size:14px;color:rgba(255,255,255,0.7);margin-top:8px}
.challenge-question-card{background:var(--card-bg);border-radius:var(--radius);padding:30px;margin-bottom:20px;box-shadow:var(--shadow-md);position:relative;overflow:visible}
.challenge-question-number{font-size:13px;color:var(--text-secondary);margin-bottom:8px}
.challenge-question-text{font-size:20px;font-weight:600;margin-bottom:24px;color:var(--text-primary)}
.challenge-options{display:flex;flex-direction:column;gap:12px}
.challenge-option{display:flex;align-items:center;gap:16px;padding:16px 20px;border:2px solid var(--border-color);border-radius:var(--radius-sm);background:var(--card-bg);cursor:pointer;transition:all 0.2s ease;text-align:left;font-family:inherit;font-size:15px;color:var(--text-primary)}
.challenge-option:hover:not(:disabled){border-color:var(--primary);transform:translateX(4px)}
.challenge-option:disabled{cursor:default}
.challenge-option.correct{border-color:var(--correct-border);background:var(--correct-bg);color:var(--correct-text)}
.challenge-option.incorrect{border-color:var(--incorrect-border);background:var(--incorrect-bg);color:var(--incorrect-text)}
.challenge-nav{margin-top:20px;display:flex;justify-content:space-between}
.challenge-submit-btn{padding:16px 48px;background:linear-gradient(135deg,var(--primary),var(--primary-light));color:white;border:none;border-radius:50px;font-size:16px;font-weight:600;cursor:pointer;transition:all 0.2s ease;font-family:inherit}
.challenge-submit-btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(45,122,95,0.3)}
.challenge-results{text-align:center;padding:40px;background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow-md)}
.challenge-results-icon{font-size:72px;margin-bottom:16px}
.challenge-results-title{font-size:28px;font-weight:700;margin-bottom:8px;color:var(--text-primary)}
.challenge-results-score{font-size:48px;font-weight:700;color:var(--primary);margin-bottom:8px}
.challenge-results-score span{font-size:24px;color:var(--text-secondary)}
.challenge-results-xp{font-size:20px;font-weight:600;color:var(--accent-gold);margin-bottom:16px}
.challenge-results-message{font-size:16px;color:var(--text-secondary);margin-bottom:30px}
.challenge-results-buttons{display:flex;gap:16px;justify-content:center}
.challenge-toggle{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-top:1px solid var(--border-color);margin-top:16px}
.challenge-toggle-label{font-size:14px;color:var(--text-secondary)}
.challenge-toggle-switch{position:relative;width:48px;height:26px}
.challenge-toggle-switch input{opacity:0;width:0;height:0}
.challenge-toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:0.3s;border-radius:26px}
.challenge-toggle-slider:before{position:absolute;content:"";height:20px;width:20px;left:3px;bottom:3px;background-color:white;transition:0.3s;border-radius:50%}
.challenge-toggle-switch input:checked + .challenge-toggle-slider{background-color:var(--primary)}
.challenge-toggle-switch input:checked + .challenge-toggle-slider:before{transform:translateX(22px)}

/* TASK A - Tech Animated Background for Main Menu */
.tech-bg{position:fixed;top:0;left:0;width:100dvw;height:100%;z-index:-2;pointer-events:none;overflow:hidden;contain:paint}
.tech-bg-grid{position:absolute;inset:0;background-image:linear-gradient(var(--tech-grid) 1px,transparent 1px),linear-gradient(90deg,var(--tech-grid) 1px,transparent 1px);background-size:60px 60px;animation:techGridMove 50s linear infinite}
.tech-bg-glow{display:none !important}
.tech-bg-ring{display:none !important}
@keyframes techGridMove{0%{transform:translate(0,0)}100%{transform:translate(60px,60px)}}
@keyframes techGlowPulse{0%,100%{opacity:0}50%{opacity:0}}
@keyframes techRingPulse{0%,100%{opacity:0}50%{opacity:0}}

/* TASK 3 - Scanline sheen effect for main menu */
.tech-scanline{position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.03),transparent);transform:skewX(-20deg);pointer-events:none;animation:techScanline 8s ease-in-out infinite}
@keyframes techScanline{0%{left:-100%}50%,100%{left:200%}}

/* Hero card shimmer border — removed (caused large frozen shimmer blob over card edges) */
.hero-card{position:relative}
/* .hero-card::after shimmer ring intentionally removed */
@keyframes heroShimmer{0%,100%{opacity:0;transform:translateX(-10%)}50%{opacity:0;transform:translateX(10%)}}

/* Moving shimmer sweep inside hero face front (avoids overflow/3D conflict) */
.hero-face-front::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:4;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,0.28) 50%,transparent 70%);
  background-size:200% 100%;
  animation:heroShimmerSweep 3.5s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes heroShimmerSweep{
  0%{background-position:-200% 0;opacity:0}
  6%{opacity:1}
  50%{background-position:200% 0;opacity:1}
  58%,100%{background-position:200% 0;opacity:0}
}

/* TASK B - XP Gain Toast */
.xp-toast{position:fixed;top:90px;right:24px;background:var(--xp-toast-bg);color:var(--xp-toast-text);padding:10px 20px;border-radius:20px;font-weight:700;font-size:15px;z-index:1001;opacity:0;transform:translateX(50px);transition:all 0.3s ease;box-shadow:0 4px 15px rgba(255,184,0,0.3);pointer-events:none}
.xp-toast.show{opacity:1;transform:translateX(0)}
.xp-toast.hide{opacity:0;transform:translateX(50px)}

/* TASK B - Level Up Overlay */
.levelup-overlay{
    position:fixed;
    inset:0;
    background:var(--levelup-overlay-bg);
    backdrop-filter:blur(4px);
    z-index:2000;
    display:none;
    align-items:center;
    justify-content:center;
    pointer-events:none;
    opacity:0;
    transition:opacity 0.3s ease;
    overflow:hidden;
}
.levelup-overlay.show{display:flex;opacity:1;pointer-events:auto}
.levelup-card{
    background-color:var(--levelup-card-start);
    background:linear-gradient(135deg,var(--levelup-card-start),var(--levelup-card-end));
    border-radius:var(--radius-lg);
    padding:60px 80px;
    text-align:center;
    transform:scale(0.5);
    transition:transform 0.5s cubic-bezier(0.175,0.885,0.32,1.275);
    box-shadow:0 24px 70px rgba(0,0,0,0.34),0 0 30px rgba(255,255,255,0.12);
    border:2px solid var(--levelup-card-border);
    max-width:90%;
    width:400px;
    position:relative;
    overflow:hidden;
}
.levelup-overlay.show .levelup-card{transform:scale(1)}
.levelup-icon{
    font-size:80px;
    margin-bottom:16px;
    animation:levelupBounce 0.6s ease infinite;
    /* Use a trophy emoji to celebrate the achievement */
    filter:drop-shadow(0 4px 6px rgba(0,0,0,0.2));
}
.levelup-title{font-size:32px;font-weight:700;color:var(--primary);margin-bottom:8px;text-transform:uppercase;letter-spacing:2px}
.levelup-level{font-size:clamp(34px,8vw,56px);font-weight:700;color:var(--levelup-glow);margin:16px 0;line-height:1.08;text-shadow:0 0 20px var(--levelup-glow);word-break:normal;overflow-wrap:anywhere}
.levelup-message{font-size:16px;color:var(--text-secondary);margin-bottom:8px}
.levelup-hint{font-size:13px;color:var(--text-light)}
.levelup-close{position:absolute;top:20px;right:20px;background:none;border:none;color:var(--text-secondary);font-size:24px;cursor:pointer;padding:8px;opacity:0.7;transition:opacity 0.2s}
.levelup-close:hover{opacity:1}
@keyframes levelupBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* Confetti animation for level-up overlay */
.confetti-container{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    pointer-events:none;
    overflow:hidden;
    z-index:-1;
}
.confetti{
    position:absolute;
    top:-10px;
    width:10px;
    height:10px;
    opacity:0.9;
    border-radius:50%;
    animation:confettiFall 1.2s linear forwards;
}
@keyframes confettiFall{
    0%{
        transform:translateY(0) rotate(0deg);
        opacity:1;
    }
    100%{
        transform:translateY(100vh) rotate(720deg);
        opacity:0;
    }
}

/* ==================== Vocabulary & Progress Styles ==================== */
.vocab-card {
    background: var(--card-bg);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    padding: 16px 20px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--border-color);
    gap: 14px;
    min-width: 0;
}
.vocab-word {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    overflow-wrap:anywhere;
    word-break:break-word;
}
.vocab-meaning {
    font-size: 14px;
    color: var(--text-secondary);
    margin-top: 4px;
    overflow-wrap:anywhere;
    word-break:break-word;
}
.vocab-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.vocab-meta {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:10px;
}
.vocab-meta-pill {
    padding:7px 10px;
    border-radius:999px;
    border:1px solid var(--border-color);
    background:var(--background-secondary);
    font-size:12px;
    color:var(--text-secondary);
}
.vocab-btn {
    padding: 6px 14px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
}
.vocab-btn.speak {
    background: var(--primary-light);
    color: white;
}
.vocab-btn.learn {
    background: var(--accent-orange);
    color: white;
}
.vocab-btn.learn.learned {
    background: var(--primary);
    color: white;
}
.vocab-btn.journal {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}
.vocab-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.vocab-reset-note {
    margin-top:12px;
    font-size:12px;
    color:var(--text-secondary);
    opacity:0.85;
}
.vocab-mastery-page{max-width:1120px}
.vocab-mastery-hero{position:relative;overflow:hidden;border:1px solid color-mix(in srgb,var(--primary) 34%,transparent);border-radius:28px;padding:clamp(20px,3vw,30px);background:radial-gradient(circle at 12% 10%,color-mix(in srgb,var(--primary) 28%,transparent),transparent 34%),linear-gradient(135deg,color-mix(in srgb,var(--card-bg) 92%,var(--primary) 8%),color-mix(in srgb,var(--background-secondary) 88%,#000 12%));box-shadow:0 24px 70px rgba(0,0,0,.22);display:grid;grid-template-columns:minmax(0,1.35fr) minmax(220px,.65fr);gap:22px}
.vocab-mastery-kicker,.vocab-quiz-kicker{display:inline-flex;margin-bottom:8px;font-size:11px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--primary)}
.vocab-mastery-hero h2{margin:0 0 10px;font-size:clamp(30px,5vw,54px);line-height:.95;color:var(--text-primary)}
.vocab-mastery-hero p{margin:0;color:var(--text-secondary);line-height:1.7;max-width:760px}
.vocab-mastery-bars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px}
.vocab-mastery-bars>div,.vocab-mastery-stats>div,.vocab-mastery-levels span{border:1px solid var(--border-color);border-radius:18px;background:color-mix(in srgb,var(--background-secondary) 82%,transparent);padding:12px}
.vocab-mastery-bars span,.vocab-mastery-stats span{display:block;color:var(--text-secondary);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.12em}
.vocab-mastery-bars strong,.vocab-mastery-stats strong{display:block;margin-top:4px;font-size:22px;color:var(--text-primary)}
.vocab-mastery-bar{height:9px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.08);margin-top:10px}
.vocab-mastery-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--primary),var(--accent-blue))}
.vocab-mastery-bar--seed i{background:linear-gradient(90deg,#f7d46a,var(--primary))}
.vocab-mastery-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.vocab-mastery-levels{grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap}
.vocab-mastery-levels span{display:inline-flex;align-items:center;gap:8px;color:var(--text-secondary);font-size:12px}
.vocab-mastery-actions{grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.vocab-quiz-card{border:1px solid color-mix(in srgb,var(--accent-blue) 28%,transparent);border-radius:24px;background:linear-gradient(135deg,color-mix(in srgb,var(--card-bg) 94%,var(--accent-blue) 6%),var(--background-secondary));padding:clamp(18px,3vw,24px);margin-bottom:18px;box-shadow:0 18px 50px rgba(0,0,0,.18)}
.vocab-quiz-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;margin-bottom:16px}
.vocab-quiz-head h2{margin:0;color:var(--text-primary);font-size:clamp(22px,3vw,34px)}
.vocab-quiz-head h2 strong{color:var(--primary)}
.vocab-quiz-level{flex:0 0 auto;padding:9px 12px;border-radius:999px;border:1px solid var(--border-color);color:var(--text-secondary);font-size:12px;font-weight:800}
.vocab-quiz-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.vocab-quiz-option{min-height:72px;border:1px solid var(--border-color);border-radius:18px;background:color-mix(in srgb,var(--card-bg) 88%,transparent);color:var(--text-primary);display:flex;align-items:center;gap:12px;padding:14px;text-align:left;font:inherit;cursor:pointer;transition:transform .16s ease,border-color .16s ease,background .16s ease}
.vocab-quiz-option:hover:not(:disabled){transform:translateY(-2px);border-color:var(--primary)}
.vocab-quiz-option span{width:34px;height:34px;border-radius:12px;display:inline-grid;place-items:center;background:var(--background-secondary);color:var(--primary);font-weight:900}
.vocab-quiz-option.is-correct{border-color:#6ee7b7;background:rgba(16,185,129,.14)}
.vocab-quiz-option.is-wrong{border-color:#fb7185;background:rgba(244,63,94,.14)}
.vocab-quiz-feedback{margin-top:14px;padding:12px 14px;border-radius:16px;border:1px solid var(--border-color);color:var(--text-secondary);background:rgba(255,255,255,.04);line-height:1.6}
.vocab-quiz-feedback.is-correct{border-color:rgba(110,231,183,.45);color:#b7f7d2}
.vocab-quiz-feedback.is-wrong{border-color:rgba(251,113,133,.45);color:#fecdd3}
.vocab-card--review{border-color:rgba(247,212,106,.45)}
.vocab-card--mastered{border-color:rgba(110,231,183,.45)}
.vocab-mastery-list{display:grid;gap:12px}

/* WordLab 1.0 — consolidated daily vocabulary mastery */
.wordlab-page{
    max-width:1180px;
    min-width:0;
    overflow-x:clip;
}
.wordlab-page>*,
.wordlab-panel,
.wordlab-panel>*,
.wordlab-hero,
.wordlab-stat-grid,
.wordlab-tabs{
    width:100%;
    max-width:100%;
    min-width:0;
}
.wordlab-page .page-header{
    align-items:flex-start;
}
.wordlab-page-kicker{
    margin:0 0 4px;
    color:var(--primary);
    font-size:11px;
    font-weight:900;
    letter-spacing:.18em;
    text-transform:uppercase;
}
.wordlab-hero{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);
    gap:24px;
    padding:clamp(22px,4vw,38px);
    border:1px solid color-mix(in srgb,var(--primary) 38%,transparent);
    border-radius:30px;
    background:
      radial-gradient(circle at 4% 4%,color-mix(in srgb,var(--primary) 34%,transparent),transparent 34%),
      radial-gradient(circle at 92% 90%,rgba(82,160,255,.19),transparent 33%),
      linear-gradient(145deg,color-mix(in srgb,var(--card-bg) 92%,var(--primary) 8%),color-mix(in srgb,var(--background-secondary) 88%,#061a18 12%));
    box-shadow:0 28px 80px rgba(0,0,0,.24);
}
.wordlab-hero::after{
    content:"WL";
    position:absolute;
    right:5%;
    top:-28%;
    z-index:-1;
    color:color-mix(in srgb,var(--primary) 8%,transparent);
    font-size:clamp(180px,24vw,330px);
    font-weight:900;
    line-height:1;
    transform:rotate(-8deg);
}
.wordlab-hero__copy{
    align-self:center;
}
.wordlab-hero__eyebrow{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:16px;
}
.wordlab-hero__eyebrow span,
.wordlab-daily-card__badge{
    display:inline-flex;
    align-items:center;
    min-height:30px;
    padding:6px 11px;
    border:1px solid color-mix(in srgb,var(--primary) 42%,transparent);
    border-radius:999px;
    background:color-mix(in srgb,var(--primary) 13%,transparent);
    color:var(--primary);
    font-size:11px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.wordlab-hero h2{
    max-width:720px;
    margin:0 0 12px;
    color:var(--text-primary);
    font-size:clamp(34px,5vw,62px);
    line-height:.96;
    letter-spacing:-.045em;
}
.wordlab-hero p{
    max-width:720px;
    margin:0;
    color:var(--text-secondary);
    font-size:15px;
    line-height:1.75;
}
.wordlab-hero__actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:22px;
}
.wordlab-primary-btn,
.wordlab-secondary-btn,
.wordlab-listen-btn{
    min-height:44px;
    border-radius:14px;
    padding:10px 17px;
    font:inherit;
    font-size:13px;
    font-weight:900;
    cursor:pointer;
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,opacity .18s ease;
}
.wordlab-primary-btn{
    border:1px solid transparent;
    background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--primary) 62%,#1a91ff 38%));
    color:#041713;
    box-shadow:0 12px 32px color-mix(in srgb,var(--primary) 28%,transparent);
}
.wordlab-secondary-btn,
.wordlab-listen-btn{
    border:1px solid var(--border-color);
    background:color-mix(in srgb,var(--card-bg) 86%,transparent);
    color:var(--text-primary);
}
.wordlab-primary-btn:hover,
.wordlab-secondary-btn:hover,
.wordlab-listen-btn:hover{
    transform:translateY(-2px);
}
.wordlab-primary-btn:focus-visible,
.wordlab-secondary-btn:focus-visible,
.wordlab-listen-btn:focus-visible,
.wordlab-option:focus-visible,
.wordlab-tabs button:focus-visible{
    outline:3px solid color-mix(in srgb,var(--primary) 52%,transparent);
    outline-offset:3px;
}
.wordlab-hero__progress{
    align-self:stretch;
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
    padding:20px;
    border:1px solid color-mix(in srgb,var(--border-color) 82%,transparent);
    border-radius:22px;
    background:color-mix(in srgb,var(--background-secondary) 78%,transparent);
    backdrop-filter:blur(12px);
}
.wordlab-hero__progress label{
    color:var(--text-secondary);
    font-size:11px;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;
}
.wordlab-hero__progress select,
.wordlab-filters input,
.wordlab-filters select{
    width:100%;
    min-height:44px;
    margin-top:8px;
    border:1px solid var(--border-color);
    border-radius:13px;
    background:var(--card-bg);
    color:var(--text-primary);
    padding:9px 12px;
    font:inherit;
}
.wordlab-hero__progress>strong{
    display:block;
    margin-top:20px;
    color:var(--text-primary);
    font-size:clamp(28px,4vw,44px);
    letter-spacing:-.04em;
}
.wordlab-hero__progress>small{
    display:block;
    margin-top:9px;
    color:var(--text-secondary);
    line-height:1.5;
}
.wordlab-target-bar,
.wordlab-run-progress,
.wordlab-level-progress>div>div{
    width:100%;
    height:9px;
    overflow:hidden;
    border-radius:999px;
    background:color-mix(in srgb,var(--text-primary) 9%,transparent);
}
.wordlab-target-bar{
    margin-top:10px;
}
.wordlab-target-bar i,
.wordlab-run-progress i,
.wordlab-level-progress>div>div i{
    display:block;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,var(--primary),#6ca8ff);
    transition:width .32s ease;
}
.wordlab-stat-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    margin:16px 0;
}
.wordlab-stat-grid article,
.wordlab-progress-grid article{
    min-width:0;
    overflow:hidden;
    padding:17px;
    border:1px solid var(--border-color);
    border-radius:19px;
    background:color-mix(in srgb,var(--card-bg) 94%,transparent);
    box-shadow:0 12px 35px rgba(0,0,0,.1);
}
.wordlab-stat-grid span,
.wordlab-progress-grid span{
    display:block;
    color:var(--text-secondary);
    font-size:10px;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;
}
.wordlab-stat-grid strong,
.wordlab-progress-grid strong{
    display:block;
    margin-top:6px;
    color:var(--text-primary);
    font-size:27px;
}
.wordlab-stat-grid small,
.wordlab-progress-grid small{
    display:block;
    margin-top:4px;
    color:var(--text-secondary);
    font-size:11px;
    line-height:1.45;
}
.wordlab-tabs{
    position:sticky;
    top:10px;
    z-index:14;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:7px;
    margin:18px 0;
    padding:7px;
    border:1px solid var(--border-color);
    border-radius:18px;
    background:color-mix(in srgb,var(--background-secondary) 86%,transparent);
    backdrop-filter:blur(18px);
    box-shadow:0 14px 38px rgba(0,0,0,.16);
}
.wordlab-tabs button{
    min-height:43px;
    border:1px solid transparent;
    border-radius:12px;
    background:transparent;
    color:var(--text-secondary);
    font:inherit;
    font-size:13px;
    font-weight:900;
    cursor:pointer;
}
.wordlab-tabs button.is-active{
    border-color:color-mix(in srgb,var(--primary) 34%,transparent);
    background:color-mix(in srgb,var(--primary) 14%,transparent);
    color:var(--text-primary);
}
.wordlab-tabs button span{
    display:inline-grid;
    min-width:22px;
    height:22px;
    place-items:center;
    margin-left:4px;
    border-radius:999px;
    background:color-mix(in srgb,var(--text-primary) 9%,transparent);
    font-size:10px;
}
.wordlab-panel[hidden]{
    display:none!important;
}
.wordlab-panel.is-active{
    animation:wordlabPanelIn .25s ease both;
}
@keyframes wordlabPanelIn{
    from{opacity:0;transform:translateY(8px)}
    to{opacity:1;transform:translateY(0)}
}
.wordlab-daily-card,
.wordlab-run-card{
    padding:clamp(20px,4vw,32px);
    border:1px solid color-mix(in srgb,var(--primary) 26%,var(--border-color));
    border-radius:26px;
    background:
      linear-gradient(145deg,color-mix(in srgb,var(--card-bg) 95%,var(--primary) 5%),var(--background-secondary));
    box-shadow:0 20px 60px rgba(0,0,0,.18);
}
.wordlab-daily-card.is-complete{
    border-color:rgba(110,231,183,.45);
    background:linear-gradient(145deg,rgba(16,185,129,.1),var(--card-bg));
}
.wordlab-daily-card h2{
    margin:16px 0 8px;
    color:var(--text-primary);
    font-size:clamp(25px,4vw,40px);
    letter-spacing:-.035em;
}
.wordlab-daily-card p{
    max-width:790px;
    margin:0 0 22px;
    color:var(--text-secondary);
    line-height:1.7;
}
.wordlab-run-card__top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:12px;
}
.wordlab-run-card__top span{
    color:var(--primary);
    font-size:11px;
    font-weight:900;
    letter-spacing:.14em;
    text-transform:uppercase;
}
.wordlab-run-card__top strong{
    color:var(--text-primary);
    font-size:13px;
}
.wordlab-run-progress{
    margin-bottom:24px;
}
.wordlab-question-meta{
    margin-bottom:8px;
    color:var(--text-secondary);
    font-size:11px;
    font-weight:800;
    letter-spacing:.09em;
    text-transform:uppercase;
}
.wordlab-run-card h2{
    max-width:920px;
    margin:0;
    color:var(--text-primary);
    font-size:clamp(26px,4vw,44px);
    line-height:1.2;
    letter-spacing:-.03em;
}
.wordlab-cloze-prompt{
    line-height:1.35!important;
}
.wordlab-question-tools{
    display:flex;
    gap:9px;
    margin:16px 0 20px;
}
.wordlab-option-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}
.wordlab-option{
    min-height:72px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px;
    border:1px solid var(--border-color);
    border-radius:18px;
    background:color-mix(in srgb,var(--card-bg) 90%,transparent);
    color:var(--text-primary);
    text-align:left;
    font:inherit;
    cursor:pointer;
    transition:transform .16s ease,border-color .16s ease,background .16s ease;
}
.wordlab-option:hover:not(:disabled){
    transform:translateY(-2px);
    border-color:var(--primary);
}
.wordlab-option>span{
    flex:0 0 36px;
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:var(--background-secondary);
    color:var(--primary);
    font-weight:900;
}
.wordlab-option>strong{
    min-width:0;
    overflow-wrap:anywhere;
}
.wordlab-option.is-correct{
    border-color:#6ee7b7;
    background:rgba(16,185,129,.14);
}
.wordlab-option.is-wrong{
    border-color:#fb7185;
    background:rgba(244,63,94,.14);
}
.wordlab-question-feedback{
    margin-top:15px;
    padding:14px 16px;
    border:1px solid var(--border-color);
    border-radius:16px;
    background:rgba(255,255,255,.04);
    color:var(--text-secondary);
    line-height:1.65;
}
.wordlab-question-feedback.is-correct{
    border-color:rgba(110,231,183,.45);
    color:color-mix(in srgb,#6ee7b7 82%,var(--text-primary));
}
.wordlab-question-feedback.is-wrong{
    border-color:rgba(251,113,133,.45);
    color:color-mix(in srgb,#fb7185 78%,var(--text-primary));
}
.wordlab-next-btn{
    margin-top:15px;
}
.wordlab-section-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:18px;
    margin:4px 0 17px;
}
.wordlab-section-heading span{
    color:var(--primary);
    font-size:10px;
    font-weight:900;
    letter-spacing:.15em;
    text-transform:uppercase;
}
.wordlab-section-heading h2{
    margin:4px 0 0;
    color:var(--text-primary);
    font-size:clamp(24px,4vw,38px);
    letter-spacing:-.035em;
}
.wordlab-filters{
    display:grid;
    grid-template-columns:minmax(0,1.4fr) minmax(190px,.6fr);
    gap:12px;
    margin-bottom:16px;
}
.wordlab-filters label>span{
    color:var(--text-secondary);
    font-size:11px;
    font-weight:800;
}
.wordlab-word-list{
    display:grid;
    gap:10px;
}
.wordlab-word-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:16px;
    border:1px solid var(--border-color);
    border-radius:18px;
    background:color-mix(in srgb,var(--card-bg) 94%,transparent);
}
.wordlab-word-row.is-review{
    border-color:rgba(247,212,106,.42);
}
.wordlab-word-row.is-usable,
.wordlab-word-row.is-retained{
    border-color:rgba(110,231,183,.38);
}
.wordlab-word-row__heading{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:9px;
}
.wordlab-word-row__heading>strong{
    color:var(--text-primary);
    font-size:19px;
}
.wordlab-word-row__heading>span{
    padding:4px 8px;
    border-radius:999px;
    background:color-mix(in srgb,var(--primary) 12%,transparent);
    color:var(--primary);
    font-size:9px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.wordlab-word-row p{
    margin:5px 0;
    color:var(--text-primary);
}
.wordlab-word-row small{
    display:block;
    color:var(--text-secondary);
    font-size:11px;
    line-height:1.5;
}
.wordlab-empty-state{
    padding:30px;
    border:1px dashed var(--border-color);
    border-radius:18px;
    background:color-mix(in srgb,var(--card-bg) 78%,transparent);
    color:var(--text-secondary);
    text-align:center;
    line-height:1.7;
}
.wordlab-progress-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
}
.wordlab-level-progress,
.wordlab-mastery-ladder{
    margin-top:16px;
    padding:20px;
    border:1px solid var(--border-color);
    border-radius:22px;
    background:color-mix(in srgb,var(--card-bg) 94%,transparent);
}
.wordlab-level-progress h3,
.wordlab-mastery-ladder h3{
    margin:0 0 15px;
    color:var(--text-primary);
}
.wordlab-level-progress>div{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:7px 14px;
    align-items:center;
    padding:10px 0;
}
.wordlab-level-progress>div+div{
    border-top:1px solid var(--border-color);
}
.wordlab-level-progress>div>span{
    color:var(--text-secondary);
    font-size:12px;
}
.wordlab-level-progress>div>strong{
    color:var(--text-primary);
    font-size:12px;
}
.wordlab-level-progress>div>div{
    grid-column:1/-1;
    height:7px;
}
.wordlab-mastery-ladder>div{
    display:grid;
    grid-template-columns:120px minmax(0,1fr);
    gap:14px;
    padding:11px 0;
    color:var(--text-secondary);
    font-size:13px;
}
.wordlab-mastery-ladder>div+div{
    border-top:1px solid var(--border-color);
}
.wordlab-mastery-ladder>div strong{
    color:var(--text-primary);
}
.wordlab-home-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    margin:18px 0;
    padding:18px 20px;
    border:1px solid color-mix(in srgb,var(--primary) 38%,transparent);
    border-radius:22px;
    background:
      linear-gradient(135deg,color-mix(in srgb,var(--primary) 14%,transparent),color-mix(in srgb,var(--card-bg) 94%,transparent));
    box-shadow:0 16px 45px rgba(0,0,0,.15);
}
.wordlab-home-card__copy{
    min-width:0;
}
.wordlab-home-card__copy>span{
    display:block;
    margin-bottom:4px;
    color:var(--primary);
    font-size:10px;
    font-weight:900;
    letter-spacing:.14em;
    text-transform:uppercase;
}
.wordlab-home-card__copy>strong{
    display:block;
    color:var(--text-primary);
    font-size:18px;
}
.wordlab-home-card__copy>small{
    display:block;
    margin-top:4px;
    color:var(--text-secondary);
    line-height:1.45;
}
.wordlab-menu-card{
    position:relative;
}
.wordlab-menu-badge{
    position:absolute;
    top:13px;
    right:13px;
    max-width:calc(100% - 26px);
    padding:5px 8px;
    border:1px solid rgba(255,255,255,.28);
    border-radius:999px;
    background:rgba(0,0,0,.18);
    color:#fff;
    font-size:9px;
    font-weight:900;
    letter-spacing:.05em;
    text-transform:uppercase;
}
.wordlab-menu-badge.is-complete{
    background:rgba(16,185,129,.26);
}
@media (max-width:860px){
    .wordlab-hero{grid-template-columns:1fr}
    .wordlab-stat-grid,.wordlab-progress-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
    .wordlab-page{padding-left:12px!important;padding-right:12px!important}
    .wordlab-hero{padding:20px;border-radius:22px}
    .wordlab-hero h2{font-size:36px}
    .wordlab-hero__actions{display:grid;grid-template-columns:1fr}
    .wordlab-hero__actions .wordlab-primary-btn,
    .wordlab-hero__actions .wordlab-secondary-btn{width:100%}
    .wordlab-stat-grid{gap:8px}
    .wordlab-stat-grid article,.wordlab-progress-grid article{padding:13px;border-radius:15px}
    .wordlab-stat-grid strong,.wordlab-progress-grid strong{font-size:22px}
    .wordlab-tabs{top:6px;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}
    .wordlab-tabs button{padding:7px 5px;font-size:11px}
    .wordlab-option-grid{grid-template-columns:1fr}
    .wordlab-run-card,.wordlab-daily-card{padding:18px;border-radius:20px}
    .wordlab-run-card h2{font-size:27px}
    .wordlab-run-card h2,.wordlab-daily-card h2{max-width:100%;overflow-wrap:anywhere}
    .wordlab-filters{grid-template-columns:1fr}
    .wordlab-section-heading{align-items:flex-start;flex-direction:column}
    .wordlab-word-row{align-items:flex-start;flex-direction:column}
    .wordlab-home-card{align-items:flex-start;flex-direction:column}
    .wordlab-home-card .wordlab-primary-btn{width:100%}
    .wordlab-mastery-ladder>div{grid-template-columns:1fr;gap:4px}
}
.progress-section {
    background: var(--card-bg);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    padding: 20px;
    margin-bottom: 16px;
}
.progress-section--hero{
    background:linear-gradient(145deg, rgba(65,204,190,0.12), rgba(44,143,228,0.08)), var(--card-bg);
    border:1px solid rgba(65,204,190,0.18);
}
.progress-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}
.progress-bar {
    height: 10px;
    background: var(--background-secondary);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
}
.progress-bar-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 10px;
    transition: width 0.5s ease;
}
.progress-text {
    font-size: 14px;
    color: var(--text-secondary);
}
.progress-insight-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.progress-pill{padding:14px 16px;border-radius:16px;background:var(--background-secondary);border:1px solid var(--border-color);display:flex;flex-direction:column;gap:6px}
.progress-pill span{font-size:12px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}
.progress-pill strong{font-size:15px;color:var(--text-primary)}
.progress-caption{font-size:13px;line-height:1.7;color:var(--text-secondary);margin-bottom:14px}
.progress-recommendations{display:flex;flex-direction:column;gap:10px}
.progress-recommendation{padding:14px 16px;border-radius:16px;background:linear-gradient(135deg,var(--primary-lighter),rgba(255,255,255,0.03));border:1px solid var(--btn-icon-border);font-size:14px;line-height:1.6;color:var(--text-primary)}
.progress-pill small{font-size:12px;line-height:1.6;color:var(--text-secondary)}
.progress-action-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.progress-action-btn{border:none;border-radius:16px;padding:13px 18px;background:linear-gradient(135deg,rgba(65,204,190,0.92),rgba(44,143,228,0.92));color:#08131d;font-weight:700;box-shadow:0 12px 24px rgba(0,0,0,0.18)}
.progress-action-btn.secondary{background:rgba(255,255,255,0.05);color:var(--text-primary);border:1px solid var(--border-color);box-shadow:none}
.progress-highlight-card{padding:18px;border-radius:22px;background:linear-gradient(135deg,rgba(65,204,190,0.12),rgba(44,143,228,0.07));border:1px solid rgba(65,204,190,0.2)}
.progress-highlight-badge{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.08);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-primary);margin-bottom:12px}
.progress-highlight-text{font-size:15px;line-height:1.75;color:var(--text-primary)}
.progress-section--details{padding:0;overflow:hidden}
.progress-section__toggle{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 20px;cursor:pointer;list-style:none;color:var(--text-primary);font-weight:700}
.progress-section__toggle::-webkit-details-marker{display:none}
.progress-section__toggle span{font-size:17px;line-height:1.2}
.progress-section__toggle small{font-size:12px;line-height:1.5;color:var(--text-secondary);font-weight:600;max-width:270px;text-align:right}
.progress-section--details[open] .progress-section__toggle{border-bottom:1px solid var(--border-color)}
.progress-section__detail-body{padding:16px;display:grid;gap:14px}
.progress-section__detail-body .progress-section{margin-bottom:0}
.mastery-board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mastery-row{padding:14px 16px;border-radius:16px;background:var(--background-secondary);border:1px solid var(--border-color)}
.mastery-top{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:8px;font-size:14px;font-weight:700;color:var(--text-primary)}
.mastery-bar{height:10px;border-radius:999px;background:var(--card-bg);overflow:hidden}
.mastery-fill{height:100%;border-radius:999px}
.mastery-fill.strong{background:linear-gradient(90deg,#22C55E,#86EFAC)}
.mastery-fill.stable{background:linear-gradient(90deg,#F59E0B,#FCD34D)}
.mastery-fill.weak{background:linear-gradient(90deg,#EF4444,#FCA5A5)}
.mastery-meta{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:8px;font-size:12px;color:var(--text-secondary)}
.study-plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.study-plan-card{padding:18px;border-radius:18px;background:linear-gradient(135deg,var(--primary-lighter),rgba(255,255,255,0.02));border:1px solid var(--btn-icon-border)}
.study-plan-label{display:inline-flex;align-items:center;padding:7px 10px;border-radius:999px;background:var(--card-bg);border:1px solid var(--border-color);font-size:11px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.6px;margin-bottom:12px}
.study-plan-card h3{font-size:17px;font-weight:700;color:var(--text-primary);margin-bottom:8px;word-break:normal;overflow-wrap:normal;hyphens:none}
.study-plan-card p{font-size:14px;line-height:1.7;color:var(--text-secondary);word-break:normal;overflow-wrap:normal;hyphens:none}
.diagnostic-shell{display:flex;flex-direction:column;gap:20px}
.diagnostic-hero{padding:44px 36px}
.diagnostic-meta-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:18px}
.diagnostic-meta-pill{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,0.12);border:1px solid var(--hero-border);font-size:13px;font-weight:600;color:inherit}
.diagnostic-bullet-list{display:flex;flex-direction:column;gap:10px}
.diagnostic-bullet{padding:12px 14px;border-radius:14px;background:var(--background-secondary);border:1px solid var(--border-color);font-size:14px;color:var(--text-primary);line-height:1.6}
.diagnostic-note{margin-top:18px;padding:14px 16px;border-radius:14px;background:var(--background-secondary);border:1px solid var(--border-color);font-size:13px;line-height:1.6;color:var(--text-secondary)}
.diagnostic-status-card{margin-top:16px;padding:16px 18px;border-radius:18px;background:linear-gradient(135deg,var(--primary-lighter),rgba(255,255,255,0.03));border:1px solid var(--btn-icon-border);display:flex;flex-direction:column;gap:12px}
.diagnostic-status-top{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;flex-wrap:wrap}
.diagnostic-status-title{font-size:15px;font-weight:700;color:var(--text-primary)}
.diagnostic-status-subtitle{font-size:13px;line-height:1.6;color:var(--text-secondary)}
.diagnostic-status-pill{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;background:var(--card-bg);border:1px solid var(--border-color);font-size:12px;font-weight:700;color:var(--text-primary);text-transform:uppercase;letter-spacing:.5px}
.diagnostic-status-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.diagnostic-status-item{padding:12px 14px;border-radius:14px;background:var(--card-bg);border:1px solid var(--border-color)}
.diagnostic-status-item span{display:block;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text-secondary);margin-bottom:6px}
.diagnostic-status-item strong{font-size:14px;line-height:1.5;color:var(--text-primary)}
.placement-status-card{background:linear-gradient(135deg,rgba(32,80,167,0.16),rgba(45,122,95,0.08));border-color:rgba(96,165,250,0.24)}
.diagnostic-import-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap}
.diagnostic-import-form{display:flex;flex-direction:column;gap:16px}
.diagnostic-import-actions{justify-content:flex-start}
.diagnostic-import-card .form-group{margin-bottom:0}
.diagnostic-import-card textarea.form-input{min-height:96px;resize:vertical}
.personalized-start-note{margin-top:18px;padding:16px 18px;border-radius:18px;background:linear-gradient(135deg,var(--primary-lighter),rgba(255,255,255,0.02));border:1px solid var(--btn-icon-border);text-align:left}
.personalized-start-note h3{font-size:16px;font-weight:700;color:var(--text-primary);margin-bottom:8px}
.personalized-start-note p{font-size:14px;line-height:1.7;color:var(--text-secondary);margin-bottom:12px}
.personalized-start-meta{display:flex;gap:10px;flex-wrap:wrap}
.personalized-start-chip{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;background:var(--card-bg);border:1px solid var(--border-color);font-size:12px;font-weight:600;color:var(--text-primary)}
.diagnostic-topline,.diagnostic-result-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;flex-wrap:wrap}
.diagnostic-section-label{font-size:12px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--primary)}
.diagnostic-timer,.diagnostic-score-badge{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border-radius:16px;background:var(--background-secondary);border:1px solid var(--border-color);font-size:16px;font-weight:700;color:var(--text-primary);min-width:96px}
.diagnostic-progress-wrap{margin:18px 0}
.diagnostic-progress-bar{height:12px;background:var(--background-secondary);border-radius:999px;overflow:hidden}
.diagnostic-progress-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--primary-light));border-radius:999px;transition:width .3s ease}
.diagnostic-progress-text{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--text-secondary);margin-top:8px}
.diagnostic-context-card{padding:16px 18px;border-radius:16px;background:var(--background-secondary);border:1px solid var(--border-color);margin-bottom:16px}
.diagnostic-context-label{font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--primary);margin-bottom:8px}
.diagnostic-source-text{white-space:pre-line;font-size:14px;line-height:1.8;color:var(--text-primary)}
.diagnostic-question-reminder{margin:-2px 0 16px;padding:14px 16px;border-radius:14px;background:color-mix(in srgb, var(--primary) 10%, var(--background-secondary));border:1px solid color-mix(in srgb, var(--primary) 24%, var(--border-color))}
.diagnostic-question-reminder-label{font-size:10px;font-weight:700;letter-spacing:.75px;text-transform:uppercase;color:var(--primary);margin-bottom:6px}
.diagnostic-question-reminder-text{font-size:14px;font-weight:700;line-height:1.55;color:var(--text-primary)}
.diagnostic-question-meta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.diagnostic-nav{justify-content:space-between;margin-top:22px}
.diagnostic-loading-card{min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.diagnostic-spinner{width:62px;height:62px;border-radius:50%;border:4px solid var(--border-color);border-top-color:var(--primary);animation:spin 1s linear infinite;margin-bottom:18px}
.diagnostic-skill-chart{display:flex;flex-direction:column;gap:12px}
.placement-queue-shell{display:flex;flex-direction:column;gap:18px}
.placement-queue-toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.placement-queue-stats{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.placement-queue-chipbar{display:flex;gap:8px;flex-wrap:wrap}
.placement-queue-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;border:1px solid var(--border-color);background:var(--background-secondary);font-size:12px;font-weight:700;color:var(--text-secondary);cursor:pointer;transition:.2s ease}
.placement-queue-chip.active{background:rgba(65,204,190,0.14);border-color:rgba(65,204,190,0.3);color:var(--text-primary)}
.placement-queue-actions{display:flex;gap:10px;flex-wrap:wrap}
.placement-queue-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.placement-queue-card{position:relative;padding:18px;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.015));border:1px solid var(--border-color);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:14px}
.placement-queue-card.selected{border-color:rgba(65,204,190,0.4);box-shadow:0 0 0 2px rgba(65,204,190,0.12),var(--shadow-sm)}
.placement-queue-head{display:flex;gap:12px;align-items:flex-start}
.placement-queue-checkbox{margin-top:3px;width:18px;height:18px;accent-color:var(--primary);cursor:pointer}
.placement-queue-user{min-width:0;flex:1}
.placement-queue-user strong{display:block;font-size:16px;line-height:1.35;color:var(--text-primary)}
.placement-queue-user span{display:block;font-size:12px;line-height:1.6;color:var(--text-secondary)}
.placement-queue-status{display:inline-flex;align-items:center;padding:7px 11px;border-radius:999px;border:1px solid var(--border-color);font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;white-space:nowrap}
.placement-queue-status.pending{background:rgba(245,158,11,0.12);border-color:rgba(245,158,11,0.28);color:#FBBF24}
.placement-queue-status.verified{background:rgba(16,185,129,0.12);border-color:rgba(16,185,129,0.28);color:#34D399}
.placement-queue-status.rejected{background:rgba(239,68,68,0.12);border-color:rgba(239,68,68,0.28);color:#F87171}
.placement-queue-score-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.placement-queue-score{padding:12px 14px;border-radius:16px;background:var(--background-secondary);border:1px solid var(--border-color)}
.placement-queue-score span{display:block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:6px}
.placement-queue-score strong{font-size:16px;color:var(--text-primary)}
.placement-queue-meta{display:grid;gap:8px;font-size:13px;color:var(--text-secondary)}
.placement-queue-note{padding:12px 14px;border-radius:16px;background:rgba(255,255,255,0.025);border:1px solid rgba(255,255,255,0.06);font-size:13px;line-height:1.6;color:var(--text-secondary)}
.placement-queue-row-actions{display:flex;gap:10px;flex-wrap:wrap}
.placement-queue-empty{padding:24px;border-radius:22px;border:1px dashed var(--border-color);background:var(--background-secondary);color:var(--text-secondary);text-align:center}
.diagnostic-skill-row{padding:12px 14px;border-radius:14px;background:var(--background-secondary);border:1px solid var(--border-color)}
.diagnostic-skill-top{display:flex;justify-content:space-between;gap:12px;font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:8px}
.diagnostic-skill-meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--text-secondary);margin:-2px 0 8px}
.diagnostic-skill-bar{height:10px;border-radius:999px;background:var(--card-bg);overflow:hidden}
.diagnostic-skill-fill{height:100%;border-radius:999px}
.diagnostic-skill-fill.strong{background:linear-gradient(90deg,#22C55E,#86EFAC)}
.diagnostic-skill-fill.stable{background:linear-gradient(90deg,#F59E0B,#FCD34D)}
.diagnostic-skill-fill.weak{background:linear-gradient(90deg,#EF4444,#FCA5A5)}
.diagnostic-result-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px}
.diagnostic-result-card{padding:16px;border-radius:16px;background:var(--background-secondary);border:1px solid var(--border-color)}
.diagnostic-result-card-title{font-size:14px;font-weight:700;color:var(--text-primary);margin-bottom:12px}
.diagnostic-tag-list{display:flex;flex-wrap:wrap;gap:10px}
.diagnostic-tag{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;background:var(--card-bg);border:1px solid var(--border-color);font-size:13px;font-weight:600;color:var(--text-primary)}
.diagnostic-tag.muted{color:var(--text-secondary)}
.diagnostic-review-list{display:flex;flex-direction:column;gap:14px}
.diagnostic-review-card{padding:18px;border-radius:18px;background:var(--background-secondary);border:1px solid var(--border-color)}
.diagnostic-review-top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap;margin-bottom:12px}
.diagnostic-review-top h3{font-size:18px;line-height:1.5;color:var(--text-primary)}
.diagnostic-review-status{padding:8px 12px;border-radius:999px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.6px}
.diagnostic-review-status.correct{background:var(--correct-bg);color:var(--correct-text);border:1px solid var(--correct-border)}
.diagnostic-review-status.incorrect{background:var(--incorrect-bg);color:var(--incorrect-text);border:1px solid var(--incorrect-border)}
.diagnostic-review-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.diagnostic-review-meta span{padding:7px 10px;border-radius:999px;background:var(--card-bg);border:1px solid var(--border-color);font-size:12px;color:var(--text-secondary)}
.diagnostic-review-source{padding:12px 14px;border-radius:14px;background:var(--card-bg);border:1px solid var(--border-color);font-size:13px;line-height:1.7;color:var(--text-secondary);white-space:pre-line;margin-bottom:12px}
.diagnostic-review-explanation,.diagnostic-review-evidence{font-size:14px;line-height:1.7;color:var(--text-primary)}
.theme-banner-wotd,
.theme-banner-announce,
.reading-card,
.quiz-header,
.progress-section,
.diagnostic-result-card,
.diagnostic-status-card,
.study-plan-card,
.mastery-row,
.progress-pill,
.diagnostic-status-item,
.diagnostic-context-card,
.diagnostic-review-card,
.stats-card,
.profile-card,
.auth-card,
.modal{min-width:0}
.theme-banner-wotd *,
.theme-banner-announce *,
.reading-card *,
.quiz-header *,
.progress-section *,
.diagnostic-result-card *,
.diagnostic-status-card *,
.study-plan-card *,
.mastery-row *,
.progress-pill *,
.diagnostic-status-item *,
.diagnostic-context-card *,
.diagnostic-review-card *,
.stats-card *,
.profile-card *,
.auth-card *,
.modal *{overflow-wrap:anywhere;word-break:break-word}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.minigame-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:20px}
.minigame-card{padding:22px 18px;border-radius:18px;border:1px solid var(--border-color);background:var(--background-secondary);text-align:left;color:var(--text-primary);cursor:pointer;font-family:inherit;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.minigame-card:hover{transform:translateY(-2px);border-color:var(--primary);box-shadow:var(--shadow-sm)}
.minigame-card-icon{font-size:28px;margin-bottom:12px}
.minigame-card-title{font-size:17px;font-weight:700;margin-bottom:6px}
.minigame-card-desc{font-size:13px;line-height:1.6;color:var(--text-secondary)}
.minigame-panel-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap}
.minigame-meta{display:flex;gap:10px;flex-wrap:wrap}
.minigame-meta span{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;background:var(--background-secondary);border:1px solid var(--border-color);font-size:13px;font-weight:600;color:var(--text-primary)}
.matchpair-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.matchpair-list{display:flex;flex-direction:column;gap:10px}
.matchpair-item{padding:14px 16px;border-radius:14px;border:1px solid var(--border-color);background:var(--background-secondary);font-size:14px;font-weight:600;text-align:left;color:var(--text-primary);cursor:pointer;transition:transform .18s ease,border-color .18s ease,background-color .18s ease}
.matchpair-item:hover{border-color:var(--primary);transform:translateY(-1px)}
.matchpair-item.active{background:var(--primary-lighter);border-color:var(--primary);color:var(--primary)}
.minigame-lab-page{max-width:1120px}
.minigame-lab-page>.page-header{margin-bottom:18px;padding:16px 18px;border-radius:24px;border:1px solid rgba(255,255,255,0.08);background:linear-gradient(145deg,rgba(8,17,26,0.7),rgba(17,36,52,0.56));backdrop-filter:blur(16px)}
.minigame-lab-page>.page-header .page-title{margin:0}
.minigame-lab-shell{display:grid;gap:18px}
.minigame-lab-hub{display:grid;gap:18px}
.minigame-lab-hero{position:relative;overflow:hidden;padding:28px;border-radius:30px;border:1px solid rgba(255,255,255,0.08);background:
  radial-gradient(circle at 16% 18%,rgba(65,204,190,0.22),transparent 24%),
  radial-gradient(circle at 84% 22%,rgba(56,189,248,0.16),transparent 26%),
  linear-gradient(135deg,#08111A 0%,#102131 46%,#142C3F 100%);
box-shadow:var(--shadow-md)}
.minigame-lab-hero::before,
.minigame-lab-hero::after{content:"";position:absolute;border-radius:999px;pointer-events:none;opacity:.7}
.minigame-lab-hero::before{width:280px;height:280px;right:-90px;top:-110px;background:radial-gradient(circle,rgba(65,204,190,0.22),transparent 68%);animation:minigameOrbit 16s linear infinite}
.minigame-lab-hero::after{width:220px;height:220px;left:-60px;bottom:-120px;background:radial-gradient(circle,rgba(96,165,250,0.2),transparent 70%);animation:minigameFloat 9s ease-in-out infinite}
.minigame-lab-kicker{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.1);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#CCFBF1}
.minigame-lab-title{position:relative;z-index:1;margin-top:16px;font-size:clamp(29px,4.2vw,46px);line-height:1.02;max-width:11ch;color:#F8FAFC}
.minigame-lab-copy{position:relative;z-index:1;margin-top:14px;max-width:620px;font-size:15px;line-height:1.75;color:rgba(226,232,240,0.84)}
.minigame-lab-stats{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:22px}
.minigame-lab-stat{padding:14px 16px;border-radius:20px;background:rgba(8,17,26,0.38);border:1px solid rgba(255,255,255,0.08);backdrop-filter:blur(12px)}
.minigame-lab-stat span{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(226,232,240,0.62)}
.minigame-lab-stat strong{display:block;margin-top:8px;font-size:22px;color:#F8FAFC}
.minigame-lab-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.minigame-lab-card{--tone-a:#38bdf8;--tone-b:#0f172a;--tone-c:rgba(56,189,248,.16);position:relative;overflow:hidden;padding:22px;border:none;border-radius:28px;text-align:left;color:#F8FAFC;cursor:pointer;background:
  linear-gradient(155deg,color-mix(in srgb,var(--tone-b) 88%, #ffffff 12%) 0%,color-mix(in srgb,var(--tone-b) 98%, black 2%) 100%);
box-shadow:0 18px 36px rgba(2,6,23,0.22);transition:transform .24s ease,box-shadow .24s ease,filter .24s ease}
.minigame-lab-card::before,
.minigame-lab-card::after{content:"";position:absolute;pointer-events:none}
.minigame-lab-card::before{inset:auto -14% -42% auto;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,var(--tone-c),transparent 68%)}
.minigame-lab-card::after{top:18px;right:18px;width:88px;height:88px;border-radius:24px;border:1px solid rgba(255,255,255,0.08);background:linear-gradient(135deg,rgba(255,255,255,0.12),transparent);transform:rotate(14deg)}
.minigame-lab-card:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 24px 46px rgba(2,6,23,0.28);filter:saturate(1.05)}
.minigame-lab-card-top{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.minigame-lab-card-icon{width:56px;height:56px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:28px;background:rgba(255,255,255,0.12);backdrop-filter:blur(8px)}
.minigame-lab-card-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.08);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(248,250,252,0.86)}
.minigame-lab-card-kicker{position:relative;z-index:1;margin-top:20px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(226,232,240,0.68)}
.minigame-lab-card-title{position:relative;z-index:1;margin-top:8px;font-size:24px;line-height:1.05}
.minigame-lab-card-desc{position:relative;z-index:1;margin-top:10px;font-size:14px;line-height:1.65;color:rgba(226,232,240,0.8)}
.minigame-lab-card-meta{position:relative;z-index:1;display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.minigame-lab-card-pill{display:inline-flex;align-items:center;padding:7px 11px;border-radius:999px;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.06);font-size:12px;font-weight:700;color:#E2E8F0}
.minigame-lab-card[data-theme="scramble"]{--tone-a:#22d3ee;--tone-b:#082032;--tone-c:rgba(34,211,238,.22)}
.minigame-lab-card[data-theme="sentence"]{--tone-a:#f97316;--tone-b:#29130A;--tone-c:rgba(249,115,22,.22)}
.minigame-lab-card[data-theme="archive"]{--tone-a:#10b981;--tone-b:#081A15;--tone-c:rgba(16,185,129,.2)}
.minigame-lab-card[data-theme="speed"]{--tone-a:#60a5fa;--tone-b:#0B1226;--tone-c:rgba(96,165,250,.2)}
.minigame-lab-card[data-theme="shadow"]{--tone-a:#c084fc;--tone-b:#180B26;--tone-c:rgba(192,132,252,.22)}
.minigame-lab-card[data-theme="cloze"]{--tone-a:#38bdf8;--tone-b:#081726;--tone-c:rgba(56,189,248,.18)}
.minigame-lab-card[data-theme="detective"]{--tone-a:#fb7185;--tone-b:#220D15;--tone-c:rgba(251,113,133,.2)}
.minigame-lab-card[data-theme="gameshow"]{--tone-a:#facc15;--tone-b:#23190A;--tone-c:rgba(250,204,21,.22)}
.minigame-lab-card[data-theme="lab"]{--tone-a:#4ade80;--tone-b:#081B12;--tone-c:rgba(74,222,128,.18)}
.minigame-lab-card[data-theme="anchor"]{--tone-a:#2dd4bf;--tone-b:#071B19;--tone-c:rgba(45,212,191,.2)}
.minigame-lab-card[data-theme="map"]{--tone-a:#f472b6;--tone-b:#220B16;--tone-c:rgba(244,114,182,.18)}
.minigame-intro{display:grid;gap:14px}
.minigame-intro-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.minigame-intro-stage{--game-accent:#22d3ee;--game-accent-soft:rgba(34,211,238,0.18);--game-ink:#E6FFFE;position:relative;overflow:hidden;border-radius:32px;padding:26px;border:1px solid rgba(255,255,255,0.08);background:
  radial-gradient(circle at 16% 16%,var(--game-accent-soft),transparent 24%),
  radial-gradient(circle at 84% 12%,rgba(255,255,255,0.06),transparent 26%),
  linear-gradient(160deg,color-mix(in srgb,var(--game-accent) 16%, #04111A 84%) 0%,#091722 54%,#10202D 100%);
box-shadow:0 22px 44px rgba(2,6,23,0.28)}
.minigame-intro[data-theme="sentence"] .minigame-intro-stage{--game-accent:#f97316;--game-accent-soft:rgba(249,115,22,0.18);--game-ink:#FFF7ED}
.minigame-intro[data-theme="archive"] .minigame-intro-stage{--game-accent:#10b981;--game-accent-soft:rgba(16,185,129,0.2);--game-ink:#ECFDF5}
.minigame-intro[data-theme="speed"] .minigame-intro-stage{--game-accent:#60a5fa;--game-accent-soft:rgba(96,165,250,0.2);--game-ink:#EFF6FF}
.minigame-intro[data-theme="shadow"] .minigame-intro-stage{--game-accent:#c084fc;--game-accent-soft:rgba(192,132,252,0.18);--game-ink:#FAF5FF}
.minigame-intro[data-theme="cloze"] .minigame-intro-stage{--game-accent:#38bdf8;--game-accent-soft:rgba(56,189,248,0.16);--game-ink:#F0F9FF}
.minigame-intro[data-theme="detective"] .minigame-intro-stage{--game-accent:#fb7185;--game-accent-soft:rgba(251,113,133,0.18);--game-ink:#FFF1F2}
.minigame-intro[data-theme="gameshow"] .minigame-intro-stage{--game-accent:#facc15;--game-accent-soft:rgba(250,204,21,0.22);--game-ink:#FEFCE8}
.minigame-intro[data-theme="lab"] .minigame-intro-stage{--game-accent:#4ade80;--game-accent-soft:rgba(74,222,128,0.18);--game-ink:#F0FDF4}
.minigame-intro[data-theme="anchor"] .minigame-intro-stage{--game-accent:#2dd4bf;--game-accent-soft:rgba(45,212,191,0.18);--game-ink:#F0FDFA}
.minigame-intro[data-theme="map"] .minigame-intro-stage{--game-accent:#f472b6;--game-accent-soft:rgba(244,114,182,0.18);--game-ink:#FDF2F8}
.minigame-intro-head,.minigame-intro-stats,.minigame-intro-grid,.minigame-intro-actions{position:relative;z-index:1}
.minigame-intro-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start}
.minigame-intro-icon{width:86px;height:86px;border-radius:28px;display:flex;align-items:center;justify-content:center;font-size:42px;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.12);backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,0.16)}
.minigame-intro-copywrap{min-width:0}
.minigame-intro-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:22px}
.minigame-intro-stat{padding:14px 16px;border-radius:18px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);backdrop-filter:blur(10px)}
.minigame-intro-stat span{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(226,232,240,0.6)}
.minigame-intro-stat strong{display:block;margin-top:8px;font-size:22px;color:#F8FAFC}
.minigame-intro-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;margin-top:20px}
.minigame-intro-panel{padding:18px;border-radius:24px;background:rgba(8,15,22,0.42);border:1px solid rgba(255,255,255,0.08);backdrop-filter:blur(12px)}
.minigame-intro-brief{margin-top:10px;font-size:18px;line-height:1.55;color:#F8FAFC}
.minigame-intro-pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.minigame-intro-pills .minigame-lab-card-pill{background:rgba(255,255,255,0.08)}
.minigame-intro-rules{display:grid;gap:10px;margin-top:12px}
.minigame-intro-rule{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:18px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08)}
.minigame-intro-rule strong{width:28px;height:28px;flex:0 0 28px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.1);color:var(--game-ink);font-size:12px}
.minigame-intro-rule span{font-size:14px;line-height:1.6;color:rgba(226,232,240,0.84)}
.minigame-intro-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
.minigame-intro-actions .mini-btn{width:100%;border-radius:16px}
.minigame-intro-countdown{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;background:rgba(2,8,14,0.42);backdrop-filter:blur(18px) saturate(1.08);-webkit-backdrop-filter:blur(18px) saturate(1.08);z-index:4000}
.minigame-intro-countdown span,.minigame-intro-countdown small{position:relative;z-index:1}
.minigame-intro-countdown span{display:grid;place-items:center;width:min(36vw,280px);height:min(36vw,280px);font-size:clamp(88px,16vw,164px);line-height:1;font-weight:900;color:#F8FAFC;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,0.16),rgba(255,255,255,0.04) 58%,transparent 72%);box-shadow:0 22px 60px rgba(0,0,0,0.26);text-shadow:0 12px 44px rgba(0,0,0,0.34)}
.minigame-intro-countdown small{display:block;margin-top:18px;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:rgba(226,232,240,0.84)}
.minigame-arena{display:grid;gap:14px}
.minigame-arena-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.minigame-arena-bar-chip{padding:9px 14px;border-radius:999px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.08);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-primary)}
.minigame-arena-stage{--game-accent:#22d3ee;--game-accent-soft:rgba(34,211,238,0.18);--game-ink:#E6FFFE;position:relative;overflow:hidden;border-radius:32px;padding:26px;border:1px solid rgba(255,255,255,0.08);background:
  radial-gradient(circle at 16% 16%,var(--game-accent-soft),transparent 24%),
  radial-gradient(circle at 84% 12%,rgba(255,255,255,0.06),transparent 26%),
  linear-gradient(160deg,color-mix(in srgb,var(--game-accent) 18%, #031018 82%) 0%,#07131D 54%,#0B1825 100%);
box-shadow:0 22px 44px rgba(2,6,23,0.28)}
.minigame-arena[data-theme="sentence"] .minigame-arena-stage{--game-accent:#f97316;--game-accent-soft:rgba(249,115,22,0.18);--game-ink:#FFF7ED}
.minigame-arena[data-theme="archive"] .minigame-arena-stage{--game-accent:#10b981;--game-accent-soft:rgba(16,185,129,0.2);--game-ink:#ECFDF5}
.minigame-arena[data-theme="speed"] .minigame-arena-stage{--game-accent:#60a5fa;--game-accent-soft:rgba(96,165,250,0.2);--game-ink:#EFF6FF}
.minigame-arena[data-theme="shadow"] .minigame-arena-stage{--game-accent:#c084fc;--game-accent-soft:rgba(192,132,252,0.18);--game-ink:#FAF5FF}
.minigame-arena[data-theme="cloze"] .minigame-arena-stage{--game-accent:#38bdf8;--game-accent-soft:rgba(56,189,248,0.16);--game-ink:#F0F9FF}
.minigame-arena[data-theme="detective"] .minigame-arena-stage{--game-accent:#fb7185;--game-accent-soft:rgba(251,113,133,0.18);--game-ink:#FFF1F2}
.minigame-arena[data-theme="gameshow"] .minigame-arena-stage{--game-accent:#facc15;--game-accent-soft:rgba(250,204,21,0.22);--game-ink:#FEFCE8}
.minigame-arena[data-theme="lab"] .minigame-arena-stage{--game-accent:#4ade80;--game-accent-soft:rgba(74,222,128,0.18);--game-ink:#F0FDF4}
.minigame-arena[data-theme="anchor"] .minigame-arena-stage{--game-accent:#2dd4bf;--game-accent-soft:rgba(45,212,191,0.18);--game-ink:#F0FDFA}
.minigame-arena[data-theme="map"] .minigame-arena-stage{--game-accent:#f472b6;--game-accent-soft:rgba(244,114,182,0.18);--game-ink:#FDF2F8}
.minigame-arena-glow{position:absolute;border-radius:50%;pointer-events:none;mix-blend-mode:screen;filter:blur(4px)}
.minigame-arena-glow--a{width:240px;height:240px;right:-70px;top:-70px;background:radial-gradient(circle,var(--game-accent-soft),transparent 70%);animation:minigameOrbit 20s linear infinite}
.minigame-arena-glow--b{width:180px;height:180px;left:-40px;bottom:-70px;background:radial-gradient(circle,rgba(255,255,255,0.08),transparent 70%);animation:minigameFloat 8s ease-in-out infinite}
.minigame-arena-head,.minigame-stage-body,.minigame-stage-feedback,.minigame-stage-actions{position:relative;z-index:1}
.minigame-arena-kicker{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.08);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--game-ink)}
.minigame-arena-title{margin-top:14px;font-size:clamp(28px,4vw,40px);line-height:1.02;color:#F8FAFC}
.minigame-arena-copy{margin-top:12px;max-width:650px;font-size:15px;line-height:1.72;color:rgba(226,232,240,0.84)}
.minigame-arena-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:20px}
.minigame-arena-stat{padding:14px 16px;border-radius:18px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);backdrop-filter:blur(10px)}
.minigame-arena-stat span{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(226,232,240,0.6)}
.minigame-arena-stat strong{display:block;margin-top:8px;font-size:22px;color:#F8FAFC}
.minigame-stage-body{display:grid;gap:16px;margin-top:22px}
.minigame-stage-panel{padding:18px;border-radius:24px;background:rgba(8,15,22,0.42);border:1px solid rgba(255,255,255,0.08);backdrop-filter:blur(12px)}
.minigame-stage-kicker{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(226,232,240,0.64)}
.minigame-stage-question{margin-top:10px;font-size:clamp(24px,3vw,32px);line-height:1.18;color:#F8FAFC}
.minigame-stage-note{margin-top:10px;font-size:14px;line-height:1.65;color:rgba(226,232,240,0.8)}
.minigame-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.minigame-choice-btn,.minigame-truth-btn,.minigame-error-chip,.minigame-token,.minigame-stage-input{font-family:inherit}
.minigame-choice-btn{padding:16px 18px;border-radius:20px;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.06);color:#F8FAFC;font-size:15px;font-weight:700;text-align:left;cursor:pointer;transition:transform .18s ease,border-color .18s ease,background-color .18s ease,box-shadow .18s ease}
.minigame-choice-btn:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--game-accent) 70%, white 30%)}
.minigame-choice-btn.is-selected{background:color-mix(in srgb,var(--game-accent-soft) 86%, rgba(255,255,255,0.06) 14%);border-color:color-mix(in srgb,var(--game-accent) 82%, white 18%);box-shadow:0 12px 24px rgba(15,23,42,0.18)}
.minigame-scramble-rack{display:flex;gap:10px;flex-wrap:wrap}
.minigame-scramble-letter{min-width:54px;padding:14px 16px;border-radius:18px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.08);font-size:26px;font-weight:900;letter-spacing:.06em;text-align:center;color:var(--game-ink)}
.minigame-stage-input{width:100%;padding:16px 18px;border-radius:18px;border:1px solid rgba(255,255,255,0.12);background:rgba(2,6,23,0.38);font-size:18px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;text-align:center;color:#F8FAFC;outline:none}
.minigame-stage-input:focus{border-color:color-mix(in srgb,var(--game-accent) 80%, white 20%);box-shadow:0 0 0 4px color-mix(in srgb,var(--game-accent-soft) 82%, transparent 18%)}
.minigame-answer-rail,.minigame-token-bank{display:flex;flex-wrap:wrap;gap:10px;padding:16px;border-radius:22px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08)}
.minigame-answer-rail.is-empty{justify-content:center;align-items:center;min-height:76px;color:rgba(226,232,240,0.56);font-size:14px}
.minigame-token{padding:12px 16px;border:none;border-radius:999px;background:rgba(255,255,255,0.1);color:#F8FAFC;font-size:15px;font-weight:700;cursor:pointer;transition:transform .18s ease,background-color .18s ease}
.minigame-token:hover{transform:translateY(-1px);background:rgba(255,255,255,0.16)}
.minigame-sentence-board{padding:18px;border-radius:24px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);font-size:17px;line-height:1.75;color:#F8FAFC}
.minigame-blank{display:inline-flex;align-items:center;justify-content:center;min-width:70px;padding:6px 12px;margin:0 4px;border-radius:999px;background:color-mix(in srgb,var(--game-accent-soft) 72%, rgba(255,255,255,0.04) 28%);border:1px solid color-mix(in srgb,var(--game-accent) 62%, white 38%);color:var(--game-ink);font-weight:800}
.minigame-fact-shell{display:grid;gap:14px}
.minigame-fact-story{padding:18px;border-radius:24px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:15px;line-height:1.8;color:rgba(248,250,252,0.9)}
.minigame-truth-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.minigame-truth-btn{padding:18px;border-radius:22px;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.06);color:#F8FAFC;font-size:16px;font-weight:800;cursor:pointer;transition:transform .18s ease,border-color .18s ease,background-color .18s ease}
.minigame-truth-btn:hover{transform:translateY(-1px)}
.minigame-truth-btn.is-selected{background:color-mix(in srgb,var(--game-accent-soft) 86%, rgba(255,255,255,0.06) 14%);border-color:color-mix(in srgb,var(--game-accent) 82%, white 18%)}
.minigame-error-row{display:flex;flex-wrap:wrap;gap:10px}
.minigame-error-chip{padding:12px 16px;border-radius:18px;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.06);color:#F8FAFC;font-size:15px;font-weight:700;cursor:pointer;transition:transform .18s ease,border-color .18s ease,background-color .18s ease}
.minigame-error-chip:hover{transform:translateY(-1px)}
.minigame-error-chip.is-selected{background:rgba(251,113,133,0.16);border-color:rgba(251,113,133,0.68)}
.minigame-stage-feedback{padding:16px 18px;border-radius:22px;font-size:14px;line-height:1.7;border:1px solid rgba(255,255,255,0.08)}
.minigame-stage-feedback.is-correct{background:rgba(34,197,94,0.14);color:#DCFCE7;border-color:rgba(34,197,94,0.3)}
.minigame-stage-feedback.is-incorrect{background:rgba(251,113,133,0.14);color:#FFE4E6;border-color:rgba(251,113,133,0.3)}
.minigame-stage-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:6px}
.minigame-stage-actions .mini-btn{width:100%;border-radius:16px;min-width:0}
.minigame-summary{display:grid;gap:16px;padding:24px;border-radius:28px;background:rgba(8,15,22,0.48);border:1px solid rgba(255,255,255,0.08)}
.minigame-summary-title{font-size:32px;line-height:1.02;color:#F8FAFC}
.minigame-summary-copy{font-size:15px;line-height:1.75;color:rgba(226,232,240,0.8)}
.minigame-summary-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.minigame-summary-stat{padding:16px;border-radius:20px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08)}
.minigame-summary-stat span{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(226,232,240,0.6)}
.minigame-summary-stat strong{display:block;margin-top:8px;font-size:24px;color:#F8FAFC}
.minigame-summary-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.minigame-summary-actions .mini-btn{width:100%;border-radius:16px}
.minigame-memory-shell,.minigame-grid-shell,.minigame-radar-shell,.minigame-surgery-shell,.minigame-switch-shell{display:grid;gap:16px}
.minigame-memory-meter,.minigame-speed-target{margin-top:14px;display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.08);font-size:13px;font-weight:700;color:#F8FAFC}
.minigame-memory-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.minigame-memory-card{position:relative;min-height:132px;border:none;border-radius:22px;cursor:pointer;transform-style:preserve-3d;perspective:900px;background:transparent}
.minigame-memory-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;border-radius:22px;backface-visibility:hidden;transition:transform .24s ease,opacity .24s ease}
.minigame-memory-face--back{background:linear-gradient(155deg,rgba(16,185,129,0.18),rgba(8,22,18,0.94));border:1px solid rgba(16,185,129,0.28);font-size:44px;font-weight:900;color:#ECFDF5}
.minigame-memory-face--front{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.1);transform:rotateY(180deg);opacity:0}
.minigame-memory-face--front small{text-transform:uppercase;letter-spacing:.1em;font-size:11px;color:rgba(226,232,240,0.66)}
.minigame-memory-face--front strong{margin-top:10px;font-size:15px;line-height:1.5;color:#F8FAFC}
.minigame-memory-card.is-open .minigame-memory-face--back,.minigame-memory-card.is-matched .minigame-memory-face--back{transform:rotateY(180deg);opacity:0}
.minigame-memory-card.is-open .minigame-memory-face--front,.minigame-memory-card.is-matched .minigame-memory-face--front{transform:rotateY(0);opacity:1}
.minigame-memory-card.is-matched .minigame-memory-face--front{background:rgba(16,185,129,0.16);border-color:rgba(16,185,129,0.4)}
.minigame-speed-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.minigame-speed-tile{padding:20px 12px;border-radius:22px;border:1px solid rgba(255,255,255,0.1);background:linear-gradient(180deg,rgba(96,165,250,0.12),rgba(15,23,42,0.62));color:#F8FAFC;font-size:16px;font-weight:800;cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.minigame-speed-tile:hover{transform:translateY(-1px);border-color:rgba(96,165,250,0.46)}
.minigame-speed-tile.is-selected{box-shadow:0 18px 30px rgba(37,99,235,0.24);border-color:rgba(96,165,250,0.68);background:linear-gradient(180deg,rgba(96,165,250,0.26),rgba(15,23,42,0.78))}
.minigame-radar-field{position:relative;min-height:320px;border-radius:28px;border:1px solid rgba(255,255,255,0.08);background:
  radial-gradient(circle at center,rgba(192,132,252,0.12),transparent 28%),
  repeating-radial-gradient(circle at center,rgba(255,255,255,0.08) 0 2px,transparent 2px 56px),
  linear-gradient(180deg,rgba(29,12,46,0.92),rgba(7,10,19,0.98));overflow:hidden}
.minigame-radar-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:138px;height:138px;border-radius:50%;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);text-align:center;color:#F8FAFC;pointer-events:none}
.minigame-radar-center span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(226,232,240,0.6)}
.minigame-radar-center strong{margin-top:6px;font-size:24px;line-height:1.1}
.minigame-radar-node{position:absolute;transform:translate(-50%,-50%);padding:14px 18px;border-radius:999px;border:1px solid rgba(192,132,252,0.28);background:rgba(34,12,47,0.86);color:#FAF5FF;font-size:14px;font-weight:800;cursor:pointer;box-shadow:0 10px 26px rgba(0,0,0,0.22);transition:transform .18s ease,border-color .18s ease,background-color .18s ease}
.minigame-radar-node:hover{transform:translate(-50%,-52%)}
.minigame-radar-node.is-selected{border-color:rgba(192,132,252,0.72);background:rgba(88,28,135,0.92)}
.minigame-surgery-line{margin-top:18px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:18px;line-height:1.7;color:#F8FAFC}
.minigame-surgery-implant{padding:12px 18px;border-radius:18px;border:1px dashed rgba(251,113,133,0.52);background:rgba(127,29,29,0.22);color:#FFE4E6;font-size:16px;font-weight:800;cursor:pointer}
.minigame-surgery-implant.is-cleared{border-style:solid;border-color:rgba(56,189,248,0.42);background:rgba(2,132,199,0.14);color:#E0F2FE}
.minigame-surgery-kit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.minigame-surgery-patch{padding:18px 12px;border-radius:20px;border:1px solid rgba(255,255,255,0.1);background:linear-gradient(180deg,rgba(56,189,248,0.12),rgba(8,23,38,0.72));color:#F0F9FF;font-size:15px;font-weight:800;cursor:pointer}
.minigame-surgery-patch.is-selected{border-color:rgba(56,189,248,0.64);box-shadow:0 18px 28px rgba(8,47,73,0.22)}
.minigame-pairing-shell{display:grid;grid-template-columns:1.1fr .9fr;gap:16px}
.minigame-pairing-column{display:grid;gap:12px}
.minigame-pair-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:16px 18px;border:none;border-radius:22px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);color:#F8FAFC;text-align:left;cursor:pointer}
.minigame-pair-row-left{font-size:17px;font-weight:800}
.minigame-pair-row-slot{display:inline-flex;align-items:center;justify-content:center;min-width:110px;padding:10px 14px;border-radius:999px;background:rgba(4,120,87,0.16);border:1px solid rgba(74,222,128,0.26);font-size:13px;font-weight:800;color:#ECFDF5}
.minigame-pair-row.is-selected{border-color:rgba(74,222,128,0.62);box-shadow:0 16px 28px rgba(6,78,59,0.18)}
.minigame-pair-row.is-linked .minigame-pair-row-slot{background:rgba(74,222,128,0.18);border-color:rgba(74,222,128,0.44)}
.minigame-pair-bank,.minigame-switch-bank{display:flex;flex-wrap:wrap;gap:12px;padding:16px;border-radius:24px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08)}
.minigame-pair-chip,.minigame-route-chip{padding:12px 16px;border:none;border-radius:999px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.1);color:#F8FAFC;font-size:14px;font-weight:800;cursor:pointer}
.minigame-pair-chip.is-selected,.minigame-route-chip.is-selected{border-color:rgba(65,204,190,0.72);box-shadow:0 12px 24px rgba(15,23,42,0.16)}
.minigame-pair-chip.is-linked,.minigame-route-chip.is-linked{background:rgba(74,222,128,0.16);border-color:rgba(74,222,128,0.32)}
.minigame-switch-routes{display:grid;gap:12px}
.minigame-route-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;align-items:center;padding:16px 18px;border:none;border-radius:24px;background:linear-gradient(160deg,rgba(244,114,182,0.08),rgba(15,23,42,0.62));border:1px solid rgba(255,255,255,0.08);color:#F8FAFC;cursor:pointer;text-align:left}
.minigame-route-slot{display:inline-flex;align-items:center;justify-content:center;min-width:110px;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,0.08);border:1px dashed rgba(255,255,255,0.22);font-size:13px;font-weight:800}
.minigame-route-row.is-selected{border-color:rgba(244,114,182,0.56)}
.minigame-route-row.is-linked .minigame-route-slot{background:rgba(244,114,182,0.18);border-style:solid;border-color:rgba(244,114,182,0.42)}
@keyframes minigameFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-14px,0)}}
@keyframes minigameOrbit{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.minigame-lab-hidden{display:none !important}
body.minigame-session-active #englishLabDock{display:none !important}
.google-btn {
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    border: 2px solid var(--btn-secondary-border);
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.google-btn:hover {
    background: var(--primary-lighter);
    border-color: var(--primary);
}
@media (max-width: 980px){
  .minigame-lab-stats,
  .minigame-intro-stats,
  .minigame-arena-stats,
  .minigame-summary-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .minigame-lab-grid{grid-template-columns:1fr}
  .minigame-intro-grid{grid-template-columns:1fr}
}
@media (max-width: 680px){
  .minigame-lab-page>.page-header{padding:14px 14px}
  .minigame-lab-hero,
  .minigame-intro-stage,
  .minigame-arena-stage{padding:20px}
  .minigame-intro-bar,
  .minigame-arena-bar{align-items:stretch}
  .minigame-intro-bar .mini-btn,
  .minigame-arena-bar .mini-btn{flex:1}
  .minigame-intro-head{grid-template-columns:1fr}
  .minigame-intro-icon{width:72px;height:72px;font-size:36px}
  .minigame-choice-grid,
  .minigame-intro-actions,
  .minigame-truth-row,
  .minigame-summary-actions,
  .minigame-stage-actions{grid-template-columns:1fr}
  .minigame-scramble-letter{min-width:46px;font-size:22px}
  .minigame-lab-title{max-width:12ch}
  .minigame-arena-title{font-size:30px}
  .minigame-memory-grid,
  .minigame-surgery-kit,
  .minigame-speed-grid{grid-template-columns:1fr 1fr}
  .minigame-pairing-shell{grid-template-columns:1fr}
  .minigame-route-row{grid-template-columns:1fr}
  .minigame-route-slot{justify-self:flex-start}
  .minigame-radar-field{min-height:380px}
}
@media (prefers-reduced-motion: reduce){
    *,*::before,*::after{
        animation-duration:0.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:0.01ms !important;
        scroll-behavior:auto !important;
    }
}

/* Mini Games v2 - cinematic arcade worlds */
.minigame-game-icon svg{width:100%;height:100%;display:block;filter:drop-shadow(0 12px 22px rgba(0,0,0,.28))}
.minigame-lab-card[data-theme="boss"]{--tone-a:#fb7185;--tone-b:#170a1f;--tone-c:rgba(251,113,133,.22)}
.minigame-lab-card[data-theme="dialogue"]{--tone-a:#38bdf8;--tone-b:#061826;--tone-c:rgba(56,189,248,.2)}
.minigame-lab-card[data-theme="clue"]{--tone-a:#facc15;--tone-b:#1f1608;--tone-c:rgba(250,204,21,.2)}
.minigame-lab-card[data-theme="wordfall"]{--tone-a:#f97316;--tone-b:#1f1208;--tone-c:rgba(249,115,22,.22)}
.minigame-intro[data-theme="boss"] .minigame-intro-stage,
.minigame-arena[data-theme="boss"] .minigame-arena-stage{--game-accent:#fb7185;--game-accent-soft:rgba(251,113,133,.18);--game-ink:#ffe4e6}
.minigame-intro[data-theme="dialogue"] .minigame-intro-stage,
.minigame-arena[data-theme="dialogue"] .minigame-arena-stage{--game-accent:#38bdf8;--game-accent-soft:rgba(56,189,248,.18);--game-ink:#e0f2fe}
.minigame-intro[data-theme="clue"] .minigame-intro-stage,
.minigame-arena[data-theme="clue"] .minigame-arena-stage{--game-accent:#facc15;--game-accent-soft:rgba(250,204,21,.18);--game-ink:#fef9c3}
.minigame-intro[data-theme="wordfall"] .minigame-intro-stage,
.minigame-arena[data-theme="wordfall"] .minigame-arena-stage{--game-accent:#f97316;--game-accent-soft:rgba(249,115,22,.18);--game-ink:#ffedd5}
.minigame-intro-icon.minigame-game-icon{font-size:0;padding:13px}
.minigame-lab-card-icon.minigame-game-icon{font-size:0;padding:9px}
.minigame-combat-field{display:grid;grid-template-columns:minmax(180px,.8fr) minmax(240px,1.2fr) minmax(180px,.8fr);gap:14px;align-items:stretch;min-height:360px}
.minigame-combat-panel,.minigame-combat-center,.minigame-dialogue-field,.minigame-clue-field,.minigame-map-field,.minigame-map-order,.minigame-wordfall-field{position:relative;overflow:hidden;border-radius:26px;border:1px solid rgba(255,255,255,.09);background:linear-gradient(145deg,rgba(7,12,24,.72),rgba(15,23,42,.54));box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.minigame-combat-panel{display:flex;flex-direction:column;padding:16px;min-height:320px}
.minigame-combat-label{font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:rgba(226,232,240,.58)}
.minigame-combat-panel strong{margin-top:6px;font-size:clamp(18px,2vw,25px);line-height:1.04;color:#f8fafc}
.minigame-combat-panel small{margin-top:5px;color:rgba(226,232,240,.64)}
.minigame-hp-shell{height:11px;margin-top:12px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.1);box-shadow:inset 0 1px 5px rgba(0,0,0,.35)}
.minigame-hp-fill{display:block;height:100%;border-radius:inherit;transition:width .22s linear;will-change:width}
.minigame-hp-hero{background:linear-gradient(90deg,#ccfbf1,#38bdf8,#2563eb)}
.minigame-hp-boss{background:linear-gradient(90deg,#fde68a,#fb7185,#be123c)}
.minigame-model-wrap{display:grid;place-items:center;flex:1;min-height:0}
.minigame-hero-svg,.minigame-boss-svg,.minigame-npc-svg{width:min(100%,220px);height:auto;display:block;transform:translateZ(0);will-change:transform}
.minigame-boss-svg{width:min(100%,260px);animation:minigameBossIdle 2.8s ease-in-out infinite}
.minigame-hero-svg{animation:minigameHeroIdle 3.2s ease-in-out infinite}
.minigame-combat-center{display:flex;flex-direction:column;justify-content:center;padding:20px;min-height:280px;text-align:left}
.minigame-combat-center .minigame-stage-question{font-size:clamp(21px,2.4vw,31px)}
.minigame-combat-field.is-boss-hit .minigame-boss-model{animation:minigameHitBoss .24s ease both}
.minigame-combat-field.is-hero-hit .minigame-hero-model{animation:minigameHitHero .24s ease both}
.minigame-attack-grid,.minigame-defense-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.minigame-attack-card,.minigame-defense-card{display:flex;align-items:center;gap:12px;min-height:68px;padding:15px 17px;border-radius:20px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(15,23,42,.48));color:#f8fafc;font-family:inherit;font-size:15px;font-weight:800;text-align:left;cursor:pointer;transition:transform .16s ease,border-color .16s ease,background-color .16s ease}
.minigame-attack-card span,.minigame-defense-card span,.minigame-choice-btn span{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:12px;background:rgba(255,255,255,.1);color:var(--game-ink);font-size:13px}
.minigame-attack-card:hover,.minigame-defense-card:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--game-accent) 70%, white 30%)}
.minigame-attack-card.is-selected,.minigame-defense-card.is-selected{border-color:color-mix(in srgb,var(--game-accent) 82%, white 18%);background:linear-gradient(145deg,var(--game-accent-soft),rgba(15,23,42,.58))}
.minigame-dialogue-field{display:grid;grid-template-columns:180px minmax(0,1fr);gap:16px;padding:18px}
.minigame-npc-card{display:grid;place-items:center;gap:8px;text-align:center;color:#f8fafc}
.minigame-npc-card strong{font-size:14px;color:rgba(226,232,240,.76)}
.minigame-chat-stack{display:grid;align-content:center;gap:14px;min-width:0}
.minigame-chat-bubble{position:relative;padding:18px 20px;border-radius:24px;background:rgba(56,189,248,.13);border:1px solid rgba(56,189,248,.28);font-size:17px;line-height:1.65;color:#eff6ff}
.minigame-chat-bubble::before{content:"";position:absolute;left:-10px;top:28px;border-style:solid;border-width:10px 12px 10px 0;border-color:transparent rgba(56,189,248,.28) transparent transparent}
.minigame-clue-field{display:grid;grid-template-columns:1.05fr .95fr;gap:14px;padding:16px}
.minigame-case-file,.minigame-evidence-board{padding:18px;border-radius:22px;background:rgba(2,6,23,.32);border:1px solid rgba(255,255,255,.08)}
.minigame-case-file p{margin-top:10px;font-size:16px;line-height:1.8;color:rgba(248,250,252,.9)}
.minigame-clue-grid{display:grid;gap:10px;margin-top:12px}
.minigame-evidence-chip{padding:13px 15px;border-radius:18px;border:1px solid rgba(250,204,21,.2);background:rgba(250,204,21,.08);color:#fef9c3;font-family:inherit;font-size:14px;font-weight:800;text-align:left;cursor:pointer;transition:transform .16s ease,border-color .16s ease}
.minigame-evidence-chip:hover{transform:translateY(-1px)}
.minigame-evidence-chip.is-selected{border-color:rgba(250,204,21,.68);background:rgba(250,204,21,.17)}
.minigame-map-shell{display:grid;grid-template-columns:1.1fr .9fr;gap:14px;align-items:stretch}
.minigame-map-field{min-height:360px;background:
  radial-gradient(circle at 20% 25%,rgba(56,189,248,.14),transparent 22%),
  linear-gradient(145deg,rgba(9,20,34,.9),rgba(7,10,20,.96))}
.minigame-map-path{position:absolute;inset:18%;border-radius:50%;border:7px solid rgba(56,189,248,.18);transform:rotate(-16deg)}
.minigame-map-node{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;width:82px;height:82px;border-radius:28px;background:linear-gradient(145deg,rgba(56,189,248,.22),rgba(15,23,42,.78));border:1px solid rgba(56,189,248,.32);box-shadow:0 14px 26px rgba(2,6,23,.26)}
.minigame-map-node span{max-width:72px;text-align:center;font-size:12px;font-weight:900;color:#f8fafc}
.minigame-map-runner{position:absolute;z-index:2;transform:translate(-50%,-50%) scale(.36);width:180px;height:180px;pointer-events:none;filter:drop-shadow(0 18px 20px rgba(0,0,0,.36))}
.minigame-map-order{padding:18px;display:flex;flex-direction:column;justify-content:center}
.minigame-wordfall-field{min-height:320px;display:grid;place-items:center;padding:24px;background:
  radial-gradient(circle at 50% 0%,rgba(249,115,22,.2),transparent 38%),
  linear-gradient(180deg,rgba(30,17,8,.92),rgba(7,10,18,.98))}
.minigame-orbit-line{position:absolute;top:16%;left:12%;right:12%;height:2px;background:linear-gradient(90deg,transparent,rgba(251,146,60,.5),transparent)}
.minigame-word-meteor{position:absolute;top:15%;left:50%;transform:translateX(-50%);padding:13px 20px;border-radius:999px;background:linear-gradient(135deg,#fed7aa,#f97316);box-shadow:0 14px 34px rgba(249,115,22,.3);animation:minigameMeteor 2.8s ease-in-out infinite}
.minigame-word-meteor span{font-size:23px;font-weight:900;color:#431407}
.minigame-shield-base{position:absolute;bottom:30px;left:50%;width:170px;height:62px;transform:translateX(-50%);border-radius:170px 170px 28px 28px;background:linear-gradient(180deg,rgba(45,212,191,.34),rgba(15,23,42,.78));border:1px solid rgba(45,212,191,.34)}
.minigame-wordfall-field .minigame-stage-question{position:relative;margin-top:100px;text-align:center;max-width:560px}
.minigame-victory-screen{background:
  radial-gradient(circle at 16% 12%,var(--game-accent-soft),transparent 24%),
  linear-gradient(145deg,rgba(8,15,22,.78),rgba(15,23,42,.58))}
body.minigame-session-active{overflow:hidden}
body.minigame-session-active #minigamesPage{position:fixed;inset:0;z-index:3600;display:block!important;overflow:hidden;background:radial-gradient(circle at 50% 8%,rgba(65,204,190,.12),transparent 28%),#020711}
body.minigame-session-active .minigame-lab-page{width:100%;max-width:none;height:100dvh;min-height:0;padding:10px clamp(10px,2vw,20px) !important;display:flex;flex-direction:column;contain:content}
body.minigame-session-active .minigame-lab-page>.page-header{display:none}
body.minigame-session-active .minigame-lab-shell{flex:1 1 auto;min-height:0}
body.minigame-session-active .minigame-lab-shell,
body.minigame-session-active .minigame-arena{height:100%;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr)}
body.minigame-session-active .minigame-lab-shell{height:auto;display:flex;flex-direction:column;gap:0}
body.minigame-session-active .minigame-arena{flex:1 1 auto;height:auto}
body.minigame-session-active .minigame-arena-stage{height:100%;min-height:0;display:flex;flex-direction:column;gap:10px;overflow:hidden;padding:clamp(10px,1.6vw,18px);border-radius:22px}
body.minigame-session-active .minigame-arena-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end;flex:0 0 auto}
body.minigame-session-active .minigame-arena-copy{display:none}
body.minigame-session-active .minigame-arena-title{margin-top:8px;font-size:clamp(22px,3vw,34px)}
body.minigame-session-active .minigame-arena-stats{margin-top:0;grid-template-columns:repeat(4,minmax(84px,1fr));gap:8px}
body.minigame-session-active .minigame-arena-stat{padding:9px 11px;border-radius:14px;backdrop-filter:none;background:rgba(15,23,42,.72)}
body.minigame-session-active .minigame-arena-stat strong{font-size:17px}
body.minigame-session-active .minigame-stage-body{flex:1;min-height:0;overflow:hidden;margin-top:0;gap:10px}
body.minigame-session-active .minigame-stage-actions{flex:0 0 auto;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:0}
body.minigame-session-active .minigame-stage-feedback{flex:0 0 auto;padding:10px 13px;max-height:76px;overflow:auto}
body.minigame-landscape-requested #minigamesPage{overscroll-behavior:none;touch-action:manipulation}
@media (orientation:portrait) and (max-width:860px){
  body.minigame-landscape-requested::after{content:none}
}
@media (max-width:860px){
  .minigame-combat-field{grid-template-columns:.72fr 1fr .72fr;gap:8px;min-height:260px}
  .minigame-combat-panel{min-height:230px;padding:10px;border-radius:18px}
  .minigame-combat-center{min-height:220px;padding:12px;border-radius:18px}
  .minigame-boss-svg{width:min(100%,190px)}
  .minigame-hero-svg{width:min(100%,150px)}
  .minigame-attack-grid,.minigame-defense-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .minigame-attack-card,.minigame-defense-card{min-height:54px;padding:10px 12px;border-radius:16px;font-size:13px}
  .minigame-dialogue-field,.minigame-clue-field,.minigame-map-shell{grid-template-columns:1fr 1fr;gap:10px}
  .minigame-npc-svg{width:130px}
  .minigame-chat-bubble,.minigame-case-file p{font-size:14px;line-height:1.55}
  .minigame-map-field,.minigame-wordfall-field{min-height:240px}
  .minigame-map-node{width:62px;height:62px;border-radius:20px}
  .minigame-map-node span{font-size:10px}
  .minigame-stage-question{font-size:clamp(18px,3vw,25px)}
}
@media (max-width:680px){
  body.minigame-session-active .minigame-lab-page{padding:8px !important}
  body.minigame-session-active .minigame-arena-head{grid-template-columns:1fr}
  body.minigame-session-active .minigame-arena-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .minigame-combat-field,.minigame-dialogue-field,.minigame-clue-field,.minigame-map-shell{grid-template-columns:1fr}
  .minigame-combat-field{min-height:0}
  .minigame-combat-panel{min-height:170px}
  .minigame-combat-center{min-height:auto}
  .minigame-hero-panel,.minigame-boss-panel{display:grid;grid-template-columns:minmax(0,1fr) 110px;align-items:center}
  .minigame-hero-panel .minigame-hp-shell,.minigame-boss-panel .minigame-hp-shell{grid-column:1 / -1}
  .minigame-model-wrap{grid-row:1 / span 3;grid-column:2}
  .minigame-hero-svg,.minigame-boss-svg{max-width:120px}
  .minigame-attack-grid,.minigame-defense-grid,.minigame-choice-grid{grid-template-columns:1fr}
  .minigame-map-field,.minigame-wordfall-field{min-height:260px}
}
@media (orientation:portrait) and (max-width:680px){
  body.minigame-session-active .minigame-arena-bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px;align-items:center}
  body.minigame-session-active .minigame-arena-bar .mini-btn{min-height:42px;padding:8px 10px;border-radius:16px;font-size:11px;line-height:1.05}
  body.minigame-session-active .minigame-arena-bar-chip{min-width:0;padding:8px 9px;border-radius:16px;font-size:10px;line-height:1.12;text-align:center;white-space:normal}
  body.minigame-session-active .minigame-arena-stage{overflow:hidden}
  body.minigame-session-active .minigame-arena-head{gap:8px}
  body.minigame-session-active .minigame-arena-kicker,
  body.minigame-session-active .minigame-arena-copy{display:none}
  body.minigame-session-active .minigame-arena-title{font-size:24px;margin:0}
  body.minigame-session-active .minigame-arena-stats{display:flex;gap:7px;overflow-x:auto;padding-bottom:2px}
  body.minigame-session-active .minigame-arena-stat{flex:0 0 auto;min-width:88px;padding:8px 9px}
  body.minigame-session-active .minigame-arena-stat span{font-size:9px}
  body.minigame-session-active .minigame-arena-stat strong{font-size:16px}
  body.minigame-session-active .minigame-stage-body{overflow-y:auto;overflow-x:hidden;padding-right:2px}
  .minigame-combat-field{grid-template-columns:1fr 1fr;gap:8px;min-height:auto}
  .minigame-combat-center{grid-column:1 / -1;order:-1;min-height:auto;padding:12px}
  .minigame-combat-center .minigame-stage-question{font-size:18px;line-height:1.25}
  .minigame-combat-center .minigame-stage-note{display:none}
  .minigame-combat-panel{min-height:auto;padding:10px;border-radius:16px}
  .minigame-combat-panel strong{font-size:15px}
  .minigame-combat-panel small,.minigame-model-wrap{display:none}
  .minigame-hp-shell{height:8px;margin-top:8px}
  .minigame-attack-grid,.minigame-defense-grid{grid-template-columns:1fr;gap:7px}
  .minigame-attack-card,.minigame-defense-card{min-height:48px;padding:10px 11px;border-radius:15px;font-size:12px}
  .minigame-attack-card span,.minigame-defense-card span,.minigame-choice-btn span{flex-basis:30px;width:30px;height:30px}
  .minigame-dialogue-field,.minigame-clue-field,.minigame-map-shell{grid-template-columns:1fr}
  .minigame-npc-card{display:none}
  .minigame-chat-bubble,.minigame-case-file p{font-size:13px}
  .minigame-case-file,.minigame-evidence-board,.minigame-map-order{padding:12px}
  .minigame-map-field,.minigame-wordfall-field{min-height:210px}
  body.minigame-session-active .minigame-map-shell{height:100%;min-height:0;grid-template-rows:minmax(0,.56fr) minmax(0,.44fr);overflow:hidden}
  body.minigame-session-active .minigame-map-field{min-height:0;height:100%}
  body.minigame-session-active .minigame-map-order{min-height:0;padding:10px;overflow:hidden}
  body.minigame-session-active .minigame-map-order .minigame-stage-question{font-size:13px;line-height:1.18;margin-bottom:7px}
  body.minigame-session-active .minigame-map-order .minigame-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  body.minigame-session-active .minigame-map-order .minigame-choice-btn{min-height:40px;padding:8px 9px;border-radius:13px;font-size:12px}
  .minigame-stage-feedback{font-size:12px}
}
@media (orientation:landscape) and (max-height:520px) and (max-width:920px){
  body.minigame-session-active .minigame-lab-page{padding:8px 12px !important}
  body.minigame-session-active .minigame-arena-bar{min-height:42px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center}
  body.minigame-session-active .minigame-arena-bar .mini-btn{min-height:38px;padding:8px 12px;border-radius:16px;font-size:11px;line-height:1.05}
  body.minigame-session-active .minigame-arena-bar-chip{min-width:0;padding:8px 10px;border-radius:16px;font-size:10px;line-height:1.1;text-align:center;white-space:nowrap}
  body.minigame-session-active .minigame-arena-stage{padding:10px 12px;border-radius:18px;gap:6px}
  body.minigame-session-active .minigame-arena-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:start}
  body.minigame-session-active .minigame-arena-kicker{min-height:28px;padding:6px 9px;border-radius:14px;font-size:9px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.minigame-session-active .minigame-arena-title{margin:0;font-size:clamp(20px,3.2vw,30px);white-space:nowrap}
  body.minigame-session-active .minigame-arena-stats{grid-column:1 / -1;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  body.minigame-session-active .minigame-arena-stat{padding:6px 8px;border-radius:12px}
  body.minigame-session-active .minigame-arena-stat span{font-size:8px}
  body.minigame-session-active .minigame-arena-stat strong{font-size:14px}
  body.minigame-session-active .minigame-stage-body{min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:6px;margin-top:0;overflow:hidden}
  body.minigame-session-active .minigame-arena[data-theme="map"] .minigame-stage-body{grid-template-rows:minmax(0,1fr)}
  body.minigame-session-active .minigame-combat-field,
  body.minigame-session-active .minigame-dialogue-field,
  body.minigame-session-active .minigame-clue-field,
  body.minigame-session-active .minigame-map-shell,
  body.minigame-session-active .minigame-wordfall-field{min-height:0 !important;height:100%;border-radius:16px}
  body.minigame-session-active .minigame-combat-field{grid-template-columns:.7fr 1fr .7fr;gap:6px}
  body.minigame-session-active .minigame-combat-panel,
  body.minigame-session-active .minigame-combat-center{min-height:0;padding:8px;border-radius:14px}
  body.minigame-session-active .minigame-hero-svg{width:min(100%,92px);max-height:92px}
  body.minigame-session-active .minigame-boss-svg{width:min(100%,120px);max-height:108px}
  body.minigame-session-active .minigame-combat-center .minigame-stage-question{font-size:clamp(16px,3vw,22px);line-height:1.12}
  body.minigame-session-active .minigame-dialogue-field,
  body.minigame-session-active .minigame-clue-field,
  body.minigame-session-active .minigame-map-shell{grid-template-columns:minmax(0,.7fr) minmax(0,1fr);gap:8px;padding:8px}
  body.minigame-session-active .minigame-npc-svg{width:min(100%,90px);max-height:95px}
  body.minigame-session-active .minigame-chat-bubble,
  body.minigame-session-active .minigame-case-file p{font-size:12px;line-height:1.35}
  body.minigame-session-active .minigame-map-field{min-height:0}
  body.minigame-session-active .minigame-map-node{width:44px;height:44px;border-radius:14px}
  body.minigame-session-active .minigame-map-node span{font-size:8px}
  body.minigame-session-active .minigame-wordfall-field{padding:8px}
  body.minigame-session-active .minigame-wordfall-field .minigame-stage-question{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);margin:0;max-width:78%;font-size:clamp(14px,2.35vw,18px);line-height:1.1}
  body.minigame-session-active .minigame-falling-word{padding:7px 16px;border-radius:999px;font-size:16px}
  body.minigame-session-active .minigame-word-meteor{top:7%;padding:6px 14px;animation:none}
  body.minigame-session-active .minigame-word-meteor span{font-size:16px}
  body.minigame-session-active .minigame-shield-base{bottom:7px;width:118px;height:36px;border-radius:118px 118px 18px 18px;opacity:.76}
  body.minigame-session-active .minigame-attack-grid,
  body.minigame-session-active .minigame-defense-grid,
  body.minigame-session-active .minigame-choice-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;align-self:end}
  body.minigame-session-active .minigame-attack-card,
  body.minigame-session-active .minigame-defense-card,
  body.minigame-session-active .minigame-choice-btn{min-height:38px;padding:7px 9px;border-radius:12px;font-size:11px;line-height:1.12}
  body.minigame-session-active .minigame-attack-card span,
  body.minigame-session-active .minigame-defense-card span,
  body.minigame-session-active .minigame-choice-btn span{flex-basis:24px;width:24px;height:24px;border-radius:9px;font-size:10px}
  body.minigame-session-active .minigame-stage-actions{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,.7fr);gap:6px}
  body.minigame-session-active .minigame-stage-actions .mini-btn{min-height:36px;padding:8px 10px;border-radius:14px;font-size:11px;line-height:1.05}
}
@media (min-width:861px){
  body.minigame-session-active .minigame-lab-page{padding:14px 24px !important}
  body.minigame-session-active .minigame-lab-shell{height:auto}
  body.minigame-session-active .minigame-arena{grid-template-rows:auto minmax(0,1fr)}
  body.minigame-session-active .minigame-arena-bar{min-height:48px;align-items:center}
  body.minigame-session-active .minigame-arena-stage{
    height:100%;
    display:grid;
    grid-template-rows:auto minmax(0,1fr) auto auto;
    gap:12px;
    padding:clamp(14px,1.8vw,24px);
    overflow:hidden;
  }
  body.minigame-session-active .minigame-arena-head{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:start;
    gap:16px;
  }
  body.minigame-session-active .minigame-arena-title{
    margin:0;
    align-self:center;
    white-space:nowrap;
    font-size:clamp(28px,3vw,44px);
  }
  body.minigame-session-active .minigame-arena-kicker{
    min-height:42px;
    width:100%;
  }
  body.minigame-session-active .minigame-arena-stats{
    grid-column:1 / -1;
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  body.minigame-session-active .minigame-stage-body{
    min-height:0;
    display:grid;
    grid-auto-rows:auto;
    gap:12px;
    overflow:hidden;
  }
  body.minigame-session-active .minigame-arena[data-theme="boss"] .minigame-stage-body,
  body.minigame-session-active .minigame-arena[data-theme="dialogue"] .minigame-stage-body,
  body.minigame-session-active .minigame-arena[data-theme="wordfall"] .minigame-stage-body{
    grid-template-rows:minmax(0,1fr) auto;
  }
  body.minigame-session-active .minigame-arena[data-theme="clue"] .minigame-stage-body{
    grid-template-rows:minmax(0,.82fr) auto;
  }
  body.minigame-session-active .minigame-arena[data-theme="map"] .minigame-stage-body{
    grid-template-rows:minmax(0,1fr);
  }
  body.minigame-session-active .minigame-combat-field,
  body.minigame-session-active .minigame-dialogue-field,
  body.minigame-session-active .minigame-wordfall-field{
    min-height:0;
    height:auto;
  }
  body.minigame-session-active .minigame-combat-field{
    grid-template-columns:minmax(190px,.8fr) minmax(320px,1.2fr) minmax(190px,.8fr);
  }
  body.minigame-session-active .minigame-combat-panel,
  body.minigame-session-active .minigame-combat-center{
    min-height:0;
    max-height:none;
  }
  body.minigame-session-active .minigame-model-wrap{overflow:hidden}
  body.minigame-session-active .minigame-hero-svg{width:min(70%,210px);max-height:28vh}
  body.minigame-session-active .minigame-boss-svg{width:min(78%,260px);max-height:31vh}
  body.minigame-session-active .minigame-combat-center .minigame-stage-question{
    font-size:clamp(26px,2.45vw,42px);
    line-height:1.12;
  }
  body.minigame-session-active .minigame-attack-grid,
  body.minigame-session-active .minigame-defense-grid,
  body.minigame-session-active .minigame-choice-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-self:end;
  }
  body.minigame-session-active .minigame-attack-card,
  body.minigame-session-active .minigame-defense-card,
  body.minigame-session-active .minigame-choice-btn{
    min-height:clamp(56px,7.2vh,84px);
  }
  body.minigame-session-active .minigame-dialogue-field{
    min-height:0;
    grid-template-columns:minmax(150px,220px) minmax(0,1fr);
    align-items:center;
    padding:clamp(16px,1.6vw,24px);
  }
  body.minigame-session-active .minigame-npc-svg{
    width:min(100%,180px);
    max-height:26vh;
  }
  body.minigame-session-active .minigame-chat-bubble{
    font-size:clamp(15px,1.35vw,20px);
  }
  body.minigame-session-active .minigame-clue-field{
    min-height:0;
    overflow:auto;
  }
  body.minigame-session-active .minigame-map-shell{
    min-height:0;
    height:100%;
  }
  body.minigame-session-active .minigame-map-field,
  body.minigame-session-active .minigame-wordfall-field{
    min-height:0;
    height:100%;
  }
  body.minigame-session-active .minigame-stage-actions{
    width:min(100%,1260px);
    grid-template-columns:minmax(160px,.32fr) minmax(240px,.32fr) minmax(160px,.24fr);
  }
}
@keyframes minigameBossIdle{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(0,-7px,0) scale(1.015)}}
@keyframes minigameHeroIdle{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-5px,0)}}
@keyframes minigameHitBoss{0%,100%{transform:translate3d(0,0,0)}35%{transform:translate3d(10px,-3px,0)}70%{transform:translate3d(-8px,2px,0)}}
@keyframes minigameHitHero{0%,100%{transform:translate3d(0,0,0)}35%{transform:translate3d(-8px,2px,0)}70%{transform:translate3d(8px,-2px,0)}}
@keyframes minigameMeteor{0%,100%{transform:translate3d(-50%,0,0) scale(1)}50%{transform:translate3d(-50%,34px,0) scale(1.04)}}

/* ── Avatar Builder Visual UI ─────────────────────────────── */
#avatarPickerModal .modal {
    max-height: min(90dvh, 760px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: linear-gradient(145deg, rgba(18, 38, 31, 0.98), rgba(8, 17, 15, 0.98));
    border: 1px solid rgba(116, 185, 255, 0.18);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.42), 0 8px 18px rgba(0, 0, 0, 0.22);
}
#avatarPickerModal h3 {
    margin-bottom: 6px;
}
#avatarPickerModal .modal-buttons {
    flex-shrink: 0;
}
.avatar-builder-layout {
    display: grid;
    grid-template-columns: 184px minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
    min-height: 0;
    overflow: hidden;
}
.avatar-builder-preview-wrap {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    position: sticky;
    top: 0;
    padding: 16px;
    border-radius: 22px;
    background: linear-gradient(155deg, rgba(116, 185, 255, 0.14), rgba(85, 230, 193, 0.08));
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.avatar-builder-preview {
    width: 160px;
    height: 160px;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0 16px 32px rgba(0,0,0,0.28), 0 5px 12px rgba(0,0,0,0.18);
}
.avatar-builder-preview svg {
    display: block;
    transition: transform .28s cubic-bezier(0.34, 1.56, 0.64, 1), filter .28s cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: drop-shadow(0 10px 14px rgba(0,0,0,0.18));
}
.avatar-builder-controls {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: min(58dvh, 520px);
    overflow: auto;
    padding-right: 6px;
}
.av-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.av-section-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #9FDBFF;
    padding-bottom: 2px;
}
.av-section-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.av-pick-btn,
.avatar-option-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    min-width: 64px;
    padding: 5px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255,255,255,0.10), rgba(255,255,255,0.045));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--text-primary);
    cursor: pointer;
    transition: transform .24s cubic-bezier(0.34, 1.56, 0.64, 1), border-color .24s cubic-bezier(0.34, 1.56, 0.64, 1), background-color .24s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .24s cubic-bezier(0.34, 1.56, 0.64, 1);
    font-family: inherit;
    overflow: hidden;
}
.av-pick-btn:hover {
    border-color: rgba(116, 185, 255, 0.55);
    background: linear-gradient(145deg, rgba(116, 185, 255, 0.18), rgba(85, 230, 193, 0.08));
    transform: translateY(-2px);
}
.av-pick-btn.active {
    border-color: rgba(254, 234, 168, 0.92);
    background: linear-gradient(135deg, rgba(254,234,168,0.28), rgba(116,185,255,0.18));
    color: #08110f;
    box-shadow: 0 10px 18px rgba(116,185,255,0.18), 0 4px 12px rgba(254,234,168,0.2), inset 0 0 0 1px rgba(255,255,255,0.24);
}
.av-pick-btn.option-locked {
    cursor: not-allowed;
    opacity: 0.72;
    filter: grayscale(50%);
    transform: none;
}
.av-pick-btn.option-locked:hover {
    border-color: rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    transform: none;
}
.av-pick-btn.option-locked.active {
    border-color: rgba(245, 158, 11, 0.48);
    background: rgba(245, 158, 11, 0.12);
    color: var(--text-primary);
}
.av-lock-badge {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: rgba(8, 17, 15, 0.32);
    border: 0;
    color: rgba(254, 234, 168, 0.82);
    font-size: 18px;
    line-height: 1;
    text-shadow: 0 3px 12px rgba(0,0,0,0.55);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
}
.av-visual-preview {
    position: relative;
    z-index: 1;
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    overflow: hidden;
    filter: drop-shadow(0 7px 10px rgba(0,0,0,0.2));
    transition: transform .24s cubic-bezier(0.34, 1.56, 0.64, 1), filter .24s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.av-visual-preview .avatar-svg {
    width: 52px;
    height: 52px;
    display: block;
}
.av-pick-btn:hover .av-visual-preview,
.av-pick-btn.active .av-visual-preview {
    transform: scale(1.06);
}
.av-visual-fallback,
.av-swatch {
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 12px;
    border: 2px solid rgba(255,255,255,0.2);
    flex-shrink: 0;
}
.av-pick-btn.active .av-swatch { border-color: rgba(255,255,255,0.5); }
.av-icon-preview {
    display: block;
    font-size: 16px;
    line-height: 1;
    min-height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.avatar-option-item .av-chip-label {
    display: none;
}
.av-chip-label {
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
    letter-spacing: 0.2px;
}
@media (max-width: 600px) {
    #avatarPickerModal .modal {
        max-height: 92dvh;
    }
    .avatar-builder-layout {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .avatar-builder-preview-wrap {
        position: sticky;
        top: 0;
        z-index: 2;
        padding: 12px;
    }
    .avatar-builder-preview {
        width: 132px;
        height: 132px;
        border-radius: 28px;
    }
    .avatar-builder-controls {
        max-height: 44dvh;
    }
    .av-pick-btn {
        width: 60px;
        height: 60px;
        min-width: 60px;
        padding: 4px;
    }
    .av-visual-preview,
    .av-visual-preview .avatar-svg {
        width: 50px;
        height: 50px;
    }
}
.session-report-row{display:flex;justify-content:flex-end;margin-top:12px}
.session-report-btn{border:none;border-radius:999px;padding:10px 14px;background:rgba(245,158,11,0.14);color:#F59E0B;font-size:12px;font-weight:700;cursor:pointer;transition:transform .18s ease,background-color .18s ease,opacity .18s ease}
.session-report-btn:hover{background:rgba(245,158,11,0.2);transform:translateY(-1px)}
.session-report-btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.question-screen-actions{display:none}
.question-screen-action-btn{border:none;border-radius:999px;padding:10px 14px;background:var(--background-secondary);color:var(--text-primary);font-size:12px;font-weight:700;cursor:pointer;transition:transform .18s ease,background-color .18s ease,opacity .18s ease}
.question-screen-action-btn:hover{transform:translateY(-1px)}
.question-screen-action-btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.question-screen-action-btn--report{background:rgba(245,158,11,0.14);color:#F59E0B}
.quiz-option.locked{cursor:default}
.reading-question-report{display:flex;justify-content:flex-end;margin-top:10px}
@media (max-width: 600px) {
  .question-screen-actions--mobile{
    display:flex;
    gap:8px;
    margin:8px 0 12px;
    position:sticky;
    top:8px;
    z-index:12;
  }
  .question-screen-actions--mobile .question-screen-action-btn{
    flex:1;
    min-width:0;
  }
}
.duel-avatar .avatar-svg{width:100%;height:100%;display:block}
.maintenance-shell{padding:24px}
.maintenance-card{max-width:620px;text-align:center}
.maintenance-actions{justify-content:center}
.maintenance-meta{justify-content:center;text-align:center}

/* ═══════════════════════════════════════════════════════════════
   VISUAL ENHANCEMENT LAYER v2.0
   Pure CSS — no id/selector renames, no logic touched
═══════════════════════════════════════════════════════════════ */

/* ── Enhanced Backgrounds: richer depth per theme ── */
.geo-background.forest {
  background:
    radial-gradient(ellipse 70% 50% at 12% 8%,  rgba(45,122,95,0.30), transparent 50%),
    radial-gradient(ellipse 55% 55% at 88% 88%, rgba(16,74,46,0.36), transparent 52%),
    radial-gradient(circle   40% 40% at 50% 48%, rgba(30,90,69,0.10), transparent 65%),
    repeating-linear-gradient(145deg, rgba(45,122,95,0.022) 0 1px, transparent 1px 30px),
    linear-gradient(160deg, #050E09 0%, #0D1912 38%, #132418 65%, #091410 100%);
}
[data-theme="forest"] .geo-background {
  background:
    radial-gradient(ellipse 70% 50% at 12% 8%,  rgba(45,122,95,0.30), transparent 50%),
    radial-gradient(ellipse 55% 55% at 88% 88%, rgba(16,74,46,0.36), transparent 52%),
    radial-gradient(circle   40% 40% at 50% 48%, rgba(30,90,69,0.10), transparent 65%),
    repeating-linear-gradient(145deg, rgba(45,122,95,0.022) 0 1px, transparent 1px 30px),
    linear-gradient(160deg, #050E09 0%, #0D1912 38%, #132418 65%, #091410 100%);
}
[data-theme="galaxy"] .geo-background {
  background:
    radial-gradient(circle at 18% 16%, rgba(124,58,237,0.45), transparent 30%),
    radial-gradient(circle at 84% 12%, rgba(59,130,246,0.38), transparent 32%),
    radial-gradient(ellipse at 62% 78%, rgba(109,94,245,0.20), transparent 46%),
    radial-gradient(circle at 42% 52%, rgba(168,85,247,0.09), transparent 55%),
    repeating-linear-gradient(60deg, rgba(255,255,255,0.013) 0 1px, transparent 1px 44px),
    linear-gradient(160deg, #030510 0%, #060819 40%, #0C1130 70%, #050718 100%);
}
[data-theme="cosmic"] .geo-background {
  background:
    radial-gradient(ellipse at 20% 14%, rgba(45,212,191,0.32), transparent 32%),
    radial-gradient(circle  at 82% 16%, rgba(34,211,238,0.26), transparent 34%),
    radial-gradient(ellipse at 52% 82%, rgba(22,166,161,0.20), transparent 50%),
    radial-gradient(circle  at 8%  72%, rgba(6,182,212,0.13),  transparent 42%),
    repeating-linear-gradient(-45deg, rgba(45,212,191,0.018) 0 1px, transparent 1px 38px),
    linear-gradient(160deg, #020C13 0%, #061420 42%, #0C1E30 68%, #041016 100%);
}
[data-theme="bnw"] .geo-background {
  background:
    radial-gradient(circle  at 24% 20%, rgba(255,255,255,0.09), transparent 28%),
    radial-gradient(circle  at 80% 15%, rgba(255,255,255,0.06), transparent 30%),
    radial-gradient(ellipse at 52% 87%, rgba(255,255,255,0.04), transparent 42%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(45deg,  rgba(255,255,255,0.010) 0 1px, transparent 1px 38px),
    linear-gradient(160deg, #010101 0%, #060606 38%, #0E0E0E 68%, #040404 100%);
}

/* ── Tech background glows — more dramatic ── */
.tech-bg-glow:nth-child(2) {
  top: -220px; right: -130px;
  width: 720px; height: 720px;
  opacity: 0.38;
}
.tech-bg-glow:nth-child(3) {
  bottom: -180px; left: -150px;
  width: 680px; height: 680px;
  opacity: 0.28;
}

/* ── Top Bar: glassmorphism ── */
.top-bar {
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  background: color-mix(in srgb, var(--card-bg) 80%, transparent 20%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.045);
}

/* ── Hero Card: depth lighting via ::before override ── */
/* Override the generic .hero-face::before for front face
   — adds a top-left light bloom on top of the existing SVG grid */
.hero-face-front::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 58% 48% at 8% 10%, rgba(255,255,255,0.13), transparent 62%),
    radial-gradient(ellipse 30% 30% at 92% 88%, rgba(255,255,255,0.06), transparent 60%),
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
  opacity: 1;
}

/* Inset border depth on hero face */
.hero-face-front {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    inset 1px 0 0 rgba(255,255,255,0.06);
}

/* XP bar glow pulse */
.xp-progress-fill {
  box-shadow: 0 0 10px rgba(255,184,0,0.55), 0 0 20px rgba(255,184,0,0.22);
  animation: xpBarGlow 3s ease-in-out infinite;
}
@keyframes xpBarGlow {
  0%,100% { box-shadow: 0 0 8px rgba(255,184,0,0.45), 0 0 16px rgba(255,184,0,0.18); }
  50%      { box-shadow: 0 0 14px rgba(255,184,0,0.65), 0 0 28px rgba(255,184,0,0.30); }
}

/* Level badge: frosted glass upgrade */
.hero-card .level-badge {
  background: rgba(255,255,255,0.15) !important;
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.24) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.16);
  letter-spacing: 0.04em;
}

/* Hero title: subtle text-shadow depth */
.hero-card .hero-title {
  text-shadow: 0 2px 14px rgba(0,0,0,0.30), 0 1px 0 rgba(0,0,0,0.12);
  letter-spacing: -0.01em;
}
.hero-card .hero-subtitle {
  text-shadow: 0 1px 8px rgba(0,0,0,0.22);
}

/* Hero flip-hint subtle pulse */
.hero-flip-hint {
  animation: hintPulse 3.2s ease-in-out infinite;
}
@keyframes hintPulse {
  0%,100% { opacity: 0.74; }
  50%      { opacity: 0.46; }
}

/* Ambient outer glow on hero — per theme */
.hero-flip-card {
  filter: drop-shadow(0 0 20px rgba(45,122,95,0.18));
}
[data-theme="forest"] .hero-flip-card { filter: drop-shadow(0 0 26px rgba(45,122,95,0.22)); }
[data-theme="galaxy"] .hero-flip-card { filter: drop-shadow(0 0 28px rgba(109,94,245,0.28)); }
[data-theme="cosmic"] .hero-flip-card { filter: drop-shadow(0 0 26px rgba(34,166,161,0.24)); }
[data-theme="bnw"]    .hero-flip-card { filter: drop-shadow(0 0 22px rgba(255,255,255,0.10)); }

/* ── Menu Cards: deeper hover, shimmer, icon life ── */
/* Each card gets a shimmer sweep on hover */
.menu-card[class*="card-"] {
  position: relative;
  overflow: hidden;
  transition:
    transform 0.28s cubic-bezier(.22,.78,.18,1),
    box-shadow 0.28s ease,
    filter 0.28s ease !important;
}
.menu-card[class*="card-"]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg,
    transparent 25%,
    rgba(255,255,255,0.12) 50%,
    transparent 75%);
  background-size: 200% 100%;
  background-position: -200% 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  transition: background-position 0.55s ease, opacity 0.28s ease;
  z-index: 2;
}
.menu-card[class*="card-"]:not(.locked):hover::after {
  background-position: 200% 0;
  opacity: 1;
}
.menu-card[class*="card-"]:not(.locked):hover {
  transform: translateY(-6px) scale(1.014) !important;
  box-shadow:
    0 18px 44px rgba(0,0,0,0.36),
    0 4px 14px rgba(0,0,0,0.22) !important;
  filter: brightness(1.06);
}
.menu-card[class*="card-"]:active {
  transform: translateY(-2px) scale(0.992) !important;
}
/* Icon animation on card hover */
.menu-card .menu-card-icon {
  display: inline-block;
  transition: transform 0.28s cubic-bezier(.22,.78,.18,1), filter 0.28s ease;
}
.menu-card:not(.locked):hover .menu-card-icon {
  transform: scale(1.20) translateY(-3px);
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.35));
}

/* ── Staggered Card Entrance Animations ── */
.cards-grid .menu-card {
  animation: cardEntrance 0.42s cubic-bezier(.22,.78,.18,1) both;
}
.cards-grid .menu-card:nth-child(1)  { animation-delay: 20ms;  }
.cards-grid .menu-card:nth-child(2)  { animation-delay: 50ms;  }
.cards-grid .menu-card:nth-child(3)  { animation-delay: 80ms;  }
.cards-grid .menu-card:nth-child(4)  { animation-delay: 110ms; }
.cards-grid .menu-card:nth-child(5)  { animation-delay: 140ms; }
.cards-grid .menu-card:nth-child(6)  { animation-delay: 170ms; }
.cards-grid .menu-card:nth-child(7)  { animation-delay: 195ms; }
.cards-grid .menu-card:nth-child(8)  { animation-delay: 220ms; }
.cards-grid .menu-card:nth-child(9)  { animation-delay: 245ms; }
.cards-grid .menu-card:nth-child(10) { animation-delay: 265ms; }
.cards-grid .menu-card:nth-child(11) { animation-delay: 285ms; }
.cards-grid .menu-card:nth-child(12) { animation-delay: 300ms; }
.cards-grid .menu-card:nth-child(n+13){ animation-delay: 315ms; }
@keyframes cardEntrance {
  0%   { opacity: 0; transform: translateY(18px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0)    scale(1);    }
}
@media (prefers-reduced-motion: reduce) {
  .cards-grid .menu-card { animation: none !important; }
}

/* ── Home Layout Variations ── */
/* layout-default = existing (no extra class on #mainPage needed)  */

/* layout-compact: smaller hero, wider card grid (4-col on desktop) */
#mainPage.layout-compact .hero-flip-card  { min-height: 210px; }
#mainPage.layout-compact .hero-flip-inner { min-height: 210px; }
#mainPage.layout-compact .hero-face       { padding: 26px 32px; }
#mainPage.layout-compact .hero-title      { font-size: 23px; }
#mainPage.layout-compact .hero-subtitle   { font-size: 13px; margin-bottom: 12px; }
#mainPage.layout-compact .cards-grid {
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: 16px !important;
}
#mainPage.layout-compact .menu-card { padding: 24px 16px; }
#mainPage.layout-compact .menu-card-icon  { font-size: 36px; margin-bottom: 8px; }
#mainPage.layout-compact .menu-card-title { font-size: 13px; }
#mainPage.layout-compact .menu-card-desc  { font-size: 11px; }

/* layout-editorial: wider hero section, airy card layout */
#mainPage.layout-editorial .main-container { max-width: 1040px; }
#mainPage.layout-editorial .hero-flip-card { min-height: 320px; }
#mainPage.layout-editorial .hero-flip-inner{ min-height: 320px; }
#mainPage.layout-editorial .hero-face      { padding: 56px 48px; }
#mainPage.layout-editorial .hero-title     { font-size: 36px; }
#mainPage.layout-editorial .hero-subtitle  { font-size: 17px; margin-bottom: 24px; }
#mainPage.layout-editorial .cards-grid {
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 28px !important;
}
#mainPage.layout-editorial .menu-card      { padding: 46px 28px; border-radius: 24px; }
#mainPage.layout-editorial .menu-card-icon { font-size: 64px; margin-bottom: 18px; }
#mainPage.layout-editorial .menu-card-title{ font-size: 19px; }
#mainPage.layout-editorial .menu-card-desc { font-size: 13px; }

/* Responsive overrides for compact layout */
@media (max-width: 860px) {
  #mainPage.layout-compact .cards-grid {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  }
}
@media (max-width: 520px) {
  #mainPage.layout-compact .cards-grid,
  #mainPage.layout-editorial .cards-grid {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 10px !important;
  }
  #mainPage.layout-compact .menu-card,
  #mainPage.layout-editorial .menu-card { padding: 16px 10px; border-radius: 16px; }
  #mainPage.layout-compact .menu-card-icon,
  #mainPage.layout-editorial .menu-card-icon { font-size: 30px; margin-bottom: 6px; }
  #mainPage.layout-compact .menu-card-title,
  #mainPage.layout-editorial .menu-card-title{ font-size: 12px; }
  #mainPage.layout-compact .menu-card-desc,
  #mainPage.layout-editorial .menu-card-desc { display: none; }
  #mainPage.layout-editorial .hero-flip-card  { min-height: 236px; }
  #mainPage.layout-editorial .hero-flip-inner { min-height: 236px; }
  #mainPage.layout-editorial .hero-face       { padding: 28px 18px; }
  #mainPage.layout-editorial .hero-title      { font-size: 20px; }
  #mainPage.layout-editorial .hero-subtitle   { font-size: 12px; }
}
@media (max-width: 400px) {
  #mainPage.layout-compact .cards-grid,
  #mainPage.layout-editorial .cards-grid {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  }
}

/* Settings panel: layout label badge */
.settings-layout-label {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--primary-lighter);
  border: 1px solid var(--btn-icon-border);
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  margin-left: auto;
  flex-shrink: 0;
}

/* ── Premium Quote Card ── */
#homeQuoteCard {
  position: relative;
  overflow: hidden;
  background: linear-gradient(140deg,
    color-mix(in srgb, var(--card-bg) 92%, var(--primary) 8%),
    var(--card-bg)) !important;
  border: 1px solid var(--btn-icon-border) !important;
  box-shadow: var(--shadow-sm) !important;
  border-radius: var(--radius) !important;
}
#homeQuoteCard::before {
  content: '\201C';
  position: absolute;
  top: -14px;
  left: 14px;
  font-size: 100px;
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--primary);
  opacity: 0.09;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
#homeQuoteText {
  font-size: 17px !important;
  font-style: italic;
  line-height: 1.75 !important;
  color: var(--text-primary) !important;
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
#homeQuoteAuthor {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--primary) !important;
  opacity: 0.9 !important;
  letter-spacing: 0.03em;
}
#homeQuoteHint {
  font-size: 12px !important;
  color: var(--text-secondary) !important;
  opacity: 0.7 !important;
}

/* ── Stat badges upgraded ring glow ── */
.stat-badge.streak {
  box-shadow: 0 2px 10px rgba(255,107,53,0.22), 0 0 0 1px rgba(255,107,53,0.15);
}
.stat-badge.xp {
  box-shadow: 0 2px 10px rgba(255,184,0,0.22), 0 0 0 1px rgba(255,184,0,0.15);
}

/* ── Mobile: ensure top-bar glassmorphism stays safe ── */
@media (max-width: 768px) {
  .top-bar {
    /* keep backdrop-filter but reduce intensity for perf */
    backdrop-filter: blur(12px) saturate(130%);
    -webkit-backdrop-filter: blur(12px) saturate(130%);
  }
  /* Cards entrance: reduce delay on mobile for snappier feel */
  .cards-grid .menu-card:nth-child(n) { animation-delay: 30ms !important; }
  .cards-grid .menu-card:nth-child(1) { animation-delay: 10ms !important; }
  .cards-grid .menu-card:nth-child(2) { animation-delay: 25ms !important; }
  .cards-grid .menu-card:nth-child(3) { animation-delay: 40ms !important; }
}
@media (max-width: 520px) {
  #homeQuoteCard::before { font-size: 72px; }
  #homeQuoteText { font-size: 15px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   BACKGROUND STYLE SYSTEM v1.0
   4 gaya visual: geometric (default) · aurora · particles · minimal
   Dikontrol via body class: bg-aurora / bg-particles / bg-minimal
   Tidak ada class = geometric (default behaviour)
═══════════════════════════════════════════════════════════════ */

/* ── STYLE: AURORA ── */
/* Flowing gradient wave overlay + hide grid */
body.bg-aurora .tech-bg-grid {
  opacity: 0;
}
body.bg-aurora .tech-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 60% at 20% 30%, var(--aurora-a, rgba(45,122,95,0.45)), transparent 55%),
    radial-gradient(ellipse 90%  70% at 80% 20%, var(--aurora-b, rgba(45,100,180,0.30)), transparent 55%),
    radial-gradient(ellipse 80%  80% at 55% 85%, var(--aurora-c, rgba(109,94,245,0.22)), transparent 55%);
  animation: auroraShift 14s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 1;
}
/* Per-theme aurora colours */
[data-theme="forest"]  body.bg-aurora .tech-bg::after,
body.bg-aurora[data-theme="forest"]  .tech-bg::after {
  --aurora-a: rgba(45,122,95,0.50);
  --aurora-b: rgba(16,185,129,0.28);
  --aurora-c: rgba(6,120,70,0.22);
}
[data-theme="galaxy"]  body.bg-aurora .tech-bg::after,
body.bg-aurora[data-theme="galaxy"]  .tech-bg::after {
  --aurora-a: rgba(124,58,237,0.52);
  --aurora-b: rgba(59,130,246,0.30);
  --aurora-c: rgba(236,72,153,0.22);
}
[data-theme="cosmic"]  body.bg-aurora .tech-bg::after,
body.bg-aurora[data-theme="cosmic"]  .tech-bg::after {
  --aurora-a: rgba(45,212,191,0.48);
  --aurora-b: rgba(34,211,238,0.28);
  --aurora-c: rgba(6,182,212,0.20);
}
[data-theme="bnw"] body.bg-aurora .tech-bg::after,
body.bg-aurora[data-theme="bnw"] .tech-bg::after {
  --aurora-a: rgba(200,200,200,0.20);
  --aurora-b: rgba(140,140,140,0.14);
  --aurora-c: rgba(80,80,80,0.10);
}
@keyframes auroraShift {
  0%   { opacity: 0.7;  }
  50%  { opacity: 1.0;  }
  100% { opacity: 0.75; }
}
/* Extra large glow orbs for aurora feel */
body.bg-aurora .tech-bg-glow {
  filter: blur(130px);
  opacity: 0.55;
}
body.bg-aurora .tech-bg-ring { opacity: 0; }

/* ── STYLE: PARTICLES ── */
/* Floating dots via box-shadow trick on pseudo-elements */
body.bg-particles .tech-bg-grid {
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.55) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,0.35) 1px, transparent 1px);
  background-size: 80px 80px, 120px 120px;
  background-position: 0 0, 40px 40px;
  animation: particlesDrift 40s linear infinite;
  opacity: 0.18;
}
@keyframes particlesDrift {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(80px, 80px); }
}
/* Second layer — smaller, faster dots */
body.bg-particles .tech-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.70) 1.5px, transparent 1.5px);
  background-size: 50px 50px;
  background-position: 25px 25px;
  animation: particlesDrift2 28s linear infinite reverse;
  opacity: 0.10;
  pointer-events: none;
}
@keyframes particlesDrift2 {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-50px, 50px); }
}
/* Keep glows but softer */
body.bg-particles .tech-bg-glow {
  opacity: 0.30;
  filter: blur(80px);
}
body.bg-particles .tech-bg-ring {
  opacity: 0.25;
}

/* ── STYLE: MINIMAL ── */
/* No pattern, no rings — super clean pure gradient */
body.bg-minimal .tech-bg-grid,
body.bg-minimal .tech-bg-ring {
  opacity: 0;
  animation: none;
}
body.bg-minimal .tech-bg-glow {
  opacity: 0.20;
  filter: blur(160px);
  /* slow, barely-there pulse */
  animation: minimalPulse 20s ease-in-out infinite;
}
body.bg-minimal .tech-bg-glow:nth-child(2) { animation-delay: -10s; }
body.bg-minimal .tech-bg-glow:nth-child(3) { animation-delay: -5s; }
@keyframes minimalPulse {
  0%,100% { opacity: 0.16; transform: scale(1); }
  50%      { opacity: 0.26; transform: scale(1.08); }
}

/* ── Settings badge for bg style ── */
.settings-bg-label {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--primary-lighter);
  border: 1px solid var(--btn-icon-border);
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  margin-left: auto;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════
   ICON ANIMATIONS — purely visual, no JS logic
   ══════════════════════════════════════════════ */

/* ─── XP Star: sparkle + spin on hover ─── */
.stat-badge.xp .xp-icon{
  transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1), filter 0.4s ease;
  display:inline-block;
}
.stat-badge.xp:hover .xp-icon{
  transform:scale(1.25) rotate(20deg);
  filter:drop-shadow(0 0 8px rgba(255,184,0,0.9)) drop-shadow(0 0 16px rgba(255,184,0,0.5));
  animation:xpStarSpin 0.6s ease forwards;
}
@keyframes xpStarSpin{
  0%  {transform:scale(1) rotate(0deg)}
  40% {transform:scale(1.3) rotate(25deg)}
  70% {transform:scale(1.2) rotate(15deg)}
  100%{transform:scale(1.25) rotate(20deg)}
}

/* ─── Level Badge Icon: subtle breathe ─── */
.stat-badge.level .level-icon{
  display:inline-block;
  animation:levelIconBreathe 3s ease-in-out infinite;
}
@keyframes levelIconBreathe{
  0%,100%{transform:scale(1)}
  50%    {transform:scale(1.08)}
}

/* ─── Settings Gear: smooth full spin on hover ─── */
.settings-icon{transition:background 0.2s ease, border-color 0.2s ease, transform 0.45s cubic-bezier(0.34,1.2,0.64,1), box-shadow 0.2s ease}
.settings-icon:hover{
  background:var(--btn-icon-hover);
  transform:rotate(90deg) scale(1.08);
  border-color:var(--primary);
  box-shadow:0 0 12px var(--tech-glow);
}

/* ─── Notification Bell: periodic ring shake ─── */
.notification-bell{transition:transform 0.2s ease}
.notification-bell:hover{
  transform:translateY(-1px);
}
/* Bell shakes saat ada notif unread (class diset oleh badge visibility) */
.notification-bell:has(.notification-badge:not([style*="display:none"])) {
  animation:bellRing 3.5s ease-in-out infinite;
  animation-delay: 2s;
}
@keyframes bellRing{
  0%,85%,100%{transform:rotate(0deg)}
  88%        {transform:rotate(-12deg)}
  91%        {transform:rotate(10deg)}
  93%        {transform:rotate(-8deg)}
  96%        {transform:rotate(6deg)}
  98%        {transform:rotate(-3deg)}
}

/* ─── WOTD Book Icon: gentle bounce ─── */
#wotdBanner [style*="font-size:28px"],
#wotdBanner .wotd-icon{
  display:inline-block;
  animation:wotdBounce 2.4s ease-in-out infinite;
}
@keyframes wotdBounce{
  0%,100%{transform:translateY(0) rotate(-4deg)}
  30%    {transform:translateY(-5px) rotate(4deg)}
  60%    {transform:translateY(-2px) rotate(-2deg)}
}

/* ─── Speaker button: wave-pulse when active (SVG path arcs) ─── */
.speaker-btn{transition:background 0.2s ease, border-color 0.2s ease, transform 0.2s ease}
.speaker-btn:hover{
  transform:scale(1.08);
  background:var(--btn-icon-hover);
  border-color:var(--primary);
}

/* ─── Topbar stat badges: subtle lift on interaction ─── */
.stat-badge:hover{transform:translateY(-2px)}

.combo-banner{
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr);
  align-items:center;
  gap:12px;
  margin:0 0 18px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid var(--border-color);
  background:linear-gradient(135deg, color-mix(in srgb, var(--background-secondary) 88%, #ffffff 12%), var(--card-bg));
  box-shadow:var(--shadow-sm);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
.combo-banner.active{
  border-color:rgba(245,158,11,0.45);
  background:linear-gradient(135deg, rgba(245,158,11,0.16), rgba(249,115,22,0.12) 48%, rgba(15,118,110,0.08));
  box-shadow:0 12px 30px rgba(0,0,0,0.24), 0 0 0 1px rgba(245,158,11,0.08) inset;
}
.combo-banner.broken{
  border-color:rgba(239,68,68,0.28);
}
.combo-banner-label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:6px 12px;
  border-radius:999px;
  background:var(--background-secondary);
  color:var(--text-secondary);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.combo-banner-value{
  min-width:62px;
  font-size:28px;
  font-weight:800;
  line-height:1;
  color:var(--text-primary);
  letter-spacing:-0.03em;
}
.combo-banner.active .combo-banner-value{
  color:#F59E0B;
  text-shadow:0 4px 18px rgba(245,158,11,0.22);
}
.combo-banner-meta{
  color:var(--text-secondary);
  font-size:13px;
  line-height:1.5;
}
.challenge-combo-banner{
  margin:16px 0 18px;
}

.menu-card-icon svg,
.journey-stage-marker svg{
  width:1em;
  height:1em;
  display:block;
  margin:0 auto;
  stroke:currentColor;
  fill:none;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.journey-page-shell{max-width:1040px}
.journey-hero{
  text-align:left;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,0.16), transparent 30%),
    linear-gradient(135deg, #0E4F4A 0%, #083035 100%);
}
.journey-hero .hero-title{max-width:720px}
.journey-hero .hero-subtitle{max-width:780px}
.journey-hero-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:24px;
}
.journey-hero-chip{
  padding:16px 18px;
  border-radius:18px;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.18);
  backdrop-filter:blur(12px);
}
.journey-hero-chip span{
  display:block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  opacity:.75;
  margin-bottom:8px;
}
.journey-hero-chip strong{
  font-size:22px;
  line-height:1.1;
  color:#fff;
}
.journey-overview{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);
  gap:18px;
  margin-bottom:26px;
}
.journey-panel{
  background:var(--card-bg);
  border:1px solid var(--border-color);
  border-radius:24px;
  padding:24px;
  box-shadow:var(--shadow-sm);
}
.journey-panel-soft{
  background:linear-gradient(180deg, color-mix(in srgb, var(--background-secondary) 88%, #ffffff 12%), var(--card-bg));
}
.journey-kicker{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--text-secondary);
  margin-bottom:10px;
  font-weight:700;
}
.journey-panel h3{
  font-size:22px;
  color:var(--text-primary);
  margin-bottom:18px;
}
.journey-support-list{display:grid;gap:14px}
.journey-support-item{
  display:grid;
  gap:4px;
  padding:14px 16px;
  border-radius:18px;
  background:color-mix(in srgb, var(--background-secondary) 82%, transparent);
  border:1px solid rgba(255,255,255,0.04);
}
.journey-support-item strong{color:var(--text-primary);font-size:15px}
.journey-support-item span{color:var(--text-secondary);font-size:14px;line-height:1.6}
.journey-utility-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.journey-side-note{
  margin-top:18px;
  color:var(--text-secondary);
  font-size:14px;
  line-height:1.7;
}
.journey-path{
  position:relative;
  display:grid;
  gap:18px;
  padding:6px 0 8px;
}
.journey-path::before{
  content:'';
  position:absolute;
  top:18px;
  bottom:18px;
  left:31px;
  width:2px;
  background:linear-gradient(180deg, rgba(20,184,166,0.7), rgba(56,189,248,0.18));
}
.journey-stage{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  gap:18px;
  align-items:stretch;
}
.journey-stage-marker{
  width:64px;
  height:64px;
  border-radius:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:26px;
  background:linear-gradient(135deg, #0F766E 0%, #14B8A6 100%);
  box-shadow:0 14px 28px rgba(15,118,110,0.28);
  border:1px solid rgba(255,255,255,0.14);
}
.journey-stage-marker-reading{background:linear-gradient(135deg, #065F46 0%, #10B981 100%)}
.journey-stage-marker-listening{background:linear-gradient(135deg, #155E75 0%, #06B6D4 100%)}
.journey-stage-marker-writing{background:linear-gradient(135deg, #9A3412 0%, #F97316 100%)}
.journey-stage-marker-challenge{background:linear-gradient(135deg, #7F1D1D 0%, #DC2626 100%)}
.journey-stage-body{
  background:linear-gradient(180deg, color-mix(in srgb, var(--card-bg) 86%, #ffffff 14%), var(--card-bg));
  border:1px solid var(--border-color);
  border-radius:24px;
  padding:22px;
  box-shadow:var(--shadow-sm);
}
.journey-stage-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin-bottom:16px;
  flex-wrap:wrap;
}
.journey-stage-tag{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--primary-light);
  font-weight:700;
  margin-bottom:8px;
}
.journey-stage-title{
  font-size:24px;
  color:var(--text-primary);
  margin-bottom:8px;
}
.journey-stage-desc{
  color:var(--text-secondary);
  font-size:15px;
  line-height:1.7;
  max-width:720px;
}
.journey-stage-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.journey-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:8px 12px;
  border-radius:999px;
  background:var(--background-secondary);
  border:1px solid var(--border-color);
  color:var(--text-secondary);
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
}
.journey-stage-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.speed-banner{
  margin:12px 0 16px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(15,118,110,0.12);
  background:linear-gradient(135deg, rgba(15,118,110,0.08), rgba(20,184,166,0.04));
  display:grid;
  gap:6px;
  transition:transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.speed-banner-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-secondary);
}
.speed-banner-message{
  font-size:14px;
  line-height:1.55;
  color:var(--text-primary);
}
.speed-banner.active{
  box-shadow:0 10px 22px rgba(15,118,110,0.12);
  transform:translateY(-1px);
}
.speed-banner.good{
  border-color:rgba(16,185,129,0.28);
  background:linear-gradient(135deg, rgba(16,185,129,0.14), rgba(34,197,94,0.06));
}
.speed-banner.warn{
  border-color:rgba(245,158,11,0.28);
  background:linear-gradient(135deg, rgba(245,158,11,0.14), rgba(249,115,22,0.08));
}
.adaptive-reason-banner{
  margin:0 0 16px;
  padding:13px 15px;
  border-radius:18px;
  border:1px solid rgba(59,130,246,0.16);
  background:linear-gradient(135deg, rgba(37,99,235,0.12), rgba(14,165,233,0.05));
  display:grid;
  gap:6px;
}
.adaptive-reason-label{
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-secondary);
}
.adaptive-reason-message{
  font-size:14px;
  line-height:1.6;
  color:var(--text-primary);
}
.ai-tutor-card{
  display:grid;
  grid-template-columns:56px minmax(0,1fr);
  gap:14px;
  align-items:flex-start;
  margin:0 0 18px;
  padding:16px 18px;
  border-radius:20px;
  border:1px solid rgba(59,130,246,0.14);
  background:linear-gradient(135deg, rgba(30,64,175,0.08), rgba(14,165,233,0.05));
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .2s ease;
}
.ai-tutor-card.good{
  border-color:rgba(16,185,129,0.26);
  background:linear-gradient(135deg, rgba(16,185,129,0.12), rgba(34,197,94,0.06));
  box-shadow:0 10px 22px rgba(16,185,129,0.08);
}
.ai-tutor-card.warn{
  border-color:rgba(245,158,11,0.26);
  background:linear-gradient(135deg, rgba(245,158,11,0.14), rgba(249,115,22,0.08));
  box-shadow:0 10px 22px rgba(245,158,11,0.08);
}
.ai-tutor-avatar{
  width:56px;
  height:56px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  font-weight:800;
  letter-spacing:.08em;
  color:#fff;
  background:linear-gradient(135deg, #1D4ED8 0%, #0EA5E9 100%);
  box-shadow:0 12px 24px rgba(29,78,216,0.2);
  overflow:hidden;
  padding:0;
}
.ai-tutor-avatar .avatar-svg,
.coach-admin-preview-avatar .avatar-svg,
.coach-preset-avatar .avatar-svg,
.coach-avatar-builder-preview .avatar-svg{
  width:100%;
  height:100%;
  display:block;
}
.ai-tutor-copy{min-width:0}
.ai-tutor-name{
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--primary);
  margin-bottom:8px;
}
.ai-tutor-message{
  font-size:14px;
  line-height:1.65;
  color:var(--text-primary);
}
.ai-tutor-card--session{
  display:none;
}
.ai-tutor-card--summary{
  margin:18px 0 0;
  text-align:left;
}
.coach-summary-points{
  display:grid;
  gap:8px;
  margin-top:12px;
}
.coach-summary-point{
  display:flex;
  gap:8px;
  align-items:flex-start;
  font-size:13px;
  line-height:1.55;
  color:var(--text-secondary);
}
.coach-summary-point strong{
  color:var(--text-primary);
  font-weight:700;
}
.coach-summary-point-mark{
  color:var(--primary);
  font-weight:800;
  line-height:1.4;
}
.coach-advice-modal{
  width:min(440px,92vw);
  text-align:left;
  max-height:calc(100dvh - 120px);
  overflow:auto;
}
.coach-advice-shell{
  display:grid;
  gap:16px;
}
.coach-advice-kicker{
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-secondary);
  margin-bottom:8px;
}
.coach-advice-title{
  font-size:24px;
  color:var(--text-primary);
  margin:0;
}
.coach-advice-card{
  margin:0;
}
.coach-admin-panel{
  margin-top:22px;
  padding:24px;
  border-radius:24px;
  border:1px solid var(--border-color);
  background:linear-gradient(180deg, color-mix(in srgb, var(--card-bg) 90%, #ffffff 10%), var(--card-bg));
  box-shadow:var(--shadow-sm);
}
.coach-admin-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.coach-admin-kicker{
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--text-secondary);
  margin-bottom:8px;
}
.coach-admin-title{
  font-size:24px;
  line-height:1.2;
  color:var(--text-primary);
  margin:0 0 8px;
}
.coach-admin-copy{
  max-width:720px;
  margin:0;
  font-size:14px;
  line-height:1.7;
  color:var(--text-secondary);
}
.coach-admin-badge{
  min-height:34px;
  padding:8px 14px;
  border-radius:999px;
  background:var(--background-secondary);
  border:1px solid var(--border-color);
  color:var(--text-secondary);
  font-size:12px;
  font-weight:700;
}
.coach-admin-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.coach-admin-card{
  padding:18px;
  border-radius:20px;
  border:1px solid var(--border-color);
  background:var(--background-secondary);
}
.coach-admin-card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  margin-bottom:16px;
}
.coach-admin-label{
  font-size:16px;
  font-weight:800;
  color:var(--text-primary);
}
.coach-admin-hint{
  margin-top:6px;
  font-size:13px;
  color:var(--text-secondary);
}
.coach-admin-preview{
  display:grid;
  justify-items:center;
  gap:6px;
  text-align:center;
}
.coach-admin-preview-avatar{
  width:52px;
  height:52px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  font-weight:800;
  color:#fff;
  background:linear-gradient(135deg, #1D4ED8 0%, #0EA5E9 100%);
  box-shadow:0 10px 22px rgba(29,78,216,0.2);
  overflow:hidden;
  padding:0;
}
.coach-admin-preview-name{
  font-size:12px;
  font-weight:700;
  color:var(--text-primary);
}
.coach-admin-fields{
  display:grid;
  gap:12px;
}
.coach-preset-wrap{
  margin-top:16px;
}
.coach-preset-label{
  margin-bottom:10px;
  font-size:12px;
  font-weight:700;
  color:var(--text-secondary);
}
.coach-preset-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.coach-preset-btn{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  text-align:left;
  font-family:inherit;
  background:var(--card-bg);
  color:var(--text-primary);
}
.coach-preset-btn:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow-sm);
  border-color:rgba(255,255,255,0.08);
}
.coach-preset-avatar{
  width:40px;
  height:40px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:13px;
  font-weight:800;
  letter-spacing:.04em;
  flex-shrink:0;
  overflow:hidden;
  padding:0;
}
.coach-preset-text{
  display:grid;
  gap:2px;
  min-width:0;
}
.coach-preset-text strong{
  font-size:13px;
  line-height:1.2;
  color:inherit;
}
.coach-preset-text small{
  font-size:11px;
  color:var(--text-secondary);
}
.coach-preset-ocean .coach-preset-avatar{background:linear-gradient(135deg,#1D4ED8 0%,#0EA5E9 100%)}
.coach-preset-violet .coach-preset-avatar{background:linear-gradient(135deg,#6D28D9 0%,#A855F7 100%)}
.coach-preset-gold .coach-preset-avatar{background:linear-gradient(135deg,#B45309 0%,#F59E0B 100%)}
.coach-preset-teal .coach-preset-avatar{background:linear-gradient(135deg,#0F766E 0%,#14B8A6 100%)}
.coach-preset-sage .coach-preset-avatar{background:linear-gradient(135deg,#3F6212 0%,#65A30D 100%)}
.coach-preset-sunset .coach-preset-avatar{background:linear-gradient(135deg,#C2410C 0%,#F97316 100%)}
.coach-preset-indigo .coach-preset-avatar{background:linear-gradient(135deg,#3730A3 0%,#6366F1 100%)}
.coach-preset-ember .coach-preset-avatar{background:linear-gradient(135deg,#991B1B 0%,#EF4444 100%)}
.coach-admin-field{
  display:grid;
  gap:6px;
}
.coach-admin-field span{
  font-size:12px;
  font-weight:700;
  color:var(--text-secondary);
}
.coach-admin-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
.coach-avatar-builder-mount{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--border-color);
}
.coach-avatar-builder-shell{
  display:grid;
  grid-template-columns:132px minmax(0,1fr);
  gap:14px;
  align-items:flex-start;
}
.coach-avatar-builder-preview-wrap{
  display:grid;
  gap:10px;
  justify-items:center;
  text-align:center;
  position:sticky;
  top:12px;
}
.coach-avatar-builder-preview{
  width:116px;
  height:116px;
  border-radius:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  overflow:hidden;
  background:linear-gradient(135deg, rgba(29,78,216,0.12), rgba(14,165,233,0.08));
  border:1px solid rgba(29,78,216,0.16);
  box-shadow:0 14px 28px rgba(29,78,216,0.12);
}
.coach-avatar-builder-note{
  font-size:11px;
  line-height:1.55;
  color:var(--text-secondary);
}
.coach-avatar-builder-controls{
  display:grid;
  gap:12px;
  max-height:520px;
  overflow:auto;
  padding-right:4px;
}
.coach-avatar-builder-controls .av-section{
  padding:12px;
  border-radius:14px;
  background:var(--card-bg);
  border:1px solid var(--border-color);
}
.coach-avatar-builder-controls .av-section-chips{
  gap:8px;
}
.coach-avatar-pick{
  min-width:70px;
  justify-content:center;
}

@media(max-width:860px){
  .journey-overview{grid-template-columns:1fr}
  .coach-admin-grid{grid-template-columns:1fr}
  .coach-preset-grid{grid-template-columns:1fr 1fr}
  .coach-avatar-builder-shell{grid-template-columns:1fr}
  .coach-avatar-builder-preview-wrap{position:static}
}

@media(max-width:640px){
  .ai-tutor-card{
    grid-template-columns:1fr;
    gap:10px;
  }
  .ai-tutor-avatar{
    width:46px;
    height:46px;
    border-radius:14px;
  }
  .coach-preset-grid{grid-template-columns:1fr}
  .coach-admin-panel{padding:18px}
  .coach-admin-actions .quiz-btn{width:100%}
  .daily-goal-card{padding:20px 18px}
  .daily-goal-title{font-size:20px}
  .daily-goal-meta{font-size:12px}
  .daily-goal-actions{flex-direction:column}
  .daily-goal-btn{width:100%}
  .combo-banner{
    grid-template-columns:1fr;
    gap:8px;
    padding:14px;
  }
  .combo-banner-value{font-size:24px}
  .journey-hero-stats{grid-template-columns:1fr}
  .journey-stage{
    grid-template-columns:1fr;
    gap:12px;
  }
  .journey-path::before{
    left:24px;
    top:28px;
    bottom:28px;
  }
  .journey-stage-marker{
    width:48px;
    height:48px;
    border-radius:16px;
    font-size:20px;
  }
  .journey-stage-body{padding:18px}
.journey-stage-title{font-size:20px}
.journey-stage-actions .mini-btn{width:100%}
.journey-utility-actions .mini-btn{width:100%}
}

/* Journey prototype shell */
.journey-proto-page,
#progressPage .page-container,
#vocabularyPage .page-container,
#grammarPage .page-container,
#roadmapPage .page-container,
#flashcardPage .page-container,
#badgesPage .page-container,
#vocabJournalPage .page-container,
#minigamesPage .page-container,
#leaderboardPage .page-container,
#assignmentsPage .page-container{
  padding-bottom:132px;
}

#mainPage .main-container{
  padding-bottom:132px;
}

.journey-proto-page{
  max-width:1180px;
  margin:0 auto;
}

.journey-proto-shell,
.journey-hub-shell{
  position:relative;
  display:grid;
  gap:20px;
}

.journey-proto-shell::before,
.journey-hub-shell::before{
  content:"";
  position:absolute;
  inset:-20px auto auto -10px;
  width:240px;
  height:240px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(80,216,188,0.22) 0%, rgba(80,216,188,0) 70%);
  pointer-events:none;
  filter:blur(8px);
}

.journey-proto-header,
.journey-proto-map-card,
.journey-proto-detail-card,
.journey-hub-shell{
  position:relative;
  border:1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)),
    rgba(9,20,31,0.82);
  box-shadow:0 24px 60px rgba(0,0,0,0.28);
  backdrop-filter:blur(18px);
}

.journey-proto-header{
  padding:28px;
  border-radius:32px;
}

.journey-proto-kicker{
  margin:0 0 10px;
  font-size:12px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--text-secondary);
}

.journey-proto-title-row{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:flex-start;
}

.journey-proto-title{
  margin:0;
  max-width:12ch;
  font-size:clamp(38px, 6vw, 72px);
  line-height:0.96;
  color:var(--text-primary);
  letter-spacing:-0.04em;
}

.journey-proto-title--compact{
  max-width:none;
  font-size:clamp(32px, 4vw, 52px);
}

.journey-proto-subtitle{
  margin:16px 0 0;
  max-width:58ch;
  color:var(--text-secondary);
  line-height:1.7;
  font-size:16px;
}

.journey-proto-ghost-btn,
.journey-proto-primary-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.1);
  font-weight:600;
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}

.journey-proto-ghost-btn{
  padding:14px 18px;
  background:rgba(255,255,255,0.04);
  color:var(--text-primary);
}

.journey-proto-ghost-btn:hover,
.journey-proto-primary-btn:hover:not(:disabled),
.englishlab-dock__item:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,0.18);
}

.journey-proto-summary-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
  margin-top:28px;
}

.journey-proto-stat-card{
  padding:22px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,0.06);
  background:rgba(255,255,255,0.03);
}

.journey-proto-stat-card--highlight{
  background:
    linear-gradient(135deg, rgba(65,204,190,0.16), rgba(44,119,246,0.08)),
    rgba(255,255,255,0.03);
  border-color:rgba(65,204,190,0.26);
}

.journey-proto-stat-card span{
  display:block;
  font-size:13px;
  color:var(--text-secondary);
  margin-bottom:8px;
}

.journey-proto-stat-card strong{
  display:block;
  color:var(--text-primary);
  font-size:42px;
  line-height:1;
}

.journey-proto-stat-card small{
  display:block;
  margin-top:12px;
  color:var(--text-secondary);
  font-size:15px;
  line-height:1.5;
}

.journey-proto-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:22px;
}

.journey-proto-chip,
.journey-proto-pill,
.journey-proto-detail-strip__item,
.journey-proto-detail-hint{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 15px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.04);
  color:var(--text-primary);
}

.journey-proto-chip--accent{
  background:rgba(65,204,190,0.14);
  border-color:rgba(65,204,190,0.28);
}

.journey-proto-layout{
  display:grid;
  grid-template-columns:minmax(0, 1.45fr) minmax(320px, 0.95fr);
  gap:20px;
  align-items:start;
}

.journey-proto-map-card,
.journey-proto-detail-card,
.journey-hub-shell{
  border-radius:30px;
  padding:22px;
}

.journey-proto-panel-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
}

.journey-proto-panel-head h2{
  margin:0;
  font-size:18px;
  color:var(--text-primary);
}

.journey-proto-map-scroll{
  margin-top:16px;
  max-height:72vh;
  overflow:auto;
  padding-right:6px;
}

.journey-proto-map-scroll::-webkit-scrollbar{
  width:8px;
}

.journey-proto-map-scroll::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,0.12);
  border-radius:999px;
}

.journey-proto-route{
  position:relative;
  padding:18px 0 36px;
}

.journey-proto-route::before{
  content:"";
  position:absolute;
  top:20px;
  bottom:20px;
  left:50%;
  width:6px;
  transform:translateX(-50%);
  border-radius:999px;
  background:
    linear-gradient(180deg, rgba(65,204,190,0.18), rgba(255,255,255,0.04) 55%, rgba(244,194,68,0.18));
}

.journey-proto-route-row{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0, 1fr) 94px minmax(0, 1fr);
  align-items:center;
  gap:18px;
  min-height:152px;
}

.journey-proto-node-card{
  width:min(100%, 270px);
  padding:16px 18px;
  border:none;
  border-radius:22px;
  text-align:left;
  display:grid;
  gap:8px;
  background:rgba(15,31,46,0.88);
  border:1px solid rgba(255,255,255,0.08);
  color:var(--text-primary);
  box-shadow:0 16px 40px rgba(0,0,0,0.18);
}

.journey-proto-route-row.is-left .journey-proto-node-card{
  justify-self:end;
}

.journey-proto-route-row.is-right .journey-proto-node-card{
  grid-column:3;
  justify-self:start;
}

.journey-proto-node-card__eyebrow{
  display:block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.14em;
  color:var(--text-secondary);
}

.journey-proto-node-card strong{
  font-size:18px;
  line-height:1.2;
}

.journey-proto-node-card span:last-child{
  color:var(--text-secondary);
  font-size:14px;
  line-height:1.55;
}

.journey-proto-node-card--locked{
  opacity:0.76;
}

.journey-proto-node-card--completed{
  background:rgba(46,37,11,0.82);
  border-color:rgba(244,194,68,0.3);
}

.journey-proto-node-card--unlocked{
  background:rgba(11,45,53,0.88);
  border-color:rgba(65,204,190,0.32);
}

.journey-proto-node-card.is-selected,
.journey-proto-node-pin.is-selected{
  box-shadow:0 0 0 3px rgba(65,204,190,0.22), 0 18px 38px rgba(0,0,0,0.22);
}

.journey-proto-node-pin{
  position:relative;
  z-index:1;
  width:78px;
  height:78px;
  margin:0 auto;
  border:none;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-size:28px;
  color:#0f1721;
  box-shadow:0 18px 36px rgba(0,0,0,0.22);
}

.journey-proto-node-pin__icon{
  line-height:1;
}

.journey-proto-node-pin__status{
  position:absolute;
  right:-2px;
  bottom:-2px;
  width:28px;
  height:28px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-size:12px;
  color:var(--text-primary);
  background:#162433;
  border:1px solid rgba(255,255,255,0.12);
}

.journey-proto-node-pin--completed{
  background:linear-gradient(135deg, #f9cb45 0%, #f2a816 100%);
}

.journey-proto-node-pin--unlocked{
  background:linear-gradient(135deg, #42d7c6 0%, #2c8fe4 100%);
}

.journey-proto-node-pin--locked{
  background:linear-gradient(135deg, #596679 0%, #3a4658 100%);
  color:#eef4ff;
}

.journey-proto-route-badge{
  position:sticky;
  top:10px;
  margin-left:auto;
  width:max-content;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(8,16,26,0.85);
  color:var(--text-primary);
}

.journey-proto-detail-card{
  position:sticky;
  top:24px;
}

.journey-proto-detail-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.journey-proto-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 16px;
  border-radius:999px;
  font-weight:700;
  border:1px solid rgba(255,255,255,0.08);
}

.journey-proto-status--completed{
  background:rgba(244,194,68,0.14);
  border-color:rgba(244,194,68,0.28);
  color:#f4d374;
}

.journey-proto-status--unlocked{
  background:rgba(65,204,190,0.14);
  border-color:rgba(65,204,190,0.28);
  color:#7be7dd;
}

.journey-proto-status--locked{
  background:rgba(255,255,255,0.04);
  color:var(--text-secondary);
}

.journey-proto-detail-title{
  margin:14px 0 6px;
  font-size:40px;
  line-height:1;
  color:var(--text-primary);
}

.journey-proto-detail-subtitle{
  margin:0;
  color:var(--text-secondary);
  font-size:16px;
}

.journey-proto-detail-copy{
  margin:18px 0 0;
  color:var(--text-secondary);
  line-height:1.7;
}

.journey-proto-detail-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  margin-top:20px;
}

.journey-proto-detail-stat{
  padding:16px;
  border-radius:20px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
}

.journey-proto-detail-stat span{
  display:block;
  font-size:12px;
  color:var(--text-secondary);
  margin-bottom:8px;
}

.journey-proto-detail-stat strong{
  color:var(--text-primary);
  font-size:18px;
  line-height:1.25;
}

.journey-proto-detail-strip{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}

.journey-proto-primary-btn{
  width:100%;
  margin-top:20px;
  padding:16px 18px;
  background:linear-gradient(135deg, rgba(65,204,190,0.9), rgba(44,143,228,0.9));
  color:#08131d;
  border-color:rgba(65,204,190,0.26);
}

.journey-proto-primary-btn:disabled{
  opacity:0.55;
  cursor:not-allowed;
}

.journey-proto-detail-note{
  margin:16px 0 0;
  color:var(--text-secondary);
  line-height:1.6;
}

.journey-proto-detail-hint{
  margin-top:16px;
  font-size:14px;
}

.journey-hub-shell{
  gap:22px;
}

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

.journey-hub-grid--online{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.journey-hub-card{
  display:grid;
  gap:10px;
  padding:20px;
  text-align:left;
  border:none;
  border-radius:24px;
  background:rgba(17,29,44,0.82);
  border:1px solid rgba(255,255,255,0.08);
  color:var(--text-primary);
  box-shadow:0 18px 34px rgba(0,0,0,0.18);
}

.journey-hub-card strong{
  font-size:19px;
  line-height:1.2;
}

.journey-hub-card span:last-child{
  color:var(--text-secondary);
  line-height:1.6;
  font-size:14px;
}

.journey-hub-card__emoji{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:rgba(65,204,190,0.14);
  border:1px solid rgba(65,204,190,0.24);
  font-size:24px;
}

.journey-hub-card--wordlab{
  position:relative;
  grid-column:span 2;
  border-color:color-mix(in srgb,var(--primary) 55%,var(--border-color));
  background:
    radial-gradient(circle at 88% 18%,rgba(95,224,199,.18),transparent 32%),
    linear-gradient(135deg,color-mix(in srgb,var(--primary) 18%,var(--card-bg)),var(--card-bg));
  box-shadow:0 18px 46px rgba(13,148,136,.14);
}

.journey-hub-card--wordlab .journey-hub-card__emoji{
  background:linear-gradient(135deg,var(--primary),#5eead4);
  color:#052e2b;
}

.journey-hub-card__badge{
  position:absolute;
  top:16px;
  right:16px;
  display:inline-flex;
  width:auto;
  padding:6px 10px;
  border:1px solid rgba(94,234,212,.28);
  border-radius:999px;
  background:rgba(13,148,136,.14);
  color:#5eead4;
  font-size:10px;
  font-weight:800;
  letter-spacing:.06em;
  line-height:1;
  text-transform:uppercase;
}

@media (max-width:700px){
  .journey-hub-card--wordlab{grid-column:span 1}
  .journey-hub-card__badge{top:12px;right:12px}
}

.englishlab-dock{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  z-index:1200;
  width:min(920px, calc(100% - 24px));
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:10px;
  padding:10px;
  border-radius:26px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(8,16,26,0.88);
  box-shadow:0 28px 60px rgba(0,0,0,0.35);
  backdrop-filter:blur(20px);
}

.englishlab-dock__item{
  min-height:72px;
  border:none;
  border-radius:20px;
  display:grid;
  place-items:center;
  gap:6px;
  padding:10px 8px;
  background:transparent;
  color:var(--text-secondary);
  font-weight:600;
}

.englishlab-dock__item.is-active{
  color:var(--text-primary);
  background:linear-gradient(180deg, rgba(65,204,190,0.18), rgba(65,204,190,0.08));
  border:1px solid rgba(65,204,190,0.2);
}

.englishlab-dock__emoji{
  font-size:20px;
  line-height:1;
}

.main-home-base{
  display:grid;
  gap:18px;
  margin-bottom:22px;
}

.main-home-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.2fr) minmax(320px, 0.9fr);
  gap:18px;
}

.main-home-card,
.main-home-mini,
.main-home-quick-card{
  border:1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)),
    rgba(11,22,33,0.82);
  box-shadow:0 18px 42px rgba(0,0,0,0.2);
  backdrop-filter:blur(16px);
}

.main-home-card{
  display:grid;
  gap:16px;
  padding:22px;
  border-radius:34px;
}

.main-home-card--journey{
  background:
    radial-gradient(circle at top left, rgba(65,204,190,0.15), rgba(65,204,190,0) 40%),
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)),
    rgba(11,22,33,0.82);
}

.main-home-card__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}

.main-home-kicker{
  margin:0 0 8px;
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--text-secondary);
}

.main-home-title{
  margin:0;
  font-size:32px;
  line-height:1.02;
  color:var(--text-primary);
}

.main-home-title--compact{
  font-size:26px;
  max-width:14ch;
}

.main-home-copy{
  margin:0;
  color:var(--text-secondary);
  line-height:1.7;
  font-size:15px;
}

.main-home-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(65,204,190,0.28);
  background:rgba(65,204,190,0.12);
  color:var(--text-primary);
  font-weight:700;
  white-space:nowrap;
}

.main-home-pill--soft{
  border-color:rgba(255,255,255,0.1);
  background:rgba(255,255,255,0.04);
}

.main-home-progress{
  height:12px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,0.06);
}

.main-home-progress__fill{
  height:100%;
  width:0%;
  border-radius:inherit;
  background:linear-gradient(90deg, rgba(65,204,190,0.9), rgba(44,143,228,0.9));
  transition:width .25s ease;
}

.main-home-meta-row{
  display:flex;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  color:var(--text-secondary);
  font-size:14px;
}

.main-home-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.main-home-btn{
  border:none;
  border-radius:16px;
  padding:14px 18px;
  background:linear-gradient(135deg, rgba(65,204,190,0.92), rgba(44,143,228,0.92));
  color:#0a1621;
  font-weight:700;
  box-shadow:0 12px 28px rgba(0,0,0,0.18);
}

.main-home-btn.secondary{
  background:rgba(255,255,255,0.05);
  color:var(--text-primary);
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:none;
}

.main-home-tip{
  padding:14px 16px;
  border-radius:18px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.06);
  color:var(--text-secondary);
  line-height:1.6;
}

.main-home-strip{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}

.main-home-focus-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
}

.main-home-card--pulse{
  order:-1;
  grid-column:1 / -1;
  background:
    radial-gradient(circle at top right, rgba(65,204,190,0.15), rgba(65,204,190,0) 34%),
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)),
    rgba(11,22,33,0.82);
}

.main-home-stat-grid--pulse .main-home-stat-chip{
  min-height:128px;
}

.main-home-mini{
  padding:18px;
  border-radius:28px;
}

.main-home-mini span{
  display:block;
  font-size:12px;
  color:var(--text-secondary);
  margin-bottom:8px;
  text-transform:uppercase;
  letter-spacing:0.08em;
}

.main-home-mini strong{
  display:block;
  color:var(--text-primary);
  font-size:22px;
  line-height:1.1;
}

.main-home-mini small{
  display:block;
  margin-top:10px;
  color:var(--text-secondary);
  line-height:1.5;
  font-size:13px;
}

.main-home-stat-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}

.main-home-stat-chip{
  display:grid;
  gap:6px;
  padding:16px;
  border-radius:24px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
}

.main-home-stat-chip span{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--text-secondary);
}

.main-home-stat-chip strong{
  font-size:20px;
  line-height:1.12;
  color:var(--text-primary);
}

.main-home-stat-chip small{
  color:var(--text-secondary);
  font-size:12px;
  line-height:1.5;
}

.main-home-card.main-home-card--feedback{
  margin:18px 0 22px;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--primary-light) 18%, transparent), transparent 38%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--card-bg) 84%, var(--primary) 16%),
      color-mix(in srgb, var(--background-secondary) 86%, var(--primary-dark) 14%)
    ) !important;
  border-color:color-mix(in srgb, var(--primary) 28%, var(--border-color)) !important;
}

.main-feedback-form{
  display:grid;
  gap:12px;
}

.main-feedback-input{
  width:100%;
  min-height:112px;
  resize:vertical;
  border-radius:20px;
  border:1px solid color-mix(in srgb, var(--primary) 22%, var(--border-color));
  background:color-mix(in srgb, var(--background-secondary) 82%, var(--primary) 8%);
  color:var(--text-primary);
  padding:14px 16px;
  font:600 14px/1.55 'Poppins',sans-serif;
  outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

.main-feedback-input::placeholder{
  color:color-mix(in srgb, var(--text-secondary) 82%, transparent);
}

.main-feedback-input:focus{
  border-color:color-mix(in srgb, var(--primary-light) 62%, var(--primary));
  box-shadow:0 0 0 4px color-mix(in srgb, var(--primary) 14%, transparent), inset 0 1px 0 rgba(255,255,255,.05);
}

.main-feedback-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.main-feedback-note{
  color:var(--text-secondary);
  font-size:13px;
  line-height:1.45;
}

#mainFeedbackSubmitBtn:disabled{
  opacity:.62;
  cursor:wait;
}

.main-home-quick-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:14px;
}

.main-home-bottom-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap:18px;
  align-items:stretch;
}

.main-home-card--quote{
  justify-content:center;
  text-align:center;
  border-radius:34px;
}

.main-home-quote-text{
  margin:2px 0 0;
  font-size:26px;
  line-height:1.45;
  font-style:italic;
  color:var(--text-primary);
}

.main-home-quote-author{
  margin:4px 0 0;
  font-size:15px;
  font-weight:700;
  color:var(--primary);
}

.main-home-quote-hint{
  margin:4px 0 0;
  color:var(--text-secondary);
  font-size:13px;
  line-height:1.6;
}

.main-home-footer-note{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:18px;
  padding:14px 16px 6px;
  color:var(--text-secondary);
  font-size:12px;
  line-height:1.6;
  opacity:.9;
}

.main-home-footer-note__label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  white-space:nowrap;
}

.main-home-quick-card{
  display:grid;
  gap:10px;
  padding:18px;
  border:none;
  border-radius:28px;
  text-align:left;
  color:var(--text-primary);
}

.main-home-quick-card__emoji{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:14px;
  font-size:22px;
  background:rgba(65,204,190,0.14);
  border:1px solid rgba(65,204,190,0.26);
}

.main-home-quick-card strong{
  font-size:17px;
  line-height:1.2;
}

.main-home-quick-card span:last-child{
  color:var(--text-secondary);
  font-size:13px;
  line-height:1.55;
}

.main-home-more-label{
  margin:8px 0 18px;
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--text-secondary);
}

#mainPage .main-home-more-label,
#mainPage .cards-grid{
  display:none !important;
}

@media(max-width:1024px){
  .main-home-grid,
  .main-home-focus-grid,
  .main-home-bottom-grid,
  .main-home-strip,
  .main-home-quick-grid{
    grid-template-columns:1fr;
  }
  .journey-proto-layout{
    grid-template-columns:1fr;
  }
  .journey-proto-detail-card{
    position:static;
  }
  .journey-hub-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media(max-width:768px){
  #mainPage .page-container{
    padding:12px 12px 112px;
  }
  #mainPage #homeQuoteCard,
  #mainPage #homeQuoteCard + div{
    display:none;
  }
  .daily-goal-card{
    padding:16px 14px;
    margin-bottom:14px;
    border-radius:26px;
  }
  .daily-goal-copy{
    display:none;
  }
  .daily-goal-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  .daily-goal-btn{
    width:100%;
  }
  .journey-proto-header,
  .journey-proto-map-card,
  .journey-proto-detail-card,
  .journey-hub-shell{
    padding:18px;
    border-radius:24px;
  }
  .journey-proto-title{
    font-size:clamp(34px, 12vw, 54px);
    max-width:none;
  }
  .main-home-card__top,
  .main-home-meta-row{
    flex-direction:column;
    align-items:flex-start;
  }
  .main-home-base{
    gap:14px;
    margin-bottom:16px;
  }
  .main-home-card{
    padding:18px 16px;
    border-radius:28px;
  }
  .main-home-copy{
    font-size:14px;
    line-height:1.55;
  }
  .main-home-tip{
    display:none;
  }
  .main-home-strip{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:10px;
  }
  .main-home-focus-grid{
    gap:12px;
  }
  .main-home-bottom-grid{
    gap:12px;
  }
  .main-home-stat-grid{
    grid-template-columns:1fr;
    gap:10px;
  }
  .main-home-stat-chip{
    padding:14px;
    border-radius:20px;
  }
  .main-home-mini{
    padding:14px 12px;
  }
  .main-home-mini small{
    display:none;
  }
  .main-home-mini strong{
    font-size:15px;
  }
  .main-home-actions{
    flex-direction:column;
  }
  .main-home-btn{
    width:100%;
  }
  .main-home-quick-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }
  .main-home-quick-card{
    min-height:114px;
    padding:16px 12px;
    gap:8px;
    border-radius:22px;
  }
  .main-home-quick-card span:last-child{
    display:none;
  }
  .main-home-quick-card strong{
    font-size:15px;
  }
  .main-home-quote-text{
    font-size:20px;
    line-height:1.55;
  }
  .main-home-footer-note{
    display:grid;
    gap:8px;
    padding:10px 4px 0;
  }
  .journey-proto-title-row{
    flex-direction:column;
  }
  .journey-proto-summary-grid,
  .journey-proto-detail-grid,
  .journey-hub-grid,
  .journey-hub-grid--online{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }
  .study-plan-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }
  .study-plan-card{
    padding:16px 14px;
    border-radius:16px;
  }
  .study-plan-card h3{
    font-size:16px;
    line-height:1.3;
  }
  .study-plan-card p{
    font-size:13px;
    line-height:1.6;
  }
  .journey-hub-card{
    min-height:118px;
    padding:16px 14px;
    gap:8px;
    border-radius:20px;
  }
  .journey-hub-card__emoji{
    width:42px;
    height:42px;
    font-size:20px;
    border-radius:14px;
  }
  .journey-hub-card strong{
    font-size:15px;
  }
  .journey-hub-card span:last-child{
    display:none;
  }
  .journey-proto-route-row{
    grid-template-columns:1fr 82px;
    min-height:128px;
    gap:12px;
  }
  .journey-proto-route::before{
    left:auto;
    right:36px;
    transform:none;
  }
  .journey-proto-route-row.is-left .journey-proto-node-card,
  .journey-proto-route-row.is-right .journey-proto-node-card{
    grid-column:1;
    justify-self:stretch;
    width:100%;
  }
  .journey-proto-route-row.is-left .journey-proto-node-pin,
  .journey-proto-route-row.is-right .journey-proto-node-pin{
    grid-column:2;
  }
  .englishlab-dock{
    bottom:10px;
    width:calc(100% - 12px);
    gap:4px;
    padding:6px;
    border-radius:20px;
  }
  .englishlab-dock__item{
    min-height:56px;
    padding:8px 4px;
    gap:4px;
    font-size:10px;
    border-radius:14px;
  }
  .englishlab-dock__emoji{
    font-size:18px;
  }
  .journey-shell--englishlab .journey-header,
  .journey-shell--englishlab .journey-map-card,
  .journey-shell--englishlab .journey-details{
    padding:16px;
    border-radius:22px;
  }
  .journey-shell--englishlab .journey-header h1{
    font-size:clamp(2.4rem, 12vw, 3.4rem);
    line-height:.95;
  }
  .journey-shell--englishlab .journey-header__subtitle{
    font-size:14px;
    line-height:1.6;
  }
  .journey-shell--englishlab .header-chip:not(.header-chip--action){
    display:none;
  }
  .journey-shell--englishlab .journey-map-card{
    min-height:auto;
  }
  .journey-shell--englishlab .journey-map-scroll{
    height:auto;
    max-height:none;
    overflow:visible;
    padding:12px;
  }
  .journey-shell--englishlab .journey-map{
    min-height:760px;
  }
  .journey-shell--englishlab .journey-map-card__header h2,
  .journey-shell--englishlab .journey-details__header h2{
    font-size:1.25rem;
  }
  .journey-shell--englishlab .level-node{
    grid-template-columns:72px minmax(0, 1fr);
    gap:12px;
    width:min(220px, 74vw);
  }
  .journey-shell--englishlab .level-node__button{
    width:72px;
    height:72px;
  }
  .journey-shell--englishlab .level-node__content strong{
    font-size:.92rem;
  }
  .journey-shell--englishlab .level-node__content span:last-child{
    font-size:.8rem;
  }
  .journey-shell--englishlab .journey-map__row{
    width:min(220px, 74%);
  }
  .journey-shell--englishlab .journey-details__body{
    margin:14px 0;
    font-size:14px;
    line-height:1.6;
  }
  .journey-shell--englishlab .journey-details__footnote{
    display:none;
  }
}

@media(max-width:520px){
  .progress-section{
    padding:14px 12px;
  }
  .progress-section__toggle{
    padding:15px 14px;
    flex-direction:column;
  }
  .progress-section__toggle small{
    max-width:none;
    text-align:left;
  }
  .progress-section__detail-body{
    padding:12px;
  }
  .study-plan-grid{
    grid-template-columns:1fr;
    gap:10px;
  }
  .study-plan-card{
    padding:15px 13px;
  }
  .study-plan-label{
    font-size:10px;
    padding:6px 9px;
    margin-bottom:10px;
  }
  .study-plan-card h3{
    font-size:15px;
    margin-bottom:6px;
  }
  .study-plan-card p{
    font-size:13px;
    line-height:1.55;
  }
  .main-home-strip{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .main-home-mini:last-child{
    grid-column:1 / -1;
  }
  .main-home-stat-chip strong{
    font-size:18px;
  }
  .main-home-quote-text{
    font-size:18px;
  }
  .journey-shell--englishlab .journey-header__stats,
  .journey-shell--englishlab .journey-details__summary{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .journey-shell--englishlab .journey-header__stats .stat-card:last-child,
  .journey-shell--englishlab .journey-details__summary .summary-stat:last-child{
    grid-column:1 / -1;
  }
  .journey-shell--englishlab .journey-details__actions{
    grid-template-columns:1fr;
  }
  .journey-shell--englishlab .journey-map{
    min-height:680px;
  }
}

/* Journey prototype direct port */
.journey-clone-page{
  max-width:1180px;
  margin:0 auto;
}

.journey-shell--englishlab{
  position:relative;
  z-index:1;
  width:100%;
  padding-bottom:116px;
}

.journey-shell--englishlab::before,
.journey-shell--englishlab::after{
  content:"";
  position:absolute;
  border-radius:999px;
  filter:blur(80px);
  opacity:.45;
  pointer-events:none;
}

.journey-shell--englishlab::before{
  top:-4rem;
  left:-2rem;
  width:18rem;
  height:18rem;
  background:rgba(94,234,212,.18);
}

.journey-shell--englishlab::after{
  right:-6rem;
  top:12rem;
  width:24rem;
  height:24rem;
  background:rgba(79,209,255,.14);
}

.journey-shell--englishlab .journey-header,
.journey-shell--englishlab .journey-map-card,
.journey-shell--englishlab .journey-details{
  border:1px solid rgba(163,189,214,.16);
  background:rgba(14,26,39,.82);
  box-shadow:0 24px 70px rgba(0,0,0,.42);
  backdrop-filter:blur(18px);
}

.journey-shell--englishlab .journey-header{
  border-radius:32px;
  padding:28px;
  overflow:hidden;
}

.journey-shell--englishlab .journey-header__copy{margin-bottom:22px}

.journey-shell--englishlab .journey-header__eyebrow,
.journey-shell--englishlab .panel-kicker,
.journey-shell--englishlab .level-node__eyebrow{
  margin:0 0 8px;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.72rem;
  color:#9db5c8;
}

.journey-shell--englishlab .journey-header__title-row{
  display:flex;
  gap:20px;
  align-items:flex-start;
  justify-content:space-between;
}

.journey-shell--englishlab .journey-header h1,
.journey-shell--englishlab .journey-map-card h2,
.journey-shell--englishlab .journey-details h2{
  margin:0;
  color:#eef7ff;
  line-height:1.05;
}

.journey-shell--englishlab .journey-header h1{
  font-size:clamp(2rem,5vw,3.5rem);
  max-width:12ch;
}

.journey-shell--englishlab .journey-header__subtitle{
  margin:14px 0 0;
  max-width:56ch;
  color:#9db5c8;
  line-height:1.7;
}

.journey-shell--englishlab .journey-header__stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.journey-shell--englishlab .stat-card{
  padding:18px;
  border-radius:24px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.05);
}

.journey-shell--englishlab .stat-card--highlight{
  background:
    linear-gradient(135deg, rgba(94,234,212,.16), rgba(79,209,255,.1)),
    rgba(255,255,255,.02);
  border-color:rgba(94,234,212,.28);
}

.journey-shell--englishlab .stat-card__label,
.journey-shell--englishlab .summary-stat span{
  display:block;
  color:#9db5c8;
  font-size:.82rem;
  margin-bottom:8px;
}

.journey-shell--englishlab .stat-card strong,
.journey-shell--englishlab .summary-stat strong{
  display:block;
  color:#eef7ff;
  font-size:1.45rem;
}

.journey-shell--englishlab .stat-card__meta{
  display:block;
  margin-top:10px;
  color:#9db5c8;
  font-size:.86rem;
}

.journey-shell--englishlab .journey-header__chips{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:20px;
}

.journey-shell--englishlab .header-chip,
.journey-shell--englishlab .journey-map-card__meta,
.journey-shell--englishlab .status-pill,
.journey-shell--englishlab .journey-details__tags span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius:999px;
  padding:10px 14px;
  font-size:.9rem;
  color:#eef7ff;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.07);
}

.journey-shell--englishlab .header-chip--action{
  background:rgba(94,234,212,.14);
  border-color:rgba(94,234,212,.32);
}

.journey-shell--englishlab .ghost-button,
.journey-shell--englishlab .primary-button,
.journey-shell--englishlab .secondary-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:16px;
  border:1px solid transparent;
  transition:transform 160ms ease,border-color 160ms ease,background 160ms ease,box-shadow 160ms ease;
}

.journey-shell--englishlab .ghost-button{
  padding:12px 16px;
  color:#eef7ff;
  background:rgba(255,255,255,.03);
  border-color:rgba(255,255,255,.08);
}

.journey-shell--englishlab .ghost-button:hover,
.journey-shell--englishlab .secondary-button:hover{
  transform:translateY(-1px) scale(1.01);
  border-color:rgba(124,189,235,.3);
}

.journey-shell--englishlab .journey-layout{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(320px,.9fr);
  gap:18px;
  margin-top:18px;
  min-width:0;
}

.journey-clone-page,
#journeyPage,
.journey-shell--englishlab{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

.journey-shell--englishlab .journey-map-card,
.journey-shell--englishlab .journey-details{
  border-radius:30px;
  padding:22px;
  min-width:0;
}

.journey-shell--englishlab .journey-map-card{min-height:720px}

.journey-shell--englishlab .journey-map-card__header,
.journey-shell--englishlab .journey-details__header{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
  margin-bottom:16px;
}

.journey-shell--englishlab .journey-map-card__header h2,
.journey-shell--englishlab .journey-details__header h2{font-size:1.55rem}

.journey-shell--englishlab .journey-map-scroll{
  position:relative;
  height:620px;
  overflow-y:auto;
  overflow-x:hidden;
  border-radius:24px;
  padding:16px;
  background:
    radial-gradient(circle at top, rgba(94,234,212,.09), transparent 28%),
    radial-gradient(circle at bottom, rgba(251,191,36,.06), transparent 22%),
    rgba(6,16,24,.88);
  border:1px solid rgba(255,255,255,.06);
}

.journey-shell--englishlab .journey-map{
  position:relative;
  width:100%;
  max-width:100%;
  min-height:100%;
  isolation:isolate;
}

.journey-shell--englishlab .journey-map__backdrop,
.journey-shell--englishlab .journey-map__mist{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.journey-shell--englishlab .journey-map__backdrop{
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 18%, transparent 82%, rgba(255,255,255,.02)),
    repeating-linear-gradient(180deg, transparent 0, transparent 138px, rgba(255,255,255,.025) 138px, rgba(255,255,255,.025) 140px);
  opacity:.7;
}

.journey-shell--englishlab .journey-map__mist{
  filter:blur(50px);
  opacity:.65;
}

.journey-shell--englishlab .journey-map__mist--one{
  top:86px;left:-12%;right:35%;bottom:auto;height:220px;border-radius:999px;background:rgba(79,209,255,.12);
}

.journey-shell--englishlab .journey-map__mist--two{
  top:520px;left:36%;right:-16%;bottom:auto;height:260px;border-radius:999px;background:rgba(168,85,247,.13);
}

.journey-shell--englishlab .journey-map__mist--three{
  top:980px;left:-6%;right:30%;bottom:auto;height:240px;border-radius:999px;background:rgba(251,191,36,.12);
}

.journey-shell--englishlab .journey-map__terrain,
.journey-shell--englishlab .journey-map__beacon,
.journey-shell--englishlab .journey-map__particle,
.journey-shell--englishlab .journey-map__star,
.journey-shell--englishlab .journey-map__orbiter{
  position:absolute;
  pointer-events:none;
  z-index:0;
}

.journey-shell--englishlab .journey-map__star{
  border-radius:999px;
  background:rgba(255,255,255,.86);
  box-shadow:0 0 12px rgba(255,255,255,.18);
  animation:starTwinkle 4.8s ease-in-out infinite;
}

.journey-shell--englishlab .journey-map__star--near{opacity:.9}
.journey-shell--englishlab .journey-map__star--mid{opacity:.65;box-shadow:0 0 10px rgba(94,234,212,.12)}
.journey-shell--englishlab .journey-map__star--far{opacity:.42;box-shadow:0 0 8px rgba(255,255,255,.1)}

.journey-shell--englishlab .journey-map__orbiter{transform:translateX(-50%);opacity:.7}

.journey-shell--englishlab .journey-map__orbiter--satellite{
  width:46px;height:18px;border-radius:999px;background:linear-gradient(90deg, rgba(255,255,255,.04), rgba(148,163,184,.3), rgba(255,255,255,.04));border:1px solid rgba(148,163,184,.2);box-shadow:0 0 24px rgba(96,165,250,.08);animation:satelliteFloat 18s linear infinite;
}

.journey-shell--englishlab .journey-map__orbiter--satellite::before,
.journey-shell--englishlab .journey-map__orbiter--satellite::after{
  content:"";position:absolute;top:50%;width:10px;height:20px;border-radius:6px;transform:translateY(-50%);background:linear-gradient(180deg, rgba(79,209,255,.28), rgba(15,23,42,.08));border:1px solid rgba(79,209,255,.14);
}

.journey-shell--englishlab .journey-map__orbiter--satellite::before{left:-12px}
.journey-shell--englishlab .journey-map__orbiter--satellite::after{right:-12px}

.journey-shell--englishlab .journey-map__orbiter--comet{
  width:88px;height:3px;border-radius:999px;background:linear-gradient(90deg, rgba(255,255,255,0), rgba(94,234,212,.9), rgba(255,255,255,.98));box-shadow:0 0 18px rgba(94,234,212,.18);transform:translateX(-50%) rotate(-24deg);transform-origin:center;animation:cometFly 12s linear infinite;
}

.journey-shell--englishlab .journey-map__orbiter--comet::after{
  content:"";position:absolute;right:-3px;top:50%;width:10px;height:10px;border-radius:999px;transform:translateY(-50%);background:rgba(255,255,255,.95);box-shadow:0 0 16px rgba(255,255,255,.26);
}

.journey-shell--englishlab .journey-map__orbiter--sm{scale:.82;opacity:.48}
.journey-shell--englishlab .journey-map__orbiter--md{scale:1;opacity:.58}
.journey-shell--englishlab .journey-map__orbiter--lg{scale:1.16;opacity:.72}

.journey-shell--englishlab .journey-map__terrain{
  transform:translateX(-50%) rotate(var(--terrain-rotate,0deg));
  border-radius:999px;
  filter:blur(.5px);
  opacity:.9;
}

.journey-shell--englishlab .journey-map__terrain::before,
.journey-shell--englishlab .journey-map__terrain::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
}

.journey-shell--englishlab .journey-map__terrain::before{background:linear-gradient(180deg, rgba(255,255,255,.08), transparent 48%)}
.journey-shell--englishlab .journey-map__terrain::after{inset:auto 12% -16% 12%;height:38%;border-radius:999px;filter:blur(16px)}
.journey-shell--englishlab .journey-map__terrain--aqua{background:linear-gradient(135deg, rgba(33,91,104,.62), rgba(22,56,66,.18));border:1px solid rgba(94,234,212,.12)}
.journey-shell--englishlab .journey-map__terrain--aqua::after{background:rgba(94,234,212,.18)}
.journey-shell--englishlab .journey-map__terrain--violet{background:linear-gradient(135deg, rgba(76,48,118,.6), rgba(39,27,72,.16));border:1px solid rgba(168,85,247,.12)}
.journey-shell--englishlab .journey-map__terrain--violet::after{background:rgba(129,140,248,.16)}
.journey-shell--englishlab .journey-map__terrain--gold{background:linear-gradient(135deg, rgba(111,77,27,.58), rgba(65,44,12,.14));border:1px solid rgba(251,191,36,.12)}
.journey-shell--englishlab .journey-map__terrain--gold::after{background:rgba(251,191,36,.16)}
.journey-shell--englishlab .journey-map__terrain--rose{background:linear-gradient(135deg, rgba(111,39,74,.6), rgba(60,22,43,.16));border:1px solid rgba(244,114,182,.12)}
.journey-shell--englishlab .journey-map__terrain--rose::after{background:rgba(244,114,182,.16)}

.journey-shell--englishlab .journey-map__beacon{transform:translateX(-50%);width:18px;height:var(--beacon-height)}
.journey-shell--englishlab .journey-map__beacon::before,
.journey-shell--englishlab .journey-map__beacon::after{content:"";position:absolute;left:50%;transform:translateX(-50%)}
.journey-shell--englishlab .journey-map__beacon::before{top:0;width:10px;height:10px;border-radius:999px}
.journey-shell--englishlab .journey-map__beacon::after{top:8px;width:2px;height:calc(var(--beacon-height) - 8px);border-radius:999px;opacity:.45}
.journey-shell--englishlab .journey-map__beacon--aqua::before{background:rgba(94,234,212,.92);box-shadow:0 0 18px rgba(94,234,212,.4)}
.journey-shell--englishlab .journey-map__beacon--aqua::after{background:linear-gradient(180deg, rgba(94,234,212,.56), transparent)}
.journey-shell--englishlab .journey-map__beacon--violet::before{background:rgba(168,85,247,.92);box-shadow:0 0 18px rgba(168,85,247,.36)}
.journey-shell--englishlab .journey-map__beacon--violet::after{background:linear-gradient(180deg, rgba(168,85,247,.5), transparent)}
.journey-shell--englishlab .journey-map__beacon--gold::before{background:rgba(251,191,36,.95);box-shadow:0 0 18px rgba(251,191,36,.34)}
.journey-shell--englishlab .journey-map__beacon--gold::after{background:linear-gradient(180deg, rgba(251,191,36,.48), transparent)}

.journey-shell--englishlab .journey-map__particle{
  border-radius:999px;background:radial-gradient(circle, rgba(255,255,255,.88), rgba(94,234,212,.12));box-shadow:0 0 16px rgba(94,234,212,.22);animation:floatParticle 6.4s ease-in-out infinite;
}

.journey-shell--englishlab .journey-map__path{position:absolute;inset:0;width:100%;height:100%}
.journey-shell--englishlab .journey-map__trail-base,
.journey-shell--englishlab .journey-map__trail-shadow,
.journey-shell--englishlab .journey-map__trail-progress{fill:none;stroke-linecap:round}
.journey-shell--englishlab .journey-map__trail-base{stroke:rgba(123,156,183,.16);stroke-width:2.6}
.journey-shell--englishlab .journey-map__trail-shadow{stroke:rgba(96,165,250,.08);stroke-width:3.8;filter:blur(4px)}
.journey-shell--englishlab .journey-map__trail-progress{stroke:url(#journeyTrail);stroke-width:2.2;stroke-dasharray:1.8 1.1;filter:drop-shadow(0 0 8px rgba(94,234,212,.3))}

.journey-shell--englishlab .journey-map--lite {
  contain: layout paint style;
}

.journey-shell--englishlab .journey-map--lite .journey-map__trail-shadow {
  display: none;
}

.journey-shell--englishlab .journey-map--lite .journey-map__trail-progress {
  filter: none;
  stroke-dasharray: none;
}

.journey-shell--englishlab .journey-map__traveler{
  position:absolute;z-index:2;transform:translate(-50%,-50%);pointer-events:none;
}

.journey-shell--englishlab .journey-map__traveler-glow,
.journey-shell--englishlab .journey-map__traveler-core{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:999px;
}

.journey-shell--englishlab .journey-map__traveler-glow{width:34px;height:34px;background:rgba(94,234,212,.28);filter:blur(10px)}
.journey-shell--englishlab .journey-map__traveler-core{
  width:26px;height:26px;display:grid;place-items:center;color:#041822;background:linear-gradient(135deg, rgba(94,234,212,.98), rgba(251,191,36,.92));box-shadow:0 0 0 4px rgba(7,17,27,.82),0 8px 18px rgba(0,0,0,.18);font-size:14px;
}

.journey-shell--englishlab .journey-map__row{position:absolute;width:min(240px,68%);transform:translateX(-50%);z-index:2}
.journey-shell--englishlab .journey-map__constellation-dot,
.journey-shell--englishlab .journey-map__minimal-landmark{position:absolute;z-index:1}
.journey-shell--englishlab .journey-map__constellation-dot{width:4px;height:4px;border-radius:999px;background:rgba(255,255,255,.66);box-shadow:0 0 10px rgba(255,255,255,.18)}
.journey-shell--englishlab .journey-map__minimal-landmark{
  top:-52px;right:0;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;color:rgba(238,247,255,.86);font-size:.74rem;font-weight:700;letter-spacing:.04em;white-space:nowrap;background:rgba(7,17,27,.84);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(14px);box-shadow:0 16px 28px rgba(0,0,0,.18);
}

.journey-shell--englishlab .level-node{display:grid;grid-template-columns:88px minmax(0,1fr);align-items:center;gap:14px;transition:transform 180ms ease}

@media (max-width: 820px), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .journey-shell--englishlab,
  .journey-shell--englishlab .journey-map-stage,
  .journey-shell--englishlab .journey-map-card,
  .journey-shell--englishlab .journey-map-scroll,
  .journey-shell--englishlab .journey-map {
    contain: layout paint style;
  }

  .journey-shell--englishlab .journey-map-stage__hud,
  .journey-shell--englishlab .journey-map-card,
  .journey-shell--englishlab .level-node__content,
  .journey-shell--englishlab .journey-level-popup,
  .journey-shell--englishlab .journey-map__minimal-landmark {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
  }

  .journey-shell--englishlab .journey-map__mist,
  .journey-shell--englishlab .journey-map__terrain,
  .journey-shell--englishlab .journey-map__beacon,
  .journey-shell--englishlab .journey-map__particle,
  .journey-shell--englishlab .journey-map__orbiter,
  .journey-shell--englishlab .journey-map__trail-shadow,
  .journey-shell--englishlab .journey-map__traveler-glow,
  .journey-shell--englishlab .level-node__halo,
  .journey-shell--englishlab .level-node__planet-ring,
  .journey-shell--englishlab .level-node__planet-moon {
    display: none !important;
  }

  .journey-shell--englishlab .journey-map__star,
  .journey-shell--englishlab .journey-map__constellation-dot,
  .journey-shell--englishlab .level-node,
  .journey-shell--englishlab .level-node *,
  .journey-shell--englishlab .journey-level-popup {
    animation: none !important;
    transition-duration: 1ms !important;
    filter: none !important;
  }

  .journey-shell--englishlab .journey-map__trail-progress {
    filter: none !important;
    stroke-dasharray: none !important;
  }

  .journey-shell--englishlab .level-node__button {
    transform: translateZ(0);
    will-change: transform;
  }
}
.journey-shell--englishlab .level-node.is-selected{transform:scale(1.03)}
.journey-shell--englishlab .level-node__button{position:relative;width:88px;height:88px;border:none;background:transparent;padding:0;transform:rotate(var(--node-tilt,0deg));transition:transform 180ms ease;isolation:isolate}
.journey-shell--englishlab .level-node__planet,
.journey-shell--englishlab .level-node__planet-ring,
.journey-shell--englishlab .level-node__planet-moon{position:absolute;border-radius:999px}
.journey-shell--englishlab .level-node__planet{
  left:-8px;bottom:4px;width:34px;height:34px;opacity:.78;filter:saturate(1.05);box-shadow:inset -4px -8px 10px rgba(3,8,15,.22),0 6px 14px rgba(0,0,0,.16);animation:planetFloat 6.8s ease-in-out infinite;
}
.journey-shell--englishlab .level-node__planet-ring{inset:-5px;border:1px solid rgba(255,255,255,.18);opacity:.48;transform:rotate(-18deg) scaleX(1.25)}
.journey-shell--englishlab .level-node__planet-moon{width:8px;height:8px;right:-4px;top:5px;background:rgba(226,232,240,.84);box-shadow:0 0 10px rgba(255,255,255,.18)}
.journey-shell--englishlab .level-node__planet--sun{background:radial-gradient(circle at 30% 28%, rgba(255,244,194,.95), rgba(245,158,11,.96) 52%, rgba(180,83,9,.92))}
.journey-shell--englishlab .level-node__planet--lagoon{background:radial-gradient(circle at 30% 28%, rgba(214,254,255,.95), rgba(45,212,191,.92) 50%, rgba(14,116,144,.94))}
.journey-shell--englishlab .level-node__planet--violet{background:radial-gradient(circle at 30% 28%, rgba(241,232,255,.95), rgba(168,85,247,.92) 48%, rgba(91,33,182,.94))}
.journey-shell--englishlab .level-node__planet--ember{background:radial-gradient(circle at 30% 28%, rgba(255,237,213,.95), rgba(249,115,22,.94) 48%, rgba(153,27,27,.92))}
.journey-shell--englishlab .level-node__planet--mint{background:radial-gradient(circle at 30% 28%, rgba(236,253,245,.95), rgba(74,222,128,.94) 52%, rgba(6,95,70,.92))}
.journey-shell--englishlab .level-node__planet--rose{background:radial-gradient(circle at 30% 28%, rgba(255,228,239,.95), rgba(244,114,182,.94) 52%, rgba(157,23,77,.92))}
.journey-shell--englishlab .level-node__planet--indigo{background:radial-gradient(circle at 30% 28%, rgba(224,231,255,.95), rgba(99,102,241,.94) 48%, rgba(49,46,129,.92))}
.journey-shell--englishlab .level-node__planet--gold{background:radial-gradient(circle at 30% 28%, rgba(254,252,232,.95), rgba(250,204,21,.94) 52%, rgba(161,98,7,.92))}
.journey-shell--englishlab .level-node__halo,
.journey-shell--englishlab .level-node__core{position:absolute;inset:0;border-radius:999px}
.journey-shell--englishlab .level-node__halo{
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.32), transparent 36%),linear-gradient(180deg, rgba(89,207,198,.35), rgba(13,32,46,.08));transform:scale(.98);opacity:.5;
}
.journey-shell--englishlab .level-node__core{
  inset:8px;display:grid;place-items:center;background:radial-gradient(circle at 30% 25%, rgba(255,255,255,.35), transparent 24%),linear-gradient(180deg, rgba(96,241,224,.92), rgba(26,110,139,.86));color:#041822;box-shadow:inset 0 -10px 18px rgba(4,24,34,.24),0 12px 24px rgba(0,0,0,.3);
}
.journey-shell--englishlab .level-node__core svg{width:22px;height:22px;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.journey-shell--englishlab .level-node__button:hover .level-node__core{transform:scale(1.04)}
.journey-shell--englishlab .level-node__button:hover{transform:rotate(var(--node-tilt,0deg)) translateY(-2px)}
.journey-shell--englishlab .level-node.is-active .level-node__halo{opacity:1;animation:activePulse 2.4s ease-in-out infinite}
.journey-shell--englishlab .level-node--completed .level-node__core{background:radial-gradient(circle at 30% 25%, rgba(255,255,255,.35), transparent 24%),linear-gradient(180deg, rgba(251,191,36,.96), rgba(245,111,25,.86));color:#241100}
.journey-shell--englishlab .level-node--locked .level-node__button{cursor:pointer}
.journey-shell--englishlab .level-node--locked .level-node__halo{opacity:.18}
.journey-shell--englishlab .level-node--locked .level-node__core{background:linear-gradient(180deg, rgba(121,138,156,.52), rgba(58,72,87,.88));color:rgba(238,247,255,.82);filter:saturate(.7)}
.journey-shell--englishlab .level-node__badge{
  position:absolute;right:2px;bottom:2px;width:26px;height:26px;border-radius:999px;display:grid;place-items:center;color:#03211c;background:#f8fafc;box-shadow:0 8px 16px rgba(0,0,0,.22);font-size:14px;
}
.journey-shell--englishlab .level-node__content{
  min-width:0;display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:18px;background:rgba(7,16,24,.86);border:1px solid rgba(255,255,255,.08);box-shadow:0 14px 24px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.04);backdrop-filter:blur(18px);
}
.journey-shell--englishlab .level-node__content strong{color:#eef7ff;font-size:1rem;line-height:1.25}
.journey-shell--englishlab .level-node__content span:last-child{color:#9db5c8;font-size:.86rem;line-height:1.3}

.journey-shell--englishlab .journey-details{display:flex;flex-direction:column}
.journey-shell--englishlab .status-pill{text-transform:capitalize}
.journey-shell--englishlab .status-pill--completed{border-color:rgba(251,191,36,.26);background:rgba(251,191,36,.14)}
.journey-shell--englishlab .status-pill--unlocked{border-color:rgba(94,234,212,.26);background:rgba(94,234,212,.14)}
.journey-shell--englishlab .status-pill--locked{color:#9db5c8}
.journey-shell--englishlab .journey-details__summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.journey-shell--englishlab .summary-stat{padding:16px;border-radius:20px;background:rgba(17,33,48,.65);border:1px solid rgba(255,255,255,.05)}
.journey-shell--englishlab .journey-details__body{margin:18px 0;color:#9db5c8;line-height:1.8}
.journey-shell--englishlab .journey-details__tags{display:flex;flex-wrap:wrap;gap:10px}
.journey-shell--englishlab .journey-details__actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.journey-shell--englishlab .journey-details__footnote{margin-top:auto;padding-top:18px;color:#9db5c8;line-height:1.7}
.journey-shell--englishlab .primary-button,
.journey-shell--englishlab .secondary-button{min-height:52px;padding:0 16px;border:none}
.journey-shell--englishlab .primary-button{color:#041822;background:linear-gradient(135deg,#5eead4,#4fd1ff);box-shadow:0 14px 28px rgba(79,209,255,.22)}
.journey-shell--englishlab .primary-button.is-disabled{opacity:.42;box-shadow:none}
.journey-shell--englishlab .secondary-button{color:#eef7ff;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09)}

@keyframes activePulse{
  0%,100%{transform:scale(.98);opacity:.56}
  50%{transform:scale(1.07);opacity:1}
}

@keyframes floatParticle{
  0%,100%{transform:translateY(0) scale(1);opacity:.72}
  50%{transform:translateY(-10px) scale(1.08);opacity:1}
}

@keyframes starTwinkle{
  0%,100%{opacity:.38;transform:scale(.92)}
  50%{opacity:1;transform:scale(1.15)}
}

@keyframes satelliteFloat{
  0%{transform:translateX(-50%) translate3d(0,0,0)}
  50%{transform:translateX(-50%) translate3d(18px,-8px,0)}
  100%{transform:translateX(-50%) translate3d(0,0,0)}
}

@keyframes cometFly{
  0%{transform:translateX(-50%) rotate(-24deg) translate3d(0,0,0);opacity:.28}
  20%{opacity:.76}
  100%{transform:translateX(-50%) rotate(-24deg) translate3d(42px,-18px,0);opacity:0}
}

@keyframes planetFloat{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-6px,0)}
}

@media(max-width:960px){
  .journey-clone-page,
  #journeyPage,
  .journey-shell--englishlab,
  .journey-shell--englishlab .journey-layout,
  .journey-shell--englishlab .journey-map-card,
  .journey-shell--englishlab .journey-details,
  .journey-shell--englishlab .journey-map-scroll{
    max-width:100%;
    overflow-x:hidden;
  }
  .journey-shell--englishlab .journey-header,
  .journey-shell--englishlab .journey-map-card,
  .journey-shell--englishlab .journey-details{
    border-radius:24px;
  }
  .journey-shell--englishlab .journey-header__title-row,
  .journey-shell--englishlab .journey-map-card__header,
  .journey-shell--englishlab .journey-details__header,
  .journey-shell--englishlab .journey-layout{
    grid-template-columns:1fr;
    flex-direction:column;
  }
  .journey-shell--englishlab .journey-header__stats,
  .journey-shell--englishlab .journey-details__summary,
  .journey-shell--englishlab .journey-details__actions{
    grid-template-columns:1fr;
  }
}

/* Journey fullscreen refinement v2 */
#journeyPage .page-container.journey-clone-page{
  max-width:none;
  margin:0;
  padding:0;
}

#journeyPage .journey-shell--map-only{
  padding-bottom:0;
}

#journeyPage .journey-shell--map-only .journey-map-stage{
  min-height:calc(100dvh - 94px);
}

#journeyPage .journey-shell--map-only .journey-map-card{
  min-height:calc(100dvh - 94px);
}

#journeyPage .journey-shell--map-only .journey-map-scroll{
  height:calc(100dvh - 94px);
  min-height:calc(100dvh - 94px);
  padding:18px 0 18px;
  border-radius:0;
}

#journeyPage .journey-shell--map-only .journey-map__row{
  width:88px;
}

#journeyPage .journey-shell--map-only .level-node{
  display:block;
  width:88px;
}

#journeyPage .journey-shell--map-only .level-node__button{
  width:88px;
  height:88px;
}

#journeyPage .journey-shell--map-only .level-node__content{
  display:none;
}

#journeyPage .journey-shell--map-only .journey-level-popup{
  width:min(270px, calc(100vw - 24px));
}

#journeyPage .journey-shell--map-only .journey-level-popup--below{
  top:calc(100% + 14px);
  bottom:auto;
  transform:translate(var(--popup-x), -12px) scale(.92);
  animation:journeyPopupInBelow 220ms cubic-bezier(.22,1,.36,1) forwards;
}

#journeyPage .journey-shell--map-only .journey-level-popup--below::after{
  top:-8px;
  bottom:auto;
  border-top:1px solid rgba(94,234,212,.14);
  border-left:1px solid rgba(94,234,212,.14);
  border-right:none;
  border-bottom:none;
}

#journeyPage .journey-shell--map-only .journey-level-popup--below.journey-level-popup--left::after{
  left:42px;
}

#journeyPage .journey-shell--map-only .journey-level-popup--below.journey-level-popup--right::after{
  right:42px;
}

#journeyPage .journey-shell--map-only .journey-level-popup--below.is-closing{
  animation:journeyPopupOutBelow 180ms ease forwards;
}

@keyframes journeyPopupInBelow{
  from{opacity:0;transform:translate(var(--popup-x), -12px) scale(.92)}
  to{opacity:1;transform:translate(var(--popup-x), 0) scale(1)}
}

@keyframes journeyPopupOutBelow{
  from{opacity:1;transform:translate(var(--popup-x), 0) scale(1)}
  to{opacity:0;transform:translate(var(--popup-x), -12px) scale(.92)}
}

@media(max-width:960px){
  #journeyPage .page-container.journey-clone-page{
    padding:0;
  }

  #journeyPage .journey-shell--map-only .journey-map-stage{
    min-height:100dvh;
    border-radius:0;
    border-left:none;
    border-right:none;
  }

  #journeyPage .journey-shell--map-only .journey-map-card{
    min-height:100dvh;
    border-radius:0;
  }

  #journeyPage .journey-shell--map-only .journey-map-scroll{
    height:100dvh;
    min-height:100dvh;
    padding:20px 0 108px;
    border-radius:0;
  }

  #journeyPage .journey-shell--map-only .journey-map-stage__hud{
    display:none;
  }

  #journeyPage .journey-shell--map-only .journey-map__row{
    width:72px;
  }

  #journeyPage .journey-shell--map-only .level-node{
    width:72px;
  }

  #journeyPage .journey-shell--map-only .level-node__button{
    width:72px;
    height:72px;
  }

  #journeyPage .journey-shell--map-only .level-node__planet{
    left:-4px;
    bottom:4px;
    width:24px;
    height:24px;
  }

  #journeyPage .journey-shell--map-only .level-node__core{
    inset:7px;
  }

  #journeyPage .journey-shell--map-only .level-node__core svg{
    width:20px;
    height:20px;
  }

  #journeyPage .journey-shell--map-only .journey-level-popup{
    width:min(232px, calc(100vw - 18px));
    padding:14px 14px 12px;
  }

  #journeyPage .journey-shell--map-only .journey-level-popup h3{
    font-size:1.02rem;
  }

  #journeyPage .journey-shell--map-only .journey-level-popup__body{
    font-size:.84rem;
    line-height:1.5;
  }

  #journeyPage .journey-shell--map-only .journey-level-popup__chips{
    margin-top:10px;
  }

  #journeyPage .journey-shell--map-only .journey-level-popup__chips span{
    font-size:.75rem;
    padding:7px 9px;
  }
}


.journey-embed-host {
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
}

.journey-embed-shell {
  position: relative;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border-radius: 0;
  background:
    radial-gradient(circle at 18% 18%, rgba(76, 255, 214, 0.22), transparent 24%),
    radial-gradient(circle at 82% 24%, rgba(137, 92, 255, 0.18), transparent 26%),
    linear-gradient(180deg, rgba(6, 18, 23, 0.98) 0%, rgba(4, 12, 18, 1) 100%);
}

.journey-embed-frame {
  display: block;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  border: 0;
  background: transparent;
}

.journey-embed-loader {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  background:
    radial-gradient(circle at center, rgba(67, 255, 224, 0.16), transparent 42%),
    rgba(5, 15, 20, 0.94);
  color: #ecfffb;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

.journey-embed-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.journey-embed-loader__orb {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: radial-gradient(circle at 32% 30%, #f5fffd 0%, #79ffe8 32%, #1a5f79 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.16),
    0 0 26px rgba(79, 255, 227, 0.35),
    0 0 58px rgba(85, 160, 255, 0.18);
  animation: journeyEmbedPulse 1.8s ease-in-out infinite;
}

.journey-embed-loader strong {
  font-size: 1rem;
  letter-spacing: 0.04em;
}

.journey-embed-loader span {
  font-size: 0.9rem;
  color: rgba(236, 255, 251, 0.72);
}

body.journey-embed-active #englishLabDock {
  display: flex !important;
}

body.journey-embed-active {
  overflow: hidden;
}

body.journey-embed-active #journeyPage {
  padding: 0 !important;
  margin: 0 !important;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
}

html.journey-boss-open-root,
.journey-boss-open {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}

.journey-boss-overlay {
  position: fixed;
  inset: 0;
  z-index: 13000;
  display: none;
}

.journey-boss-overlay.is-open {
  display: block;
}

.journey-boss-overlay__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(2, 6, 12, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.journey-boss-overlay__panel {
  position: relative;
  z-index: 1;
  width: min(1240px, calc(100vw - 28px));
  height: min(88vh, 860px);
  margin: max(18px, env(safe-area-inset-top, 0px) + 10px) auto 0;
  border-radius: 30px;
  overflow: hidden;
  border: 1px solid rgba(118, 255, 223, 0.24);
  background:
    radial-gradient(circle at top, rgba(94, 255, 217, 0.16), transparent 28%),
    linear-gradient(180deg, rgba(8, 19, 29, 0.98) 0%, rgba(5, 10, 18, 0.98) 100%);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: journeyBossPanelIn 0.32s cubic-bezier(.22, 1, .36, 1);
}

.journey-boss-overlay.is-confirming .journey-boss-overlay__panel,
.journey-boss-overlay.is-playing .journey-boss-overlay__panel {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  animation: none;
  transform: none;
}

.journey-boss-overlay.is-confirming .journey-boss-overlay__panel {
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 87, 128, 0.24), transparent 24%),
    radial-gradient(circle at 15% 100%, rgba(82, 255, 232, 0.12), transparent 32%),
    linear-gradient(145deg, #03040b 0%, #07040b 42%, #120411 100%);
  border-color: rgba(255, 95, 132, 0.32);
  box-shadow:
    0 32px 110px rgba(0, 0, 0, 0.72),
    0 0 54px rgba(255, 76, 124, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.journey-boss-overlay.is-playing .journey-boss-overlay__panel {
  background: #02030c;
  animation: none;
}

.journey-boss-overlay.is-playing .journey-boss-overlay__backdrop {
  background: #02030c;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.journey-boss-overlay__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px 12px;
  color: #effffb;
}

.journey-boss-overlay__eyebrow {
  margin: 0 0 4px;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(167, 255, 232, 0.76);
}

.journey-boss-overlay__header h2 {
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.8rem);
}

.journey-boss-overlay__close {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.06);
  color: #effffb;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.journey-boss-overlay__status {
  padding: 0 20px 10px;
  font-size: 0.92rem;
  color: rgba(233, 255, 248, 0.74);
}

.journey-boss-overlay__frame {
  display: none;
  width: 100%;
  height: calc(100% - 90px);
  border: 0;
  background: #02030c;
  overflow: hidden;
}

.journey-boss-overlay.is-playing .journey-boss-overlay__frame {
  display: block;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
}

.journey-boss-overlay.is-confirming .journey-boss-overlay__status,
.journey-boss-overlay.is-confirming .journey-boss-overlay__frame,
.journey-boss-overlay.is-playing .journey-boss-overlay__header,
.journey-boss-overlay.is-playing .journey-boss-overlay__status {
  display: none;
}

.journey-boss-confirm {
  position: relative;
  min-height: 100%;
  display: none;
  place-items: center;
  align-content: center;
  gap: 18px;
  padding: clamp(28px, 5vw, 64px);
  color: #f8fbff;
  text-align: center;
  overflow: hidden;
}

.journey-boss-overlay.is-confirming .journey-boss-confirm {
  display: grid;
}

.journey-boss-confirm::before,
.journey-boss-confirm::after {
  content: "";
  position: absolute;
  inset: auto;
  pointer-events: none;
}

.journey-boss-confirm::before {
  width: min(64vw, 620px);
  height: min(64vw, 620px);
  border-radius: 50%;
  border: 1px solid rgba(255, 115, 151, 0.18);
  box-shadow:
    inset 0 0 60px rgba(255, 95, 132, 0.12),
    0 0 80px rgba(91, 241, 222, 0.08);
  animation: journeyBossGateSpin 10s linear infinite;
}

.journey-boss-confirm::after {
  left: 12%;
  right: 12%;
  bottom: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 95, 132, 0.8), rgba(91, 241, 222, 0.7), transparent);
  box-shadow: 0 0 24px rgba(255, 95, 132, 0.38);
}

.journey-boss-confirm > * {
  position: relative;
  z-index: 1;
}

.journey-boss-confirm__halo {
  width: clamp(82px, 13vw, 140px);
  height: clamp(82px, 13vw, 140px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(4, 5, 11, 0.94) 0 24%, rgba(255, 95, 132, 0.62) 25% 38%, transparent 39%),
    conic-gradient(from 20deg, transparent 0 12%, rgba(255, 95, 132, 0.9), transparent 34%, rgba(91, 241, 222, 0.72), transparent 68%, rgba(255, 221, 116, 0.8), transparent);
  box-shadow:
    0 0 34px rgba(255, 95, 132, 0.42),
    0 0 70px rgba(91, 241, 222, 0.18);
  animation: journeyBossGatePulse 1.8s ease-in-out infinite;
}

.journey-boss-confirm__eyebrow {
  margin: 0;
  color: rgba(255, 178, 198, 0.86);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.journey-boss-confirm h2 {
  margin: -6px 0 0;
  font-size: clamp(2.45rem, 8vw, 6.1rem);
  line-height: 0.92;
  letter-spacing: -0.06em;
  text-transform: uppercase;
  text-shadow:
    0 0 22px rgba(255, 95, 132, 0.36),
    0 0 54px rgba(91, 241, 222, 0.16);
}

.journey-boss-confirm__copy {
  width: min(680px, 100%);
  margin: 0;
  color: rgba(235, 245, 255, 0.76);
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  line-height: 1.7;
}

.journey-boss-confirm__stats {
  width: min(760px, 100%);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.journey-boss-confirm__stats span {
  display: grid;
  gap: 5px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.journey-boss-confirm__stats strong {
  color: #fff4f7;
  font-size: 0.88rem;
}

.journey-boss-confirm__stats small {
  color: rgba(210, 226, 242, 0.62);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.journey-boss-confirm__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.journey-boss-confirm__start,
.journey-boss-confirm__cancel {
  min-height: 54px;
  padding: 0 24px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.journey-boss-confirm__start {
  border: 0;
  color: #12030c;
  background: linear-gradient(135deg, #fff1aa, #ff6f9b 48%, #58ffe4);
  box-shadow:
    0 12px 34px rgba(255, 95, 132, 0.36),
    0 0 24px rgba(88, 255, 228, 0.18);
}

.journey-boss-confirm__cancel {
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ecf7ff;
  background: rgba(255, 255, 255, 0.06);
}

.journey-boss-confirm__mobile-note {
  display: none;
  width: min(540px, 100%);
  margin: -2px 0 0;
  color: rgba(255, 228, 236, 0.68);
  font-size: 0.82rem;
  line-height: 1.5;
}

.journey-boss-overlay.is-loading .journey-boss-overlay__panel::after {
  content: "LOADING FINAL ARENA";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
  padding: 11px 18px;
  border-radius: 999px;
  background: rgba(4, 6, 14, 0.78);
  border: 1px solid rgba(91, 241, 222, 0.22);
  color: rgba(240, 255, 252, 0.86);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.38);
}

@keyframes journeyEmbedPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.92;
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

@keyframes journeyBossPanelIn {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes journeyBossGatePulse {
  0%, 100% {
    transform: scale(0.98);
    opacity: 0.82;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
}

@keyframes journeyBossGateSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 960px) {
  .journey-embed-shell,
  .journey-embed-frame,
  .journey-embed-host {
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
  }

  body.journey-embed-active #englishLabDock {
    display: flex !important;
  }

  body.journey-embed-active {
    overflow: hidden;
  }

  body.journey-embed-active #journeyPage {
    padding: 0 !important;
    margin: 0 !important;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
  }

  .journey-boss-overlay__panel {
    width: calc(100vw - 12px);
    height: calc(100vh - 18px);
    margin-top: max(8px, env(safe-area-inset-top, 0px) + 4px);
    border-radius: 24px;
  }

  .journey-boss-overlay.is-playing .journey-boss-overlay__panel {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    border-radius: 0;
    animation: none;
  }

  .journey-boss-overlay__header {
    padding: 16px 14px 10px;
  }

  .journey-boss-overlay.is-playing .journey-boss-overlay__header,
  .journey-boss-overlay.is-playing .journey-boss-overlay__status {
    display: none;
  }

  .journey-boss-overlay__status {
    padding: 0 14px 8px;
  }

  .journey-boss-overlay__frame {
    height: calc(100% - 86px);
  }

  .journey-boss-overlay.is-playing .journey-boss-overlay__frame {
    height: 100%;
  }

  .journey-boss-confirm {
    min-height: calc(100% - 68px);
    padding: 24px 16px;
    gap: 14px;
  }

  .journey-boss-confirm__stats {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .journey-boss-confirm__mobile-note {
    display: block;
  }
}

@media (max-width: 960px) and (orientation: portrait) {
  .journey-boss-overlay.is-playing .journey-boss-overlay__panel {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100vh;
    width: 100dvh;
    height: 100vw;
    height: 100dvw;
    max-width: none;
    margin: 0;
    transform: translate(-50%, -50%) rotate(90deg);
    transform-origin: center;
  }

  .journey-boss-overlay.is-playing .journey-boss-overlay__frame {
    width: 100%;
    height: 100%;
  }
}

/* ====================================================================== */
/* Industry UI / UX Refactor                                              */
/* ====================================================================== */

:root{
  --font-heading:'Plus Jakarta Sans',sans-serif;
  --font-body:'DM Sans',sans-serif;
  --space-4:4px;
  --space-8:8px;
  --space-12:12px;
  --space-16:16px;
  --space-24:24px;
  --space-32:32px;
  --space-40:40px;
  --space-48:48px;
  --radius-sm:16px;
  --radius:20px;
  --radius-lg:24px;
  --radius-xl:28px;
  --surface-stroke:rgba(225,255,241,0.09);
  --surface-stroke-strong:rgba(225,255,241,0.16);
  --surface-glass:rgba(13,26,22,0.78);
  --surface-glass-strong:rgba(11,23,20,0.9);
  --surface-glass-soft:rgba(15,31,26,0.66);
  --text-primary:#f4fbf7;
  --text-secondary:#b7c7c0;
  --text-light:#8da198;
  --background:#07110f;
  --background-secondary:#0d1b18;
  --card-bg:rgba(13,26,22,0.78);
  --primary:#73d4a3;
  --primary-dark:#173f2f;
  --primary-light:#dbffe9;
  --primary-lighter:rgba(115,212,163,0.14);
  --accent-gold:#f2c86d;
  --shadow-sm:0 6px 18px rgba(0,0,0,0.16),0 14px 34px rgba(0,0,0,0.12);
  --shadow-md:0 10px 26px rgba(0,0,0,0.18),0 22px 48px rgba(0,0,0,0.16),0 1px 0 rgba(255,255,255,0.03) inset;
  --shadow-lg:0 16px 34px rgba(0,0,0,0.22),0 28px 66px rgba(0,0,0,0.18),0 1px 0 rgba(255,255,255,0.04) inset;
  --shadow-panel:0 18px 38px rgba(0,0,0,0.24),0 30px 80px rgba(0,0,0,0.18);
  --motion-standard:cubic-bezier(0.25,0.8,0.25,1);
  --motion-spring:cubic-bezier(0.22,1,0.36,1);
}

html{
  font-size:16px;
  scroll-behavior:smooth;
}

body,
button,
input,
select,
textarea{
  font-family:var(--font-body);
}

body{
  background:
    radial-gradient(circle at top left, rgba(115,212,163,0.12), transparent 24%),
    radial-gradient(circle at top right, rgba(242,200,109,0.08), transparent 18%),
    linear-gradient(180deg, #081311 0%, #07110f 44%, #091815 100%);
  color:var(--text-primary);
  letter-spacing:-0.01em;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4,h5,h6,
.auth-title,
.page-title,
.hero-title,
.main-home-title,
.journey-proto-title,
.menu-card-title,
.quiz-start h2,
.reading-questions-title{
  font-family:var(--font-heading);
  letter-spacing:-0.03em;
}

.hero-title{
  font-size:clamp(2.25rem, 5vw, 4rem) !important;
  line-height:1.02;
}

.page-title,
.journey-proto-title,
.auth-title{
  font-size:clamp(1.85rem, 3vw, 2.7rem);
  line-height:1.08;
}

.menu-card-title,
.journey-hub-card strong,
.main-home-quick-card strong{
  font-size:clamp(1rem, 1.5vw, 1.18rem);
  line-height:1.12;
}

.hero-subtitle,
.auth-subtitle,
.menu-card-desc,
.journey-hub-card span:last-child,
.main-home-quick-card span:last-child,
.main-home-copy,
.reading-prompt-text{
  color:var(--text-secondary) !important;
}

.page-container{
  max-width:1120px;
  padding:var(--space-32) var(--space-24) calc(var(--space-48) + 108px);
}

.top-bar{
  min-height:80px;
  padding:var(--space-16) var(--space-24);
  gap:var(--space-16);
  background:linear-gradient(180deg, rgba(10,20,18,0.94), rgba(10,20,18,0.76));
  border-bottom:1px solid rgba(225,255,241,0.06);
  box-shadow:0 10px 22px rgba(0,0,0,0.16),0 22px 48px rgba(0,0,0,0.08);
  backdrop-filter:blur(18px);
}

.profile-section,
.stat-badge,
.settings-icon,
.speaker-btn,
.settings-option,
.quiz-btn,
.reading-btn,
.continue-btn,
.auth-btn,
.mini-btn,
.modal-btn,
.stats-action-btn,
.daily-goal-btn,
.question-screen-action-btn,
.quiz-nav-btn{
  transition:
    transform 0.28s var(--motion-standard),
    background-color 0.28s var(--motion-standard),
    border-color 0.28s var(--motion-standard),
    box-shadow 0.28s var(--motion-standard),
    color 0.28s var(--motion-standard);
}

@media (hover:hover){
  .profile-section:hover,
  .stat-badge:hover,
  .settings-icon:hover,
  .speaker-btn:hover,
  .settings-option:hover,
  .quiz-btn:hover,
  .reading-btn:hover,
  .continue-btn:hover,
  .auth-btn:hover,
  .mini-btn:hover,
  .modal-btn:hover,
  .stats-action-btn:hover,
  .daily-goal-btn:hover,
  .question-screen-action-btn:hover,
  .quiz-nav-btn:hover{
    transform:translateY(-2px);
  }
}

.profile-section:active,
.stat-badge:active,
.settings-icon:active,
.speaker-btn:active,
.settings-option:active,
.quiz-btn:active,
.reading-btn:active,
.continue-btn:active,
.auth-btn:active,
.mini-btn:active,
.modal-btn:active,
.stats-action-btn:active,
.daily-goal-btn:active,
.question-screen-action-btn:active,
.quiz-nav-btn:active{
  transform:translateY(0) scale(0.98);
}

.hero-card,
.daily-goal-card,
.theme-banner-wotd,
.theme-banner-announce,
.main-home-card,
.main-home-mini,
.reading-card,
.quiz-start,
.reading-start,
.auth-card,
.modal,
.stats-card,
.session-mode-card,
.quiz-header,
.quiz-feedback,
.quiz-results,
.journey-hub-shell{
  border-radius:var(--radius-lg) !important;
  border:1px solid var(--surface-stroke);
  background:linear-gradient(180deg, rgba(18,34,29,0.88), rgba(10,21,18,0.88));
  box-shadow:var(--shadow-md);
  backdrop-filter:blur(16px);
}

.hero-card,
.daily-goal-card,
.main-home-card,
.reading-card,
.quiz-start,
.reading-start,
.auth-card{
  position:relative;
}

.hero-card,
.daily-goal-card,
.main-home-card,
.reading-card,
.quiz-start,
.reading-start,
.auth-card{
  overflow:hidden;
}

.modal{
  overflow:auto;
  position:relative;
}

.hero-card::before,
.daily-goal-card::before,
.main-home-card::before,
.reading-card::before,
.quiz-start::before,
.reading-start::before,
.auth-card::before,
.modal::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.04), transparent 42%),
    linear-gradient(180deg, rgba(115,212,163,0.06), transparent 38%);
  pointer-events:none;
}

.hero-card,
.daily-goal-card{
  padding:var(--space-32) !important;
  box-shadow:var(--shadow-lg);
}

.hero-card .level-badge,
.main-home-pill,
.daily-goal-reward,
.stats-hero-pill,
.minigame-lab-card-pill,
.diagnostic-meta-pill,
.diagnostic-status-pill,
.minigame-arena-bar-chip{
  border-radius:999px;
  border:1px solid rgba(242,200,109,0.2);
  background:rgba(242,200,109,0.08);
  color:#fff4c8;
  font-family:var(--font-heading);
  font-weight:700;
  letter-spacing:0.01em;
}

.cards-grid{
  gap:var(--space-16);
}

.menu-card{
  min-height:188px;
  padding:var(--space-24) !important;
  border-radius:var(--radius) !important;
  border:1px solid rgba(242,248,244,0.12);
  box-shadow:var(--shadow-md);
  overflow:hidden;
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:var(--space-12);
  text-align:left;
}

.menu-card::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(6,10,9,0.04) 0%, rgba(6,10,9,0.36) 100%);
  z-index:0;
}

.menu-card > *{
  position:relative;
  z-index:1;
}

@media (hover:hover){
  .menu-card:hover,
  .journey-hub-card:hover,
  .main-home-quick-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-panel);
  }
}

.menu-card:active,
.journey-hub-card:active,
.main-home-quick-card:active{
  transform:translateY(0) scale(0.985);
}

.menu-card-icon,
.journey-hub-card__emoji,
.main-home-quick-card__emoji,
.englishlab-dock__emoji{
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  border-radius:var(--radius-sm);
  background:linear-gradient(180deg, rgba(13,32,26,0.68), rgba(7,18,15,0.84));
  border:1px solid rgba(255,248,220,0.12);
  box-shadow:0 6px 16px rgba(0,0,0,0.16),0 14px 28px rgba(0,0,0,0.12);
  color:var(--accent-gold);
}

#practiceHubGrid .journey-hub-card__emoji,
#libraryHubGrid .journey-hub-card__emoji{
  color:#7fd2ff;
  background:linear-gradient(180deg, rgba(22,57,99,0.72), rgba(11,28,52,0.92));
  border-color:rgba(127,210,255,0.18);
}

.englishlab-dock__item,
.englishlab-dock__emoji{
  color:#7fd2ff;
}

.englishlab-dock__item.is-active{
  color:#f6fbff;
  background:linear-gradient(180deg, rgba(74,145,255,0.2), rgba(74,145,255,0.1));
  border:1px solid rgba(127,210,255,0.28);
  box-shadow:0 8px 18px rgba(0,0,0,0.12),0 16px 28px rgba(31,84,160,0.16);
}

.englishlab-dock__item.is-active .englishlab-dock__emoji{
  color:#9dddff;
  background:linear-gradient(180deg, rgba(28,61,102,0.72), rgba(15,32,56,0.9));
  border-color:rgba(127,210,255,0.24);
}

.menu-card .menu-card-icon,
.journey-hub-card__emoji,
.main-home-quick-card__emoji,
.englishlab-dock__emoji{
  animation:none !important;
  transition:
    transform 0.28s var(--motion-standard),
    box-shadow 0.28s var(--motion-standard),
    border-color 0.28s var(--motion-standard),
    background-color 0.28s var(--motion-standard);
}

.menu-card-icon svg,
.journey-hub-card__emoji svg,
.main-home-quick-card__emoji svg,
.englishlab-dock__emoji svg,
.menu-card-icon i,
.journey-hub-card__emoji i,
.main-home-quick-card__emoji i,
.englishlab-dock__emoji i{
  width:26px;
  height:26px;
  stroke-width:2.15;
}

@media (hover:hover){
  .menu-card:hover .menu-card-icon,
  .journey-hub-card:hover .journey-hub-card__emoji,
  .main-home-quick-card:hover .main-home-quick-card__emoji,
  .englishlab-dock__item:hover .englishlab-dock__emoji{
    transform:translateY(-2px);
    box-shadow:0 10px 22px rgba(0,0,0,0.16),0 18px 36px rgba(0,0,0,0.12);
  }
}

.menu-card-title{
  color:var(--text-primary);
  margin-bottom:0;
}

.menu-card-desc{
  font-size:0.93rem;
  line-height:1.6;
}

.journey-hub-card{
  gap:var(--space-12);
  padding:var(--space-24);
  border-radius:var(--radius) !important;
  background:linear-gradient(180deg, rgba(15,29,25,0.86), rgba(9,18,16,0.92));
  border:1px solid var(--surface-stroke);
  box-shadow:var(--shadow-md);
}

.journey-hub-card strong{
  color:var(--text-primary);
}

.journey-hub-card span:last-child{
  font-size:0.93rem;
}

.shop-page-container{
  max-width:1040px;
}

.lab-shop-shell{
  overflow:hidden;
}

.lab-shop-title-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(220px,280px);
  gap:24px;
  align-items:end;
}

.lab-shop-balance-card{
  display:grid;
  gap:8px;
  padding:20px;
  border-radius:24px;
  background:
    linear-gradient(180deg, rgba(247,212,106,0.14), rgba(247,212,106,0.05)),
    rgba(255,255,255,0.04);
  border:1px solid rgba(247,212,106,0.22);
  box-shadow:0 14px 28px rgba(0,0,0,0.18);
}

.lab-shop-balance-card span{
  font-size:11px;
  font-weight:800;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--text-secondary);
}

.lab-shop-balance-card strong{
  color:#f7d46a;
  font-size:24px;
  line-height:1.1;
}

.lab-shop-empty-state{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:22px;
  margin-top:24px;
  padding:24px;
  border-radius:28px;
  background:rgba(255,255,255,0.035);
  border:1px solid rgba(255,255,255,0.08);
}

.lab-shop-empty-icon{
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(247,212,106,0.2), rgba(10,27,21,0.68));
  border:1px solid rgba(247,212,106,0.22);
  font-size:28px;
}

.lab-shop-empty-state h2{
  margin:4px 0 8px;
  color:var(--text-primary);
  font-size:22px;
  line-height:1.18;
}

.lab-shop-empty-state p{
  margin:0;
  color:var(--text-secondary);
  line-height:1.65;
}

.lab-shop-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.lab-shop-toolbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:24px 0;
  padding:10px;
  border-radius:24px;
  background:rgba(255,255,255,0.035);
  border:1px solid rgba(255,255,255,0.08);
}

.lab-shop-filter{
  min-height:42px;
  padding:0 16px;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:999px;
  background:rgba(7,16,14,0.7);
  color:var(--text-secondary);
  font-weight:800;
  letter-spacing:0.02em;
  cursor:pointer;
  transition:transform .28s cubic-bezier(.25,.8,.25,1), border-color .28s cubic-bezier(.25,.8,.25,1), background .28s cubic-bezier(.25,.8,.25,1), color .28s cubic-bezier(.25,.8,.25,1);
}

.lab-shop-filter:hover,
.lab-shop-filter.active{
  transform:translateY(-2px);
  color:#06120f;
  border-color:rgba(141,207,255,0.5);
  background:linear-gradient(135deg, #8dcfff, #55e6c1);
}

.lab-shop-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:16px;
  padding-bottom:48px;
}

.lab-shop-loading{
  grid-column:1 / -1;
  padding:24px;
  border-radius:24px;
  background:rgba(255,255,255,0.04);
  color:var(--text-secondary);
  border:1px solid rgba(255,255,255,0.08);
}

.lab-shop-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:336px;
  padding:18px;
  border-radius:24px;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 8%, rgba(141,207,255,0.14), transparent 34%),
    linear-gradient(180deg, rgba(18,36,33,0.94), rgba(8,18,16,0.96));
  border:1px solid rgba(255,255,255,0.09);
  box-shadow:0 10px 18px rgba(0,0,0,0.18), 0 24px 48px rgba(0,0,0,0.22);
  transition:transform .3s cubic-bezier(.25,.8,.25,1), border-color .3s cubic-bezier(.25,.8,.25,1), box-shadow .3s cubic-bezier(.25,.8,.25,1);
}

.lab-shop-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,0.11), transparent 36%);
  opacity:.62;
}

.lab-shop-card:hover{
  transform:translateY(-4px);
  border-color:rgba(141,207,255,0.28);
  box-shadow:0 14px 24px rgba(0,0,0,0.2), 0 32px 56px rgba(0,0,0,0.26);
}

.lab-shop-card.rarity-legendary{
  border-color:rgba(255,215,0,0.32);
  background:
    radial-gradient(circle at 20% 12%, rgba(255,215,0,0.16), transparent 34%),
    linear-gradient(180deg, rgba(30,36,20,0.94), rgba(8,18,16,0.96));
}

.lab-shop-card.rarity-epic{
  border-color:rgba(141,207,255,0.26);
}

.lab-shop-card__top,
.lab-shop-card__footer{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.lab-shop-rarity,
.lab-shop-category{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  color:var(--text-secondary);
  font-size:11px;
  font-weight:900;
  letter-spacing:0.08em;
  text-transform:uppercase;
}

.lab-shop-rarity{
  color:#f7d46a;
}

.lab-shop-preview{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:112px;
  height:112px;
  margin:18px auto 16px;
  border-radius:28px;
  background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.12), 0 16px 28px rgba(0,0,0,0.22);
}

.lab-shop-preview--consumable,
.lab-shop-preview--theme,
.lab-shop-preview--gacha{
  background:radial-gradient(circle at 35% 20%, rgba(247,212,106,.22), transparent 42%),linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.025));
}

.lab-shop-preview--nameplate{
  width:100%;
  height:88px;
  border-radius:20px;
  background:transparent;
}

.lab-shop-nameplate-preview,
.appearance-nameplate-preview{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:100%;
  min-height:38px;
  padding:10px 14px;
  border-radius:14px;
  box-sizing:border-box;
  color:#fff;
  font-weight:900;
  letter-spacing:.04em;
  text-shadow:0 2px 8px rgba(0,0,0,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 10px 22px rgba(0,0,0,.18);
}

.lab-shop-nameplate-preview span,
.appearance-nameplate-preview span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  line-height:1;
}

.lab-shop-icon-preview{
  display:grid;
  place-items:center;
  width:76px;
  height:76px;
  border-radius:24px;
  background:linear-gradient(135deg, rgba(247,212,106,.18), rgba(85,230,193,.14));
  border:1px solid rgba(255,255,255,.13);
  font-size:42px;
  line-height:1;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.26));
}

.lab-shop-owned-count{
  position:relative;
  z-index:1;
  display:inline-flex;
  width:max-content;
  max-width:100%;
  margin:-2px 0 10px;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(85,230,193,.1);
  border:1px solid rgba(85,230,193,.22);
  color:#8df7dc;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.lab-shop-card h3{
  position:relative;
  z-index:1;
  margin:0 0 8px;
  color:var(--text-primary);
  font-size:20px;
  line-height:1.15;
}

.lab-shop-card p{
  position:relative;
  z-index:1;
  flex:1;
  margin:0 0 16px;
  color:var(--text-secondary);
  line-height:1.55;
  font-size:14px;
}

.lab-shop-admin-tools{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:0 0 14px;
  padding:8px;
  border-radius:16px;
  border:1px solid rgba(141,207,255,0.18);
  background:rgba(5,12,18,0.38);
}

.lab-shop-admin-tools button{
  min-height:34px;
  border:1px solid rgba(141,207,255,0.24);
  border-radius:12px;
  background:rgba(141,207,255,0.1);
  color:#dff6ff;
  font:inherit;
  font-size:11px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;
}

.lab-shop-admin-tools button.danger{
  border-color:rgba(255,107,129,0.28);
  background:rgba(255,107,129,0.12);
  color:#ffd6de;
}

.lab-shop-card__footer strong{
  color:#f7d46a;
  font-size:14px;
}

.lab-shop-buy-btn{
  min-height:42px;
  padding:0 16px;
  border:0;
  border-radius:14px;
  background:linear-gradient(135deg, #8dcfff, #55e6c1);
  color:#06120f;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 10px 20px rgba(85,230,193,0.16);
  transition:transform .28s cubic-bezier(.25,.8,.25,1), filter .28s cubic-bezier(.25,.8,.25,1), opacity .28s cubic-bezier(.25,.8,.25,1);
}

.lab-shop-buy-btn:hover{
  transform:translateY(-2px);
  filter:saturate(1.08);
}

.lab-shop-use-btn{
  min-height:42px;
  padding:0 14px;
  border:1px solid rgba(247,212,106,0.32);
  border-radius:14px;
  background:linear-gradient(135deg,rgba(247,212,106,0.22),rgba(255,159,67,0.12));
  color:#FFE59A;
  font-family:inherit;
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
  cursor:pointer;
  box-shadow:0 10px 18px rgba(0,0,0,0.16);
  transition:transform .18s ease,opacity .18s ease,filter .18s ease;
}
.lab-shop-use-btn:hover{transform:translateY(-2px);filter:saturate(1.08)}
.lab-shop-use-btn:disabled{cursor:not-allowed;opacity:.58;box-shadow:none}

.lab-shop-buy-btn:disabled{
  cursor:not-allowed;
  opacity:.72;
  color:rgba(255,255,255,0.62);
  background:rgba(255,255,255,0.08);
  box-shadow:none;
  transform:none;
}

@media(max-width:768px){
  .lab-shop-title-row,
  .lab-shop-empty-state{
    grid-template-columns:1fr;
    align-items:stretch;
  }
  .lab-shop-balance-card,
  .lab-shop-empty-state{
    padding:16px;
    border-radius:22px;
  }
  .lab-shop-actions{
    justify-content:stretch;
  }
  .lab-shop-actions .main-home-btn{
    width:100%;
  }
  .lab-shop-toolbar{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .lab-shop-filter{
    width:100%;
    padding:0 10px;
  }
  .lab-shop-grid{
    grid-template-columns:1fr;
  }
  .lab-shop-card{
    min-height:0;
  }
}

.main-home-quick-grid{
  gap:var(--space-16);
}

.main-home-quick-card{
  border-radius:var(--radius) !important;
  padding:var(--space-24);
  border:1px solid var(--surface-stroke);
  background:linear-gradient(180deg, rgba(13,28,24,0.86), rgba(8,18,16,0.92));
  box-shadow:var(--shadow-md);
}

.englishlab-dock{
  width:min(760px, calc(100% - 32px));
  gap:var(--space-8);
  padding:var(--space-12);
  border-radius:var(--radius-lg);
  border:1px solid rgba(225,255,241,0.08);
  background:linear-gradient(180deg, rgba(7,16,14,0.9), rgba(7,16,14,0.82));
  box-shadow:var(--shadow-panel);
  backdrop-filter:blur(22px);
}

.englishlab-dock__item{
  min-height:64px;
  min-width:44px;
  gap:var(--space-8);
  padding:var(--space-8);
  border-radius:var(--radius-sm);
  color:#8dcfff;
  font-size:0.75rem;
  font-weight:700;
  letter-spacing:0.01em;
}

.englishlab-dock__item.is-active{
  color:#f4fbff;
  background:linear-gradient(180deg, rgba(61,126,255,0.22), rgba(61,126,255,0.12));
  border:1px solid rgba(127,210,255,0.24);
  box-shadow:0 8px 18px rgba(0,0,0,0.12),0 16px 28px rgba(22,54,110,0.16);
}

.englishlab-dock__emoji{
  width:44px;
  height:44px;
  border-radius:14px;
  background:rgba(255,255,255,0.03);
  box-shadow:none;
  color:#7fd2ff;
}

.englishlab-dock__item.is-active .englishlab-dock__emoji{
  color:#9dddff;
  background:linear-gradient(180deg, rgba(26,60,110,0.78), rgba(14,31,58,0.9));
  border-color:rgba(127,210,255,0.2);
}

.page-header{
  margin-bottom:var(--space-24);
  gap:var(--space-16);
}

.page-close,
.reading-btn.secondary,
.quiz-btn.secondary,
.mini-btn.secondary,
.modal-btn.cancel{
  border-radius:16px !important;
  border:1px solid var(--surface-stroke-strong);
  background:rgba(255,255,255,0.03);
  box-shadow:0 8px 18px rgba(0,0,0,0.12),0 18px 28px rgba(0,0,0,0.08);
}

.quiz-btn:not(.secondary),
.reading-btn.primary,
.continue-btn,
.auth-btn:not(.secondary),
.mini-btn.primary,
.modal-btn.confirm,
.stats-action-btn.cyan,
.stats-action-btn.gold,
.daily-goal-btn{
  border-radius:16px !important;
  border:1px solid rgba(255,248,220,0.14);
  background:linear-gradient(135deg, #1e5a45 0%, #73d4a3 100%);
  box-shadow:0 10px 22px rgba(0,0,0,0.18),0 18px 34px rgba(18,76,57,0.24);
  color:#f7fff9;
}

.form-input,
.name-input{
  min-height:52px;
  padding:var(--space-12) var(--space-16);
  border-radius:16px;
  border:1px solid var(--surface-stroke-strong);
  background:rgba(5,13,11,0.36);
  color:var(--text-primary);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.03);
}

.form-input:focus,
.name-input:focus{
  outline:none;
  border-color:rgba(115,212,163,0.5);
  box-shadow:0 0 0 4px rgba(115,212,163,0.12);
}

@keyframes industryCardCascade{
  from{
    opacity:0;
    transform:translateY(18px) scale(0.985);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: no-preference){
  .cards-grid > .menu-card,
  .journey-hub-grid > .journey-hub-card,
  .main-home-quick-grid > .main-home-quick-card{
    opacity:0;
    animation:industryCardCascade 0.56s var(--motion-spring) forwards;
  }

  .cards-grid > .menu-card:nth-child(1),
  .journey-hub-grid > .journey-hub-card:nth-child(1),
  .main-home-quick-grid > .main-home-quick-card:nth-child(1){animation-delay:40ms}
  .cards-grid > .menu-card:nth-child(2),
  .journey-hub-grid > .journey-hub-card:nth-child(2),
  .main-home-quick-grid > .main-home-quick-card:nth-child(2){animation-delay:80ms}
  .cards-grid > .menu-card:nth-child(3),
  .journey-hub-grid > .journey-hub-card:nth-child(3),
  .main-home-quick-grid > .main-home-quick-card:nth-child(3){animation-delay:120ms}
  .cards-grid > .menu-card:nth-child(4),
  .journey-hub-grid > .journey-hub-card:nth-child(4),
  .main-home-quick-grid > .main-home-quick-card:nth-child(4){animation-delay:160ms}
  .cards-grid > .menu-card:nth-child(5),
  .journey-hub-grid > .journey-hub-card:nth-child(5),
  .main-home-quick-grid > .main-home-quick-card:nth-child(5){animation-delay:200ms}
  .cards-grid > .menu-card:nth-child(6),
  .journey-hub-grid > .journey-hub-card:nth-child(6),
  .main-home-quick-grid > .main-home-quick-card:nth-child(6){animation-delay:240ms}
  .cards-grid > .menu-card:nth-child(n+7){animation-delay:280ms}
}

@media (prefers-reduced-motion: reduce){
  .cards-grid > .menu-card,
  .journey-hub-grid > .journey-hub-card,
  .main-home-quick-grid > .main-home-quick-card{
    opacity:1 !important;
    transform:none !important;
  }
}

@media (max-width: 960px){
  .page-container{
    padding:var(--space-24) var(--space-16) calc(124px + env(safe-area-inset-bottom, 0px));
  }

  .top-bar{
    min-height:72px;
    padding:var(--space-12) var(--space-16);
    gap:var(--space-12);
  }

  .hero-card,
  .daily-goal-card,
  .main-home-card,
  .reading-card,
  .quiz-start,
  .reading-start,
  .auth-card,
  .modal,
  .journey-hub-card,
  .main-home-quick-card{
    padding:var(--space-24) !important;
  }

  .menu-card{
    min-height:160px;
    padding:var(--space-16) !important;
    gap:var(--space-8);
  }

  .menu-card-icon,
  .journey-hub-card__emoji,
  .main-home-quick-card__emoji{
    width:48px;
    height:48px;
    border-radius:14px;
  }

  .menu-card-icon svg,
  .journey-hub-card__emoji svg,
  .main-home-quick-card__emoji svg,
  .englishlab-dock__emoji svg{
    width:22px;
    height:22px;
  }
}

@media (max-width: 640px){
  .top-bar{
    padding:var(--space-12);
  }

  .hero-title{
    font-size:clamp(1.95rem, 8vw, 2.7rem) !important;
  }

  .page-title,
  .journey-proto-title,
  .auth-title{
    font-size:clamp(1.55rem, 7vw, 2rem);
  }

  .cards-grid{
    gap:var(--space-12);
  }

  .menu-card{
    min-height:148px;
    padding:var(--space-16) !important;
  }

  .menu-card-title{
    font-size:0.95rem;
  }

  .menu-card-desc{
    font-size:0.82rem;
  }

  .englishlab-dock{
    width:calc(100% - 16px);
    bottom:8px;
    padding:var(--space-8);
    gap:var(--space-4);
    border-radius:20px;
  }

  .englishlab-dock__item{
    min-height:56px;
    padding:var(--space-8) var(--space-4);
    font-size:0.69rem;
  }

  .englishlab-dock__emoji{
    width:40px;
    height:40px;
    border-radius:12px;
  }
}

@media (max-width: 768px){
  #mainPage .top-bar{
    height:auto;
    min-height:118px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto auto minmax(0,1fr);
    grid-template-areas:
      "profile . streak actions actions"
      ". xp coin level .";
    align-items:center;
    gap:10px 8px;
    padding:calc(10px + env(safe-area-inset-top, 0px)) 12px 12px;
    overflow:visible;
  }

  #mainPage .profile-section{
    grid-area:profile;
    justify-self:start;
    min-width:54px;
    max-width:100%;
    padding:6px 8px;
    gap:8px;
  }

  #mainPage .profile-section .user-name{
    display:none;
  }

  #mainPage .avatar{
    width:38px;
    height:38px;
    flex:0 0 38px;
    font-size:15px;
  }

  #mainPage .stats-section{
    display:contents;
    margin:0;
    min-width:0;
  }

  #mainPage .topbar-actions{
    grid-area:actions;
    justify-self:end;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    margin:0;
    min-width:0;
    position:relative;
  }

  #mainPage .stat-badge{
    min-height:40px;
    padding:7px 10px;
    gap:5px;
    font-size:12px;
    line-height:1;
    white-space:nowrap;
    justify-content:center;
  }

  #mainPage .stat-badge.streak{
    grid-area:streak;
    justify-self:end;
    padding:5px 12px;
  }

  #mainPage .stat-badge.xp{
    grid-area:xp;
    display:flex !important;
  }

  #mainPage .stat-badge.ecoins{
    grid-area:coin;
  }

  #mainPage .stat-badge.level{
    grid-area:level;
    display:flex !important;
    max-width:min(38vw, 172px);
    overflow:hidden;
    text-overflow:ellipsis;
  }

  #mainPage #xpValue,
  #mainPage #ecoinValue{
    display:inline-block;
    max-width:52px;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  #mainPage .settings-icon,
  #mainPage .speaker-btn{
    width:38px !important;
    height:38px !important;
    flex-shrink:0;
  }

  #mainPage .settings-panel{
    right:0;
    top:calc(100% + 10px);
  }

  #mainPage .main-container{
    padding-top:18px;
  }
}

@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
}
body.lab-arena-session-active #englishLabDock{display:none !important}
body.lab-arena-immersive-active{
  background:
    radial-gradient(circle at top center,rgba(59,130,246,0.08),transparent 28%),
    radial-gradient(circle at bottom right,rgba(255,184,0,0.08),transparent 24%),
    linear-gradient(180deg,#081511,#06100d);
}
.lab-arena-page-shell{
  max-width:1240px;
}
.lab-arena-page-shell--immersive{
  max-width:none;
  min-height:100vh;
  padding:20px 16px 28px;
}
.lab-arena-shell{
  display:grid;
  gap:24px;
  padding-bottom:48px;
}
.lab-arena-shell--immersive{
  gap:0;
  padding-bottom:0;
}
.lab-arena-floating-back{
  position:fixed;
  top:calc(env(safe-area-inset-top, 0px) + 16px);
  left:16px;
  z-index:1200;
  min-height:46px;
  padding:0 16px;
  border:none;
  border-radius:16px;
  background:rgba(8,20,17,0.78);
  color:#E9FFF6;
  font:700 14px/1 'DM Sans',sans-serif;
  backdrop-filter:blur(16px);
  box-shadow:0 12px 28px rgba(0,0,0,0.28);
  cursor:pointer;
  transition:transform .28s cubic-bezier(.25,.8,.25,1),background .28s cubic-bezier(.25,.8,.25,1),box-shadow .28s cubic-bezier(.25,.8,.25,1);
}
.lab-arena-floating-back:hover{
  transform:translateY(-2px);
  background:rgba(16,34,29,0.92);
}
.lab-arena-hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.8fr) minmax(280px,1fr);
  gap:24px;
  padding:32px;
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(96,180,148,0.18);
  background:
    radial-gradient(circle at top right,rgba(255,184,0,0.1),transparent 30%),
    radial-gradient(circle at left center,rgba(61,154,122,0.16),transparent 36%),
    linear-gradient(140deg,rgba(19,46,37,0.96),rgba(10,28,22,0.94));
  box-shadow:0 10px 24px rgba(0,0,0,0.24),0 28px 48px rgba(0,0,0,0.22);
}
.lab-arena-eyebrow,
.lab-arena-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(117,198,160,0.22);
  background:rgba(255,255,255,0.04);
  color:rgba(240,245,243,0.76);
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.lab-arena-title{
  margin-top:18px;
  max-width:12ch;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:clamp(2rem,4.6vw,3.5rem);
  line-height:.98;
  letter-spacing:-.04em;
}
.lab-arena-copy,
.lab-arena-inline-copy,
.lab-arena-note,
.lab-arena-note-inline{
  color:var(--text-secondary);
  line-height:1.7;
}
.lab-arena-inline-pill-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.lab-arena-copy{
  max-width:58ch;
  margin-top:14px;
  font-size:15px;
}
.lab-arena-hero__meta{
  display:grid;
  gap:12px;
  align-content:start;
}
.lab-arena-meta-card{
  display:grid;
  gap:4px;
  min-height:88px;
  padding:18px 18px 16px;
  border-radius:18px;
  border:1px solid rgba(117,198,160,0.16);
  background:rgba(255,255,255,0.04);
  box-shadow:0 8px 18px rgba(0,0,0,0.16),0 18px 36px rgba(0,0,0,0.12);
}
.lab-arena-meta-card span{
  color:rgba(240,245,243,0.68);
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.lab-arena-meta-card strong{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:20px;
  letter-spacing:-.03em;
}
.lab-arena-segmented{
  display:inline-grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  width:min(360px,100%);
  padding:8px;
  border-radius:18px;
  background:rgba(10,24,20,0.76);
  border:1px solid rgba(117,198,160,0.18);
  box-shadow:0 8px 18px rgba(0,0,0,0.18);
}
.lab-arena-segment{
  min-height:48px;
  border:none;
  border-radius:14px;
  background:transparent;
  color:var(--text-secondary);
  font:600 14px/1 'DM Sans',sans-serif;
  cursor:pointer;
  transition:transform .28s cubic-bezier(.25,.8,.25,1),background .28s cubic-bezier(.25,.8,.25,1),color .28s cubic-bezier(.25,.8,.25,1),box-shadow .28s cubic-bezier(.25,.8,.25,1);
}
.lab-arena-segment.is-active{
  background:linear-gradient(135deg,rgba(59,130,246,0.24),rgba(29,78,216,0.2));
  color:#DCEBFF;
  box-shadow:0 8px 18px rgba(7,27,60,0.24);
}
.lab-arena-grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(320px,.9fr);
  gap:24px;
}
.lab-arena-grid--play{
  grid-template-columns:minmax(0,1.55fr) minmax(290px,.82fr);
}
.lab-arena-panel{
  display:grid;
  gap:18px;
  padding:24px;
  border-radius:22px;
  border:1px solid rgba(117,198,160,0.14);
  background:linear-gradient(180deg,rgba(21,45,37,0.92),rgba(9,24,19,0.92));
  box-shadow:0 10px 22px rgba(0,0,0,0.2),0 24px 40px rgba(0,0,0,0.16);
}
.lab-arena-panel--secondary{
  align-content:start;
}
.lab-arena-panel__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.lab-arena-panel__head h2{
  margin-top:12px;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:clamp(1.35rem,2vw,1.85rem);
  letter-spacing:-.03em;
}
.lab-arena-status-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(117,198,160,0.2);
  background:rgba(255,255,255,0.04);
  color:var(--text-primary);
  font-size:12px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.lab-arena-status-chip.is-live{
  border-color:rgba(59,130,246,0.34);
  background:rgba(59,130,246,0.18);
  color:#DCEBFF;
}
.lab-arena-status-chip.is-sync{
  border-color:rgba(56,189,248,0.3);
  background:rgba(56,189,248,0.14);
  color:#D6F4FF;
}
.lab-arena-status-chip.is-finished{
  border-color:rgba(245,158,11,0.34);
  background:rgba(245,158,11,0.16);
  color:#FFE9B0;
}
.lab-arena-status-chip.is-waiting,
.lab-arena-status-chip.is-blank-count{
  border-color:rgba(255,184,0,0.28);
  background:rgba(255,184,0,0.12);
  color:#FFE59A;
}
.lab-arena-field{
  display:grid;
  gap:10px;
}
.lab-arena-field span{
  color:var(--text-primary);
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.lab-arena-field input,
.lab-arena-field textarea,
.lab-arena-field select,
.lab-arena-join-form input{
  width:100%;
  min-height:52px;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(117,198,160,0.16);
  background:rgba(8,20,17,0.82);
  color:var(--text-primary);
  font:500 15px/1.5 'DM Sans',sans-serif;
  outline:none;
  transition:border-color .28s cubic-bezier(.25,.8,.25,1),transform .28s cubic-bezier(.25,.8,.25,1),box-shadow .28s cubic-bezier(.25,.8,.25,1),background .28s cubic-bezier(.25,.8,.25,1);
}
.lab-arena-field textarea{
  min-height:180px;
  resize:vertical;
}
.lab-arena-field input:focus,
.lab-arena-field textarea:focus,
.lab-arena-field select:focus,
.lab-arena-join-form input:focus,
.lab-arena-blank-input:focus{
  border-color:rgba(59,130,246,0.45);
  box-shadow:0 0 0 4px rgba(59,130,246,0.14);
  transform:translateY(-1px);
}
.lab-arena-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.lab-arena-form-actions,
.lab-arena-empty__actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}
.lab-arena-btn{
  min-height:48px;
  padding:0 18px;
  border:none;
  border-radius:16px;
  font:700 14px/1 'DM Sans',sans-serif;
  cursor:pointer;
  transition:transform .28s cubic-bezier(.25,.8,.25,1),box-shadow .28s cubic-bezier(.25,.8,.25,1),background .28s cubic-bezier(.25,.8,.25,1),color .28s cubic-bezier(.25,.8,.25,1),border-color .28s cubic-bezier(.25,.8,.25,1);
}
.lab-arena-btn:hover{
  transform:translateY(-2px);
}
.lab-arena-btn--primary{
  background:linear-gradient(135deg,#4E9A82,#357C66);
  color:#F7FFFB;
  box-shadow:0 10px 18px rgba(10,46,36,0.22),0 18px 28px rgba(10,46,36,0.14);
}
.lab-arena-btn--ghost{
  border:1px solid rgba(117,198,160,0.18);
  background:rgba(255,255,255,0.04);
  color:var(--text-primary);
  box-shadow:0 8px 16px rgba(0,0,0,0.14);
}
.lab-arena-btn--danger{
  background:linear-gradient(135deg,#A94646,#7D2323);
  color:#FFF5F5;
  box-shadow:0 10px 18px rgba(58,9,9,0.24),0 18px 28px rgba(58,9,9,0.16);
}
.lab-arena-steps{
  display:grid;
  gap:14px;
  padding-left:22px;
  color:var(--text-secondary);
  line-height:1.7;
}
.lab-arena-empty,
.lab-arena-results-card,
.lab-arena-waiting-card{
  display:grid;
  gap:14px;
  place-items:start;
  padding:24px;
  border-radius:20px;
  border:1px solid rgba(117,198,160,0.14);
  background:rgba(255,255,255,0.03);
  box-shadow:0 8px 16px rgba(0,0,0,0.12),0 18px 26px rgba(0,0,0,0.1);
}
.lab-arena-empty{
  place-items:center;
  text-align:center;
}
.lab-arena-empty__icon{
  min-width:78px;
  min-height:78px;
  display:grid;
  place-items:center;
  border-radius:24px;
  border:1px solid rgba(59,130,246,0.28);
  background:linear-gradient(135deg,rgba(59,130,246,0.22),rgba(59,130,246,0.08));
  color:#DCEBFF;
  font:800 18px/1 'Plus Jakarta Sans',sans-serif;
  letter-spacing:.14em;
}
.lab-arena-empty h2,
.lab-arena-results-card h2{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:clamp(1.2rem,2vw,1.75rem);
  letter-spacing:-.03em;
}
.lab-arena-empty p,
.lab-arena-results-card p,
.lab-arena-waiting-card p{
  color:var(--text-secondary);
  line-height:1.7;
}
.lab-arena-empty-inline{
  padding:18px;
  border-radius:18px;
  border:1px dashed rgba(117,198,160,0.18);
  background:rgba(255,255,255,0.02);
  color:var(--text-secondary);
  text-align:center;
}
.lab-arena-join-form{
  display:grid;
  gap:16px;
}
.lab-arena-join-form input{
  text-align:center;
  font-size:32px;
  letter-spacing:.22em;
  font-family:'Plus Jakarta Sans',sans-serif;
}
.lab-arena-roster-row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(117,198,160,0.12);
  background:rgba(255,255,255,0.03);
}
.lab-arena-roster-row.is-self{
  border-color:rgba(59,130,246,0.28);
  background:rgba(59,130,246,0.12);
}
.lab-arena-roster-rank{
  min-width:38px;
  min-height:38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:rgba(255,255,255,0.05);
  font-weight:700;
  color:var(--text-primary);
}
.lab-arena-roster-copy{
  display:grid;
  gap:4px;
}
.lab-arena-roster-copy span,
.lab-arena-roster-metrics span{
  color:var(--text-secondary);
  font-size:13px;
}
.lab-arena-roster-metrics{
  display:grid;
  gap:4px;
  text-align:right;
}
.lab-arena-player-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}
.lab-arena-player-head h2{
  margin-top:12px;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:clamp(1.3rem,2vw,1.95rem);
  letter-spacing:-.03em;
}
.lab-arena-player-stats{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.lab-arena-session-shell{
  display:grid;
  gap:20px;
  min-height:calc(100vh - 48px);
  padding:64px 0 0;
  align-content:start;
}
.lab-arena-session-topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding:0 6px;
}
.lab-arena-topbar-copy{
  display:grid;
  gap:8px;
}
.lab-arena-session-mode{
  display:inline-flex;
  align-items:center;
  align-self:start;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(117,198,160,0.18);
  background:rgba(255,255,255,0.05);
  color:rgba(238,246,242,0.84);
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.lab-arena-topbar-copy strong{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:clamp(1.4rem,2vw,2rem);
  letter-spacing:-.04em;
}
.lab-arena-session-hud{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.lab-arena-hud-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(117,198,160,0.16);
  background:rgba(255,255,255,0.04);
  color:var(--text-primary);
  font-size:12px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.lab-arena-hud-chip.is-live{
  border-color:rgba(59,130,246,0.34);
  background:rgba(59,130,246,0.18);
  color:#DCEBFF;
}
.lab-arena-session-layout{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(280px,.78fr);
  gap:20px;
  min-height:0;
  align-items:start;
}
.lab-arena-session-main,
.lab-arena-session-side{
  min-width:0;
}
.lab-arena-session-main{
  display:grid;
  gap:16px;
  align-content:start;
}
.lab-arena-session-side-stack{
  display:grid;
  gap:16px;
  align-content:start;
}
.lab-arena-session-self,
.lab-arena-session-board,
.lab-arena-question-card,
.lab-arena-audio-strip{
  display:grid;
  gap:14px;
  padding:18px;
  border-radius:22px;
  border:1px solid rgba(117,198,160,0.14);
  background:linear-gradient(180deg,rgba(17,38,31,0.92),rgba(7,19,15,0.94));
  box-shadow:0 10px 22px rgba(0,0,0,0.2),0 24px 40px rgba(0,0,0,0.16);
}
.lab-arena-session-shell.is-quiz .lab-arena-question-card{
  background:
    radial-gradient(circle at top right,rgba(59,130,246,0.12),transparent 28%),
    linear-gradient(180deg,rgba(17,38,31,0.92),rgba(7,19,15,0.94));
}
.lab-arena-session-shell.is-listening .lab-arena-lyrics-card--play{
  background:
    radial-gradient(circle at top right,rgba(255,184,0,0.12),transparent 28%),
    linear-gradient(180deg,rgba(17,38,31,0.92),rgba(7,19,15,0.94));
}
.lab-arena-stage-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.lab-arena-stage-progress{
  display:grid;
  gap:10px;
  min-width:min(420px,100%);
}
.lab-arena-stage-progress strong{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:clamp(1.1rem,1.6vw,1.45rem);
  letter-spacing:-.03em;
}
.lab-arena-stage-progressbar{
  width:100%;
  height:10px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,0.06);
}
.lab-arena-stage-progressbar span{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#4E9A82,#3B82F6);
}
.lab-arena-stage-chipbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.lab-arena-stage-chip{
  display:grid;
  gap:4px;
  min-width:116px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(117,198,160,0.14);
  background:rgba(255,255,255,0.04);
}
.lab-arena-stage-chip span{
  color:rgba(240,245,243,0.68);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.lab-arena-stage-chip strong{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:20px;
  letter-spacing:-.04em;
}
.lab-arena-question-title{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:clamp(1.45rem,2.4vw,2.2rem);
  line-height:1.05;
  letter-spacing:-.04em;
}
.lab-arena-stimulus--compact{
  margin-top:2px;
}
.lab-arena-action-bar{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}
.lab-arena-player-complete-card{
  display:grid;
  gap:16px;
  align-content:start;
  padding:24px;
  border-radius:24px;
  border:1px solid rgba(96,180,148,0.18);
  background:
    radial-gradient(circle at top right,rgba(59,130,246,0.12),transparent 26%),
    radial-gradient(circle at left bottom,rgba(255,184,0,0.12),transparent 24%),
    linear-gradient(180deg,rgba(17,38,31,0.94),rgba(7,19,15,0.96));
  box-shadow:0 14px 28px rgba(0,0,0,0.22),0 28px 44px rgba(0,0,0,0.16);
}
.lab-arena-player-complete-card h2{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:clamp(1.45rem,2.4vw,2.2rem);
  line-height:1.05;
  letter-spacing:-.04em;
}
.lab-arena-player-complete-card p{
  color:var(--text-secondary);
  line-height:1.7;
}
.lab-arena-action-bar .lab-arena-btn{
  flex:1 1 220px;
}
.lab-arena-self-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.lab-arena-self-stat{
  display:grid;
  gap:4px;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(117,198,160,0.12);
}
.lab-arena-self-stat span{
  color:rgba(240,245,243,0.68);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.lab-arena-self-stat strong{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:20px;
  letter-spacing:-.04em;
}
.lab-arena-mini-board{
  display:grid;
  gap:10px;
}
.lab-arena-mini-board-row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(117,198,160,0.12);
  background:rgba(255,255,255,0.03);
}
.lab-arena-mini-board-row.is-leader{
  border-color:rgba(250,204,21,0.22);
  background:linear-gradient(180deg,rgba(250,204,21,0.08),rgba(255,255,255,0.03));
  box-shadow:0 10px 18px rgba(0,0,0,0.14);
}
.lab-arena-mini-board-row.is-active{
  box-shadow:0 0 0 1px rgba(56,189,248,0.16),0 10px 18px rgba(0,0,0,0.14);
}
.lab-arena-mini-board-row.is-self{
  border-color:rgba(59,130,246,0.28);
  background:rgba(59,130,246,0.12);
}
.lab-arena-mini-board-rank{
  min-width:36px;
  min-height:36px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:rgba(255,255,255,0.06);
  font-size:12px;
  font-weight:800;
}
.lab-arena-mini-board-copy{
  display:grid;
  gap:3px;
  min-width:0;
}
.lab-arena-mini-board-copy strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.lab-arena-mini-board-copy span{
  color:var(--text-secondary);
  font-size:12px;
}
.lab-arena-mini-board-state{
  color:var(--text-primary);
  opacity:.86;
}
.lab-arena-mini-board-score{
  font-size:13px;
  font-weight:700;
  color:var(--text-primary);
}
.lab-arena-mini-board-rank.is-podium{
  color:#f8fafc;
  border:1px solid rgba(255,255,255,0.12);
}
.lab-arena-mini-board-rank.is-podium-1{
  background:linear-gradient(180deg, rgba(250,204,21,0.28), rgba(245,158,11,0.18));
}
.lab-arena-mini-board-rank.is-podium-2{
  background:linear-gradient(180deg, rgba(148,163,184,0.28), rgba(100,116,139,0.18));
}
.lab-arena-mini-board-rank.is-podium-3{
  background:linear-gradient(180deg, rgba(125,211,252,0.22), rgba(59,130,246,0.16));
}
.lab-arena-stimulus,
.lab-arena-lyrics-card,
.lab-arena-host-audio-card{
  display:grid;
  gap:14px;
  padding:20px;
  border-radius:18px;
  border:1px solid rgba(117,198,160,0.12);
  background:rgba(255,255,255,0.03);
  box-shadow:0 8px 16px rgba(0,0,0,0.12);
}
.lab-arena-stimulus p{
  color:var(--text-secondary);
  line-height:1.8;
  white-space:pre-wrap;
}
.lab-arena-options{
  display:grid;
  gap:12px;
}
.lab-arena-toolbox{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
.lab-arena-toolbox__label{
  display:grid;
  gap:2px;
  padding:8px 12px;
  border-radius:16px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(117,198,160,0.16);
  color:var(--text-secondary);
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.lab-arena-toolbox__label strong{color:var(--text-primary);font-size:12px;letter-spacing:0;text-transform:none}
.lab-arena-toolbox-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  padding:0 14px;
  border:1px solid rgba(85,230,193,0.25);
  border-radius:16px;
  background:linear-gradient(135deg,rgba(85,230,193,0.2),rgba(59,130,246,0.12));
  color:var(--text-primary);
  font-family:inherit;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 10px 18px rgba(0,0,0,0.14);
  transition:transform .18s ease,opacity .18s ease,filter .18s ease;
}
.lab-arena-toolbox-btn--gold{border-color:rgba(247,212,106,0.28);background:linear-gradient(135deg,rgba(247,212,106,0.22),rgba(255,159,67,0.12))}
.lab-arena-toolbox-btn:not(:disabled):hover{transform:translateY(-2px);filter:saturate(1.08)}
.lab-arena-toolbox-btn:disabled{opacity:.48;cursor:not-allowed;box-shadow:none}
.lab-arena-toolbox-count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:rgba(0,0,0,0.3);color:#f7d46a;font-size:12px}
.lab-arena-option{
  display:flex;
  gap:14px;
  align-items:flex-start;
  min-height:64px;
  padding:16px 18px;
  border-radius:18px;
  border:1px solid rgba(117,198,160,0.12);
  background:rgba(255,255,255,0.03);
  color:var(--text-primary);
  font:600 15px/1.5 'DM Sans',sans-serif;
  text-align:left;
  cursor:pointer;
  transition:transform .28s cubic-bezier(.25,.8,.25,1),background .28s cubic-bezier(.25,.8,.25,1),box-shadow .28s cubic-bezier(.25,.8,.25,1),border-color .28s cubic-bezier(.25,.8,.25,1);
}
.lab-arena-option:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 18px rgba(0,0,0,0.14);
}
.lab-arena-option.is-selected{
  border-color:rgba(59,130,246,0.34);
  background:rgba(59,130,246,0.14);
}
.lab-arena-option.is-correct{
  border-color:rgba(34,197,94,0.34);
  background:rgba(34,197,94,0.14);
}
.lab-arena-option.is-wrong{
  border-color:rgba(239,68,68,0.34);
  background:rgba(239,68,68,0.14);
}
.lab-arena-option.is-tool-hidden{display:none !important}
.lab-arena-option:disabled{
  cursor:default;
  opacity:1;
}
.lab-arena-option-key{
  min-width:36px;
  min-height:36px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:rgba(255,255,255,0.06);
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800;
}
.lab-arena-feedback{
  display:grid;
  gap:6px;
  padding:16px 18px;
  border-radius:18px;
  border:1px solid rgba(117,198,160,0.12);
}
.lab-arena-feedback.is-correct{
  border-color:rgba(34,197,94,0.32);
  background:rgba(34,197,94,0.12);
}
.lab-arena-feedback.is-wrong{
  border-color:rgba(239,68,68,0.3);
  background:rgba(239,68,68,0.12);
}
.lab-arena-question-card.is-skip-flash{animation:skipTicketPulse .9s cubic-bezier(.2,.8,.2,1)}
.lab-arena-audio-note{
  color:var(--text-secondary);
  font-size:14px;
}
.lab-arena-audio-strip{
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
}
.lab-arena-audio{
  width:100%;
  min-height:56px;
}
.lab-arena-lyrics{
  font-size:18px;
  line-height:2.1;
  color:var(--text-primary);
  word-break:break-word;
}
.lab-arena-lyrics-word,
.lab-arena-lyrics-punct{
  display:inline;
}
.lab-arena-blank-input{
  width:min(128px,32vw);
  min-height:44px;
  margin:0 4px 0 0;
  padding:6px 10px;
  border-radius:12px;
  border:1px dashed rgba(255,184,0,0.34);
  background:rgba(255,184,0,0.08);
  color:var(--text-primary);
  font:700 16px/1 'DM Sans',sans-serif;
  text-align:center;
}
.lab-arena-blank-input.is-correct{
  border-style:solid;
  border-color:rgba(34,197,94,0.36);
  background:rgba(34,197,94,0.14);
}
.lab-arena-blank-input.is-wrong{
  border-style:solid;
  border-color:rgba(239,68,68,0.28);
  background:rgba(239,68,68,0.1);
}
.lab-arena-token-editor{
  padding:18px;
  border-radius:18px;
  border:1px solid rgba(117,198,160,0.12);
  background:rgba(255,255,255,0.03);
  line-height:2.1;
  word-break:break-word;
}
.lab-arena-token{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  margin:2px 4px 2px 0;
  padding:0 12px;
  border:none;
  border-radius:12px;
  background:rgba(255,255,255,0.05);
  color:var(--text-primary);
  font:700 14px/1 'DM Sans',sans-serif;
  cursor:pointer;
  transition:transform .28s cubic-bezier(.25,.8,.25,1),background .28s cubic-bezier(.25,.8,.25,1),box-shadow .28s cubic-bezier(.25,.8,.25,1);
}
.lab-arena-token:hover{
  transform:translateY(-1px);
}
.lab-arena-token.is-blank{
  background:rgba(255,184,0,0.16);
  color:#FFE59A;
  box-shadow:0 8px 14px rgba(53,39,6,0.12);
}
.lab-arena-token--punct{
  display:inline;
  padding:0;
  background:none;
  color:var(--text-primary);
}
.lab-arena-room-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  padding:24px;
  border-radius:22px;
  border:1px solid rgba(96,180,148,0.18);
  background:radial-gradient(circle at top right,rgba(59,130,246,0.12),transparent 28%),linear-gradient(140deg,rgba(18,45,38,0.96),rgba(8,23,18,0.94));
  box-shadow:0 12px 24px rgba(0,0,0,0.18),0 28px 44px rgba(0,0,0,0.14);
}
.lab-arena-room-banner h2{
  margin-top:12px;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:clamp(1.5rem,2.4vw,2.4rem);
  letter-spacing:-.04em;
}
.lab-arena-pin-stack{
  display:grid;
  gap:12px;
  justify-items:end;
}
.lab-arena-pin-display{
  min-width:180px;
  min-height:92px;
  display:grid;
  place-items:center;
  padding:12px 20px;
  border-radius:22px;
  border:1px solid rgba(255,184,0,0.24);
  background:linear-gradient(135deg,rgba(255,184,0,0.18),rgba(255,184,0,0.06));
  color:#FFE59A;
  font:800 38px/1 'Plus Jakarta Sans',sans-serif;
  letter-spacing:.18em;
}
.lab-arena-host-toolbar,
.lab-arena-meta-stack{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.lab-arena-meta-stack--host .lab-arena-meta-card{
  min-width:140px;
  min-height:78px;
}
.lab-arena-participant-card{
  display:grid;
  gap:14px;
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(117,198,160,0.12);
  background:rgba(255,255,255,0.03);
}
.lab-arena-participant-card.is-leader{
  border-color:rgba(250,204,21,0.26);
  background:
    radial-gradient(circle at top right,rgba(250,204,21,0.12),transparent 28%),
    linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.03));
  box-shadow:0 10px 20px rgba(0,0,0,0.16),0 24px 40px rgba(0,0,0,0.12);
}
.lab-arena-participant-card.is-active{
  box-shadow:0 0 0 1px rgba(56,189,248,0.14),0 10px 20px rgba(0,0,0,0.16);
}
.lab-arena-participant-card:first-child{
  border-color:rgba(59,130,246,0.28);
  background:linear-gradient(180deg,rgba(59,130,246,0.14),rgba(255,255,255,0.03));
}
.lab-arena-participant-card.is-finished{
  border-color:rgba(245,158,11,0.28);
}
.lab-arena-participant-note{
  color:var(--text-secondary);
  font-size:12px;
  line-height:1.6;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(117,198,160,0.12);
  background:rgba(255,255,255,0.02);
}
.lab-arena-participant-head,
.lab-arena-participant-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.lab-arena-participant-rank{
  margin-bottom:6px;
  color:var(--text-secondary);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.lab-arena-participant-meta{
  color:var(--text-secondary);
  font-size:13px;
}
.lab-arena-detail-track{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(72px,1fr));
  gap:8px;
}
.lab-arena-detail-chip{
  display:grid;
  gap:4px;
  padding:10px 10px 9px;
  border-radius:14px;
  border:1px solid rgba(117,198,160,0.12);
  background:rgba(255,255,255,0.03);
  text-align:center;
}
.lab-arena-detail-chip strong{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:14px;
  letter-spacing:-.02em;
}
.lab-arena-detail-chip span{
  color:var(--text-secondary);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.lab-arena-detail-chip.is-pending{
  border-color:rgba(117,198,160,0.12);
  background:rgba(255,255,255,0.03);
}
.lab-arena-detail-chip.is-answered{
  border-color:rgba(117,198,160,0.22);
  background:rgba(117,198,160,0.1);
}
.lab-arena-detail-chip.is-wrong{
  border-color:rgba(245,158,11,0.28);
  background:rgba(245,158,11,0.12);
}
.lab-arena-detail-chip.is-correct{
  border-color:rgba(59,130,246,0.32);
  background:rgba(59,130,246,0.14);
}
.lab-arena-progress-bar{
  width:100%;
  height:10px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,0.06);
}
.lab-arena-progress-fill{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#54B896,#3B82F6);
}
.lab-arena-results-card{
  justify-items:center;
  text-align:center;
}
.lab-arena-results-score{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:clamp(3rem,6vw,4.8rem);
  line-height:.92;
  letter-spacing:-.06em;
}
.lab-arena-results-meta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
  color:var(--text-secondary);
  font-size:14px;
}
.lab-arena-waiting .lab-arena-pin-display{
  min-width:220px;
}
.lab-arena-note-inline{
  font-size:12px;
}
.lab-arena-note{
  padding:14px 16px;
  border-radius:16px;
  border:1px dashed rgba(117,198,160,0.16);
  background:rgba(255,255,255,0.03);
}
@media (max-width:1024px){
  .lab-arena-page-shell--immersive{
    padding-left:12px;
    padding-right:12px;
  }
  .lab-arena-hero,
  .lab-arena-grid,
  .lab-arena-grid--play{
    grid-template-columns:minmax(0,1fr);
  }
  .lab-arena-session-layout{
    grid-template-columns:minmax(0,1fr);
  }
  .lab-arena-pin-stack{
    justify-items:start;
  }
}
@media (max-width:768px){
  .lab-arena-floating-back{
    top:calc(env(safe-area-inset-top, 0px) + 12px);
    left:12px;
  }
  .lab-arena-shell{
    gap:18px;
    padding-bottom:24px;
  }
  .lab-arena-session-shell{
    min-height:calc(100vh - 16px);
    padding-top:56px;
    gap:16px;
  }
  .lab-arena-session-topbar{
    padding:0 2px;
  }
  .lab-arena-hero,
  .lab-arena-panel,
  .lab-arena-room-banner{
    padding:20px;
    border-radius:20px;
  }
  .lab-arena-form-grid{
    grid-template-columns:minmax(0,1fr);
  }
  .lab-arena-player-head,
  .lab-arena-panel__head,
  .lab-arena-room-banner,
  .lab-arena-participant-head,
  .lab-arena-participant-meta{
    gap:14px;
  }
  .lab-arena-stage-head,
  .lab-arena-audio-strip{
    grid-template-columns:minmax(0,1fr);
    display:grid;
  }
  .lab-arena-stage-chipbar,
  .lab-arena-session-hud{
    justify-content:flex-start;
  }
  .lab-arena-self-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }
  .lab-arena-join-form input{
    font-size:26px;
    letter-spacing:.16em;
  }
  .lab-arena-pin-display{
    min-width:100%;
    font-size:30px;
    letter-spacing:.12em;
  }
  .lab-arena-roster-row{
    grid-template-columns:auto minmax(0,1fr);
  }
  .lab-arena-roster-metrics{
    grid-column:1 / -1;
    text-align:left;
  }
  .lab-arena-btn{
    flex:1 1 180px;
  }
  .lab-arena-action-bar .lab-arena-btn{
    flex:1 1 100%;
  }
  .lab-arena-mini-board-row{
    grid-template-columns:auto minmax(0,1fr);
  }
  .lab-arena-mini-board-score{
    grid-column:1 / -1;
    padding-left:46px;
  }
  .lab-arena-question-title{
    font-size:clamp(1.25rem,7vw,1.65rem);
  }
  .lab-arena-lyrics{
    font-size:16px;
    line-height:2;
  }
  .lab-arena-blank-input{
    width:min(116px,38vw);
  }
}

/* SECTION 1: CSS FOR MULTIPLAYER MINI-GAMES */

:root {
  --primary-green: #2ecc71;
  --gold: #f1c40f;
  --danger: #ef4444;
  --dark-depth: #0a0e17;
  --card-glass: rgba(30, 41, 59, 0.7);
  --f-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --bouncy: cubic-bezier(0.34, 1.56, 0.64, 1);
  --sharp: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

body.immersive-duel-active {
  margin: 0;
  padding: 0;
  background-color: var(--dark-depth);
  font-family: var(--f-sans);
  color: #fff;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, #1e293b 0%, #0a0e17 100%);
}

.game-shell {
  display: flex;
  height: 100vh;
  width: 100vw;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.side-nav {
  width: 80px;
  background: rgba(0, 0, 0, 0.4);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
  gap: 20px;
  z-index: 100;
}

.nav-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.3s var(--bouncy);
}

.nav-icon.active {
  background: var(--primary-green);
  border-color: #fff;
  box-shadow: 0 0 15px var(--primary-green);
}

.nav-icon svg {
  stroke: #fff;
}

.main-arena {
  flex: 1;
  padding: 30px;
  display: flex;
  flex-direction: column;
  position: relative;
  background: transparent;
  overflow: hidden;
  box-sizing: border-box;
}

.live-feed {
  width: 280px;
  background: rgba(0, 0, 0, 0.2);
  border-left: 1px solid rgba(255, 255, 255, 0.05);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  z-index: 100;
  box-sizing: border-box;
}

.feed-item {
  font-size: 11px;
  padding: 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid var(--primary-green);
  animation: slideIn 0.3s ease-out;
  color: #fff;
}

@keyframes slideIn {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.player-card {
  display: flex;
  align-items: center;
  gap: 15px;
  background: var(--card-glass);
  padding: 10px 20px;
  border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

/* Duel Container Overrides */
.immersive-duel-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: transparent;
  width: 100%;
}

/* Tug-of-War */
.tow-target {
  font-size: 72px;
  font-weight: 900;
  letter-spacing: -2px;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
  margin-bottom: 2rem;
  text-align: center;
}

.tow-line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-50%);
  transition: transform 0.3s var(--sharp);
  z-index: 10;
}

.tow-marker {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 80px;
  background: var(--gold);
  border-radius: 6px;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 25px var(--gold);
  z-index: 20;
  will-change: transform;
  transition: transform 0.3s var(--sharp);
}

.tow-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

.tow-btn, .game-btn {
  background: var(--card-glass);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 20px;
  border-radius: 16px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  color: white;
  min-width: 44px;
  min-height: 44px;
  transition: all 0.2s var(--bouncy);
  text-align: center;
  backdrop-filter: blur(5px);
}

.tow-btn:hover, .game-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--primary-green);
  transform: translateY(-2px);
}

.status-bar {
  position: absolute;
  bottom: 20px;
  left: 30px;
  right: 30px;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  opacity: 0.6;
  color: #fff;
}

.xp-toast {
  background: var(--gold);
  color: #000;
  padding: 8px 20px;
  border-radius: 99px;
  font-weight: 800;
  font-size: 14px;
  box-shadow: 0 10px 20px rgba(241, 196, 15, 0.3);
  animation: toastPop 0.3s var(--bouncy);
}

@keyframes toastPop {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}

.screen-shake {
  animation: shake 0.4s var(--sharp);
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  75% { transform: translateX(10px); }
}

.grammar-sentence {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  color: #fff;
}

.grammar-word {
  cursor: pointer;
  transition: color 0.2s;
}

.grammar-word:hover {
  color: var(--primary-green);
}

.cloze-hole {
  display: inline-block;
  min-width: 60px;
  height: 32px;
  border-bottom: 2px solid var(--gold);
  margin: 0 8px;
  vertical-align: middle;
}

.falling-word {
  position: absolute;
  background: var(--primary-green);
  color: #fff;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: bold;
  cursor: grab;
  user-select: none;
  font-size: 1.2rem;
  box-shadow: 0 4px 10px rgba(46, 204, 113, 0.4);
}

.falling-word:active {
  cursor: grabbing;
}

.timer-container {
  width: 80%;
  height: 10px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 20px;
}

.timer-bar {
  height: 100%;
  background: var(--gold);
  width: 100%;
}

.chain-input {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  padding: 15px 20px;
  border-radius: 12px;
  font-size: 18px;
  outline: none;
  width: 80%;
  text-align: center;
}

.chain-input:focus {
  border-color: var(--primary-green);
}

.battle-card {
  padding: 24px;
  background: rgba(23, 23, 23, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s;
  color: #fff;
}

.battle-card:hover {
  border-color: var(--primary-green);
  background: rgba(30, 30, 30, 0.9);
}

.battle-card h3 {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 4px;
  transition: color 0.2s;
}

.battle-card:hover h3 {
  color: var(--primary-green);
}

.battle-card p {
  font-size: 0.875rem;
  color: #9ca3af;
  margin: 0;
}

/* MOBILE RESPONSIVENESS FOR IMMERSIVE UI */
@media (max-width: 768px) {
  .game-shell {
    flex-direction: column;
    height: 100dvh;
  }
  .side-nav {
    width: 100%;
    height: auto;
    flex-direction: row;
    padding: 10px;
    justify-content: space-around;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .main-arena {
    padding: 15px;
    flex: 1;
  }
  .live-feed {
    width: 100%;
    flex: 1.5; /* Give social panel slightly more space when active */
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(10, 14, 23, 0.5);
  }
  
  /* Fix modal grids on mobile */
  .duel-mode-grid {
    grid-template-columns: 1fr !important;
    gap: 10px;
    max-height: 50vh;
    overflow-y: auto;
  }
  .modal {
    padding: 20px;
    width: 90%;
  }

  /* Game Specific Mobile Fixes */
  .tow-target {
    font-size: 40px !important;
  }
  .tow-options {
    grid-template-columns: 1fr !important;
  }
  .grammar-sentence {
    font-size: 1.5rem !important;
  }
  .grammar-modal {
    margin-top: 10px !important;
    padding: 15px !important;
  }
  .chain-input {
    width: 100% !important;
  }
  .status-bar {
    flex-direction: column;
    align-items: center;
    gap: 5px;
    bottom: 10px !important;
  }
}

/* Fix block override from JS so it remains flex */
#duelSocialPanel[style*="display: block"] {
  display: flex !important;
}

/* IMMERSIVE UI PREMIUM POLISH */
.immersive-duel-active .duel-panel {
  background: rgba(30, 41, 59, 0.4) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-top: 1px solid rgba(46, 204, 113, 0.4) !important; /* var(--primary-green) */
  border-radius: 20px !important;
  padding: 30px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  transition: transform 0.3s var(--bouncy), box-shadow 0.3s ease !important;
}

.immersive-duel-active .duel-panel:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.immersive-duel-active .duel-topline h3 {
  font-size: 2rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  letter-spacing: -0.5px !important;
  text-shadow: 0 2px 10px rgba(255, 255, 255, 0.2) !important;
  margin-bottom: 8px !important;
}

.immersive-duel-active .duel-topline p {
  color: #94a3b8 !important; /* Slate 400 */
  font-size: 1.05rem !important;
  line-height: 1.5 !important;
}

.immersive-duel-active .duel-user-card {
  background: rgba(15, 23, 42, 0.6) !important; /* Darker slate */
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 16px !important;
  padding: 16px 20px !important;
  margin-bottom: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
  transition: all 0.3s var(--bouncy) !important;
  backdrop-filter: blur(10px) !important;
}

.immersive-duel-active .duel-user-card:hover {
  background: rgba(30, 41, 59, 0.8) !important;
  border-color: rgba(46, 204, 113, 0.3) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important;
}

.immersive-duel-active .duel-user-name {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin-bottom: 4px !important;
}

.immersive-duel-active .duel-user-meta {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

.immersive-duel-active .duel-user-meta span {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  border-radius: 99px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: #cbd5e1 !important; /* Slate 300 */
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.immersive-duel-active .duel-pill-online {
  background: rgba(46, 204, 113, 0.15) !important;
  color: #4ade80 !important; /* Brighter green */
  border-color: rgba(46, 204, 113, 0.3) !important;
  box-shadow: 0 0 10px rgba(46, 204, 113, 0.2) !important;
}

.immersive-duel-active .duel-pill-offline {
  background: rgba(239, 68, 68, 0.1) !important;
  color: #f87171 !important; /* Red 400 */
  border-color: rgba(239, 68, 68, 0.2) !important;
}

/* Action Buttons */
.immersive-duel-active .duel-action-btn {
  padding: 8px 20px !important;
  border-radius: 99px !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  transition: all 0.2s var(--bouncy) !important;
  border: none !important;
}

.immersive-duel-active .duel-action-btn.primary {
  background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%) !important;
  color: #000 !important;
  box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3) !important;
}

.immersive-duel-active .duel-action-btn.primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(46, 204, 113, 0.5) !important;
  filter: brightness(1.1) !important;
}

.immersive-duel-active .duel-action-btn.secondary {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.immersive-duel-active .duel-action-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  transform: translateY(-2px) !important;
}

/* Modal Updates */
.immersive-duel-active .modal {
  background: rgba(15, 23, 42, 0.95) !important;
  backdrop-filter: blur(25px) !important;
  -webkit-backdrop-filter: blur(25px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-top: 1px solid var(--primary-green) !important;
  border-radius: 24px !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}

.immersive-duel-active .duel-mode-card {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 16px !important;
  padding: 20px !important;
  transition: all 0.2s var(--bouncy) !important;
  text-align: left !important;
  cursor: pointer !important;
}

.immersive-duel-active .duel-mode-card h4 {
  font-size: 1.1rem !important;
  color: #fff !important;
  margin: 0 0 8px !important;
  font-weight: 700 !important;
}

.immersive-duel-active .duel-mode-card p {
  font-size: 0.85rem !important;
  color: #94a3b8 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

.immersive-duel-active .duel-mode-card:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  transform: translateY(-2px) !important;
}

.immersive-duel-active .duel-mode-card.active {
  background: rgba(46, 204, 113, 0.1) !important;
  border-color: var(--primary-green) !important;
  box-shadow: 0 0 20px rgba(46, 204, 113, 0.15) !important;
}

.immersive-duel-active .duel-mode-card.active h4 {
  color: var(--primary-green) !important;
}

.immersive-duel-active .duel-tabs {
  background: rgba(0, 0, 0, 0.3) !important;
  padding: 4px !important;
  border-radius: 99px !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.immersive-duel-active .duel-tab-btn {
  border-radius: 99px !important;
  padding: 8px 16px !important;
  color: #94a3b8 !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  transition: all 0.2s ease !important;
}

.immersive-duel-active .duel-tab-btn.active {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.immersive-duel-active .duel-tab-btn:hover:not(.active) {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Discord-style leaderboard nameplates */
.leaderboard-avatar-plain {
  --leaderboard-avatar-size: 40px;
  width: var(--leaderboard-avatar-size);
  height: var(--leaderboard-avatar-size);
  min-width: var(--leaderboard-avatar-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  overflow: hidden;
  font-size: calc(var(--leaderboard-avatar-size) * 0.5);
  font-weight: 800;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}

.leaderboard-avatar-plain > svg,
.leaderboard-avatar-plain > img,
.leaderboard-avatar-plain > span {
  width: 100% !important;
  height: 100% !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.player-info-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border-radius: 8px;
  transition: all 0.3s ease;
  background: transparent;
  width: 100%;
  min-width: 250px;
  max-width: 100%;
  box-sizing: border-box;
}

.leaderboard-table td:nth-child(2) {
  width: 40%;
}

.player-info-wrapper[class*="np_"] {
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0,0,0,0.5);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255,255,255,0.18);
}

.player-info-wrapper[class*="np_"]:hover {
  transform: translateY(-1px);
}

.player-info-wrapper[class*="np_"] .username-text,
.player-info-wrapper[class*="np_"] .class-text {
  color: #ffffff !important;
}

.np_sakura { background: linear-gradient(90deg, #ff758c 0%, #ff7eb3 100%); }
.np_cyber  { background: linear-gradient(90deg, #0f2027, #203a43, #2c5364); border-left: 4px solid #00c6ff; }
.np_gold   { background: linear-gradient(90deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c); }
.np_toxic  { background: linear-gradient(90deg, #11998e 0%, #38ef7d 100%); }
.np_sunset { background: linear-gradient(90deg, #fc4a1a 0%, #f7b733 100%); }
.np_galaxy { background: linear-gradient(90deg, #30142b 0%, #2772a1 100%); }
.np_blood  { background: linear-gradient(90deg, #870000 0%, #190a05 100%); border-right: 4px solid #ff0000; }
.np_abyss  { background: linear-gradient(90deg, #000000 0%, #434343 100%); }
.np_ocean  { background: linear-gradient(90deg, #021B79 0%, #0575E6 100%); }

.np_holo {
  background: linear-gradient(90deg, #ff9ff3, #feca57, #ff6b6b, #48dbfb, #1dd1a1);
  background-size: 300% 300%;
  animation: holoGlow 4s ease infinite;
}

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

/* Theme picker and adaptive surfaces */
.theme-picker-overlay {
  z-index: 1700;
}

.theme-picker-modal {
  width: min(720px, 94vw);
  max-width: 720px;
  text-align: left;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border-color));
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--primary-light) 18%, transparent), transparent 38%),
    linear-gradient(180deg, color-mix(in srgb, var(--card-bg) 94%, #ffffff 6%), var(--card-bg));
  box-shadow: 0 30px 80px rgba(0,0,0,.42), 0 0 44px color-mix(in srgb, var(--primary) 16%, transparent);
}

.theme-picker-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.theme-picker-kicker,
.theme-picker-section-title {
  margin: 0 0 6px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.theme-picker-head h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(22px, 3vw, 30px);
}

.theme-picker-subtitle {
  margin: 0 0 20px !important;
  color: var(--text-secondary) !important;
  line-height: 1.65;
}

.theme-picker-section {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.theme-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.theme-picker-option {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border-color));
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--primary-light) 16%, transparent), transparent 45%),
    color-mix(in srgb, var(--background-secondary) 88%, var(--card-bg) 12%);
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.theme-picker-option:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary) 58%, var(--border-color));
  box-shadow: 0 14px 28px rgba(0,0,0,.24), 0 0 24px color-mix(in srgb, var(--primary) 14%, transparent);
}

.theme-picker-option.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 42%, transparent), 0 18px 34px rgba(0,0,0,.24);
}

.theme-picker-option.locked {
  opacity: .58;
}

.theme-picker-swatch {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #fff;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 20px rgba(0,0,0,.22);
  background: linear-gradient(135deg, var(--primary-dark), var(--primary-light));
}

.theme-picker-swatch--forest { background: linear-gradient(135deg, #1E5A45, #3D9A7A); }
.theme-picker-swatch--galaxy { background: linear-gradient(135deg, #34237D, #8B7DFF); }
.theme-picker-swatch--cosmic { background: linear-gradient(135deg, #0E5C63, #43C6C1); }
.theme-picker-swatch--bnw { background: linear-gradient(135deg, #050505, #F5F5F5); color: #111; }
.theme-picker-swatch--theme_neon { background: linear-gradient(135deg, #061311, #00CEC9); }
.theme-picker-swatch--theme_gold { background: linear-gradient(135deg, #5B3F0B, #FEEAA8); color: #261C0A; }
.theme-picker-swatch--theme_sakura { background: linear-gradient(135deg, #C44569, #FFB8D1); }
.theme-picker-swatch--theme_abyss { background: linear-gradient(135deg, #030712, #48DBFB); }
.theme-picker-swatch--theme_midnight { background: linear-gradient(135deg, #0E0A1E, #A29BFE); }
.theme-picker-swatch--theme_emerald { background: linear-gradient(135deg, #065F46, #55E6C1); }
.theme-picker-swatch--theme_ruby { background: linear-gradient(135deg, #7F1D1D, #FB7185); }

.theme-picker-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.theme-picker-copy strong {
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.2;
}

.theme-picker-copy small {
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.35;
}

.theme-picker-state {
  padding: 6px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary-light);
  border: 1px solid color-mix(in srgb, var(--primary) 26%, transparent);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.theme-picker-option.locked .theme-picker-state {
  color: var(--text-secondary);
  border-color: var(--border-color);
  background: rgba(255,255,255,.04);
}

/* WOTD dashboard banner: keep it roomy instead of shrinking into a thin strip. */
#wotdBanner.theme-banner-wotd {
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  margin: 18px 0 22px;
  padding: 12px 20px;
  box-sizing: border-box;
  cursor: pointer;
  line-height: 1.35;
}

#wotdBanner .dashboard-wotd-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}

#wotdBanner > span:nth-child(2) {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#wotdBanner strong {
  color: #fff;
  font-weight: 800;
}

#wotdBanner .dashboard-wotd-arrow {
  flex: 0 0 auto;
  opacity: 0.9;
  font-weight: 800;
}

@media (max-width: 560px) {
  .theme-picker-modal {
    width: calc(100vw - 18px);
    padding: 18px;
  }
  .theme-picker-grid {
    grid-template-columns: 1fr;
  }
  #wotdBanner.theme-banner-wotd {
    min-height: 46px;
    margin: 14px 0 18px;
    padding: 12px 14px;
  }
  #wotdBanner > span:nth-child(2) {
    white-space: normal;
  }
}

/* Dashboard premium theme particles */
.card-vfx-target {
  position: relative;
  overflow: hidden;
  z-index: 1;
  isolation: isolate;
  contain: paint;
  background: color-mix(in srgb, var(--card-bg) 86%, #020617 14%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.card-vfx-target > *:not(.tsparticles-container) {
  position: relative;
  z-index: 10;
}

.tsparticles-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
  will-change: transform, opacity;
  transform: translateZ(0);
  contain: strict;
}

.tsparticles-container canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  border-radius: inherit;
  transform: translateZ(0);
  will-change: transform, opacity;
}

body.guardian-safe-mode .tsparticles-container,
html[data-guardian-card-vfx="disabled"] .tsparticles-container {
  display: none !important;
}

body.guardian-safe-mode .card-vfx-target,
body.guardian-safe-mode .hero-card,
body.guardian-safe-mode .daily-goal-card,
body.guardian-safe-mode .modern-practice-shell,
body.guardian-safe-mode .journey-map-shell {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: none !important;
  transition: opacity .15s ease, transform .15s ease !important;
}

body.guardian-safe-mode *,
body.guardian-safe-mode *::before,
body.guardian-safe-mode *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
}

/* Geometric-only app background */
.geo-background,
.geo-background.geometric,
.geo-background.forest,
.geo-background.galaxy,
.geo-background.cosmic,
.geo-background.bnw,
[data-theme] .geo-background {
  background:
    radial-gradient(ellipse 70% 52% at 12% 8%, color-mix(in srgb, var(--primary) 20%, transparent), transparent 54%),
    radial-gradient(ellipse 56% 48% at 88% 88%, color-mix(in srgb, var(--primary-dark) 18%, transparent), transparent 58%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 18px),
    linear-gradient(160deg, var(--background) 0%, color-mix(in srgb, var(--background-secondary) 55%, #000 45%) 52%, var(--background) 100%) !important;
}

body.bg-aurora,
body.bg-particles,
body.bg-minimal {
  background-color: var(--background);
}

body.bg-aurora .tech-bg::after,
body.bg-particles .tech-bg::before {
  content: none !important;
  display: none !important;
}

body.bg-aurora .tech-bg-grid,
body.bg-particles .tech-bg-grid,
body.bg-minimal .tech-bg-grid,
.tech-bg-grid {
  opacity: 1 !important;
  background-image:
    linear-gradient(var(--tech-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-grid) 1px, transparent 1px) !important;
  background-size: 60px 60px !important;
  background-position: 0 0 !important;
  animation: techGridMove 50s linear infinite !important;
}

body.bg-aurora .tech-bg-glow,
body.bg-particles .tech-bg-glow,
body.bg-minimal .tech-bg-glow,
body.bg-aurora .tech-bg-ring,
body.bg-particles .tech-bg-ring,
body.bg-minimal .tech-bg-ring,
.tech-bg-glow,
.tech-bg-ring {
  display: none !important;
}

#bgPickerBtn,
#bgPickerPanel {
  display: none !important;
}

/* Premium adaptive bottom navigation */
.englishlab-dock {
  --dock-accent: var(--primary-light, #55e6c1);
  --dock-accent-strong: var(--primary, #00cec9);
  --dock-accent-soft: var(--primary-lighter, rgba(85, 230, 193, 0.18));
  --dock-glass: rgba(15, 15, 15, 0.76);
  --dock-glass-strong: rgba(8, 12, 14, 0.88);
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 1200;
  width: auto;
  min-width: min(640px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  align-items: center;
  justify-content: center;
  grid-template-columns: none;
  gap: 4px;
  padding: 8px;
  border-radius: 32px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--dock-accent) 18%, transparent), transparent 34%),
    linear-gradient(180deg, rgba(22, 24, 25, 0.82), var(--dock-glass-strong));
  box-shadow:
    0 26px 56px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(26px) saturate(145%);
  -webkit-backdrop-filter: blur(26px) saturate(145%);
  overflow: hidden;
  isolation: isolate;
}

body.journey-embed-active .englishlab-dock {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  height: auto !important;
  min-height: 0 !important;
}

.englishlab-dock::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 30px;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.035);
  z-index: 3;
}

.englishlab-dock__environment,
.englishlab-dock__pill {
  pointer-events: none;
}

.englishlab-dock__environment {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  z-index: 0;
  color: var(--dock-accent-strong);
}

.englishlab-dock__noise {
  position: absolute;
  inset: 0;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.68' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

.englishlab-dock__ambient {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 999px;
  opacity: 0.22;
  filter: blur(34px);
  background: var(--dock-accent-soft);
}

.englishlab-dock__ambient--one {
  left: -70px;
  bottom: -100px;
}

.englishlab-dock__ambient--two {
  right: -78px;
  top: -104px;
  background: color-mix(in srgb, var(--dock-accent) 24%, transparent);
}

.englishlab-dock__wave,
.englishlab-dock__petal,
.englishlab-dock__bubble,
.englishlab-dock__spark {
  display: none;
  position: absolute;
}

.englishlab-dock__pill {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 0;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--dock-accent) 34%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--dock-accent) 22%, transparent), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.035);
  box-shadow:
    0 0 26px color-mix(in srgb, var(--dock-accent) 26%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition:
    transform 0.38s cubic-bezier(.2, .85, .18, 1),
    width 0.38s cubic-bezier(.2, .85, .18, 1),
    height 0.38s cubic-bezier(.2, .85, .18, 1),
    opacity 0.2s ease;
}

.englishlab-dock__item {
  position: relative;
  z-index: 2;
  flex: 0 0 76px;
  min-width: 64px;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 3px;
  padding: 8px 7px;
  border: 1px solid transparent !important;
  border-radius: 22px;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.44);
  cursor: pointer;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: none;
  outline: none;
  transition:
    color 0.24s ease,
    transform 0.24s ease,
    text-shadow 0.24s ease;
}

.englishlab-dock__item > span:not(.englishlab-dock__emoji) {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.72;
  transform: translateY(1px);
  transition: opacity 0.24s ease, transform 0.24s ease;
}

.englishlab-dock__emoji {
  width: 30px !important;
  height: 30px !important;
  display: grid;
  place-items: center;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: currentColor !important;
  transition: transform 0.28s cubic-bezier(.2, .85, .18, 1), color 0.24s ease;
}

.englishlab-dock__emoji svg,
.englishlab-dock__emoji i {
  width: 24px !important;
  height: 24px !important;
  stroke-width: 2.25 !important;
}

.englishlab-dock__item.is-active {
  color: var(--dock-accent);
  text-shadow: 0 0 18px color-mix(in srgb, var(--dock-accent) 42%, transparent);
}

.englishlab-dock__item.is-active > span:not(.englishlab-dock__emoji) {
  opacity: 1;
  transform: translateY(0);
}

.englishlab-dock__item.is-active .englishlab-dock__emoji {
  transform: translateY(-1px) scale(1.08);
}

.englishlab-dock__item:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--dock-accent) 62%, transparent);
  outline-offset: 2px;
}

@media (hover: hover) {
  .englishlab-dock__item:hover {
    transform: translateY(-2px);
    color: color-mix(in srgb, var(--dock-accent) 78%, white 22%);
  }
}

html[data-profile-theme="theme_sakura"] .englishlab-dock {
  --dock-accent: #ff9dbb;
  --dock-accent-strong: #ff5f91;
  --dock-accent-soft: rgba(255, 157, 187, 0.18);
}

html[data-profile-theme="theme_sakura"] .englishlab-dock__petal {
  display: block;
  top: -12px;
  width: 10px;
  height: 6px;
  border-radius: 999px 0 999px 0;
  background: rgba(255, 183, 197, 0.52);
  transform-origin: center;
  animation: dockPetalFall 7s linear infinite;
  animation-delay: var(--delay, 0s);
}

html[data-profile-theme="theme_abyss"] .englishlab-dock {
  --dock-accent: #48dbfb;
  --dock-accent-strong: #0abde3;
  --dock-accent-soft: rgba(72, 219, 251, 0.18);
}

html[data-profile-theme="theme_abyss"] .englishlab-dock__wave {
  display: block;
  left: -40%;
  bottom: -32px;
  width: 180%;
  height: 56px;
  border-radius: 45% 48% 0 0;
  background: rgba(72, 219, 251, 0.12);
  animation: dockWave 9s linear infinite;
}

html[data-profile-theme="theme_abyss"] .englishlab-dock__wave--two {
  bottom: -38px;
  opacity: 0.7;
  animation-duration: 6.5s;
  animation-direction: reverse;
}

html[data-profile-theme="theme_abyss"] .englishlab-dock__bubble {
  display: block;
  bottom: 4px;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(72, 219, 251, 0.58);
  border-radius: 999px;
  animation: dockBubbleRise 5.8s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

html[data-profile-theme="theme_gold"] .englishlab-dock {
  --dock-accent: #feeaa8;
  --dock-accent-strong: #ffd700;
  --dock-accent-soft: rgba(254, 234, 168, 0.2);
}

html[data-profile-theme="theme_neon"] .englishlab-dock {
  --dock-accent: #00ffcc;
  --dock-accent-strong: #00ff88;
  --dock-accent-soft: rgba(0, 255, 204, 0.18);
}

html[data-profile-theme="theme_midnight"] .englishlab-dock {
  --dock-accent: #e056fd;
  --dock-accent-strong: #9b59b6;
  --dock-accent-soft: rgba(224, 86, 253, 0.18);
}

html[data-profile-theme="theme_emerald"] .englishlab-dock {
  --dock-accent: #38ef7d;
  --dock-accent-strong: #2ecc71;
  --dock-accent-soft: rgba(56, 239, 125, 0.18);
}

html[data-profile-theme="theme_ruby"] .englishlab-dock {
  --dock-accent: #ff6b81;
  --dock-accent-strong: #ff4757;
  --dock-accent-soft: rgba(255, 107, 129, 0.2);
}

html[data-profile-theme="theme_gold"] .englishlab-dock__spark,
html[data-profile-theme="theme_neon"] .englishlab-dock__spark,
html[data-profile-theme="theme_midnight"] .englishlab-dock__spark,
html[data-profile-theme="theme_emerald"] .englishlab-dock__spark,
html[data-profile-theme="theme_ruby"] .englishlab-dock__spark {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 2px;
  background: var(--dock-accent);
  opacity: 0;
  box-shadow: 0 0 14px var(--dock-accent);
  animation: dockSpark 3.8s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

html[data-profile-theme="theme_gold"] .englishlab-dock__spark,
html[data-profile-theme="theme_ruby"] .englishlab-dock__spark {
  transform: rotate(45deg);
}

html[data-profile-theme="theme_neon"] .englishlab-dock__spark {
  width: 14px;
  height: 2px;
  border-radius: 99px;
  animation-name: dockDataStreak;
}

html[data-profile-theme="theme_emerald"] .englishlab-dock__petal {
  display: block;
  top: -10px;
  width: 12px;
  height: 7px;
  border-radius: 999px 0 999px 0;
  background: rgba(46, 204, 113, 0.42);
  animation: dockPetalFall 8.5s linear infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes dockPetalFall {
  0% { transform: translate3d(0, -12px, 0) rotate(0deg); opacity: 0; }
  15% { opacity: 0.78; }
  100% { transform: translate3d(var(--drift, 18px), 98px, 0) rotate(520deg); opacity: 0; }
}

@keyframes dockWave {
  0% { transform: translateX(-18%) rotate(0deg); }
  50% { transform: translateX(0%) rotate(2deg); }
  100% { transform: translateX(-18%) rotate(0deg); }
}

@keyframes dockBubbleRise {
  0% { transform: translate3d(0, 8px, 0) scale(0.7); opacity: 0; }
  20% { opacity: 0.85; }
  100% { transform: translate3d(12px, var(--rise, -34px), 0) scale(1.22); opacity: 0; }
}

@keyframes dockSpark {
  0%, 100% { opacity: 0; transform: translateY(4px) rotate(45deg) scale(0.72); }
  45% { opacity: 0.75; transform: translateY(-2px) rotate(45deg) scale(1); }
}

@keyframes dockDataStreak {
  0% { opacity: 0; transform: translateX(-18px); }
  35% { opacity: 0.72; }
  100% { opacity: 0; transform: translateX(32px); }
}

@media (max-width: 640px) {
  .englishlab-dock {
    bottom: max(8px, env(safe-area-inset-bottom));
    width: calc(100vw - 12px);
    min-width: 0;
    max-width: calc(100vw - 12px);
    padding: 6px;
    gap: 2px;
    border-radius: 26px;
  }

  .englishlab-dock::after {
    border-radius: 24px;
  }

  .englishlab-dock__item {
    flex: 1 1 0;
    min-width: 0;
    min-height: 54px;
    padding: 7px 2px;
    border-radius: 18px;
    font-size: 0.5rem;
    letter-spacing: 0.03em;
  }

  .englishlab-dock__emoji {
    width: 25px !important;
    height: 25px !important;
  }

  .englishlab-dock__emoji svg,
  .englishlab-dock__emoji i {
    width: 21px !important;
    height: 21px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .englishlab-dock__pill,
  .englishlab-dock__item,
  .englishlab-dock__emoji,
  .englishlab-dock__petal,
  .englishlab-dock__bubble,
  .englishlab-dock__wave,
  .englishlab-dock__spark {
    animation: none !important;
    transition: none !important;
  }
}

/* Sleek Light Quiz Experience */
#quizPage {
  --quiz-light-bg: #f8fafc;
  --quiz-light-card: #ffffff;
  --quiz-light-card-soft: rgba(255, 255, 255, 0.9);
  --quiz-light-ink: #0f172a;
  --quiz-light-muted: #64748b;
  --quiz-light-line: #e2e8f0;
  --quiz-light-blue: #2563eb;
  --quiz-light-emerald: #059669;
  --quiz-light-emerald-bg: #ecfdf5;
  --quiz-light-emerald-line: #10b981;
  --quiz-light-rose: #e11d48;
  --quiz-light-rose-bg: #fff1f2;
  --quiz-light-rose-line: #f43f5e;
  background: var(--quiz-light-bg);
  color: var(--quiz-light-ink);
  min-height: 100dvh;
}

#quizPage .page-container {
  max-width: 720px;
}

#quizPage .page-header {
  border-radius: 22px;
  padding: 12px 14px;
  border: 1px solid var(--quiz-light-line);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

#quizPage .page-title {
  color: var(--quiz-light-ink);
  letter-spacing: -0.04em;
}

#quizPage .page-close,
#quizPage .question-screen-action-btn {
  border: 1px solid var(--quiz-light-line) !important;
  background: #fff !important;
  color: #475569 !important;
  box-shadow: none !important;
}

#quizPage .quiz-score-display,
#quizPage .quiz-progress,
#quizPage .session-mode-timer {
  color: var(--quiz-light-muted);
}

#quizPage .quiz-score-display {
  border: 1px solid #dbeafe;
  background: #eff6ff;
  color: #1d4ed8;
  box-shadow: none;
}

#quizPage .quiz-header {
  margin: 0 0 24px;
  padding: 26px 2px 4px;
  border: 0;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--quiz-light-ink);
}

#quizPage .quiz-header::after {
  content: "";
  display: block;
  width: 48px;
  height: 6px;
  margin-top: 24px;
  border-radius: 999px;
  background: var(--quiz-light-blue);
}

#quizPage .quiz-header-number {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 18px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid #dbeafe;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

#quizPage .quiz-header-question {
  color: var(--quiz-light-ink);
  font-size: clamp(1.55rem, 4.2vw, 2.1rem);
  line-height: 1.22;
  letter-spacing: -0.045em;
}

#quizPage #questionStimulusTitle {
  color: #1d4ed8 !important;
}

#quizPage #questionStimulusText {
  color: #334155 !important;
  background: #fff !important;
  border-color: var(--quiz-light-line) !important;
}

#quizPage .speed-banner,
#quizPage .adaptive-reason-banner {
  margin: 0 0 12px;
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: none;
}

#quizPage .speed-banner {
  border: 1px solid #fde68a;
  background: rgba(255, 251, 235, 0.82);
}

#quizPage .adaptive-reason-banner {
  border: 1px solid #dbeafe;
  background: rgba(239, 246, 255, 0.82);
}

#quizPage .speed-banner-summary,
#quizPage .adaptive-reason-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

#quizPage .speed-banner-summary::-webkit-details-marker,
#quizPage .adaptive-reason-summary::-webkit-details-marker {
  display: none;
}

#quizPage .speed-banner-label,
#quizPage .adaptive-reason-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#quizPage .speed-banner-label::before {
  content: "!";
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #f59e0b;
  color: #fff7ed;
  font-size: 0.72rem;
}

#quizPage .adaptive-reason-label::before {
  content: "?";
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--quiz-light-blue);
  color: #eff6ff;
  font-size: 0.72rem;
}

#quizPage .speed-banner-label {
  color: #92400e;
}

#quizPage .adaptive-reason-label {
  color: #1e40af;
}

#quizPage .speed-banner-chevron,
#quizPage .adaptive-reason-chevron {
  color: currentColor;
  font-weight: 900;
  transform: rotate(0deg);
  transition: transform 0.22s ease;
}

#quizPage .speed-banner[open] .speed-banner-chevron,
#quizPage .adaptive-reason-banner[open] .adaptive-reason-chevron {
  transform: rotate(180deg);
}

#quizPage .speed-banner-message,
#quizPage .adaptive-reason-message {
  margin: 0;
  padding: 13px 16px 16px;
  border-top: 1px solid rgba(148, 163, 184, 0.2);
  font-size: 0.9rem;
  line-height: 1.62;
}

#quizPage .speed-banner-message {
  color: rgba(120, 53, 15, 0.78);
}

#quizPage .adaptive-reason-message {
  color: rgba(30, 64, 175, 0.78);
}

#quizPage .ai-tutor-card {
  border-color: var(--quiz-light-line);
  background: #fff;
  color: var(--quiz-light-ink);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
}

#quizPage .ai-tutor-message,
#quizPage .ai-tutor-name {
  color: var(--quiz-light-ink);
}

#quizPage .quiz-options {
  gap: 14px;
}

#quizPage .quiz-option {
  width: 100%;
  min-height: 74px;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border: 2px solid var(--quiz-light-line);
  border-radius: 22px;
  background: #fff;
  color: #334155;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

#quizPage .quiz-option:hover:not(:disabled) {
  border-color: #cbd5e1;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.09);
  transform: translateY(-1px);
}

#quizPage .quiz-option.correct {
  border-color: var(--quiz-light-emerald-line);
  background: var(--quiz-light-emerald-bg);
  color: #064e3b;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
}

#quizPage .quiz-option.incorrect {
  border-color: var(--quiz-light-rose-line);
  background: var(--quiz-light-rose-bg);
  color: #881337;
  box-shadow: 0 0 0 4px rgba(244, 63, 94, 0.12);
}

#quizPage .option-letter {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: #f1f5f9;
  color: #64748b;
  font-weight: 900;
}

#quizPage .quiz-option:hover:not(:disabled) .option-letter {
  background: #e2e8f0;
}

#quizPage .quiz-option.correct .option-letter {
  background: var(--quiz-light-emerald);
  color: #fff;
}

#quizPage .quiz-option.incorrect .option-letter {
  background: var(--quiz-light-rose);
  color: #fff;
}

#quizPage .option-text {
  color: inherit;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.45;
}

#quizPage .session-report-row {
  justify-content: center;
  margin: 32px 0 10px;
}

#quizPage .session-report-btn {
  border-radius: 12px;
  border-color: transparent;
  background: transparent;
  color: #94a3b8;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#quizPage .session-report-btn:hover {
  background: #e2e8f0;
  color: #475569;
}

#quizPage .quiz-feedback {
  color: var(--quiz-light-ink);
  background: #fff;
  border: 1px solid var(--quiz-light-line);
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.1);
}

#quizPage .quiz-feedback.correct {
  background: #fff;
  border-color: #bbf7d0;
}

#quizPage .quiz-feedback.incorrect {
  background: #fff;
  border-color: #fecdd3;
}

#quizPage .feedback-icon {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 0 0 12px;
  border-radius: 18px;
  font-size: 1.25rem;
  font-weight: 900;
}

#quizPage .quiz-feedback.correct .feedback-icon {
  color: var(--quiz-light-emerald);
  background: #d1fae5;
}

#quizPage .quiz-feedback.incorrect .feedback-icon {
  color: var(--quiz-light-rose);
  background: #ffe4e6;
}

#quizPage .feedback-title {
  color: var(--quiz-light-ink);
  font-size: 1.15rem;
  font-weight: 900;
}

#quizPage .quiz-feedback.correct .feedback-title {
  color: #047857;
}

#quizPage .quiz-feedback.incorrect .feedback-title {
  color: #be123c;
}

#quizPage .feedback-explanation,
#quizPage .feedback-micro-lesson,
#quizPage .feedback-micro-action-note {
  color: #334155;
  background: #f8fafc;
  border-color: #e2e8f0;
}

#quizPage .feedback-explanation {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  font-size: 0.92rem;
  line-height: 1.65;
}

#quizPage .feedback-explanation--structured {
  display: grid;
  gap: 12px;
}

#quizPage .feedback-explanation-section {
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--border-color, #e2e8f0) 78%, var(--primary, #2563eb) 22%);
  border-radius: 16px;
  background: color-mix(in srgb, var(--card-bg, #ffffff) 88%, var(--primary, #2563eb) 12%);
}

#quizPage .feedback-explanation-section__heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

#quizPage .feedback-explanation-section__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary, #2563eb) 24%, transparent);
  color: var(--primary-light, #38bdf8);
  border: 1px solid color-mix(in srgb, var(--primary, #2563eb) 42%, transparent);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

#quizPage .feedback-explanation-section__title {
  color: var(--text-primary, #0f172a);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#quizPage .feedback-explanation-section__body {
  margin: 0;
  color: var(--text-secondary, #334155);
  line-height: 1.72;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

#quizPage .feedback-micro-lesson {
  padding: 15px 16px;
  border-radius: 18px;
}

#quizPage .feedback-micro-lesson__title {
  color: var(--quiz-light-blue);
}

#quizPage .feedback-micro-lesson__lead,
#quizPage .feedback-micro-lesson__body {
  color: #475569;
}

#quizPage .quiz-nav-buttons {
  gap: 12px;
}

#quizPage .quiz-nav-btn,
#quizPage #submitQuizSection .quiz-btn {
  border: 0;
  border-radius: 18px;
  background: #0f172a;
  color: #fff;
  box-shadow: 0 18px 28px rgba(15, 23, 42, 0.16);
}

#quizPage .quiz-nav-btn:hover,
#quizPage #submitQuizSection .quiz-btn:hover {
  background: #1e293b;
  color: #fff;
}

@media (max-width: 768px) {
  #quizPage {
    background: #f8fafc !important;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .page-container {
    max-width: none;
    padding: 84px 16px calc(168px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .page-header {
    display: flex !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 72;
    max-width: none;
    margin: 0;
    border-width: 0 0 1px;
    border-radius: 0;
    padding: 12px 16px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .page-title {
    font-size: 1rem;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .page-close {
    min-height: 40px;
    padding: 9px 14px;
    border-radius: 999px !important;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .quiz-score-display {
    position: static;
    display: inline-flex;
    width: fit-content;
    margin: 0 0 8px;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .quiz-progress {
    margin-bottom: 8px;
    font-weight: 800;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .question-screen-actions--mobile {
    display: none;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .speed-banner,
  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .adaptive-reason-banner {
    margin: 0 0 10px;
    border-radius: 14px;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .speed-banner-summary,
  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .adaptive-reason-summary {
    padding: 12px 14px;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .speed-banner-message,
  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .adaptive-reason-message {
    padding: 11px 14px 14px;
    font-size: 0.82rem;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .quiz-header {
    margin-bottom: 18px;
    padding: 18px 0 0;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .quiz-header-number {
    margin-bottom: 14px;
    font-size: 0.68rem;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .quiz-header-question {
    font-size: 1.45rem;
    line-height: 1.2;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .combo-flame-indicator {
    top: -8px;
    right: 0;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .quiz-options {
    gap: 12px;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .quiz-option {
    min-height: 68px;
    padding: 15px 16px;
    border-radius: 20px;
    font-size: 0.95rem;
    gap: 13px;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .option-letter {
    width: 38px;
    height: 38px;
    border-radius: 13px;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .option-text {
    font-size: 0.94rem;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .quiz-feedback.show {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1100 !important;
    width: 100%;
    max-height: min(62dvh, 540px);
    margin: 0 !important;
    padding: 28px 22px calc(112px + env(safe-area-inset-bottom, 0px)) !important;
    border-width: 1px 0 0 !important;
    border-radius: 28px 28px 0 0 !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 -18px 48px rgba(15, 23, 42, 0.14) !important;
    backdrop-filter: blur(26px) saturate(145%);
    -webkit-backdrop-filter: blur(26px) saturate(145%);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .quiz-feedback.show::before {
    content: "";
    position: sticky;
    top: 0;
    display: block;
    width: 48px;
    height: 6px;
    margin: -12px auto 18px;
    border-radius: 999px;
    background: #e2e8f0;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .feedback-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 10px;
    border-radius: 16px;
    font-size: 1.1rem;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .feedback-title {
    font-size: 1.05rem;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .feedback-explanation {
    max-height: 22dvh;
    overflow-y: auto;
    font-size: 0.88rem;
    line-height: 1.58;
  }

  #quizPage:has(#quizFeedback.show) .quiz-nav-buttons[style*="display: flex"] {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1120 !important;
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 10px;
    width: min(720px, 100%);
    margin: 0 auto !important;
    padding: 14px 22px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0.96) 28%, rgba(255,255,255,0.98));
  }

  #quizPage:has(#quizFeedback.show) #backQuestionBtn {
    display: none !important;
  }

  #quizPage:has(#quizFeedback.show) #nextQuestionBtn,
  #quizPage:has(#quizQuestionScreen[style*="display: block"]) #submitQuizSection[style*="display: flex"] .quiz-btn {
    width: 100%;
    min-height: 58px;
    border-radius: 20px;
    font-size: 1rem;
    font-weight: 900;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) #submitQuizSection[style*="display: flex"] {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1120 !important;
    width: min(720px, 100%);
    margin: 0 auto !important;
    padding: 14px 22px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    background: rgba(255,255,255,0.94);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
  }
}

/* First-paint safety: the hero card must never inherit a stuck animated hidden state. */
#mainPage #mainHeroCard {
  opacity: 1 !important;
  visibility: visible !important;
  min-height: 220px;
}

#mainPage #mainHeroCard.stagger-in {
  opacity: 1 !important;
}

#mainPage #mainHeroCard > *:not(.tsparticles-container) {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Theme-Adaptive Quiz Popup Refinement */
#quizPage {
  --quiz-light-bg: var(--background);
  --quiz-light-card: color-mix(in srgb, var(--card-bg) 88%, var(--primary) 12%);
  --quiz-light-card-soft: color-mix(in srgb, var(--card-bg) 84%, transparent);
  --quiz-light-ink: var(--text-primary);
  --quiz-light-muted: var(--text-secondary);
  --quiz-light-line: color-mix(in srgb, var(--border-color) 68%, var(--primary) 32%);
  --quiz-light-blue: var(--primary-light);
  --quiz-light-emerald: #10b981;
  --quiz-light-emerald-bg: rgba(16, 185, 129, 0.16);
  --quiz-light-emerald-line: #34d399;
  --quiz-light-rose: #fb7185;
  --quiz-light-rose-bg: rgba(244, 63, 94, 0.16);
  --quiz-light-rose-line: #fb7185;
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--primary) 24%, transparent), transparent 30%),
    radial-gradient(circle at 85% 12%, color-mix(in srgb, var(--primary-light) 16%, transparent), transparent 34%),
    var(--background) !important;
  color: var(--text-primary);
}

#quizPage .page-header,
#quizPage .quiz-feedback,
#quizPage #submitQuizSection[style*="display: flex"] {
  border-color: color-mix(in srgb, var(--border-color) 70%, var(--primary) 30%) !important;
  background: color-mix(in srgb, var(--card-bg) 88%, transparent) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.28) !important;
}

#quizPage .page-close,
#quizPage .question-screen-action-btn {
  border-color: color-mix(in srgb, var(--border-color) 76%, var(--primary) 24%) !important;
  background: color-mix(in srgb, var(--background-secondary) 82%, var(--primary) 18%) !important;
  color: var(--text-primary) !important;
}

#quizPage .page-title,
#quizPage .quiz-header,
#quizPage .quiz-header-question,
#quizPage .feedback-title,
#quizPage .ai-tutor-message,
#quizPage .ai-tutor-name {
  color: var(--text-primary) !important;
}

#quizPage .quiz-score-display,
#quizPage .quiz-header-number {
  border-color: color-mix(in srgb, var(--primary) 36%, var(--border-color)) !important;
  background: color-mix(in srgb, var(--primary) 18%, var(--background-secondary)) !important;
  color: color-mix(in srgb, var(--primary-light) 86%, #ffffff 14%) !important;
}

#quizPage .quiz-header::after {
  background: linear-gradient(90deg, var(--primary-light), var(--primary)) !important;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 38%, transparent);
}

#quizPage #questionStimulusTitle,
#quizPage .feedback-micro-lesson__title {
  color: var(--primary-light) !important;
}

#quizPage #questionStimulusText,
#quizPage .ai-tutor-card,
#quizPage .quiz-option,
#quizPage .feedback-explanation,
#quizPage .feedback-micro-lesson,
#quizPage .feedback-micro-action-note {
  border-color: color-mix(in srgb, var(--border-color) 74%, var(--primary) 26%) !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--card-bg) 88%, var(--primary) 12%),
      color-mix(in srgb, var(--background-secondary) 92%, var(--primary-dark) 8%)) !important;
  color: var(--text-primary) !important;
}

#quizPage .speed-banner,
#quizPage .adaptive-reason-banner {
  border-color: color-mix(in srgb, var(--border-color) 70%, var(--primary) 30%) !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--card-bg) 84%, var(--primary) 16%),
      color-mix(in srgb, var(--background-secondary) 90%, var(--primary-dark) 10%)) !important;
}

#quizPage .speed-banner-label,
#quizPage .adaptive-reason-label,
#quizPage .speed-banner-message,
#quizPage .adaptive-reason-message,
#quizPage .feedback-micro-lesson__lead,
#quizPage .feedback-micro-lesson__body {
  color: var(--text-secondary) !important;
}

#quizPage .speed-banner-label::before,
#quizPage .adaptive-reason-label::before {
  background: linear-gradient(135deg, var(--primary), var(--primary-light)) !important;
  color: var(--background) !important;
}

#quizPage .quiz-option:hover:not(:disabled) {
  border-color: var(--primary) !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--card-bg) 76%, var(--primary) 24%),
      color-mix(in srgb, var(--background-secondary) 86%, var(--primary-light) 14%)) !important;
  box-shadow: 0 18px 38px color-mix(in srgb, var(--primary) 20%, rgba(0, 0, 0, 0.3)) !important;
}

#quizPage .option-letter {
  background: color-mix(in srgb, var(--background-secondary) 80%, var(--primary) 20%) !important;
  color: var(--text-primary) !important;
}

#quizPage .quiz-option.correct,
#quizPage .quiz-option.incorrect {
  color: var(--text-primary) !important;
}

#quizPage .quiz-option.correct .option-letter,
#quizPage .quiz-feedback.correct .feedback-icon {
  background: rgba(16, 185, 129, 0.22) !important;
  color: #86efac !important;
}

#quizPage .quiz-option.incorrect .option-letter,
#quizPage .quiz-feedback.incorrect .feedback-icon {
  background: rgba(244, 63, 94, 0.22) !important;
  color: #fda4af !important;
}

#quizPage .quiz-feedback.correct .feedback-title {
  color: #86efac !important;
}

#quizPage .quiz-feedback.incorrect .feedback-title {
  color: #fda4af !important;
}

#quizPage .quiz-nav-btn,
#quizPage #submitQuizSection .quiz-btn {
  background: linear-gradient(135deg, var(--primary), var(--primary-light)) !important;
  color: var(--background) !important;
  box-shadow: 0 18px 34px color-mix(in srgb, var(--primary) 28%, transparent) !important;
}

#quizPage .quiz-nav-btn:hover,
#quizPage #submitQuizSection .quiz-btn:hover {
  background: linear-gradient(135deg, var(--primary-light), var(--primary)) !important;
  color: var(--background) !important;
}

#quizPage #backQuestionBtn,
#quizPage #backQuestionBtnFinal {
  display: none !important;
}

#quizPage:has(#quizFeedback.show) #quizQuestionScreen::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1090;
  background: rgba(0, 0, 0, 0.24);
  pointer-events: none;
}

@media (max-width: 768px) {
  #quizPage {
    background:
      radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--primary) 24%, transparent), transparent 31%),
      radial-gradient(circle at 86% 8%, color-mix(in srgb, var(--primary-light) 18%, transparent), transparent 34%),
      var(--background) !important;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .page-container {
    padding-bottom: calc(188px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .page-header {
    background: color-mix(in srgb, var(--card-bg) 88%, transparent) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28) !important;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .quiz-feedback.show {
    left: 16px !important;
    right: 16px !important;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-width: 680px;
    max-height: min(46dvh, 420px);
    margin: 0 auto !important;
    padding: 24px 20px 20px !important;
    border-width: 1px 1px 0 !important;
    border-radius: 30px 30px 0 0 !important;
    background:
      radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 42%),
      color-mix(in srgb, var(--card-bg) 91%, transparent) !important;
    backdrop-filter: blur(28px) saturate(145%);
    -webkit-backdrop-filter: blur(28px) saturate(145%);
    overflow-y: auto;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .quiz-feedback.show::before {
    background: color-mix(in srgb, var(--primary-light) 50%, var(--border-color)) !important;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .feedback-explanation {
    max-height: 18dvh;
    overflow-y: auto;
  }

  #quizPage:has(#quizFeedback.show) .quiz-nav-buttons[style*="display: flex"] {
    left: 16px !important;
    right: 16px !important;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto;
    max-width: 680px;
    margin: 0 auto !important;
    padding: 12px 16px 16px !important;
    border: 1px solid color-mix(in srgb, var(--border-color) 70%, var(--primary) 30%) !important;
    border-top: 0 !important;
    border-radius: 0 0 30px 30px !important;
    background: color-mix(in srgb, var(--card-bg) 91%, transparent) !important;
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.32) !important;
    backdrop-filter: blur(28px) saturate(145%);
    -webkit-backdrop-filter: blur(28px) saturate(145%);
  }

  #quizPage:has(#quizFeedback.show) #nextQuestionBtn {
    min-height: 60px;
    border-radius: 20px;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) #submitQuizSection[style*="display: flex"] {
    left: 16px !important;
    right: 16px !important;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto;
    max-width: 680px;
    border: 1px solid color-mix(in srgb, var(--border-color) 70%, var(--primary) 30%) !important;
    border-radius: 28px !important;
    background: color-mix(in srgb, var(--card-bg) 91%, transparent) !important;
  }
}

/* Navigation + quiz layout hotfix
   Keep the dock compact on desktop, and never let it cover active quiz sessions. */
@media (min-width: 769px) {
  .englishlab-dock {
    width: min(430px, calc(100vw - 64px)) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 64px) !important;
    padding: 6px 8px !important;
    gap: 0 !important;
    bottom: 16px !important;
    border-radius: 24px !important;
  }

  .englishlab-dock::after {
    border-radius: 22px !important;
  }

  .englishlab-dock__item {
    flex: 0 0 58px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    padding: 6px 3px !important;
    border-radius: 16px !important;
    font-size: 0.48rem !important;
    gap: 4px !important;
  }

  .englishlab-dock__emoji {
    width: 23px !important;
    height: 23px !important;
    border-radius: 9px !important;
  }

  .englishlab-dock__emoji svg,
  .englishlab-dock__emoji i {
    width: 18px !important;
    height: 18px !important;
  }
}

body:has(#quizPage[style*="display: block"] #quizQuestionScreen[style*="display: block"]) #englishLabDock,
body:has(#challengePage[style*="display: block"] #challengeQuestionScreen[style*="display: block"]) #englishLabDock,
body.quiz-session-active #englishLabDock,
body.challenge-session-active #englishLabDock {
  display: none !important;
}

#quizPage:has(#quizQuestionScreen[style*="display: block"]) .page-container {
  max-width: min(840px, calc(100vw - 40px)) !important;
  padding-top: 16px !important;
  padding-bottom: 32px !important;
}

#quizPage:has(#quizQuestionScreen[style*="display: block"]) .page-header {
  margin-bottom: 16px !important;
}

#quizPage:has(#quizQuestionScreen[style*="display: block"]) #quizQuestionScreen {
  position: relative;
}

#quizPage:has(#quizQuestionScreen[style*="display: block"]) #quizToolbox {
  margin: 0 0 8px !important;
}

#quizPage:has(#quizQuestionScreen[style*="display: block"]) .quiz-header {
  margin: 0 0 16px !important;
  padding: 10px 2px 2px !important;
}

#quizPage:has(#quizQuestionScreen[style*="display: block"]) .quiz-header-number {
  margin-bottom: 14px !important;
}

#quizPage:has(#quizQuestionScreen[style*="display: block"]) #questionStimulusText {
  margin-bottom: 14px !important;
}

#quizPage:has(#quizQuestionScreen[style*="display: block"]) .quiz-header::after {
  margin-top: 18px !important;
}

#quizPage:has(#quizQuestionScreen[style*="display: block"]) .quiz-options {
  gap: 12px !important;
}

#quizPage:has(#quizQuestionScreen[style*="display: block"]) .quiz-option {
  min-height: 72px;
}

@media (max-width: 768px) {
  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .page-container {
    max-width: none !important;
    padding: 72px 14px 24px !important;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .page-header {
    margin-bottom: 10px !important;
    padding: 10px 14px !important;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .quiz-toolbox {
    justify-content: flex-end;
    margin-bottom: 6px !important;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .quiz-toolbox-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 14px;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .quiz-header {
    padding-top: 6px !important;
    margin-bottom: 12px !important;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .quiz-header-question {
    font-size: clamp(1.35rem, 7.2vw, 2rem) !important;
  }
}

/* Quiz active-screen correction: top controls must not overlap, and the
   question/answers should sit higher once the bottom dock is hidden. */
#quizPage:has(#quizQuestionScreen[style*="display: block"]) .page-container {
  max-width: min(990px, calc(100vw - 72px)) !important;
  padding-top: 8px !important;
  padding-bottom: 28px !important;
}

#quizPage:has(#quizQuestionScreen[style*="display: block"]) .page-header {
  max-width: min(990px, calc(100vw - 72px)) !important;
  margin-bottom: 10px !important;
  padding: 12px 18px !important;
}

#quizPage:has(#quizQuestionScreen[style*="display: block"]) .page-title {
  font-size: clamp(2rem, 4.2vw, 3.15rem) !important;
  line-height: 1 !important;
}

#quizPage:has(#quizQuestionScreen[style*="display: block"]) .page-close {
  min-height: 44px !important;
  padding: 10px 20px !important;
}

#quizPage:has(#quizQuestionScreen[style*="display: block"]) #quizQuestionScreen {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  column-gap: 14px !important;
  row-gap: 10px !important;
}

#quizPage:has(#quizQuestionScreen[style*="display: block"]) #quizScoreDisplay {
  position: static !important;
  inset: auto !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  align-self: center !important;
  width: fit-content !important;
  margin: 0 !important;
  transform: none !important;
  z-index: 1 !important;
}

#quizPage:has(#quizQuestionScreen[style*="display: block"]) #quizToolbox {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  align-self: center !important;
  display: inline-flex !important;
  margin: 0 !important;
  z-index: 2 !important;
}

#quizPage:has(#quizQuestionScreen[style*="display: block"]) #quizHeader {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  margin: 2px 0 6px !important;
  padding: 0 !important;
  min-height: 0 !important;
  overflow: visible !important;
}

#quizPage:has(#quizQuestionScreen[style*="display: block"]) #quizHeader::after {
  width: 58px !important;
  height: 6px !important;
  margin-top: 16px !important;
}

#quizPage:has(#quizQuestionScreen[style*="display: block"]) #questionNumber {
  margin-bottom: 12px !important;
}

#quizPage:has(#quizQuestionScreen[style*="display: block"]) #questionStimulusText {
  margin-bottom: 12px !important;
}

#quizPage:has(#quizQuestionScreen[style*="display: block"]) #questionText {
  font-size: clamp(2rem, 4.4vw, 2.85rem) !important;
  line-height: 1.18 !important;
}

#quizPage:has(#quizQuestionScreen[style*="display: block"]) #quizOptions {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  gap: 10px !important;
}

#quizPage:has(#quizQuestionScreen[style*="display: block"]) .quiz-option {
  min-height: 64px !important;
  padding: 14px 24px !important;
}

#quizPage:has(#quizQuestionScreen[style*="display: block"]) .session-report-row,
#quizPage:has(#quizQuestionScreen[style*="display: block"]) #quizFeedback,
#quizPage:has(#quizQuestionScreen[style*="display: block"]) .quiz-nav-buttons,
#quizPage:has(#quizQuestionScreen[style*="display: block"]) #submitQuizSection {
  grid-column: 1 / -1 !important;
}

/* Elish Tutor full conversation page */
.journey-hub-card--elish {
  border-color: color-mix(in srgb, var(--primary, #22c55e) 46%, var(--border-color) 54%) !important;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--primary-light, #67e8f9) 18%, transparent), transparent 34%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--card-bg) 82%, var(--primary) 18%),
      color-mix(in srgb, var(--background-secondary) 88%, var(--primary-dark) 12%)) !important;
}

.elish-tutor-page {
  max-width: 1180px;
}

.elish-tutor-shell {
  display: grid;
  gap: 18px;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid color-mix(in srgb, var(--border-color) 72%, var(--primary) 28%);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--primary) 20%, transparent), transparent 34%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--card-bg) 88%, transparent),
      color-mix(in srgb, var(--background-secondary) 92%, transparent));
  box-shadow: var(--shadow-md);
}

.elish-tutor-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.elish-tutor-hero-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.elish-tutor-clear {
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--border-color) 78%, var(--primary) 22%);
  border-radius: 999px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--background-secondary) 86%, transparent);
  color: var(--text-secondary);
  cursor: pointer;
  font-weight: 800;
}

.elish-tutor-close {
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--primary) 55%, var(--border-color) 45%);
  border-radius: 999px;
  padding: 10px 15px;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #03120b;
  cursor: pointer;
  font-weight: 950;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--primary) 22%, transparent);
}

.elish-tutor-close:hover,
.elish-tutor-close:focus-visible {
  transform: translateY(-1px);
  outline: none;
}

.elish-tutor-layout {
  display: grid;
  grid-template-columns: minmax(230px, 0.35fr) minmax(0, 1fr);
  gap: 18px;
  min-height: min(680px, calc(100dvh - 220px));
}

.elish-tutor-side {
  display: grid;
  align-content: start;
  gap: 14px;
}

.elish-tutor-side-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--border-color) 76%, var(--primary) 24%);
  border-radius: 22px;
  background: color-mix(in srgb, var(--card-bg) 82%, var(--primary) 8%);
}

.elish-tutor-side-card h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: 1rem;
}

.elish-tutor-side-card p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.65;
  font-size: 0.9rem;
}

.elish-tutor-side-card button {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--border-color) 72%, var(--primary) 28%);
  border-radius: 16px;
  padding: 11px 12px;
  background: color-mix(in srgb, var(--background-secondary) 82%, var(--primary) 10%);
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  font-weight: 800;
}

.elish-tutor-side-card button:hover {
  border-color: color-mix(in srgb, var(--primary) 58%, var(--border-color));
  transform: translateY(-1px);
}

.elish-tutor-chat {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border-color) 72%, var(--primary) 28%);
  border-radius: 26px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--background-secondary) 86%, var(--primary) 7%),
      color-mix(in srgb, var(--card-bg) 88%, var(--primary-dark) 8%));
}

.elish-tutor-messages {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  padding: clamp(14px, 2.4vw, 22px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.elish-tutor-message-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.elish-tutor-message-row.user {
  justify-content: flex-end;
}

.elish-tutor-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 16px;
  background: color-mix(in srgb, var(--primary) 24%, var(--background-secondary));
  color: var(--primary-light);
  border: 1px solid color-mix(in srgb, var(--primary) 42%, transparent);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  overflow: hidden;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.14);
}

.elish-tutor-avatar--assistant {
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,0.18), transparent 46%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--primary) 34%, var(--background-secondary)),
      color-mix(in srgb, var(--primary-dark) 76%, #020617 24%));
  border-color: color-mix(in srgb, var(--primary-light) 48%, transparent);
}

.elish-tutor-avatar--user {
  border-radius: 17px;
  background: color-mix(in srgb, var(--card-bg) 72%, var(--primary) 18%);
}

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

.elish-tutor-avatar .avatar-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.elish-tutor-bubble {
  max-width: min(720px, 82%);
  padding: 13px 15px;
  border: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
  border-radius: 20px 20px 20px 8px;
  background: color-mix(in srgb, var(--card-bg) 82%, var(--primary) 8%);
  color: var(--text-primary);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
}

.elish-tutor-message-row.user .elish-tutor-bubble {
  border-radius: 20px 20px 8px 20px;
  border-color: transparent;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--primary-light) 78%, white 22%),
    color-mix(in srgb, var(--primary) 72%, white 28%));
  color: #03120b;
}

.elish-tutor-bubble-label {
  margin-bottom: 5px;
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.7;
}

.elish-tutor-bubble-body {
  line-height: 1.7;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.elish-tutor-message-row.is-typing .elish-tutor-bubble-body {
  color: var(--text-secondary);
  font-style: italic;
}

.elish-tutor-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  padding: 14px;
  border-top: 1px solid color-mix(in srgb, var(--border-color) 72%, var(--primary) 28%);
  background: color-mix(in srgb, var(--background-secondary) 78%, transparent);
  align-items: stretch;
}

.elish-tutor-input {
  width: 100%;
  min-height: 56px;
  max-height: 140px;
  resize: vertical;
  border: 1px solid color-mix(in srgb, var(--border-color) 76%, var(--primary) 24%);
  border-radius: 18px;
  padding: 13px 14px;
  background: color-mix(in srgb, var(--card-bg) 86%, transparent);
  color: var(--text-primary);
  outline: none;
}

.elish-tutor-input:focus {
  border-color: color-mix(in srgb, var(--primary) 66%, var(--border-color));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent);
}

.elish-tutor-send {
  min-width: 92px;
  border: 0;
  border-radius: 18px;
  padding: 0 18px;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #03120b;
  cursor: pointer;
  font-weight: 950;
}

.elish-tutor-tool {
  min-width: 56px;
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--border-color) 72%, var(--primary) 28%);
  border-radius: 18px;
  padding: 0;
  background: color-mix(in srgb, var(--card-bg) 78%, var(--primary) 12%);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 950;
}

.elish-tutor-mic {
  position: relative;
  overflow: hidden;
}

.elish-tutor-mic::before {
  content: "";
  width: 22px;
  height: 22px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 14c1.66 0 3-1.34 3-3V6c0-1.66-1.34-3-3-3S9 4.34 9 6v5c0 1.66 1.34 3 3 3Zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.49 6-3.31 6-6.72h-1.7Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 14c1.66 0 3-1.34 3-3V6c0-1.66-1.34-3-3-3S9 4.34 9 6v5c0 1.66 1.34 3 3 3Zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.49 6-3.31 6-6.72h-1.7Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.elish-tutor-tool.is-listening {
  border-color: color-mix(in srgb, var(--primary-light) 72%, var(--primary));
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #03120b;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent);
}

.elish-tutor-tool.is-listening::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,0.52);
  animation: elishMicPulse 1s ease-in-out infinite;
}

.elish-tutor-offline {
  grid-column: 1 / -1;
  color: color-mix(in srgb, var(--warning-color, #facc15) 82%, white 18%);
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.4;
  padding: 2px 4px 0;
}

@keyframes elishMicPulse {
  0%, 100% { opacity: 0.35; transform: scale(0.92); }
  50% { opacity: 0.9; transform: scale(1.04); }
}

.elish-tutor-send:disabled,
.elish-tutor-input:disabled,
.elish-tutor-tool:disabled {
  opacity: 0.62;
  cursor: not-allowed;
}

@media (max-width: 820px) {
  .elish-tutor-hero {
    display: grid;
  }

  .elish-tutor-layout {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .elish-tutor-side {
    order: 2;
  }

  .elish-tutor-chat {
    min-height: 58dvh;
  }
}

@media (max-width: 560px) {
  .elish-tutor-shell {
    padding: 14px;
    border-radius: 24px;
  }

  .elish-tutor-form {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .elish-tutor-send {
    min-height: 52px;
    width: 100%;
  }

  .elish-tutor-bubble {
    max-width: 86%;
  }
}

html:has(#elishTutorPage[style*="display: block"]),
body:has(#elishTutorPage[style*="display: block"]) {
  height: 100dvh;
  overflow: hidden !important;
}

body:has(#elishTutorPage[style*="display: block"]) #englishLabDock,
body:has(#elishTutorPage[style*="display: block"]) .englishlab-dock {
  display: none !important;
}

body.englishlab-dock-hidden #englishLabDock,
body.englishlab-dock-hidden .englishlab-dock,
body.journey-detail-active #englishLabDock,
body.journey-detail-active .englishlab-dock,
body.journey-boss-open #englishLabDock,
body.journey-boss-open .englishlab-dock,
body:has(#loginPage[style*="display: block"]) #englishLabDock,
body:has(#registerPage[style*="display: block"]) #englishLabDock,
body:has(#maintenancePage[style*="display: block"]) #englishLabDock,
body:has(#progressPage[style*="display: block"]) #englishLabDock,
body:has(#duelPage[style*="display: block"]) #englishLabDock,
body:has(#minigamesPage[style*="display: block"]) #englishLabDock,
body:has(#leaderboardPage[style*="display: block"]) #englishLabDock,
body:has(#adminPage[style*="display: block"]) #englishLabDock,
body:has(#loginPage[style*="display: block"]) .englishlab-dock,
body:has(#registerPage[style*="display: block"]) .englishlab-dock,
body:has(#maintenancePage[style*="display: block"]) .englishlab-dock,
body:has(#progressPage[style*="display: block"]) .englishlab-dock,
body:has(#duelPage[style*="display: block"]) .englishlab-dock,
body:has(#minigamesPage[style*="display: block"]) .englishlab-dock,
body:has(#leaderboardPage[style*="display: block"]) .englishlab-dock,
body:has(#adminPage[style*="display: block"]) .englishlab-dock {
  display: none !important;
}

body:has(#quizPage[style*="display: block"]) #englishLabDock,
body:has(#readingPage[style*="display: block"]) #englishLabDock,
body:has(#listeningPage[style*="display: block"]) #englishLabDock,
body:has(#writingPage[style*="display: block"]) #englishLabDock,
body:has(#challengePage[style*="display: block"]) #englishLabDock,
body:has(#quizPage[style*="display: block"]) .englishlab-dock,
body:has(#readingPage[style*="display: block"]) .englishlab-dock,
body:has(#listeningPage[style*="display: block"]) .englishlab-dock,
body:has(#writingPage[style*="display: block"]) .englishlab-dock,
body:has(#challengePage[style*="display: block"]) .englishlab-dock {
  display: none !important;
}

/* Modern completion surface shared by Quiz, Reading, Listening, Writing, and Challenge. */
#quizPage .quiz-results,
#readingPage .quiz-results,
#listeningPage .quiz-results,
#writingPage .quiz-results,
#challengePage .challenge-results {
  position: relative;
  isolation: isolate;
  width: min(760px, 100%);
  margin: clamp(18px, 4vh, 44px) auto;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid color-mix(in srgb, var(--primary-light, #67e8f9) 36%, var(--border-color, rgba(255,255,255,.18)) 64%);
  border-radius: clamp(24px, 4vw, 36px);
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--primary-light, #67e8f9) 28%, transparent) 0, transparent 34%),
    radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--accent-gold, #facc15) 18%, transparent) 0, transparent 30%),
    linear-gradient(145deg,
      color-mix(in srgb, var(--card-bg, #0f241e) 90%, var(--primary, #22c55e) 10%),
      color-mix(in srgb, var(--background-secondary, #07130f) 88%, #000 12%));
  box-shadow:
    0 30px 90px rgba(0, 0, 0, .42),
    inset 0 1px 0 rgba(255, 255, 255, .08);
  color: var(--text-primary, #f8fafc);
  overflow: hidden;
  text-align: left;
}

#quizPage .quiz-results::before,
#readingPage .quiz-results::before,
#listeningPage .quiz-results::before,
#writingPage .quiz-results::before,
#challengePage .challenge-results::before {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: -1;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, .07);
  pointer-events: none;
}

#quizPage .quiz-results::after,
#readingPage .quiz-results::after,
#listeningPage .quiz-results::after,
#writingPage .quiz-results::after,
#challengePage .challenge-results::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -70px;
  width: 190px;
  height: 190px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary-light, #67e8f9) 22%, transparent);
  filter: blur(8px);
  opacity: .58;
  pointer-events: none;
}

#quizPage .results-icon,
#readingPage .results-icon,
#listeningPage .results-icon,
#writingPage .results-icon,
#challengePage .challenge-results-icon {
  display: inline-grid;
  place-items: center;
  min-width: 72px;
  height: 72px;
  margin: 0 0 18px;
  padding: 0 18px;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--primary-light, #67e8f9), color-mix(in srgb, var(--primary, #22c55e) 72%, #ffffff 28%));
  color: #03120b;
  font-size: clamp(1.5rem, 5vw, 2.35rem);
  font-weight: 1000;
  box-shadow: 0 18px 45px color-mix(in srgb, var(--primary, #22c55e) 32%, transparent);
}

#quizPage .results-title,
#readingPage .results-title,
#listeningPage .results-title,
#writingPage .results-title,
#challengePage .challenge-results-title {
  margin: 0 0 10px;
  font-size: clamp(1.85rem, 5vw, 3.2rem);
  line-height: .95;
  letter-spacing: -.055em;
  color: var(--text-primary, #f8fafc);
  text-align: left;
}

#quizPage .results-score,
#readingPage .results-score,
#listeningPage .results-score,
#writingPage .results-score,
#challengePage .challenge-results-score {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin: 8px 0 10px;
  padding: 12px 18px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--background-secondary, #07130f) 76%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary-light, #67e8f9) 28%, transparent);
  color: var(--primary-light, #67e8f9);
  font-size: clamp(2.4rem, 9vw, 4.8rem);
  line-height: .9;
}

#quizPage .results-score span,
#readingPage .results-score span,
#listeningPage .results-score span,
#writingPage .results-score span,
#challengePage .challenge-results-score span {
  color: var(--text-secondary, #cbd5e1);
  font-size: .38em;
}

#quizPage .results-xp,
#readingPage .results-xp,
#listeningPage .results-xp,
#writingPage .results-xp,
#challengePage .challenge-results-xp {
  display: inline-flex;
  width: fit-content;
  margin: 6px 0 18px;
  padding: 8px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-gold, #facc15) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-gold, #facc15) 42%, transparent);
  color: var(--accent-gold, #facc15);
  font-size: clamp(.95rem, 2.4vw, 1.2rem);
  font-weight: 900;
}

#quizPage .results-message,
#readingPage .results-message,
#listeningPage .results-message,
#writingPage .results-message,
#challengePage .challenge-results-message {
  margin: 0 0 22px;
  padding: 16px 18px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--background-secondary, #07130f) 72%, transparent);
  border: 1px solid rgba(255, 255, 255, .08);
  color: var(--text-secondary, #cbd5e1);
  font-size: clamp(.95rem, 2.4vw, 1.05rem);
  line-height: 1.65;
}

#quizPage .results-buttons,
#readingPage #readingResults .reading-buttons,
#listeningPage #listeningResults .reading-buttons,
#writingPage #writingResults .reading-buttons,
#challengePage .challenge-results-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 12px;
}

.reading-review-actions {
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  margin-top: 18px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--primary-light, #67e8f9) 34%, transparent);
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--primary-light, #67e8f9) 18%, transparent), transparent 32%),
    color-mix(in srgb, var(--card-bg, #0f241e) 88%, #000 12%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .22);
}

.reading-review-copy {
  display: grid;
  gap: 4px;
}

.reading-review-copy strong {
  color: var(--text-primary, #f8fafc);
  font-size: 1rem;
}

.reading-review-copy span {
  color: var(--text-secondary, #cbd5e1);
  font-size: .92rem;
  line-height: 1.5;
}

@media (max-width: 680px) {
  #quizPage .quiz-results,
  #readingPage .quiz-results,
  #listeningPage .quiz-results,
  #writingPage .quiz-results,
  #challengePage .challenge-results {
    margin: 12px auto;
    padding: 24px 18px;
  }

  .reading-review-actions {
    grid-template-columns: 1fr;
  }

  #quizPage .results-buttons,
  #readingPage #readingResults .reading-buttons,
  #listeningPage #listeningResults .reading-buttons,
  #writingPage #writingResults .reading-buttons,
  #challengePage .challenge-results-buttons {
    display: grid;
    grid-template-columns: 1fr;
  }
}

.session-reward-burst {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 22px);
  left: 50%;
  z-index: 2147482100;
  width: min(420px, calc(100vw - 28px));
  transform: translate3d(-50%, -130%, 0) scale(.96);
  opacity: 0;
  pointer-events: none;
  transition: transform .36s cubic-bezier(.18, .9, .18, 1), opacity .24s ease;
  will-change: transform, opacity;
}

.session-reward-burst--show {
  transform: translate3d(-50%, 0, 0) scale(1);
  opacity: 1;
}

.session-reward-burst__card {
  position: relative;
  overflow: hidden;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 24px;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, .7), transparent 24%),
    linear-gradient(135deg, #fff4a8 0%, color-mix(in srgb, var(--primary-light, #67e8f9) 72%, #ffffff 28%) 58%, #9bf6ff 100%);
  color: #061510;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, .42),
    0 0 40px color-mix(in srgb, var(--accent-gold, #ffb800) 38%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .82);
}

.session-reward-burst__shine {
  position: absolute;
  inset: -40% auto -40% -30%;
  width: 38%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .72), transparent);
  transform: skewX(-18deg);
  animation: sessionRewardShine 1.4s ease-out both;
}

.session-reward-burst__coin-rain {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.session-reward-burst__coin-rain i {
  position: absolute;
  top: -12px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, #fff7b8, #f6c453 58%, #b7791f);
  box-shadow: 0 0 10px rgba(255, 184, 0, .44);
  animation: sessionRewardCoinDrop 1.2s ease-in both;
}

.session-reward-burst__coin-rain i:nth-child(1) { left: 14%; animation-delay: .02s; }
.session-reward-burst__coin-rain i:nth-child(2) { left: 34%; animation-delay: .12s; }
.session-reward-burst__coin-rain i:nth-child(3) { left: 56%; animation-delay: .04s; }
.session-reward-burst__coin-rain i:nth-child(4) { left: 76%; animation-delay: .18s; }
.session-reward-burst__coin-rain i:nth-child(5) { left: 88%; animation-delay: .08s; }

.session-reward-burst__kicker {
  position: relative;
  z-index: 1;
  font-size: .68rem;
  font-weight: 1000;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .72;
}

.session-reward-burst__title {
  position: relative;
  z-index: 1;
  margin-top: 3px;
  font-size: clamp(1.15rem, 4vw, 1.55rem);
  font-weight: 1000;
  letter-spacing: -.04em;
}

.session-reward-burst__chips {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.session-reward-burst__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(5, 21, 16, .82);
  color: #f8fafc;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
}

.session-reward-burst__chip span {
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .75;
}

.session-reward-burst__chip strong {
  font-size: 1rem;
  font-weight: 1000;
}

.session-reward-burst__chip--coin {
  background: linear-gradient(135deg, #442b04, #0b1711);
  color: #ffe48a;
}

.session-reward-burst__chip--xp {
  background: linear-gradient(135deg, #10233d, #061510);
  color: #a7f3d0;
}

@keyframes sessionRewardShine {
  from { transform: translateX(0) skewX(-18deg); opacity: 0; }
  25% { opacity: 1; }
  to { transform: translateX(420%) skewX(-18deg); opacity: 0; }
}

@keyframes sessionRewardCoinDrop {
  0% { transform: translate3d(0, -10px, 0) rotate(0deg) scale(.72); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: translate3d(18px, 104px, 0) rotate(380deg) scale(1); opacity: 0; }
}

@media (max-width: 520px) {
  .session-reward-burst {
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    width: min(360px, calc(100vw - 18px));
  }

  .session-reward-burst__card {
    border-radius: 20px;
    padding: 14px 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .session-reward-burst,
  .session-reward-burst__shine,
  .session-reward-burst__coin-rain i {
    animation: none !important;
    transition: opacity .16s ease !important;
  }
}

body:has(#elishTutorPage[style*="display: block"]) .top-bar {
  display: none !important;
}

#elishTutorPage[style*="display: block"] {
  position: fixed !important;
  inset: 0;
  z-index: 2600;
  overflow: hidden !important;
  display: flex !important;
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 34%),
    var(--background);
}

.elish-tutor-page {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-width: none;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  overflow: hidden;
}

.elish-tutor-shell {
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: clamp(12px, 2vw, 24px) clamp(12px, 2vw, 24px) calc(12px + env(safe-area-inset-bottom, 0px)) !important;
}

.elish-tutor-layout {
  grid-template-columns: minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}

.elish-tutor-chat {
  height: 100%;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.elish-tutor-help-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px 0;
}

.elish-tutor-help-strip span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--border-color) 68%, var(--primary) 32%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--background-secondary) 78%, var(--primary) 10%);
  color: var(--text-secondary);
  font-size: 0.76rem;
  font-weight: 850;
}

.elish-tutor-messages {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  touch-action: pan-y;
}

.elish-tutor-starter {
  display: grid;
  gap: 10px;
  align-self: flex-start;
  width: min(760px, 100%);
  margin-left: 48px;
  padding: 12px;
  border: 1px dashed color-mix(in srgb, var(--border-color) 70%, var(--primary) 30%);
  border-radius: 20px;
  background: color-mix(in srgb, var(--background-secondary) 76%, transparent);
}

.elish-tutor-starter-title {
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 850;
}

.elish-tutor-starter-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.elish-tutor-starter-chip {
  border: 1px solid color-mix(in srgb, var(--border-color) 72%, var(--primary) 28%);
  border-radius: 999px;
  padding: 8px 11px;
  background: color-mix(in srgb, var(--card-bg) 78%, var(--primary) 12%);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 900;
}

.elish-tutor-starter-chip:hover,
.elish-tutor-starter-chip:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 62%, var(--border-color));
  transform: translateY(-1px);
  outline: none;
}

@media (max-width: 820px) {
  .elish-tutor-page {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0 !important;
  }

  .elish-tutor-shell {
    gap: 10px;
    padding: 12px 10px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 24px;
  }

  .elish-tutor-hero {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
  }

  .elish-tutor-hero .journey-proto-kicker {
    margin-bottom: 3px;
  }

  .elish-tutor-hero .journey-proto-title {
    font-size: clamp(1.4rem, 7vw, 2rem);
    line-height: 1;
  }

  .elish-tutor-hero .journey-proto-subtitle {
    display: none;
  }

  .elish-tutor-clear {
    padding: 9px 11px;
    font-size: 0.72rem;
  }

  .elish-tutor-close {
    padding: 9px 12px;
    font-size: 0.72rem;
  }

  .elish-tutor-help-strip {
    gap: 6px;
    padding: 9px 10px 0;
  }

  .elish-tutor-help-strip span {
    min-height: 26px;
    padding: 5px 8px;
    font-size: 0.66rem;
  }

  .elish-tutor-messages {
    gap: 10px;
    padding: 10px;
  }

  .elish-tutor-avatar {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    font-size: 0.62rem;
  }

  .elish-tutor-avatar--assistant {
    border-radius: 15px;
  }

  .elish-tutor-avatar--user {
    border-radius: 15px;
  }

  .elish-tutor-bubble {
    max-width: 88%;
    padding: 11px 12px;
    border-radius: 18px 18px 18px 7px;
  }

  .elish-tutor-message-row.user .elish-tutor-bubble {
    border-radius: 18px 18px 7px 18px;
  }

  .elish-tutor-starter {
    width: 100%;
    margin-left: 0;
    padding: 10px;
    border-radius: 18px;
  }

  .elish-tutor-form {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    padding: 10px;
  }

  .elish-tutor-tool {
    min-width: 48px;
    min-height: 48px;
    border-radius: 15px;
    padding: 0 10px;
  }

  .elish-tutor-input {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .elish-tutor-mic {
    grid-column: 2;
    grid-row: 2;
  }

  .elish-tutor-send {
    grid-column: 3;
    grid-row: 2;
  }

  .elish-tutor-offline {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .elish-tutor-input {
    min-height: 48px;
    max-height: 92px;
    resize: none;
    border-radius: 15px;
    padding: 11px 12px;
  }

  .elish-tutor-send {
    min-width: 72px;
    min-height: 48px;
    width: auto;
    border-radius: 15px;
    padding: 0 13px;
  }
}

@media (max-width: 560px) {
  #elishTutorPage[style*="display: block"] {
    inset: 0;
  }

  .elish-tutor-page {
    height: 100%;
  }

  .elish-tutor-shell {
    padding: 10px;
  }

  .elish-tutor-help-strip span:nth-child(3) {
    display: none;
  }

  .elish-tutor-starter-grid {
    gap: 7px;
  }

  .elish-tutor-starter-chip {
    padding: 7px 9px;
    font-size: 0.74rem;
  }

  .elish-tutor-form {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .elish-tutor-send {
    width: auto;
    min-height: 48px;
  }
}

/* Modern practice landing refresh: Quiz, Reading, Listening, Writing */
.practice-start-modern {
  --practice-accent: var(--primary);
  --practice-accent-2: var(--primary-light);
  --practice-ink: var(--text-primary);
  --practice-muted: var(--text-secondary);
  isolation: isolate;
  position: relative;
  display: grid;
  gap: clamp(18px, 2.4vw, 26px);
  text-align: left !important;
  padding: clamp(26px, 4vw, 44px) !important;
  border: 1px solid color-mix(in srgb, var(--border-color) 64%, var(--practice-accent) 36%) !important;
  border-radius: 30px !important;
  overflow: hidden;
  background:
    radial-gradient(circle at 83% 14%, color-mix(in srgb, var(--practice-accent) 24%, transparent), transparent 34%),
    radial-gradient(circle at 14% 0%, color-mix(in srgb, var(--practice-accent-2) 16%, transparent), transparent 30%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--card-bg) 88%, var(--practice-accent) 8%),
      color-mix(in srgb, var(--background-secondary) 92%, var(--practice-accent) 4%)) !important;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.practice-start-modern::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.08), transparent 28%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 18px);
  opacity: 0.55;
  z-index: -1;
}

.practice-start-modern::after {
  content: "";
  position: absolute;
  right: clamp(24px, 7vw, 92px);
  top: clamp(28px, 7vw, 88px);
  width: clamp(140px, 22vw, 260px);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--practice-accent) 38%, transparent);
  border-radius: 34% 66% 48% 52%;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--practice-accent) 32%, transparent), transparent 64%),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--practice-accent-2) 30%, transparent), transparent 62%);
  filter: blur(0.2px);
  opacity: 0.36;
  transform: rotate(-10deg);
  pointer-events: none;
  z-index: -1;
}

.practice-start--quiz {
  --practice-accent: #60a5fa;
  --practice-accent-2: #22d3ee;
  --practice-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Zm3 5.2 2.1 2.1L15.8 4.6 17.2 6l-7.1 7.1L6.6 9.6 8 8.2ZM7 16h10v2H7v-2Z'/%3E%3C/svg%3E");
}

.practice-start--reading {
  --practice-accent: #38bdf8;
  --practice-accent-2: #a7f3d0;
  --practice-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4 4.7C5.5 4.2 7.5 4 9.2 4c1.2 0 2 .2 2.8.7.8-.5 1.6-.7 2.8-.7 1.7 0 3.7.2 5.2.7V19c-1.5-.5-3.4-.7-5.1-.7-1.2 0-2 .2-2.9.8-.9-.6-1.7-.8-2.9-.8-1.7 0-3.6.2-5.1.7V4.7Zm7 2.1c-.4-.3-1-.4-1.9-.4-1 0-2.1.1-3.1.3v9.4c1-.2 2.1-.3 3.1-.3.7 0 1.3.1 1.9.3V6.8Zm2 9.3c.6-.2 1.2-.3 1.9-.3 1 0 2.1.1 3.1.3V6.7c-1-.2-2.1-.3-3.1-.3-.9 0-1.5.1-1.9.4v9.3Z'/%3E%3C/svg%3E");
}

.practice-start--listening {
  --practice-accent: #f59e0b;
  --practice-accent-2: #fb7185;
  --practice-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 3a8 8 0 0 0-8 8v5a3 3 0 0 0 3 3h2v-8H6a6 6 0 0 1 12 0h-3v8h2a3 3 0 0 0 3-3v-5a8 8 0 0 0-8-8Zm-5 10h1v4H7a1 1 0 0 1-1-1v-3h1Zm10 4h-1v-4h2v3a1 1 0 0 1-1 1Z'/%3E%3C/svg%3E");
}

.practice-start--writing {
  --practice-accent: #f472b6;
  --practice-accent-2: #c084fc;
  --practice-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M16.9 3.4a2.1 2.1 0 0 1 3 3L9.7 16.6 5.5 18l1.4-4.2L16.9 3.4ZM4 20h16v2H4v-2Zm3.9-5.1-.3.9.9-.3 10-10-.6-.6-10 10Z'/%3E%3C/svg%3E");
}

.practice-start-modern .quiz-start-icon {
  display: inline-grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 0 18px !important;
  border-radius: 20px;
  font-size: 0 !important;
  color: transparent !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--practice-accent) 82%, white 18%),
      color-mix(in srgb, var(--practice-accent-2) 72%, white 28%));
  box-shadow:
    0 18px 38px color-mix(in srgb, var(--practice-accent) 22%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.practice-start-modern .quiz-start-icon::before {
  content: "";
  width: 31px;
  height: 31px;
  background: #061411;
  -webkit-mask: var(--practice-icon) center / contain no-repeat;
  mask: var(--practice-icon) center / contain no-repeat;
}

.practice-start-modern h2 {
  max-width: 680px;
  margin: 0 0 10px !important;
  color: var(--practice-ink) !important;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.7vw, 4.4rem) !important;
  line-height: 0.95;
  letter-spacing: -0.075em;
}

.practice-start-modern p {
  max-width: 690px;
  margin: 0 0 8px !important;
  color: var(--practice-muted) !important;
  font-size: clamp(0.95rem, 1.35vw, 1.08rem) !important;
  line-height: 1.65;
}

.practice-start-modern .level-select {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 6px 0 0 !important;
}

.practice-start-modern .level-option {
  min-height: 86px;
  padding: 16px !important;
  border: 1px solid color-mix(in srgb, var(--border-color) 72%, var(--practice-accent) 28%) !important;
  border-radius: 18px !important;
  text-align: left !important;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--card-bg) 74%, var(--practice-accent) 8%),
      color-mix(in srgb, var(--background-secondary) 84%, transparent)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.practice-start-modern .level-option:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--practice-accent) 66%, var(--border-color)) !important;
}

.practice-start-modern .level-option.selected {
  border-color: color-mix(in srgb, var(--practice-accent) 76%, white 10%) !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--practice-accent) 22%, var(--card-bg) 78%),
      color-mix(in srgb, var(--practice-accent-2) 16%, var(--background-secondary) 84%)) !important;
  box-shadow:
    0 16px 34px color-mix(in srgb, var(--practice-accent) 14%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.11);
}

.practice-start-modern .level-option-title {
  color: var(--text-primary);
  font-size: 0.98rem;
  font-weight: 950;
  letter-spacing: -0.02em;
}

.practice-start-modern .level-option-count {
  margin-top: 6px;
  color: var(--text-secondary);
  font-size: 0.78rem;
}

.practice-start-modern .quiz-info {
  justify-content: flex-start !important;
  flex-wrap: wrap;
  gap: 10px !important;
  margin: 0 !important;
}

.practice-start-modern .quiz-info-item {
  display: inline-flex;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--border-color) 76%, var(--practice-accent) 24%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--background-secondary) 78%, transparent);
  color: var(--text-secondary);
}

.practice-start-modern .quiz-info-item span:first-child {
  color: color-mix(in srgb, var(--practice-accent) 72%, white 18%);
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.68rem;
}

.practice-start-modern .session-mode-card {
  margin: 0 !important;
  border-radius: 22px !important;
  border-color: color-mix(in srgb, var(--border-color) 68%, var(--practice-accent) 32%) !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--background-secondary) 72%, var(--practice-accent) 8%),
      color-mix(in srgb, var(--card-bg) 84%, transparent)) !important;
}

.practice-start-modern .session-mode-chip {
  border-radius: 999px;
}

.practice-start-modern .session-mode-chip.active,
.practice-start-modern .session-mode-chip.is-active {
  background: linear-gradient(135deg, var(--practice-accent), var(--practice-accent-2)) !important;
  color: #04120c !important;
}

.practice-start-modern .quiz-btn,
.practice-start-modern .reading-btn.primary {
  min-width: min(260px, 100%);
  border: 0 !important;
  border-radius: 18px !important;
  padding: 16px 28px !important;
  background: linear-gradient(135deg, var(--practice-accent), var(--practice-accent-2)) !important;
  color: #04120c !important;
  font-weight: 950 !important;
  box-shadow: 0 18px 38px color-mix(in srgb, var(--practice-accent) 22%, transparent) !important;
}

.practice-start-modern .reading-buttons {
  justify-content: flex-start;
  margin-top: 0;
}

@media (max-width: 760px) {
  .practice-start-modern {
    gap: 15px;
    padding: 22px 16px !important;
    border-radius: 24px !important;
  }

  .practice-start-modern::after {
    right: -44px;
    top: -30px;
    width: 150px;
    opacity: 0.22;
  }

  .practice-start-modern .quiz-start-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    margin-bottom: 12px !important;
  }

  .practice-start-modern .quiz-start-icon::before {
    width: 26px;
    height: 26px;
  }

  .practice-start-modern h2 {
    font-size: clamp(1.75rem, 9vw, 2.65rem) !important;
  }

  .practice-start-modern .level-select {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .practice-start-modern .level-option {
    min-height: 70px;
    padding: 14px !important;
  }

  .practice-start-modern .quiz-info {
    align-items: stretch;
    padding: 0;
  }

  .practice-start-modern .quiz-info-item {
    width: 100%;
    justify-content: space-between;
  }

  .practice-start-modern .reading-buttons,
  .practice-start-modern .quiz-btn {
    width: 100%;
  }
}

/* Daily Challenge landing: high-energy sprint arena */
#challengePage.challenge-page {
  background:
    radial-gradient(circle at 50% -8%, rgba(255, 184, 77, 0.18), transparent 32%),
    radial-gradient(circle at 22% 20%, rgba(255, 77, 109, 0.2), transparent 30%),
    radial-gradient(circle at 82% 42%, rgba(124, 58, 237, 0.16), transparent 34%),
    linear-gradient(135deg, #180b11 0%, #241015 42%, #120b13 100%) !important;
}

#challengePage .challenge-container {
  max-width: min(760px, calc(100vw - 32px));
  position: relative;
}

#challengePage .challenge-container::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 22px),
    radial-gradient(circle at 50% 45%, rgba(255, 122, 24, 0.08), transparent 42%);
  mask-image: linear-gradient(180deg, black, transparent 88%);
  opacity: 0.65;
}

#challengePage .challenge-title {
  color: #fff7ed;
  text-shadow: 0 0 22px rgba(251, 146, 60, 0.35);
}

#challengePage .challenge-close {
  border: 1px solid rgba(251, 146, 60, 0.28);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(251, 146, 60, 0.1)) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

#challengeStartScreen {
  --challenge-ember: #ff7a18;
  --challenge-hot: #ff3d5a;
  --challenge-gold: #ffd166;
  --challenge-violet: #7c3aed;
  isolation: isolate;
  position: relative;
  width: min(620px, 100%);
  margin: 20px auto 0;
  padding: clamp(30px, 5vw, 56px) !important;
  border: 1px solid transparent !important;
  border-radius: 34px !important;
  overflow: hidden;
  text-align: center !important;
  background:
    linear-gradient(145deg, rgba(25, 12, 18, 0.96), rgba(7, 16, 16, 0.94)) padding-box,
    conic-gradient(from 210deg,
      rgba(255, 122, 24, 0.2),
      rgba(255, 209, 102, 0.86),
      rgba(255, 61, 90, 0.76),
      rgba(124, 58, 237, 0.52),
      rgba(255, 122, 24, 0.2)) border-box !important;
  box-shadow:
    0 32px 90px rgba(0, 0, 0, 0.44),
    0 0 70px rgba(255, 122, 24, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

#challengeStartScreen::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 209, 102, 0.18), transparent 28%),
    radial-gradient(circle at 12% 18%, rgba(255, 61, 90, 0.18), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent 42%);
  pointer-events: none;
}

#challengeStartScreen::after {
  content: "";
  position: absolute;
  right: -90px;
  top: -80px;
  width: 260px;
  aspect-ratio: 1;
  border-radius: 42% 58% 54% 46%;
  border: 1px solid rgba(255, 209, 102, 0.32);
  background:
    radial-gradient(circle at 45% 45%, rgba(255, 122, 24, 0.26), transparent 55%),
    linear-gradient(135deg, rgba(255, 61, 90, 0.16), transparent);
  transform: rotate(-14deg);
  opacity: 0.8;
  pointer-events: none;
}

#challengeStartScreen .quiz-start-icon {
  display: inline-grid;
  place-items: center;
  width: 70px;
  height: 70px;
  margin: 0 auto 24px !important;
  border-radius: 24px;
  color: transparent !important;
  font-size: 0 !important;
  background:
    linear-gradient(135deg, var(--challenge-gold), var(--challenge-ember) 54%, var(--challenge-hot));
  box-shadow:
    0 20px 44px rgba(255, 122, 24, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

#challengeStartScreen .quiz-start-icon::before {
  content: "";
  width: 34px;
  height: 42px;
  background: #210c11;
  clip-path: polygon(48% 0, 86% 0, 64% 38%, 100% 38%, 38% 100%, 48% 55%, 14% 55%);
}

#challengeStartTitle {
  color: #fff7ed !important;
  font-size: clamp(2rem, 4.4vw, 3.7rem) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.065em;
  text-shadow: 0 0 28px rgba(255, 122, 24, 0.22);
}

#challengeStartDescription {
  max-width: 520px;
  margin: 0 auto 26px !important;
  color: rgba(255, 247, 237, 0.78) !important;
  line-height: 1.65;
}

#challengeStartScreen .quiz-info {
  justify-content: center !important;
  gap: 10px !important;
  margin-bottom: 24px !important;
}

#challengeStartScreen .quiz-info-item {
  min-height: 42px;
  padding: 10px 13px;
  border: 1px solid rgba(255, 209, 102, 0.24);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 122, 24, 0.12), rgba(255, 255, 255, 0.04));
  color: rgba(255, 247, 237, 0.76);
}

#challengeStartScreen .quiz-info-item span:first-child {
  color: var(--challenge-gold);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#challengeStartScreen .challenge-toggle {
  border: 1px solid rgba(255, 209, 102, 0.18) !important;
  border-radius: 20px !important;
  background:
    linear-gradient(135deg, rgba(255, 122, 24, 0.1), rgba(124, 58, 237, 0.08)),
    rgba(8, 14, 18, 0.72) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#challengeStartScreen .challenge-toggle-label {
  color: rgba(255, 247, 237, 0.82);
  font-weight: 850;
}

#challengeStartScreen .challenge-toggle-switch input:checked + .challenge-toggle-slider {
  background: linear-gradient(135deg, var(--challenge-ember), var(--challenge-hot));
}

#challengeStartButton {
  min-width: min(300px, 100%);
  border: 0 !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, var(--challenge-gold), var(--challenge-ember) 52%, var(--challenge-hot)) !important;
  color: #210c11 !important;
  font-weight: 950 !important;
  box-shadow:
    0 22px 42px rgba(255, 122, 24, 0.28),
    0 0 32px rgba(255, 61, 90, 0.16) !important;
}

#challengeStartButton:hover {
  transform: translateY(-2px);
  box-shadow:
    0 28px 52px rgba(255, 122, 24, 0.34),
    0 0 44px rgba(255, 61, 90, 0.22) !important;
}

/* Daily Challenge active run: sprint HUD + arena question panel */
#challengePage:has(#challengeQuestionScreen[style*="display: block"]) .challenge-container {
  max-width: min(920px, calc(100vw - 32px));
  padding-top: 22px;
}

#challengePage:has(#challengeQuestionScreen[style*="display: block"]) .challenge-header {
  margin-bottom: 14px;
}

#challengePage:has(#challengeQuestionScreen[style*="display: block"]) .challenge-timer {
  width: min(420px, 100%);
  margin: 0 auto 18px;
  padding: 16px 20px;
  border: 1px solid rgba(255, 209, 102, 0.22);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255, 122, 24, 0.1), rgba(124, 58, 237, 0.08)),
    rgba(14, 10, 15, 0.78);
  box-shadow:
    0 22px 50px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

#challengePage:has(#challengeQuestionScreen[style*="display: block"]) .challenge-timer-display {
  color: #fff7ed;
  font-size: clamp(3rem, 8vw, 5.3rem);
  line-height: 0.9;
  letter-spacing: -0.06em;
  text-shadow:
    0 0 28px rgba(255, 122, 24, 0.42),
    0 0 58px rgba(255, 61, 90, 0.18);
}

#challengePage:has(#challengeQuestionScreen[style*="display: block"]) .challenge-timer-display.warning {
  color: #ffd166;
}

#challengePage:has(#challengeQuestionScreen[style*="display: block"]) .challenge-timer-display.danger {
  color: #ff5a70;
}

#challengePage:has(#challengeQuestionScreen[style*="display: block"]) .challenge-progress {
  color: rgba(255, 247, 237, 0.7);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#challengePage:has(#challengeQuestionScreen[style*="display: block"]) .challenge-speed-banner {
  width: min(820px, 100%);
  margin: 0 auto 16px;
  border: 1px solid rgba(255, 209, 102, 0.18);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 122, 24, 0.1), rgba(255, 61, 90, 0.08)),
    rgba(16, 12, 18, 0.76);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#challengePage:has(#challengeQuestionScreen[style*="display: block"]) .challenge-speed-banner .speed-banner-label {
  color: #ffd166;
}

#challengePage:has(#challengeQuestionScreen[style*="display: block"]) .challenge-speed-banner .speed-banner-message {
  color: rgba(255, 247, 237, 0.84);
}

#challengePage:has(#challengeQuestionScreen[style*="display: block"]) .challenge-ai-tutor-card {
  display: none !important;
}

#challengePage:has(#challengeQuestionScreen[style*="display: block"]) .challenge-question-card {
  isolation: isolate;
  width: min(820px, 100%);
  margin: 0 auto 18px;
  padding: clamp(22px, 3.5vw, 34px);
  border: 1px solid transparent;
  border-radius: 30px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(11, 18, 18, 0.96), rgba(20, 10, 16, 0.96)) padding-box,
    linear-gradient(135deg, rgba(255, 209, 102, 0.64), rgba(255, 61, 90, 0.52), rgba(124, 58, 237, 0.4)) border-box;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.38),
    0 0 52px rgba(255, 122, 24, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

#challengePage:has(#challengeQuestionScreen[style*="display: block"]) .challenge-question-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at 88% 6%, rgba(255, 209, 102, 0.14), transparent 28%),
    radial-gradient(circle at 0% 100%, rgba(255, 61, 90, 0.12), transparent 34%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 18px);
}

#challengePage:has(#challengeQuestionScreen[style*="display: block"]) .combo-flame-indicator--challenge {
  top: -16px;
  right: 18px;
}

#challengePage:has(#challengeQuestionScreen[style*="display: block"]) .combo-flame-indicator--challenge .combo-flame-pill {
  border-color: rgba(255, 209, 102, 0.34);
  background:
    linear-gradient(135deg, rgba(255, 122, 24, 0.24), rgba(255, 61, 90, 0.18)),
    rgba(12, 16, 18, 0.92);
  color: #ffd166;
}

#challengePage:has(#challengeQuestionScreen[style*="display: block"]) .challenge-question-number {
  display: inline-flex;
  width: auto;
  margin-bottom: 14px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 209, 102, 0.18);
  border-radius: 999px;
  background: rgba(255, 122, 24, 0.1);
  color: #ffd166;
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

#challengePage:has(#challengeQuestionScreen[style*="display: block"]) .challenge-question-text {
  max-width: 720px;
  color: #fff7ed;
  font-size: clamp(1.2rem, 2.4vw, 1.75rem);
  font-weight: 900;
  line-height: 1.32;
  letter-spacing: -0.035em;
  margin-bottom: 22px;
}

#challengePage:has(#challengeQuestionScreen[style*="display: block"]) .challenge-options {
  gap: 12px;
}

#challengePage:has(#challengeQuestionScreen[style*="display: block"]) .challenge-option {
  min-height: 62px;
  padding: 15px 18px;
  border: 1px solid rgba(255, 209, 102, 0.18);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 122, 24, 0.045)),
    rgba(6, 18, 17, 0.72);
  color: rgba(255, 247, 237, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

#challengePage:has(#challengeQuestionScreen[style*="display: block"]) .challenge-option:hover:not(:disabled) {
  border-color: rgba(255, 209, 102, 0.62);
  background:
    linear-gradient(135deg, rgba(255, 122, 24, 0.15), rgba(255, 61, 90, 0.08)),
    rgba(8, 20, 19, 0.86);
  transform: translateX(4px) translateY(-1px);
}

#challengePage:has(#challengeQuestionScreen[style*="display: block"]) .challenge-option .option-letter {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 209, 102, 0.2), rgba(255, 122, 24, 0.12));
  color: #ffd166;
  font-weight: 950;
}

#challengePage:has(#challengeQuestionScreen[style*="display: block"]) .challenge-option.correct {
  border-color: rgba(74, 222, 128, 0.72);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.22), rgba(20, 83, 45, 0.58));
  color: #dcfce7;
}

#challengePage:has(#challengeQuestionScreen[style*="display: block"]) .challenge-option.incorrect {
  border-color: rgba(251, 113, 133, 0.72);
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.22), rgba(88, 28, 45, 0.62));
  color: #ffe4e6;
}

#challengePage:has(#challengeQuestionScreen[style*="display: block"]) #challengeReportBtn {
  background: linear-gradient(135deg, rgba(255, 209, 102, 0.18), rgba(255, 122, 24, 0.12));
  color: #ffd166;
  border: 1px solid rgba(255, 209, 102, 0.26);
}

@media (max-width: 680px) {
  #challengePage:has(#challengeQuestionScreen[style*="display: block"]) .challenge-container {
    max-width: none;
    padding: 14px 12px calc(104px + env(safe-area-inset-bottom, 0px));
  }

  #challengePage:has(#challengeQuestionScreen[style*="display: block"]) .challenge-timer {
    margin-bottom: 12px;
    padding: 12px 14px;
    border-radius: 22px;
  }

  #challengePage:has(#challengeQuestionScreen[style*="display: block"]) .challenge-speed-banner {
    margin-bottom: 12px;
    border-radius: 18px;
  }

  #challengePage:has(#challengeQuestionScreen[style*="display: block"]) .challenge-question-card {
    padding: 20px 14px 16px;
    border-radius: 24px;
  }

  #challengePage:has(#challengeQuestionScreen[style*="display: block"]) .challenge-question-text {
    font-size: 1.1rem;
    margin-bottom: 16px;
  }

  #challengePage:has(#challengeQuestionScreen[style*="display: block"]) .challenge-option {
    min-height: 54px;
    padding: 12px 13px;
    border-radius: 15px;
    gap: 11px;
  }
}

@media (max-width: 680px) {
  #challengePage .challenge-container {
    max-width: none;
    padding: 18px 12px calc(112px + env(safe-area-inset-bottom, 0px));
  }

  #challengeStartScreen {
    margin-top: 12px;
    padding: 28px 18px !important;
    border-radius: 28px !important;
  }

  #challengeStartScreen .quiz-start-icon {
    width: 58px;
    height: 58px;
    border-radius: 20px;
    margin-bottom: 18px !important;
  }

  #challengeStartScreen .quiz-start-icon::before {
    width: 28px;
    height: 34px;
  }

  #challengeStartScreen .quiz-info {
    display: grid;
    grid-template-columns: 1fr;
  }

  #challengeStartScreen .quiz-info-item {
    justify-content: space-between;
  }
}

/* English Lab Tutor Chatbot */
.ai-tutor-widget {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: calc(104px + env(safe-area-inset-bottom, 0px));
  z-index: 2300;
  font-family: 'Plus Jakarta Sans', 'DM Sans', sans-serif;
}

.ai-tutor-launcher {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--primary, #22c55e) 55%, white 20%);
  border-radius: 999px;
  padding: 10px 16px 10px 10px;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--primary, #22c55e) 78%, #ffffff 22%),
      color-mix(in srgb, var(--primary-light, #67e8f9) 62%, #ffffff 38%));
  color: #04120c;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28), 0 0 24px color-mix(in srgb, var(--primary, #22c55e) 38%, transparent);
  cursor: pointer;
  font-weight: 900;
}

.ai-tutor-launcher-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.86);
  color: color-mix(in srgb, var(--primary-dark, #047857) 76%, #000000 24%);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.ai-tutor-launcher-text {
  font-size: 0.9rem;
}

.ai-tutor-panel {
  display: none;
  width: min(380px, calc(100vw - 28px));
  height: min(560px, calc(100dvh - 140px));
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border-color, rgba(255,255,255,0.2)) 70%, var(--primary, #22c55e) 30%);
  border-radius: 28px;
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--primary, #22c55e) 18%, transparent), transparent 36%),
    color-mix(in srgb, var(--card-bg, #071d16) 94%, #000000 6%);
  color: var(--text-primary, #f8fafc);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.42);
}

.ai-tutor-widget.is-expanded .ai-tutor-panel {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.ai-tutor-widget.is-expanded .ai-tutor-launcher {
  display: none;
}

.ai-tutor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-color, rgba(255,255,255,0.2)) 72%, transparent);
}

.ai-tutor-kicker {
  color: var(--primary-light, #67e8f9);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ai-tutor-title {
  margin-top: 3px;
  color: var(--text-primary, #f8fafc);
  font-size: 0.95rem;
  font-weight: 900;
}

.ai-tutor-minimize {
  border: 1px solid color-mix(in srgb, var(--border-color, rgba(255,255,255,0.2)) 80%, white 10%);
  border-radius: 999px;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--background-secondary, #0f172a) 84%, transparent);
  color: var(--text-secondary, #cbd5e1);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 800;
}

.ai-tutor-messages {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ai-tutor-message-row {
  display: flex;
}

.ai-tutor-message-row.user {
  justify-content: flex-end;
}

.ai-tutor-message-row.assistant {
  justify-content: flex-start;
}

.ai-tutor-bubble {
  max-width: 84%;
  padding: 12px 14px;
  border-radius: 18px;
  color: var(--text-primary, #f8fafc);
  background: color-mix(in srgb, var(--background-secondary, #0f172a) 80%, var(--primary, #22c55e) 8%);
  border: 1px solid color-mix(in srgb, var(--border-color, rgba(255,255,255,0.2)) 76%, transparent);
  font-size: 0.9rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.ai-tutor-message-row.user .ai-tutor-bubble {
  color: #03120b;
  background: linear-gradient(135deg, var(--primary-light, #67e8f9), color-mix(in srgb, var(--primary, #22c55e) 70%, #ffffff 30%));
  border-color: transparent;
}

.ai-tutor-message-row.is-typing .ai-tutor-bubble {
  color: var(--text-secondary, #cbd5e1);
  font-style: italic;
}

.ai-tutor-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 14px;
  border-top: 1px solid color-mix(in srgb, var(--border-color, rgba(255,255,255,0.2)) 72%, transparent);
}

.ai-tutor-input {
  min-height: 48px;
  max-height: 110px;
  resize: vertical;
  border: 1px solid color-mix(in srgb, var(--border-color, rgba(255,255,255,0.2)) 80%, var(--primary, #22c55e) 20%);
  border-radius: 16px;
  padding: 12px 13px;
  background: color-mix(in srgb, var(--background-secondary, #0f172a) 88%, transparent);
  color: var(--text-primary, #f8fafc);
  outline: none;
}

.ai-tutor-input::placeholder {
  color: var(--text-muted, #94a3b8);
}

.ai-tutor-send {
  align-self: end;
  min-height: 48px;
  border: 0;
  border-radius: 16px;
  padding: 0 16px;
  background: linear-gradient(135deg, var(--primary, #22c55e), var(--primary-light, #67e8f9));
  color: #03120b;
  cursor: pointer;
  font-weight: 900;
}

.ai-tutor-send:disabled,
.ai-tutor-input:disabled {
  opacity: 0.62;
  cursor: wait;
}

@media (max-width: 640px) {
  .ai-tutor-widget {
    right: 12px;
    bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  }

  .ai-tutor-panel {
    width: calc(100vw - 24px);
    height: min(520px, calc(100dvh - 126px));
    border-radius: 24px;
  }

  .ai-tutor-form {
    grid-template-columns: 1fr;
  }

  .ai-tutor-send {
    width: 100%;
  }
}

#quizPage:has(#quizQuestionScreen[style*="display: block"]) .combo-flame-indicator {
  top: 0 !important;
  right: 0 !important;
}

@media (max-width: 768px) {
  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .page-container {
    max-width: none !important;
    padding: 58px 14px 24px !important;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .page-header {
    max-width: none !important;
    margin-bottom: 8px !important;
    padding: 9px 12px !important;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .page-title {
    font-size: 1.05rem !important;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) #quizQuestionScreen {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 8px !important;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) #quizScoreDisplay,
  #quizPage:has(#quizQuestionScreen[style*="display: block"]) #quizToolbox {
    grid-column: 1 !important;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) #quizScoreDisplay {
    grid-row: 1 !important;
    justify-self: start !important;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) #quizToolbox {
    grid-row: 1 !important;
    justify-self: end !important;
    gap: 7px !important;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) .quiz-toolbox-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 14px !important;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) #quizHeader {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
  }

  #quizPage:has(#quizQuestionScreen[style*="display: block"]) #questionText {
    font-size: clamp(1.65rem, 8.2vw, 2.25rem) !important;
  }

#quizPage:has(#quizQuestionScreen[style*="display: block"]) .quiz-option {
    min-height: 60px !important;
    padding: 13px 16px !important;
  }
}

/* Local preview: quiet hero corner geometry. Keeps the center calm and readable. */
#mainHeroCard .hero-corner-deco{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:5;
  overflow:hidden;
}

#mainHeroCard .hero-title,
#mainHeroCard .level-badge,
#mainHeroCard .xp-progress,
#mainHeroCard > p{
  position:relative;
  z-index:6;
}

#mainHeroCard .hero-geo{
  position:absolute;
  display:block;
  opacity:.42;
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.2));
  animation:heroCornerGeoFloat 8s ease-in-out infinite;
}

#mainHeroCard .hero-geo--ring{
  width:118px;
  height:118px;
  left:32px;
  top:28px;
  border-radius:999px;
  border:1px solid rgba(245,255,247,.34);
  box-shadow:inset 0 0 34px rgba(115,212,163,.12), 0 0 30px rgba(115,212,163,.14);
  animation-delay:-3s;
}

#mainHeroCard .hero-geo--triangle{
  width:92px;
  height:80px;
  right:42px;
  top:34px;
  background:linear-gradient(180deg, rgba(255,248,220,.34), rgba(115,212,163,.14));
  clip-path:polygon(50% 0, 100% 100%, 0 100%);
  transform:rotate(13deg);
  animation-delay:-1.5s;
}

#mainHeroCard .hero-geo--diamond{
  width:56px;
  height:56px;
  right:52px;
  bottom:42px;
  border-radius:12px;
  border:1px solid rgba(127,210,255,.28);
  background:linear-gradient(135deg, rgba(115,212,163,.28), rgba(127,210,255,.14));
  transform:rotate(45deg);
  animation-delay:-4.5s;
}

#mainHeroCard .hero-geo--dot{
  width:14px;
  height:14px;
  left:70px;
  bottom:52px;
  border-radius:999px;
  background:rgba(255,244,200,.68);
  box-shadow:0 0 24px rgba(255,244,200,.34);
  animation-delay:-2.2s;
}

@keyframes heroCornerGeoFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(var(--hero-geo-rot, 0deg));opacity:.34}
  50%{transform:translate3d(0,7px,0) rotate(var(--hero-geo-rot, 0deg));opacity:.52}
}

@media (max-width: 768px){
  #mainHeroCard .hero-geo{opacity:.38}
  #mainHeroCard .hero-geo--ring{width:78px;height:78px;left:18px;top:20px}
  #mainHeroCard .hero-geo--triangle{width:62px;height:54px;right:18px;top:26px}
  #mainHeroCard .hero-geo--diamond{width:34px;height:34px;right:28px;bottom:24px;opacity:.28}
  #mainHeroCard .hero-geo--dot{display:block;width:9px;height:9px;left:34px;bottom:34px}
}

/* Journey HP stability: keep the map readable without animated decoration debt. */
@media (max-width: 820px), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .journey-shell--englishlab .journey-map-stage,
  .journey-shell--englishlab .journey-map-card,
  .journey-shell--englishlab .journey-map-scroll,
  .journey-shell--englishlab .journey-map {
    contain: layout paint style !important;
  }

  .journey-shell--englishlab .journey-map__mist,
  .journey-shell--englishlab .journey-map__terrain,
  .journey-shell--englishlab .journey-map__beacon,
  .journey-shell--englishlab .journey-map__particle,
  .journey-shell--englishlab .journey-map__orbiter,
  .journey-shell--englishlab .journey-map__trail-shadow,
  .journey-shell--englishlab .journey-map__traveler-glow,
  .journey-shell--englishlab .level-node__halo,
  .journey-shell--englishlab .level-node__planet-ring,
  .journey-shell--englishlab .level-node__planet-moon {
    display: none !important;
  }

  .journey-shell--englishlab .journey-map-stage__hud,
  .journey-shell--englishlab .journey-map-card,
  .journey-shell--englishlab .level-node__content,
  .journey-shell--englishlab .journey-level-popup,
  .journey-shell--englishlab .journey-map__minimal-landmark {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    filter: none !important;
  }

  .journey-shell--englishlab .journey-map__star,
  .journey-shell--englishlab .journey-map__constellation-dot,
  .journey-shell--englishlab .level-node,
  .journey-shell--englishlab .level-node *,
  .journey-shell--englishlab .journey-level-popup,
  .journey-shell--englishlab .journey-map__trail-progress {
    animation: none !important;
    transition-duration: 1ms !important;
    filter: none !important;
  }

  .journey-shell--englishlab .journey-map__trail-progress {
    stroke-dasharray: none !important;
  }
}

/* Dashboard clarity pass: keep Home short, then expose the full feature map on demand. */
.dashboard-lean-guided #mainPage .main-home-strip,
.dashboard-lean-guided #mainPage .main-home-focus-grid,
.dashboard-lean-guided #mainPage .main-home-quick-grid,
.dashboard-lean-guided #mainPage .main-home-more-label,
.dashboard-lean-guided #mainPage .cards-grid,
.dashboard-lean-guided #mainPage .main-home-bottom-grid,
.dashboard-lean-guided #mainPage .main-home-footer-note {
  display: none !important;
}

.home-discovery-card {
  margin: 16px 0 22px;
  padding: clamp(16px, 2.4vw, 22px);
  border-radius: 22px;
  border: 1px solid var(--el-theme-border, var(--border-color));
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--primary-light) 22%, transparent), transparent 36%),
    linear-gradient(135deg, color-mix(in srgb, var(--card-bg) 86%, var(--primary) 14%), color-mix(in srgb, var(--background-secondary) 82%, #000 18%));
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.16);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
}

.home-discovery-card__kicker {
  margin: 0 0 7px;
  color: var(--primary-light);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.home-discovery-card__title {
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(1.1rem, 2vw, 1.42rem);
  line-height: 1.15;
}

.home-discovery-card__copy {
  margin: 8px 0 0;
  color: var(--text-secondary);
  line-height: 1.55;
}

.home-discovery-card__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.home-discovery-btn,
.feature-guide-action,
.feature-guide-close,
.stat-info-action {
  border: 1px solid color-mix(in srgb, var(--primary-light) 42%, transparent);
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #06120f;
  border-radius: 999px;
  padding: 11px 16px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--primary) 24%, transparent);
}

.home-discovery-btn.secondary,
.feature-guide-action.secondary,
.stat-info-action.secondary {
  background: color-mix(in srgb, var(--card-bg) 86%, var(--primary) 14%);
  color: var(--text-primary);
  box-shadow: none;
}

.stat-badge {
  cursor: help;
}

.stat-badge .stat-badge-label {
  color: currentColor;
  opacity: .78;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.stat-badge.level .stat-badge-label {
  margin-left: 4px;
}

.feature-guide-overlay {
  position: fixed;
  inset: 0;
  z-index: 3600;
  display: none;
  place-items: center;
  padding: 22px;
  background: rgba(1, 6, 12, 0.72);
}

.feature-guide-overlay.show {
  display: grid;
}

.feature-guide-dialog {
  width: min(980px, 96vw);
  max-height: min(86dvh, 820px);
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid color-mix(in srgb, var(--primary-light) 36%, transparent);
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--primary-light) 20%, transparent), transparent 36%),
    linear-gradient(180deg, color-mix(in srgb, var(--card-bg) 94%, #fff 6%), color-mix(in srgb, var(--background-secondary) 88%, #000 12%));
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.46);
}

.feature-guide-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 24px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--primary-light) 18%, transparent);
}

.feature-guide-kicker {
  margin: 0 0 8px;
  color: var(--primary-light);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.feature-guide-title {
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
}

.feature-guide-subtitle {
  margin: 8px 0 0;
  color: var(--text-secondary);
  line-height: 1.55;
}

.feature-guide-close {
  width: 42px;
  height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  font-size: 20px;
}

.feature-guide-body {
  max-height: calc(min(86dvh, 820px) - 126px);
  overflow: auto;
  padding: 18px 24px 24px;
}

.feature-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.feature-guide-section {
  padding: 16px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--primary-light) 18%, transparent);
  background: color-mix(in srgb, var(--card-bg) 82%, var(--primary) 8%);
}

.feature-guide-section h3 {
  margin: 0 0 12px;
  color: var(--text-primary);
  font-size: 1rem;
}

.feature-guide-item {
  width: 100%;
  margin-top: 9px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--primary-light) 15%, transparent);
  background: color-mix(in srgb, var(--background-secondary) 88%, transparent);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.feature-guide-item:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary-light) 44%, transparent);
}

.feature-guide-item strong,
.feature-guide-item span {
  display: block;
}

.feature-guide-item strong {
  margin-bottom: 4px;
  font-size: .95rem;
}

.feature-guide-item span {
  color: var(--text-secondary);
  font-size: .84rem;
  line-height: 1.45;
}

.stat-info-dialog {
  width: min(520px, 94vw);
}

.stat-info-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

@media (min-width: 769px) {
  .englishlab-dock {
    width: min(560px, calc(100vw - 64px)) !important;
  }

  .englishlab-dock__item {
    flex: 1 1 0 !important;
    min-width: 68px !important;
  }
}

@media (max-width: 760px) {
  .home-discovery-card {
    grid-template-columns: 1fr;
  }

  .home-discovery-card__actions {
    justify-content: stretch;
  }

  .home-discovery-btn {
    flex: 1 1 150px;
  }

  .feature-guide-grid {
    grid-template-columns: 1fr;
  }

  .feature-guide-overlay {
    padding: 12px;
  }

  .feature-guide-head,
  .feature-guide-body {
    padding-left: 16px;
    padding-right: 16px;
  }

  #mainPage .stat-badge .stat-badge-label {
    font-size: 8px;
  }
}

@media (max-width: 768px) {
  #mainPage .top-bar {
    height: auto !important;
    min-height: 62px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 8px !important;
    overflow: visible !important;
    z-index: 5200 !important;
  }

  #mainPage .profile-section {
    padding: 4px 6px !important;
    gap: 7px !important;
    flex: 0 0 auto !important;
  }

  #mainPage .user-name {
    display: none !important;
  }

  #mainPage .avatar {
    width: 34px !important;
    height: 34px !important;
    font-size: 15px !important;
  }

  #mainPage .stats-section {
    display: flex !important;
    align-items: center !important;
    flex: 1 1 0 !important;
    gap: 6px !important;
    min-width: 0 !important;
    justify-content: center !important;
    overflow: visible !important;
    margin: 0 14px !important;
    padding: 0 4px !important;
  }

  #mainPage .stat-badge {
    min-height: 34px !important;
    padding: 5px 8px !important;
    font-size: 11px !important;
    gap: 5px !important;
    white-space: nowrap !important;
  }

  #mainPage .stat-badge.streak {
    display: flex !important;
  }

  #mainPage .stat-badge.xp {
    display: flex !important;
    max-width: 128px !important;
  }

  #mainPage .stat-badge.ecoins,
  #mainPage .stat-badge.level {
    display: none !important;
  }

  #mainPage .topbar-actions {
    flex: 0 0 auto !important;
    gap: 6px !important;
    margin-left: auto !important;
    overflow: visible !important;
    position: relative !important;
  }

  .topbar-actions .speaker-btn,
  .topbar-actions .notification-bell {
    display: none !important;
  }

  #mainPage .settings-icon {
    width: 38px !important;
    height: 38px !important;
    font-size: 17px !important;
  }

  #mainPage .settings-panel {
    position: fixed !important;
    width: min(88vw, 310px) !important;
    max-height: calc(100dvh - 84px) !important;
    overflow: auto !important;
    right: 10px !important;
    left: auto !important;
    top: calc(62px + env(safe-area-inset-top, 0px) + 8px) !important;
    z-index: 5300 !important;
  }

  #mainPage .settings-panel.show {
    gap: 10px !important;
  }

  .settings-sound-grid {
    grid-template-columns: 1fr !important;
  }

  .settings-mini-action {
    padding: 12px 14px !important;
    font-size: 13px !important;
  }

  .englishlab-dock {
    width: calc(100vw - 10px) !important;
    bottom: 10px !important;
    padding: 8px !important;
    gap: 3px !important;
    border-radius: 22px !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    background: linear-gradient(180deg, rgba(10, 15, 18, 0.96), rgba(17, 24, 39, 0.94)) !important;
    box-shadow:
      0 22px 50px rgba(0, 0, 0, 0.54),
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 0 0 1px rgba(0, 0, 0, 0.18) !important;
  }

  .englishlab-dock__item {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 58px !important;
    padding: 8px 4px !important;
    border-radius: 16px !important;
    font-size: 0.58rem !important;
    gap: 4px !important;
    color: rgba(255, 255, 255, 0.62) !important;
  }

  .englishlab-dock__item.is-active {
    color: #fff !important;
    background: linear-gradient(180deg, rgba(85, 230, 193, 0.22), rgba(85, 230, 193, 0.1)) !important;
    border-color: rgba(85, 230, 193, 0.34) !important;
    box-shadow:
      0 0 0 1px rgba(85, 230, 193, 0.12),
      0 0 18px rgba(85, 230, 193, 0.2) !important;
  }

  .englishlab-dock__emoji {
    width: 34px !important;
    height: 34px !important;
    border-radius: 12px !important;
  }

  .englishlab-dock__emoji svg,
  .englishlab-dock__emoji i {
    width: 20px !important;
    height: 20px !important;
  }
}

/* WordLab 1.1 — separate dashboard and focused question screen */
.wordlab-daily-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
}

.wordlab-daily-facts > div {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: color-mix(in srgb, var(--background-secondary) 82%, transparent);
}

.wordlab-daily-facts strong,
.wordlab-daily-facts span {
  display: block;
}

.wordlab-daily-facts strong {
  color: var(--text-primary);
  font-size: 15px;
}

.wordlab-daily-facts span {
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.45;
}

body.wordlab-session-active {
  overflow: hidden !important;
}

body.wordlab-session-active #englishLabDock {
  display: none !important;
}

body.wordlab-session-active #wordLabSessionPage {
  position: fixed;
  inset: 0;
  z-index: 3700;
  display: block !important;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 4%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 34%),
    radial-gradient(circle at 92% 96%, rgba(82, 160, 255, 0.12), transparent 34%),
    var(--background-primary);
}

.wordlab-session-page {
  width: min(1120px, 100%);
  height: 100dvh;
  min-height: 0;
  margin: 0 auto;
  padding: clamp(12px, 2vw, 24px);
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.5vw, 18px);
}

.wordlab-session-header {
  flex: 0 0 auto;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 14px;
  border: 1px solid var(--border-color);
  border-radius: 18px;
  background: color-mix(in srgb, var(--card-bg) 90%, transparent);
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.16);
}

.wordlab-session-header p {
  margin: 0 0 2px;
  color: var(--primary);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.wordlab-session-header h1 {
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(17px, 2.4vw, 24px);
  letter-spacing: -0.025em;
}

.wordlab-session-header button {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--background-secondary);
  color: var(--text-primary);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.wordlab-session-mount {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.wordlab-session-mount .wordlab-run-card {
  width: min(100%, 1020px);
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

@media (max-width: 640px) {
  .wordlab-daily-facts {
    grid-template-columns: 1fr;
  }

  .wordlab-session-page {
    padding: 8px;
    gap: 8px;
  }

  .wordlab-session-header {
    min-height: 54px;
    padding: 8px 10px;
    border-radius: 15px;
  }

  .wordlab-session-header p {
    display: none;
  }

  .wordlab-session-header button {
    min-height: 38px;
    padding: 8px 11px;
  }

  .wordlab-session-mount .wordlab-run-card {
    padding: 15px;
    border-radius: 18px;
  }

  .wordlab-session-mount .wordlab-run-card__top {
    margin-bottom: 8px;
  }

  .wordlab-session-mount .wordlab-run-progress {
    margin-bottom: 13px;
  }

  .wordlab-session-mount .wordlab-run-card h2 {
    font-size: clamp(21px, 6.4vw, 27px);
    line-height: 1.18;
  }

  .wordlab-session-mount .wordlab-question-tools {
    margin: 10px 0 12px;
  }

  .wordlab-session-mount .wordlab-option-grid {
    gap: 8px;
  }

  .wordlab-session-mount .wordlab-option {
    min-height: 54px;
    padding: 9px 10px;
    border-radius: 14px;
  }

  .wordlab-session-mount .wordlab-option > span {
    flex-basis: 31px;
    width: 31px;
    height: 31px;
    border-radius: 10px;
  }

  .wordlab-session-mount .wordlab-question-feedback {
    margin-top: 9px;
    padding: 10px 11px;
    line-height: 1.45;
  }

  .wordlab-session-mount .wordlab-next-btn {
    width: 100%;
    margin-top: 9px;
  }
}

/* EnglishLab Adventure Kit: code-native navigation and progression icons */
.el-icon-art {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: 0.66;
  transform: translate3d(0, 0, 0) scale(0.86);
  transform-box: fill-box;
  transform-origin: center;
  transition:
    transform 360ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 220ms ease;
}

.el-icon-art__depth {
  opacity: 0.9;
}

.el-icon-art__color {
  opacity: 0.28;
  transition: opacity 240ms ease;
}

.el-icon-art__highlight {
  opacity: 0.06;
  transition: opacity 240ms ease;
}

.englishlab-dock__emoji {
  overflow: visible !important;
}

.englishlab-dock__emoji .el-icon-art {
  width: 31px !important;
  height: 31px !important;
}

.englishlab-dock__item.is-active .englishlab-dock__emoji,
.englishlab-dock__item:hover .englishlab-dock__emoji {
  transform: none !important;
}

.englishlab-dock__item:is(:hover, :focus-visible) .el-icon-art {
  opacity: 0.88;
  transform: translate3d(0, -1px, 0) scale(1.04);
}

.englishlab-dock__item:is(:hover, :focus-visible) .el-icon-art__color {
  opacity: 0.66;
}

.englishlab-dock__item:is(:hover, :focus-visible) .el-icon-art__highlight {
  opacity: 0.48;
}

.englishlab-dock__item:active .el-icon-art {
  opacity: 1;
  transform: translate3d(0, -2px, 0) scale(1.12);
  transition-duration: 90ms;
}

.englishlab-dock__item:active .el-icon-art__color,
.englishlab-dock__item:active .el-icon-art__highlight {
  opacity: 1;
  transition-duration: 90ms;
}

.englishlab-dock__item.is-active .el-icon-art {
  opacity: 1;
  transform: translate3d(0, -4px, 0) scale(1.24);
}

.englishlab-dock__item.is-active .el-icon-art__color {
  opacity: 1;
}

.englishlab-dock__item.is-active .el-icon-art__highlight {
  opacity: 0.82;
}

.englishlab-dock__item.is-active:active .el-icon-art {
  transform: translate3d(0, -2px, 0) scale(1.14);
}

.englishlab-stat-icon {
  width: 24px;
  height: 24px;
  display: inline-grid;
  flex: 0 0 24px;
  place-items: center;
  overflow: visible;
}

.englishlab-stat-icon .el-icon-art {
  width: 24px;
  height: 24px;
  opacity: 0.68;
  transform: translate3d(0, 0, 0) scale(0.88);
}

#heroLevelBadge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

#heroLevelBadge .hero-level-icon,
#heroLevelBadge .hero-level-icon .el-icon-art {
  width: 22px;
  height: 22px;
}

#heroLevelBadge .hero-level-icon .el-icon-art {
  opacity: 1;
  transform: none;
}

#heroLevelBadge .el-icon-art__color {
  opacity: 1;
}

#heroLevelBadge .el-icon-art__highlight {
  opacity: 0.72;
}

.stat-badge:is(:hover, :focus, :focus-visible) .englishlab-stat-icon .el-icon-art {
  opacity: 1;
  transform: translate3d(0, -1px, 0) scale(1.12);
}

.stat-badge:is(:hover, :focus, :focus-visible) .el-icon-art__color {
  opacity: 1;
}

.stat-badge:is(:hover, :focus, :focus-visible) .el-icon-art__highlight {
  opacity: 0.78;
}

.stat-badge:active .englishlab-stat-icon .el-icon-art {
  opacity: 1;
  transform: translate3d(0, -1px, 0) scale(1.2);
  transition-duration: 90ms;
}

.stat-badge:active .el-icon-art__color,
.stat-badge:active .el-icon-art__highlight {
  opacity: 1;
  transition-duration: 90ms;
}

@media (max-width: 768px) {
  .englishlab-dock__emoji .el-icon-art {
    width: 30px !important;
    height: 30px !important;
  }

  .englishlab-stat-icon,
  .englishlab-stat-icon .el-icon-art {
    width: 22px;
    height: 22px;
  }

  .englishlab-stat-icon {
    flex-basis: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .el-icon-art,
  .el-icon-art__color,
  .el-icon-art__highlight {
    transition: none !important;
  }

  .englishlab-dock__item.is-active .el-icon-art,
  .englishlab-dock__item:is(:hover, :focus-visible) .el-icon-art,
  .englishlab-dock__item:active .el-icon-art,
  .stat-badge:is(:hover, :focus, :focus-visible, :active) .englishlab-stat-icon .el-icon-art {
    transform: none !important;
  }
}

/* Dock typography precision: integer metrics prevent subpixel-blurred labels. */
.englishlab-dock__item {
  font-family: 'Plus Jakarta Sans', 'DM Sans', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 14px !important;
  text-align: center;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.englishlab-dock__item > span:not(.englishlab-dock__emoji) {
  width: 100%;
  height: 14px;
  display: grid;
  place-items: center;
  line-height: 14px !important;
  letter-spacing: 0 !important;
  opacity: 0.78;
  transform: none !important;
  text-shadow: none !important;
}

.englishlab-dock__item.is-active > span:not(.englishlab-dock__emoji) {
  opacity: 1;
  transform: none !important;
}

/* Forest-neutral icon palette: harmonizes with the app without blending into it. */
.el-icon-art [fill="#101D31"] { fill: #0b211a; }
.el-icon-art [fill="#0A1424"] { fill: #06140f; }
.el-icon-art [fill="#102A43"] { fill: #17382e; }
.el-icon-art [stroke="#0A1424"] { stroke: #06140f; }
.el-icon-art [stroke="#102A43"] { stroke: #17382e; }

.el-icon-art [fill="#2DD4BF"] { fill: #69cda3; }
.el-icon-art [stroke="#2DD4BF"] { stroke: #69cda3; }
.el-icon-art [fill="#34D399"] { fill: #7bd4aa; }
.el-icon-art [fill="#38BDF8"] { fill: #a8c9b8; }
.el-icon-art [stroke="#38BDF8"] { stroke: #a8c9b8; }
.el-icon-art [fill="#2563EB"] { fill: #4f8b73; }
.el-icon-art [stroke="#2563EB"] { stroke: #4f8b73; }
.el-icon-art [fill="#6366F1"] { fill: #789b89; }
.el-icon-art [fill="#8B5CF6"] { fill: #ad8469; }

.el-icon-art [fill="#FBBF24"] { fill: #ddb45a; }
.el-icon-art [stroke="#FBBF24"] { stroke: #ddb45a; }
.el-icon-art [fill="#FB923C"] { fill: #c98a59; }
.el-icon-art [fill="#FB7185"] { fill: #ce826c; }
.el-icon-art [fill="#FFF4D6"] { fill: #f0e6cf; }
.el-icon-art [stroke="#FFF4D6"] { stroke: #f0e6cf; }

/* Forest constellation world: CSS-native depth without image/network assets. */
html body {
  isolation: isolate;
  background:
    radial-gradient(ellipse 92% 68% at 8% -8%, rgba(105, 205, 163, 0.2), transparent 58%),
    radial-gradient(ellipse 68% 56% at 96% 18%, rgba(221, 180, 90, 0.1), transparent 62%),
    radial-gradient(ellipse 86% 62% at 48% 108%, rgba(79, 139, 115, 0.15), transparent 60%),
    linear-gradient(150deg, #06110e 0%, #0a1914 46%, #07130f 100%) !important;
}

.geo-background,
.geo-background.geometric,
.geo-background.forest,
.geo-background.galaxy,
.geo-background.cosmic,
.geo-background.bnw,
[data-theme] .geo-background {
  inset: -8vmax;
  width: auto;
  height: auto;
  z-index: -1;
  pointer-events: none;
  opacity: 1;
  contain: strict;
  will-change: transform;
  transform: translate3d(-0.6%, -0.4%, 0) scale(1.015);
  background:
    radial-gradient(circle at 15% 22%, transparent 0 8.7rem, rgba(168, 201, 184, 0.08) 8.76rem 8.82rem, transparent 8.88rem 11.8rem, rgba(221, 180, 90, 0.055) 11.86rem 11.92rem, transparent 11.98rem),
    radial-gradient(circle at 84% 68%, transparent 0 10.6rem, rgba(105, 205, 163, 0.065) 10.66rem 10.72rem, transparent 10.78rem 14.5rem, rgba(240, 230, 207, 0.04) 14.56rem 14.62rem, transparent 14.68rem),
    radial-gradient(ellipse 58% 40% at 14% 8%, rgba(105, 205, 163, 0.16), transparent 68%),
    radial-gradient(ellipse 48% 38% at 88% 22%, rgba(221, 180, 90, 0.07), transparent 70%),
    repeating-linear-gradient(122deg, rgba(240, 230, 207, 0.018) 0 1px, transparent 1px 34px),
    transparent !important;
  animation: englishLabWorldDrift 34s ease-in-out infinite alternate !important;
}

.geo-background::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.72;
  background:
    radial-gradient(circle, rgba(240, 230, 207, 0.34) 0 1px, transparent 1.6px) 0 0 / 94px 94px,
    radial-gradient(circle, rgba(105, 205, 163, 0.3) 0 1.2px, transparent 1.8px) 33px 47px / 151px 151px,
    linear-gradient(116deg, transparent 0 48%, rgba(168, 201, 184, 0.055) 48.2% 48.35%, transparent 48.55% 100%) 0 0 / 310px 250px,
    linear-gradient(28deg, transparent 0 54%, rgba(221, 180, 90, 0.04) 54.2% 54.35%, transparent 54.55% 100%) 44px 16px / 380px 290px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.82), rgba(0,0,0,0.28) 78%, transparent 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.82), rgba(0,0,0,0.28) 78%, transparent 100%);
}

.geo-background::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2, 10, 7, 0.35), transparent 16%, transparent 84%, rgba(2, 10, 7, 0.32)),
    linear-gradient(180deg, transparent 55%, rgba(2, 9, 7, 0.34) 100%);
}

.tech-bg-grid,
body.bg-aurora .tech-bg-grid,
body.bg-particles .tech-bg-grid,
body.bg-minimal .tech-bg-grid {
  opacity: 0.32 !important;
  background-image:
    linear-gradient(rgba(168, 201, 184, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 201, 184, 0.04) 1px, transparent 1px) !important;
  background-size: 72px 72px !important;
  animation: techGridMove 70s linear infinite !important;
}

@keyframes englishLabWorldDrift {
  from { transform: translate3d(-0.6%, -0.4%, 0) scale(1.015); }
  to { transform: translate3d(0.7%, 0.55%, 0) scale(1.025); }
}

body.guardian-safe-mode #geoBackground {
  animation: none !important;
  transform: none !important;
  will-change: auto;
}

@media (max-width: 768px), (pointer: coarse), (prefers-reduced-motion: reduce) {
  #geoBackground {
    animation: none !important;
    transform: none !important;
    will-change: auto;
  }

  .tech-bg-grid,
  body.bg-aurora .tech-bg-grid,
  body.bg-particles .tech-bg-grid,
  body.bg-minimal .tech-bg-grid {
    animation: none !important;
    opacity: 0.22 !important;
  }
}
