:root {
  --bg: #f3f5f2;
  --panel: #ffffff;
  --ink: #17201c;
  --muted: #6c746f;
  --line: #dfe4de;
  --green: #2563eb;
  --green-soft: #dbeafe;
  --amber: #b56a13;
  --amber-soft: #f7ead8;
  --red: #b84242;
  --red-soft: #f7dddd;
  --blue: #2563eb;
  --blue-soft: #dbeafe;
  --charcoal: #172033;
  --shadow: 0 18px 45px rgba(27, 36, 31, 0.08);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

button {
  font: inherit;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.app-shell {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  min-height: 100vh;
}

/* ---- Login gate ---- */
#loginScreen {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  place-items: center;
  padding: 24px;
  background: #111827;
}

body.pre-auth #loginScreen {
  display: grid;
}

body.pre-auth .app-shell {
  display: none;
}

.login-card {
  display: grid;
  gap: 14px;
  width: min(380px, 100%);
  padding: 28px;
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.login-sub {
  color: var(--muted);
  font-size: 12px;
}

.login-title {
  margin: 0;
  font-size: 22px;
}

.login-help {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.login-field {
  display: grid;
  gap: 6px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.login-field input {
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
  font: inherit;
  font-weight: 400;
}

.login-field input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
  outline: none;
}

.login-error {
  margin: 0;
  color: var(--red);
  font-size: 13px;
  font-weight: 700;
}

.login-card .primary-button {
  margin-top: 4px;
}

body.quiz-mode-active {
  background: #f8fbff;
}

body.quiz-mode-active .app-shell {
  display: block;
}

body.quiz-mode-active .sidebar,
body.quiz-mode-active .topbar,
body.quiz-mode-active .portal-section:not(#draftQuiz),
body.quiz-mode-active #draftQuiz > .section-title,
body.quiz-mode-active [data-bank-panel] {
  display: none !important;
}

body.quiz-mode-active .main {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 24px;
}

body.quiz-mode-active #draftQuiz {
  display: block;
}

body.quiz-mode-active #quizAttempt {
  min-height: calc(100vh - 48px);
}

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
  height: 100vh;
  padding: 24px 18px;
  background: #111827;
  color: #f6fbf8;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: #dbeafe;
  color: #1e3a8a;
  font-weight: 800;
  font-size: 22px;
}

.brand-name {
  font-weight: 800;
  font-size: 18px;
}

.brand-subtitle,
.switcher-label {
  color: #a9b7b0;
  font-size: 12px;
}

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

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #cfdbd5;
  cursor: pointer;
  text-align: left;
}

.nav-toggle {
  position: relative;
}

.nav-toggle .nav-chevron {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-left: auto;
  color: inherit;
  font-size: 16px;
  line-height: 1;
  translate: 0 -1px;
  transition: transform 160ms ease;
}

.nav-toggle.expanded .nav-chevron {
  transform: rotate(180deg);
}

.nav-item:hover,
.nav-item.active {
  background: #1e3a8a;
  color: #ffffff;
}

.nav-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: #bfdbfe;
}

/* ---- In-person feature lock ---- */
.nav-item.locked {
  cursor: not-allowed;
  color: #6b7686;
}

.nav-item.locked:hover {
  background: transparent;
  color: #6b7686;
}

.nav-item.locked .nav-icon {
  color: #586173;
}

.nav-item.locked::after {
  content: "";
  width: 14px;
  height: 14px;
  margin-left: auto;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237b8499' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}

[data-inperson].locked {
  position: relative;
  filter: grayscale(0.9);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
}

[data-inperson].locked::after {
  content: "In-person only";
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #eef2f6;
  color: #5b647d;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  filter: grayscale(0) opacity(1);
}

.nav-sublist {
  display: none;
  gap: 4px;
  padding: 2px 0 6px 46px;
}

.nav-sublist.expanded {
  display: grid;
}

.nav-subitem {
  min-height: 34px;
  border: 0;
  border-right: 3px solid transparent;
  background: transparent;
  color: #cfdbd5;
  cursor: pointer;
  text-align: left;
}

.nav-subitem.active {
  border-right-color: #ef4444;
  color: #ef4444;
  font-weight: 850;
}

.student-switcher {
  margin-top: auto;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}

.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-top: 10px;
  padding: 4px;
  border-radius: 8px;
  background: #0b110f;
}

