:root {
  --blc-navy: #102a43;
  --blc-blue: #1769aa;
  --blc-sky: #eaf6ff;
  --blc-green: #16845b;
  --blc-ink: #1d2939;
  --blc-muted: #667085;
  --blc-border: #d9e2ec;
  --blc-surface: #ffffff;
  --blc-shadow: 0 14px 36px rgba(16, 42, 67, .10);
}

.blc-gpa-student-dashboard,
.blc-gpa-teacher-dashboard,
#blc-gpa-lesson-player,
#blc-gpa-test,
#blc-gpa-mistakes,
#blc-gpa-my-lessons,
.blc-gpa-progress-page {
  color: var(--blc-ink);
  font-family: Inter, "Segoe UI", Arial, sans-serif !important;
}

.blc-gpa-student-dashboard,
.blc-gpa-teacher-dashboard,
#blc-gpa-lesson-player,
#blc-gpa-test,
#blc-gpa-mistakes,
#blc-gpa-my-lessons {
  max-width: 1120px !important;
  margin: 42px auto !important;
  padding: 28px !important;
  background: #f7fafc;
  border-radius: 18px;
  box-sizing: border-box;
}

.blc-gpa-student-dashboard h1,
.blc-gpa-teacher-dashboard h2,
#blc-gpa-lesson-player h2,
#blc-gpa-test h2,
#blc-gpa-mistakes h2 {
  color: var(--blc-navy);
  letter-spacing: -.02em;
}

.blc-gpa-student-dashboard a,
.blc-gpa-teacher-dashboard a,
#blc-gpa-lesson-player a,
#blc-gpa-test a,
#blc-gpa-mistakes a,
.blc-gpa-progress-page a { transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }

/* Persistent student navigation across Dashboard, Lesson, Practice, Test and Progress. */
.blc-gpa-student-navigation {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
  padding: 9px;
  border: 1px solid var(--blc-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(16, 42, 67, .06);
}
.blc-gpa-student-navigation a,
.blc-gpa-student-navigation-disabled {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 8px;
  color: #344054;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.blc-gpa-student-navigation a:hover {
  color: #fff;
  background: var(--blc-blue);
  box-shadow: 0 6px 12px rgba(23, 105, 170, .18);
}
.blc-gpa-student-navigation a.is-active {
  color: #fff;
  background: linear-gradient(135deg, #135e96, #2271b1);
  box-shadow: 0 6px 12px rgba(23, 105, 170, .22);
}
.blc-gpa-student-navigation-disabled {
  color: #98a2b3;
  cursor: not-allowed;
}

.blc-gpa-student-dashboard a:hover,
.blc-gpa-teacher-dashboard a:hover,
#blc-gpa-lesson-player button:hover,
#blc-gpa-test button:hover,
#blc-gpa-mistakes button:hover,
.blc-gpa-progress-page a:hover { transform: translateY(-1px); }

/* Student dashboard cards and actions */
.blc-gpa-student-dashboard > div,
.blc-gpa-teacher-dashboard form,
.blc-gpa-teacher-dashboard section {
  border-radius: 12px !important;
}

.blc-gpa-student-dashboard [style*="border:1px solid #ddd"] {
  background: var(--blc-surface) !important;
  border: 1px solid var(--blc-border) !important;
  box-shadow: var(--blc-shadow);
}

.blc-gpa-student-dashboard [style*="background:#f5f7fa"] {
  background: linear-gradient(145deg, #f8fbff, #eff6fb) !important;
  border: 1px solid #dceaf5;
}

.blc-gpa-student-dashboard [style*="background:#2271b1"] {
  background: linear-gradient(135deg, #135e96, #2271b1) !important;
  box-shadow: 0 8px 18px rgba(19,94,150,.20);
}

/* Lesson player */
#blc-gpa-lesson-player { box-shadow: var(--blc-shadow); }
#blc-gpa-lesson-player > div:first-child { padding: 22px; background: linear-gradient(135deg, #102a43, #1769aa); border-radius: 12px; color: #fff; }
#blc-gpa-lesson-player > div:first-child h2,
#blc-gpa-lesson-player > div:first-child p { color: #fff !important; }
#blc-gpa-lesson-progress { font-weight: 700; color: var(--blc-blue) !important; }
#blc-gpa-vocabulary-image { box-shadow: 0 16px 32px rgba(16,42,67,.15); border: 8px solid #fff; }
#blc-gpa-lesson-player button,
#blc-gpa-test button,
#blc-gpa-mistakes button,
.blc-gpa-teacher-dashboard button {
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-family: inherit !important;
}
#blc-gpa-next-vocabulary,
#blc-gpa-recognition-next,
#blc-gpa-start-test,
#blc-gpa-test-next,
#blc-gpa-start-mistake-review,
#blc-gpa-mistake-next {
  background: linear-gradient(135deg, #135e96, #2271b1) !important;
  box-shadow: 0 8px 18px rgba(19,94,150,.20);
}
#blc-gpa-recognition { background: #fff; padding: 26px; border: 1px solid var(--blc-border); border-radius: 14px; }
#blc-gpa-recognition-options button,
#blc-gpa-test-options button,
#blc-gpa-mistake-options button {
  overflow: hidden;
  border: 1px solid var(--blc-border) !important;
  background: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 5px 16px rgba(16,42,67,.08);
}
#blc-gpa-recognition-options button:hover,
#blc-gpa-test-options button:hover,
#blc-gpa-mistake-options button:hover { border-color: var(--blc-blue) !important; }

/* Test and mistake practice */
#blc-gpa-test-start,
#blc-gpa-test-area,
#blc-gpa-test-result,
#blc-gpa-mistake-start-screen,
#blc-gpa-mistake-review,
#blc-gpa-mistake-complete,
.blc-gpa-no-mistakes {
  background: #fff !important;
  border: 1px solid var(--blc-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--blc-shadow);
}
#blc-gpa-test select,
.blc-gpa-teacher-dashboard select {
  min-height: 42px;
  border: 1px solid #b8c7d9;
  border-radius: 7px;
  padding: 0 12px;
  font: inherit;
}
#blc-gpa-test-score h2 { color: var(--blc-blue); font-size: 42px; margin-bottom: 4px; }
#blc-gpa-test-feedback,
#blc-gpa-mistake-feedback { border-left: 4px solid var(--blc-blue); }

/* Teacher dashboard */
.blc-gpa-teacher-dashboard { box-shadow: var(--blc-shadow); }
.blc-gpa-teacher-dashboard table { width: 100%; background: #fff; border: 1px solid var(--blc-border); border-radius: 12px; overflow: hidden; }
.blc-gpa-teacher-dashboard th { color: #344054; background: #edf5fb !important; }
.blc-gpa-teacher-dashboard th,
.blc-gpa-teacher-dashboard td { padding: 14px !important; }

@media (max-width: 700px) {
  .blc-gpa-student-dashboard,
  .blc-gpa-teacher-dashboard,
  #blc-gpa-lesson-player,
  #blc-gpa-test,
  #blc-gpa-mistakes,
  #blc-gpa-my-lessons { margin: 18px auto !important; padding: 16px !important; border-radius: 0; }
  #blc-gpa-recognition { padding: 16px; }
  .blc-gpa-teacher-dashboard { overflow-x: auto; }
  .blc-gpa-student-navigation { gap: 5px; padding: 7px; }
  .blc-gpa-student-navigation a,
  .blc-gpa-student-navigation-disabled { min-height: 34px; padding: 0 10px; font-size: 13px; }
}