/* PULL - Airy White & Duolingo-Inspired Design System (Montserrat Edition) */
:root {
  --bg-page: #f7f9fa;
  --bg-card: #ffffff;
  --text-main: #2b2b2b;
  --text-muted: #6e6e6e;
  --text-light: #9e9e9e;
  --border-card: #e5e5e5;
  --border-focus: #1cb0f6;
  
  /* Duolingo Green (Primary CTA) */
  --green-main: #58cc02;
  --green-hover: #61e002;
  --green-shadow: #46a302;
  --green-bg-light: #d7ffb8;
  --green-text-dark: #3b8700;

  /* Duolingo Blue (Secondary Action) */
  --blue-main: #1cb0f6;
  --blue-hover: #2ec0ff;
  --blue-shadow: #1899d6;
  --blue-bg-light: #ddf4ff;

  /* Duolingo Gray (Ghost / Neutral Button) */
  --gray-button-bg: #ffffff;
  --gray-button-border: #e5e5e5;
  --gray-button-shadow: #e5e5e5;
  --gray-button-hover: #f7f9fa;

  /* Error & Red CTA state (Duolingo Red) */
  --red-main: #ff4b4b;
  --red-hover: #ff5e5e;
  --red-shadow: #d92424;
  --red-bg: #ffdfe0;
  --red-border: #ff4b4b;
  --red-text: #ea2b2b;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: var(--bg-page);
  color: var(--text-main);
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Header */
header {
  background-color: var(--bg-card);
  border-bottom: 2px solid var(--border-card);
  padding: 18px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-decoration: none;
  color: var(--text-main);
}

.logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background-color: var(--green-main);
  box-shadow: 0 4px 0 var(--green-shadow);
  color: #ffffff;
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}

.logo span {
  color: #ffffff;
}

.identity {
  display: flex;
  align-items: center;
  gap: 18px;
}

.user-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  background: var(--blue-bg-light);
  color: var(--blue-shadow);
  border-radius: 9999px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease, color 0.15s ease;
}

.user-badge:hover {
  background: #dbeafe;
  color: #1d4ed8;
  transform: translateY(-1px);
}

.end-test-time-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 41px;
  padding: 0 18px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-radius: 14px;
  cursor: pointer;
  background-color: var(--red-main);
  color: #ffffff;
  border: 2px solid var(--red-shadow);
  box-shadow: 0 3px 0 var(--red-shadow);
  transition: filter 120ms ease, transform 80ms ease, box-shadow 80ms ease, background-color 120ms ease;
  user-select: none;
}

.end-test-time-btn:hover {
  background-color: var(--red-hover);
  color: #ffffff;
}

.end-test-time-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--red-shadow);
}

@media(max-width:700px) {
  .end-test-time-btn {
    height: 32px;
    font-size: 11px;
    padding: 0 10px;
  }
}

/* Layout */
main {
  max-width: 1040px;
  margin: 0 auto;
  padding: 44px 28px 88px;
}

/* Typography - Montserrat with Scaled Ratios and Distinct Weights */
h1 {
  font-size: 44px;
  font-weight: 900;
  color: #101936;
  margin: 0 0 10px;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

h2 {
  font-size: 30px;
  font-weight: 900;
  color: #111a37;
  margin: 0 0 12px;
  letter-spacing: -0.035em;
  line-height: 1.2;
}

h3 {
  font-size: 22px;
  font-weight: 800;
  color: #111a37;
  margin: 0 0 8px;
  letter-spacing: -0.025em;
  line-height: 1.25;
}

p {
  color: var(--text-muted);
  margin: 0 0 18px;
  font-size: 18px;
  font-weight: 400;
}

strong {
  font-weight: 700;
  color: var(--text-main);
}

.muted {
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 500;
}

.subtitle {
  color: var(--text-muted);
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 28px;
}

/* Duolingo-Style Chunky Buttons - Scaled Up with Montserrat 800 */
button,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 18px;
  border: none;
  cursor: pointer;
  user-select: none;
  transition: filter 120ms ease, transform 80ms ease, box-shadow 80ms ease, background-color 120ms ease;
}

/* Primary Button (Duolingo Green) */
button.primary,
.button.primary,
button[type="submit"]:not(.secondary):not(.quiet):not(.red) {
  background-color: var(--green-main);
  color: #ffffff;
  box-shadow: 0 5px 0 var(--green-shadow);
}

button.primary:hover,
.button.primary:hover,
button[type="submit"]:not(.secondary):not(.quiet):not(.red):hover {
  background-color: var(--green-hover);
}

button.primary:active,
.button.primary:active,
button[type="submit"]:not(.secondary):not(.quiet):not(.red):active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 var(--green-shadow);
}

/* Secondary Button (Duolingo White/Ghost) */
button.secondary,
.button.secondary {
  background-color: var(--gray-button-bg);
  color: var(--text-main);
  border: 2px solid var(--gray-button-border);
  box-shadow: 0 5px 0 var(--gray-button-shadow);
  font-weight: 700;
}

button.secondary:hover,
.button.secondary:hover {
  background-color: var(--gray-button-hover);
}

button.secondary:active,
.button.secondary:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 var(--gray-button-shadow);
}

/* Action Button (Duolingo Blue) */
button.blue,
.button.blue {
  background-color: var(--blue-main);
  color: #ffffff;
  box-shadow: 0 5px 0 var(--blue-shadow);
}

button.blue:hover,
.button.blue:hover {
  background-color: var(--blue-hover);
}

button.blue:active,
.button.blue:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 var(--blue-shadow);
}

/* Danger / Destructive Button (Duolingo Red) */
button.red,
.button.red,
button[type="submit"].red {
  background-color: var(--red-main);
  color: #ffffff;
  box-shadow: 0 5px 0 var(--red-shadow);
  border: none;
}

button.red:hover,
.button.red:hover,
button[type="submit"].red:hover {
  background-color: var(--red-hover);
  color: #ffffff;
}

button.red:active,
.button.red:active,
button[type="submit"].red:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 var(--red-shadow);
}

/* Quiet Button (Header sign-out) */
button.quiet,
.button.quiet {
  background-color: transparent;
  color: var(--text-muted);
  border: 2px solid var(--border-card);
  box-shadow: 0 3px 0 var(--border-card);
  height: 41px;
  padding: 0 18px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 14px;
}

button.quiet:hover,
.button.quiet:hover {
  background-color: var(--bg-card);
  color: var(--text-main);
  border-color: #d1d5db;
  box-shadow: 0 3px 0 #d1d5db;
}

button.quiet:active,
.button.quiet:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #d1d5db;
}

.wide {
  width: 100%;
}

/* Cards */
.card {
  background: var(--bg-card);
  border: 2px solid var(--border-card);
  border-radius: 24px;
  padding: 36px;
  margin: 24px 0;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  margin: 28px 0;
}

.cards .card {
  margin: 0;
}

/* Login Page Layout */
.login-container {
  max-width: 460px;
  margin: 48px auto;
}

.login-header {
  text-align: center;
  margin-bottom: 32px;
}

.login-header .logo-large {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background-color: var(--green-main);
  box-shadow: 0 6px 0 var(--green-shadow);
  color: #ffffff;
  font-size: 42px;
  font-weight: 900;
  margin-bottom: 18px;
}

.login-card {
  padding: 40px 36px;
}

/* Forms & Inputs - Scaled Up with Montserrat 600 */
.field {
  margin-bottom: 24px;
}

label {
  display: block;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}

input,
select {
  width: 100%;
  min-height: 54px;
  padding: 13px 18px;
  font-family: inherit;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-main);
  background: #fafafa;
  border: 2px solid var(--border-card);
  border-radius: 18px;
  transition: border-color 150ms ease, background-color 150ms ease;
}

input:focus,
select:focus {
  outline: none;
  background: #ffffff;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(28, 176, 246, 0.15);
}

/* Error Notice */
.error {
  background-color: var(--red-bg);
  border: 2px solid var(--red-border);
  color: var(--red-text);
  padding: 16px 20px;
  border-radius: 18px;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 24px;
}

/* Section Picker */
.section-picker {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  margin: 28px 0;
  flex-wrap: wrap;
}

.section-picker label {
  width: 100%;
  margin-bottom: 8px;
}

.section-picker select {
  max-width: 480px;
}

/* Pills and Badges - Montserrat 700 */
.pill {
  display: inline-flex;
  align-items: center;
  background-color: var(--green-bg-light);
  color: var(--green-text-dark);
  padding: 6px 16px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.pill.blue {
  background-color: var(--blue-bg-light);
  color: var(--blue-shadow);
}

.pill.neutral {
  background-color: #f0f0f0;
  color: var(--text-muted);
}

/* Table Styling - Scaled Up */
.table-scroll {
  overflow-x: auto;
  margin-top: 20px;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
  font-size: 17px;
}

th {
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 14px 18px;
  border-bottom: 2px solid var(--border-card);
}

td {
  padding: 18px;
  border-bottom: 1px solid var(--border-card);
  color: var(--text-main);
  font-weight: 500;
}

tr:last-child td {
  border-bottom: none;
}

code {
  font-family: monospace;
  font-size: 16px;
  font-weight: 600;
  background: #f0f2f5;
  padding: 3px 8px;
  border-radius: 6px;
}

.badge-status {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 700;
}

.badge-status.active {
  background: var(--green-bg-light);
  color: var(--green-text-dark);
}

.badge-status.disabled {
  background: #f0f0f0;
  color: var(--text-light);
}

.empty {
  padding: 36px 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 17px;
  font-weight: 500;
}

/* Details list */
.meta-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 18px 0;
}

.meta-item {
  display: flex;
  gap: 10px;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-muted);
}

.meta-item strong {
  color: var(--text-main);
  font-weight: 700;
}

/* Responsive */
@media (max-width: 640px) {
  header {
    padding: 16px 22px;
  }
  main {
    padding: 28px 18px 60px;
  }
  .card {
    padding: 28px 22px;
  }
  .login-card {
    padding: 28px 22px;
  }
  .section-picker select {
    max-width: 100%;
  }
  h1 {
    font-size: 32px;
  }
  h2 {
    font-size: 24px;
  }
  h3 {
    font-size: 19px;
  }
}


@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* ============================================================
   Unified Dashboard, Roster & Curriculum Layout Components
   Wide laptop-first layout
   ============================================================ */

main {
  max-width: 1500px;
  padding: 34px 24px 88px;
}

.pull-page,
.admin-roster-page,
.plans-page {
  width: 100%;
}

/* Unified Page Title Row */
.pull-title-row,
.admin-title-row,
.plans-title-row {
  margin: 0 18px 20px;
}

