.mentor-card-identity {
  min-width: 0;
  flex: 1;
}

.mentor-card-name {
  margin: 0 0 4px;
  font-weight: 700;
  font-size: 0.95rem;
  color: #143456;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mentor-card-level {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.mentor-card-contacts {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mentor-card-contact {
  font-size: 0.82rem;
  color: #35536f;
}

.mentor-card-info {
  margin: 0;
  font-size: 0.82rem;
  color: #5a7fa0;
  line-height: 1.4;
}

.mentor-card-actions {
  margin-top: auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.mentor-card-edit,
.mentor-card-view-students {
  align-self: flex-start;
}

.mentor-card-view-students {
  background: #eef3f8;
  color: #16395d;
}

[data-theme="dark"] .mentor-card-view-students {
  background: rgba(255, 255, 255, 0.06);
  color: #cfe0f5;
}

.mentor-students-row {
  cursor: pointer;
}

[data-theme="dark"] .mentor-card {
  background: #0e1e30;
  border-color: #1a2f48;
}
[data-theme="dark"] .mentor-card-name { color: #d0e4f7; }
[data-theme="dark"] .mentor-card-contact { color: #7fa3c0; }
[data-theme="dark"] .mentor-card-info { color: #5a7fa0; }

.admin-org-avatar {
  background: linear-gradient(135deg, #6d5bd0, #3f2f8c) !important;
  font-size: 1.3rem;
}

.admin-org-info-flag-image {
  width: 48px;
  height: 32px;
  border-radius: 4px;
  object-fit: cover;
  border: 1px solid #d9e1ee;
}

.admin-org-card .mentor-card-head {
  align-items: flex-start;
}

.admin-org-add-card {
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 140px;
  border: 2px dashed #b9cbe0;
  background: transparent;
  color: #16395d;
  cursor: pointer;
  font: inherit;
}
.admin-org-add-card:hover {
  border-color: #4a7fc9;
  background: #eef3f8;
}
.admin-org-add-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: linear-gradient(135deg, #2fae60, #1f7a43);
}
.admin-org-add-label {
  font-size: 0.9rem;
  font-weight: 600;
}
[data-theme="dark"] .admin-org-add-card {
  border-color: rgba(255, 255, 255, 0.18);
  color: #cfe0f5;
}
[data-theme="dark"] .admin-org-add-card:hover {
  border-color: #4a7fc9;
  background: rgba(255, 255, 255, 0.06);
}

.admin-org-info-account-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.admin-org-info-account-actions .admin-org-add-card {
  min-height: 96px;
}

.admin-org-admin-delete-btn {
  flex-shrink: 0;
  padding: 6px 10px;
  font-size: 0.85rem;
}

.admin-org-license-badge {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

/* School admin's own dashboard summary card head row (name/flag/license) -
   same license badge tones as the super-admin's own organizations panel,
   just laid out inline next to the school's name instead of on a card. */
.school-summary-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.school-summary-flag {
  font-size: 1.6rem;
  line-height: 1;
}

.school-summary-name {
  margin: 0;
  font-size: 1.25rem;
  flex: 1;
  min-width: 120px;
}

.school-summary-head .admin-org-license-badge {
  margin-top: 0;
}

.school-summary-head .school-homework-toggle {
  margin-left: auto;
}

/* Wider auto-fit variant of .profile-grid, specific to the school
   dashboard summary - 3 clickable tiles should fill one row on wide
   screens instead of leaving a lonely half-empty row (the shared
   .profile-grid's fixed 2-column layout is used elsewhere - e.g.
   parent.html, the student's own profile modal - and isn't touched). */
.school-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

/* Clickable variant of .profile-stat-card - the school dashboard's
   Classes/Students/Average progress tiles double as the actual entry point
   into class management, instead of a separate, redundant pill button
   elsewhere on the page. Keeps .profile-stat-card's own background/border/
   padding (author rules already win over the <button> UA stylesheet, no
   need for `all: unset` - that would fight this file's own cascade
   position against modals-calendar-profile.css, which is loaded earlier),
   just resets the handful of button-specific quirks and adds an
   interactive hover/focus affordance. */
.profile-stat-card-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  color: inherit;
  width: 100%;
  min-height: 160px;
  padding: 28px 22px;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(.2, .8, .2, 1), box-shadow 0.18s ease, border-color 0.18s ease;
}

.profile-stat-card-btn:hover,
.profile-stat-card-btn:focus-visible {
  transform: translateY(-3px);
  border-color: #f0b429;
  box-shadow: 0 10px 24px rgba(15, 42, 69, 0.14);
}

.profile-stat-card-btn .pscb-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #b4790f;
  margin-bottom: 4px;
}

[data-theme="dark"] .profile-stat-card-btn .pscb-icon {
  color: #f0b429;
}

.profile-stat-card-btn .pscb-title {
  display: block;
  margin: 0;
  font-size: 1rem;
  letter-spacing: 0.2px;
  color: #4f657b;
  font-weight: 600;
}

.profile-stat-card-btn .pscb-value {
  display: block;
  font-size: 2.4rem;
  font-weight: 800;
  color: #16395d;
}

[data-theme="dark"] .profile-stat-card-btn:hover,
[data-theme="dark"] .profile-stat-card-btn:focus-visible {
  border-color: #f0b429;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .profile-stat-card-btn .pscb-title {
  color: #6f8aa8;
}

[data-theme="dark"] .profile-stat-card-btn .pscb-value {
  color: #e8f0ff;
}

/* School dashboard page itself (school.html, not a modal) - #school-summary
   is unique to this page, so these are safe without the .school-modal-card
   scoping gymnastics the modals need; .admin-head/.profile-stat-card-btn/
   .admin-toggle-switch below are shared with mentor.html and other pages,
   so those three stay scoped through #school-summary/[data-school-admin-page]
   rather than touched at the base rule. Icon color (.pscb-icon, amber) was
   already warm and needed no change. */
[data-school-admin-page] .admin-head {
  border-color: rgba(111, 78, 55, 0.18);
  background: linear-gradient(180deg, #faf3e8 0%, #f2e6d3 100%);
}

[data-school-admin-page] .admin-head h1 {
  color: #3b2a1e;
}

[data-school-admin-page] .admin-head p {
  color: #7a6553;
}

[data-theme="dark"] [data-school-admin-page] .admin-head {
  border-color: rgba(45, 212, 191, 0.2);
  background: linear-gradient(180deg, rgba(20, 46, 42, 0.6) 0%, rgba(14, 32, 30, 0.6) 100%);
}

[data-theme="dark"] [data-school-admin-page] .admin-head h1 {
  color: #eef7f6;
}

[data-theme="dark"] [data-school-admin-page] .admin-head p {
  color: #a9c2c2;
}

#school-summary .school-summary-name {
  color: #3b2a1e;
}

[data-theme="dark"] #school-summary .school-summary-name {
  color: #eef7f6;
}

#school-summary .school-homework-toggle .admin-toggle-label {
  color: #3b2a1e;
}

[data-theme="dark"] #school-summary .school-homework-toggle .admin-toggle-label {
  color: #eef7f6;
}

#school-summary .school-homework-toggle .admin-toggle-slider {
  background: rgba(111, 78, 55, 0.22);
}

[data-theme="dark"] #school-summary .school-homework-toggle .admin-toggle-slider {
  background: rgba(45, 212, 191, 0.2);
}

#school-summary .school-homework-toggle input:checked + .admin-toggle-slider {
  background: linear-gradient(135deg, #6f4e37, #a97452);
}

[data-theme="dark"] #school-summary .school-homework-toggle input:checked + .admin-toggle-slider {
  background: linear-gradient(135deg, #0d9488, #2dd4bf);
}

#school-summary .profile-stat-card-btn {
  background: linear-gradient(180deg, rgba(255, 252, 245, 0.95), rgba(250, 240, 225, 0.9));
  border-color: rgba(90, 65, 45, 0.14);
  border-top-color: rgba(111, 78, 55, 0.4);
}

#school-summary .profile-stat-card-btn:hover,
#school-summary .profile-stat-card-btn:focus-visible {
  border-color: #a97452;
  box-shadow: 0 10px 24px rgba(59, 42, 30, 0.14);
}

#school-summary .profile-stat-card-btn .pscb-title {
  color: #7a6553;
}

#school-summary .profile-stat-card-btn .pscb-value {
  color: #3b2a1e;
}

[data-theme="dark"] #school-summary .profile-stat-card-btn {
  background: linear-gradient(180deg, rgba(20, 36, 34, 0.92), rgba(12, 24, 22, 0.92));
  border-color: rgba(45, 212, 191, 0.12);
  border-top-color: rgba(45, 212, 191, 0.4);
}

[data-theme="dark"] #school-summary .profile-stat-card-btn:hover,
[data-theme="dark"] #school-summary .profile-stat-card-btn:focus-visible {
  border-color: #2dd4bf;
}

[data-theme="dark"] #school-summary .profile-stat-card-btn .pscb-title {
  color: #a9c2c2;
}

[data-theme="dark"] #school-summary .profile-stat-card-btn .pscb-value {
  color: #eef7f6;
}

/* Dedicated dashboard page action bar (mentor.html/school.html) - lives
   inside the same .admin-head title card (not stacked as a second separate
   box), right below the subtitle, instead of as bordered rectangle pills
   squeezed into the hero header alongside the theme toggle/logo. The header
   keeps only universal actions (Profile, theme, login); anything
   page-specific (My Course, Students, Classes) lives here.
   Glass-pill style matches the same recipe already used for the iOS-style
   segmented control (articles-team-flashcards2.css: .articles-filter-bar) -
   translucent blur + inset highlight, not a flat bordered rectangle. */
.dashboard-action-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin: 28px 0 6px;
}

.dashboard-action-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 160px;
  padding: 32px 20px;
  border-radius: 26px;
  text-decoration: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.01em;
  color: #16283f;
  background: rgba(120, 120, 128, 0.10);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow:
    0 6px 20px rgba(15, 42, 69, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: transform 0.22s cubic-bezier(.2, .8, .2, 1), box-shadow 0.22s ease, background 0.22s ease;
}

