/* ============================================================
   GLOBAL VARIABLES & RESET (Light Theme – Final)
   ============================================================ */
:root {
  color-scheme: light;
  /* Colors */
  --bg: #f7f4ee;
  --bg-soft: #fbfaf7;
  --panel: #ffffff;
  --panel-soft: #faf7f1;
  --text: #15110a;
  --muted: #746c60;
  --line: #e7dfd3;
  --line-strong: #d1c3b0;
  --accent: #8a5a12;
  --accent-dark: #2a2118;
  --accent-soft: #fff4df;
  --success: #157347;
  --danger: #b42318;
  --focus: rgba(138, 90, 18, 0.16);
  /* Shadows */
  --shadow: 0 18px 45px rgba(42, 33, 24, 0.08);
  --shadow-soft: 0 10px 28px rgba(42, 33, 24, 0.045);
  /* Radius */
  --radius: 22px;
  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.2, 0.9, 0.4, 1.1);
  --transition-base: 250ms cubic-bezier(0.2, 0.9, 0.4, 1.1);
  --transition-slow: 350ms cubic-bezier(0.2, 0.9, 0.4, 1.1);
  --touch: 44px;
  --shell-max: 1500px;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100%;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  color: inherit;
}

img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}

button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: rgba(138, 90, 18, 0.12);
}

/* ============================================================
   LAYOUT & SHELL
   ============================================================ */
.login-body,
.center-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--bg);
}

.login-shell {
  width: min(1080px, 100%);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 20px;
}

.login-panel,
.status-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: clamp(24px, 4vw, 46px);
  box-shadow: var(--shadow);
}

.intro-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 560px;
}

.intro-panel h1 {
  font-size: clamp(2.4rem, 6vw, 4.8rem);
  line-height: 0.95;
  letter-spacing: -0.06em;
  margin: 60px 0 18px;
}

.intro-panel p {
  font-size: 1.08rem;
  color: var(--muted);
  max-width: 520px;
  line-height: 1.65;
}

.brand-card {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-card strong {
  display: block;
  font-size: 1rem;
}

.brand-card span {
  display: block;
  color: var(--muted);
  font-size: 0.86rem;
}

.brand-mark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--accent-dark);
  color: #fff;
  font-weight: 900;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 24px;
}

.feature-grid span {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--accent-dark);
  font-weight: 800;
  font-size: 0.92rem;
}

.auth-form {
  display: grid;
  gap: 18px;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--accent);
  text-transform: uppercase;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  font-weight: 950;
}

.auth-form h2 {
  font-size: 2rem;
  margin: 0 0 8px;
}

.auth-form label span,
.form-grid label span {
  display: block;
  margin-bottom: 8px;
  font-weight: 850;
  color: var(--text);
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  padding: 14px 16px;
  background: #fff;
  color: var(--text);
  outline: none;
  min-height: 48px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--focus);
}

input:hover:not(:focus),
textarea:hover:not(:focus),
select:hover:not(:focus) {
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(138, 90, 18, 0.08);
}

.primary-button,
.secondary-button {
  border: 0;
  border-radius: 16px;
  padding: 13px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  cursor: pointer;
  font-weight: 900;
  transition: transform var(--transition-fast), background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-fast);
}

.primary-button {
  background: var(--accent-dark);
  color: #fff;
}

.primary-button.soft {
  background: var(--accent-soft);
  color: var(--accent-dark);
  border: 1px solid #f0d3a2;
}

.secondary-button {
  background: var(--panel-soft);
  color: var(--accent-dark);
  border: 1px solid var(--line);
}

.secondary-button.danger {
  color: var(--danger);
}

.primary-button:hover {
  transform: scale(0.98);
  background-color: #1f1912;
  box-shadow: 0 8px 20px rgba(42, 33, 24, 0.15);
}

.secondary-button:hover {
  transform: scale(0.98);
  background-color: var(--accent-soft);
  border-color: var(--accent);
}

/* ============================================================
   APP SHELL & SIDEBAR
   ============================================================ */
.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 282px 1fr;
}

.sidebar {
  background: #fff;
  color: var(--text);
  padding: 18px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  border-right: 1px solid var(--line);
  box-shadow: 8px 0 28px rgba(42, 33, 24, 0.035);
}

.sidebar .brand-card {
  padding: 10px 8px 22px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
}

.sidebar .brand-mark {
  background: var(--accent-dark);
  color: #fff;
}

.nav-list {
  display: grid;
  gap: 6px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 13px;
  border-radius: 16px;
  color: var(--muted);
  font-weight: 780;
  border: 1px solid transparent;
  transition: background var(--transition-base), border-color var(--transition-base), padding-left var(--transition-fast);
}

.nav-item:hover {
  background: var(--accent-soft);
  color: var(--text);
  border-color: var(--line);
  padding-left: 18px;
}

.nav-item.is-active {
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-color: #f0d3a2;
}

.nav-icon {
  width: 24px;
  text-align: center;
  opacity: 0.88;
  display: inline-block;
  transition: transform var(--transition-fast);
}

.nav-item:hover .nav-icon {
  transform: translateX(3px);
}

.sidebar-scrim {
  display: none;
}

.main-area {
  min-width: 0;
}

.topbar {
  min-height: 76px;
  padding: 14px clamp(16px, 3vw, 34px);
  display: flex;
  align-items: center;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}

.context-block {
  min-width: 170px;
}

.context-block span {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
}

.context-block strong {
  display: block;
  color: var(--accent-dark);
}

.global-search {
  flex: 1;
}

.global-search input {
  border-radius: 999px;
  background: #fff;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-button,
.avatar-button,
.pill-link {
  min-width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(42, 33, 24, 0.035);
  transition: transform var(--transition-fast), background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-fast);
}

.icon-button:hover,
.avatar-button:hover,
.pill-link:hover {
  transform: scale(1.05);
  background-color: var(--accent-soft);
  border-color: var(--accent);
}

.pill-link {
  padding: 0 14px;
}

.mobile-only {
  display: none;
}

.content-wrap {
  padding: clamp(18px, 3vw, 34px);
  position: relative;
  width: min(100%, var(--shell-max));
  margin-inline: auto;
}

/* ============================================================
   HERO & PAGE COMPONENTS
   ============================================================ */
.page-hero,
.page-title-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 22px;
}

.page-hero {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: clamp(22px, 4vw, 38px);
  box-shadow: var(--shadow);
}

.page-hero.slim {
  box-shadow: var(--shadow-soft);
}

.dashboard-hero {
  background: #fffdf8;
}

h1 {
  margin: 0;
  font-size: clamp(1.9rem, 4vw, 3.35rem);
  letter-spacing: -0.045em;
  line-height: 1;
}

h2 {
  margin: 0 0 12px;
  font-size: 1.18rem;
  letter-spacing: -0.02em;
}

p {
  color: var(--muted);
  line-height: 1.65;
}

.hero-badge {
  min-width: 220px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
}

.hero-badge span {
  display: block;
  color: var(--muted);
  font-size: 0.85rem;
}

.hero-badge strong {
  display: block;
  color: var(--accent-dark);
  margin-top: 5px;
}

/* ============================================================
   DASHBOARD & CARDS (Hover animations)
   ============================================================ */
.dashboard-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: 18px;
  align-items: start;
}

.dashboard-main {
  min-width: 0;
}

.metric-grid,
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.metric-card,
.action-card,
.card,
.list-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.metric-card:hover,
.action-card:hover,
.card:hover,
.list-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 35px -12px rgba(42, 33, 24, 0.15);
  border-color: var(--accent);
}

.metric-card span,
.action-card span {
  display: block;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 850;
}

.metric-card strong {
  display: block;
  margin-top: 8px;
  font-size: 2rem;
  color: var(--accent-dark);
}

.metric-card em {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-style: normal;
  font-weight: 750;
  font-size: 0.82rem;
}

.action-card {
  min-height: 154px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}

.action-card strong {
  font-size: 1.18rem;
  letter-spacing: -0.02em;
}

.action-card em {
  color: var(--accent);
  font-style: normal;
  font-weight: 950;
  display: inline-block;
  transition: transform var(--transition-fast);
}

.action-card:hover em {
  transform: translateX(2px);
}

.action-card.primary {
  background: var(--accent-dark);
  color: #fff;
  border-color: var(--accent-dark);
}

.action-card.primary span,
.action-card.primary em {
  color: #f4dfbc;
}

.action-card.primary:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -12px rgba(42, 33, 24, 0.25);
}

.two-column,
.profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.chip-row span {
  border: 1px solid #f0d3a2;
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 850;
  transition: all var(--transition-fast);
}

.chip-row span:hover {
  transform: translateY(-1px);
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  cursor: default;
}

.insight-card p {
  margin-bottom: 0;
}

.clean-list {
  display: grid;
  gap: 10px;
}

.list-line {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px 14px;
  background: var(--panel-soft);
}

.list-line strong {
  min-width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #fff;
  color: var(--accent);
  border: 1px solid var(--line);
}

.list-line span {
  color: var(--text);
  font-weight: 800;
}

.quick-tray {
  position: sticky;
  top: 96px;
  background: #fff;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 16px;
  box-shadow: var(--shadow-soft);
  z-index: 3;
}

.quick-tray h2 {
  font-size: 1rem;
  margin-bottom: 10px;
}

.quick-tray a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 14px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  margin-top: 8px;
  color: var(--accent-dark);
  font-weight: 850;
  transition: background var(--transition-base), border-color var(--transition-base), transform var(--transition-fast);
  position: relative;
}

.quick-tray a::after {
  content: "›";
  color: var(--accent);
  font-weight: 950;
  transition: transform var(--transition-fast);
}

.quick-tray a:hover {
  background: var(--accent-soft);
  border-color: #f0d3a2;
  transform: translateX(4px);
}

.quick-tray a:hover::after {
  transform: translateX(2px);
}

.alert {
  padding: 12px 14px;
  border-radius: 16px;
  margin-bottom: 14px;
  font-weight: 800;
}

.alert.success {
  background: #ecfdf3;
  color: var(--success);
  border: 1px solid #abefc6;
}

.alert.error {
  background: #fef3f2;
  color: var(--danger);
  border: 1px solid #fecdca;
}

.list-card {
  display: grid;
  gap: 10px;
}

.list-item {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  background: var(--panel-soft);
}

.list-item.unread {
  border-color: #f0d3a2;
  background: var(--accent-soft);
}

.list-item p {
  margin: 5px 0 0;
}

.empty-state {
  text-align: center;
  padding: 34px;
}

.big-avatar {
  width: 92px;
  height: 92px;
  border-radius: 28px;
  background: var(--accent-dark);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 2.2rem;
  font-weight: 900;
  margin-bottom: 16px;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.big-avatar:hover,
.tutor-avatar:hover,
.brand-mark:hover {
  transform: scale(1.02) rotate(1deg);
  box-shadow: 0 10px 25px -8px rgba(42, 33, 24, 0.2);
}

dl {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 12px;
}

dt {
  color: var(--muted);
  font-weight: 800;
}

dd {
  margin: 0;
  font-weight: 800;
}

.status-card {
  width: min(520px, 100%);
  text-align: center;
}

.button-row {
  margin-top: 18px;
}

/* ============================================================
   ACADEMIC SETUP & FORMS
   ============================================================ */
.setup-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.setup-tile {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  min-height: 170px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.setup-tile:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 20px 35px -12px rgba(42, 33, 24, 0.15);
}

.setup-tile.primary {
  background: var(--accent-dark);
  color: #fff;
  border-color: var(--accent-dark);
}

.setup-tile span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--panel-soft);
  color: var(--accent);
  font-weight: 950;
}

.setup-tile.primary span {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.setup-tile strong {
  font-size: 1.12rem;
  letter-spacing: -0.02em;
}

.setup-tile em {
  color: var(--muted);
  font-style: normal;
  line-height: 1.55;
}

.setup-tile.primary em {
  color: #f4dfbc;
}

.form-card {
  display: grid;
  gap: 16px;
}

.form-card h2 {
  margin-bottom: 2px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.form-grid.one {
  grid-template-columns: 1fr;
}

.form-grid .span-2 {
  grid-column: 1 / -1;
}

.form-select {
  min-height: 50px;
  appearance: auto;
  padding-right: 16px;
}

.form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}

.help-card {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.status-stack {
  display: grid;
  gap: 10px;
}

.status-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px 14px;
  background: var(--panel-soft);
}

.status-line span {
  color: var(--muted);
  font-weight: 800;
}

.status-line strong {
  color: var(--accent-dark);
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.section-head h2 {
  margin: 0;
}

.table-filter {
  max-width: 280px;
  border-radius: 999px;
}

.table-card {
  margin-top: 18px;
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 18px;
  border: 1px solid var(--line);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
  background: var(--panel);
}

.data-table th,
.data-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.data-table th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  background: var(--panel-soft);
}

.data-table tbody tr {
  transition: background-color var(--transition-fast);
}

.data-table tbody tr:hover td {
  background-color: var(--accent-soft);
}

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

.table-actions {
  width: 1%;
  text-align: right;
}

.table-actions form {
  display: inline-flex;
}

.icon-danger {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--panel);
  color: var(--danger);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.empty-cell {
  text-align: center;
  color: var(--muted);
  padding: 28px !important;
}

.select-search {
  display: grid;
  gap: 8px;
}

.select-search input {
  border-radius: 14px;
  padding: 12px 14px;
}

.setup-status-grid {
  align-items: stretch;
}

/* ============================================================
   QUESTION BANK (QB)
   ============================================================ */
.qb-toolbar {
  margin-bottom: 18px;
}

.qb-filter-form {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(150px, 1fr));
  gap: 14px;
  align-items: end;
}

.qb-filter-form label {
  display: grid;
  gap: 8px;
}

.qb-filter-form label span,
.qb-question-form label span {
  color: var(--text);
  font-weight: 900;
  font-size: 0.86rem;
}

.qb-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  grid-column: 1 / -1;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.page-title-row.compact {
  margin-bottom: 12px;
}

.page-title-row.compact p {
  margin: 4px 0 0;
  color: var(--muted);
}

.qb-table .table-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.qb-question-cell {
  min-width: 320px;
  max-width: 520px;
  white-space: normal !important;
}

.qb-question-cell strong {
  display: block;
  color: var(--text);
  line-height: 1.35;
}

.qb-question-cell span {
  display: block;
  color: var(--muted);
  margin-top: 4px;
  font-size: 0.88rem;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  border: 1px solid #f0d3a2;
  font-size: 0.82rem;
  font-weight: 900;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.status-pill:hover {
  transform: translateY(-1px);
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  cursor: default;
}

.status-pill.muted {
  background: var(--panel-soft);
  color: var(--muted);
  border-color: var(--line);
}

.table-open {
  min-height: 38px;
  padding: 0 13px;
}

.qb-create-layout {
  grid-template-columns: minmax(0, 1.4fr) minmax(270px, 0.6fr);
  align-items: start;
}

.qb-question-form textarea {
  resize: vertical;
  min-height: 120px;
}

.form-note {
  color: var(--muted);
  margin: -8px 0 4px;
}

.qb-options-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.qb-options-grid label {
  display: grid;
  gap: 8px;
}

.qb-help-card {
  position: sticky;
  top: 96px;
}

.qb-view-layout {
  grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.7fr);
  align-items: start;
}

.qb-question-detail {
  display: grid;
  gap: 16px;
}

.qb-question-detail h2 {
  margin: 8px 0 -4px;
}

.qb-meta-row {
  margin-bottom: 4px;
}

.qb-question-box,
.qb-answer-box {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel-soft);
  padding: 18px;
  line-height: 1.65;
  color: var(--text);
  overflow-wrap: anywhere;
}

.qb-option-list {
  display: grid;
  gap: 10px;
}

.qb-option {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
}

.qb-option strong {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--panel-soft);
  color: var(--accent-dark);
}

.qb-option.is-correct {
  border-color: #d8b166;
  background: #fffaf0;
}

.qb-option.is-correct strong {
  background: var(--accent-dark);
  color: #fff;
}

.qb-side-summary {
  position: sticky;
  top: 96px;
}

/* ============================================================
   EXAMS & QUIZZES
   ============================================================ */
.exam-toolbar {
  margin-bottom: 18px;
}

.exam-filter-form {
  grid-template-columns: minmax(220px, 1.35fr) repeat(3, minmax(150px, 1fr));
}

.exam-table-card {
  margin-top: 18px;
}

.exam-table .table-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.exam-create-layout,
.exam-view-layout {
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  align-items: start;
}

.exam-form h2 {
  margin: 8px 0 14px;
}

.exam-question-picker {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.exam-question-choice {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.exam-question-choice:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.exam-question-choice input {
  width: 18px;
  height: 18px;
  margin-top: 3px;
}

.exam-question-choice span {
  display: grid;
  gap: 5px;
}

.exam-question-choice strong {
  color: var(--text);
  font-size: 0.9rem;
}

.exam-question-choice em {
  color: var(--muted);
  font-style: normal;
  line-height: 1.45;
}

.exam-help-card,
.exam-side-card {
  position: sticky;
  top: 96px;
}

.exam-detail-card,
.exam-question-list,
.exam-taking-list,
.exam-result-list {
  display: grid;
  gap: 16px;
}

.exam-meta-row {
  margin-bottom: 18px;
}

.exam-preview-question,
.exam-take-card,
.result-question-card {
  display: grid;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--panel);
  padding: 18px;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.exam-preview-question:hover,
.exam-take-card:hover,
.result-question-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}

.exam-preview-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.exam-preview-head strong {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.exam-preview-head span {
  color: var(--muted);
  font-weight: 800;
}

.exam-preview-head em {
  margin-left: auto;
  color: var(--accent-dark);
  font-style: normal;
  font-weight: 900;
}

.exam-preview-question p,
.exam-take-card h2,
.result-question-card h2 {
  margin: 0;
  line-height: 1.6;
  color: var(--text);
  font-size: 1.02rem;
}

.qb-option-list.compact .qb-option {
  padding: 10px 12px;
  border-radius: 16px;
}

.stack-actions {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.icon-danger-button {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid #f0c9c9;
  background: #fff5f5;
  color: #9b1c1c;
  font-size: 1.2rem;
  font-weight: 1000;
  cursor: pointer;
  transition: transform var(--transition-fast), background var(--transition-base);
}

.icon-danger-button:hover {
  transform: scale(1.05);
  background: #ffe0e0;
}

.exam-taking-form {
  display: grid;
  gap: 18px;
}

.exam-answer-options {
  display: grid;
  gap: 10px;
}

.exam-answer-option {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel-soft);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.exam-answer-option:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.exam-answer-option input {
  width: 18px;
  height: 18px;
  margin-top: 4px;
}

.exam-answer-option span {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--text);
  line-height: 1.45;
}

.exam-answer-option span strong {
  min-width: 32px;
  height: 32px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--accent-dark);
}

.exam-written-answer {
  display: grid;
  gap: 8px;
}

.exam-written-answer span {
  color: var(--text);
  font-weight: 900;
}

.exam-submit-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  position: sticky;
  bottom: 14px;
  z-index: 8;
  box-shadow: 0 18px 40px rgba(42, 33, 24, 0.12);
}

.exam-submit-bar div {
  display: grid;
  gap: 4px;
}

.exam-submit-bar strong {
  color: var(--text);
}

.exam-submit-bar span {
  color: var(--muted);
}

.result-score-badge strong {
  font-size: 2rem;
}

.result-recommendations {
  margin: 18px 0;
}

.result-question-card.is-correct {
  border-color: #b7d7b6;
  background: #fbfff8;
}

.result-question-card.is-wrong {
  border-color: #efc3bd;
  background: #fffafa;
}

.result-question-card.needs-review {
  border-color: #ead19d;
  background: #fffaf0;
}

.result-answer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.result-answer-grid div {
  display: grid;
  gap: 6px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: #fff;
}

.result-answer-grid span {
  color: var(--muted);
  font-weight: 800;
  font-size: 0.86rem;
}

.result-answer-grid strong {
  color: var(--text);
  line-height: 1.45;
}

.result-explanation {
  margin-top: 4px;
}

.result-actions {
  margin-top: 18px;
}

/* ============================================================
   HOMEWORK & ASSIGNMENTS
   ============================================================ */
.homework-toolbar {
  margin-bottom: 18px;
}

.homework-filter-form {
  grid-template-columns: minmax(220px, 1.35fr) repeat(2, minmax(160px, 1fr));
}

.homework-table-card {
  margin-top: 18px;
}

.homework-table .table-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.homework-title-cell {
  min-width: 280px;
  white-space: normal !important;
}

.homework-title-cell strong {
  display: block;
  color: var(--text);
  line-height: 1.35;
}

.homework-title-cell span {
  display: block;
  color: var(--muted);
  margin-top: 4px;
  font-size: 0.88rem;
}

.homework-create-layout,
.homework-view-layout {
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  align-items: start;
}

.homework-form h2 {
  margin: 10px 0 14px;
}

.homework-help-card,
.homework-side-card {
  position: sticky;
  top: 96px;
}

.homework-detail-card {
  display: grid;
  gap: 16px;
}

.homework-meta-row {
  margin-bottom: 4px;
}

.homework-instruction-box,
.homework-feedback-box {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel-soft);
  padding: 18px;
  line-height: 1.65;
  color: var(--text);
  overflow-wrap: anywhere;
}

.homework-feedback-box {
  background: #fffaf0;
  border-color: #ead19d;
}

.homework-feedback-box strong {
  display: block;
  margin-bottom: 8px;
  color: var(--accent-dark);
}

.homework-feedback-box p {
  margin: 4px 0;
}

.homework-target-list {
  display: grid;
  gap: 10px;
}

.homework-submit-card {
  display: grid;
  gap: 14px;
  margin-top: 8px;
}

.homework-submission-form {
  display: grid;
  gap: 12px;
}

.homework-submission-form label,
.homework-mark-form label {
  display: grid;
  gap: 8px;
}

.homework-submission-form label span,
.homework-mark-form label span {
  font-weight: 900;
  color: var(--text);
}

.homework-marking-card {
  margin-top: 18px;
}

.homework-submission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.homework-mark-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--panel);
  padding: 18px;
  box-shadow: var(--shadow-soft);
}

.homework-mark-card h3 {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
}

.homework-mark-card p {
  margin: 4px 0 0;
}

.homework-mark-form {
  display: grid;
  gap: 10px;
}

.homework-mark-form .primary-button {
  justify-self: start;
}

.span-2 {
  grid-column: span 2;
}

/* ============================================================
   PERFORMANCE ANALYTICS
   ============================================================ */
.student-profile-strip,
.parent-child-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.student-profile-strip h2,
.parent-child-card h2 {
  margin: 4px 0 6px;
}

.student-profile-strip p,
.parent-child-card p {
  margin: 0;
  color: var(--muted);
}

.soft-label {
  display: inline-flex;
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
}

.analytics-columns {
  align-items: stretch;
}

.analytics-card {
  min-height: 100%;
}

.muted-text {
  color: var(--muted);
  margin: 0;
  line-height: 1.7;
}

.recommendation-line,
.progress-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  transition: background var(--transition-fast);
}

.recommendation-line:last-child,
.progress-line:last-child {
  border-bottom: 0;
}

.recommendation-line > span {
  flex: 0 0 auto;
  min-width: 70px;
  text-align: center;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--panel-soft);
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 900;
}

.recommendation-line.compact > span {
  min-width: 62px;
}

.recommendation-line strong,
.progress-line strong {
  display: block;
  color: var(--text);
  line-height: 1.3;
}

.recommendation-line em,
.progress-line em {
  display: block;
  color: var(--muted);
  font-style: normal;
  margin-top: 4px;
  line-height: 1.45;
}

.progress-line > span {
  flex: 0 0 auto;
  font-weight: 950;
  color: var(--text);
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--panel-soft);
}

.recommendation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.recommendation-tile {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel-soft);
  padding: 14px;
  min-width: 0;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.recommendation-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}

.recommendation-tile span {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 900;
  margin-bottom: 10px;
}

.recommendation-tile strong {
  display: block;
  color: var(--text);
  line-height: 1.35;
}

.recommendation-tile em {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-style: normal;
  line-height: 1.5;
}

.text-link {
  color: var(--accent);
  font-weight: 900;
  text-decoration: none;
  position: relative;
  transition: color var(--transition-fast);
}

.text-link::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width var(--transition-base);
}

.text-link:hover::after {
  width: 100%;
}

.mini-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ============================================================
   LEARNING GAMES
   ============================================================ */
.games-hero {
  background: #fffdf8;
  border-color: rgba(151, 116, 66, 0.18);
}

.section-heading-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 4px 0 16px;
}

.game-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.game-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 210px;
  padding: 20px;
  border: 1px solid rgba(40, 32, 22, 0.1);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(34, 28, 20, 0.07);
  color: inherit;
  text-decoration: none;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.game-card:hover {
  transform: translateY(-2px);
  border-color: rgba(151, 116, 66, 0.28);
  box-shadow: 0 24px 54px rgba(34, 28, 20, 0.11);
}