.pull-title-line,
.admin-title-line,
.plans-title-line {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.pull-title-line h1,
.admin-title-line h1,
.plans-title-line h1 {
  margin: 0;
  color: #101936;
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.pull-page-subtitle,
.admin-page-subtitle,
.plans-page-subtitle {
  margin: 4px 0 0;
  color: #65738c;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
}

.pull-code-pill,
.admin-code-pill,
.course-code-pill {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 7px 18px;
  border-radius: 999px;
  background: #dcebff;
  color: #0b64d8;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Two-column responsive split grid */
.pull-split-grid,
.admin-roster-grid,
.plans-grid {
  display: grid;
  grid-template-columns: minmax(360px, 440px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.pull-sidebar,
.admin-sidebar,
.plans-sidebar {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}


.admin-panel {
  background: #ffffff;
  border: 1px solid #edf1f5;
  border-radius: 22px;
  box-shadow: 0 12px 32px rgba(29, 45, 68, 0.06);
}

.section-panel {
  padding: 22px 20px 18px;
}

.admin-panel-heading {
  padding: 0 4px 12px;
}

.admin-panel-heading h2,
.roster-heading-row h2,
.today-heading h2 {
  margin: 0;
  color: #111a37;
  font-weight: 900;
  letter-spacing: -0.035em;
}

.admin-panel-heading h2 {
  font-size: 30px;
}

.admin-panel-heading p,
.roster-heading-row p,
.today-heading p {
  margin: 2px 0 0;
  color: #65738c;
  font-weight: 500;
}

.admin-panel-heading p {
  font-size: 15px;
}

.section-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.section-card {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 70px;
  padding: 9px 14px 9px 12px;
  border: 1.5px solid #dfe5eb;
  border-radius: 16px;
  background: #ffffff;
  color: #111a37;
  text-decoration: none;
  transition: border-color 130ms ease, background-color 130ms ease, box-shadow 130ms ease, transform 80ms ease;
}

.section-card:hover {
  border-color: #b8c7d8;
  background: #fbfdff;
}

.section-card:active {
  transform: translateY(1px);
}

.section-card.is-selected {
  border-color: #168bff;
  background: linear-gradient(105deg, #eff9ff 0%, #ffffff 72%);
  box-shadow: inset 0 0 0 1px rgba(22, 139, 255, 0.18);
}

.section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.section-icon svg,
.today-heading-icon svg,
.today-stat-icon svg,
.scholar-count-pill svg,
.roster-action-button svg,
.view-scholar-button svg,
.more-button svg,
.dialog-close svg,
.roster-empty-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.section-icon.tone-0 { background: #eef1f5; color: #667386; }
.section-icon.tone-1 { background: #e4f3ff; color: #1889f7; }
.section-icon.tone-2 { background: #f0e9ff; color: #8255d7; }
.section-icon.tone-3 { background: #e5f8e5; color: #20a52a; }
.section-icon.tone-4 { background: #fff2d7; color: #f3a000; }
.section-icon.tone-5 { background: #ffe4eb; color: #e24268; }

.section-card-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.section-card-copy strong {
  overflow: hidden;
  color: #121b36;
  font-size: 15px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.section-card-copy span {
  overflow: hidden;
  margin-top: 3px;
  color: #52627a;
  font-size: 14px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.section-count {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
}

.section-count strong {
  color: #253148;
  font-size: 15px;
  font-weight: 800;
}

.section-card.is-selected .section-count strong {
  color: #086de5;
}

.section-count span {
  color: #52627a;
  font-size: 11px;
  font-weight: 600;
}

.section-card.is-selected .section-count span {
  color: #086de5;
}

.today-card {
  margin-top: 16px;
  padding: 16px 18px 20px;
  border-radius: 22px;
  background: #a3ea73;
  border: 2px solid #8be354;
  box-shadow: 0 10px 28px rgba(90, 190, 20, 0.12);
}

.today-heading {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0 2px 12px;
}

.today-heading-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: #14532d;
}

.today-heading-icon svg {
  width: 22px;
  height: 22px;
}

.today-heading h2 {
  font-size: 21px;
  font-weight: 900;
  color: #0f172a;
}

.today-heading p {
  font-size: 13px;
  color: #274d12;
  font-weight: 600;
}

/* Today Top Stat Boxes */
.today-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.today-stat-box {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 78px;
  padding: 12px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.today-stat-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
}

.today-stat-icon.chart {
  background: #ecfdf5;
  color: #16a34a;
}

.today-stat-icon.active-scholars {
  background: #ecfdf5;
  color: #16a34a;
}

.today-stat-icon svg {
  width: 22px;
  height: 22px;
}

.today-stat-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}

.today-stat-val {
  color: #0f172a;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.today-stat-label {
  margin-top: 2px;
  color: #0f172a;
  font-size: 12px;
  font-weight: 800;
}

.today-stat-sub {
  margin-top: 1px;
  color: #64748b;
  font-size: 11px;
  font-weight: 500;
}

/* Today's Leaders Card */
.today-leaders-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.today-leaders-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
}

.today-leaders-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.today-leaders-trophy-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #f59e0b;
  font-size: 25px;
  line-height: 1;
}

.today-leaders-trophy-icon svg {
  width: 18px;
  height: 18px;
}

.today-leaders-title h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.today-leaders-view-all {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border: 1.5px solid #0091ff;
  border-radius: 999px;
  background: transparent;
  color: #0091ff;
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.today-leaders-view-all:hover {
  background: #f0f9ff;
}

.today-leaders-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.today-leader-row {
  display: grid;
  grid-template-columns: 32px 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.today-leader-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 750;
  color: #8d9aac;
  line-height: 1;
}

.today-leader-rank .rank-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.today-leader-rank .rank-icon svg {
  width: 16px;
  height: 16px;
}

.today-leader-rank.rank-1 .rank-icon { color: #f59e0b; }
.today-leader-rank.rank-2 .rank-icon { color: #94a3b8; }
.today-leader-rank.rank-3 .rank-icon { color: #d97706; }
.today-leader-rank.rank-4 .rank-icon { color: #94a3b8; }
.today-leader-rank.rank-5 .rank-icon { color: #94a3b8; }

.scholar-avatar.mini {
  width: 32px;
  height: 32px;
  font-size: 18px;
}

.today-leaders-list .scholar-avatar.mini {
  background: #fff0d4;
  font-size: 25px;
  box-shadow: none;
}

.today-leader-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 4px;
}

.today-leader-name {
  overflow: hidden;
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leader-bar-track {
  width: 100%;
  height: 6px;
  background: #f1f5f9;
  border-radius: 999px;
  overflow: hidden;
}

.leader-bar-fill {
  height: 100%;
  background: #0091ff;
  border-radius: 999px;
  transition: width 300ms ease;
}

.today-leader-xp {
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.today-leaders-empty {
  padding: 16px 8px;
  text-align: center;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
}

.roster-panel {
  min-width: 0;
  padding: 24px 24px 22px;
}

.roster-heading-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.roster-heading-row h2 {
  font-size: 30px;
}


.roster-heading-row p {
  font-size: 15px;
}

.scholar-count-pill {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #25c83c;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.scholar-count-pill svg {
  width: 18px;
  height: 18px;
}

.roster-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 225px));
  gap: 14px;
  margin-bottom: 22px;
}

.roster-action-button {
  min-height: 52px;
  gap: 10px;
  padding: 11px 18px;
  border-radius: 13px;
  font-size: 15px;
  letter-spacing: 0.015em;
}

.roster-action-button svg {
  width: 22px;
  height: 22px;
}

.admin-roster-table-wrap {
  overflow: hidden;
  border: 1px solid #e5eaf0;
  border-radius: 17px;
}

.admin-roster-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 15px;
}

.admin-roster-table th {
  padding: 13px 15px;
  border: 0;
  background: #f4f6f8;
  color: #46556c;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.admin-roster-table th:nth-child(1) { width: 30%; }
.admin-roster-table th:nth-child(2) { width: 19%; }
.admin-roster-table th:nth-child(3) { width: 17%; }
.admin-roster-table th:nth-child(4) { width: 16%; }
.admin-roster-table th:nth-child(5) { width: 18%; }

.admin-roster-table th.sortable {
  cursor: pointer;
  user-select: none;
  transition: background-color 120ms ease, color 120ms ease;
}

.admin-roster-table th.sortable:hover {
  background: #eaeff4;
  color: #111a37;
}

.admin-roster-table th.sortable:focus-visible {
  outline: 2px solid #0091ff;
  outline-offset: -2px;
}

.admin-roster-table th .th-content {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.admin-roster-table th .sort-indicator {
  display: inline-block;
  font-size: 11px;
  color: #94a3b8;
  line-height: 1;
}

.admin-roster-table th.sortable:hover .sort-indicator {
  color: #334155;
}

.admin-roster-table th.sortable.is-sorted .sort-indicator {
  color: #0091ff;
  font-weight: 900;
}

.admin-roster-table td {
  height: 50px;
  padding: 5px 15px;
  border-bottom: 1px solid #e6ebf0;
  color: #19233d;
  vertical-align: middle;
}

.admin-roster-table tbody tr:last-child td {
  border-bottom: 0;
}

.admin-roster-table tbody tr:hover {
  background: #fbfdff;
}

.scholar-name-cell {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.scholar-name-cell strong {
  overflow: hidden;
  color: #101936;
  font-size: 16px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scholar-avatar {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 39px;
  height: 39px;
  border-radius: 50%;
  background: #e5f5ff;
  font-size: 23px;
  line-height: 1;
}

.scholar-avatar.puma,
.scholar-avatar.lynx,
.scholar-avatar.default-0 { background: #ffe0a8; }
.scholar-avatar.falcon,
.scholar-avatar.default-1 { background: #cceeff; }
.scholar-avatar.otter,
.scholar-avatar.default-2 { background: #c9f1ec; }
.scholar-avatar.jaguar,
.scholar-avatar.default-3 { background: #ffd362; }
.scholar-avatar.wolf,
.scholar-avatar.default-4 { background: #cfe4f7; }
.scholar-avatar.hawk,
.scholar-avatar.default-5 { background: #ff9a7f; }
.scholar-avatar.bear { background: #fed7aa; }
.scholar-avatar.fox { background: #fed7aa; }
.scholar-avatar.gecko { background: #bbf7d0; }
.scholar-avatar.bison { background: #fef08a; }
.scholar-avatar.owl { background: #e2e8f0; }

.scholar-xp-cell {
  color: #1e293b;
  font-variant-numeric: tabular-nums;
  font-size: 15px;
}

.scholar-xp-cell strong {
  font-weight: 800;
}

.system-id {
  color: #77869d;
  font-size: 14px;
  font-weight: 500;
}

.admin-roster-table .badge-status {
  min-width: 76px;
  padding: 5px 14px;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
}

.admin-roster-table .badge-status.active {
  background: #dff8e1;
  color: #168523;
}

.admin-roster-table .badge-status.disabled {
  background: #edf0f3;
  color: #7a8798;
}

.row-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.view-scholar-button,
.compact-view-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 2.5px 0 #cbd5e1;
  color: #334155;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 120ms ease;
}

.view-scholar-button:hover,
.compact-view-button:hover {
  background: #f8fafc;
  color: #0f172a;
  border-color: #cbd5e1;
  box-shadow: 0 2.5px 0 #94a3b8;
}

.view-scholar-button:active,
.compact-view-button:active {
  transform: translateY(2px);
  box-shadow: 0 0.5px 0 #94a3b8;
}

.view-scholar-button svg,
.compact-view-button svg {
  width: 17px;
  height: 17px;
  color: #64748b;
}

.view-scholar-button:hover svg,
.compact-view-button:hover svg {
  color: #334155;
}

.more-button,
.dialog-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #647690;
  cursor: pointer;
}

.more-button {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 10px;
}

.more-button:hover {
  background: #f1f4f7;
}

.more-button svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  stroke: none;
}

.roster-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  padding: 40px;
  border: 1px dashed #dce4ec;
  border-radius: 17px;
  text-align: center;
}

.roster-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: #eef8ff;
  color: #1ca8f4;
}

.roster-empty-state h3 {
  margin: 0 0 4px;
  color: #111a37;
  font-size: 22px;
}

.roster-empty-state p {
  margin: 0;
  font-size: 15px;
}

.no-sections-panel {
  padding: 34px;
}

.no-sections-panel p {
  margin-bottom: 0;
}

.scholar-dialog {
  width: min(520px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: transparent;
  box-shadow: 0 24px 70px rgba(11, 23, 42, 0.22);
}

.scholar-dialog::backdrop {
  background: rgba(14, 25, 43, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.scholar-dialog-card {
  position: relative;
  padding: 30px;
  border-radius: 22px;
  background: #ffffff;
  box-sizing: border-box;
}

.dialog-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  transition: all 120ms ease;
}

.dialog-close:hover {
  background: #f1f4f7;
  color: #101936;
}

.dialog-close svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2.2;
}

.dialog-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--blue-shadow);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.scholar-dialog h2 {
  margin: 0 46px 18px 0;
  color: #111a37;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.dialog-detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0;
  border-top: 1.5px solid #edf0f3;
}

.dialog-detail-row span {
  color: #738196;
  font-size: 15px;
  font-weight: 600;
}

.dialog-detail-row strong {
  color: #1b2741;
  font-size: 16px;
  font-weight: 800;
}

/* Schedule section in Scholar Dialog */
.dialog-schedule-section {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 2px solid #edf0f3;
}

.dialog-schedule-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.dialog-schedule-heading-icon {
  color: var(--blue-shadow);
  display: inline-flex;
  align-items: center;
}

.dialog-schedule-heading-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
}

.dialog-schedule-heading h3 {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}

.dialog-schedule-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 4px;
}

.dialog-class-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1.5px solid var(--border-card);
  border-radius: 14px;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.dialog-class-item:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.dialog-class-period-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 12px;
  background: var(--blue-bg-light);
  color: var(--blue-shadow);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}

.dialog-class-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.dialog-class-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dialog-class-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.dialog-class-room {
  color: var(--text-muted);
}

.dialog-class-sec {
  color: var(--text-light);
}

.dialog-schedule-empty {
  padding: 16px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  background: #f8fafc;
  border-radius: 12px;
  border: 1.5px dashed var(--border-card);
}

@media (max-width: 1120px) {
  .admin-roster-grid {
    grid-template-columns: 330px minmax(0, 1fr);
    gap: 18px;
  }

  .section-card {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 10px;
  }

  .section-icon {
    width: 42px;
    height: 42px;
  }

  .roster-panel {
    padding: 20px;
  }

  .roster-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  main {
    padding: 28px 18px 60px;
  }

  .admin-title-row {
    margin-left: 0;
    margin-right: 0;
  }

  .admin-roster-grid {
    grid-template-columns: 1fr;
  }

  .admin-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.7fr);
    gap: 16px;
  }

  .today-card {
    margin-top: 0;
  }
}

@media (max-width: 720px) {
  .admin-sidebar {
    display: block;
  }

  .today-card {
    margin-top: 16px;
  }

  .roster-heading-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .roster-actions {
    grid-template-columns: 1fr;
  }

  .admin-roster-table-wrap {
    overflow-x: auto;
  }

  .admin-roster-table {
    min-width: 720px;
  }
}

/* ============================================================
   Add Scholar Modal (Mockup Pixel-Accurate & Self-Contained)
   ============================================================ */

/* 1. Modal Root: ALWAYS Hidden by default */
.modal {
  display: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 99999 !important;
  background-color: rgba(15, 23, 42, 0.65) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  overflow-y: auto !important;
  padding: 24px !important;
  box-sizing: border-box !important;
}

/* 2. Modal Active: Centered flex container */
.modal.show {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.modal-open {
  overflow: hidden !important;
}

/* 3. Modal Dialog & Card Box */
.modal-dialog-wrap {
  width: 100%;
  max-width: 500px;
  margin: auto;
  position: relative;
  z-index: 100000;
}

.modal-box {
  background: #ffffff;
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
  padding: 34px 34px 30px;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  color: #101936;
}

/* Close 'x' button in top-right */
.modal-close-x {
  position: absolute;
  top: 22px;
  right: 22px;
  background: transparent;
  border: none;
  color: #94a3b8;
  padding: 6px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 120ms ease;
  z-index: 10;
}

.modal-close-x svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2.2;
}

.modal-close-x:hover {
  background: #f1f5f9;
  color: #101936;
}

/* Heading block */
.modal-header-block {
  margin-bottom: 22px;
}

.modal-heading {
  font-size: 26px;
  font-weight: 800;
  color: #101936;
  margin: 0 0 4px;
  letter-spacing: -0.02em;
}

.modal-subheading {
  font-size: 15px;
  font-weight: 500;
  color: #64748b;
  margin: 0;
}

/* Form Groups */
.modal-field-group {
  margin-bottom: 20px;
  position: relative;
}

.modal-field-label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 8px;
}

.modal-input-container {
  display: flex;
  align-items: center;
  position: relative;
  border: 2px solid var(--border-card);
  border-radius: 18px;
  min-height: 54px;
  background: #ffffff;
  padding: 0 16px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.modal-input-container:focus-within {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(28, 176, 246, 0.15);
}

.modal-input-container input,
.modal-input-container input:focus,
.modal-input-container input:hover,
.modal-input-container input:active,
.modal-input-container select,
.modal-input-container select:focus,
.modal-input-container select:hover,
.modal-input-container select:active {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  min-height: unset !important;
  height: 50px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

.modal-input-icon {
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
}

.modal-input-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
}

.modal-input-text {
  width: 100%;
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  color: var(--text-main);
  background: transparent;
}

.modal-input-text::placeholder {
  color: #94a3b8;
  font-weight: 500;
}

.modal-select-field {
  width: 100%;
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  color: var(--text-main);
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 28px !important;
}

.modal-select-arrow {
  position: absolute;
  right: 16px;
  color: #64748b;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
}

.modal-input-clear {
  background: #f1f5f9;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  color: #64748b;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  margin-left: 8px;
  flex-shrink: 0;
  box-shadow: none !important;
  transform: none !important;
  transition: background-color 120ms ease;
}

.modal-input-clear:hover {
  background: #e2e8f0;
  color: #1e293b;
}

.modal-input-clear svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  stroke-width: 2.5;
}

.modal-field-hint {
  font-size: 13px;
  color: #94a3b8;
  font-weight: 500;
  margin-top: 6px;
}

/* Dropdown Search Results */
.modal-search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #ffffff;
  border: 2px solid var(--border-card);
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  max-height: 230px;
  overflow-y: auto;
  z-index: 100010;
  padding: 8px;
}

.scholar-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 100ms;
}

.scholar-dropdown-item:hover,
.scholar-dropdown-item.is-active {
  background-color: var(--blue-bg-light);
}

.scholar-dropdown-item.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background-color: #f8fafc;
}

/* Modal Error Box */
.modal-error-box {
  background: var(--red-bg);
  border: 2px solid var(--red-border);
  color: var(--red-text);
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 18px;
}

/* Form Action Buttons */
.modal-btn-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 28px;
  gap: 16px;
}

.modal-btn-cancel {
  min-width: 130px;
}

.modal-btn-submit {
  min-width: 180px;
}

.modal-btn-submit:disabled,
button:disabled,
.button:disabled,
button[disabled],
.button[disabled] {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  transform: none !important;
}

/* ==========================================
   CONFIRMATION STATE
   ========================================== */

.success-icon-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.success-icon-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--green-main);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 0 var(--green-shadow);
}

.success-icon-circle svg {
  width: 28px;
  height: 28px;
  stroke: #ffffff;
  stroke-width: 3.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.success-heading {
  font-size: 26px;
  font-weight: 800;
  color: #101936;
  text-align: center;
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}

.success-subheading {
  font-size: 15px;
  font-weight: 500;
  color: #64748b;
  text-align: center;
  margin: 0 0 22px;
}

/* Modal Receipt Box */
.modal-receipt-box {
  background: #f8fafc;
  border-radius: 18px;
  padding: 18px 22px;
  margin-bottom: 22px;
  border: 2px solid var(--border-card);
}

.receipt-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #edf2f7;
}

.modal-receipt-box > .receipt-line:first-child {
  padding-top: 0;
}

.receipt-password-section .receipt-line,
.receipt-active-section .receipt-line {
  border-bottom: none;
}

.receipt-key {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #64748b;
  font-size: 15px;
  font-weight: 500;
}

.receipt-key-icon {
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
}

.receipt-key-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
}

.receipt-val {
  color: #101936;
  font-size: 16px;
  font-weight: 700;
}

/* Password Pill */
.receipt-pass-pill-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.receipt-pass-pill {
  background: #ede9fe;
  color: #5b21b6;
  font-family: monospace;
  font-size: 18px;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 10px;
  letter-spacing: 0.03em;
}

.receipt-inline-copy {
  background: transparent;
  border: none;
  color: #7c3aed;
  cursor: pointer;
  padding: 6px !important;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
  transform: none !important;
  transition: all 120ms ease;
}

.receipt-inline-copy svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2.2;
}

.receipt-inline-copy:hover {
  background: #f5f3ff;
  color: #5b21b6;
}

.receipt-inline-copy.is-copied {
  color: #16a34a;
}

.receipt-password-subtext {
  font-size: 12px;
  color: #64748b;
  text-align: right;
  margin-top: 6px;
  font-weight: 500;
}

.receipt-active-subtext {
  font-size: 13px;
  color: #64748b;
  text-align: left;
  line-height: 1.45;
  margin-top: 6px;
  font-weight: 500;
}

/* Receipt Button Container */
.receipt-btn-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.receipt-two-col-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.receipt-action-btn {
  width: 100%;
  padding: 13px 18px;
  font-size: 15px;
  font-weight: 800;
  border-radius: 16px;
  gap: 8px;
}

.receipt-action-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2.2;
}

.receipt-action-btn.done-btn {
  width: 100%;
}

/* ==========================================================================
   Teacher Header Navigation & Curriculum Lesson Plans (plans.php)
   ========================================================================== */

.header-brand-wrap {
  display: flex;
  align-items: center;
  gap: 28px;
}

.teacher-main-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.teacher-nav-link {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 12px;
  color: #55657e;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: all 130ms ease;
}

.teacher-nav-link:hover {
  background: #eef3f8;
  color: #111a37;
}

.teacher-nav-link.is-active {
  background: #e4f3ff;
  color: #1889f7;
  font-weight: 800;
}
/* ==========================================================================
   Teacher Lesson Planning (plans.php)
   ========================================================================== */

.course-panel {
  padding: 22px 20px 20px;
}


.course-dropdown-module {
  padding: 0 4px;
}

.course-dropdown-label {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: #65738c;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.course-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.course-dropdown-select {
  width: 100%;
  min-height: 52px;
  padding: 12px 42px 12px 16px;
  border: 1.5px solid #dfe5eb;
  border-radius: 14px;
  background: #ffffff;
  color: #101936;
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  box-shadow: 0 3px 0 #cbd5e1;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  transition: all 120ms ease;
}

.course-dropdown-select:hover {
  border-color: #cbd5e1;
  background: #fbfdff;
}

.course-dropdown-select:focus {
  outline: none;
  border-color: #0091ff;
  box-shadow: 0 0 0 3px rgba(0, 145, 255, 0.15), 0 3px 0 #0091ff;
}

.course-dropdown-arrow {
  position: absolute;
  right: 16px;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #647690;
}

.course-dropdown-arrow svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
}

.course-module-desc {
  margin: 12px 2px 0;
  color: #65738c;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
}

.units-panel {
  padding: 22px 20px 20px;
}

.units-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 4px;
}

.unit-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 70px;
  padding: 9px 14px 9px 12px;
  border: 1.5px solid #dfe5eb;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 3px 0 #cbd5e1;
  color: inherit;
  text-decoration: none;
  transition: all 120ms ease;
}

.unit-card:hover {
  border-color: #cbd5e1;
  background: #fbfdff;
  transform: translateY(-1px);
}

.unit-card:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #cbd5e1;
}

.unit-card.is-selected {
  border-color: #0091ff;
  background: #f0f8ff;
  box-shadow: 0 3px 0 #9dd5ff;
}

.unit-num-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #eef2f7;
  color: #334155;
  font-size: 16px;
  font-weight: 900;
}

.unit-card.is-selected .unit-num-badge {
  background: #0091ff;
  color: #ffffff;
}

.unit-card-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.unit-card-copy strong {
  overflow: hidden;
  color: #101936;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.unit-card-meta {
  color: #647690;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  margin-top: 3px;
}

.unit-card-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
}

.unit-card-arrow svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
}

.unit-card.is-selected .unit-card-arrow {
  color: #0091ff;
}

/* Main Plans Area */
.plans-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.unit-hero-panel {
  padding: 26px 28px;
  border-radius: 22px;
  background: linear-gradient(135deg, #f0fdf4 0%, #e6f7ec 100%);
  border: 1px solid #bbf7d0;
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.05);
}

.unit-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.unit-kicker {
  font-size: 12px;
  font-weight: 800;
  color: #047857;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.unit-hero-title {
  margin: 4px 0 0;
  color: #064e3b;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.035em;
}

.unit-meta-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.unit-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #d1fae5;
  color: #166534;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 1px 3px rgba(6, 78, 59, 0.05);
}

