/* ===========================

   STIL I PËRGJITHSHËM

   =========================== */



:root {

  --font-body: "Manrope", sans-serif;

  --font-display: var(--font-body);



  --bg-body: #eef2ff;

  --bg-card: #ffffff;

  --bg-soft: #f1f5ff;

  --bg-ink: #0b1120;



  --text-main: #0f172a;

  --text-muted: #475569;



  --primary: #2563eb;

  --primary-dark: #1e3a8a;

  --primary-soft: #dbeafe;

  --accent: #38bdf8;



  --border-soft: #dbe3f5;

  --shadow-soft: 0 14px 35px rgba(15, 23, 42, 0.12);

  --shadow-strong: 0 24px 60px rgba(15, 23, 42, 0.18);

  --radius-lg: 20px;

  --radius-md: 12px;

  --radius-full: 999px;

}



*,

*::before,

*::after {

  box-sizing: border-box;

}



html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: var(--font-body);
  background: linear-gradient(135deg, #e6f3ff 0%, #f0f7ff 55%, #ffffff 100%);
  color: var(--text-main);
}



#root {

  min-height: 100vh;

}



.app {

  min-height: 100vh;

  position: relative;

  background: radial-gradient(circle at 10% 10%, #e0f2fe 0%, transparent 45%),

    radial-gradient(circle at 90% 20%, #dbeafe 0%, transparent 48%),

    radial-gradient(circle at 50% 100%, #e2e8f0 0%, transparent 45%);

}



.app::before {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), transparent);

  pointer-events: none;

  z-index: 0;

}



.app > * {

  position: relative;

  z-index: 1;

}



@keyframes rise {

  from {

    opacity: 0;

    transform: translateY(18px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



.reveal {

  animation: rise 0.7s ease both;

}



.reveal-delay-1 {

  animation-delay: 0.1s;

}



.reveal-delay-2 {

  animation-delay: 0.2s;

}



.reveal-delay-3 {

  animation-delay: 0.3s;

}



h1,

h2,

h3,

h4 {

  font-family: var(--font-display);

  letter-spacing: -0.01em;

}

/* Të gjitha faqet – fillojnë pak poshtë nav bar-it */

.app-body {

  padding-top: 80px; /* kompenson lartësinë e nav bar-it */

  padding-bottom: 60px;

}



/* Root container i faqeve të ndryshme – i unifikuar */

.page,

.page--home,

.grammar-page,

.courses-page,

.auth-page,

.profile-page,

.test-level-page,

.upgrade-page,

.exercises-page {

  max-width: 1200px;

  margin: 0 auto;

  padding: 24px 24px 80px;

}



.surface-card {

  background: var(--bg-card);

  border-radius: var(--radius-lg);

  border: 1px solid var(--border-soft);

  box-shadow: var(--shadow-soft);

}



/* ===========================

   NAVBAR / TOPBAR (GLOBAL)

   =========================== */



header.topbar {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  z-index: 50;

  background: linear-gradient(

    180deg,

    rgba(255, 255, 255, 0.96),

    rgba(255, 255, 255, 0.84)

  );

  backdrop-filter: blur(18px);

  border-bottom: 1px solid rgba(148, 163, 184, 0.2);

  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);

}



.topbar-inner {

  max-width: 1180px;

  margin: 0 auto;

  height: 72px; /* lartësi fikse – e njëjtë kudo */

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0 20px;

  gap: 18px;

}



/* LOGO + EMRI */



.brand {

  display: flex;

  align-items: center;

  gap: 12px;

  text-decoration: none;

  color: inherit;

}



.topbar .brand-logo {

  width: 40px;

  height: 40px;

  border-radius: var(--radius-full);

  overflow: hidden;

  background: #ffffff;

  border: 1px solid rgba(148, 163, 184, 0.35);

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.14);

}



.brand-text {

  display: flex;

  flex-direction: column;

  line-height: 1.1;

}



.brand-name {

  font-size: 1.05rem;

  font-weight: 700;

  color: var(--text-main);

}



.brand-tagline {

  font-size: 0.8rem;

  color: var(--text-muted);

}



/* NAV LINK-ET (qendra) */



.main-nav {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  margin: 0 auto;

  padding: 6px;

  border-radius: var(--radius-full);

  background: rgba(15, 23, 42, 0.04);

  border: 1px solid rgba(148, 163, 184, 0.32);

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);

}



.nav-link {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  text-decoration: none;

  font-size: 0.9rem;

  font-weight: 600;

  color: #1f2937;

  padding: 8px 14px;

  border-radius: var(--radius-full);

  border: 1px solid transparent;

  transition: background 0.2s ease, color 0.2s ease,

    border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;

}



.nav-link-icon {

  display: none;

  align-items: center;

  justify-content: center;

  width: 30px;

  height: 30px;

  border-radius: 12px;

  background: rgba(37, 99, 235, 0.12);

  color: #1d4ed8;

  flex-shrink: 0;

}



.nav-link-icon svg {

  width: 18px;

  height: 18px;

  display: block;

}



.nav-link-text {

  line-height: 1;

}



.nav-link:hover {

  background: rgba(37, 99, 235, 0.12);

  color: #0f172a;

  border-color: rgba(37, 99, 235, 0.25);

  transform: translateY(-1px);

}



.nav-link--active {

  background: #0f172a;

  color: #ffffff;

  border-color: #0f172a;

  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.2);

}



.nav-link:focus-visible {

  outline: none;

  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);

}



.nav-toggle {

  display: none;

  align-items: center;

  gap: 8px;

  padding: 7px 12px;

  border-radius: 999px;

  border: 1px solid rgba(148, 163, 184, 0.45);

  background: #ffffff;

  color: #0f172a;

  font-size: 0.85rem;

  font-weight: 600;

  cursor: pointer;

  transition: background 0.2s ease, border-color 0.2s ease,

    color 0.2s ease, box-shadow 0.2s ease;

}



.nav-toggle:hover {

  border-color: rgba(37, 99, 235, 0.4);

  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.12);

}



.nav-toggle-icon {

  width: 18px;

  height: 2px;

  background: currentColor;

  border-radius: 999px;

  position: relative;

  transition: background 0.2s ease;

}



.nav-toggle-icon::before,

.nav-toggle-icon::after {

  content: "";

  position: absolute;

  left: 0;

  width: 18px;

  height: 2px;

  background: currentColor;

  border-radius: 999px;

  transition: transform 0.2s ease, top 0.2s ease;

}



.nav-toggle-icon::before {

  top: -6px;

}



.nav-toggle-icon::after {

  top: 6px;

}



.nav-toggle-text {

  line-height: 1;

}



.topbar.nav-open .nav-toggle {

  background: #0f172a;

  color: #ffffff;

  border-color: #0f172a;

  box-shadow: 0 12px 22px rgba(15, 23, 42, 0.2);

}



.topbar.nav-open .nav-toggle-icon {

  background: transparent;

}



.topbar.nav-open .nav-toggle-icon::before {

  transform: translateY(6px) rotate(45deg);

}



.topbar.nav-open .nav-toggle-icon::after {

  transform: translateY(-6px) rotate(-45deg);

}



/* AUTH (KYÇU / PROFILI) */



.auth-area {

  display: flex;

  align-items: center;

  gap: 12px;

}





.topbar-auth,
.topbar-auth-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: #ffffff;
  color: #0f172a;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease,
    border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.topbar-auth:hover,
.topbar-auth-button:hover {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, 0.4);
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.12);
}

.topbar-auth-icon {
  width: 30px;
  height: 30px;
  border-radius: 12px;
  background: rgba(14, 165, 233, 0.12);
  color: #0284c7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.topbar-auth-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.topbar-auth--login {
  background: linear-gradient(135deg, #38bdf8, #f97316);
  border-color: rgba(14, 165, 233, 0.4);
  color: #0b1220;
  box-shadow: 0 14px 26px rgba(14, 165, 233, 0.22);
}

.topbar-auth--login:hover {
  border-color: rgba(251, 146, 60, 0.6);
  box-shadow: 0 16px 32px rgba(251, 146, 60, 0.25);
}

.topbar-auth--login .topbar-auth-icon {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(240, 249, 255, 0.85));
  color: #0b1220;
  border: 1px solid rgba(14, 165, 233, 0.25);
}

.topbar-auth-button--logout {
  border-color: rgba(248, 113, 113, 0.45);
}

.topbar-auth-button--logout .topbar-auth-icon {
  background: rgba(248, 113, 113, 0.16);
  color: #b91c1c;
}

.topbar-auth-text {
  white-space: nowrap;
}
.auth-username {

  font-size: 0.85rem;

  font-weight: 600;

  color: #0f172a;

  background: rgba(15, 23, 42, 0.06);

  border: 1px solid rgba(148, 163, 184, 0.35);

  padding: 6px 10px;

  border-radius: var(--radius-full);

}



.topbar .btn-primary,

.topbar .btn-secondary {

  padding: 8px 14px;

  font-size: 0.85rem;

}





@media (max-width: 900px) {
  .topbar-auth,
  .topbar-auth-button {
    padding: 6px;
  }

  .topbar-auth-icon {
    width: 28px;
    height: 28px;
  }

  .topbar-auth-text {
    display: none;
  }
}
.topbar .btn-primary {

  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.18);

}



.topbar .btn-secondary {

  background: rgba(255, 255, 255, 0.9);

}



/* Butona të përgjithshëm – përdoren kudo (nav, kuize, login, etj.) */



.btn-primary,

.btn-secondary {

  border-radius: var(--radius-full);

  padding: 10px 18px;

  font-size: 0.9rem;

  font-weight: 600;

  border: 1px solid transparent;

  cursor: pointer;

  text-decoration: none;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease,

    border-color 0.15s ease, transform 0.15s ease;

}



.btn-primary {

  background: #0f172a;

  color: #ffffff;

  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.18);

}



.btn-primary:hover {

  background: #111827;

  transform: translateY(-1px);

}



.btn-secondary {

  background: #ffffff;

  color: #0f172a;

  border-color: rgba(148, 163, 184, 0.4);

  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);

}



.btn-secondary:hover {

  border-color: rgba(37, 99, 235, 0.4);

  color: #1d4ed8;

  transform: translateY(-1px);

}



.btn-outline {

  border-radius: var(--radius-full);

  padding: 10px 18px;

  font-size: 0.9rem;

  font-weight: 600;

  border: 1px solid rgba(37, 99, 235, 0.4);

  background: transparent;

  color: #1d4ed8;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  text-decoration: none;

  transition: transform 0.15s ease, border-color 0.15s ease, color 0.15s ease,

    background 0.15s ease;

}



.btn-outline:hover {

  background: rgba(37, 99, 235, 0.08);

  border-color: rgba(37, 99, 235, 0.6);

  transform: translateY(-1px);

}



.btn-ghost {

  border-radius: var(--radius-full);

  padding: 10px 18px;

  font-size: 0.9rem;

  font-weight: 600;

  border: 1px solid transparent;

  background: rgba(148, 163, 184, 0.12);

  color: #0f172a;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  text-decoration: none;

  transition: transform 0.15s ease, background 0.15s ease;

}



.btn-ghost:hover {

  background: rgba(148, 163, 184, 0.2);

  transform: translateY(-1px);

}



.btn-logout {

  padding-inline: 14px;

}



/* PROFILI – CHIP DJATHTAS NË NAV */



.profile-chip {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  text-decoration: none;

  background: #eef2ff;

  border-radius: var(--radius-full);

  padding: 4px 10px 4px 4px;

}



.profile-chip--active {

  background: #e0ecff;

}



.profile-avatar {

  width: 28px;

  height: 28px;

  border-radius: var(--radius-full);

  background: var(--primary);

  color: #ffffff;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 0.9rem;

  font-weight: 700;

}



.profile-name {

  font-size: 0.86rem;

  color: #1f2937;

}



/* ===========================

   LAYOUT I FAQES

   =========================== */



.app-body {

  padding-bottom: 60px;

}



.page {

  max-width: 1200px;

  margin: 0 auto;

  padding: 40px 24px 80px;

}



/* ===========================

   HOME / FAQJA KRYESORE

   =========================== */



.page--home {

  padding-top: 60px;

}



.home-hero {

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 40px;

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 24px;

}



.hero-left {

  flex: 1.2;

}



.hero-title {

  font-size: 2.6rem;

  font-weight: 800;

  color: var(--text-main);

  margin-bottom: 16px;

}



.highlight {

  color: var(--primary);

}



.hero-subtitle {

  font-size: 1.1rem;

  color: var(--text-muted);

  margin-bottom: 24px;

  line-height: 1.7;

}



.hero-points .point {

  margin-bottom: 8px;

  font-size: 0.98rem;

  color: #334155;

}



.beta-info {

  margin-top: 20px;

  background: var(--primary-soft);

  border-left: 4px solid var(--primary);

  padding: 14px 18px;

  border-radius: var(--radius-md);

  font-size: 0.95rem;

  color: #1e3a8a;

}



/* LOGIN BOX në faqen e parë */



.hero-right {

  flex: 0.8;

  display: flex;

  justify-content: center;

}



.login-box {

  background: var(--bg-card);

  padding: 32px 28px;

  border-radius: var(--radius-lg);

  box-shadow: var(--shadow-soft);

  width: 100%;

  max-width: 380px;

}



.login-box h2 {

  text-align: center;

  margin-bottom: 8px;

  color: var(--text-main);

}



.login-subtitle {

  text-align: center;

  font-size: 0.9rem;

  color: var(--text-muted);

  margin-bottom: 16px;

}



.login-box form {

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.login-box input {

  padding: 12px 14px;

  border: 1px solid #cbd5e1;

  border-radius: 10px;

  font-size: 1rem;

}



.login-box button {

  margin-top: 6px;

  background: var(--primary);

  color: #ffffff;

  font-weight: 600;

  border: none;

  border-radius: 10px;

  padding: 12px;

  cursor: pointer;

  transition: background 0.15s ease, box-shadow 0.15s ease;

}



.login-box button:hover {

  background: var(--primary-dark);

  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.35);

}



.cta-buttons {

  display: flex;

  gap: 10px;

  flex-wrap: wrap;

  margin-top: 10px;

}



.login-message {

  text-align: center;

  margin-top: 10px;

  font-size: 0.9rem;

  color: var(--primary-dark);

}



.register-note {

  text-align: center;

  margin-top: 16px;

  font-size: 0.9rem;

  color: var(--text-muted);

}



.login-divider {

  margin-top: 14px;

  text-align: center;

  font-size: 0.85rem;

  color: #94a3b8;

}



.login-guest-text {

  margin-top: 8px;

  font-size: 0.9rem;

  color: var(--text-muted);

  text-align: center;

}



/* Seksioni “pse të përdorësh KursGjermanisht” */



.home-features {

  background: var(--bg-soft);

  margin-top: 80px;

  padding: 60px 0;

}



.home-features h2 {

  text-align: center;

  font-size: 2rem;

  font-weight: 700;

  color: var(--text-main);

  margin-bottom: 40px;

}



.feature-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

  gap: 24px;

  max-width: 1100px;

  margin: 0 auto;

  padding: 0 24px;

}



.feature-card {

  background: #ffffff;

  border-radius: var(--radius-lg);

  padding: 24px 22px;

  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);

  text-align: center;

}



.feature-card h3 {

  color: var(--text-main);

  font-size: 1.2rem;

  margin-bottom: 8px;

}



.feature-card p {

  color: var(--text-muted);

  font-size: 0.95rem;

}



/* ===========================

   RESPONSIVE BAZË

   =========================== */



@media (max-width: 900px) {

  .app-body {

    padding-top: 96px;

  }



  header.topbar {

    background: radial-gradient(circle at 15% 20%, rgba(56, 189, 248, 0.2), transparent 55%),

      radial-gradient(circle at 85% 0%, rgba(34, 197, 94, 0.18), transparent 45%),

      linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 255, 0.9));

    border-bottom: 1px solid rgba(14, 165, 233, 0.22);

  }

  header.topbar::after {

    content: "";

    position: absolute;

    left: 16px;

    right: 16px;

    bottom: 0;

    height: 2px;

    border-radius: 999px;

    background: linear-gradient(90deg, #0ea5e9, #22c55e, #6366f1);

    opacity: 0.6;

    pointer-events: none;

  }
  .topbar-inner {

    position: relative;

    flex-wrap: nowrap;

    gap: 8px;

    height: 64px;

    padding: 0 12px;

    background: rgba(255, 255, 255, 0.72);

    border-radius: 18px;

    border: 1px solid rgba(148, 163, 184, 0.28);

    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12);

  }

  .brand {

    background: rgba(255, 255, 255, 0.9);

    border: 1px solid rgba(148, 163, 184, 0.32);

    border-radius: 999px;

    padding: 6px 12px 6px 6px;

    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.12);

  }

  .topbar .brand-logo {

    border-color: rgba(59, 130, 246, 0.35);

    background: linear-gradient(135deg, rgba(224, 242, 254, 0.9), #ffffff);

    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);

  }

  .main-nav {

    display: none;

    position: absolute;

    left: 0;

    right: 0;

    top: calc(100% + 10px);

    flex-direction: column;

    gap: 8px;

    padding: 12px;

    background: rgba(255, 255, 255, 0.98);

    border: 1px solid rgba(148, 163, 184, 0.3);

    border-radius: 18px;

    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.18);

    backdrop-filter: blur(16px);

    max-height: 70vh;

    overflow-y: auto;

    z-index: 60;

  }



  .topbar.nav-open .main-nav {

    display: none;

  }



  .nav-link {

    width: 100%;

    justify-content: flex-start;

    gap: 12px;

    white-space: nowrap;

    font-size: 0.92rem;

    padding: 12px 14px;

    min-height: 44px;

    border-radius: 14px;

    background: #f8fafc;

    border-color: rgba(148, 163, 184, 0.2);

  }



  .nav-link-icon {

    display: inline-flex;

    background: rgba(37, 99, 235, 0.12);

  }



  .nav-link-text {

    flex: 1;

  }



  .nav-link:hover {

    transform: none;

  }



  .nav-link--active {

    background: #0f172a;

    color: #ffffff;

    border-color: #0f172a;

    box-shadow: none;

  }



  .nav-link--active .nav-link-icon {

    background: rgba(255, 255, 255, 0.2);

    color: #ffffff;

  }



  .nav-toggle {

    display: none;

  }



  .brand-tagline {

    display: none;

  }



  .auth-area {

    margin-left: auto;

    gap: 6px;

  }



  .auth-username {

    font-size: 0.8rem;

    max-width: 90px;

    padding: 4px 8px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

  }



  .auth-area .btn-primary,

  .auth-area .btn-secondary {

    padding: 6px 12px;

    font-size: 0.82rem;

  }

  .auth-area .btn-primary {
    display: none;
  }



  .home-hero {

    flex-direction: column;

  }



  .hero-right {

    width: 100%;

  }

}



/* ===========================

   FAQJA E GRAMATIKËS

   =========================== */

/* ===========================

   FAQJA E GRAMATIKËS – STIL SI "KURSET"

   =========================== */



.grammar-page {

  max-width: 1180px;

  margin: 0 auto;

  padding: 4.2rem 3rem 4rem;

}



/* Hyrja / header-i i faqes */



.grammar-header {

  margin-bottom: 2rem;

  text-align: center;

}



.grammar-header .breadcrumb {

  font-size: 0.8rem;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  color: #64748b;

  margin-bottom: 0.4rem;

}



.grammar-header h1 {

  font-size: 2.2rem;

  margin-bottom: 0.6rem;

  color: #0f172a;

}



.grammar-intro {

  max-width: 720px;

  color: #475569;

  line-height: 1.6;

  font-size: 0.95rem;

  margin: 0 auto;

}



/* Tabs për nivelet e gramatikës (A1..C1) */



.grammar-level-tabs {

  display: flex;

  flex-wrap: wrap;

  gap: 0.6rem;

  margin: 1.6rem 0 0.8rem;

  justify-content: center;

}



.grammar-level-tab {

  border-radius: 999px;

  border: 1px solid #e2e8f0;

  padding: 0.4rem 0.95rem;

  background: #ffffff;

  font-size: 0.88rem;

  cursor: pointer;

  transition: all 0.18s ease;

  color: #0f172a;

}



.grammar-level-tab--active {

  background: #0f172a;

  color: #f9fafb;

  border-color: #0f172a;

  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.28);

  transform: translateY(-1px);

}



.grammar-level-tab:hover:not(.grammar-level-tab--active) {

  border-color: #0f172a33;

  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);

  transform: translateY(-1px);

}



.grammar-level-description {

  margin-bottom: 1.6rem;

  color: #475569;

  max-width: 780px;

  font-size: 0.93rem;

  margin-left: auto;

  margin-right: auto;

  text-align: center;

}



/* Layout dy kolonash – si te "Kurset" */



.grammar-layout {

  margin-top: 0.6rem;

  display: grid;

  grid-template-columns: minmax(0, 320px) minmax(0, 1.3fr);

  gap: 1.8rem;

  align-items: flex-start;

}



/* Lista e kapitujve majtas – stil "dark" si Kurset */



.grammar-topic-list {

  background: radial-gradient(circle at top left, #0f172a, #020617);

  border-radius: 1.1rem;

  padding: 1.1rem 1rem;

  border: 1px solid #1f2937;

  max-height: calc(100vh - 8rem);

  overflow-y: auto;

  position: sticky;

  top: 4.8rem;

  color: #e5e7eb;

  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.6);

}



.grammar-topic-list h2 {

  font-size: 1rem;

  margin-bottom: 0.6rem;

  color: #e5e7eb;

}



.grammar-topic-list ul {

  list-style: none;

  padding: 0;

  margin: 0;

  display: flex;

  flex-direction: column;

  gap: 0.4rem;

}



.topic-button {

  width: 100%;

  border: none;

  background: transparent;

  display: flex;

  align-items: center;

  gap: 0.6rem;

  padding: 0.5rem 0.6rem;

  border-radius: 0.8rem;

  cursor: pointer;

  font-size: 0.9rem;

  text-align: left;

  color: #e5e7eb;

  transition: all 0.18s ease;

}



.topic-button:hover {

  background: rgba(148, 163, 184, 0.22);

}



.topic-button--active {

  background: #f9fafb;

  color: #020617;

  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.4);

}



.topic-number {

  width: 1.6rem;

  height: 1.6rem;

  border-radius: 0.75rem;

  background: rgba(148, 163, 184, 0.22);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 0.75rem;

  flex-shrink: 0;

  color: #e5e7eb;

}



.topic-button--active .topic-number {

  background: #0f172a;

  color: #f9fafb;

}



.topic-title {

  white-space: normal;

}



/* Përmbajtja e kapitullit djathtas – stil card si "Kurset" */



.grammar-topic-content {

  background: linear-gradient(135deg, #ffffff, #f9fafb);

  border-radius: 1.2rem;

  padding: 1.4rem 1.8rem 1.6rem;

  border: 1px solid #e2e8f0;

  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.12);

  position: relative;

  overflow: hidden;

}



.grammar-topic-content::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 4px;

  background: linear-gradient(90deg, #2563eb, #38bdf8);

}



.grammar-topic-content h2 {

  font-size: 1.4rem;

  margin-bottom: 0.7rem;

  color: #0f172a;

}



/* Qëllimi i kapitullit */



.topic-goal {

  background: #eff6ff;

  border-radius: 0.9rem;

  padding: 0.85rem 1rem;

  margin-bottom: 1rem;

  border: 1px solid #bfdbfe;

}



.topic-goal-label {

  font-weight: 600;

  font-size: 0.8rem;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  color: #1d4ed8;

  display: block;

  margin-bottom: 0.25rem;

}



.topic-goal p {

  margin: 0;

  font-size: 0.9rem;

  color: #1e293b;

}



/* Seksionet e shpjegimit */



.topic-section {

  margin-top: 14px;

}



.topic-section h3 {

  font-size: 1rem;

  margin-bottom: 4px;

  color: #0f172a;

}



.examples-list,

.practice-list {

  margin-top: 4px;

  padding-left: 20px;

  font-size: 0.96rem;

}



.topic-tip {

  margin-top: 18px;

  font-size: 0.9rem;

  color: var(--text-muted);

}



/* Responsive për gramatikën */



@media (max-width: 900px) {

  .grammar-page {

    padding: 5rem 1.25rem 3.5rem;

  }



  .grammar-level-tabs {

    display: none;

  }



  .grammar-layout {

    grid-template-columns: 1fr;

  }



  .grammar-topic-list {

    position: static;

    max-height: 320px;

    overflow-y: auto;

  }



  .grammar-topic-content {

    padding: 1.1rem 1.2rem 1.3rem;

  }

}





/* ===========================

   FAQJA KURSET – LAYOUT

   =========================== */



.courses-page {

  max-width: 1180px;

  margin: 0 auto;

  padding: 4.2rem 3rem 4rem;

}



.courses-header {

  margin-bottom: 2rem;

  text-align: center;

}



.courses-header .breadcrumb {

  font-size: 0.8rem;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  color: #64748b;

  margin-bottom: 0.4rem;

}



.courses-header h1 {

  font-size: 2.2rem;

  margin-bottom: 0.6rem;

  color: #0f172a;

}



.courses-intro {

  max-width: 720px;

  color: #475569;

  line-height: 1.6;

  font-size: 0.95rem;

  margin: 0 auto;

}



.courses-level-tabs {

  display: flex;

  flex-wrap: wrap;

  gap: 0.6rem;

  margin: 1.6rem 0 0.8rem;

  justify-content: center;

}



.courses-level-tab {

  border-radius: 999px;

  border: 1px solid #e2e8f0;

  padding: 0.4rem 0.95rem;

  background: #ffffff;

  font-size: 0.88rem;

  cursor: pointer;

  transition: all 0.18s ease;

  color: #0f172a;

  display: inline-flex;

  align-items: center;

  gap: 0.45rem;

  flex-wrap: wrap;

}



.level-tab-label {

  font-weight: 600;

}



.badge {

  display: inline-flex;

  align-items: center;

  padding: 0.18rem 0.5rem;

  border-radius: 999px;

  font-size: 0.7rem;

  font-weight: 700;

  letter-spacing: 0.04em;

  text-transform: uppercase;

}



.badge-preview {

  background: #e0f2fe;

  color: #0f172a;

  border: 1px solid #bae6fd;

}



.badge-free {

  background: #dcfce7;

  color: #166534;

  border: 1px solid #bbf7d0;

}



.badge-upgrade {

  background: #fef3c7;

  color: #92400e;

  border: 1px solid #fde68a;

}



.badge-unlocked {

  background: #e0f2fe;

  color: #0f172a;

  border: 1px solid #bae6fd;

}



.level-select {

  display: none;

  margin: 1rem auto 0.8rem;

  max-width: 520px;

}



.level-select-trigger {

  width: 100%;

  border-radius: 16px;

  border: 1px solid #e2e8f0;

  background: #ffffff;

  padding: 0.6rem 0.85rem;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  font-weight: 600;

  color: #0f172a;

  cursor: pointer;

  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);

}



.level-select-label {

  font-size: 0.9rem;

}



.level-select-arrow {

  width: 10px;

  height: 10px;

  border-right: 2px solid #475569;

  border-bottom: 2px solid #475569;

  transform: rotate(45deg);

  transition: transform 0.2s ease;

}



.level-select-menu {

  display: none;

  margin-top: 0.6rem;

  padding: 0.6rem;

  border-radius: 16px;

  border: 1px solid #e2e8f0;

  background: #ffffff;

  box-shadow: 0 14px 35px rgba(15, 23, 42, 0.12);

  gap: 0.5rem;

}



.level-select--open .level-select-menu {

  display: grid;

}



.level-select--open .level-select-arrow {

  transform: rotate(-135deg);

}



.level-select .courses-level-tab,

.level-select .grammar-level-tab {

  width: 100%;

  justify-content: space-between;

}



.badge-locked {

  background: #fee2e2;

  color: #7f1d1d;

  border: 1px solid #fecaca;

}



.courses-level-tab--active {

  background: #0f172a;

  color: #f9fafb;

  border-color: #0f172a;

  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.28);

  transform: translateY(-1px);

}



.courses-level-tab:hover:not(.courses-level-tab--active) {

  border-color: #0f172a33;

  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);

  transform: translateY(-1px);

}



.courses-level-description {

  margin-bottom: 1.6rem;

  color: #475569;

  max-width: 780px;

  font-size: 0.93rem;

  margin-left: auto;

  margin-right: auto;

  text-align: center;

}



.courses-layout {

  margin-top: 0.6rem;

  display: grid;

  grid-template-columns: minmax(0, 320px) minmax(0, 1.3fr);

  gap: 1.8rem;

  align-items: flex-start;

}



/* Kurset – responsive */



@media (max-width: 900px) {

  .courses-page {

    padding: 5rem 1.25rem 3.5rem;

  }



  .courses-level-tabs {

    display: none;

  }



  .level-select {

    display: block;

  }



  .courses-level-tab {

    flex: 0 0 auto;

    padding: 0.35rem 0.8rem;

    font-size: 0.82rem;

  }



  .courses-layout {

    grid-template-columns: 1fr;

  }



  .courses-lesson-list {

    position: static;

    max-height: 28vh;

    overflow-y: auto;

    margin-bottom: 1rem;

    padding: 0.95rem 0.85rem;

  }



  .courses-lesson-list .lesson-list-toggle {

    display: flex;

  }



  .courses-lesson-list .lesson-preview {

    display: block;

  }



  .courses-lesson-list.lesson-list-open .lesson-preview {

    display: none;

  }



  .courses-lesson-list .lesson-list-body {

    display: none;

  }



  .courses-lesson-list .lesson-list-body.is-open {

    display: block;

  }



  .courses-lesson-list .lesson-list-body h2 {

    display: none;

  }



  .courses-lesson-content {

    scroll-margin-top: 110px;

    padding: 1.1rem 1.2rem 1.3rem;

  }



  .lesson-button {

    padding: 0.45rem 0.55rem;

    font-size: 0.84rem;

  }



  .lesson-number {

    width: 1.4rem;

    height: 1.4rem;

    font-size: 0.7rem;

  }

}



.courses-lesson-list {

  background: radial-gradient(circle at top left, #0f172a, #020617);

  border-radius: 1.1rem;

  padding: 1.1rem 1rem;

  border: 1px solid #1f2937;

  max-height: calc(100vh - 8rem);

  overflow-y: auto;

  position: sticky;

  top: 4.8rem;

  color: #e5e7eb;

  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.6);

}



.lesson-list-toggle {

  display: none;

  align-items: center;

  justify-content: space-between;

  width: 100%;

  border-radius: 0.9rem;

  border: 1px solid rgba(148, 163, 184, 0.4);

  background: rgba(15, 23, 42, 0.45);

  color: #e2e8f0;

  padding: 0.5rem 0.7rem;

  font-size: 0.88rem;

  font-weight: 600;

  cursor: pointer;

  margin-bottom: 0.6rem;

}



.lesson-list-toggle-arrow {

  width: 10px;

  height: 10px;

  border-right: 2px solid #e2e8f0;

  border-bottom: 2px solid #e2e8f0;

  transform: rotate(45deg);

  transition: transform 0.2s ease;

}



.lesson-list-toggle.is-open .lesson-list-toggle-arrow {

  transform: rotate(-135deg);

}



.lesson-list-body {

  display: block;

}



.lesson-preview {

  display: none;

  margin-bottom: 0.8rem;

}



.lesson-preview-title {

  font-size: 0.95rem;

  font-weight: 700;

  margin-bottom: 0.5rem;

  color: #e2e8f0;

}



.lesson-preview-list {

  list-style: none;

  margin: 0;

  padding: 0;

  display: flex;

  flex-direction: column;

  gap: 0.4rem;

}



.courses-lesson-list h2 {

  font-size: 1rem;

  margin-bottom: 0.6rem;

  color: #e5e7eb;

}



.courses-lesson-list ul {

  list-style: none;

  margin: 0;

  padding: 0;

  display: flex;

  flex-direction: column;

  gap: 0.4rem;

}



.lesson-button {

  width: 100%;

  display: flex;

  align-items: center;

  gap: 0.6rem;

  padding: 0.5rem 0.6rem;

  border-radius: 0.8rem;

  border: none;

  background: transparent;

  cursor: pointer;

  text-align: left;

  transition: all 0.18s ease;

  font-size: 0.9rem;

  color: #e5e7eb;

}



.lesson-button:hover {

  background: rgba(148, 163, 184, 0.22);

}



.lesson-button--active {

  background: #f9fafb;

  color: #020617;

  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.4);

}



.lesson-number {

  width: 1.6rem;

  height: 1.6rem;

  border-radius: 0.75rem;

  background: rgba(148, 163, 184, 0.22);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 0.75rem;

  flex-shrink: 0;

  color: #e5e7eb;

}



.lesson-button--active .lesson-number {

  background: #0f172a;

  color: #f9fafb;

}



.lesson-title {

  white-space: normal;

}



/* Përmbajtja e mësimit djathtas */



.courses-lesson-content {

  background: linear-gradient(135deg, #ffffff, #f9fafb);

  border-radius: 1.2rem;

  padding: 1.4rem 1.8rem 1.6rem;

  border: 1px solid #e2e8f0;

  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.12);

  position: relative;

  overflow: hidden;

}



.courses-lesson-content::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 4px;

  background: linear-gradient(90deg, #2563eb, #38bdf8);

}



.courses-lesson-content h2 {

  font-size: 1.4rem;

  margin-bottom: 0.7rem;

  color: #0f172a;

}



/* Qëllimi i mësimit */



.lesson-goal {

  background: #eff6ff;

  border-radius: 0.9rem;

  padding: 0.85rem 1rem;

  margin-bottom: 1rem;

  border: 1px solid #bfdbfe;

}



.lesson-goal-label {

  font-weight: 600;

  font-size: 0.8rem;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  color: #1d4ed8;

  display: block;

  margin-bottom: 0.25rem;

}



.lesson-goal p {

  margin: 0;

  font-size: 0.9rem;

  color: #1e293b;

}



/* Përmbledhja */



.lesson-summary {

  margin-bottom: 1.3rem;

}



.lesson-summary h3 {

  font-size: 1rem;

  margin-bottom: 0.35rem;

  color: #0f172a;

}



.lesson-summary p {

  font-size: 0.95rem;

  color: #475569;

  line-height: 1.6;

  margin: 0;

}



/* Kuizi */



.lesson-quiz {

  margin-top: 1.2rem;

  padding: 1.2rem;

  border-radius: 16px;

  border: 1px solid #e2e8f0;

  background: #f8fafc;

}



.lesson-quiz h3 {

  font-size: 1.02rem;

  margin-bottom: 0.4rem;

  color: #0f172a;

}



.lesson-quiz-note {

  font-size: 0.85rem;

  color: #64748b;

  margin-bottom: 0.9rem;

}



/* Pyetjet */



.quiz-question-card {

  border-radius: 1rem;

  border: 1px solid #e2e8f0;

  padding: 0.9rem 0.95rem 0.85rem;

  margin-bottom: 0.85rem;

  background: #f9fafb;

}



.quiz-question-text {

  font-size: 0.94rem;

  font-weight: 500;

  color: #0f172a;

  margin-bottom: 0.55rem;

}



.quiz-question-number {

  font-size: 0.8rem;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  color: #6b7280;

  margin-right: 0.3rem;

}



.quiz-answers {

  display: flex;

  flex-direction: column;

  gap: 0.4rem;

}



.quiz-answer {

  width: 100%;

  text-align: left;

  border-radius: 0.75rem;

  border: 1px solid #e2e8f0;

  padding: 0.45rem 0.7rem;

  font-size: 0.9rem;

  background: #ffffff;

  cursor: pointer;

  transition: all 0.18s ease;

  line-height: 1.4;

}



.quiz-answer:hover {

  border-color: #0f172a33;

  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);

  transform: translateY(-1px);

}



.quiz-answer--selected {

  border-color: #6366f1;

  background: #eef2ff;

  box-shadow: 0 0 0 1px #6366f1;

}



.quiz-answer--correct {

  border-color: #16a34a;

  background: #ecfdf3;

}



.quiz-answer--wrong {

  border-color: #dc2626;

  background: #fef2f2;

}



.quiz-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 0.6rem;

  margin-top: 1rem;

}



/* Rezultati */



.quiz-result {

  margin-top: 0.75rem;

  font-size: 0.95rem;

  color: #0f172a;

}



/* ===========================

   LOGIN / AUTH PAGE

   =========================== */



.auth-page {

  min-height: calc(100vh - 80px);

  max-width: 1180px;

  margin: 0 auto;

  padding: 4.5rem 2.6rem 3.5rem;

  display: grid;

  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.85fr);

  gap: 2.5rem;

  align-items: stretch;

  position: relative;

  background: linear-gradient(

      135deg,

      rgba(255, 255, 255, 0.9),

      rgba(219, 234, 254, 0.35)

    );

  border-radius: 32px;

  border: 1px solid rgba(148, 163, 184, 0.2);

  box-shadow: 0 40px 90px rgba(15, 23, 42, 0.12);

  overflow: hidden;

}

.auth-page--simple {

  display: flex;

  align-items: flex-start;

  justify-content: center;

  grid-template-columns: 1fr;

  max-width: 460px;

  min-height: auto;

  padding: 0.95rem 1rem 1.7rem;

  background: radial-gradient(circle at 18% 0%, rgba(56, 189, 248, 0.18), transparent 40%),
    radial-gradient(circle at 85% 15%, rgba(251, 146, 60, 0.2), transparent 45%),
    linear-gradient(145deg, #ffffff 0%, #f0f9ff 55%, #fff7ed 100%);

  border-radius: 20px;

  border: 1px solid rgba(14, 165, 233, 0.2);

  box-shadow: 0 28px 60px rgba(15, 23, 42, 0.12);

  color: var(--text-main);

}

.auth-page--simple::before {

  content: none;

}

.auth-card--solo {

  width: min(100%, 400px);

  margin: 0 auto;

  padding: 1.15rem 1rem 1.05rem;

  border-radius: 18px;

  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 247, 237, 0.94));

  border: 1px solid rgba(14, 165, 233, 0.2);

  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.14);

  position: relative;

  overflow: hidden;

}

.auth-card--solo::before {

  content: "";

  position: absolute;

  top: -90px;

  right: -80px;

  width: 180px;

  height: 180px;

  background: radial-gradient(circle, rgba(56, 189, 248, 0.35), transparent 70%);

  pointer-events: none;

}

.auth-card--solo::after {

  content: "";

  position: absolute;

  bottom: -110px;

  left: -90px;

  width: 200px;

  height: 200px;

  background: radial-gradient(circle, rgba(251, 146, 60, 0.3), transparent 70%);

  pointer-events: none;

}

.auth-card--solo .auth-toggle {

  margin: 0 auto 0.95rem;

  background: rgba(255, 255, 255, 0.9);

  border-color: rgba(14, 165, 233, 0.2);

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 10px 22px rgba(14, 165, 233, 0.12);

}

.auth-card--solo .auth-card-title,
.auth-card--solo .auth-card-subtitle {

  text-align: center;

}

.auth-card--solo .auth-toggle-btn {

  padding: 0.42rem 0.9rem;

  font-size: 0.86rem;

  font-weight: 600;

  color: var(--text-muted);

}

.auth-card--solo .auth-toggle-btn--active {

  background: linear-gradient(135deg, #38bdf8, #f97316);

  color: #0b1220;

  box-shadow: 0 12px 22px rgba(14, 165, 233, 0.2);

}

.auth-card--solo .auth-card-title {

  font-size: 1.1rem;

  color: var(--text-main);

}

.auth-card--solo .auth-card-subtitle {

  font-size: 0.88rem;

  color: var(--text-muted);

  margin-bottom: 0.9rem;

}

.auth-card--solo .auth-form .form-group {

  margin-bottom: 0.6rem;

}

.auth-card--solo .auth-form input {

  padding: 0.6rem 0.75rem;

  font-size: 0.9rem;

  border-radius: 10px;

  border: 1px solid var(--border-soft);

  background: var(--bg-card);

  color: var(--text-main);

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);

}

.auth-card--solo .auth-form input:focus {

  border-color: rgba(14, 165, 233, 0.6);

  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18);

}

.auth-card--solo .auth-submit {

  margin-top: 0.3rem;

  background: linear-gradient(135deg, #38bdf8, #f97316);

  color: #0b1220;

  border: 1px solid rgba(14, 165, 233, 0.3);

  box-shadow: 0 16px 30px rgba(14, 165, 233, 0.22);

}

.auth-card--solo .auth-submit:hover {

  background: linear-gradient(135deg, #0ea5e9, #fb923c);

}

.auth-card--solo .auth-hint {

  color: #0f766e;

  background: rgba(14, 165, 233, 0.08);

  border: 1px dashed rgba(14, 165, 233, 0.25);

}

.auth-card--solo .auth-terms {

  color: #475569;

  background: rgba(251, 146, 60, 0.08);

  border: 1px solid rgba(251, 146, 60, 0.2);

}

.auth-card--solo .auth-link {

  color: #0ea5e9;

}

.auth-card--solo .auth-link:hover {

  color: #0284c7;

}

.auth-card--solo .auth-helper-card {

  border: 1px solid rgba(148, 163, 184, 0.3);

  background: rgba(248, 250, 252, 0.9);

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);

}

.auth-card--solo .auth-helper-card label {

  color: #475569;

}

.auth-card--solo .auth-helper-card input {

  border: 1px solid rgba(148, 163, 184, 0.35);

  background: #ffffff;

  color: #0f172a;

}

.auth-card--solo .auth-helper-card input:focus {

  outline: none;

  border-color: rgba(14, 165, 233, 0.6);

  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18);

}

.auth-card--solo .auth-helper-message {

  color: #0ea5e9;

}

.auth-card--solo .auth-helper-note {

  color: #64748b;

}



.auth-page::before {

  content: "";

  position: absolute;

  inset: 0;

  background: radial-gradient(

      circle at 10% 15%,

      rgba(14, 165, 233, 0.2),

      transparent 45%

    ),

    radial-gradient(

      circle at 85% 25%,

      rgba(99, 102, 241, 0.2),

      transparent 55%

    );

  pointer-events: none;

}



@media (max-width: 900px) {

  .auth-page {

    grid-template-columns: 1fr;

    padding: 2.2rem 1rem 2rem;

    border-radius: 24px;

  }

}



/* Ana informuese majtas */



.auth-hero {

  padding-right: 1rem;

}



.auth-title {

  font-size: 2.4rem;

  margin: 0.75rem 0 0.4rem;

  color: #0f172a;

}



.auth-subtitle {

  font-size: 0.98rem;

  color: #475569;

  max-width: 520px;

  line-height: 1.7;

}



.auth-benefits {

  margin-top: 1.4rem;

}



.auth-benefits h2 {

  font-size: 1rem;

  margin-bottom: 0.4rem;

  color: #0f172a;

}



.auth-benefits ul {

  list-style: none;

  padding: 0;

  margin: 0;

}



.auth-benefits li {

  font-size: 0.93rem;

  color: #4b5563;

  margin-bottom: 0.35rem;

  position: relative;

  padding-left: 1.2rem;

}



.auth-benefits li::before {

  content: "✓";

  position: absolute;

  left: 0;

  top: 0;

  color: #16a34a;

  font-size: 0.8rem;

}



.auth-privacy-note {

  margin-top: 1.4rem;

  font-size: 0.85rem;

  color: #6b7280;

  max-width: 540px;

}



/* Kartela e login/regjistrimit djathtas */



.auth-card {

  position: relative;

  overflow: hidden;

  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);

  border-radius: 1.4rem;

  padding: 2rem 1.9rem 1.8rem;

  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.16);

  border: 1px solid rgba(148, 163, 184, 0.35);

}



.auth-card::before {

  content: "";

  position: absolute;

  top: -140px;

  right: -120px;

  width: 260px;

  height: 260px;

  background: radial-gradient(circle, rgba(59, 130, 246, 0.18), transparent 65%);

  pointer-events: none;

}



.auth-card::after {

  content: "";

  position: absolute;

  bottom: -120px;

  left: -140px;

  width: 240px;

  height: 240px;

  background: radial-gradient(circle, rgba(14, 165, 233, 0.12), transparent 60%);

  pointer-events: none;

}



.auth-card > * {

  position: relative;

  z-index: 1;

}



.auth-toggle {

  display: inline-flex;

  padding: 0.25rem;

  background: #e2e8f0;

  border-radius: 999px;

  margin-bottom: 1.1rem;

  border: 1px solid rgba(148, 163, 184, 0.5);

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);

}



.auth-toggle-btn {

  border: none;

  background: transparent;

  padding: 0.45rem 1rem;

  font-size: 0.9rem;

  font-weight: 600;

  border-radius: 999px;

  cursor: pointer;

  color: #4b5563;

  transition: all 0.16s ease;

}



.auth-toggle-btn--active {

  background: linear-gradient(135deg, #0f172a, #1e3a8a);

  color: #f9fafb;

  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.25);

}



.auth-card-title {

  font-size: 1.35rem;

  margin-bottom: 0.3rem;

  color: #0f172a;

}



.auth-card-subtitle {

  font-size: 0.9rem;

  color: #6b7280;

  margin-bottom: 1.1rem;

}



/* Forma */



.auth-form .form-group {

  display: flex;

  flex-direction: column;

  margin-bottom: 0.75rem;

}



.auth-form label {

  font-size: 0.84rem;

  font-weight: 600;

  color: #4b5563;

  margin-bottom: 0.25rem;

}



.auth-form input {

  border-radius: 0.75rem;

  border: 1px solid rgba(148, 163, 184, 0.45);

  padding: 0.65rem 0.75rem;

  font-size: 0.9rem;

  background: #f8fafc;

  outline: none;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);

  transition: border-color 0.14s ease, box-shadow 0.14s ease;

}



.auth-form input:focus {

  border-color: #2563eb;

  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);

}



.auth-submit {

  width: 100%;

  margin-top: 0.4rem;

  background: linear-gradient(135deg, #0f172a, #1d4ed8);

  color: #ffffff;

  border: none;

  box-shadow: 0 16px 30px rgba(37, 99, 235, 0.2);

}



.auth-submit:hover {

  background: linear-gradient(135deg, #111827, #1e40af);

  transform: translateY(-1px);

  box-shadow: 0 18px 36px rgba(37, 99, 235, 0.28);

}



.auth-submit:disabled {

  cursor: not-allowed;

  opacity: 0.7;

  box-shadow: none;

  transform: none;

}



.auth-hint {

  font-size: 0.85rem;

  color: #6b7280;

  margin-top: 0.5rem;

}



.auth-terms {

  font-size: 0.8rem;

  color: #9ca3af;

  margin-top: 0.8rem;

}



/* Mesazhet */



.auth-alert {

  margin-top: 0.8rem;

  padding: 0.55rem 0.7rem;

  border-radius: 0.7rem;

  font-size: 0.85rem;

}



.auth-alert--error {

  background: #fef2f2;

  color: #b91c1c;

  border: 1px solid #fecaca;

}



.auth-alert--success {

  background: #ecfdf3;

  color: #15803d;

  border: 1px solid #bbf7d0;

}



/* Badge Beta */



.beta-badge {

  display: inline-flex;

  align-items: center;

  gap: 0.25rem;

  padding: 0.2rem 0.65rem;

  border-radius: 999px;

  background: #0f172a;

  color: #e5e7eb;

  font-size: 0.75rem;

  text-transform: uppercase;

  letter-spacing: 0.08em;

}



/* ===========================

   PROFILI IM

   =========================== */





/* ===============================

   PROFILE – WEBAPP DASHBOARD

   =============================== */



/* CONTAINER */

.profile-container {

  width: 100%;

  max-width: 1440px;

  margin: 0 auto;

  padding: 32px;

  display: grid;

  grid-template-columns: repeat(12, 1fr);

  gap: 24px;

  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

}



/* ===============================

   CARD BASE

   =============================== */

.card {

  background: #ffffff;

  border-radius: 18px;

  padding: 22px;

  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);

  transition: transform 0.2s ease, box-shadow 0.2s ease;

}



.card:hover {

  transform: translateY(-4px);

  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.12);

}



/* ===============================

   HEADER

   =============================== */

.profile-header {

  grid-column: span 12;

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.profile-header h2 {

  margin: 0;

  font-size: 22px;

}



.free {

  color: #64748b;

  font-weight: 500;

}



.premium {

  color: #f59e0b;

  font-weight: 600;

}



/* BUTTON */

.btn-upgrade {

  background: linear-gradient(135deg, #2563eb, #4f46e5);

  color: white;

  border: none;

  padding: 10px 20px;

  border-radius: 999px;

  font-size: 14px;

  cursor: pointer;

}



/* ===============================

   STATS

   =============================== */

.stats-grid {

  grid-column: span 12;

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 18px;

}



.stat-card {

  background: linear-gradient(135deg, #eef2ff, #ffffff);

  border-radius: 16px;

  padding: 20px;

  font-weight: 600;

  font-size: 16px;

}



/* ===============================

   WEEKLY GOAL

   =============================== */

.weekly-goal {

  grid-column: span 12;

}



/* ===============================

   COURSES

   =============================== */

.profile-courses {

  grid-column: span 8;

}



.course-row {

  display: grid;

  grid-template-columns: 70px 1fr 60px;

  gap: 14px;

  align-items: center;

  margin-top: 14px;

  font-size: 15px;

}



/* ===============================

   TEST RESULTS

   =============================== */

.profile-tests {

  grid-column: span 4;

}



.test-row {

  display: flex;

  justify-content: space-between;

  margin-top: 12px;

  font-size: 15px;

}



.good {

  color: #16a34a;

  font-weight: 600;

}



.warn {

  color: #f97316;

  font-weight: 600;

}



/* ===============================

   ACHIEVEMENTS

   =============================== */

.profile-achievements {

  grid-column: span 6;

}



.badges {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-top: 12px;

}



.badges span {

  background: #f1f5f9;

  padding: 6px 14px;

  border-radius: 999px;

  font-size: 14px;

}



/* ===============================

   ACTIVITY

   =============================== */

.profile-activity {

  grid-column: span 6;

}



.activity {

  margin-top: 10px;

  padding-left: 18px;

  color: #475569;

  line-height: 1.6;

}



/* ===============================

   PREMIUM (LOCKED)

   =============================== */

.profile-premium {

  grid-column: span 12;

  position: relative;

  overflow: hidden;

  opacity: 0.85;

  background: repeating-linear-gradient(

    45deg,

    #f8fafc,

    #f8fafc 10px,

    #f1f5f9 10px,

    #f1f5f9 20px

  );

}



.profile-premium::after {

  content: "COMING SOON";

  position: absolute;

  top: 16px;

  right: -40px;

  transform: rotate(35deg);

  background: #0f172a;

  color: #ffffff;

  padding: 6px 48px;

  font-size: 12px;

  letter-spacing: 1px;

}



/* ===============================

   SETTINGS

   =============================== */

.profile-settings {

  grid-column: span 12;

  opacity: 0.65;

}



/* ===============================

   PROGRESS BAR

   =============================== */

progress {

  width: 100%;

  height: 10px;

  appearance: none;

}



progress::-webkit-progress-bar {

  background: #e5e7eb;

  border-radius: 999px;

}



progress::-webkit-progress-value {

  background: linear-gradient(90deg, #2563eb, #4f46e5);

  border-radius: 999px;

}



/* ===============================

   RESPONSIVE

   =============================== */

@media (max-width: 1100px) {

  .stats-grid {

    grid-template-columns: repeat(2, 1fr);

  }



  .profile-courses {

    grid-column: span 12;

  }



  .profile-tests {

    grid-column: span 12;

  }



  .profile-achievements,

  .profile-activity {

    grid-column: span 12;

  }

}



@media (max-width: 600px) {

  .profile-container {

    padding: 16px;

    grid-template-columns: 1fr;

  }



  .stats-grid {

    grid-template-columns: 1fr;

  }



  .profile-header {

    flex-direction: column;

    align-items: flex-start;

    gap: 14px;

  }



  .btn-upgrade {

    width: 100%;

  }


}





/* ===========================

   TESTO NIVELIN ??" KARTELA< NA< MES + TIMER

   =========================== */

.test-level-page {
  width: 100%;
  max-width: 100%;
  min-height: calc(100vh - 80px);
  margin: 0;
  padding: 1.8rem 0.8rem 2rem;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(circle at 18% 12%, rgba(251, 191, 36, 0.18), transparent 42%),
    radial-gradient(circle at 85% 8%, rgba(56, 189, 248, 0.2), transparent 45%),
    radial-gradient(circle at 40% 85%, rgba(244, 114, 182, 0.16), transparent 45%),
    linear-gradient(135deg, #fff7ed 0%, #f8fafc 50%, #e0f2fe 100%);
}

.test-card {
  flex: 0 1 700px;
  max-width: 700px;
  width: 100%;
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 247, 237, 0.92));
  border-radius: 24px;
  padding: 1.5rem 1.6rem 1.7rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 24px 50px rgba(15, 23, 42, 0.12);
  color: #0f172a;
  position: relative;
  overflow: hidden;
}

/* Header i testit */

.test-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.2rem;
  margin-bottom: 1.3rem;
}

.test-header .breadcrumb {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
  margin-bottom: 0.35rem;
}

.test-header h1 {
  font-size: 1.6rem;
  margin: 0 0 0.25rem;
  color: #0f172a;
}

.test-subtitle {
  font-size: 0.9rem;
  color: #475569;
  max-width: 620px;
  line-height: 1.6;
}

.test-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.test-meta-badge {
  background: rgba(14, 165, 233, 0.12);
  color: #0f172a;
  border-radius: 999px;
  padding: 0.32rem 0.78rem;
  font-size: 0.74rem;
  font-weight: 600;
  border: 1px solid rgba(14, 165, 233, 0.25);
}

/* Timer */

.test-timer {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
  background: linear-gradient(135deg, #38bdf8, #f59e0b);
  color: #0f172a;
  padding: 0.65rem 0.95rem;
  border-radius: 12px;
  min-width: 118px;
  border: 1px solid rgba(14, 165, 233, 0.35);
  box-shadow: 0 16px 30px rgba(14, 165, 233, 0.22);
}

.test-timer-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.82;
}

.test-timer-value {
  font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  font-size: 1.16rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Progress dhe chip i nivelit */

.test-progress {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5rem;
  font-size: 0.92rem;
  color: #475569;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.test-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-end;
}

.test-level-chip {
  background: rgba(56, 189, 248, 0.18);
  color: #0f766e;
  border-radius: 999px;
  padding: 0.32rem 0.78rem;
  font-size: 0.78rem;
  font-weight: 700;
  box-shadow: 0 10px 20px rgba(14, 165, 233, 0.18);
  border: 1px solid rgba(14, 165, 233, 0.35);
}

.test-type-chip {
  background: rgba(251, 146, 60, 0.18);
  color: #9a3412;
  border-radius: 999px;
  padding: 0.32rem 0.78rem;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid rgba(251, 146, 60, 0.35);
}

.test-progress-track {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.3);
  overflow: hidden;
  margin-bottom: 0.6rem;
}

.test-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #38bdf8, #fb7185);
  transition: width 0.2s ease;
}

.test-start {
  border-radius: 18px;
  padding: 1.2rem 1.3rem 1.4rem;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.3);
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.12);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.test-start-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.test-start-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
  color: #0f172a;
}

.test-start-text {
  margin: 0;
  color: #475569;
  font-size: 0.92rem;
  line-height: 1.55;
}

.test-start .btn-primary {
  background: linear-gradient(135deg, #38bdf8, #fb7185);
  color: #0f172a;
  border: 1px solid rgba(56, 189, 248, 0.45);
  box-shadow: 0 16px 32px rgba(56, 189, 248, 0.25);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.test-start .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 20px 38px rgba(251, 113, 133, 0.25);
}

.test-start .btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 12px 24px rgba(56, 189, 248, 0.2);
}

.test-start .btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25),
    0 18px 34px rgba(56, 189, 248, 0.25);
}

.test-intro-grid {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.test-intro-item {
  background: rgba(248, 250, 252, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 12px;
  padding: 0.7rem 0.8rem;
  color: #475569;
  font-size: 0.86rem;
  line-height: 1.5;
}

.test-intro-item strong {
  display: block;
  font-size: 0.88rem;
  color: #0f172a;
  margin-bottom: 0.35rem;
}

/* Zona e pyetjes ??" mA? e ngushtA? nA? mes */

.test-question-area {
  padding: 0.9rem 0 0.5rem;
  border-top: 1px solid rgba(148, 163, 184, 0.35);
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.test-question-text {
  font-size: 1.02rem;
  font-weight: 600;
  margin: 0;
  color: #0f172a;
  line-height: 1.45;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(251, 146, 60, 0.18));
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 12px;
  padding: 0.7rem 0.9rem;
}

.test-answers {
  display: grid;
  gap: 0.45rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.test-input {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.test-input-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
}

.test-input-row {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

.test-input-field {
  flex: 1;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  padding: 0.65rem 0.8rem;
  color: #0f172a;
  font-size: 0.95rem;
}

.test-input-field:focus {
  outline: none;
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18);
}

.test-input-row .btn-primary {
  white-space: nowrap;
}

.test-answer-button {
  width: 100%;
  text-align: left;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  padding: 0.64rem 0.8rem;
  font-size: 0.9rem;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.16s ease;
  line-height: 1.5;
  color: #0f172a;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
}

.test-answer-button:hover {
  border-color: rgba(56, 189, 248, 0.6);
  box-shadow: 0 14px 26px rgba(56, 189, 248, 0.2);
  transform: translateY(-2px);
  background: rgba(56, 189, 248, 0.1);
}

.test-hint {
  margin-top: 0.8rem;
  font-size: 0.88rem;
  color: #475569;
  background: rgba(14, 165, 233, 0.08);
  border: 1px dashed rgba(14, 165, 233, 0.35);
  padding: 0.68rem 0.8rem;
  border-radius: 10px;
}

/* Footer i kartelA?s (butoni pA?rfundim) */

.test-footer {
  margin-top: 1rem;
  border-top: 1px dashed rgba(148, 163, 184, 0.4);
  padding-top: 0.85rem;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

/* Rezultati */

.test-result-area {
  margin-top: 0.6rem;
  border-top: 1px solid rgba(148, 163, 184, 0.35);
  padding-top: 1.15rem;
}

.test-result-area h2 {
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
  color: #0f172a;
}

.test-result-main {
  font-size: 1rem;
  color: #334155;
  margin-bottom: 0.6rem;
}

.test-suggested-level {
  font-size: 1rem;
  margin-bottom: 1rem;
  color: #334155;
}

.test-suggested-level-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #22c55e, #38bdf8);
  color: #0f172a;
  font-size: 0.9rem;
  margin-left: 0.2rem;
  box-shadow: 0 12px 26px rgba(34, 197, 94, 0.2);
}

/* Tabela e niveleve */

.test-level-table {
  border-radius: 1rem;
  background: rgba(248, 250, 252, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.3);
  padding: 0.9rem 1rem;
  margin-bottom: 1rem;
}

.test-level-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.35rem 0.1rem;
  font-size: 0.92rem;
  color: #0f172a;
}

.test-level-name {
  font-weight: 600;
}

.test-level-score {
  font-size: 0.88rem;
  color: #475569;
}

.test-level-percent {
  margin-left: 0.35rem;
  color: #64748b;
}

.test-level-row.is-active {
  background: rgba(56, 189, 248, 0.2);
  border-radius: 10px;
  padding: 0.35rem 0.6rem;
}

.test-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0.6rem 0 0.4rem;
}

.test-alt-levels {
  margin: 0.6rem 0 0.4rem;
  color: #475569;
  font-size: 0.88rem;
}

.test-level-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.8rem;
}

.test-level-link {
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #0f172a;
  border: 1px solid rgba(148, 163, 184, 0.35);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.9);
  transition: border-color 0.15s ease, background 0.15s ease,
    transform 0.15s ease;
}

.test-level-link:hover {
  border-color: rgba(56, 189, 248, 0.6);
  background: rgba(56, 189, 248, 0.12);
  transform: translateY(-1px);
}

.test-level-link.is-active {
  background: linear-gradient(135deg, #38bdf8, #fb7185);
  color: #0f172a;
  border-color: transparent;
  box-shadow: 0 12px 26px rgba(56, 189, 248, 0.24);
}

/* Info pA?r ruajtjen */

.test-save-info {
  font-size: 0.88rem;
  color: #475569;
  margin-bottom: 0.6rem;
  background: rgba(248, 250, 252, 0.95);
  border: 1px dashed rgba(148, 163, 184, 0.4);
  padding: 0.8rem 0.9rem;
  border-radius: 12px;
}

/* Responsive */

@media (max-width: 900px) {
  .test-level-page {
    padding: 5rem 1.25rem 3.5rem;
  }

  .test-card {
    padding: 1.4rem 1.3rem 1.6rem;
  }

  .test-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .test-timer {
    align-items: flex-start;
  }

  .test-progress {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }

  .test-chips {
    justify-content: flex-start;
  }

  .test-progress-track {
    margin-bottom: 0.8rem;
  }

  .test-question-area {
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .test-level-page {
    padding: 3.4rem 1rem 2.4rem;
    align-items: flex-start;
  }

  .test-card {
    padding: 1.1rem 1rem 1.3rem;
  }

  .test-header h1 {
    font-size: 1.35rem;
  }

  .test-subtitle {
    font-size: 0.82rem;
  }

  .test-meta {
    gap: 0.35rem;
  }

  .test-meta-badge {
    font-size: 0.68rem;
    padding: 0.26rem 0.6rem;
  }

  .test-timer {
    width: 100%;
    align-items: flex-start;
  }

  .test-timer-value {
    font-size: 1.02rem;
  }

  .test-question-text {
    font-size: 0.98rem;
  }

  .test-answer-button {
    font-size: 0.92rem;
    padding: 0.7rem 0.85rem;
  }

  .test-hint {
    font-size: 0.82rem;
  }

  .test-start {
    padding: 0.85rem;
    gap: 0.6rem;
  }

  .test-start-header {
    flex-direction: column;
    align-items: stretch;
  }

  .test-start-header .btn-primary {
    width: 100%;
  }

  .test-start-title {
    font-size: 1rem;
  }

  .test-start-text {
    font-size: 0.82rem;
  }

  .test-intro-item {
    padding: 0.6rem 0.7rem;
    font-size: 0.82rem;
  }

  .test-intro-item strong {
    font-size: 0.82rem;
  }

  .test-input-row {
    flex-direction: column;
    align-items: stretch;
  }

  .test-input-row .btn-primary {
    width: 100%;
  }

  .test-answers {
    grid-template-columns: 1fr;
  }
  .test-intro-grid {
    grid-template-columns: 1fr;
  }
  .test-result-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .test-level-actions {
    gap: 0.35rem;
  }
}


/* ===========================

   EXTRA STYLES

   =========================== */



.beta-banner {

  margin: 12px 0 20px;

  padding: 12px 14px;

  border-radius: 14px;

  background: #eff6ff;

  border: 1px solid #bfdbfe;

  color: #0f172a;

  font-weight: 600;

}



.courses-level-tab--locked {

  border-color: #fecaca;

  background: #fff7f7;

  color: #7f1d1d;

}



.courses-level-tab--locked .level-tab-label {

  color: #7f1d1d;

}



.courses-level-tab--upgrade,

.grammar-level-tab--upgrade {

  border-color: #fde68a;

  background: #fffbeb;

  color: #92400e;

}



.courses-level-tab--upgrade .level-tab-label,

.grammar-level-tab--upgrade .level-tab-label {

  color: #92400e;

}



.courses-level-tab--coming,

.grammar-level-tab--coming {

  border-color: #fecaca;

  background: #fff7f7;

  color: #7f1d1d;

}



.courses-level-tab--coming .level-tab-label,

.grammar-level-tab--coming .level-tab-label {

  color: #7f1d1d;

}



.courses-level-tab--active .badge {

  border-color: rgba(255, 255, 255, 0.45);

  color: #ffffff;

  background: rgba(255, 255, 255, 0.2);

}



.courses-level-tab--active .level-tab-label,

.grammar-level-tab--active .level-tab-label {

  color: #ffffff;

}



.courses-level-tab--active.courses-level-tab--upgrade,

.grammar-level-tab--active.grammar-level-tab--upgrade {

  background: #fffbeb;

  border-color: #f59e0b;

  color: #92400e;

  box-shadow: 0 10px 24px rgba(245, 158, 11, 0.18);

}



.courses-level-tab--active.courses-level-tab--upgrade .level-tab-label,

.grammar-level-tab--active.grammar-level-tab--upgrade .level-tab-label {

  color: #92400e;

}



.courses-level-tab--active.courses-level-tab--upgrade .badge,

.grammar-level-tab--active.grammar-level-tab--upgrade .badge {

  color: #92400e;

  border-color: #fcd34d;

  background: rgba(245, 158, 11, 0.15);

}



.courses-level-tab--active.courses-level-tab--coming,

.grammar-level-tab--active.grammar-level-tab--coming {

  background: #fff7f7;

  border-color: #fca5a5;

  color: #7f1d1d;

  box-shadow: 0 10px 24px rgba(239, 68, 68, 0.16);

}



.courses-level-tab--active.courses-level-tab--coming .level-tab-label,

.grammar-level-tab--active.grammar-level-tab--coming .level-tab-label {

  color: #7f1d1d;

}



.courses-level-tab--active.courses-level-tab--coming .badge,

.grammar-level-tab--active.grammar-level-tab--coming .badge {

  color: #7f1d1d;

  border-color: #fecaca;

  background: #fee2e2;

}



.grammar-level-tab {

  display: inline-flex;

  align-items: center;

  gap: 0.45rem;

  flex-wrap: wrap;

}



.grammar-level-tab--locked {

  border-color: #fde68a;

  background: #fffbeb;

  color: #92400e;

}



.badge-premium {

  background: #fef3c7;

  color: #92400e;

  border: 1px solid #fde68a;

}



.lesson-focus {

  margin: 0.6rem 0 0 1.1rem;

  color: #475569;

}



.lesson-focus li {

  margin-bottom: 0.3rem;

}



.lesson-links,

.exercise-links,

.topic-links,

.lesson-footer-links,

.exercise-footer-links {

  display: flex;

  flex-wrap: wrap;

  gap: 0.6rem;

  margin: 0.8rem 0 1.1rem;

}



.lesson-footer,

.exercise-footer {

  margin-top: 1.2rem;

  padding-top: 1.1rem;

  border-top: 1px solid #e2e8f0;

  display: grid;

  gap: 0.9rem;

}



.exercise-footer-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 0.6rem;

}



.topic-links {

  margin: 1rem 0 0;

  padding-top: 1rem;

  border-top: 1px dashed #e2e8f0;

}



.topic-section--writing {

  background: #f8fafc;

  border: 1px dashed #cbd5f5;

  border-radius: 14px;

  padding: 0.9rem 1rem;

}



.topic-placeholder {

  color: #64748b;

  margin: 0 0 0.6rem;

}



.topic-placeholder-box {

  background: #ffffff;

  border-radius: 12px;

  padding: 0.6rem 0.8rem;

  border: 1px solid #e2e8f0;

  color: #475569;

}



.topic-placeholder-box p {

  margin: 0 0 0.4rem;

}



.topic-placeholder-box p:last-child {

  margin-bottom: 0;

}



.grammar-locked {

  max-width: 900px;

  margin: 0 auto;

}



.premium-card {

  background: linear-gradient(135deg, #fffbeb, #ffffff);

  border-color: #fde68a;

}



.premium-note {

  font-size: 0.85rem;

  color: #92400e;

  margin-top: 0.6rem;

}



.auth-helper {

  margin-top: 1.2rem;

}



.auth-helper-links {

  display: flex;

  flex-wrap: wrap;

  gap: 0.6rem;

}



.auth-link {

  border: none;

  background: none;

  color: #2563eb;

  font-weight: 600;

  cursor: pointer;

  padding: 0;

}



.auth-link:hover {

  text-decoration: underline;

}



.auth-helper-card {

  margin-top: 0.8rem;

  border: 1px solid rgba(148, 163, 184, 0.35);

  border-radius: 14px;

  padding: 0.8rem 0.9rem;

  display: grid;

  gap: 0.6rem;

  background: #f8fafc;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);

}



.auth-helper-card label {

  font-size: 0.85rem;

  color: #475569;

}



.auth-helper-card input {

  border-radius: 0.7rem;

  border: 1px solid rgba(148, 163, 184, 0.45);

  padding: 0.55rem 0.7rem;

  background: #ffffff;

}



.auth-helper-message {

  font-size: 0.85rem;

  color: #1d4ed8;

  margin: 0;

}



.auth-helper-note {

  font-size: 0.78rem;

  color: #6b7280;

  margin: 0;

}



.profile-upgrade {

  background: linear-gradient(135deg, #eef2ff, #ffffff);

  border-color: rgba(59, 130, 246, 0.2);

}



.profile-upgrade .btn-primary {

  margin-top: 0.6rem;

}



.btn-primary.is-disabled {

  opacity: 0.6;

  cursor: not-allowed;

  box-shadow: none;

}



.btn-primary.is-disabled:hover {

  transform: none;

  background: #0f172a;

}



@media (max-width: 720px) {

  .lesson-links,

  .exercise-links,

  .topic-links,

  .lesson-footer-links,

  .exercise-footer-links,

  .exercise-footer-actions,

  .auth-helper-links {

    flex-direction: column;

    align-items: stretch;

  }



  .lesson-links .btn-secondary,

  .lesson-links .btn-outline,

  .exercise-links .btn-secondary,

  .exercise-links .btn-outline,

  .lesson-footer-links .btn-secondary,

  .lesson-footer-links .btn-outline,

  .exercise-footer-links .btn-secondary,

  .exercise-footer-links .btn-outline,

  .topic-links .btn-secondary,

  .topic-links .btn-outline {

    width: 100%;

    justify-content: center;

  }

}

/* LOGO RRETH DHE IMAGJINË NORMALE */

.brand-logo {

  width: 40px;          /* madhësia e rrumbullakët */

  height: 40px;

  border-radius: 50%;   /* e bën rreth */

  overflow: hidden;     /* pret pjesën jashtë rrethit */

  background: #ffffff;  /* sfond i bardhë ose si dëshiron */

  display: flex;

  align-items: center;

  justify-content: center;

}



/* vetë fotoja brenda logos */

.brand-logo-img {

  width: 100%;

  height: 100%;

  object-fit: cover;    /* mos e shtrembëro, mbush rrethin bukur */

  display: block;

}

/* ===========================

   USHTRIMET – STIL SHTESË

   (ruan pamjen si Kurset)

   =========================== */



.exercises-page .courses-layout {

  max-width: 1100px;

  margin: 0 auto;

}



.exercises-page .courses-header {

  text-align: left;

  padding: 22px 24px;

  border-radius: 22px;

  border: 1px solid #e2e8f0;

  background: linear-gradient(135deg, #ffffff, #eef2ff);

  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.1);

}



.exercises-page .courses-header h1 {

  margin-top: 0.3rem;

}



.exercises-page .courses-intro {

  margin: 0;

}



.exercises-page .courses-level-tabs {

  justify-content: flex-start;

}



.exercises-page .courses-level-tab {

  background: #f1f5f9;

}



.exercises-page .courses-level-tab--active {

  background: #0f172a;

  color: #f9fafb;

  border-color: #0f172a;

}



.exercises-page .courses-level-tab--active .level-tab-label {

  color: #f9fafb;

}



.exercises-page .courses-level-tab--active .badge {

  border-color: rgba(255, 255, 255, 0.45);

  color: #ffffff;

  background: rgba(255, 255, 255, 0.2);

}



.exercises-page .courses-level-tab--active.courses-level-tab--upgrade {

  background: #fffbeb;

  border-color: #f59e0b;

  color: #92400e;

}



.exercises-page

  .courses-level-tab--active.courses-level-tab--upgrade

  .level-tab-label {

  color: #92400e;

}



.exercises-page .courses-level-tab--active.courses-level-tab--upgrade .badge {

  color: #92400e;

  border-color: #fcd34d;

  background: rgba(245, 158, 11, 0.15);

}



.exercises-page .courses-level-tab--active.courses-level-tab--coming {

  background: #fff7f7;

  border-color: #fca5a5;

  color: #7f1d1d;

}



.exercises-page

  .courses-level-tab--active.courses-level-tab--coming

  .level-tab-label {

  color: #7f1d1d;

}



.exercises-page .courses-level-tab--active.courses-level-tab--coming .badge {

  color: #7f1d1d;

  border-color: #fecaca;

  background: #fee2e2;

}



.exercises-page .courses-level-description {

  text-align: left;

  margin-left: 0;

  margin-right: 0;

}



/* Top bar i ushtrimit */

.exercise-topbar {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 18px;

  margin-bottom: 16px;

  padding: 16px 18px;

  border-radius: 18px;

  border: 1px solid var(--border-soft, #e2e8f0);

  background: linear-gradient(135deg, #ffffff, #f8fafc);

  box-shadow: var(--shadow-soft, 0 14px 28px rgba(15, 23, 42, 0.08));

}



.exercise-title {

  margin: 0 0 10px 0;

}



.exercise-actions {

  display: flex;

  flex-direction: column;

  align-items: stretch;

  gap: 12px;

  min-width: 240px;

  flex: 1;

}



.exercise-progress {

  font-size: 14px;

  color: #475569;

  display: grid;

  gap: 6px;

}



.exercise-progress progress {

  height: 8px;

}



.exercise-action-buttons {

  display: grid;

  gap: 10px;

}



.exercises-page .lesson-button {

  border: 1px solid transparent;

}



.exercises-page .lesson-button--done {

  background: rgba(34, 197, 94, 0.18);

  border-color: rgba(34, 197, 94, 0.55);

  color: #ecfdf5;

}



.exercises-page .lesson-button--done .lesson-number {

  background: rgba(34, 197, 94, 0.35);

  color: #ecfdf5;

}



.exercises-page .lesson-button--active.lesson-button--done {

  background: #f8fafc;

  color: #0f172a;

  border-color: rgba(34, 197, 94, 0.75);

}



.exercises-page .lesson-button--active.lesson-button--done .lesson-number {

  background: #22c55e;

  color: #0f172a;

}



.exercise-submit,

.exercise-reset {

  border: 1px solid var(--border-soft, #e2e8f0);

  background: var(--bg-card, #fff);

  padding: 10px 14px;

  border-radius: 12px;

  cursor: pointer;

  box-shadow: var(--shadow-soft, 0 12px 30px rgba(15, 23, 42, 0.08));

  transition: transform 0.15s ease, box-shadow 0.15s ease;

}



.exercise-submit {

  background: #0f172a;

  color: #f8fafc;

  border-color: #0f172a;

}



.exercise-reset {

  color: #0f172a;

}



.exercise-submit:hover,

.exercise-reset:hover {

  transform: translateY(-1px);

}



.exercise-submit--disabled {

  opacity: 0.5;

  cursor: not-allowed;

  transform: none !important;

}



.exercise-result-banner {

  margin: 12px 0 18px;

  padding: 12px 14px;

  border-radius: 14px;

  background: linear-gradient(135deg, #e0f2fe, #eff6ff);

  border: 1px solid #bfdbfe;

  font-weight: 600;

}



/* Quiz cards */

.exercise-questions {

  display: grid;

  gap: 18px;

}



.quiz-question-card {

  background: var(--bg-card, #fff);

  border: 1px solid var(--border-soft, #e2e8f0);

  border-radius: 18px;

  padding: 16px;

  box-shadow: var(--shadow-soft, 0 12px 30px rgba(15, 23, 42, 0.08));

}



.exercises-page .quiz-question-card {

  border-left: 4px solid #2563eb;

  background: linear-gradient(135deg, #ffffff, #f8fafc);

}



.quiz-question-text {

  font-weight: 700;

  margin-bottom: 12px;

  display: flex;

  gap: 10px;

  flex-wrap: wrap;

}



.exercises-page .quiz-question-text {

  font-size: 1rem;

}



.quiz-question-number {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 78px;

  padding: 6px 10px;

  border-radius: 999px;

  background: var(--bg-soft, #f8fafc);

  border: 1px solid var(--border-soft, #e2e8f0);

  font-weight: 700;

  font-size: 13px;

}



.quiz-answers {

  display: grid;

  gap: 10px;

}



.quiz-answer {

  text-align: left;

  border: 1px solid var(--border-soft, #e2e8f0);

  background: var(--bg-soft, #f8fafc);

  padding: 12px 12px;

  border-radius: 14px;

  cursor: pointer;

}



.exercises-page .quiz-answer {

  background: #ffffff;

  border-left: 3px solid transparent;

  padding-left: 14px;

}



.quiz-answer:hover {

  transform: translateY(-1px);

}



.exercises-page .quiz-answer:hover {

  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.08);

}



.quiz-answer--selected {

  border-color: var(--primary, #2563eb);

  background: var(--primary-soft, #eff6ff);

}



.exercises-page .quiz-answer--selected {

  border-left-color: var(--primary, #2563eb);

}



/* Vetëm pas submit */

.quiz-answer--correct {

  border-color: #16a34a;

  background: rgba(22, 163, 74, 0.12);

}



.quiz-answer--wrong {

  border-color: #ef4444;

  background: rgba(239, 68, 68, 0.10);

}



.exercises-page .quiz-answer--correct {

  border-left-color: #16a34a;

}



.exercises-page .quiz-answer--wrong {

  border-left-color: #ef4444;

}



.quiz-answer--correctPicked {

  outline: 2px solid rgba(22, 163, 74, 0.25);

}



.quiz-feedback {

  margin-top: 12px;

  padding: 12px 12px;

  border-radius: 14px;

  border: 1px solid var(--border-soft, #e2e8f0);

  background: var(--bg-soft, #f8fafc);

}



.quiz-feedback--correct {

  border-color: rgba(22, 163, 74, 0.35);

}



.quiz-feedback--wrong {

  border-color: rgba(239, 68, 68, 0.35);

}



/* Coming soon card */

.coming-soon-card {

  padding: 14px;

  border-radius: 16px;

  border: 1px dashed var(--border-soft, #e2e8f0);

  background: var(--bg-soft, #f8fafc);

}



.coming-soon-title {

  font-weight: 800;

  margin-bottom: 6px;

}



/* Responsive */

@media (max-width: 920px) {

  .exercise-topbar {

    flex-direction: column;

    align-items: stretch;

    padding: 14px;

  }



  .exercise-actions {

    min-width: 0;

  }



  .exercises-page .courses-header {

    padding: 18px;

  }



  .exercises-page .courses-lesson-list {

    background: radial-gradient(circle at top left, #0f172a, #020617);

    border: 1px solid #1f2937;

    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.6);

    padding: 1.1rem 1rem;

  }



  .exercises-page .courses-lesson-list ul {

    display: flex;

    flex-direction: column;

    gap: 0.6rem;

    max-height: 28vh;

    overflow-y: auto;

  }



  .exercises-page .lesson-button {

    background: transparent;

    border-radius: 12px;

    padding: 0.6rem 0.7rem;

  }



  .exercises-page .lesson-button--active {

    background: #f8fafc;

    color: #0f172a;

  }



  .exercise-action-buttons button {

    width: 100%;

  }



  .quiz-question-number {

    min-width: auto;

  }

}



/* ===========================

   PROFILI IM (REFRESHED)

   =========================== */



.profile-shell {

  max-width: 1360px;

  margin: 0 auto;

  padding: 4.5rem 1.5rem 4rem;

  display: flex;

  flex-direction: column;

  gap: 20px;

  align-items: center;

  position: relative;

}



.profile-hero {

  background: linear-gradient(135deg, #0b1120, #1e3a8a 45%, #0284c7);

  color: #e5e7eb;

  border-radius: 24px;

  padding: 26px;

  display: grid;

  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);

  gap: 20px;

  align-items: center;

  box-shadow: var(--shadow-strong);

  width: 100%;

  max-width: 1100px;

  position: relative;

  overflow: hidden;

  border: 1px solid rgba(148, 163, 184, 0.25);

}



.profile-hero::before {

  content: "";

  position: absolute;

  inset: 0;

  background: radial-gradient(

      circle at 15% 20%,

      rgba(56, 189, 248, 0.4),

      transparent 45%

    ),

    radial-gradient(

      circle at 85% 10%,

      rgba(99, 102, 241, 0.35),

      transparent 50%

    );

  opacity: 0.7;

}



.profile-hero > * {

  position: relative;

  z-index: 1;

}



.profile-hero-main {

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.profile-hero-panels {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

  gap: 12px;

  align-content: start;

}



.hero-actions {

  margin-top: 4px;

}



.hero-metric-card {

  background: rgba(15, 23, 42, 0.55);

  border-radius: 16px;

  padding: 14px;

  border: 1px solid rgba(148, 163, 184, 0.25);

  display: flex;

  flex-direction: column;

  gap: 6px;

  min-height: 150px;

  backdrop-filter: blur(8px);

}



.hero-metric-card--streak {

  border-color: rgba(34, 197, 94, 0.35);

}



.hero-metric-card--tests {

  border-color: rgba(56, 189, 248, 0.35);

}



.hero-metric-label {

  text-transform: uppercase;

  letter-spacing: 0.08em;

  font-size: 0.72rem;

  color: #cbd5f5;

}



.hero-metric-value {

  font-size: 2rem;

  font-weight: 800;

  color: #f8fafc;

}



.hero-metric-sub {

  font-size: 0.9rem;

  color: #bae6fd;

}



.hero-metric-foot {

  margin-top: auto;

  font-size: 0.85rem;

  color: #cbd5f5;

}



.hero-meter {

  --value: 0;

  height: 8px;

  border-radius: 999px;

  background: rgba(226, 232, 240, 0.2);

  overflow: hidden;

  position: relative;

}



.hero-meter::after {

  content: "";

  position: absolute;

  inset: 0;

  width: calc(var(--value) * 1%);

  background: linear-gradient(90deg, #38bdf8, #818cf8);

}



.streak-dots {

  display: grid;

  grid-template-columns: repeat(7, minmax(0, 1fr));

  gap: 6px;

  margin-top: 6px;

}



.streak-dot {

  height: 8px;

  border-radius: 999px;

  background: rgba(226, 232, 240, 0.2);

}



.streak-dot--on {

  background: linear-gradient(90deg, #22c55e, #86efac);

  box-shadow: 0 8px 16px rgba(34, 197, 94, 0.35);

}



.profile-verify-card {

  width: 100%;

  max-width: 1100px;

  background: linear-gradient(135deg, #fff7ed, #ffedd5);

  border: 1px solid #fed7aa;

  border-radius: 18px;

  padding: 16px 18px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 18px;

  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);

}



.profile-verify-card h3 {

  margin: 0 0 6px;

  color: #9a3412;

}



.profile-verify-card p {

  margin: 0;

  color: #7c2d12;

}



.profile-verify-card--ok {

  background: linear-gradient(135deg, #ecfdf3, #d1fae5);

  border-color: #bbf7d0;

}



.profile-verify-card--ok h3 {

  color: #065f46;

}



.profile-verify-card--ok p {

  color: #065f46;

}



.profile-verify-message {

  margin-top: 6px;

  font-size: 0.88rem;

  color: #9a3412;

}



.profile-verify-card--ok .profile-verify-message {

  color: #047857;

}



.profile-verify-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

}



.verify-pill {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding: 8px 14px;

  border-radius: 999px;

  background: rgba(5, 150, 105, 0.16);

  color: #047857;

  font-weight: 700;

  border: 1px solid rgba(5, 150, 105, 0.35);

}



.profile-hero h1 {

  margin: 4px 0 8px;

  font-size: 1.9rem;

}



.profile-hero .breadcrumb {

  text-transform: uppercase;

  letter-spacing: 0.08em;

  font-size: 0.78rem;

  opacity: 0.8;

}



.hero-sub {

  margin: 0;

  color: #cbd5e1;

  font-size: 0.98rem;

}



.hero-tags {

  display: flex;

  gap: 10px;

  flex-wrap: wrap;

  margin-top: 12px;

}



.tag {

  background: rgba(255, 255, 255, 0.12);

  border: 1px solid rgba(255, 255, 255, 0.25);

  color: #e2e8f0;

  padding: 6px 10px;

  border-radius: 999px;

  font-size: 0.85rem;

}



.btn-upgrade-cta {

  border: none;

  background: linear-gradient(135deg, #2563eb, #4f46e5);

  color: #ffffff;

  padding: 10px 18px;

  border-radius: 999px;

  font-weight: 700;

  box-shadow: 0 12px 30px rgba(79, 70, 229, 0.35);

  cursor: pointer;

  display: inline-flex;

  align-items: center;

  gap: 6px;

  text-decoration: none;

}



.profile-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

  gap: 20px;

  margin-top: 4px;

  width: 100%;

  max-width: 1100px;

}



.profile-card {

  background: var(--bg-card);

  border-radius: 18px;

  padding: 18px;

  border: 1px solid var(--border-soft);

  box-shadow: var(--shadow-soft);

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.profile-card.stat {

  background: linear-gradient(135deg, #ffffff, #eef2ff);

  border-color: #dbeafe;

  gap: 6px;

}



.stat-label {

  color: #64748b;

  font-size: 0.8rem;

  text-transform: uppercase;

  letter-spacing: 0.06em;

  margin: 0;

}



.stat-value {

  margin: 0;

  font-size: 1.8rem;

  font-weight: 800;

  color: #0f172a;

}



.profile-card.wide {

  grid-column: span 2;

}



.profile-card.full {

  grid-column: 1 / -1;

}



.profile-card.tall {

  min-height: 280px;

}



.profile-progress-card {

  background: linear-gradient(135deg, #ffffff, #eef2ff 55%, #e0f2fe);

  border-color: #dbeafe;

}



.progress-pill {

  padding: 6px 12px;

  border-radius: 999px;

  background: rgba(37, 99, 235, 0.12);

  color: #1d4ed8;

  font-weight: 700;

  font-size: 0.85rem;

  border: 1px solid rgba(37, 99, 235, 0.28);

}



.profile-progress-body {

  display: flex;

  flex-direction: column;

  gap: 14px;

}



.profile-progress-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));

  gap: 12px;

}



.progress-cell {

  background: #ffffff;

  border: 1px solid #e2e8f0;

  border-radius: 14px;

  padding: 12px;

  display: flex;

  flex-direction: column;

  gap: 6px;

}



.progress-label {

  font-size: 0.78rem;

  text-transform: uppercase;

  letter-spacing: 0.06em;

  color: #64748b;

}



.progress-value {

  font-size: 1.4rem;

  font-weight: 800;

  color: #0f172a;

}



.profile-progress-bar {

  display: flex;

  flex-direction: column;

  gap: 6px;

}



.profile-progress-track {

  position: relative;

  height: 10px;

  border-radius: 999px;

  background: #e2e8f0;

  overflow: hidden;

}



.profile-progress-fill {

  position: absolute;

  inset: 0;

  width: 0;

  background: linear-gradient(90deg, #2563eb, #4f46e5);

}



.profile-progress-meta {

  display: flex;

  justify-content: space-between;

  font-size: 0.85rem;

  color: #475569;

}



.card-head {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 4px;

}



.muted {

  color: #6b7280;

  margin: 0;

}



.level-list,

.test-list,

.settings-list {

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.course-list {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

  gap: 12px;

}



.level-row {

  display: flex;

  flex-direction: column;

  gap: 6px;

}



.level-info {

  display: flex;

  justify-content: space-between;

  font-weight: 600;

}



.course-item {

  border: 1px solid #e2e8f0;

  border-radius: 14px;

  padding: 12px;

  display: flex;

  flex-direction: column;

  align-items: stretch;

  gap: 12px;

  background: #f8fafc;

}



.course-item-head {

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 10px;

}



.test-item {

  border: 1px solid #e2e8f0;

  border-radius: 12px;

  padding: 10px 12px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 10px;

  background: #f8fafc;

}



.course-name {

  font-weight: 700;

  color: #0f172a;

}



.course-status {

  display: inline-flex;

  align-items: center;

  padding: 4px 10px;

  border-radius: 999px;

  font-size: 0.72rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  border: 1px solid transparent;

}



.course-status--done {

  background: rgba(22, 163, 74, 0.12);

  color: #15803d;

  border-color: rgba(22, 163, 74, 0.3);

}



.course-status--progress {

  background: rgba(14, 116, 144, 0.12);

  color: #0e7490;

  border-color: rgba(14, 116, 144, 0.3);

}



.course-status--idle {

  background: rgba(100, 116, 139, 0.12);

  color: #475569;

  border-color: rgba(100, 116, 139, 0.3);

}



.course-score {

  background: #0ea5e9;

  color: #ffffff;

  border-radius: 999px;

  padding: 4px 10px;

  font-size: 0.8rem;

  font-weight: 700;

}



.course-progress {

  width: 100%;

  display: flex;

  align-items: center;

  margin-top: auto;

}



.test-name {

  font-weight: 700;

  color: #0f172a;

}



.test-date {

  font-size: 0.85rem;

  color: #6b7280;

}



.pill {

  padding: 6px 12px;

  border-radius: 999px;

  font-weight: 700;

  font-size: 0.9rem;

  border: 1px solid transparent;

}



.pill-good {

  background: #ecfdf3;

  color: #15803d;

  border-color: #bbf7d0;

}



.pill-warn {

  background: #fff7ed;

  color: #c2410c;

  border-color: #fed7aa;

}



.settings-list {

  list-style: none;

  padding: 0;

  margin: 0;

}



.settings-item {

  display: grid;

  grid-template-columns: minmax(0, 1fr) auto;

  align-items: center;

  gap: 8px 12px;

  border: 1px solid #e2e8f0;

  border-radius: 12px;

  padding: 10px 12px;

  background: #f8fafc;

  font-size: 0.92rem;

}



.settings-key {

  font-weight: 700;

  color: #0f172a;

}



.settings-value {

  color: #334155;

  background: #eef2ff;

  border: 1px solid #dbeafe;

  padding: 4px 10px;

  border-radius: 999px;

  font-size: 0.82rem;

  font-weight: 600;

  justify-self: end;

  max-width: 60%;

  text-align: right;

}



.settings-tags {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  justify-content: flex-end;

  max-width: 60%;

}



.settings-tag {

  background: #eef2ff;

  border: 1px solid #dbeafe;

  color: #1e3a8a;

  padding: 4px 8px;

  border-radius: 999px;

  font-size: 0.75rem;

  font-weight: 700;

  letter-spacing: 0.02em;

}



.profile-guest {

  max-width: 720px;

  margin: 0 auto;

  padding: 5rem 1.5rem 3.5rem;

}



.profile-guest-card {

  text-align: center;

}



@media (max-width: 900px) {

  .profile-card.wide {

    grid-column: span 1;

  }



  .profile-hero {

    grid-template-columns: 1fr;

  }



  .profile-hero-panels {

    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

  }



  .profile-verify-card {

    flex-direction: column;

    align-items: flex-start;

  }



  .profile-verify-actions {

    width: 100%;

  }



  .profile-verify-actions .btn-secondary,

  .profile-verify-actions .btn-primary {

    width: 100%;

  }



  .profile-progress-grid {

    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));

  }

}



@media (max-width: 600px) {

  .profile-shell {

    padding: 3.5rem 1rem 3rem;

  }



  .profile-hero {

    padding: 20px;

  }



  .profile-hero-panels {

    grid-template-columns: 1fr;

  }



  .hero-metric-card {

    min-height: auto;

  }



  .profile-grid {

    gap: 16px;

  }



  .profile-card {

    padding: 16px;

  }



  .profile-progress-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }



  .profile-progress-meta {

    flex-direction: column;

    align-items: flex-start;

    gap: 4px;

  }


  .settings-item {

    grid-template-columns: 1fr;

    align-items: flex-start;

  }


  .settings-value,

  .settings-tags {

    justify-self: start;

    max-width: 100%;

    text-align: left;

  }}



@media (max-width: 420px) {

  .profile-progress-grid {

    grid-template-columns: 1fr;

  }

}



/* ===========================

   PROFILE MODERN REFRESH

   =========================== */

.profile-shell--modern {

  --profile-ink: #0f172a;

  --profile-muted: #52606d;

  --profile-accent: #0080a0;

  --profile-accent-strong: #00c0c0;

  --profile-accent-soft: rgba(0, 192, 192, 0.16);

  --profile-surface: #f3fafb;

  --profile-panel: #ffffff;

  --profile-border: rgba(0, 128, 160, 0.18);

  --profile-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);


  max-width: 1200px;

  padding: clamp(3rem, 4vw, 4.5rem) clamp(1.4rem, 3.5vw, 2.6rem) 4rem;

  align-items: stretch;

  gap: 28px;

}


.profile-shell--modern .profile-banner {

  background: linear-gradient(135deg, #ffffff, #eaf6f7 60%, #e7f1fb);

  color: var(--profile-ink);

  border-radius: 28px;

  padding: clamp(1.8rem, 3vw, 2.6rem);

  display: grid;

  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);

  gap: 24px;

  position: relative;

  overflow: hidden;

  border: 1px solid var(--profile-border);

  box-shadow: var(--profile-shadow);

}


.profile-shell--modern .profile-banner::before {

  content: "";

  position: absolute;

  inset: 0;

  background:
    radial-gradient(circle at 14% 18%, rgba(0, 192, 192, 0.22), transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(0, 128, 160, 0.2), transparent 48%);
  opacity: 0.75;

  pointer-events: none;

}


.profile-shell--modern .profile-banner > * {

  position: relative;

  z-index: 1;

}


.profile-shell--modern .breadcrumb {

  display: inline-flex;

  align-items: center;

  padding: 0.25rem 0.75rem;

  border-radius: 999px;

  background: rgba(0, 128, 160, 0.12);
  color: #0060a0;

  letter-spacing: 0.2em;

  font-size: 0.68rem;

  text-transform: uppercase;

}


.profile-shell--modern .profile-banner-main {

  display: grid;

  gap: 12px;

}


.profile-shell--modern .profile-banner-main h1 {

  font-size: clamp(2rem, 3.2vw, 2.9rem);

  margin: 0;

}


.profile-shell--modern .profile-sub {

  color: var(--profile-muted);

  margin: 0;

  max-width: 520px;

}


.profile-shell--modern .profile-banner-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  margin-top: 4px;

}


.profile-shell--modern .profile-banner-meta {

  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--profile-border);

  border-radius: 18px;

  padding: 16px;

  display: grid;

  gap: 10px;

  align-self: start;

  backdrop-filter: blur(6px);

}


.profile-shell--modern .profile-meta-row {

  display: grid;

  gap: 4px;

}


.profile-shell--modern .meta-label {

  font-size: 0.72rem;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color: var(--profile-muted);

}


.profile-shell--modern .meta-value {

  font-weight: 600;

  color: var(--profile-ink);

  word-break: break-word;

}


.profile-shell--modern .profile-info-list .meta-label {

  color: var(--profile-muted);

}


.profile-shell--modern .profile-info-list .meta-value {

  color: var(--profile-ink);

}


.profile-shell--modern .profile-banner-stats {

  grid-column: 1 / -1;

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  gap: 14px;

  margin-top: 4px;

}


.profile-shell--modern .profile-stat-card {

  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--profile-border);

  border-radius: 16px;

  padding: 14px 16px;

  display: grid;

  gap: 6px;

  min-height: 120px;

  backdrop-filter: blur(6px);

}


.profile-shell--modern .profile-stat-label {

  font-size: 0.72rem;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color: var(--profile-muted);

}


.profile-shell--modern .profile-stat-value {

  font-size: 1.6rem;

  font-weight: 700;

  color: var(--profile-ink);

}


.profile-shell--modern .profile-stat-sub {

  color: var(--profile-muted);

  font-size: 0.92rem;

}


.profile-shell--modern .profile-body {

  width: 100%;

  display: grid;

  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr);

  gap: 24px;

  max-width: 1100px;

  margin: 0 auto;

}


.profile-shell--modern .profile-main,
.profile-shell--modern .profile-side {

  display: grid;

  gap: 18px;

}


.profile-shell--modern .profile-panel {

  background: var(--profile-panel);

  border: 1px solid var(--profile-border);

  border-radius: 22px;

  padding: 20px;

  box-shadow: var(--profile-shadow);

  color: var(--profile-ink);

}


.profile-shell--modern .profile-panel-head {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  margin-bottom: 12px;

}


.profile-shell--modern .profile-panel-head h3 {

  margin: 0;

  font-size: 1.05rem;

}


.profile-shell--modern .profile-pill {

  background: rgba(0, 128, 160, 0.12);

  color: var(--profile-accent);

  border-radius: 999px;

  padding: 0.3rem 0.75rem;

  font-weight: 600;

  font-size: 0.78rem;

}


.profile-shell--modern .profile-status-pill {

  background: var(--profile-accent-soft);

  color: var(--profile-accent-strong);

  border-radius: 999px;

  padding: 0.3rem 0.75rem;

  font-weight: 600;

  font-size: 0.75rem;

}


.profile-shell--modern .profile-progress-track {

  background: rgba(148, 163, 184, 0.25);

  border-radius: 999px;

  height: 10px;

  overflow: hidden;

}

.profile-shell--modern .profile-progress-stack {

  display: grid;

  gap: 14px;

}

.profile-shell--modern .profile-progress-row {

  display: grid;

  gap: 8px;

}

.profile-shell--modern .profile-progress-label {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  font-size: 0.9rem;

  color: var(--profile-muted);

  font-weight: 600;

}


.profile-shell--modern .profile-progress-fill {

  display: block;

  height: 100%;

  border-radius: 999px;

  background: linear-gradient(90deg, var(--profile-accent), var(--profile-accent-strong));

}

.profile-shell--modern .profile-progress-fill--alt {

  background: linear-gradient(90deg, var(--profile-accent-strong), var(--profile-accent));

}


.profile-shell--modern .profile-progress-meta {

  display: flex;

  justify-content: space-between;

  gap: 12px;

  margin-top: 10px;

  color: var(--profile-muted);

  font-size: 0.9rem;

}

.profile-shell--modern .profile-level-grid {

  display: grid;

  gap: 12px;

}

.profile-shell--modern .profile-level-row {

  display: grid;

  grid-template-columns: 70px 1fr;

  gap: 12px;

  padding: 12px 14px;

  border-radius: 16px;

  border: 1px solid var(--profile-border);

  background: var(--profile-surface);

}

.profile-shell--modern .profile-level-title {

  font-weight: 700;

  color: var(--profile-ink);

  align-self: center;

}

.profile-shell--modern .profile-level-bars {

  display: grid;

  gap: 12px;

}

.profile-shell--modern .profile-level-item {

  display: grid;

  gap: 6px;

}

.profile-shell--modern .profile-level-item-head {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  font-size: 0.85rem;

  color: var(--profile-muted);

}

.profile-shell--modern .profile-level-empty {

  font-size: 0.85rem;

  color: var(--profile-muted);

}


.profile-shell--modern .profile-kpi-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));

  gap: 12px;

  margin-top: 16px;

}


.profile-shell--modern .profile-kpi {

  background: rgba(148, 163, 184, 0.12);

  border-radius: 16px;

  padding: 12px 14px;

  display: grid;

  gap: 6px;

}


.profile-shell--modern .profile-kpi-label {

  font-size: 0.75rem;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: var(--profile-muted);

}


.profile-shell--modern .profile-kpi-value {

  font-size: 1.2rem;

  font-weight: 700;

}

.profile-shell--modern .profile-test-summary {

  display: grid;

  gap: 10px;

}

.profile-shell--modern .profile-test-item {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  padding: 8px 12px;

  border-radius: 12px;

  border: 1px solid var(--profile-border);

  background: var(--profile-surface);

}

.profile-shell--modern .profile-test-label {

  font-size: 0.72rem;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: var(--profile-muted);

}

.profile-shell--modern .profile-test-value {

  font-weight: 700;

  color: var(--profile-ink);

}

.profile-shell--modern .profile-test-levels {

  margin-top: 12px;

  display: grid;

  gap: 10px;

}

.profile-shell--modern .profile-test-level-title {

  display: block;

  font-size: 0.75rem;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: var(--profile-muted);

}

.profile-shell--modern .profile-test-level-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));

  gap: 10px;

}

.profile-shell--modern .profile-test-level-card {

  padding: 10px 12px;

  border-radius: 14px;

  border: 1px solid var(--profile-border);

  background: var(--profile-surface);

  display: grid;

  gap: 4px;

}

.profile-shell--modern .profile-test-level-name {

  font-weight: 700;

  color: var(--profile-ink);

}

.profile-shell--modern .profile-test-level-value {

  font-weight: 700;

  color: var(--profile-accent);

}

.profile-shell--modern .profile-test-level-sub {

  font-size: 0.8rem;

  color: var(--profile-muted);

}

.profile-shell--modern .profile-test-list {

  margin-top: 12px;

  display: grid;

  gap: 10px;

}

.profile-shell--modern .profile-test-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  padding: 10px 12px;

  border-radius: 14px;

  border: 1px solid var(--profile-border);

  background: #ffffff;

}

.profile-shell--modern .profile-test-main {

  display: grid;

  gap: 2px;

}

.profile-shell--modern .profile-test-score {

  font-weight: 700;

  color: var(--profile-ink);

}

.profile-shell--modern .profile-test-level {

  font-size: 0.85rem;

  color: var(--profile-muted);

}

.profile-shell--modern .profile-test-date {

  font-size: 0.85rem;

  color: var(--profile-muted);

}


.profile-shell--modern .level-list {

  gap: 14px;

}


.profile-shell--modern .level-row progress {

  accent-color: var(--profile-accent);

}


.profile-shell--modern .profile-panel--verify {

  border-left: 4px solid rgba(0, 128, 160, 0.4);

}


.profile-shell--modern .profile-panel--verify.is-ok {

  border-left-color: rgba(0, 192, 192, 0.5);

}


.profile-shell--modern .profile-verify-actions {

  display: grid;

  gap: 10px;

  margin-top: 12px;

}


.profile-shell--modern .profile-verify-message {

  margin-top: 8px;

  color: var(--profile-accent);

  font-weight: 600;

}


.profile-shell--modern .profile-info-list {

  list-style: none;

  margin: 0;

  padding: 0;

  display: grid;

  gap: 12px;

}


.profile-shell--modern .profile-info-list li {

  display: grid;

  gap: 4px;

}


.profile-shell--modern .profile-mini-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));

  gap: 12px;

  margin-top: 16px;

}


.profile-shell--modern .profile-mini-card {

  background: rgba(148, 163, 184, 0.12);

  border-radius: 16px;

  padding: 12px 14px;

  display: grid;

  gap: 6px;

}


.profile-shell--modern .profile-mini-label {

  font-size: 0.75rem;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: var(--profile-muted);

}


.profile-shell--modern .profile-mini-value {

  font-weight: 700;

}


.profile-shell--modern .btn-primary {

  background: linear-gradient(135deg, var(--profile-accent), var(--profile-accent-strong));

  border-color: transparent;

  color: #ffffff;

  box-shadow: 0 16px 30px rgba(0, 128, 160, 0.25);

}


.profile-shell--modern .btn-secondary {

  background: #ffffff;

  border-color: rgba(148, 163, 184, 0.4);

  color: var(--profile-ink);

}


.profile-shell--modern .muted {

  color: var(--profile-muted);

}


@media (max-width: 960px) {

  .profile-shell--modern .profile-banner {

    grid-template-columns: 1fr;

  }


  .profile-shell--modern .profile-body {

    grid-template-columns: 1fr;

  }

}


@media (max-width: 640px) {

  .profile-shell--modern {

    padding: 3rem 1.1rem 3.5rem;

  }


  .profile-shell--modern .profile-banner {

    padding: 1.6rem;

  }


  .profile-shell--modern .profile-banner-stats {

    grid-template-columns: 1fr;

  }


  .profile-shell--modern .profile-progress-meta {

    flex-direction: column;

    align-items: flex-start;

  }

  .profile-shell--modern .profile-level-row {

    grid-template-columns: 1fr;

  }

  .profile-shell--modern .profile-test-row {

    flex-direction: column;

    align-items: flex-start;

  }

}

/* ===========================

   ADMIN PAGE

   =========================== */



.admin-page {

  max-width: 1180px;

  margin: 0 auto;

  padding: 4.5rem 1.5rem 4rem;

}



.admin-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  margin-bottom: 12px;

}



.admin-hero {

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 18px;

  margin-bottom: 18px;

}



.admin-hero-actions {

  display: flex;

  align-items: center;

  gap: 12px;

  flex-wrap: wrap;

}



.admin-toggle {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 6px 10px;

  border-radius: 999px;

  border: 1px solid #e2e8f0;

  background: #f8fafc;

  font-size: 0.85rem;

  color: #475569;

}



.admin-toggle input {

  accent-color: #0f172a;

}



.admin-stats-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

  gap: 12px;

  margin-bottom: 18px;

}



.admin-stat-card {

  background: #ffffff;

  border-radius: 16px;

  padding: 14px 16px;

  border: 1px solid #e2e8f0;

  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);

}



.admin-stat-label {

  display: block;

  font-size: 0.75rem;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  color: #64748b;

  margin-bottom: 6px;

}



.admin-stat-value {

  font-size: 1.5rem;

  font-weight: 800;

  color: #0f172a;

}



.admin-stat-sub {

  font-size: 0.85rem;

  color: #64748b;

}



.admin-toolbar {

  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  align-items: center;

  margin-bottom: 16px;

}



.admin-search {

  flex: 1;

  min-width: 220px;

}



.admin-search input,

.admin-filter select,

.admin-sort select,

.admin-requests-actions select {

  width: 100%;

  padding: 10px 12px;

  border-radius: 12px;

  border: 1px solid #e2e8f0;

  background: #ffffff;

  font-size: 0.9rem;

}



.admin-filter,

.admin-sort {

  min-width: 170px;

}



.admin-view-toggle {

  display: inline-flex;

  gap: 4px;

  padding: 4px;

  border-radius: 999px;

  border: 1px solid #e2e8f0;

  background: #f1f5f9;

}



.admin-view-btn {

  border: none;

  background: transparent;

  padding: 6px 12px;

  border-radius: 999px;

  font-size: 0.85rem;

  color: #475569;

  cursor: pointer;

}



.admin-view-btn.is-active {

  background: #0f172a;

  color: #ffffff;

}



.admin-user-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

  gap: 16px;

}



.admin-user-card {

  background: #ffffff;

  border-radius: 18px;

  border: 1px solid #e2e8f0;

  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);

  padding: 16px;

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.admin-user-head {

  display: flex;

  justify-content: space-between;

  gap: 12px;

}



.admin-user-email {

  margin: 4px 0 0;

  color: #475569;

  font-size: 0.9rem;

}



.admin-user-meta {

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  gap: 6px;

}



.admin-user-badges {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

}



.admin-chip {

  padding: 4px 8px;

  border-radius: 999px;

  border: 1px solid #e2e8f0;

  background: #f8fafc;

  font-size: 0.75rem;

  color: #64748b;

}



.admin-user-stats {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));

  gap: 10px;

  padding: 10px;

  border-radius: 14px;

  background: #f8fafc;

  border: 1px solid #e2e8f0;

}



.admin-user-stat {

  display: flex;

  flex-direction: column;

  gap: 4px;

}



.admin-user-stat progress {

  width: 100%;

  height: 8px;

}



.admin-user-actions {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

}



.admin-user-extra {

  border-top: 1px dashed #e2e8f0;

  padding-top: 10px;

  display: grid;

  gap: 6px;

  color: #475569;

  font-size: 0.88rem;

}



.admin-user-upgrades {

  display: grid;

  gap: 6px;

}



.admin-upgrade-pills,

.admin-upgrade-inline {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

}



.admin-upgrade-pill {

  border: 1px solid #e2e8f0;

  background: #ffffff;

  color: #475569;

  padding: 4px 10px;

  border-radius: 999px;

  font-size: 0.75rem;

  font-weight: 700;

  cursor: pointer;

  transition: all 0.15s ease;

}



.admin-upgrade-pill.is-active {

  background: #0f172a;

  color: #ffffff;

  border-color: #0f172a;

}



.admin-upgrade-pill:disabled {

  opacity: 0.6;

  cursor: not-allowed;

}



.admin-user-hash {

  background: #0b1120;

  color: #e2e8f0;

  padding: 8px;

  border-radius: 10px;

  font-size: 0.78rem;

  word-break: break-all;

}



.admin-requests {

  margin-top: 1.2rem;

}



.admin-requests-header {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 1rem;

  margin-bottom: 0.8rem;

}



.admin-requests-actions {

  display: flex;

  align-items: center;

  gap: 0.6rem;

}



.admin-empty {

  grid-column: 1 / -1;

  text-align: center;

  padding: 22px;

  border-radius: 16px;

  border: 1px dashed #cbd5f5;

  background: #f8fafc;

  color: #64748b;

}



.admin-table--compact td {

  vertical-align: top;

}



.admin-table-user {

  display: flex;

  flex-direction: column;

  gap: 4px;

}



.admin-table-sub {

  font-size: 0.85rem;

  color: #64748b;

}



.admin-pill {

  display: inline-flex;

  align-items: center;

  padding: 4px 8px;

  border-radius: 999px;

  font-size: 0.7rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.06em;

  border: 1px solid transparent;

}



.admin-pill--admin {

  background: #dcfce7;

  color: #166534;

  border-color: #bbf7d0;

}



.admin-pill--user {

  background: #e2e8f0;

  color: #334155;

  border-color: #cbd5f5;

}



.admin-pill--verify {

  background: #dbeafe;

  color: #1d4ed8;

  border-color: #bfdbfe;

}



.admin-pill--unverified {

  background: #fee2e2;

  color: #7f1d1d;

  border-color: #fecaca;

}



@media (max-width: 900px) {

  .admin-hero {

    flex-direction: column;

    align-items: flex-start;

  }



  .admin-hero-actions {

    width: 100%;

    justify-content: flex-start;

  }



  .admin-view-toggle {

    width: 100%;

    justify-content: space-between;

  }



  .admin-view-btn {

    flex: 1;

    text-align: center;

  }



  .admin-requests-header {

    flex-direction: column;

  }



  .admin-requests-actions {

    width: 100%;

  }

}



.admin-card {

  background: #ffffff;

  border-radius: 14px;

  padding: 16px 16px 18px;

  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);

  border: 1px solid #e2e8f0;

}



.admin-table {

  width: 100%;

  border-collapse: collapse;

  font-size: 0.95rem;

}



.admin-table th,

.admin-table td {

  padding: 10px 8px;

  text-align: left;

  border-bottom: 1px solid #e2e8f0;

}



.admin-table th {

  color: #475569;

  font-weight: 600;

  background: #f8fafc;

}



.admin-table tr:hover td {

  background: #f9fafb;

}



.admin-table .monospace {

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",

    "Courier New", monospace;

}



.admin-table .small {

  font-size: 0.85rem;

  word-break: break-all;

}



/* ===========================

   HOME - MODERN

   =========================== */



.home-page {

  display: flex;

  flex-direction: column;

  gap: 3.5rem;

}



.home-hero {

  display: grid;

  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.95fr);

  gap: 2.2rem;

  align-items: center;

  position: relative;

  overflow: hidden;

  background:

    radial-gradient(circle at 12% 16%, rgba(56, 189, 248, 0.18), transparent 45%),

    radial-gradient(circle at 85% 12%, rgba(34, 197, 94, 0.16), transparent 40%),

    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(224, 242, 254, 0.78));

  border-radius: 28px;

  padding: 2.6rem;

  border: 1px solid rgba(59, 130, 246, 0.18);

  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.14);

}



.home-hero::before {

  content: "";

  position: absolute;

  top: -120px;

  right: -160px;

  width: 320px;

  height: 320px;

  background: radial-gradient(circle, rgba(59, 130, 246, 0.18), transparent 65%);

  pointer-events: none;

}



.home-hero::after {

  content: "";

  position: absolute;

  bottom: -140px;

  left: -120px;

  width: 300px;

  height: 300px;

  background: radial-gradient(circle, rgba(14, 165, 233, 0.18), transparent 65%);

  pointer-events: none;

}



.home-hero > * {

  position: relative;

  z-index: 1;

}



.hero-pill {

  display: inline-flex;

  align-items: center;

  padding: 0.35rem 0.85rem;

  border-radius: 999px;

  font-size: 0.75rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  background: linear-gradient(135deg, #0f172a, #1d4ed8);

  color: #ffffff;

  margin-bottom: 0.8rem;

}



.hero-title {

  font-size: clamp(2.2rem, 2.8vw, 3.1rem);

  margin: 0 0 0.9rem;

  color: #0f172a;

}



.highlight {

  color: #1d4ed8;

}



.hero-subtitle {

  color: #475569;

  font-size: 1.02rem;

  line-height: 1.7;

  margin-bottom: 1.6rem;

}



.hero-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 0.8rem;

  margin-bottom: 1.6rem;

}



.home-page .btn-primary {

  background: linear-gradient(135deg, #0f172a, #1d4ed8);

  box-shadow: 0 14px 26px rgba(37, 99, 235, 0.22);

}



.home-page .btn-primary:hover {

  background: linear-gradient(135deg, #111827, #1e40af);

}



.home-page .btn-outline {

  border-color: rgba(37, 99, 235, 0.5);

}



.hero-metrics {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));

  gap: 0.9rem;

  margin-bottom: 1.4rem;

}



.metric-card {

  display: flex;

  align-items: center;

  gap: 0.8rem;

  position: relative;

  overflow: hidden;

  background: #ffffff;

  border-radius: 16px;

  padding: 0.9rem 1rem;

  border: 1px solid rgba(148, 163, 184, 0.25);

  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);

}



.metric-icon {

  width: 42px;

  height: 42px;

  border-radius: 14px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  background: rgba(59, 130, 246, 0.16);

  color: #1d4ed8;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85),

    0 10px 18px rgba(15, 23, 42, 0.08);

  flex-shrink: 0;

}



.metric-icon svg {

  width: 22px;

  height: 22px;

}



.metric-text {

  display: flex;

  flex-direction: column;

  gap: 0.1rem;

}



.metric-value {

  display: block;

  font-size: 1.15rem;

  font-weight: 700;

  color: #0f172a;

}



.metric-label {

  display: block;

  font-size: 0.82rem;

  color: #475569;

}



.metric-card:nth-child(2) .metric-icon {

  background: rgba(34, 197, 94, 0.16);

  color: #15803d;

}



.metric-card:nth-child(3) .metric-icon {

  background: rgba(245, 158, 11, 0.18);

  color: #b45309;

}



.beta-info {

  background: #e0f2fe;

  border-radius: 14px;

  padding: 0.8rem 1rem;

  border: 1px solid #bae6fd;

  color: #0f172a;

  font-size: 0.9rem;

}



.home-hero .hero-right {

  display: flex;

  align-items: stretch;

}



.home-levels-card {

  position: relative;

  width: 100%;

  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);

  border-radius: 26px;

  padding: 2rem;

  border: 1px solid rgba(148, 163, 184, 0.25);

  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);

  overflow: hidden;

}



.home-levels-card::before {

  content: "";

  position: absolute;

  top: -120px;

  right: -120px;

  width: 240px;

  height: 240px;

  background: radial-gradient(circle, rgba(56, 189, 248, 0.18), transparent 65%);

  pointer-events: none;

}



.home-levels-card > * {

  position: relative;

  z-index: 1;

}



.home-levels-header {

  display: flex;

  align-items: center;

  gap: 0.6rem;

  margin-bottom: 0.6rem;

}



.home-levels-pill {

  display: inline-flex;

  align-items: center;

  padding: 0.3rem 0.75rem;

  border-radius: 999px;

  font-size: 0.62rem;

  font-weight: 700;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  background: #0f172a;

  color: #ffffff;

}



.home-levels-pill--accent {

  background: rgba(34, 197, 94, 0.16);

  color: #166534;

  border: 1px solid rgba(34, 197, 94, 0.3);

}



.home-levels-card h3 {

  margin: 0 0 0.5rem;

  font-size: 1.35rem;

  color: #0f172a;

}



.home-levels-intro {

  margin: 0 0 1.2rem;

  color: #475569;

}



.home-levels-list {

  display: grid;

  gap: 0.85rem;

}



.home-levels-item {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 1rem;

  padding: 0.9rem 1rem;

  border-radius: 18px;

  border: 1px solid rgba(148, 163, 184, 0.25);

  background: #ffffff;

  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);

  transition: transform 0.15s ease, box-shadow 0.15s ease;

}



.home-levels-item:hover {

  transform: translateY(-2px);

  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.12);

}



.home-levels-item-main {

  display: flex;

  align-items: center;

  gap: 0.85rem;

}



.home-levels-item-icon {

  width: 42px;

  height: 42px;

  border-radius: 14px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  background: rgba(34, 197, 94, 0.16);

  color: #15803d;

  flex-shrink: 0;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9),

    0 12px 22px rgba(15, 23, 42, 0.1);

}



.home-levels-item-icon svg {

  width: 22px;

  height: 22px;

}



.home-levels-item--free {

  border-color: rgba(34, 197, 94, 0.3);

  background: linear-gradient(135deg, #ffffff, #ecfdf5);

}



.home-levels-item--upgrade {

  border-color: rgba(245, 158, 11, 0.35);

  background: linear-gradient(135deg, #ffffff, #fffbeb);

}



.home-levels-item--upgrade .home-levels-item-icon {

  background: rgba(245, 158, 11, 0.2);

  color: #b45309;

}



.home-levels-item h4 {

  margin: 0.2rem 0 0.35rem;

  font-size: 1rem;

  color: #0f172a;

}



.home-levels-item p {

  margin: 0;

  color: #64748b;

  font-size: 0.9rem;

}



.home-levels-code {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 0.2rem 0.55rem;

  border-radius: 999px;

  font-size: 0.7rem;

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  background: rgba(15, 23, 42, 0.08);

  color: #0f172a;

}



.home-levels-item--free .home-levels-code {

  background: rgba(34, 197, 94, 0.16);

  color: #166534;

}



.home-levels-item--upgrade .home-levels-code {

  background: rgba(245, 158, 11, 0.18);

  color: #92400e;

}



.home-levels-item--soon {

  background: #f8fafc;

  border-style: dashed;

  border-color: rgba(148, 163, 184, 0.35);

}



.home-levels-item--soon .home-levels-item-icon {

  background: rgba(148, 163, 184, 0.22);

  color: #475569;

}



.home-levels-soon {

  font-size: 0.65rem;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  padding: 0.2rem 0.5rem;

  border-radius: 999px;

  background: rgba(148, 163, 184, 0.2);

  color: #475569;

}



.home-hero-card {

  position: relative;

  background: #ffffff;

  border-radius: 26px;

  padding: 2rem 2rem 1.6rem;

  border: 1px solid rgba(148, 163, 184, 0.25);

  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);

  overflow: hidden;

}



.home-hero-card::before {

  content: "";

  position: absolute;

  top: -120px;

  right: -120px;

  width: 240px;

  height: 240px;

  background: radial-gradient(circle, rgba(56, 189, 248, 0.18), transparent 65%);

  pointer-events: none;

}



.home-hero-card > * {

  position: relative;

  z-index: 1;

}



.home-hero-card-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  margin-bottom: 0.6rem;

}



.home-hero-card-tag {

  font-size: 1.2rem;

  font-weight: 700;

  color: #0f172a;

}



.home-hero-card-badge {

  font-size: 0.65rem;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  padding: 0.25rem 0.6rem;

  border-radius: 999px;

  background: #0f172a;

  color: #ffffff;

}



.home-hero-card-intro {

  margin: 0 0 1rem;

  color: #475569;

}



.home-hero-list {

  list-style: none;

  margin: 0;

  padding: 0;

  display: grid;

  gap: 0.6rem;

  color: #1f2937;

}



.home-hero-list li {

  display: flex;

  align-items: center;

  gap: 0.6rem;

  font-weight: 600;

}



.home-hero-list li::before {

  content: "";

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: #38bdf8;

  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.12);

  flex-shrink: 0;

}



.home-hero-card-actions {

  margin-top: 1.2rem;

  display: flex;

  flex-wrap: wrap;

  gap: 0.7rem;

}



.login-box {

  position: relative;

  overflow: hidden;

  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);

  color: #0f172a;

  border-radius: 24px;

  padding: 2rem 1.9rem 1.8rem;

  border: 1px solid rgba(148, 163, 184, 0.35);

  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.16);

}



.login-box::before {

  content: "";

  position: absolute;

  top: -140px;

  right: -120px;

  width: 260px;

  height: 260px;

  background: radial-gradient(circle, rgba(59, 130, 246, 0.18), transparent 65%);

  pointer-events: none;

}



.login-box::after {

  content: "";

  position: absolute;

  bottom: -120px;

  left: -140px;

  width: 240px;

  height: 240px;

  background: radial-gradient(circle, rgba(14, 165, 233, 0.12), transparent 60%);

  pointer-events: none;

}



.login-box > * {

  position: relative;

  z-index: 1;

}



.login-box h2 {

  margin: 0 0 0.35rem;

  font-size: 1.45rem;

  letter-spacing: -0.02em;

  color: #0f172a;

  text-align: left;

}



.login-subtitle {

  color: #6b7280;

  margin-bottom: 1.1rem;

  line-height: 1.5;

  text-align: left;

}



.login-box form {

  display: grid;

  gap: 0.85rem;

}



.login-actions {

  display: grid;

  gap: 0.7rem;

  margin-top: 0.6rem;

}



.login-actions button,

.login-actions .btn-secondary {

  width: 100%;

}



.register-note a {

  color: #2563eb;

  text-decoration: none;

  font-weight: 600;

}



.register-note a:hover {

  text-decoration: underline;

}



.login-box input {

  border-radius: 12px;

  border: 1px solid rgba(148, 163, 184, 0.45);

  padding: 0.75rem 0.9rem;

  font-size: 0.9rem;

  background: #f8fafc;

  color: #0f172a;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);

  transition: border-color 0.2s ease, box-shadow 0.2s ease;

}



.login-box input:focus {

  outline: none;

  border-color: rgba(37, 99, 235, 0.6);

  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);

}



.login-box input::placeholder {

  color: #94a3b8;

}



.login-box button {

  border-radius: 999px;

  padding: 0.75rem 1rem;

  font-weight: 600;

  background: linear-gradient(135deg, #0f172a, #1d4ed8);

  color: #ffffff;

  border: none;

  box-shadow: 0 16px 30px rgba(37, 99, 235, 0.2);

  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;

}



.login-box button:hover {

  background: linear-gradient(135deg, #111827, #1e40af);

  transform: translateY(-1px);

  box-shadow: 0 18px 36px rgba(37, 99, 235, 0.28);

}



.login-box button:disabled {

  cursor: not-allowed;

  opacity: 0.65;

  box-shadow: none;

}



.login-box .btn-secondary {

  background: #ffffff;

  border-color: rgba(148, 163, 184, 0.45);

  color: #0f172a;

  box-shadow: none;

}



.login-box .btn-secondary:hover {

  background: rgba(37, 99, 235, 0.08);

  border-color: rgba(37, 99, 235, 0.4);

  color: #1e3a8a;

}



.login-message {

  margin-top: 0.7rem;

  color: #1d4ed8;

  font-size: 0.88rem;

  text-align: left;

}



.register-note,

.login-guest-text {

  font-size: 0.85rem;

  color: #6b7280;

  text-align: left;

}



.login-divider {

  display: flex;

  align-items: center;

  gap: 0.6rem;

  margin: 1rem 0;

  color: #94a3b8;

  font-size: 0.72rem;

  letter-spacing: 0.06em;

}



.login-divider::before,

.login-divider::after {

  content: "";

  flex: 1;

  height: 1px;

  background: rgba(148, 163, 184, 0.35);

}



.home-features {

  position: relative;

  overflow: hidden;

  background: linear-gradient(

    135deg,

    rgba(255, 255, 255, 0.98),

    rgba(241, 245, 255, 0.9)

  );

  border-radius: 28px;

  padding: 2.4rem;

  margin: 0;

  border: 1px solid rgba(148, 163, 184, 0.2);

  box-shadow: 0 24px 50px rgba(15, 23, 42, 0.1);

}



.home-features::after {

  content: "";

  position: absolute;

  top: -120px;

  left: -120px;

  width: 260px;

  height: 260px;

  background: radial-gradient(circle, rgba(14, 165, 233, 0.16), transparent 65%);

  pointer-events: none;

  z-index: 0;

}



.home-features > * {

  position: relative;

  z-index: 1;

}



.home-features h2 {

  font-size: 2rem;

  margin-bottom: 1.4rem;

}



.feature-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));

  gap: 1.4rem;

  counter-reset: home-step;

  margin: 0;

  padding: 0;

  max-width: none;

}



.feature-card {

  position: relative;

  background: #ffffff;

  border-radius: 18px;

  padding: 1.4rem;

  border: 1px solid rgba(148, 163, 184, 0.2);

  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);

  overflow: hidden;

  display: flex;

  flex-direction: column;

  gap: 0.65rem;

}



.feature-card::before {

  counter-increment: home-step;

  content: counter(home-step, decimal-leading-zero);

  position: absolute;

  top: 14px;

  right: 16px;

  font-size: 0.9rem;

  font-weight: 700;

  color: rgba(37, 99, 235, 0.4);

}



.feature-card::after {

  content: "";

  position: absolute;

  inset: auto -40px -40px auto;

  width: 120px;

  height: 120px;

  background: radial-gradient(circle, rgba(56, 189, 248, 0.18), transparent 70%);

  pointer-events: none;

}



.feature-card h3 {

  margin: 0;

  font-size: 1.1rem;

}



.feature-card p {

  margin: 0;

}



.feature-icon {

  width: 46px;

  height: 46px;

  border-radius: 16px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  background: rgba(59, 130, 246, 0.16);

  color: #1d4ed8;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9),

    0 12px 20px rgba(15, 23, 42, 0.08);

}



.feature-icon svg {

  width: 24px;

  height: 24px;

}



.feature-card:nth-child(2) .feature-icon {

  background: rgba(34, 197, 94, 0.18);

  color: #15803d;

}



.feature-card:nth-child(3) .feature-icon {

  background: rgba(245, 158, 11, 0.2);

  color: #b45309;

}



.feature-card:nth-child(4) .feature-icon {

  background: rgba(14, 165, 233, 0.18);

  color: #0369a1;

}



.home-upgrade .upgrade-card {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 2rem;

  padding: 2rem 2.4rem;

  border-radius: 26px;

  background: linear-gradient(135deg, #0f172a, #1e3a8a);

  color: #e2e8f0;

  box-shadow: 0 26px 60px rgba(15, 23, 42, 0.4);

  position: relative;

  overflow: hidden;

}



.home-upgrade .upgrade-card::after {

  content: "";

  position: absolute;

  top: -120px;

  right: -120px;

  width: 240px;

  height: 240px;

  background: radial-gradient(circle, rgba(56, 189, 248, 0.35), transparent 70%);

  pointer-events: none;

  z-index: 0;

}



.home-upgrade .upgrade-card > * {

  position: relative;

  z-index: 1;

}



.upgrade-card h2 {

  margin-top: 0;

}



.upgrade-list {

  margin: 1rem 0 0;

  padding-left: 1.1rem;

  color: #cbd5f5;

}



.upgrade-card .btn-primary {

  background: #38bdf8;

  color: #0b1120;

}



.home-app .app-card {

  background: #ffffff;

  border-radius: 22px;

  padding: 2rem;

  border: 1px solid rgba(148, 163, 184, 0.25);

  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12);

}



.home-preview {

  display: grid;

  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

  gap: 1.6rem;

}



.preview-card {

  background: #ffffff;

  border-radius: 24px;

  padding: 2rem;

  border: 1px solid rgba(148, 163, 184, 0.2);

  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);

  display: flex;

  flex-direction: column;

  gap: 0.9rem;

  position: relative;

  overflow: hidden;

}



.preview-card::after {

  content: "";

  position: absolute;

  top: -90px;

  right: -90px;

  width: 200px;

  height: 200px;

  background: radial-gradient(circle, rgba(59, 130, 246, 0.2), transparent 70%);

  pointer-events: none;

  z-index: 0;

}



.preview-card > * {

  position: relative;

  z-index: 1;

}



.preview-lesson {

  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);

}



.preview-quiz {

  background: linear-gradient(135deg, #0b1120, #1d4ed8);

  color: #e2e8f0;

}



.preview-quiz::after {

  background: radial-gradient(circle, rgba(56, 189, 248, 0.35), transparent 70%);

}



.preview-pill {

  display: inline-flex;

  align-items: center;

  gap: 0.4rem;

  padding: 0.3rem 0.8rem;

  border-radius: 999px;

  font-size: 0.75rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  background: #e0f2fe;

  color: #0c4a6e;

}



.preview-pill--accent {

  background: rgba(56, 189, 248, 0.2);

  color: #bae6fd;

}



.preview-pill-icon {

  width: 20px;

  height: 20px;

  border-radius: 999px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  background: rgba(14, 165, 233, 0.2);

  color: #0369a1;

  flex-shrink: 0;

}



.preview-pill-icon svg {

  width: 12px;

  height: 12px;

}



.preview-pill--accent .preview-pill-icon {

  background: rgba(186, 230, 253, 0.2);

  color: #e0f2fe;

}



.preview-list {

  margin: 0.4rem 0 0;

  padding-left: 1.1rem;

  color: #475569;

}



.preview-question {

  font-size: 1rem;

  font-weight: 600;

  margin: 0.4rem 0 0;

}



.preview-answers {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 0.6rem;

  margin-top: 0.6rem;

}



.preview-answer {

  padding: 0.5rem 0.8rem;

  border-radius: 999px;

  border: 1px solid rgba(148, 163, 184, 0.35);

  background: transparent;

  color: inherit;

  font-weight: 600;

  cursor: default;

  opacity: 0.85;

}



.preview-quiz .preview-answer {

  background: rgba(15, 23, 42, 0.35);

  border-color: rgba(148, 163, 184, 0.3);

}



.preview-quiz .btn-outline {

  border-color: rgba(148, 163, 184, 0.4);

  color: #e2e8f0;

}



.preview-quiz .btn-outline:hover {

  background: rgba(56, 189, 248, 0.12);

  border-color: rgba(56, 189, 248, 0.6);

  color: #ffffff;

}



.preview-hint {

  font-size: 0.9rem;

  color: #cbd5f5;

}



.home-install .install-card {

  display: grid;

  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);

  gap: 1.6rem;

  padding: 2rem;

  border-radius: 26px;

  background: #ffffff;

  border: 1px solid rgba(148, 163, 184, 0.25);

  box-shadow: 0 24px 50px rgba(15, 23, 42, 0.14);

}



.install-pill {

  display: inline-flex;

  align-items: center;

  padding: 0.25rem 0.7rem;

  border-radius: 999px;

  font-size: 0.75rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  background: #0f172a;

  color: #ffffff;

}



.install-content p {

  color: #475569;

  line-height: 1.6;

}



.install-note {

  font-size: 0.9rem;

  color: #475569;

}



.install-steps {

  background: #f8fafc;

  border-radius: 18px;

  padding: 1.2rem 1.3rem;

  border: 1px dashed rgba(148, 163, 184, 0.35);

}



.install-steps h3 {

  margin-top: 0;

}



.install-steps ol {

  margin: 0.6rem 0 0;

  padding-left: 1.1rem;

  color: #475569;

}



.home-cta {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 1.6rem;

  padding: 2.2rem 2.4rem;

  border-radius: 28px;

  background: linear-gradient(135deg, #0f172a, #1e3a8a);

  color: #e2e8f0;

  box-shadow: 0 26px 60px rgba(15, 23, 42, 0.35);

  position: relative;

  overflow: hidden;

}



.home-cta::after {

  content: "";

  position: absolute;

  width: 220px;

  height: 220px;

  background: radial-gradient(circle, rgba(56, 189, 248, 0.35), transparent 70%);

  pointer-events: none;

  right: -80px;

  bottom: -120px;

  z-index: 0;

}



.home-cta > * {

  position: relative;

  z-index: 1;

}



.home-cta h2 {

  margin: 0 0 0.4rem;

}



.home-cta p {

  margin: 0;

  color: #cbd5f5;

}



.home-cta-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 0.8rem;

}



.home-cta .btn-primary {

  background: #38bdf8;

  color: #0b1120;

}



.home-cta .btn-secondary {

  background: rgba(248, 250, 252, 0.12);

  color: #e2e8f0;

  border-color: rgba(148, 163, 184, 0.5);

  box-shadow: none;

}



.site-footer {

  display: flex;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 1rem;

  padding: 1.5rem 0 0.5rem;

  border-top: 1px solid rgba(148, 163, 184, 0.25);

  color: #64748b;

  font-size: 0.9rem;

}



/* ===========================

   UPGRADE PAGE

   =========================== */

.upgrade-page {
  --upgrade-ink: #0f172a;
  --upgrade-muted: #475569;
  --upgrade-card: rgba(255, 255, 255, 0.96);
  --upgrade-border: rgba(148, 163, 184, 0.28);
  position: relative;
  border-radius: 28px;
  padding: 2.4rem 2rem 3rem;
  background: radial-gradient(circle at 12% 0%, rgba(56, 189, 248, 0.2), transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(251, 146, 60, 0.2), transparent 50%),
    linear-gradient(135deg, #ffffff 0%, #f8fafc 55%, #fef3c7 100%);
  border: 1px solid rgba(148, 163, 184, 0.25);
  box-shadow: 0 32px 70px rgba(15, 23, 42, 0.12);
  overflow: hidden;
}

.upgrade-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 30%, rgba(34, 197, 94, 0.08), transparent 45%);
  pointer-events: none;
}

.upgrade-page > * {
  position: relative;
  z-index: 1;
}

.upgrade-page .upgrade-hero {
  text-align: left;
  margin: 0 auto 1.6rem;
  max-width: 620px;
  display: grid;
  gap: 0.4rem;
}

.upgrade-page .upgrade-hero h1 {
  font-size: clamp(1.9rem, 2.6vw, 2.4rem);
  margin: 0;
}

.upgrade-page .upgrade-subtitle {
  max-width: 620px;
  margin: 0;
  color: var(--upgrade-muted);
  line-height: 1.6;
}

.upgrade-page .upgrade-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  max-width: 620px;
  margin: 0 auto;
  justify-items: center;
}

.upgrade-page .upgrade-card {
  --accent: #38bdf8;
  --accent-strong: #0ea5e9;
  --accent-rgb: 56, 189, 248;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
  border-radius: 12px;
  padding: 0.9rem 1rem;
  border: 1px solid var(--upgrade-border);
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 620px;
  scroll-margin-top: 110px;
}

.upgrade-page .upgrade-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.85), transparent);
  opacity: 0.9;
  z-index: 0;
}

.upgrade-page .upgrade-card::after {
  content: "";
  position: absolute;
  top: -70px;
  right: -70px;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.22), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

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

.upgrade-page .upgrade-card.is-active {
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow: 0 24px 50px rgba(15, 23, 42, 0.14),
    0 0 0 2px rgba(var(--accent-rgb), 0.12);
}

.upgrade-page .upgrade-card[data-level="a2"] {
  --accent: #fb923c;
  --accent-strong: #f97316;
  --accent-rgb: 251, 146, 60;
}

.upgrade-page .upgrade-card[data-level="b1"] {
  --accent: #22c55e;
  --accent-strong: #16a34a;
  --accent-rgb: 34, 197, 94;
}

.upgrade-page .upgrade-card[data-level="b2"] {
  --accent: #6366f1;
  --accent-strong: #4f46e5;
  --accent-rgb: 99, 102, 241;
}

.upgrade-page .upgrade-card[data-level="c1-c2"] {
  --accent: #94a3b8;
  --accent-strong: #64748b;
  --accent-rgb: 148, 163, 184;
}

.upgrade-page .upgrade-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.upgrade-page .upgrade-level {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(var(--accent-rgb), 0.16);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  color: #0f172a;
}

.upgrade-page .upgrade-card-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.upgrade-page .upgrade-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.2), rgba(255, 255, 255, 0.9));
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  color: #0f172a;
}

.upgrade-page .upgrade-badge--coming {
  background: rgba(148, 163, 184, 0.2);
  border-color: rgba(148, 163, 184, 0.4);
  color: #475569;
}

.upgrade-page .upgrade-title {
  font-size: 1rem;
  line-height: 1.2;
  margin: 0;
  color: var(--upgrade-ink);
}

.upgrade-page .upgrade-lead {
  margin: 0;
  color: var(--upgrade-muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.upgrade-muted {
  color: var(--upgrade-muted, #475569);
  font-size: 0.9rem;
}

.upgrade-page .upgrade-features {
  list-style: none;
  margin: 0.2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
}

.upgrade-page .upgrade-features li {
  position: relative;
  padding-left: 1rem;
  color: var(--upgrade-muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.upgrade-page .upgrade-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}

@media (min-width: 900px) {
  .upgrade-page .upgrade-features {
    columns: 2;
    column-gap: 1.2rem;
  }

  .upgrade-page .upgrade-features li {
    break-inside: avoid;
  }
}

.upgrade-page .upgrade-pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.5rem;
  margin-top: 0.1rem;
}

.upgrade-page .upgrade-price-card {
  border-radius: 10px;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--upgrade-border);
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.upgrade-page .upgrade-price-card.is-active {
  border-color: rgba(var(--accent-rgb), 0.6);
  box-shadow: 0 16px 30px rgba(var(--accent-rgb), 0.18);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), #ffffff);
}

.upgrade-page .upgrade-price-card:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.6);
  outline-offset: 2px;
}

.upgrade-page .upgrade-price-title {
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
  font-weight: 700;
}

.upgrade-page .upgrade-price-value {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
}

.upgrade-page .upgrade-price-period {
  font-size: 0.78rem;
  color: #64748b;
}

.upgrade-page .upgrade-price-note {
  font-size: 0.7rem;
  color: #64748b;
}

.upgrade-page .upgrade-card-footer {
  margin-top: 0.25rem;
  display: flex;
  justify-content: flex-start;
}

.upgrade-page .upgrade-card .btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  border-color: rgba(var(--accent-rgb), 0.4);
  color: #0b1220;
  box-shadow: 0 14px 28px rgba(var(--accent-rgb), 0.25);
}

.upgrade-page .upgrade-card .btn-primary:hover {
  box-shadow: 0 18px 34px rgba(var(--accent-rgb), 0.3);
}

.upgrade-page .upgrade-card--coming {
  background: rgba(248, 250, 252, 0.9);
  border: 1px dashed rgba(148, 163, 184, 0.5);
}

.upgrade-page .upgrade-card--coming::after {
  background: radial-gradient(circle, rgba(148, 163, 184, 0.2), transparent 70%);
}

.upgrade-info {
  margin: 1.6rem auto 0;
  max-width: 620px;
}

.upgrade-info-card {
  background: var(--upgrade-card);
  border-radius: 14px;
  padding: 0.95rem 1.1rem;
  border: 1px dashed rgba(148, 163, 184, 0.4);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
}

.upgrade-info-card h2 {
  margin: 0 0 0.6rem;
  font-size: 1.2rem;
}

.upgrade-info-list {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--upgrade-muted);
  display: grid;
  gap: 0.4rem;
}

.upgrade-bank {
  margin: 1.6rem auto 0;
  max-width: 620px;
}

.upgrade-bank-card {
  background: var(--upgrade-card);
  border-radius: 22px;
  padding: 1.2rem;
  border: 1px solid var(--upgrade-border);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.upgrade-bank-info h2 {
  margin: 0 0 0.3rem;
}

.upgrade-plan-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #0f172a;
  background: rgba(56, 189, 248, 0.16);
  border: 1px solid rgba(56, 189, 248, 0.35);
}

.upgrade-plan-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.7rem;
  margin-bottom: 0.3rem;
}

.upgrade-plan-option {
  border-radius: 14px;
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.upgrade-plan-option.is-active {
  border-color: rgba(56, 189, 248, 0.6);
  box-shadow: 0 14px 26px rgba(56, 189, 248, 0.2);
}

.upgrade-plan-option:focus-visible {
  outline: 2px solid rgba(56, 189, 248, 0.6);
  outline-offset: 2px;
}

.upgrade-plan-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
  font-weight: 700;
}

.upgrade-plan-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0f172a;
}

.upgrade-plan-period {
  font-size: 0.84rem;
  color: #64748b;
}

.upgrade-bank-form {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.upgrade-bank .btn-primary {
  background: linear-gradient(135deg, #38bdf8, #f97316);
  border-color: rgba(56, 189, 248, 0.35);
  color: #0b1220;
  box-shadow: 0 14px 28px rgba(56, 189, 248, 0.22);
}

.upgrade-bank .btn-primary:hover {
  box-shadow: 0 18px 34px rgba(251, 146, 60, 0.25);
}

.upgrade-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.upgrade-form-field label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: 0.35rem;
}

.upgrade-form-field input,
.upgrade-form-field textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: #ffffff;
  font-size: 0.95rem;
  color: #0f172a;
}

.upgrade-form-field textarea {
  resize: vertical;
}

.upgrade-form-field input:focus,
.upgrade-form-field textarea:focus {
  outline: none;
  border-color: rgba(56, 189, 248, 0.6);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18);
}

.upgrade-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
}

.upgrade-status {
  margin-top: 0.4rem;
  padding: 0.6rem 0.8rem;
  border-radius: 12px;
  font-size: 0.9rem;
}

.upgrade-status--success {
  background: rgba(34, 197, 94, 0.12);
  color: #166534;
  border: 1px solid rgba(22, 163, 74, 0.25);
}

.upgrade-status--error {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.upgrade-requests {
  margin-top: 1rem;
  border-top: 1px dashed rgba(148, 163, 184, 0.35);
  padding-top: 0.8rem;
}

.upgrade-requests ul {
  margin: 0.4rem 0 0;
  padding-left: 1.1rem;
  color: #475569;
}

.upgrade-page .upgrade-actions {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.8rem;
}


@media (max-width: 980px) {

  .home-hero {

    grid-template-columns: 1fr;

    grid-template-areas:

      "login"

      "content";

    padding: 2rem;

  }



  .hero-right {

    grid-area: login;

  }



  .hero-left {

    grid-area: content;

  }



  .home-levels-card {

    padding: 1.6rem;

    border-radius: 22px;

  }



  .home-levels-item {

    flex-direction: column;

    align-items: flex-start;

  }



  .home-levels-item .btn-secondary,

  .home-levels-item .btn-outline {

    width: 100%;

  }



  .home-features {

    padding: 2rem;

  }



  .home-features h2 {

    font-size: 1.7rem;

  }



  .home-preview {

    grid-template-columns: 1fr;

  }



  .home-upgrade .upgrade-card {

    flex-direction: column;

    align-items: flex-start;

  }



  .home-install .install-card {

    grid-template-columns: 1fr;

  }



  .home-cta {

    flex-direction: column;

    align-items: flex-start;

  }



  .home-cta-actions {

    width: 100%;

  }



  .home-cta-actions .btn-primary,

  .home-cta-actions .btn-secondary {

    width: 100%;

  }



  .upgrade-page {

    padding: 2rem 1.4rem 2.4rem;

    border-radius: 24px;

  }



  .upgrade-page .upgrade-grid {

    gap: 0.8rem;

  }



  .upgrade-page .upgrade-card {

    padding: 0.95rem;

  }



  .upgrade-page .upgrade-card-header {

    flex-direction: column;

    align-items: flex-start;

  }



  .upgrade-page .upgrade-pricing {

    grid-template-columns: 1fr;

  }



  .upgrade-plan-options {

    grid-template-columns: 1fr;

  }



  .upgrade-form-grid {

    grid-template-columns: 1fr;

  }



  .upgrade-bank-card {

    padding: 1.3rem;

  }

}



@media (max-width: 720px) {

  .upgrade-page .upgrade-grid {

    gap: 1rem;

  }



  .upgrade-page .upgrade-card {

    padding: 0.9rem;

  }



  .upgrade-page .upgrade-title {

    font-size: 1rem;

  }



  .upgrade-page .upgrade-price-value {

    font-size: 0.95rem;

  }



  .upgrade-page .upgrade-plan-pill {

    font-size: 0.7rem;

  }



  .upgrade-page .upgrade-actions {

    flex-direction: column;

  }



  .upgrade-page .upgrade-actions .btn-secondary,

  .upgrade-page .upgrade-actions .btn-outline {

    width: 100%;

  }

}



@media (max-width: 600px) {

  .home-hero {

    padding: 1.6rem;

  }



  .upgrade-page {

    padding: 1.6rem 1rem 2rem;

    border-radius: 20px;

  }



  .upgrade-page .upgrade-card {

    padding: 0.85rem;

  }



  .upgrade-plan-pill {

    font-size: 0.7rem;

  }



  .hero-title {

    font-size: 2rem;

  }



  .home-levels-card {

    padding: 1.4rem;

  }



  .home-levels-item {

    padding: 0.75rem 0.85rem;

  }



  .home-levels-item-icon {

    width: 38px;

    height: 38px;

  }



  .metric-icon {

    width: 38px;

    height: 38px;

  }



  .feature-icon {

    width: 40px;

    height: 40px;

  }



  .preview-card {

    padding: 1.6rem;

  }



  .hero-metrics {

    grid-template-columns: 1fr;

  }



  .home-features {

    padding: 1.6rem;

    border-radius: 22px;

  }



  .feature-card {

    padding: 1.1rem;

  }



  .preview-answers {

    grid-template-columns: 1fr;

  }



  .login-box {

    padding: 1.5rem;

  }

}



@media (max-width: 900px) {

  .courses-page .courses-lesson-list {

    position: static;

    top: auto;

    max-height: 28vh;

    overflow-y: auto;

  }

}



@media (max-width: 920px) {

  .exercises-page .courses-lesson-list {

    position: static;

    top: auto;

    max-height: 28vh;

    overflow-y: auto;

  }

}



@media (max-width: 900px) {

  .exercise-topbar {

    flex-direction: column;

    align-items: stretch;

  }



  .exercise-actions {

    width: 100%;

  }

}



/* Modern form refresh */

.auth-form .form-group {

  margin-bottom: 0.95rem;

}



.auth-form label {

  font-size: 0.8rem;

  font-weight: 700;

  color: #475569;

  letter-spacing: 0.02em;

}



.auth-form .form-group:focus-within label {

  color: #1d4ed8;

}



.auth-form input {

  border-radius: 14px;

  border: 1px solid rgba(148, 163, 184, 0.45);

  padding: 0.8rem 0.95rem;

  font-size: 0.95rem;

  background: linear-gradient(180deg, #ffffff 0%, #f1f5ff 100%);

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9),

    0 10px 18px rgba(15, 23, 42, 0.08);

  transition: border-color 0.2s ease, box-shadow 0.2s ease;

}



.auth-form input:hover {

  border-color: rgba(59, 130, 246, 0.55);

}



.auth-form input:focus {

  outline: none;

  border-color: rgba(56, 189, 248, 0.9);

  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18),

    0 16px 28px rgba(15, 23, 42, 0.12);

}



.auth-form input::placeholder {

  color: #94a3b8;

}



.auth-helper-card {

  border-radius: 16px;

  border: 1px solid rgba(148, 163, 184, 0.3);

  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);

  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);

}



.auth-helper-card input {

  border-radius: 12px;

  border: 1px solid rgba(148, 163, 184, 0.45);

  padding: 0.6rem 0.8rem;

  background: #ffffff;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);

  transition: border-color 0.2s ease, box-shadow 0.2s ease;

}



.auth-helper-card input:focus {

  outline: none;

  border-color: rgba(56, 189, 248, 0.9);

  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18);

}



.upgrade-form-field input,

.upgrade-form-field textarea,

.admin-search input,

.admin-filter select,

.admin-sort select,

.admin-requests-actions select {

  border-radius: 14px;

  border: 1px solid rgba(148, 163, 184, 0.4);

  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);

  padding: 0.7rem 0.85rem;

  font-size: 0.95rem;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9),

    0 10px 18px rgba(15, 23, 42, 0.06);

  transition: border-color 0.2s ease, box-shadow 0.2s ease;

}



.upgrade-form-field input:focus,

.upgrade-form-field textarea:focus,

.admin-search input:focus,

.admin-filter select:focus,

.admin-sort select:focus,

.admin-requests-actions select:focus {

  outline: none;

  border-color: rgba(56, 189, 248, 0.9);

  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.16),

    0 12px 24px rgba(15, 23, 42, 0.12);

}



/* Modern courses/grammar/exercises refresh */

.courses-page,

.grammar-page,

.exercises-page {

  position: relative;

  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 250, 252, 0.92) 100%);

  border: 1px solid rgba(148, 163, 184, 0.2);

  border-radius: 28px;

  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.12);

}



.courses-page::before,

.grammar-page::before,

.exercises-page::before {

  content: "";

  position: absolute;

  inset: 0;

  border-radius: 28px;

  background: radial-gradient(circle at 8% 8%, rgba(56, 189, 248, 0.14), transparent 45%),

    radial-gradient(circle at 90% 0%, rgba(99, 102, 241, 0.12), transparent 40%);

  pointer-events: none;

}



.courses-page > *,

.grammar-page > *,

.exercises-page > * {

  position: relative;

  z-index: 1;

}



.courses-header,

.grammar-header,

.exercises-page .courses-header {

  text-align: left;

  background: rgba(255, 255, 255, 0.85);

  border: 1px solid rgba(148, 163, 184, 0.22);

  border-radius: 22px;

  padding: 1.6rem 1.8rem;

  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);

  animation: rise 0.6s ease both;

}



.courses-header .breadcrumb,

.grammar-header .breadcrumb {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  font-size: 0.65rem;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  padding: 0.2rem 0.6rem;

  border-radius: 999px;

  background: #0f172a;

  color: #e2e8f0;

  margin-bottom: 0.65rem;

}



.courses-header h1,

.grammar-header h1,

.exercises-page .courses-header h1 {

  font-size: 2.35rem;

  margin-bottom: 0.5rem;

  letter-spacing: -0.02em;

}



.courses-intro,

.grammar-intro,

.exercises-page .courses-intro {

  margin: 0;

  max-width: 60ch;

  font-size: 0.98rem;

}



.courses-level-tabs,

.grammar-level-tabs {

  justify-content: flex-start;

  background: rgba(15, 23, 42, 0.04);

  border: 1px solid rgba(148, 163, 184, 0.22);

  border-radius: 999px;

  padding: 0.35rem;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);

  animation: rise 0.6s ease both;

  animation-delay: 0.08s;

}



.courses-level-tab,

.grammar-level-tab {

  background: transparent;

  border: 1px solid transparent;

  padding: 0.5rem 1rem;

  font-size: 0.82rem;

  color: #475569;

}



.courses-level-tab:focus-visible,

.grammar-level-tab:focus-visible {

  outline: 2px solid rgba(56, 189, 248, 0.7);

  outline-offset: 2px;

}



.courses-level-tab--active:not(.courses-level-tab--upgrade):not(.courses-level-tab--coming) {

  background: linear-gradient(135deg, #0f172a, #1d4ed8);

  color: #f8fafc;

  border-color: transparent;

  box-shadow: 0 12px 26px rgba(37, 99, 235, 0.28);

  transform: translateY(-1px);

}



.grammar-level-tab--active:not(.grammar-level-tab--upgrade):not(.grammar-level-tab--coming) {

  background: linear-gradient(135deg, #0f172a, #1d4ed8);

  color: #f8fafc;

  border-color: transparent;

  box-shadow: 0 12px 26px rgba(37, 99, 235, 0.28);

  transform: translateY(-1px);

}



.courses-level-description,

.grammar-level-description,

.exercises-page .courses-level-description {

  text-align: left;

  margin-left: 0;

  margin-right: 0;

  max-width: 70ch;

}



.level-select-trigger {

  background: rgba(255, 255, 255, 0.88);

  border-color: rgba(148, 163, 184, 0.35);

  box-shadow: 0 18px 35px rgba(15, 23, 42, 0.12);

}



.level-select-menu {

  background: rgba(255, 255, 255, 0.95);

  border-color: rgba(148, 163, 184, 0.25);

  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.14);

}



.courses-layout,

.grammar-layout {

  gap: 2rem;

  animation: rise 0.6s ease both;

  animation-delay: 0.12s;

}



.courses-lesson-list,

.grammar-topic-list,

.exercises-page .courses-lesson-list {

  background: rgba(255, 255, 255, 0.78);

  border: 1px solid rgba(148, 163, 184, 0.28);

  box-shadow: 0 24px 50px rgba(15, 23, 42, 0.12);

  color: #0f172a;

  backdrop-filter: blur(12px);

}



.courses-lesson-list h2,

.grammar-topic-list h2,

.lesson-preview-title {

  color: #0f172a;

}



.lesson-list-toggle {

  background: rgba(15, 23, 42, 0.06);

  color: #0f172a;

  border-color: rgba(148, 163, 184, 0.45);

}



.lesson-list-toggle-arrow {

  border-right-color: #334155;

  border-bottom-color: #334155;

}



.lesson-button,

.topic-button {

  background: rgba(248, 250, 252, 0.75);

  border: 1px solid transparent;

  color: #0f172a;

}



.lesson-button:hover,

.topic-button:hover {

  background: #ffffff;

  border-color: rgba(59, 130, 246, 0.35);

  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);

}



.lesson-button--active,

.topic-button--active {

  background: #0f172a;

  color: #f8fafc;

  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.22);

}



.lesson-number,

.topic-number {

  background: rgba(148, 163, 184, 0.25);

  color: #0f172a;

}



.lesson-button--active .lesson-number,

.topic-button--active .topic-number {

  background: #38bdf8;

  color: #0b1120;

}



.exercises-page .lesson-button--done {

  background: rgba(34, 197, 94, 0.12);

  border-color: rgba(34, 197, 94, 0.45);

  color: #0f172a;

}



.exercises-page .lesson-button--done .lesson-number {

  background: rgba(34, 197, 94, 0.2);

  color: #166534;

}



.exercises-page .lesson-button--active.lesson-button--done {

  background: #0f172a;

  color: #f8fafc;

  border-color: rgba(34, 197, 94, 0.6);

}



.exercises-page .lesson-button--active.lesson-button--done .lesson-number {

  background: #22c55e;

  color: #0b1120;

}



.courses-lesson-content,

.grammar-topic-content {

  background: #ffffff;

  border: 1px solid rgba(148, 163, 184, 0.2);

  border-radius: 24px;

  box-shadow: 0 28px 60px rgba(15, 23, 42, 0.12);

}



.courses-lesson-content::before,

.grammar-topic-content::before {

  height: 6px;

  background: linear-gradient(90deg, #0ea5e9, #6366f1);

}



.courses-lesson-content h2,

.grammar-topic-content h2 {

  font-size: 1.6rem;

}



.lesson-goal,

.topic-goal {

  background: linear-gradient(135deg, #e0f2fe, #eff6ff);

  border-color: rgba(59, 130, 246, 0.2);

  box-shadow: 0 10px 20px rgba(59, 130, 246, 0.12);

}



.lesson-quiz {

  background: #ffffff;

  border: 1px dashed rgba(148, 163, 184, 0.3);

  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);

}



.quiz-question-card {

  background: #ffffff;

  border: 1px solid rgba(148, 163, 184, 0.25);

  border-radius: 20px;

  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.1);

}



.exercises-page .quiz-question-card {

  border-left: 4px solid #0ea5e9;

}



.quiz-answer {

  border-radius: 16px;

  padding: 0.7rem 0.9rem;

  border: 1px solid rgba(148, 163, 184, 0.25);

  background: rgba(248, 250, 252, 0.8);

}



.quiz-answer--selected {

  background: #e0f2fe;

  border-color: rgba(14, 165, 233, 0.6);

}



.quiz-answer--correct {

  background: #ecfdf3;

  border-color: rgba(22, 163, 74, 0.6);

}



.quiz-answer--wrong {

  background: #fef2f2;

  border-color: rgba(239, 68, 68, 0.6);

}



.quiz-feedback {

  background: #ffffff;

  border: 1px solid rgba(148, 163, 184, 0.25);

}



.exercise-topbar {

  background: #ffffff;

  border: 1px solid rgba(148, 163, 184, 0.25);

  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.1);

  border-radius: 20px;

}



.exercise-result-banner {

  background: linear-gradient(135deg, #e0f2fe, #eff6ff);

  border-color: rgba(14, 165, 233, 0.35);

}



.exercise-submit {

  background: linear-gradient(135deg, #0f172a, #1d4ed8);

  border-color: transparent;

  color: #f8fafc;

}



.exercise-reset {

  background: #ffffff;

  border-color: rgba(148, 163, 184, 0.35);

}



.lesson-footer,

.exercise-footer,

.topic-links {

  border-top-color: rgba(148, 163, 184, 0.25);

}



@media (max-width: 900px) {

  .courses-page,

  .grammar-page,

  .exercises-page {

    padding: 16px 16px 64px;

    border-radius: 22px;

  }



  .courses-header,

  .grammar-header,

  .exercises-page .courses-header {

    padding: 1.2rem 1.3rem;

  }



  .courses-level-description,

  .grammar-level-description,

  .exercises-page .courses-level-description {

    text-align: left;

  }



  .courses-lesson-list,

  .grammar-topic-list,

  .exercises-page .courses-lesson-list {

    max-height: 32vh;

  }

}



@media (max-width: 920px) {

  .exercises-page .courses-lesson-list {

    background: rgba(255, 255, 255, 0.78);

    border: 1px solid rgba(148, 163, 184, 0.28);

    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.12);

  }

}



/* ===========================

   AUTH PAGE REFRESH

   =========================== */



.auth-page {

  overflow: visible;

}



.auth-hero,

.auth-card {

  position: relative;

  z-index: 1;

}



.auth-hero {

  background: linear-gradient(145deg, #0b1120 0%, #1e3a8a 55%, #0ea5e9 100%);

  color: #e2e8f0;

  border-radius: 24px;

  padding: 2.2rem;

  border: 1px solid rgba(148, 163, 184, 0.25);

  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);

  overflow: hidden;

  display: flex;

  flex-direction: column;

  gap: 1rem;

}



.auth-hero::before {

  content: "";

  position: absolute;

  top: -120px;

  right: -140px;

  width: 260px;

  height: 260px;

  background: radial-gradient(circle, rgba(56, 189, 248, 0.35), transparent 65%);

  pointer-events: none;

}



.auth-hero::after {

  content: "";

  position: absolute;

  bottom: -140px;

  left: -120px;

  width: 240px;

  height: 240px;

  background: radial-gradient(circle, rgba(129, 140, 248, 0.35), transparent 65%);

  pointer-events: none;

}



.auth-hero > * {

  position: relative;

  z-index: 1;

}



.auth-badges {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 0.6rem;

}



.auth-badges .badge {

  background: rgba(255, 255, 255, 0.16);

  color: #f8fafc;

  border: 1px solid rgba(255, 255, 255, 0.25);

}



.auth-badges .badge-free {

  background: rgba(34, 197, 94, 0.18);

  color: #bbf7d0;

  border-color: rgba(34, 197, 94, 0.35);

}



.auth-chip {

  display: inline-flex;

  align-items: center;

  padding: 0.28rem 0.8rem;

  border-radius: 999px;

  font-size: 0.75rem;

  text-transform: uppercase;

  letter-spacing: 0.06em;

  background: rgba(15, 23, 42, 0.45);

  border: 1px solid rgba(148, 163, 184, 0.35);

  color: #e2e8f0;

}



.auth-title {

  font-size: 2.5rem;

  margin: 0.2rem 0 0.3rem;

  color: #f8fafc;

}



.auth-subtitle {

  font-size: 1rem;

  color: #cbd5f5;

  max-width: 560px;

  line-height: 1.7;

}



.auth-benefits {

  margin-top: 0.8rem;

}



.auth-benefits h2 {

  font-size: 1rem;

  margin-bottom: 0.6rem;

  color: #e2e8f0;

}



.auth-benefits ul {

  list-style: none;

  padding: 0;

  margin: 0;

  display: grid;

  gap: 0.6rem;

}



.auth-benefits li {

  font-size: 0.92rem;

  color: #e2e8f0;

  position: relative;

  padding: 0.7rem 0.85rem 0.7rem 1.5rem;

  border-radius: 14px;

  background: rgba(15, 23, 42, 0.35);

  border: 1px solid rgba(148, 163, 184, 0.3);

}



.auth-benefits li::before {

  content: "";

  position: absolute;

  left: 0.7rem;

  top: 0.95rem;

  width: 6px;

  height: 6px;

  border-radius: 999px;

  background: #38bdf8;

}



.auth-privacy-note {

  margin-top: 0.9rem;

  font-size: 0.84rem;

  color: #cbd5f5;

  max-width: 560px;

  padding: 0.75rem 0.9rem;

  border-radius: 14px;

  border: 1px dashed rgba(148, 163, 184, 0.35);

  background: rgba(15, 23, 42, 0.35);

}



.auth-card {

  background: rgba(255, 255, 255, 0.92);

  border-radius: 24px;

  padding: 2.2rem 2rem 2rem;

  border: 1px solid rgba(148, 163, 184, 0.3);

  box-shadow: 0 30px 70px rgba(15, 23, 42, 0.18);

  backdrop-filter: blur(10px);

}



.auth-card::before {

  content: "";

  position: absolute;

  top: -120px;

  right: -120px;

  width: 240px;

  height: 240px;

  background: radial-gradient(circle, rgba(59, 130, 246, 0.15), transparent 65%);

  pointer-events: none;

}



.auth-card::after {

  content: "";

  position: absolute;

  bottom: -130px;

  left: -120px;

  width: 220px;

  height: 220px;

  background: radial-gradient(circle, rgba(14, 165, 233, 0.12), transparent 65%);

  pointer-events: none;

}



.auth-toggle {

  background: rgba(15, 23, 42, 0.08);

  border: 1px solid rgba(148, 163, 184, 0.35);

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);

}



.auth-toggle-btn {

  font-size: 0.85rem;

  letter-spacing: 0.02em;

}



.auth-toggle-btn--active {

  background: linear-gradient(135deg, #0ea5e9, #6366f1);

  color: #ffffff;

  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.25);

}



.auth-card-title {

  font-size: 1.5rem;

  margin-bottom: 0.4rem;

  color: #0f172a;

}



.auth-card-subtitle {

  font-size: 0.95rem;

  color: #475569;

  margin-bottom: 1.2rem;

}



.auth-submit {

  background: linear-gradient(135deg, #0ea5e9, #2563eb);

  box-shadow: 0 18px 36px rgba(37, 99, 235, 0.25);

}



.auth-submit:hover {

  background: linear-gradient(135deg, #0284c7, #1d4ed8);

}



.auth-hint {

  font-size: 0.85rem;

  color: #1e3a8a;

  margin-top: 0.6rem;

  background: rgba(56, 189, 248, 0.12);

  border: 1px dashed rgba(56, 189, 248, 0.35);

  padding: 0.6rem 0.75rem;

  border-radius: 12px;

}



.auth-terms {

  font-size: 0.8rem;

  color: #64748b;

  margin-top: 0.9rem;

  background: #f8fafc;

  border: 1px solid rgba(148, 163, 184, 0.2);

  padding: 0.65rem 0.75rem;

  border-radius: 12px;

}



.auth-link {

  color: #0ea5e9;

}



.auth-link:hover {

  color: #0284c7;

}



@media (max-width: 900px) {

  .auth-hero {

    order: 2;

  }



  .auth-card {

    order: 1;

  }

}



@media (max-width: 600px) {

  .auth-page {

    padding: 1.4rem 0.75rem 1.2rem;

  }

  .auth-page--simple {

    padding: 0.55rem 0.55rem 1rem;

    border-radius: 14px;

  }

  .auth-card--solo {

    width: min(100%, 300px);

    padding: 0.95rem 0.8rem 0.9rem;

    border-radius: 14px;

  }

  .auth-card--solo .auth-toggle {

    width: 100%;

    justify-content: space-between;

    gap: 0.25rem;

    padding: 0.2rem;

  }

  .auth-card--solo .auth-toggle-btn {

    flex: 1;

    padding: 0.35rem 0.5rem;

    font-size: 0.78rem;

  }

  .auth-card--solo .auth-card-title {

    font-size: 1rem;

  }

  .auth-card--solo .auth-card-subtitle {

    font-size: 0.8rem;

    margin-bottom: 0.75rem;

  }

  .auth-card--solo .auth-form .form-group {

    margin-bottom: 0.5rem;

  }

  .auth-card--solo .auth-form input {

    padding: 0.55rem 0.65rem;

    font-size: 0.86rem;

  }

  .auth-card--solo .auth-submit {

    padding: 0.55rem 0.8rem;

    font-size: 0.9rem;

  }

  .auth-card--solo .auth-hint,
  .auth-card--solo .auth-terms {

    font-size: 0.78rem;

    line-height: 1.3;

  }

  .auth-card--solo .auth-hint {

    margin-top: 0.45rem;

  }

  .auth-card--solo .auth-terms {

    margin-top: 0.5rem;

  }

  .auth-card--solo .auth-helper {

    margin-top: 0.75rem;

  }

  .auth-card--solo .auth-helper-card {

    padding: 0.6rem 0.7rem;

    gap: 0.45rem;

    border-radius: 12px;

  }

  .auth-card--solo .auth-helper-card label {

    font-size: 0.78rem;

  }

  .auth-card--solo .auth-helper-card input {

    padding: 0.5rem 0.6rem;

    font-size: 0.82rem;

  }

  .auth-card--solo .auth-link {

    font-size: 0.82rem;

  }

  .auth-hero,

  .auth-card {

    padding: 1.6rem;

  }

  .auth-title {

    font-size: 2rem;

  }

}



/* ===========================

   LOJERA (A1 GAMES)

   =========================== */



.games-page {

  display: flex;

  flex-direction: column;

  gap: 1.6rem;

}



.games-hero {

  display: grid;

  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);

  gap: 1.8rem;

  padding: 1.8rem;

  border-radius: 26px;

  background: linear-gradient(135deg, #0b1120, #1e3a8a 50%, #0ea5e9);

  border: 1px solid rgba(148, 163, 184, 0.25);

  color: #e2e8f0;

  position: relative;

  overflow: hidden;

}



.games-hero::after {

  content: "";

  position: absolute;

  inset: auto -30% -30% auto;

  width: 320px;

  height: 320px;

  background: radial-gradient(circle, rgba(56, 189, 248, 0.35), transparent 70%);

  pointer-events: none;

}



.games-hero-text h1 {

  margin: 0 0 0.6rem;

  font-size: 2.4rem;

  color: #f8fafc;

}



.games-intro {

  margin: 0;

  color: #cbd5f5;

  line-height: 1.7;

  max-width: 620px;

}



.games-hero-tags {

  display: flex;

  flex-wrap: wrap;

  gap: 0.6rem;

  margin-top: 0.9rem;

}



.games-hero-card {

  background: rgba(15, 23, 42, 0.55);

  border: 1px solid rgba(148, 163, 184, 0.3);

  border-radius: 20px;

  padding: 1.2rem 1.3rem;

  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.35);

}



.games-hero-card h3 {

  margin-top: 0;

  color: #f8fafc;

}



.games-hero-card p {

  margin-top: 0.4rem;

  color: #cbd5f5;

}



.games-hero-card ul {

  list-style: none;

  margin: 0.9rem 0 0;

  padding: 0;

  display: grid;

  gap: 0.55rem;

  color: #e2e8f0;

}



.games-hero-card li {

  position: relative;

  padding-left: 1rem;

}



.games-hero-card li::before {

  content: "";

  position: absolute;

  left: 0;

  top: 0.45rem;

  width: 6px;

  height: 6px;

  border-radius: 999px;

  background: #38bdf8;

}



.games-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));

  gap: 1.1rem;

}



.game-card {

  background: rgba(15, 23, 42, 0.72);

  border: 1px solid rgba(148, 163, 184, 0.2);

  border-radius: 18px;

  padding: 1.2rem;

  color: #e2e8f0;

  display: flex;

  flex-direction: column;

  gap: 0.6rem;

  min-height: 280px;

  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.35);

}



.game-card p {

  margin: 0;

  color: #cbd5f5;

}



.game-card--active {

  border-color: rgba(56, 189, 248, 0.75);

  box-shadow: 0 20px 50px rgba(14, 165, 233, 0.3);

}



.game-card--locked {

  opacity: 0.65;

  filter: grayscale(0.2);

}



.game-card-top {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 0.75rem;

}



.game-tag {

  font-size: 0.68rem;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  padding: 0.25rem 0.6rem;

  border-radius: 999px;

  background: rgba(56, 189, 248, 0.15);

  border: 1px solid rgba(56, 189, 248, 0.4);

  color: #bae6fd;

}



.game-level-badge {

  font-size: 0.75rem;

  padding: 0.25rem 0.65rem;

  border-radius: 999px;

  background: rgba(15, 23, 42, 0.6);

  border: 1px solid rgba(148, 163, 184, 0.3);

  color: #e2e8f0;

}



.game-highlights {

  list-style: none;

  margin: 0;

  padding: 0;

  display: grid;

  gap: 0.4rem;

  font-size: 0.86rem;

  color: #cbd5f5;

}



.game-highlights li {

  display: flex;

  align-items: center;

  gap: 0.4rem;

}



.game-highlights li::before {

  content: "";

  width: 6px;

  height: 6px;

  border-radius: 999px;

  background: #38bdf8;

}



.game-card-actions {

  margin-top: auto;

}



.game-start {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 0.55rem 1rem;

  border-radius: 999px;

  background: linear-gradient(135deg, #0ea5e9, #2563eb);

  color: #ffffff;

  border: none;

  font-weight: 600;

  text-decoration: none;

  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.3);

  transition: transform 0.2s ease, box-shadow 0.2s ease;

}



.game-start:hover {

  transform: translateY(-1px);

  box-shadow: 0 16px 36px rgba(37, 99, 235, 0.35);

}



.game-start:disabled {

  background: rgba(148, 163, 184, 0.3);

  color: #94a3b8;

  cursor: not-allowed;

  box-shadow: none;

}



.games-locked-card {

  margin-top: 0.2rem;

}



.games-panel {

  background: rgba(15, 23, 42, 0.7);

  border: 1px solid rgba(148, 163, 184, 0.25);

  border-radius: 22px;

  padding: 1.6rem;

  color: #e2e8f0;

  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.4);

}



.games-panel-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 1.4rem;

  flex-wrap: wrap;

  margin-bottom: 1rem;

}



.games-panel-label {

  display: inline-flex;

  font-size: 0.72rem;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color: #bae6fd;

  margin-bottom: 0.4rem;

}



.games-panel-subtitle {

  margin: 0.3rem 0 0;

  color: #cbd5f5;

}



.games-score-card {

  padding: 0.75rem 1rem;

  border-radius: 14px;

  border: 1px solid rgba(148, 163, 184, 0.35);

  background: rgba(15, 23, 42, 0.6);

  min-width: 140px;

  text-align: center;

}



.games-score-card span {

  display: block;

  font-size: 0.72rem;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: #94a3b8;

}



.games-score-card strong {

  display: block;

  margin-top: 0.3rem;

  font-size: 1.4rem;

  color: #f8fafc;

}



.games-progress {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 0.6rem;

  color: #cbd5f5;

  margin-bottom: 1.1rem;

}



.games-progress progress {

  width: 160px;

  height: 8px;

  accent-color: #38bdf8;

}



.games-questions {

  display: grid;

  gap: 1rem;

}



.game-question {

  background: rgba(15, 23, 42, 0.45);

  border: 1px solid rgba(148, 163, 184, 0.2);

}



.games-panel .quiz-feedback {

  color: #0f172a;

  background: #f8fafc;

}



.games-panel .quiz-feedback--correct {

  border-color: rgba(34, 197, 94, 0.45);

  background: rgba(34, 197, 94, 0.15);

  color: #065f46;

}



.games-panel .quiz-feedback--wrong {

  border-color: rgba(248, 113, 113, 0.45);

  background: rgba(248, 113, 113, 0.15);

  color: #7f1d1d;

}



.games-panel .quiz-feedback p {

  margin: 0;

}



.game-input-row {

  margin-top: 0.6rem;

}



.game-input-field {

  width: 100%;

  padding: 0.6rem 0.8rem;

  border-radius: 12px;

  border: 1px solid rgba(148, 163, 184, 0.35);

  background: rgba(15, 23, 42, 0.55);

  color: #e2e8f0;

}



.game-input-field:focus {

  outline: 2px solid rgba(56, 189, 248, 0.35);

  border-color: rgba(56, 189, 248, 0.6);

}



.games-actions {

  margin-top: 1rem;

  display: flex;

  flex-wrap: wrap;

  gap: 0.8rem;

}



@media (max-width: 900px) {

  .games-hero {

    grid-template-columns: 1fr;

  }



  .games-hero-text h1 {

    font-size: 2rem;

  }

}



@media (max-width: 600px) {

  .games-hero {

    padding: 1.3rem;

  }



  .games-panel {

    padding: 1.2rem;

  }



  .game-card {

    min-height: auto;

  }



  .games-progress progress {

    width: 100%;

  }

}



/* ===========================

   LOJERA REFRESH (QUESTION FLOW)

   =========================== */



.games-hero {

  background: linear-gradient(135deg, #f8fafc 0%, #e0f2fe 50%, #dbeafe 100%);

  color: #0f172a;

  border: 1px solid rgba(148, 163, 184, 0.2);

  box-shadow: 0 24px 50px rgba(15, 23, 42, 0.08);

}



.games-hero::after {

  width: 280px;

  height: 280px;

  background: radial-gradient(circle, rgba(59, 130, 246, 0.2), transparent 65%);

}



.games-hero-text h1 {

  color: #0f172a;

}



.games-intro {

  color: #475569;

}



.games-hero-card {

  background: #ffffff;

  border: 1px solid var(--border-soft);

  box-shadow: var(--shadow-soft);

  color: #0f172a;

}



.games-hero-card h3 {

  color: #0f172a;

}



.games-hero-card p {

  color: #475569;

}



.games-hero-card ul {

  color: #1e293b;

}



.game-card {

  background: #ffffff;

  border: 1px solid var(--border-soft);

  color: #0f172a;

  box-shadow: var(--shadow-soft);

}



.game-card p {

  color: #475569;

}



.game-card--active {

  border-color: rgba(56, 189, 248, 0.7);

  box-shadow: 0 22px 40px rgba(56, 189, 248, 0.18);

}



.game-tag {

  background: rgba(56, 189, 248, 0.12);

  border-color: rgba(56, 189, 248, 0.35);

  color: #0f172a;

}



.game-level-badge {

  background: #eef2ff;

  border-color: rgba(99, 102, 241, 0.2);

  color: #1e3a8a;

}



.game-highlights {

  color: #64748b;

}



.game-highlights li::before {

  background: #60a5fa;

}



.game-start {

  background: linear-gradient(135deg, #38bdf8, #3b82f6);

  box-shadow: 0 14px 30px rgba(56, 189, 248, 0.3);

}



.game-start:hover {

  box-shadow: 0 18px 36px rgba(56, 189, 248, 0.35);

}



.games-panel {

  background: #ffffff;

  border: 1px solid var(--border-soft);

  color: #0f172a;

  box-shadow: var(--shadow-soft);

}



.games-panel-label {

  color: #64748b;

}



.games-panel-subtitle {

  color: #475569;

}



.games-score-card {

  background: #f8fafc;

  border: 1px solid var(--border-soft);

}



.games-score-card span {

  color: #64748b;

}



.games-score-card strong {

  color: #0f172a;

}



.games-progress {

  color: #475569;

}



.games-progress-track {

  flex: 1;

  min-width: 160px;

  height: 8px;

  border-radius: 999px;

  background: #e2e8f0;

  overflow: hidden;

}



.games-progress-fill {

  height: 100%;

  border-radius: 999px;

  background: linear-gradient(90deg, #38bdf8, #6366f1);

}



.games-progress-count {

  font-size: 0.85rem;

  color: #64748b;

}



.games-question-card {

  border-radius: 18px;

  border: 1px solid var(--border-soft);

  padding: 1.2rem;

  background: #f8fafc;

}



.games-question-meta {

  display: flex;

  flex-wrap: wrap;

  gap: 0.5rem;

  margin-bottom: 0.7rem;

}



.games-question-chip {

  font-size: 0.72rem;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  padding: 0.25rem 0.6rem;

  border-radius: 999px;

  background: #eef2ff;

  border: 1px solid rgba(99, 102, 241, 0.2);

  color: #1e3a8a;

}



.games-question-text {

  margin: 0 0 0.9rem;

  font-size: 1.12rem;

  color: #0f172a;

}



.games-answer-grid {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 0.6rem;

}



.games-panel .quiz-answer {

  background: #f8fafc;

  border-color: #e2e8f0;

}



.games-panel .quiz-answer--selected {

  border-color: #60a5fa;

  background: #f8fafc;

  box-shadow: none;

}



.games-panel .quiz-answer--correct {

  border-color: #22c55e;

  background: #f8fafc;

}



.games-panel .quiz-answer--wrong {

  border-color: #f87171;

  background: #f8fafc;

}



.games-input {

  margin-top: 0.2rem;

}



.games-input-label {

  display: block;

  font-size: 0.85rem;

  color: #64748b;

  margin-bottom: 0.4rem;

}



.games-input-row {

  display: flex;

  flex-wrap: wrap;

  gap: 0.6rem;

}



.games-input-field {

  flex: 1 1 220px;

  padding: 0.6rem 0.75rem;

  border-radius: 12px;

  border: 1px solid #e2e8f0;

  background: #ffffff;

  color: #0f172a;

}



.games-input-field:focus {

  outline: 2px solid rgba(59, 130, 246, 0.25);

  border-color: #60a5fa;

}



.games-feedback {

  margin-top: 0.9rem;

  padding: 0.75rem 0.9rem;

  border-radius: 14px;

  background: #eff6ff;

  border: 1px solid rgba(148, 163, 184, 0.3);

  color: #1e3a8a;

}



.games-feedback--correct {

  background: rgba(34, 197, 94, 0.12);

  border-color: rgba(34, 197, 94, 0.35);

  color: #166534;

}



.games-feedback--wrong {

  background: rgba(248, 113, 113, 0.12);

  border-color: rgba(248, 113, 113, 0.35);

  color: #7f1d1d;

}



.games-feedback p {

  margin: 0;

}



.games-hint {

  margin-top: 0.8rem;

  font-size: 0.85rem;

  color: #64748b;

}



.games-nav {

  margin-top: 1rem;

  display: flex;

  flex-wrap: wrap;

  gap: 0.8rem;

}



.games-finish {

  margin-top: 1rem;

  display: flex;

  justify-content: flex-end;

}



.games-finish .btn-primary {

  min-width: 180px;

}



.games-result {

  display: flex;

  flex-direction: column;

  gap: 1rem;

}



.games-result-stats {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));

  gap: 0.8rem;

  margin: 0.8rem 0 0.4rem;

}



.games-result-stat {

  border-radius: 14px;

  padding: 0.6rem 0.8rem;

  background: #f8fafc;

  border: 1px solid var(--border-soft);

  display: flex;

  flex-direction: column;

  gap: 4px;

}



.games-result-stat span {

  font-size: 0.72rem;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  color: #64748b;

}



.games-result-stat strong {

  font-size: 1.4rem;

  color: #0f172a;

}



.games-result-stat--good {

  background: rgba(34, 197, 94, 0.12);

  border-color: rgba(34, 197, 94, 0.35);

}



.games-result-stat--bad {

  background: rgba(248, 113, 113, 0.12);

  border-color: rgba(248, 113, 113, 0.35);

}



.games-result-card {

  padding: 1rem 1.2rem;

  border-radius: 16px;

  background: #f8fafc;

  border: 1px solid var(--border-soft);

}



.games-result-note {

  color: #64748b;

  margin-top: 0.4rem;

}



@media (max-width: 900px) {

  .games-hero-text h1 {

    font-size: 2rem;

  }

}



@media (max-width: 700px) {

  .games-answer-grid {

    grid-template-columns: 1fr;

  }



  .games-progress-track {

    width: 100%;

    min-width: 100%;

  }

}



/* ===========================

   LOJERA MODERN POLISH

   =========================== */



.games-page {

  position: relative;

  isolation: isolate;

}



.games-page::before {

  content: "";

  position: absolute;

  inset: -140px 0 auto 0;

  height: 360px;

  background: radial-gradient(circle at 18% 20%, rgba(59, 130, 246, 0.18), transparent 55%),

    radial-gradient(circle at 82% 0%, rgba(14, 165, 233, 0.12), transparent 52%);

  z-index: -1;

}



.games-page::after {

  content: "";

  position: absolute;

  inset: auto 0 -160px 0;

  height: 320px;

  background: radial-gradient(circle at 30% 80%, rgba(251, 191, 36, 0.12), transparent 60%),

    radial-gradient(circle at 80% 70%, rgba(59, 130, 246, 0.1), transparent 58%);

  z-index: -1;

}



.games-hero {

  border-radius: 30px;

  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(240, 249, 255, 0.9) 45%, rgba(238, 242, 255, 0.9));

  border: 1px solid rgba(148, 163, 184, 0.25);

  box-shadow: 0 32px 70px rgba(15, 23, 42, 0.1);

  backdrop-filter: blur(10px);

}



.games-hero::after {

  background: radial-gradient(circle, rgba(56, 189, 248, 0.2), transparent 65%);

}



.games-hero-text h1 {

  font-size: clamp(2rem, 3vw, 2.7rem);

  color: #0f172a;

}



.games-hero-card {

  border-radius: 22px;

  background: rgba(255, 255, 255, 0.92);

  border: 1px solid rgba(148, 163, 184, 0.25);

  box-shadow: 0 22px 50px rgba(15, 23, 42, 0.08);

}



.games-shell {

  display: grid;

  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);

  gap: 1.6rem;

  align-items: start;

}



.games-picker {

  display: block;

}



.games-picker-card {

  background: #ffffff;

  border-radius: 24px;

  padding: 1.4rem 1.3rem;

  border: 1px solid rgba(148, 163, 184, 0.25);

  box-shadow: 0 22px 50px rgba(15, 23, 42, 0.12);

}



.games-picker-card h3 {

  margin: 0 0 0.5rem;

  font-size: 1.25rem;

  color: #0f172a;

}



.games-picker-card p {

  margin: 0 0 0.9rem;

  color: #475569;

}



.games-picker-list {

  list-style: none;

  padding: 0;

  margin: 0;

  display: grid;

  gap: 0.55rem;

}



.games-picker-item {

  width: 100%;

  display: flex;

  align-items: center;

  gap: 0.65rem;

  padding: 0.55rem 0.6rem;

  border-radius: 12px;

  border: 1px solid transparent;

  background: transparent;

  font-size: 0.95rem;

  font-weight: 600;

  color: #0f172a;

  text-align: left;

  cursor: pointer;

  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;

}



.games-picker-item:hover {

  background: #f8fafc;

  border-color: rgba(148, 163, 184, 0.3);

  transform: translateX(2px);

}



.games-picker-item.is-active {

  background: rgba(56, 189, 248, 0.12);

  border-color: rgba(56, 189, 248, 0.35);

}



.games-picker-item:disabled {

  cursor: not-allowed;

  color: #94a3b8;

  opacity: 0.7;

}



.games-picker-dot {

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: #38bdf8;

  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.12);

  flex-shrink: 0;

}



.games-picker-item.is-active .games-picker-dot {

  background: #0ea5e9;

  box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.2);

}



.games-picker-label {

  flex: 1;

}



.games-picker-active {

  font-size: 0.65rem;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  padding: 0.2rem 0.45rem;

  border-radius: 999px;

  background: #0f172a;

  color: #ffffff;

}



.games-picker-note {

  margin-top: 0.8rem;

  font-size: 0.82rem;

  color: #6b7280;

}



.games-shell-panel {

  position: relative;

}



.games-shell .games-grid {

  display: none;

  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

  gap: 1rem;

  padding: 0.9rem;

  border-radius: 22px;

  border: 1px solid rgba(148, 163, 184, 0.25);

  background: rgba(255, 255, 255, 0.92);

  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);

}



.game-card {

  border-radius: 20px;

  background: linear-gradient(150deg, #ffffff, #f8fafc);

  border: 1px solid rgba(148, 163, 184, 0.25);

  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);

  min-height: 230px;

  transition: transform 0.25s ease, box-shadow 0.25s ease;

}



.game-card:hover {

  transform: translateY(-4px);

  box-shadow: 0 26px 55px rgba(15, 23, 42, 0.12);

}



.game-card--active {

  border-color: rgba(56, 189, 248, 0.6);

  box-shadow: 0 28px 60px rgba(56, 189, 248, 0.18);

}

@keyframes gameGlow {

  0% {

    opacity: 0.35;

    transform: translateY(0);

  }

  50% {

    opacity: 0.65;

    transform: translateY(-10px);

  }

  100% {

    opacity: 0.35;

    transform: translateY(0);

  }

}

.game-card--featured {

  position: relative;

  overflow: hidden;

}

.game-card--featured:not(.game-card--active) {

  border-color: rgba(14, 165, 233, 0.45);

  box-shadow: 0 26px 60px rgba(14, 165, 233, 0.18);

}

.game-card--featured::before {

  content: "";

  position: absolute;

  inset: -80px -80px auto auto;

  width: 200px;

  height: 200px;

  background: radial-gradient(circle, rgba(14, 165, 233, 0.24), transparent 70%);

  animation: gameGlow 6s ease-in-out infinite;

  pointer-events: none;

}

.game-card--featured > * {

  position: relative;

  z-index: 1;

}



.game-tag {

  background: rgba(14, 165, 233, 0.12);

  border-color: rgba(14, 165, 233, 0.25);

  color: #0f172a;

}



.game-level-badge {

  background: rgba(59, 130, 246, 0.12);

  border-color: rgba(59, 130, 246, 0.2);

  color: #1e3a8a;

}



.game-start {

  border-radius: 14px;

  padding: 0.65rem 1.1rem;

  background: linear-gradient(135deg, #22d3ee, #3b82f6);

}



.games-panel {

  border-radius: 24px;

  background: #ffffff;

  border: 1px solid rgba(148, 163, 184, 0.25);

  box-shadow: 0 26px 65px rgba(15, 23, 42, 0.12);

  padding: 1.7rem;

}



.games-score-card {

  background: linear-gradient(135deg, #ffffff, #eef2ff);

  border-color: rgba(99, 102, 241, 0.25);

  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.1);

}



.games-score-card strong {

  font-size: 1.5rem;

}



.games-panel-header h2 {

  margin-top: 0.1rem;

}



.games-progress {

  gap: 0.8rem;

  padding: 0.6rem 0.8rem;

  border-radius: 16px;

  background: rgba(248, 250, 252, 0.9);

  border: 1px solid rgba(148, 163, 184, 0.25);

}



.games-progress-track {

  height: 10px;

  background: #e2e8f0;

}



.games-progress-fill {

  background: linear-gradient(90deg, #22d3ee, #6366f1);

}



.games-question-card {

  border-radius: 20px;

  background: #ffffff;

  border: 1px solid rgba(148, 163, 184, 0.25);

  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);

}



.games-question-text {

  font-size: 1.18rem;

}



.games-question-translation {

  display: inline-flex;

  align-items: center;

  gap: 0.45rem;

  margin: 0 0 0.9rem;

  padding: 0.3rem 0.7rem;

  border-radius: 999px;

  background: #f1f5f9;

  border: 1px dashed rgba(148, 163, 184, 0.5);

  color: #334155;

  font-size: 0.9rem;

}



.games-question-translation span {

  font-size: 0.68rem;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: #64748b;

}



.games-question-translation strong {

  font-weight: 600;

  color: #0f172a;

}



.games-panel .quiz-answer {

  border-radius: 14px;

  padding: 0.65rem 0.9rem;

  background: #ffffff;

  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);

}



.games-panel .quiz-answer:hover {

  border-color: rgba(59, 130, 246, 0.45);

  transform: translateY(-1px);

}



.games-input-field {

  background: #f8fafc;

}



.games-feedback {

  border-radius: 16px;

  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);

}



.games-nav {

  justify-content: space-between;

  align-items: center;

}



.games-result-card {

  border-radius: 18px;

  background: #ffffff;

  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);

}



@media (max-width: 720px) {

  .games-shell {

    gap: 1.2rem;

  }



  .games-hero-card {

    display: none;

  }

}



@media (max-width: 1100px) {

  .games-shell {

    gap: 1.4rem;

    display: flex;

    flex-direction: column;

  }



  .games-shell .games-grid {

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  }

}



/* ===========================

   LOJERA INTERACTION UPDATE

   =========================== */



.games-panel {

  padding: clamp(1rem, 2.2vw, 1.7rem);

}



.games-question-card {

  padding: clamp(0.95rem, 1.6vw, 1.35rem);

  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);

  border: 1px solid rgba(148, 163, 184, 0.22);

}



.games-question-text {

  font-size: clamp(1rem, 1.15vw, 1.2rem);

}



.games-question-translation {

  max-width: 100%;

  flex-wrap: wrap;

}



.games-answer-grid {

  gap: 0.7rem;

}



.games-panel .quiz-answer {

  min-height: 46px;

  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;

}



.games-panel .quiz-answer:focus-visible {

  outline: 2px solid rgba(56, 189, 248, 0.65);

  outline-offset: 2px;

}



.games-feedback {

  font-size: 0.95rem;

}



@media (max-width: 640px) {
  .games-shell {
    gap: 1.1rem;
  }


  .games-panel {

    padding: 0.85rem;

    border-radius: 18px;

  }



  .games-panel-header {

    flex-direction: column;

    align-items: flex-start;

  }



  .games-question-card {

    padding: 0.8rem;

    border-radius: 16px;

  }



  .games-question-text {

    font-size: 1rem;

  }



  .games-question-translation {

    font-size: 0.82rem;

  }



  .games-input-row {

    flex-direction: column;

  }



  .games-input-field,

  .games-input-row .btn-primary,

  .games-input-row .btn-outline {

    width: 100%;

  }



  .games-shell .games-grid {

    padding: 0.7rem;

  }



  .games-finish {

    width: 100%;

  }



  .games-finish .btn-primary {

    width: 100%;

  }



  .games-score-card {

    width: 100%;

    text-align: left;

  }



  .games-picker-card {

    padding: 1rem 0.95rem;

    border-radius: 18px;

  }



  .games-picker-card h3 {

    font-size: 1.05rem;

  }



  .games-picker-list {

    gap: 0.45rem;

  }



  .games-picker-item {
    font-size: 0.9rem;
    padding: 0.5rem 0.55rem;
  }
}

/* Games page backdrop */
.games-page {
  --games-ink: #0b1220;
  --games-muted: #4b5563;
  --games-accent: #0ea5e9;
  --games-border: rgba(15, 23, 42, 0.12);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(3.2rem, 5.5vw, 4.2rem) clamp(1.4rem, 4vw, 3rem) 3.2rem;
  background: radial-gradient(circle at 12% 10%, rgba(14, 165, 233, 0.16), transparent 45%),
    radial-gradient(circle at 88% 0%, rgba(99, 102, 241, 0.14), transparent 48%),
    radial-gradient(circle at 35% 85%, rgba(251, 191, 36, 0.12), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.98));
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 32px;
  box-shadow: 0 36px 84px rgba(15, 23, 42, 0.12);
}

.games-page::before {
  content: "";
  position: absolute;
  inset: 24px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  pointer-events: none;
  z-index: -1;
}

.games-page::after {
  content: "";
  position: absolute;
  inset: -140px -60px auto auto;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.24), transparent 70%);
  z-index: -1;
  pointer-events: none;
}

.games-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: stretch;
  gap: clamp(1rem, 2vw, 1.8rem);
  padding: clamp(1.4rem, 2.6vw, 2rem);
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(240, 249, 255, 0.92));
  border: 1px solid rgba(148, 163, 184, 0.25);
  box-shadow: 0 24px 58px rgba(15, 23, 42, 0.12);
  color: #0f172a;
}

.games-hero::after {
  background: radial-gradient(circle, rgba(14, 165, 233, 0.18), transparent 70%);
}

.games-hero-text {
  position: relative;
  display: grid;
  align-content: center;
  gap: 0.6rem;
  padding: 1.3rem 1.4rem 1.5rem;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(148, 163, 184, 0.28);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.games-hero-text::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(14, 165, 233, 0.55), rgba(99, 102, 241, 0.5));
  opacity: 0.5;
}

.games-hero-text .breadcrumb {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  background: rgba(15, 23, 42, 0.08);
  color: #0f172a;
  justify-self: flex-start;
}

.games-hero-text h1 {
  font-size: clamp(2.1rem, 3.6vw, 2.9rem);
  letter-spacing: -0.02em;
  color: #0f172a;
}

.games-intro {
  margin-top: 0.35rem;
  color: #475569;
}

.games-hero-card {
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.25);
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
  padding: 1.4rem;
  align-self: center;
}

.games-hero-card h3 {
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}

.games-page .level-select {
  display: grid;
  gap: 0.6rem;
  margin: 1.4rem auto 0.8rem;
  max-width: 720px;
}

.games-page .level-select-trigger {
  border-radius: 18px;
  padding: 0.85rem 1rem;
  font-size: 1rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(240, 249, 255, 0.95));
  border: 1px solid rgba(148, 163, 184, 0.32);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
}

.games-page .level-select-label {
  font-size: 1rem;
  font-weight: 700;
}

.games-page .level-select-menu {
  border-radius: 18px;
  padding: 0.7rem;
  border: 1px solid rgba(148, 163, 184, 0.25);
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.12);
  background: #ffffff;
  gap: 0.6rem;
}

.games-page .level-select-menu .courses-level-tab {
  width: 100%;
  justify-content: space-between;
  padding: 0.75rem 0.95rem;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.28);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
  font-size: 0.95rem;
}

.games-page .level-select-menu .courses-level-tab .badge {
  font-size: 0.65rem;
}

.games-page .courses-level-tab--coming {
  opacity: 0.7;
}

.games-page .courses-level-tab--upgrade {
  border-color: rgba(251, 191, 36, 0.5);
}

.games-page .courses-level-tab--active:not(.courses-level-tab--upgrade):not(.courses-level-tab--coming) {
  background: linear-gradient(135deg, rgba(224, 242, 254, 0.8), rgba(255, 255, 255, 0.95));
  border-color: rgba(14, 165, 233, 0.45);
  box-shadow: 0 16px 32px rgba(14, 165, 233, 0.12);
}

.games-page .courses-level-tab--active.courses-level-tab--coming,
.games-page .courses-level-tab--active.courses-level-tab--upgrade {
  box-shadow: none;
}

.games-page .game-card {
  min-height: 200px;
  padding: 1rem;
}

.games-page .game-card p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.games-page .game-highlights {
  display: none;
}

@media (max-width: 900px) {
  .games-page {
    padding: 1.6rem 1.2rem 2rem;
    border-radius: 24px;
  }

  .games-page::before {
    inset: 16px;
    border-radius: 20px;
  }

  .games-page::after {
    width: 260px;
    height: 260px;
  }

  .games-page .level-select {
    max-width: 100%;
  }

  .games-hero {
    grid-template-columns: 1fr;
    padding: 1.4rem;
  }

  .games-hero-text {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    align-content: start;
  }

  .games-hero-text::after {
    display: none;
  }

  .games-hero-text .breadcrumb {
    background: rgba(15, 23, 42, 0.08);
  }
}

/* Games hero menu layout */
.games-shell {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.games-hero-card {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.games-hero-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.4rem;
}

.games-hero-menu {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.7rem;
}

.games-hero-card .games-picker-item {
  position: relative;
  overflow: hidden;
  align-items: flex-start;
  flex-wrap: wrap;
  min-height: 84px;
  padding: 0.85rem 1rem;
  border-radius: 16px;
  background: linear-gradient(145deg, #ffffff, #f8fafc);
  border-color: rgba(148, 163, 184, 0.28);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

.games-hero-card .games-picker-label {
  font-size: 1rem;
  line-height: 1.25;
}

.games-hero-card .games-picker-item:hover:not(:disabled) {
  background: linear-gradient(145deg, #ffffff, #eef2ff);
  border-color: rgba(59, 130, 246, 0.35);
  transform: translateY(-2px);
}

.games-hero-card .games-picker-item.is-active {
  background: linear-gradient(145deg, rgba(14, 165, 233, 0.2), rgba(255, 255, 255, 0.9));
  border-color: rgba(14, 165, 233, 0.5);
  box-shadow: 0 16px 30px rgba(14, 165, 233, 0.16);
}

.games-hero-card .games-picker-item::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(14, 165, 233, 0.7), rgba(99, 102, 241, 0.6));
  opacity: 0.6;
}

.games-hero-card .games-picker-item--featured {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.16), rgba(59, 130, 246, 0.08));
  border-color: rgba(14, 165, 233, 0.45);
  box-shadow: 0 12px 26px rgba(14, 165, 233, 0.14);
}

.games-hero-card .games-picker-item--featured:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.22), rgba(59, 130, 246, 0.12));
}

.games-hero-card .games-picker-item--featured.is-active {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.28), rgba(59, 130, 246, 0.18));
  border-color: rgba(14, 165, 233, 0.6);
}

.games-picker-dot--featured {
  background: #0ea5e9;
  box-shadow: 0 0 0 6px rgba(14, 165, 233, 0.2);
  animation: pickerPulse 1.8s ease-in-out infinite;
}

.games-hero-card .games-picker-active {
  font-size: 0.6rem;
  letter-spacing: 0.08em;
}

@keyframes pickerPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.18);
  }
  50% {
    transform: scale(1.2);
    box-shadow: 0 0 0 8px rgba(14, 165, 233, 0.28);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.18);
  }
}

@media (prefers-reduced-motion: reduce) {
  .game-card--featured::before,
  .games-picker-dot--featured {
    animation: none;
  }
}

@media (max-width: 900px) {
  .games-hero-card-head {
    align-items: flex-start;
  }
}

@media (max-width: 720px) {
  .games-hero-card {
    display: flex;
  }
}

@media (max-width: 640px) {
  .games-hero-card {
    padding: 1.1rem;
    border-radius: 18px;
  }

  .games-hero-card-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .games-hero-card h3 {
    font-size: 1.15rem;
  }

  .games-intro {
    display: none;
  }

  .games-hero-card-head p {
    display: none;
  }

  .games-hero-tags .badge {
    font-size: 0.62rem;
    padding: 0.18rem 0.45rem;
  }

  .games-page .courses-level-tab {
    padding: 0.65rem 0.75rem;
    font-size: 0.82rem;
  }

  .games-page .courses-level-tab .badge {
    font-size: 0.6rem;
    padding: 0.15rem 0.4rem;
  }

  .games-page .level-select-trigger {
    padding: 0.7rem 0.8rem;
  }

  .games-page .level-select-label {
    font-size: 0.92rem;
  }

  .games-page .level-select-menu {
    padding: 0.6rem;
  }

  .games-hero-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
  }

  .games-hero-card .games-picker-item {
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 0.55rem 0.65rem;
    border-radius: 16px;
    min-height: 60px;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.1);
  }

  .games-hero-card .games-picker-label {
    font-size: 0.84rem;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .games-hero-card .games-picker-active {
    display: none;
  }

  .game-card p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .game-highlights {
    display: none;
  }
}

/* Games panel polish */
.games-panel {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 26px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  box-shadow: 0 28px 60px rgba(15, 23, 42, 0.12);
  position: relative;
  overflow: hidden;
}

.games-panel::before {
  content: "";
  position: absolute;
  top: -140px;
  right: -120px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.18), transparent 70%);
  pointer-events: none;
}

.games-panel > * {
  position: relative;
  z-index: 1;
}

.games-panel-header {
  gap: 1rem;
}

.games-score-card {
  border-radius: 18px;
}

.games-progress {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.92rem;
}

.games-progress-track {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
}

.games-progress-fill {
  border-radius: 999px;
}

.games-question-card {
  background: #ffffff;
  border-radius: 22px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
  position: relative;
  overflow: hidden;
}

.games-question-card::after {
  content: "";
  position: absolute;
  inset: -90px -120px auto auto;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.12), transparent 70%);
  pointer-events: none;
}

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

.games-question-translation {
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.25);
}

.games-panel .quiz-answer {
  border-radius: 16px;
}

.games-drag {
  display: grid;
  gap: 0.9rem;
}

.games-drag-zone {
  min-height: 72px;
  border-radius: 18px;
  border: 2px dashed rgba(148, 163, 184, 0.4);
  background: #ffffff;
  padding: 0.8rem;
  display: grid;
  place-items: center;
  font-weight: 700;
  color: #0f172a;
  transition: border-color 0.2s ease, background 0.2s ease,
    box-shadow 0.2s ease, transform 0.2s ease;
  animation: dragFloat 3.6s ease-in-out infinite;
}

.games-drag-zone.is-filled {
  background: rgba(14, 165, 233, 0.08);
  border-color: rgba(14, 165, 233, 0.4);
  box-shadow: 0 12px 24px rgba(14, 165, 233, 0.1);
}

.games-drag-zone.is-correct {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.5);
}

.games-drag-zone.is-wrong {
  background: rgba(248, 113, 113, 0.12);
  border-color: rgba(248, 113, 113, 0.5);
}

.games-drag-placeholder {
  font-size: 0.85rem;
  font-weight: 600;
  color: #64748b;
}

.games-drag-value {
  font-size: 1.05rem;
}

.games-drag-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.7rem;
}

.games-drag-option {
  border-radius: 14px;
  padding: 0.6rem 0.8rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: #ffffff;
  font-weight: 600;
  cursor: grab;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease,
    border-color 0.15s ease, background 0.15s ease;
}

.games-drag-option:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: rgba(59, 130, 246, 0.45);
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.12);
}

.games-drag-option:disabled {
  cursor: not-allowed;
  opacity: 0.7;
  box-shadow: none;
}

.games-drag-option:active {
  cursor: grabbing;
  transform: scale(0.98);
}

.games-drag-option.is-selected {
  border-color: rgba(14, 165, 233, 0.5);
  background: #ffffff;
}

.games-drag-option.is-correct {
  border-color: rgba(34, 197, 94, 0.55);
  background: #ffffff;
}

.games-drag-option.is-wrong {
  border-color: rgba(248, 113, 113, 0.55);
  background: #ffffff;
}

@keyframes dragFloat {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
  100% {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .games-drag-zone {
    animation: none;
  }
}

@media (max-width: 640px) {
  .games-drag-zone {
    min-height: 62px;
    padding: 0.65rem;
  }

  .games-drag-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .games-drag-option {
    font-size: 0.9rem;
    padding: 0.55rem 0.7rem;
  }
}

@media (max-width: 900px) {
  .games-panel {
    border-radius: 22px;
  }
}

@media (max-width: 640px) {
  .games-panel {
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.1);
  }

  .games-progress {
    grid-template-columns: 1fr;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .games-question-card {
    border-radius: 16px;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
  }
}

/* ===========================
   COURSES + EXERCISES MODERN UPDATE
   =========================== */


.courses-page,

.exercises-page {

  --course-ink: #0b1220;

  --course-muted: #4b5563;

  --course-accent: #0ea5e9;

  --course-accent-strong: #2563eb;

  --course-accent-soft: rgba(14, 165, 233, 0.16);

  --course-warm: #f59e0b;

  --course-border: rgba(15, 23, 42, 0.12);

  --course-shadow: 0 30px 70px rgba(15, 23, 42, 0.12);

  --course-radius: 32px;

  position: relative;

  isolation: isolate;

  overflow: hidden;

  max-width: 1240px;

  margin: 0 auto;

  padding: clamp(3.8rem, 6vw, 4.8rem) clamp(1.6rem, 4vw, 3.2rem) 3.6rem;

  background: radial-gradient(circle at 12% 10%, rgba(14, 165, 233, 0.16), transparent 45%),

    radial-gradient(circle at 88% 0%, rgba(99, 102, 241, 0.14), transparent 48%),

    radial-gradient(circle at 35% 85%, rgba(251, 191, 36, 0.12), transparent 55%),

    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.98));

  border: 1px solid rgba(148, 163, 184, 0.2);

  border-radius: 36px;

  box-shadow: 0 40px 90px rgba(15, 23, 42, 0.12);

}



.courses-page::before,

.exercises-page::before {

  content: "";

  position: absolute;

  inset: 24px;

  border-radius: 30px;

  border: 1px solid rgba(255, 255, 255, 0.7);

  pointer-events: none;

  z-index: -1;

}



.courses-page::after,

.exercises-page::after {

  content: "";

  position: absolute;

  inset: -140px -60px auto auto;

  width: 360px;

  height: 360px;

  background: radial-gradient(circle, rgba(14, 165, 233, 0.28), transparent 70%);

  z-index: -1;

  pointer-events: none;

}



.courses-page .courses-header,

.exercises-page .courses-header {

  position: relative;

  text-align: left;

  padding: clamp(1.4rem, 2.2vw, 2rem);

  border-radius: calc(var(--course-radius) - 6px);

  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(240, 249, 255, 0.92));

  border: 1px solid rgba(148, 163, 184, 0.25);

  box-shadow: 0 24px 58px rgba(15, 23, 42, 0.14);

  overflow: hidden;

}



.courses-page .courses-header::before,

.exercises-page .courses-header::before {

  content: "";

  position: absolute;

  top: -90px;

  right: -60px;

  width: 240px;

  height: 240px;

  background: radial-gradient(circle, rgba(14, 165, 233, 0.2), transparent 70%);

  pointer-events: none;

}



.courses-page .courses-header::after,

.exercises-page .courses-header::after {

  content: "";

  position: absolute;

  inset: auto 0 0 0;

  height: 4px;

  background: linear-gradient(90deg, var(--course-accent), var(--course-accent-strong));

  opacity: 0.6;

  pointer-events: none;

}



.courses-page .courses-header .breadcrumb,

.exercises-page .courses-header .breadcrumb {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  font-size: 0.65rem;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  padding: 0.25rem 0.7rem;

  border-radius: 999px;

  background: #0f172a;

  color: #f8fafc;

  margin-bottom: 0.8rem;

}



.courses-page .courses-header h1,

.exercises-page .courses-header h1 {

  font-size: clamp(2rem, 3vw, 2.9rem);

  margin: 0 0 0.55rem;

  letter-spacing: -0.02em;

  color: var(--course-ink);

}



.courses-page .courses-intro,

.exercises-page .courses-intro {

  margin: 0;

  max-width: 65ch;

  font-size: 1rem;

  line-height: 1.7;

  color: var(--course-muted);

}



.courses-page .courses-level-tabs,

.exercises-page .courses-level-tabs {

  justify-content: flex-start;

  gap: 0.5rem;

  padding: 0.4rem;

  border-radius: 999px;

  background: rgba(15, 23, 42, 0.04);

  border: 1px solid var(--course-border);

  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.1);

}



.courses-page .courses-level-tab,

.exercises-page .courses-level-tab {

  min-height: 36px;

  padding: 0.5rem 1rem;

  font-size: 0.8rem;

  font-weight: 700;

  border-radius: 999px;

  color: var(--course-muted);

  border: 1px solid transparent;

  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;

}



.courses-page .courses-level-tab:hover,

.exercises-page .courses-level-tab:hover {

  transform: translateY(-1px);

  border-color: rgba(14, 165, 233, 0.35);

  box-shadow: 0 10px 22px rgba(14, 165, 233, 0.18);

}



.courses-page .courses-level-tab--active:not(.courses-level-tab--upgrade):not(.courses-level-tab--coming),

.exercises-page .courses-level-tab--active:not(.courses-level-tab--upgrade):not(.courses-level-tab--coming) {

  background: linear-gradient(135deg, #0ea5e9, #2563eb);

  color: #ffffff;

  border-color: transparent;

  box-shadow: 0 16px 32px rgba(37, 99, 235, 0.35);

}



.courses-page .courses-level-description,

.exercises-page .courses-level-description {

  text-align: left;

  margin: 0 0 1.9rem;

  max-width: 70ch;

  font-size: 0.96rem;

  color: var(--course-muted);

}



.courses-page .level-select,

.exercises-page .level-select {

  max-width: 560px;

  margin: 1.2rem 0 1rem;

}



.courses-page .level-select-trigger,

.exercises-page .level-select-trigger {

  border-radius: 18px;

  padding: 0.7rem 0.95rem;

  background: rgba(255, 255, 255, 0.96);

  border: 1px solid var(--course-border);

  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.14);

}



.courses-page .level-select-menu,

.exercises-page .level-select-menu {

  border-radius: 18px;

  border: 1px solid var(--course-border);

  background: rgba(255, 255, 255, 0.98);

  box-shadow: 0 26px 55px rgba(15, 23, 42, 0.16);

}



.courses-page .courses-layout,

.exercises-page .courses-layout {

  gap: clamp(1.2rem, 2.2vw, 2.1rem);

  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);

}



.courses-page .courses-lesson-list,

.exercises-page .courses-lesson-list {

  background: rgba(255, 255, 255, 0.9);

  border: 1px solid var(--course-border);

  border-radius: 22px;

  padding: 1rem 0.9rem;

  color: var(--course-ink);

  box-shadow: var(--course-shadow);

  backdrop-filter: blur(12px);

}



.courses-page .lesson-preview,

.exercises-page .lesson-preview {

  background: rgba(248, 250, 252, 0.95);

  border: 1px solid rgba(148, 163, 184, 0.24);

  border-radius: 16px;

  padding: 0.75rem;

}



.courses-page .lesson-preview-title,

.exercises-page .lesson-preview-title,

.courses-page .courses-lesson-list h2,

.exercises-page .courses-lesson-list h2 {

  color: var(--course-ink);

}



.courses-page .lesson-list-toggle,

.exercises-page .lesson-list-toggle {

  background: rgba(148, 163, 184, 0.12);

  color: var(--course-ink);

  border-color: rgba(148, 163, 184, 0.35);

}



.courses-page .lesson-list-toggle-arrow,

.exercises-page .lesson-list-toggle-arrow {

  border-right-color: var(--course-ink);

  border-bottom-color: var(--course-ink);

}



.courses-page .lesson-button,

.exercises-page .lesson-button {

  border-radius: 16px;

  border: 1px solid rgba(148, 163, 184, 0.2);

  background: rgba(248, 250, 252, 0.95);

  color: var(--course-ink);

  padding: 0.65rem 0.75rem;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);

  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;

}



.courses-page .lesson-button:hover,

.exercises-page .lesson-button:hover {

  border-color: rgba(14, 165, 233, 0.3);

  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);

  transform: translateY(-1px);

}



.courses-page .lesson-button--active,

.exercises-page .lesson-button--active {

  background: linear-gradient(135deg, #0f172a, #1d4ed8);

  color: #f8fafc;

  border-color: transparent;

  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.3);

}



.courses-page .lesson-number,

.exercises-page .lesson-number {

  width: 1.8rem;

  height: 1.8rem;

  border-radius: 0.7rem;

  border: 1px solid rgba(14, 165, 233, 0.35);

  background: rgba(14, 165, 233, 0.18);

  color: #0369a1;

  font-weight: 700;

}



.courses-page .lesson-button--active .lesson-number,

.exercises-page .lesson-button--active .lesson-number {

  background: #22d3ee;

  color: #0b1120;

  border-color: #22d3ee;

}



.exercises-page .lesson-button--done {

  background: rgba(34, 197, 94, 0.12);

  border-color: rgba(34, 197, 94, 0.5);

  color: #065f46;

}



.exercises-page .lesson-button--done .lesson-number {

  background: rgba(34, 197, 94, 0.2);

  color: #065f46;

  border-color: rgba(34, 197, 94, 0.4);

}



.exercises-page .lesson-button--active.lesson-button--done {

  background: #0f172a;

  color: #f8fafc;

}



.exercises-page .lesson-button--active.lesson-button--done .lesson-number {

  background: #22c55e;

  color: #052e16;

  border-color: #22c55e;

}



.courses-page .courses-lesson-content,

.exercises-page .courses-lesson-content {

  border-radius: 28px;

  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);

  border: 1px solid var(--course-border);

  padding: clamp(1.2rem, 2vw, 2rem);

  box-shadow: var(--course-shadow);

  position: relative;

  overflow: hidden;

}



.courses-page .courses-lesson-content::before,

.exercises-page .courses-lesson-content::before {

  height: 5px;

  background: linear-gradient(90deg, var(--course-accent), var(--course-accent-strong));

}



.courses-page .lesson-goal,

.exercises-page .lesson-goal {

  background: linear-gradient(135deg, rgba(14, 165, 233, 0.14), rgba(59, 130, 246, 0.14));

  border: 1px solid rgba(14, 165, 233, 0.3);

  box-shadow: 0 12px 26px rgba(14, 165, 233, 0.16);

}



.courses-page .lesson-goal-label,

.exercises-page .lesson-goal-label {

  color: #0ea5e9;

}



.courses-page .lesson-summary,

.exercises-page .lesson-summary,

.courses-page .lesson-quiz,

.exercises-page .lesson-quiz {

  border-radius: 18px;

  border: 1px solid var(--course-border);

  background: #ffffff;

  padding: 1rem 1.1rem;

  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.1);

}



.courses-page .lesson-summary,

.exercises-page .lesson-summary {

  background: rgba(248, 250, 252, 0.9);

}



.courses-page .lesson-quiz-note,

.exercises-page .lesson-quiz-note {

  color: var(--course-muted);

}



.courses-page .quiz-result,

.exercises-page .quiz-result {

  background: rgba(14, 165, 233, 0.1);

  border: 1px solid rgba(14, 165, 233, 0.25);

  color: #0f172a;

}



.courses-page .quiz-question-card,

.exercises-page .quiz-question-card {

  border-radius: 20px;

  border: 1px solid var(--course-border);

  background: #ffffff;

  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);

  border-left: 4px solid rgba(14, 165, 233, 0.35);

}



.exercises-page .quiz-question-card {

  border-left-color: var(--course-accent);

  background: linear-gradient(135deg, #ffffff, #f8fafc);

}



.courses-page .quiz-question-text,

.exercises-page .quiz-question-text {

  font-size: 1rem;

  color: var(--course-ink);

}



.courses-page .quiz-question-number,

.exercises-page .quiz-question-number {

  background: rgba(148, 163, 184, 0.12);

  border: 1px solid rgba(148, 163, 184, 0.25);

  color: var(--course-ink);

}



.courses-page .quiz-answer,

.exercises-page .quiz-answer {

  border-radius: 16px;

  border: 1px solid rgba(148, 163, 184, 0.28);

  background: rgba(248, 250, 252, 0.95);

  padding: 0.75rem 0.95rem;

  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;

}



.courses-page .quiz-answer:hover,

.exercises-page .quiz-answer:hover {

  border-color: rgba(14, 165, 233, 0.45);

  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);

  transform: translateY(-1px);

}



.courses-page .quiz-answer--selected,

.exercises-page .quiz-answer--selected {

  background: rgba(14, 165, 233, 0.14);

  border-color: rgba(14, 165, 233, 0.55);

}



.courses-page .quiz-answer--correct,

.exercises-page .quiz-answer--correct {

  background: rgba(34, 197, 94, 0.14);

  border-color: rgba(34, 197, 94, 0.5);

}



.courses-page .quiz-answer--wrong,

.exercises-page .quiz-answer--wrong {

  background: rgba(248, 113, 113, 0.14);

  border-color: rgba(248, 113, 113, 0.5);

}



.courses-page .quiz-feedback,

.exercises-page .quiz-feedback {

  border-radius: 14px;

  background: #ffffff;

  border: 1px solid var(--course-border);

}



.courses-page progress,

.exercises-page progress {

  accent-color: var(--course-accent);

}



.exercises-page .exercise-topbar {

  display: grid;

  grid-template-columns: minmax(0, 1fr) minmax(0, 260px);

  gap: 1rem;

  border-radius: 22px;

  border: 1px solid var(--course-border);

  background: #ffffff;

  box-shadow: var(--course-shadow);

  padding: 1.1rem 1.2rem;

}



.exercises-page .exercise-progress {

  font-size: 0.9rem;

  color: var(--course-muted);

  background: rgba(248, 250, 252, 0.9);

  border: 1px solid rgba(148, 163, 184, 0.2);

  border-radius: 16px;

  padding: 0.7rem 0.8rem;

}



.exercises-page .exercise-progress progress {

  height: 8px;

  border-radius: 999px;

  width: 100%;

}



.exercises-page .exercise-result-banner {

  border-radius: 16px;

  border-color: rgba(14, 165, 233, 0.45);

  background: linear-gradient(135deg, #e0f2fe, #eff6ff);

}



.exercises-page .exercise-submit {

  background: linear-gradient(135deg, var(--course-accent), var(--course-accent-strong));

  border-color: transparent;

  color: #ffffff;

  box-shadow: 0 16px 32px rgba(14, 165, 233, 0.32);

  border-radius: 999px;

}



.exercises-page .exercise-reset {

  background: #ffffff;

  border-color: var(--course-border);

  border-radius: 999px;

}



.courses-page .lesson-footer,

.exercises-page .lesson-footer,

.exercises-page .exercise-footer {

  border-top: 1px solid rgba(148, 163, 184, 0.25);

}



.courses-page .lesson-footer-links,

.exercises-page .exercise-footer-links {

  gap: 0.8rem;

}



.courses-page .courses-level-tab:focus-visible,

.exercises-page .courses-level-tab:focus-visible,

.courses-page .lesson-button:focus-visible,

.exercises-page .lesson-button:focus-visible,

.courses-page .quiz-answer:focus-visible,

.exercises-page .quiz-answer:focus-visible {

  outline: 2px solid rgba(14, 165, 233, 0.55);

  outline-offset: 2px;

}



@media (max-width: 900px) {

  .courses-page,

  .exercises-page {

    padding: 3rem 1rem 2.6rem;

    border-radius: 20px;

  }



  .courses-page::before,

  .courses-page::after,

  .exercises-page::before,

  .exercises-page::after {

    content: none;

  }



  .courses-page .courses-layout,

  .exercises-page .courses-layout {

    grid-template-columns: 1fr;

  }



  .courses-page .courses-lesson-list,

  .exercises-page .courses-lesson-list {

    position: static;

    max-height: 34vh;

    margin-bottom: 0.8rem;

  }



  .exercises-page .exercise-topbar {

    grid-template-columns: 1fr;

  }



  .courses-page .courses-lesson-content,

  .exercises-page .courses-lesson-content {

    padding: 1.1rem;

  }

}



@media (max-width: 640px) {

  .courses-page,

  .exercises-page {

    padding: 16px 16px 64px;

    border-radius: 18px;

  }



  .courses-page .courses-header h1,

  .exercises-page .courses-header h1 {

    font-size: 1.85rem;

  }



  .courses-page .courses-header,

  .exercises-page .courses-header {

    padding: 1.1rem;

  }



  .courses-page .courses-intro,

  .exercises-page .courses-intro {

    font-size: 0.95rem;

  }



  .courses-page .lesson-button,

  .exercises-page .lesson-button {

    padding: 0.6rem 0.65rem;

  }



  .courses-page .quiz-question-card,

  .exercises-page .quiz-question-card {

    padding: 0.95rem;

  }



  .exercises-page .exercise-topbar,

  .exercises-page .exercise-progress {

    padding: 0.9rem;

  }



  .exercises-page .exercise-actions {

    min-width: 0;

    width: 100%;

  }



  .exercises-page .exercise-footer-links,

  .courses-page .lesson-footer-links {

    flex-direction: column;

  }



  .exercises-page .exercise-footer-links .btn-secondary,

  .exercises-page .exercise-footer-links .btn-outline,

  .courses-page .lesson-footer-links .btn-secondary,

  .courses-page .lesson-footer-links .btn-outline {

    width: 100%;

  }

}



/* ===========================

   GLOBAL SPACING OVERRIDES

   =========================== */

.app-body {

  padding-top: 72px;

}



@media (max-width: 900px) {
  .app-body {
    padding-top: 68px;
  }

  .page:not(.courses-page):not(.exercises-page):not(.games-page) {
    padding: 16px 16px 64px;
  }
}

/* Games board refresh */
.games-shell-panel {
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.games-panel {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  background: #f8fafc;
  border-radius: 22px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
  padding: 1.5rem 1.6rem;
  position: relative;
  overflow: hidden;
  scroll-margin-top: 120px;
  scroll-margin-bottom: 120px;
}

.games-panel::before,
.games-panel::after {
  content: none;
}

.games-panel > * {
  position: relative;
  z-index: 1;
}

.games-panel--quiz {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.games-panel--quiz .games-panel-header {
  margin-bottom: 0;
}

.games-panel--quiz .games-question-card {
  margin: 0;
}

.games-panel--quiz .games-progress {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.75rem;
}

.games-panel--quiz .games-progress span {
  text-align: left;
}

.games-panel--quiz .games-finish {
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
}

.games-panel--quiz .games-finish .btn-primary {
  width: auto;
}

.games-panel-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid #e2e8f0;
  flex-wrap: wrap;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
}

.games-panel-header h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  margin: 0.15rem 0 0;
}

.games-panel-subtitle {
  color: #475569;
  margin: 0.2rem 0 0;
  max-width: 38ch;
}

.games-panel-label {
  background: #e2e8f0;
  color: #0c4a6e;
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.62rem;
}

.games-score-card {
  border-radius: 16px;
  padding: 0.7rem 0.9rem;
  min-width: 140px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: none;
}

.games-score-card span {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}

.games-score-card strong {
  font-size: 1.5rem;
  color: #0f172a;
}

.games-progress {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 0.6rem 0.85rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  box-shadow: none;
}

.games-progress span {
  font-size: 0.82rem;
  color: #475569;
}

.games-progress-track {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: #e2e8f0;
}

.games-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #0ea5e9, #6366f1);
}

.games-question-card {
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid #e2e8f0;
  box-shadow: none;
  padding: 1.2rem 1.3rem;
  position: relative;
}

.games-question-card::before {
  content: none;
}

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

.games-question-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.games-question-chip {
  background: #f8fafc;
  color: #0f172a;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  padding: 0.25rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.02em;
}

.games-question-text {
  font-size: clamp(1.06rem, 1.25vw, 1.25rem);
  line-height: 1.45;
  margin: 0.6rem 0 0.8rem;
  color: #0f172a;
}

.games-question-translation {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #334155;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  margin-bottom: 0.9rem;
}

.games-question-translation span {
  text-transform: uppercase;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: #64748b;
}

.games-question-translation strong {
  font-weight: 600;
}

.games-answer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.games-panel .quiz-answer {
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  box-shadow: none;
  padding: 0.85rem 0.95rem;
  min-height: 52px;
  font-weight: 600;
  font-size: 0.98rem;
  color: #0f172a;
  text-align: left;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.games-panel .quiz-answer:hover {
  border-color: #94a3b8;
  box-shadow: none;
  transform: translateY(-1px);
}

.games-panel .quiz-answer:active {
  transform: translateY(0);
}

.games-panel .quiz-answer--selected {
  background: #f8fafc;
  border-color: #94a3b8;
}

.games-panel .quiz-answer--correct {
  background: #f8fafc;
  border-color: #22c55e;
}

.games-panel .quiz-answer--wrong {
  background: #f8fafc;
  border-color: #ef4444;
}

.games-feedback {
  border-radius: 14px;
  padding: 0.7rem 0.9rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
}

.games-feedback-answer {
  margin-top: 0.4rem;
  font-weight: 600;
}

.games-feedback-actions {
  margin-top: 0.6rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.games-hint {
  color: #64748b;
  font-size: 0.9rem;
}

.games-finish {
  display: flex;
  justify-content: center;
}

.games-finish .btn-primary {
  padding: 0.75rem 1.6rem;
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.16);
}

@media (max-width: 900px) {
  .games-panel {
    padding: 1.2rem;
    border-radius: 18px;
  }

  .games-panel--quiz {
    gap: 0.65rem;
  }

  .games-panel-header {
    align-items: flex-start;
    grid-template-columns: 1fr;
  }

  .games-score-card {
    width: 100%;
  }

  .games-score-card {
    min-width: 100%;
  }

  .games-progress {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }

  .games-answer-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .games-shell-panel {
    max-width: 100%;
  }

  .games-panel {
    padding: 0.95rem;
    border-radius: 16px;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
    scroll-margin-top: 88px;
    scroll-margin-bottom: 88px;
  }

  .games-panel-header {
    padding-bottom: 0.8rem;
    margin-bottom: 0.9rem;
    flex-direction: column;
    align-items: flex-start;
  }

  .games-score-card {
    width: 100%;
  }

  .games-question-card {
    padding: 0.95rem;
    border-radius: 16px;
  }

  .games-question-card::before {
    content: none;
  }

  .games-question-text {
    font-size: 1.05rem;
  }

  .games-question-translation {
    font-size: 0.82rem;
  }

  .games-progress span {
    font-size: 0.8rem;
  }

  .games-finish {
    width: 100%;
  }

  .games-finish .btn-primary {
    width: 100%;
  }
}

/* ===========================
   COURSES + EXERCISES CONTENT LAYOUT
   =========================== */

.courses-page .lesson-intro-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.courses-page .lesson-content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 1.6rem;
}

.courses-page .lesson-summary {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.courses-page .lesson-card {
  border-radius: 18px;
  border: 1px solid var(--course-border);
  background: #ffffff;
  padding: 1rem 1.1rem;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.1);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.courses-page .lesson-card h3 {
  margin: 0 0 0.2rem;
  font-size: 1rem;
  color: var(--course-ink);
}

.courses-page .lesson-card p {
  margin: 0;
  color: var(--course-muted);
  line-height: 1.6;
}

.courses-page .lesson-card--details {
  background: rgba(239, 246, 255, 0.7);
  border-color: rgba(59, 130, 246, 0.25);
}

.courses-page .lesson-card--examples {
  background: rgba(236, 254, 255, 0.8);
  border-color: rgba(14, 165, 233, 0.25);
}

.courses-page .lesson-card--tip {
  background: rgba(254, 243, 199, 0.55);
  border-color: rgba(245, 158, 11, 0.35);
}

.courses-page .lesson-examples {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.courses-page .lesson-examples li {
  border-radius: 12px;
  border: 1px solid rgba(14, 165, 233, 0.2);
  background: rgba(255, 255, 255, 0.9);
  padding: 0.6rem 0.7rem;
  display: grid;
  gap: 0.2rem;
}

.courses-page .example-de {
  font-weight: 700;
  color: var(--course-ink);
}

.courses-page .example-sq {
  font-size: 0.88rem;
  color: var(--course-muted);
}

.courses-page .lesson-quiz--collapsible {
  padding: 0;
}

.courses-page .lesson-quiz--collapsible > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
}

.courses-page .lesson-quiz--collapsible > summary::-webkit-details-marker {
  display: none;
}

.courses-page .lesson-quiz-toggle {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: rgba(14, 165, 233, 0.12);
  border: 1px solid rgba(14, 165, 233, 0.35);
  color: var(--course-accent-strong);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.courses-page .lesson-quiz--collapsible[open] .lesson-quiz-toggle {
  background: rgba(14, 165, 233, 0.2);
}

.courses-page .lesson-quiz-body {
  border-top: 1px dashed rgba(148, 163, 184, 0.4);
  padding: 1rem 1.1rem 1.2rem;
  display: grid;
  gap: 1rem;
}

.exercises-page .exercise-question-card {
  border-left: none;
  background: linear-gradient(135deg, #ffffff, #f0f9ff);
  border: 1px solid rgba(14, 165, 233, 0.25);
}

.exercises-page .exercise-question-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.exercises-page .exercise-question-tag {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: rgba(14, 165, 233, 0.12);
  border: 1px solid rgba(14, 165, 233, 0.35);
  color: var(--course-accent-strong);
  font-weight: 700;
}

.exercises-page .quiz-question-text {
  margin: 0 0 0.6rem;
  font-size: 1.05rem;
}

.exercises-page .quiz-question-text--blanks {
  line-height: 1.6;
}

.exercises-page .exercise-blank-input {
  display: inline-block;
  min-width: 70px;
  max-width: 160px;
  padding: 0.35rem 0.6rem;
  margin: 0 0.2rem;
  border-radius: 10px;
  border: 1px dashed rgba(148, 163, 184, 0.9);
  background: #ffffff;
  color: #0f172a;
  font-weight: 600;
  text-align: center;
}

.exercises-page .exercise-blank-input:focus {
  outline: 2px solid rgba(14, 165, 233, 0.25);
  border-color: rgba(14, 165, 233, 0.6);
}

.exercises-page .exercise-answers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.65rem;
}

.exercises-page .exercise-input {
  margin-top: 0.35rem;
}

.exercises-page .exercise-input-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.exercises-page .exercise-input-row--stacked {
  flex-direction: column;
  align-items: stretch;
}

.exercises-page .exercise-input-row .btn-primary {
  flex-shrink: 0;
}

.exercises-page .exercise-input-field {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #0f172a;
}

.exercises-page .exercise-input-field:focus {
  outline: 2px solid rgba(14, 165, 233, 0.25);
  border-color: rgba(14, 165, 233, 0.6);
}

.exercises-page .exercise-feedback {
  margin-top: 0.85rem;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  display: grid;
  gap: 0.35rem;
  font-weight: 600;
}

.exercises-page .exercise-feedback--correct {
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.35);
  color: #166534;
}

.exercises-page .exercise-feedback--wrong {
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.35);
  color: #991b1b;
}

.exercises-page .exercise-feedback-answer {
  font-weight: 500;
  color: inherit;
}

.exercises-page .exercise-feedback-action {
  justify-self: start;
  margin-top: 0.4rem;
}

.exercises-page .quiz-answer {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-align: left;
  padding: 0.85rem 0.95rem;
}

.exercises-page .answer-letter {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(14, 165, 233, 0.18);
  color: #0369a1;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.exercises-page .answer-text {
  flex: 1;
}

.exercises-page .quiz-answer--selected .answer-letter {
  background: rgba(14, 165, 233, 0.3);
  color: #0b1120;
}

.exercises-page .quiz-answer--correct .answer-letter {
  background: rgba(34, 197, 94, 0.3);
  color: #052e16;
}

.exercises-page .quiz-answer--wrong .answer-letter {
  background: rgba(248, 113, 113, 0.3);
  color: #7f1d1d;
}

@media (max-width: 900px) {
  .courses-page .lesson-intro-grid,
  .courses-page .lesson-content-grid {
    grid-template-columns: 1fr;
  }

  .courses-page .lesson-quiz--collapsible > summary {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  .courses-page .lesson-card,
  .courses-page .lesson-quiz-body {
    padding: 0.9rem;
  }

  .courses-page .lesson-quiz-toggle {
    width: 100%;
    justify-content: center;
  }

  .exercises-page .exercise-question-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .exercises-page .exercise-input-row {
    flex-direction: column;
    align-items: stretch;
  }

  .exercises-page .quiz-question-text--blanks {
    overflow-wrap: anywhere;
  }

  .exercises-page .exercise-blank-input {
    min-width: 52px;
    width: 90px;
    max-width: 100%;
    padding: 0.3rem 0.5rem;
  }

  .exercises-page .exercise-answers {
    grid-template-columns: 1fr;
  }
}

/* ===========================
   HOME MOBILE POLISH
   =========================== */

.hero-mobile-card {
  display: none;
  margin: 1.2rem 0;
  padding: 1.1rem 1.1rem 1rem;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(30, 64, 175, 0.9));
  color: #f8fafc;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.18);
}

.hero-mobile-card h3 {
  margin: 0.45rem 0 0.6rem;
  font-size: 1.05rem;
}

.hero-mobile-card ul {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.35rem;
  font-size: 0.9rem;
}

.hero-mobile-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: rgba(34, 211, 238, 0.22);
  color: #e0f2fe;
  border: 1px solid rgba(34, 211, 238, 0.35);
}

@media (max-width: 720px) {
  .hero-mobile-card {
    display: block;
  }

  .beta-info {
    display: none;
  }

  .home-page {
    gap: 2.2rem;
  }

  .home-hero {
    padding: 1.4rem;
    gap: 1.4rem;
    border-radius: 22px;
  }

  .hero-title {
    font-size: 1.8rem;
  }

  .hero-subtitle {
    font-size: 0.92rem;
    margin-bottom: 1rem;
  }

  .home-levels-card {
    padding: 1.1rem;
    border-radius: 18px;
  }

  .home-levels-card h3 {
    font-size: 1.1rem;
  }

  .home-levels-intro {
    margin-bottom: 0.8rem;
    font-size: 0.9rem;
  }

  .home-levels-list {
    gap: 0.6rem;
  }

  .home-levels-item {
    padding: 0.7rem 0.8rem;
  }

  .home-levels-item--upgrade,
  .home-levels-item--soon {
    display: none;
  }

  .home-features {
    padding: 1.2rem;
  }

  .feature-grid {
    grid-template-columns: unset;
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 1fr);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.4rem;
  }

  .feature-card {
    min-width: 220px;
    scroll-snap-align: start;
  }

  .home-preview {
    grid-template-columns: unset;
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 1fr);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.4rem;
  }

  .preview-card {
    min-width: 260px;
    scroll-snap-align: start;
  }

  .home-upgrade .upgrade-card,
  .home-install .install-card,
  .home-cta {
    padding: 1.2rem;
    border-radius: 18px;
  }

  .hero-metrics {
    grid-auto-flow: column;
    grid-auto-columns: minmax(200px, 1fr);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.4rem;
  }

  .metric-card {
    min-width: 200px;
    scroll-snap-align: start;
  }
}

@media (max-width: 600px) {
  .home-page {
    gap: 1.6rem;
  }

  .home-hero {
    background: radial-gradient(circle at 12% 20%, rgba(56, 189, 248, 0.28), transparent 50%),
      radial-gradient(circle at 82% 15%, rgba(34, 197, 94, 0.2), transparent 45%),
      linear-gradient(135deg, #f8fafc 0%, #e0f2fe 100%);
    padding: 0.95rem;
    gap: 1rem;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 0.9rem;
  }

  .hero-actions .btn-primary,
  .hero-actions .btn-outline {
    width: 100%;
    justify-content: center;
  }

  .hero-metrics {
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 1fr);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.4rem;
  }

  .metric-card {
    min-width: 220px;
    scroll-snap-align: start;
  }

  .hero-title {
    font-size: 1.5rem;
  }

  .hero-subtitle {
    font-size: 0.85rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .hero-metrics {
    display: none;
  }

  .hero-mobile-card {
    margin: 0.8rem 0 0.4rem;
    padding: 0.9rem;
  }

  .home-levels-card {
    padding: 0.95rem;
  }

  .home-levels-item {
    gap: 0.7rem;
  }

  .home-levels-item h4 {
    font-size: 0.95rem;
  }

  .home-levels-item p {
    font-size: 0.82rem;
  }

  .home-features {
    padding: 1rem;
  }

  .home-features h2 {
    font-size: 1.25rem;
  }

  .feature-card {
    padding: 0.9rem;
  }

  .home-features .feature-card:nth-child(n + 3) {
    display: none;
  }

  .home-preview {
    display: none;
  }

  .home-upgrade {
    display: none;
  }

  .home-install .install-card {
    padding: 1rem;
  }

  .home-install .install-content h2 {
    font-size: 1.2rem;
  }

  .home-install .install-steps {
    display: none;
  }

  .home-cta {
    padding: 1rem;
  }
}


/* ===========================
   HOME SIMPLE
   =========================== */

.home-simple-page {
  gap: 2.6rem;
}

.home-simple-hero {
  position: relative;
  padding: 2.6rem;
  border-radius: 30px;
  background:
    linear-gradient(120deg, rgba(15, 23, 42, 0.04), transparent 55%),
    radial-gradient(circle at 12% 16%, rgba(56, 189, 248, 0.26), transparent 56%),
    radial-gradient(circle at 88% 18%, rgba(251, 146, 60, 0.2), transparent 54%),
    linear-gradient(135deg, #ffffff 0%, #e0f2fe 50%, #fff7ed 100%);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 26px 60px rgba(15, 23, 42, 0.12);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: 2rem;
}

.home-simple-hero::before {
  content: "";
  position: absolute;
  top: -100px;
  right: -140px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.22), transparent 62%);
  pointer-events: none;
}

.home-simple-hero::after {
  content: "";
  position: absolute;
  bottom: -140px;
  left: -140px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.18), transparent 64%);
  pointer-events: none;
}

.home-simple-hero > * {
  position: relative;
  z-index: 1;
}

.home-hero-content {
  display: grid;
  gap: 0.7rem;
  max-width: 520px;
}

.home-hero-desktop-panel {
  display: grid;
  gap: 0.85rem;
}

.home-hero-desktop-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 0.35rem;
  padding: 0.95rem 1rem;
  border-radius: 18px;
  border: 1px solid rgba(47, 123, 229, 0.2);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.1);
}

.home-hero-desktop-card::before {
  content: "";
  position: absolute;
  top: -30px;
  right: -40px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 123, 229, 0.18), transparent 70%);
  pointer-events: none;
}

.home-hero-desktop-card--primary {
  border-color: rgba(47, 123, 229, 0.35);
  background:
    linear-gradient(135deg, rgba(47, 123, 229, 0.14), rgba(34, 197, 94, 0.12)),
    rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 36px rgba(47, 123, 229, 0.16);
}

.home-hero-desktop-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(47, 123, 229, 0.12);
  color: #2f7be5;
  border: 1px solid rgba(47, 123, 229, 0.3);
}

.home-hero-desktop-card h3 {
  margin: 0;
  font-size: 1rem;
  color: #0f172a;
}

.home-hero-desktop-card p {
  margin: 0;
  font-size: 0.88rem;
  color: #64748b;
}

.home-hero-highlights {
  margin-top: 0.9rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.7rem;
}

.home-hero-highlight {
  --highlight-accent: #2f7be5;
  --highlight-glow: rgba(47, 123, 229, 0.2);
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 0.2rem;
  padding: 0.7rem 0.85rem;
  border-radius: 16px;
  border: 1px solid var(--highlight-glow);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.home-hero-highlight::before {
  content: "";
  position: absolute;
  top: -22px;
  right: -30px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--highlight-glow), transparent 70%);
  pointer-events: none;
}

.home-hero-highlight--accent {
  border-color: rgba(47, 123, 229, 0.32);
  background:
    linear-gradient(135deg, rgba(47, 123, 229, 0.12), rgba(34, 197, 94, 0.12)),
    rgba(255, 255, 255, 0.95);
}

.home-hero-highlight:hover,
.home-hero-highlight:focus-visible {
  transform: translateY(-2px);
  border-color: var(--highlight-accent);
  box-shadow: 0 16px 28px rgba(15, 23, 42, 0.14);
  outline: none;
}

.home-hero-highlight-kicker {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--highlight-accent);
}

.home-hero-highlight strong {
  font-size: 0.95rem;
  color: #0f172a;
}

.home-hero-highlight-note {
  font-size: 0.8rem;
  color: #64748b;
}

.home-hero-highlight--practice {
  --highlight-accent: #0ea5e9;
  --highlight-glow: rgba(14, 165, 233, 0.2);
}

.home-hero-highlight--games {
  --highlight-accent: #14b8a6;
  --highlight-glow: rgba(20, 184, 166, 0.2);
}

.home-hero-highlight--test {
  --highlight-accent: #f97316;
  --highlight-glow: rgba(249, 115, 22, 0.22);
}

.home-hero-highlight--account {
  --highlight-accent: #22c55e;
  --highlight-glow: rgba(34, 197, 94, 0.2);
}

@media (max-width: 900px) {
  .home-hero-desktop-panel {
    display: none;
  }
}

@media (max-width: 900px) {
  .home-hero-highlights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: stretch;
  }
}

@media (max-width: 640px) {
  .home-hero-highlights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin-top: 0.7rem;
    overflow: visible;
    -webkit-overflow-scrolling: touch;
  }

  .home-hero-highlight {
    padding: 0.55rem 0.7rem;
    min-height: 72px;
  }

  .home-hero-highlight-kicker {
    font-size: 0.58rem;
  }

  .home-hero-highlight strong {
    font-size: 0.88rem;
  }

  .home-hero-highlight-note {
    display: none;
  }
}
.home-hero-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.home-hero-tile {
  background: rgba(255, 255, 255, 0.92);
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.1);
  padding: 0.95rem 1.05rem;
  display: grid;
  gap: 0.35rem;
  min-height: 96px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.home-hero-tile:hover,
.home-hero-tile:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(59, 130, 246, 0.35);
  box-shadow: 0 20px 32px rgba(15, 23, 42, 0.16);
  outline: none;
}

.home-hero-tile--wide {
  grid-column: span 2;
}

.home-hero-tile--primary {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.18), rgba(255, 255, 255, 0.96));
  border-color: rgba(14, 165, 233, 0.3);
}

.home-hero-tile--accent {
  background: linear-gradient(135deg, #0f172a, #1d4ed8);
  border-color: rgba(15, 23, 42, 0.6);
  color: #e2e8f0;
}

.home-hero-tile-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}

.home-hero-tile-value {
  font-size: 1.02rem;
  font-weight: 700;
  color: #0f172a;
}

.home-hero-tile-note {
  font-size: 0.85rem;
  color: #475569;
}

.home-hero-tile--accent .home-hero-tile-label,
.home-hero-tile--accent .home-hero-tile-note {
  color: rgba(226, 232, 240, 0.75);
}

.home-hero-tile--accent .home-hero-tile-value {
  color: #ffffff;
}

.home-simple-pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: #0f172a;
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.home-simple-pill:hover,
.home-simple-pill:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.2);
  outline: none;
}

.home-simple-title {
  margin: 0;
  font-size: clamp(2.2rem, 4vw, 3.3rem);
  line-height: 1.05;
  color: #0f172a;
}

.home-simple-subtitle {
  margin: 0;
  color: var(--text-muted);
  max-width: 48ch;
  font-size: 1.05rem;
}

.home-inline-link {
  color: #1d4ed8;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid rgba(37, 99, 235, 0.3);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.home-inline-link:hover,
.home-inline-link:focus-visible {
  color: #1e40af;
  border-color: rgba(30, 64, 175, 0.55);
  outline: none;
}

.home-simple-actions {
  display: grid;
  gap: 1rem;
}

.home-simple-actions-title {
  margin: 0;
  font-size: 1.15rem;
  color: #0f172a;
}

.home-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.home-action-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  align-items: center;
  padding: 1rem 1.1rem;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
  text-decoration: none;
  color: inherit;
  min-height: 90px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.home-action-card:hover {
  transform: translateY(-2px);
  border-color: rgba(14, 165, 233, 0.35);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);
}

.home-action-card:focus-visible {
  outline: 2px solid rgba(14, 165, 233, 0.5);
  outline-offset: 3px;
}

.home-action-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgba(14, 165, 233, 0.12);
  color: #0284c7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.home-action-icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

.home-action-text {
  display: grid;
  gap: 0.2rem;
}

.home-action-title {
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
}

.home-action-subtitle {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}

.home-action-card--primary {
  background: linear-gradient(135deg, rgba(224, 242, 254, 0.85), #ffffff);
  border-color: rgba(14, 165, 233, 0.32);
}

.home-action-card--primary .home-action-icon {
  background: rgba(14, 165, 233, 0.2);
  color: #0369a1;
}

.home-simple-install-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1.2rem;
  align-items: center;
  padding: 1.3rem 1.5rem;
  border-radius: 22px;
  background: linear-gradient(135deg, #ffffff, #f1f5ff);
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.1);
}

.home-simple-install-logo {
  width: 70px;
  height: 70px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 22px rgba(15, 23, 42, 0.12);
}

.home-simple-install-logo img {
  width: 70%;
  height: 70%;
  object-fit: contain;
}

.home-simple-install-text h2 {
  margin: 0 0 0.35rem;
  font-size: 1.2rem;
}

.home-simple-install-text p {
  margin: 0;
  color: var(--text-muted);
}

.home-simple-install-action {
  justify-self: end;
}

.home-simple-install-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(14, 165, 233, 0.12);
  color: #0369a1;
  border: 1px solid rgba(14, 165, 233, 0.3);
  margin-bottom: 0.5rem;
}

.home-simple-install-note {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

@media (max-width: 900px) {
  .home-simple-hero {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
    padding: 1.7rem;
  }

  .home-hero-content {
    justify-items: center;
  }

  .home-hero-tiles {
    grid-template-columns: 1fr;
    width: min(100%, 420px);
    text-align: left;
  }

  .home-simple-subtitle {
    max-width: 40ch;
  }

  .home-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-showcase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-showcase-install {
    display: grid;
  }

  .home-simple-install-card {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }

  .home-simple-install-action {
    justify-self: center;
  }
}

@media (max-width: 640px) {
  .home-simple-hero {
    padding: 1.2rem;
    border-radius: 20px;
  }

  .home-simple-title {
    font-size: 1.8rem;
  }

  .home-simple-subtitle {
    font-size: 0.92rem;
  }

  .home-hero-tiles {
    width: 100%;
  }

  .home-hero-tile {
    min-height: 84px;
  }

  .home-action-grid {
    grid-template-columns: 1fr;
  }

  .home-action-card {
    min-height: 76px;
  }

  .home-action-subtitle {
    display: none;
  }

  .home-simple-install-card {
    padding: 1rem;
  }

  .home-simple-install-logo {
    width: 62px;
    height: 62px;
  }

  .home-simple-install-action {
    width: 100%;
  }

  .home-simple-install-action .btn-primary {
    width: 100%;
    justify-content: center;
  }

  .home-simple-showcase {
    padding: 1.1rem;
    border-radius: 20px;
    gap: 0.9rem;
    text-align: center;
    background:
      linear-gradient(120deg, rgba(15, 23, 42, 0.04), transparent 55%),
      radial-gradient(circle at 12% 16%, rgba(56, 189, 248, 0.22), transparent 58%),
      radial-gradient(circle at 88% 18%, rgba(251, 146, 60, 0.18), transparent 56%),
      linear-gradient(135deg, #ffffff 0%, #e0f2fe 50%, #fff7ed 100%);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 20px 44px rgba(15, 23, 42, 0.12);
  }

  .home-showcase-header {
    text-align: center;
  }

  .home-showcase-grid {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .home-showcase-card {
    min-height: auto;
    border-radius: 18px;
    padding: 0.9rem 1rem;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(148, 163, 184, 0.25);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.1);
  }

  .home-showcase-card::before {
    content: none;
  }

  .home-showcase-card p {
    display: none;
  }

  .home-showcase-card-tag {
    font-size: 0.62rem;
    background: rgba(15, 23, 42, 0.08);
    color: #64748b;
  }

  .home-showcase-card h3 {
    font-size: 0.98rem;
  }

  .home-showcase-card-link {
    font-size: 0.82rem;
  }

  .home-showcase-install {
    grid-template-columns: 1fr;
    text-align: center;
    background:
      linear-gradient(135deg, rgba(47, 123, 229, 0.16), rgba(34, 197, 94, 0.12)),
      #ffffff;
    border: 1px solid rgba(47, 123, 229, 0.28);
    box-shadow: 0 16px 32px rgba(47, 123, 229, 0.18);
  }

  .home-showcase-install-text {
    justify-items: center;
  }

  .home-showcase-install-action {
    justify-self: stretch;
    justify-items: stretch;
  }

  .home-showcase-install-action .btn-primary {
    width: 100%;
    justify-content: center;
  }

  .home-install-choice-buttons {
    justify-content: center;
  }

  .home-install-steps {
    text-align: left;
  }
}

@media (max-width: 900px) {
  .home-simple-pill {
    align-self: center;
  }

  .home-simple-actions-title {
    text-align: center;
  }
}

/* ===========================
   HOME SIMPLE - MODERN PLUS
   =========================== */

.home-simple-page {
  gap: 2.8rem;
}

.home-simple-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 0.6rem;
}

.home-primary-cta {
  font-size: 1.05rem;
  padding: 0.9rem 1.6rem;
  min-height: 52px;
}

.home-simple-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.home-simple-badge {
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  background: rgba(15, 23, 42, 0.06);
  color: #0f172a;
  border: 1px solid rgba(148, 163, 184, 0.35);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.home-simple-badge:hover,
.home-simple-badge:focus-visible {
  background: rgba(15, 23, 42, 0.12);
  border-color: rgba(59, 130, 246, 0.35);
  outline: none;
}

.home-simple-showcase {
  display: none;
  gap: 1.2rem;
  padding: 1.8rem;
  border-radius: 28px;
  background:
    linear-gradient(120deg, rgba(15, 23, 42, 0.04), transparent 60%),
    linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid rgba(148, 163, 184, 0.2);
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.12);
}

.home-showcase-header {
  display: grid;
  gap: 0.35rem;
}

.home-showcase-header h2 {
  margin: 0;
  font-size: 1.25rem;
  color: #0f172a;
}

.home-showcase-header p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.home-showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.home-showcase-card {
  --accent: #0ea5e9;
  text-decoration: none;
  color: inherit;
  padding: 1.05rem 1.1rem;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-top: 3px solid var(--accent);
  background: #ffffff;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.1);
  display: grid;
  gap: 0.35rem;
  min-height: 170px;
  position: relative;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.home-showcase-card:hover,
.home-showcase-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: 0 20px 34px rgba(15, 23, 42, 0.16);
  outline: none;
}

.home-showcase-card--lessons {
  --accent: #0ea5e9;
}

.home-showcase-card--practice {
  --accent: #22c55e;
}

.home-showcase-card--games {
  --accent: #6366f1;
}

.home-showcase-card-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0f172a;
  background: rgba(15, 23, 42, 0.06);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  width: fit-content;
}

.home-showcase-card h3 {
  margin: 0;
  font-size: 1.05rem;
  color: #0f172a;
}

.home-showcase-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.home-showcase-card-link {
  font-weight: 600;
  color: var(--accent);
}

.home-showcase-install {
  display: none;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 1rem;
  padding: 1.15rem 1.2rem;
  border-radius: 18px;
  border: 1px solid rgba(47, 123, 229, 0.35);
  background:
    linear-gradient(135deg, rgba(47, 123, 229, 0.14), rgba(34, 197, 94, 0.12)),
    #ffffff;
  box-shadow: 0 18px 36px rgba(47, 123, 229, 0.16);
  position: relative;
  overflow: hidden;
}

.home-showcase-install::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -40px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 123, 229, 0.35), transparent 70%);
  pointer-events: none;
}

.home-showcase-install::after {
  content: "";
  position: absolute;
  bottom: -80px;
  left: -50px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 197, 94, 0.3), transparent 72%);
  pointer-events: none;
}

.home-showcase-install-text {
  display: grid;
  gap: 0.2rem;
}

.home-showcase-install-action {
  justify-self: end;
  display: grid;
  gap: 0.6rem;
  justify-items: start;
  text-align: left;
}

.home-showcase-install-action .btn-primary {
  background: linear-gradient(135deg, #2f7be5, #22c55e);
  border-color: transparent;
  box-shadow: 0 12px 24px rgba(47, 123, 229, 0.25);
}

.home-showcase-install-text h3 {
  margin: 0;
  font-size: 1rem;
}

.home-showcase-install-text p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.home-showcase-install-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(120deg, #2f7be5, #22c55e);
  color: #ffffff;
  border: none;
  box-shadow: 0 10px 18px rgba(47, 123, 229, 0.25);
  width: fit-content;
}

.home-showcase-install-note {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.home-install-choice {
  display: grid;
  gap: 0.4rem;
}

.home-install-choice-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.home-install-choice-btn {
  border: 1px solid rgba(47, 123, 229, 0.4);
  background: rgba(255, 255, 255, 0.95);
  color: #0f172a;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.home-install-choice-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(47, 123, 229, 0.16);
  border-color: rgba(47, 123, 229, 0.7);
}

.home-install-choice-btn.is-active {
  border-color: rgba(47, 123, 229, 0.8);
  background: linear-gradient(120deg, rgba(47, 123, 229, 0.18), rgba(34, 197, 94, 0.16));
  color: #0f172a;
  box-shadow: 0 12px 20px rgba(47, 123, 229, 0.2);
}

.home-install-steps {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.35rem;
  color: #475569;
  font-size: 0.88rem;
  line-height: 1.45;
}

.home-install-steps strong {
  color: #0f172a;
  font-weight: 600;
}

.home-install-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin: 0 0.25rem;
  border-radius: 6px;
  border: 1px solid rgba(47, 123, 229, 0.35);
  background: rgba(255, 255, 255, 0.95);
  color: #0f172a;
  vertical-align: middle;
}

.home-install-icon svg {
  width: 14px;
  height: 14px;
}

.home-install-icon--solid {
  background: rgba(15, 23, 42, 0.08);
}

@media (max-width: 900px) {
  .home-showcase-install {
    display: none;
  }
}

@media (max-width: 640px) {
  .home-simple-showcase {
    display: grid;
    padding: 1.1rem;
    border-radius: 20px;
    gap: 0.9rem;
    text-align: center;
    background:
      linear-gradient(120deg, rgba(15, 23, 42, 0.04), transparent 55%),
      radial-gradient(circle at 12% 16%, rgba(56, 189, 248, 0.22), transparent 58%),
      radial-gradient(circle at 88% 18%, rgba(251, 146, 60, 0.18), transparent 56%),
      linear-gradient(135deg, #ffffff 0%, #e0f2fe 50%, #fff7ed 100%);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 20px 44px rgba(15, 23, 42, 0.12);
  }

  .home-showcase-header {
    text-align: center;
  }

  .home-showcase-grid {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .home-showcase-card {
    min-height: auto;
    border-radius: 18px;
    padding: 0.9rem 1rem;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(148, 163, 184, 0.25);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.1);
  }

  .home-showcase-card::before {
    content: none;
  }

  .home-showcase-card p {
    display: none;
  }

  .home-showcase-card-tag {
    font-size: 0.62rem;
    background: rgba(15, 23, 42, 0.08);
    color: #64748b;
  }

  .home-showcase-card h3 {
    font-size: 0.98rem;
  }

  .home-showcase-card-link {
    font-size: 0.82rem;
  }

  .home-showcase-install {
    display: grid;
    grid-template-columns: 1fr;
    text-align: center;
    padding: 1.25rem 1.1rem;
    border-radius: 22px;
    background:
      linear-gradient(135deg, rgba(47, 123, 229, 0.18), rgba(34, 197, 94, 0.14)),
      #ffffff;
    border: 1px solid rgba(47, 123, 229, 0.32);
    box-shadow: 0 16px 32px rgba(47, 123, 229, 0.18);
  }

  .home-showcase-install-text {
    justify-items: center;
  }

  .home-showcase-install-action {
    justify-self: stretch;
    justify-items: stretch;
  }

  .home-showcase-install-action .btn-primary {
    width: 100%;
    justify-content: center;
  }

  .home-install-choice-buttons {
    justify-content: center;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
  }

  .home-install-steps {
    text-align: left;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(47, 123, 229, 0.16);
    border-radius: 14px;
    padding: 0.6rem 0.7rem 0.6rem 1.5rem;
  }

  .home-install-choice-btn {
    padding: 0.5rem 0.9rem;
    font-size: 0.9rem;
  }
}

.home-simple-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

.home-panel {
  background: #ffffff;
  border-radius: 20px;
  padding: 1.2rem 1.3rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
  display: grid;
  gap: 1rem;
}

.home-panel-header {
  display: grid;
  gap: 0.4rem;
}

.home-panel-pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: #0f172a;
  color: #ffffff;
}

.home-panel-pill--accent {
  background: rgba(14, 165, 233, 0.12);
  color: #0369a1;
  border: 1px solid rgba(14, 165, 233, 0.35);
}

.home-panel h2 {
  margin: 0;
  font-size: 1.1rem;
  color: #0f172a;
}

.home-panel p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.home-panel-steps {
  display: grid;
  gap: 0.7rem;
}

.home-panel-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: center;
  text-decoration: none;
  color: inherit;
  padding: 0.35rem 0.45rem;
  border-radius: 14px;
  transition: transform 0.16s ease, background 0.16s ease;
}

.home-panel-step:hover,
.home-panel-step:focus-visible {
  background: rgba(15, 23, 42, 0.04);
  transform: translateX(2px);
  outline: none;
}

.home-panel-step-number {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #0f172a;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.home-panel-step strong {
  display: block;
  font-size: 0.95rem;
  color: #0f172a;
}

.home-panel-step p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.home-panel-levels {
  display: grid;
  gap: 0.6rem;
}

.home-panel-level {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.65rem 0.8rem;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.home-panel-level-main {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.home-panel-level-code {
  background: #0f172a;
  color: #ffffff;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.home-panel-level-text {
  font-size: 0.9rem;
  font-weight: 600;
  color: #0f172a;
}

.home-panel-level-link {
  text-decoration: none;
  font-weight: 600;
  font-size: 0.8rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(14, 165, 233, 0.5);
  color: #0369a1;
  background: #ffffff;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.home-panel-level-link:hover {
  background: rgba(14, 165, 233, 0.12);
  border-color: rgba(14, 165, 233, 0.7);
}

.home-panel-level--soon {
  opacity: 0.7;
}

.home-panel-level-soon {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}

.home-simple-highlights {
  display: grid;
  gap: 1rem;
}

.home-highlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.home-highlight-card {
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid #e2e8f0;
  padding: 1rem 1.1rem;
  display: grid;
  gap: 0.5rem;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.home-highlight-card:hover,
.home-highlight-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(59, 130, 246, 0.28);
  box-shadow: 0 18px 32px rgba(15, 23, 42, 0.14);
  outline: none;
}

.home-highlight-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(14, 165, 233, 0.12);
  color: #0284c7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.home-highlight-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.home-highlight-card h3 {
  margin: 0;
  font-size: 1rem;
  color: #0f172a;
}

.home-highlight-card p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .home-simple-hero-actions {
    justify-content: center;
  }

  .home-simple-badges {
    justify-content: center;
  }

  .home-simple-panels {
    grid-template-columns: 1fr;
  }

  .home-panel-pill {
    align-self: center;
  }
}

@media (max-width: 640px) {
  .home-simple-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .home-simple-hero-actions .btn-primary,
  .home-simple-hero-actions .btn-outline {
    width: 100%;
    justify-content: center;
  }

  .home-primary-cta {
    font-size: 1rem;
    padding: 0.85rem 1.2rem;
  }

  .home-panel-level {
    flex-direction: column;
    align-items: flex-start;
  }

  .home-panel-level-link {
    align-self: flex-start;
  }

  .home-highlight-grid {
    grid-template-columns: 1fr;
  }
}

/* ===========================
   MOBILE BOTTOM NAV
   =========================== */

.mobile-bottom-nav {
  position: fixed;
  left: 50%;
  bottom: calc(6px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(96vw, 600px);
  display: none;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 0.6rem 0.7rem;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(219, 234, 254, 0.96));
  border: 1px solid rgba(59, 130, 246, 0.32);
  box-shadow: 0 22px 50px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.7) inset;
  backdrop-filter: blur(18px);
  z-index: 80;
}

.mobile-nav-link {
  display: grid;
  place-items: center;
  gap: 0.25rem;
  padding: 0.65rem 0.35rem;
  border-radius: 18px;
  text-decoration: none;
  color: #0f172a;
  font-size: 0.72rem;
  font-weight: 700;
  min-height: 60px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(226, 232, 240, 0.9);
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease,
    box-shadow 0.15s ease;
}

.mobile-nav-link:hover {
  background: rgba(14, 165, 233, 0.16);
  border-color: rgba(14, 165, 233, 0.35);
  color: #0f172a;
}

.mobile-nav-link--active {
  background: linear-gradient(135deg, #0f172a, #1d4ed8);
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.25);
  transform: translateY(-1px);
  border-color: rgba(15, 23, 42, 0.6);
}

.mobile-nav-link--active .mobile-nav-icon {
  color: #ffffff;
}

.mobile-nav-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mobile-nav-icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

.mobile-nav-text {
  line-height: 1.1;
}

@media (max-width: 900px) {
  .mobile-bottom-nav {
    display: grid;
  }

  .app-body {
    padding-bottom: 150px;
  }
}

@media (max-width: 380px) {
  .mobile-nav-text {
    font-size: 0.65rem;
  }
}




/* ===========================
   COURSES + EXERCISES MENU REFRESH
   =========================== */

.courses-layout--stacked {
  display: grid;
  gap: 1.6rem;
}

.courses-layout--stacked .courses-lesson-content {
  width: 100%;
  padding: 1.6rem;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
}

.lesson-menu-bar {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 1.2rem;
  padding: 1.4rem 1.6rem;
  border-radius: 24px;
  background:
    radial-gradient(circle at 0% 0%, rgba(59, 130, 246, 0.15), transparent 45%),
    radial-gradient(circle at 100% 0%, rgba(34, 197, 94, 0.12), transparent 40%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(241, 245, 255, 0.92));
  border: 1px solid rgba(59, 130, 246, 0.18);
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.12);
}

.lesson-menu-bar::before {
  content: "";
  position: absolute;
  top: -50px;
  right: -80px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.22), transparent 65%);
  opacity: 0.6;
  pointer-events: none;
}

.lesson-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.lesson-menu-header > div {
  display: grid;
  gap: 0.2rem;
}

.lesson-menu-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: #0f172a;
  color: #ffffff;
}

.lesson-menu-pill--accent {
  background: rgba(14, 165, 233, 0.15);
  color: #0369a1;
  border: 1px solid rgba(14, 165, 233, 0.35);
}

.lesson-menu-title {
  margin: 0.35rem 0 0;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #0f172a;
}

.lesson-menu-hint {
  display: inline-flex;
  align-items: center;
  margin-top: 0.25rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #0f172a;
  background: rgba(14, 165, 233, 0.12);
  border: 1px solid rgba(14, 165, 233, 0.2);
}

.lesson-menu-action {
  white-space: nowrap;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(14, 165, 233, 0.35);
  background: rgba(255, 255, 255, 0.9);
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.lesson-menu-action:hover {
  background: rgba(14, 165, 233, 0.12);
  border-color: rgba(14, 165, 233, 0.55);
}

.lesson-menu-scroll {
  --lesson-chip-height: 96px;
  --lesson-chip-gap: 0.75rem;
  display: flex;
  gap: var(--lesson-chip-gap);
  overflow-x: auto;
  padding-bottom: 0.6rem;
  scroll-snap-type: x mandatory;
  scroll-padding: 0.4rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(59, 130, 246, 0.5) transparent;
  -webkit-overflow-scrolling: touch;
  transition: max-height 0.35s ease;
}

.lesson-menu-scroll::-webkit-scrollbar {
  height: 6px;
}

.lesson-menu-scroll::-webkit-scrollbar-thumb {
  background: rgba(59, 130, 246, 0.35);
  border-radius: 999px;
}

.lesson-menu-scroll--collapsed {
  max-height: calc((var(--lesson-chip-height) * 3) + (var(--lesson-chip-gap) * 2));
  overflow: hidden;
}

.lesson-menu-scroll--expanded {
  max-height: 1200px;
}

.lesson-menu-toggle {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(14, 165, 233, 0.35);
  background: rgba(14, 165, 233, 0.12);
  color: #0f172a;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.lesson-menu-toggle::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.lesson-menu-toggle:hover {
  background: rgba(14, 165, 233, 0.2);
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.12);
  transform: translateY(-1px);
}

.lesson-menu-toggle--expanded::after {
  transform: rotate(-135deg);
}

.lesson-chip {
  position: relative;
  display: grid;
  gap: 0.3rem;
  align-items: center;
  padding: 0.75rem 0.95rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(148, 163, 184, 0.25);
  min-width: 190px;
  min-height: 86px;
  text-align: left;
  cursor: pointer;
  scroll-snap-align: start;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.lesson-chip:hover {
  transform: translateY(-1px);
  border-color: rgba(14, 165, 233, 0.45);
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.12);
}

.lesson-chip:focus-visible {
  outline: 3px solid rgba(14, 165, 233, 0.45);
  outline-offset: 2px;
}

.lesson-chip--active {
  background: linear-gradient(135deg, #0f172a, #1d4ed8);
  color: #ffffff;
  border-color: rgba(15, 23, 42, 0.6);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.24);
}

.lesson-chip--done {
  border-color: rgba(34, 197, 94, 0.5);
}

.lesson-chip--done::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.15);
}

.lesson-chip--active .lesson-chip-number {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.lesson-chip-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  color: #0f172a;
  font-size: 0.8rem;
  font-weight: 700;
}

.lesson-chip-title {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
  color: inherit;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.2em;
}

.lesson-chip-info {
  display: grid;
  gap: 0.2rem;
}

.lesson-chip-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}

.lesson-chip--active .lesson-chip-label {
  color: rgba(255, 255, 255, 0.8);
}

.courses-page .courses-header,
.exercises-page .courses-header {
  margin-bottom: 1.2rem;
}

.courses-page .courses-intro,
.exercises-page .courses-intro {
  margin: 0.35rem 0 0;
  color: #64748b;
  font-size: 0.95rem;
  max-width: 68ch;
}

.courses-level-description {
  margin: 0 0 1.2rem;
  color: #64748b;
  font-size: 0.9rem;
}

@media (min-width: 900px) {
  .lesson-menu-scroll {
    --lesson-chip-gap: 0.9rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--lesson-chip-gap);
    overflow-x: visible;
    padding-bottom: 0;
  }

  .lesson-chip {
    min-width: 0;
  }
}

@media (max-width: 900px) {
  .lesson-menu-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .lesson-menu-action {
    width: 100%;
    justify-content: center;
  }

  .courses-page .courses-intro,
  .exercises-page .courses-intro {
    display: none;
  }

  .courses-level-description {
    display: none;
  }
}

@media (max-width: 768px) {
  .courses-layout--stacked {
    gap: 1.2rem;
  }

  .lesson-menu-hint {
    font-size: 1.05rem;
    font-weight: 700;
    padding: 0.35rem 0.85rem;
  }

  .lesson-menu-scroll {
    --lesson-chip-gap: 0.85rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--lesson-chip-gap);
    overflow: visible;
    padding-bottom: 0;
    scroll-snap-type: none;
  }

  .lesson-chip {
    min-width: 0;
    min-height: 96px;
  }
}

@media (max-width: 640px) {
  .courses-layout--stacked .courses-lesson-content {
    padding: 1.1rem;
    border-radius: 18px;
  }

  .lesson-menu-bar {
    padding: 1rem;
    border-radius: 18px;
  }

  .lesson-chip {
    min-width: 0;
    min-height: 96px;
  }

  .lesson-chip-number {
    width: 34px;
    height: 34px;
    font-size: 0.85rem;
  }
}

@media (max-width: 520px) {
  .lesson-menu-scroll {
    grid-template-columns: 1fr;
  }

  .lesson-chip {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.7rem;
    min-height: 72px;
    padding: 0.65rem 0.85rem;
  }

  .lesson-chip-title {
    min-height: 0;
  }

  .lesson-menu-toggle {
    width: 100%;
    justify-content: center;
  }
}

/* ===========================
   DARK MODE SUPPORT
   =========================== */


/* ===========================
   COURSES + EXERCISES REDESIGN
   =========================== */

.courses-page,
.exercises-page {
  --course-ink: #0b1220;
  --course-muted: #475569;
  --course-accent: #0ea5e9;
  --course-accent-strong: #2563eb;
  --course-accent-soft: rgba(14, 165, 233, 0.16);
  --course-warm: #22d3ee;
  --course-border: rgba(148, 163, 184, 0.35);
  --course-shadow: 0 24px 50px rgba(15, 23, 42, 0.14);
  --course-radius: 28px;
  --course-bg: #e7f0ff;
  --course-surface: #f6f9ff;
  --course-panel: #eef6ff;
  --course-card: #ffffff;
  --course-chip: #f5f9ff;
  --course-chip-active: linear-gradient(135deg, #0ea5e9, #2563eb);
  --course-focus: rgba(37, 99, 235, 0.45);

  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(3.2rem, 5vw, 4.4rem) clamp(1.4rem, 3.5vw, 2.6rem) 3rem;
  border-radius: 34px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background:
    radial-gradient(circle at 10% 12%, rgba(14, 165, 233, 0.16), transparent 45%),
    radial-gradient(circle at 92% 8%, rgba(37, 99, 235, 0.14), transparent 46%),
    linear-gradient(180deg, var(--course-bg) 0%, var(--course-surface) 100%);
  box-shadow: 0 34px 70px rgba(15, 23, 42, 0.14);
  overflow: visible;
  position: relative;
  isolation: isolate;
}

.courses-page::before,
.exercises-page::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 26px;
  border: 1px dashed rgba(148, 163, 184, 0.4);
  background-image: radial-gradient(rgba(14, 165, 233, 0.12) 1px, transparent 0);
  background-size: 18px 18px;
  opacity: 0.6;
  pointer-events: none;
  z-index: -1;
}

.courses-page::after,
.exercises-page::after {
  content: "";
  position: absolute;
  right: -80px;
  top: -120px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.24), transparent 65%);
  opacity: 0.8;
  pointer-events: none;
  z-index: -1;
}

.courses-page .courses-header,
.exercises-page .courses-header {
  background: var(--course-surface);
  border: 1px solid var(--course-border);
  border-radius: 24px;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);
  padding: clamp(1.4rem, 2.5vw, 2rem);
  position: relative;
  overflow: hidden;
}

.courses-page .courses-header::before,
.exercises-page .courses-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(14, 165, 233, 0.12), transparent 60%);
  pointer-events: none;
}

.courses-page .courses-header::after,
.exercises-page .courses-header::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 100%;
  background: linear-gradient(180deg, var(--course-accent), var(--course-warm));
  opacity: 0.9;
  pointer-events: none;
}

.courses-page .courses-header .breadcrumb,
.exercises-page .courses-header .breadcrumb {
  background: #0f172a;
  color: #e2e8f0;
  letter-spacing: 0.2em;
}

.courses-page .courses-header h1,
.exercises-page .courses-header h1 {
  color: var(--course-ink);
  font-size: clamp(2rem, 3.4vw, 3rem);
}

.courses-page .courses-intro,
.exercises-page .courses-intro {
  color: var(--course-muted);
}

.courses-page .courses-level-tabs,
.exercises-page .courses-level-tabs {
  margin: 1.4rem 0 1.2rem;
  padding: 0;
  gap: 0.6rem;
  border: none;
  background: transparent;
  box-shadow: none;
}

.courses-page .courses-level-tab,
.exercises-page .courses-level-tab {
  border-radius: 14px;
  background: var(--course-card);
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: var(--course-ink);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
  font-weight: 700;
}

.courses-page .courses-level-tab:hover,
.exercises-page .courses-level-tab:hover {
  border-color: rgba(14, 165, 233, 0.4);
  box-shadow: 0 12px 22px rgba(37, 99, 235, 0.2);
}

.courses-page .courses-level-tab--active:not(.courses-level-tab--upgrade):not(.courses-level-tab--coming),
.exercises-page .courses-level-tab--active:not(.courses-level-tab--upgrade):not(.courses-level-tab--coming) {
  background: var(--course-chip-active);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 16px 28px rgba(37, 99, 235, 0.28);
}

.courses-page .courses-level-tab--active.courses-level-tab--upgrade,
.exercises-page .courses-level-tab--active.courses-level-tab--upgrade {
  background: rgba(14, 165, 233, 0.12);
  color: var(--course-ink);
  border-color: rgba(14, 165, 233, 0.4);
  box-shadow: 0 12px 22px rgba(14, 165, 233, 0.2);
}

.courses-page .courses-level-tab--active.courses-level-tab--coming,
.exercises-page .courses-level-tab--active.courses-level-tab--coming {
  background: rgba(37, 99, 235, 0.12);
  color: var(--course-ink);
  border-color: rgba(37, 99, 235, 0.4);
  box-shadow: 0 12px 22px rgba(37, 99, 235, 0.2);
}

.courses-page .badge,
.exercises-page .badge {
  border-radius: 999px;
  font-size: 0.64rem;
  padding: 0.2rem 0.5rem;
}

.courses-page .badge-free,
.exercises-page .badge-free {
  background: rgba(14, 165, 233, 0.12);
  color: #0369a1;
  border-color: rgba(14, 165, 233, 0.35);
}

.courses-page .badge-unlocked,
.exercises-page .badge-unlocked {
  background: rgba(34, 197, 94, 0.18);
  color: #166534;
  border-color: rgba(34, 197, 94, 0.35);
}

.courses-page .badge-upgrade,
.exercises-page .badge-upgrade {
  background: rgba(249, 115, 22, 0.16);
  color: #9a3412;
  border-color: rgba(249, 115, 22, 0.35);
}

.courses-page .badge-locked,
.exercises-page .badge-locked {
  background: rgba(248, 113, 113, 0.18);
  color: #991b1b;
  border-color: rgba(248, 113, 113, 0.35);
}

.courses-page .level-select,
.exercises-page .level-select {
  max-width: 520px;
  margin: 1.2rem 0 1rem;
}

.courses-page .level-select-label,
.exercises-page .level-select-label {
  color: var(--course-ink);
}

.courses-page .level-select-arrow,
.exercises-page .level-select-arrow {
  border-right-color: var(--course-ink);
  border-bottom-color: var(--course-ink);
}

.courses-page .level-select-trigger,
.exercises-page .level-select-trigger {
  background: var(--course-card);
  border: 1px solid var(--course-border);
  border-left: 4px solid var(--course-accent);
  border-radius: 16px;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.14);
}

.courses-page .level-select-menu,
.exercises-page .level-select-menu {
  background: var(--course-card);
  border: 1px solid var(--course-border);
  border-radius: 16px;
  box-shadow: 0 18px 32px rgba(15, 23, 42, 0.18);
}

.courses-page .courses-layout--stacked,
.exercises-page .courses-layout--stacked {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.8rem);
  align-items: start;
}

.courses-page .lesson-menu-bar,
.exercises-page .lesson-menu-bar {
  padding: 1rem 1.1rem;
  border-radius: 20px;
  background: var(--course-panel);
  border: 1px solid var(--course-border);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.12);
  position: relative;
  overflow: hidden;
}

.courses-page .lesson-menu-bar::before,
.exercises-page .lesson-menu-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(14, 165, 233, 0.08) 1px, transparent 0);
  background-size: 16px 16px;
  opacity: 0.5;
  pointer-events: none;
}

.courses-page .lesson-menu-bar::after,
.exercises-page .lesson-menu-bar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--course-accent), var(--course-warm));
  opacity: 0.7;
  pointer-events: none;
}

.courses-page .lesson-menu-title,
.exercises-page .lesson-menu-title {
  color: var(--course-ink);
}

.courses-page .lesson-menu-pill,
.exercises-page .lesson-menu-pill {
  background: #0f172a;
  color: #e2e8f0;
}

.courses-page .lesson-menu-pill--accent,
.exercises-page .lesson-menu-pill--accent {
  background: rgba(14, 165, 233, 0.14);
  color: #0369a1;
  border: 1px solid rgba(14, 165, 233, 0.35);
}

.courses-page .lesson-menu-hint,
.exercises-page .lesson-menu-hint {
  background: rgba(14, 165, 233, 0.12);
  color: #0369a1;
  border: 1px solid rgba(14, 165, 233, 0.35);
}

.courses-page .lesson-menu-action,
.exercises-page .lesson-menu-action {
  background: var(--course-card);
  color: var(--course-ink);
  border-color: rgba(14, 165, 233, 0.35);
  box-shadow: none;
}

.courses-page .lesson-menu-scroll,
.exercises-page .lesson-menu-scroll {
  --lesson-chip-height: 74px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.2rem 0.1rem 0.1rem;
  scroll-snap-type: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(14, 165, 233, 0.45) transparent;
}

.courses-page .lesson-menu-scroll::-webkit-scrollbar,
.exercises-page .lesson-menu-scroll::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.courses-page .lesson-menu-scroll::-webkit-scrollbar-thumb,
.exercises-page .lesson-menu-scroll::-webkit-scrollbar-thumb {
  background: rgba(14, 165, 233, 0.4);
  border-radius: 999px;
}

.courses-page .lesson-menu-scroll--collapsed,
.exercises-page .lesson-menu-scroll--collapsed {
  max-height: calc((var(--lesson-chip-height) * 3) + (0.75rem * 2));
  overflow: hidden;
}

.courses-page .lesson-menu-scroll--expanded,
.exercises-page .lesson-menu-scroll--expanded {
  max-height: 70vh;
}

.courses-page .lesson-chip,
.exercises-page .lesson-chip {
  background: var(--course-chip);
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 16px;
  width: 100%;
  min-width: 0;
  min-height: var(--lesson-chip-height);
  padding: 0.65rem 0.75rem 0.65rem 0.85rem;
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 0.75rem;
  text-align: left;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.12);
  position: relative;
}

.courses-page .lesson-chip::before,
.exercises-page .lesson-chip::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 0;
  width: 4px;
  border-radius: 999px;
  background: rgba(14, 165, 233, 0.5);
}

.courses-page .lesson-chip--active,
.exercises-page .lesson-chip--active {
  background: var(--course-chip-active);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 16px 28px rgba(37, 99, 235, 0.28);
}

.courses-page .lesson-chip--active::before,
.exercises-page .lesson-chip--active::before {
  background: rgba(255, 255, 255, 0.6);
}

.courses-page .lesson-chip-number,
.exercises-page .lesson-chip-number {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(14, 165, 233, 0.14);
  color: var(--course-accent);
  font-size: 0.85rem;
}

.courses-page .lesson-chip--active .lesson-chip-number,
.exercises-page .lesson-chip--active .lesson-chip-number {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.courses-page .lesson-chip--done::after,
.exercises-page .lesson-chip--done::after {
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2);
}

.courses-page .lesson-chip-title,
.exercises-page .lesson-chip-title {
  font-size: 0.95rem;
  min-height: 0;
}

.courses-page .lesson-menu-toggle,
.exercises-page .lesson-menu-toggle {
  border-radius: 12px;
  border: 1px solid rgba(14, 165, 233, 0.4);
  background: rgba(14, 165, 233, 0.12);
  box-shadow: none;
}

.courses-page .courses-lesson-content,
.exercises-page .courses-lesson-content {
  border-radius: 24px;
  border: 1px solid var(--course-border);
  background: var(--course-card);
  box-shadow: var(--course-shadow);
  position: relative;
  overflow: hidden;
}

.courses-page .courses-lesson-content::before,
.exercises-page .courses-lesson-content::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--course-accent), var(--course-warm));
}

.courses-page .lesson-goal,
.exercises-page .lesson-goal {
  background: rgba(14, 165, 233, 0.1);
  border: 1px solid rgba(14, 165, 233, 0.3);
  box-shadow: 0 10px 20px rgba(14, 165, 233, 0.12);
}

.courses-page .lesson-goal-label,
.exercises-page .lesson-goal-label {
  color: var(--course-accent);
}

.courses-page .lesson-summary,
.exercises-page .lesson-summary,
.courses-page .lesson-quiz,
.exercises-page .lesson-quiz {
  border-radius: 16px;
  border: 1px solid var(--course-border);
  background: var(--course-surface);
  box-shadow: 0 12px 22px rgba(15, 23, 42, 0.12);
}

.courses-page .quiz-question-card,
.exercises-page .quiz-question-card {
  border-radius: 18px;
  border: 1px solid var(--course-border);
  background: var(--course-card);
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.12);
  border-left: 4px solid var(--course-accent);
}

.exercises-page .quiz-question-card {
  border-left-color: var(--course-accent-strong);
  background: linear-gradient(135deg, var(--course-card), var(--course-surface));
}

.courses-page .quiz-answer,
.exercises-page .quiz-answer {
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: var(--course-card);
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.1);
}

.courses-page .quiz-answer:hover,
.exercises-page .quiz-answer:hover {
  border-color: rgba(14, 165, 233, 0.45);
  box-shadow: 0 12px 22px rgba(37, 99, 235, 0.18);
}

.courses-page .quiz-answer--selected,
.exercises-page .quiz-answer--selected {
  background: var(--course-accent-soft);
  border-color: rgba(14, 165, 233, 0.55);
}

.courses-page .quiz-answer--correct,
.exercises-page .quiz-answer--correct {
  background: rgba(34, 197, 94, 0.16);
  border-color: rgba(34, 197, 94, 0.5);
}

.courses-page .quiz-answer--wrong,
.exercises-page .quiz-answer--wrong {
  background: rgba(248, 113, 113, 0.16);
  border-color: rgba(248, 113, 113, 0.5);
}

.exercises-page .exercise-topbar {
  border-radius: 20px;
  border: 1px solid var(--course-border);
  background: var(--course-panel);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.14);
}

.exercises-page .exercise-progress {
  background: var(--course-card);
  border: 1px dashed var(--course-border);
  color: var(--course-muted);
}

.exercises-page .exercise-result-banner {
  border-radius: 16px;
  border-color: rgba(14, 165, 233, 0.4);
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.18), rgba(37, 99, 235, 0.16));
  color: var(--course-ink);
}

.exercises-page .exercise-submit {
  background: linear-gradient(135deg, var(--course-accent), var(--course-accent-strong));
  border-color: transparent;
  color: #ffffff;
  border-radius: 14px;
  box-shadow: 0 16px 28px rgba(37, 99, 235, 0.28);
}

.exercises-page .exercise-reset {
  background: var(--course-card);
  border-color: var(--course-border);
  border-radius: 14px;
  color: var(--course-ink);
}

.courses-page .btn-secondary,
.exercises-page .btn-secondary,
.exercises-page .btn-outline {
  background: var(--course-card);
  color: var(--course-ink);
  border-color: var(--course-border);
}

.courses-page .courses-level-tab:focus-visible,
.exercises-page .courses-level-tab:focus-visible,
.courses-page .lesson-chip:focus-visible,
.exercises-page .lesson-chip:focus-visible,
.courses-page .quiz-answer:focus-visible,
.exercises-page .quiz-answer:focus-visible {
  outline: 2px solid var(--course-focus);
  outline-offset: 2px;
}

@media (max-width: 980px) {
  .courses-page,
  .exercises-page {
    padding: 16px 16px 64px;
    border-radius: 22px;
  }

  .courses-page .courses-layout--stacked,
  .exercises-page .courses-layout--stacked {
    grid-template-columns: 1fr;
  }

  .courses-page .lesson-menu-bar,
  .exercises-page .lesson-menu-bar {
    padding: 0.9rem;
  }
}

@media (max-width: 640px) {
  .courses-page .courses-header,
  .exercises-page .courses-header {
    padding: 1.1rem;
  }

  .courses-page .courses-header h1,
  .exercises-page .courses-header h1 {
    font-size: 1.9rem;
  }

  .courses-page .lesson-chip,
  .exercises-page .lesson-chip {
    grid-template-columns: 30px 1fr;
    min-height: 66px;
    padding: 0.6rem 0.7rem 0.6rem 0.8rem;
  }

  .courses-page .lesson-chip-number,
  .exercises-page .lesson-chip-number {
    width: 30px;
    height: 30px;
    border-radius: 9px;
  }

  .courses-page .lesson-menu-toggle,
  .exercises-page .lesson-menu-toggle {
    width: 100%;
    justify-content: center;
  }

  .exercises-page .exercise-topbar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .courses-page:not(.exercises-page) .lesson-menu-bar {
    padding: 1.1rem 1rem 1.2rem;
    border-radius: 20px;
    background:
      linear-gradient(180deg, rgba(59, 130, 246, 0.12), rgba(255, 255, 255, 0.96)),
      var(--course-panel);
    border-color: rgba(37, 99, 235, 0.28);
    box-shadow: 0 18px 30px rgba(30, 64, 175, 0.18);
  }

  .courses-page:not(.exercises-page) .lesson-menu-hint {
    background: rgba(37, 99, 235, 0.14);
    color: #1d4ed8;
    border-color: rgba(37, 99, 235, 0.35);
  }

  .courses-page:not(.exercises-page) .lesson-menu-scroll {
    --lesson-chip-height: 78px;
    gap: 0.85rem;
    padding: 0.35rem 0.1rem 0.15rem;
  }

  .courses-page:not(.exercises-page) .lesson-menu-scroll--collapsed {
    max-height: calc((var(--lesson-chip-height) * 3) + (0.85rem * 2));
  }

  .courses-page:not(.exercises-page) .lesson-chip {
    grid-template-columns: 32px 1fr;
    gap: 0.85rem;
    min-height: 78px;
    padding: 0.8rem 0.95rem;
    border-radius: 18px;
    background: linear-gradient(
      120deg,
      rgba(239, 246, 255, 0.98),
      rgba(219, 234, 254, 0.8)
    );
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
  }

  .courses-page:not(.exercises-page) .lesson-chip::before {
    width: 5px;
    background: linear-gradient(180deg, #38bdf8, #2563eb);
  }

  .courses-page:not(.exercises-page) .lesson-chip-number {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: rgba(37, 99, 235, 0.16);
    color: #1d4ed8;
    font-size: 0.85rem;
  }

  .courses-page:not(.exercises-page) .lesson-chip-title {
    font-size: 0.95rem;
  }

  .courses-page:not(.exercises-page) .lesson-chip--active {
    background: linear-gradient(135deg, #1d4ed8, #38bdf8);
    box-shadow: 0 16px 30px rgba(37, 99, 235, 0.3);
  }

  .courses-page:not(.exercises-page) .lesson-menu-toggle {
    padding: 0.6rem 1rem;
    border-radius: 999px;
    border-color: rgba(37, 99, 235, 0.45);
    background: rgba(37, 99, 235, 0.14);
    color: #0f172a;
  }
}

@media (max-width: 640px) {
  .exercises-page .lesson-menu-bar {
    padding: 1.1rem 1rem 1.2rem;
    border-radius: 20px;
    background:
      linear-gradient(180deg, rgba(59, 130, 246, 0.12), rgba(255, 255, 255, 0.96)),
      var(--course-panel);
    border-color: rgba(37, 99, 235, 0.28);
    box-shadow: 0 18px 30px rgba(30, 64, 175, 0.18);
  }

  .exercises-page .lesson-menu-hint {
    background: rgba(37, 99, 235, 0.14);
    color: #1d4ed8;
    border-color: rgba(37, 99, 235, 0.35);
  }

  .exercises-page .lesson-menu-scroll {
    --lesson-chip-height: 78px;
    gap: 0.85rem;
    padding: 0.35rem 0.1rem 0.15rem;
  }

  .exercises-page .lesson-menu-scroll--collapsed {
    max-height: calc((var(--lesson-chip-height) * 3) + (0.85rem * 2));
  }

  .exercises-page .lesson-chip {
    grid-template-columns: 32px 1fr;
    gap: 0.85rem;
    min-height: 78px;
    padding: 0.8rem 0.95rem;
    border-radius: 18px;
    background: linear-gradient(
      120deg,
      rgba(239, 246, 255, 0.98),
      rgba(219, 234, 254, 0.8)
    );
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
  }

  .exercises-page .lesson-chip::before {
    width: 5px;
    background: linear-gradient(180deg, #38bdf8, #2563eb);
  }

  .exercises-page .lesson-chip-number {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: rgba(37, 99, 235, 0.16);
    color: #1d4ed8;
    font-size: 0.85rem;
  }

  .exercises-page .lesson-chip-title {
    font-size: 0.95rem;
  }

  .exercises-page .lesson-chip--active {
    background: linear-gradient(135deg, #1d4ed8, #38bdf8);
    box-shadow: 0 16px 30px rgba(37, 99, 235, 0.3);
  }

  .exercises-page .lesson-menu-toggle {
    padding: 0.6rem 1rem;
    border-radius: 999px;
    border-color: rgba(37, 99, 235, 0.45);
    background: rgba(37, 99, 235, 0.14);
    color: #0f172a;
  }
}


@media (max-width: 900px) {
  .courses-page,
  .exercises-page {
    padding: 16px 16px 64px;
    border-radius: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    overflow: visible;
  }

  .courses-page::before,
  .courses-page::after,
  .exercises-page::before,
  .exercises-page::after {
    content: none;
  }
}

/* ==================================================
   Force full light theme regardless of OS/browser
   ================================================== */
:root {
  color-scheme: light;
}

html,
body,
.app,
.page {
  background: #f8fafc !important;
  color: #0f172a !important;
}

/* Clear any dark overlays/gradients */
.app::before,
.courses-page::before,
.courses-page::after,
.exercises-page::before,
.exercises-page::after,
.home-simple-hero::before,
.lesson-hero::before,
.lesson-menu-bar::before,
.quiz-question-card::before {
  content: none !important;
}

/* Hero and main panels */
.home-simple-hero,
.lesson-hero,
.courses-page .lesson-hero,
.exercises-page .lesson-hero,
.courses-page .courses-lesson-content,
.exercises-page .courses-lesson-content,
.lesson-quiz,
.lesson-summary,
.lesson-quiz-note,
.quiz-question-card,
.exercise-question-card,
.lesson-goal,
.lesson-menu-bar {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08) !important;
}

.lesson-hero h1,
.lesson-hero h2,
.lesson-hero h3,
.home-simple-title,
.home-simple-actions-title {
  color: #0f172a !important;
}

.lesson-hero p,
.home-simple-subtitle {
  color: #475569 !important;
}

/* Level tabs and lesson chips/buttons */
.courses-level-tab,
.lesson-button,
.lesson-chip {
  background: #f6f9fc !important;
  color: #0f172a !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08) !important;
}

.courses-level-tab--active,
.lesson-button--active,
.lesson-chip--active {
  background: #e7efff !important;
  color: #0f172a !important;
  border-color: rgba(37, 99, 235, 0.35) !important;
  box-shadow: none !important;
}

/* ===========================
   Light palette override
   =========================== */
:root {
  --bg-body: #f8fafc;
  --bg-card: #ffffff;
  --bg-soft: #f1f5f9;
  --bg-ink: #0f172a;
  --text-main: #0f172a;
  --text-muted: #475569;
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-soft: rgba(37, 99, 235, 0.12);
  --accent: #22c55e;
  --border-soft: rgba(15, 23, 42, 0.08);
}

html,
body,
.app,
.page {
  background: #f8fafc !important;
  color: #0f172a !important;
}

.app::before,
.courses-page::before,
.courses-page::after,
.exercises-page::before,
.exercises-page::after {
  content: none !important;
}

header.topbar,
.main-nav,
.section-card,
.card {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08) !important;
}

.nav-link,
.topbar-auth,
.brand-name,
.brand-tagline {
  color: #0f172a !important;
}

.nav-link--active {
  background: rgba(37, 99, 235, 0.12) !important;
  border-color: rgba(37, 99, 235, 0.35) !important;
  color: #0f172a !important;
  box-shadow: none !important;
}

.main-nav {
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
}

.section-card,
.card {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
}

/* Final fallback: force light palette even if OS/browser is in dark mode */

/* Hard override: always light mode, regardless of browser/OS */
html,
body {
  color-scheme: light !important;
}


/* Ngjyra me te buta prapa faqeve kryesore */
.home-page,
.courses-page,
.exercises-page,
.games-page {
  position: relative;
  isolation: isolate;
  background: linear-gradient(150deg, #e6f3ff 0%, #eaf6ff 50%, #f8fbff 100%) !important;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 32px;
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.14);
  overflow: hidden;
}

.home-page::before,
.courses-page::before,
.exercises-page::before,
.games-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 12% 12%, rgba(37, 99, 235, 0.16), transparent 42%),
    radial-gradient(circle at 86% 10%, rgba(14, 165, 233, 0.16), transparent 40%),
    radial-gradient(circle at 22% 78%, rgba(251, 191, 36, 0.12), transparent 55%);
  pointer-events: none;
  z-index: 0;
}

.home-page::after,
.courses-page::after,
.exercises-page::after,
.games-page::after {
  content: "";
  position: absolute;
  inset: 12% 8% 6% 10%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
  filter: blur(12px);
  pointer-events: none;
  z-index: 0;
}

.home-page > *,
.courses-page > *,
.exercises-page > *,
.games-page > * {
  position: relative;
  z-index: 1;
}

/* Restore exercises palette after global overrides */
.exercises-page {
  background: radial-gradient(circle at 12% 10%, rgba(14, 165, 233, 0.16), transparent 45%),
    radial-gradient(circle at 88% 0%, rgba(99, 102, 241, 0.14), transparent 48%),
    radial-gradient(circle at 35% 85%, rgba(251, 191, 36, 0.12), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.98)) !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  box-shadow: 0 40px 90px rgba(15, 23, 42, 0.12) !important;
}

.exercises-page::before,
.exercises-page::after {
  content: "" !important;
}

.lesson-hero,
.courses-lesson-content,
.lesson-menu-bar,
.lesson-quiz,
.lesson-summary,
.lesson-quiz-note,
.quiz-question-card,
.exercise-question-card,
.lesson-goal,
.lesson-button,
.lesson-chip {
  background: linear-gradient(180deg, #ffffff, #f7fbff) !important;
  color: #0f172a !important;
  border-color: rgba(37, 99, 235, 0.12) !important;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.1) !important;
}

.lesson-button--active,
.lesson-chip--active {
  background: linear-gradient(135deg, #e0ecff, #dbeafe) !important;
  color: #0f172a !important;
  border-color: rgba(37, 99, 235, 0.38) !important;
}

/* Tabs te nivelit me kontrast me te larte */
.courses-level-tabs {
  background: rgba(255, 255, 255, 0.88);
  padding: 0.9rem 1rem;
  border-radius: 999px;
  border: 1px solid #e0e7ff;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.courses-level-tab {
  background: linear-gradient(180deg, #ffffff, #f3f6ff);
  border: 1px solid #d9e5ff;
  color: #0f172a;
  font-weight: 700;
  letter-spacing: -0.01em;
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.06);
}

.courses-level-tab--active:not(.courses-level-tab--upgrade):not(.courses-level-tab--coming) {
  background: linear-gradient(135deg, #2563eb, #0ea5e9);
  border-color: #1d4ed8;
  color: #f8fafc;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
}

.courses-level-tab--upgrade {
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
  border-color: #fb923c;
  color: #7c2d12;
}

.courses-level-tab--coming {
  background: linear-gradient(135deg, #fff1f2, #fee2e2);
  border-color: #fca5a5;
  color: #7f1d1d;
}

.courses-level-tab--active.courses-level-tab--upgrade {
  background: linear-gradient(135deg, #ffe7c4, #ffd7a4);
  color: #7c2d12;
  border-color: #fbbf24;
  text-shadow: none;
}

.courses-level-tab--active.courses-level-tab--coming {
  background: linear-gradient(135deg, #ef4444, #f87171);
  color: #ffffff;
  border-color: #ef4444;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.22);
}

/* --- Harmonize courses/exercises backgrounds and tabs --- */
.courses-page,
.exercises-page {
  background: linear-gradient(135deg, #eaf5ff 0%, #e1f0ff 55%, #f7fbff 100%) !important;
  border: 1px solid rgba(37, 99, 235, 0.12) !important;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.12) !important;
}

.courses-page::before,
.courses-page::after,
.exercises-page::before,
.exercises-page::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 12% 12%, rgba(37, 99, 235, 0.12), transparent 42%),
    radial-gradient(circle at 86% 10%, rgba(14, 165, 233, 0.12), transparent 40%),
    radial-gradient(circle at 22% 78%, rgba(251, 191, 36, 0.12), transparent 55%);
  pointer-events: none;
  z-index: 0;
}

.courses-level-tab {
  background: linear-gradient(180deg, #ffffff, #f3f6ff) !important;
  border: 1px solid #d9e5ff !important;
  color: #0f172a !important;
  font-weight: 700;
}

.courses-level-tab--active:not(.courses-level-tab--upgrade):not(.courses-level-tab--coming) {
  background: #e8f0ff !important;
  border-color: #2563eb !important;
  color: #0f172a !important;
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.22) !important;
  text-shadow: none !important;
}

.courses-level-tab--active .badge {
  background: rgba(37, 99, 235, 0.12) !important;
  color: #0f172a !important;
  border-color: rgba(37, 99, 235, 0.24) !important;
}

.courses-level-tab.courses-level-tab--upgrade.courses-level-tab--active,
.exercises-page .courses-level-tab--active.courses-level-tab--upgrade,
.games-page .courses-level-tab--active.courses-level-tab--upgrade {
  background: #ffe7c4 !important;
  color: #7c2d12 !important;
  border-color: #fbbf24 !important;
  box-shadow: 0 10px 22px rgba(251, 191, 36, 0.24) !important;
  text-shadow: none !important;
}

.courses-level-tab--active.courses-level-tab--upgrade .level-tab-label,
.courses-level-tab--active.courses-level-tab--upgrade .badge {
  color: #7c2d12 !important;
  background: rgba(251, 191, 36, 0.16) !important;
  border-color: #fbbf24 !important;
}

/* Force permanent light mode */
:root {
  color-scheme: light;
}

html,
body {
  background: linear-gradient(135deg, #e6f3ff 0%, #f0f7ff 55%, #ffffff 100%);
  color: #0f172a;
}

body * {
  color-scheme: light !important;
}

/* Final override: active tabs always light/legible (A1 visible) */
.courses-level-tab--active,
.exercises-page .courses-level-tab--active,
.games-page .courses-level-tab--active {
  background: #e8f0ff !important;
  color: #0f172a !important;
  border-color: #2563eb !important;
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.18) !important;
}

.courses-level-tab--active .level-tab-label,
.exercises-page .courses-level-tab--active .level-tab-label,
.games-page .courses-level-tab--active .level-tab-label,
.courses-level-tab--active .badge,
.exercises-page .courses-level-tab--active .badge,
.games-page .courses-level-tab--active .badge {
  color: #0f172a !important;
}

/* Courses palette refresh */
.courses-page {
  background: linear-gradient(150deg, #fff1cf 0%, #e1f0ff 45%, #d8f7ec 100%) !important;
  border: 1px solid rgba(84, 112, 123, 0.2) !important;
  box-shadow: 0 30px 70px rgba(15, 23, 42, 0.14) !important;
}

.courses-page::before {
  background: radial-gradient(circle at 12% 12%, rgba(245, 158, 11, 0.22), transparent 52%),
    radial-gradient(circle at 90% 8%, rgba(56, 189, 248, 0.22), transparent 52%),
    radial-gradient(circle at 20% 88%, rgba(16, 185, 129, 0.22), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(244, 114, 182, 0.18), transparent 60%) !important;
}

.courses-page::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.18)) !important;
  filter: blur(18px);
}

.courses-page .courses-header {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(255, 236, 204, 0.8)) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
}

.courses-page .courses-level-tabs {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.1) !important;
}

.courses-page .courses-level-tab {
  background: linear-gradient(180deg, #ffffff, #f3f7ff) !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
  color: #0f172a !important;
}

.courses-page .courses-level-tab--starter {
  background: linear-gradient(135deg, #fff7db, #ffe4b8) !important;
  border-color: rgba(245, 158, 11, 0.6) !important;
  color: #7c2d12 !important;
  box-shadow: 0 10px 22px rgba(245, 158, 11, 0.2) !important;
}

.courses-page .courses-level-tab--starter .level-tab-label {
  color: #7c2d12 !important;
}

.courses-page .courses-level-tab--starter .badge {
  background: rgba(245, 158, 11, 0.2) !important;
  border-color: rgba(245, 158, 11, 0.45) !important;
  color: #7c2d12 !important;
}

.courses-page .courses-level-tab--starter.courses-level-tab--active {
  background: linear-gradient(135deg, #ffd28a, #ffb84d) !important;
  border-color: rgba(245, 158, 11, 0.8) !important;
  color: #7c2d12 !important;
  box-shadow: 0 14px 28px rgba(245, 158, 11, 0.3) !important;
}

.courses-page .courses-level-tab--active:not(.courses-level-tab--upgrade):not(.courses-level-tab--coming) {
  background: linear-gradient(135deg, #dbeafe, #d1fae5) !important;
  border-color: rgba(56, 189, 248, 0.55) !important;
  box-shadow: 0 14px 26px rgba(56, 189, 248, 0.22) !important;
  color: #0f172a !important;
}

.courses-page .courses-level-tab--active .badge {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #0f172a !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
}

.courses-page .lesson-menu-bar {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(224, 247, 236, 0.92)) !important;
  border-color: rgba(16, 185, 129, 0.25) !important;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12) !important;
}

.courses-page .lesson-menu-pill {
  background: rgba(16, 185, 129, 0.18) !important;
  color: #0f4a3c !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
}

.courses-page .lesson-menu-hint {
  background: rgba(56, 189, 248, 0.2) !important;
  color: #0f172a !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
}

.courses-page .lesson-chip {
  background: linear-gradient(135deg, #ffffff, #eaf7f1) !important;
  border-color: rgba(16, 185, 129, 0.32) !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.1) !important;
}

.courses-page .lesson-chip::before {
  background: linear-gradient(180deg, #10b981, #38bdf8) !important;
}

.courses-page .lesson-chip-number {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #0f4a3c !important;
}

.courses-page .lesson-chip--active {
  background: linear-gradient(135deg, #e0f7ec, #e4f0ff) !important;
  border-color: rgba(56, 189, 248, 0.6) !important;
  box-shadow: 0 16px 28px rgba(16, 185, 129, 0.22) !important;
}

.courses-page .lesson-hero,
.courses-page .courses-lesson-content,
.courses-page .lesson-menu-bar,
.courses-page .lesson-quiz,
.courses-page .lesson-summary,
.courses-page .lesson-quiz-note,
.courses-page .quiz-question-card,
.courses-page .lesson-goal,
.courses-page .lesson-button,
.courses-page .lesson-chip,
.courses-page .lesson-card {
  background: linear-gradient(180deg, #ffffff, #f8fbff) !important;
  color: #0f172a !important;
  border-color: rgba(84, 112, 123, 0.2) !important;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1) !important;
}

.courses-page .lesson-button--active,
.courses-page .lesson-chip--active {
  background: linear-gradient(135deg, #e0f7ec, #e4f0ff) !important;
  border-color: rgba(56, 189, 248, 0.45) !important;
}

.courses-page .lesson-goal {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(255, 255, 255, 0.95)) !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
}

.courses-page .lesson-summary {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.18), rgba(255, 255, 255, 0.95)) !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
}

.courses-page .lesson-card--details {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(226, 232, 240, 0.5)) !important;
}

.courses-page .lesson-card--examples {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.18), rgba(255, 255, 255, 0.96)) !important;
  border-color: rgba(251, 191, 36, 0.35) !important;
}

.courses-page .lesson-card--focus {
  background: linear-gradient(135deg, rgba(94, 234, 212, 0.2), rgba(255, 255, 255, 0.96)) !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
}

.courses-page .lesson-card--tip {
  background: linear-gradient(135deg, rgba(244, 114, 182, 0.16), rgba(255, 255, 255, 0.96)) !important;
  border-color: rgba(244, 114, 182, 0.35) !important;
}

.courses-page .lesson-footer-links .btn-primary,
.courses-page .lesson-footer-links .btn-secondary {
  border-radius: 999px !important;
  padding: 0.75rem 1.2rem !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  box-shadow: 0 14px 26px rgba(15, 23, 42, 0.12) !important;
}

.courses-page .lesson-footer-links .btn-primary {
  background: linear-gradient(135deg, #22d3ee, #60a5fa) !important;
  border-color: rgba(56, 189, 248, 0.6) !important;
}

.courses-page .lesson-footer-links .btn-secondary {
  background: linear-gradient(135deg, #ffffff, #e0f2fe) !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
  color: #0f172a !important;
}

.courses-page .lesson-footer-links .btn-primary::after,
.courses-page .lesson-footer-links .btn-secondary::after {
  content: "→";
  font-weight: 800;
}

.courses-page .lesson-examples-toggle {
  margin-top: 0.75rem;
}

.courses-page .lesson-examples-toggle-btn {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.16);
  color: #0f172a;
  font-size: 0.85rem;
  font-weight: 700;
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.1);
}

.courses-page .lesson-examples-toggle-btn::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.courses-page .lesson-examples-toggle[open] .lesson-examples-toggle-btn::after {
  transform: rotate(-135deg);
}

.courses-page .lesson-examples-toggle-btn::-webkit-details-marker {
  display: none;
}

.courses-page .lesson-examples--extra {
  margin-top: 0.65rem;
}

.courses-page .lesson-menu-mobile {
  display: none;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 22px;
  border: 2px solid rgba(56, 189, 248, 0.55);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.98),
    rgba(224, 231, 255, 0.92),
    rgba(240, 253, 244, 0.9)
  );
  padding: 1rem 1.05rem;
  box-shadow: 0 22px 42px rgba(15, 23, 42, 0.18), 0 0 0 3px rgba(56, 189, 248, 0.15);
}

.courses-page .lesson-menu-mobile::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto;
  height: 140%;
  background: radial-gradient(
      circle at 20% 30%,
      rgba(245, 158, 11, 0.28),
      transparent 60%
    ),
    radial-gradient(circle at 80% 20%, rgba(56, 189, 248, 0.26), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.courses-page .lesson-menu-mobile > * {
  position: relative;
  z-index: 1;
}

.courses-page .lesson-menu-mobile[open] {
  border-color: rgba(16, 185, 129, 0.6);
  box-shadow: 0 26px 46px rgba(15, 23, 42, 0.2), 0 0 0 3px rgba(16, 185, 129, 0.18);
}

.courses-page .lesson-menu-mobile-trigger {
  list-style: none;
  cursor: pointer;
  display: grid;
  gap: 0.35rem;
  position: relative;
  padding: 0.2rem 1.8rem 0.2rem 0.15rem;
  color: #0f172a;
  font-weight: 800;
}

.courses-page .lesson-menu-mobile-trigger::after {
  content: "";
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  position: absolute;
  right: 0.4rem;
  top: 0.55rem;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.courses-page .lesson-menu-mobile[open] .lesson-menu-mobile-trigger::after {
  transform: rotate(-135deg);
}

.courses-page .lesson-menu-mobile-trigger::-webkit-details-marker {
  display: none;
}

.courses-page .lesson-menu-mobile-label {
  display: inline-flex;
  width: fit-content;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  color: #7c2d12;
  background: rgba(245, 158, 11, 0.28);
  border: 1px solid rgba(245, 158, 11, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.courses-page .lesson-menu-mobile-title {
  font-size: 1.02rem;
  font-weight: 800;
  color: #0f172a;
}

.courses-page .lesson-menu-mobile-list {
  margin-top: 0.8rem;
  display: grid;
  gap: 0.55rem;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 0.2rem;
}

.courses-page .lesson-menu-mobile-item {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.75rem;
  border-radius: 14px;
  border: 1px solid rgba(56, 189, 248, 0.25);
  background: linear-gradient(135deg, #ffffff, #eef6ff);
  color: #0f172a;
  text-align: left;
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
  position: relative;
}

.courses-page .lesson-menu-mobile-item.is-active {
  border-color: rgba(16, 185, 129, 0.45);
  background: linear-gradient(135deg, #e0f7ec, #e4f0ff);
  box-shadow: 0 12px 22px rgba(16, 185, 129, 0.2);
}

.courses-page .lesson-menu-mobile-item.is-done {
  border-color: rgba(34, 197, 94, 0.5);
}

.courses-page .lesson-menu-mobile-item.is-done::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.15);
}

.courses-page .lesson-menu-mobile-number {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.85rem;
  color: #0f4a3c;
  background: rgba(16, 185, 129, 0.2);
}

.courses-page .lesson-menu-mobile-text {
  font-size: 0.9rem;
  font-weight: 600;
}

@media (max-width: 900px) {
  .courses-page .lesson-menu-mobile {
    display: grid;
  }

  .courses-page .lesson-menu-scroll,
  .courses-page .lesson-menu-toggle {
    display: none;
  }
}

@media (max-width: 900px) {
  .courses-page .level-select {
    max-width: 100%;
    margin: 1rem 0 1.2rem;
  }

  .courses-page .level-select-trigger {
    border-radius: 18px;
    border: 2px solid rgba(56, 189, 248, 0.6);
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.96),
      rgba(219, 234, 254, 0.9),
      rgba(254, 243, 199, 0.7)
    );
    padding: 0.85rem 1rem;
    font-weight: 800;
    box-shadow: 0 18px 32px rgba(15, 23, 42, 0.16), 0 0 0 3px rgba(56, 189, 248, 0.16);
  }

  .courses-page .level-select-label {
    font-size: 1rem;
    font-weight: 800;
  }

  .courses-page .level-select-arrow {
    width: 12px;
    height: 12px;
    border-right: 3px solid #0f172a;
    border-bottom: 3px solid #0f172a;
  }

  .courses-page .level-select--open .level-select-trigger {
    border-color: rgba(16, 185, 129, 0.7);
    box-shadow: 0 20px 36px rgba(15, 23, 42, 0.18), 0 0 0 3px rgba(16, 185, 129, 0.2);
  }

  .courses-page .level-select-menu {
    border: 2px solid rgba(56, 189, 248, 0.45);
    background: linear-gradient(180deg, #ffffff, #eff6ff);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.16);
    padding: 0.8rem;
  }

  .courses-page .level-select-menu .courses-level-tab {
    border-radius: 14px;
    padding: 0.6rem 0.9rem;
    font-size: 0.95rem;
  }
}

/* Exercises palette refresh */
.exercises-page {
  background: linear-gradient(150deg, #ffe7d3 0%, #e6f2ff 45%, #e4fff4 100%) !important;
  border: 1px solid rgba(86, 110, 120, 0.2) !important;
  box-shadow: 0 30px 70px rgba(15, 23, 42, 0.14) !important;
}

.exercises-page::before {
  background: radial-gradient(circle at 12% 12%, rgba(251, 113, 133, 0.22), transparent 52%),
    radial-gradient(circle at 88% 8%, rgba(34, 211, 238, 0.22), transparent 52%),
    radial-gradient(circle at 18% 88%, rgba(74, 222, 128, 0.22), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(249, 115, 22, 0.2), transparent 60%) !important;
}

.exercises-page::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.18)) !important;
  filter: blur(18px);
}

.exercises-page .courses-header {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 228, 214, 0.82)) !important;
  border-color: rgba(251, 113, 133, 0.3) !important;
}

.exercises-page .courses-level-tabs {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(34, 211, 238, 0.28) !important;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.1) !important;
}

.exercises-page .courses-level-tab {
  background: linear-gradient(180deg, #ffffff, #fef3f2) !important;
  border: 1px solid rgba(34, 211, 238, 0.28) !important;
  color: #0f172a !important;
}

.exercises-page .courses-level-tab--starter {
  background: linear-gradient(135deg, #fff1d6, #ffd6a5) !important;
  border-color: rgba(249, 115, 22, 0.6) !important;
  color: #7c2d12 !important;
  box-shadow: 0 10px 22px rgba(249, 115, 22, 0.22) !important;
}

.exercises-page .courses-level-tab--starter .level-tab-label {
  color: #7c2d12 !important;
}

.exercises-page .courses-level-tab--starter .badge {
  background: rgba(249, 115, 22, 0.2) !important;
  border-color: rgba(249, 115, 22, 0.45) !important;
  color: #7c2d12 !important;
}

.exercises-page .courses-level-tab--starter.courses-level-tab--active {
  background: linear-gradient(135deg, #fbbf24, #fb7185) !important;
  border-color: rgba(249, 115, 22, 0.8) !important;
  color: #7c2d12 !important;
  box-shadow: 0 14px 28px rgba(249, 115, 22, 0.3) !important;
}

.exercises-page .courses-level-tab--active:not(.courses-level-tab--upgrade):not(.courses-level-tab--coming) {
  background: linear-gradient(135deg, #fee2e2, #dbeafe) !important;
  border-color: rgba(251, 113, 133, 0.6) !important;
  box-shadow: 0 14px 26px rgba(251, 113, 133, 0.22) !important;
  color: #0f172a !important;
}

.exercises-page .courses-level-tab--active .badge {
  background: rgba(34, 211, 238, 0.2) !important;
  color: #0f172a !important;
  border-color: rgba(34, 211, 238, 0.35) !important;
}

.exercises-page .lesson-menu-bar {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(240, 249, 255, 0.9)) !important;
  border-color: rgba(34, 211, 238, 0.25) !important;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12) !important;
}

.exercises-page .lesson-menu-pill {
  background: rgba(251, 113, 133, 0.2) !important;
  color: #7f1d1d !important;
  border-color: rgba(251, 113, 133, 0.45) !important;
}

.exercises-page .lesson-menu-hint {
  background: rgba(34, 211, 238, 0.18) !important;
  color: #0f172a !important;
  border-color: rgba(34, 211, 238, 0.4) !important;
}

.exercises-page .lesson-chip {
  background: linear-gradient(135deg, #ffffff, #fff1f2) !important;
  border-color: rgba(251, 113, 133, 0.35) !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.1) !important;
}

.exercises-page .lesson-chip::before {
  background: linear-gradient(180deg, #fb7185, #22d3ee) !important;
}

.exercises-page .lesson-chip-number {
  background: rgba(34, 211, 238, 0.2) !important;
  color: #0f172a !important;
}

.exercises-page .lesson-chip--active {
  background: linear-gradient(135deg, #fee2e2, #dbeafe) !important;
  border-color: rgba(251, 113, 133, 0.6) !important;
  box-shadow: 0 16px 28px rgba(251, 113, 133, 0.22) !important;
}

.exercises-page .lesson-chip--done::after {
  background: #22c55e !important;
}

.exercises-page .lesson-hero,
.exercises-page .courses-lesson-content,
.exercises-page .lesson-menu-bar,
.exercises-page .lesson-quiz,
.exercises-page .lesson-summary,
.exercises-page .lesson-quiz-note,
.exercises-page .quiz-question-card,
.exercises-page .lesson-goal,
.exercises-page .lesson-button,
.exercises-page .lesson-chip,
.exercises-page .lesson-card,
.exercises-page .exercise-topbar,
.exercises-page .exercise-question-card {
  background: linear-gradient(180deg, #ffffff, #fff7f4) !important;
  color: #0f172a !important;
  border-color: rgba(86, 110, 120, 0.2) !important;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1) !important;
}

.exercises-page .lesson-button--active,
.exercises-page .lesson-chip--active {
  background: linear-gradient(135deg, #fee2e2, #dbeafe) !important;
  border-color: rgba(34, 211, 238, 0.45) !important;
}

.courses-page .course-title {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}

.courses-page .course-title-label {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.2), rgba(34, 211, 238, 0.18));
  border: 1px solid rgba(14, 165, 233, 0.45);
  color: #0f172a;
  font-weight: 800;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.12);
}

.courses-page .course-title-text {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
}

.exercises-page .exercise-title {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}

.exercises-page .exercise-title-label {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(251, 113, 133, 0.25), rgba(249, 115, 22, 0.18));
  border: 1px solid rgba(251, 113, 133, 0.55);
  color: #7f1d1d;
  font-weight: 800;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.12);
}

.exercises-page .exercise-title-text {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
}

.exercises-page .exercise-question-card {
  background: linear-gradient(135deg, rgba(254, 226, 226, 0.7), rgba(219, 234, 254, 0.7)) !important;
  border-color: rgba(251, 113, 133, 0.35) !important;
}

.exercises-page .exercise-footer-links .btn-primary,
.exercises-page .exercise-footer-links .btn-secondary {
  border-radius: 999px !important;
  padding: 0.75rem 1.2rem !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  box-shadow: 0 14px 26px rgba(15, 23, 42, 0.12) !important;
}

.exercises-page .exercise-footer-links .btn-primary {
  background: linear-gradient(135deg, #fb7185, #f97316) !important;
  border-color: rgba(251, 113, 133, 0.65) !important;
}

.exercises-page .exercise-footer-links .btn-secondary {
  background: linear-gradient(135deg, #ffffff, #ffe4e6) !important;
  border-color: rgba(251, 113, 133, 0.35) !important;
  color: #7f1d1d !important;
}

.exercises-page .exercise-footer-links .btn-primary::after,
.exercises-page .exercise-footer-links .btn-secondary::after {
  content: "→";
  font-weight: 800;
}

.exercises-page .lesson-menu-mobile {
  display: none;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 22px;
  border: 2px solid rgba(251, 113, 133, 0.6);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.98),
    rgba(254, 226, 226, 0.9),
    rgba(219, 234, 254, 0.88)
  );
  padding: 1rem 1.05rem;
  box-shadow: 0 22px 42px rgba(15, 23, 42, 0.18), 0 0 0 3px rgba(251, 113, 133, 0.16);
}

.exercises-page .lesson-menu-mobile::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto;
  height: 140%;
  background: radial-gradient(
      circle at 20% 30%,
      rgba(34, 211, 238, 0.28),
      transparent 60%
    ),
    radial-gradient(circle at 80% 20%, rgba(249, 115, 22, 0.26), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.exercises-page .lesson-menu-mobile > * {
  position: relative;
  z-index: 1;
}

.exercises-page .lesson-menu-mobile[open] {
  border-color: rgba(34, 211, 238, 0.6);
  box-shadow: 0 26px 46px rgba(15, 23, 42, 0.2), 0 0 0 3px rgba(34, 211, 238, 0.18);
}

.exercises-page .lesson-menu-mobile-trigger {
  list-style: none;
  cursor: pointer;
  display: grid;
  gap: 0.35rem;
  position: relative;
  padding: 0.2rem 1.8rem 0.2rem 0.15rem;
  color: #0f172a;
  font-weight: 800;
}

.exercises-page .lesson-menu-mobile-trigger::after {
  content: "";
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  position: absolute;
  right: 0.4rem;
  top: 0.55rem;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.exercises-page .lesson-menu-mobile[open] .lesson-menu-mobile-trigger::after {
  transform: rotate(-135deg);
}

.exercises-page .lesson-menu-mobile-trigger::-webkit-details-marker {
  display: none;
}

.exercises-page .lesson-menu-mobile-label {
  display: inline-flex;
  width: fit-content;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  color: #7f1d1d;
  background: rgba(251, 113, 133, 0.25);
  border: 1px solid rgba(251, 113, 133, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.exercises-page .lesson-menu-mobile-title {
  font-size: 1.02rem;
  font-weight: 800;
  color: #0f172a;
}

.exercises-page .lesson-menu-mobile-list {
  margin-top: 0.8rem;
  display: grid;
  gap: 0.55rem;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 0.2rem;
}

.exercises-page .lesson-menu-mobile-item {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.75rem;
  border-radius: 14px;
  border: 1px solid rgba(251, 113, 133, 0.3);
  background: linear-gradient(135deg, #ffffff, #ffe4e6);
  color: #0f172a;
  text-align: left;
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
}

.exercises-page .lesson-menu-mobile-item.is-active {
  border-color: rgba(34, 211, 238, 0.5);
  background: linear-gradient(135deg, #fee2e2, #dbeafe);
  box-shadow: 0 12px 22px rgba(34, 211, 238, 0.2);
}

.exercises-page .lesson-menu-mobile-item.is-done {
  border-color: rgba(74, 222, 128, 0.5);
}

.exercises-page .lesson-menu-mobile-item[disabled] {
  opacity: 0.55;
}

.exercises-page .lesson-menu-mobile-number {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.85rem;
  color: #7f1d1d;
  background: rgba(251, 113, 133, 0.2);
}

.exercises-page .lesson-menu-mobile-text {
  font-size: 0.9rem;
  font-weight: 600;
}

@media (max-width: 900px) {
  .exercises-page .lesson-menu-mobile {
    display: grid;
  }

  .exercises-page .lesson-menu-scroll,
  .exercises-page .lesson-menu-toggle {
    display: none;
  }

  .exercises-page .level-select {
    max-width: 100%;
    margin: 1rem 0 1.2rem;
  }

  .exercises-page .level-select-trigger {
    border-radius: 18px;
    border: 2px solid rgba(251, 113, 133, 0.65);
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.96),
      rgba(254, 226, 226, 0.9),
      rgba(219, 234, 254, 0.85)
    );
    padding: 0.85rem 1rem;
    font-weight: 800;
    box-shadow: 0 18px 32px rgba(15, 23, 42, 0.16), 0 0 0 3px rgba(251, 113, 133, 0.18);
  }

  .exercises-page .level-select-label {
    font-size: 1rem;
    font-weight: 800;
  }

  .exercises-page .level-select-arrow {
    width: 12px;
    height: 12px;
    border-right: 3px solid #7f1d1d;
    border-bottom: 3px solid #7f1d1d;
  }

  .exercises-page .level-select--open .level-select-trigger {
    border-color: rgba(34, 211, 238, 0.7);
    box-shadow: 0 20px 36px rgba(15, 23, 42, 0.18), 0 0 0 3px rgba(34, 211, 238, 0.2);
  }

  .exercises-page .level-select-menu {
    border: 2px solid rgba(34, 211, 238, 0.45);
    background: linear-gradient(180deg, #ffffff, #fff1f2);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.16);
    padding: 0.8rem;
  }

  .exercises-page .level-select-menu .courses-level-tab {
    border-radius: 14px;
    padding: 0.6rem 0.9rem;
    font-size: 0.95rem;
  }
}

/* Games level menu palette */
.games-page .courses-level-tabs {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.96),
    rgba(236, 253, 245, 0.9)
  ) !important;
  border: 1px solid rgba(13, 148, 136, 0.25) !important;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12) !important;
}

.games-page .courses-level-tab {
  background: linear-gradient(135deg, #ffffff, #ecfeff) !important;
  border: 1px solid rgba(13, 148, 136, 0.28) !important;
  color: #0f172a !important;
}

.games-page .courses-level-tab .badge {
  background: rgba(13, 148, 136, 0.16) !important;
  border: 1px solid rgba(13, 148, 136, 0.32) !important;
  color: #0f766e !important;
}

.games-page .courses-level-tab--active:not(.courses-level-tab--upgrade):not(.courses-level-tab--coming) {
  background: linear-gradient(135deg, #ccfbf1, #ecfeff) !important;
  border-color: rgba(13, 148, 136, 0.55) !important;
  box-shadow: 0 14px 28px rgba(13, 148, 136, 0.2) !important;
}

.games-page .courses-level-tab--active .badge {
  background: rgba(13, 148, 136, 0.2) !important;
  border-color: rgba(13, 148, 136, 0.4) !important;
  color: #0f766e !important;
}

.games-page .courses-level-tab--upgrade {
  background: linear-gradient(135deg, #fff7ed, #ffedd5) !important;
  border-color: rgba(249, 115, 22, 0.5) !important;
  color: #9a3412 !important;
}

.games-page .courses-level-tab--upgrade .level-tab-label,
.games-page .courses-level-tab--upgrade .badge {
  color: #9a3412 !important;
  background: rgba(249, 115, 22, 0.18) !important;
  border-color: rgba(249, 115, 22, 0.5) !important;
}

.games-page .courses-level-tab--active.courses-level-tab--upgrade {
  background: linear-gradient(135deg, #fed7aa, #ffedd5) !important;
  border-color: rgba(249, 115, 22, 0.65) !important;
  box-shadow: 0 14px 28px rgba(249, 115, 22, 0.18) !important;
}

.games-page .courses-level-tab--coming {
  background: #f8fafc !important;
  border-color: rgba(148, 163, 184, 0.35) !important;
  color: #64748b !important;
}

.games-page .courses-level-tab--coming .badge {
  background: rgba(148, 163, 184, 0.18) !important;
  border-color: rgba(148, 163, 184, 0.3) !important;
  color: #64748b !important;
}

.games-page .level-select-trigger {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.98),
    rgba(204, 251, 241, 0.85),
    rgba(254, 215, 170, 0.88)
  ) !important;
  border: 2px solid rgba(13, 148, 136, 0.35) !important;
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.14),
    0 0 0 3px rgba(13, 148, 136, 0.12) !important;
}

.games-page .level-select-label {
  font-weight: 800;
  color: #0f172a;
}

.games-page .level-select-arrow {
  border-right-color: #0f766e;
  border-bottom-color: #0f766e;
}

.games-page .level-select--open .level-select-trigger {
  border-color: rgba(20, 184, 166, 0.6) !important;
  box-shadow: 0 20px 38px rgba(15, 23, 42, 0.18),
    0 0 0 3px rgba(20, 184, 166, 0.2) !important;
}

.games-page .level-select-menu {
  background: linear-gradient(180deg, #ffffff, #f0fdfa) !important;
  border: 2px solid rgba(20, 184, 166, 0.35) !important;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.16) !important;
}

/* Games modern refresh */
.games-page {
  --games-ink: #0f172a;
  --games-muted: #475569;
  --games-teal: #14b8a6;
  --games-teal-strong: #0f766e;
  --games-coral: #fb7185;
  --games-coral-strong: #f43f5e;
  --games-amber: #f59e0b;
  --games-sky: #38bdf8;
  background: radial-gradient(circle at 14% 10%, rgba(251, 113, 133, 0.2), transparent 45%),
    radial-gradient(circle at 88% 8%, rgba(20, 184, 166, 0.18), transparent 48%),
    radial-gradient(circle at 30% 88%, rgba(56, 189, 248, 0.18), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.98)) !important;
  border: 1px solid rgba(20, 184, 166, 0.24) !important;
  border-radius: 34px;
  box-shadow: 0 40px 90px rgba(15, 23, 42, 0.14) !important;
}

.games-page::before {
  border-color: rgba(255, 255, 255, 0.72) !important;
}

.games-page::after {
  background: radial-gradient(circle, rgba(251, 113, 133, 0.25), transparent 70%) !important;
}

.games-hero {
  border-radius: 30px !important;
  background: linear-gradient(135deg, #fff5f7, #f0fdfa, #eef2ff) !important;
  border-color: rgba(251, 113, 133, 0.22) !important;
  box-shadow: 0 28px 64px rgba(15, 23, 42, 0.12) !important;
}

.games-hero-text {
  background: linear-gradient(180deg, #ffffff, #fff1f2) !important;
  border-color: rgba(251, 113, 133, 0.25) !important;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08) !important;
}

.games-hero-text h1 {
  font-size: clamp(2.05rem, 3vw, 2.7rem);
  letter-spacing: -0.02em;
}

.games-hero-text::after {
  background: linear-gradient(90deg, rgba(251, 113, 133, 0.6), rgba(20, 184, 166, 0.55)) !important;
}

.games-hero-card {
  border-radius: 26px !important;
  background: linear-gradient(135deg, #ffffff, #fff7ed) !important;
  border-color: rgba(245, 158, 11, 0.24) !important;
  box-shadow: 0 24px 50px rgba(15, 23, 42, 0.1) !important;
}

.games-hero-card-head {
  border-bottom: 1px dashed rgba(251, 113, 133, 0.35);
  padding-bottom: 0.65rem;
  margin-bottom: 0.65rem;
}

.games-hero-card h3 {
  font-size: 1.6rem;
  letter-spacing: -0.02em;
}

.games-hero-menu {
  gap: 0.85rem;
}

.games-hero-card .games-picker-item {
  border-radius: 20px !important;
  padding: 0.85rem 1rem 0.85rem 1.2rem;
  background: linear-gradient(135deg, #ffffff, #f0f9ff) !important;
  border-color: rgba(56, 189, 248, 0.28) !important;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.games-picker-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  flex: 1;
}

.games-picker-subtitle {
  display: block;
  margin-top: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748b;
}

.games-hero-card .games-picker-item::before {
  inset: 0 auto 0 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(180deg, rgba(20, 184, 166, 0.8), rgba(251, 113, 133, 0.7));
  opacity: 0.85;
}

.games-hero-card .games-picker-item:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 18px 32px rgba(20, 184, 166, 0.16) !important;
}

.games-hero-card .games-picker-item.is-active {
  background: linear-gradient(135deg, #ecfeff, #ffe4e6) !important;
  border-color: rgba(251, 113, 133, 0.5) !important;
  box-shadow: 0 18px 34px rgba(251, 113, 133, 0.18) !important;
}

.games-hero-card .games-picker-item--featured {
  background: linear-gradient(135deg, #fff7ed, #ffedd5) !important;
  border-color: rgba(245, 158, 11, 0.45) !important;
}

.games-hero-card .games-picker-item--featured.is-active {
  background: linear-gradient(135deg, #ffedd5, #fde68a) !important;
  border-color: rgba(245, 158, 11, 0.6) !important;
}

.games-page .games-picker-dot {
  background: #0f766e;
  box-shadow: 0 0 0 6px rgba(20, 184, 166, 0.2);
}

.games-picker-dot--featured {
  background: #f97316;
  box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.22);
}

.games-page .games-picker-active {
  background: rgba(251, 113, 133, 0.18) !important;
  border-color: rgba(251, 113, 133, 0.4) !important;
  color: #be123c !important;
}

.games-page .level-select {
  gap: 0.7rem;
}

.games-page .level-select-trigger {
  background: linear-gradient(135deg, #ffffff, #fef3c7, #ecfeff) !important;
  border: 2px solid rgba(245, 158, 11, 0.35) !important;
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.14),
    0 0 0 3px rgba(245, 158, 11, 0.12) !important;
}

.games-page .level-select-label {
  font-weight: 800;
  color: var(--games-ink);
}

.games-page .level-select-arrow {
  border-right-color: #f97316;
  border-bottom-color: #f97316;
}

.games-page .level-select--open .level-select-trigger {
  border-color: rgba(20, 184, 166, 0.6) !important;
  box-shadow: 0 20px 38px rgba(15, 23, 42, 0.18),
    0 0 0 3px rgba(20, 184, 166, 0.2) !important;
}

.games-page .level-select-menu {
  background: linear-gradient(180deg, #ffffff, #fff7ed) !important;
  border: 2px solid rgba(251, 113, 133, 0.25) !important;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.16) !important;
}

.games-page .level-select-menu .courses-level-tab {
  border-radius: 16px;
  background: linear-gradient(135deg, #ffffff, #fdf2f8) !important;
  border: 1px solid rgba(251, 113, 133, 0.3) !important;
}

.games-page .courses-level-tab--active:not(.courses-level-tab--upgrade):not(.courses-level-tab--coming) {
  background: linear-gradient(135deg, #ecfeff, #ffe4e6) !important;
  border-color: rgba(20, 184, 166, 0.45) !important;
  box-shadow: 0 14px 28px rgba(20, 184, 166, 0.18) !important;
}

.games-page .courses-level-tab--upgrade {
  background: linear-gradient(135deg, #fff7ed, #fde68a) !important;
  border-color: rgba(245, 158, 11, 0.55) !important;
  color: #92400e !important;
}

.games-page .courses-level-tab--active.courses-level-tab--upgrade {
  background: linear-gradient(135deg, #ffedd5, #fde68a) !important;
  border-color: rgba(245, 158, 11, 0.65) !important;
  box-shadow: 0 14px 28px rgba(245, 158, 11, 0.2) !important;
}

.games-page .courses-level-tab--active .badge {
  background: rgba(20, 184, 166, 0.18) !important;
  border-color: rgba(20, 184, 166, 0.35) !important;
  color: var(--games-teal-strong) !important;
}

.games-page .courses-level-tab--upgrade .badge {
  background: rgba(245, 158, 11, 0.18) !important;
  border-color: rgba(245, 158, 11, 0.45) !important;
  color: #92400e !important;
}

.games-page .courses-level-tab--active.courses-level-tab--upgrade .badge {
  background: rgba(245, 158, 11, 0.2) !important;
  border-color: rgba(245, 158, 11, 0.55) !important;
  color: #92400e !important;
}

.games-page .courses-level-tab--coming {
  background: #f8fafc !important;
  border-color: rgba(148, 163, 184, 0.35) !important;
  color: #64748b !important;
}

.games-page .courses-level-tab--active.courses-level-tab--coming {
  background: #f8fafc !important;
  border-color: rgba(148, 163, 184, 0.5) !important;
  box-shadow: none !important;
}

.games-page .courses-level-tab--active.courses-level-tab--coming .badge {
  background: rgba(148, 163, 184, 0.2) !important;
  border-color: rgba(148, 163, 184, 0.35) !important;
  color: #64748b !important;
}

.games-page .game-card {
  border-radius: 22px !important;
  background: linear-gradient(145deg, #ffffff, #f8fafc) !important;
  border-color: rgba(148, 163, 184, 0.24) !important;
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.08) !important;
}

.game-title-de {
  margin: 0.15rem 0 0.35rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #64748b;
}

.games-page .game-card--active {
  border-color: rgba(20, 184, 166, 0.5) !important;
  box-shadow: 0 22px 42px rgba(20, 184, 166, 0.18) !important;
}

.games-page .game-card--featured {
  border-color: rgba(245, 158, 11, 0.45) !important;
}

.games-page .games-panel {
  border-radius: 28px !important;
  background: linear-gradient(180deg, #ffffff, #fff7ed) !important;
  border-color: rgba(20, 184, 166, 0.22) !important;
  box-shadow: 0 28px 60px rgba(15, 23, 42, 0.12) !important;
}

.games-page .games-panel::before {
  background: radial-gradient(circle at 20% 20%, rgba(20, 184, 166, 0.22), transparent 60%) !important;
}

.games-page .games-panel-label {
  color: var(--games-teal-strong) !important;
}

.games-page .games-panel-subtitle {
  color: var(--games-muted) !important;
}

.games-panel-title-de {
  margin-top: 0.2rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: #475569;
}

.games-page .games-progress {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(20, 184, 166, 0.22) !important;
}

.games-page .games-progress-track {
  background: rgba(20, 184, 166, 0.15) !important;
}

.games-page .games-progress-fill {
  background: linear-gradient(90deg, #14b8a6, #38bdf8) !important;
}

.games-page .games-question-card {
  border-radius: 24px !important;
  background: linear-gradient(135deg, #ecfeff, #ffffff) !important;
  border-color: rgba(56, 189, 248, 0.3) !important;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.1) !important;
}

.games-page .games-question-card::after {
  background: radial-gradient(circle, rgba(251, 113, 133, 0.16), transparent 70%) !important;
}

.games-page .games-question-chip {
  background: rgba(20, 184, 166, 0.16) !important;
  border-color: rgba(20, 184, 166, 0.36) !important;
  color: var(--games-teal-strong) !important;
}

.games-page .games-question-translation {
  background: rgba(56, 189, 248, 0.12) !important;
  border-color: rgba(56, 189, 248, 0.28) !important;
}

.games-page .games-answer-grid {
  gap: 0.75rem;
}

.games-page .games-panel .quiz-answer {
  border-radius: 14px;
  background: linear-gradient(135deg, #ffffff, #f8fafc) !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.games-page .games-panel .quiz-answer:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.1) !important;
}

.games-page .games-panel .quiz-answer--selected {
  border-color: rgba(20, 184, 166, 0.45) !important;
  box-shadow: 0 12px 24px rgba(20, 184, 166, 0.18) !important;
}

.games-page .games-panel .quiz-answer--correct {
  border-color: rgba(34, 197, 94, 0.5) !important;
  background: linear-gradient(135deg, #dcfce7, #f0fdf4) !important;
}

.games-page .games-panel .quiz-answer--wrong {
  border-color: rgba(239, 68, 68, 0.45) !important;
  background: linear-gradient(135deg, #fee2e2, #fef2f2) !important;
}

.games-page .games-input {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 16px;
  padding: 0.7rem;
}

.games-page .games-input-field {
  background: #ffffff !important;
  border-color: rgba(148, 163, 184, 0.3) !important;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.06) !important;
}

.games-page .games-input-field:focus {
  border-color: rgba(251, 113, 133, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(251, 113, 133, 0.18) !important;
}

.games-page .games-drag-zone {
  background: #ffffff !important;
  border-color: rgba(56, 189, 248, 0.32) !important;
}

.games-page .games-drag-option {
  background: linear-gradient(135deg, #ffffff, #f1f5f9) !important;
  border-color: rgba(56, 189, 248, 0.25) !important;
}

.games-page .games-drag-option.is-selected {
  border-color: rgba(251, 113, 133, 0.5) !important;
  box-shadow: 0 10px 20px rgba(251, 113, 133, 0.16) !important;
}

.games-page .games-feedback {
  background: #f8fafc !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
}

.games-page .games-feedback--correct {
  background: linear-gradient(135deg, #dcfce7, #f0fdf4) !important;
  border-color: rgba(34, 197, 94, 0.4) !important;
}

.games-page .games-feedback--wrong {
  background: linear-gradient(135deg, #fee2e2, #fef2f2) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
}

.games-page .games-result-card {
  border-radius: 22px !important;
  background: linear-gradient(135deg, #ffffff, #f0f9ff) !important;
  border-color: rgba(56, 189, 248, 0.22) !important;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.1) !important;
}

.games-page .games-locked-card {
  border-radius: 22px !important;
  background: linear-gradient(135deg, #fff7ed, #fde68a) !important;
  border-color: rgba(245, 158, 11, 0.45) !important;
  box-shadow: 0 18px 36px rgba(245, 158, 11, 0.15) !important;
}

.games-page .btn-primary {
  background: linear-gradient(135deg, #14b8a6, #38bdf8) !important;
  border-color: rgba(14, 165, 233, 0.4) !important;
  box-shadow: 0 14px 28px rgba(14, 165, 233, 0.2) !important;
}

.games-page .btn-outline {
  border-color: rgba(251, 113, 133, 0.5) !important;
  color: #be123c !important;
  background: rgba(251, 113, 133, 0.08) !important;
}

.games-page .btn-secondary {
  background: linear-gradient(135deg, #fff7ed, #ffedd5) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
}

@media (max-width: 900px) {
  .games-page {
    border-radius: 26px;
    padding: 1.6rem 1.2rem 2rem;
  }

  .games-hero {
    grid-template-columns: 1fr;
    border-radius: 24px !important;
  }

  .games-hero-text {
    padding: 1rem 1.1rem;
  }

  .games-hero-card {
    padding: 1rem;
  }

  .games-hero-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .games-shell {
    grid-template-columns: 1fr;
  }

  .games-panel {
    padding: 1.2rem;
    border-radius: 22px !important;
  }

  .games-question-card {
    padding: 1rem;
  }

  .games-page .btn-primary,
  .games-page .btn-outline,
  .games-page .btn-secondary {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .games-hero-menu {
    grid-template-columns: 1fr;
  }

  .games-hero-card .games-picker-item {
    min-height: 72px;
  }

  .games-picker-subtitle {
    font-size: 0.74rem;
  }

  .games-panel-header h2 {
    font-size: 1.2rem;
  }

  .games-panel-title-de {
    font-size: 0.88rem;
  }

  .games-question-text {
    font-size: 1.05rem;
  }

  .games-progress {
    padding: 0.55rem 0.7rem;
  }

  .games-page .level-select-menu .courses-level-tab {
    font-size: 0.92rem;
  }

  .game-title-de {
    font-size: 0.86rem;
  }
}

/* ===========================
   HOME MODERN PALETTE
   =========================== */

.home-page {
  --home-ink: #0b1220;
  --home-muted: #475569;
  --home-accent: #00c0c0;
  --home-accent-strong: #0080a0;
  --home-warm: #0060a0;
  --home-card: rgba(255, 255, 255, 0.92);
  --home-card-border: rgba(0, 128, 160, 0.2);
  --home-card-shadow: 0 20px 40px rgba(15, 23, 42, 0.12);
  background:
    radial-gradient(circle at 12% 12%, rgba(0, 192, 192, 0.24), transparent 42%),
    radial-gradient(circle at 90% 10%, rgba(0, 96, 160, 0.18), transparent 42%),
    linear-gradient(140deg, #f9feff 0%, #eaf6f7 45%, #e7f1fb 100%) !important;
  border-color: rgba(0, 128, 160, 0.2) !important;
  box-shadow: 0 36px 90px rgba(15, 23, 42, 0.12) !important;
}

.home-page::before {
  background:
    radial-gradient(circle at 12% 14%, rgba(0, 192, 192, 0.24), transparent 42%),
    radial-gradient(circle at 86% 12%, rgba(0, 128, 160, 0.2), transparent 46%),
    radial-gradient(circle at 28% 82%, rgba(160, 224, 224, 0.32), transparent 55%);
}

.home-page::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.06));
  filter: blur(18px);
}

.home-simple-hero {
  background:
    radial-gradient(circle at 16% 20%, rgba(128, 224, 224, 0.35), transparent 58%),
    radial-gradient(circle at 86% 22%, rgba(160, 192, 224, 0.28), transparent 58%),
    linear-gradient(135deg, #ffffff 0%, #eaf6f7 45%, #e8f1fb 100%) !important;
  border-color: rgba(0, 128, 160, 0.2) !important;
  box-shadow: 0 30px 64px rgba(15, 23, 42, 0.12) !important;
}

.home-page .home-simple-hero::before {
  content: "" !important;
  position: absolute;
  top: -120px;
  right: -160px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(0, 192, 192, 0.28), transparent 65%);
  pointer-events: none;
}

.home-page .home-simple-hero::after {
  content: "" !important;
  position: absolute;
  bottom: -160px;
  left: -150px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(0, 96, 160, 0.22), transparent 66%);
  pointer-events: none;
}

.home-page .home-brand-word {
  color: var(--home-ink);
  font-weight: 700;
}

.home-page .home-brand-mark {
  background: linear-gradient(135deg, #00c0c0, #0060a0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 10px 22px rgba(0, 192, 192, 0.22);
}

.home-page .home-simple-title,
.home-page .home-simple-actions-title {
  color: var(--home-ink) !important;
}

.home-page .home-simple-subtitle {
  color: var(--home-muted) !important;
}

.home-page .btn-primary {
  background: linear-gradient(135deg, #0060a0, #00c0c0);
  border-color: transparent;
  box-shadow: 0 16px 30px rgba(0, 128, 160, 0.24);
}

.home-page .btn-primary:hover {
  background: linear-gradient(135deg, #0080a0, #00c0c0);
}

.home-page .home-hero-desktop-card {
  border-color: var(--home-card-border);
  background: var(--home-card);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.1);
}

.home-page .home-hero-desktop-card::before {
  background: radial-gradient(circle, rgba(0, 192, 192, 0.24), transparent 70%);
}

.home-page .home-hero-desktop-card--primary {
  border-color: rgba(0, 128, 160, 0.35);
  background:
    linear-gradient(135deg, rgba(128, 224, 224, 0.35), rgba(160, 192, 224, 0.28)),
    rgba(255, 255, 255, 0.95);
  box-shadow: 0 22px 44px rgba(0, 128, 160, 0.18);
}

.home-page .home-hero-desktop-pill {
  background: rgba(0, 192, 192, 0.2);
  color: #0060a0;
  border-color: rgba(0, 128, 160, 0.4);
}

.home-page .home-hero-highlight {
  border-color: var(--home-card-border);
  background: var(--home-card);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1);
}

.home-page .home-hero-highlight::before {
  background: radial-gradient(circle, var(--highlight-glow), transparent 72%);
}

.home-page .home-hero-highlight-kicker {
  color: var(--highlight-accent);
}

.home-page .home-hero-highlight--practice {
  --highlight-accent: #00c0c0;
  --highlight-glow: rgba(0, 192, 192, 0.24);
}

.home-page .home-hero-highlight--games {
  --highlight-accent: #0080a0;
  --highlight-glow: rgba(0, 128, 160, 0.22);
}

.home-page .home-hero-highlight--test {
  --highlight-accent: #0060a0;
  --highlight-glow: rgba(0, 96, 160, 0.2);
}

.home-page .home-hero-highlight--account {
  --highlight-accent: #00c0c0;
  --highlight-glow: rgba(160, 224, 224, 0.28);
}

.home-page .home-showcase-install {
  border-color: rgba(0, 128, 160, 0.32);
  background:
    linear-gradient(135deg, rgba(128, 224, 224, 0.35), rgba(160, 192, 224, 0.22)),
    #ffffff;
  box-shadow: 0 20px 40px rgba(0, 128, 160, 0.2);
}

.home-page .home-showcase-install-pill {
  background: linear-gradient(120deg, #00c0c0, #0080a0);
  box-shadow: 0 12px 20px rgba(0, 128, 160, 0.24);
}

.home-page .home-install-choice-btn {
  border-color: rgba(0, 128, 160, 0.45);
}

.home-page .home-install-choice-btn:hover {
  box-shadow: 0 10px 18px rgba(0, 128, 160, 0.18);
  border-color: rgba(0, 128, 160, 0.7);
}

.home-page .home-install-choice-btn.is-active {
  border-color: rgba(0, 128, 160, 0.75);
  background: linear-gradient(120deg, rgba(0, 192, 192, 0.22), rgba(0, 96, 160, 0.18));
  box-shadow: 0 12px 20px rgba(0, 128, 160, 0.2);
}

/* Courses + Exercises palette v2 */
.courses-page {
  background: linear-gradient(145deg, #fff2dc 0%, #f7d9be 35%, #d9f4ee 70%, #e3edf9 100%) !important;
  border: 1px solid rgba(91, 72, 46, 0.18) !important;
  box-shadow: 0 30px 70px rgba(35, 44, 61, 0.18) !important;
}

.courses-page::before {
  background: radial-gradient(circle at 12% 12%, rgba(245, 158, 11, 0.22), transparent 52%),
    radial-gradient(circle at 90% 8%, rgba(20, 184, 166, 0.22), transparent 52%),
    radial-gradient(circle at 20% 88%, rgba(132, 169, 140, 0.22), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(239, 107, 90, 0.2), transparent 60%) !important;
}

.courses-page::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.16)) !important;
  filter: blur(18px);
}

.courses-page .courses-header {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 235, 214, 0.88)) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
}

.courses-page .courses-level-tabs {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08) !important;
}

.courses-page .courses-level-tab {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: none !important;
}

.courses-page .courses-level-tab:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

.courses-page .courses-level-tab--starter {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: none !important;
}

.courses-page .courses-level-tab--starter .level-tab-label {
  color: #0f172a !important;
}

.courses-page .courses-level-tab--starter .badge {
  background: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}

.courses-page .courses-level-tab--starter.courses-level-tab--active {
  background: #e0f2fe !important;
  border-color: #38bdf8 !important;
  color: #0f172a !important;
  box-shadow: 0 10px 20px rgba(56, 189, 248, 0.15) !important;
}

.courses-page .courses-level-tab--active:not(.courses-level-tab--upgrade):not(.courses-level-tab--coming) {
  background: #e0f2fe !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 10px 20px rgba(56, 189, 248, 0.15) !important;
  color: #0f172a !important;
}

.courses-page .courses-level-tab--active .badge {
  background: #bae6fd !important;
  color: #0f172a !important;
  border-color: #38bdf8 !important;
}

.courses-page .courses-level-tab--upgrade,
.courses-page .courses-level-tab--coming {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #64748b !important;
  box-shadow: none !important;
}

.courses-page .courses-level-tab--upgrade .badge,
.courses-page .courses-level-tab--coming .badge {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #64748b !important;
}

.courses-page .courses-level-tab--active.courses-level-tab--upgrade,
.courses-page .courses-level-tab--active.courses-level-tab--coming {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.1) !important;
}

.courses-page .courses-level-tab--active.courses-level-tab--upgrade .badge,
.courses-page .courses-level-tab--active.courses-level-tab--coming .badge {
  background: #e2e8f0 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

.courses-page .level-select,
.exercises-page .level-select {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.courses-page .level-select-trigger,
.exercises-page .level-select-trigger {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08) !important;
}

.courses-page .level-select--open .level-select-trigger,
.exercises-page .level-select--open .level-select-trigger {
  border-color: #38bdf8 !important;
  box-shadow: 0 12px 24px rgba(56, 189, 248, 0.18) !important;
}

.courses-page .level-select-label,
.exercises-page .level-select-label {
  color: #0f172a !important;
}

.courses-page .level-select-arrow,
.exercises-page .level-select-arrow {
  border-color: #475569 !important;
}

.courses-page .level-select-menu,
.exercises-page .level-select-menu {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.12) !important;
}

.courses-page .lesson-menu-bar {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(233, 249, 244, 0.92)) !important;
  border-color: rgba(20, 184, 166, 0.25) !important;
  box-shadow: 0 18px 36px rgba(35, 44, 61, 0.12) !important;
}

.courses-page .lesson-menu-pill {
  background: rgba(20, 184, 166, 0.2) !important;
  color: #0f3f35 !important;
  border-color: rgba(20, 184, 166, 0.45) !important;
}

.courses-page .lesson-menu-hint {
  background: rgba(245, 158, 11, 0.2) !important;
  color: #7c2d12 !important;
  border-color: rgba(245, 158, 11, 0.4) !important;
}

.courses-page .lesson-chip {
  background: linear-gradient(135deg, #ffffff, #eef8f2) !important;
  border-color: rgba(20, 184, 166, 0.32) !important;
  box-shadow: 0 10px 22px rgba(35, 44, 61, 0.1) !important;
}

.courses-page .lesson-chip::before {
  background: linear-gradient(180deg, #14b8a6, #f59e0b) !important;
}

.courses-page .lesson-chip-number {
  background: rgba(20, 184, 166, 0.2) !important;
  color: #0f3f35 !important;
}

.courses-page .lesson-chip--active {
  background: linear-gradient(135deg, #e6f6ff, #def7ee) !important;
  border-color: rgba(20, 184, 166, 0.6) !important;
  box-shadow: 0 16px 28px rgba(20, 184, 166, 0.22) !important;
}

.courses-page .lesson-hero,
.courses-page .courses-lesson-content,
.courses-page .lesson-menu-bar,
.courses-page .lesson-quiz,
.courses-page .lesson-summary,
.courses-page .lesson-quiz-note,
.courses-page .quiz-question-card,
.courses-page .lesson-goal,
.courses-page .lesson-button,
.courses-page .lesson-chip,
.courses-page .lesson-card {
  background: linear-gradient(180deg, #ffffff, #fbf7ef) !important;
  color: #0f172a !important;
  border-color: rgba(91, 72, 46, 0.18) !important;
  box-shadow: 0 14px 30px rgba(35, 44, 61, 0.1) !important;
}

.courses-page .lesson-button--active,
.courses-page .lesson-chip--active {
  background: linear-gradient(135deg, #e6f6ff, #def7ee) !important;
  border-color: rgba(20, 184, 166, 0.5) !important;
}

.courses-page .lesson-goal {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.18), rgba(255, 255, 255, 0.95)) !important;
  border-color: rgba(20, 184, 166, 0.35) !important;
}

.courses-page .lesson-summary {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(255, 255, 255, 0.95)) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
}

.courses-page .lesson-card--details {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(243, 234, 224, 0.55)) !important;
}

.courses-page .lesson-card--examples {
  background: linear-gradient(135deg, rgba(239, 107, 90, 0.18), rgba(255, 255, 255, 0.96)) !important;
  border-color: rgba(239, 107, 90, 0.35) !important;
}

.courses-page .lesson-card--focus {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.2), rgba(255, 255, 255, 0.96)) !important;
  border-color: rgba(20, 184, 166, 0.35) !important;
}

.courses-page .lesson-card--tip {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.16), rgba(255, 255, 255, 0.96)) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
}

.courses-page .lesson-footer-links .btn-primary {
  background: linear-gradient(135deg, #14b8a6, #f59e0b) !important;
  border-color: rgba(20, 184, 166, 0.6) !important;
}

.courses-page .lesson-footer-links .btn-secondary {
  background: linear-gradient(135deg, #ffffff, #ffe8c7) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
  color: #7c2d12 !important;
}

.courses-page .lesson-examples-toggle-btn {
  border-color: rgba(245, 158, 11, 0.45) !important;
  background: rgba(245, 158, 11, 0.16) !important;
  color: #7c2d12 !important;
}

.courses-page .lesson-menu-mobile {
  border: 2px solid rgba(20, 184, 166, 0.55) !important;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.98),
    rgba(230, 248, 242, 0.92),
    rgba(255, 241, 220, 0.9)
  ) !important;
  box-shadow: 0 22px 42px rgba(35, 44, 61, 0.18), 0 0 0 3px rgba(20, 184, 166, 0.15) !important;
}

.courses-page .lesson-menu-mobile::before {
  background: radial-gradient(circle at 20% 30%, rgba(245, 158, 11, 0.28), transparent 60%),
    radial-gradient(circle at 80% 20%, rgba(20, 184, 166, 0.26), transparent 60%) !important;
}

.courses-page .lesson-menu-mobile[open] {
  border-color: rgba(20, 184, 166, 0.7) !important;
  box-shadow: 0 26px 46px rgba(35, 44, 61, 0.2), 0 0 0 3px rgba(20, 184, 166, 0.2) !important;
}

.courses-page .lesson-menu-mobile-label {
  color: #7c2d12 !important;
  background: rgba(245, 158, 11, 0.28) !important;
  border: 1px solid rgba(245, 158, 11, 0.5) !important;
}

.courses-page .lesson-menu-mobile-item {
  border: 1px solid rgba(20, 184, 166, 0.25) !important;
  background: linear-gradient(135deg, #ffffff, #eef8f2) !important;
}

.courses-page .lesson-menu-mobile-item.is-active {
  border-color: rgba(20, 184, 166, 0.45) !important;
  background: linear-gradient(135deg, #e6f6ff, #def7ee) !important;
  box-shadow: 0 12px 22px rgba(20, 184, 166, 0.2) !important;
}

.courses-page .course-title-label {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.22), rgba(245, 158, 11, 0.18)) !important;
  border: 1px solid rgba(20, 184, 166, 0.45) !important;
  color: #0f2f2a !important;
}

.exercises-page {
  background: linear-gradient(150deg, #e7f0ff 0%, #d7f7ff 45%, #f1ffe3 100%) !important;
  border: 1px solid rgba(45, 70, 98, 0.18) !important;
  box-shadow: 0 30px 70px rgba(30, 41, 59, 0.16) !important;
}

.exercises-page::before {
  background: radial-gradient(circle at 12% 12%, rgba(37, 99, 235, 0.22), transparent 52%),
    radial-gradient(circle at 88% 8%, rgba(6, 182, 212, 0.22), transparent 52%),
    radial-gradient(circle at 18% 88%, rgba(132, 204, 22, 0.22), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(249, 115, 22, 0.2), transparent 60%) !important;
}

.exercises-page::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.16)) !important;
  filter: blur(18px);
}

.exercises-page .courses-header {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(225, 236, 255, 0.88)) !important;
  border-color: rgba(37, 99, 235, 0.3) !important;
}

.exercises-page .courses-level-tabs {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08) !important;
}

.exercises-page .courses-level-tab {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: none !important;
}

.exercises-page .courses-level-tab:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

.exercises-page .courses-level-tab--starter {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: none !important;
}

.exercises-page .courses-level-tab--starter .level-tab-label {
  color: #0f172a !important;
}

.exercises-page .courses-level-tab--starter .badge {
  background: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}

.exercises-page .courses-level-tab--starter.courses-level-tab--active {
  background: #e0f2fe !important;
  border-color: #38bdf8 !important;
  color: #0f172a !important;
  box-shadow: 0 10px 20px rgba(56, 189, 248, 0.15) !important;
}

.exercises-page .courses-level-tab--active:not(.courses-level-tab--upgrade):not(.courses-level-tab--coming) {
  background: #e0f2fe !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 10px 20px rgba(56, 189, 248, 0.15) !important;
  color: #0f172a !important;
}

.exercises-page .courses-level-tab--active .badge {
  background: #bae6fd !important;
  color: #0f172a !important;
  border-color: #38bdf8 !important;
}

.exercises-page .courses-level-tab--upgrade,
.exercises-page .courses-level-tab--coming {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #64748b !important;
  box-shadow: none !important;
}

.exercises-page .courses-level-tab--upgrade .badge,
.exercises-page .courses-level-tab--coming .badge {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #64748b !important;
}

.exercises-page .courses-level-tab--active.courses-level-tab--upgrade,
.exercises-page .courses-level-tab--active.courses-level-tab--coming {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.1) !important;
}

.exercises-page .courses-level-tab--active.courses-level-tab--upgrade .badge,
.exercises-page .courses-level-tab--active.courses-level-tab--coming .badge {
  background: #e2e8f0 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

.exercises-page .lesson-menu-bar {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(233, 246, 255, 0.9)) !important;
  border-color: rgba(6, 182, 212, 0.25) !important;
  box-shadow: 0 18px 36px rgba(30, 41, 59, 0.12) !important;
}

.exercises-page .lesson-menu-pill {
  background: rgba(37, 99, 235, 0.18) !important;
  color: #0b2a52 !important;
  border-color: rgba(37, 99, 235, 0.4) !important;
}

.exercises-page .lesson-menu-hint {
  background: rgba(132, 204, 22, 0.2) !important;
  color: #365314 !important;
  border-color: rgba(132, 204, 22, 0.4) !important;
}

.exercises-page .lesson-chip {
  background: linear-gradient(135deg, #ffffff, #eef5ff) !important;
  border-color: rgba(37, 99, 235, 0.35) !important;
  box-shadow: 0 10px 22px rgba(30, 41, 59, 0.1) !important;
}

.exercises-page .lesson-chip::before {
  background: linear-gradient(180deg, #2563eb, #84cc16) !important;
}

.exercises-page .lesson-chip-number {
  background: rgba(37, 99, 235, 0.2) !important;
  color: #0b2a52 !important;
}

.exercises-page .lesson-chip--active {
  background: linear-gradient(135deg, #dbeafe, #ecfccb) !important;
  border-color: rgba(37, 99, 235, 0.6) !important;
  box-shadow: 0 16px 28px rgba(37, 99, 235, 0.22) !important;
}

.exercises-page .lesson-hero,
.exercises-page .courses-lesson-content,
.exercises-page .lesson-menu-bar,
.exercises-page .lesson-quiz,
.exercises-page .lesson-summary,
.exercises-page .lesson-quiz-note,
.exercises-page .quiz-question-card,
.exercises-page .lesson-goal,
.exercises-page .lesson-button,
.exercises-page .lesson-chip,
.exercises-page .lesson-card,
.exercises-page .exercise-topbar,
.exercises-page .exercise-question-card {
  background: linear-gradient(180deg, #ffffff, #f5f8ff) !important;
  color: #0f172a !important;
  border-color: rgba(45, 70, 98, 0.18) !important;
  box-shadow: 0 14px 30px rgba(30, 41, 59, 0.1) !important;
}

.exercises-page .lesson-button--active,
.exercises-page .lesson-chip--active {
  background: linear-gradient(135deg, #dbeafe, #ecfccb) !important;
  border-color: rgba(37, 99, 235, 0.5) !important;
}

.exercises-page .exercise-title-label {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.22), rgba(6, 182, 212, 0.18)) !important;
  border: 1px solid rgba(37, 99, 235, 0.5) !important;
  color: #0b2a52 !important;
}

.exercises-page .exercise-question-card {
  background: linear-gradient(135deg, rgba(219, 234, 254, 0.7), rgba(236, 253, 245, 0.7)) !important;
  border-color: rgba(37, 99, 235, 0.35) !important;
}

.exercises-page .exercise-footer-links .btn-primary {
  background: linear-gradient(135deg, #2563eb, #06b6d4) !important;
  border-color: rgba(37, 99, 235, 0.6) !important;
}

.exercises-page .exercise-footer-links .btn-secondary {
  background: linear-gradient(135deg, #ffffff, #e0ecff) !important;
  border-color: rgba(37, 99, 235, 0.35) !important;
  color: #0b2a52 !important;
}

.exercises-page .lesson-menu-mobile {
  border: 2px solid rgba(37, 99, 235, 0.55) !important;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.98),
    rgba(227, 240, 255, 0.92),
    rgba(230, 255, 246, 0.9)
  ) !important;
  box-shadow: 0 22px 42px rgba(30, 41, 59, 0.18), 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

.exercises-page .lesson-menu-mobile::before {
  background: radial-gradient(circle at 20% 30%, rgba(37, 99, 235, 0.28), transparent 60%),
    radial-gradient(circle at 80% 20%, rgba(6, 182, 212, 0.26), transparent 60%) !important;
}

.exercises-page .lesson-menu-mobile[open] {
  border-color: rgba(37, 99, 235, 0.7) !important;
  box-shadow: 0 26px 46px rgba(30, 41, 59, 0.2), 0 0 0 3px rgba(37, 99, 235, 0.2) !important;
}

.exercises-page .lesson-menu-mobile-label {
  color: #0b2a52 !important;
  background: rgba(37, 99, 235, 0.2) !important;
  border: 1px solid rgba(37, 99, 235, 0.4) !important;
}

.exercises-page .lesson-menu-mobile-item {
  border: 1px solid rgba(37, 99, 235, 0.25) !important;
  background: linear-gradient(135deg, #ffffff, #eef5ff) !important;
}

.exercises-page .lesson-menu-mobile-item.is-active {
  border-color: rgba(37, 99, 235, 0.45) !important;
  background: linear-gradient(135deg, #dbeafe, #ecfccb) !important;
  box-shadow: 0 12px 22px rgba(37, 99, 235, 0.2) !important;
}
:root {
  font-family: "Manrope", sans-serif;
  line-height: 1.5;
  font-weight: 400;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: #eef2ff;
  color: #0f172a;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}