.game-card strong {
  font-size: 1.08rem;
  line-height: 1.25;
}

.game-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.game-chip {
  align-self: flex-start;
  max-width: 100%;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(151, 116, 66, 0.18);
  background: rgba(151, 116, 66, 0.08);
  color: #6e4f24;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: normal;
  transition: all var(--transition-fast);
}

.game-chip:hover {
  transform: translateY(-1px);
  background: var(--accent);
  color: #fff;
}

.game-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.game-meta-row span {
  display: inline-flex;
  max-width: 100%;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(39, 33, 24, 0.045);
  color: #5f584b;
  font-size: 0.78rem;
  font-weight: 700;
}

.game-meta-row.large {
  margin: 0 0 20px;
}

.mini-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(40, 32, 22, 0.07);
}

.mini-progress i {
  display: block;
  height: 100%;
  min-width: 8%;
  max-width: 100%;
  border-radius: inherit;
  background: rgba(151, 116, 66, 0.42);
}

.games-workspace {
  align-items: start;
}

.games-side-panel {
  align-self: start;
}

.challenge-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.challenge-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(40, 32, 22, 0.08);
  border-radius: 18px;
  background: rgba(250, 247, 241, 0.62);
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.challenge-item:hover {
  background: var(--accent-soft);
  transform: translateX(4px);
}

.challenge-item strong {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(151, 116, 66, 0.18);
}

.challenge-item span,
.challenge-item em {
  min-width: 0;
  overflow-wrap: anywhere;
}

.challenge-item em {
  color: var(--muted);
  font-style: normal;
}

.mini-form {
  display: grid;
  gap: 12px;
}

.mini-form label,
.filter-form label,
.form-card label {
  display: grid;
  gap: 7px;
}

.mini-form span,
.filter-form span,
.form-card label > span {
  font-size: 0.82rem;
  font-weight: 800;
  color: #655845;
}

/* ============================================================
   COMICS & TRAINING STORIES
   ============================================================ */
.comics-hero {
  background: #ffffff;
  border-color: rgba(151, 116, 66, 0.18);
}

.comic-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.comic-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 230px;
  padding: 20px;
  border: 1px solid rgba(40, 32, 22, 0.1);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(34, 28, 20, 0.07);
  color: inherit;
  text-decoration: none;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.comic-card:hover {
  transform: translateY(-2px);
  border-color: rgba(151, 116, 66, 0.28);
  box-shadow: 0 24px 54px rgba(34, 28, 20, 0.11);
}

.comic-card strong {
  font-size: 1.1rem;
  line-height: 1.25;
}

.comic-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.comic-chip {
  align-self: flex-start;
  max-width: 100%;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(151, 116, 66, 0.18);
  background: rgba(151, 116, 66, 0.08);
  color: #6e4f24;
  font-size: 0.78rem;
  font-weight: 850;
  white-space: normal;
}

.comics-workspace,
.comics-reader-layout {
  align-items: start;
}

.comics-side-panel {
  align-self: start;
}

.comic-summary-card {
  margin-bottom: 16px;
}

.comic-page-stack {
  display: grid;
  gap: 18px;
}

.comic-page-card {
  padding: 22px;
  border: 1px solid rgba(40, 32, 22, 0.1);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(34, 28, 20, 0.07);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.comic-page-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 54px rgba(34, 28, 20, 0.11);
}

.comic-page-card h2 {
  margin-top: 8px;
}

.comic-page-card p {
  color: var(--text);
  line-height: 1.72;
  margin-bottom: 0;
}

.comic-page-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(151, 116, 66, 0.08);
  border: 1px solid rgba(151, 116, 66, 0.18);
  color: #6e4f24;
  font-size: 0.78rem;
  font-weight: 900;
}

.comic-page-image {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 22px;
  border: 1px solid rgba(40, 32, 22, 0.1);
  margin: 12px 0;
}

.comic-art-placeholder {
  display: grid;
  place-items: center;
  min-height: 220px;
  margin: 12px 0;
  border-radius: 24px;
  border: 1px dashed rgba(151, 116, 66, 0.32);
  background: #fbf8f1;
  text-align: center;
}

.comic-art-placeholder span {
  display: block;
  color: var(--muted);
  font-weight: 850;
}

.comic-art-placeholder strong {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-top: 8px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(151, 116, 66, 0.22);
  color: #6e4f24;
  font-size: 1.5rem;
}

.comic-question-box {
  padding: 16px;
  border: 1px solid rgba(40, 32, 22, 0.1);
  border-radius: 20px;
  background: #fbf8f1;
}

.comic-question-box strong {
  display: block;
  color: var(--text);
  line-height: 1.45;
}

.comic-result-card h2 {
  font-size: clamp(1.55rem, 3vw, 2.4rem);
}

/* ============================================================
   PRIVATE TUTOR BOOKING
   ============================================================ */
.tutor-hero {
  background: #ffffff;
  border-color: rgba(151, 116, 66, 0.18);
}

.tutor-workspace,
.tutor-book-layout,
.tutor-session-layout {
  align-items: start;
}

.tutor-side-panel {
  align-self: start;
}

.tutor-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.tutor-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 16px;
  padding: 20px;
  border: 1px solid rgba(40, 32, 22, 0.1);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(34, 28, 20, 0.07);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.tutor-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 54px rgba(34, 28, 20, 0.11);
}

.tutor-avatar {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  border: 1px solid rgba(151, 116, 66, 0.22);
  background: #fbf8f1;
  color: #6e4f24;
  font-weight: 900;
  font-size: 1.2rem;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.tutor-card-body {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.tutor-card h3 {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.25;
}

.tutor-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.tutor-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(151, 116, 66, 0.18);
  background: rgba(151, 116, 66, 0.08);
  color: #6e4f24;
  font-size: 0.78rem;
  font-weight: 850;
  white-space: normal;
}

.lower-heading {
  margin-top: 28px;
}

.stacked-actions {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.stacked-actions a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(40, 32, 22, 0.1);
  background: #fff;
  color: var(--text);
  text-decoration: none;
  font-weight: 800;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.stacked-actions a:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.video-room-placeholder {
  display: grid;
  place-items: center;
  min-height: 240px;
  margin: 18px 0;
  border-radius: 28px;
  border: 1px dashed rgba(151, 116, 66, 0.32);
  background: #fbf8f1;
  text-align: center;
  padding: 22px;
}

.video-room-placeholder strong {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(151, 116, 66, 0.22);
  color: #6e4f24;
  font-size: 2rem;
}

.video-room-placeholder span {
  max-width: 520px;
  color: var(--text);
  font-weight: 850;
}

.video-room-placeholder em {
  margin-top: 7px;
  color: var(--muted);
  font-style: normal;
  overflow-wrap: anywhere;
}

.note-stack {
  display: grid;
  gap: 14px;
}

.session-note-card {
  padding: 16px;
  border: 1px solid rgba(40, 32, 22, 0.1);
  border-radius: 20px;
  background: #fbf8f1;
}

.session-note-card p {
  margin: 10px 0;
  line-height: 1.62;
}

.session-note-card em {
  display: block;
  padding-top: 10px;
  border-top: 1px solid rgba(40, 32, 22, 0.08);
  color: var(--muted);
  font-style: normal;
  line-height: 1.55;
}

.inline-status-form select {
  min-width: 150px;
}

.compact-button {
  padding: 8px 12px;
  min-height: auto;
}

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

/* ============================================================
   PARENT PROGRESS VIEW
   ============================================================ */
.parent-hero {
  background: #fffdf8;
  border-color: rgba(122, 92, 44, 0.16);
}

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

.parent-child-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 18px;
}

.parent-summary-card,
.weekly-report-card,
.report-note-card {
  border-color: rgba(143, 111, 57, 0.16);
  background: #ffffff;
}

.parent-child-head {
  gap: 14px;
  align-items: flex-start;
}

.parent-metrics .metric-card {
  min-height: 118px;
}

.parent-support-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 14px;
  margin-top: 16px;
}

.parent-panel {
  background: #fffdf8;
  border: 1px solid rgba(132, 100, 52, 0.14);
  border-radius: 22px;
  padding: 18px;
}

.parent-panel h2,
.parent-panel h3 {
  margin-top: 0;
  margin-bottom: 12px;
}

.parent-support-line {
  display: grid;
  gap: 4px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(132, 100, 52, 0.1);
}

.parent-support-line:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.parent-support-line span,
.status-pill {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  align-items: center;
  border-radius: 999px;
  padding: 5px 10px;
  background: #f4efe6;
  color: #74552b;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.parent-support-line strong {
  color: #2d261e;
  line-height: 1.25;
}

.parent-support-line em,
.muted-text {
  color: #6d665f;
  font-style: normal;
  line-height: 1.45;
}

.topic-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.topic-chip {
  display: inline-flex;
  max-width: 100%;
  border-radius: 999px;
  padding: 8px 12px;
  background: #f8f2e7;
  border: 1px solid rgba(132, 100, 52, 0.14);
  color: #4d3e29;
  font-size: 13px;
  line-height: 1.25;
  transition: all var(--transition-fast);
}

.topic-chip:hover {
  transform: translateY(-1px);
  background: var(--accent);
  color: #fff;
}

.compact-list .list-line {
  gap: 10px;
}

.weekly-report-hero {
  page-break-inside: avoid;
}

/* ============================================================
   TEACHER ACTIVITY CENTER
   ============================================================ */
.teacher-workspace {
  display: grid;
  gap: 18px;
}

.teacher-hero {
  background: #fffdf8 !important;
}

.teacher-metrics {
  margin-bottom: 0;
}

.teacher-action-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.teacher-panels {
  align-items: start;
}

.compact-head {
  margin-bottom: 12px;
}

.compact-head p {
  margin: 4px 0 0;
}

.teacher-list-line {
  align-items: flex-start;
}

.teacher-list-line span {
  line-height: 1.35;
}

.teacher-list-line em,
.teacher-table span,
.teacher-class-card em {
  color: var(--muted) !important;
  font-style: normal;
  font-weight: 760;
  font-size: 0.86rem;
}

.teacher-question-cell {
  min-width: 280px;
  max-width: 520px;
  white-space: normal !important;
}

.teacher-table td {
  vertical-align: top;
}

.teacher-table td strong {
  display: inline-block;
  margin-bottom: 3px;
}

.teacher-class-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.teacher-class-card {
  display: grid;
  gap: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-soft);
  min-height: 190px;
  transition: transform var(--transition-base), border-color var(--transition-base), background var(--transition-base);
}

.teacher-class-card:hover,
.teacher-class-card.is-active {
  border-color: #f0d3a2;
  background: var(--accent-soft) !important;
  transform: translateY(-1px);
}

.teacher-class-card > span {
  color: var(--muted) !important;
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.teacher-class-card strong {
  color: var(--text) !important;
  font-size: 1.18rem;
  letter-spacing: -0.02em;
}

.teacher-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.teacher-card-stats small {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--accent-dark);
  font-weight: 900;
}

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

/* ============================================================
   SCHOOL ADMIN REPORTS
   ============================================================ */
.report-hero {
  background: #fffdf8 !important;
}

.report-hero .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.report-metrics {
  margin-bottom: 18px;
}

.report-grid {
  margin-bottom: 18px;
}

.report-card-link {
  min-height: 154px;
}

.report-columns {
  align-items: start;
}

.report-panel {
  min-height: 100%;
}

.report-activity-line {
  align-items: flex-start;
}

.report-activity-line span {
  display: grid;
  gap: 4px;
}

.report-activity-line em {
  color: var(--muted) !important;
  font-style: normal;
  font-weight: 760;
  font-size: 0.86rem;
}

.report-table-card {
  margin-top: 16px;
}

.report-table td {
  vertical-align: top;
}

.report-table td strong {
  display: inline-block;
  margin-bottom: 3px;
}

.report-table td span:not(.status-pill) {
  display: block;
  color: var(--muted) !important;
  font-size: 0.84rem;
  font-weight: 760;
  line-height: 1.35;
  white-space: normal;
}

.compact-report-table th,
.compact-report-table td {
  white-space: nowrap;
}

/* ============================================================
   CONTENT REVIEW & QUALITY CONTROL
   ============================================================ */
.content-review-hero,
.content-review-panels,
.review-detail-layout {
  align-items: start;
}

.content-review-actions {
  margin-bottom: 22px;
}

.content-review-panels {
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.75fr);
}

.content-filter-form {
  grid-template-columns: minmax(220px, 1.4fr) minmax(170px, 0.7fr) minmax(170px, 0.7fr) auto;
  align-items: end;
  margin-bottom: 18px;
}

.content-table td:nth-child(2) {
  white-space: normal;
  min-width: 260px;
  line-height: 1.35;
}

.review-detail-layout {
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
}

.review-preview-box {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel-soft);
  padding: 18px;
  min-height: 170px;
  color: var(--text);
  line-height: 1.7;
}

.review-preview-box p {
  margin: 0;
  white-space: normal;
}

.review-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.review-meta-grid div {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  background: #fff;
}

.review-meta-grid span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
  margin-bottom: 5px;
}

.review-meta-grid strong {
  color: var(--text);
}

.review-decision-card textarea {
  resize: vertical;
  min-height: 140px;
}

.review-rule-card .list-line span,
.muted-copy {
  color: var(--muted);
}

.status-pill.warning {
  background: #fff7e6;
  color: #80531b;
  border-color: #eed5a8;
}

.status-pill.danger {
  background: #fff0ef;
  color: #a33a31;
  border-color: #f0b9b4;
}

/* ============================================================
   PAYMENTS & SUBSCRIPTIONS
   ============================================================ */
.payments-hero .hero-badge strong {
  max-width: 220px;
  white-space: normal;
  line-height: 1.1;
}

.payment-metrics .metric-card strong {
  font-size: clamp(1.45rem, 2.2vw, 2rem);
}

.payment-actions {
  margin-bottom: 18px;
}

.payment-panels {
  align-items: start;
}

.package-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.package-card-grid.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.package-card {
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 18px;
  background: #fff;
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 10px;
  min-width: 0;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.package-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.package-card h2,
.package-card h3 {
  margin: 0;
  color: var(--text);
  line-height: 1.15;
}

.package-card p {
  margin: 0;
  color: var(--muted);
}

.package-price,
.package-card > strong {
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  color: var(--text);
  letter-spacing: -0.04em;
}

.package-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.package-feature-list {
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  list-style: none;
}

.package-feature-list li {
  color: var(--muted);
  line-height: 1.35;
  padding-left: 18px;
  position: relative;
}

.package-feature-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 900;
}

.payment-entry-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.payment-entry-form label,
.payment-filter-form label {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.payment-entry-form label span,
.payment-filter-form label span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.payment-entry-form .span-all {
  grid-column: 1 / -1;
}

.payment-table td,
.payment-table th {
  white-space: nowrap;
}

.status-pill.success {
  background: #ecfff5;
  color: #157347;
  border-color: #afe2c8;
}

/* ============================================================
   NOTIFICATIONS & MESSAGES
   ============================================================ */
.notification-button {
  position: relative;
}

.notification-dot {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  border: 2px solid #fff;
  font-size: 0.68rem;
  line-height: 1;
  font-weight: 950;
  display: inline-grid;
  place-items: center;
}

.notifications-hero,
.messages-hero {
  border-color: var(--line);
}

.inline-action-form {
  margin: 0;
}

.notification-list-card {
  display: grid;
  gap: 12px;
}

.notification-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  padding: 16px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.notification-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.notification-item.is-unread {
  border-color: #e9c98d;
  background: #fffaf0;
}

.notification-symbol {
  width: 42px;
  height: 42px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 900;
}

.notification-body {
  min-width: 0;
}

.notification-topline {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.notification-topline strong {
  color: var(--text);
  line-height: 1.2;
}

.notification-topline span,
.thread-item > span,
.message-meta span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.notification-body p {
  margin: 7px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

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

.notification-actions form {
  margin: 0;
}

.secondary-button.small,
.ghost-button.small {
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
}

.ghost-button {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  font-weight: 850;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.ghost-button:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.messages-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 18px;
  align-items: start;
}

.message-compose-form {
  display: grid;
  gap: 14px;
}

.message-compose-form label {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.message-compose-form label span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.message-compose-form textarea {
  resize: vertical;
  min-height: 130px;
}

.thread-list {
  display: grid;
  gap: 10px;
}

.thread-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.thread-item:hover {
  border-color: #e9c98d;
  box-shadow: var(--shadow-soft);
}

.thread-item strong {
  color: var(--text);
}

.thread-item p {
  margin: 5px 0 0;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.thread-item em {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--accent-dark);
  color: #fff;
  font-size: 0.72rem;
  font-style: normal;
}

.message-thread-card {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}

.message-bubble {
  max-width: min(760px, 92%);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 14px 16px;
  background: #fff;
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition-fast);
}

.message-bubble:hover {
  transform: translateX(2px);
}

.message-bubble.mine {
  justify-self: end;
  background: #fff7e6;
  border-color: #eed5a8;
}

.message-bubble.theirs {
  justify-self: start;
}

.message-meta {
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.message-meta strong {
  color: var(--text);
}

.message-bubble p {
  margin: 0;
  color: var(--text);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.setup-needed-card {
  border-color: #eed5a8;
  background: #fffaf0;
  margin-bottom: 18px;
}

button:disabled,
select:disabled,
textarea:disabled,
input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ============================================================
   ADAPTIVE DASHBOARD (COMMAND CENTER)
   ============================================================ */
.adaptive-dashboard {
  grid-template-columns: minmax(0, 1fr) 292px;
  gap: 20px;
}

.adaptive-dashboard .dashboard-main {
  display: grid;
  gap: 18px;
}

.adaptive-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 300px);
  align-items: stretch;
  gap: 18px;
  overflow: hidden;
  margin-bottom: 0;
  background: #fffdf8 !important;
  border-color: #eadfce !important;
  box-shadow: 0 22px 52px rgba(42, 33, 24, 0.075) !important;
}

.adaptive-hero::before {
  content: "";
  position: absolute;
  inset: 18px auto 18px 0;
  width: 5px;
  border-radius: 999px;
  background: #8a5a12;
  opacity: 0.82;
}

.adaptive-hero-copy {
  min-width: 0;
  padding-left: 4px;
}

.adaptive-hero-copy p:not(.eyebrow) {
  max-width: 720px;
  margin-bottom: 0;
  font-size: 1.02rem;
}

.adaptive-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.adaptive-chip-row span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid #f0d3a2;
  background: #fff8ea;
  color: #2a2118;
  font-size: 0.82rem;
  font-weight: 900;
  white-space: nowrap;
}

.adaptive-context-card {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 8px;
  background: #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(42, 33, 24, 0.025);
}

.adaptive-context-card strong {
  line-height: 1.18;
}

.adaptive-context-card em {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid #e7dfd3;
  background: #faf7f1;
  color: #746c60;
  font-style: normal;
  font-size: 0.82rem;
  font-weight: 900;
}

.adaptive-dashboard .metric-grid {
  gap: 12px;
  margin-bottom: 0;
}

.adaptive-metric {
  position: relative;
  overflow: hidden;
  min-height: 134px;
  display: grid;
  align-content: space-between;
  padding: 18px;
  border-radius: 24px;
  background: #ffffff !important;
  border-color: #eadfce !important;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.adaptive-metric:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.adaptive-metric::after {
  content: "";
  position: absolute;
  inset: auto 18px 14px 18px;
  height: 3px;
  border-radius: 999px;
  background: #f0d3a2;
}

.adaptive-metric span {
  letter-spacing: 0.01em;
}

.adaptive-metric strong {
  font-size: clamp(1.75rem, 3vw, 2.35rem);
  line-height: 1;
  margin-bottom: 12px;
}

.adaptive-dashboard .dashboard-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 0;
}

.adaptive-action {
  position: relative;
  min-height: 148px;
  border-radius: 24px;
  background: #ffffff !important;
  border-color: #eadfce !important;
  box-shadow: 0 12px 32px rgba(42, 33, 24, 0.052) !important;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.adaptive-action::after {
  content: "›";
  position: absolute;
  top: 16px;
  right: 18px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid #eadfce;
  background: #faf7f1;
  color: #8a5a12;
  font-size: 1.4rem;
  line-height: 1;
  transition: transform var(--transition-fast);
}

.adaptive-action:hover::after {
  transform: translateX(3px);
}

.adaptive-action:hover {
  transform: translateY(-2px);
  border-color: #d1c3b0 !important;
  box-shadow: 0 18px 42px rgba(42, 33, 24, 0.08) !important;
}

.adaptive-action.primary {
  background: #2a2118 !important;
  border-color: #2a2118 !important;
  box-shadow: 0 18px 42px rgba(42, 33, 24, 0.12) !important;
}

.adaptive-action.primary::after {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.adaptive-dashboard .two-column,
.adaptive-dashboard .profile-grid {
  gap: 18px;
}

.adaptive-dashboard .card,
.adaptive-dashboard .list-card {
  border-radius: 24px;
  border-color: #eadfce !important;
  box-shadow: 0 12px 32px rgba(42, 33, 24, 0.048) !important;
}

.adaptive-dashboard .status-line,
.adaptive-dashboard .list-line {
  background: #fffdf8 !important;
  border-color: #eadfce !important;
}

.adaptive-quick-tray {
  border-radius: 26px;
  border-color: #eadfce !important;
  box-shadow: 0 18px 42px rgba(42, 33, 24, 0.065) !important;
}

.quick-tray-head {
  display: grid;
  gap: 2px;
  margin-bottom: 12px;
}

.quick-tray-head span {
  color: #8a5a12;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  font-weight: 950;
}

.quick-tray-head h2 {
  margin: 0;
}

.adaptive-quick-tray a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #fffdf8 !important;
  border-color: #eadfce !important;
}

.adaptive-quick-tray a::after {
  content: "›";
  color: #8a5a12;
  font-weight: 950;
  transition: transform var(--transition-fast);
}

.adaptive-quick-tray a:hover::after {
  transform: translateX(3px);
}

.adaptive-quick-tray a:hover {
  background: #fff4df !important;
  border-color: #f0d3a2 !important;
}

/* ============================================================
   MEDIA QUERIES (RESPONSIVE)
   ============================================================ */
@media (max-width: 1500px) {
  .app-shell {
    grid-template-columns: 300px minmax(0, 1fr);
  }

  .content-wrap {
    padding-inline: 42px;
  }
}

@media (max-width: 1220px) {
  .dashboard-layout {
    grid-template-columns: 1fr;
  }

  .quick-tray {
    position: static;
    width: 100%;
  }

  .adaptive-dashboard {
    grid-template-columns: 1fr;
  }

  .adaptive-quick-tray {
    position: static;
    width: 100%;
  }
}

@media (max-width: 1120px) {
  .metric-grid,
  .dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .setup-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .qb-filter-form,
  .exam-filter-form,
  .homework-filter-form,
  .content-filter-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .qb-create-layout,
  .qb-view-layout,
  .exam-create-layout,
  .exam-view-layout,
  .homework-create-layout,
  .homework-view-layout,
  .content-review-panels,
  .review-detail-layout,
  .payment-panels,
  .messages-layout {
    grid-template-columns: 1fr;
  }

  .qb-help-card,
  .qb-side-summary,
  .exam-help-card,
  .exam-side-card,
  .homework-help-card,
  .homework-side-card {
    position: static;
  }

  .teacher-action-grid,
  .teacher-class-grid,
  .queue-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .report-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .package-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .payment-entry-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .adaptive-dashboard .dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .login-shell {
    grid-template-columns: 1fr;
  }

  .intro-panel {
    min-height: auto;
  }

  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: fixed;
    z-index: 20;
    inset: 0 auto 0 0;
    width: min(320px, 86vw);
    transform: translateX(-105%);
    transition: transform 0.22s ease;
  }

  .app-shell[data-sidebar-state="open"] .sidebar {
    transform: translateX(0);
  }

  .app-shell[data-sidebar-state="open"] .sidebar-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 19;
    background: rgba(21, 17, 10, 0.28);
    backdrop-filter: blur(2px);
  }

  .mobile-only {
    display: grid;
  }

  .context-block {
    display: none;
  }

  .global-search {
    display: none;
  }

  .topbar {
    justify-content: space-between;
  }

  .page-hero,
  .page-title-row,
  .two-column,
  .profile-grid {
    display: grid;
    grid-template-columns: 1fr;
  }

  .hero-badge {
    min-width: 0;
  }

  .parent-support-grid,
  .report-columns {
    grid-template-columns: 1fr !important;
  }

  .hero-actions {
    justify-content: flex-start;
    width: 100%;
  }

  body.sidebar-open {
    overflow: hidden;
  }

  .sidebar .brand-card {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
  }

  .nav-list {
    padding-bottom: 28px;
  }
}