.course-toggle {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.segment {
  min-height: 34px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #a9b7b0;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  text-align: center;
}

.segment.active {
  background: #dbeafe;
  color: #1e3a8a;
  font-weight: 700;
}

.main {
  min-width: 0;
  padding: 28px;
}

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

.eyebrow {
  margin: 0 0 4px;
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: 30px;
  line-height: 1.15;
}

h2 {
  margin-bottom: 4px;
  font-size: 18px;
}

h3 {
  margin-bottom: 8px;
  font-size: 16px;
}

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

.icon-button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
}

.avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: var(--charcoal);
  color: white;
  font-weight: 800;
}

.portal-section {
  display: none;
}

.portal-section.active {
  display: block;
}

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

.summary-grid.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 20px;
}

.focus-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 16px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.focus-card h2 {
  margin-bottom: 8px;
  font-size: 22px;
}

.focus-card p:last-child {
  max-width: 720px;
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.45;
}

.metric-card,
.panel,
.homework-item,
.weakness-card,
.practice-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.metric-card {
  display: grid;
  gap: 6px;
  min-height: 120px;
  padding: 18px;
}

.metric-label,
.metric-note,
.table-meta,
.quiz-meta,
.subtext {
  color: var(--muted);
  font-size: 13px;
}

.metric-card strong {
  overflow-wrap: anywhere;
  font-size: 24px;
  line-height: 1.1;
}

.positive {
  color: var(--green);
}

.warning {
  color: var(--amber);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.8fr);
  gap: 16px;
}

.dashboard-grid.lower {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-top: 16px;
}

.panel {
  min-width: 0;
  padding: 20px;
}

.learning-profile-panel {
  padding: 16px;
}

.learning-profile-panel .panel-header {
  margin-bottom: 8px;
}

.panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.panel-header p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 13px;
}

.panel-header.compact {
  align-items: center;
  margin-bottom: 14px;
}

.small-button,
.primary-button {
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 750;
}

.small-button {
  min-height: 34px;
  padding: 0 12px;
  background: var(--green-soft);
  color: var(--green);
}

.primary-button {
  width: 100%;
  min-height: 42px;
  background: var(--green);
  color: white;
}

.submit-quiz-button {
  width: auto;
  min-width: 118px;
  padding: 0 14px;
  background: var(--blue);
}

.danger-button {
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: var(--red);
  color: #ffffff;
  cursor: pointer;
  font-weight: 850;
}

.learning-profile-diagrams {
  display: grid;
  gap: 8px;
}

.mastery-list {
  display: grid;
  gap: 16px;
}

.mastery-row {
  display: grid;
  gap: 6px;
}

.mastery-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.mastery-name {
  font-weight: 750;
}

.mastery-pct {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.mastery-flag {
  color: var(--red);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.mastery-meta {
  color: var(--muted);
  font-size: 12px;
}

.mastery-foot {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.profile-toggle {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(130px, 1fr));
  gap: 4px;
  width: min(100%, 280px);
  padding: 3px;
  border: 1px solid #cbd8e8;
  border-radius: 8px;
  background: #f1f6ff;
}

.profile-toggle button {
  min-height: 30px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #1e3a8a;
  cursor: pointer;
  font-weight: 850;
}

.profile-toggle button.active {
  background: var(--blue);
  color: #ffffff;
}

.diagram-grid {
  display: grid;
  gap: 14px;
}

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

.profile-diagram-card {
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
}

.profile-diagram-card h3 {
  margin-bottom: 6px;
  color: var(--ink);
  font-size: 16px;
}

.profile-radar-svg {
  display: block;
  width: 100%;
  max-height: 330px;
}

.diagram-ring {
  fill: none;
  stroke: #cfdaf0;
  stroke-width: 1;
}

.diagram-axis {
  stroke: #d8e2f2;
  stroke-width: 1;
}

.diagram-fill {
  fill: rgba(37, 99, 235, 0.22);
  stroke: var(--blue);
  stroke-width: 3;
}

.diagram-label {
  fill: #1e3a8a;
  font-size: 18px;
  font-weight: 850;
  cursor: help;
}

.diagram-tooltip {
  position: fixed;
  z-index: 1000;
  max-width: 260px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #111827;
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  pointer-events: none;
  box-shadow: 0 12px 28px rgba(17, 24, 39, 0.24);
}

.skill-list,
.table-list,
.practice-list,
.homework-board,
.weakness-grid {
  display: grid;
  gap: 12px;
}

.skill-list.simple {
  gap: 10px;
}

.skill-row {
  display: grid;
  grid-template-columns: minmax(110px, 150px) minmax(0, 1fr) 46px;
  gap: 12px;
  align-items: center;
}

.progress {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf1ee;
}

.progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--green);
}

