*{
  box-sizing:border-box;
  font-family:'Poppins', sans-serif;
}

body{
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  color:#26324a;
  background:
    radial-gradient(circle at 10% 10%, rgba(255, 179, 221, .45), transparent 28%),
    radial-gradient(circle at 90% 15%, rgba(169, 200, 255, .48), transparent 30%),
    radial-gradient(circle at 20% 90%, rgba(243, 198, 255, .45), transparent 28%),
    linear-gradient(135deg, #fdfaff 0%, #eef4ff 35%, #fff2fa 68%, #f7fbff 100%);
}

/* ===================== BACKGROUND ===================== */

.lava-bg{
  position:fixed;
  inset:0;
  overflow:hidden;
  z-index:0;
  pointer-events:none;
}

.blob{
  position:absolute;
  border-radius:50%;
  filter:blur(78px);
  opacity:.55;
  animation: floatBlob 16s ease-in-out infinite;
  mix-blend-mode:screen;
}

.blob-1{
  width:340px;
  height:340px;
  background:#ffadd8;
  top:3%;
  left:4%;
}

.blob-2{
  width:410px;
  height:410px;
  background:#9ec5ff;
  top:10%;
  right:5%;
  animation-delay:2s;
}

.blob-3{
  width:280px;
  height:280px;
  background:#e9c4ff;
  bottom:16%;
  left:12%;
  animation-delay:4s;
}

.blob-4{
  width:360px;
  height:360px;
  background:#b9dcff;
  bottom:4%;
  right:8%;
  animation-delay:6s;
}

.blob-5{
  width:260px;
  height:260px;
  background:#ffd1ea;
  top:48%;
  left:44%;
  animation-delay:3s;
}

@keyframes floatBlob{
  0%,100%{
    transform:translateY(0) translateX(0) scale(1);
  }

  25%{
    transform:translateY(24px) translateX(12px) scale(1.06);
  }

  50%{
    transform:translateY(-12px) translateX(26px) scale(1.12);
  }

  75%{
    transform:translateY(16px) translateX(-14px) scale(1.04);
  }
}

.page-wrap{
  position:relative;
  z-index:2;
}

/* ===================== GLASS ===================== */

.glass{
  background:rgba(255,255,255,.66) !important;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.86);
  box-shadow:
    0 20px 48px rgba(94,109,255,.12),
    0 10px 24px rgba(255,143,208,.10);
  border-radius:32px !important;
}

/* ===================== HERO ===================== */

.hero-box{
  padding:3rem !important;
  margin-top:1rem;
  margin-bottom:1.5rem !important;
  position:relative;
  overflow:hidden;
}

.hero-box::after{
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  right:-45px;
  top:-55px;
  background:radial-gradient(circle, rgba(255,255,255,.8), transparent 70%);
  border-radius:50%;
}