@media (max-width: 720px) {
  .setup-grid,
  .form-grid,
  .qb-options-grid,
  .result-answer-grid,
  .payment-entry-form,
  .payment-filter-form,
  .review-meta-grid,
  .teacher-action-grid,
  .teacher-class-grid,
  .queue-actions,
  .report-grid,
  .package-card-grid,
  .package-card-grid.compact,
  .adaptive-dashboard .dashboard-grid,
  .adaptive-dashboard .metric-grid {
    grid-template-columns: 1fr !important;
  }

  .section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .table-filter {
    max-width: none;
  }

  .form-actions {
    justify-content: stretch;
    flex-direction: column;
  }

  .form-actions .primary-button,
  .form-actions .secondary-button {
    width: 100%;
  }

  .content-wrap {
    padding: 16px;
  }

  .page-hero,
  .login-panel,
  .status-card,
  .metric-card,
  .action-card,
  .card,
  .list-card,
  .quick-tray,
  .setup-tile,
  .table-card,
  .form-card {
    border-radius: 20px;
  }

  .metric-card strong {
    font-size: 1.7rem;
  }

  .list-item,
  .status-line {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .table-scroll {
    margin-inline: -2px;
  }

  .data-table {
    min-width: 640px;
  }

  .qb-toolbar-actions,
  .form-actions,
  .button-row {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .qb-toolbar-actions > *,
  .form-actions > *,
  .button-row > * {
    width: 100%;
  }

  .hero-actions > *,
  .form-actions > *,
  .button-row > *,
  .qb-toolbar-actions > *,
  .message-actions > *,
  .report-action-row > *,
  .payment-action-row > * {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
  }

  .exam-table .table-actions,
  .homework-table .table-actions,
  .qb-table .table-actions {
    justify-content: flex-start !important;
  }

  .status-pill,
  .chip-row span,
  .game-chip,
  .game-meta-row span,
  .topic-chip,
  .quick-tray a {
    width: max-content;
    max-width: 100% !important;
    white-space: normal !important;
  }

  .hero-badge,
  .table-filter,
  .global-search,
  input,
  select,
  textarea {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .data-table {
    min-width: 640px !important;
  }
}

@media (max-width: 520px) {
  .login-body,
  .center-body {
    padding: 12px;
  }

  .login-panel,
  .status-card {
    border-radius: 24px;
    padding: 22px;
  }

  .feature-grid,
  .metric-grid,
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .content-wrap {
    padding: 16px;
  }

  .topbar {
    min-height: 68px;
    padding: 12px;
    gap: 8px;
  }

  .top-actions {
    gap: 5px;
  }

  .pill-link {
    display: none;
  }

  .icon-button,
  .avatar-button {
    min-width: 42px;
    height: 42px;
  }

  .page-hero {
    border-radius: 24px;
    padding: 20px;
  }

  h1 {
    font-size: clamp(1.75rem, 10vw, 2.45rem);
  }

  .action-card {
    min-height: 132px;
  }

  dl {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .list-item {
    display: grid;
  }

  .data-table {
    min-width: 560px !important;
  }

  .page-hero,
  .login-panel,
  .status-card,
  .metric-card,
  .action-card,
  .card,
  .list-card,
  .quick-tray,
  .setup-tile,
  .table-card,
  .form-card,
  .package-card,
  .game-card,
  .comic-card,
  .tutor-card,
  .notification-item {
    border-radius: 20px !important;
    padding: 16px !important;
  }

  .top-actions {
    gap: 4px !important;
  }
}

@media (max-width: 380px) {
  .content-wrap {
    padding: 12px;
  }

  .feature-grid.compact {
    grid-template-columns: 1fr;
  }

  .top-actions {
    gap: 4px;
  }

  .top-actions .icon-button,
  .top-actions .avatar-button,
  .mobile-only.icon-button {
    min-width: 38px;
    width: 38px;
    height: 38px;
  }

  .sidebar {
    width: 90vw;
    max-width: 90vw;
  }
}

/* ============================================================
   PREFERS-REDUCED-MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    transform: none !important;
  }
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {

  .sidebar,
  .topbar,
  .quick-tray,
  .no-print,
  .sidebar-scrim,
  .mobile-only,
  .form-actions,
  .button-row {
    display: none !important;
  }

  .app-shell,
  .main-area,
  .content-wrap {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }

  .card,
  .page-hero,
  .metric-card,
  .list-card,
  .table-card {
    box-shadow: none !important;
    break-inside: avoid;
  }
}
/* ============================================================
   REGISTRATION CENTER — PASS 1
   ============================================================ */
.login-link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.registration-public-body {
  align-items: stretch;
}

.registration-shell {
  width: min(1180px, 100%);
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 20px;
  align-items: stretch;
}

.registration-intro {
  min-height: 640px;
}

.registration-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-content: stretch;
}

.registration-choice-card,
.registration-return-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: clamp(22px, 3.2vw, 34px);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 206px;
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.registration-choice-card:hover,
.registration-return-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 20px 35px -12px rgba(42, 33, 24, 0.15);
}

.registration-choice-card.primary {
  background: var(--accent-dark);
  color: #fff;
  border-color: var(--accent-dark);
}

.registration-choice-card span {
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.registration-choice-card.primary span,
.registration-choice-card.primary em {
  color: #f4dfbc;
}

.registration-choice-card strong {
  display: block;
  font-size: clamp(1.34rem, 2.6vw, 2rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 28px 0 10px;
}

.registration-choice-card em,
.registration-return-card p {
  color: var(--muted);
  font-style: normal;
  line-height: 1.55;
  font-weight: 760;
}

.registration-choice-card.primary em {
  color: #f4dfbc;
}

.registration-return-card {
  min-height: auto;
  justify-content: center;
  gap: 16px;
  background: var(--panel-soft);
}

.span-all {
  grid-column: 1 / -1;
}

.registration-form-shell {
  width: min(980px, 100%);
}

.registration-form-shell.wide {
  width: min(1120px, 100%);
}

.registration-form-card {
  padding: clamp(22px, 4vw, 38px);
}

.registration-form-head {
  align-items: center;
}

.registration-form-head p {
  max-width: 720px;
}

.registration-form textarea {
  resize: vertical;
  min-height: 120px;
}

.registration-actions {
  justify-content: space-between;
  flex-wrap: wrap;
}

.registration-fieldset {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  background: var(--panel-soft);
}

.registration-fieldset legend {
  padding: 0 8px;
  font-weight: 950;
  color: var(--accent-dark);
}

.registration-fieldset label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 12px;
  background: #fff;
  font-weight: 850;
}

.registration-fieldset input {
  width: auto;
  min-height: auto;
  padding: 0;
}

.registration-status-workspace .alert.info {
  background: #fff8e7;
  border-color: #f0d3a2;
  color: var(--accent-dark);
}

.registration-step {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.registration-step:last-child {
  border-bottom: 0;
}

.registration-step strong {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  background: var(--panel-soft);
  color: var(--accent-dark);
}

.registration-step.is-done strong,
.registration-step.is-current strong {
  background: var(--accent-dark);
  color: #fff;
  border-color: var(--accent-dark);
}

.registration-step span {
  font-weight: 850;
}

.registration-scope-card {
  margin-top: 16px;
}

.registration-review-table td {
  vertical-align: top;
}

.review-inline-form {
  min-width: 280px;
  display: grid;
  gap: 8px;
}

.review-inline-form textarea {
  min-height: 78px;
  resize: vertical;
}

.registration-scope-row td {
  background: var(--panel-soft);
}

.registration-scope-row .status-pill {
  display: inline-flex;
  margin: 4px 6px 4px 0;
}

@media (max-width: 1080px) {
  .registration-shell {
    grid-template-columns: 1fr;
  }

  .registration-intro {
    min-height: auto;
  }
}

@media (max-width: 768px) {
  .registration-choice-grid {
    grid-template-columns: 1fr;
  }

  .registration-form-head,
  .registration-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .registration-actions .primary-button,
  .registration-actions .soft-link,
  .registration-form-head .secondary-button {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .registration-fieldset {
    display: grid;
    grid-template-columns: 1fr;
  }

  .review-inline-form {
    min-width: min(280px, 72vw);
  }
}

@media (max-width: 520px) {
  .registration-choice-card,
  .registration-return-card,
  .registration-form-card {
    border-radius: 22px;
    padding: 20px;
  }

  .registration-choice-card {
    min-height: 172px;
  }
}

/* ============================================================
   REGISTRATION PASS 1C — Teacher requirements
   ============================================================ */
.registration-multi-select {
  min-height: 164px;
  padding: 10px 12px;
  border-radius: 18px;
}

.registration-multi-select option {
  padding: 10px 8px;
  border-radius: 10px;
  margin-bottom: 4px;
}

.field-help,
.registration-file-box em {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
  font-style: normal;
}

.registration-file-box input[type="file"] {
  padding: 11px 12px;
  background: var(--panel-soft);
}

.registration-document-grid {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 18px;
  align-items: start;
}

.teacher-profile-preview {
  display: grid;
  gap: 10px;
  text-align: center;
  color: var(--muted);
  font-weight: 800;
}

.teacher-profile-preview img,
.teacher-review-documents img {
  width: 112px;
  height: 112px;
  object-fit: cover;
  border-radius: 28px;
  border: 1px solid var(--line);
  background: var(--panel-soft);
  box-shadow: var(--shadow-soft);
}

.profile-placeholder {
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
  border-radius: 28px;
  border: 1px dashed var(--line-strong);
  background: var(--panel-soft);
  margin: 0 auto;
  color: var(--muted);
}

.document-list,
.teacher-review-documents {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.document-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--accent-dark);
  font-weight: 900;
}

.document-chip span {
  color: var(--muted);
  font-size: 0.78rem;
}

.teacher-review-documents img {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  box-shadow: none;
}

.registration-capacity-card {
  max-width: 860px;
}

@media (max-width: 760px) {
  .registration-document-grid {
    grid-template-columns: 1fr;
  }

  .teacher-profile-preview {
    text-align: left;
  }

  .teacher-profile-preview img,
  .profile-placeholder {
    margin: 0;
  }
}

/* ============================================================
   REGISTRATION PASS 1D — Teacher self-edit profile
   ============================================================ */
.teacher-status-actions,
.teacher-edit-hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.teacher-status-actions .hero-badge {
  margin-left: 0;
}

.teacher-profile-edit-workspace {
  display: grid;
  gap: 16px;
}

.teacher-profile-edit-card,
.teacher-profile-edit-docs {
  width: 100%;
}

.teacher-profile-edit-head {
  gap: 18px;
}

.teacher-profile-edit-head > div:first-child {
  min-width: 0;
}

.compact-profile-preview {
  min-width: 132px;
  justify-items: center;
}

.compact-profile-preview img,
.compact-profile-preview .profile-placeholder {
  width: 96px;
  height: 96px;
  border-radius: 24px;
}

.teacher-profile-edit-form input[type="file"] {
  cursor: pointer;
}

.teacher-profile-edit-actions {
  margin-top: 18px;
}

@media (max-width: 1080px) {
  .teacher-status-actions,
  .teacher-edit-hero-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 768px) {
  .teacher-status-actions,
  .teacher-edit-hero-actions {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .teacher-status-actions .hero-badge,
  .teacher-status-actions .secondary-button,
  .teacher-edit-hero-actions .secondary-button {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .teacher-profile-edit-head {
    align-items: stretch;
  }

  .compact-profile-preview {
    justify-items: start;
    text-align: left;
  }
}

/* Pass 2 — Teacher Content Workflow Foundation */
.teacher-content-workspace,
.teacher-content-review-workspace {
    display: grid;
    gap: 18px;
}

.teacher-content-hero .hero-actions,
.teacher-content-create-workspace .hero-actions,
.teacher-content-review-workspace .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
}

.teacher-content-metrics {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.teacher-content-filter-card {
    padding: 16px;
}

.teacher-content-filters {
    display: grid;
    grid-template-columns: minmax(150px, 220px) minmax(150px, 220px) 1fr auto;
    gap: 12px;
    align-items: end;
}

.teacher-content-filters label {
    display: grid;
    gap: 6px;
    font-weight: 700;
    color: var(--text-strong);
}

.teacher-content-filters label span {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
}

.teacher-content-table td strong {
    display: block;
    max-width: 420px;
}

.table-subtext {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.35;
}

.inline-post-form,
.hero-inline-form {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.mini-button {
    border: 1px solid var(--stroke-soft);
    background: var(--surface-elevated);
    color: var(--text-strong);
    border-radius: 999px;
    padding: 7px 11px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

.mini-button:hover {
    border-color: var(--stroke-strong);
    transform: translateY(-1px);
}

.teacher-content-form-card,
.teacher-content-preview-card,
.teacher-content-status-card,
.teacher-content-decision-card {
    overflow: hidden;
}

.teacher-content-detail-layout {
    align-items: start;
}

.content-summary {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-strong);
    padding: 14px 16px;
    border: 1px solid var(--stroke-soft);
    border-radius: 18px;
    background: var(--surface-soft);
}

.teacher-content-body {
    min-height: 180px;
    line-height: 1.75;
}

.content-resource-line {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid var(--stroke-soft);
    border-radius: 16px;
    background: var(--surface-elevated);
}

.content-resource-line a {
    color: var(--brand-strong);
    font-weight: 800;
    text-decoration: none;
}

.teacher-content-meta-grid {
    margin-top: 16px;
}

.teacher-content-rules {
    display: grid;
    gap: 12px;
}

.danger-zone-form {
    margin-top: 14px;
    display: flex;
    justify-content: flex-end;
}

.ghost-danger-button {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid rgba(170, 42, 42, .25);
    color: #9b2226;
    background: rgba(170, 42, 42, .06);
    font-size: 18px;
    cursor: pointer;
}

.ghost-danger-button:hover {
    background: rgba(170, 42, 42, .12);
}

.teacher-content-actions {
    gap: 10px;
}

@media (max-width: 1080px) {
    .teacher-content-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .teacher-content-filters {
        grid-template-columns: 1fr 1fr;
    }

    .teacher-content-filters .secondary-button {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .teacher-content-hero .hero-actions,
    .teacher-content-create-workspace .hero-actions,
    .teacher-content-review-workspace .hero-actions {
        width: 100%;
        justify-content: stretch;
    }

    .teacher-content-hero .hero-actions > *,
    .teacher-content-create-workspace .hero-actions > *,
    .teacher-content-review-workspace .hero-actions > * {
        width: 100%;
    }

    .teacher-content-metrics,
    .teacher-content-filters {
        grid-template-columns: 1fr;
    }

    .teacher-content-table td strong {
        max-width: 240px;
    }

    .inline-post-form,
    .hero-inline-form {
        width: 100%;
    }

    .inline-post-form .mini-button,
    .hero-inline-form .primary-button {
        width: 100%;
        justify-content: center;
    }

    .content-resource-line {
        display: grid;
    }
}

.muted-open {
    opacity: .75;
}

/* Pass 2A: teacher live session foundation */
.live-session-panel {
    border: 1px solid var(--border, rgba(15, 23, 42, .12));
    border-radius: 22px;
    padding: 18px;
    background: var(--card-soft, rgba(15, 23, 42, .035));
}
.live-session-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.live-session-summary-box {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid var(--border, rgba(15, 23, 42, .12));
    border-radius: 22px;
    background: var(--card-soft, rgba(15, 23, 42, .035));
}
.live-session-summary-box h3 {
    margin: 0 0 10px;
    font-size: 1rem;
}
.live-session-summary-box p {
    margin: 7px 0;
}
.live-classroom-card {
    display: grid;
    gap: 18px;
}
.live-stage-panel {
    min-height: 360px;
    border-radius: 28px;
    border: 1px solid var(--border, rgba(15, 23, 42, .14));
    background: var(--card, #0f172a);
    display: grid;
    place-items: center;
    color: #fff;
    overflow: hidden;
}
.live-stage-inner {
    text-align: center;
    max-width: 520px;
    padding: 24px;
}
.live-stage-inner h2 {
    margin: 10px 0 8px;
    color: inherit;
    font-size: clamp(1.6rem, 3vw, 2.35rem);
}
.live-stage-inner p {
    margin: 0 0 12px;
    color: rgba(255, 255, 255, .78);
}
.live-stage-inner small {
    color: rgba(255, 255, 255, .6);
}
.live-dot {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    display: inline-block;
    background: #ef4444;
    box-shadow: 0 0 0 8px rgba(239, 68, 68, .15);
}
.live-room-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}
.live-room-grid div {
    border: 1px solid var(--border, rgba(15, 23, 42, .12));
    border-radius: 18px;
    padding: 14px;
    background: var(--card-soft, rgba(15, 23, 42, .035));
}
.live-room-grid span {
    display: block;
    font-size: .78rem;
    color: var(--muted, #64748b);
    margin-bottom: 6px;
}
.live-room-grid strong {
    font-size: .95rem;
}
@media (max-width: 1080px) {
    .live-session-grid,
    .live-room-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 768px) {
    .live-session-grid,
    .live-room-grid {
        grid-template-columns: 1fr;
    }
    .live-stage-panel {
        min-height: 260px;
    }
}

/* Pass 2B — Live session API bridge + student library */
.live-action-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 18px;
}
.live-action-strip form {
    margin: 0;
}
.live-dot.is-live {
    box-shadow: 0 0 0 8px rgba(23, 166, 97, .14), 0 0 24px rgba(23, 166, 97, .32);
}
.live-api-card .span-2,
.form-grid .span-2 {
    grid-column: 1 / -1;
}
.check-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 10px;
    min-height: 48px;
}
.check-row input {
    width: auto;
    min-width: 18px;
}
.copy-url-box {
    display: block;
    width: 100%;
    margin: 12px 0 18px;
    padding: 14px 16px;
    border: 1px solid var(--stroke-soft);
    border-radius: 18px;
    background: var(--surface-muted);
    color: var(--text-strong);
    font-size: .92rem;
    word-break: break-word;
}
.student-live-card .live-stage-panel,
.video-player-card {
    overflow: hidden;
}
.student-video-player {
    display: block;
    width: 100%;
    max-height: 68vh;
    border-radius: 22px;
    background: #111827;
    outline: none;
}
.external-recording-box {
    padding: clamp(22px, 4vw, 44px);
    border: 1px solid var(--stroke-soft);
    border-radius: 24px;
    background: var(--surface-muted);
    text-align: center;
}
.small-copy {
    font-size: .82rem;
}
.compact-filter-form {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.compact-filter-form input[type="search"] {
    min-width: min(280px, 100%);
}
@media (max-width: 1080px) {
    .live-room-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 768px) {
    .live-room-grid {
        grid-template-columns: 1fr;
    }
    .live-action-strip,
    .compact-filter-form {
        flex-direction: column;
        align-items: stretch;
    }
    .live-action-strip .primary-button,
    .live-action-strip .secondary-button,
    .compact-filter-form .secondary-button,
    .compact-filter-form input[type="search"] {
        width: 100%;
    }
    .student-video-player {
        max-height: 52vh;
        border-radius: 18px;
    }
}

/* Pass 2C — live classroom booking, readiness and participation controls */
.live-controls-card,
.live-participants-card,
.live-interactions-card {
    display: grid;
    gap: 18px;
}
.live-control-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.control-state {
    border: 1px solid var(--stroke-soft);
    border-radius: 18px;
    background: var(--surface-muted);
    padding: 14px;
}
.control-state span {
    display: block;
    color: var(--muted);
    font-size: .78rem;
    margin-bottom: 6px;
}
.control-state strong {
    color: var(--text-strong);
}
.quick-comment-form {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}
.quick-comment-form label {
    font-weight: 800;
    color: var(--text-strong);
}
.quick-comment-row {
    display: flex;
    gap: 10px;
    align-items: center;
}
.quick-comment-row select {
    min-height: 46px;
    flex: 1;
    border: 1px solid var(--stroke-soft);
    border-radius: 16px;
    background: var(--surface);
    color: var(--text-strong);
    padding: 0 14px;
}
.live-control-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 280px;
}
.live-control-actions form {
    margin: 0;
}
.live-control-actions .mini-button {
    min-height: 34px;
    border-radius: 999px;
    white-space: nowrap;
}
.interaction-feed {
    display: grid;
    gap: 10px;
}
.interaction-item {
    display: grid;
    gap: 4px;
    border: 1px solid var(--stroke-soft);
    border-radius: 18px;
    background: var(--surface-muted);
    padding: 14px;
}
.interaction-item strong {
    color: var(--text-strong);
}
.interaction-item span,
.interaction-item small {
    color: var(--muted);
    font-size: .82rem;
}
.interaction-item p {
    margin: 0;
    color: var(--text-strong);
}
.secondary-button[disabled],
button[disabled] {
    opacity: .58;
    cursor: not-allowed;
}
@media (max-width: 1080px) {
    .live-control-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 768px) {
    .live-control-grid {
        grid-template-columns: 1fr;
    }
    .quick-comment-row {
        flex-direction: column;
        align-items: stretch;
    }
    .quick-comment-row .primary-button,
    .quick-comment-row select {
        width: 100%;
    }
    .live-control-actions {
        min-width: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .live-control-actions .mini-button {
        width: 100%;
    }
}

/* Pass 2D — live provider connector */
.copy-url-box {
  display: block;
  width: 100%;
  padding: .8rem .95rem;
  border: 1px solid var(--border, rgba(148, 163, 184, .28));
  border-radius: 16px;
  overflow-wrap: anywhere;
  font-size: .88rem;
  background: var(--surface-soft, rgba(148, 163, 184, .08));
}
.live-api-settings-workspace .form-grid label.span-2,
.teacher-content-detail-layout .form-grid label.span-2 {
  grid-column: 1 / -1;
}
.live-api-help-card h3 {
  margin-top: 1rem;
  margin-bottom: .35rem;
  font-size: 1rem;
}
.live-action-strip .primary-button[target="_blank"]::after,
.live-action-strip .secondary-button[target="_blank"]::after {
  content: "↗";
  margin-left: .35rem;
  font-size: .9em;
}
@media (max-width: 768px) {
  .live-api-settings-workspace .form-grid.two,
  .teacher-content-detail-layout .form-grid.two {
    grid-template-columns: 1fr;
  }
  .live-api-settings-workspace .form-grid label.span-2,
  .teacher-content-detail-layout .form-grid label.span-2 {
    grid-column: auto;
  }
}

/* Pass 3 — Student Visibility + Learning Library */
.learning-library-hero .hero-actions,
.student-learning-workspace .hero-actions,
.parent-learning-workspace .hero-actions {
    display: flex;
    gap: .7rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}

.library-filter-card {
    margin-bottom: 1rem;
}

.library-filter-form {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(170px, 240px) auto;
    gap: .75rem;
    align-items: center;
}

.library-filter-form input,
.library-filter-form select,
.quick-comment-row select {
    min-height: 42px;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, .13);
    background: rgba(255,255,255,.82);
    padding: .68rem .85rem;
    color: #0f172a;
    outline: none;
}

.library-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
}

.learning-card {
    display: flex;
    flex-direction: column;
    gap: .82rem;
    min-height: 100%;
    overflow: hidden;
}

.learning-card.is-locked {
    border-style: dashed;
}

.learning-card-top,
.learning-card-actions,
.detail-actions,
.linked-child-pills {
    display: flex;
    gap: .55rem;
    align-items: center;
    flex-wrap: wrap;
}

.learning-card-top {
    justify-content: space-between;
}

.content-type-chip,
.linked-child-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border-radius: 999px;
    padding: .42rem .7rem;
    border: 1px solid rgba(15, 23, 42, .12);
    background: rgba(248, 250, 252, .88);
    color: #334155;
    font-size: .83rem;
    line-height: 1;
}

.linked-child-pill {
    flex-direction: column;
    align-items: flex-start;
    border-radius: 16px;
    min-width: 160px;
}

.linked-child-pill em {
    font-size: .76rem;
    color: #64748b;
    font-style: normal;
}

.learning-card h2,
.learning-detail-card h2 {
    margin: 0;
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    line-height: 1.22;
}

.learning-card p,
.learning-detail-card p {
    margin: 0;
    color: #64748b;
    line-height: 1.55;
}

.learning-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
}

.learning-meta-grid > div,
.live-mini-strip,
.control-state {
    border-radius: 16px;
    background: rgba(248, 250, 252, .82);
    border: 1px solid rgba(15, 23, 42, .08);
    padding: .68rem .75rem;
    min-width: 0;
}

.learning-meta-grid span,
.live-mini-strip span,
.control-state span {
    display: block;
    font-size: .72rem;
    color: #64748b;
    margin-bottom: .18rem;
}

.learning-meta-grid strong,
.live-mini-strip strong,
.control-state strong {
    display: block;
    color: #0f172a;
    font-size: .9rem;
    overflow-wrap: anywhere;
}

.live-mini-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .7rem;
}

.learning-detail-card,
.locked-material-card {
    display: grid;
    gap: 1rem;
}

.learning-detail-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.lead-copy {
    font-size: 1.02rem;
    color: #334155 !important;
}

.learning-body-text {
    border-radius: 20px;
    border: 1px solid rgba(15, 23, 42, .09);
    background: rgba(255, 255, 255, .72);
    padding: 1rem;
    line-height: 1.7;
    color: #1e293b;
    overflow-wrap: anywhere;
}

.detail-meta {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.library-empty {
    grid-column: 1 / -1;
}

@media (max-width: 1080px) {
    .library-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .detail-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .library-filter-form {
        grid-template-columns: 1fr;
    }
    .library-grid,
    .learning-meta-grid,
    .detail-meta {
        grid-template-columns: 1fr;
    }
    .learning-card-actions,
    .detail-actions,
    .learning-library-hero .hero-actions {
        align-items: stretch;
    }
    .learning-card-actions > *,
    .detail-actions > *,
    .learning-library-hero .hero-actions > * {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

/* Pass 4 — Dashboard learning integration */
.dashboard-learning-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
    align-items: stretch;
}

.dashboard-learning-panel {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    min-width: 0;
}

.compact-head {
    gap: .75rem;
    align-items: flex-start;
}

.compact-head h2,
.dashboard-parent-support h2,
.dashboard-replay-strip h2 {
    margin: 0;
}

.dashboard-learning-list {
    display: grid;
    gap: .65rem;
}

.dashboard-learning-item {
    display: grid;
    gap: .22rem;
    padding: .78rem .85rem;
    border-radius: 18px;
    border: 1px solid rgba(15, 23, 42, .09);
    background: rgba(248, 250, 252, .86);
    color: inherit;
    text-decoration: none;
    min-width: 0;
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.dashboard-learning-item:hover {
    transform: translateY(-1px);
    border-color: rgba(15, 23, 42, .18);
    background: rgba(255, 255, 255, .96);
}

.dashboard-learning-item span,
.dashboard-learning-item em,
.dashboard-empty-note {
    color: #64748b;
    font-size: .82rem;
    font-style: normal;
}

.dashboard-learning-item strong {
    color: #0f172a;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.dashboard-learning-item.is-locked {
    border-style: dashed;
}

.dashboard-learning-item.live {
    background: rgba(255, 255, 255, .9);
}

.dashboard-empty-note {
    border-radius: 18px;
    border: 1px dashed rgba(15, 23, 42, .14);
    padding: .9rem;
    background: rgba(248, 250, 252, .72);
    line-height: 1.45;
}

.dashboard-replay-strip,
.dashboard-parent-support {
    margin-top: 1rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}

.dashboard-replay-strip p,
.dashboard-parent-support p {
    margin: .28rem 0 0;
}

.parent-hero-actions,
.parent-child-actions {
    display: flex;
    gap: .65rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.parent-child-actions .primary-button,
.parent-child-actions .secondary-button {
    white-space: nowrap;
}

@media (max-width: 1080px) {
    .dashboard-learning-grid {
        grid-template-columns: 1fr;
    }
    .dashboard-replay-strip,
    .dashboard-parent-support {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    .compact-head,
    .parent-hero-actions,
    .parent-child-actions {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }
    .compact-head .secondary-button,
    .dashboard-replay-strip .primary-button,
    .dashboard-parent-support .primary-button,
    .parent-hero-actions .secondary-button,
    .parent-child-actions .primary-button,
    .parent-child-actions .secondary-button {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}


/* ============================================================
   REGISTRATION PASS 5 — UX polish and guided empty states
   ============================================================ */
.registration-intro-polished {
  position: relative;
  overflow: hidden;
}

.registration-intro-polished::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -80px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 1px solid rgba(116, 83, 45, .14);
  pointer-events: none;
}

.registration-flow-preview,
.registration-guidance-strip,
.registration-next-actions {
  display: grid;
  gap: 10px;
}

.registration-flow-preview {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 18px;
}

.registration-flow-preview > div,
.registration-guidance-strip > div,
.registration-next-actions > span {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .68);
  border-radius: 18px;
  padding: 12px;
  min-width: 0;
}

.registration-flow-preview strong {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-dark);
  color: #fff;
  margin-bottom: 8px;
}

.registration-flow-preview span,
.registration-guidance-strip span,
.registration-next-actions span,
.registration-choice-card small {
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.45;
  font-weight: 780;
}

.registration-choice-card small {
  display: block;
  margin-top: 14px;
}

.registration-guidance-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 16px 0 18px;
}

.teacher-guidance-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.registration-guidance-strip strong {
  display: block;
  color: var(--accent-dark);
  margin-bottom: 4px;
}

.registration-client-summary {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px 14px;
  background: var(--panel-soft);
  color: var(--accent-dark);
  font-weight: 850;
  margin-bottom: 14px;
}

.registration-client-summary.warning {
  border-color: #f0d3a2;
  background: #fff8e7;
}

.registration-client-summary.error {
  border-color: #fecaca;
  background: #fff1f2;
  color: #991b1b;
}

.registration-client-summary.success {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #166534;
}

.registration-step span {
  display: grid;
  gap: 3px;
}

.registration-step em {
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.38;
  font-style: normal;
  font-weight: 720;
}

.registration-empty-state-polished {
  display: grid;
  gap: 14px;
}

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

.registration-next-actions > span {
  display: block;
  color: var(--accent-dark);
  font-weight: 850;
}

@media (max-width: 1080px) {
  .teacher-guidance-strip,
  .registration-guidance-strip,
  .registration-next-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .registration-flow-preview,
  .teacher-guidance-strip,
  .registration-guidance-strip,
  .registration-next-actions {
    grid-template-columns: 1fr;
  }

  .registration-flow-preview {
    margin-top: 14px;
  }

  .registration-guidance-strip {
    margin-top: 12px;
  }
}

/* Pass 6: access/package summary panels */
.access-summary-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1rem 0;
    border: 1px solid var(--border, rgba(148, 163, 184, .22));
}
.access-summary-card h2 {
    margin: .35rem 0 .25rem;
    font-size: clamp(1.05rem, 2vw, 1.35rem);
}
.access-summary-card p {
    margin: 0;
    color: var(--muted, #64748b);
    line-height: 1.55;
}
.teacher-access-summary-card {
    margin-top: 0;
}
.package-access-note {
    margin: .75rem 0 0;
    font-size: .88rem;
    color: var(--muted, #64748b);
    line-height: 1.5;
}
@media (max-width: 768px) {
    .access-summary-card {
        align-items: stretch;
        flex-direction: column;
    }
    .access-summary-card .primary-button,
    .access-summary-card .secondary-button {
        width: 100%;
        justify-content: center;
    }
}

/* Pass 7 — Premium upgrade and manual activation polish */
.upgrade-hero .hero-actions,
.page-hero .hero-actions {
    display: flex;
    gap: 0.7rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}
.premium-status-card,
.manual-activation-card {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}
.upgrade-package-grid .package-card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.upgrade-request-form,
.manual-activation-form,
.inline-action-form {
    display: grid;
    gap: 0.75rem;
}
.manual-activation-form {
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    align-items: end;
    width: 100%;
}
.manual-activation-form .wide-field {
    grid-column: span 2;
}
.upgrade-request-form label,
.manual-activation-form label,
.inline-action-form label {
    display: grid;
    gap: 0.35rem;
    font-weight: 700;
    color: var(--text-strong, #152033);
}
.upgrade-request-form textarea,
.manual-activation-form input,
.inline-action-form input,
.compact-select {
    width: 100%;
    border: 1px solid var(--border, #dde6f3);
    border-radius: 16px;
    background: var(--surface, #ffffff);
    color: var(--text-strong, #152033);
    padding: 0.72rem 0.85rem;
    outline: none;
}
.inline-action-form {
    grid-template-columns: minmax(92px, 120px) minmax(130px, 1fr) auto;
    align-items: center;
    margin-bottom: 0.5rem;
}
.inline-action-form.decline-form {
    grid-template-columns: minmax(130px, 1fr) auto;
}
.inline-action-form.decline-form input[type="hidden"],
.inline-action-form input[type="hidden"] {
    display: none;
}
.primary-button.small,
.secondary-button.small {
    min-height: 38px;
    padding: 0.55rem 0.85rem;
}
.package-upgrade-button {
    margin-top: auto;
    justify-content: center;
}
.package-access-note,
.muted-text {
    color: var(--text-muted, #64748b);
    font-size: 0.9rem;
}
.empty-card {
    min-height: 160px;
}
@media (max-width: 1080px) {
    .manual-activation-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .manual-activation-form .wide-field {
        grid-column: span 2;
    }
}
@media (max-width: 768px) {
    .page-hero .hero-actions,
    .upgrade-hero .hero-actions {
        justify-content: stretch;
        width: 100%;
    }
    .page-hero .hero-actions a,
    .upgrade-hero .hero-actions a,
    .premium-status-card > a {
        width: 100%;
        justify-content: center;
    }
    .manual-activation-form,
    .inline-action-form,
    .inline-action-form.decline-form {
        grid-template-columns: 1fr;
    }
    .manual-activation-form .wide-field {
        grid-column: span 1;
    }
    .premium-status-card,
    .manual-activation-card {
        display: block;
    }
}


/* Pass 8 — Payment gateway preparation */
.payment-prep-card,
.gateway-callback-card {
    gap: 1rem;
    align-items: center;
}
.payment-reference-help {
    display: grid;
    gap: .25rem;
    min-width: min(100%, 24rem);
    padding: .85rem 1rem;
    border: 1px solid var(--border, rgba(148, 163, 184, .25));
    border-radius: 1rem;
    background: var(--surface-soft, rgba(148, 163, 184, .08));
    overflow-wrap: anywhere;
}
.payment-reference-help strong { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted, #64748b); }
.gateway-settings-form,
.gateway-intent-form,
.manual-request-form {
    display: grid;
    gap: 1rem;
}
.gateway-settings-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.gateway-settings-form .wide-field,
.gateway-settings-form button { grid-column: 1 / -1; }
.gateway-settings-form .check-row {
    align-items: center;
    display: flex;
    gap: .65rem;
    padding: .8rem 1rem;
    border: 1px solid var(--border, rgba(148, 163, 184, .25));
    border-radius: 1rem;
}
.gateway-intent-form {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--border, rgba(148, 163, 184, .28));
}
.manual-request-form {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 1rem;
    background: var(--surface-soft, rgba(148, 163, 184, .06));
}
.payment-verify-form {
    display: grid;
    grid-template-columns: minmax(7.5rem, .7fr) minmax(8rem, 1fr) minmax(9rem, 1fr) auto;
    gap: .5rem;
    align-items: center;
}
.payment-table td { vertical-align: top; }
@media (max-width: 1080px) {
    .gateway-settings-form,
    .payment-verify-form { grid-template-columns: 1fr; }
    .payment-prep-card { align-items: stretch; }
}
@media (max-width: 768px) {
    .gateway-settings-form-card,
    .gateway-callback-card,
    .payment-filter-card { padding: 1rem; }
    .payment-reference-help { min-width: 0; }
}

/* Pass 9 — Real payment provider adapter */
.provider-settings-form textarea[name="request_template_json"] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    min-height: 13rem;
    white-space: pre;
    overflow: auto;
}
.checkout-card,
.checkout-state-card {
    display: grid;
    gap: 1rem;
}
.checkout-reference-box {
    display: grid;
    gap: .35rem;
    padding: 1rem;
    border: 1px solid var(--border, rgba(148, 163, 184, .25));
    border-radius: 1rem;
    background: var(--surface-soft, rgba(148, 163, 184, .08));
    overflow-wrap: anywhere;
}
.checkout-reference-box span {
    color: var(--text-muted, #64748b);
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.checkout-reference-box strong {
    font-size: clamp(1.4rem, 2vw, 2rem);
}
.checkout-reference-box em,
.checkout-instructions {
    color: var(--text-muted, #64748b);
    font-style: normal;
}
.checkout-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .8rem;
}
.checkout-summary-grid > div {
    display: grid;
    gap: .25rem;
    padding: .85rem;
    border: 1px solid var(--border, rgba(148, 163, 184, .24));
    border-radius: .95rem;
    min-width: 0;
}
.checkout-summary-grid span {
    color: var(--text-muted, #64748b);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.checkout-summary-grid strong {
    overflow-wrap: anywhere;
}
.checkout-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}
.compact-refresh-form {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
    margin-top: .5rem;
}
.plain-link {
    color: var(--accent, #2563eb);
    font-weight: 750;
    text-decoration: none;
}
.plain-link:hover {
    text-decoration: underline;
}
@media (max-width: 1080px) {
    .checkout-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 768px) {
    .checkout-summary-grid {
        grid-template-columns: 1fr;
    }
    .checkout-actions,
    .checkout-actions a,
    .checkout-actions .compact-refresh-form,
    .checkout-actions button {
        width: 100%;
    }
    .checkout-actions a,
    .checkout-actions button {
        justify-content: center;
    }
}

/* Pass 10: payment provider setup + checkout UX */
.provider-setup-hero .hero-badge,
.checkout-hero .hero-badge {
  min-width: 150px;
}
.provider-preset-card,
.gateway-setup-checklist,
.provider-checkout-card {
  overflow: hidden;
}
.provider-preset-grid,
.setup-checklist-grid,
.checkout-progress-strip {
  display: grid;
  gap: 14px;
}
.provider-preset-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.provider-preset-tile {
  border: 1px solid var(--border, rgba(148, 163, 184, .28));
  border-radius: 18px;
  padding: 16px;
  background: var(--surface-soft, rgba(255,255,255,.04));
  display: grid;
  gap: 10px;
  align-content: start;
}
.provider-preset-tile.selected {
  box-shadow: 0 0 0 2px rgba(20, 184, 166, .18) inset;
}
.provider-preset-tile span,
.field-hint {
  font-size: .82rem;
  color: var(--muted, #64748b);
}
.provider-preset-tile h3 {
  margin: 0;
  font-size: 1rem;
}
.provider-preset-tile p {
  margin: 0;
  color: var(--muted, #64748b);
  line-height: 1.5;
}
.setup-checklist-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.setup-check-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 13px 14px;
  border: 1px solid var(--border, rgba(148, 163, 184, .24));
  border-radius: 16px;
  background: var(--surface-soft, rgba(255,255,255,.035));
}
.setup-check-item strong {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--surface-strong, rgba(15,23,42,.08));
  flex: 0 0 auto;
}
.setup-check-item span {
  line-height: 1.45;
}
.checkout-progress-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 16px 0;
}
.checkout-step {
  border: 1px solid var(--border, rgba(148, 163, 184, .24));
  border-radius: 16px;
  padding: 12px;
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--muted, #64748b);
  background: var(--surface-soft, rgba(255,255,255,.035));
}
.checkout-step.done {
  color: var(--text, #0f172a);
  border-color: rgba(20, 184, 166, .35);
}
.checkout-step strong {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--surface-strong, rgba(15,23,42,.08));
  flex: 0 0 auto;
}
.gateway-settings-form textarea + .field-hint {
  display: block;
  margin-top: 6px;
}
@media (max-width: 900px) {
  .checkout-progress-strip {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  .checkout-progress-strip,
  .provider-preset-grid,
  .setup-checklist-grid {
    grid-template-columns: 1fr;
  }
  .setup-check-item,
  .checkout-step {
    align-items: flex-start;
  }
}

/* Pass 11 — Payment callback diagnostics */
.callback-metrics {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.callback-test-card .gateway-settings-form,
.callback-test-form {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.callback-log-card details {
  margin-top: .55rem;
}
.callback-log-card summary {
  cursor: pointer;
  color: var(--text-muted, #64748b);
  font-weight: 700;
}
.callback-payload-preview {
  max-width: 520px;
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  background: rgba(15, 23, 42, .04);
  border: 1px solid var(--border, rgba(15, 23, 42, .12));
  border-radius: 14px;
  padding: .75rem;
  font-size: .78rem;
  line-height: 1.45;
}
.callback-event-table td {
  vertical-align: top;
}
.gateway-callback-card .secondary-button {
  margin-top: .75rem;
}
@media (max-width: 768px) {
  .callback-test-card .gateway-settings-form,
  .callback-test-form {
    grid-template-columns: 1fr;
  }
  .callback-payload-preview {
    max-width: 72vw;
  }
}

/* Pass 12 — provider live test harness */
.provider-test-layout{align-items:start}.provider-test-form-card,.provider-readiness-card,.provider-test-result-card,.provider-tests-log-card{border-radius:24px}.provider-live-test-form .danger-check{grid-column:1/-1;border:1px solid rgba(191,86,86,.25);border-radius:18px;padding:12px 14px;background:rgba(191,86,86,.06)}.readiness-status{display:flex;flex-direction:column;gap:4px;border-radius:18px;padding:14px 16px;margin-bottom:14px;border:1px solid var(--stroke-soft,rgba(148,163,184,.25))}.readiness-status.ready{background:rgba(46,125,74,.08)}.readiness-status.attention{background:rgba(180,120,32,.10)}.clean-bullet-list,.clean-number-list{margin:10px 0 18px;padding-left:22px;color:var(--text-soft,#64748b)}.clean-bullet-list li,.clean-number-list li{margin:6px 0}.warning-list li{color:var(--warning-text,#9a5b00)}.result-preview-grid{gap:18px}.provider-test-metrics .metric-card strong{letter-spacing:-.03em}.provider-tests-log-card details{margin-top:8px}.provider-tests-log-card summary{cursor:pointer;font-weight:700}.provider-tests-log-card .callback-payload-preview{max-height:280px;overflow:auto;white-space:pre-wrap;word-break:break-word}.provider-test-result-card .callback-payload-preview{max-height:360px;overflow:auto;white-space:pre-wrap;word-break:break-word}@media (max-width:1080px){.provider-test-layout,.result-preview-grid{grid-template-columns:1fr!important}.provider-live-test-form{grid-template-columns:1fr!important}.provider-live-test-form .wide-field{grid-column:1!important}}@media (max-width:768px){.provider-test-metrics{grid-template-columns:1fr!important}.provider-readiness-card .section-heading-row,.provider-tests-log-card .section-heading-row{align-items:flex-start;gap:12px}.provider-tests-log-card .qb-toolbar-actions{width:100%;justify-content:flex-start;flex-wrap:wrap}.provider-live-test-form .check-row{align-items:flex-start}.provider-live-test-form .check-row input{margin-top:4px}}

/* Pass 13 — payment journey polish */
.payment-journey-hero .hero-badge,
.receipt-hero .hero-badge,
.support-hero .hero-badge {
  min-width: 140px;
}
.refined-timeline {
  display: grid;
  gap: 12px;
}
.refined-timeline.compact {
  margin: 12px 0;
}
.refined-timeline .checkout-step span {
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1.25;
}
.refined-timeline .checkout-step span em {
  font-style: normal;
  font-size: .78rem;
  color: var(--text-soft, #64748b);
}
.checkout-step.current {
  border-color: rgba(37, 99, 235, .32);
  background: rgba(37, 99, 235, .06);
}
.checkout-step.pending {
  opacity: .72;
}
.checkout-step.blocked {
  border-color: rgba(191, 86, 86, .28);
  background: rgba(191, 86, 86, .07);
}
.payment-journey-list {
  display: grid;
  gap: 14px;
}
.payment-journey-item {
  border: 1px solid var(--stroke-soft, rgba(148,163,184,.25));
  border-radius: 22px;
  padding: 16px;
  background: var(--surface-soft, rgba(255,255,255,.04));
}
.payment-journey-head,
.receipt-header-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.payment-journey-head strong,
.receipt-header-row h2 {
  display: block;
  font-size: 1.15rem;
  letter-spacing: -.03em;
  margin: 2px 0;
}
.payment-journey-head em {
  display: block;
  font-style: normal;
  color: var(--text-soft, #64748b);
  font-size: .84rem;
}
.checkout-summary-grid.mini {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-bottom: 8px;
}
.compact-actions {
  flex-wrap: wrap;
  gap: 8px;
}
.printable-receipt-card {
  max-width: 980px;
  margin-inline: auto;
}
.receipt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}
.receipt-grid > div,
.checkout-summary-grid > div {
  border: 1px solid var(--stroke-soft, rgba(148,163,184,.25));
  border-radius: 16px;
  padding: 12px 14px;
  background: var(--surface-soft, rgba(255,255,255,.035));
}
.receipt-grid span,
.checkout-summary-grid span {
  display: block;
  font-size: .78rem;
  color: var(--text-soft, #64748b);
  margin-bottom: 4px;
}
.receipt-grid strong,
.checkout-summary-grid strong {
  overflow-wrap: anywhere;
}
.receipt-note-box {
  margin-top: 16px;
  border: 1px dashed var(--stroke-soft, rgba(148,163,184,.35));
  border-radius: 18px;
  padding: 14px 16px;
  background: var(--surface-soft, rgba(255,255,255,.035));
}
.payment-support-layout {
  align-items: start;
}
.payment-support-search-card .content-filter-form {
  align-items: end;
}
.support-action-form {
  grid-template-columns: 1fr;
}
.support-refresh-form {
  margin-top: 12px;
}
.notice-card.warning {
  margin-top: 14px;
  border: 1px solid rgba(180,120,32,.25);
  border-radius: 18px;
  padding: 14px;
  background: rgba(180,120,32,.08);
}
.support-events-card {
  margin-top: 18px;
}
.empty-state.soft {
  border: 1px dashed var(--stroke-soft, rgba(148,163,184,.35));
  border-radius: 18px;
  padding: 18px;
  background: var(--surface-soft, rgba(255,255,255,.035));
}
@media (max-width: 1080px) {
  .payment-support-layout {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 768px) {
  .payment-journey-head,
  .receipt-header-row {
    flex-direction: column;
    align-items: stretch;
  }
  .payment-journey-item {
    padding: 14px;
  }
  .receipt-grid,
  .checkout-summary-grid.mini {
    grid-template-columns: 1fr;
  }
  .receipt-actions,
  .checkout-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .receipt-actions .primary-button,
  .receipt-actions .secondary-button,
  .checkout-actions .primary-button,
  .checkout-actions .secondary-button {
    width: 100%;
    justify-content: center;
  }
}
@media print {
  body * {
    visibility: hidden;
  }
  .printable-receipt-card,
  .printable-receipt-card * {
    visibility: visible;
  }
  .printable-receipt-card {
    position: absolute;
    inset: 0;
    box-shadow: none !important;
    border: 0 !important;
  }
  .receipt-actions {
    display: none !important;
  }
}

/* ============================================================
   LEARNING GAME MATERIALS
   ============================================================ */
.material-card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.material-card {
  position: relative;
  min-height: 220px;
}

.material-card-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}

.material-card .inline-action-form {
  position: absolute;
  top: 14px;
  right: 14px;
}

.icon-button.danger {
  border-color: rgba(180, 35, 24, 0.16);
  color: var(--danger);
  background: rgba(180, 35, 24, 0.06);
}

.icon-button.danger:hover {
  background: rgba(180, 35, 24, 0.12);
}

.detail-grid.material-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.detail-grid.material-detail-grid > div {
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid rgba(40, 32, 22, 0.08);
  border-radius: 18px;
  background: rgba(250, 247, 241, 0.66);
}

.detail-grid.material-detail-grid span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.detail-grid.material-detail-grid strong {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 0.98rem;
}

.material-file-box,
.material-upload-form .checkbox-line {
  margin-top: 16px;
}

.checkbox-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-weight: 750;
}

.button-row.stacked {
  align-items: stretch;
  flex-direction: column;
}

.button-row.stacked .primary-button {
  width: 100%;
  justify-content: center;
}

.danger-action {
  width: 100%;
  justify-content: center;
}

@media (max-width: 1080px) {
  .material-card-grid,
  .detail-grid.material-detail-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .material-card .inline-action-form {
    top: 12px;
    right: 12px;
  }

  .material-card {
    padding-right: 58px;
  }
}

/* ============================================================
   LEARNING GAME MATERIAL ANALYZER
   ============================================================ */
.material-card-actions {
  margin-top: 14px;
  gap: 8px;
}
.material-card-actions .primary-button {
  min-height: 38px;
  padding: 9px 12px;
  font-size: .82rem;
}
.material-map-actions {
  margin-top: 16px;
}
.material-source-notice {
  margin-bottom: 18px;
}
.material-map-workspace {
  align-items: start;
}
.material-map-form textarea[name="chapter_map_text"] {
  min-height: 280px;
  font-family: inherit;
  line-height: 1.55;
}
.analysis-status-box {
  border: 1px solid rgba(40, 32, 22, 0.08);
  border-radius: 18px;
  padding: 12px 14px;
  background: rgba(250, 247, 241, 0.66);
  margin-bottom: 10px;
}
.analysis-status-box span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.analysis-status-box strong {
  display: block;
  overflow-wrap: anywhere;
}
.material-chapter-list.detailed {
  gap: 12px;
}
.material-chapter-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  border: 1px solid rgba(40, 32, 22, 0.08);
  border-radius: 18px;
  padding: 14px;
  background: rgba(250, 247, 241, 0.58);
}
.material-chapter-row > strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 14px;
  background: rgba(127, 92, 48, 0.10);
  color: var(--text);
}
.material-chapter-row h3 {
  margin: 0 0 6px;
  font-size: 1rem;
}
.material-chapter-row p {
  margin: 4px 0 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}
@media (max-width: 768px) {
  .material-card-actions,
  .material-map-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .material-card-actions .primary-button,
  .material-map-actions .primary-button {
    width: 100%;
    justify-content: center;
  }
  .material-chapter-row {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   LEARNING GAME MANUAL PASTE FALLBACK
   ============================================================ */
.material-manual-workspace {
  align-items: start;
}
.material-manual-form textarea[name="manual_json"],
.readonly-copy-box {
  width: 100%;
  min-height: 360px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  line-height: 1.55;
  white-space: pre;
  overflow: auto;
}
.readonly-copy-box {
  min-height: 260px;
  border: 1px solid rgba(40, 32, 22, 0.10);
  border-radius: 18px;
  background: rgba(250, 247, 241, 0.66);
  color: var(--text);
  padding: 14px;
}
.manual-paste-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 16px 0;
  padding: 16px;
  border: 1px solid rgba(40, 32, 22, 0.08);
  border-radius: 20px;
  background: rgba(250, 247, 241, 0.60);
}
.manual-paste-note h3,
.manual-paste-note p {
  margin: 0;
}
.manual-paste-note h3 {
  margin-bottom: 5px;
  font-size: 1rem;
}
.full-width-action {
  width: 100%;
  justify-content: center;
}
.inline-action-form.plain {
  margin: 0;
}
@media (max-width: 768px) {
  .manual-paste-note {
    align-items: stretch;
    flex-direction: column;
  }
  .manual-paste-note .primary-button {
    width: 100%;
    justify-content: center;
  }
  .material-manual-form textarea[name="manual_json"],
  .readonly-copy-box {
    min-height: 280px;
  }
}


/* ============================================================
   LEARNING GAMES PASS 8 — UAT POLISH
   ============================================================ */
.learning-game-flow {
  margin-bottom: 18px;
}
.learning-game-flow .section-heading-row p {
  margin: 6px 0 0;
  color: var(--muted);
}
.flow-step-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.flow-step-card {
  display: grid;
  gap: 8px;
  min-height: 140px;
  padding: 16px;
  border: 1px solid rgba(40, 32, 22, 0.08);
  border-radius: 22px;
  background: rgba(250, 247, 241, 0.66);
  color: inherit;
  text-decoration: none;
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.flow-step-card:hover {
  transform: translateY(-2px);
  border-color: rgba(151, 116, 66, 0.28);
  box-shadow: 0 16px 34px rgba(34, 28, 20, 0.08);
}
.flow-step-card strong {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 14px;
  background: rgba(127, 92, 48, 0.11);
  color: var(--text);
}
.flow-step-card span {
  color: var(--text);
  font-weight: 900;
}
.flow-step-card em {
  color: var(--muted);
  font-style: normal;
  line-height: 1.45;
}
.game-chip.is-good {
  border-color: rgba(3, 152, 85, 0.20);
  background: rgba(3, 152, 85, 0.08);
  color: #047857;
}
.game-chip.is-warning {
  border-color: rgba(181, 117, 24, 0.20);
  background: rgba(181, 117, 24, 0.10);
  color: #92400e;
}
.soft-alert {
  margin: 12px 0 0;
  background: rgba(181, 117, 24, 0.08);
  color: #744210;
  border: 1px solid rgba(181, 117, 24, 0.18);
}
.uat-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.uat-check-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid rgba(40, 32, 22, 0.08);
  border-radius: 20px;
  background: rgba(250, 247, 241, 0.62);
}
.uat-check-card > strong {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 14px;
  background: rgba(127, 92, 48, 0.10);
}
.uat-check-card.is-green > strong {
  background: rgba(3, 152, 85, 0.10);
  color: #047857;
}
.uat-check-card.is-waiting > strong {
  background: rgba(181, 117, 24, 0.10);
  color: #92400e;
}
.uat-check-card h3,
.uat-check-card p {
  margin: 0;
}
.uat-check-card p {
  margin-top: 5px;
  color: var(--muted);
  line-height: 1.45;
}
.uat-script-list {
  display: grid;
  gap: 10px;
}
.uat-script-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(40, 32, 22, 0.08);
  border-radius: 20px;
  background: rgba(250, 247, 241, 0.58);
}
.uat-script-item > strong {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 14px;
  background: rgba(127, 92, 48, 0.10);
}
.uat-script-item span {
  line-height: 1.55;
}
@media (max-width: 1080px) {
  .flow-step-grid,
  .uat-check-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .flow-step-grid,
  .uat-check-grid {
    grid-template-columns: 1fr;
  }
  .flow-step-card,
  .uat-check-card,
  .uat-script-item {
    min-height: 0;
  }
  .learning-game-flow .section-heading-row {
    align-items: stretch;
    flex-direction: column;
  }
}

/* ============================================================
   HOMEWORK BUILDER PASS 3 — INTERACTIVE FOUNDATION
   ============================================================ */
.builder-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin: 24px 0 12px;
}
.builder-section-head h2,
.builder-section-head p {
  margin: 0;
}
.builder-section-head p {
  margin-top: 6px;
}
.homework-question-builder,
.homework-question-list {
  display: grid;
  gap: 14px;
}
.homework-question-card,
.homework-question-display-card,
.drawing-asset-card {
  border: 1px solid rgba(40, 32, 22, 0.08);
  border-radius: 22px;
  background: rgba(250, 247, 241, 0.62);
  padding: 16px;
}
.question-card-head,
.question-display-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.question-card-head strong,
.question-display-head strong {
  color: var(--text);
}
.question-display-head span {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(127, 92, 48, 0.10);
  color: var(--muted);
  font-size: .82rem;
  font-weight: 800;
  white-space: nowrap;
}
.homework-builder-payload,
.homework-answer-guide {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(40, 32, 22, 0.08);
  background: rgba(255, 255, 255, 0.42);
}
.homework-answer-guide {
  background: rgba(3, 152, 85, 0.07);
  border-color: rgba(3, 152, 85, 0.14);
}
.homework-builder-payload span,
.homework-answer-guide span {
  color: var(--muted);
  line-height: 1.5;
}
.drawing-studio-layout {
  align-items: start;
}
.drawing-preview-window,
.drawing-thumb {
  display: grid;
  place-items: center;
  min-height: 190px;
  overflow: hidden;
  border: 1px solid rgba(40, 32, 22, 0.08);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.52);
  padding: 12px;
}
.drawing-preview-window svg,
.drawing-thumb svg,
.homework-question-drawing svg {
  width: 100%;
  max-width: 420px;
  height: auto;
  display: block;
}
.homework-question-drawing {
  margin-top: 12px;
  min-height: 160px;
}
.drawing-rule-list {
  margin-top: 14px;
}
.drawing-library-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.drawing-asset-card {
  display: grid;
  gap: 12px;
}
.drawing-asset-card h3,
.drawing-asset-card p {
  margin: 0;
}
.drawing-asset-card p {
  margin-top: 4px;
  color: var(--muted);
}
.drawing-asset-card .drawing-thumb {
  min-height: 150px;
}
.homework-form textarea[name*="answer_guide"] {
  background: rgba(3, 152, 85, 0.05);
}
@media (max-width: 1080px) {
  .drawing-library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .builder-section-head {
    align-items: stretch;
    flex-direction: column;
  }
  .builder-section-head .secondary-button {
    width: 100%;
    justify-content: center;
  }
}
@media (max-width: 768px) {
  .drawing-library-grid {
    grid-template-columns: 1fr;
  }
  .question-card-head,
  .question-display-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .homework-question-card,
  .homework-question-display-card,
  .drawing-asset-card {
    border-radius: 18px;
    padding: 13px;
  }
  .drawing-preview-window,
  .drawing-thumb {
    min-height: 150px;
  }
}

/* Pass 4 — homework question runtime */
.homework-choice-preview,
.homework-matching-preview,
.answer-options,
.matching-answer-list,
.question-response-review-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.choice-line,
.matching-line,
.answer-option-line,
.matching-answer-line,
.question-response-review-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(40, 32, 22, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.46);
  padding: 10px 12px;
}

.matching-line,
.matching-answer-line {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.answer-option-line {
  cursor: pointer;
}

.answer-option-line input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.matching-answer-line select {
  min-width: 0;
  width: 100%;
}

.student-answer-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--panel-soft);
  padding: 16px;
}

.homework-question-answer-form {
  gap: 16px;
}

.question-response-review-row {
  grid-template-columns: 140px minmax(0, 1fr) auto;
  align-items: start;
}

.question-response-review-row span {
  color: var(--muted);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.question-response-review-row em {
  font-style: normal;
  font-weight: 900;
  color: var(--accent-dark);
  white-space: nowrap;
}

@media (max-width: 768px) {
  .matching-line,
  .matching-answer-line,
  .question-response-review-row {
    grid-template-columns: 1fr;
  }
  .choice-line,
  .answer-option-line {
    grid-template-columns: auto minmax(0, 1fr);
  }
}

/* Pass 5 — Drawing Studio upgrade */
.drawing-tool-row,
.drawing-form-actions,
.drawing-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.drawing-form-actions .primary-button,
.drawing-form-actions .secondary-button {
  min-height: 42px;
}
.drawing-form-actions .secondary-button:disabled {
  opacity: .46;
  cursor: not-allowed;
}
.drawing-preset-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.drawing-preset-card {
  display: grid;
  gap: 8px;
  min-height: 92px;
  padding: 14px;
  border: 1px solid rgba(40, 32, 22, 0.10);
  border-radius: 20px;
  background: rgba(250, 247, 241, 0.62);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.drawing-preset-card:hover {
  border-color: rgba(127, 92, 48, 0.28);
  transform: translateY(-1px);
}
.drawing-preset-card span {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.drawing-preset-card strong {
  font-size: .96rem;
  line-height: 1.3;
}
.drawing-asset-card .small-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(127, 92, 48, 0.10);
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
  white-space: nowrap;
}
@media (max-width: 1080px) {
  .drawing-preset-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .drawing-preset-grid {
    grid-template-columns: 1fr;
  }
  .drawing-tool-row,
  .drawing-form-actions,
  .drawing-card-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .drawing-tool-row .secondary-button,
  .drawing-form-actions .primary-button,
  .drawing-form-actions .secondary-button,
  .drawing-card-actions .secondary-button {
    width: 100%;
    justify-content: center;
  }
  .drawing-asset-card .small-pill {
    white-space: normal;
  }
}

/* Pass 6 — Subject preset diagram library */
.drawing-preset-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 14px 0 16px;
}
.preset-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  border: 1px solid rgba(40, 32, 22, 0.10);
  border-radius: 999px;
  background: rgba(250, 247, 241, 0.72);
  color: var(--text);
  padding: 9px 13px;
  font-size: .88rem;
  font-weight: 900;
  cursor: pointer;
}
.preset-filter-pill span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  border-radius: 999px;
  background: rgba(127, 92, 48, 0.11);
  color: var(--muted);
  font-size: .76rem;
}
.preset-filter-pill.is-active,
.preset-filter-pill:hover {
  border-color: rgba(127, 92, 48, 0.30);
  background: rgba(127, 92, 48, 0.10);
}
.drawing-preset-card[hidden] {
  display: none !important;
}
@media (max-width: 768px) {
  .drawing-preset-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .preset-filter-pill {
    width: 100%;
    justify-content: space-between;
  }
}

/* Pass 7 — drawing-based homework questions */
.drawing-task-mode-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  border: 1px solid rgba(127, 92, 48, 0.22);
  border-radius: 999px;
  background: rgba(127, 92, 48, 0.10);
  color: var(--accent-dark);
  padding: 7px 11px;
  font-size: .82rem;
  font-weight: 900;
  margin: 8px 0;
}
.drawing-question-frame {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(40, 32, 22, 0.10);
  border-radius: 22px;
  background: rgba(250, 247, 241, 0.68);
  padding: 12px;
  margin-top: 12px;
  overflow: hidden;
}
.drawing-question-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.drawing-question-toolbar span {
  color: var(--muted);
  font-size: .76rem;
  text-transform: none;
  letter-spacing: 0;
}
.drawing-question-frame .homework-question-drawing {
  margin: 0;
  background: rgba(255, 255, 255, 0.52);
}
.student-answer-card .homework-builder-payload {
  margin-top: 0;
}
@media (max-width: 768px) {
  .drawing-question-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
  .drawing-task-mode-pill {
    white-space: normal;
  }
}

/* Pass 8 — homework upload and photo submission */
.homework-upload-field {
  display: grid;
  gap: 8px;
}
.homework-upload-field input[type="file"] {
  width: 100%;
  min-height: 46px;
  border: 1px dashed rgba(127, 92, 48, 0.28);
  border-radius: 18px;
  background: rgba(250, 247, 241, 0.70);
  padding: 10px 12px;
  color: var(--text);
}
.homework-upload-field small {
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.45;
}
.homework-attachment-card {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
  padding: 12px;
  border: 1px solid rgba(40, 32, 22, 0.10);
  border-radius: 20px;
  background: rgba(250, 247, 241, 0.72);
}
.homework-attachment-card strong {
  color: var(--accent-dark);
  font-weight: 900;
  white-space: nowrap;
}
.homework-attachment-card span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.homework-attachment-card.compact {
  margin: 10px 0;
  padding: 10px;
}
.mini-file-link {
  width: fit-content;
  min-height: 34px;
  padding: 7px 10px;
  font-size: .82rem;
}
@media (max-width: 768px) {
  .homework-attachment-card {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .homework-attachment-card strong,
  .homework-attachment-card span {
    white-space: normal;
  }
  .homework-attachment-card .secondary-button {
    width: 100%;
    justify-content: center;
  }
}

/* Pass 9 — premium/free access and admin targeting */
.homework-target-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0 16px;
}
.target-mode-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: flex-start;
  gap: 10px;
  border: 1px solid rgba(40, 32, 22, 0.12);
  border-radius: 22px;
  background: rgba(250, 247, 241, 0.70);
  padding: 13px;
  cursor: pointer;
}
.target-mode-card input {
  margin-top: 4px;
  accent-color: var(--accent);
}
.target-mode-card strong,
.target-mode-card em {
  display: block;
}
.target-mode-card strong {
  color: var(--text);
  font-weight: 900;
}
.target-mode-card em {
  color: var(--muted);
  font-style: normal;
  font-size: .84rem;
  line-height: 1.45;
  margin-top: 3px;
}
.target-mode-card:has(input:checked) {
  border-color: rgba(127, 92, 48, 0.34);
  background: rgba(127, 92, 48, 0.10);
}
.homework-access-alert {
  margin: 14px 0;
}
.premium-locked-card {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(127, 92, 48, 0.22);
  border-radius: 22px;
  background: rgba(250, 247, 241, 0.76);
  padding: 16px;
  margin: 12px 0;
}
.premium-locked-card strong,
.premium-locked-card h2 {
  color: var(--accent-dark);
  margin: 0;
}
.premium-locked-card p {
  color: var(--muted);
  margin: 0;
  line-height: 1.55;
}
.premium-homework-row .homework-title-cell strong::after {
  content: "Premium";
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  border: 1px solid rgba(127, 92, 48, 0.22);
  border-radius: 999px;
  padding: 3px 8px;
  color: var(--accent-dark);
  font-size: .68rem;
  font-weight: 900;
  vertical-align: middle;
}
.tiny-muted {
  display: block;
  color: var(--muted);
  font-size: .76rem;
  margin-top: 4px;
}
.homework-create-layout select[multiple] {
  min-height: 150px;
  padding: 10px;
}
@media (max-width: 900px) {
  .homework-target-mode-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .target-mode-card {
    border-radius: 18px;
  }
  .homework-create-layout select[multiple] {
    min-height: 170px;
  }
}

/* Pass 10 — Homework runtime, marking and parent visibility */
.homework-progress-panel,
.homework-marking-summary,
.parent-homework-status-grid,
.homework-mini-metrics {
  display: grid;
  gap: 12px;
}
.homework-progress-panel {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 16px 0 18px;
}
.manager-progress-panel {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.homework-progress-panel > div,
.homework-marking-summary > span,
.parent-homework-status-card {
  border: 1px solid rgba(127, 92, 48, 0.16);
  border-radius: 20px;
  background: rgba(250, 247, 241, 0.72);
  padding: 14px;
  box-shadow: 0 12px 30px rgba(42, 32, 23, 0.05);
}
.homework-progress-panel strong,
.homework-marking-summary strong,
.parent-homework-status-card h3 {
  color: var(--text);
  margin: 0;
}
.homework-progress-panel strong {
  display: block;
  font-size: 1.35rem;
  line-height: 1.15;
  margin-top: 4px;
}
.homework-progress-panel p,
.parent-homework-status-card p {
  margin: 5px 0 0;
  color: var(--muted);
  line-height: 1.45;
}
.mini-label {
  display: block;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.homework-marking-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 4px 0 18px;
}
.homework-marking-summary span {
  color: var(--muted);
  font-size: .9rem;
}
.homework-marking-summary strong {
  display: block;
  font-size: 1.2rem;
}
.parent-homework-status-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 12px 0 4px;
}
.parent-homework-status-card {
  display: grid;
  gap: 12px;
}
.homework-mini-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.homework-mini-metrics span {
  border: 1px solid rgba(127, 92, 48, 0.14);
  border-radius: 999px;
  padding: 7px 10px;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 750;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.homework-feedback-box.compact {
  margin: 0;
  padding: 12px;
}
@media (max-width: 1080px) {
  .manager-progress-panel,
  .homework-marking-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .parent-homework-status-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .homework-progress-panel,
  .manager-progress-panel,
  .homework-marking-summary,
  .homework-mini-metrics {
    grid-template-columns: 1fr;
  }
  .homework-progress-panel > div,
  .homework-marking-summary > span,
  .parent-homework-status-card {
    border-radius: 18px;
  }
}

/* Pass 12 — student drawing annotations and per-question marking */
.drawing-annotation-workspace {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(40, 32, 22, 0.10);
  border-radius: 22px;
  background: rgba(250, 247, 241, 0.72);
  padding: 12px;
}
.drawing-annotation-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.drawing-annotation-head strong {
  color: var(--text);
  font-weight: 900;
}
.drawing-annotation-head span {
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.45;
}
.drawing-annotation-canvas {
  position: relative;
  min-height: 190px;
  border-radius: 20px;
  overflow: hidden;
  cursor: crosshair;
}
.drawing-annotation-canvas .homework-question-drawing {
  pointer-events: none;
}
.drawing-annotation-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.drawing-annotation-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  background: var(--accent, #7f5c30);
  color: #fff;
  font-size: .82rem;
  font-weight: 900;
  box-shadow: 0 12px 26px rgba(40, 32, 22, 0.18);
  pointer-events: auto;
  cursor: pointer;
}
.drawing-annotation-list,
.parent-question-result-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.drawing-annotation-list span,
.parent-question-result-list span,
.question-feedback-note {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  border: 1px solid rgba(127, 92, 48, 0.18);
  border-radius: 999px;
  background: rgba(127, 92, 48, 0.09);
  color: var(--muted);
  padding: 6px 10px;
  font-size: .8rem;
  font-weight: 800;
  line-height: 1.35;
}
.question-feedback-note {
  grid-column: 1 / -1;
  border-radius: 14px;
  white-space: normal;
}
.per-question-mark-grid,
.homework-return-form {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}
.per-question-mark-row {
  display: grid;
  grid-template-columns: minmax(150px, .8fr) minmax(130px, .5fr) minmax(180px, 1fr);
  gap: 10px;
  align-items: end;
  border: 1px solid rgba(40, 32, 22, 0.10);
  border-radius: 18px;
  background: rgba(250, 247, 241, 0.62);
  padding: 12px;
}
.per-question-mark-row strong {
  color: var(--text);
  font-weight: 900;
  align-self: center;
}
@media (max-width: 900px) {
  .per-question-mark-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
}
@media (max-width: 768px) {
  .drawing-annotation-head {
    flex-direction: column;
  }
  .drawing-annotation-marker {
    width: 34px;
    height: 34px;
  }
}

/* Pass 13 — homework/test runtime polish */
.homework-student-status-row,
.answer-progress-line,
.homework-filter-row,
.submission-timeline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.homework-student-status-row,
.answer-progress-line {
  margin: 8px 0 12px;
}
.homework-student-status-row span,
.answer-progress-line span,
.filter-result-note {
  color: var(--muted);
  font-size: .84rem;
  font-weight: 750;
}
.status-pill.submitted,
.status-pill.marked {
  border-color: rgba(48, 127, 77, .22);
  background: rgba(48, 127, 77, .10);
  color: #2f7f4d;
}
.status-pill.late {
  border-color: rgba(170, 97, 24, .24);
  background: rgba(170, 97, 24, .10);
  color: #9a5717;
}
.status-pill.returned {
  border-color: rgba(127, 92, 48, .22);
  background: rgba(127, 92, 48, .11);
  color: var(--accent-dark);
}
.status-pill.neutral {
  border-color: var(--line);
  background: var(--panel-soft);
  color: var(--muted);
}
.homework-filter-row {
  margin: 14px 0 8px;
}
.filter-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: .84rem;
  font-weight: 900;
  text-decoration: none;
  transition: all var(--transition-fast);
}
.filter-pill:hover,
.filter-pill.active {
  transform: translateY(-1px);
  border-color: rgba(127, 92, 48, .28);
  background: var(--accent-soft);
  color: var(--accent-dark);
}
.filter-result-note {
  margin: 0 0 12px;
}
.submission-timeline {
  align-items: stretch;
}
.submission-timeline span,
.submission-score-line {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  max-width: 100%;
  border: 1px solid rgba(40, 32, 22, .10);
  border-radius: 999px;
  background: rgba(250, 247, 241, .72);
  color: var(--muted);
  padding: 6px 10px;
  font-size: .8rem;
  font-weight: 800;
  line-height: 1.35;
}
.submission-timeline strong,
.submission-score-line {
  color: var(--text);
}
.submission-score-line {
  justify-self: start;
  color: var(--accent-dark);
  background: rgba(127, 92, 48, .09);
  border-color: rgba(127, 92, 48, .18);
}
.question-response-review-row {
  overflow-wrap: anywhere;
}
@media (max-width: 768px) {
  .homework-filter-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }
  .filter-pill {
    flex: 0 0 auto;
  }
  .submission-timeline span,
  .submission-score-line {
    border-radius: 16px;
    white-space: normal;
  }
}

/* Pass 14 — Homework index and dashboard entry polish */
.homework-index-title-row {
  align-items: center;
}
.homework-index-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 18px;
}
.homework-index-toolbar .homework-filter-form {
  grid-template-columns: minmax(220px, 1.3fr) repeat(3, minmax(150px, 1fr)) auto;
  align-items: end;
}
.homework-queue-row {
  margin: 2px 0 10px;
}
.homework-index-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 14px;
}
.homework-index-card {
  display: grid;
  gap: 13px;
  border-radius: 24px;
  overflow: hidden;
}
.homework-index-card.is-premium {
  border-color: rgba(127, 92, 48, .24);
  background: rgba(250, 247, 241, .96);
}
.homework-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.homework-card-head h2 {
  margin: 4px 0 0;
  color: var(--text);
  font-size: clamp(1rem, 1.8vw, 1.22rem);
  line-height: 1.25;
}
.homework-card-note {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}
.homework-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.homework-card-meta span {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  border: 1px solid rgba(40, 32, 22, .10);
  border-radius: 999px;
  background: rgba(250, 247, 241, .74);
  color: var(--muted);
  padding: 7px 10px;
  font-size: .82rem;
  font-weight: 780;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.homework-card-meta strong {
  color: var(--text);
  margin-right: 4px;
}
.homework-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}
.homework-empty-card {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  justify-items: start;
}
.homework-empty-card h2 {
  margin: 0;
  color: var(--text);
}
.homework-empty-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}
@media (max-width: 1080px) {
  .homework-index-metrics,
  .homework-index-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .homework-index-toolbar .homework-filter-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .homework-index-metrics,
  .homework-index-grid,
  .homework-index-toolbar .homework-filter-form {
    grid-template-columns: 1fr;
  }
  .homework-card-head {
    flex-direction: column;
  }
  .homework-card-meta span {
    width: 100%;
    border-radius: 16px;
  }
  .homework-card-actions .secondary-button,
  .homework-card-actions .primary-button {
    width: 100%;
    justify-content: center;
  }
}

/* Pass 15 — homework navigation and final UAT stabilization */
.homework-shortcut-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}
.homework-shortcut-card {
  display: grid;
  gap: 6px;
  min-height: 118px;
  padding: 15px;
  border: 1px solid rgba(40, 32, 22, .10);
  border-radius: 22px;
  background: rgba(250, 247, 241, .82);
  color: var(--text);
  text-decoration: none;
  box-shadow: 0 14px 34px rgba(42, 32, 23, .06);
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.homework-shortcut-card:hover {
  transform: translateY(-2px);
  border-color: rgba(127, 92, 48, .26);
  background: rgba(250, 247, 241, .96);
}
.homework-shortcut-card span {
  width: fit-content;
  border: 1px solid rgba(127, 92, 48, .18);
  border-radius: 999px;
  background: rgba(127, 92, 48, .08);
  color: var(--accent-dark);
  padding: 5px 9px;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .02em;
}
.homework-shortcut-card strong {
  color: var(--text);
  font-size: 1rem;
  line-height: 1.25;
}
.homework-shortcut-card em {
  color: var(--muted);
  font-style: normal;
  font-size: .85rem;
  line-height: 1.45;
}
.premium-locked-card .button-row {
  margin-top: 12px;
}
@media (max-width: 1080px) {
  .homework-shortcut-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .homework-shortcut-strip {
    grid-template-columns: 1fr;
  }
  .homework-shortcut-card {
    min-height: auto;
    border-radius: 20px;
  }
}


/* Pass 6 — Homework/Test mobile + theme verification */
.exam-create-layout,
.exam-view-layout,
.homework-create-layout,
.homework-view-layout,
.homework-submission-grid,
.result-answer-grid,
.exam-question-picker,
.exam-taking-list,
.exam-result-list,
.homework-question-builder,
.homework-question-list,
.homework-drawing-picker,
.drawing-library-grid {
  min-width: 0;
}

.exam-question-choice,
.exam-answer-option,
.exam-preview-question,
.exam-take-card,
.result-question-card,
.homework-question-card,
.homework-question-display-card,
.student-answer-card,
.homework-mark-card,
.homework-index-card,
.drawing-asset-card,
.drawing-preset-card,
.homework-drawing-choice {
  min-width: 0;
  overflow-wrap: anywhere;
}

.exam-question-choice em,
.exam-question-choice strong,
.exam-answer-option span,
.exam-preview-question p,
.exam-take-card h2,
.result-question-card h2,
.result-answer-grid strong,
.homework-title-cell strong,
.homework-card-note,
.homework-builder-payload span,
.homework-answer-guide span,
.question-response-review-row span,
.homework-drawing-choice span,
.homework-drawing-choice small {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.homework-title-cell {
  min-width: min(280px, 100%);
}

.exam-submit-bar,
.homework-submit-card,
.homework-mark-form,
.homework-return-form {
  max-width: 100%;
}

.homework-submission-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.homework-drawing-picker {
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
}

.homework-drawing-choice {
  min-height: 0;
}

.homework-drawing-choice > span:first-child {
  min-height: 74px;
  display: grid;
  place-items: center;
}

@media (max-width: 1080px) {
  .exam-create-layout,
  .exam-view-layout,
  .homework-create-layout,
  .homework-view-layout,
  .drawing-studio-layout {
    grid-template-columns: 1fr !important;
  }

  .exam-help-card,
  .exam-side-card,
  .homework-help-card,
  .homework-side-card,
  .qb-side-summary {
    position: static !important;
    top: auto !important;
  }

  .homework-submission-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .exam-filter-form,
  .homework-filter-form,
  .homework-index-toolbar .homework-filter-form {
    grid-template-columns: 1fr !important;
  }

  .exam-preview-head,
  .homework-card-head,
  .question-card-head,
  .question-display-head {
    display: grid !important;
    grid-template-columns: 1fr;
    align-items: start !important;
  }

  .exam-preview-head em {
    margin-left: 0;
  }

  .exam-answer-option,
  .exam-question-choice,
  .choice-line,
  .answer-option-line {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .matching-line,
  .matching-answer-line,
  .question-response-review-row,
  .result-answer-grid,
  .homework-target-mode-grid {
    grid-template-columns: 1fr !important;
  }

  .exam-submit-bar {
    position: static;
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 12px;
  }

  .exam-submit-bar .primary-button,
  .homework-submit-card .primary-button,
  .homework-mark-form .primary-button,
  .homework-return-form .secondary-button {
    width: 100%;
    justify-content: center;
  }

  .homework-card-actions,
  .drawing-card-actions,
  .drawing-form-actions,
  .drawing-tool-row {
    align-items: stretch;
  }

  .homework-card-actions > *,
  .drawing-card-actions > *,
  .drawing-form-actions > *,
  .drawing-tool-row > * {
    width: 100%;
    justify-content: center;
  }

  .homework-card-meta span,
  .homework-meta-row span,
  .homework-student-status-row span,
  .submission-timeline span,
  .submission-score-line {
    white-space: normal;
    width: 100%;
  }

  .homework-drawing-picker,
  .drawing-library-grid,
  .drawing-preset-grid {
    grid-template-columns: 1fr !important;
  }

  .homework-drawing-choice > span:first-child {
    min-height: 92px;
  }
}

@media (max-width: 520px) {
  .exam-preview-question,
  .exam-take-card,
  .result-question-card,
  .homework-question-card,
  .homework-question-display-card,
  .student-answer-card,
  .homework-mark-card,
  .homework-index-card,
  .drawing-asset-card,
  .drawing-preset-card {
    border-radius: 16px;
    padding: 13px;
  }

  .exam-answer-option,
  .exam-question-choice,
  .choice-line,
  .answer-option-line,
  .matching-line,
  .matching-answer-line,
  .question-response-review-row {
    border-radius: 14px;
    padding: 10px;
  }

  .exam-answer-option span {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
  }

  .exam-answer-option span strong {
    min-width: 28px;
    height: 28px;
    border-radius: 10px;
  }

  .homework-title-cell {
    min-width: 220px;
  }

  .drawing-preview-window,
  .drawing-thumb,
  .homework-question-drawing {
    min-height: 120px;
  }
}

/* ============================================================
   PASS 9 — Login and public registration polish
   ============================================================ */
.auth-gateway-body,
.auth-registration-body,
.registration-form-body {
  background: var(--bg);
}

.auth-gateway-shell {
  width: min(1160px, 100%);
  align-items: stretch;
}

.auth-gateway-intro,
.auth-gateway-card,
.auth-choice-card,
.auth-return-card,
.registration-form-card {
  border-color: rgba(209, 195, 176, 0.92);
}

.auth-gateway-intro {
  position: relative;
  overflow: hidden;
}

.auth-gateway-intro::after {
  content: "";
  position: absolute;
  inset: auto -80px -90px auto;
  width: 220px;
  height: 220px;
  border: 1px solid rgba(138, 90, 18, 0.14);
  border-radius: 44px;
  transform: rotate(18deg);
  pointer-events: none;
}

.auth-hero-copy {
  position: relative;
  z-index: 1;
}

.auth-hero-copy h1 {
  margin-top: 0;
}

.auth-gateway-card {
  display: grid;
  align-content: center;
}

.auth-form-title p:last-child {
  margin: 0;
  font-size: 0.95rem;
}

.auth-login-form {
  gap: 16px;
}

.auth-submit-button {
  width: 100%;
  min-height: 50px;
}

.password-control {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}

.password-control input {
  min-width: 0;
}

.password-toggle {
  border: 1px solid var(--line);
  background: var(--panel-soft);
  color: var(--accent-dark);
  min-height: 48px;
  padding: 0 14px;
  border-radius: 14px;
  font-weight: 900;
  cursor: pointer;
}

.auth-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  height: 1px;
  background: var(--line);
}

.auth-register-options {
  display: grid;
  gap: 10px;
}

.auth-register-options a {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel-soft);
  padding: 12px 14px;
  transition: transform var(--transition-fast), border-color var(--transition-base), background-color var(--transition-base);
}

.auth-register-options a:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  background: var(--accent-soft);
}

.auth-register-options strong {
  color: var(--accent-dark);
}

.auth-register-options span {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 760;
}

.auth-signal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
  position: relative;
  z-index: 1;
}

.auth-signal-grid span {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  padding: 11px 12px;
  color: var(--accent-dark);
  font-size: 0.82rem;
  font-weight: 900;
  text-align: center;
}

.auth-registration-shell {
  width: min(1240px, 100%);
}

.auth-choice-grid {
  align-content: stretch;
}

.auth-choice-card,
.auth-return-card {
  min-height: 230px;
}

.auth-choice-card small {
  margin-top: 12px;
}

.auth-return-card .secondary-button {
  width: 100%;
}

.auth-flow-preview > div {
  background: rgba(255, 255, 255, 0.74);
}

.auth-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.registration-form-card .alert {
  margin-bottom: 16px;
}

.registration-form-card input,
.registration-form-card select,
.registration-form-card textarea,
.auth-gateway-card input {
  background: #fffdf8;
}

.registration-form-card input[type="file"] {
  background: var(--panel-soft);
}

.registration-form-card .field-help,
.registration-form-card .registration-file-box em {
  padding-left: 2px;
}

@media (max-width: 1080px) {
  .auth-gateway-shell {
    grid-template-columns: 1fr;
  }

  .auth-gateway-intro {
    min-height: auto;
  }

  .auth-gateway-card {
    align-content: stretch;
  }

  .auth-signal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .auth-gateway-body,
  .auth-registration-body,
  .registration-form-body {
    padding: 14px;
  }

  .auth-gateway-shell,
  .auth-registration-shell,
  .registration-form-shell,
  .registration-form-shell.wide {
    width: 100%;
  }

  .auth-gateway-intro,
  .auth-gateway-card,
  .auth-choice-card,
  .auth-return-card,
  .registration-form-card {
    border-radius: 22px;
  }

  .auth-signal-grid {
    grid-template-columns: 1fr;
  }

  .auth-register-options a {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .password-control {
    grid-template-columns: 1fr;
  }

  .password-toggle {
    width: 100%;
  }

  .registration-form-card input,
  .registration-form-card select,
  .registration-form-card textarea,
  .auth-gateway-card input {
    font-size: 16px;
  }
}

@media (max-width: 430px) {
  .auth-gateway-body,
  .auth-registration-body,
  .registration-form-body {
    padding: 10px;
  }

  .auth-gateway-intro,
  .auth-gateway-card,
  .registration-form-card {
    padding: 18px;
  }

  .auth-hero-copy h1,
  .registration-intro h1 {
    font-size: clamp(2rem, 13vw, 3rem);
  }

  .registration-choice-card strong {
    margin-top: 18px;
  }
}

/* Syllabus setup workspace */
.syllabus-hero { margin-bottom: 20px; }
.syllabus-metric-grid { margin-bottom: 22px; }
.syllabus-forms-grid { align-items: flex-start; }
.syllabus-forms-grid textarea {
  min-height: 96px;
  resize: vertical;
  line-height: 1.55;
}
.syllabus-readiness-card { max-width: 840px; }
.syllabus-table-card { margin-top: 22px; }
.syllabus-outcome-cell {
  min-width: 260px;
  max-width: 420px;
  white-space: normal;
  line-height: 1.45;
}
.inline-status-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 220px;
}
.compact-select {
  min-width: 130px;
  max-width: 180px;
}
.compact-action {
  padding: 8px 12px;
  min-height: 36px;
}
.status-pill.status-active,
.status-pill.active,
.status-pill.success {
  border-color: rgba(46, 125, 74, .32);
  color: #2e7d4a;
}
.status-pill.status-draft,
.status-pill.draft,
.status-pill.warning {
  border-color: rgba(180, 120, 32, .34);
  color: #9a5b00;
}
.status-pill.status-inactive,
.status-pill.inactive,
.status-pill.status-archived,
.status-pill.archived,
.status-pill.muted {
  border-color: var(--stroke-soft, rgba(148, 163, 184, .28));
  color: var(--text-muted, #64748b);
}
.syllabus-quick-tray a { white-space: normal; }
@media (max-width: 1080px) {
  .syllabus-forms-grid { grid-template-columns: 1fr; }
  .inline-status-form { min-width: 0; }
}
@media (max-width: 768px) {
  .syllabus-outcome-cell { min-width: 220px; }
  .inline-status-form {
    align-items: stretch;
    flex-direction: column;
  }
  .inline-status-form .form-select,
  .inline-status-form button {
    width: 100%;
    max-width: none;
  }
}

/* Syllabus Coverage Gate — Pass 3 teacher lesson plan workflow */
.lesson-plan-workspace .hero-actions,
.lesson-plan-actions,
.lesson-plan-actions-bar,
.lesson-plan-filter-form {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.lesson-plan-metrics {
    margin-bottom: 1.25rem;
}

.lesson-plan-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lesson-plan-form-grid .span-2,
.lesson-plan-form .span-2 {
    grid-column: 1 / -1;
}

.syllabus-picker-card {
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 22px;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.18);
}

.syllabus-picker-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.syllabus-picker-head span {
    display: block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.72;
}

.syllabus-picker-head strong {
    display: block;
    margin-top: 0.2rem;
}

.syllabus-picker-head input {
    max-width: 320px;
}

.syllabus-checkbox-list {
    display: grid;
    gap: 0.65rem;
    max-height: min(54vh, 520px);
    overflow: auto;
    padding-right: 0.25rem;
}

.syllabus-check-row {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.7rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.035);
    cursor: pointer;
}

.syllabus-check-row input {
    width: 1.05rem;
    height: 1.05rem;
    margin-top: 0.18rem;
}

.syllabus-check-row strong,
.syllabus-check-row em {
    display: block;
}

.syllabus-check-row em,
.lesson-plan-syllabus-cell span,
.lesson-plan-table td span {
    opacity: 0.72;
    font-size: 0.88rem;
    line-height: 1.45;
}

.lesson-plan-table td {
    vertical-align: top;
}

.lesson-plan-table .table-actions {
    min-width: 130px;
}

.icon-only-delete {
    width: 2.35rem;
    min-width: 2.35rem;
    padding-inline: 0;
    text-align: center;
}

.lesson-plan-rule-card,
.lesson-plan-empty-card {
    margin-top: 1rem;
}

@media (max-width: 860px) {
    .lesson-plan-form-grid {
        grid-template-columns: 1fr;
    }

    .syllabus-picker-head {
        align-items: stretch;
        flex-direction: column;
    }

    .syllabus-picker-head input {
        max-width: none;
        width: 100%;
    }

    .lesson-plan-filter-form,
    .lesson-plan-actions-bar,
    .lesson-plan-workspace .hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .lesson-plan-filter-form > *,
    .lesson-plan-actions-bar > *,
    .lesson-plan-workspace .hero-actions > * {
        width: 100%;
    }
}

/* Syllabus coverage review — Pass 4 */
.lesson-review-workspace,
.syllabus-coverage-workspace {
    display: grid;
    gap: 1rem;
}

.coverage-card-stack {
    display: grid;
    gap: 0.9rem;
}

.coverage-review-card {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 22px;
    background: rgba(15, 23, 42, 0.18);
}

.coverage-review-main h3 {
    margin: 0.45rem 0 0.25rem;
    font-size: 1.05rem;
}

.coverage-review-main p,
.review-note {
    margin: 0.2rem 0 0;
    line-height: 1.55;
}

.review-note {
    padding: 0.7rem 0.8rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.035);
}

.coverage-submit-form,
.review-action-form {
    display: grid;
    gap: 0.65rem;
}

.coverage-mini-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: end;
}

.review-actions-cell {
    min-width: 260px;
}

.review-action-form textarea {
    width: 100%;
    min-height: 4.4rem;
    resize: vertical;
}

.mini-action {
    padding: 0.55rem 0.75rem;
    min-height: 2.35rem;
}

@media (max-width: 980px) {
    .coverage-mini-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .coverage-mini-grid {
        grid-template-columns: 1fr;
    }

    .review-actions-cell {
        min-width: 220px;
    }

    .review-action-form .table-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .review-action-form .table-actions > * {
        width: 100%;
    }
}

/* Syllabus Coverage Gate — Pass 6 dashboard, audit and polish */
.syllabus-gate-panel,
.syllabus-audit-card,
.teacher-unlock-actions {
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 24px;
    background: rgba(15, 23, 42, 0.12);
}

.syllabus-gate-grid {
    display: grid;
    grid-template-columns: minmax(120px, 170px) minmax(0, 1fr);
    gap: 1rem;
    align-items: stretch;
}

.gate-progress-ring {
    display: grid;
    place-items: center;
    align-content: center;
    min-height: 150px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    text-align: center;
}

.gate-progress-ring strong {
    display: block;
    font-size: clamp(2rem, 6vw, 3.3rem);
    line-height: 1;
}

.gate-progress-ring span,
.syllabus-gate-mini span,
.audit-event-line em {
    opacity: 0.72;
    font-size: 0.86rem;
}

.gate-status-stack {
    display: grid;
    gap: 0.65rem;
}

.syllabus-gate-mini {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
    margin-top: 1rem;
}

.syllabus-gate-mini > div {
    padding: 0.9rem;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.035);
}

.syllabus-gate-mini strong {
    display: block;
    margin-top: 0.25rem;
    font-size: 1.35rem;
}

.audit-event-stack {
    margin-top: 0.7rem;
}

.audit-event-line {
    align-items: flex-start;
}

.audit-event-line strong {
    width: 1.8rem;
    min-width: 1.8rem;
}

.teacher-unlock-actions .lesson-plan-actions-bar {
    justify-content: flex-end;
}

@media (max-width: 900px) {
    .syllabus-gate-grid,
    .syllabus-gate-mini {
        grid-template-columns: 1fr;
    }

    .gate-progress-ring {
        min-height: 130px;
        max-width: 220px;
        margin-inline: auto;
        width: 100%;
    }

    .teacher-unlock-actions .lesson-plan-actions-bar,
    .syllabus-gate-panel .lesson-plan-actions-bar {
        justify-content: stretch;
    }
}

@media (max-width: 640px) {
    .syllabus-gate-panel .section-head,
    .teacher-unlock-actions .section-head,
    .syllabus-audit-card .section-head {
        align-items: stretch;
        flex-direction: column;
    }

    .teacher-unlock-actions .lesson-plan-actions-bar > *,
    .syllabus-gate-panel .lesson-plan-actions-bar > * {
        width: 100%;
    }
}

/* Syllabus Coverage Gate — Pass 8 seal polish */
.syllabus-seal-card {
  margin: 0 0 1.25rem;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 24px;
  background: rgba(15, 23, 42, 0.12);
}

.syllabus-seal-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 0.9rem;
}