.unit-pill svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.unit-pill.xp-pill {
  background: #fef9c3;
  border-color: #fde047;
  color: #854d0e;
}

.unit-pill.xp-pill svg {
  color: #ca8a04;
}

.essential-question-box {
  margin-top: 18px;
  padding: 16px 20px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #bbf7d0;
  box-shadow: 0 2px 8px rgba(6, 78, 59, 0.04);
}

.essential-question-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #047857;
}

.essential-question-header .eq-icon {
  display: inline-flex;
  align-items: center;
  color: #d97706;
}

.essential-question-header svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
}

.essential-question-text {
  margin: 6px 0 0;
  color: #064e3b;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  font-style: italic;
}

.lessons-area-header {
  margin: 10px 4px 0;
}

.lessons-area-header h3 {
  margin: 0;
  color: #111a37;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.lessons-area-header p {
  margin: 2px 0 0;
  color: #65738c;
  font-size: 15px;
  font-weight: 500;
}

/* Lesson Cards Grid - 3 Columns */
.lesson-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 1280px) {
  .lesson-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .lesson-cards-grid {
    grid-template-columns: 1fr;
  }
}

.lesson-plan-card {
  display: flex;
  flex-direction: column;
  padding: 18px 20px;
  border-radius: 20px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 4px 16px rgba(20, 30, 50, 0.04);
  transition: all 130ms ease;
}

.lesson-plan-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 8px 24px rgba(20, 30, 50, 0.08);
}

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

.lesson-day-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 8px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.lesson-meta-bar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border-bottom: none;
}

.lesson-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.lesson-meta-item svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
  color: #64748b;
}

.lesson-meta-item strong {
  color: #334155;
  font-weight: 800;
  font-size: 11px;
}
.card-status-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  box-sizing: border-box;
}

.card-status-indicator svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
}

.card-status-indicator.is-active {
  background: #ecfdf5;
  color: #059669;
  border: 1.5px solid #a7f3d0;
}

.card-status-indicator.is-draft {
  background: #f1f5f9;
  color: #94a3b8;
  border: 1.5px solid #cbd5e1;
}

.lesson-card-title {
  margin: 0 0 10px;
  color: #0f172a;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.lesson-fq-callout {
  padding: 14px 16px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #edf2f7;
  margin-bottom: 14px;
}

.lesson-fq-callout .fq-label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.lesson-fq-callout .fq-text {
  margin: 0;
  color: #0f172a;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
  font-style: italic;
}

/* Lesson Readiness Banner (Rounded Rectangle at Very Top of plan.php) */
.lesson-readiness-banner {
  padding: 16px 22px;
  margin-bottom: 22px;
  background: #ffffff;
  border: 1px solid #edf1f5;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(29, 45, 68, 0.05);
}

.readiness-banner-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f1f5f9;
  flex-wrap: wrap;
}

.readiness-banner-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.readiness-indicator-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
}

.readiness-indicator-icon svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
}

.readiness-indicator-icon.is-ready {
  background: #ecfdf5;
  color: #059669;
}

.readiness-indicator-icon.is-attention {
  background: #fffbeb;
  color: #d97706;
}

.readiness-heading {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.025em;
  color: #101936;
  margin: 0 0 2px;
  line-height: 1.2;
}

.readiness-sub {
  font-size: 13px;
  color: #64748b;
  font-weight: 500;
  margin: 0;
  line-height: 1.35;
}

.readiness-summary-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.readiness-summary-pill.is-all-ready {
  background: #dcfce7;
  color: #15803d;
}

/* Readiness Flags */
.readiness-flags-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.readiness-flag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

.readiness-flag.is-ready {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.readiness-flag.is-attention {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
}

.readiness-flag.is-missing {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.readiness-flag.is-optional {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.readiness-flag .flag-icon {
  font-weight: 900;
  font-size: 10px;
}

/* Card Actions */
.lesson-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
}

.lesson-card-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  border-radius: 12px;
}

.lesson-card-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
}

.lesson-card-btn.edit-btn {
  flex: 1;
}

.lesson-card-btn.preview-btn {
  width: 42px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  flex-shrink: 0;
  justify-content: center;
}

.lesson-card-btn.preview-btn svg {
  width: 18px;
  height: 18px;
}

.plans-empty-state {
  padding: 36px 20px;
  text-align: center;
  color: #64748b;
}

.plans-empty-state .empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: #94a3b8;
  margin-bottom: 12px;
}

.plans-empty-state .empty-icon svg {
  width: 32px;
  height: 32px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.plans-empty-state h3,
.plans-empty-state h4 {
  margin: 0 0 6px;
  color: #1e293b;
  font-size: 18px;
  font-weight: 800;
}

.plans-empty-state p {
  margin: 0;
  font-size: 14px;
}

@media (max-width: 1080px) {
  .plans-grid {
    grid-template-columns: 1fr;
  }
  .plans-title-row {
    margin-left: 0;
    margin-right: 0;
  }
  .lesson-cards-grid {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   Lesson Plan Visual Editor (plan.php)
   ========================================================================== */

.editor-container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 16px 20px 120px;
}

/* Editor Header Bar */
.editor-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.editor-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.editor-back-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 12px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 2px 0 #cbd5e1;
  color: #334155;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: all 120ms ease;
}

.editor-back-link:hover {
  background: #f8fafc;
  color: #0f172a;
  border-color: #cbd5e1;
  box-shadow: 0 2px 0 #94a3b8;
}

.editor-back-link:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 #94a3b8;
}

.editor-back-link svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
}

.editor-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #64748b;
}

.crumb-sep {
  color: #cbd5e1;
}

.crumb-day {
  color: #0f172a;
  font-weight: 800;
}

.editor-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.editor-preview-btn,
.editor-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 800;
}

.editor-preview-btn svg,
.editor-save-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
}

/* Alert Notices */
.editor-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 14px;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 700;
}

.editor-alert svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
}

.editor-alert-success {
  background: #ecfdf5;
  border: 1.5px solid #a7f3d0;
  color: #065f46;
}

.editor-alert-error {
  background: #fef2f2;
  border: 1.5px solid #fecaca;
  color: #991b1b;
}

/* Lesson Metadata Hero Card */
.lesson-meta-hero-card {
  padding: 24px 28px;
  border-radius: 20px;
  margin-bottom: 28px;
}

.meta-card-kicker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.meta-kicker-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 8px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.meta-lesson-key {
  font-family: monospace;
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
}

.meta-field-group {
  margin-bottom: 18px;
}

.meta-field-label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.editor-input-title {
  width: 100%;
  font-size: 24px;
  font-weight: 900;
  color: #0f172a;
  padding: 10px 14px;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  font-family: inherit;
  letter-spacing: -0.02em;
  transition: border-color 120ms ease;
  box-sizing: border-box;
}

.editor-input-title:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.editor-textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #1e293b;
  line-height: 1.5;
  resize: vertical;
  box-sizing: border-box;
  transition: border-color 120ms ease;
}

.editor-textarea:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.editor-input {
  width: 100%;
  padding: 8px 12px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  box-sizing: border-box;
  transition: border-color 120ms ease;
}