.dashboard-action-btn:hover {
  transform: translateY(-3px);
  background: rgba(240, 180, 41, 0.14);
  box-shadow:
    0 14px 34px rgba(15, 42, 69, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.dashboard-action-btn .dab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #b4790f;
  flex-shrink: 0;
}

.dashboard-action-btn .dab-icon svg {
  width: 44px;
  height: 44px;
}

[data-theme="dark"] .dashboard-action-btn .dab-icon {
  color: #f0b429;
}

[data-theme="dark"] .dashboard-action-btn {
  color: #f4e6bf;
  background: rgba(118, 118, 128, 0.16);
  backdrop-filter: blur(24px) saturate(1.9);
  -webkit-backdrop-filter: blur(24px) saturate(1.9);
  border: 1px solid rgba(240, 180, 41, 0.2);
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .dashboard-action-btn:hover {
  background: rgba(240, 180, 41, 0.16);
  border-color: rgba(240, 180, 41, 0.45);
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* On mobile the desktop sizing above (min-height: 160px, 32px padding,
   44px icons) had nowhere to shrink - .dashboard-action-bar's grid falls
   back to 1 column below its 200px minmax floor, so "My Course"/"Students"
   stacked as two near-full-screen squares. Below 720px (this codebase's
   usual mobile breakpoint), switch to a compact side-by-side row instead:
   icon and label sit inline rather than stacked, so each button reads as
   a quick-nav pill, not a full card. */
@media (max-width: 720px) {
  .dashboard-action-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 18px 0 4px;
  }

  .dashboard-action-btn {
    flex-direction: row;
    min-height: 0;
    padding: 14px 12px;
    gap: 10px;
    border-radius: 16px;
    font-size: 0.92rem;
  }

  .dashboard-action-btn .dab-icon svg {
    width: 22px;
    height: 22px;
  }
}

/* Quick-glance numbers on the mentor dashboard (student count, homework
   waiting for review, average progress) - reuses .profile-stat-card as-is
   (same tile already used in the profile modal), just a wider auto-fit
   row instead of .profile-grid's plain 2-column layout (same reasoning
   as .school-summary-grid: 3 tiles should fill one row on a wide screen
   instead of leaving a lonely half-empty one). Non-interactive (plain
   divs, not .profile-stat-card-btn) - there's no single destination page
   "pending homework across every student" would link to. */
.mentor-quickstats-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-top: 18px;
}

.profile-stat-card:has(#mentor-stat-students) { border-top-color: #2563eb; }
.profile-stat-card:has(#mentor-stat-homework) { border-top-color: #f59e0b; }
.profile-stat-card:has(#mentor-stat-progress) { border-top-color: #10b981; }

/* Clickable-tile affordance, scoped to the mentor dashboard's own quick
   stats (#mentor-quickstats) - .profile-stat-card is shared with the
   student's own (non-clickable) profile modal, which must not get this
   treatment too. */
#mentor-quickstats .profile-stat-card {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
#mentor-quickstats .profile-stat-card:hover,
#mentor-quickstats .profile-stat-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 42, 69, 0.12);
  outline: none;
}

/* .admin-page's shared 8% side padding + .admin-head's shared 1280px cap
   (lessons-catalog.css) are also used by admin.html/school.html/
   parent.html, so they're not touched here - instead scoped to just this
   page via the `data-mentor-page` attribute already sitting unused on
   mentor.html's <main>. Without this, the dashboard card (now full of
   paired 2-column content) read as a small island floating in a lot of
   bare page on anything wider than a laptop. Left at the 720px mobile
   breakpoint below which the page already goes single-column - shrinking
   side padding further down there would just crowd the edges. */
@media (min-width: 721px) {
  main[data-mentor-page].admin-page {
    padding-left: 3%;
    padding-right: 3%;
  }

  main[data-mentor-page] .admin-head {
    max-width: 1600px;
  }
}

/* Two related cards side by side on desktop instead of one long vertical
   stack - Needs Attention + Recent Homework are the two "act on this
   today" cards, Teaching Schedule + Calendar are the two "same weekly
   pattern, two views" cards, so pairing them this way cuts scrolling
   roughly in half without hiding anything. Each child card keeps its own
   margin-top (unchanged) rather than the wrapper carrying it, so spacing
   above the row stays identical to when these were all stacked singly. */
.mentor-dashboard-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  /* Grid items stretch to match the row's tallest sibling by default -
     Calendar is naturally much taller than Teaching Schedule's single
     pill row, so without this Schedule's own card box was stretched to
     match Calendar's height, leaving a large blank area below its actual
     content. align-items: start lets each card size to its own content
     instead. */
  align-items: start;
}

@media (max-width: 900px) {
  .mentor-dashboard-pair {
    grid-template-columns: 1fr;
  }
}

/* [hidden] removes a card from layout entirely (no CSS override forces it
   back to display:block - see the plain `hidden` attribute usage below),
   which would otherwise leave the other card in the pair stranded in a
   single grid column with a blank gap beside it. When exactly one side of
   a pair is hidden, let its sibling span both columns instead. */
.mentor-dashboard-pair:has(#mentor-attention-card[hidden]) #mentor-recent-homework-card,
.mentor-dashboard-pair:has(#mentor-recent-homework-card[hidden]) #mentor-attention-card {
  grid-column: 1 / -1;
}

/* Schedule/Calendar pair: Schedule now shares its column with This Week's
   summary (.mentor-dashboard-col wraps both, see below) rather than being
   a direct grid item itself, so the "one side hidden -> sibling spans
   both columns" rule targets that wrapper instead. Schedule/WeekSummary
   are both always shown once their fetch succeeds (ponytail: same as
   the empty-week pill row) - the :has() chain on the fallback direction
   still covers the rare case where both actually did fail to load. */
.mentor-dashboard-pair:has(#mentor-calendar-card[hidden]) .mentor-dashboard-col {
  grid-column: 1 / -1;
}

.mentor-dashboard-pair:has(#mentor-schedule-card[hidden]):has(#mentor-week-summary-card[hidden]) #mentor-calendar-card {
  grid-column: 1 / -1;
}

/* No gap here on purpose - each .mentor-schedule-card child already
   carries its own margin-top: 18px (unlike flex/grid margins between
   siblings elsewhere, that one doesn't collapse away inside a flex
   container), so adding a gap too would double the space between
   Schedule and This Week's summary. */
.mentor-dashboard-col {
  display: flex;
  flex-direction: column;
}

/* Read-only "which days do I teach" card on the mentor dashboard
   (mentor.html) - fills the space .dashboard-action-bar's mobile
   compacting above freed up. Reuses .schedule-day-btn's pill look
   (same 7-column grid, same rounded-pill shape) but each day is never
   clickable - it's just colored in when at least one of this mentor's
   students has a lesson that day (backend: _get_mentor_schedule). */
.mentor-schedule-card {
  margin-top: 18px;
  padding: 16px 18px 18px;
  border-radius: 20px;
  background: rgba(120, 120, 128, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.mentor-schedule-title {
  margin: 0 0 12px;
  font-size: 1rem;
  color: #16283f;
}

.mentor-schedule-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.mentor-schedule-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 2px;
  border-radius: 12px;
  border: 1px solid #c7d5e6;
  background: #ffffff;
  color: #6c7f94;
  cursor: pointer;
  transition: box-shadow 0.15s ease;
}

.mentor-schedule-day:hover,
.mentor-schedule-day:focus-visible {
  box-shadow: 0 0 0 2px #1f4f7a;
  outline: none;
}

.mentor-schedule-day .msd-label {
  font-size: 0.78rem;
  font-weight: 700;
}

.mentor-schedule-day .msd-count {
  font-size: 0.68rem;
  font-weight: 600;
  opacity: 0.85;
}

.mentor-schedule-day.has-students {
  border-color: transparent;
  background: linear-gradient(135deg, #1f4f7a, #123454);
  color: #ffffff;
}

/* Outline ring rather than a background swap - has to stay visible layered
   on top of both the plain and .has-students day styles above, not replace
   either of them. */
.mentor-schedule-day.is-today {
  box-shadow: 0 0 0 2px #f59e0b;
}

.mentor-schedule-day .msd-today-tag {
  color: #f59e0b;
}

.mentor-schedule-note {
  margin: 12px 0 0;
  font-size: 0.85rem;
  color: #4c6075;
}

/* Row list for the "Recent Homework" card - shares .mentor-schedule-card's
   wrapper/title/note classes as-is (same rounded panel look), just needs
   its own row style since it's a list, not a 7-day grid. */
.mentor-recent-homework-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* border-left carries the color, not the background - same recipe
   .homework-item (tasks.html) already uses for its task cards (white/dark
   body + a solid 4px colored stripe reads as far more vivid than a pale
   background tint that just blends into the page, especially in light
   theme). Transparent by default; each card that uses this row sets its
   own border-left-color below. */
.mentor-recent-homework-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid #e2e9f2;
  border-left: 4px solid transparent;
}

/* Only two of the three "This Week" rows open anything (see
   mentorWeekUsernamesCache in mentor-modals.js for why "Lessons this
   week" doesn't) - scoped by id rather than a shared class, since
   .mentor-recent-homework-row is also used by Recent Homework/Needs
   Attention/leaderboard rows that aren't clickable. */
#mentor-week-row-homework,
#mentor-week-row-students {
  cursor: pointer;
  transition: box-shadow 0.15s ease;
}
#mentor-week-row-homework:hover,
#mentor-week-row-homework:focus-visible,
#mentor-week-row-students:hover,
#mentor-week-row-students:focus-visible {
  box-shadow: 0 0 0 2px #0d9488;
  outline: none;
}

.mentor-recent-homework-row .mrh-name {
  font-weight: 600;
  color: #16283f;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mentor-recent-homework-row .mrh-count {
  font-size: 0.78rem;
  font-weight: 700;
  color: #f59e0b;
  white-space: nowrap;
}

.mentor-recent-homework-row .mrh-time {
  font-size: 0.75rem;
  color: #7c8ba1;
  white-space: nowrap;
}

[data-theme="dark"] .mentor-recent-homework-row {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
}

[data-theme="dark"] .mentor-recent-homework-row .mrh-name {
  color: #e8f0ff;
}

[data-theme="dark"] .mentor-recent-homework-row .mrh-count {
  color: #fbbf24;
}

[data-theme="dark"] .mentor-recent-homework-row .mrh-time {
  color: #9bb8d8;
}

/* Color pass - the 5 secondary dashboard cards (and the plain white rows
   inside 3 of them) read as flat/dull next to the colorful Quick Stats
   tiles above them. Same idea as .profile-stat-card's colored top border
   (border-top accent per card, id-scoped like the :has() rules above),
   plus a soft matching gradient wash on each row instead of flat #fff -
   Needs Attention=red (something's wrong), Recent Homework=amber (matches
   the Pending Homework tile), Teaching Schedule=blue (matches Students),
   Calendar=indigo (same family as Schedule since they're paired, but
   distinct), Top Students=gold (trophy/medal association). */
#mentor-attention-card { border-top: 3px solid #ef4444; }
#mentor-recent-homework-card { border-top: 3px solid #f59e0b; }
#mentor-schedule-card { border-top: 3px solid #2563eb; }
#mentor-calendar-card { border-top: 3px solid #7c3aed; }
#mentor-week-summary-card { border-top: 3px solid #0d9488; }
#mentor-leaderboard-card { border-top: 3px solid #eab308; }

[data-theme="dark"] #mentor-attention-card { border-top-color: #f87171; }
[data-theme="dark"] #mentor-recent-homework-card { border-top-color: #fbbf24; }
[data-theme="dark"] #mentor-schedule-card { border-top-color: #3b82f6; }
[data-theme="dark"] #mentor-calendar-card { border-top-color: #a78bfa; }
[data-theme="dark"] #mentor-week-summary-card { border-top-color: #2dd4bf; }
[data-theme="dark"] #mentor-leaderboard-card { border-top-color: #facc15; }

#mentor-attention-card .mentor-recent-homework-row { border-left-color: #ef4444; }
#mentor-recent-homework-card .mentor-recent-homework-row { border-left-color: #f59e0b; }
#mentor-leaderboard-card .mentor-recent-homework-row { border-left-color: #eab308; }
#mentor-week-summary-card .mentor-recent-homework-row { border-left-color: #0d9488; }

[data-theme="dark"] #mentor-attention-card .mentor-recent-homework-row { border-left-color: #f87171; }
[data-theme="dark"] #mentor-recent-homework-card .mentor-recent-homework-row { border-left-color: #fbbf24; }
[data-theme="dark"] #mentor-leaderboard-card .mentor-recent-homework-row { border-left-color: #facc15; }
[data-theme="dark"] #mentor-week-summary-card .mentor-recent-homework-row { border-left-color: #2dd4bf; }

/* Month-grid "Calendar" card - projects the same weekly teaching pattern
   the pill row above already shows onto real dates. Weekday header row
   uses the same 7-column layout as .mentor-schedule-days on purpose (same
   Mon..Sun order), the day grid below it wraps onto as many rows as the
   month needs. */
/* Capped width + centered - without this, 7 columns stretched across the
   full dashboard card (as wide as the two nav buttons above it) blew each
   cell up into an oversized square, reading as a wall of giant blue
   blocks instead of a calendar. A real month calendar stays compact
   regardless of how wide its container is. */
.mentor-calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin: 0 auto 6px;
  max-width: 380px;
}

.mentor-calendar-weekdays span {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #7c8ba1;
}

.mentor-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin: 0 auto;
  max-width: 380px;
}

.mentor-calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid #c7d5e6;
  background: #ffffff;
  color: #4c6075;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: box-shadow 0.15s ease;
}

.mentor-calendar-day:hover,
.mentor-calendar-day:focus-visible {
  box-shadow: 0 0 0 2px #1f4f7a;
  outline: none;
}

.mentor-calendar-day.is-empty {
  border-color: transparent;
  background: transparent;
  cursor: default;
  /* No data-weekday (these are just the padding cells before day 1) - no
     hover ring either, that would promise an action that isn't there. */
  box-shadow: none;
}