.syllabus-seal-steps-five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.seal-step {
  display: grid;
  gap: 0.28rem;
  min-height: 118px;
  padding: 0.95rem;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.035);
}

.seal-step strong {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  font-size: 0.95rem;
}

.seal-step span {
  font-weight: 800;
  line-height: 1.35;
}

.seal-step em,
.review-note-inline,
.syllabus-seal-note {
  color: var(--text-muted, #64748b);
  font-size: 0.88rem;
  line-height: 1.5;
}

.seal-step.is-ready {
  border-color: rgba(46, 125, 74, .30);
}

.seal-step.is-ready strong {
  border-color: rgba(46, 125, 74, .32);
  color: #2e7d4a;
}

.syllabus-seal-note {
  margin-top: 0.85rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.035);
}

.is-soft-disabled {
  opacity: 0.64;
}

.lesson-plan-table .review-note-inline {
  display: inline-block;
  max-width: 260px;
  margin-top: 0.28rem;
  white-space: normal;
}

@media (max-width: 1080px) {
  .syllabus-seal-steps,
  .syllabus-seal-steps-five {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .syllabus-seal-steps,
  .syllabus-seal-steps-five {
    grid-template-columns: 1fr;
  }

  .syllabus-seal-card .section-head,
  .review-seal-card .section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .syllabus-seal-card .lesson-plan-actions-bar > *,
  .review-seal-card .lesson-plan-actions-bar > * {
    width: 100%;
  }
}

/* Syllabus Gate Pass 9B — teacher lesson-plan alignment checks */
.alignment-pill {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    margin-top: 0.45rem;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(20, 28, 45, 0.12);
    background: rgba(20, 28, 45, 0.045);
    font-size: 0.78rem;
    line-height: 1.25;
    white-space: normal;
}
.alignment-pill.is-aligned {
    border-color: rgba(20, 122, 78, 0.2);
    background: rgba(20, 122, 78, 0.08);
}
.alignment-pill.is-mismatch {
    border-color: rgba(185, 93, 42, 0.24);
    background: rgba(185, 93, 42, 0.09);
}
.alignment-warning {
    display: inline-flex;
    align-items: center;
    max-width: 12rem;
    white-space: normal;
}
@media (max-width: 768px) {
    .alignment-pill,
    .alignment-warning {
        width: 100%;
        justify-content: flex-start;
    }
}

/* Syllabus Gate Pass 9C — Tanzania syllabus completeness dashboard */
.syllabus-completeness-metrics .metric-card em {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.78rem;
    font-style: normal;
}

.syllabus-completeness-card,
.syllabus-gap-grid .card {
    overflow: hidden;
}

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

.section-heading-row h2 {
    margin-bottom: 6px;
}

.section-heading-row p {
    margin: 0;
    color: var(--muted);
    max-width: 720px;
}

.syllabus-matrix-table table {
    min-width: 920px;
}

.syllabus-matrix-table th,
.syllabus-matrix-table td {
    white-space: nowrap;
    vertical-align: middle;
}

.syllabus-count-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid var(--stroke-soft);
    background: var(--surface-soft);
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
    max-width: 100%;
}