.editor-input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* Focus Question Callout in Hero Card */
.meta-fq-card {
  padding: 16px 20px;
  border-radius: 16px;
  background: #fffbeb;
  border: 1.5px solid #fde68a;
  border-left: 5px solid #f59e0b;
  margin-bottom: 18px;
}

.meta-fq-card .fq-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.meta-fq-card .fq-header svg {
  width: 18px;
  height: 18px;
  stroke: #d97706;
  stroke-width: 2.2;
  fill: none;
}

.meta-fq-card .fq-title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #b45309;
  margin: 0;
  cursor: pointer;
}

.meta-fq-card .fq-tag {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 6px;
  background: #fef3c7;
  color: #92400e;
  font-size: 10px;
  font-weight: 800;
}

.meta-fq-card .fq-textarea {
  background: #ffffff;
  border-color: #fde68a;
  font-style: italic;
  font-weight: 600;
  color: #78350f;
}

.meta-fq-card .fq-textarea:focus {
  border-color: #d97706;
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15);
}

/* Meta Chips Grid */
.meta-chips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-top: 10px;
}

.meta-chip-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 16px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.meta-chip-box .chip-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
}

.meta-chip-box .chip-label svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.meta-chip-box .chip-input,
.meta-chip-box .chip-select {
  padding: 8px 12px;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  background: #ffffff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
}

.meta-chip-box.toggle-chip-box {
  justify-content: center;
}

.chip-toggle-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.chip-toggle-text {
  font-size: 13px;
  font-weight: 800;
  color: #1e293b;
}

/* Toggle Switches */
.editor-switch-input,
.block-active-checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.editor-switch-slider,
.switch-slider {
  display: inline-block;
  position: relative;
  width: 38px;
  height: 22px;
  background-color: #cbd5e1;
  border-radius: 999px;
  transition: background-color 150ms ease;
  flex-shrink: 0;
}

.editor-switch-slider::before,
.switch-slider::before {
  content: "";
  position: absolute;
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: transform 150ms ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.editor-switch-input:checked + .editor-switch-slider,
.block-active-checkbox:checked + .switch-slider {
  background-color: #10b981;
}

.editor-switch-input:checked + .editor-switch-slider::before,
.block-active-checkbox:checked + .switch-slider::before {
  transform: translateX(16px);
}

/* Lesson Flow Section */
.lesson-flow-section {
  margin-top: 32px;
}

.flow-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.flow-section-header h2 {
  margin: 0;
  color: #0f172a;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.flow-section-subtitle {
  margin: 3px 0 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
}

.flow-header-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-small {
  padding: 6px 14px;
  font-size: 12px;
}

/* Stacked Block Cards */
.blocks-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.block-card {
  border-radius: 16px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
  transition: all 130ms ease;
  overflow: hidden;
}

.block-card:hover {
  border-color: #cbd5e1;
}

.block-card.is-inactive {
  opacity: 0.65;
  background: #f8fafc;
  border-color: #e2e8f0;
}

.block-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
  cursor: pointer;
  user-select: none;
  background: #ffffff;
  transition: background-color 120ms ease;
}

.block-card-header:hover {
  background: #fbfcfe;
}

.block-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.block-index-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #f1f5f9;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
  font-family: monospace;
  flex-shrink: 0;
}

.block-type-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.type-reading { background: #dcfce7; color: #15803d; }
.type-reading_questions { background: #f3e8ff; color: #7e22ce; }
.type-video { background: #ffe4e6; color: #be123c; }
.type-video_questions { background: #ede9fe; color: #6d28d9; }
.type-game_break { background: #ccfbf1; color: #0f766e; }
.type-fq_exit_ticket { background: #e0e7ff; color: #4338ca; }
.type-debate { background: #e0f2fe; color: #0369a1; }
.type-lesson_overview,
.type-class_overview { background: #f1f5f9; color: #475569; }
.type-focus_question { background: #fef3c7; color: #b45309; }
.type-fq_initial_response { background: #eff6ff; color: #1d4ed8; }
.type-learning_rating { background: #fef9c3; color: #a16207; }
.type-xp_summary { background: #fef08a; color: #854d0e; }

.block-card-title {
  margin: 0;
  color: #0f172a;
  font-size: 15px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.block-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.block-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
}

.badge-ready { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.badge-attention { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.badge-missing { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.badge-optional { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
.badge-inactive { background: #f1f5f9; color: #94a3b8; border: 1px solid #cbd5e1; }

.block-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 6px;
  background: #f8fafc;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
}

.block-meta-pill svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
}

.block-meta-pill.xp-pill {
  background: #fef9c3;
  color: #854d0e;
}

.block-active-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.block-chevron-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  transition: transform 150ms ease;
}

.block-chevron-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
}

.block-card-header.is-expanded .block-chevron-btn {
  transform: rotate(180deg);
}

/* Block Card Body */
.block-card-body {
  padding: 20px;
  border-top: 1.5px solid #f1f5f9;
  background: #fafcff;
}

.block-settings-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e2e8f0;
}

.block-input-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.block-input-label {
  font-size: 11px;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Lesson Overview Editor Section */
.overview-editor-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.overview-fq-callout {
  padding: 16px 18px;
  border-radius: 14px;
  background: #f0fdf4;
  border: 1.5px solid #bbf7d0;
}

.overview-fq-callout .callout-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: #15803d;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.overview-fq-callout .callout-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

.overview-turn-callout {
  padding: 16px 18px;
  border-radius: 14px;
  background: #eff6ff;
  border: 1.5px solid #bfdbfe;
}

.overview-turn-callout .callout-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: #1d4ed8;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.overview-turn-callout .callout-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

.editor-input-hint {
  display: block;
  font-size: 11px;
  color: #64748b;
  margin-top: 5px;
  line-height: 1.4;
}

/* Reading Editor & Translation Tabs */
.reading-editor-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.translation-tabs-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 8px;
}

.translation-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: all 120ms ease;
}

.translation-tab:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.translation-tab.is-active {
  background: #2563eb;
  border-color: #1d4ed8;
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
}

.lang-tab-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.lang-tab-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lang-tab-name {
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
}

.lang-tab-hint {
  font-size: 12px;
  color: #64748b;
}

.lang-active-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
}

.reading-textarea {
  min-height: 140px;
  background: #ffffff;
}

/* Reading Image Placeholder Row */
.reading-image-placeholder-row {
  margin-bottom: 14px;
  padding: 12px 16px;
  background: #f8fafc;
  border: 1.5px dashed #cbd5e1;
  border-radius: 12px;
  transition: border-color 0.15s ease;
}

.reading-image-placeholder-row:hover {
  border-color: #94a3b8;
}

.reading-image-placeholder-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.reading-image-placeholder-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.reading-image-placeholder-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #e2e8f0;
  color: #475569;
  flex-shrink: 0;
}

.reading-image-placeholder-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.reading-image-placeholder-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.reading-image-placeholder-title {
  font-size: 13px;
  font-weight: 700;
  color: #334155;
}

.reading-image-placeholder-desc {
  font-size: 12px;
  color: #64748b;
}

.reading-image-placeholder-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  padding: 6px 14px !important;
  height: auto !important;
  min-height: 34px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  opacity: 0.75;
  cursor: not-allowed !important;
}

.reading-image-placeholder-btn svg {
  width: 14px !important;
  height: 14px !important;
  stroke: currentColor !important;
  stroke-width: 2.2 !important;
  fill: none !important;
}

/* Questions Editor */
.questions-editor-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.questions-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}

.q-header-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.q-header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: #2563eb;
}

.q-header-icon svg {
  width: 18px;
  height: 18px;
}

.q-header-title {
  font-size: 13px;
  font-weight: 800;
  color: #1e293b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.q-header-count {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  background: #ffffff;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}

.questions-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.question-card {
  padding: 16px 18px;
  border-radius: 14px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
}

.question-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f1f5f9;
}

.q-top-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.q-badge {
  font-size: 13px;
  font-weight: 800;
  color: #2563eb;
  padding: 5px 12px;
  background: #eff6ff;
  border-radius: 8px;
  border: 1px solid #dbeafe;
  letter-spacing: 0.02em;
}

.q-role-select {
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  background: #ffffff;
}

.q-top-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.q-xp-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 800;
  color: #64748b;
}

.q-xp-input {
  width: 50px;
  padding: 4px 6px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.q-active-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
}

.q-text-group {
  margin-bottom: 14px;
}

.q-prompt-textarea {
  font-weight: 700;
  color: #0f172a;
}

.q-options-container {
  margin-bottom: 14px;
}

.q-options-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}

.q-option-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.q-radio-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}

.q-radio-label input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  accent-color: #10b981;
}

.q-option-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 10px;
  background: #f1f5f9;
  color: #334155;
  font-size: 15px;
  font-weight: 800;
  border: 1.5px solid #cbd5e1;
  box-sizing: border-box;
  transition: all 0.15s ease-in-out;
  text-align: center;
  flex-shrink: 0;
}

.q-radio-label:hover .q-option-letter {
  border-color: #10b981;
  background: #f0fdf4;
  color: #047857;
}

.q-radio-label input[type="radio"]:checked + .q-option-letter {
  background: #10b981;
  color: #ffffff;
  border-color: #059669;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35);
}

.q-radio-label:hover input[type="radio"]:checked + .q-option-letter {
  background: #059669;
  border-color: #047857;
}

.q-option-input {
  flex: 1;
  height: 42px;
  box-sizing: border-box;
}

.q-explanation-group {
  margin-top: 10px;
}

.q-expl-textarea {
  font-size: 12px;
}

.add-question-accordion-wrap {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.add-q-toggle-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  padding: 8px 18px !important;
  height: auto !important;
  min-height: 38px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  width: auto !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: #2563eb !important;
  background: #eff6ff !important;
  border: 1.5px solid #bfdbfe !important;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.08) !important;
  transition: all 0.15s ease !important;
}

.add-q-toggle-btn:hover {
  background: #dbeafe !important;
  border-color: #93c5fd !important;
  color: #1d4ed8 !important;
}

.add-q-toggle-btn svg {
  width: 16px !important;
  height: 16px !important;
  stroke: currentColor !important;
  stroke-width: 2.5 !important;
  fill: none !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}

.add-q-toggle-btn span {
  white-space: nowrap !important;
  line-height: 1 !important;
}

.new-question-form {
  margin-top: 14px;
  padding: 18px;
  border-radius: 14px;
  background: #ffffff;
  border: 2px dashed #93c5fd;
}

.new-q-title {
  margin: 0 0 12px;
  color: #1d4ed8;
  font-size: 15px;
  font-weight: 800;
}

.new-q-meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

/* Video Section */
.video-editor-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.media-fields-grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1.5fr 1fr;
  gap: 12px;
}

.video-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.video-detect-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9999px;
  background: #dbeafe;
  color: #1e40af;
  border: 1px solid #bfdbfe;
  line-height: 1.4;
}

.video-timing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.block-input-subhint {
  display: block;
  font-size: 11px;
  color: #64748b;
  margin-top: 4px;
}

.video-lang-options-card {
  padding: 14px 16px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.video-lang-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.video-lang-badge-icon {
  font-size: 20px;
  line-height: 1;
}

.video-lang-subtitle {
  margin: 2px 0 0;
  font-size: 12px;
  color: #64748b;
}

.video-lang-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 30px;
}

.video-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #334155;
  cursor: pointer;
  user-select: none;
}

.video-checkbox-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #2563eb;
  cursor: pointer;
}

.editor-hint-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 600;
}

.editor-hint-box svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  flex-shrink: 0;
}

/* Debate Editor Section */
.debate-editor-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.debate-sides-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.debate-side-card {
  padding: 16px;
  border-radius: 12px;
  border: 1.5px solid #e2e8f0;
  background: #ffffff;
}

.side-a-card {
  border-left: 4px solid #10b981;
}

.side-b-card {
  border-left: 4px solid #f59e0b;
}

.debate-side-header {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #475569;
  margin-bottom: 10px;
}

.debate-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 18px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  flex-wrap: wrap;
}

.starters-checkboxes {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.starter-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
  cursor: pointer;
}

/* Game Info Card */
.game-info-card {
  padding: 16px;
  border-radius: 12px;
  background: #ccfbf1;
  border: 1px solid #99f6e4;
  color: #115e59;
}

.game-info-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-weight: 800;
  font-size: 14px;
}

.game-info-header svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
}

.game-info-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}

/* Sticky Bottom Dock */
.editor-dock {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-top: 1.5px solid #e2e8f0;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
  z-index: 100;
  padding: 12px 24px;
}

.dock-container {
  max-width: 1160px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.dock-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #475569;
}

.dock-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #10b981;
}

.dock-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dock-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 20px;
  font-size: 13px;
  font-weight: 800;
}

.dock-save-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
}

/* Live Preview Dialog */
.lesson-preview-dialog {
  width: min(880px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
  overflow: hidden;
}

.lesson-preview-dialog::backdrop {
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(4px);
}

.preview-modal-shell {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 64px);
}

.preview-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1.5px solid #e2e8f0;
  background: #f8fafc;
}

.preview-kicker {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #2563eb;
}

.preview-title {
  margin: 2px 0 0;
  font-size: 18px;
  font-weight: 900;
  color: #0f172a;
}

.preview-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
}

.preview-close-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.preview-close-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2.5;
}

.preview-modal-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}

.preview-timeline {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid #f1f5f9;
}

.preview-step-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  font-family: monospace;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 120ms ease;
}

.preview-step-pill:hover {
  background: #e2e8f0;
}

.preview-step-pill.is-active {
  background: #2563eb;
  border-color: #1d4ed8;
  color: #ffffff;
}

.preview-stage-container {
  min-height: 280px;
  padding: 24px;
  border-radius: 18px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  margin-bottom: 20px;
}

.preview-card-hero {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
}

.preview-block-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #2563eb;
  margin-bottom: 4px;
}

.preview-block-headline {
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  color: #0f172a;
}

.preview-overview-layout {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 24px;
  align-items: start;
}

.preview-overview-left .preview-kicker {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #2563eb;
  margin-bottom: 6px;
}

.preview-overview-left .preview-lesson-title {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 900;
  color: #0f172a;
}

.preview-overview-left .preview-instructions {
  font-size: 15px;
  line-height: 1.6;
  color: #334155;
}