.mentor-calendar-day.has-lessons {
  border-color: transparent;
  background: linear-gradient(135deg, #1f4f7a, #123454);
  color: #ffffff;
}

.mentor-calendar-day.is-today {
  box-shadow: 0 0 0 2px #f59e0b;
}

[data-theme="dark"] .mentor-calendar-weekdays span {
  color: #9bb8d8;
}

[data-theme="dark"] .mentor-calendar-day {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: #9bb8d8;
}

[data-theme="dark"] .mentor-calendar-day.is-empty {
  border-color: transparent;
  background: transparent;
}

[data-theme="dark"] .mentor-calendar-day.has-lessons {
  border-color: transparent;
  background: linear-gradient(135deg, #3f7cb8, #1f4f7a);
  color: #ffffff;
}

[data-theme="dark"] .mentor-calendar-day.is-today {
  box-shadow: 0 0 0 2px #fbbf24;
}

[data-theme="dark"] .mentor-schedule-card {
  background: rgba(118, 118, 128, 0.1);
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .mentor-schedule-title {
  color: #e8f0ff;
}

[data-theme="dark"] .mentor-schedule-day {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: #9bb8d8;
}

[data-theme="dark"] .mentor-schedule-day.has-students {
  border-color: transparent;
  background: linear-gradient(135deg, #3f7cb8, #1f4f7a);
  color: #ffffff;
}

[data-theme="dark"] .mentor-schedule-note {
  color: #9bb8d8;
}

[data-theme="dark"] .mentor-schedule-day.is-today {
  box-shadow: 0 0 0 2px #fbbf24;
}

[data-theme="dark"] .mentor-schedule-day .msd-today-tag {
  color: #fbbf24;
}

[data-theme="dark"] .profile-stat-card:has(#mentor-stat-students) { border-top-color: #3b82f6; }
[data-theme="dark"] .profile-stat-card:has(#mentor-stat-homework) { border-top-color: #fbbf24; }
[data-theme="dark"] .profile-stat-card:has(#mentor-stat-progress) { border-top-color: #34d399; }

@media (max-width: 720px) {
  .mentor-schedule-day .msd-label {
    font-size: 0.72rem;
  }

  .mentor-schedule-day .msd-count {
    font-size: 0.62rem;
  }

  .mentor-calendar-day {
    font-size: 0.7rem;
    border-radius: 6px;
  }

  .mentor-calendar-weekdays span {
    font-size: 0.62rem;
  }
}

.admin-org-classes-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: transparent;
  color: #16395d;
  border: 1px dashed #c7d5e6;
  padding: 8px 12px;
  font-weight: 600;
  font-size: 0.85rem;
  box-shadow: none;
}

.admin-org-classes-row:hover {
  background: #eef3f8;
  transform: none;
}

.admin-org-classes-row-icon {
  font-size: 0.95rem;
}

.admin-org-classes-row-arrow {
  margin-left: auto;
  opacity: 0.6;
  font-size: 1.1rem;
}

[data-theme="dark"] .admin-org-classes-row {
  color: #cfe0f5;
  border-color: rgba(255, 255, 255, 0.14);
}

[data-theme="dark"] .admin-org-classes-row:hover {
  background: rgba(255, 255, 255, 0.06);
}

.admin-org-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-class-row-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* flex-basis + wrap instead of a rigid 2-column grid: on a narrow card
   (.mentors-grid cards can go down to 220px) two icon+label pill buttons
   don't both fit on one line - grid's default min-width:auto refused to
   shrink them below their content width and pushed "Extend license" past
   the card's edge. Wrapping lets each button fall to its own full-width
   row instead of overflowing. */
.admin-org-actions-row .btn {
  flex: 1 1 130px;
  min-width: 0;
  padding: 10px 8px;
  font-size: 0.85rem;
  white-space: nowrap;
}

.admin-org-license-badge.is-active {
  background: #e3f6e8;
  color: #1a7a3d;
}

.admin-org-license-badge.is-expiring-soon {
  background: #fff3d6;
  color: #916500;
}

.admin-org-license-badge.is-expired {
  background: #fde3e3;
  color: #b32424;
}

[data-theme="dark"] .admin-org-license-badge.is-active {
  background: rgba(38, 166, 91, 0.18);
  color: #6fdb96;
}

[data-theme="dark"] .admin-org-license-badge.is-expiring-soon {
  background: rgba(214, 158, 0, 0.18);
  color: #f0c04a;
}

[data-theme="dark"] .admin-org-license-badge.is-expired {
  background: rgba(200, 50, 50, 0.18);
  color: #f28b8b;
}

.admin-org-extend-btn {
  background: linear-gradient(135deg, #e0a52c, #b4780f);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(180, 120, 15, 0.28);
}

[data-theme="dark"] .admin-org-extend-btn {
  background: linear-gradient(135deg, #e0a52c, #96650d);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}

/* School class card actions (school-admin-modals.js: renderClasses) - three
   different colors instead of "View Students" (kept as the default .btn
   navy) plus two identically-styled neutral-gray buttons that were hard to
   tell apart at a glance. Teal for Edit, gold for Leaderboard (matches the
   existing gold "Extend license" above - trophy = gold reads naturally). */
.school-edit-class-btn {
  background: linear-gradient(135deg, #14b8c4, #0c7a89);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(12, 122, 137, 0.28);
}

[data-theme="dark"] .school-edit-class-btn {
  background: linear-gradient(135deg, #22d3d9, #0c7a89);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}

.school-leaderboard-btn {
  background: linear-gradient(135deg, #e0a52c, #b4780f);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(180, 120, 15, 0.28);
}

[data-theme="dark"] .school-leaderboard-btn {
  background: linear-gradient(135deg, #e0a52c, #96650d);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}

/* Red, same diagonal-gradient-pill language as its three siblings above -
   deliberately the odd one out color-wise (danger) rather than a plain
   .admin-delete-btn drop-in, so it doesn't look out of place sitting next
   to them in the same row. */
.school-delete-class-btn {
  background: linear-gradient(135deg, #e05252, #9b1e1e);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(155, 30, 30, 0.28);
}

[data-theme="dark"] .school-delete-class-btn {
  background: linear-gradient(135deg, #e86a6a, #8f1c1c);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}

.admin-delete-btn {
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 700;
  border: none;
  background: linear-gradient(180deg, #cf2f2f 0%, #9b1e1e 100%);
  color: #ffffff;
}
.admin-delete-btn:disabled {
  background: #c9d2dc;
  color: #6b7c8f;
  cursor: not-allowed;
}

.admin-delete-confirm-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 25, 45, 0.44);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1300;
}

.admin-delete-confirm-modal.is-open {
  display: flex;
}

.admin-delete-confirm-card {
  width: min(420px, 100%);
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #cfdae6;
  padding: 18px;
  text-align: center;
}

.admin-delete-confirm-card h3 {
  margin: 0 0 8px;
  color: #143456;
  font-size: 1.4rem;
}

.admin-delete-confirm-card p {
  margin: 0 0 16px;
  color: #35536f;
  font-weight: 700;
}

.admin-delete-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.admin-delete-confirm-cancel-btn {
  background: #eef3f8;
  color: #16395d;
  border-radius: 12px;
}

.admin-delete-confirm-accept-btn {
  background: linear-gradient(180deg, #cf2f2f 0%, #9b1e1e 100%);
  color: #ffffff;
  border-radius: 999px;
}

.admin-progress-modal.is-open {
  display: flex;
}

.admin-progress-modal-card {
  width: min(1220px, 100%);
  max-height: 92vh;
  overflow: auto;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #cfdae6;
  padding: 18px;
}

.admin-progress-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.admin-progress-topbar h3 {
  margin: 0;
  color: #143456;
  font-size: 1.45rem;
}

.admin-progress-close-btn {
  background: #eef3f8;
  color: #16395d;
}

.admin-progress-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 14px;
}

.admin-progress-layout.is-mentor-view {
  grid-template-columns: 1fr;
}

.admin-progress-users {
  border: 1px solid #d5e0eb;
  border-radius: 14px;
  padding: 12px;
}

.admin-progress-users h4 {
  margin: 0 0 10px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: #22425f;
}

.admin-progress-users-count {
  font-size: 0.82rem;
  font-weight: 600;
  color: #6f88a8;
}

.admin-progress-search {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  margin-bottom: 10px;
  border: 1px solid #c8d5e4;
  border-radius: 10px;
  font-size: 0.92rem;
  background: #ffffff;
  color: #16395d;
  outline: none;
}

.admin-progress-search:focus {
  border-color: #2fa7ff;
  box-shadow: 0 0 0 3px rgba(47, 167, 255, 0.18);
}

.admin-progress-users-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 60vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  /* Thin, tinted scrollbar so a 70-student list reads as "scrolls" at a
     glance instead of just cutting off - same treatment as .upgrade-modal-card. */
  scrollbar-width: thin;
  scrollbar-color: rgba(31, 79, 122, 0.35) transparent;
}

.admin-progress-users-list::-webkit-scrollbar {
  width: 6px;
}

.admin-progress-users-list::-webkit-scrollbar-track {
  background: transparent;
}

.admin-progress-users-list::-webkit-scrollbar-thumb {
  background: rgba(31, 79, 122, 0.35);
  border-radius: 999px;
}

.admin-progress-users-list::-webkit-scrollbar-thumb:hover {
  background: rgba(31, 79, 122, 0.55);
}

/* Level section divider - the list is already sorted by level, this just
   makes the boundary visible so scanning ~70 names is less of a slog. */
.admin-progress-group-header {
  padding: 6px 4px 4px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7a92ab;
}

.admin-progress-group-header:not(:first-child) {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid #e3ecf5;
}

.admin-progress-user-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  border: 1px solid #ccd8e5;
  border-radius: 10px;
  padding: 8px 10px;
  background: #ffffff;
  color: #1a3a59;
}

.apu-avatar {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: #ffffff;
}

.apu-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.apu-name {
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.apu-username {
  font-size: 0.75rem;
  color: #6f88a8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.apu-badge {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-progress-user-btn.is-active {
  border-color: #1f4f7a;
  box-shadow: 0 0 0 1px #1f4f7a inset;
  background: #eef5fd;
}

.admin-progress-main {
  border: 1px solid #d5e0eb;
  border-radius: 14px;
  padding: 12px;
}

.admin-progress-note {
  margin: 0 0 12px;
  color: #35536f;
  font-weight: 700;
}

/* Course-level "how far along is this student" summary, shown above the
   lesson cards so it doesn't need scrolling to find - same red-to-green
   tone-by-percent treatment as the per-lesson video/accuracy tiles below
   (getPercentToneStyle sets color/background/border inline, this class only
   handles layout). */
.admin-progress-summary {
  margin: 0 0 14px;
}

.admin-progress-summary-tile {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;
}

.admin-progress-summary-label {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.85;
}

.admin-progress-summary-value {
  font-size: 1.3rem;
  font-weight: 800;
}

.admin-progress-summary-percent {
  margin-left: auto;
  font-size: 1.1rem;
  font-weight: 800;
  opacity: 0.85;
}

.admin-progress-lessons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}

.admin-progress-layout.is-mentor-view .admin-progress-lessons {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1180px) {
  .admin-progress-layout.is-mentor-view .admin-progress-lessons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .admin-progress-layout.is-mentor-view .admin-progress-lessons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .admin-progress-layout.is-mentor-view .admin-progress-lessons {
    grid-template-columns: 1fr;
  }
}

.admin-progress-lesson-card {
  border: 1px solid #ccd8e5;
  border-radius: 14px;
  overflow: hidden;
  background: #ffffff;
}

.admin-progress-lesson-cover {
  position: relative;
  height: 132px;
  background: #e7edf3;
  border-bottom: 1px solid #d5e0eb;
}

.admin-progress-lesson-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.admin-progress-lesson-done {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #16a34a;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.admin-progress-lesson-body {
  padding: 10px 12px 12px;
}

.admin-progress-lesson-body h4 {
  margin: 0 0 10px;
  color: #16395d;
  font-size: 1rem;
  line-height: 1.3;
  min-height: 44px;
}

.admin-progress-correct,
.admin-progress-wrong {
  margin: 0;
  font-weight: 700;
}

.admin-progress-correct {
  color: #17633a;
}

.admin-progress-wrong {
  color: #b02a1f;
}

.admin-progress-percent {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-progress-percent-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  opacity: 0.85;
}

.admin-progress-percent-value {
  font-size: 1.55rem;
  font-weight: 900;
  line-height: 1.06;
}

.admin-progress-percent-meta {
  font-size: 0.9rem;
  font-weight: 700;
  opacity: 0.9;
}

.admin-progress-percent.is-good {
  color: #165f38;
  background: linear-gradient(180deg, #edf8f1 0%, #e4f3ea 100%);
  border: 1px solid #b4dcc2;
}

.admin-progress-percent.is-bad {
  color: #9f2f23;
  background: linear-gradient(180deg, #fff2f0 0%, #fde9e6 100%);
  border: 1px solid #efc0ba;
}

.admin-progress-video {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #234a73;
  background: linear-gradient(180deg, #eef5fb 0%, #e6eff8 100%);
  border: 1px solid #cfe0f0;
}

.admin-progress-video.is-good {
  color: #1c6a46;
  background: linear-gradient(180deg, #edf8f1 0%, #e4f3ea 100%);
  border: 1px solid #b4dcc2;
}

.admin-progress-video.is-bad {
  color: #b8611d;
  background: linear-gradient(180deg, #fff4e8 0%, #ffe8cf 100%);
  border: 1px solid #f3d3a8;
}

.admin-progress-video.is-empty {
  color: #6b7c8f;
  background: linear-gradient(180deg, #f2f5f8 0%, #e9eef3 100%);
  border: 1px solid #d7e3ef;
}

.admin-progress-video-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  opacity: 0.85;
}

.admin-progress-video-value {
  font-size: 1.55rem;
  font-weight: 900;
  line-height: 1.06;
}

.admin-progress-video-meta {
  font-size: 0.9rem;
  font-weight: 700;
  opacity: 0.9;
}

.quiz-card {
  max-width: 1180px;
  margin: 0 auto;
  background: #ebf1f8;
  border: 1px solid #cfdae7;
  border-radius: 28px;
  padding: 24px;
}

.quiz-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.quiz-topbar-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.quiz-topbar h1 {
    margin: 0;
    color: #102740;
    font-size: 1.85rem;
  }


.quiz-subtitle {
  margin: 0 0 16px;
  color: #29445f;
  font-size: 1.05rem;
}

.tasks-runtime-status {
  margin: 8px 0 14px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #c7d5e6;
  background: #f4f8fd;
  color: #2b4b69;
  font-weight: 700;
  font-size: 0.98rem;
}

.tasks-runtime-status.is-error {
  border-color: rgba(170, 22, 35, 0.35);
  background: rgba(255, 59, 59, 0.08);
  color: #6b1a22;
}

.quiz-question-shell {
  border: 1px solid #c7d5e6;
  border-radius: 16px;
  background: #f4f8fd;
  padding: 18px;
  margin-bottom: 14px;
}

.quiz-task-number {
  margin: 0 0 8px;
  color: #8698ab;
  font-weight: 700;
  font-size: 1.2rem;
}

.quiz-question {
  margin: 0;
  color: #132f4a;
  font-size: 1.35rem;
  line-height: 1.35;
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.quiz-option {
  width: 100%;
  border: 1px solid #c4cfdb;
  background: #ffffff;
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  color: #1a3653;
  font-size: 1.1rem;
}

.quiz-option.is-selected {
  border-color: #133a63;
  box-shadow: 0 0 0 1px #133a63 inset;
}

.quiz-option.is-correct {
  background: #e9f8ef;
  border-color: #2e7d55;
}

.quiz-option.is-correct .quiz-option-key {
  background: #2e7d55;
  border-color: #2e7d55;
  color: #ffffff;
}

.quiz-option.is-wrong {
  background: #fdeeee;
  border-color: #b64232;
}

.quiz-option.is-wrong .quiz-option-key {
  background: #b64232;
  border-color: #b64232;
  color: #ffffff;
}

.quiz-option-key {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid #98a8ba;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #27435f;
  flex-shrink: 0;
}

.quiz-check-btn {
  border-radius: 999px;
  background: linear-gradient(135deg, #1f4f7a, #123454);
  color: #ffffff;
  padding: 11px 30px;
  font-weight: 700;
}

.quiz-status {
  margin: 0;
  font-weight: 700;
  min-height: 24px;
  color: #2d4b68;
  text-align: center;
}

.quiz-status.is-correct {
  color: #176b43;
}

.quiz-status.is-wrong {
  color: #a63f2b;
}

.quiz-status.is-warning {
  color: #8c5f15;
}

.quiz-nav-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: 12px;
}

.quiz-nav-left {
  justify-self: start;
}

.quiz-nav-center {
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.quiz-nav-right {
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-width: 180px;
}

/* Next/Finish & Save now lives on the Check button itself (see #quiz-check-btn
   mode switching in script.js), so the separate Next button is redundant —
   it used to make the student move across the row after every answer. */
#quiz-next-btn {
  display: none;
}

.quiz-nav-btn {
  border-radius: 999px;
  background: #8a9cb1;
  color: #ffffff;
  padding: 11px 26px;
  min-width: 160px;
  font-weight: 700;
}

.quiz-nav-btn:disabled,
.quiz-check-btn:disabled,
.quiz-explain-btn:disabled,
.quiz-modal-retry-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.quiz-nav-btn-primary {
  background: linear-gradient(135deg, #1f4f7a, #123454);
}

#quiz-prev-btn:not(:disabled) {
  background: linear-gradient(135deg, #1f4f7a, #123454);
}

.quiz-explain-btn {
  border-radius: 999px;
  background: #c6d9ee;
  border: 1px solid #9fb6cf;
  color: #0f355d;
  padding: 8px 20px;
  font-size: 0.92rem;
  font-weight: 700;
}

.quiz-explain-btn:disabled {
  opacity: 0.85;
  color: #0f355d;
}

.quiz-counter {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 700;
  color: #1e3d5c;
}

.quiz-final-result {
  margin: 14px 0 0;
  min-height: 24px;
  color: #143658;
  font-weight: 700;
}

.quiz-retry-modal,
  .subscription-expired-modal,
  .subscription-renew-modal,
  .subscription-confirm-modal,
  .subscription-sent-modal,
  .homework-modal,
  .homework-gate-modal,
  .lesson-prereq-modal {
    position: fixed;
    inset: 0;
    background: rgba(7, 17, 28, 0.5);
    display: none;
  align-items: center;
  justify-content: center;
  padding: 14px;
  z-index: 1100;
}

.quiz-explain-modal {
  position: fixed;
  inset: 0;
  background: rgba(8, 18, 32, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  padding: 24px;
  z-index: 40;
  backdrop-filter: blur(2px);
}

.quiz-explain-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.quiz-explain-card {
  width: min(720px, 100%);
  background: linear-gradient(180deg, #ffffff 0%, #eef4ff 100%);
  border: 2px solid #2f6fb2;
  border-radius: 20px;
  padding: 20px 22px 22px;
  box-shadow: 0 32px 80px rgba(12, 32, 54, 0.35), 0 0 0 6px rgba(47, 111, 178, 0.15);
  transform: translateY(6px);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.quiz-explain-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.quiz-explain-header h3 {
  margin: 0;
  color: #102740;
  font-size: 1.45rem;
  letter-spacing: 0.02em;
}

.quiz-explain-close {
  border-radius: 999px;
  background: #2f6fb2;
  border: 1px solid #1f4f7a;
  color: #ffffff;
  padding: 8px 18px;
  font-weight: 700;
  box-shadow: 0 10px 18px rgba(18, 53, 95, 0.25);
}

.quiz-explain-question {
  margin: 0 0 10px;
  font-weight: 700;
  color: #102740;
  background: #e9f2ff;
  border: 1px solid #c7d9f0;
  border-left: 4px solid #2f6fb2;
  padding: 10px 12px;
  border-radius: 12px;
}

.quiz-explain-text {
  margin: 0;
  color: #2b4b69;
  line-height: 1.55;
  font-size: 1.05rem;
}

.quiz-explain-actions {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #d7e3ef;
}

.quiz-explain-ask {
  margin: 0 0 10px;
  color: #1a3653;
  font-weight: 700;
  font-size: 0.95rem;
}

.quiz-explain-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.quiz-explain-option {
  border-radius: 999px;
  background: #eef4fb;
  border: 1px solid #c6d7ea;
  color: #1f4f7a;
  padding: 8px 14px;
  font-weight: 700;
}

.quiz-explain-option.is-active {
  background: #1f4f7a;
  border-color: #1f4f7a;
  color: #ffffff;
}

.quiz-explain-lang {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.quiz-explain-lang-label {
  color: #1a3653;
  font-weight: 700;
}

  .quiz-explain-note {
    margin: 0;
    color: #6a7f95;
    font-size: 0.95rem;
  }

  .homework-modal {
    background: linear-gradient(165deg, #eef3f9 0%, #e2ebf6 100%);
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }

  .homework-card {
    width: 100%;
    height: 100%;
    max-width: none;
    background: #f7fbff;
    border: none;
    border-radius: 0;
    padding: 26px 6vw 40px;
    position: relative;
    box-shadow: none;
    overflow-y: auto;
  }

  .homework-gate-card {
    width: 100%;
    max-width: 520px;
    background: #ffffff;
    border-radius: 22px;
    padding: 22px 24px 24px;
    text-align: center;
    box-shadow: 0 24px 45px rgba(16, 39, 64, 0.2);
  }

  .homework-gate-card h3 {
    margin: 0 0 10px;
    color: #102740;
  }

  .homework-gate-card p {
    margin: 0 0 16px;
    color: #2f4760;
  }

  .homework-gate-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
  }

  .homework-card::before {
    display: none;
  }

  .homework-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 16px;
    border-bottom: 1px solid #dde7f2;
  }

  .homework-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 20px;
    border-radius: 999px;
    background: linear-gradient(135deg, #2f6fb2, #14365c);
    color: #ffffff;
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(20, 54, 92, 0.28);
  }

  .homework-badge::before {
    content: "📚";
    font-size: 1rem;
  }

  .homework-close {
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #d1dbe6;
    color: #1f4f7a;
    padding: 10px 20px;
    font-weight: 700;
    box-shadow: 0 10px 20px rgba(16, 39, 64, 0.12);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    font-size: 0.95rem;
  }

  .homework-close:hover {
    background: #fbfdff;
    border-color: #c6d4e3;
    transform: translateY(-2px);
    box-shadow: 0 16px 26px rgba(16, 39, 64, 0.16);
  }

  .homework-title {
    margin: 18px 0 6px;
    color: #0f2a45;
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.01em;
  }

  .homework-subtitle {
    margin: 0 0 20px;
    color: #4a6280;
    font-size: 1.02rem;
  }

  .homework-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
  }

  .homework-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 18px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid #dce6f1;
    border-left: 4px solid #2f6fb2;
    box-shadow: 0 12px 26px rgba(16, 39, 64, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .homework-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 34px rgba(16, 39, 64, 0.13);
  }

  .homework-item:nth-child(2) { border-left-color: #16a39a; }
  .homework-item:nth-child(3) { border-left-color: #8a5cf6; }
  .homework-item:nth-child(4) { border-left-color: #e08a2c; }
  .homework-item:nth-child(5) { border-left-color: #d6488f; }

  .homework-item-index {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: linear-gradient(135deg, #2f6fb2, #14365c);
    color: #ffffff;
    display: grid;
    place-items: center;
    font-weight: 800;
    flex-shrink: 0;
    box-shadow: 0 6px 14px rgba(20, 54, 92, 0.3);
  }

  .homework-item-title {
    margin: 0 0 6px;
    font-weight: 700;
    color: #123454;
    white-space: pre-wrap;
    font-size: 1.02rem;
  }

  .homework-item-desc {
    margin: 0;
    color: #51688a;
    white-space: pre-wrap;
    line-height: 1.45;
    font-size: 0.93rem;
  }

  .homework-item.is-completed {
    border-color: rgba(18, 184, 134, 0.35);
    border-left-color: #12b886;
    background: linear-gradient(180deg, #ffffff, #f1fffa);
  }

  .homework-item.is-completed .homework-item-index {
    background: linear-gradient(135deg, #12b886, #0c8a64);
    box-shadow: 0 6px 14px rgba(12, 138, 100, 0.3);
  }

  .homework-item-actions {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
  }

  .homework-task-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: #1f4f7a;
    cursor: pointer;
    user-select: none;
  }

  .homework-task-checkbox {
    width: 19px;
    height: 19px;
    accent-color: #12b886;
    cursor: pointer;
  }

  .homework-task-checkbox:disabled {
    cursor: not-allowed;
    opacity: 0.75;
  }

  .homework-task-check span {
    font-size: 0.92rem;
  }

  .homework-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 22px;
  }

.homework-upload-btn {
  border-radius: 999px;
  background: linear-gradient(135deg, #132a46, #1f4f7a);
  box-shadow: 0 14px 28px rgba(19, 42, 70, 0.28);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.homework-upload-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(19, 42, 70, 0.34);
}

.homework-upload-btn.is-submitted,
.homework-upload-btn.is-submitted:hover {
  background: linear-gradient(135deg, #2e7d55, #1f5f41);
  cursor: not-allowed;
  opacity: 0.95;
  box-shadow: none;
  transform: none;
}

  .homework-note {
    margin: 10px 0 0;
    color: #6a7f95;
    font-size: 0.92rem;
  }

  .homework-form {
    margin-top: 26px;
    display: grid;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid #dde7f2;
  }

  .homework-label {
    font-weight: 700;
    color: #123454;
    font-size: 0.96rem;
  }

  .homework-textarea {
    width: 100%;
    border-radius: 16px;
    border: 1px solid #c7d5e6;
    padding: 14px 16px;
    font-family: inherit;
    font-size: 1rem;
    resize: vertical;
    background: #ffffff;
    color: #0f2a45;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
  }

  .homework-textarea:focus {
    outline: none;
    border-color: #2f6fb2;
    box-shadow: 0 0 0 3px rgba(47, 111, 178, 0.18);
  }

  .homework-file {
    width: 100%;
    border-radius: 14px;
    border: 1.5px dashed #b9cadc;
    padding: 10px 12px;
    background: #f3f7fb;
    color: #4a6280;
    font-size: 0.92rem;
    transition: border-color 0.18s ease, background 0.18s ease;
  }

  .homework-file:hover {
    border-color: #8fadcb;
    background: #eef4fb;
  }

  .homework-file::file-selector-button,
  .homework-file::-webkit-file-upload-button {
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #2f6fb2, #1f4f7a);
    color: #ffffff;
    padding: 8px 16px;
    margin-right: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease;
  }

  .homework-file::file-selector-button:hover,
  .homework-file::-webkit-file-upload-button:hover {
    transform: translateY(-1px);
  }

  /* ── Record audio ──────────────────────────────────────────────────── */
  .homework-record-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .homework-record-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    background: #ffffff;
    border: 1.5px solid #c7d5e6;
    color: #1f4f7a;
    padding: 10px 18px;
    font-weight: 700;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  }

  .homework-record-btn:hover {
    border-color: #2f6fb2;
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(47, 111, 178, 0.18);
  }

  .homework-record-btn-icon {
    font-size: 1.05rem;
  }

  .homework-record-live {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    border-radius: 999px;
    background: #fff3f1;
    border: 1.5px solid rgba(217, 61, 61, 0.35);
    width: fit-content;
  }

  .homework-record-live-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e0392f;
    animation: homeworkRecPulse 1.1s ease-in-out infinite;
    flex-shrink: 0;
  }

  @keyframes homeworkRecPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.35); opacity: 0.55; }
  }

  .homework-record-live-timer {
    font-weight: 800;
    color: #a3271f;
    font-variant-numeric: tabular-nums;
    min-width: 34px;
  }

  .homework-record-stop-btn {
    border-radius: 999px;
    background: #e0392f;
    color: #ffffff;
    padding: 7px 16px;
    font-weight: 700;
    border: none;
  }

  .homework-record-stop-btn:hover {
    background: #c92e25;
  }

  .homework-record-error {
    margin: 0;
    color: #a63f2b;
    font-size: 0.88rem;
    font-weight: 600;
  }

  .homework-file-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .homework-file-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    border-radius: 14px;
    border: 1px solid #c7d5e6;
    padding: 10px 14px;
    background: #ffffff;
    color: #123454;
    font-weight: 600;
    line-height: 1.1;
    box-shadow: 0 6px 14px rgba(16, 39, 64, 0.06);
  }

  .homework-file-name {
    display: inline-block;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .homework-file-item--audio {
    align-items: center;
    gap: 10px;
    padding: 10px 16px 10px 12px;
  }

  .homework-file-audio-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
  }

  .homework-file-audio-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }

  .homework-file-audio-body .homework-file-name {
    font-size: 0.85rem;
    color: #51688a;
    font-weight: 600;
  }

  .homework-file-audio-player {
    height: 32px;
    width: 220px;
  }

  .homework-file-remove {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: none;
    background: #d93d3d;
    color: #ffffff;
    font-weight: 900;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms ease, transform 140ms ease;
    transform: scale(0.96);
    z-index: 2;
  }

  .homework-file-item:hover .homework-file-remove,
  .homework-file-item:focus-within .homework-file-remove {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
  }

  .homework-file-remove:hover {
    filter: brightness(1.05);
  }

  .homework-hint {
    margin: 0;
    color: #6a7f95;
    font-size: 0.88rem;
  }

  .homework-status {
    margin: 10px 0 0;
    min-height: 20px;
    font-weight: 600;
    color: #1a3653;
  }

  .homework-status.is-success {
    color: #176b43;
  }

  .homework-status.is-error {
    color: #a63f2b;
  }

  /* ── Homework modal — dark theme ─────────────────────────────────────── */
  [data-theme="dark"] .homework-modal {
    background: linear-gradient(165deg, #0a1628 0%, #060d18 100%);
  }

  [data-theme="dark"] .homework-card {
    background: linear-gradient(165deg, #0d1c35 0%, #091525 100%);
  }

  [data-theme="dark"] .homework-header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }

  [data-theme="dark"] .homework-badge {
    background: linear-gradient(135deg, #3a7fc4, #1c3f68);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
  }

  [data-theme="dark"] .homework-close {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.16);
    color: #cfe0f5;
    box-shadow: none;
  }

  [data-theme="dark"] .homework-close:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.26);
  }

  [data-theme="dark"] .homework-title {
    color: #e8f0ff;
  }

  [data-theme="dark"] .homework-subtitle {
    color: #8aa3bf;
  }

  [data-theme="dark"] .homework-item {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.09);
    border-left-color: #3a7fc4;
    box-shadow: none;
  }

  [data-theme="dark"] .homework-item:hover {
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.35);
  }

  [data-theme="dark"] .homework-item:nth-child(2) { border-left-color: #2bb3a8; }
  [data-theme="dark"] .homework-item:nth-child(3) { border-left-color: #a787ff; }
  [data-theme="dark"] .homework-item:nth-child(4) { border-left-color: #e6a23c; }
  [data-theme="dark"] .homework-item:nth-child(5) { border-left-color: #ec6ab0; }

  [data-theme="dark"] .homework-item-index {
    background: linear-gradient(135deg, #3a7fc4, #1c3f68);
    box-shadow: none;
  }

  [data-theme="dark"] .homework-item-title {
    color: #e8f0ff;
  }

  [data-theme="dark"] .homework-item-desc {
    color: #8aa3bf;
  }

  [data-theme="dark"] .homework-item.is-completed {
    border-color: rgba(74, 222, 128, 0.32);
    border-left-color: #4ade80;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(34, 197, 94, 0.08));
  }

  [data-theme="dark"] .homework-item.is-completed .homework-item-index {
    background: linear-gradient(135deg, #2fb876, #1d8c58);
  }

  [data-theme="dark"] .homework-task-check {
    color: #cfe0f5;
  }

  [data-theme="dark"] .homework-upload-btn {
    background: linear-gradient(135deg, #1c3f68, #2f6fb2);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.4);
  }

  [data-theme="dark"] .homework-upload-btn.is-submitted,
  [data-theme="dark"] .homework-upload-btn.is-submitted:hover {
    background: linear-gradient(135deg, #1d8c58, #15633e);
  }

  [data-theme="dark"] .homework-note {
    color: #6f88a3;
  }

  [data-theme="dark"] .homework-form {
    border-top-color: rgba(255, 255, 255, 0.1);
  }

  [data-theme="dark"] .homework-label {
    color: #cfe0f5;
  }

  [data-theme="dark"] .homework-textarea {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.14);
    color: #e8f0ff;
  }

  [data-theme="dark"] .homework-textarea::placeholder {
    color: #5d7a98;
  }

  [data-theme="dark"] .homework-textarea:focus {
    border-color: #3a7fc4;
    box-shadow: 0 0 0 3px rgba(58, 127, 196, 0.22);
  }

  [data-theme="dark"] .homework-file {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.18);
    color: #8aa3bf;
  }

  [data-theme="dark"] .homework-file:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.3);
  }

  [data-theme="dark"] .homework-file::file-selector-button,
  [data-theme="dark"] .homework-file::-webkit-file-upload-button {
    background: linear-gradient(135deg, #3a7fc4, #1c3f68);
  }

  [data-theme="dark"] .homework-record-btn {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.18);
    color: #cfe0f5;
  }

  [data-theme="dark"] .homework-record-btn:hover {
    border-color: #3a7fc4;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35);
  }

  [data-theme="dark"] .homework-record-live {
    background: rgba(224, 57, 47, 0.12);
    border-color: rgba(224, 57, 47, 0.4);
  }

  [data-theme="dark"] .homework-record-live-timer {
    color: #ff8a80;
  }

  [data-theme="dark"] .homework-record-error {
    color: #f5a394;
  }

  [data-theme="dark"] .homework-file-item {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.14);
    color: #dce8f7;
    box-shadow: none;
  }

  [data-theme="dark"] .homework-file-audio-body .homework-file-name {
    color: #8aa3bf;
  }

  [data-theme="dark"] .homework-hint {
    color: #6f88a3;
  }

  [data-theme="dark"] .homework-status {
    color: #cfe0f5;
  }

  [data-theme="dark"] .homework-status.is-success {
    color: #4ade80;
  }

  [data-theme="dark"] .homework-status.is-error {
    color: #f87171;
  }

  .quiz-explain-lang-dropdown {
    position: relative;
  }

.quiz-explain-lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #c6d7ea;
  border-radius: 12px;
  padding: 6px 10px;
  font-weight: 700;
  color: #1a3653;
  background: #ffffff;
  min-width: 120px;
  justify-content: space-between;
}

.quiz-explain-lang-value {
  flex: 1;
  text-align: left;
}

.quiz-explain-lang-caret {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #1f4f7a;
}

.quiz-explain-lang-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 150px;
  background: #ffffff;
  border: 1px solid #c6d7ea;
  border-radius: 12px;
  box-shadow: 0 12px 22px rgba(16, 39, 64, 0.12);
  padding: 6px;
  display: none;
  z-index: 2;
}

.quiz-explain-lang-list.is-open {
  display: grid;
  gap: 4px;
}

.quiz-explain-lang-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #f4f8fd;
  padding: 6px 10px;
  font-weight: 700;
  color: #1a3653;
  text-align: left;
}

.quiz-explain-lang-item:hover,
.quiz-explain-lang-item:focus {
  background: #e7f0fa;
}

.quiz-explain-lang-item.is-active {
  background: #dbe9f7;
  border: 1px solid #b9cee6;
}

.lang-flag {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.lang-flag--eng {
  background-image: url("../../assets/images/flags/eng.png");
}

.lang-flag--rus {
  background-image: url("../../assets/images/flags/rus.png");
}

.lang-flag--uzb {
  background-image: url("../../assets/images/flags/uzb.png");
}

.quiz-retry-modal.is-open,
  .subscription-expired-modal.is-open,
  .subscription-renew-modal.is-open,
  .subscription-confirm-modal.is-open,
  .subscription-sent-modal.is-open,
  .homework-modal.is-open,
  .homework-gate-modal.is-open,
  .lesson-prereq-modal.is-open {
    display: flex;
}

.lesson-prereq-card {
  width: min(440px, calc(100% - 32px));
  background: #ffffff;
  border-radius: 24px;
  border: 2px solid #2f6fb2;
  padding: 28px 28px 24px;
  box-shadow: 0 26px 70px rgba(12, 32, 54, 0.35);
  text-align: center;
}

.lesson-prereq-sticker {
  font-size: 3.4rem;
  line-height: 1;
  margin: 0 0 16px;
  display: block;
  filter: drop-shadow(0 4px 8px rgba(18, 120, 208, 0.18));
}

.lesson-prereq-card h3 {
  margin: 0 0 10px;
  color: #102740;
  font-size: 1.3rem;
  font-weight: 800;
}

.lesson-prereq-card p {
  margin: 0 0 20px;
  color: #2b4b69;
  line-height: 1.6;
  font-size: 0.97rem;
}

.lesson-prereq-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.lesson-prereq-close-btn {
  border: 1.5px solid #bfcbd8;
  border-radius: 999px;
  background: #f1f5f9;
  color: #4a6277;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 11px 22px;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.15s ease;
}

.lesson-prereq-close-btn:hover {
  background: #e2eaf2;
  transform: translateY(-1px);
}

.lesson-prereq-go-btn {
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(135deg, #1278d0 0%, #0b5ba8 100%);
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 11px 26px;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(18, 120, 208, 0.32);
  transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
  letter-spacing: 0.01em;
}

.lesson-prereq-go-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 14px 28px rgba(18, 120, 208, 0.38);
}

.lesson-prereq-go-btn:active {
  transform: translateY(0);
  filter: brightness(0.97);
}

/* ── Lessons page loading overlay ── */
.lessons-loading-overlay {
  position: fixed;
  inset: 0;
  /* Fully opaque on purpose — this covers the lesson grid while its real
     lock/unlock state is still being resolved, so nothing stale or
     incorrect should be visible behind it, not even blurred. */
  background: #eef4fb;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1300;
  overflow: hidden;
  animation: lessons-overlay-in 0.18s ease;
  transition: background 0.35s ease;
}

[data-theme="dark"] .lessons-loading-overlay {
  background: #0a1628;
}

.lessons-loading-overlay[hidden] {
  display: none;
}

.lessons-loading-overlay--out {
  animation: lessons-overlay-out 0.22s ease forwards;
}

.lessons-loading-overlay::before,
.lessons-loading-overlay::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  opacity: 0.32;
  pointer-events: none;
  animation: lessons-blob-drift 9s ease-in-out infinite;
}

.lessons-loading-overlay::before {
  width: 280px;
  height: 280px;
  background: #1278d0;
  top: 16%;
  left: 10%;
}

.lessons-loading-overlay::after {
  width: 230px;
  height: 230px;
  background: #f2c14e;
  bottom: 12%;
  right: 12%;
  animation-delay: -4.5s;
  animation-direction: reverse;
}

.lessons-loading-float {
  position: absolute;
  pointer-events: none;
  opacity: 0.85;
  filter: drop-shadow(0 10px 18px rgba(31, 79, 122, 0.22));
  line-height: 1;
  animation: lessons-float-drift 15s ease-in-out infinite;
}

.lessons-loading-float--1 {
  top: 13%;
  left: 14%;
  font-size: 84px;
  animation-duration: 17s;
}

.lessons-loading-float--2 {
  bottom: 16%;
  left: 30%;
  font-size: 62px;
  animation-duration: 13s;
  animation-delay: -5s;
}

.lessons-loading-float--3 {
  top: 16%;
  right: 12%;
  font-size: 76px;
  animation-duration: 19s;
  animation-delay: -9s;
}

@keyframes lessons-float-drift {
  0%, 100%  { transform: translate(0, 0) rotate(-6deg) scale(1); }
  50%       { transform: translate(16px, -20px) rotate(6deg) scale(1.08); }
}

@keyframes lessons-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes lessons-overlay-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes lessons-blob-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(24px, -18px) scale(1.15); }
}

.lessons-loading-card {
  position: relative;
  background: #ffffff;
  border-radius: 24px;
  border: 2px solid rgba(18, 120, 208, 0.18);
  padding: 36px 46px 32px;
  text-align: center;
  box-shadow: 0 24px 64px rgba(12, 32, 54, 0.32);
  min-width: 220px;
  animation:
    lessons-card-in 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
    lessons-card-glow 2.6s ease-in-out 0.32s infinite;
}

[data-theme="dark"] .lessons-loading-card {
  background: linear-gradient(160deg, #101f3a 0%, #0d1e38 100%);
  border-color: rgba(240, 180, 41, 0.28);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

.schedule-daypicker {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.schedule-day-btn {
  min-width: 0;
  padding: 9px 2px;
  border-radius: 10px;
  border: 1px solid #c7d5e6;
  background: #ffffff;
  color: #35536f;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  text-align: center;
}

.schedule-day-btn.is-selected {
  border-color: #1d4ed8;
  background: #1d4ed8;
  color: #ffffff;
}

[data-theme="dark"] .schedule-day-btn {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: #cfe0f5;
}

[data-theme="dark"] .schedule-day-btn.is-selected {
  border-color: #4a7fc9;
  background: #2f5fb0;
  color: #ffffff;
}

/* Course-level picker (js/modules/course-level-picker.js) - same "click a
   pill to toggle it" visual language as .schedule-day-btn above, just 4
   items (a1/a2/b1/b2) instead of 7 weekdays, so a wider grid column. */
.course-level-picker {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.course-level-btn {
  min-width: 0;
  padding: 9px 4px;
  border-radius: 999px;
  border: 1.5px solid #dbe4ee;
  background: #f7fafd;
  color: #46617e;
  font-weight: 800;
  font-size: 0.82rem;
  cursor: pointer;
  text-align: center;
}

.course-level-btn.is-selected {
  border-color: transparent;
  background: linear-gradient(135deg, #1f4f7a, #123454);
  color: #ffffff;
  box-shadow: 0 6px 14px -6px rgba(18, 52, 84, 0.55);
}

[data-theme="dark"] .course-level-btn {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: #cfe0f5;
}

[data-theme="dark"] .course-level-btn.is-selected {
  border-color: transparent;
  background: linear-gradient(135deg, #3f7cb8, #1f4f7a);
  color: #ffffff;
  box-shadow: 0 6px 14px -6px rgba(4, 12, 22, 0.6);
}


/* Dashboard charts (school.html) - simple canvas-drawn horizontal bar
   charts, same card language as .profile-stat-card, no external chart
   library needed (mentor.html/school.html/parent.html don't load Chart.js,
   unlike admin.html - matches profile-modal.js's own canvas-drawn
   activity/accuracy charts, same self-contained approach). */
.dashboard-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.dashboard-chart-card {
  background: linear-gradient(180deg, rgba(255, 252, 245, 0.95), rgba(250, 240, 225, 0.85));
  border: 1px solid rgba(90, 65, 45, 0.14);
  border-top: 3.5px solid rgba(111, 78, 55, 0.4);
  border-radius: 16px;
  padding: 20px 22px;
}

.dashboard-chart-card h3 {
  margin: 0 0 14px;
  font-size: 1rem;
  color: #3b2a1e;
  font-weight: 700;
}

.dashboard-chart-canvas {
  display: block;
  width: 100%;
}

[data-theme="dark"] .dashboard-chart-card {
  background: linear-gradient(180deg, rgba(20, 36, 34, 0.5), rgba(12, 24, 22, 0.5));
  border-color: rgba(45, 212, 191, 0.12);
  border-top-color: rgba(45, 212, 191, 0.4);
}

[data-theme="dark"] .dashboard-chart-card h3 {
  color: #eef7f6;
}

/* ===================================================================
   School windows — "Glass" redesign (Classes/Average progress/
   Teachers/Add Teacher/Create&Edit Class/Students/Delete confirm/
   Leaderboard on school.html only). Scoped entirely through the new
   .school-modal-card / .school-modal-header marker classes school.html
   adds alongside each modal's existing shared classes
   (.profile-modal-card, .mentor-students-*, .admin-delete-confirm-card)
   - none of those shared base rules are touched here, so the identical-
   looking modals on mentor.html/admin.html are completely unaffected.
   One accent + a soft ambient glow baked into the card's own background
   (see the radial-gradients below) does all the personality work - no
   separate colored header bar. Picked after comparing four directions
   (flat/minimal, tonal/neumorphic, this one, dark-editorial) side by
   side; this was the one actually chosen. Buttons keep their own pill
   shape - only the shell, item cards, filter chips, form fields and
   credentials box get the new look.
   Light theme uses a warm beige/cream base with coffee-brown accents
   (requested explicitly after seeing the original teal version); dark
   theme is unchanged - still the teal/indigo glass from the original
   pick. Every light-mode value below has a coffee-brown equivalent;
   every [data-theme="dark"] rule is untouched teal/indigo.
   =================================================================== */

/* .profile-modal-card.school-modal-card (both classes chained), not just
   .school-modal-card - admin-quiz-news.css sets its own
   [data-theme="dark"] .profile-modal-card background, loads after this
   file, and at equal specificity (one class each) was winning the
   cascade purely on file order: every one of these modals showed
   admin-quiz-news.css's navy gradient behind coffee/teal-toned cards in
   dark theme instead of this rule's own background. Chaining both classes
   (every element here always carries both, per the markup) makes this
   selector unambiguously more specific, so it wins regardless of load
   order - not a fluke of file position. */
.profile-modal-card.school-modal-card {
  padding: 0;
  border: 1px solid rgba(111, 78, 55, 0.18);
  border-radius: 28px;
  /* NOT overflow:hidden here - .profile-modal-card (also present on every
     one of these elements) already sets overflow-y:auto + max-height:90vh
     for tall content to scroll; hidden would silently win the cascade
     (same specificity, this rule loads later) and break that scrolling. */
  background:
    radial-gradient(circle at 12% -12%, rgba(111, 78, 55, 0.1), transparent 55%),
    radial-gradient(circle at 105% 110%, rgba(180, 130, 80, 0.1), transparent 55%),
    rgba(250, 246, 237, 0.8);
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  box-shadow:
    0 32px 80px rgba(59, 42, 30, 0.16),
    0 10px 28px rgba(59, 42, 30, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .profile-modal-card.school-modal-card {
  border-color: rgba(45, 212, 191, 0.2);
  background:
    radial-gradient(circle at 12% -12%, rgba(45, 212, 191, 0.22), transparent 55%),
    radial-gradient(circle at 105% 110%, rgba(99, 102, 241, 0.18), transparent 55%),
    rgba(10, 20, 22, 0.82);
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.55),
    0 10px 28px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Thin, tinted scrollbar for the same overflow-y:auto these cards inherit
   from .profile-modal-card - same treatment as .admin-progress-users-list,
   just in the coffee/teal palette instead of that list's blue. The plain
   browser scrollbar looked out of place against the redesigned card. */
.profile-modal-card.school-modal-card {
  scrollbar-width: thin;
  scrollbar-color: rgba(111, 78, 55, 0.35) transparent;
}

.profile-modal-card.school-modal-card::-webkit-scrollbar {
  width: 6px;
}

.profile-modal-card.school-modal-card::-webkit-scrollbar-track {
  background: transparent;
}

.profile-modal-card.school-modal-card::-webkit-scrollbar-thumb {
  background: rgba(111, 78, 55, 0.35);
  border-radius: 999px;
}

.profile-modal-card.school-modal-card::-webkit-scrollbar-thumb:hover {
  background: rgba(111, 78, 55, 0.55);
}

[data-theme="dark"] .profile-modal-card.school-modal-card {
  scrollbar-color: rgba(45, 212, 191, 0.35) transparent;
}

[data-theme="dark"] .profile-modal-card.school-modal-card::-webkit-scrollbar-thumb {
  background: rgba(45, 212, 191, 0.35);
}

[data-theme="dark"] .profile-modal-card.school-modal-card::-webkit-scrollbar-thumb:hover {
  background: rgba(45, 212, 191, 0.55);
}

/* The delete-confirmation card has no .school-modal-header (just a plain
   centered h3/p/actions) - a slightly smaller radius + its own padding
   read better at that size than the list-modal treatment. */
.school-modal-card--compact {
  border-radius: 22px;
  padding: 22px !important;
}

.school-modal-header {
  /* Explicit override, not just an omission: .mentor-students-header
     (admin-core.css, loaded before this file) sets its own blue gradient
     background at equal specificity - leaving this property out entirely
     here would NOT clear it, since the cascade only drops an earlier
     value when a later rule actually sets the same property. */
  background: transparent;
  position: relative;
  border-radius: 28px 28px 0 0;
  border-bottom: 1px solid rgba(111, 78, 55, 0.16);
  padding: 22px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

[data-theme="dark"] .school-modal-header {
  border-bottom-color: rgba(45, 212, 191, 0.16);
}

.school-modal-header h3 {
  margin: 0;
  color: #3b2a1e;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

[data-theme="dark"] .school-modal-header h3 {
  color: #eef7f6;
}

/* Icon + title row - only where school.html opts in (Students/Group modals
   so far), the header itself still works fine with a bare h3 for the ones
   that haven't been given an icon. Icon badge and close button both derive
   their tint from the accent color itself (color-mix) instead of a fixed
   value, so they stay correct if the accent ever changes again. */
.school-modal-header-title {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.school-modal-header-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  border-radius: 50%;
  background: color-mix(in srgb, #6f4e37 16%, transparent);
  border: 1px solid color-mix(in srgb, #6f4e37 30%, transparent);
}

[data-theme="dark"] .school-modal-header-icon {
  background: color-mix(in srgb, #2dd4bf 18%, transparent);
  border-color: color-mix(in srgb, #2dd4bf 34%, transparent);
}

/* !important throughout this rule (and its :hover/dark variants) isn't
   decorative - admin-quiz-news.css has a site-wide "every button with
   'close' in its class/id is a red gradient" rule, also !important, that
   otherwise wins here on specificity alone (attribute selector) despite
   loading earlier in <head> - same escape hatch already used for
   #profile-close-btn elsewhere. Without it this whole block is dead code:
   it was already being silently overridden before this comment was added,
   which is why every close button in this modal family rendered red
   despite this rule existing. */
.school-modal-header .mentor-students-close-btn {
  background: rgba(111, 78, 55, 0.08) !important;
  border: 1px solid rgba(111, 78, 55, 0.16) !important;
  color: #3b2a1e !important;
  box-shadow: none !important;
}

.school-modal-header .mentor-students-close-btn:hover {
  background: rgba(111, 78, 55, 0.16) !important;
  box-shadow: none !important;
}

[data-theme="dark"] .school-modal-header .mentor-students-close-btn {
  background: rgba(45, 212, 191, 0.1) !important;
  border-color: rgba(45, 212, 191, 0.2) !important;
  color: #eef7f6 !important;
}

[data-theme="dark"] .school-modal-header .mentor-students-close-btn:hover {
  background: rgba(45, 212, 191, 0.2) !important;
}

.school-modal-card .mentor-students-body,
.school-modal-card .admin-create-form {
  padding: 22px 26px 26px;
}

/* A touch more breathing room than the plain admin forms on mentor.html/
   admin.html - those stay untouched (this is scoped under .school-modal-card
   like everything else in this block). */
.school-modal-card .admin-create-form {
  gap: 16px;
}

/* Labelled field group (Group name/Teacher so far) - a small caps label
   above the input instead of relying on the placeholder alone, same
   visual language as .mentor-students-count's "STUDENTS: 15" label. */
.school-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.school-form-field label {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #7a6553;
}

[data-theme="dark"] .school-form-field label {
  color: #a9c2c2;
}

.school-modal-card .mentor-students-count {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #7a6553;
}

[data-theme="dark"] .school-modal-card .mentor-students-count {
  color: #a9c2c2;
}

/* Item cards (class/teacher/student cards) - soft gradient surface with
   a lift-on-hover, instead of the flat solid-white box the rest of the
   shared modal system still uses for .mentor-students-student. */
.school-modal-card .mentor-students-student {
  background: linear-gradient(180deg, rgba(255, 252, 245, 0.95), rgba(250, 240, 225, 0.9));
  border: 1px solid rgba(90, 65, 45, 0.12);
  border-radius: 20px;
  box-shadow: 0 10px 26px rgba(60, 42, 28, 0.08);
  transition: transform 0.2s cubic-bezier(.2, .8, .2, 1), box-shadow 0.2s ease;
}

.school-modal-card .mentor-students-student:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(60, 42, 28, 0.14);
}

[data-theme="dark"] .school-modal-card .mentor-students-student {
  background: linear-gradient(180deg, rgba(20, 36, 34, 0.92), rgba(12, 24, 22, 0.92));
  border-color: rgba(45, 212, 191, 0.09);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .school-modal-card .mentor-students-student:hover {
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

/* Card title/level badge/teacher chips/student-count line - these were
   left on their original navy-blue palette when the card itself went
   cream/coffee (.mssc-info h4, .mssc-level, .school-class-teacher-chip
   and .school-class-student-count are shared by the Classes, Students-of-
   Class and Teachers grids alike, all three built from the same card
   template), so every card showed cool blue text on a warm cream surface.
   Recolored here, scoped to this card family only - the base rules stay
   untouched for mentor.html's own cards, which don't use .school-modal-card. */
.school-modal-card .mssc-info h4 {
  color: #3b2a1e;
}

[data-theme="dark"] .school-modal-card .mssc-info h4 {
  color: #eef7f6;
}

.school-modal-card .mssc-level {
  color: #6f4e37;
  background: rgba(111, 78, 55, 0.14);
}

[data-theme="dark"] .school-modal-card .mssc-level {
  color: #2dd4bf;
  background: rgba(45, 212, 191, 0.16);
}

.school-modal-card .school-class-teacher-chip {
  color: #5c4433;
  background: rgba(111, 78, 55, 0.08);
}

[data-theme="dark"] .school-modal-card .school-class-teacher-chip {
  color: #bcdad5;
  background: rgba(45, 212, 191, 0.1);
}

.school-modal-card .school-class-student-count,
.school-modal-card .mssc-progress-labels {
  color: #7a6553;
}

[data-theme="dark"] .school-modal-card .school-class-student-count,
[data-theme="dark"] .school-modal-card .mssc-progress-labels {
  color: #a9c2c2;
}

/* Empty portion of the progress bar - the good/mid/low fill color itself
   is a semantic signal (green/amber/red) and stays untouched. */
.school-modal-card .mssc-progress-track {
  background: rgba(111, 78, 55, 0.1);
}

[data-theme="dark"] .school-modal-card .mssc-progress-track {
  background: rgba(45, 212, 191, 0.1);
}

/* Per-student percentage number (school-students.js: renderClassStudents)
   - explicitly requested as coffee-gradient text, light theme only; the
   fill bar and the number's own red/amber/green-by-performance signal
   (an inline style, not a class - .mssc-progress-value.is-progress-* here
   isn't a thing) stay exactly as-is everywhere else, including this same
   number in dark theme. Scoped via .mssc-progress-labels specifically -
   that wrapper only exists on this per-student row; the Classes/Teachers/
   Average-progress cards render their percentage in a sibling structure
   (.school-class-progress-row, no .mssc-progress-labels) and never match
   this selector. !important only on the two properties actually fighting
   the inline color - background-clip needs none. */
html:not([data-theme="dark"]) .school-modal-card .mssc-progress-labels .mssc-progress-value {
  background: linear-gradient(135deg, #6f4e37, #a97452);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* "+ Create Class" / "+ Add Teacher" dashed placeholder cards - a softer
   gradient fill + hover glow instead of a plain dashed rectangle on
   transparent background. */
.school-modal-card .admin-org-add-card {
  border: 2px dashed rgba(140, 100, 60, 0.35);
  background: linear-gradient(180deg, rgba(250, 244, 230, 0.6), rgba(245, 235, 215, 0.35));
  border-radius: 20px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.school-modal-card .admin-org-add-card:hover {
  transform: translateY(-3px);
  border-color: rgba(140, 100, 60, 0.6);
  background: linear-gradient(180deg, rgba(248, 238, 220, 0.85), rgba(242, 228, 205, 0.6));
  box-shadow: 0 14px 32px rgba(60, 42, 28, 0.12);
}

[data-theme="dark"] .school-modal-card .admin-org-add-card {
  border-color: rgba(45, 212, 191, 0.3);
  background: linear-gradient(180deg, rgba(20, 46, 42, 0.5), rgba(14, 32, 30, 0.35));
}

[data-theme="dark"] .school-modal-card .admin-org-add-card:hover {
  border-color: rgba(45, 212, 191, 0.55);
  background: linear-gradient(180deg, rgba(26, 56, 52, 0.65), rgba(18, 40, 36, 0.5));
}

/* Filter/scope chips (By class, By role, In Class/In Parallel) - a
   gradient + glow on the active pill instead of a flat fill, same single-
   accent spirit as the rest of this redesign. */
.school-modal-card .leaderboard-scope-tab.is-active {
  background: linear-gradient(135deg, #6f4e37, #a97452);
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(111, 78, 55, 0.35);
}

[data-theme="dark"] .school-modal-card .leaderboard-scope-tab.is-active {
  background: linear-gradient(135deg, #0d9488, #2dd4bf);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

/* Form fields (Create/Edit Class, Add Teacher) - a softer tinted surface
   with a focus glow, instead of a plain white box + solid border. */
.school-modal-card input,
.school-modal-card select,
.school-modal-card textarea {
  background: rgba(250, 245, 235, 0.7);
  border: 1.5px solid rgba(90, 65, 45, 0.16);
  border-radius: 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.school-modal-card input:focus,
.school-modal-card select:focus,
.school-modal-card textarea:focus {
  outline: none;
  border-color: rgba(111, 78, 55, 0.6);
  box-shadow: 0 0 0 4px rgba(111, 78, 55, 0.14);
  background: rgba(255, 252, 245, 0.95);
}

.school-modal-card input[readonly],
.school-modal-card select:disabled {
  background: rgba(240, 230, 212, 0.6);
  color: #7a6553;
}

[data-theme="dark"] .school-modal-card input,
[data-theme="dark"] .school-modal-card select,
[data-theme="dark"] .school-modal-card textarea {
  background: rgba(15, 30, 28, 0.6);
  border-color: rgba(45, 212, 191, 0.14);
  color: #eef7f6;
}

[data-theme="dark"] .school-modal-card input:focus,
[data-theme="dark"] .school-modal-card select:focus,
[data-theme="dark"] .school-modal-card textarea:focus {
  border-color: rgba(45, 212, 191, 0.6);
  box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.18);
  background: rgba(15, 30, 28, 0.85);
}

[data-theme="dark"] .school-modal-card input[readonly],
[data-theme="dark"] .school-modal-card select:disabled {
  background: rgba(10, 22, 20, 0.5);
  color: #8fb0aa;
}

/* "Cancel"/"Close" buttons - a quieter neutral glass pill instead of the
   plain #eef3f8 fill, so the colored primary action (Save/Add, already
   its own distinct blue/teal/gold per button) stays the one that draws
   the eye. Shape/other button colors are untouched. */
.school-modal-card .admin-create-cancel-btn {
  background: rgba(90, 65, 45, 0.08);
  border-color: transparent;
  color: #3b2a1e;
}

[data-theme="dark"] .school-modal-card .admin-create-cancel-btn {
  background: rgba(255, 255, 255, 0.08);
  color: #cdeee9;
}

/* Credentials box (Add Teacher success state) - align with the new glass
   surface instead of the flat #eef2ff box it inherited by default. */
.school-modal-card .school-teacher-credential-row {
  background: rgba(250, 245, 235, 0.75);
  border: 1px solid rgba(90, 65, 45, 0.12);
}

[data-theme="dark"] .school-modal-card .school-teacher-credential-row {
  background: rgba(15, 30, 28, 0.6);
  border-color: rgba(45, 212, 191, 0.1);
}

/* Hint text (e.g. "Only your school's own teachers...") - a soft tinted
   note card with a small info glyph, instead of plain grey paragraph text
   floating unstyled between the fields and the action row. */
.school-modal-card .admin-create-hint {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: rgba(111, 78, 55, 0.08);
  border: 1px solid rgba(111, 78, 55, 0.16);
  border-radius: 12px;
  padding: 10px 12px;
  color: #5c4433;
  line-height: 1.45;
}

.school-modal-card .admin-create-hint::before {
  content: "ℹ️";
  flex-shrink: 0;
  font-size: 0.9rem;
  line-height: 1.45;
}

[data-theme="dark"] .school-modal-card .admin-create-hint {
  background: rgba(45, 212, 191, 0.1);
  border-color: rgba(45, 212, 191, 0.2);
  color: #bcdad5;
}

/* Buttons get a bit more life on hover here than the plain .btn default -
   a small lift + deepened shadow, shape/colors themselves untouched. */
.school-modal-card .admin-create-form .btn,
.school-modal-card .admin-create-actions .btn {
  transition: transform 0.16s cubic-bezier(.2, .8, .2, 1), box-shadow 0.16s ease, filter 0.16s ease;
}

.school-modal-card .admin-create-form .btn:hover,
.school-modal-card .admin-create-actions .btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

.school-modal-card .admin-create-submit-btn {
  background: linear-gradient(135deg, #6f4e37, #a97452);
  box-shadow: 0 10px 24px rgba(111, 78, 55, 0.3);
}

.school-modal-card .admin-create-submit-btn:hover {
  box-shadow: 0 16px 34px rgba(111, 78, 55, 0.4);
}

[data-theme="dark"] .school-modal-card .admin-create-submit-btn {
  background: linear-gradient(135deg, #0d9488, #2dd4bf);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

/* Destructive action (Delete Group / Remove lesson slot) pushed to the far
   left of the row instead of sitting right next to Save with just the
   row's normal 8px gap (admin-core.css: .admin-create-actions is plain
   justify-content:flex-end, same treatment for every button in it
   regardless of intent) - a delete action crowded against the primary
   button read as one undifferentiated group and was too easy to misclick.
   margin-right:auto directly on the destructive button eats all the
   row's free space on its own right side, pushing everything after it
   (just Save today, after the redundant Cancel next to it was removed -
   see the "duplicate close button" cleanup below) flush to the row's
   right edge - works regardless of how many buttons follow. */
.school-modal-card .admin-create-actions .admin-delete-btn,
.school-modal-card .admin-create-actions .admin-delete-confirm-accept-btn {
  margin-right: auto;
}

/* Duplicate close button cleanup: every modal in this "Glass" family has
   its own X in the header (.mentor-students-close-btn) that already
   closes without saving - a second "Cancel"/"Close" button in the footer
   next to Save was doing the exact same thing (verified in JS: both
   called the same close function), just adding a click target no one
   needed. Removed from school.html/admin.html/mentor.html/index.html and
   their JS wiring; nothing left to style here on purpose. */

/* Group chips + per-student group row (admin-core.css: .school-group-chip
   and friends) - the base rules there are the same blue-grey used site-
   wide on mentor.html/admin.html; these sit directly inside this now-
   coffee-toned card (light theme), so give them the same tint for
   cohesion instead of leaving them the odd one out. */
.school-modal-card .school-class-groups-bar {
  border-bottom-color: rgba(111, 78, 55, 0.16);
}

[data-theme="dark"] .school-modal-card .school-class-groups-bar {
  border-bottom-color: rgba(45, 212, 191, 0.18);
}

.school-modal-card .school-class-groups-empty-hint,
.school-modal-card .school-student-group-label {
  color: #7a6553;
}

[data-theme="dark"] .school-modal-card .school-class-groups-empty-hint,
[data-theme="dark"] .school-modal-card .school-student-group-label {
  color: #a9c2c2;
}

/* Bigger + given real card edges (border/shadow), not just a tinted pill -
   at the plain pill size this was easy to miss sitting next to the much
   bolder "+ Group" button on the same row. */
.school-modal-card .school-group-chip {
  background: rgba(111, 78, 55, 0.18);
  border-color: rgba(111, 78, 55, 0.32);
  box-shadow: 0 4px 14px rgba(60, 42, 28, 0.1);
}

.school-modal-card .school-group-chip:hover {
  background: rgba(111, 78, 55, 0.26);
}

[data-theme="dark"] .school-modal-card .school-group-chip {
  background: rgba(45, 212, 191, 0.2);
  border-color: rgba(45, 212, 191, 0.38);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .school-modal-card .school-group-chip:hover {
  background: rgba(45, 212, 191, 0.3);
}

.school-modal-card .school-group-chip-name {
  color: #3b2a1e;
}

[data-theme="dark"] .school-modal-card .school-group-chip-name {
  color: #eef7f6;
}

.school-modal-card .school-group-chip-meta {
  color: #7a6553;
}

[data-theme="dark"] .school-modal-card .school-group-chip-meta {
  color: #a9c2c2;
}

/* "+ Group" was still on .btn's plain default navy-blue gradient - never
   given the same coffee/teal treatment as every other primary button in
   this modal (Save/Add/Create all already use this exact gradient via
   .admin-create-submit-btn). */
.school-modal-card .school-group-add-btn {
  background: linear-gradient(135deg, #6f4e37, #a97452);
  box-shadow: 0 10px 24px rgba(111, 78, 55, 0.3);
}

.school-modal-card .school-group-add-btn:hover {
  box-shadow: 0 16px 34px rgba(111, 78, 55, 0.4);
}

[data-theme="dark"] .school-modal-card .school-group-add-btn {
  background: linear-gradient(135deg, #0d9488, #2dd4bf);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

/* Average-progress cards are clickable through to that class's own
   Students modal (school-progress.js) - .mentor-students-student already
   gets a hover lift for free, this just adds the pointer cursor plus a
   focus/hover ring so it reads as interactive instead of a static stat
   tile, same "ring, not the lift" treatment as the mentor dashboard's own
   clickable rows (#mentor-week-row-homework and friends). */
.school-modal-card .school-progress-card {
  cursor: pointer;
}

.school-modal-card .school-progress-card:hover,
.school-modal-card .school-progress-card:focus-visible {
  box-shadow: 0 0 0 2px rgba(111, 78, 55, 0.35), 0 18px 40px rgba(60, 42, 28, 0.14);
  outline: none;
}

/* Students-of-Class modal redesign (school-students.js): "Add a student"
   moved from a form glued under the whole roster into the grid itself, as
   its own dashed .admin-org-add-card tile (same language as "+ Create
   Class"/"+ Add Teacher" elsewhere) - always the grid's first item, so it's
   never buried below however many students the class already has. Its
   form now lives in a small popup (school-add-student-modal) instead of
   an always-visible section. */
.school-modal-card .school-add-student-card {
  /* Match a real student card's natural height (avatar row + progress row,
     no group row) so the grid's first cell doesn't look squat next to the
     roster - .admin-org-add-card's own min-height (140px) was tuned for
     the Classes/Teachers grids, whose cards are shorter. */
  min-height: 172px;
}

/* Delete moves off the name row into a quiet top-right icon button instead
   of a solid red pill fighting the name for space - kept visible (not
   opacity:0 until hover) so it stays discoverable on touch, where hover
   never fires; hover/focus is just where it gets its red "this is
   destructive" tint. Scoped to #school-class-students-grid specifically,
   not the shared .mentor-students-student class - that class is reused
   as-is (no delete button, no icon to make room for) by the Classes,
   Teachers and Average-progress cards in this same modal family. */
#school-class-students-grid .mentor-students-student {
  padding-top: 40px;
}

#school-class-students-grid .mentor-students-student .school-student-delete-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.92rem;
  background: transparent;
  color: #7a6553;
  transition: background 0.15s ease, color 0.15s ease;
}

#school-class-students-grid .mentor-students-student .school-student-delete-btn:hover,
#school-class-students-grid .mentor-students-student .school-student-delete-btn:focus-visible {
  background: rgba(192, 57, 43, 0.14);
  color: #c0392b;
  outline: none;
}

[data-theme="dark"] #school-class-students-grid .mentor-students-student .school-student-delete-btn {
  color: #a9c2c2;
}

[data-theme="dark"] #school-class-students-grid .mentor-students-student .school-student-delete-btn:hover,
[data-theme="dark"] #school-class-students-grid .mentor-students-student .school-student-delete-btn:focus-visible {
  background: rgba(239, 106, 90, 0.18);
  color: #ef6a5a;
}

/* "Or upload a file..." section inside the new Add Student popup - default
   border is a generic blue-grey (admin-core.css), tint it coffee/teal to
   match the popup instead of clashing with it. */
.school-modal-card .admin-class-bulk-file {
  border-top-color: rgba(111, 78, 55, 0.2);
}

[data-theme="dark"] .school-modal-card .admin-class-bulk-file {
  border-top-color: rgba(45, 212, 191, 0.2);
}

[data-theme="dark"] .school-modal-card .school-progress-card:hover,
[data-theme="dark"] .school-modal-card .school-progress-card:focus-visible {
  box-shadow: 0 0 0 2px rgba(45, 212, 191, 0.4), 0 18px 40px rgba(0, 0, 0, 0.4);
}

/* "+ Add a student to this group" picker (school-students.js:
   renderAddStudentPicker) - this class's own students, as clickable
   blocks, instead of only being able to create a brand-new account.
   Scrolls internally past a handful of rows rather than growing the
   whole popup indefinitely for a big class. */
.school-add-student-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 10px;
  margin: 10px 0 14px;
  max-height: 216px;
  overflow-y: auto;
}

.school-add-student-picker-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  border-radius: 16px;
  border: 1px solid transparent;
  cursor: pointer;
  font: inherit;
  text-align: center;
  transition: transform 0.15s cubic-bezier(.2, .8, .2, 1), background 0.15s ease, border-color 0.15s ease;
}

.school-add-student-picker-card:hover,
.school-add-student-picker-card:focus-visible {
  transform: translateY(-2px);
  outline: none;
}

/* Checkmark badge - clicking a card checks it instead of assigning it
   immediately, so "Add to group" can commit several at once. Scaled in/
   out rather than a plain hidden/shown toggle, same spirit as the
   pop-in used elsewhere for a modal appearing (cubic-bezier overshoot). */
.school-add-student-picker-check {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 800;
  color: #ffffff;
  background: #16a34a;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transform: scale(0);
  opacity: 0;
  transition: transform 0.18s cubic-bezier(.34, 1.56, .64, 1), opacity 0.15s ease;
}

.school-add-student-picker-card.is-selected .school-add-student-picker-check {
  transform: scale(1);
  opacity: 1;
}

.school-add-student-picker-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 800;
  font-size: 0.82rem;
}

.school-add-student-picker-name {
  font-weight: 700;
  font-size: 0.85rem;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.school-add-student-picker-meta {
  font-size: 0.7rem;
}

.school-modal-card .school-add-student-picker-card {
  background: rgba(111, 78, 55, 0.08);
  border-color: rgba(111, 78, 55, 0.18);
  color: #3b2a1e;
}

.school-modal-card .school-add-student-picker-card:hover,
.school-modal-card .school-add-student-picker-card:focus-visible {
  background: rgba(111, 78, 55, 0.18);
  border-color: #a97452;
}

.school-modal-card .school-add-student-picker-card.is-selected {
  background: rgba(111, 78, 55, 0.22);
  border-color: #6f4e37;
  box-shadow: 0 0 0 2px rgba(111, 78, 55, 0.25);
}

.school-modal-card .school-add-student-picker-meta {
  color: #7a6553;
}

[data-theme="dark"] .school-modal-card .school-add-student-picker-card {
  background: rgba(45, 212, 191, 0.1);
  border-color: rgba(45, 212, 191, 0.2);
  color: #eef7f6;
}

[data-theme="dark"] .school-modal-card .school-add-student-picker-card:hover,
[data-theme="dark"] .school-modal-card .school-add-student-picker-card:focus-visible {
  background: rgba(45, 212, 191, 0.2);
  border-color: #2dd4bf;
}

[data-theme="dark"] .school-modal-card .school-add-student-picker-card.is-selected {
  background: rgba(45, 212, 191, 0.24);
  border-color: #2dd4bf;
  box-shadow: 0 0 0 2px rgba(45, 212, 191, 0.3);
}

[data-theme="dark"] .school-modal-card .school-add-student-picker-meta {
  color: #a9c2c2;
}

/* "Students in this group" list (school-students.js: renderGroupMembers) -
   shown inside the Edit Group modal, right above "+ Add a student to this
   group". A plain row list rather than the picker's card grid above: each
   row needs its own always-visible remove action, which reads better as a
   list than a grid of cards. Removing here never deletes the student, just
   moves them back to "Whole class" - same /students/set call the per-card
   Group <select> in the main grid already makes. */
.school-group-members-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 180px;
  overflow-y: auto;
  margin-top: 6px;
}

.school-group-members-empty {
  margin: 0;
  font-size: 0.84rem;
  color: #5a6f86;
}

.school-group-members-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
}

.school-group-members-avatar {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 800;
  font-size: 0.68rem;
}

.school-group-members-name {
  flex: 1;
  font-weight: 700;
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.school-group-members-remove-btn {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: none;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
}

.school-group-members-remove-btn:hover,
.school-group-members-remove-btn:focus-visible {
  opacity: 1;
  outline: none;
}

.school-modal-card .school-group-members-row {
  background: rgba(111, 78, 55, 0.08);
  border-color: rgba(111, 78, 55, 0.18);
  color: #3b2a1e;
}

.school-modal-card .school-group-members-remove-btn {
  color: #6f4e37;
}

[data-theme="dark"] .school-group-members-empty {
  color: #9bb8d8;
}

[data-theme="dark"] .school-modal-card .school-group-members-row {
  background: rgba(45, 212, 191, 0.1);
  border-color: rgba(45, 212, 191, 0.2);
  color: #eef7f6;
}

[data-theme="dark"] .school-modal-card .school-group-members-remove-btn {
  color: #2dd4bf;
}