.syllabus-count-pill.good {
    border-color: color-mix(in srgb, var(--success, #2fbf71) 45%, var(--stroke-soft));
    background: color-mix(in srgb, var(--success, #2fbf71) 12%, transparent);
}

.syllabus-count-pill.warn {
    border-color: color-mix(in srgb, var(--warning, #d69e2e) 50%, var(--stroke-soft));
    background: color-mix(in srgb, var(--warning, #d69e2e) 12%, transparent);
}

.syllabus-count-pill.muted {
    color: var(--muted);
}

.syllabus-gap-grid {
    align-items: stretch;
}

.gap-list {
    display: grid;
    gap: 10px;
    max-height: 440px;
    overflow: auto;
    padding-right: 4px;
}

.gap-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--stroke-soft);
    border-radius: 18px;
    background: var(--surface-soft);
}

.gap-row strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gap-row span {
    color: var(--muted);
    font-size: 0.84rem;
    text-align: right;
}

.positive-state {
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--success, #2fbf71) 35%, var(--stroke-soft));
    border-radius: 18px;
    background: color-mix(in srgb, var(--success, #2fbf71) 10%, transparent);
    color: var(--text);
    font-weight: 800;
}

.compact-empty {
    margin-top: 12px;
    padding: 16px;
}

@media (max-width: 900px) {
    .section-heading-row,
    .gap-row {
        align-items: stretch;
        flex-direction: column;
    }

    .gap-row span {
        text-align: left;
    }

    .syllabus-gap-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .syllabus-completeness-metrics {
        grid-template-columns: 1fr 1fr;
    }

    .syllabus-count-pill {
        min-height: 26px;
        padding: 5px 8px;
        font-size: 0.74rem;
    }
}

@media (max-width: 520px) {
    .syllabus-completeness-metrics {
        grid-template-columns: 1fr;
    }
}

/* Tanzania syllabus review tools */
.syllabus-review-metrics .metric-card em,
.syllabus-completeness-metrics .metric-card em {
    display: block;
    margin-top: .25rem;
    color: var(--muted);
    font-size: .78rem;
    font-style: normal;
}

.syllabus-review-filter-card {
    margin-bottom: 1rem;
}

.syllabus-review-filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    align-items: end;
}

.syllabus-review-filters label,
.syllabus-row-editor label {
    display: grid;
    gap: .4rem;
}

.syllabus-review-filters label span,
.syllabus-row-editor label span {
    color: var(--muted);
    font-size: .82rem;
    font-weight: 700;
}

.syllabus-review-workspace {
    align-items: start;
    grid-template-columns: minmax(0, 1.2fr) minmax(340px, .8fr);
}

.syllabus-review-table-card,
.syllabus-row-editor-card {
    min-width: 0;
}

.syllabus-review-table table th:first-child,
.syllabus-review-table table td:first-child {
    width: 42px;
    text-align: center;
}

.syllabus-review-table strong {
    display: block;
    max-width: 520px;
    line-height: 1.35;
}

.syllabus-review-table .is-selected-row td {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.syllabus-review-pill,
.syllabus-status-chip,
.syllabus-count-pill {
    display: inline-flex;
    align-items: center;
    width: max-content;
    max-width: 100%;
    padding: .32rem .58rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    font-size: .76rem;
    font-weight: 800;
    white-space: nowrap;
    margin: .1rem .18rem .1rem 0;
}

.syllabus-review-pill.verified,
.syllabus-count-pill.good {
    background: color-mix(in srgb, var(--success) 12%, transparent);
    border-color: color-mix(in srgb, var(--success) 35%, var(--line));
}

.syllabus-review-pill.needs_correction,
.syllabus-count-pill.warn {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
}

.syllabus-review-pill.disabled,
.syllabus-status-chip.inactive {
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    border-color: color-mix(in srgb, var(--danger) 35%, var(--line));
}

.syllabus-review-pill.unreviewed,
.syllabus-count-pill.muted,
.syllabus-status-chip.draft {
    background: color-mix(in srgb, var(--muted) 9%, transparent);
}

.syllabus-status-chip.active {
    background: color-mix(in srgb, var(--success) 9%, transparent);
}

.syllabus-bulk-actions {
    display: grid;
    grid-template-columns: minmax(170px, .35fr) minmax(220px, 1fr) auto;
    gap: .75rem;
    margin-top: 1rem;
    align-items: center;
}

.review-source-card {
    display: grid;
    gap: .25rem;
    padding: .85rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--panel-soft) 86%, transparent);
}

.review-source-card span {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.review-source-card strong {
    color: var(--text);
}

.review-source-card em {
    color: var(--muted);
    font-size: .8rem;
    font-style: normal;
}

.syllabus-row-editor textarea {
    min-height: 92px;
    resize: vertical;
    line-height: 1.45;
}

.syllabus-row-editor input,
.syllabus-row-editor textarea,
.syllabus-review-filters input,
.syllabus-bulk-actions input {
    width: 100%;
}

@media (max-width: 1080px) {
    .syllabus-review-filters,
    .syllabus-review-workspace,
    .syllabus-bulk-actions {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .syllabus-review-table strong {
        max-width: 280px;
    }

    .syllabus-review-pill,
    .syllabus-status-chip,
    .syllabus-count-pill {
        font-size: .72rem;
    }
}

/* Syllabus Gate Pass 9E — verified-row enforcement */
.syllabus-check-row.needs-review {
    border-color: rgba(185, 93, 42, 0.26);
    background: rgba(185, 93, 42, 0.06);
}
.syllabus-check-row.is-verified {
    border-color: rgba(20, 122, 78, 0.16);
}
.review-status-note {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.78rem;
    line-height: 1.35;
    opacity: 0.82;
}
.alignment-pill.needs-review {
    border-color: rgba(185, 93, 42, 0.24);
    background: rgba(185, 93, 42, 0.09);
}


/* Syllabus Gate Pass 9F — UAT seal dashboard */
.syllabus-uat-hero .hero-badge.is-ready {
    border-color: color-mix(in srgb, var(--success) 35%, var(--line));
    background: color-mix(in srgb, var(--success) 10%, transparent);
}

.syllabus-uat-hero .hero-badge.needs-work {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.syllabus-uat-metrics .metric-card em {
    display: block;
    margin-top: .25rem;
    color: var(--muted);
    font-size: .78rem;
    font-style: normal;
}

.syllabus-uat-flow-card,
.syllabus-uat-blocker-card,
.syllabus-uat-proof-card {
    min-width: 0;
}

.syllabus-uat-check-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.syllabus-uat-check {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .85rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 1.15rem;
    background: color-mix(in srgb, var(--panel-soft) 88%, transparent);
}

.syllabus-uat-check.is-ready {
    border-color: color-mix(in srgb, var(--success) 30%, var(--line));
    background: color-mix(in srgb, var(--success) 8%, var(--panel-soft));
}

.syllabus-uat-check.needs-work {
    border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
    background: color-mix(in srgb, var(--accent) 8%, var(--panel-soft));
}

.uat-step-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    font-weight: 900;
    font-size: .78rem;
}

.syllabus-uat-check h3 {
    margin: 0 0 .25rem;
    font-size: .98rem;
}

.syllabus-uat-check strong {
    display: inline-flex;
    margin-bottom: .25rem;
    font-size: .9rem;
}

.syllabus-uat-check p {
    margin: 0 0 .65rem;
    color: var(--muted);
    line-height: 1.45;
}

.syllabus-uat-check a {
    font-weight: 800;
    text-decoration: none;
}

.syllabus-uat-columns {
    align-items: start;
}

.uat-blocker-list {
    display: grid;
    gap: .65rem;
}

.uat-proof-steps {
    display: grid;
    gap: .7rem;
}

.uat-proof-steps div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .7rem;
    align-items: start;
    padding: .75rem .85rem;
    border: 1px solid var(--line);
    border-radius: .95rem;
    background: color-mix(in srgb, var(--panel-soft) 86%, transparent);
}

.uat-proof-steps span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    font-weight: 900;
}

.uat-proof-steps p {
    margin: .18rem 0 0;
    color: var(--text);
    line-height: 1.42;
}

@media (max-width: 1080px) {
    .syllabus-uat-check-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .syllabus-uat-check-grid,
    .syllabus-uat-columns {
        grid-template-columns: 1fr;
    }

    .syllabus-uat-check {
        grid-template-columns: 1fr;
    }

    .uat-step-no {
        width: max-content;
        min-width: 2.2rem;
    }
}

/* Syllabus Gate Pass 9G — UAT cleanup */
.syllabus-count-pill.neutral,
.syllabus-matrix-table .syllabus-count-pill.neutral {
    border-color: color-mix(in srgb, var(--muted) 24%, var(--line));
    background: color-mix(in srgb, var(--muted) 7%, transparent);
    color: var(--muted);
}

.review-automation-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 1.1rem;
    background: color-mix(in srgb, var(--panel-soft) 84%, transparent);
}

.review-automation-panel h2 {
    margin: 0 0 .25rem;
    font-size: 1rem;
}

.review-automation-panel p {
    margin: 0;
    color: var(--muted);
    font-size: .86rem;
    line-height: 1.45;
    max-width: 760px;
}

.review-auto-form {
    display: flex;
    justify-content: flex-end;
    min-width: max-content;
}

.syllabus-uat-outside-card {
    margin-top: 1rem;
}

.compact-gap-list {
    max-height: 280px;
}

@media (max-width: 900px) {
    .review-automation-panel {
        align-items: stretch;
        flex-direction: column;
    }

    .review-auto-form,
    .review-auto-form .primary-button {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .syllabus-matrix-table table {
        min-width: 760px;
    }
}

/* Syllabus Gate Pass 9H — Review table overlap fix */
.syllabus-review-workspace {
    grid-template-columns: minmax(0, 1fr);
}

.syllabus-review-table-card,
.syllabus-row-editor-card,
.syllabus-review-table,
.syllabus-review-table .responsive-table {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.syllabus-review-table.responsive-table,
.responsive-table.syllabus-review-table {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.syllabus-review-table table {
    width: 100%;
    min-width: 860px;
    table-layout: fixed;
}

.syllabus-review-table th,
.syllabus-review-table td {
    vertical-align: top;
    overflow-wrap: anywhere;
    word-break: normal;
}

.syllabus-review-table th:nth-child(1),
.syllabus-review-table td:nth-child(1) {
    width: 48px;
}

.syllabus-review-table th:nth-child(2),
.syllabus-review-table td:nth-child(2) {
    width: 48%;
}

.syllabus-review-table th:nth-child(3),
.syllabus-review-table td:nth-child(3) {
    width: 220px;
}

.syllabus-review-table th:nth-child(4),
.syllabus-review-table td:nth-child(4) {
    width: 170px;
}

.syllabus-review-table th:nth-child(5),
.syllabus-review-table td:nth-child(5) {
    width: 96px;
}

.syllabus-review-table strong,
.syllabus-review-table .table-subtext,
.syllabus-review-table td:nth-child(3) {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

.syllabus-review-table .table-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    max-width: 100%;
    white-space: nowrap;
}

@media (min-width: 1720px) {
    .syllabus-review-workspace {
        grid-template-columns: minmax(0, 1.12fr) minmax(380px, .88fr);
    }
}

@media (max-width: 768px) {
    .syllabus-review-table table {
        min-width: 780px;
    }

    .syllabus-review-table th:nth-child(2),
    .syllabus-review-table td:nth-child(2) {
        width: 44%;
    }
}


/* ============================================================
   QUESTION BANK READINESS POLISH
   ============================================================ */
.qb-hero {
  gap: 18px;
}

.qb-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
}

.qb-readiness-grid {
  margin-bottom: 18px;
}

.qb-readiness-card small,
.qb-syllabus-field small,
.qb-form-section-head p,
.qb-side-note span,
.muted-box {
  color: var(--muted);
}

.qb-filter-form-wide {
  grid-template-columns: minmax(220px, 1.45fr) repeat(5, minmax(145px, 1fr));
}

.qb-filter-form-wide .qb-toolbar-actions {
  align-self: end;
}

.qb-mini-stack,
.qb-readiness-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.qb-readiness-list {
  margin-top: 10px;
}

.qb-mini-check {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--muted);
  background: var(--panel-soft);
  white-space: nowrap;
}

.qb-mini-check.is-ready {
  color: var(--accent-dark);
  border-color: rgba(216, 177, 102, 0.48);
  background: rgba(216, 177, 102, 0.12);
}

.status-pill.success {
  color: var(--accent-dark);
  border-color: rgba(216, 177, 102, 0.5);
  background: rgba(216, 177, 102, 0.12);
}

.status-pill.warning {
  color: #8a5d00;
  border-color: rgba(180, 120, 32, 0.35);
  background: rgba(180, 120, 32, 0.12);
}

.qb-empty-cell {
  padding: 28px !important;
}

.qb-empty-cell strong,
.qb-empty-cell span {
  display: block;
  margin-bottom: 8px;
}

.qb-form-section-head {
  margin: 8px 0 14px;
}

.qb-select-search {
  margin-bottom: 8px;
}

.qb-syllabus-map-list {
  display: grid;
  gap: 10px;
}

.qb-syllabus-map-card {
  display: grid;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel-soft);
  padding: 14px 16px;
}

.qb-syllabus-map-card span,
.qb-syllabus-map-card small {
  color: var(--muted);
  line-height: 1.45;
}

.qb-side-note {
  display: grid;
  gap: 5px;
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  background: var(--panel-soft);
}

.qb-table {
  min-width: 980px;
}

.qb-table .table-actions {
  min-width: 150px;
}

.qb-option.is-correct {
  border-color: rgba(216, 177, 102, 0.55);
  background: rgba(216, 177, 102, 0.12);
}

@media (max-width: 1120px) {
  .qb-filter-form-wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .qb-hero-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .qb-hero-actions,
  .qb-hero-actions > *,
  .qb-readiness-list,
  .qb-mini-stack {
    width: 100%;
  }

  .qb-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .qb-mini-check {
    white-space: normal;
  }

  .qb-table {
    min-width: 900px;
  }
}

/* ============================================================
   QUESTION BANK PASS 2 — EDIT / DUPLICATE / RESTORE POLISH
   ============================================================ */
.qb-action-cell {
  min-width: 260px;
}

.qb-action-row,
.qb-detail-actions form,
.qb-action-row form {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.qb-action-row {
  flex-wrap: wrap;
}

.qb-action-row .secondary-button,
.qb-detail-actions .secondary-button,
.qb-edit-actions .secondary-button {
  min-height: 36px;
}

.qb-detail-actions form {
  width: auto;
}

.qb-edit-layout .qb-help-card {
  position: sticky;
  top: 18px;
  align-self: start;
}

.warning-note {
  border-color: rgba(180, 120, 32, 0.35);
  background: rgba(180, 120, 32, 0.1);
}

.qb-edit-actions {
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 920px) {
  .qb-edit-layout .qb-help-card {
    position: static;
  }

  .qb-action-cell {
    min-width: 220px;
  }
}

@media (max-width: 720px) {
  .qb-action-row,
  .qb-action-row form,
  .qb-action-row .secondary-button,
  .qb-detail-actions form,
  .qb-detail-actions button,
  .qb-edit-actions,
  .qb-edit-actions > * {
    width: 100%;
  }

  .qb-action-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .qb-detail-actions form,
  .qb-action-row form {
    justify-content: stretch;
  }
}

/* ============================================================
   QUESTION BANK PASS 3 — TYPE-AWARE QUESTION ENGINE
   ============================================================ */
.qb-type-head {
  align-items: flex-start;
}

.qb-type-panel {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--panel-soft);
  padding: 16px;
  margin: 12px 0 18px;
}

.qb-type-panel[hidden] {
  display: none !important;
}

.qb-panel-title {
  display: grid;
  gap: 4px;
  margin-bottom: 14px;
}

.qb-panel-title strong {
  font-size: 0.96rem;
}

.qb-panel-title span {
  color: var(--muted);
  line-height: 1.45;
  font-size: 0.88rem;
}

.qb-choice-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.qb-radio-card {
  min-height: 52px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card-bg);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.qb-radio-card input {
  width: auto;
  min-height: auto;
}

.qb-radio-card span {
  font-weight: 800;
}

.qb-matching-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.qb-matching-grid label,
.qb-type-panel > label {
  display: grid;
  gap: 6px;
}

.qb-question-detail .qb-option span {
  line-height: 1.45;
}

@media (max-width: 760px) {
  .qb-choice-row,
  .qb-matching-grid {
    grid-template-columns: 1fr;
  }

  .qb-type-panel {
    border-radius: 18px;
    padding: 14px;
  }
}

/* ============================================================
   QUESTION BANK PASS 4 — DIAGRAM + DRAWING INTEGRATION
   ============================================================ */
.qb-media-panel {
  display: grid;
  gap: 14px;
}

.qb-media-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.qb-media-tools label {
  display: grid;
  gap: 6px;
}

.qb-media-tools small,
.qb-media-view-card span,
.qb-media-preview span {
  color: var(--muted);
  line-height: 1.45;
  font-size: 0.88rem;
}

.qb-media-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.qb-media-actions .qb-select-search {
  flex: 1 1 260px;
  margin: 0;
}

.qb-media-preview,
.qb-media-view-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--card-bg);
  padding: 14px;
  overflow: hidden;
}

.qb-media-preview strong,
.qb-media-view-card strong {
  font-size: 0.95rem;
}

.qb-media-svg {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel-soft);
  padding: 12px;
  overflow: auto;
  max-height: 360px;
}

.qb-media-svg svg {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.qb-hidden-previews {
  display: none !important;
}

@media (max-width: 860px) {
  .qb-media-tools {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .qb-media-actions,
  .qb-media-actions > *,
  .qb-media-view-card .secondary-button {
    width: 100%;
  }

  .qb-media-svg {
    max-height: 280px;
  }
}

/* Question Bank bulk import workflow */
.qb-import-card,
.qb-import-results,
.qb-import-help {
    overflow: hidden;
}

.qb-import-form {
    display: grid;
    gap: 1rem;
}

.qb-import-form textarea {
    width: 100%;
    min-height: 26rem;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    line-height: 1.55;
    white-space: pre;
    overflow: auto;
}

.qb-import-actions,
.qb-import-created-list,
.qb-import-messages {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    align-items: center;
}

.qb-import-messages {
    margin: .85rem 0;
    align-items: stretch;
}

.qb-import-messages .notice-card,
.qb-import-notice {
    width: 100%;
}

.qb-json-sample {
    max-height: 32rem;
    overflow: auto;
    padding: 1rem;
    border-radius: 1rem;
    border: 1px solid var(--stroke-soft, rgba(148, 163, 184, .24));
    background: var(--surface-soft, rgba(15, 23, 42, .04));
    font-size: .88rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

@media (max-width: 768px) {
    .qb-import-form textarea {
        min-height: 20rem;
        white-space: pre-wrap;
    }

    .qb-import-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .qb-import-actions .primary-button,
    .qb-import-actions .secondary-button {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================
   QUESTION BANK UI HOTFIX — CLEAN LIST VIEW
   ============================================================ */
.qb-list-card {
  overflow: hidden;
}

.qb-list-head {
  align-items: flex-start;
  gap: 16px;
}

.qb-list-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.qb-question-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.qb-question-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 15px 16px;
  background: var(--panel-soft);
  box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
}

.qb-question-main {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.qb-question-title {
  display: block;
  color: var(--text);
  font-weight: 850;
  line-height: 1.38;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.qb-question-title:hover {
  color: var(--accent-dark);
}

.qb-question-context {
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.qb-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.qb-chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 9px;
  color: var(--text);
  background: var(--panel);
  font-size: .76rem;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}

.qb-chip.muted {
  color: var(--muted);
  background: transparent;
}

.qb-chip.success {
  color: var(--accent-dark);
  border-color: rgba(216, 177, 102, .48);
  background: rgba(216, 177, 102, .12);
}

.qb-chip.warning {
  color: #8a5d00;
  border-color: rgba(180, 120, 32, .35);
  background: rgba(180, 120, 32, .12);
}

.qb-question-side {
  display: grid;
  justify-items: end;
  gap: 10px;
  min-width: 260px;
}

.qb-readiness-stack {
  justify-content: flex-end;
}

.qb-list-actions {
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.qb-list-actions .secondary-button,
.qb-list-actions .table-open {
  min-height: 34px;
  padding: 7px 11px;
}

.qb-icon-action {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(191, 86, 86, .35);
  background: rgba(191, 86, 86, .08);
  color: #b85555;
  box-shadow: none;
}

.qb-icon-action:hover {
  background: rgba(191, 86, 86, .15);
  transform: translateY(-1px);
}

.qb-empty-panel {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--panel-soft);
  text-align: center;
}

@media (max-width: 1080px) {
  .qb-question-item {
    grid-template-columns: 1fr;
  }

  .qb-question-side,
  .qb-readiness-stack,
  .qb-list-actions {
    justify-items: start;
    justify-content: flex-start;
    min-width: 0;
  }
}

@media (max-width: 768px) {
  .qb-list-head,
  .qb-list-head-actions,
  .qb-list-head-actions > * {
    width: 100%;
  }

  .qb-list-head-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .qb-chip {
    white-space: normal;
  }

  .qb-question-item {
    padding: 14px;
    border-radius: 18px;
  }

  .qb-list-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .qb-list-actions form,
  .qb-list-actions .secondary-button,
  .qb-list-actions .table-open {
    width: 100%;
  }

  .qb-list-actions .secondary-button,
  .qb-list-actions .table-open {
    justify-content: center;
  }

  .qb-list-actions form:last-child {
    width: auto;
  }

  .qb-icon-action {
    width: 38px;
    height: 38px;
    min-width: 38px;
  }
}

/* ============================================================
   QUESTION BANK UI HOTFIX — BUTTON + CARD POLISH
   ============================================================ */
.qb-list-card {
  padding: clamp(14px, 2vw, 22px);
}

.qb-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 20px;
  background: rgba(255, 255, 255, .035);
}

.qb-list-head h2 {
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}

.qb-list-head p {
  margin: 0;
  max-width: 720px;
}

.qb-list-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.qb-result-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 999px;
  color: var(--muted, #94a3b8);
  background: rgba(255, 255, 255, .04);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.qb-question-list {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.qb-question-item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(260px, auto);
  gap: 14px;
  align-items: stretch;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 22px;
  background: rgba(255, 255, 255, .045);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .12);
}

.qb-question-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 3px;
  border-radius: 999px;
  background: rgba(216, 177, 102, .7);
}

.qb-question-index {
  align-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(148, 163, 184, .20);
  border-radius: 999px;
  color: var(--muted, #94a3b8);
  background: rgba(255, 255, 255, .045);
  font-size: .75rem;
  font-weight: 900;
  white-space: nowrap;
}

.qb-question-main {
  min-width: 0;
  display: grid;
  gap: 8px;
  padding-right: 4px;
}

.qb-question-kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  color: rgba(216, 177, 102, .92);
  font-size: .73rem;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.qb-question-kicker span + span::before {
  content: "•";
  margin-right: 6px;
  color: var(--muted, #94a3b8);
}

.qb-question-title {
  display: block;
  color: var(--text, #f8fafc);
  font-size: clamp(1rem, 1.4vw, 1.08rem);
  font-weight: 900;
  line-height: 1.42;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.qb-question-title:hover {
  color: rgba(216, 177, 102, .98);
}

.qb-question-context {
  color: var(--muted, #94a3b8);
  font-size: .86rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.qb-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin-top: 2px;
}

.qb-chip,
.qb-mini-check {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  max-width: 100%;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 999px;
  padding: 5px 10px;
  color: var(--text, #f8fafc);
  background: rgba(255, 255, 255, .045);
  font-size: .74rem;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.qb-chip.muted,
.qb-mini-check {
  color: var(--muted, #94a3b8);
}

.qb-chip.success,
.qb-mini-check.is-ready {
  color: rgba(216, 177, 102, .95);
  border-color: rgba(216, 177, 102, .34);
  background: rgba(216, 177, 102, .095);
}

.qb-chip.warning {
  color: #f0c067;
  border-color: rgba(240, 192, 103, .34);
  background: rgba(240, 192, 103, .10);
}

.qb-question-side {
  min-width: 260px;
  display: grid;
  align-content: space-between;
  justify-items: end;
  gap: 12px;
  padding-left: 16px;
  border-left: 1px solid rgba(148, 163, 184, .16);
}

.qb-readiness-panel {
  display: grid;
  gap: 8px;
  justify-items: end;
}

.qb-readiness-label {
  color: var(--muted, #94a3b8);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.qb-readiness-stack,
.qb-mini-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.qb-list-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.qb-list-actions form {
  display: inline-flex;
  margin: 0;
}

.qb-btn,
.qb-btn-icon-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border-radius: 13px;
  font-size: .84rem;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.qb-btn {
  min-width: 68px;
  padding: 0 13px;
  border: 1px solid rgba(148, 163, 184, .22);
  color: var(--text, #f8fafc);
  background: rgba(255, 255, 255, .055);
}

.qb-btn-open {
  border-color: rgba(216, 177, 102, .45);
  color: rgba(216, 177, 102, .98);
  background: rgba(216, 177, 102, .10);
}

.qb-btn-ghost:hover,
.qb-btn-open:hover,
.qb-btn-icon-danger:hover {
  transform: translateY(-1px);
}

.qb-btn-ghost:hover {
  border-color: rgba(148, 163, 184, .38);
  background: rgba(255, 255, 255, .085);
}

.qb-btn-open:hover {
  background: rgba(216, 177, 102, .15);
}

.qb-btn-icon-danger {
  width: 38px;
  min-width: 38px;
  padding: 0;
  border: 1px solid rgba(239, 68, 68, .30);
  color: #ff7373;
  background: rgba(239, 68, 68, .075);
}

.qb-btn-icon-danger svg {
  width: 18px;
  height: 18px;
}

.qb-empty-panel {
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 22px;
  background: rgba(255, 255, 255, .04);
  text-align: center;
}

@media (max-width: 1280px) {
  .qb-question-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .qb-question-side {
    grid-column: 1 / -1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    justify-items: stretch;
    padding: 13px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(148, 163, 184, .14);
  }

  .qb-readiness-panel {
    justify-items: start;
  }

  .qb-readiness-stack,
  .qb-mini-stack,
  .qb-list-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 768px) {
  .qb-list-card {
    padding: 12px;
  }

  .qb-list-head,
  .qb-list-head-actions,
  .qb-question-side {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    justify-content: stretch;
  }

  .qb-result-pill,
  .qb-list-head-actions > .primary-button,
  .qb-list-head-actions > .secondary-button {
    width: 100%;
  }

  .qb-question-item {
    grid-template-columns: 1fr;
    padding: 14px;
    border-radius: 18px;
  }

  .qb-question-index {
    width: max-content;
  }

  .qb-question-side {
    gap: 12px;
  }

  .qb-chip,
  .qb-mini-check {
    white-space: normal;
  }

  .qb-list-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    width: 100%;
  }

  .qb-list-actions form,
  .qb-list-actions .qb-btn {
    width: 100%;
  }

  .qb-btn {
    min-width: 0;
  }
}

@media (max-width: 520px) {
  .qb-list-actions {
    grid-template-columns: 1fr 1fr;
  }

  .qb-btn-icon-danger {
    width: 100%;
    min-width: 0;
  }
}

/* Question Bank subject/level workflow polish */
.qb-flow-grid {
  align-items: start;
}

.qb-flow-grid label:first-child,
.qb-flow-grid label:nth-child(2) {
  position: relative;
}

.qb-flow-grid label small,
.qb-filter-form small {
  color: var(--muted);
  line-height: 1.45;
}

.qb-syllabus-filter-field select,
.qb-syllabus-field select {
  min-height: 46px;
}

.qb-filter-form-wide {
  grid-template-columns: minmax(180px, 0.85fr) minmax(220px, 1.1fr) minmax(160px, 0.85fr) minmax(220px, 1.2fr) minmax(190px, 1fr);
}

.qb-filter-form-wide .span-2,
.qb-syllabus-filter-field {
  grid-column: span 2;
}

#qb-level-group-select,
#qb-filter-level-group {
  font-weight: 800;
  letter-spacing: 0.02em;
}

#qb-topic-select,
#qb-filter-topic,
#qb-syllabus-select,
#qb-filter-syllabus {
  scroll-margin-top: 120px;
}

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

  .qb-filter-form-wide .span-2,
  .qb-syllabus-filter-field {
    grid-column: span 2;
  }
}

@media (max-width: 760px) {
  .qb-filter-form-wide,
  .qb-flow-grid {
    grid-template-columns: 1fr;
  }

  .qb-filter-form-wide .span-2,
  .qb-syllabus-filter-field {
    grid-column: 1;
  }
}

/* Question Bank selector and pagination stabilization */
.qb-gated-field.is-locked,
.qb-question-form label.is-locked,
.qb-filter-form label.is-locked {
  opacity: .72;
}

.qb-gated-field.is-locked select,
.qb-gated-field.is-locked input,
.qb-question-form label.is-locked select,
.qb-question-form label.is-locked input,
.qb-filter-form label.is-locked select,
.qb-filter-form label.is-locked input {
  cursor: not-allowed;
}

.qb-gated-field.is-locked::after,
.qb-question-form label.is-locked::after,
.qb-filter-form label.is-locked::after {
  content: attr(data-lock-message);
  display: block;
  margin-top: 6px;
  color: var(--muted, #94a3b8);
  font-size: .78rem;
  line-height: 1.35;
}

.qb-syllabus-field,
.qb-syllabus-filter-field {
  position: relative;
}

.qb-syllabus-field .qb-select-search,
.qb-syllabus-filter-field .qb-select-search {
  min-height: 42px;
  border-radius: 14px;
}

.qb-syllabus-field select,
.qb-syllabus-filter-field select {
  max-height: 320px;
}

.qb-pagination {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(148, 163, 184, .16);
}

.qb-page-link,
.qb-page-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .22);
  padding: 0 14px;
  font-size: .82rem;
  font-weight: 900;
  text-decoration: none;
}

.qb-page-link {
  color: var(--text, #f8fafc);
  background: rgba(255, 255, 255, .055);
}

.qb-page-link:hover {
  border-color: rgba(216, 177, 102, .42);
  color: rgba(216, 177, 102, .96);
}

.qb-page-link.is-disabled {
  pointer-events: none;
  opacity: .45;
}

.qb-page-status {
  color: var(--muted, #94a3b8);
  background: rgba(255, 255, 255, .035);
}

.qb-filter-form-wide label:has(select[name="per_page"]) {
  max-width: 160px;
}

@media (max-width: 768px) {
  .qb-pagination {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .qb-page-link,
  .qb-page-status {
    width: 100%;
  }

  .qb-filter-form-wide label:has(select[name="per_page"]) {
    max-width: none;
  }
}

/* ============================================================
   QUESTION BANK — DETAIL MEDIA EMBED REDESIGN
   ============================================================ */
.qb-media-detail-card {
  gap: 16px;
  padding: 16px;
  border-color: color-mix(in srgb, var(--line) 76%, var(--accent) 24%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--card-bg) 92%, transparent), var(--card-bg)),
    var(--card-bg);
}

.qb-media-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.qb-media-detail-head > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.qb-media-detail-head strong {
  overflow-wrap: anywhere;
}

.qb-media-detail-head .secondary-button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.qb-media-preview-frame {
  display: grid;
  gap: 10px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 14px;
  background: color-mix(in srgb, var(--panel-soft) 92%, transparent);
  overflow: hidden;
}

.qb-question-media-image {
  display: block;
  width: min(100%, 680px);
  max-height: 620px;
  object-fit: contain;
  margin: 0 auto;
  border-radius: 18px;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .22);
}

.qb-media-preview-frame figcaption {
  color: var(--muted);
  font-size: .86rem;
  text-align: center;
  line-height: 1.45;
}

.qb-media-svg-frame .qb-media-svg {
  max-height: 620px;
  background: #fff;
}

.qb-media-fallback {
  display: grid;
  gap: 12px;
  align-items: start;
  border: 1px dashed var(--line);
  border-radius: 18px;
  padding: 16px;
  color: var(--muted);
  background: color-mix(in srgb, var(--panel-soft) 88%, transparent);
}

.qb-side-media-thumb {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--panel-soft) 92%, transparent);
}

.qb-side-media-thumb img {
  width: 100%;
  max-height: 180px;
  object-fit: contain;
  border-radius: 14px;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.qb-side-media-thumb span {
  color: var(--muted);
  font-size: .82rem;
}

@media (max-width: 860px) {
  .qb-media-detail-head {
    flex-direction: column;
  }

  .qb-media-detail-head .secondary-button {
    width: 100%;
  }

  .qb-question-media-image {
    max-height: 440px;
  }
}

/* ============================================================
   QUESTION BANK — IMAGE PREVIEW PERFORMANCE HARDENING
   Uses generated thumbnails in preview surfaces while preserving
   the original media link for full-size review.
   ============================================================ */
.qb-question-media-image,
.qb-side-media-thumb img {
  aspect-ratio: 1 / 1;
  contain: paint;
  content-visibility: auto;
}

.qb-question-media-image {
  height: auto;
  max-width: 480px;
}

.qb-side-media-thumb img {
  height: auto;
  max-width: 180px;
  margin-inline: auto;
}

/* ============================================================
   QUESTION BANK — LIST THUMBNAIL PERFORMANCE PASS
   Uses generated thumbnails on list/search pages so the bank does
   not load every full 512px PNG while browsing many questions.
   ============================================================ */
.qb-list-media-chip {
  display: inline-grid;
  grid-template-columns: 58px minmax(0, max-content);
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  margin-top: 2px;
  padding: 7px 10px 7px 7px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, var(--accent) 22%);
  border-radius: 18px;
  background: color-mix(in srgb, var(--panel-soft) 91%, transparent);
  color: var(--text);
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
}

.qb-list-media-chip:hover {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--line));
  transform: translateY(-1px);
}

.qb-list-media-chip img {
  display: block;
  width: 58px;
  height: 58px;
  object-fit: contain;
  border-radius: 14px;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.qb-list-media-chip span,
.qb-list-media-note {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 850;
  line-height: 1.25;
}

.qb-list-media-note {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel-soft) 90%, transparent);
}

@media (max-width: 720px) {
  .qb-list-media-chip {
    grid-template-columns: 52px minmax(0, 1fr);
    width: 100%;
  }

  .qb-list-media-chip img {
    width: 52px;
    height: 52px;
  }
}

.assessment-filter-card,
.assessment-bank-summary-grid,
.assessment-question-picker,
.assessment-create-side {
  min-width: 0;
}

.assessment-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.assessment-section-head.compact {
  align-items: center;
  margin-bottom: 14px;
}

.assessment-section-head h2 {
  margin: 0 0 5px;
}

.assessment-section-head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.assessment-bank-filter-grid {
  grid-template-columns: repeat(4, minmax(170px, 1fr));
}

.assessment-filter-actions {
  justify-content: flex-end;
}

.assessment-bank-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0 18px;
}

.mini-stat-card {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  display: grid;
  gap: 4px;
}

.mini-stat-card span,
.mini-stat-card small {
  color: var(--muted);
}

.mini-stat-card strong {
  color: var(--text);
  font-size: 1.25rem;
}

.question-picker-head {
  margin-top: 24px;
}

.assessment-question-choice {
  grid-template-columns: 24px minmax(0, 1fr);
}

.assessment-question-meta,
.assessment-question-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.assessment-question-meta small,
.assessment-question-badges small,
.soft-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: .78rem;
  line-height: 1.2;
}

.assessment-question-badges small.is-ok {
  border-color: rgba(0, 168, 118, .32);
  background: rgba(0, 168, 118, .10);
  color: var(--success, #079669);
}

.assessment-question-badges small.is-warn {
  border-color: rgba(220, 92, 0, .32);
  background: rgba(220, 92, 0, .10);
  color: var(--warning, #b45309);
}

.assessment-live-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 10px 0 18px;
}

.assessment-live-summary div {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-soft);
  display: grid;
  gap: 4px;
}

.assessment-live-summary span {
  color: var(--muted);
  font-size: .84rem;
}

.assessment-live-summary strong {
  color: var(--text);
  font-size: 1.45rem;
}

@media (max-width: 1080px) {
  .assessment-bank-filter-grid,
  .assessment-bank-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .assessment-section-head,
  .assessment-section-head.compact {
    display: grid;
    gap: 12px;
  }
  .assessment-bank-filter-grid,
  .assessment-bank-summary-grid,
  .assessment-live-summary {
    grid-template-columns: 1fr;
  }
  .assessment-filter-actions {
    justify-content: stretch;
  }
  .assessment-filter-actions .secondary-button,
  .assessment-filter-actions .primary-button,
  .question-picker-head .secondary-button {
    width: 100%;
  }
}

/* Pass 5 — assessment/question-bank media rendering */
.assessment-media-frame {
  margin: 14px 0;
  border: 1px solid var(--border, rgba(120, 120, 120, .22));
  border-radius: 18px;
  background: var(--card-bg, rgba(255, 255, 255, .55));
  padding: 12px;
  overflow: hidden;
}
.assessment-media-frame .drawing-question-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.assessment-media-frame .drawing-question-toolbar span {
  color: var(--muted, #6b7280);
  font-size: .82rem;
  overflow-wrap: anywhere;
}
.assessment-question-media,
.assessment-question-media-image {
  width: 100%;
  max-width: 640px;
  max-height: 460px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
.assessment-question-media svg {
  width: 100%;
  max-width: 640px;
  max-height: 460px;
  height: auto;
  display: block;
}
.assessment-question-choice .assessment-media-frame {
  margin: 10px 0;
  padding: 9px;
  border-radius: 14px;
}
.assessment-question-choice .assessment-question-media-image,
.assessment-question-choice .assessment-question-media,
.assessment-question-choice .assessment-question-media svg {
  max-height: 170px;
}
.question-response-review-row .assessment-media-frame {
  margin: 8px 0;
  padding: 8px;
}
.question-response-review-row .assessment-question-media-image,
.question-response-review-row .assessment-question-media,
.question-response-review-row .assessment-question-media svg {
  max-height: 180px;
}
@media (max-width: 768px) {
  .assessment-media-frame {
    border-radius: 14px;
    padding: 10px;
  }
  .assessment-media-frame .drawing-question-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
  .assessment-question-media,
  .assessment-question-media-image,
  .assessment-question-media svg {
    max-height: 330px;
  }
}

/* Pass 7 — standard assessment scheduling and targeting */
.assessment-standard-grid label small {
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.35;
}

.assessment-standard-note {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-soft);
}

.assessment-open-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.assessment-open-summary div {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-soft);
  display: grid;
  gap: 4px;
}

.assessment-open-summary span {
  color: var(--muted);
  font-size: .82rem;
}

.assessment-open-summary strong {
  color: var(--text);
  font-size: .95rem;
  line-height: 1.4;
}

.exam-table td {
  vertical-align: top;
}

@media (max-width: 1080px) {
  .assessment-standard-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .assessment-open-summary {
    grid-template-columns: 1fr;
  }
}

/* Pass 7B — automatic assessment generator */
.assessment-auto-generator {
  border: 1px solid var(--border, rgba(120,120,120,.2));
  border-radius: 22px;
  padding: 1rem;
  margin: 1rem 0;
  background: var(--card-soft, rgba(120,120,120,.045));
}
.assessment-auto-mix-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
}
.assessment-auto-mix-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(96px, .7fr) minmax(96px, .7fr);
  gap: .55rem;
  align-items: end;
  border: 1px solid var(--border, rgba(120,120,120,.18));
  border-radius: 18px;
  padding: .72rem;
  background: var(--card-bg, rgba(255,255,255,.03));
  min-width: 0;
}
.assessment-auto-mix-row strong {
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.assessment-auto-mix-row label,
.assessment-auto-options label { margin: 0; }
.assessment-auto-mix-row input,
.assessment-auto-options input,
.assessment-auto-options select {
  width: 100%;
  max-width: 100%;
}
.assessment-check-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  border: 1px solid var(--border, rgba(120,120,120,.18));
  border-radius: 16px;
  padding: .75rem;
  background: var(--card-bg, rgba(255,255,255,.025));
}
.assessment-check-row input { width: auto; }
@media (max-width: 1080px) {
  .assessment-auto-mix-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .assessment-auto-generator { padding: .8rem; border-radius: 18px; }
  .assessment-auto-mix-row { grid-template-columns: 1fr; }
  .assessment-check-row { align-items: flex-start; }
}
.homework-source-grid-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.homework-auto-syllabus-picker {
  display: grid;
  gap: .35rem;
  margin-bottom: .8rem;
}
.homework-auto-syllabus-picker select {
  width: 100%;
  max-width: 100%;
}
@media (max-width: 1080px) {
  .homework-source-grid-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .homework-source-grid-four { grid-template-columns: 1fr; }
}

/* Pass 7C — auto assessment generator form redesign */
.assessment-advanced-filter-shell {
  margin-bottom: 1rem;
}
.assessment-advanced-panel > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  border: 1px solid var(--border, rgba(120,120,120,.22));
  border-radius: 18px;
  padding: .8rem .95rem;
  background: var(--card-soft, rgba(120,120,120,.055));
  font-weight: 700;
}
.assessment-advanced-panel > summary::-webkit-details-marker { display: none; }
.assessment-advanced-panel > summary::after {
  content: 'Open';
  font-size: .78rem;
  font-weight: 600;
  opacity: .72;
}
.assessment-advanced-panel[open] > summary::after { content: 'Close'; }
.assessment-advanced-panel[open] > summary { margin-bottom: .9rem; }
.assessment-manual-only-summary { display: none !important; }
.assignment-lock-card {
  min-width: 0;
  border: 1px solid var(--border, rgba(120,120,120,.22));
  border-radius: 18px;
  padding: .78rem .9rem;
  background: var(--card-soft, rgba(120,120,120,.06));
  display: grid;
  gap: .25rem;
}
.assignment-lock-card > span,
.diagram-count-field > span {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .01em;
  opacity: .75;
}
.assignment-lock-card > strong {
  font-size: 1rem;
  line-height: 1.2;
}
.assignment-lock-card > small,
.diagram-count-field > small {
  opacity: .7;
  line-height: 1.35;
}
.syllabus-chip-search {
  margin-bottom: .45rem;
}
.selected-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: .2rem 0 .55rem;
  min-height: 1.4rem;
}
.selected-chip-row span,
.selected-chip-row em {
  border: 1px solid var(--border, rgba(120,120,120,.22));
  border-radius: 999px;
  padding: .22rem .55rem;
  font-size: .78rem;
  line-height: 1.25;
  background: var(--card-soft, rgba(120,120,120,.055));
}
.selected-chip-row em {
  font-style: normal;
  opacity: .68;
}
.auto-mix-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: .65rem;
  align-items: end;
  margin: .7rem 0 .85rem;
}
.auto-mix-toolbar label { margin: 0; }
.selected-auto-mix-grid {
  display: grid;
  gap: .55rem;
}
.assessment-auto-mix-head,
.selected-auto-mix-grid .assessment-auto-mix-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(110px, .5fr) minmax(120px, .5fr) auto;
  gap: .55rem;
  align-items: end;
}
.assessment-auto-mix-head {
  opacity: .68;
  font-size: .76rem;
  font-weight: 700;
  padding: 0 .15rem;
}
.selected-auto-mix-grid .assessment-auto-mix-row {
  border: 1px solid var(--border, rgba(120,120,120,.20));
  border-radius: 18px;
  padding: .7rem;
  background: var(--card-soft, rgba(120,120,120,.045));
}
.selected-auto-mix-grid .assessment-auto-mix-row.is-hidden {
  display: none !important;
}
.selected-auto-mix-grid .assessment-auto-mix-row label {
  margin: 0;
}
.selected-auto-mix-grid .assessment-auto-mix-row label span {
  display: none;
}
.diagram-count-field {
  display: grid;
  gap: .45rem;
}
.diagram-count-options {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.diagram-count-options label {
  margin: 0;
}
.diagram-count-options input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.diagram-count-options span {
  min-width: 2.2rem;
  min-height: 2.2rem;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--border, rgba(120,120,120,.24));
  background: var(--card-soft, rgba(120,120,120,.055));
  font-weight: 700;
  cursor: pointer;
}
.diagram-count-options input:checked + span {
  border-color: var(--accent, #c9893d);
  background: color-mix(in srgb, var(--accent, #c9893d) 13%, transparent);
}
@media (max-width: 768px) {
  .auto-mix-toolbar,
  .assessment-auto-mix-head,
  .selected-auto-mix-grid .assessment-auto-mix-row {
    grid-template-columns: 1fr;
  }
  .assessment-auto-mix-head { display: none; }
  .selected-auto-mix-grid .assessment-auto-mix-row label span { display: inline; }
  .auto-mix-toolbar .secondary-button { width: 100%; justify-content: center; }
}

/* Pass 7G — Teacher Assessment Bank */
.assessment-bank-hero,
.assessment-bank-toolbar,
.assessment-bank-card,
.assessment-repeat-source,
.assessment-repeat-form {
    border-radius: 24px;
}
.assessment-bank-kpis .metric-card strong {
    letter-spacing: -0.03em;
}
.assessment-bank-tabs {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.assessment-bank-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}
.assessment-bank-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}
.assessment-bank-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.assessment-bank-card__head h2 {
    margin: .25rem 0 0;
    font-size: clamp(1rem, 2vw, 1.2rem);
    line-height: 1.25;
}
.assessment-bank-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem .85rem;
    font-size: .92rem;
}
.assessment-bank-meta.stacked {
    grid-template-columns: 1fr;
}
.assessment-bank-meta span {
    min-width: 0;
    overflow-wrap: anywhere;
}
.assessment-bank-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: auto;
}
.assessment-bank-actions .secondary-button,
.assessment-bank-actions .primary-button {
    white-space: nowrap;
}
.assessment-repeat-layout {
    display: grid;
    grid-template-columns: minmax(260px, .85fr) minmax(320px, 1.25fr);
    gap: 1rem;
    align-items: start;
}
.assessment-repeat-form {
    display: grid;
    gap: 1rem;
}
.assessment-repeat-form label {
    display: grid;
    gap: .4rem;
}
.assessment-repeat-choice {
    border: 1px solid var(--border-color, rgba(148,163,184,.28));
    border-radius: 18px;
    padding: .85rem 1rem;
    background: var(--surface-muted, rgba(148,163,184,.08));
}
.muted-copy {
    color: var(--muted-text, #64748b);
    margin-top: 1rem;
}
@media (max-width: 860px) {
    .assessment-repeat-layout,
    .assessment-bank-meta {
        grid-template-columns: 1fr;
    }
    .assessment-bank-card__head {
        flex-direction: column;
    }
    .assessment-bank-actions .secondary-button,
    .assessment-bank-actions .primary-button {
        width: 100%;
        justify-content: center;
    }
}

/* Comics review preview */
.review-section-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.review-section-title h2,
.comic-review-pages h2,
.comic-review-quiz h2,
.comic-review-history h2 {
  margin: 0 0 6px;
}

.review-section-title p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.comic-review-overview {
  display: grid;
  grid-template-columns: minmax(160px, 240px) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  margin-bottom: 16px;
}

.comic-review-cover,
.comic-review-page-art {
  border: 1px solid var(--line);
  background: var(--panel-soft);
  border-radius: 20px;
  overflow: hidden;
  min-height: 180px;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-weight: 850;
  text-align: center;
}

.comic-review-cover img,
.comic-review-page-art img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  display: block;
}