.hero-tag{
  background:linear-gradient(90deg,#67a9ff,#ff8fcf) !important;
  color:white !important;
  border:none !important;
  font-weight:800 !important;
  box-shadow:0 8px 20px rgba(94,168,255,.22);
  margin-bottom:1.2rem !important;
  padding:.9rem 1.25rem !important;
}

.author-line{
  color:#7b52c7;
  font-weight:700;
  margin:0 0 1rem 0;
}

.main-title{
  color:#3555a6 !important;
  font-size:3.8rem;
  line-height:1.06;
  margin-top:0 !important;
  margin-bottom:1rem !important;
}

.main-subtitle{
  color:#a04fa8 !important;
  font-weight:700 !important;
  line-height:1.35;
  margin-top:0 !important;
  margin-bottom:1.4rem !important;
}

.hero-text{
  color:#4b5563;
  line-height:1.95;
  max-width:980px;
}

/* ===================== CONTROLS ===================== */

.control-box,
.tabs-box,
.progress-box{
  padding:1.25rem !important;
  margin-bottom:1.35rem !important;
}

.search-label{
  color:#4f58b2;
  font-weight:800;
}

.search-input{
  border-radius:20px;
  border:1px solid rgba(103,169,255,.38);
  background:rgba(255,255,255,.82);
  box-shadow:0 8px 18px rgba(103,169,255,.08);
}

.search-input:focus{
  border-color:#a78bfa;
  box-shadow:0 0 0 3px rgba(167,139,250,.18);
}

.reset-btn,
.back-btn,
.lesson-check-btn,
.check-btn{
  background:linear-gradient(90deg,#67a9ff,#ff8fcf) !important;
  color:white !important;
  border:none !important;
  font-weight:800;
  border-radius:999px !important;
  transition:.25s ease;
  box-shadow:0 10px 22px rgba(103,169,255,.18);
}

.reset-btn:hover,
.back-btn:hover,
.lesson-check-btn:hover,
.check-btn:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 14px 26px rgba(255,143,207,.22);
}

/* ===================== TABS ===================== */

.custom-tabs a{
  color:#5360b8 !important;
  font-weight:800;
}

.custom-tabs li.is-active a{
  background:linear-gradient(90deg,#67a9ff,#ff8fcf) !important;
  color:white !important;
  border:none !important;
  box-shadow:0 10px 20px rgba(103,169,255,.18);
}

/* ===================== PROGRESS ===================== */

.progress-label{
  font-size:1rem;
  font-weight:800;
  color:#5f65ba;
  margin-bottom:.35rem;
}

.custom-progress{
  background:#f4ebff !important;
}

.custom-progress::-webkit-progress-bar{
  background:#f4ebff;
  border-radius:999px;
}

.custom-progress::-webkit-progress-value{
  background:linear-gradient(90deg,#67a9ff,#ff8fcf);
  border-radius:999px;
}

.custom-progress::-moz-progress-bar{
  background:linear-gradient(90deg,#67a9ff,#ff8fcf);
  border-radius:999px;
}

.counter-tag{
  background:linear-gradient(90deg,#dceaff,#ffe2f1) !important;
  color:#5360b8 !important;
  font-weight:800;
  border:none !important;
}

/* ===================== LEVEL HEADER ===================== */

.level-header{
  margin-bottom:1.2rem !important;
  padding:1.8rem !important;
}

.level-title{
  color:#3555a6 !important;
  margin-bottom:.5rem !important;
}

.level-description{
  color:#596579;
  line-height:1.8;
}

/* ===================== TOPIC CARDS ===================== */

.topic-card{
  margin-bottom:1rem;
  border-radius:26px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(249,248,255,.96));
  border:1px solid rgba(255,255,255,.88);
  box-shadow:0 14px 28px rgba(93,98,255,.09);
  transition:.28s ease;
}

.topic-card:hover{
  transform:translateY(-4px) scale(1.01);
  box-shadow:0 22px 38px rgba(236,72,153,.12);
}

.topic-card.completed{
  background:linear-gradient(180deg, rgba(235,244,255,.96), rgba(255,233,246,.97));
  opacity:.88;
}

.topic-card.completed .topic-name{
  text-decoration:line-through;
}

.topic-header{
  padding:1.25rem 1.35rem;
  display:flex;
  align-items:center;
  gap:1rem;
  cursor:pointer;
}

.topic-check{
  width:21px;
  height:21px;
  accent-color:#8b5cf6;
  cursor:pointer;
  flex-shrink:0;
}

.topic-main{
  flex:1;
}

.topic-topline{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
}

.topic-name{
  font-size:1.08rem;
  font-weight:800;
  color:#3f4fb3;
}

.topic-tag{
  background:linear-gradient(90deg,#dceaff,#ffe3f2);
  color:#5961b9;
  border:none;
  font-weight:700;
}

.topic-summary{
  margin-top:.4rem;
  color:#667085;
  line-height:1.65;
}

.open-lesson{
  margin-top:.75rem;
  color:#7b52c7;
  font-weight:800;
  display:inline-block;
}

.topic-card:hover .open-lesson{
  text-decoration:underline;
}

.hidden{
  display:none;
}

/* ===================== LESSON ===================== */

.lesson-view{
  margin-top:1rem;
}

.lesson-hero{
  padding:2.1rem !important;
  margin-bottom:1.3rem !important;
}

.lesson-title{
  color:#3555a6 !important;
  font-size:2.45rem;
  line-height:1.15;
  margin-bottom:.8rem !important;
}

.lesson-subtitle{
  color:#a04fa8;
  font-weight:700;
  line-height:1.6;
}

/* ===================== DIFFERENT LESSON LAYOUTS ===================== */

.lesson-card-grid{
  display:grid;
  gap:1.15rem;
  margin-bottom:1rem;
  counter-reset: lessonCard;
}

.lesson-card-grid.layout-grammar{
  grid-template-columns:1.2fr 1fr;
}

.lesson-card-grid.layout-vocabulary{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.lesson-card-grid.layout-speaking{
  grid-template-columns:1fr 1fr;
}

.lesson-card-grid.layout-pronunciation{
  grid-template-columns:1fr 1fr;
}

.lesson-card-grid.layout-writing{
  grid-template-columns:1fr 1fr;
}

.lesson-card-grid.layout-perfect{
  grid-template-columns:1.3fr 1fr;
}

.lesson-card-grid.layout-wide{
  grid-template-columns:1fr 1fr;
}

/* ===================== LESSON CARDS ===================== */

.lesson-card{
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(249,248,255,.97));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 14px 28px rgba(93,98,255,.09);
  border-radius:26px;
  padding:1.35rem;
  min-height:205px;
  cursor:pointer;
  transition:.25s ease;
  overflow:hidden;
}

.lesson-card::before{
  counter-increment: lessonCard;
  content:counter(lessonCard);
  position:absolute;
  right:18px;
  top:16px;
  width:42px;
  height:42px;
  border-radius:50%;
  background:linear-gradient(135deg,#dceaff,#ffe2f1);
  color:#6d5bc5;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  box-shadow:0 8px 18px rgba(93,98,255,.12);
}

.lesson-card:hover,
.lesson-card.active-card{
  transform:scale(1.028) translateY(-5px);
  box-shadow:0 24px 42px rgba(236,72,153,.14);
}

.lesson-card h3{
  color:#5360b8;
  font-weight:800;
  margin-bottom:.95rem;
  font-size:1.2rem;
  padding-right:3rem;
}

.lesson-card p,
.lesson-card li{
  color:#4b5563;
  line-height:1.8;
}

.lesson-card ul{
  margin-left:1.2rem;
}

.lesson-card li{
  margin-bottom:.45rem;
}

.card-mini-label{
  display:inline-block;
  background:linear-gradient(90deg,#dceaff,#ffe2f1);
  color:#5f4bb6;
  font-weight:800;
  border-radius:999px;
  padding:.38rem .85rem;
  margin-bottom:.85rem;
  font-size:.8rem;
}

.concept-card{
  background:linear-gradient(135deg, rgba(255,255,255,.95), rgba(232,240,255,.96));
}

.form-card{
  background:linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,235,247,.96));
}

.use-card{
  background:linear-gradient(135deg, rgba(255,255,255,.95), rgba(239,246,255,.96));
}

.mistake-card{
  background:linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,241,242,.96));
}

.example-card{
  background:linear-gradient(135deg, rgba(255,255,255,.95), rgba(245,243,255,.96));
}

.practice-card-full{
  background:linear-gradient(135deg, rgba(255,255,255,.97), rgba(240,249,255,.98));
}

.full-width-card{
  grid-column:1 / -1;
}

.mini-formula{
  background:linear-gradient(90deg, rgba(220,234,255,.9), rgba(255,226,241,.9));
  padding:.85rem 1rem;
  border-radius:16px;
  font-weight:800;
  color:#374151;
  margin:.7rem 0;
}

.example-pill{
  background:linear-gradient(90deg, rgba(220,234,255,.78), rgba(255,226,241,.78));
  padding:.85rem 1rem;
  border-radius:17px;
  margin-bottom:.6rem;
  color:#374151;
  font-weight:600;
  border:1px solid rgba(255,255,255,.8);
}

.bad-example{
  background:#fee2e2;
  color:#991b1b;
  padding:.75rem .9rem;
  border-radius:14px;
  margin-bottom:.5rem;
  font-weight:700;
}

.good-example{
  background:#dcfce7;
  color:#166534;
  padding:.75rem .9rem;
  border-radius:14px;
  margin-bottom:.5rem;
  font-weight:700;
}

/* ===================== EXERCISES ===================== */

.practice-intro{
  color:#5b6475;
  line-height:1.8;
  margin-bottom:1rem;
}

.exercise-card{
  background:rgba(255,255,255,.86);
  border-radius:20px;
  padding:1.1rem;
  margin-bottom:1rem;
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 10px 20px rgba(93,98,255,.06);
}

.exercise-number{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:50%;
  background:linear-gradient(135deg,#67a9ff,#ff8fcf);
  color:white;
  font-weight:900;
  margin-right:.5rem;
}

.exercise-question{
  color:#3f4fb3;
  font-weight:800;
  margin-bottom:.6rem;
}

.exercise-card select{
  margin-top:.7rem;
  border-radius:14px;
  padding:.6rem .8rem;
  border:1px solid rgba(103,169,255,.35);
  background:white;
  min-width:230px;
  color:#374151;
}

.exercise-card select:focus{
  outline:none;
  border-color:#a78bfa;
  box-shadow:0 0 0 3px rgba(167,139,250,.16);
}

.sentence-line{
  background:linear-gradient(90deg, rgba(220,234,255,.78), rgba(255,226,241,.78));
  padding:.85rem 1rem;
  border-radius:17px;
  margin:.7rem 0;
  color:#374151;
  font-weight:700;
}

.feedback{
  margin-top:.75rem;
  font-weight:900;
  padding:.75rem .95rem;
  border-radius:15px;
  display:none;
}

.feedback.correct,
.feedback.incorrect{
  display:block;
}

.correct{
  color:#166534;
  background:#dcfce7;
  border:1px solid rgba(34,197,94,.25);
}

.incorrect{
  color:#991b1b;
  background:#fee2e2;
  border:1px solid rgba(239,68,68,.25);
}

.explanation-feedback{
  margin-top:.55rem;
  color:#596579;
  line-height:1.65;
  font-size:.95rem;
  background:rgba(255,255,255,.75);
  border-radius:14px;
  padding:.75rem .9rem;
  display:none;
}

.explanation-feedback.show{
  display:block;
}

.no-results{
  padding:2rem;
  text-align:center;
  color:#6b7280;
  font-weight:700;
}

/* ===================== FOOTER ===================== */

.footer-box{
  margin-top:1.5rem;
  padding:1rem !important;
  color:#655fb0;
  font-weight:800;
}

@media screen and (max-width:768px){
  .hero-box{
    padding:1.6rem !important;
  }

  .main-title{
    font-size:2.35rem;
  }

  .lesson-card-grid.layout-grammar,
  .lesson-card-grid.layout-vocabulary,
  .lesson-card-grid.layout-speaking,
  .lesson-card-grid.layout-pronunciation,
  .lesson-card-grid.layout-writing,
  .lesson-card-grid.layout-perfect,
  .lesson-card-grid.layout-wide{
    grid-template-columns:1fr;
  }

  .topic-header{
    align-items:flex-start;
  }

  .lesson-title{
    font-size:1.9rem;
  }

  .exercise-card select{
    width:100%;
  }
}