.preview-overview-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.preview-fq-card {
  padding: 16px;
  border-radius: 14px;
  background: #f0fdf4;
  border: 1.5px solid #bbf7d0;
}

.preview-fq-card .preview-card-tag {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #15803d;
  margin-bottom: 6px;
}

.preview-fq-card .preview-fq-text {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #166534;
  line-height: 1.4;
}

.preview-turn-card {
  padding: 16px;
  border-radius: 14px;
  background: #eff6ff;
  border: 1.5px solid #bfdbfe;
}

.preview-turn-card .preview-card-tag {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #1d4ed8;
  margin-bottom: 6px;
}

.preview-turn-card .preview-turn-prompt {
  margin: 0 0 10px;
  font-size: 14px;
  color: #1e40af;
  font-weight: 600;
}

.preview-turn-card .preview-input-mock {
  padding: 10px 12px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px dashed #93c5fd;
  color: #94a3b8;
  font-size: 13px;
  font-style: italic;
}

@media (max-width: 640px) {
  .preview-overview-layout {
    grid-template-columns: 1fr;
  }
}

.preview-reading-text {
  font-size: 16px;
  line-height: 1.6;
  color: #1e293b;
  font-weight: 500;
}

.preview-fq-box {
  padding: 18px;
  border-radius: 14px;
  background: #eff6ff;
  border: 1.5px solid #bfdbfe;
}

.preview-fq-box h3 {
  margin: 0 0 6px;
  color: #1d4ed8;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.preview-fq-box p {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  font-style: italic;
  color: #1e3a8a;
}

.preview-subheading {
  margin: 18px 0 10px;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
}

.preview-video-box {
  padding: 16px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  margin-bottom: 16px;
}

.preview-video-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 15px;
  color: #0f172a;
}

.preview-video-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.preview-video-pill-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.preview-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 9999px;
  line-height: 1.3;
}

.preview-tag.provider-tag {
  background: #ede9fe;
  color: #6d28d9;
  border: 1px solid #ddd6fe;
}

.preview-tag.timing-tag {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}

.preview-tag.lang-tag {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.preview-video-url {
  font-size: 13px;
  color: #2563eb;
  word-break: break-all;
}

.preview-video-desc {
  margin-top: 10px;
  font-size: 14px;
  color: #475569;
  line-height: 1.5;
}

.preview-questions-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.preview-question-box {
  padding: 14px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.preview-q-title {
  margin: 0 0 10px;
  font-size: 15px;
  color: #0f172a;
}

.preview-q-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.preview-q-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  font-size: 14px;
  font-weight: 600;
  color: #334155;
}

.preview-q-opt.is-correct {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}

.p-opt-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #f1f5f9;
  font-size: 11px;
  font-weight: 800;
}

.p-opt-correct-tag {
  margin-left: auto;
  font-size: 11px;
  font-weight: 800;
  color: #059669;
}

.preview-debate-box {
  padding: 16px;
  border-radius: 12px;
  background: #f8fafc;
}

.preview-debate-topic {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 12px;
}