.comic-review-summary {
  min-width: 0;
}

.comic-review-meta-grid {
  margin-top: 0;
}

.comic-review-note-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 16px 0;
}

.comic-review-note-grid > div,
.comic-review-question-card,
.comic-review-history-list article {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel-soft);
  padding: 15px;
}

.comic-review-note-grid h3,
.comic-review-question-card h3 {
  margin: 0 0 8px;
}

.comic-review-note-grid p,
.comic-review-question-card p,
.comic-review-history-list p {
  margin: 0;
  color: var(--text);
  line-height: 1.6;
  white-space: normal;
  overflow-wrap: anywhere;
}

.comic-review-checklist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 10px;
  background: var(--panel-soft);
  margin: 16px 0 20px;
}

.comic-review-checklist span,
.comic-review-question-card span,
.comic-review-history-list span {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 850;
}

.comic-review-checklist strong {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  background: var(--panel);
  font-size: .78rem;
  white-space: nowrap;
}

.comic-review-pages,
.comic-review-quiz,
.comic-review-history {
  margin-top: 22px;
}

.comic-review-page-card {
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
  gap: 15px;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 14px;
  background: var(--panel);
  margin-top: 12px;
}

.comic-review-page-body {
  min-width: 0;
}

.comic-review-page-body h3 {
  margin: 0 0 8px;
}