.progress.low span {
  background: var(--red);
}

.progress.mid span {
  background: var(--amber);
}

.next-task {
  display: grid;
  gap: 12px;
}

.task-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: var(--blue-soft);
  color: var(--blue);
  font-weight: 900;
  font-size: 24px;
}

.next-task p {
  color: var(--muted);
  line-height: 1.45;
}

.table-row,
.quiz-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.table-row:first-child,
.quiz-row:first-child {
  border-top: 0;
}

.score-pill,
.status-pill,
.tag {
  display: inline-grid;
  place-items: center;
  min-height: 28px;
  border-radius: 999px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
}

.score-pill {
  background: var(--green-soft);
  color: var(--green);
}

.score-pill.mid,
.status-pill.due {
  background: var(--amber-soft);
  color: var(--amber);
}

.status-pill.future {
  background: #eef2ef;
  color: #66716b;
}

.score-pill.low,
.status-pill.overdue {
  background: var(--red-soft);
  color: var(--red);
}

.bar-chart {
  display: grid;
  grid-template-columns: repeat(10, minmax(32px, 1fr));
  align-items: end;
  gap: 12px;
  min-height: 220px;
  padding-top: 10px;
}

.bar-wrap {
  display: grid;
  gap: 8px;
  align-items: end;
  height: 200px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.bar {
  align-self: end;
  min-height: 18px;
  border-radius: 7px 7px 3px 3px;
  background: linear-gradient(180deg, #2563eb, #14b8a6);
}

.bar.future {
  background: #d8dfdb;
}

.section-title {
  margin-bottom: 16px;
}

.section-title.tight {
  margin-top: 20px;
  margin-bottom: 10px;
}

.section-title p {
  max-width: 680px;
  color: var(--muted);
}

.homework-board {
  display: grid;
  gap: 0;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.homework-row:first-child {
  border-top: 0;
}

.homework-item,
.weakness-card,
.practice-card {
  padding: 18px;
}

.homework-top,
.weakness-top,
.practice-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.wrong-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.wrong-list.compact {
  margin-top: 8px;
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  background: #eef2ef;
  color: #415047;
}

.answer-key {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  margin-bottom: 12px;
  padding: 0 12px;
  border-radius: 8px;
  background: #f8fbff;
  color: var(--ink);
  font-weight: 800;
}

.solution-body {
  display: grid;
  gap: 10px;
  color: #25302a;
  font-size: 15px;
  line-height: 1.55;
}

.solution-body .solution-steps {
  display: grid;
  gap: 10px;
}

.solution-part,
.solution-paragraph {
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.solution-diagram-placeholder {
  display: grid;
  gap: 4px;
  margin: 10px 0;
  padding: 14px;
  border: 1px dashed #9db2cc;
  border-radius: 8px;
  background: #ffffff;
  text-align: center;
}

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

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

.lower-single {
  margin-top: 16px;
}

.weakness-card {
  border-top: 4px solid var(--green);
}

.weakness-card.urgent {
  border-top-color: var(--red);
}

.weakness-card.developing {
  border-top-color: var(--amber);
}

.weakness-score {
  display: grid;
  gap: 4px;
  justify-items: end;
}

.weakness-score small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.evidence-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
}

.evidence-list button {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  border: 0;
  border-radius: 999px;
  background: var(--blue-soft);
  color: #1e3a8a;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

.evidence-list button:hover {
  background: var(--blue);
  color: #ffffff;
}

.cause-list {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.cause-list li {
  padding: 10px;
  border-radius: 8px;
  background: #f7f9f7;
  color: #3e4944;
  font-size: 13px;
}

.next-action {
  margin-top: 12px;
  padding: 12px;
  border-radius: 8px;
  background: #f8fbff;
  border: 1px solid #d7e2ef;
}

.next-action strong {
  display: block;
  margin-bottom: 4px;
  color: #1e3a8a;
  font-size: 12px;
  text-transform: uppercase;
}

.next-action p {
  margin: 0;
  color: #2c3630;
  font-size: 13px;
  line-height: 1.45;
}

.evidence-detail {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

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

.evidence-detail-head span,
.evidence-detail-grid h4 {
  color: var(--blue);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.evidence-detail-head h3 {
  margin-top: 4px;
}

.evidence-detail-head strong {
  white-space: nowrap;
}

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

.evidence-detail-grid section {
  padding: 12px;
  border-radius: 8px;
  background: #f8fbff;
}

.evidence-detail-grid p {
  margin: 6px 0 0;
  color: #2c3630;
  font-size: 13px;
  line-height: 1.45;
}


.practice-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.bank-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.bank-card {
  display: grid;
  gap: 6px;
  min-height: 92px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.bank-card span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

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

.topic-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.topic-card h3 {
  margin-bottom: 6px;
}

.subtopic-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

.subtopic-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #d8e2da;
  border-radius: 999px;
  background: #f7faf8;
  color: #34433a;
  font-size: 12px;
  font-weight: 750;
}

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

.lesson-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid #cbd8e8;
  border-radius: 999px;
  background: #f8fbff;
  color: #1e3a8a;
  font-size: 12px;
  font-weight: 800;
}

.muted-chip {
  color: var(--muted);
}

.quiz-draft-layout {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.quiz-attempt {
  display: grid;
  gap: 16px;
}

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

.bank-mode-card {
  position: relative;
  display: grid;
  gap: 8px;
  width: 100%;
  min-height: 120px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.bank-mode-card::after {
  content: "›";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-54%);
  color: #1e3a8a;
  font-size: 24px;
  line-height: 1;
  font-weight: 850;
}

.bank-mode-card strong,
.bank-mode-card span {
  padding-right: 26px;
}

.bank-mode-card strong {
  color: var(--ink);
  font-size: 17px;
}

.bank-mode-card span {
  color: var(--muted);
  line-height: 1.45;
}

.bank-mode-card:hover,
.bank-mode-card.selected {
  border-color: #7dd3fc;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

.history-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.history-toggle button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-weight: 850;
}

.history-toggle button.active {
  border-color: #7dd3fc;
  background: #f8fbff;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

.history-toggle strong {
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--blue);
  color: #ffffff;
  font-size: 12px;
}

.history-list {
  display: grid;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.history-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.history-row:first-child {
  border-top: 0;
}

.history-row.reviewable {
  cursor: pointer;
  margin: 0 -14px;
  padding-right: 14px;
  padding-left: 14px;
  border-radius: 8px;
  transition: background 0.12s ease;
}

.history-row.reviewable:hover,
.history-row.reviewable:focus-visible {
  background: #f8fbff;
  outline: none;
}

.review-hint {
  color: var(--blue);
  font-weight: 800;
}

.internal-task-panel,
.trial-exam-panel {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.trial-open-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 42px;
  padding: 0 18px;
  text-decoration: none;
}

.exam-manual-panel {
  margin-top: 18px;
}

.upload-card input {
  max-width: 100%;
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
}

.practice-controls {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) minmax(180px, 1.2fr) 130px auto;
  gap: 12px;
  align-items: end;
}

.practice-controls label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.practice-controls select {
  min-height: 40px;
  border: 1px solid #cbd8e8;
  border-radius: 8px;
  background: #f8fbff;
  color: var(--ink);
  padding: 0 10px;
  font: inherit;
  text-transform: none;
}

.practice-question-list {
  margin-top: 16px;
}

.attempt-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.attempt-header h2 {
  margin: 12px 0 4px;
  font-size: 24px;
}

.attempt-header p {
  margin: 0;
  color: var(--muted);
}

.timer-panel {
  display: grid;
  gap: 4px;
  min-width: 150px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--blue-soft);
  color: #1e3a8a;
  text-align: right;
}

.attempt-actions {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.timer-panel span {
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.timer-panel strong {
  font-size: 28px;
  line-height: 1;
}

.attempt-progress {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  text-align: right;
}

.quiz-filter-bar {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) 130px;
  gap: 12px;
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.quiz-filter-bar label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.quiz-filter-bar select {
  min-height: 40px;
  width: 100%;
  border: 1px solid #cbd8e8;
  border-radius: 8px;
  background: #f8fbff;
  color: var(--ink);
  padding: 0 10px;
  font: inherit;
  text-transform: none;
}

.quiz-builder {
  display: grid;
  gap: 16px;
  margin-bottom: 16px;
}

.builder-panel {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.builder-step {
  display: none;
}

.builder-step.active {
  display: block;
}

.builder-title {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.builder-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: var(--ink);
  font-weight: 900;
}

.builder-title h2 {
  margin-bottom: 4px;
  font-size: 26px;
}

.builder-title p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 16px;
}

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

.subject-card {
  display: grid;
  gap: 10px;
  min-height: 118px;
  padding: 24px 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.subject-card:hover,
.subject-card.selected {
  border-color: #7dd3fc;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

.subject-card strong {
  font-size: 18px;
}

.subject-card span {
  color: var(--muted);
  font-size: 15px;
}

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

.topic-check-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 76px;
  padding: 0 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  font-size: 18px;
  font-weight: 750;
  line-height: 1.25;
}

.topic-check-row input {
  width: 22px;
  height: 22px;
  accent-color: var(--blue);
}

.builder-footer {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

.settings-footer {
  align-items: stretch;
  justify-content: space-between;
}

.mode-controls {
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
}

.builder-footer label {
  display: grid;
  gap: 6px;
  width: 140px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.builder-footer select {
  min-height: 40px;
  border: 1px solid #cbd8e8;
  border-radius: 8px;
  background: #f8fbff;
  padding: 0 10px;
  font: inherit;
}

.quiz-mode {
  width: 210px;
  margin-top: 0;
  background: #f1f6ff;
  border: 1px solid #cbd8e8;
}

.quiz-mode .segment {
  color: #1e3a8a;
}

.hidden {
  display: none !important;
}

.generate-button {
  width: auto;
  min-width: 150px;
  padding: 0 18px;
}

.quiz-summary-panel {
  position: sticky;
  top: 28px;
}

.quiz-scorebox {
  display: grid;
  gap: 6px;
  margin-bottom: 16px;
  padding: 16px;
  border-radius: 8px;
  background: var(--blue-soft);
  color: #1e3a8a;
}

.quiz-scorebox strong {
  font-size: 28px;
  line-height: 1;
}

.quiz-scorebox span {
  font-weight: 800;
}

.draft-breakdown {
  display: grid;
  gap: 12px;
}

.draft-topic-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.draft-topic-row .progress {
  grid-column: 1 / -1;
}

.download-link {
  display: grid;
  place-items: center;
  min-height: 40px;
  margin-top: 16px;
  border-radius: 8px;
  background: var(--blue);
  color: white;
  font-weight: 800;
  text-decoration: none;
}

.draft-question-list {
  display: grid;
  gap: 14px;
}

.page-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-top: 4px;
}

.page-controls button {
  min-height: 38px;
  min-width: 38px;
  border: 1px solid #cbd8e8;
  border-radius: 8px;
  background: #ffffff;
  color: #1e3a8a;
  cursor: pointer;
  font-weight: 850;
}

.page-controls button.active {
  border-color: var(--blue);
  background: var(--blue);
  color: white;
}

.page-controls button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.page-number-list {
  display: flex;
  gap: 6px;
}

.draft-question-card {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.draft-question-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.question-index {
  color: var(--blue);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.question-text {
  color: #2c3630;
  line-height: 1.5;
}

.question-marks {
  color: var(--muted);
  font-size: 0.95em;
  font-weight: 600;
  white-space: nowrap;
}

.question-options {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
  border-radius: 8px;
  background: #f8fbff;
  color: #2c3630;
}

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

.mc-option {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #cbd8e8;
  border-radius: 8px;
  background: #ffffff;
  color: #2c3630;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.mc-option:hover:not(:disabled) {
  border-color: #8eb0df;
  background: #f8fbff;
}

.mc-option.selected {
  border-color: var(--blue);
  background: #eef4ff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.mc-option.correct {
  border-color: #2f9e62;
  background: #edf9f1;
}

.mc-option.incorrect {
  border-color: #d95b5b;
  background: #fff3f3;
}

.mc-option:disabled {
  cursor: default;
}

.mc-option-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #edf2f8;
  color: var(--ink);
  font-weight: 800;
}

.mc-option.selected .mc-option-letter {
  background: var(--blue);
  color: #ffffff;
}

.mc-option.correct .mc-option-letter {
  background: #2f9e62;
  color: #ffffff;
}

.mc-option.incorrect .mc-option-letter {
  background: #d95b5b;
  color: #ffffff;
}

.mc-option-text {
  line-height: 1.45;
}

/* Graphical multiple choice: A–D as a 2×2 grid of image tiles. */
.mc-option-list--image {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mc-option--image {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 8px;
}

.mc-option--image .mc-option-letter {
  justify-self: start;
}

.mc-option-image {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  background: #ffffff;
  border-radius: 6px;
}

@media (max-width: 640px) {
  .mc-option-list--image {
    grid-template-columns: 1fr;
  }
}

/* Collapsible "earlier parts of this question" context panel. */
.earlier-parts {
  margin: 0 0 14px;
  border: 1px solid #d7e0ec;
  border-radius: 8px;
  background: #f6f9fd;
}

.earlier-parts > summary {
  cursor: pointer;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  color: #3a5169;
  list-style: none;
}

.earlier-parts > summary::-webkit-details-marker {
  display: none;
}

.earlier-parts > summary::before {
  content: "▸ ";
}

.earlier-parts[open] > summary::before {
  content: "▾ ";
}

.earlier-parts-body {
  padding: 4px 14px 12px;
  display: grid;
  gap: 12px;
}

.earlier-part {
  border-top: 1px solid #e3e9f1;
  padding-top: 10px;
}

.earlier-part-label {
  display: inline-block;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 4px;
}

.earlier-part-stem {
  line-height: 1.45;
  font-size: 14px;
}

.earlier-part-sol {
  margin-top: 6px;
  font-size: 13px;
}

.earlier-part-sol > summary {
  cursor: pointer;
  color: var(--blue);
  font-weight: 600;
}

.mc-answer-summary {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.mc-answer-summary.correct {
  color: #1f7a4d;
}

.mc-answer-summary.incorrect {
  color: #b42318;
}

.answer-box {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.answer-box label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.answer-box textarea {
  width: 100%;
  min-height: 130px;
  resize: vertical;
  border: 1px solid #cbd8e8;
  border-radius: 8px;
  background: #f8fbff;
  color: var(--ink);
  padding: 12px;
  font: inherit;
  line-height: 1.45;
}

.answer-box textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
  outline: none;
}

.answer-box textarea:disabled {
  color: #53615a;
  background: #f4f7f6;
}

.quiz-solution-block {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #cbd8e8;
  border-radius: 8px;
  background: #f8fbff;
}

.quiz-solution-block.missing {
  border-color: #d8dfdb;
  background: #f7f9f7;
}

.quiz-solution-block.missing p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.quiz-solution-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.quiz-solution-head span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.solution-body.compact {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.solution-rendered {
  display: grid;
  gap: 16px;
}

.solution-rendered .solution-part {
  display: grid;
  gap: 12px;
}

.solution-rendered .solution-part + .solution-part {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid #dfe8f4;
}

.solution-rendered .solution-part-label {
  color: #35506f;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.solution-rendered .solution-paragraph {
  display: grid;
  gap: 3px;
}

.solution-rendered .solution-paragraph + .solution-paragraph {
  margin-top: 14px;
}

.solution-rendered .solution-line {
  line-height: 1.55;
}

.solution-rendered .solution-line-block {
  margin: 4px 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #e6eef8;
  overflow-x: auto;
}

.solution-rendered .solution-step-label {
  display: inline-block;
  margin-right: 0.35em;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.source-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.source-links a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: #1e3a8a;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.q-diagram {
  display: block;
  max-width: min(460px, 100%);
  height: auto;
  margin: 14px 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.sol-table {
  border-collapse: collapse;
  margin: 10px 0;
  font-size: 0.95em;
}

.sol-table th,
.sol-table td {
  padding: 6px 12px;
  border: 1px solid var(--line);
  text-align: center;
  white-space: nowrap;
}

.sol-table th {
  background: #f3f6fb;
  font-weight: 800;
}

.self-mark {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.self-mark label {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.self-mark .mark-control {
  margin-top: 8px;
}

.mark-control {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}

.mark-control button {
  min-width: 34px;
  height: 34px;
  border: 1px solid #cbd8e8;
  border-radius: 8px;
  background: #f8fbff;
  color: #1e3a8a;
  cursor: pointer;
  font-weight: 800;
}

.mark-control button.selected {
  border-color: var(--blue);
  background: var(--blue);
  color: white;
}

.empty-state {
  display: grid;
  place-items: center;
  min-height: 320px;
  padding: 36px;
  border: 1px dashed #bfc9c2;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.62);
  text-align: center;
}

.empty-state h2 {
  font-size: 22px;
}

.empty-state p {
  max-width: 580px;
  color: var(--muted);
  line-height: 1.55;
}

@media (max-width: 1100px) {
  .summary-grid,
  .homework-board,
  .weakness-grid,
  .bank-grid,
  .topic-grid,
  .subject-grid,
  .lesson-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .summary-grid.compact,
  .weakness-grid.simple {
    grid-template-columns: 1fr;
  }

  .topic-check-list {
    grid-template-columns: 1fr;
  }

  .dashboard-grid,
  .dashboard-grid.lower,
  .quiz-draft-layout,
  .quiz-filter-bar {
    grid-template-columns: 1fr;
  }

  .quiz-summary-panel {
    position: static;
  }
}

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

  .sidebar {
    position: static;
    height: auto;
  }

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

  .main {
    padding: 18px;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .summary-grid,
  .homework-board,
  .weakness-grid,
  .bank-grid,
  .topic-grid,
  .subject-grid,
  .lesson-grid,
	  .diagram-grid.two {
	    grid-template-columns: 1fr;
	  }

	  .bank-mode-grid {
	    grid-template-columns: 1fr;
	  }

	  .history-toggle {
	    grid-template-columns: 1fr;
	  }

	  .practice-controls {
	    grid-template-columns: 1fr;
	  }

	  .evidence-detail-grid {
	    grid-template-columns: 1fr;
	  }

	  .focus-card {
	    align-items: stretch;
	    flex-direction: column;
	  }

	  .skill-row,
	  .practice-card,
	  .draft-question-head,
	  .attempt-header {
	    grid-template-columns: 1fr;
	    flex-direction: column;
	  }

	  .attempt-header {
	    align-items: stretch;
	  }

	  .timer-panel {
	    text-align: left;
	  }

	  .attempt-actions {
	    flex-direction: column;
	  }
	}

/* ---- Question-bank directory (search + drill-down) ---- */
.bank-search {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid #d7dceb;
  border-radius: 10px;
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
  background: #fff;
}
.bank-search:focus { outline: none; border-color: #6b7cff; box-shadow: 0 0 0 3px rgba(107,124,255,0.15); }
.bank-type-wrap { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.85rem; }
.bank-type-label { font-size: 0.75rem; font-weight: 600; color: #8089a3; text-transform: uppercase; letter-spacing: 0.04em; }
.bank-type-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.bank-type-row .topic-check-row.compact {
  min-height: 0;
  padding: 0.3rem 0.75rem;
  gap: 7px;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: 999px;
}
.bank-type-row .topic-check-row.compact input { width: 15px; height: 15px; }
.bank-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.6rem; font-size: 0.85rem; }
.bank-crumb {
  background: none; border: none; cursor: pointer;
  color: #5566dd; padding: 0.15rem 0.3rem; border-radius: 6px; font-size: 0.85rem;
}
.bank-crumb:hover { background: #eef1ff; }
.bank-crumb.current { color: #1b2333; font-weight: 600; cursor: default; }
.bank-crumb.current:hover { background: none; }
.bank-sep { color: #9aa3bd; }
.bank-node-list { display: flex; flex-direction: column; gap: 0.4rem; }
.bank-node-row {
  display: flex; align-items: center; gap: 0.75rem;
  width: 100%; text-align: left;
  padding: 0.7rem 0.9rem;
  background: #fff; border: 1px solid #e3e7f2; border-radius: 10px;
  cursor: pointer; font-size: 0.95rem; transition: border-color 0.12s, background 0.12s;
}
.bank-node-row:hover { border-color: #6b7cff; background: #f7f8ff; }
.bank-node-row.leaf { border-style: dashed; }
.bank-node-name { flex: 1; display: flex; flex-direction: column; color: #1b2333; }
.bank-node-name small { color: #8089a3; font-size: 0.75rem; margin-top: 0.1rem; }
.bank-count {
  min-width: 2.5rem; text-align: right;
  color: #5b647d; font-variant-numeric: tabular-nums; font-size: 0.85rem;
}
.bank-arrow { color: #b3b9cc; font-size: 0.9rem; }
.bank-empty { color: #8089a3; padding: 1rem 0; }

/* optional skill chips shown once a subtopic is selected */
.bank-skill-hint { color: #8089a3; font-size: 0.82rem; margin: 0.2rem 0 0.6rem; }
.bank-skill-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.bank-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.7rem; border-radius: 999px;
  background: #fff; border: 1px solid #e3e7f2; color: #2c3550;
  cursor: pointer; font-size: 0.85rem; transition: border-color 0.12s, background 0.12s;
}
.bank-chip:hover { border-color: #6b7cff; background: #f7f8ff; }
.bank-chip.active { border-color: var(--blue, #2563eb); background: #eef4ff; color: #1b2333; font-weight: 600; }
.bank-chip-count { color: #8089a3; font-variant-numeric: tabular-nums; font-size: 0.78rem; }
.bank-chip.active .bank-chip-count { color: #4a6bd6; }

.bank-year {
  display: inline-block; font-size: 0.62rem; font-weight: 700;
  padding: 0.12rem 0.38rem; border-radius: 5px; margin-right: 0.5rem;
  letter-spacing: 0.02em; flex: none;
}
.bank-year.y11 { background: #eaf3ff; color: #2b6cb0; }
.bank-year.y12 { background: #fdeefe; color: #9b2c8f; }

/* ---- Tutor dashboard (Phase 3/4) ---- */
.tutor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
  margin-bottom: 18px;
}
.tutor-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted, #64748b);
}
.tutor-student-pick {
  min-width: 220px;
}
.tutor-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding-bottom: 10px;
}
.tutor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}
.tutor-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.tutor-form .primary-button {
  grid-column: 1 / -1;
}
.tutor-form input,
.tutor-form select,
.tutor-field input,
.tutor-field select {
  padding: 9px 11px;
  border: 1px solid rgba(100, 116, 139, 0.35);
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  background: #fff;
}
.tutor-row-end {
  display: flex;
  align-items: center;
  gap: 8px;
}