.preview-debate-sides {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.p-side {
  padding: 10px 14px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  font-size: 14px;
  color: #334155;
}

.preview-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.preview-card-counter {
  font-size: 13px;
  font-weight: 800;
  color: #64748b;
}

@media (max-width: 900px) {
  .block-settings-row {
    grid-template-columns: 1fr;
  }
  .media-fields-grid {
    grid-template-columns: 1fr;
  }
  .debate-sides-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Student Dashboard (.student-dashboard)
   ============================================================ */
.student-dashboard { color: #101b3c; background: radial-gradient(ellipse at 70% 0, #edf6fc, transparent 65%), var(--bg-page); }
.student-dashboard > main { max-width: 1500px; padding: 34px 24px 88px; }
.student-dashboard h1, .student-dashboard h2, .student-dashboard h3, .student-dashboard strong { color: #101936; }
.lab-layout { display: grid; grid-template-columns: minmax(320px, 360px) minmax(0, 1fr); gap: 28px; align-items: start; }
.lab-sidebar { display: grid; gap: 18px; }
.lab-panel { background: #ffffffdc; border: 1px solid #fff; border-radius: 24px; box-shadow: 0 10px 32px #213d6810; }
.classroom-panel { padding: 20px 16px 14px; background: linear-gradient(130deg, #fff, #eff2fb); }
.student-profile { display: flex; gap: 14px; align-items: center; margin-bottom: 22px; }
.lab-avatar { flex: 0 0 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; background: #ffe8b4; font-size: 40px; }
.student-profile h2 { font-size: 24px; font-weight: 900; margin: 0 0 4px; letter-spacing: -0.03em; color: #101936; }
.student-profile p { font-size: 14px; color: #65738c; margin: 0; line-height: 1.6; font-weight: 500; }
.period-timer { padding: 16px; border-radius: 17px; background: #ffffffc9; }
.timer-top-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.period-badge-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #1d4ed8; background: #eff6ff; padding: 4px 10px; border-radius: 8px; }
.pull-bathroom-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 0.02em; transition: all 150ms ease; cursor: default; }
.pull-bathroom-badge.is-open { background: #ecfdf5; color: #047857; border: 1.5px solid #a7f3d0; }
.pull-bathroom-badge.is-closed { background: #f1f5f9; color: #64748b; border: 1.5px solid #cbd5e1; }
.chromebook-alert-banner { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: #fffbeb; border: 1.5px solid #fde68a; color: #92400e; font-size: 12px; font-weight: 800; margin-bottom: 12px; animation: pulse 2s infinite ease-in-out; }
.chromebook-alert-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: 11px; font-weight: 800; border: 1.5px solid #fcd34d; }
.lesson-stat.bathroom-stat { display: inline-flex; align-items: center; }
.timer-heading { display: flex; gap: 16px; align-items: center; }
.timer-heading span:not(.clock-icon) { font-size: 14px; font-weight: 550; }
.clock-icon { font-size: 50px; color: #16c337; line-height: 1; }
.timer-heading strong { display: block; font-size: 42px; font-weight: 900; line-height: 1.3; font-variant-numeric: tabular-nums; }
.student-dashboard progress { display: block; appearance: none; border: 0; width: 100%; height: 12px; border-radius: 20px; overflow: hidden; background: #e4e8ef; }
.student-dashboard progress::-webkit-progress-bar { background: #e4e8ef; border-radius: 20px; }
.student-dashboard progress::-webkit-progress-value { background: linear-gradient(90deg,#58da5a,#14c83a); border-radius: 20px; }
.student-dashboard progress::-moz-progress-bar { background: #20ca40; border-radius: 20px; }
.period-timer progress { height: 15px; margin-top: 12px; }
.period-timer p, .class-teacher { font-size: 11px; margin: 9px 0 0; color: #62718d; }
.class-teacher { text-align: center; }
.xp-panel { padding: 13px; background: linear-gradient(125deg,#fff,#f0ecff); }
.xp-total { display: flex; align-items: center; gap: 15px; padding: 13px 9px 20px; }
.xp-icon { display: grid; place-items: center; flex: 0 0 57px; height: 60px; font-size: 34px; background: linear-gradient(145deg,#9d72ff,#6233f7); border-radius: 17px; box-shadow: inset 0 2px 2px #ffffff70; }
.xp-total > div > span { font-size: 16px; color: #4e5790; }
.xp-total strong { display: block; font-size: 34px; font-weight: 850; line-height: 1.35; overflow-wrap: anywhere; }
.xp-total small { font-size: 18px; font-weight: 650; }
.xp-details { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.xp-details > div { background: #ffffffdd; border-radius: 15px; padding: 12px 9px; display: flex; gap: 7px; align-items: center; }
.xp-details > div > span { font-size: 25px; }
.xp-details div div > span { font-size: 11px; color: #607091; display: block; }
.xp-details strong { font-size: 13px; display: block; line-height: 1.4; }
.xp-caption { font-size: 11px; text-align: center; margin: 9px 0 0; }
.leaderboard-panel { background: #48c5f6; padding: 17px 10px 10px; border-radius: 26px; }
.leaderboard-panel h2 { font-size: 25px; font-weight: 850; padding: 0 10px; display: flex; justify-content: space-between; }
.leaderboard-inner { background: #fbfff9; border-radius: 22px; padding: 20px 12px; }
.leaderboard-inner h3 { font-size: 16px; font-weight: 800; margin: 0 5px 0; color: #101936; }
.leaderboard-caption { font-size: 11px; margin: 3px 5px 20px; }
.lab-leaders { list-style: none; padding: 0; margin: 0; display: grid; gap: 17px; }
.lab-leaders li { display: flex; align-items: center; gap: 7px; border-radius: 10px; padding: 5px 3px; }
.lab-leaders li.is-you { background: #e6f5ff; }
.leader-rank { width: 24px; flex-shrink: 0; text-align: center; font-size: 20px; font-weight: 750; color: #8d9aac; }
.leader-avatar { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: #fff0d4; font-size: 25px; }
.leader-details { min-width: 0; flex: 1; }
.leader-details strong { font-size: 11px; display: block; overflow-wrap: anywhere; }
.leader-details span { font-size: 10px; color: #61718d; display: block; }
.leader-details progress { height: 7px; margin-top: 4px; }
.leader-details progress::-webkit-progress-value { background: var(--blue-main); }
.leader-details progress::-moz-progress-bar { background: var(--blue-main); }
.leader-empty { text-align: center; padding: 20px 0; }
.leader-empty > span { font-size: 40px; }
.leader-empty p { font-size: 13px; margin: 10px 0; }
.lab-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; color: #0b64d8; margin: 0 0 6px; text-transform: uppercase; }
.lab-title h1 { font-size: 44px; font-weight: 900; letter-spacing: -0.015em; color: #101936; margin: 0 0 16px; line-height: 1.15; }
.badge-panel { display: grid; grid-template-columns: repeat(6,1fr); padding: 15px 0; margin-bottom: 24px; }
.lab-badge { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 5px; border-right: 1px solid #edf0f6; }
.lab-badge:last-child { border: 0; }
.badge-medallion { width: 48px; height: 48px; border-radius: 50%; border: 3px solid #ffffff85; box-shadow: 0 0 0 1px var(--medal), inset 0 -4px 0 #0002; background: linear-gradient(150deg,#fff6,var(--medal)); background-color: var(--medal); color: white; font-size: 31px; display: grid; place-items: center; line-height: 1; margin-bottom: 8px; }
.badge-medallion.green { --medal: #59c92d; }.badge-medallion.gold { --medal: #ffbe17; }.badge-medallion.purple { --medal: #7665ff; }.badge-medallion.red { --medal: #ff5c76; }.badge-medallion.blue { --medal: #239ffa; }.badge-medallion.gray { --medal: #9da7ba; font-size: 23px; }
.lab-badge strong { font-size: 12px; line-height: 1.4; }.lab-badge > span:not(.badge-medallion) { font-size: 10px; color: #647491; }.lab-badge small { font-size: 9px; color: #77849a; }
.lessons-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 9px; }
.lessons-toolbar h2 { font-size: 30px; font-weight: 900; letter-spacing: -0.035em; color: #101936; margin: 0; }
.lessons-toolbar label { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.lessons-toolbar select { font-size: 12px; padding: 10px 34px 10px 14px; border-radius: 13px; width: auto; min-height: 42px; margin: 0; background-color: white; color: #162544; border: 1px solid #dce3ee; }
.lesson-preview-note { font-size: 14px; color: #65738c; margin: 0 0 16px; font-weight: 500; }

.lesson-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.lesson-card { padding: 10px 10px 15px; border: 1px solid #dce7f3; border-radius: 18px; background: linear-gradient(145deg,#f4faff,#fff); display: flex; flex-direction: column; min-width: 0; box-shadow: 0 5px 20px #32456a04; }
.lesson-card.state-active { border-color: #75dc63; background: linear-gradient(145deg,#e8ffe5,#fff); }.lesson-card.state-past-due { border-color: #ffcad3; background: linear-gradient(145deg,#fff0f2,#fff); }.lesson-card.state-completed,.lesson-card.state-locked { background: linear-gradient(145deg,#f1f3f6,#fff); border-color: #dfe4eb; }
.lesson-banner { position: relative; background: linear-gradient(135deg,#cce4ff,#e5f5ff); border-radius: 12px; height: 140px; overflow: hidden; color: #298eff; }
.art-robot .lesson-banner { background: linear-gradient(130deg,#bff5be,#e0ffe2); }.art-prompt .lesson-banner { background: linear-gradient(130deg,#ffcad5,#ffe7ed); }.art-data .lesson-banner { background: linear-gradient(130deg,#dcd6ff,#f0edff); }.art-shield .lesson-banner { background: linear-gradient(130deg,#b9ebff,#e1f7ff); }.art-gears .lesson-banner,.art-calendar .lesson-banner,.art-world .lesson-banner { background: linear-gradient(130deg,#dce1e9,#edf0f5); }
.lesson-banner svg { width: 100%; height: 100%; padding-top: 8px; }
.lesson-status { position: absolute; top: 8px; left: 8px; background: #009ff5; border-radius: 30px; padding: 4px 12px; color: white; font-size: 10px; font-weight: 800; text-transform: uppercase; z-index: 1; }
.state-active .lesson-status { background: #13bd1c; }.state-past-due .lesson-status { background: #ff394c; }.state-completed .lesson-status,.state-locked .lesson-status { background: #8490a5; }
.lesson-card h3 { font-size: 17px; font-weight: 800; letter-spacing: -.035em; line-height: 1.3; margin: 12px 6px 4px; }
.lesson-unit { font-size: 12px; color: #607191; margin: 0 6px 12px; }
.lesson-bottom { margin: auto 6px 0; }
.lesson-progress-label { font-size: 12px; color: #3d5175; margin: 6px 0 10px; }.locked-label { min-height: 38px; padding-top: 8px; }
.student-dashboard .lesson-action { padding: 12px 5px; width: 100%; font-size: 11px; min-height: 43px; border-radius: 12px; letter-spacing: 0; line-height: 1.3; }
.student-dashboard .state-past-due .lesson-action { background: #ff3e4d; box-shadow: 0 5px 0 #d92536; }.student-dashboard .state-past-due .lesson-action:active { box-shadow: 0 2px 0 #d92536; }
.student-dashboard .state-completed .lesson-action { background: #e7ebf1; color: #4a5c7b; border-color: #e7ebf1; box-shadow: 0 5px 0 #ccd3dd; }
.student-dashboard .section-picker { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; }.student-dashboard .section-picker select { width: 100%; font-size: 12px; }.student-dashboard .section-picker button { font-size: 11px; padding: 10px; }
.lesson-preview-dialog { border: 1px solid #e1e9f4; border-radius: 24px; padding: 32px; width: min(480px,calc(100% - 32px)); box-shadow: 0 20px 80px #15294740; text-align: center; }.lesson-preview-dialog::backdrop { background: #14233d75; backdrop-filter: blur(4px); }.lesson-preview-dialog p { font-size: 15px; }.preview-dialog-icon { font-size: 48px; }.lesson-preview-dialog form { margin: 0; }
.enrollment-empty { padding: 30px; }
.student-dashboard :focus-visible { outline: 3px solid #6255e9; outline-offset: 4px; }
@media(min-width:1500px) { .lesson-banner { height: 155px; }.lesson-card h3 { font-size: 19px; }.student-dashboard .lesson-action { font-size: 13px; } }
@media(max-width:1200px) { .lab-layout { grid-template-columns: 275px minmax(0,1fr); gap: 20px; }.lesson-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }.lab-badge strong { font-size: 10px; }.lab-badge > span:not(.badge-medallion) { font-size: 9px; } }
@media(max-width:980px) { .lesson-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.badge-panel { grid-template-columns: repeat(3,1fr); gap: 16px 0; }.lab-badge:nth-child(3) { border: 0; }.lab-badge strong { font-size: 12px; }.lessons-toolbar { align-items: start; flex-direction: column; } }
@media(max-width:700px) { .student-dashboard > main { padding: 20px 16px 40px; }.student-dashboard > header { padding: 14px 16px; }.student-dashboard .identity { gap: 8px; }.student-dashboard .user-badge { font-size: 11px; padding: 5px 8px; }.student-dashboard header .quiet { font-size: 11px; padding: 9px 10px; }.student-dashboard .brand { font-size: 21px; gap: 8px; }.lab-layout { grid-template-columns: 1fr; }.lab-sidebar { grid-template-columns: 1fr 1fr; gap: 12px; }.classroom-panel { grid-column: 1/-1; }.student-profile { margin-bottom: 14px; }.xp-panel,.leaderboard-panel { min-width: 0; }.xp-total { flex-direction: column; align-items: start; padding: 10px 0; gap: 8px; }.xp-total strong { font-size: 28px; }.xp-details { grid-template-columns: 1fr; }.leaderboard-panel h2 { font-size: 17px; padding: 0; }.leaderboard-panel h2 > span { display: none; }.leaderboard-inner { padding: 15px 7px; }.leader-rank { width: 16px; font-size: 16px; }.leader-avatar { width: 25px; height: 25px; font-size: 20px; }.lab-leaders li { gap: 4px; }.leader-details strong { font-size: 9px; }.leader-details span { font-size: 9px; }.leaderboard-inner h3 { font-size: 12px; }.leaderboard-caption { font-size: 9px; }.lesson-grid { gap: 12px; }.lesson-banner { height: 130px; }.lesson-card { padding: 8px 8px 15px; }.lesson-card h3 { font-size: 15px; margin-left: 0; margin-right: 0; }.lesson-unit { margin-left: 0; font-size: 10px; }.lesson-bottom { margin-left: 0; margin-right: 0; }.student-dashboard .lesson-action { font-size: 10px; }.lab-title h1 { font-size: 29px; } }
@media(prefers-reduced-motion:reduce) { .student-dashboard button { transition: none; } }

/* ============================================================
   Schedule & System Time Controller: Dynamic 2-Column Themes
   ============================================================ */

/* Left Column: Real Time (Active Mode: ONTIME) -> Light Green */
.real-time-col.is-active .time-stat-box,
.real-time-col.is-active .schedule-status-card {
  background-color: #f0fdf4 !important;
  border: 1.5px solid #bbf7d0 !important;
  color: #14532d;
}
.real-time-col.is-active .stat-box-label,
.real-time-col.is-active .status-card-label {
  color: #166534 !important;
}
.real-time-col.is-active .time-stat-box strong {
  color: #14532d !important;
}
.real-time-col.is-active .time-stat-box .stat-box-sub {
  color: #15803d !important;
}

/* Left Column: Real Time (Inactive Mode: TESTTIME) -> Grayed Out */
.real-time-col.is-inactive .time-stat-box,
.real-time-col.is-inactive .schedule-status-card {
  background-color: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  color: #64748b;
}
.real-time-col.is-inactive .stat-box-label,
.real-time-col.is-inactive .status-card-label {
  color: #64748b !important;
}
.real-time-col.is-inactive .time-stat-box strong {
  color: #64748b !important;
}
.real-time-col.is-inactive .time-stat-box .stat-box-sub {
  color: #94a3b8 !important;
}

/* Right Column: Simulator (Inactive Mode: ONTIME) -> Grayed Out */
.sim-time-col.is-inactive .time-stat-box,
.sim-time-col.is-inactive .sim-controls-card {
  background-color: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  color: #64748b;
}
.sim-time-col.is-inactive .stat-box-label,
.sim-time-col.is-inactive .controls-card-label {
  color: #64748b !important;
}
.sim-time-col.is-inactive .time-stat-box strong {
  color: #64748b !important;
}
.sim-time-col.is-inactive .time-stat-box .stat-box-sub {
  color: #94a3b8 !important;
}
.sim-time-col.is-inactive .preset-btn {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #64748b !important;
}

/* Right Column: Simulator (Active Mode: TESTTIME) -> Red / Orange */
.sim-time-col.is-active .time-stat-box,
.sim-time-col.is-active .sim-controls-card {
  background-color: #fff7ed !important;
  border: 1.5px solid #fed7aa !important;
  color: #7c2d12;
}
.sim-time-col.is-active .stat-box-label,
.sim-time-col.is-active .controls-card-label {
  color: #9a3412 !important;
}
.sim-time-col.is-active .time-stat-box strong {
  color: #7c2d12 !important;
}
.sim-time-col.is-active [data-sim-countdown] {
  color: #ea580c !important;
}
.sim-time-col.is-active .time-stat-box .stat-box-sub {
  color: #9a3412 !important;
}
.sim-time-col.is-active .preset-btn {
  background-color: #ffffff !important;
  border: 1px solid #fdba74 !important;
  color: #9a3412 !important;
}

/* ============================================================
   Redesigned Student Dashboard & Scholar Profile
   ============================================================ */

.dashboard-shell {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
}

.dashboard-top-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

/* Module 1: Scholar Profile & XP */
.scholar-profile-card {
  padding: 16px 18px;
  background: linear-gradient(135deg, #ffffff, #f8faff);
  border: 1.5px solid #dce5f7;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 4px 18px rgba(33, 61, 104, 0.04);
}

.scholar-profile-bubble {
  display: flex;
  align-items: center;
  gap: 12px;
}

.scholar-avatar-link {
  text-decoration: none;
  flex-shrink: 0;
  display: inline-block;
}

.scholar-avatar-circle {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffe8b4;
  font-size: 28px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
  transition: transform 150ms ease;
}

.scholar-avatar-link:hover .scholar-avatar-circle {
  transform: scale(1.06);
}

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

.scholar-name-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.scholar-name-link h2 {
  font-size: 19px;
  font-weight: 900;
  margin: 0;
  color: #101936;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 150ms ease;
}

.scholar-name-link:hover h2 {
  color: #2563eb;
}

.scholar-xp-compact {
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 8px 12px;
  gap: 8px;
}

.xp-compact-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.xp-compact-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.xp-compact-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
}

.xp-compact-stat strong {
  display: block;
  font-size: 14px;
  font-weight: 900;
  color: #101936;
  line-height: 1.2;
  margin-top: 1px;
}

.scholar-xp-divider {
  width: 1px;
  height: 26px;
  background: #e2e8f0;
  flex-shrink: 0;
}

/* Module 2: Current Class Card */
.current-class-card {
  padding: 16px 18px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  box-shadow: 0 4px 18px rgba(33, 61, 104, 0.04);
}

.current-class-card .class-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #2563eb;
  text-transform: uppercase;
}

.current-class-title {
  font-size: 21px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #101936;
  margin: 2px 0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.current-class-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #64748b;
  font-weight: 600;
  margin: 0;
  flex-wrap: wrap;
}

.class-period-chip {
  color: #1d4ed8;
  font-weight: 800;
}

.class-room-chip {
  color: #475569;
}

.class-switcher-mini {
  margin-top: 4px;
}
.class-switcher-mini .section-picker {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.class-switcher-mini .section-picker label {
  display: none;
}
.class-switcher-mini .section-picker select {
  font-size: 11px;
  padding: 4px 8px;
  height: 28px;
  min-height: 28px;
}
.class-switcher-mini .section-picker button {
  font-size: 11px;
  padding: 4px 10px;
  height: 28px;
  min-height: 28px;
}

/* Module 3: Class Period Clock */
.dashboard-clock-card {
  padding: 16px 18px;
  background: linear-gradient(135deg, #ffffff, #f0fdf4);
  border: 1.5px solid #bbf7d0;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  gap: 6px;
  box-shadow: 0 4px 18px rgba(33, 61, 104, 0.04);
}

.dashboard-clock-card .class-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #15803d;
  text-transform: uppercase;
}

.period-clock-display {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px 0;
}

.period-clock-time {
  font-size: 34px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #0f172a;
  letter-spacing: -0.02em;
  line-height: 1;
}

.period-clock-caption {
  font-size: 11px;
  font-weight: 700;
  color: #16a34a;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Module 4: Mini Leaderboard Card (Blue Styling with Trophy) */
.mini-leaderboard-card {
  padding: 12px 10px 10px;
  background: #48c5f6;
  border: 2px solid #2db4ea;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  box-shadow: 0 4px 18px rgba(40, 160, 220, 0.2);
}

.mini-leader-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
}

.mini-leader-title {
  font-size: 14px;
  font-weight: 900;
  color: #ffffff;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  letter-spacing: -0.01em;
}

.mini-leader-link {
  font-size: 10px;
  font-weight: 800;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.25);
  padding: 3px 8px;
  border-radius: 999px;
  text-decoration: none;
  transition: background-color 150ms ease, transform 150ms ease;
}

.mini-leader-link:hover {
  background: rgba(255, 255, 255, 0.4);
  transform: translateX(1px);
}

.mini-leaderboard-inner {
  background: #fbfff9;
  border-radius: 14px;
  padding: 8px 8px 6px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

.mini-leader-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.mini-leader-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 8px;
  font-size: 11px;
  background: #f8fafc;
}

.mini-leader-item.is-me,
.mini-leader-item.is-you {
  background: #e6f5ff;
  border: 1px solid #a5d8f9;
  font-weight: 800;
}

.mini-rank {
  font-size: 11px;
  font-weight: 800;
  color: #64748b;
  min-width: 16px;
  text-align: center;
}

.mini-avatar {
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}

.mini-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  min-width: 0;
  gap: 6px;
}

.mini-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 700;
  color: #1e293b;
  font-size: 11px;
}

.mini-xp {
  font-size: 11px;
  font-weight: 800;
  color: #2563eb;
  white-space: nowrap;
}


/* Page-Wide Lessons Area */
.dashboard-lessons-full {
  width: 100%;
}

/* Scholar Profile Page (scholar.php) */
.scholar-page-container {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.scholar-nav-row {
  margin-bottom: 4px;
}

.scholar-back-btn {
  font-size: 13px;
  font-weight: 700;
  padding: 8px 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  border-radius: 10px;
}

.scholar-hero-card {
  padding: 28px 32px;
  background: linear-gradient(135deg, #ffffff, #eff6ff);
  border: 1.5px solid #dbeafe;
  border-radius: 24px;
}

.scholar-hero-layout {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.scholar-hero-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #ffe8b4;
  font-size: 46px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}

.scholar-hero-details {
  flex: 1;
  min-width: 220px;
}

.scholar-hero-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #2563eb;
  text-transform: uppercase;
}

.scholar-hero-details h1 {
  font-size: 32px;
  font-weight: 900;
  color: #101936;
  margin: 2px 0 6px;
  letter-spacing: -0.02em;
}

.scholar-hero-meta {
  font-size: 13px;
  color: #64748b;
  font-weight: 600;
  margin: 0;
}

.scholar-hero-xp {
  display: flex;
  gap: 16px;
  align-items: center;
}

.xp-hero-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffffdd;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 12px 18px;
}

.xp-hero-icon {
  font-size: 28px;
}

.xp-hero-stat strong {
  display: block;
  font-size: 22px;
  font-weight: 900;
  color: #101936;
  line-height: 1.2;
}

.scholar-section-card {
  padding: 28px 32px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 24px;
  box-shadow: 0 10px 32px #213d6808;
}

.section-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 22px;
  gap: 16px;
  flex-wrap: wrap;
}

.section-card-header h2 {
  font-size: 22px;
  font-weight: 900;
  color: #101936;
  margin: 0 0 4px;
  letter-spacing: -0.02em;
}

.header-sub-label {
  font-size: 15px;
  color: #64748b;
  font-weight: 600;
}

.section-card-subtitle {
  font-size: 13px;
  color: #64748b;
  margin: 0;
  font-weight: 500;
}

.section-badge-pill {
  font-size: 11px;
  font-weight: 800;
  color: #1d4ed8;
  background: #eff6ff;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid #bfdbfe;
}

/* Scholar Preferred Language Controls */
.language-card-compact {
  width: 100%;
  padding: 28px 32px;
}

.scholar-language-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 4px;
}

.scholar-language-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0;
  padding: 16px 20px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  transition: background-color 180ms ease, border-color 180ms ease;
}

.scholar-language-option:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.scholar-language-option.is-active {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.scholar-language-label {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.scholar-language-flag {
  display: inline-flex;
  flex: 0 0 42px;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
  color: #1e293b;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

.scholar-language-option.is-active .scholar-language-flag {
  background: #dcfce7;
  border-color: #86efac;
  color: #166534;
}

.scholar-language-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
  line-height: 1.25;
}

.scholar-language-text strong {
  color: #101936;
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
}

.scholar-language-native {
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* Self-contained switch. Deliberately does not reuse generic switch classes. */
.scholar-language-switch {
  position: relative;
  display: inline-flex;
  flex: 0 0 52px;
  width: 52px;
  height: 30px;
  margin: 0;
  padding: 0;
  cursor: pointer;
  user-select: none;
}

.scholar-language-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  opacity: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.scholar-language-switch-track {
  position: absolute;
  inset: 0;
  display: block;
  width: 52px;
  height: 30px;
  border-radius: 999px;
  background: #71717a;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: background-color 180ms ease, box-shadow 180ms ease;
}

.scholar-language-switch-track::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: transform 180ms ease;
}

.scholar-language-switch input:checked + .scholar-language-switch-track {
  background: var(--green-main);
}

.scholar-language-switch input:checked + .scholar-language-switch-track::before {
  transform: translateX(22px);
}

.scholar-language-switch input:focus-visible + .scholar-language-switch-track {
  outline: 3px solid #93c5fd;
  outline-offset: 2px;
}

.scholar-language-switch:hover .scholar-language-switch-track {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15), 0 0 0 3px rgba(88, 204, 2, 0.10);
}

/* Scholar Badge Trophy Case */
.scholar-badge-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.scholar-badge-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 22px 18px 18px;
  border-radius: 18px;
  border: 1.5px solid #e2e8f0;
  background: #f8fafc;
  transition: transform 150ms ease;
}

.scholar-badge-card:hover {
  transform: translateY(-2px);
}

.scholar-badge-card.is-earned {
  background: linear-gradient(145deg, #ffffff, #f0fdf4);
  border-color: #bbf7d0;
}

.scholar-badge-card .badge-medallion {
  margin-bottom: 12px;
}

.badge-card-info strong {
  display: block;
  font-size: 15px;
  font-weight: 850;
  color: #101936;
  margin-bottom: 4px;
}

.badge-card-info p {
  font-size: 12px;
  color: #64748b;
  margin: 0 0 12px;
  line-height: 1.4;
}

.badge-card-status {
  margin-top: auto;
}

.badge-status-pill {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
}

.badge-status-pill.earned {
  background: #dcfce7;
  color: #15803d;
}

/* Scholar Page Leaderboard (Blue Styling with Trophy) */
.scholar-leaderboard-card {
  background: #48c5f6 !important;
  border: 2.5px solid #28abde !important;
  border-radius: 26px !important;
  padding: 18px 14px 14px !important;
  box-shadow: 0 8px 28px rgba(40, 160, 220, 0.22) !important;
}

.leaderboard-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px 12px;
}

.leaderboard-panel-header h2 {
  font-size: 24px;
  font-weight: 900;
  color: #ffffff;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.02em;
}

.leaderboard-panel-pill {
  font-size: 11px;
  font-weight: 800;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.28);
  padding: 4px 12px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.scholar-leaderboard-card .leaderboard-inner {
  background: #fbfff9;
  border-radius: 20px;
  padding: 20px 16px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
}

.leaderboard-inner-heading {
  margin-bottom: 16px;
  padding: 0 4px;
}

.leaderboard-inner-heading h3 {
  font-size: 16px;
  font-weight: 800;
  margin: 0;
  color: #101936;
}

.leaderboard-inner-heading .leaderboard-caption {
  font-size: 11px;
  color: #64748b;
  margin: 2px 0 0;
  font-weight: 600;
}

/* Responsive adjustments */
@media (max-width: 1100px) {
  .dashboard-top-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .dashboard-main-row {
    grid-template-columns: 1fr;
  }
  .scholar-badge-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 950px) {
  .scholar-language-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .language-card-compact {
    padding: 20px 18px;
  }
  .dashboard-top-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .scholar-badge-grid {
    grid-template-columns: 1fr;
  }
  .scholar-hero-layout {
    flex-direction: column;
    align-items: flex-start;
  }
  .scholar-hero-xp {
    width: 100%;
    flex-direction: column;
  }
}


/* ==========================================================================
   Admin Dashboard Portal Page (/admin.php)
   ========================================================================== */

/* Main Page Container Scope */
body.admin-portal-page main {
  max-width: 1500px;
  padding: 34px 24px 88px;
}

.admin-portal-shell {
  width: 100%;
}

/* --- Top 4 Navigation Cards Grid --- */
.admin-nav-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 28px;
}

.admin-nav-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 20px;
  padding: 22px 20px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.admin-nav-card:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.admin-nav-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.admin-nav-card-icon.icon-blue {
  background: #e0f2fe;
  color: #0284c7;
}

.admin-nav-card-icon.icon-purple {
  background: #f3e8ff;
  color: #9333ea;
}

.admin-nav-card-icon.icon-green {
  background: #dcfce7;
  color: #16a34a;
}

.admin-nav-card-icon.icon-amber {
  background: #fef3c7;
  color: #d97706;
}

.admin-nav-card-body {
  flex: 1;
  min-width: 0;
}

.admin-nav-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.admin-nav-card-title {
  font-size: 17px;
  font-weight: 800;
  color: #101936;
  margin: 0;
}

.admin-nav-card-arrow {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid #e2e8f0;
  background: #f8fafc;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.admin-nav-card:hover .admin-nav-card-arrow {
  background: #f1f5f9;
  color: #334155;
  border-color: #cbd5e1;
}

.admin-nav-card-desc {
  font-size: 13px;
  color: #64748b;
  line-height: 1.45;
  font-weight: 500;
  margin: 0;
}

/* --- 3-Column Main Grid --- */
.admin-main-grid {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr) 300px;
  gap: 24px;
  align-items: start;
}

/* Generic Admin Panels */
.admin-panel {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 20px;
  padding: 22px 24px;
  box-shadow: 0 4px 16px rgba(16, 25, 54, 0.03);
}

/* --- Column 1: Quick Actions --- */
.admin-col-quick-actions {
  display: flex;
  flex-direction: column;
}

.admin-section-header {
  margin-bottom: 14px;
}

.admin-section-title {
  font-size: 18px;
  font-weight: 800;
  color: #101936;
  margin: 0 0 4px 0;
}

.admin-section-subtitle {
  font-size: 13px;
  color: #64748b;
  font-weight: 500;
  margin: 0;
  line-height: 1.4;
}

.quick-action-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quick-action-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 18px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.quick-action-item:hover {
  transform: translateX(2px);
}

.quick-action-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.quick-action-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.quick-action-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.quick-action-item.is-green {
  background: #dcfce7;
  border: 1.5px solid #bbf7d0;
  color: #15803d;
}

.quick-action-item.is-green:hover {
  background: #bbf7d0;
  border-color: #86efac;
}

.quick-action-item.is-blue {
  background: #e0f2fe;
  border: 1.5px solid #bae6fd;
  color: #0284c7;
}

.quick-action-item.is-blue:hover {
  background: #bae6fd;
  border-color: #7dd3fc;
}

.quick-action-item.is-white {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  color: #1e293b;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.quick-action-item.is-white:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.quick-action-item.is-white .quick-action-arrow {
  color: #94a3b8;
}

/* --- Column 2: Center (Current Class Monitor) --- */
.admin-current-class-card {
  margin-bottom: 24px;
}

.current-class-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.current-class-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.current-class-title {
  font-size: 18px;
  font-weight: 800;
  color: #101936;
  margin: 0;
}

.admin-live-badge {
  background: #dcfce7;
  color: #16a34a;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.04em;
}

.admin-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #16a34a;
  display: inline-block;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.2);
}

.current-class-date {
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
}

.current-class-main-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 26px;
}

.current-class-period-info {
  flex: 1;
}

.current-class-period-name {
  font-size: 26px;
  font-weight: 900;
  color: #101936;
  margin: 0 0 4px 0;
  letter-spacing: -0.01em;
}

.current-class-period-time {
  color: #64748b;
  font-size: 14px;
  font-weight: 600;
}

.current-class-remaining-box {
  background: #f8fafc;
  border: 1.5px solid #f1f5f9;
  border-radius: 14px;
  padding: 10px 24px;
  text-align: center;
}

.remaining-value {
  font-size: 26px;
  font-weight: 900;
  color: #101936;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.remaining-label {
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
  margin-top: 2px;
}

.current-class-bathroom-badge {
  background: #dcfce7;
  border: 1.5px solid #bbf7d0;
  border-radius: 14px;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.bathroom-check-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bathroom-status-text {
  font-weight: 800;
  font-size: 14px;
  color: #15803d;
  margin-bottom: 2px;
}

.bathroom-sub-text {
  font-weight: 600;
  font-size: 12px;
  color: #166534;
}

.current-class-bathroom-badge.is-closed {
  background: #fef2f2;
  border-color: #fecaca;
}

.current-class-bathroom-badge.is-closed .bathroom-status-text {
  color: #dc2626;
}

.current-class-bathroom-badge.is-closed .bathroom-sub-text {
  color: #991b1b;
}

.user-badge.is-static {
  cursor: default;
  pointer-events: none;
  text-decoration: none;
}

.user-badge.is-static:hover {
  background: var(--blue-bg-light);
  color: var(--blue-shadow);
  transform: none;
}

/* Timeline Track */
.admin-timeline-wrap {
  position: relative;
  margin: 32px 14px 16px 14px;
  padding-bottom: 42px;
}

.admin-timeline-track {
  position: relative;
  height: 8px;
  border-radius: 9999px;
  background: #e2e8f0;
}

.timeline-bar-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 9999px;
  background: linear-gradient(90deg, #38bdf8 0%, #38bdf8 23.4%, #22c55e 23.4%, #22c55e 46%, #e2e8f0 46%, #e2e8f0 100%);
}

.timeline-milestone {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.milestone-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 3px solid #ffffff;
  display: inline-block;
  z-index: 2;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.milestone-dot.dot-green {
  background: #22c55e;
  box-shadow: 0 0 0 1.5px #22c55e;
}

.milestone-dot.dot-red {
  background: #ef4444;
  box-shadow: 0 0 0 1.5px #ef4444;
}

.milestone-dot.dot-orange {
  background: #f97316;
  box-shadow: 0 0 0 1.5px #f97316;
}

.milestone-dot.dot-yellow {
  background: #eab308;
  box-shadow: 0 0 0 1.5px #eab308;
}

.milestone-info {
  position: absolute;
  top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  white-space: nowrap;
}

.milestone-info-start {
  align-items: flex-start;
  left: 0;
  transform: none;
}

.milestone-info-end {
  align-items: flex-end;
  right: 0;
  transform: none;
}

.milestone-time {
  font-size: 12px;
  font-weight: 800;
  color: #101936;
  line-height: 1.2;
}

.milestone-name {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  margin-top: 2px;
}

/* --- Center: Recent Activity Card --- */
.activity-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.activity-title {
  font-size: 18px;
  font-weight: 800;
  color: #101936;
  margin: 0;
}

.admin-link-accent {
  font-size: 13px;
  font-weight: 700;
  color: #0284c7;
  text-decoration: none;
  transition: color 0.12s ease;
}

.admin-link-accent:hover {
  color: #0369a1;
  text-decoration: underline;
}

.activity-table-wrapper {
  overflow-x: auto;
}

.admin-activity-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-activity-table thead tr {
  background: #f8fafc;
}

.admin-activity-table th {
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: left;
  border-bottom: 1.5px solid #e2e8f0;
}

.admin-activity-table th:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.admin-activity-table th:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.admin-activity-table tbody tr {
  border-bottom: 1px solid #f1f5f9;
  transition: background 0.1s ease;
}

.admin-activity-table tbody tr:last-child {
  border-bottom: none;
}

.admin-activity-table tbody tr:hover {
  background: #f8fafc;
}

.admin-activity-table td {
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  vertical-align: middle;
}

.admin-activity-table td.activity-time {
  font-variant-numeric: tabular-nums;
  color: #64748b;
  white-space: nowrap;
}

.admin-activity-table td.activity-scholar {
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
}

.scholar-avatar {
  margin-right: 6px;
  font-size: 16px;
  vertical-align: -1px;
}

.admin-activity-table td.is-alert {
  color: #ef4444;
  font-weight: 700;
}

/* --- Column 3: Sidebar (System Overview) --- */
.admin-overview-card {
  padding: 22px 20px;
  margin-bottom: 24px;
}

.overview-title {
  font-size: 18px;
  font-weight: 800;
  color: #101936;
  margin: 0 0 16px 0;
}

.overview-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.overview-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: background 0.12s ease;
}

.overview-item:hover {
  background: #f8fafc;
}

.overview-item-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.overview-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.overview-icon.icon-green {
  background: #dcfce7;
  color: #16a34a;
}

.overview-icon.icon-red {
  background: #fee2e2;
  color: #dc2626;
}

.overview-icon.icon-yellow {
  background: #fef9c3;
  color: #ca8a04;
}

.overview-icon.icon-purple {
  background: #f3e8ff;
  color: #9333ea;
}

.overview-icon.icon-blue {
  background: #e0f2fe;
  color: #0284c7;
}

.overview-value {
  font-size: 18px;
  font-weight: 900;
  color: #0f172a;
  line-height: 1.2;
}

.overview-label {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  margin-top: 1px;
}

.overview-chevron {
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* --- Column 3: Sidebar (Announcements / Notices) --- */
.admin-notices-card {
  padding: 22px 20px;
}

.notices-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.notices-title {
  font-size: 17px;
  font-weight: 800;
  color: #101936;
  margin: 0;
}

.admin-add-notice-btn {
  background: #0ea5e9;
  color: #ffffff;
  border-radius: 9999px;
  padding: 4px 14px;
  font-weight: 800;
  font-size: 13px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.25);
  transition: background 0.12s ease, transform 0.12s ease;
}

.admin-add-notice-btn:hover {
  background: #0284c7;
  transform: translateY(-1px);
}

.notices-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.notice-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.notice-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.notice-icon.icon-green {
  background: #dcfce7;
  color: #16a34a;
}

.notice-icon.icon-orange {
  background: #ffedd5;
  color: #ea580c;
}

.notice-body {
  flex: 1;
  min-width: 0;
}

.notice-headline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}

.notice-headline-title {
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
}

.notice-time {
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  white-space: nowrap;
}

.notice-desc {
  font-size: 13px;
  color: #64748b;
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
}

/* --- Responsive Breakpoints for Admin Portal --- */
@media (max-width: 1200px) {
  .admin-nav-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .admin-main-grid {
    grid-template-columns: 260px minmax(0, 1fr);
  }
  .admin-col-sidebar {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .admin-overview-card {
    margin-bottom: 0;
  }
}

@media (max-width: 860px) {
  body.admin-portal-page main {
    padding: 20px 16px 48px;
  }
  .admin-nav-cards-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .admin-main-grid {
    grid-template-columns: 1fr;
  }
  .admin-col-sidebar {
    grid-template-columns: 1fr;
  }
  .current-class-main-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .current-class-remaining-box,
  .current-class-bathroom-badge {
    width: 100%;
    justify-content: center;
  }
}

/* --- Universal Profile Page Styles --- */
.user-badge-profile-link {
  text-decoration: none;
  display: inline-flex;
}
.user-badge-profile-link .user-badge.is-static {
  cursor: pointer;
  pointer-events: auto;
}
.user-badge-profile-link:hover .user-badge.is-static {
  background: #dbeafe;
  color: #1d4ed8;
  transform: translateY(-1px);
}

.profile-page-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1040px;
  margin: 0 auto;
}

.profile-nav-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.profile-avatar-teacher {
  background: #dbeafe !important;
  color: #1d4ed8;
  font-size: 40px;
}

.profile-avatar-admin {
  background: #ede9fe !important;
  color: #6d28d9;
  font-size: 40px;
}

/* ============================================================
   Theme Picker Component (Light & Dark UI)
   ============================================================ */
.theme-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 8px;
}

.theme-picker-card {
  position: relative;
  border: 2px solid var(--border-card);
  border-radius: 18px;
  padding: 18px;
  background: var(--bg-card);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  gap: 14px;
  user-select: none;
}

.theme-picker-card:hover {
  border-color: var(--blue-main);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(28, 176, 246, 0.12);
}

.theme-picker-card.is-selected {
  border-color: var(--blue-main);
  background: #eff6ff;
  box-shadow: 0 0 0 3px rgba(28, 176, 246, 0.2);
}

.theme-card-preview {
  height: 64px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  position: relative;
}

.theme-preview-light {
  background: #f7f9fa;
}
.theme-preview-light .theme-preview-bar {
  height: 18px;
  background: #ffffff;
  border-bottom: 1px solid #e5e5e5;
}
.theme-preview-light .theme-preview-box {
  margin: 8px 10px;
  height: 24px;
  background: #ffffff;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}

.theme-preview-dark {
  background: #0b1120;
}
.theme-preview-dark .theme-preview-bar {
  height: 18px;
  background: #151e32;
  border-bottom: 1px solid #222f49;
}
.theme-preview-dark .theme-preview-box {
  margin: 8px 10px;
  height: 24px;
  background: #151e32;
  border-radius: 6px;
  border: 1px solid #222f49;
}

.theme-preview-system {
  display: flex;
  flex-direction: row;
}
.theme-preview-split-left {
  flex: 1;
  background: #f7f9fa;
  border-right: 1px solid #cbd5e1;
}
.theme-preview-split-right {
  flex: 1;
  background: #0b1120;
}

.theme-card-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.theme-card-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.theme-card-title-row strong {
  font-size: 16px;
  color: var(--text-main);
}

.theme-card-info p {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.45;
}

.theme-check-indicator {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--blue-main);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  display: none;
  align-items: center;
  justify-content: center;
}

.theme-picker-card.is-selected .theme-check-indicator {
  display: flex;
}

/* ============================================================
   Dark Mode Master Palette & Global Overrides
   ============================================================ */
:root[data-theme="dark"],
[data-theme="dark"] {
  --bg-page: #0b1120;
  --bg-card: #151e32;
  --text-main: #f1f5f9;
  --text-muted: #94a3b8;
  --text-light: #64748b;
  --border-card: #222f49;
  --border-focus: #38bdf8;

  --green-main: #58cc02;
  --green-hover: #65d906;
  --green-shadow: #3b8700;
  --green-bg-light: rgba(88, 204, 2, 0.16);
  --green-text-dark: #86efac;

  --blue-main: #1cb0f6;
  --blue-hover: #38bdf8;
  --blue-shadow: #0284c7;
  --blue-bg-light: rgba(28, 176, 246, 0.16);

  --gray-button-bg: #1e293b;
  --gray-button-border: #334155;
  --gray-button-hover: #283548;
  --gray-button-shadow: #0f172a;

  --red-main: #f87171;
  --red-hover: #ef4444;
  --red-shadow: #b91c1c;
  --red-bg: rgba(239, 68, 68, 0.16);
  --red-border: #f87171;
  --red-text: #fca5a5;
}

[data-theme="dark"] body {
  background-color: var(--bg-page);
  color: var(--text-main);
}

[data-theme="dark"] header {
  background-color: #111827;
  border-bottom: 2px solid #1f293d;
}

[data-theme="dark"] .brand {
  color: #f8fafc;
}

[data-theme="dark"] .teacher-nav-link {
  color: #94a3b8;
}

[data-theme="dark"] .teacher-nav-link:hover,
[data-theme="dark"] .teacher-nav-link.is-active {
  color: #38bdf8;
  border-color: #38bdf8;
}

[data-theme="dark"] .user-badge {
  background: rgba(28, 176, 246, 0.16);
  color: #7dd3fc;
  border: 1px solid rgba(28, 176, 246, 0.3);
}

[data-theme="dark"] .user-badge.is-static {
  background: #1e293b;
  color: #cbd5e1;
}

[data-theme="dark"] .user-badge:hover {
  background: rgba(28, 176, 246, 0.28);
  color: #bae6fd;
}

[data-theme="dark"] header .quiet {
  color: #94a3b8;
  border-color: #334155;
  background: #1e293b;
}

[data-theme="dark"] header .quiet:hover {
  color: #f8fafc;
  background: #283548;
}

[data-theme="dark"] .card,
[data-theme="dark"] .login-card,
[data-theme="dark"] .lab-panel,
[data-theme="dark"] .scholar-section-card,
[data-theme="dark"] .scholar-hero-card,
[data-theme="dark"] .scholar-profile-card,
[data-theme="dark"] .current-class-card,
[data-theme="dark"] .dashboard-clock-card,
[data-theme="dark"] .dashboard-lessons-card,
[data-theme="dark"] .lesson-card,
[data-theme="dark"] .admin-overview-card,
[data-theme="dark"] .admin-main-card,
[data-theme="dark"] .modal-card,
[data-theme="dark"] .plan-card {
  background: #151e32 !important;
  border-color: #222f49 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
  color: #f1f5f9;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4 {
  color: #f8fafc;
}

[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: #0d1526;
  border: 1.5px solid #2a3854;
  color: #f8fafc;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25);
  outline: none;
}

[data-theme="dark"] label {
  color: #cbd5e1;
}

[data-theme="dark"] button.quiet,
[data-theme="dark"] a.button.quiet {
  background: #1e293b;
  border-color: #334155;
  color: #cbd5e1;
  box-shadow: 0 3px 0 #0f172a;
}

[data-theme="dark"] button.quiet:hover,
[data-theme="dark"] a.button.quiet:hover {
  background: #283548;
  color: #ffffff;
}

[data-theme="dark"] .leaderboard-panel,
[data-theme="dark"] .mini-leaderboard-card,
[data-theme="dark"] .scholar-leaderboard-card {
  background: linear-gradient(145deg, #0f2744, #121c2e) !important;
  border-color: #1e3a5f !important;
}

[data-theme="dark"] .leaderboard-inner {
  background: rgba(11, 17, 32, 0.7);
  border-color: #1e293b;
}

[data-theme="dark"] .lab-leaders li {
  border-bottom-color: #1e293b;
}

[data-theme="dark"] .lab-leaders li strong {
  color: #f8fafc;
}

[data-theme="dark"] .lab-leaders li span {
  color: #94a3b8;
}

[data-theme="dark"] .lab-leaders li.is-you {
  background: rgba(28, 176, 246, 0.18);
  border-radius: 12px;
}

[data-theme="dark"] progress {
  background: #1e293b;
}

[data-theme="dark"] .xp-hero-stat,
[data-theme="dark"] .scholar-language-option {
  background: #0f172a;
  border-color: #222f49;
  color: #f1f5f9;
}

[data-theme="dark"] .xp-stat-label,
[data-theme="dark"] .scholar-language-native {
  color: #94a3b8;
}

[data-theme="dark"] .xp-hero-stat strong,
[data-theme="dark"] .scholar-language-text strong {
  color: #f8fafc;
}

[data-theme="dark"] .scholar-language-option.is-active {
  background: rgba(88, 204, 2, 0.12);
  border-color: #58cc02;
}

[data-theme="dark"] .scholar-badge-card {
  background: #0f172a;
  border-color: #222f49;
  color: #f1f5f9;
}

[data-theme="dark"] .scholar-badge-card.is-earned {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.08);
}

[data-theme="dark"] .scholar-badge-card strong {
  color: #f8fafc;
}

[data-theme="dark"] .scholar-badge-card p {
  color: #94a3b8;
}

[data-theme="dark"] .badge-status-pill.earned {
  background: #064e3b;
  color: #6ee7b7;
}

[data-theme="dark"] .badge-status-pill.locked {
  background: #1e293b;
  color: #64748b;
}

[data-theme="dark"] .profile-page-container div[style*="background:#f8fafc"],
[data-theme="dark"] .profile-page-container div[style*="background: #f8fafc"] {
  background: #0f172a !important;
  border-color: #222f49 !important;
  color: #f1f5f9 !important;
}

[data-theme="dark"] .profile-page-container strong {
  color: #f8fafc;
}

[data-theme="dark"] .theme-picker-card {
  background: #0f172a;
  border-color: #222f49;
}

[data-theme="dark"] .theme-picker-card.is-selected {
  border-color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.3);
}

[data-theme="dark"] .admin-nav-card {
  background: #151e32 !important;
  border-color: #222f49 !important;
  color: #f1f5f9 !important;
}

[data-theme="dark"] .admin-nav-card h3 {
  color: #f8fafc;
}

[data-theme="dark"] .admin-nav-card p {
  color: #94a3b8;
}

[data-theme="dark"] .overview-item {
  border-bottom-color: #222f49;
}

[data-theme="dark"] .overview-value {
  color: #f8fafc;
}

[data-theme="dark"] .overview-label {
  color: #94a3b8;
}

/* Lesson Delivery Screen Dark Overrides */
[data-theme="dark"] .lesson-player,
[data-theme="dark"] body.lesson-player {
  --lesson-ink: #f1f5f9;
  --lesson-muted: #94a3b8;
  background: #070b14;
  color: #f1f5f9;
}

[data-theme="dark"] .lesson-header {
  background: #0f172aee;
  border-bottom: 1px solid #1e293b;
}

[data-theme="dark"] .lesson-stat {
  background: #151e32;
  border: 1px solid #222f49;
}

[data-theme="dark"] .lesson-surface,
[data-theme="dark"] .lesson-check,
[data-theme="dark"] .lesson-progress-panel {
  background: #111927ed;
  border-color: #1e293b;
  color: #f1f5f9;
}

[data-theme="dark"] .intro-copy h1,
[data-theme="dark"] .reading-copy h1,
[data-theme="dark"] .video-surface h1 {
  color: #f8fafc;
}

[data-theme="dark"] .intro-copy > p,
[data-theme="dark"] .reading-copy > p {
  color: #cbd5e1;
}

[data-theme="dark"] .lesson-focus {
  background: rgba(6, 78, 59, 0.25);
  border: 1px solid #065f46;
}

[data-theme="dark"] .lesson-response,
[data-theme="dark"] .intro-response {
  background: #0f172a;
  border-color: #1e293b;
}

[data-theme="dark"] .response-field textarea {
  background: #0b1120;
  border-color: #334155;
  color: #f8fafc;
}

[data-theme="dark"] .question-card {
  background: #131c2e;
  border-color: #1e293b;
  color: #f1f5f9;
}

[data-theme="dark"] .question-option {
  background: #0f172a;
  border-color: #1e293b;
  color: #e2e8f0;
}

[data-theme="dark"] .question-option:hover {
  border-color: #38bdf8;
  background: #16243d;
}

[data-theme="dark"] .question-option.is-selected {
  background: rgba(28, 176, 246, 0.15);
  border-color: #38bdf8;
}

[data-theme="dark"] .translation-toggle-btn {
  background: #1e293b;
  border-color: #334155;
  color: #94a3b8;
}

[data-theme="dark"] .translation-toggle-btn.is-active {
  background: #064e3b;
  border-color: #059669;
  color: #6ee7b7;
}

[data-theme="dark"] .q-badge {
  background: rgba(37, 99, 235, 0.15);
  color: #60a5fa;
  border-color: rgba(37, 99, 235, 0.3);
}

[data-theme="dark"] .q-option-letter {
  background: #0f172a;
  color: #cbd5e1;
  border-color: #334155;
}

[data-theme="dark"] .q-radio-label:hover .q-option-letter {
  background: #162a22;
  border-color: #10b981;
  color: #34d399;
}

[data-theme="dark"] .q-radio-label input[type="radio"]:checked + .q-option-letter {
  background: #059669;
  color: #ffffff;
  border-color: #10b981;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
}

[data-theme="dark"] .reading-image-placeholder-row {
  background: #0f172a;
  border-color: #334155;
}

[data-theme="dark"] .reading-image-placeholder-icon {
  background: #1e293b;
  color: #94a3b8;
}

[data-theme="dark"] .reading-image-placeholder-title {
  color: #e2e8f0;
}

[data-theme="dark"] .reading-image-placeholder-desc {
  color: #94a3b8;
}

[data-theme="dark"] .add-q-toggle-btn {
  background: rgba(37, 99, 235, 0.15) !important;
  border-color: rgba(37, 99, 235, 0.35) !important;
  color: #60a5fa !important;
}

[data-theme="dark"] .add-q-toggle-btn:hover {
  background: rgba(37, 99, 235, 0.25) !important;
  border-color: #60a5fa !important;
  color: #93c5fd !important;
}

.question-feedback-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.question-metric {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.question-explanation {
  margin-top: 10px;
  font-size: 13px;
  color: #047857;
  font-weight: 600;
  line-height: 1.4;
}

[data-theme="dark"] .question-metric {
  background: #151e32;
  color: #94a3b8;
  border-color: #222f49;
}

[data-theme="dark"] .question-explanation {
  color: #6ee7b7;
}