.comic-review-page-body p:last-child {
  margin: 0;
  color: var(--text);
  line-height: 1.65;
  white-space: normal;
  overflow-wrap: anywhere;
}

.comic-review-question-card {
  margin-top: 12px;
  background: var(--panel);
}

.comic-review-history-list {
  display: grid;
  gap: 10px;
}

.comic-review-history-list article {
  background: var(--panel);
}

.comic-review-history-list strong,
.comic-review-history-list span {
  display: block;
}

@media (max-width: 900px) {
  .review-section-title,
  .comic-review-overview,
  .comic-review-note-grid,
  .comic-review-page-card {
    grid-template-columns: 1fr;
  }

  .review-section-title {
    display: grid;
  }

  .comic-review-cover,
  .comic-review-page-art {
    min-height: 220px;
  }

  .comic-review-checklist {
    border-radius: 20px;
  }
}


/* ============================================================
   System Searchable Dropdowns (opt-in)
   ============================================================ */
select[data-search-select].system-select-native {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 1px;
  opacity: 0;
  pointer-events: none;
  margin: 0;
  padding: 0;
}

.system-select {
  position: relative;
  width: 100%;
  min-width: 0;
}

.system-select-trigger {
  width: 100%;
  min-height: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--panel) 88%, var(--accent-soft) 12%);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.system-select-trigger:hover,
.system-select[data-open="true"] .system-select-trigger {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--focus);
}

.system-select-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 780;
}

.system-select-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--accent);
  background: var(--accent-soft);
  font-weight: 950;
}

.system-select-panel {
  position: absolute;
  z-index: 80;
  inset-inline: 0;
  top: calc(100% + 8px);
  display: none;
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  padding: 10px;
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--shadow);
}

.system-select[data-open="true"] .system-select-panel {
  display: grid;
  gap: 8px;
}

.system-select-search {
  min-height: 42px;
  border-radius: 14px;
  padding: 10px 12px;
  background: var(--panel-soft);
}

.system-select-list {
  display: grid;
  gap: 6px;
  max-height: 240px;
  overflow-y: auto;
  padding-right: 2px;
}

.system-select-option {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 10px 12px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font-weight: 720;
}

.system-select-option:hover,
.system-select-option.is-selected {
  border-color: var(--line-strong);
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.system-select-empty {
  padding: 12px;
  border-radius: 14px;
  background: var(--panel-soft);
  color: var(--muted);
  text-align: center;
  font-weight: 720;
}

@media (max-width: 768px) {
  .system-select-panel {
    position: static;
    margin-top: 8px;
  }
}

/* Pass 3: learning game assignment workflow */
.assignment-workspace .form-card {
  align-content: start;
}

.assignment-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.check-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
}

.check-card input {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--accent);
}

.check-card span {
  display: grid;
  gap: 4px;
}

.check-card strong {
  color: var(--text);
}

.check-card em {
  color: var(--muted);
  font-style: normal;
  line-height: 1.45;
}

.assigned-games-panel {
  margin-bottom: 18px;
}

.compact-assigned-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

@media (max-width: 768px) {
  .assignment-check-grid {
    grid-template-columns: 1fr;
  }

  .check-card {
    border-radius: 16px;
  }
}

/* Learning games question-bank media reuse */
.game-media-picker {
  margin-top: 1rem;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 26px;
  padding: 1rem;
  background: rgba(255, 255, 255, .035);
}
.game-media-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem;
  margin-top: .85rem;
}
.game-media-option {
  display: grid;
  grid-template-columns: auto minmax(86px, .35fr) minmax(0, 1fr);
  gap: .7rem;
  align-items: center;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 22px;
  padding: .7rem;
  background: rgba(255, 255, 255, .035);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.game-media-option:hover {
  transform: translateY(-1px);
  border-color: rgba(216, 177, 102, .48);
  background: rgba(216, 177, 102, .07);
}
.game-media-option input {
  inline-size: 18px;
  block-size: 18px;
}
.game-media-option img {
  width: 86px;
  height: 86px;
  object-fit: contain;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, .18);
  background: rgba(255,255,255,.92);
}
.game-media-option span {
  min-width: 0;
  display: grid;
  gap: .2rem;
}
.game-media-option strong,
.game-media-option small {
  overflow: hidden;
  text-overflow: ellipsis;
}
.game-media-option strong {
  color: var(--text, #f8fafc);
  font-size: .88rem;
  white-space: nowrap;
}
.game-media-option small {
  color: var(--muted, #94a3b8);
  font-size: .75rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.protected-preview-thumb {
  display: block;
  width: min(100%, 340px);
  max-height: 260px;
  object-fit: contain;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, .24);
  padding: .45rem;
  background: rgba(255,255,255,.92);
  margin: .5rem 0;
}
@media (max-width: 1080px) {
  .game-media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .game-media-grid { grid-template-columns: 1fr; }
  .game-media-option { grid-template-columns: auto 74px minmax(0, 1fr); }
  .game-media-option img { width: 74px; height: 74px; }
}