:root {
  --bg: #f6f2ea;
  --bg-accent: #e4edff;
  --card: #fffdf9;
  --text: #0f172a;
  --muted: #566074;
  --accent: #1f4b8f;
  --accent-2: #d97706;
  --line: #d7dde8;
  --shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
  --accent-soft: #e8f0ff;
  --accent-warm: #fff3e0;
  --chart-surface: #fbfcff;
  --chart-surface-soft: #eef5ff;
  --chart-text: #14213d;
  --chart-muted: #52627a;
  --chart-grid: #d8e2f0;
}

/* Shared merit analytics for admin, principal, and teacher exam views. */
.merit-analytics-page {
  display: grid;
  gap: 16px;
  --merit-navy: #0a3151;
  --merit-teal: #0f766e;
  --merit-gold: #d58a12;
  --merit-ink: #0f172a;
  --merit-muted: #64748b;
  --merit-line: #dbe4f0;
}

.merit-analytics-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
  min-height: 175px;
  padding: 26px 26px 26px 32px;
  overflow: hidden;
  border: 1px solid var(--merit-line);
  border-radius: 24px;
  color: var(--merit-navy);
  background:
    radial-gradient(circle at 94% 6%, rgba(15, 118, 110, .08), transparent 36%),
    linear-gradient(135deg, #ffffff 0%, #f3f8fa 100%);
  box-shadow: 0 16px 40px rgba(15, 42, 63, .08);
}

/* Colored accent rail carries the brand without tinting the text area. */
.merit-analytics-hero::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: linear-gradient(180deg, #0f766e 0%, #0a3151 100%);
}

.merit-analytics-hero.is-subject {
  background:
    radial-gradient(circle at 94% 6%, rgba(180, 120, 8, .09), transparent 36%),
    linear-gradient(135deg, #ffffff 0%, #f6f7fb 100%);
}
.merit-analytics-hero.is-subject::before {
  background: linear-gradient(180deg, #b47808 0%, #0a3151 100%);
}

.merit-analytics-hero > * { position: relative; z-index: 1; }
.merit-analytics-hero .admin-page-kicker { margin: 0 0 6px; color: #0f766e; }
.merit-analytics-hero.is-subject .admin-page-kicker { color: #a06a06; }
.merit-analytics-hero h2 { margin: 0; color: var(--merit-navy); font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.02; letter-spacing: -.045em; }
.merit-analytics-hero p:not(.admin-page-kicker) { margin: 10px 0 0; color: var(--merit-muted); font-size: .86rem; }
.merit-analytics-hero small { display: block; margin-top: 5px; color: #0f766e; font-weight: 800; }

.merit-analytics-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; max-width: 430px; }
.merit-analytics-actions a,
.merit-analytics-actions span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid var(--merit-line);
  border-radius: 999px;
  color: var(--merit-navy);
  font-size: .72rem;
  font-weight: 900;
  text-decoration: none;
  background: #ffffff;
}
.merit-analytics-actions a:hover,
.merit-analytics-actions a:focus-visible { border-color: #0a3151; color: #fff; background: #0a3151; outline: none; }
.merit-analytics-actions span[aria-disabled="true"] { color: var(--merit-muted); background: #eef2f6; opacity: 1; }

.merit-analytics-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.merit-analytics-kpis article {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 124px;
  padding: 16px;
  border: 1px solid var(--merit-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
}
.merit-analytics-kpis article.is-featured { border-color: #a9d9d1; background: linear-gradient(145deg, #edf9f6, #fff 74%); }
.merit-analytics-kpis span,
.merit-panel-head > div > span { color: var(--merit-muted); font-size: .66rem; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.merit-analytics-kpis strong { color: var(--merit-ink); font-size: clamp(1.55rem, 3vw, 2.15rem); line-height: 1; letter-spacing: -.04em; }
.merit-analytics-kpis strong small { color: var(--merit-muted); font-size: .7rem; letter-spacing: 0; }
.merit-analytics-kpis b { color: var(--merit-muted); font-size: .7rem; line-height: 1.35; overflow-wrap: anywhere; }

.merit-analytics-visual-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 12px; }
.merit-chart-panel,
.merit-subject-panel,
.merit-analytics-table-card {
  display: grid;
  gap: 16px;
  min-width: 0;
  margin-bottom: 0;
  padding: 18px;
  border: 1px solid var(--merit-line);
  border-radius: 20px;
  box-shadow: 0 16px 36px rgba(15, 23, 42, .07);
}
.merit-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.merit-panel-head h3 { margin: 4px 0 0; color: var(--merit-navy); font-size: 1.16rem; line-height: 1.2; }
.merit-panel-head p { max-width: 650px; margin: 5px 0 0; color: var(--merit-muted); font-size: .76rem; line-height: 1.45; }
.merit-panel-head > strong { flex: 0 0 auto; padding: 6px 9px; border-radius: 999px; color: #0f5f59; font-size: .68rem; background: #e8f7f3; }

.merit-distribution-layout { display: grid; grid-template-columns: minmax(170px, .75fr) minmax(180px, 1.25fr); align-items: center; gap: 14px; }
.merit-donut-wrap { position: relative; min-height: 230px; }
.merit-donut-wrap canvas { width: 100% !important; height: 230px !important; }
.merit-donut-center { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; transform: translate(-50%, -50%); pointer-events: none; }
.merit-donut-center strong { color: var(--merit-ink); font-size: 1.55rem; line-height: 1; }
.merit-donut-center span { margin-top: 3px; color: var(--merit-muted); font-size: .62rem; font-weight: 900; text-transform: uppercase; }
.merit-band-legend { display: grid; gap: 7px; }
.merit-band-legend > div { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 7px; min-width: 0; padding: 8px 9px; border: 1px solid #e4ebf3; border-radius: 11px; background: #f8fbff; }
.merit-band-legend i { width: 9px; height: 9px; border-radius: 50%; background: var(--band-color); }
.merit-band-legend span { min-width: 0; overflow: hidden; color: #334155; font-size: .7rem; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.merit-band-legend strong { color: var(--merit-ink); font-size: .78rem; }
.merit-band-legend small { min-width: 34px; color: var(--merit-muted); font-size: .64rem; text-align: right; }

.merit-line-chart { position: relative; min-height: 290px; }
.merit-line-chart canvas { width: 100% !important; height: 290px !important; }
.merit-trend-fallback { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px; }
.merit-trend-fallback[hidden] { display: none; }
.merit-trend-fallback > div { display: grid; gap: 2px; padding: 8px; border: 1px solid #e4ebf3; border-radius: 10px; background: #f8fbff; }
.merit-trend-fallback > div.is-current { border-color: #a9d9d1; background: #edf9f6; }
.merit-trend-fallback span,
.merit-trend-fallback small { color: var(--merit-muted); font-size: .62rem; }
.merit-trend-fallback strong { color: var(--merit-ink); font-size: .88rem; }
.merit-visual-empty { display: grid; place-items: center; min-height: 150px; padding: 20px; border: 1px dashed #c9d6e4; border-radius: 14px; color: var(--merit-muted); font-size: .78rem; text-align: center; background: #f8fbff; }

.merit-subject-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.merit-subject-grid > article { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; min-width: 0; padding: 12px; border: 1px solid #e1e9f2; border-radius: 14px; background: linear-gradient(145deg, #fff, #f8fbff); }
.merit-subject-grid article > div:first-child { display: grid; gap: 2px; min-width: 0; }
.merit-subject-grid article > div strong { color: var(--merit-ink); font-size: .78rem; overflow-wrap: anywhere; }
.merit-subject-grid article > div span,
.merit-subject-grid article > small { color: var(--merit-muted); font-size: .64rem; }
.merit-subject-grid article > b { color: var(--merit-navy); font-size: 1.08rem; }
.merit-subject-grid article > b small { margin-left: 2px; color: var(--merit-muted); font-size: .58rem; }
.merit-subject-track { grid-column: 1 / -1; height: 7px; overflow: hidden; border-radius: 999px; background: #e4ebf3; }
.merit-subject-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #28658f, #0f766e); }

.merit-leaders-section { display: grid; gap: 16px; padding: 18px; border: 1px solid #d4e0eb; border-radius: 20px; background: radial-gradient(circle at 50% 0%, rgba(213, 138, 18, .12), transparent 33%), linear-gradient(180deg, #fff, #f8fbff); box-shadow: 0 16px 36px rgba(15, 23, 42, .07); }
.merit-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 9px; max-width: 920px; width: 100%; margin: 0 auto; }
.merit-podium article { position: relative; display: grid; place-items: center; align-content: center; gap: 5px; min-width: 0; min-height: 150px; padding: 18px 12px; border: 1px solid #d9e3ed; border-radius: 18px; text-align: center; background: #fff; box-shadow: 0 12px 26px rgba(15, 23, 42, .07); }
.merit-podium article.is-first { min-height: 182px; border-color: #e5c36c; background: linear-gradient(160deg, #fff9e8, #fff 72%); box-shadow: 0 18px 34px rgba(160, 105, 13, .14); }
.merit-podium article.is-second { background: linear-gradient(160deg, #f1f5f9, #fff 72%); }
.merit-podium article.is-third { background: linear-gradient(160deg, #fff2e8, #fff 72%); }
.merit-podium article > i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #fff; font-size: 1rem; font-style: normal; font-weight: 950; background: #718096; }
.merit-podium .is-first > i { width: 46px; height: 46px; background: var(--merit-gold); }
.merit-podium .is-third > i { background: #a76538; }
.merit-podium em { position: absolute; top: 9px; right: 9px; padding: 4px 7px; border-radius: 999px; color: #86580e; font-size: .58rem; font-style: normal; font-weight: 950; text-transform: uppercase; background: #fff0bf; }
.merit-podium article > strong { max-width: 100%; color: var(--merit-ink); font-size: .86rem; line-height: 1.25; overflow-wrap: anywhere; }
.merit-podium article > span,
.merit-podium article > small { color: var(--merit-muted); font-size: .66rem; }
.merit-podium article > b { color: var(--merit-teal); font-size: 1.25rem; }

.merit-analytics-table-card .analytics-toolbar { margin: 0; padding: 10px 12px; border: 1px solid #e1e9f2; border-radius: 13px; background: #f8fbff; }
.merit-analytics-table-card .student-metrics-wrap { border: 1px solid #dbe4f0; border-radius: 15px; }
.merit-analytics-table-card .student-metrics-table thead th { color: #fff; background: var(--merit-navy); }
.merit-analytics-table-card .student-metrics-table tbody tr:nth-child(even) td { background: #f8fbff; }
.merit-analytics-table-card .student-metrics-table tbody tr:hover td { background: #edf8f5; }
.merit-band-chip,
.merit-final-score { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 4px 8px; border-radius: 999px; white-space: nowrap; }
.merit-band-chip { color: #36527a; font-size: .68rem; font-weight: 900; background: #e8f0fb; }
.merit-final-score { min-width: 54px; color: #fff; font-size: .78rem; background: var(--merit-teal); }

@media (max-width: 980px) {
  .merit-analytics-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .merit-analytics-visual-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .merit-analytics-hero { grid-template-columns: 1fr; min-height: 0; padding: 20px; }
  .merit-analytics-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; max-width: none; }
  .merit-analytics-kpis,
  .merit-podium,
  .merit-distribution-layout { grid-template-columns: 1fr; }
  .merit-analytics-kpis article { min-height: 0; }
  .merit-podium article,
  .merit-podium article.is-first { min-height: 140px; }
  .merit-podium article.is-first { grid-row: 1; }
  .merit-panel-head,
  .merit-analytics-table-card .analytics-toolbar,
  .merit-analytics-table-card .analytics-toolbar-actions { align-items: stretch; flex-direction: column; }
  .merit-panel-head > strong { width: fit-content; }
  .merit-line-chart,
  .merit-line-chart canvas { min-height: 260px; height: 260px !important; }
}

* {
  box-sizing: border-box;
}

html {
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  font-family: "Source Serif Pro", "Georgia", "Cambria", "Times New Roman", serif;
  background:
    radial-gradient(circle at 12% 12%, var(--bg-accent), transparent 40%),
    radial-gradient(circle at 88% 10%, var(--accent-warm), transparent 45%),
    var(--bg);
  color: var(--text);
}

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 253, 249, 0.92);
  backdrop-filter: blur(10px);
  padding: 12px 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  border-bottom: 1px solid var(--line);
}

.nav-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brand {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--accent);
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  width: 42px;
  height: 38px;
  padding: 0;
  font: inherit;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
  flex-direction: column;
  gap: 4px;
}

.nav-toggle-line {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: transform 160ms ease, opacity 160ms ease;
}

body.nav-open .nav-toggle-line:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

body.nav-open .nav-toggle-line:nth-child(2) {
  opacity: 0;
}

body.nav-open .nav-toggle-line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.nav-toggle:focus-visible {
  outline: 2px solid rgba(31, 75, 143, 0.24);
  outline-offset: 2px;
}

.nav-backdrop,
.mobile-menu-head {
  display: none;
}

.menu a {
  text-decoration: none;
  color: var(--text);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 10px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
}

.menu .menu-link {
  text-decoration: none;
  color: var(--text);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 10px;
  transition: transform 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  font: inherit;
}

.menu-section-label {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  padding: 0 4px 0 10px;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.menu a:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  color: var(--accent);
}

.menu a.menu-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 800;
}

.menu .menu-link:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  color: var(--accent);
}


.container {
  padding: 26px;
  max-width: 1120px;
  margin: 0 auto;
}

.site-footer {
  margin-top: 32px;
  padding: 18px 24px 28px;
  border-top: 1px solid var(--line);
  background: rgba(255, 253, 249, 0.9);
}

.site-footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}

.site-footer a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.site-footer-links {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.legal-page {
  display: grid;
  gap: 22px;
}

.legal-hero {
  position: relative;
  overflow: hidden;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    radial-gradient(circle at 86% 10%, var(--accent-warm), transparent 36%),
    linear-gradient(135deg, rgba(255, 253, 249, 0.98), rgba(248, 251, 255, 0.94));
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.08);
}

.legal-kicker {
  margin: 0 0 8px;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.legal-hero h1 {
  margin: 0;
  color: var(--text);
  font-size: clamp(2rem, 4vw, 3.3rem);
  line-height: 1;
}

.legal-hero p {
  max-width: 780px;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.65;
}

.legal-hero span {
  display: inline-flex;
  margin-top: 16px;
  padding: 7px 11px;
  border: 1px solid rgba(217, 119, 6, 0.24);
  border-radius: 999px;
  background: var(--accent-warm);
  color: #8a5a10;
  font-size: 0.78rem;
  font-weight: 800;
}

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

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

.legal-card {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.055);
}

.legal-card--lead {
  grid-column: 1 / -1;
  border-color: rgba(31, 75, 143, 0.22);
  background:
    linear-gradient(135deg, rgba(232, 240, 255, 0.64), rgba(255, 255, 255, 0.96));
}

.legal-card h2 {
  margin: 0 0 10px;
  color: var(--text);
  font-size: 1.05rem;
}

.legal-card p,
.legal-card li {
  color: var(--muted);
  line-height: 1.6;
}

.legal-card p {
  margin: 0;
}

.legal-card p + p {
  margin-top: 10px;
}

.legal-card ul {
  margin: 0;
  padding-left: 18px;
}

.legal-card a {
  color: var(--accent);
  font-weight: 800;
}

.legal-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.055);
}

.legal-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
}

.legal-table th,
.legal-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.legal-table th {
  background: var(--accent-soft);
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.legal-table td {
  color: var(--muted);
  line-height: 1.5;
}

.legal-table td:first-child {
  color: var(--text);
  font-weight: 800;
}

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

@media (max-width: 760px) {
  .legal-hero {
    padding: 22px;
    border-radius: 18px;
  }

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

  .legal-card--lead {
    grid-column: auto;
  }

  .legal-card {
    padding: 17px;
    border-radius: 16px;
  }

  .site-footer-links {
    flex-basis: 100%;
    justify-content: center;
  }
}

.page-head h1,
h2 {
  margin: 0 0 8px;
  font-size: 1.5rem;
}

.page-head p {
  margin: 0 0 18px;
  color: var(--muted);
}

.wizard-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.inline-form {
  margin: 0;
}

.ghost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 10px;
  width: auto;
  padding: 8px 12px;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
  line-height: 1.3;
  text-decoration: none;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease, color 120ms ease, background-color 120ms ease;
}

.ghost-btn:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.1);
}

.btn-download-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 6px;
  font-weight: 800;
  line-height: 1;
}

.ghost-btn:focus-visible {
  outline: 2px solid rgba(31, 75, 143, 0.22);
  outline-offset: 2px;
}

main a:not([class]) {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(31, 75, 143, 0.28);
  transition: color 120ms ease, border-color 120ms ease;
}

main a:not([class]):hover {
  color: #163b73;
  border-color: rgba(22, 59, 115, 0.42);
}

.primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 116px;
  max-width: 100%;
  padding: 9px 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), #0b5f57);
  color: #fff;
  border: 1px solid transparent;
  font-weight: 700;
  box-shadow: 0 10px 22px rgba(15, 118, 110, 0.18);
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
  line-height: 1.3;
}

.primary-btn:hover {
  filter: brightness(1.04);
  box-shadow: 0 14px 28px rgba(15, 118, 110, 0.24);
}

.card,
.auth-box {
  background: var(--card);
  padding: 20px;
  border-radius: 14px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.auth-switcher {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.auth-switcher span {
  color: var(--muted);
  font-weight: 600;
}

.auth-note-tight {
  margin-bottom: 0;
}

.auth-setup-link {
  margin-top: 12px;
}

.auth-switcher a {
  text-decoration: none;
  color: var(--accent);
  font-weight: 700;
  border: 1px solid rgba(31, 75, 143, 0.35);
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--accent-soft);
  transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.auth-switcher a:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  color: var(--accent);
}

.auth-switcher a::after {
  content: "→";
  font-weight: 700;
}

.auth-switcher a:focus-visible {
  outline: 2px solid rgba(31, 75, 143, 0.4);
  outline-offset: 2px;
}

.honeypot-field {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.portal-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  align-items: center;
  margin: 18px 0 26px;
}

.portal-hero-copy h1 {
  font-size: 2.4rem;
  margin: 10px 0 12px;
}

.portal-kicker {
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  color: var(--accent);
  font-weight: 700;
}

.portal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.portal-student-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.portal-mini-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(31, 75, 143, 0.16);
  color: #1e3a5f;
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
}

.portal-pill {
  background: var(--accent);
  color: #ffffff;
  text-decoration: none;
  padding: 10px 16px;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(31, 75, 143, 0.2);
  font-weight: 600;
}

.portal-hero-panel {
  position: relative;
  min-height: 260px;
  border-radius: 18px;
  background: linear-gradient(135deg, #ffffff 0%, #edf2ff 55%, #fef2e8 100%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 18px;
  overflow: hidden;
  display: grid;
  gap: 14px;
}

.portal-logo-mark {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 118px;
  padding: 16px;
  border: 1px solid rgba(31, 75, 143, 0.16);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 30%, rgba(31, 75, 143, 0.12), transparent 46%),
    rgba(255, 255, 255, 0.82);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.07);
}

.portal-school-logo {
  width: clamp(88px, 22vw, 118px);
  height: clamp(88px, 22vw, 118px);
  object-fit: contain;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid rgba(31, 75, 143, 0.12);
  padding: 8px;
  box-shadow: 0 10px 20px rgba(31, 75, 143, 0.12);
}

.portal-stamp {
  position: relative;
  z-index: 1;
  border: 2px dashed rgba(31, 75, 143, 0.35);
  border-radius: 16px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.75);
}

.stamp-label {
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--muted);
}

.stamp-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 8px 0;
  color: var(--accent);
}

.stamp-meta {
  color: var(--muted);
}

.portal-glow {
  position: absolute;
  right: -40px;
  top: -40px;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(217, 119, 6, 0.35), transparent 70%);
}

.portal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-bottom: 24px;
}

.portal-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.portal-card-student {
  background: linear-gradient(180deg, #f8fbff 0%, #effaf3 100%);
  border-color: #bfdbfe;
  position: relative;
  overflow: hidden;
}

.portal-card-student::after {
  content: "";
  position: absolute;
  right: -24px;
  top: -24px;
  width: 110px;
  height: 110px;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.14), transparent 70%);
}

.portal-card-title {
  font-weight: 700;
  font-size: 1.1rem;
}

.portal-cta {
  align-self: flex-start;
  text-decoration: none;
  color: var(--accent);
  font-weight: 700;
}

.portal-help {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.portal-help-card {
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid var(--line);
  padding: 16px;
}

.portal-help-setup {
  border-color: rgba(217, 119, 6, 0.4);
}

.pwa-install-card[hidden] {
  display: none;
}

.pwa-install-btn {
  margin-top: 10px;
  background: var(--accent);
  color: #ffffff;
  border: none;
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(31, 75, 143, 0.2);
}

.offline-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--shadow);
  width: min(100%, 640px);
  margin: 20px auto;
  text-align: center;
}

.offline-badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(217, 119, 6, 0.15);
  color: var(--accent-2);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.7rem;
}

.offline-logo-quote {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin: 18px auto 16px;
  padding: 16px;
  max-width: 460px;
  border: 1px solid rgba(31, 75, 143, 0.16);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 251, 255, 0.92));
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
}

.offline-school-logo {
  width: 88px;
  height: 88px;
  object-fit: contain;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid rgba(31, 75, 143, 0.12);
  padding: 7px;
  box-shadow: 0 12px 24px rgba(31, 75, 143, 0.14);
}

.offline-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.offline-tips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 16px;
}

.offline-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #dbeafe;
  background: #f8fbff;
  color: #1e3a5f;
  font-size: 0.84rem;
  font-weight: 600;
}

.portal-pill-ghost {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}

.pwa-update-toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: #0f172a;
  color: #ffffff;
  padding: 12px 14px;
  border-radius: 12px;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.3);
  display: flex;
  gap: 10px;
  align-items: center;
  z-index: 1000;
  max-width: min(360px, calc(100vw - 32px));
  flex-wrap: wrap;
}

.pwa-update-btn {
  background: #ffffff;
  color: #0f172a;
  border: none;
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 700;
  cursor: pointer;
}

.offline-banner {
  background: rgba(217, 119, 6, 0.2);
  color: #7c2d12;
  text-align: center;
  padding: 8px 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.offline-sync {
  display: block;
  font-weight: 600;
  color: #92400e;
  margin-top: 4px;
  font-size: 0.82rem;
}

.online-toast {
  position: fixed;
  right: 16px;
  bottom: 84px;
  background: #14532d;
  color: #ffffff;
  padding: 10px 14px;
  border-radius: 12px;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.3);
  font-weight: 700;
  z-index: 1000;
  max-width: min(320px, calc(100vw - 32px));
}

.last-updated {
  text-align: right;
  color: var(--muted);
  font-size: 0.85rem;
  margin-bottom: 10px;
}

.compact {
  margin-bottom: 20px;
}

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

.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.full-row {
  grid-column: 1 / -1;
}

input,
select,
button,
textarea {
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  width: 100%;
  font: inherit;
  background: #fff;
  color: var(--text);
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid rgba(31, 75, 143, 0.18);
  border-color: var(--accent);
}

textarea {
  resize: vertical;
}

button {
  background: linear-gradient(135deg, var(--accent), #163b73);
  color: #fff;
  border: none;
  cursor: pointer;
  font-weight: 700;
}

button:hover {
  filter: brightness(1.05);
}

.flash {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
}

.flash li {
  padding: 10px 12px;
  border-radius: 9px;
  margin-bottom: 8px;
  border: 1px solid var(--line);
  background: #fff;
}

.flash .success {
  color: #14532d;
  border-color: #86efac;
}

.flash .error {
  color: #991b1b;
  border-color: #fca5a5;
}

.flash-source-hidden {
  display: none;
}

.flash-dialog-stack {
  position: fixed;
  top: 78px;
  right: 16px;
  display: grid;
  gap: 10px;
  width: min(420px, calc(100vw - 32px));
  z-index: 320;
}

.flash-dialog {
  background: #fffdf8;
  border: 1px solid var(--line);
  border-left-width: 6px;
  border-radius: 12px;
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.2);
  padding: 12px;
  display: grid;
  gap: 10px;
  animation: lift 180ms ease-out;
}

.flash-dialog-success {
  border-left-color: #16a34a;
}

.flash-dialog-error {
  border-left-color: #dc2626;
}

.flash-dialog-message {
  margin: 0;
  color: var(--text);
  line-height: 1.35;
}

.flash-dialog-close {
  width: auto;
  justify-self: end;
  padding: 6px 10px;
  font-size: 0.86rem;
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  border: 1px solid var(--line);
  cursor: pointer;
}

.flash-dialog-close:hover {
  border-color: var(--accent);
}

.ui-alert {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
  margin-top: 10px;
}

.ui-alert.is-visible {
  display: flex;
  animation: lift 160ms ease-out;
}

.ui-alert--error {
  border-color: #fca5a5;
  background: #fff1f2;
  color: #9f1239;
}

.ui-alert--info {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1e3a8a;
}

.ui-alert--success {
  border-color: #86efac;
  background: #ecfdf3;
  color: #166534;
}

.tabs {
  animation: fade-in 260ms ease-out;
}

.tab-list {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 700;
  color: var(--text);
  background: #fff;
  text-decoration: none;
}

.tab-btn.is-active {
  border-color: var(--accent);
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

.exam-alert-card {
  margin-bottom: 18px;
  border: 1px solid #e2e8f0;
  background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
  box-shadow: 0 12px 24px -18px rgba(15, 23, 42, 0.45);
}

.exam-alert-stats {
  margin-top: 4px;
}

.exam-alert-copy {
  margin-top: 10px;
}

.exam-alert-list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.exam-alert-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.35);
}

.exam-alert-link {
  color: #0f172a;
  font-weight: 600;
  text-decoration: none;
}

.exam-alert-link:hover {
  text-decoration: underline;
}

.exam-alert-note {
  color: #475569;
  font-size: 0.92rem;
}

.exam-alert-cta {
  justify-self: end;
  padding: 6px 12px;
  border-radius: 999px;
  background: #1d4ed8;
  color: #ffffff;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
}

.exam-alert-cta:hover {
  background: #1e40af;
}

.tab-panel {
  display: none;
}

.tab-panel.is-active {
  display: block;
  animation: lift 240ms ease-out;
}

.nested-tabs .tab-list {
  margin-bottom: 10px;
}

.table-wrap {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

.registry-table {
  width: 100%;
  border-collapse: collapse;
}

.registry-table th,
.registry-table td {
  text-align: left;
  padding: 11px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  overflow-wrap: anywhere;
}

.marks-entry-table {
  min-width: max-content;
}

.marks-entry-table th,
.marks-entry-table td {
  overflow-wrap: normal;
  word-break: normal;
}

.marks-entry-table .marks-entry-number-cell {
  min-width: 74px;
  width: 74px;
  text-align: center;
  white-space: nowrap;
}

.marks-entry-table .marks-entry-percent-cell {
  min-width: 56px;
  width: 56px;
}

.marks-entry-table .marks-entry-component-cell {
  min-width: 92px;
  white-space: nowrap;
}

.marks-entry-table .marks-entry-student-cell {
  min-width: 180px;
  white-space: normal;
  overflow-wrap: break-word;
}

.marks-entry-table input[type="number"] {
  min-width: 64px;
  max-width: 84px;
  text-align: center;
}

.score-table-wrap {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.score-table thead th {
  background: #f8fafc;
}

.score-table tbody tr:nth-child(even) {
  background: #fcfdfb;
}

.score-table .score-cell {
  color: #0f172a;
}

.score-cell-primary .score-value {
  font-weight: 700;
}

.score-row-parent td {
  background: #ffffff;
}

.score-row-component td {
  background: #f8fafc;
}

.score-subject-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.score-subject-cell.is-component {
  padding-left: 26px;
}

.score-subject-parent {
  font-size: 0.8rem;
  font-weight: 700;
  color: #475569;
}

.score-subject-parent::after {
  content: "•";
  margin: 0 6px;
  color: #cbd5f5;
}

.score-subject-name {
  font-weight: 700;
  color: #0f172a;
}

.score-subject-cell.is-component .score-subject-name {
  font-weight: 400;
}

.score-subject-tag {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #0f766e;
  background: #ccfbf1;
  border: 1px solid #99f6e4;
  border-radius: 999px;
  padding: 2px 8px;
}

.score-value {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.note-alias {
  display: none;
  font-weight: 700;
  color: #0f172a;
}

.status-chip-scored {
  background: #dcfce7;
  color: #166534;
  border-color: #86efac;
}

.status-chip-pending {
  background: #fff7ed;
  color: #9a3412;
  border-color: #fdba74;
}

.status-chip-neutral {
  background: #f3f4f6;
  color: #374151;
  border-color: #d1d5db;
}

.focused-merit-row {
  background: #fff7d6;
}

.registry-table th {
  color: var(--muted);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: #f3f6fb;
}

.status-chip {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
  overflow-wrap: normal;
}

.trend-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
}

.trend-up {
  color: #1a7f37;
  background: #e6f4ea;
}

.trend-down {
  color: #c23b22;
  background: #fdecea;
}

.trend-flat {
  color: #6b7280;
  background: #f3f4f6;
}

.trend-delta {
  margin-left: 6px;
  font-weight: 600;
  font-size: 0.85rem;
  color: #1f2937;
}

.student-dashboard .tab-list {
  flex-wrap: wrap;
  gap: 8px;
}

.student-dashboard .table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.student-dashboard .registry-table {
  min-width: 720px;
}

.student-hero {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border-radius: 18px;
  background: linear-gradient(135deg, #fef3c7 0%, #e0f2fe 40%, #dcfce7 100%);
  border: 1px solid #dbeafe;
  margin-bottom: 16px;
}

.student-hero-copy {
  display: grid;
  gap: 10px;
}

.student-hero-kicker {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  color: #6b7280;
  margin: 0 0 6px;
}

.student-hero-summary {
  max-width: 62ch;
  color: #334155;
  margin: 0;
  line-height: 1.5;
}

.student-hero-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}

.student-hero-metric {
  min-width: 118px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.student-hero-metric strong {
  display: block;
  margin-top: 4px;
  font-size: 1.1rem;
  color: #0f172a;
}

.student-hero-metric-label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
  font-weight: 700;
}

.student-hero-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: #0f172a;
  color: #f8fafc;
  font-size: 0.8rem;
  height: fit-content;
}

.student-home-panel {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid #dbeafe;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.student-profile-panel {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid #dbeafe;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
  margin-bottom: 16px;
}

.student-exams-panel {
  background: linear-gradient(135deg, #ffffff 0%, #eff6ff 48%, #ecfdf5 100%);
}

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

.student-home-head h2 {
  margin-bottom: 0;
  line-height: 1.15;
}

.student-home-admission {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  border-radius: 999px;
  background: #0f172a;
  color: #f8fafc;
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
}

.student-home-class {
  color: #475569;
  font-weight: 800;
}

.student-result-card {
  display: grid;
  gap: 7px;
  padding: 16px;
  border: 1px solid #bae6fd;
  border-radius: 14px;
  background: linear-gradient(135deg, #eff6ff 0%, #ecfeff 58%, #f0fdf4 100%);
  color: inherit;
  text-decoration: none;
}

.student-result-card:hover {
  border-color: #7dd3fc;
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(14, 165, 233, 0.12);
}

.student-result-label,
.student-home-action span {
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.student-result-card strong {
  color: #0f172a;
  font-size: 1.12rem;
  line-height: 1.2;
}

.student-result-meta {
  color: #334155;
  font-weight: 700;
}

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

.student-result-stat {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(186, 230, 253, 0.95);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.8);
}

.student-result-stat span {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.student-result-stat strong {
  font-size: 1rem;
}

.student-result-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.student-result-view {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid #93c5fd;
  background: rgba(255, 255, 255, 0.88);
  color: #0f172a;
  font-size: 0.84rem;
  font-weight: 800;
  white-space: nowrap;
}

.student-result-view-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 0.88rem;
  line-height: 1;
}

.student-home-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.student-home-action {
  display: grid;
  gap: 5px;
  padding: 13px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
  color: inherit;
  text-decoration: none;
}

.student-home-action-primary {
  border-color: #bfdbfe;
  background: #f8fbff;
}

.student-home-action strong {
  color: #0f172a;
  font-size: 0.96rem;
  overflow-wrap: anywhere;
}

.student-assessment-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.student-assessment-table th,
.student-assessment-table td {
  vertical-align: middle;
  overflow-wrap: anywhere;
}

.student-assessment-col--assessment {
  width: 24%;
}

.student-assessment-col--term {
  width: 10%;
}

.student-assessment-col--total {
  width: 7%;
}

.student-assessment-col--average {
  width: 9%;
}

.student-assessment-col--competency {
  width: 16%;
}

.student-assessment-col--benchmark {
  width: 13%;
}

.student-assessment-col--action,
.student-assessment-col--report {
  width: 10.5%;
}

.student-assessment-name-cell,
.student-assessment-competency-cell {
  font-weight: 600;
}

.student-assessment-term-cell,
.student-assessment-number-cell {
  white-space: nowrap;
}

.student-assessment-benchmark-cell strong {
  display: block;
  margin-top: 2px;
  color: #0f172a;
}

.student-assessment-action-cell {
  white-space: normal;
  text-align: center;
}

.student-assessment-action-cell .ghost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: 100%;
  max-width: 100px;
  padding: 8px 10px;
  white-space: nowrap;
  text-align: center;
}

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

.student-profile-item {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
}

.student-profile-item span {
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.student-profile-item strong {
  min-width: 0;
  color: #0f172a;
  overflow-wrap: anywhere;
}

.student-page-head {
  align-items: flex-start;
}

.student-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.student-page-actions .ghost-btn {
  width: auto;
}

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

.student-action-card {
  text-decoration: none;
  color: inherit;
  display: block;
  border: 1px solid #e2e8f0;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  position: relative;
  overflow: hidden;
}

.coming-soon-stack {
  display: grid;
  gap: 12px;
  margin: 14px 0 18px;
}

.coming-soon-card {
  border: 1px solid #f4d9b8;
  background:
    radial-gradient(circle at top right, rgba(245, 158, 11, 0.16), transparent 30%),
    linear-gradient(135deg, #fffdf6, #fff7ed 62%, #ffffff);
  box-shadow: 0 18px 36px rgba(148, 76, 16, 0.08);
  padding: 14px 16px;
}

.coming-soon-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.coming-soon-kicker {
  margin: 0 0 4px;
  color: #b45309;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.coming-soon-head h3 {
  margin: 0;
  color: #7c2d12;
  font-size: 1.05rem;
  line-height: 1.2;
}

.coming-soon-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
  color: #78716c;
  font-size: 0.84rem;
}

.coming-soon-meta strong {
  color: #9a3412;
  font-size: 0.95rem;
}

.coming-soon-audience,
.coming-soon-settings-audience {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.coming-soon-audience span,
.coming-soon-settings-audience span {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: #9a3412;
  border: 1px solid rgba(217, 119, 6, 0.18);
  font-size: 0.76rem;
  font-weight: 700;
}

.coming-soon-copy {
  margin: 8px 0 0;
  font-size: 0.92rem;
}

.coming-soon-feature-list,
.coming-soon-settings-features {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px 14px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.coming-soon-feature-list li,
.coming-soon-settings-features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #44403c;
  font-size: 0.92rem;
  line-height: 1.35;
}

.coming-soon-feature-list li::before,
.coming-soon-settings-features li::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: 0.32rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #f59e0b, #ea580c);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.14);
  flex: 0 0 auto;
}

.student-action-form {
  margin: 0;
  display: block;
}

.student-action-submit {
  width: 100%;
  height: 100%;
  padding: 20px;
  text-align: left;
  font: inherit;
  cursor: pointer;
  box-shadow: var(--shadow);
}

.student-action-submit .student-action-title,
.student-action-submit .muted-text,
.student-action-submit .student-action-cta {
  position: relative;
  z-index: 1;
}

.student-action-card:hover {
  border-color: #cbd5f5;
  box-shadow: 0 12px 20px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.student-action-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.student-action-card::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.18), transparent 70%);
}

.student-action-exams {
  background: linear-gradient(135deg, #eff6ff 0%, #ecfeff 55%, #f0fdf4 100%);
  border-color: #bae6fd;
}

.student-action-finance {
  background: linear-gradient(135deg, #f7fee7 0%, #ecfccb 44%, #f0fdf4 100%);
  border-color: #bef264;
}

.student-action-activity {
  background: linear-gradient(135deg, #f8fafc 0%, #ecfdf5 48%, #fff7ed 100%);
  border-color: #a7f3d0;
}

.student-action-coverage {
  background: linear-gradient(135deg, #ffffff 0%, #eef2ff 48%, #f0fdf4 100%);
  border-color: #c7d2fe;
}

.student-action-welcome {
  background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 45%, #ecfeff 100%);
  border-color: #fdba74;
}

.student-action-profile {
  background: linear-gradient(135deg, #fffaf0 0%, #fef3c7 45%, #fefce8 100%);
  border-color: #fcd34d;
}

.student-action-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0ea5e9;
  color: #ffffff;
  font-weight: 800;
  margin-bottom: 10px;
}

.student-action-icon-profile {
  background: #f59e0b;
}

.student-action-icon-welcome {
  background: #ea580c;
}

.admin-icon svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.student-action-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: #0f172a;
  color: #f8fafc;
  font-size: 0.8rem;
  font-weight: 600;
  margin-top: 10px;
}

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

.student-snapshot-card,
.student-timeline-card {
  border-radius: 18px;
}

.student-section-kicker {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  color: #64748b;
  font-weight: 700;
  margin-bottom: 8px;
}

.student-snapshot-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.student-snapshot-stats span {
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #334155;
  font-size: 0.86rem;
  font-weight: 600;
}

.student-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.student-subject-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.student-subsection-title {
  margin-top: 18px;
}

.student-subject-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid #dbeafe;
  background: linear-gradient(135deg, #f8fbff 0%, #ffffff 100%);
}

.student-subject-pill strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #0f172a;
  color: #f8fafc;
  font-size: 0.85rem;
}

.student-subject-list-focus .student-subject-pill {
  border-color: #fde68a;
  background: linear-gradient(135deg, #fffdf4 0%, #ffffff 100%);
}

.student-subject-list-focus .student-subject-pill strong {
  background: #b45309;
}

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

.student-detail-card {
  border-radius: 18px;
}

.student-detail-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.student-detail-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding-bottom: 12px;
  border-bottom: 1px solid #e2e8f0;
}

.student-detail-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.student-detail-label {
  color: #64748b;
  font-size: 0.88rem;
  font-weight: 700;
}

.student-timeline-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.student-timeline-item {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.student-timeline-title {
  font-weight: 700;
  color: #0f172a;
}

.student-timeline-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.is-latest-exam {
  background: #fef9c3;
}

.status-active {
  background: #dcfce7;
  color: #166534;
  border-color: #86efac;
}

.status-inactive {
  background: #ffe4e6;
  color: #9f1239;
  border-color: #fda4af;
}

.status-graduated {
  background: #dbeafe;
  color: #1e3a8a;
  border-color: #93c5fd;
}

.status-transferred {
  background: #ffedd5;
  color: #9a3412;
  border-color: #fdba74;
}

.class-picker h3 {
  margin: 0 0 10px;
}

.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.check-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  background: #fff;
}

.check-grid input[type="checkbox"] {
  width: auto;
}

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

.picker-panel {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 12px;
}

.picker-panel h4 {
  margin: 0 0 6px;
}

.streams-panel {
  border-color: #bcd5f7;
  background: linear-gradient(180deg, #f5f9ff 0%, #eef5ff 100%);
}

.grades-panel {
  border-color: #f2c27a;
  background: linear-gradient(180deg, #fff9f1 0%, #fff3e4 100%);
}

.stream-options label {
  border-color: #b8e4dc;
  background: #fcfffe;
}

.grade-options label {
  border-color: #c3d9ff;
  background: #fcfdff;
}

.assignment-actions {
  margin-top: 14px;
}

.student-flow {
  display: grid;
  gap: 12px;
}

.flow-steps {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.flow-step {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 12px;
  font-weight: 700;
  color: var(--muted);
  background: #fff;
}

.flow-step.is-active {
  border-color: var(--accent);
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

.flow-arrow {
  color: var(--muted);
  font-weight: 700;
}

.flow-panel {
  display: none;
}

.flow-panel.is-active {
  display: block;
  animation: lift 220ms ease-out;
}

.flow-actions {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.flow-actions-start {
  justify-content: flex-start;
}

.class-student-tools {
  display: grid;
  grid-template-columns: minmax(160px, max-content) minmax(280px, 1fr);
  gap: 12px;
  align-items: stretch;
  margin: 12px 0;
}

.class-student-tools .inline-form {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: center;
  padding: 10px 12px;
  border: 1px solid #dbe4f0;
  border-radius: 10px;
  background: #ffffff;
}

.class-export-panel {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  margin: 0;
  padding: 12px;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

.class-export-copy {
  display: grid;
  gap: 2px;
}

.class-export-copy strong {
  color: #0f172a;
  font-size: 0.95rem;
}

.class-export-copy span {
  color: #64748b;
  font-size: 0.82rem;
}

.class-export-options {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.checkbox-inline {
  color: var(--muted);
  font-size: 0.9rem;
}

.class-export-btn {
  white-space: nowrap;
}

.class-export-actions {
  display: inline-flex;
  gap: 8px;
  justify-content: flex-end;
}

.classroom-students-table {
  min-width: 920px;
  table-layout: auto;
}

.classroom-students-table th,
.classroom-students-table td {
  white-space: nowrap;
  overflow-wrap: normal;
}

.classroom-students-table th:nth-child(1),
.classroom-students-table td:nth-child(1) {
  min-width: 116px;
}

.classroom-students-table th:nth-child(2),
.classroom-students-table td:nth-child(2),
.classroom-students-table th:nth-child(3),
.classroom-students-table td:nth-child(3) {
  min-width: 128px;
}

.classroom-students-table th:nth-child(5),
.classroom-students-table td:nth-child(5),
.classroom-students-table th:nth-child(6),
.classroom-students-table td:nth-child(6) {
  min-width: 138px;
}

.classroom-students-table th:nth-child(7),
.classroom-students-table td:nth-child(7) {
  min-width: 150px;
}

.admin-students-table {
  min-width: 880px;
  table-layout: auto;
}

.admin-students-table th,
.admin-students-table td {
  white-space: nowrap;
  overflow-wrap: normal;
}

.admin-students-table th:nth-child(2),
.admin-students-table td:nth-child(2),
.admin-students-table th:nth-child(3),
.admin-students-table td:nth-child(3) {
  min-width: 118px;
}

.admin-students-table th:nth-child(5),
.admin-students-table td:nth-child(5),
.admin-students-table th:nth-child(6),
.admin-students-table td:nth-child(6),
.admin-students-table th:nth-child(7),
.admin-students-table td:nth-child(7) {
  min-width: 132px;
}

.student-list-export-card {
  border-color: #bfdbfe;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.student-list-export-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.student-list-export-form {
  display: grid;
  gap: 14px;
  margin-top: 12px;
}

.student-list-export-options {
  display: grid;
  grid-template-columns: minmax(280px, 1.3fr) minmax(150px, 0.65fr) minmax(220px, 0.9fr) auto;
  gap: 12px;
  align-items: end;
  padding: 14px;
  border: 1px solid #d6e3f3;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
}

.student-export-picker-wrap {
  min-width: 0;
}

.student-export-picker {
  position: relative;
  margin-top: 6px;
}

.student-export-picker summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 46px;
  padding: 9px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  color: #0f172a;
  cursor: pointer;
  list-style: none;
}

.student-export-picker summary::-webkit-details-marker {
  display: none;
}

.student-export-picker summary::after {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2px solid #475569;
  border-bottom: 2px solid #475569;
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}

.student-export-picker[open] summary {
  border-color: #0f766e;
  background: #f0fdfa;
}

.student-export-picker[open] summary::after {
  transform: rotate(225deg);
}

.student-export-picker summary span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.student-export-picker summary strong,
.student-export-picker summary small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.student-export-picker summary strong {
  font-size: 0.95rem;
}

.student-export-picker summary small {
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 600;
}

.student-export-picker-panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  left: 0;
  width: min(720px, calc(100vw - 48px));
  max-height: 420px;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
}

.student-export-choice-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.student-export-submit {
  display: flex;
  justify-content: flex-end;
}

.student-export-submit button {
  white-space: nowrap;
}

.student-export-scope {
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  background: #ffffff;
  padding: 10px;
}

.student-export-grade,
.student-export-stream {
  display: flex;
  align-items: center;
  gap: 9px;
}

.student-export-grade {
  padding: 0 0 8px;
  border-bottom: 1px solid #e2e8f0;
  color: #0f172a;
  font-weight: 800;
}

.student-export-grade span {
  flex: 0 0 auto;
}

.student-export-grade small {
  color: #64748b;
  font-weight: 600;
}

.student-export-streams {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 10px;
}

.student-export-stream {
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  color: #334155;
  font-size: 0.9rem;
  font-weight: 700;
}

.student-export-stream:hover {
  border-color: #99f6e4;
  background: #f0fdfa;
}

.student-export-empty {
  margin: 10px 0 0;
}

.section-action-top {
  margin-top: 10px;
}

.admin-page-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  margin-bottom: 16px;
  border: 1px solid #dbeafe;
  border-radius: 16px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fbff 52%, #f0fdf4 100%);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07);
}

.admin-page-hero h2 {
  margin-bottom: 6px;
}

.admin-page-kicker {
  margin: 0 0 6px;
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.admin-page-meta,
.admin-page-metrics,
.admin-page-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-page-meta span,
.admin-page-metrics span,
.admin-count-pill,
.admin-state-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #ffffff;
  color: #334155;
  font-size: 0.84rem;
  font-weight: 800;
}

.admin-page-metrics strong {
  margin-right: 5px;
  color: #0f172a;
}

.admin-state-pill.is-enabled {
  background: #dcfce7;
  border-color: #86efac;
  color: #166534;
}

.admin-state-pill.is-disabled {
  background: #fee2e2;
  border-color: #fecaca;
  color: #991b1b;
}

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

.admin-section-head h3 {
  margin-bottom: 4px;
}

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

.admin-command-card,
.admin-workspace-card {
  border-color: #dbeafe;
}

.admin-danger-card {
  border-color: #fecaca;
  background: linear-gradient(180deg, #ffffff 0%, #fff7f7 100%);
}

.exam-command-scopes,
.exam-command-dates {
  margin-top: 10px;
}

.exam-command-hero {
  border-color: #bfdbfe;
  background: linear-gradient(135deg, #ffffff 0%, #eef6ff 58%, #f7fee7 100%);
}

.exam-command-hero .admin-page-actions {
  align-self: stretch;
  justify-content: flex-end;
}

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

.exam-overview-card {
  display: grid;
  gap: 5px;
  min-height: 104px;
  padding: 14px;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.exam-overview-card span {
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.exam-overview-card strong {
  color: #0f172a;
  font-size: 1.7rem;
  line-height: 1;
}

.exam-overview-card em {
  color: #475569;
  font-size: 0.84rem;
  font-style: normal;
  font-weight: 700;
}

.exam-overview-card em a {
  color: #1d4ed8;
  text-decoration: none;
}

.exam-overview-card em a:hover {
  text-decoration: underline;
}

.exam-management-grid {
  grid-template-columns: minmax(300px, 1fr);
  align-items: start;
}

.exam-setup-card,
.exam-actions-card,
.exam-score-entry-card,
.exam-comment-card,
.exam-band-snapshot-card,
.exam-audit-card {
  border-radius: 10px;
}

.exam-setup-card {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.exam-actions-card {
  border-color: #c7d2fe;
  background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
}

.exam-actions-card > .grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

.exam-actions-card > .grid form {
  display: grid;
  gap: 8px;
  align-content: end;
  min-height: 82px;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
}

.exam-actions-card > .grid button,
.exam-actions-card > .grid input {
  width: 100%;
}

.exam-actions-card button:disabled,
.exam-actions-card button[disabled] {
  border-color: #e2e8f0;
  color: #94a3b8;
  background: #f1f5f9;
  cursor: not-allowed;
  box-shadow: none;
}

.grade-workflow-panel {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  background: #ffffff;
}

.grade-workflow-panel + .grade-workflow-panel {
  border-color: #fed7aa;
  background: #fffaf2;
}

.grade-workflow-panel .admin-section-head h4 {
  margin: 0 0 4px;
  color: #0f172a;
}

.grade-close-form .grade-options,
.grade-reopen-form .grade-options {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.grade-close-form .grade-options label,
.grade-reopen-form .grade-options label,
.exam-setup-card .grade-options label {
  min-height: 44px;
  border-radius: 8px;
}

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

.exam-score-entry-card {
  margin-top: 16px;
  border-color: #93c5fd;
  background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.08);
}

.exam-score-entry-card .admin-section-head {
  margin-bottom: 14px;
}

.exam-score-entry-card .grade-entry-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.exam-score-entry-card .grade-entry-link {
  display: grid;
  gap: 5px;
  min-height: 74px;
  padding: 12px;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  background: #ffffff;
  color: #0f172a;
  text-align: left;
  text-decoration: none;
  box-shadow: none;
}

.exam-score-entry-card .grade-entry-link div {
  font-size: 1.05rem;
  font-weight: 900;
}

.exam-score-entry-card .grade-entry-link small {
  justify-self: start;
  padding: 4px 8px;
  border-radius: 999px;
  color: #475569;
  background: #f1f5f9;
}

.exam-score-entry-card .grade-entry-link.is-pending {
  border-color: #fed7aa;
}

.exam-score-entry-card .grade-entry-link.is-complete {
  border-color: #86efac;
  background: #f7fff9;
}

.exam-comment-card,
.exam-band-snapshot-card,
.exam-admin-bottom-grid {
  margin-top: 16px;
}

.exam-actions-card,
.student-report-cache-card {
  margin-top: 16px;
}

.exam-band-snapshot-card {
  border-color: #c4b5fd;
  background: linear-gradient(180deg, #ffffff 0%, #fbfaff 100%);
}

.exam-band-snapshot-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 18px;
  align-items: start;
}

.exam-band-snapshot-history,
.exam-band-apply-form {
  padding: 14px;
  border: 1px solid #e9d5ff;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
}

.exam-band-snapshot-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.exam-band-snapshot-stats > div {
  padding: 10px 12px;
  border: 1px solid #ede9fe;
  border-radius: 8px;
  background: #faf5ff;
}

.exam-band-snapshot-stats span,
.exam-band-grade-picker-head small,
.exam-band-snapshot-scheme small {
  display: block;
  color: #64748b;
}

.exam-band-snapshot-stats strong {
  display: block;
  margin-top: 4px;
  font-size: 1.15rem;
  color: #312e81;
}

.exam-band-snapshot-list {
  border: 1px solid #ede9fe;
  border-radius: 8px;
  overflow: hidden;
}

.exam-band-snapshot-list-head,
.exam-band-snapshot-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.7fr) minmax(180px, 1.35fr) minmax(120px, 0.75fr);
  gap: 12px;
  align-items: center;
}

.exam-band-snapshot-list-head {
  padding: 10px 12px;
  background: #f5f3ff;
  font-size: 0.82rem;
  font-weight: 700;
  color: #5b21b6;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.exam-band-snapshot-row {
  padding: 12px;
  border-top: 1px solid #ede9fe;
}

.exam-band-snapshot-row:first-of-type {
  border-top: 0;
}

.exam-band-snapshot-grade,
.exam-band-snapshot-applied {
  font-weight: 700;
  color: #0f172a;
}

.exam-band-snapshot-scheme strong {
  display: block;
  color: #1e1b4b;
}

.exam-band-apply-form {
  display: grid;
  gap: 14px;
}

.exam-band-apply-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.exam-band-apply-fields label {
  display: grid;
  gap: 6px;
}

.exam-band-grade-picker {
  padding-top: 12px;
  border-top: 1px solid #ede9fe;
}

.exam-band-grade-picker-head {
  margin-bottom: 10px;
}

.exam-band-grade-picker-head strong {
  display: block;
  margin-bottom: 2px;
  color: #312e81;
}

.exam-band-grade-options {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}

.exam-band-grade-options label {
  min-height: 44px;
  border-radius: 8px;
}

@media (max-width: 980px) {
  .exam-band-snapshot-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .exam-band-snapshot-list-head,
  .exam-band-snapshot-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .exam-band-snapshot-list-head {
    display: none;
  }

  .exam-band-snapshot-row {
    gap: 6px;
  }
}

.exam-admin-bottom-grid {
  align-items: start;
}

.exam-audit-card .table-wrap {
  max-height: 420px;
  overflow: auto;
}

.student-report-generate-form {
  margin-bottom: 10px;
}

.student-report-cache-card {
  border-color: #dbeafe;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

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

.student-report-cache-actions {
  display: grid;
  justify-items: end;
  gap: 10px;
}

.student-report-cache-head h3 {
  margin-bottom: 6px;
}

.exam-audit-card,
.admin-danger-card {
  margin-top: 16px;
}

.student-report-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 82px;
  padding: 7px 11px;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.student-report-status-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.student-report-status-tile {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
}

.student-report-status-tile-wide {
  grid-column: span 2;
}

.student-report-status-tile span {
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.student-report-status-tile strong {
  min-width: 0;
  color: #0f172a;
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.student-report-status-tile em {
  color: #64748b;
  font-size: 0.84rem;
  font-style: normal;
}

.form-gap-bottom {
  margin-bottom: 10px;
}

.section-gap-top {
  margin-top: 10px;
}

.card-gap-top {
  margin-top: 12px;
}

.panel-gap-bottom {
  margin-bottom: 12px;
}

.section-heading-reset {
  margin-top: 0;
}

.section-heading-top {
  margin-top: 18px;
}

.muted-list-compact {
  margin: 8px 0 0 18px;
  padding: 0;
}

.class-button-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.class-button {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border-color: #bdd5ff;
  background: linear-gradient(180deg, #fbfdff 0%, #f2f7ff 100%);
  font-weight: 700;
}

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

.guardian-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 12px;
  display: grid;
  gap: 8px;
}

.guardian-card h4 {
  margin: 0;
}

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

.guardian-pill {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  border: 1px solid #c9ddff;
  background: linear-gradient(180deg, #f8fbff 0%, #f0f6ff 100%);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 0.88rem;
}

.guardian-name {
  font-weight: 700;
  color: #163b73;
}

.guardian-meta {
  color: #334155;
  background: #ffffff;
  border: 1px solid #dbe3f1;
  border-radius: 999px;
  padding: 2px 8px;
}

.stream-map {
  display: grid;
  gap: 8px;
}

.stream-row {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.edit-grade-row {
  align-items: center;
  grid-template-columns: minmax(220px, 1fr) 120px;
}

.manage-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

.manage-edit-row {
  align-items: center;
  grid-template-columns: minmax(220px, 1fr) 120px;
}

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

.danger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 92px;
  background: linear-gradient(135deg, #c32035, #a51226);
  border: 1px solid #9f1239;
  color: #fff;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
  line-height: 1.3;
}

.danger-btn:disabled,
.danger-btn[disabled] {
  border-color: #e2e8f0;
  color: #94a3b8;
  background: #f1f5f9;
  cursor: not-allowed;
  box-shadow: none;
}

.muted-text {
  color: var(--muted);
  margin: 8px 0 0;
}

.entry-nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0 0;
}

.entry-grid-tight {
  display: grid;
  grid-template-columns: minmax(260px, 1.5fr) minmax(220px, 1fr);
  gap: 12px;
  align-items: start;
}

/* Exam marks entry: keep setup decisions visually separate from the worktable. */
.exam-entry-hero {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-end;
  margin: 0 0 12px;
  padding: 18px 20px;
  border: 1px solid #cfe0f4;
  border-radius: 16px;
  color: #eff6ff;
  background: linear-gradient(135deg, #163d70 0%, #1f5d9b 58%, #16858b 100%);
  box-shadow: 0 10px 24px rgba(20, 69, 122, 0.14);
}

.exam-entry-hero h2 {
  margin: 3px 0 0;
  color: #fff;
}

.exam-entry-hero p {
  margin: 6px 0 0;
  color: #dbeafe;
}

.exam-entry-eyebrow,
.exam-entry-section-head > div > span {
  display: block;
  color: #75e6d8;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.exam-entry-hero-meta,
.marks-entry-progress {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

.exam-entry-status,
.exam-entry-mode,
.exam-entry-state,
.marks-entry-progress span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 750;
  white-space: nowrap;
}

.exam-entry-status,
.exam-entry-mode {
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.exam-entry-status--open { background: #087f5b; }
.exam-entry-status--closed { background: #a16207; }
.exam-entry-status--completed { background: #4f46e5; }
.exam-entry-status--draft { background: #475569; }

.assessment-structure-card { border-top: 3px solid #16858b; }
.component-max-card { border-top: 3px solid #2365a5; }
.marks-entry-card { border-top: 3px solid #1f4b8f; }

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

.exam-entry-section-head h3 { margin: 2px 0 0; }

.exam-entry-state {
  border: 1px solid #cfe0f4;
  background: #eff6ff;
  color: #1f4b8f;
}

.assessment-structure-form {
  margin-top: 14px;
  padding: 13px;
  border: 1px solid #d9e9e7;
  border-radius: 12px;
  background: #f8fcfc;
}

.component-max-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  margin-top: 14px;
  padding: 13px;
  border: 1px solid #dbe7f4;
  border-radius: 12px;
  background: #f8fbff;
}

.component-max-field { width: min(190px, 100%); }
.component-max-field input { width: 100%; }
.component-max-form .full-row { width: min(280px, 100%); }
.component-max-actions { display: flex; align-items: end; min-height: 58px; }

.marks-entry-section-head {
  align-items: center;
  margin-bottom: 14px;
}

.marks-entry-progress span {
  border: 1px solid #dbe7f4;
  background: #f8fbff;
  color: #475569;
}

.marks-entry-progress strong { margin-right: 4px; color: #1f4b8f; }

.marks-entry-card .table-wrap {
  border: 1px solid #dce6f0;
  border-radius: 12px;
  background: #fff;
}

.marks-entry-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  color: #eaf4ff;
  background: #1f4b8f;
}

.marks-entry-table tbody tr:nth-child(even) { background: #f8fbff; }
.marks-entry-table tbody tr:hover { background: #eef8f7; }

.marks-entry-table input[type="number"] {
  min-height: 38px;
  border-color: #bfd3e5;
  font-weight: 700;
  color: #17375e;
  background: #fff;
}

.marks-entry-table input[type="number"]:focus {
  border-color: #16858b;
  box-shadow: 0 0 0 3px rgba(22, 133, 139, 0.15);
}

.entry-help {
  margin-top: 8px;
}

/* Closed exams are review workspaces: show the next useful destination, keep
   uncommon corrections available but out of the way. */
.closed-exam-workspace-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0;
}

.closed-exam-workspace-nav a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 9px 11px;
  border: 1px solid #d7e3ef;
  border-radius: 11px;
  color: #24476f;
  font-size: 0.84rem;
  font-weight: 750;
  text-decoration: none;
  background: #fff;
  box-shadow: 0 2px 8px rgba(22, 62, 104, 0.04);
}

.closed-exam-workspace-nav a:hover {
  border-color: #5b9bc8;
  color: #123d70;
  background: #f3f9ff;
}

.closed-exam-workspace-nav a > span {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  color: #fff;
  font-size: 0.68rem;
  background: #1f5d9b;
}

.closed-exam-workspace-nav b {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  margin-left: auto;
  padding: 0 5px;
  border-radius: 999px;
  color: #991b1b;
  font-size: 0.72rem;
  background: #fee2e2;
}

.closed-exam-disclosure {
  padding: 0;
  overflow: hidden;
}

.closed-exam-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
  padding: 14px 17px;
  cursor: pointer;
  list-style: none;
  background: linear-gradient(90deg, #fbfdff, #f5f9fd);
}

.closed-exam-disclosure > summary::-webkit-details-marker { display: none; }

.closed-exam-disclosure > summary > span:first-child {
  display: grid;
  gap: 3px;
}

.closed-exam-disclosure > summary strong {
  color: #163f70;
  font-size: 0.96rem;
}

.closed-exam-disclosure > summary small {
  color: #64748b;
  line-height: 1.35;
}

.closed-exam-disclosure-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  color: #1f5d9b;
  font-size: 0.78rem;
  font-weight: 750;
}

.closed-exam-disclosure-action::after {
  content: "⌄";
  font-size: 1rem;
  transition: transform 160ms ease;
}

.closed-exam-disclosure[open] > summary {
  border-bottom: 1px solid #dce7f1;
  background: #eff7ff;
}

.closed-exam-disclosure[open] .closed-exam-disclosure-action::after { transform: rotate(180deg); }
.closed-exam-disclosure-body { padding: 17px; }
.closed-exam-disclosure--critical { border-color: #f1c4ab; }
.closed-exam-disclosure--critical > summary { background: #fffaf7; }
.closed-exam-disclosure--critical > summary strong { color: #9a3412; }

.exam-score-entry-card {
  border-color: #b9d7ec;
  box-shadow: 0 8px 24px rgba(23, 72, 123, 0.09);
}

.exam-score-entry-card .grade-entry-grid { margin-top: 14px; }

.exam-score-entry-card .grade-entry-link {
  min-height: 72px;
  align-content: center;
  border-color: #bdd7e9;
  background: #fbfdff;
}

.exam-score-entry-card .grade-entry-link.is-complete {
  color: #17644d;
  border-color: #9bd8c5;
  background: #f0fdf7;
}

.entry-selected-list {
  margin-top: 8px;
  display: grid;
  gap: 6px;
}

.entry-selected-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 6px 8px;
}

.entry-selected-label {
  min-width: 0;
}

.inline-btn {
  width: auto;
  min-width: 108px;
  padding: 8px 12px;
}

.button-secondary {
  background: #fff;
  color: var(--text);
  border: 1px solid var(--line);
}

.button-secondary:hover {
  filter: none;
  border-color: var(--accent);
}

.table-action-cell {
  white-space: nowrap;
}

.action-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.action-cell .ghost-btn,
.action-cell .danger-btn {
  width: auto;
  min-width: 96px;
}

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

.merit-report-btn {
  min-width: 88px;
  padding: 7px 12px;
  white-space: nowrap;
  overflow-wrap: normal;
  line-height: 1.1;
}

.teacher-action-cell {
  display: grid;
  grid-template-columns: repeat(3, minmax(92px, 1fr));
  gap: 8px;
  align-items: stretch;
}

.teacher-action-cell-inactive {
  grid-template-columns: repeat(2, minmax(92px, 1fr));
}

.teachers-directory-table {
  table-layout: fixed;
}

.teachers-directory-table th:nth-child(1),
.teachers-directory-table td:nth-child(1) {
  width: 6%;
}

.teachers-directory-table th:nth-child(2),
.teachers-directory-table td:nth-child(2) {
  width: 17%;
}

.teachers-directory-table th:nth-child(3),
.teachers-directory-table td:nth-child(3) {
  width: 14%;
}

.teachers-directory-table th:nth-child(4),
.teachers-directory-table td:nth-child(4) {
  width: 21%;
}

.teachers-directory-table th:nth-child(5),
.teachers-directory-table td:nth-child(5) {
  width: 16%;
}

.teachers-directory-table th:nth-child(6),
.teachers-directory-table td:nth-child(6) {
  width: 10%;
}

.teachers-directory-table th:nth-child(7),
.teachers-directory-table td:nth-child(7) {
  width: 16%;
}

.teacher-index-cell {
  color: #64748b;
  font-weight: 700;
  white-space: nowrap;
}

.teachers-directory-table td {
  vertical-align: middle;
}

.teacher-primary-cell strong,
.teacher-contact-cell span {
  display: block;
  min-width: 0;
}

.teacher-primary-cell strong {
  color: #0f172a;
  line-height: 1.35;
}

.teacher-contact-cell span,
.teacher-email-cell span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.teacher-subjects-cell {
  min-width: 0;
}

.teacher-load-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.teacher-load-count {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  color: #1d4ed8;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}

.teacher-subjects-trigger {
  white-space: nowrap;
}

.teachers-table th:nth-child(5),
.teachers-table td:nth-child(5) {
  min-width: 104px;
  white-space: nowrap;
  overflow-wrap: normal;
}

.teachers-table th:nth-child(2),
.teachers-table td:nth-child(2) {
  min-width: 112px;
  white-space: nowrap;
  overflow-wrap: normal;
}

.teachers-table th:nth-child(6),
.teachers-table td:nth-child(6) {
  min-width: 306px;
}

.teacher-action-btn,
.teacher-action-form {
  min-width: 92px;
}

.teacher-action-btn {
  white-space: nowrap;
  overflow-wrap: normal;
  text-align: center;
}

.teacher-action-form button {
  width: 100%;
}

.table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #e2e8f0;
}

.table-pagination-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ghost-btn.is-disabled {
  opacity: 0.55;
  pointer-events: none;
}

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

.teacher-edit-modal-header h3 {
  margin: 0;
}

.teacher-subjects-title-wrap {
  display: grid;
  gap: 4px;
}

.teacher-subjects-title-wrap .admin-page-kicker {
  margin: 0;
}

.teacher-subjects-title-wrap .muted-text {
  margin: 0;
}

.teacher-subjects-panel {
  width: min(700px, calc(100vw - 32px));
}

.teacher-subjects-body {
  display: grid;
  gap: 16px;
}

.teacher-subjects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.teacher-subject-card {
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid #dbe5f4;
  background:
    radial-gradient(circle at top right, rgba(37, 99, 235, 0.12), transparent 40%),
    linear-gradient(180deg, #ffffff, #f8fbff);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
}

.teacher-subject-card strong {
  color: #0f172a;
  line-height: 1.35;
}

.teacher-subject-card span,
.teacher-subjects-empty span {
  color: #64748b;
  font-size: 0.92rem;
}

.teacher-subjects-empty {
  display: grid;
  gap: 6px;
  padding: 18px;
  border: 1px dashed #cbd5e1;
  border-radius: 18px;
  background: #f8fafc;
}

.teacher-edit-close-btn {
  border: 0;
  background: #fff1f2;
  color: #9f1239;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
}

.teacher-edit-close-btn:hover {
  background: #ffe4e6;
}

.registry-table .ghost-btn,
.registry-table .danger-btn,
.registry-table .inline-btn {
  max-width: 100%;
}

.grade-preview {
  display: grid;
  gap: 10px;
}

.grade-preview-row {
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 10px;
}

.grade-preview-name {
  font-weight: 700;
}

.grade-stream-chip-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.grade-stream-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px 5px 10px;
  border-radius: 999px;
  border: 1px solid #9ad9cd;
  background: linear-gradient(180deg, #effcf8 0%, #e2f8f2 100%);
  color: #0f4f47;
  font-size: 0.92rem;
}

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

.chip-remove-btn {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  padding: 0;
  border: 1px solid #fca5a5;
  background: linear-gradient(180deg, #fff6f7 0%, #ffe7ea 100%);
  color: #b91c1c;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(185, 28, 28, 0.18);
  font-size: 0.95rem;
}

.chip-remove-btn:hover {
  filter: none;
  background: #ffd8de;
  transform: translateY(-1px);
}

.modal-open {
  overflow: hidden;
}

.confirm-modal {
  position: fixed;
  inset: 0;
  background: rgba(16, 24, 40, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 200;
  backdrop-filter: blur(2px);
}

.confirm-modal.is-open {
  display: flex;
  animation: fade-in 180ms ease-out;
}

.confirm-modal-panel {
  width: min(480px, 100%);
  background: #fffdf8;
  border: 1px solid #f8c4cc;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(20, 20, 30, 0.28);
  padding: 18px;
  animation: lift 180ms ease-out;
}

.confirm-modal-panel h3 {
  margin: 0 0 6px;
  color: #8a1024;
}

.confirm-modal-actions {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.confirm-modal-actions .ghost-btn {
  min-width: fit-content;
  white-space: nowrap;
  overflow-wrap: normal;
  flex: 0 0 auto;
}

.principal-page-loader[hidden] {
  display: none !important;
}

.principal-page-loader {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: grid;
  place-items: center;
  padding: 18px;
  background:
    radial-gradient(circle at top left, rgba(23, 66, 138, 0.26), transparent 34%),
    radial-gradient(circle at bottom right, rgba(15, 118, 110, 0.2), transparent 38%),
    rgba(8, 17, 34, 0.58);
  backdrop-filter: blur(10px);
}

.principal-loader-active {
  cursor: progress;
}

.principal-page-loader-panel {
  display: grid;
  gap: 14px;
  width: min(430px, 94vw);
  padding: 22px;
  border: 1px solid rgba(219, 228, 240, 0.92);
  border-radius: 26px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 251, 255, 0.98) 58%, rgba(238, 247, 246, 0.98) 100%);
  box-shadow: 0 30px 90px rgba(8, 17, 34, 0.32);
  animation: principalLoaderIn 180ms ease-out;
}

.principal-loader-mark {
  display: inline-flex;
  gap: 7px;
  align-items: end;
  width: fit-content;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 18px;
  background: linear-gradient(135deg, #173b72 0%, #0f766e 100%);
  box-shadow: 0 16px 30px rgba(23, 59, 114, 0.22);
}

.principal-loader-mark span {
  width: 9px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  animation: principalLoaderBar 900ms ease-in-out infinite;
}

.principal-loader-mark span:nth-child(2) {
  height: 28px;
  animation-delay: 120ms;
}

.principal-loader-mark span:nth-child(3) {
  height: 23px;
  animation-delay: 240ms;
}

.principal-page-loader-panel h3 {
  margin: 0;
  color: #072f67;
  font-size: 1.18rem;
}

.principal-page-loader-panel p {
  margin: 4px 0 0;
  color: #52627a;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.4;
}

.principal-loader-bars {
  display: grid;
  gap: 7px;
}

.principal-loader-bars i {
  display: block;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8f0fb;
}

.principal-loader-bars i::before {
  content: "";
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #173b72, #0f766e);
  animation: principalLoaderSweep 1.1s ease-in-out infinite;
}

.principal-loader-bars i:nth-child(2)::before {
  animation-delay: 120ms;
}

.principal-loader-bars i:nth-child(3)::before {
  animation-delay: 240ms;
}

.principal-loader-bars i:nth-child(4)::before {
  animation-delay: 360ms;
}

.principal-page-loader-panel small {
  color: #64748b;
  font-size: 0.76rem;
  font-weight: 850;
}

@keyframes principalLoaderIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes principalLoaderBar {
  0%, 100% {
    transform: scaleY(0.68);
    opacity: 0.72;
  }
  50% {
    transform: scaleY(1.08);
    opacity: 1;
  }
}

@keyframes principalLoaderSweep {
  0% {
    transform: translateX(-110%);
  }
  100% {
    transform: translateX(250%);
  }
}

.modal-btn {
  width: auto;
  padding: 9px 14px;
  border-radius: 10px;
  font-weight: 700;
}

.progress-modal {
  position: fixed;
  inset: 0;
  z-index: 2600;
  display: none;
}

.progress-modal.is-open {
  display: block;
}

.progress-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.58);
}

.progress-modal__panel {
  position: relative;
  width: min(460px, calc(100vw - 24px));
  margin: min(15vh, 120px) auto 0;
  background: #fff;
  border-radius: 16px;
  border: 1px solid #dbe3f1;
  padding: 18px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.3);
}

.progress-modal__title {
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
  font-size: 1.05rem;
}

.progress-modal__message {
  color: #334155;
  margin-bottom: 12px;
}

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

.progress-bar__fill {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #0ea5e9 0%, #22c55e 100%);
  transition: width 0.25s ease;
}

.progress-meta {
  margin-top: 10px;
  color: #475569;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.progress-dot {
  opacity: 0.7;
}

.progress-cache-meta {
  margin-top: 6px;
  font-size: 0.86rem;
}

.progress-complete {
  display: none;
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  font-weight: 700;
  width: fit-content;
}

.progress-complete.is-visible {
  display: inline-flex;
}

.progress-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}

.modal-cancel {
  background: #fff;
  color: var(--text);
  border: 1px solid var(--line);
}

.modal-danger {
  background: linear-gradient(135deg, #c32035, #a51226);
  border: 1px solid #9f1239;
  color: #fff;
}

.modal-primary {
  background: linear-gradient(135deg, var(--accent), #163b73);
  border: 1px solid var(--accent);
  color: #fff;
}

.modal-neutral {
  background: #fff;
  color: var(--text);
  border: 1px solid var(--line);
}

.student-edit-panel {
  width: min(920px, 100%);
  max-height: 88vh;
  overflow-y: auto;
}

.edit-field {
  display: grid;
  gap: 6px;
}

.field-label {
  font-size: 0.84rem;
  font-weight: 700;
  color: #334155;
}

.picker-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

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

.subject-group-head {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.subject-group-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.subject-group-actions .ghost-btn {
  width: auto;
  padding: 6px 10px;
}

#grade-picker {
  max-height: 280px;
  overflow-y: auto;
  padding-right: 4px;
}

.js-group-meta {
  white-space: nowrap;
}

.assignment-primary-list {
  max-height: 420px;
  overflow-y: auto;
  padding-right: 4px;
}

#secondary-picker-list {
  max-height: 300px;
  overflow-y: auto;
}

.score-progress {
  min-width: 0;
  width: 100%;
  display: grid;
  gap: 6px;
}

.score-progress-text {
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.25;
}

.score-progress-track {
  width: 100%;
  height: 9px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
}

.score-progress-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(
    135deg,
    hsl(var(--progress-hue, 0), 78%, 48%),
    hsl(var(--progress-hue, 0), 70%, 40%)
  );
  transition: width 220ms ease;
}

.grade-entry-link {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  min-width: 120px;
  width: 100%;
  text-align: center;
  word-break: break-word;
}

.grade-entry-link small {
  font-size: 0.75rem;
  line-height: 1;
}

.grade-entry-link.is-pending {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

.grade-entry-link.is-complete {
  border-color: #86efac;
  background: #f0fdf4;
  color: #166534;
}

.grade-entry-link.is-no-data {
  border-color: #cbd5e1;
  background: #f8fafc;
  color: #334155;
}

.grade-entry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.analytics-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.analytics-kpi-card {
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  padding: 10px 12px;
  background: #f8fbff;
}

.analytics-kpi-label {
  font-size: 0.82rem;
  color: #5b6b83;
}

.analytics-kpi-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.1;
  margin-top: 4px;
}

.analytics-kpi-unit {
  font-size: 0.9rem;
  font-weight: 600;
  color: #475569;
  margin-left: 2px;
}

.teacher-hero {
  display: grid;
  grid-template-columns: minmax(280px, 1.4fr) minmax(260px, 1fr);
  gap: 16px;
  background:
    radial-gradient(circle at top right, rgba(15, 118, 110, 0.14), transparent 34%),
    linear-gradient(180deg, #fffdf8 0%, #f7fbff 100%);
}

.teacher-profile {
  display: flex;
  gap: 14px;
  align-items: center;
}

.teacher-avatar {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 1.7rem;
  font-weight: 800;
  color: #0f4f47;
  background: linear-gradient(180deg, #e6fbf5 0%, #d4f2eb 100%);
  border: 1px solid #9ad9cd;
  box-shadow: 0 12px 24px rgba(15, 118, 110, 0.12);
}

.teacher-kicker {
  margin: 0 0 4px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0f766e;
}

.teacher-profile-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.teacher-meta-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.84);
  display: grid;
  gap: 6px;
}

.teacher-meta-label,
.teacher-profile-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.teacher-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1.2fr) minmax(280px, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.teacher-dashboard-page {
  display: grid;
  gap: 16px;
}

.teacher-landing-page {
  display: grid;
  gap: 14px;
}

.teacher-home,
.teacher-profile-page {
  display: grid;
  gap: 14px;
}

.teacher-home-hero {
  padding: 18px;
  border: 1px solid #dbeafe;
  border-radius: 16px;
  background:
    radial-gradient(circle at top right, rgba(14, 165, 233, 0.12), transparent 36%),
    linear-gradient(135deg, #ffffff 0%, #f8fbff 58%, #f0fdf4 100%);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.teacher-home-hero h2 {
  margin-bottom: 4px;
}

.teacher-home-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 2px;
}

.teacher-exam-nav {
  margin: 10px 0 16px;
}

.teacher-home-nav-item {
  display: grid;
  gap: 4px;
  min-height: 76px;
  padding: 12px;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  background: #ffffff;
  color: #0f172a;
  text-decoration: none;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.05);
}

.teacher-home-nav-item.is-active {
  border-color: #93c5fd;
  background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
}

.teacher-home-nav-item:hover {
  border-color: #60a5fa;
  transform: translateY(-1px);
}

.teacher-home-nav-item span,
.teacher-home-card span,
.teacher-profile-card span {
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.teacher-home-nav-item strong {
  color: #0f172a;
  font-size: 0.96rem;
  line-height: 1.25;
}

.teacher-home-alert {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.55fr);
  gap: 16px;
  align-items: center;
  padding: 18px;
  border: 1px solid #bfdbfe;
  border-radius: 16px;
  background: linear-gradient(135deg, #eff6ff 0%, #ffffff 62%, #f8fbff 100%);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.07);
}

.teacher-home-alert.has-work {
  border-color: #fdba74;
  background: linear-gradient(135deg, #fff7ed 0%, #ffffff 62%, #f8fbff 100%);
}

.teacher-home-alert h3 {
  margin: 0 0 6px;
  font-size: 1.35rem;
}

.teacher-home-alert-actions {
  display: grid;
  gap: 8px;
}

.teacher-home-work-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #fed7aa;
  background: #ffffff;
  color: #0f172a;
  text-decoration: none;
  font-weight: 800;
}

.teacher-home-work-link span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.teacher-home-work-link strong {
  color: #9a3412;
}

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

.teacher-home-card {
  display: grid;
  align-content: space-between;
  gap: 10px;
  min-height: 150px;
  padding: 16px;
  border: 1px solid #dbe3ef;
  border-radius: 14px;
  background: #ffffff;
  color: #0f172a;
  text-decoration: none;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
}

.teacher-home-card.is-primary {
  border-color: #bfdbfe;
  background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
}

.teacher-home-card:hover,
.teacher-home-work-link:hover {
  border-color: #60a5fa;
  box-shadow: 0 16px 28px rgba(15, 23, 42, 0.1);
  transform: translateY(-1px);
}

.teacher-home-card h3 {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.32;
}

.teacher-home-card small {
  color: #64748b;
  font-weight: 800;
}

.teacher-profile-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.teacher-profile-card,
.teacher-profile-panel {
  border: 1px solid #dbeafe;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.teacher-profile-card {
  display: grid;
  gap: 6px;
  padding: 13px;
}

.teacher-profile-card strong {
  min-width: 0;
  color: #0f172a;
  overflow-wrap: anywhere;
}

.teacher-profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
  gap: 14px;
}

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

.teacher-landing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 18px;
  border: 1px solid #dbeafe;
  border-radius: 16px;
  background:
    radial-gradient(circle at top right, rgba(14, 165, 233, 0.12), transparent 36%),
    linear-gradient(135deg, #ffffff 0%, #f8fbff 58%, #f0fdf4 100%);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.teacher-landing-hero h2 {
  margin-bottom: 4px;
}

.teacher-landing-stats {
  display: grid;
  gap: 8px;
  min-width: 190px;
}

.teacher-landing-stats span {
  display: flex;
  justify-content: center;
  padding: 8px 11px;
  border: 1px solid #dbe3ef;
  border-radius: 999px;
  background: #ffffff;
  color: #334155;
  font-size: 0.82rem;
  font-weight: 800;
}

.teacher-focus-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.55fr);
  gap: 16px;
  align-items: center;
  padding: 18px;
  border: 1px solid #bbf7d0;
  border-radius: 16px;
  background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 62%, #f8fbff 100%);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.07);
}

.teacher-focus-card.has-work {
  border-color: #fdba74;
  background: linear-gradient(135deg, #fff7ed 0%, #ffffff 62%, #f8fbff 100%);
}

.teacher-focus-copy h3 {
  margin: 0 0 6px;
  font-size: 1.35rem;
}

.teacher-focus-copy p:last-child {
  margin-bottom: 0;
}

.teacher-focus-actions {
  display: grid;
  gap: 8px;
}

.teacher-focus-actions .primary-btn {
  width: 100%;
}

.teacher-focus-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #fed7aa;
  background: #ffffff;
  color: #0f172a;
  text-decoration: none;
  font-weight: 800;
}

.teacher-focus-link:hover {
  border-color: #f59e0b;
  box-shadow: 0 12px 22px rgba(15, 23, 42, 0.08);
}

.teacher-focus-link span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.teacher-focus-link strong {
  color: #9a3412;
}

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

.teacher-action-tile {
  display: grid;
  gap: 7px;
  min-height: 118px;
  padding: 16px;
  border: 1px solid #dbe3ef;
  border-radius: 14px;
  background: #ffffff;
  color: #0f172a;
  text-decoration: none;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.teacher-action-tile:hover {
  transform: translateY(-1px);
  border-color: #93c5fd;
  box-shadow: 0 16px 28px rgba(15, 23, 42, 0.1);
}

.teacher-action-tile.is-primary {
  border-color: #bfdbfe;
  background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
}

.teacher-action-tile span {
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.teacher-action-tile strong {
  font-size: 1.05rem;
  line-height: 1.3;
}

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

.teacher-detail-panel {
  padding: 16px;
  border: 1px solid #dbeafe;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.compact-list .teacher-assignment-row,
.compact-list .teacher-class-row {
  padding: 9px 10px;
}

.teacher-more-note {
  margin: 10px 0 0;
  font-size: 0.86rem;
}

.teacher-dashboard-hero {
  align-items: center;
  margin-bottom: 0;
}

.teacher-dashboard-hero h2 {
  margin-bottom: 4px;
}

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

.teacher-dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.teacher-dashboard-metric {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 13px;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
}

.teacher-dashboard-metric span {
  color: #64748b;
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.teacher-dashboard-metric strong {
  color: #0f172a;
  font-size: 1.75rem;
  line-height: 1;
}

.teacher-dashboard-metric small {
  color: #64748b;
  font-weight: 700;
  line-height: 1.3;
}

.teacher-dashboard-metric.is-urgent {
  border-color: #fed7aa;
  background: linear-gradient(135deg, #fff7ed 0%, #ffffff 100%);
}

.teacher-dashboard-metric.is-clear {
  border-color: #bbf7d0;
  background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
}

.teacher-alert-card,
.teacher-priority-card,
.teacher-panel {
  border-color: #dbeafe;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.teacher-priority-card.has-work {
  border-color: #fed7aa;
  background: linear-gradient(135deg, #fff7ed 0%, #ffffff 58%, #f8fbff 100%);
}

.teacher-priority-card.is-clear {
  border-color: #bbf7d0;
}

.teacher-work-list,
.teacher-assignment-list,
.teacher-class-list {
  display: grid;
  gap: 9px;
}

.teacher-work-item,
.teacher-assignment-row,
.teacher-class-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
}

.teacher-work-item {
  text-decoration: none;
  color: inherit;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.teacher-work-item:hover {
  transform: translateY(-1px);
  border-color: #f59e0b;
  box-shadow: 0 12px 22px rgba(15, 23, 42, 0.08);
}

.teacher-work-item span,
.teacher-assignment-row strong,
.teacher-class-row strong {
  min-width: 0;
  color: #0f172a;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.teacher-work-item strong {
  color: #9a3412;
  font-weight: 800;
}

.teacher-assignment-row div,
.teacher-class-row div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.teacher-assignment-row span:not(.status-chip),
.teacher-class-row span:not(.status-chip) {
  color: #64748b;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.teacher-class-row .ghost-btn {
  width: auto;
  min-width: 86px;
}

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

.teacher-section-head h3 {
  margin: 0;
}

.teacher-profile-panel {
  display: grid;
  gap: 10px;
}

.school-hero {
  display: grid;
  grid-template-columns: minmax(280px, 1.4fr) minmax(240px, 0.8fr);
  gap: 16px;
  background:
    radial-gradient(circle at top left, rgba(15, 118, 110, 0.16), transparent 38%),
    linear-gradient(180deg, #fffdf8 0%, #f7fbff 100%);
}

.school-hero-chip {
  align-self: center;
  justify-self: end;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid #9ad9cd;
  background: linear-gradient(180deg, #e6fbf5 0%, #d4f2eb 100%);
  color: #0f4f47;
  min-width: 200px;
  text-align: center;
  box-shadow: 0 12px 24px rgba(15, 118, 110, 0.12);
}

.school-hero-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.school-hero-value {
  font-size: 1.3rem;
  font-weight: 800;
  margin-top: 6px;
}

.school-profile-grid {
  display: grid;
  grid-template-columns: minmax(320px, 2fr) minmax(280px, 1fr);
  gap: 16px;
  align-items: start;
}

.school-profile-grid > .card {
  min-width: 0;
  overflow: hidden;
}

.school-form-grid,
.school-asset-grid {
  min-width: 0;
}

.school-form-section {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}

.school-form-section h4 {
  margin: 0 0 12px;
}

.school-form-actions {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.live-search-status {
  margin: -2px 0 10px;
}

.live-search-panel-loading {
  opacity: 0.58;
  transition: opacity 120ms ease;
  pointer-events: none;
}

.school-asset-grid {
  display: grid;
  gap: 12px;
}

.school-asset-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  background: #fff;
  display: grid;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
}

.school-asset-preview {
  width: 100%;
  min-width: 0;
  min-height: 160px;
  max-width: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 8px;
}

.school-asset-card img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 140px;
  object-fit: contain;
}

.school-asset-header {
  font-weight: 700;
  color: #0f172a;
}

.school-asset-action {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--muted);
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(280px, 1fr));
  gap: 14px;
  align-items: stretch;
}

.settings-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 240px;
}

.settings-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 8px;
}

.settings-card-head h3 {
  margin: 0;
}

.coming-soon-role-picker {
  display: grid;
  gap: 10px;
}

.coming-soon-role-picker > span {
  color: #0f172a;
  font-weight: 700;
}

.coming-soon-role-grid {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.coming-soon-settings-list {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.coming-soon-settings-item {
  display: grid;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid #e7c78d;
  background: linear-gradient(135deg, #fffaf0, #fff);
}

.coming-soon-settings-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.coming-soon-settings-head strong {
  color: #7c2d12;
  font-size: 1rem;
}

.coming-soon-settings-head .muted-text {
  margin: 6px 0 0;
}

.settings-intro {
  margin: 0;
}

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

.settings-card-body {
  max-height: 430px;
  overflow-y: auto;
  padding-right: 4px;
}

.settings-card-wide {
  grid-column: span 2;
}

.settings-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.settings-check input {
  width: auto;
  margin: 0;
}

.principal-threshold-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.principal-threshold-preview span {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  background: #f8fafc;
}

.principal-threshold-preview .is-support {
  color: #991b1b;
  background: #fff1f2;
  border-color: #fecdd3;
}

.principal-threshold-preview .is-meeting {
  color: #92400e;
  background: #fffbeb;
  border-color: #fde68a;
}

.principal-threshold-preview .is-exceeding {
  color: #166534;
  background: #f0fdf4;
  border-color: #bbf7d0;
}

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

  .settings-card-wide {
    grid-column: span 2;
  }
}

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

  .settings-card-wide {
    grid-column: span 1;
  }

  .settings-card-body {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .principal-threshold-preview {
    grid-template-columns: 1fr;
  }

  .admin-page-hero,
  .admin-section-head {
    display: grid;
  }

  .admin-page-actions,
  .admin-page-actions .ghost-btn,
  .admin-page-actions .primary-btn {
    width: 100%;
  }

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

  .student-report-cache-head {
    display: grid;
  }

  .student-report-status-pill {
    justify-self: start;
  }

  .student-report-status-grid {
    grid-template-columns: 1fr;
  }

  .student-report-status-tile-wide {
    grid-column: auto;
  }
}

.teacher-profile-row {
  display: grid;
  grid-template-columns: minmax(120px, 180px) 1fr;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 10px 12px;
}

.teacher-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.teacher-subject-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid #9ad9cd;
  background: linear-gradient(180deg, #effcf8 0%, #e2f8f2 100%);
  color: #0f4f47;
  font-weight: 700;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.analytics-kpi-detail {
  margin-top: 6px;
  color: #0f172a;
  font-weight: 600;
}

.analytics-kpi-detail-tight {
  margin-top: 2px;
}

.analytics-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin: 6px 0 12px;
}

.analytics-toolbar-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.analytics-batch-form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.analytics-batch-label {
  margin: 0;
}

.analytics-batch-select {
  width: 90px;
}

.analytics-pagination {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 10px;
}

.comment-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.comment-status--set {
  background: #dcfce7;
  color: #166534;
}

.comment-status--empty {
  background: #fee2e2;
  color: #991b1b;
}

.comment-missing td {
  background: #fff7ed;
}

.comment-batch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), #0b5f57);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  border: 1px solid transparent;
  box-shadow: 0 10px 22px rgba(15, 118, 110, 0.22);
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
  line-height: 1.3;
}

.comment-batch-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 14px 28px rgba(15, 118, 110, 0.26);
}

.comment-batch-pill {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.comment-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 2000;
}

.comment-modal.is-open {
  display: block;
}

.comment-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
}

.comment-modal__panel {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(900px, 92vw);
  max-height: 86vh;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 50px rgba(15, 23, 42, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.comment-modal__header {
  padding: 16px 18px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.comment-modal__title {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
}

.comment-modal__meta {
  font-size: 13px;
  color: #64748b;
  margin-top: 2px;
}

.comment-modal__body {
  padding: 16px 18px 0;
  overflow: auto;
}

.comment-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  padding-bottom: 16px;
}

.comment-card {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.comment-card--empty {
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #f1f5f9;
}

.comment-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.comment-card__name {
  font-weight: 700;
  color: #0f172a;
}

.comment-card__meta {
  font-size: 12px;
  color: #64748b;
}

.comment-card textarea {
  width: 100%;
  border-radius: 10px;
  border: 1px solid #cbd5f5;
  padding: 8px 10px;
  resize: vertical;
  font-size: 13px;
}

.comment-card__scores {
  display: grid;
  gap: 10px;
}

.comment-card__subject {
  background: #f1f5f9;
  border-radius: 10px;
  padding: 8px 10px;
}

.comment-card__subject-title {
  font-weight: 700;
  font-size: 12px;
  color: #0f172a;
  margin-bottom: 6px;
}

.comment-card__subject-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 6px;
}

.comment-card__score {
  background: #ffffff;
  border-radius: 8px;
  padding: 6px 8px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 4px 8px;
  font-size: 12px;
  color: #1e293b;
  border: 1px solid #e2e8f0;
}

.comment-score__label {
  grid-column: 1 / -1;
  color: #475569;
}

.comment-score__kind {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}

.comment-score__kind.is-total {
  color: #1d4ed8;
  font-weight: 700;
}

.comment-score__kind.is-primary {
  color: #0f766e;
  font-weight: 600;
}

.comment-score__kind.is-secondary {
  color: #c2410c;
  font-weight: 600;
}

.comment-modal__footer {
  padding: 12px 18px 16px;
  border-top: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.comment-modal__spacer {
  flex: 1;
}

.report-forms-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.report-forms-builder {
  display: grid;
  gap: 14px;
}

.report-forms-step-card {
  border-color: #dbeafe;
}

.report-forms-step-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

.report-forms-step-head h3 {
  margin-bottom: 4px;
}

.report-forms-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 999px;
  background: #0f172a;
  color: #ffffff;
  font-weight: 800;
}

.report-scope-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.report-scope-option {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  min-width: 0;
  padding: 13px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
  cursor: pointer;
}

.report-scope-option:has(input:checked) {
  border-color: #0ea5e9;
  background: #f0f9ff;
  box-shadow: 0 10px 22px rgba(14, 165, 233, 0.11);
}

.report-scope-option input {
  width: auto;
  margin-top: 3px;
}

.report-scope-option span,
.report-scope-option strong,
.report-scope-option em {
  display: block;
  min-width: 0;
}

.report-scope-option strong {
  color: #0f172a;
}

.report-scope-option em {
  margin-top: 4px;
  color: #64748b;
  font-size: 0.84rem;
  font-style: normal;
  line-height: 1.35;
}

.report-options-grid {
  display: grid;
  grid-template-columns: minmax(180px, 0.9fr) minmax(280px, 1.4fr) minmax(190px, 0.9fr);
  gap: 12px;
}

.report-option-panel {
  padding: 13px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
}

.report-toggle-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.report-toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 9px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
  color: #334155;
  font-weight: 700;
}

.report-toggle-row input {
  width: auto;
}

.report-forms-action-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-color: #bbf7d0;
  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
}

.report-forms-action-copy {
  min-width: 0;
}

.report-forms-match-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 11px;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  font-weight: 800;
}

.report-forms-stream-help,
.report-forms-match-copy {
  margin-top: 6px;
}

.report-forms-search {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.report-forms-search-input {
  min-width: 260px;
}

.report-forms-results {
  margin-top: 12px;
  max-height: 260px;
  overflow: auto;
}

.report-forms-selected-card {
  margin-top: 12px;
}

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

.report-forms-keep-open {
  margin-top: 8px;
}

.report-forms-download-title {
  margin-bottom: 8px;
}

.report-forms-download-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

.download-section {
  display: none;
  margin-top: 12px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.download-section.is-open {
  display: block;
}

.download-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.selected-students {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.selected-student-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #f8fafc;
}

.admin-management-section {
  margin-top: 16px;
}

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

.admin-edit-panel {
  margin-top: 8px;
  padding: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f8fafc;
}

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

.admin-edit-panel .grid button {
  grid-column: span 2;
}

.admin-details summary {
  cursor: pointer;
  font-weight: 600;
  color: #0f172a;
}

.admin-super-chip {
  margin-left: 6px;
}

.principal-chip {
  margin-left: 6px;
  border-color: #bae6fd;
  background: #e0f2fe;
  color: #075985;
}

.checkbox-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #334155;
  font-weight: 700;
}

.checkbox-line input {
  width: auto;
}

.user-role-fieldset {
  grid-column: 1 / -1;
  margin: 0;
  padding: 12px;
  border: 1px solid #dbe4ef;
  border-radius: 12px;
  background: #ffffff;
}

.user-role-fieldset legend {
  padding: 0 6px;
  color: #0f172a;
  font-weight: 800;
}

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

.user-role-option {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}

.user-role-option input {
  width: auto;
  margin-top: 3px;
}

.user-role-option span,
.user-role-option small {
  display: block;
}

.user-role-option small {
  margin-top: 3px;
  color: #64748b;
  font-weight: 500;
  line-height: 1.35;
}

.user-role-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.user-role-badges .status-chip {
  margin-left: 0;
}

.principal-page {
  display: grid;
  gap: 16px;
}

.principal-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 12px 16px;
  border: 1px solid #dbeafe;
  border-radius: 16px;
  background: linear-gradient(135deg, #ffffff 0%, #eff6ff 52%, #ecfdf5 100%);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
}

.principal-hero h2 {
  margin: 0 0 6px;
}

.principal-hero-note {
  display: grid;
  gap: 4px;
  min-width: 190px;
  padding: 14px 16px;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
}

.principal-hero-note span,
.principal-kpi-card span,
.principal-engagement-strip span {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.principal-hero-note strong {
  color: #0f172a;
}

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

.principal-kpi-card {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
}

.principal-kpi-card strong {
  color: #0f172a;
  font-size: 30px;
  line-height: 1;
}

.principal-kpi-card.is-weak strong {
  color: #b32020;
}

.principal-kpi-card.is-fair strong {
  color: #b36b00;
}

.principal-kpi-card.is-strong strong {
  color: #2e6b0f;
}

.principal-kpi-card small,
.principal-alert-item span,
.principal-watch-row span,
.principal-bar-row span,
.principal-exam-row span,
.principal-coverage-row span,
.principal-engagement-strip small {
  color: #64748b;
  font-weight: 700;
}

.principal-kpi-card small.is-watch {
  color: #b32020;
}

.principal-layout,
.principal-grid-two {
  display: grid;
  grid-template-columns: minmax(300px, 0.95fr) minmax(360px, 1.35fr);
  gap: 16px;
  align-items: stretch;
}

.principal-layout.is-single {
  grid-template-columns: 1fr;
}

.principal-grid-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(360px, auto);
}

.principal-grid-two.is-single {
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
}

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

.principal-section-head h3 {
  margin: 0;
}

.principal-inline-link {
  color: var(--accent);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.principal-inline-link:hover {
  text-decoration: underline;
}

.principal-attention-card,
.principal-chart-card,
.principal-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
}

.principal-attention-card {
  min-height: 310px;
}

.principal-chart-card,
.principal-panel {
  min-height: 360px;
}

.principal-panel-coverage {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.principal-alert-list,
.principal-watch-list,
.principal-exam-list,
.principal-coverage-list,
.principal-bar-list {
  display: grid;
  gap: 10px;
  align-content: start;
  min-height: 0;
}

.principal-alert-list,
.principal-watch-list,
.principal-exam-list,
.principal-bar-list {
  overflow: auto;
  padding-right: 2px;
  scrollbar-width: thin;
}

.principal-alert-list {
  max-height: 260px;
}

.principal-bar-list,
.principal-watch-list {
  max-height: 270px;
}

.principal-exam-list {
  max-height: 292px;
}

.principal-coverage-list {
  margin-bottom: 12px;
}

.principal-coverage-ok {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
}

.principal-coverage-ok strong {
  color: #166534;
}

.principal-coverage-ok span {
  color: #64748b;
  font-weight: 700;
}

.principal-login-analytics {
  display: grid;
  gap: 16px;
  border-color: #dbeafe;
  background:
    radial-gradient(circle at top right, rgba(31, 75, 143, 0.08), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.principal-login-toolbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, auto)) minmax(180px, 220px);
  gap: 10px;
  align-items: end;
}

.principal-login-control-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px;
  border: 1px solid #dbeafe;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
}

.principal-login-filter-btn {
  width: auto;
  min-width: 0;
  padding: 8px 12px;
  border-radius: 999px;
  background: transparent;
  color: #475569;
  font-size: 0.82rem;
  font-weight: 800;
  border: 1px solid transparent;
}

.principal-login-filter-btn.is-active {
  background: linear-gradient(135deg, #1f4b8f, #0f766e);
  color: #ffffff;
  box-shadow: 0 10px 20px rgba(31, 75, 143, 0.18);
}

.principal-login-filter-btn.is-disabled,
.principal-login-filter-btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  box-shadow: none;
}

.principal-login-grade-filter {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.principal-login-grade-filter span {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.principal-login-grade-filter select:disabled {
  color: #94a3b8;
  background: #f1f5f9;
}

.principal-login-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.principal-login-kpi {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid #dbeafe;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
}

.principal-login-kpi span {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.principal-login-kpi strong {
  color: #0f172a;
  font-size: 2rem;
  line-height: 1;
}

.principal-login-kpi small {
  color: #64748b;
  font-weight: 700;
}

.principal-login-chart-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--chart-grid);
  border-radius: 14px;
  background: var(--chart-surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.principal-login-chart-head {
  display: grid;
  gap: 4px;
}

.principal-login-chart-head strong {
  color: var(--chart-text);
}

.principal-login-chart-head small {
  color: var(--chart-muted);
  font-weight: 700;
}

.principal-login-canvas-wrap {
  position: relative;
  min-height: 320px;
}

.principal-login-canvas-wrap canvas {
  width: 100% !important;
  height: 320px !important;
}

.principal-alert-list > .muted-text,
.principal-watch-list > .muted-text,
.principal-exam-list > .muted-text,
.principal-bar-list > .muted-text {
  min-height: 160px;
  display: grid;
  place-items: center;
  padding: 18px;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  text-align: center;
}

.principal-alert-item,
.principal-watch-row,
.principal-exam-row,
.principal-coverage-row,
.principal-bar-row {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
  color: inherit;
  text-decoration: none;
}

.principal-alert-item {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.principal-alert-item div,
.principal-watch-row div,
.principal-exam-row div,
.principal-coverage-row div,
.principal-bar-row div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.principal-alert-item strong,
.principal-watch-row strong,
.principal-exam-row strong,
.principal-coverage-row strong,
.principal-bar-row strong {
  color: #0f172a;
  overflow-wrap: anywhere;
}

.principal-alert-item.is-urgent {
  border-color: #fecaca;
  background: linear-gradient(135deg, #fff1f2 0%, #ffffff 100%);
}

.principal-alert-item.is-watch {
  border-color: #fed7aa;
  background: linear-gradient(135deg, #fff7ed 0%, #ffffff 100%);
}

.principal-alert-item.is-clear {
  border-color: #bbf7d0;
  background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
}

.principal-alert-state {
  padding: 5px 9px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155;
  font-size: 0.72rem;
  font-weight: 800;
}

.principal-line-chart {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  overflow: hidden;
}

.principal-line-chart svg {
  display: block;
  width: 100%;
  min-height: 170px;
}

.principal-chart-axis {
  stroke: #cbd5e1;
  stroke-width: 1;
}

.principal-chart-line {
  fill: none;
  stroke: #0f766e;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.principal-chart-point {
  fill: #ffffff;
  stroke: #0f766e;
  stroke-width: 2.5;
}

.principal-chart-value {
  fill: #0f172a;
  font-size: 10px;
  font-weight: 800;
  text-anchor: middle;
}

.principal-trend-labels {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.principal-trend-labels div {
  min-width: 0;
  padding: 9px;
  border-radius: 10px;
  background: #f8fafc;
}

.principal-trend-labels strong,
.principal-trend-labels span,
.principal-trend-labels small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.principal-trend-labels strong {
  color: #0f172a;
}

.principal-trend-labels span,
.principal-trend-labels small {
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 700;
}

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

.principal-trend-signals div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 11px;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.principal-trend-signal-card {
  position: relative;
  overflow: hidden;
  gap: 8px;
  min-height: 148px;
  padding: 14px 14px 16px;
}

.principal-trend-signal-card::after {
  content: "";
  position: absolute;
  inset: auto 14px 0 14px;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: rgba(31, 75, 143, 0.08);
}

.principal-trend-signal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.principal-trend-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  font-size: 1rem;
  font-style: normal;
  font-weight: 900;
}

.principal-trend-glyph.is-up {
  color: #1f6b20;
  background: #e8f7e8;
}

.principal-trend-glyph.is-down {
  color: #b32020;
  background: #fde8e8;
}

.principal-trend-glyph.is-strong {
  color: #9a5b00;
  background: #fff1d6;
}

.principal-trend-glyph.is-watch {
  color: #7c3d12;
  background: #ffedd5;
}

.principal-trend-signals span {
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.principal-trend-signals strong,
.principal-trend-signals small {
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.principal-trend-signal-card.is-up {
  border-color: #cdeac2;
  background: linear-gradient(180deg, #f7fcf6 0%, #ffffff 100%);
}

.principal-trend-signal-card.is-up::after {
  background: linear-gradient(90deg, #9cd48c, #2e6b0f);
}

.principal-trend-signal-card.is-down {
  border-color: #f3c5c5;
  background: linear-gradient(180deg, #fff8f8 0%, #ffffff 100%);
}

.principal-trend-signal-card.is-down::after {
  background: linear-gradient(90deg, #f0a4a4, #b32020);
}

.principal-trend-signal-card.is-strong {
  border-color: #f8ddb0;
  background: linear-gradient(180deg, #fffaf0 0%, #ffffff 100%);
}

.principal-trend-signal-card.is-strong::after {
  background: linear-gradient(90deg, #f6cf8b, #b36b00);
}

.principal-trend-signal-card.is-watch {
  border-color: #fde1b3;
  background: linear-gradient(180deg, #fffaf5 0%, #ffffff 100%);
}

.principal-trend-signal-card.is-watch::after {
  background: linear-gradient(90deg, #f1c27f, #cc7a00);
}

.principal-trend-signal-value {
  font-size: 1.28rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.principal-grade-trend-table {
  display: grid;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.principal-grade-trend-head,
.principal-grade-trend-row {
  display: grid;
  grid-template-columns: minmax(104px, 0.9fr) repeat(var(--exam-count), minmax(74px, 0.7fr)) minmax(94px, 0.8fr);
  gap: 8px;
  align-items: center;
  min-width: max-content;
}

.principal-grade-trend-head span {
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.principal-grade-trend-row {
  padding: 9px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
}

.principal-grade-trend-row strong {
  color: #0f172a;
}

.principal-grade-trend-score,
.principal-grade-trend-latest {
  display: grid;
  place-items: center;
  min-height: 34px;
  padding: 6px 8px;
  border-radius: 9px;
  background: #f8fafc;
  color: #0f172a;
  font-weight: 800;
  white-space: nowrap;
}

.principal-grade-trend-score.is-empty {
  color: #94a3b8;
  background: #f1f5f9;
}

.principal-grade-trend-latest {
  background: #eef2ff;
}

.principal-grade-trend-latest small {
  color: #475569;
  font-size: 0.68rem;
  font-weight: 800;
}

.principal-grade-trend-latest.is-up {
  background: #dcfce7;
  color: #166534;
}

.principal-grade-trend-latest.is-down {
  background: #fee2e2;
  color: #991b1b;
}

.principal-grade-trend-latest.is-stable {
  background: #e0f2fe;
  color: #075985;
}

.principal-bar-row {
  grid-template-columns: minmax(110px, 0.8fr) minmax(130px, 1fr) 52px;
  align-items: center;
}

.principal-bar-track,
.principal-progress {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2e8f0;
}

.principal-bar-track span,
.principal-progress span {
  display: block;
  width: var(--bar-width, var(--progress, 0%));
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0ea5e9 0%, #14b8a6 100%);
}

.principal-bar-track.is-weak span {
  background: linear-gradient(90deg, #ef4444 0%, #f97316 100%);
}

.principal-bar-track.is-fair span {
  background: linear-gradient(90deg, #f59e0b 0%, #eab308 100%);
}

.principal-bar-track.is-strong span {
  background: linear-gradient(90deg, #16a34a 0%, #0d9488 100%);
}

.principal-band-legend .is-weak,
.principal-stream-matrix-row span.is-weak {
  background: #fee2e2;
  color: #991b1b;
}

.principal-band-legend .is-fair,
.principal-stream-matrix-row span.is-fair {
  background: #fef3c7;
  color: #92400e;
}

.principal-band-legend .is-strong,
.principal-stream-matrix-row span.is-strong {
  background: #dcfce7;
  color: #166534;
}

.principal-watch-row {
  grid-template-columns: minmax(0, 1fr) 56px;
  align-items: center;
}

.principal-watch-row b,
.principal-bar-row b,
.principal-exam-row b,
.principal-coverage-row b {
  color: #0f172a;
  text-align: right;
}

.principal-exam-row {
  grid-template-columns: minmax(140px, 1fr) minmax(120px, 0.8fr) 56px minmax(90px, 0.7fr);
  align-items: center;
}

.principal-exam-row small {
  color: #64748b;
  font-weight: 700;
  text-align: right;
}

.principal-coverage-row {
  grid-template-columns: minmax(140px, 0.9fr) minmax(130px, 1fr) 78px;
  align-items: center;
}

.principal-engagement-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.principal-engagement-strip div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 11px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}

.principal-engagement-strip strong {
  color: #0f172a;
  font-size: 1.45rem;
  line-height: 1;
}

@media (max-width: 980px) {
  .principal-kpi-grid,
  .principal-engagement-strip,
  .principal-login-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .principal-layout,
  .principal-grid-two {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .principal-trend-labels {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .principal-login-toolbar {
    grid-template-columns: 1fr 1fr;
  }

  .principal-attention-card,
  .principal-chart-card,
  .principal-panel {
    min-height: 0;
  }
}

@media (max-width: 640px) {
  .principal-hero {
    grid-template-columns: 1fr;
  }

  .principal-hero-note {
    min-width: 0;
  }

  .principal-kpi-grid,
  .principal-engagement-strip,
  .principal-trend-labels,
  .principal-trend-signals,
  .principal-login-kpis {
    grid-template-columns: 1fr;
  }

  .principal-alert-item,
  .principal-bar-row,
  .principal-watch-row,
  .principal-exam-row,
  .principal-coverage-row {
    grid-template-columns: 1fr;
  }

  .principal-watch-row b,
  .principal-bar-row b,
  .principal-exam-row b,
  .principal-coverage-row b,
  .principal-exam-row small {
    text-align: left;
  }

  .principal-alert-list,
  .principal-bar-list,
  .principal-watch-list,
  .principal-exam-list {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .principal-login-toolbar {
    grid-template-columns: 1fr;
  }

  .principal-login-control-group {
    border-radius: 18px;
  }

  .principal-login-canvas-wrap,
  .principal-login-canvas-wrap canvas {
    min-height: 260px;
    height: 260px !important;
  }
}

.principal-academics-page {
  gap: 18px;
}

.principal-academics-hero .principal-hero-note {
  max-width: 320px;
}

.principal-academics-hero .principal-hero-note strong {
  line-height: 1.25;
}

.principal-filter-bar {
  display: grid;
  grid-template-columns: minmax(190px, 1.35fr) repeat(3, minmax(138px, 0.9fr));
  gap: 10px;
  align-items: end;
  padding: 14px;
  position: sticky;
  top: 0;
  z-index: 8;
  border: 1px solid #dbeafe;
  border-bottom: 1px solid #cbd5e1;
  border-radius: 14px;
  background: rgba(255, 253, 249, 0.96);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
}

.principal-filter-bar label {
  display: grid;
  gap: 5px;
  min-width: 0;
  margin: 0;
}

.principal-filter-bar label span {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.principal-filter-bar select {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  border-color: #cbd5e1;
  background: #f8fafc;
  text-overflow: ellipsis;
}

.principal-filter-bar select:disabled {
  color: #94a3b8;
  background: #f1f5f9;
}

.principal-filter-bar .button,
.principal-filter-bar noscript {
  min-height: 40px;
  white-space: nowrap;
}

.principal-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: -8px;
}

.principal-filter-helper {
  margin: -2px 0 14px;
}

.principal-filter-chip {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  max-width: 100%;
  padding: 7px 10px;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #eff6ff;
  color: #1e3a8a;
  font-size: 0.8rem;
  font-weight: 800;
  text-decoration: none;
}

.principal-filter-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.principal-filter-chip b {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 0.7rem;
  line-height: 1;
}

.principal-academic-context {
  display: grid;
  grid-template-columns: minmax(220px, 1.6fr) repeat(3, minmax(120px, 0.75fr));
  gap: 12px;
  align-items: stretch;
  border-color: #dbeafe;
  background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
}

.principal-academic-context > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.78);
}

.principal-academic-context span {
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.principal-academic-context strong {
  color: #0f172a;
  font-size: 1.35rem;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.principal-academic-context small {
  color: #64748b;
  font-weight: 800;
}

.principal-academic-kpis .principal-kpi-card strong {
  font-size: 30px;
}

.principal-academic-kpis .principal-kpi-card span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.principal-academic-kpis .principal-kpi-card small {
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

.principal-band-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.principal-band-legend span {
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 900;
}

.principal-view-switch {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  padding: 4px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #ffffff;
}

.principal-view-switch a {
  display: inline-grid;
  place-items: center;
  min-width: 86px;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  color: #475569;
  font-size: 0.82rem;
  font-weight: 900;
  text-decoration: none;
}

.principal-view-switch a.is-active {
  background: #0f766e;
  color: #ffffff;
}

.principal-selection-state {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  min-height: 190px;
  border-color: #bfdbfe;
  background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%);
}

.principal-selection-state h3 {
  margin: 0 0 6px;
}

.principal-selection-state--rich {
  grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr);
  align-items: stretch;
  padding: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at top right, rgba(23, 59, 114, 0.12), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #eff6ff 100%);
}

.principal-selection-hero-copy {
  display: grid;
  align-content: center;
  gap: 12px;
}

.principal-selection-hero-copy h3 {
  color: #173b72;
  font-size: 1.7rem;
  line-height: 1.05;
}

.principal-selection-latest-link {
  width: fit-content;
  margin-top: 4px;
  text-decoration: none;
}

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

.principal-selection-start-card {
  display: grid;
  gap: 8px;
  min-height: 138px;
  padding: 14px;
  border: 1px solid #dbe4f0;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.05);
}

.principal-selection-start-card > span {
  color: #5f7496;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.principal-selection-start-card a {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid #dbe4f0;
  border-radius: 12px;
  color: #173b72;
  font-weight: 900;
  text-decoration: none;
  background: #ffffff;
}

.principal-selection-start-card a small {
  color: #64748b;
  font-weight: 800;
}

.principal-selection-start-card.is-rules {
  background: linear-gradient(135deg, #fff7ed 0%, #ffffff 88%);
}

.principal-selection-start-card.is-rules b,
.principal-selection-grade-pills a {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  padding: 7px 10px;
  border-radius: 999px;
  color: #173b72;
  font-size: 0.78rem;
  font-weight: 900;
  background: #eef5ff;
}

.principal-selection-start-card.is-rules b {
  color: #8a4b00;
  background: #fef3c7;
}

.principal-selection-grade-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  max-height: 150px;
  overflow: auto;
  padding-right: 2px;
  scrollbar-width: thin;
}

.principal-selection-start-card.is-actions {
  background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 88%);
}

.principal-selection-start-card.is-actions a {
  color: #166534;
  border-color: #bbf7d0;
  background: #f7fef8;
}

.principal-selection-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.principal-selection-steps span {
  padding: 8px 11px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #ffffff;
  color: #64748b;
  font-size: 0.8rem;
  font-weight: 900;
}

.principal-selection-steps span.is-done {
  border-color: #bbf7d0;
  background: #dcfce7;
  color: #166534;
}

.principal-academic-panel {
  min-height: 400px;
}

.principal-subject-panel,
.principal-trend-panel,
.principal-chart-panel {
  min-height: 0;
}

.principal-chart-panel {
  overflow: hidden;
  align-self: start;
  display: block;
}

.principal-chart-panel.is-chart-pending {
  opacity: 0;
}

.principal-chartjs-shell {
  display: grid;
  gap: 10px;
  min-height: 330px;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid var(--chart-grid);
  border-radius: 10px;
  background: var(--chart-surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.principal-chartjs-shell canvas {
  width: 100% !important;
  min-height: 280px;
}

.principal-chartjs-canvas-wrap {
  position: relative;
  width: 100%;
  min-height: 220px;
}

.principal-chartjs-canvas-wrap canvas {
  display: block;
}

.principal-chartjs-title {
  color: var(--chart-text);
  font-size: 0.9rem;
  font-weight: 900;
}

.principal-chartjs-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.principal-chartjs-legend-item {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-width: 0;
  padding: 6px 9px;
  border: 1px solid var(--chart-grid);
  border-radius: 999px;
  color: var(--chart-muted);
  font-size: 0.76rem;
  font-weight: 800;
  background: var(--chart-surface-soft);
}

.principal-chartjs-legend-item i {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 999px;
}

.principal-chartjs-source {
  display: none !important;
}

.principal-toggle-btn {
  width: auto;
  justify-self: start;
  margin-top: 10px;
}

.principal-chart-context {
  display: block;
  margin-top: 6px;
  color: #64748b;
  font-size: 0.8rem;
  font-weight: 800;
}

.principal-academic-list,
.principal-subject-grid {
  display: grid;
  gap: 10px;
  align-content: start;
  min-height: 0;
}

.principal-academic-list {
  max-height: 330px;
  overflow: auto;
  padding-right: 2px;
  scrollbar-width: thin;
}

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

.principal-academic-row,
.principal-subject-row {
  display: grid;
  grid-template-columns: minmax(148px, 0.9fr) minmax(150px, 1fr) minmax(112px, 0.72fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
}

.principal-subject-row {
  grid-template-columns: minmax(132px, 0.9fr) minmax(120px, 1fr) minmax(104px, 0.7fr);
}

.principal-academic-row.is-weak,
.principal-subject-row.is-weak {
  border-color: #fecaca;
  background: linear-gradient(135deg, #fff1f2 0%, #ffffff 82%);
}

.principal-academic-row.is-fair,
.principal-subject-row.is-fair {
  border-color: #fde68a;
  background: linear-gradient(135deg, #fffbeb 0%, #ffffff 82%);
}

.principal-academic-row.is-strong,
.principal-subject-row.is-strong {
  border-color: #bbf7d0;
  background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 82%);
}

.principal-subsection-head {
  margin-top: 18px;
}

.principal-stream-matrix {
  display: none;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.principal-stream-matrix.is-visible {
  display: grid;
}

.principal-stream-matrix-head,
.principal-stream-matrix-row {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) repeat(var(--stream-count), minmax(92px, 0.75fr));
  gap: 8px;
  align-items: center;
  min-width: max-content;
}

.principal-stream-matrix-head span {
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.principal-stream-matrix-row {
  padding: 9px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
}

.principal-stream-matrix-row strong {
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.principal-stream-matrix-row span {
  display: grid;
  place-items: center;
  min-height: 34px;
  padding: 6px 8px;
  border-radius: 9px;
  background: #f8fafc;
  color: #0f172a;
  font-weight: 900;
  white-space: nowrap;
}

.principal-stream-matrix-row span.is-empty {
  color: #94a3b8;
  background: #f1f5f9;
}

.principal-chart-bars,
.principal-sparkline-list {
  display: grid;
  gap: 10px;
  align-content: start;
}

.principal-chart-bars {
  display: none;
  max-height: 360px;
  overflow: auto;
  padding-right: 2px;
  scrollbar-width: thin;
}

.principal-chart-source.is-visible {
  display: block !important;
  margin-top: 12px;
}

.principal-chart-bar-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.95fr) minmax(160px, 1.25fr) 58px;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 11px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
}

.principal-chart-bar-row strong {
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.principal-chart-bar-row b {
  color: #0f172a;
  text-align: right;
}

.principal-sparkline-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(160px, 1.2fr) 58px;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 11px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
}

.principal-sparkline-row strong {
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.principal-sparkline-row svg {
  display: block;
  width: 100%;
  min-height: 62px;
  border-radius: 10px;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.principal-sparkline-row polyline {
  fill: none;
  stroke: #0f766e;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.principal-sparkline-row b {
  color: #0f172a;
  text-align: right;
}

.principal-academic-row > div,
.principal-subject-row > div,
.principal-score-stack {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.principal-academic-row strong,
.principal-subject-row strong {
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.principal-academic-row span,
.principal-subject-row span,
.principal-subject-row small,
.principal-score-stack small {
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 700;
}

.principal-subject-row span,
.principal-subject-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.principal-score-stack {
  justify-items: end;
  text-align: right;
}

.principal-score-stack b {
  color: #0f172a;
  font-size: 1.05rem;
}

.principal-empty-state {
  display: grid;
  place-items: center;
  min-height: 150px;
  margin: 0;
  padding: 18px;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  color: #64748b;
  font-weight: 700;
  text-align: center;
}

.principal-trend-stack {
  display: grid;
  gap: 16px;
}

.principal-academic-trend-table {
  max-height: 380px;
  overflow: auto;
  padding-right: 2px;
  scrollbar-width: thin;
}

.principal-academic-trend-table .principal-grade-trend-head,
.principal-academic-trend-table .principal-grade-trend-row {
  grid-template-columns: minmax(140px, 1fr) repeat(var(--exam-count), minmax(80px, 0.72fr)) minmax(98px, 0.72fr);
}

@media (max-width: 1100px) {
  .principal-filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .principal-filter-bar .button,
  .principal-filter-bar noscript {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .principal-subject-grid {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 760px) {
  .principal-filter-bar {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 10px;
    top: 0;
    border-radius: 0 0 18px 18px;
    border-width: 0 0 1px;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.96)),
      #ffffff;
  }

  .principal-filter-bar label {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    padding: 7px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.04);
  }

  .principal-filter-bar label span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 5px 8px;
    border-radius: 999px;
    color: #173b72;
    font-size: 0.66rem;
    letter-spacing: 0.04em;
    background: #eef5ff;
  }

  .principal-filter-bar select {
    min-height: 34px;
    padding: 6px 30px 6px 10px;
    font-size: 0.86rem;
  }

  .principal-filter-bar .button,
  .principal-filter-bar noscript {
    width: 100%;
  }

  .principal-filter-helper {
    margin: 8px 0 12px;
    font-size: 0.76rem;
  }

  .principal-academic-row,
  .principal-subject-row,
  .principal-chart-bar-row,
  .principal-sparkline-row {
    grid-template-columns: 1fr;
  }

  .principal-score-stack {
    justify-items: start;
    text-align: left;
  }

  .principal-selection-state {
    grid-template-columns: 1fr;
  }

  .principal-academic-context {
    grid-template-columns: 1fr;
  }

  .principal-selection-steps {
    justify-content: flex-start;
  }

  .principal-academic-list,
  .principal-academic-trend-table,
  .principal-stream-matrix,
  .principal-chart-bars {
    max-height: none;
    padding-right: 0;
  }

  .principal-chart-bar-row b,
  .principal-sparkline-row b {
    text-align: left;
  }

  .principal-chartjs-shell {
    min-height: 280px;
  }

  .principal-chartjs-shell canvas {
    min-height: 230px;
  }
}

@media (max-width: 420px) {
  .principal-filter-bar label {
    grid-template-columns: 1fr;
  }

  .principal-filter-bar label span {
    justify-self: start;
  }
}

@media (max-width: 900px) {
  .principal-selection-state--rich {
    grid-template-columns: 1fr;
  }

  .principal-selection-start-grid {
    grid-template-columns: 1fr;
  }
}

.principal-dashboard-shell,
.principal-academics-shell {
  gap: 20px;
}

.principal-academics-section-nav {
  position: fixed;
  top: 50%;
  right: 12px;
  z-index: 24;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 48px;
  padding: 7px;
  transform: translateY(-50%);
  border: 1px solid #dbe4f0;
  border-radius: 999px;
  background:
    radial-gradient(circle at top right, rgba(23, 59, 114, 0.1), transparent 34%),
    rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.12);
  overflow: hidden;
  transition:
    width 180ms ease,
    border-radius 180ms ease,
    box-shadow 180ms ease;
}

.principal-academics-section-nav:hover,
.principal-academics-section-nav:focus-within {
  width: min(184px, calc(100vw - 28px));
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.16);
}

.principal-academics-section-nav::before {
  content: "Jump";
  display: block;
  margin: 1px 0 3px;
  color: #173b72;
  font-size: 0.56rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 160ms ease;
}

.principal-academics-section-nav:hover::before,
.principal-academics-section-nav:focus-within::before {
  opacity: 0.72;
}

.principal-academics-section-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 32px;
  min-height: 32px;
  padding: 7px;
  border: 1px solid #dbe4f0;
  border-radius: 999px;
  color: #173b72;
  font-size: 0.72rem;
  font-weight: 900;
  text-decoration: none;
  background: #ffffff;
  overflow: hidden;
  transition:
    width 180ms ease,
    border-radius 180ms ease,
    background 160ms ease,
    border-color 160ms ease;
}

.principal-academics-section-nav:hover a,
.principal-academics-section-nav:focus-within a {
  width: 100%;
  border-radius: 14px;
  padding-inline: 10px;
}

.principal-academics-section-nav a span {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition:
    max-width 180ms ease,
    opacity 140ms ease;
}

.principal-academics-section-nav:hover a span,
.principal-academics-section-nav:focus-within a span {
  max-width: 130px;
  opacity: 1;
}

.principal-academics-section-nav a::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #9fb5d5;
  box-shadow: 0 0 0 4px rgba(23, 59, 114, 0.07);
}

.principal-academics-section-nav a:hover,
.principal-academics-section-nav a:focus-visible {
  border-color: #173b72;
  background: #eef5ff;
  outline: none;
}

.principal-academics-section-nav a:hover::before,
.principal-academics-section-nav a:focus-visible::before {
  background: #173b72;
}

.principal-academics-block {
  scroll-margin-top: 112px;
}

@media (max-width: 1280px) {
  .principal-academics-section-nav {
    position: static;
    flex-direction: row;
    width: 100%;
    overflow-x: auto;
    padding: 8px;
    transform: none;
    border-radius: 16px;
    background: rgba(248, 251, 255, 0.92);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
    scrollbar-width: thin;
  }

  .principal-academics-section-nav::before {
    content: none;
  }

  .principal-academics-section-nav a {
    flex: 0 0 auto;
    width: auto;
    padding: 7px 10px;
    border-radius: 14px;
    white-space: nowrap;
  }

  .principal-academics-section-nav a span {
    max-width: none;
    opacity: 1;
  }
}

.principal-academics-subject-block {
  order: 20;
}

.principal-academics-subject-matrix-block {
  order: 21;
}

.principal-academics-student-block {
  order: 30;
}

.principal-academics-trend-block {
  order: 40;
}

.principal-academics-block-head {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
}

.principal-academics-block-head span {
  color: #5f7496;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.principal-academics-block-head strong {
  color: #173b72;
  font-size: 1rem;
}

.principal-shell-hero {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  padding: 18px 22px;
  border-color: #d8e5f6;
  background:
    radial-gradient(circle at top right, rgba(31, 75, 143, 0.12), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #f5f8ff 56%, #eef6ff 100%);
}

.principal-shell-hero-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.principal-shell-hero-copy .muted-text {
  max-width: 720px;
}

.principal-page-switch {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  align-self: start;
  padding: 6px;
  border: 1px solid #d6e0ef;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.principal-page-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  color: #475569;
  font-size: 0.84rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.principal-page-switch a.is-active {
  background: linear-gradient(135deg, #1f4b8f 0%, #173b72 100%);
  color: #ffffff;
  box-shadow: 0 12px 24px rgba(31, 75, 143, 0.22);
}

.principal-summary-grid {
  gap: 16px;
}

.principal-summary-card {
  gap: 8px;
  padding: 18px 22px;
  border-color: #dbe4f0;
  border-radius: 16px;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.06);
}

.principal-summary-card.is-good {
  background: linear-gradient(180deg, #ffffff 0%, #f4fbf6 100%);
}

.principal-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.principal-summary-head i {
  padding: 5px 9px;
  border-radius: 999px;
  color: #36527a;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: #eef4fb;
}

.principal-summary-card strong {
  font-size: 32px;
}

.principal-summary-card small {
  font-size: 0.76rem;
}

.principal-summary-card.is-good strong {
  color: #2e6b0f;
}

.principal-inline-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border: 1px solid #d6e0ef;
  border-radius: 999px;
  color: #36527a;
  font-size: 0.76rem;
  font-weight: 900;
  background: #f8fbff;
  white-space: nowrap;
}

.principal-bento-row {
  align-items: stretch;
}

.principal-attention-feature,
.principal-watch-feature-card,
.principal-coverage-feature-card,
.principal-stream-feature-card,
.principal-subject-matrix-card,
.principal-trend-insight-card,
.principal-academic-spotlight-card,
.principal-trend-line-shell {
  border-radius: 18px;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.06);
}

.principal-attention-feature {
  position: relative;
  border-color: #f5c7c7;
  background:
    radial-gradient(circle at top right, rgba(179, 32, 32, 0.08), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #fffafb 100%);
}

.principal-attention-feature::after {
  content: "!";
  position: absolute;
  right: 26px;
  top: 22px;
  color: rgba(179, 32, 32, 0.1);
  font-size: 92px;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

.principal-alert-feature-list {
  gap: 14px;
  overflow: visible;
  max-height: none;
}

.principal-alert-feature-lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin-bottom: 14px;
  padding: 18px 20px;
  border: 1px solid #f2d2d2;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 244, 244, 0.92) 100%);
  box-shadow: 0 14px 28px rgba(179, 32, 32, 0.08);
}

.principal-alert-feature-lead.is-watch {
  border-color: #f8ddb0;
  background: linear-gradient(135deg, rgba(255, 252, 245, 0.98) 0%, rgba(255, 244, 226, 0.92) 100%);
  box-shadow: 0 14px 28px rgba(179, 107, 0, 0.08);
}

.principal-alert-feature-lead.is-clear {
  border-color: #cdeac2;
  background: linear-gradient(135deg, rgba(247, 252, 246, 0.98) 0%, rgba(238, 250, 239, 0.92) 100%);
  box-shadow: 0 14px 28px rgba(46, 107, 15, 0.08);
}

.principal-alert-feature-lead-copy {
  display: grid;
  gap: 6px;
}

.principal-alert-feature-lead-copy span {
  color: #7a4b4b;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.principal-alert-feature-lead.is-watch .principal-alert-feature-lead-copy span {
  color: #8b5a09;
}

.principal-alert-feature-lead.is-clear .principal-alert-feature-lead-copy span {
  color: #2e6b0f;
}

.principal-alert-feature-lead-copy strong {
  color: #0f172a;
  font-size: 1.3rem;
  line-height: 1.15;
}

.principal-alert-feature-lead-copy p {
  margin: 0;
  color: #475569;
  font-size: 0.95rem;
  line-height: 1.5;
}

.principal-alert-feature-lead-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 18px;
  color: #b32020;
  font-size: 1.45rem;
  font-style: normal;
  font-weight: 900;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.principal-alert-feature-lead.is-watch .principal-alert-feature-lead-badge {
  color: #b36b00;
}

.principal-alert-feature-lead.is-clear .principal-alert-feature-lead-badge {
  color: #2e6b0f;
}

.principal-alert-feature-item {
  padding: 18px 20px;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}

.principal-overview-middle {
  align-items: stretch;
}

.principal-overview-visual-row {
  align-items: stretch;
}

.principal-dashboard-group {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.principal-dashboard-group-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
}

.principal-dashboard-group-head h3 {
  margin: 4px 0 0;
  color: #173b72;
  font-size: 1.3rem;
}

.principal-dashboard-group-kicker {
  margin: 0;
  color: #5f7496;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.principal-dashboard-group-head .muted-text {
  margin: 6px 0 0;
  max-width: 720px;
}

.principal-dashboard-span-full {
  grid-column: 1 / -1;
}

.principal-overview-visual-card {
  --principal-adoption-accent: #1f4b8f;
  border-radius: 18px;
  border-color: #dbe4f0;
  background:
    radial-gradient(circle at top right, rgba(31, 75, 143, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.06);
}

.principal-overview-visual-shell {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.1fr);
  gap: 18px;
  align-items: center;
}

.principal-overview-donut-wrap {
  position: relative;
  min-height: 230px;
  isolation: isolate;
}

.principal-overview-donut-wrap canvas {
  position: relative;
  z-index: 2;
  width: 100% !important;
  height: 230px !important;
}

.principal-overview-donut-center {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-content: center;
  text-align: center;
  pointer-events: none;
}

.principal-overview-donut-center strong {
  color: var(--principal-adoption-accent);
  font-size: 1.95rem;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
}

.principal-overview-donut-center small {
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.principal-overview-metric-stack {
  display: grid;
  gap: 12px;
}

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

.principal-overview-mini-card {
  --principal-adoption-accent: #1f4b8f;
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid #dbe4f0;
  border-radius: 16px;
  background: linear-gradient(180deg, #f9fbff 0%, #ffffff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.principal-overview-mini-card span {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.principal-overview-mini-card > strong {
  color: #0f172a;
  font-size: 1.05rem;
  line-height: 1.2;
}

.principal-overview-mini-card small {
  color: #64748b;
  font-weight: 700;
}

.principal-overview-mini-donut-wrap {
  position: relative;
  min-height: 112px;
  isolation: isolate;
}

.principal-overview-mini-donut-wrap canvas {
  position: relative;
  z-index: 2;
  width: 100% !important;
  height: 112px !important;
}

.principal-overview-mini-donut-center {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-content: center;
  text-align: center;
  pointer-events: none;
}

.principal-overview-mini-donut-center strong {
  color: var(--principal-adoption-accent);
  font-size: 1.35rem;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
}

.principal-overview-grade-chart-wrap {
  min-height: 300px;
}

.principal-overview-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.principal-overview-status-pill.is-reviewable {
  color: #173b72;
  background: rgba(31, 75, 143, 0.1);
  border: 1px solid rgba(31, 75, 143, 0.14);
}

.principal-overview-grade-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 14px;
}

.principal-overview-grade-band {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid #dbe4f0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
}

.principal-overview-grade-band span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.principal-overview-grade-band span.is-support {
  background: #b32020;
}

.principal-overview-grade-band span.is-fair {
  background: #b36b00;
}

.principal-overview-grade-band span.is-strong {
  background: #2e6b0f;
}

.principal-overview-grade-band small {
  color: #52627a;
  font-size: 0.76rem;
  font-weight: 700;
}

.principal-overview-grade-chart-wrap canvas {
  width: 100% !important;
  height: 300px !important;
}

.principal-watch-feature-card,
.principal-coverage-feature-card,
.principal-trend-insight-card,
.principal-stream-feature-card,
.principal-subject-matrix-card,
.principal-trend-line-shell {
  border-color: #dbe4f0;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.principal-watch-feature-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-content: start;
}

.principal-watch-feature-item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 86px;
  padding: 13px;
  overflow: hidden;
  border: 1px solid #dbe4f0;
  border-radius: 16px;
  background:
    radial-gradient(circle at top right, rgba(179, 32, 32, 0.07), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, #fffafa 100%);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05);
}

.principal-watch-feature-item.is-lead {
  grid-column: span 3;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 108px;
  padding: 18px 20px;
  border-color: #fecdd3;
  background:
    radial-gradient(circle at top right, rgba(179, 32, 32, 0.14), transparent 32%),
    linear-gradient(135deg, #fff1f2 0%, #ffffff 72%);
}

.principal-watch-feature-item i {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 12px;
  color: #b32020;
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 900;
  background: #fee2e2;
}

.principal-watch-feature-item.is-lead i {
  width: 42px;
  height: 42px;
  border-radius: 16px;
  color: #ffffff;
  font-size: 1rem;
  background: #b32020;
}

.principal-watch-feature-item span {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.principal-watch-feature-item strong {
  display: block;
  margin-top: 4px;
  color: #0f172a;
  font-size: 1rem;
  line-height: 1.12;
}

.principal-watch-feature-item.is-lead strong {
  font-size: 1.5rem;
}

.principal-watch-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.principal-watch-reasons em {
  display: inline-flex;
  align-items: center;
  padding: 4px 7px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

.principal-watch-reasons em.is-low {
  color: #991b1b;
  background: #fee2e2;
}

.principal-watch-reasons em.is-drop {
  color: #8a4b00;
  background: #fef3c7;
}

.principal-watch-feature-item b {
  grid-column: 1 / -1;
  width: fit-content;
  min-width: 68px;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 900;
  text-align: center;
}

.principal-watch-feature-item.is-lead b {
  grid-column: auto;
  min-width: 84px;
  padding: 12px 14px;
  font-size: 1.25rem;
  box-shadow: 0 12px 24px rgba(179, 32, 32, 0.18);
}

.principal-watch-feature-item b.is-weak {
  color: #ffffff;
  background: #b32020;
}

.principal-watch-feature-item b.is-fair {
  color: #ffffff;
  background: #b36b00;
}

.principal-watch-feature-item b.is-strong {
  color: #ffffff;
  background: #2e6b0f;
}

.principal-watch-link {
  margin-top: 10px;
}

.principal-student-search-field {
  min-width: min(280px, 100%);
}

.principal-student-search-field input {
  width: 100%;
}

.principal-filter-placeholder {
  display: grid;
  gap: 4px;
  min-width: 190px;
  padding: 9px 12px;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
}

.principal-filter-placeholder span {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.principal-filter-placeholder strong {
  color: #334155;
  font-size: 0.9rem;
}

.principal-filter-placeholder small {
  color: #64748b;
  font-weight: 700;
}

.principal-student-filter-actions {
  display: flex;
  align-items: end;
  gap: 10px;
}

.principal-student-breakdown-list {
  display: grid;
  gap: 10px;
  align-content: start;
}

.principal-student-grade-groups {
  display: grid;
  gap: 14px;
}

.principal-student-grade-group {
  display: grid;
  gap: 10px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #dbe4f0;
  border-radius: 16px;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.principal-student-grade-group[open] {
  border-color: #9eb7da;
  box-shadow: 0 14px 32px rgba(31, 75, 143, 0.08);
}

.principal-student-grade-group.is-selected {
  border-color: #1f4b8f;
  background:
    linear-gradient(135deg, rgba(234, 241, 251, 0.92) 0%, rgba(255, 255, 255, 1) 72%);
}

.principal-student-grade-group summary {
  display: grid;
  grid-template-columns: minmax(150px, 0.9fr) minmax(150px, 1.2fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 15px 16px;
  cursor: pointer;
  list-style: none;
}

.principal-student-grade-group summary::-webkit-details-marker {
  display: none;
}

.principal-student-grade-group summary > div:first-child {
  display: grid;
  gap: 3px;
}

.principal-student-grade-group summary strong {
  color: #0f172a;
  font-size: 1.05rem;
}

.principal-student-grade-group summary span {
  color: #64748b;
  font-size: 0.82rem;
  font-weight: 800;
}

.principal-student-grade-group summary b {
  min-width: 54px;
  padding: 8px 12px;
  border-radius: 999px;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 900;
  text-align: center;
  background: #173b72;
}

.principal-student-grade-group summary em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 82px;
  padding: 7px 10px;
  border-radius: 999px;
  color: #173b72;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 900;
  background: #eaf1fb;
}

.principal-student-grade-group summary em::after {
  content: "+";
  font-size: 1rem;
  line-height: 1;
}

.principal-student-grade-group[open] summary em::after {
  content: "-";
}

.principal-student-grade-group .principal-student-breakdown-list {
  padding: 0 14px 12px;
}

.principal-student-stream-pie-panel {
  display: grid;
  grid-template-columns: minmax(150px, 210px) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 4px 14px 12px;
}

.principal-student-stream-donut {
  position: relative;
  display: grid;
  place-items: center;
  width: min(190px, 100%);
  aspect-ratio: 1;
  justify-self: center;
  border-radius: 999px;
  background: conic-gradient(var(--stream-pie, #e2e8f0 0% 100%));
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08), 0 18px 34px rgba(15, 23, 42, 0.08);
}

.principal-student-stream-donut::after {
  content: "";
  position: absolute;
  inset: 24%;
  border-radius: inherit;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px #e2e8f0;
}

.principal-student-stream-donut > div {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2px;
  text-align: center;
}

.principal-student-stream-donut strong {
  color: #0f172a;
  font-size: 1.45rem;
}

.principal-student-stream-donut span {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.principal-student-breakdown-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #ffffff;
}

.principal-student-breakdown-row.is-selected {
  border-color: var(--stream-color, #1f4b8f);
  background: #f1f6ff;
  box-shadow: inset 4px 0 0 var(--stream-color, #1f4b8f);
}

.principal-student-breakdown-row > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.principal-student-breakdown-row strong {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  color: #0f172a;
}

.principal-student-breakdown-row span {
  color: #64748b;
  font-size: 0.82rem;
}

.principal-student-breakdown-row .principal-class-grade {
  color: #0f172a;
  font-size: 0.94rem;
}

.principal-student-breakdown-row .principal-class-stream {
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--stream-color, #173b72);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  background: #eaf1fb;
}

.principal-stream-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--stream-color, #173b72);
  box-shadow: 0 0 0 3px rgba(23, 59, 114, 0.08);
}

.principal-student-breakdown-row b {
  color: var(--stream-color, #173b72);
  font-size: 1rem;
}

.principal-student-grade-link {
  margin: 0 14px 14px;
  padding: 11px 14px;
  border-radius: 12px;
  color: #173b72;
  font-weight: 900;
  text-decoration: none;
  background: #eef5ff;
}

.principal-student-grade-link:hover {
  background: #dfeeff;
}

.principal-student-records-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 28px;
}

.principal-student-modal-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 10%, rgba(31, 75, 143, 0.28), transparent 28%),
    rgba(15, 23, 42, 0.58);
  backdrop-filter: blur(5px);
}

.principal-student-modal-panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(1120px, 100%);
  max-height: min(760px, calc(100vh - 56px));
  overflow: hidden;
  border: 1px solid rgba(219, 228, 240, 0.9);
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.32);
}

.principal-student-modal-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px;
  color: #ffffff;
  background:
    linear-gradient(135deg, #0b2d5c 0%, #173b72 58%, #0f766e 100%);
}

.principal-student-modal-head span {
  display: inline-flex;
  margin-bottom: 6px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.principal-student-modal-head h3 {
  margin: 0;
  color: #ffffff;
  font-size: 1.45rem;
}

.principal-student-modal-head p {
  margin: 5px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 700;
}

.principal-student-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  color: #ffffff;
  font-size: 1.6rem;
  line-height: 1;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.12);
}

.principal-student-modal-close:hover {
  background: rgba(255, 255, 255, 0.22);
}

.principal-student-modal-tools {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 14px;
  align-items: end;
  padding: 14px 20px;
  border-bottom: 1px solid #dbe4f0;
  background: #ffffff;
}

.principal-student-modal-tools.is-search-only {
  grid-template-columns: minmax(260px, 520px);
}

.principal-student-modal-tools label {
  display: grid;
  gap: 6px;
}

.principal-student-modal-tools label span {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.principal-student-search-box {
  position: relative;
  display: grid;
  align-items: center;
}

.principal-student-search-box i {
  position: absolute;
  left: 14px;
  z-index: 1;
  color: #64748b;
  font-style: normal;
  font-size: 0.95rem;
  pointer-events: none;
}

.principal-student-modal-tools input {
  width: 100%;
  min-height: 42px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  padding: 10px 15px 10px 42px;
  color: #0f172a;
  font-weight: 800;
  background: #f8fafc;
}

.principal-student-modal-tools input:focus {
  outline: 2px solid rgba(31, 75, 143, 0.18);
  border-color: #1f4b8f;
  background: #ffffff;
}

.principal-student-th-sort {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 5px 8px;
  border-radius: 999px;
  color: #334155;
  font-weight: 900;
  text-decoration: none;
}

.principal-student-th-sort b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  color: #52627a;
  font-size: 0.84rem;
  line-height: 1;
  background: #ffffff;
}

.principal-student-th-sort.is-active {
  color: #ffffff;
  background: #173b72;
  box-shadow: 0 8px 18px rgba(23, 59, 114, 0.18);
}

.principal-student-th-sort.is-active b {
  color: #173b72;
}

.principal-student-modal-body {
  overflow: auto;
  padding: 18px 20px;
  background: #f8fafc;
}

.principal-student-scope-note {
  display: grid;
  gap: 5px;
  margin-bottom: 14px;
  padding: 13px 15px;
  border: 1px solid #f1d49a;
  border-radius: 14px;
  color: #7a4b00;
  background: linear-gradient(135deg, #fff8e8 0%, #ffffff 100%);
}

.principal-student-scope-note strong {
  color: #7a4b00;
}

.principal-student-scope-note span {
  color: #75521a;
  font-weight: 700;
}

.principal-student-modal-table {
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
  background: #ffffff;
}

.principal-student-modal-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: #334155;
  background: #eef5ff;
}

.principal-student-modal-table tbody tr:hover {
  background: #f6faff;
}

.principal-student-modal-table td strong {
  color: #0f172a;
}

.principal-student-modal-footer {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) auto minmax(140px, 1fr);
  gap: 14px;
  align-items: center;
  padding: 16px 20px;
  border-top: 1px solid #dbe4f0;
  background: #ffffff;
}

.principal-student-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 999px;
  color: #173b72;
  font-weight: 900;
  text-decoration: none;
  background: #eaf1fb;
}

.principal-student-page-btn:hover {
  background: #dceafd;
}

.principal-student-page-btn.is-next {
  justify-self: end;
  color: #ffffff;
  background: #173b72;
}

.principal-student-page-btn.is-next:hover {
  background: #0b2d5c;
}

.principal-student-page-btn.is-disabled {
  color: #94a3b8;
  background: #f1f5f9;
}

.principal-student-page-status {
  color: #52627a;
  font-size: 0.9rem;
  font-weight: 900;
  text-align: center;
}

.principal-student-records-modal.is-loading .principal-student-modal-panel {
  cursor: progress;
}

.principal-student-records-modal.is-loading .principal-student-modal-body {
  opacity: 0.55;
}

.principal-engagement-feature-strip {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
  background: transparent;
}

.principal-engagement-feature-strip > div {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid #dbe4f0;
  border-radius: 14px;
  background: #f8fbff;
}

.principal-filter-bar-redesign {
  top: 12px;
  grid-template-columns: minmax(240px, 1.35fr) repeat(2, minmax(170px, 0.85fr));
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
}

.principal-filter-chips-redesign {
  margin-top: -4px;
}

.principal-academic-spotlight-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) repeat(2, minmax(220px, 0.8fr));
  gap: 16px;
  align-items: stretch;
}

.principal-academic-spotlight-grid--single {
  grid-template-columns: minmax(0, 1fr);
}

.principal-academic-spotlight-card {
  position: relative;
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 20px 22px;
  overflow: hidden;
  border: 1px solid #dbe4f0;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.principal-academic-spotlight-grid--single .principal-academic-spotlight-card {
  grid-template-columns: minmax(160px, 0.5fr) minmax(120px, auto) minmax(220px, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
  border-radius: 18px;
}

.principal-academic-spotlight-card.is-primary-scope {
  border-color: #bfdbfe;
  background:
    radial-gradient(circle at top right, rgba(23, 66, 138, 0.1), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
}

.principal-academic-spotlight-card.is-primary-scope strong {
  color: #173b72;
}

.principal-academic-spotlight-card.is-primary-scope b {
  color: #ffffff;
  background: #173b72;
}

.principal-academic-spotlight-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 4px;
  background: #d6e0ef;
}

.principal-academic-spotlight-card.is-fair::before {
  background: #f2a35b;
}

.principal-academic-spotlight-card.is-weak::before {
  background: #b32020;
}

.principal-academic-spotlight-card.is-strong::before {
  background: #2e6b0f;
}

.principal-academic-spotlight-card span {
  color: #0f172a;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.principal-academic-spotlight-card strong {
  color: #531f12;
  font-size: 3rem;
  line-height: 1;
}

.principal-academic-spotlight-card small {
  color: #5b6472;
  font-size: 0.88rem;
  line-height: 1.4;
}

.principal-academic-spotlight-card b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 7px 12px;
  border-radius: 999px;
  color: #5b2d12;
  font-size: 0.8rem;
  font-weight: 900;
  text-transform: uppercase;
  background: #ffe2cc;
}

.principal-academic-spotlight-card.is-alert b {
  color: #ffffff;
  background: #b32020;
}

.principal-academic-summary-row {
  align-items: stretch;
}

.principal-stream-feature-card .principal-chartjs-shell canvas {
  min-height: 320px;
}

.principal-subject-matrix-card .principal-band-legend {
  margin-bottom: 4px;
}

.principal-trend-insight-card {
  display: grid;
  gap: 14px;
  align-content: start;
  background:
    radial-gradient(circle at top right, rgba(23, 59, 114, 0.08), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.principal-trend-insight-stack {
  display: grid;
  gap: 10px;
}

.principal-trend-insight-item {
  position: relative;
  display: grid;
  gap: 5px;
  padding: 13px 15px 13px 48px;
  overflow: hidden;
  border: 1px solid #dbe4f0;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.04);
}

.principal-trend-insight-item::before {
  position: absolute;
  left: 14px;
  top: 50%;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 900;
}

.principal-trend-insight-item.is-grade-trend::before {
  content: "\2197";
  color: #1f6b20;
  background: #dcfce7;
}

.principal-trend-insight-item.is-grade-trend.is-down::before {
  content: "\2198";
  color: #b32020;
  background: #fee2e2;
}

.principal-trend-insight-item.is-grade-trend.is-stable::before,
.principal-trend-insight-item.is-grade-trend.is-flat::before,
.principal-trend-insight-item.is-grade-trend.is-empty::before {
  content: "\2022";
  color: #52627a;
  background: #edf2f7;
}

.principal-trend-insight-item.is-gap-trend::before {
  content: "\2194";
  color: #9a5b00;
  background: #fef3c7;
}

.principal-trend-insight-item.is-focus-trend::before {
  content: "\25ce";
  color: #17428a;
  background: #dbeafe;
}

.principal-trend-insight-item span {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.principal-trend-insight-item strong {
  color: #0f172a;
  line-height: 1.4;
}

.principal-trend-insight-item strong b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  color: #7a4100;
  font-size: 0.9rem;
  background: #fef3c7;
}

.principal-trend-insight-item.is-overall-trend {
  padding-top: 16px;
  padding-bottom: 16px;
  border-width: 2px;
  box-shadow: 0 16px 30px rgba(23, 59, 114, 0.09);
}

.principal-trend-insight-item.is-overall-trend strong {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.principal-trend-insight-item.is-overall-trend strong b {
  margin-right: 0;
  color: #ffffff;
  background: #173b72;
}

.principal-trend-insight-item.is-overall-trend.is-up strong b {
  background: #2e6b0f;
}

.principal-trend-insight-item.is-overall-trend.is-down strong b {
  background: #b32020;
}

.principal-trend-insight-item strong small {
  color: #475569;
  font-size: 0.86rem;
  font-weight: 800;
}

.principal-trend-insight-item.is-grade-trend.is-up {
  border-color: #bbf7d0;
  background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 82%);
}

.principal-trend-insight-item.is-grade-trend.is-down {
  border-color: #fecdd3;
  background: linear-gradient(135deg, #fff1f2 0%, #ffffff 82%);
}

.principal-trend-insight-item.is-gap-trend {
  border-color: #fde68a;
  background: linear-gradient(135deg, #fffbeb 0%, #ffffff 82%);
}

.principal-trend-insight-item.is-focus-trend {
  border-color: #bfdbfe;
  background: linear-gradient(135deg, #eff6ff 0%, #ffffff 82%);
}

.principal-trend-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  margin-right: 6px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 900;
  vertical-align: middle;
}

.principal-trend-inline.is-up {
  color: #1f6b20;
  background: #e8f7e8;
}

.principal-trend-inline.is-down {
  color: #b32020;
  background: #fde8e8;
}

.principal-trend-inline.is-stable,
.principal-trend-inline.is-flat {
  color: #52627a;
  background: #edf2f7;
}

.principal-subject-movement-shell {
  display: grid;
  gap: 12px;
}

.principal-subject-movement-top {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: center;
}

.principal-subject-change-card,
.principal-subject-change-list-card,
.principal-subject-change-empty {
  border: 1px solid #dbe4f0;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.06);
}

.principal-subject-change-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, max-content) minmax(0, 1fr);
  gap: 4px 9px;
  align-items: center;
  min-height: 62px;
  padding: 9px 12px;
  overflow: hidden;
  border: 1px solid #dbe4f0;
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

.principal-subject-change-card span {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.principal-subject-change-card > span {
  grid-column: 3;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.principal-subject-change-card .principal-trend-glyph {
  grid-row: 1 / span 2;
  width: 30px;
  height: 30px;
  border-radius: 12px;
  font-size: 0.92rem;
  box-shadow: none;
}

.principal-subject-change-card strong {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: #0f172a;
  font-size: 1.08rem;
  line-height: 1.12;
  white-space: nowrap;
}

.principal-subject-change-card small {
  grid-column: 3;
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 800;
}

.principal-subject-change-flow {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}

.principal-subject-change-flow b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: auto;
  padding: 4px 8px;
  border-radius: 999px;
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1;
}

.principal-subject-change-card.is-decline {
  border-color: #f3c5c5;
  background: linear-gradient(180deg, #fffafa 0%, #ffffff 100%);
}

.principal-subject-change-card.is-decline b {
  color: #ffffff;
  background: #b32020;
}

.principal-subject-change-card.is-improved {
  border-color: #cdeac2;
  background: linear-gradient(180deg, #f7fcf6 0%, #ffffff 100%);
}

.principal-subject-change-card.is-improved b {
  color: #ffffff;
  background: #2e6b0f;
}

.principal-subject-change-list-card {
  padding: 14px;
}

.principal-subject-change-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
  gap: 7px;
}

.principal-subject-change-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 0;
  padding: 8px 10px 8px 13px;
  border: 1px solid #dbe4f0;
  border-radius: 11px;
  color: inherit;
  text-decoration: none;
  background: #ffffff;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.principal-subject-change-row:hover,
.principal-subject-change-row:focus-visible {
  border-color: #0f766e;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.1);
  transform: translateY(-1px);
  outline: none;
}

.principal-subject-change-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 0 999px 999px 0;
  background: #94a3b8;
}

.principal-subject-change-row > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.principal-subject-change-row span {
  color: #0f172a;
  font-size: 0.84rem;
  font-weight: 900;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.principal-subject-change-row strong {
  color: #52627a;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: normal;
}

.principal-subject-change-row b i {
  font-style: normal;
  font-size: 0.78rem;
  line-height: 1;
}

.principal-subject-change-row.is-declined {
  border-color: #f3c5c5;
  background: linear-gradient(90deg, #fff4f4 0%, #ffffff 42%);
}

.principal-subject-change-row.is-improved {
  border-color: #cdeac2;
  background: linear-gradient(90deg, #f5fbf2 0%, #ffffff 42%);
}

.principal-subject-change-row.is-declined::before {
  background: #b32020;
}

.principal-subject-change-row.is-improved::before {
  background: #2e6b0f;
}

.principal-subject-change-row b.is-declined {
  color: #ffffff;
  background: #b32020;
}

.principal-subject-change-row b.is-improved {
  color: #ffffff;
  background: #2e6b0f;
}

.principal-subject-change-row b.is-steady {
  color: #36527a;
  background: #e8f0fb;
}

.principal-subject-change-row .principal-subject-change-open {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #0f5f59;
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.principal-subject-change-open b {
  font-size: 1rem;
  line-height: 1;
}

.principal-subject-change-empty {
  padding: 18px 20px;
}

.principal-subject-intelligence-page {
  display: grid;
  gap: 16px;
  --subject-navy: #0b2f4f;
  --subject-teal: #0f766e;
  --subject-green: #2e6b0f;
  --subject-red: #a92d2d;
  --subject-ink: #0f172a;
  --subject-muted: #64748b;
  --subject-line: #dbe4f0;
}

.principal-subject-intelligence-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
  min-height: 190px;
  padding: 28px;
  overflow: hidden;
  border-radius: 24px;
  color: #ffffff;
  background:
    radial-gradient(circle at 88% 18%, rgba(118, 214, 194, 0.28), transparent 24%),
    linear-gradient(135deg, #082a48 0%, #0b4660 52%, #0f766e 100%);
  box-shadow: 0 22px 48px rgba(8, 42, 72, 0.2);
}

.principal-subject-intelligence-hero::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -115px;
  width: 280px;
  height: 280px;
  border: 42px solid rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  pointer-events: none;
}

.principal-subject-intelligence-hero > div {
  position: relative;
  z-index: 1;
}

.principal-subject-back {
  display: inline-flex;
  margin-bottom: 24px;
  color: #d8f5ef;
  font-size: 0.78rem;
  font-weight: 900;
  text-decoration: none;
}

.principal-subject-back:hover,
.principal-subject-back:focus-visible {
  color: #ffffff;
  text-decoration: underline;
  outline: none;
}

.principal-subject-intelligence-hero .admin-page-kicker {
  margin: 0 0 5px;
  color: #9ee4d6;
}

.principal-subject-intelligence-hero h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.85rem, 4vw, 3.15rem);
  line-height: 1;
  letter-spacing: -0.045em;
}

.principal-subject-intelligence-hero p:not(.admin-page-kicker) {
  max-width: 680px;
  margin: 10px 0 0;
  color: #d7e8ef;
  font-size: 0.9rem;
  line-height: 1.55;
}

.principal-subject-context {
  display: grid;
  gap: 5px;
  min-width: 220px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  background: rgba(5, 31, 52, 0.28);
  backdrop-filter: blur(10px);
}

.principal-subject-context span {
  color: #aee8dd;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.principal-subject-context strong {
  color: #ffffff;
  font-size: 0.94rem;
  line-height: 1.3;
}

.principal-subject-navigation {
  position: sticky;
  top: 8px;
  z-index: 12;
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid #cbd9e7;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(14px);
}

.principal-subject-navigation-back {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1px 8px;
  min-width: 190px;
  padding: 8px 11px;
  border-radius: 12px;
  color: var(--subject-navy);
  text-decoration: none;
  background: #eef5fa;
}

.principal-subject-navigation-back > span {
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--subject-teal);
  font-size: 1.1rem;
  font-weight: 950;
}

.principal-subject-navigation-back strong {
  font-size: 0.8rem;
}

.principal-subject-navigation-back small {
  color: var(--subject-muted);
  font-size: 0.64rem;
}

.principal-subject-navigation-back:hover,
.principal-subject-navigation-back:focus-visible {
  color: #ffffff;
  background: var(--subject-navy);
  outline: none;
}

.principal-subject-navigation-back:hover span,
.principal-subject-navigation-back:focus-visible span,
.principal-subject-navigation-back:hover small,
.principal-subject-navigation-back:focus-visible small {
  color: #d8f5ef;
}

.principal-subject-switcher {
  display: grid;
  grid-template-columns: auto minmax(150px, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.principal-subject-switcher > span,
.principal-subject-navigation-context span {
  color: var(--subject-muted);
  font-size: 0.66rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.principal-subject-switcher select {
  width: 100%;
  min-height: 40px;
  padding: 7px 34px 7px 11px;
  border: 1px solid #b9cadb;
  border-radius: 11px;
  color: var(--subject-ink);
  font-weight: 900;
  background: #ffffff;
}

.principal-subject-switcher select:focus {
  border-color: var(--subject-teal);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
  outline: none;
}

.principal-subject-navigation-context {
  display: grid;
  gap: 2px;
  min-width: 150px;
  padding: 0 8px;
  text-align: right;
}

.principal-subject-navigation-context strong {
  color: var(--subject-navy);
  font-size: 0.76rem;
}

.principal-subject-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.principal-subject-kpi {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 126px;
  padding: 16px;
  border: 1px solid var(--subject-line);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.principal-subject-kpi.is-primary {
  border-color: #b6ddd7;
  background: linear-gradient(145deg, #f0faf8 0%, #ffffff 72%);
}

.principal-subject-kpi > span,
.principal-subject-panel-head > div > span,
.principal-subject-signal > span {
  color: var(--subject-muted);
  font-size: 0.67rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.principal-subject-kpi > strong {
  color: var(--subject-ink);
  font-size: clamp(1.65rem, 3vw, 2.2rem);
  line-height: 1;
  letter-spacing: -0.045em;
}

.principal-subject-kpi > strong small {
  color: var(--subject-muted);
  font-size: 0.72rem;
  letter-spacing: 0;
}

.principal-subject-kpi > b {
  color: var(--subject-muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.principal-subject-kpi > b.is-up {
  color: var(--subject-green);
}

.principal-subject-kpi > b.is-down {
  color: var(--subject-red);
}

.principal-subject-intelligence-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(260px, 0.7fr);
  gap: 12px;
  align-items: stretch;
}

.principal-subject-trend-panel,
.principal-subject-merit-panel {
  margin-bottom: 0;
  border: 1px solid var(--subject-line);
  border-radius: 20px;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.07);
}

.principal-subject-trend-panel {
  display: grid;
  gap: 18px;
  min-width: 0;
  padding: 18px;
}

.principal-subject-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.principal-subject-panel-head h3 {
  margin: 4px 0 0;
  color: var(--subject-navy);
  font-size: 1.2rem;
  line-height: 1.2;
}

.principal-subject-panel-head p {
  margin: 5px 0 0;
  color: var(--subject-muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.principal-subject-panel-head > strong {
  flex: 0 0 auto;
  padding: 6px 9px;
  border-radius: 999px;
  color: #0f5f59;
  font-size: 0.7rem;
  background: #e8f7f3;
}

.principal-subject-chart-frame {
  position: relative;
  min-height: 320px;
}

.principal-subject-chart-frame canvas {
  width: 100% !important;
  height: 320px !important;
}

.principal-subject-trend-fallback {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
  gap: 7px;
}

.principal-subject-trend-fallback[hidden] {
  display: none;
}

.principal-subject-trend-fallback > div {
  display: grid;
  gap: 3px;
  padding: 9px;
  border: 1px solid var(--subject-line);
  border-radius: 12px;
  background: #f8fbff;
}

.principal-subject-trend-fallback > div.is-current {
  border-color: #9ed7ce;
  background: #eef9f6;
}

.principal-subject-trend-fallback span,
.principal-subject-trend-fallback small {
  color: var(--subject-muted);
  font-size: 0.68rem;
}

.principal-subject-trend-fallback b {
  color: var(--subject-ink);
  font-size: 1rem;
}

.principal-subject-signal-stack {
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.principal-subject-signal {
  position: relative;
  display: grid;
  align-content: center;
  gap: 7px;
  min-width: 0;
  padding: 17px 18px 17px 22px;
  overflow: hidden;
  border: 1px solid var(--subject-line);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.principal-subject-signal::before {
  content: "";
  position: absolute;
  inset: 12px auto 12px 0;
  width: 5px;
  border-radius: 0 999px 999px 0;
  background: #64748b;
}

.principal-subject-signal.is-up::before {
  background: var(--subject-green);
}

.principal-subject-signal.is-down::before {
  background: var(--subject-red);
}

.principal-subject-signal strong {
  color: var(--subject-ink);
  font-size: 1rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.principal-subject-signal b {
  width: fit-content;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
}

.principal-subject-signal.is-up b {
  color: var(--subject-green);
  background: #edf8e8;
}

.principal-subject-signal.is-down b {
  color: var(--subject-red);
  background: #fff0f0;
}

.principal-subject-signal small {
  color: var(--subject-muted);
  font-size: 0.72rem;
  line-height: 1.4;
}

.principal-subject-merit-panel {
  display: grid;
  gap: 15px;
  padding: 18px;
}

.principal-subject-merit-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.principal-subject-view-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.principal-subject-view-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--subject-line);
  border-radius: 999px;
  color: #36527a;
  font-size: 0.74rem;
  font-weight: 900;
  text-decoration: none;
  background: #ffffff;
}

.principal-subject-view-tabs a b {
  min-width: 20px;
  padding: 2px 5px;
  border-radius: 999px;
  text-align: center;
  color: #52627a;
  background: #edf2f7;
}

.principal-subject-view-tabs a:hover,
.principal-subject-view-tabs a:focus-visible,
.principal-subject-view-tabs a.is-active {
  border-color: var(--subject-navy);
  color: #ffffff;
  background: var(--subject-navy);
  outline: none;
}

.principal-subject-view-tabs a.is-active b {
  color: var(--subject-navy);
  background: #ffffff;
}

.principal-subject-limit-form label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--subject-muted);
  font-size: 0.72rem;
  font-weight: 900;
}

.principal-subject-limit-form select {
  min-height: 34px;
  padding: 5px 28px 5px 9px;
  border: 1px solid var(--subject-line);
  border-radius: 10px;
  color: var(--subject-ink);
  font-weight: 900;
  background: #ffffff;
}

.principal-subject-merit-list {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--subject-line);
  border-radius: 16px;
}

.principal-subject-merit-row {
  display: grid;
  grid-template-columns: 64px minmax(220px, 1.5fr) minmax(120px, 0.7fr) minmax(110px, 0.6fr) minmax(110px, 0.6fr);
  align-items: center;
  min-width: 0;
  border-top: 1px solid #e8eef5;
  background: #ffffff;
}

.principal-subject-merit-row:first-child {
  border-top: 0;
}

.principal-subject-merit-row:not(.is-header):hover {
  background: #f8fbff;
}

.principal-subject-merit-row > * {
  min-width: 0;
  padding: 11px 12px;
}

.principal-subject-merit-row.is-header {
  color: #52627a;
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: #f1f6fa;
}

.principal-subject-rank {
  color: var(--subject-teal);
  font-size: 0.86rem;
}

.principal-subject-learner,
.principal-subject-score,
.principal-subject-previous,
.principal-subject-movement {
  display: grid;
  gap: 3px;
}

.principal-subject-learner strong,
.principal-subject-score strong,
.principal-subject-previous strong,
.principal-subject-movement strong {
  color: var(--subject-ink);
  font-size: 0.82rem;
}

.principal-subject-learner span,
.principal-subject-previous span,
.principal-subject-movement span {
  color: var(--subject-muted);
  font-size: 0.7rem;
}

.principal-subject-score span {
  width: fit-content;
  padding: 3px 6px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 900;
}

.principal-subject-score span.is-weak {
  color: #963333;
  background: #fff0f0;
}

.principal-subject-score span.is-fair {
  color: #835b12;
  background: #fff7df;
}

.principal-subject-score span.is-strong {
  color: #2e6b0f;
  background: #edf8e8;
}

.principal-subject-movement.is-up strong {
  color: var(--subject-green);
}

.principal-subject-movement.is-down strong {
  color: var(--subject-red);
}

.principal-subject-empty {
  display: grid;
  place-items: center;
  gap: 5px;
  min-height: 150px;
  padding: 24px;
  border: 1px dashed #c9d6e4;
  border-radius: 16px;
  text-align: center;
  background: #f8fbff;
}

.principal-subject-empty strong {
  color: var(--subject-ink);
}

.principal-subject-empty p {
  max-width: 560px;
  margin: 0;
  color: var(--subject-muted);
  font-size: 0.78rem;
}

@media (max-width: 980px) {
  .principal-subject-navigation {
    grid-template-columns: auto minmax(180px, 1fr);
  }

  .principal-subject-navigation-context {
    display: none;
  }

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

  .principal-subject-intelligence-grid {
    grid-template-columns: 1fr;
  }

  .principal-subject-signal-stack {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto;
  }

  .principal-subject-merit-row {
    grid-template-columns: 56px minmax(180px, 1.3fr) repeat(3, minmax(100px, 0.7fr));
  }
}

@media (max-width: 760px) {
  .principal-subject-change-row {
    grid-template-columns: 1fr;
  }

  .principal-subject-change-row .principal-subject-change-open {
    justify-content: space-between;
    width: 100%;
    padding-top: 5px;
    border-top: 1px solid rgba(148, 163, 184, 0.22);
  }

  .principal-subject-intelligence-hero {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 20px;
  }

  .principal-subject-context {
    min-width: 0;
  }

  .principal-subject-navigation {
    position: static;
    grid-template-columns: 1fr;
  }

  .principal-subject-navigation-back {
    min-width: 0;
  }

  .principal-subject-switcher {
    grid-template-columns: 1fr;
  }

  .principal-subject-kpi-grid,
  .principal-subject-signal-stack {
    grid-template-columns: 1fr;
  }

  .principal-subject-kpi {
    min-height: 0;
  }

  .principal-subject-chart-frame,
  .principal-subject-chart-frame canvas {
    min-height: 270px;
    height: 270px !important;
  }

  .principal-subject-panel-head,
  .principal-subject-merit-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .principal-subject-panel-head > strong {
    width: fit-content;
  }

  .principal-subject-view-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .principal-subject-view-tabs a {
    justify-content: space-between;
  }

  .principal-subject-limit-form,
  .principal-subject-limit-form label,
  .principal-subject-limit-form select {
    width: 100%;
  }

  .principal-subject-limit-form select {
    flex: 1;
  }

  .principal-subject-merit-list {
    gap: 8px;
    overflow: visible;
    border: 0;
    border-radius: 0;
  }

  .principal-subject-merit-row.is-header {
    display: none;
  }

  .principal-subject-merit-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 7px 10px;
    padding: 12px;
    border: 1px solid var(--subject-line);
    border-radius: 14px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
  }

  .principal-subject-merit-row > * {
    padding: 0;
  }

  .principal-subject-rank {
    grid-row: 1 / span 2;
  }

  .principal-subject-learner {
    grid-column: 2;
  }

  .principal-subject-score {
    grid-column: 3;
    grid-row: 1 / span 2;
    justify-items: end;
  }

  .principal-subject-previous {
    grid-column: 2;
  }

  .principal-subject-previous::before {
    content: "Previous";
    color: var(--subject-muted);
    font-size: 0.62rem;
    font-weight: 900;
    text-transform: uppercase;
  }

  .principal-subject-movement {
    grid-column: 1 / -1;
    padding-top: 8px;
    border-top: 1px solid #e8eef5;
    text-align: right;
  }
}

.principal-overview-actions-card {
  display: grid;
  align-content: start;
  gap: 14px;
  border-top: 4px solid #173b72;
  background:
    radial-gradient(circle at top right, rgba(23, 59, 114, 0.08), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.principal-overview-action-list {
  display: grid;
  gap: 10px;
}

.principal-overview-action-list a {
  display: grid;
  gap: 5px;
  padding: 13px 14px;
  border: 1px solid #dbe4f0;
  border-radius: 16px;
  color: inherit;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.84);
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.principal-overview-action-list a:hover,
.principal-overview-action-list a:focus-visible {
  transform: translateY(-1px);
  border-color: #9bb8df;
  box-shadow: 0 12px 24px rgba(23, 59, 114, 0.08);
}

.principal-overview-action-list span,
.principal-overview-action-note span {
  color: #52627a;
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.principal-overview-action-list strong {
  color: #0f172a;
  font-size: 0.92rem;
  line-height: 1.35;
}

.principal-overview-action-note {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 16px;
  color: #173b72;
  background: #eef5ff;
}

.principal-overview-action-note strong {
  color: #173b72;
  font-size: 0.9rem;
  line-height: 1.3;
}

.principal-adoption-engagement-strip {
  margin-top: 2px;
}

.principal-reports-page {
  display: grid;
  gap: 12px;
}

.principal-reports-page .principal-panel {
  grid-template-rows: auto;
  min-height: 0;
}

.principal-reports-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  padding: 10px 12px;
  border-top: 3px solid #173b72;
  margin-bottom: 0;
}

.principal-reports-filter {
  position: static;
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 420px;
  gap: 8px;
  align-items: end;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.principal-reports-filter label {
  flex: 1 1 260px;
  gap: 3px;
}

.principal-reports-filter select {
  min-height: 36px;
}

.principal-reports-filter .ghost-btn {
  min-height: 36px;
  padding: 7px 12px;
}

.principal-reports-summary {
  display: flex;
  flex-wrap: wrap;
  flex: 0 1 auto;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
}

.principal-reports-summary div {
  display: inline-flex;
  gap: 7px;
  align-items: baseline;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid #dbe4f0;
  border-radius: 999px;
  background: #ffffff;
}

.principal-reports-summary div:not(:first-child) {
  flex: 0 1 auto;
}

.principal-reports-summary span,
.principal-report-card-head span,
.principal-report-streams > span {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.principal-reports-summary strong {
  color: #072f67;
  font-size: 0.86rem;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.principal-reports-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 14px;
}

.principal-report-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-top: 3px solid #0f766e;
  margin-bottom: 0;
}

.principal-report-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.principal-report-title {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.principal-report-card-head strong {
  color: #072f67;
  font-size: 1.08rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.principal-report-card-head small,
.principal-report-note {
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 800;
}

.principal-report-actions,
.principal-report-stream-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 7px;
  width: 100%;
  min-width: 0;
}

.principal-report-actions > a,
.principal-report-stream-actions > a {
  width: 100%;
  white-space: nowrap;
}

.principal-report-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 11px;
  border-radius: 999px;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 950;
  text-decoration: none;
  background: linear-gradient(135deg, #173b72 0%, #0f766e 100%);
  box-shadow: 0 12px 24px rgba(23, 59, 114, 0.16);
}

.principal-report-view,
.principal-report-mini-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 950;
  text-decoration: none;
}

.principal-report-view {
  color: #0f3b5f;
  border: 1px solid #bfd7ee;
  background: #f2f8ff;
}

.principal-report-mini-download {
  color: #ffffff;
  background: #173b72;
}

.principal-report-download:hover,
.principal-report-download:focus-visible,
.principal-report-mini-download:hover,
.principal-report-mini-download:focus-visible {
  color: #ffffff;
  transform: translateY(-1px);
  outline: none;
}

.principal-report-view:hover,
.principal-report-view:focus-visible {
  color: #0f3b5f;
  border-color: #173b72;
  background: #e7f2ff;
  transform: translateY(-1px);
  outline: none;
}

.principal-report-download-wide {
  position: relative;
  z-index: 1;
  width: fit-content;
  margin-top: auto;
}

.principal-report-streams {
  display: grid;
  gap: 7px;
  padding-top: 9px;
  border-top: 1px solid #dbe4f0;
}

.principal-report-streams > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.principal-report-stream-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  min-width: 0;
  padding: 10px;
  border: 1px solid #dbe4f0;
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  background: #f8fbff;
}

.principal-report-stream-title {
  min-width: 0;
}

.principal-report-stream-card:hover,
.principal-report-stream-card:focus-within {
  border-color: #173b72;
  background: #eef5ff;
}

.principal-report-streams strong {
  display: block;
  color: #0f172a;
  font-size: 0.88rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.principal-report-streams small {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 800;
}

.principal-intelligence-report-card {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 14px;
  overflow: hidden;
  border-top: 3px solid #173b72;
  margin-bottom: 0;
  background:
    radial-gradient(circle at top left, rgba(23, 59, 114, 0.13), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
}

.principal-intelligence-report-card::after {
  content: "";
  position: absolute;
  right: -38px;
  top: -52px;
  width: 150px;
  height: 150px;
  border: 22px solid rgba(15, 118, 110, 0.08);
  border-radius: 999px;
  pointer-events: none;
}

.principal-intelligence-report-controls {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
  padding: 9px;
  border: 1px solid #dbe4f0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.principal-intelligence-report-controls label {
  display: grid;
  flex: 1 1 150px;
  gap: 3px;
}

.principal-intelligence-report-controls label.is-muted {
  opacity: 0.55;
}

.principal-intelligence-report-controls span {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.principal-intelligence-report-controls select {
  min-height: 34px;
  border: 1px solid #cfd9e7;
  border-radius: 12px;
  color: #0f172a;
  font-weight: 850;
  background: #ffffff;
}

.principal-intelligence-report-controls .ghost-btn {
  min-height: 34px;
  padding: 7px 11px;
}

.principal-intelligence-report-scope {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: baseline;
  width: fit-content;
  max-width: 100%;
  padding: 7px 10px;
  border: 1px solid #cfe0f4;
  border-radius: 999px;
  background: rgba(238, 245, 255, 0.88);
}

.principal-intelligence-report-scope span {
  color: #64748b;
  font-size: 0.66rem;
  font-weight: 950;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.principal-intelligence-report-scope strong {
  color: #173b72;
  font-size: 0.88rem;
}

.principal-intelligence-report-scope small {
  color: #64748b;
  font-size: 0.76rem;
  font-weight: 800;
}

.principal-intelligence-report-list {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 8px;
}

.principal-intelligence-report-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 6px 10px;
  align-items: center;
  min-height: 66px;
  padding: 10px;
  overflow: hidden;
  border: 1px solid #dbe4f0;
  border-radius: 17px;
  color: inherit;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.045);
}

.principal-intelligence-report-row::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: #173b72;
}

.principal-intelligence-report-row:hover,
.principal-intelligence-report-row:focus-visible {
  border-color: #173b72;
  background: #ffffff;
  outline: none;
  transform: translateY(-1px);
}

.principal-intelligence-report-row i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  color: #ffffff;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 950;
  background: #173b72;
}

.principal-intelligence-report-row div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.principal-intelligence-report-row strong {
  color: #0f172a;
  font-size: 0.92rem;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.principal-intelligence-report-row span,
.principal-intelligence-report-row small {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 800;
}

.principal-intelligence-report-row b {
  justify-self: end;
  padding: 5px 9px;
  border-radius: 999px;
  color: #ffffff;
  font-size: 0.84rem;
  background: #173b72;
}

.principal-intelligence-report-row small {
  grid-column: 2 / -1;
  justify-self: end;
}

.principal-intelligence-report-row.is-support::before,
.principal-intelligence-report-row.is-support i,
.principal-intelligence-report-row.is-support b {
  background: #b36b00;
}

.principal-intelligence-report-row.is-improved::before,
.principal-intelligence-report-row.is-improved i,
.principal-intelligence-report-row.is-improved b {
  background: #2e6b0f;
}

.principal-intelligence-report-row.is-dropped::before,
.principal-intelligence-report-row.is-dropped i,
.principal-intelligence-report-row.is-dropped b {
  background: #b32020;
}

.principal-intelligence-report-row.is-subject::before,
.principal-intelligence-report-row.is-subject i,
.principal-intelligence-report-row.is-subject b {
  background: #0f766e;
}

.principal-student-report-link {
  margin-top: 12px;
}

.principal-student-intelligence-card {
  border-top: 4px solid #173b72;
  background:
    radial-gradient(circle at top right, rgba(23, 66, 138, 0.12), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
}

.principal-student-intelligence-list {
  display: grid;
  gap: 9px;
}

.principal-student-intelligence-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items: center;
  min-height: 82px;
  padding: 12px 14px 12px 16px;
  overflow: hidden;
  border: 1px solid #dbe4f0;
  border-radius: 16px;
  color: inherit;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.045);
}

.principal-student-intelligence-item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: #173b72;
}

.principal-student-intelligence-item.is-strong::before,
.principal-student-intelligence-item.is-up::before {
  background: #2e6b0f;
}

.principal-student-intelligence-item.is-watch::before {
  background: #b36b00;
}

.principal-student-intelligence-item.is-down::before {
  background: #b32020;
}

.principal-student-intelligence-item span {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.principal-student-intelligence-item strong {
  color: #0f172a;
  font-size: 0.98rem;
  line-height: 1.12;
}

.principal-student-intelligence-item small {
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 800;
}

.principal-student-intelligence-item b {
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
  justify-self: end;
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  color: #ffffff;
  font-size: 0.85rem;
  background: #173b72;
}

.principal-student-intelligence-item.is-strong b,
.principal-student-intelligence-item.is-up b {
  background: #2e6b0f;
}

.principal-student-intelligence-item.is-watch b {
  background: #b36b00;
}

.principal-student-intelligence-item.is-down b {
  background: #b32020;
}

.principal-student-intelligence-item b em {
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 800;
  opacity: 0.86;
}

.principal-student-intelligence-item > a {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 32px;
  padding: 7px 11px;
  border: 1px solid #cfe0f4;
  border-radius: 999px;
  color: #173b72;
  font-size: 0.74rem;
  font-weight: 950;
  text-decoration: none;
  background: #ffffff;
}

.principal-student-intelligence-item > a:hover,
.principal-student-intelligence-item > a:focus-visible {
  border-color: #173b72;
  background: #eef5ff;
  outline: none;
}

.principal-soft-note {
  margin: 10px 0 0;
  color: #64748b;
  font-size: 0.76rem;
  font-weight: 800;
}

.principal-academic-alert-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.principal-academic-alert-strip a {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid #fde68a;
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  background: linear-gradient(135deg, #fffbeb 0%, #ffffff 100%);
}

.principal-academic-alert-strip a.is-urgent {
  border-color: #fecdd3;
  background: linear-gradient(135deg, #fff1f2 0%, #ffffff 100%);
}

.principal-academic-alert-strip a:hover,
.principal-academic-alert-strip a:focus-visible {
  border-color: #b36b00;
  outline: none;
}

.principal-academic-alert-strip span {
  color: #92400e;
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.principal-academic-alert-strip strong {
  color: #0f172a;
  font-size: 0.84rem;
  line-height: 1.25;
}

.principal-student-merit-card {
  display: grid;
  gap: 14px;
  border-color: #c8d7ee;
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(23, 59, 114, 0.08), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.principal-student-merit-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid #dbe4f0;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.86);
}

.principal-student-merit-controls label {
  display: grid;
  gap: 5px;
  min-width: 180px;
  color: #52627a;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.principal-student-merit-controls select {
  min-height: 38px;
  text-transform: none;
}

.principal-student-merit-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.principal-student-merit-summary span {
  display: block;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.principal-student-merit-summary strong {
  color: #0f172a;
}

.principal-student-merit-summary b {
  padding: 7px 10px;
  border-radius: 999px;
  color: #17428a;
  font-size: 0.78rem;
  background: #dbeafe;
}

.principal-student-merit-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 9px;
}

.principal-student-merit-list.is-all {
  max-height: 620px;
  overflow: auto;
  padding-right: 4px;
  scrollbar-width: thin;
}

.principal-student-merit-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid #dbe4f0;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.04);
}

.principal-student-merit-row i {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 12px;
  color: #173b72;
  font-size: 0.84rem;
  font-style: normal;
  font-weight: 900;
  background: #eef5ff;
}

.principal-student-merit-row strong {
  display: block;
  color: #0f172a;
  line-height: 1.18;
}

.principal-student-merit-row span {
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 800;
}

.principal-student-merit-detail {
  margin-top: 6px;
}

.principal-student-merit-detail summary {
  width: fit-content;
  cursor: pointer;
  color: #17428a;
  font-size: 0.74rem;
  font-weight: 900;
}

.principal-student-merit-detail div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}

.principal-student-merit-detail small {
  padding: 5px 7px;
  border-radius: 999px;
  color: #36527a;
  font-size: 0.7rem;
  font-weight: 800;
  background: #eef5ff;
}

.principal-student-merit-detail .principal-student-subject-report {
  display: grid;
  gap: 5px;
  width: 100%;
  margin-top: 9px;
  padding: 8px;
  border: 1px solid #dbe4f0;
  border-radius: 12px;
  background: #f8fbff;
}

.principal-student-subject-report > span {
  color: #52627a;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.principal-student-merit-detail .principal-student-subject-report-row {
  display: grid;
  grid-template-columns: minmax(70px, 0.8fr) minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  margin: 0;
  padding: 6px 7px;
  border-radius: 10px;
  background: #ffffff;
}

.principal-student-subject-report-row strong {
  color: #0f172a;
  font-size: 0.78rem;
}

.principal-student-subject-report-row small {
  padding: 0;
  color: #64748b;
  background: transparent;
}

.principal-student-subject-report-row b {
  min-width: 48px;
  padding: 4px 7px;
  border-radius: 999px;
  color: #36527a;
  font-size: 0.72rem;
  text-align: center;
  background: #e8f0fb;
}

.principal-student-subject-report-row.is-up b {
  color: #ffffff;
  background: #2e6b0f;
}

.principal-student-subject-report-row.is-down b {
  color: #ffffff;
  background: #b32020;
}

.principal-student-record-trigger {
  width: fit-content;
  margin-top: 7px;
  padding: 6px 10px;
  border: 1px solid #bfd0e7;
  border-radius: 999px;
  color: #17428a;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.01em;
  background: linear-gradient(135deg, #ffffff 0%, #eef5ff 100%);
  cursor: pointer;
}

.principal-student-record-trigger:hover,
.principal-student-record-trigger:focus-visible {
  border-color: #17428a;
  box-shadow: 0 0 0 3px rgba(23, 66, 138, 0.12);
  outline: none;
}

.principal-student-record-modal[hidden] {
  display: none !important;
}

.principal-student-record-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 22px;
}

.principal-student-record-modal-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top left, rgba(23, 66, 138, 0.22), transparent 34%),
    rgba(8, 17, 34, 0.58);
  backdrop-filter: blur(8px);
}

.principal-student-record-modal-panel {
  position: relative;
  width: min(940px, 96vw);
  max-height: min(84vh, 760px);
  overflow: auto;
  padding: 22px;
  border: 1px solid rgba(219, 228, 240, 0.92);
  border-radius: 26px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 251, 255, 0.98) 54%, rgba(238, 245, 255, 0.98) 100%);
  box-shadow: 0 30px 90px rgba(8, 17, 34, 0.32);
  animation: principalRecordModalIn 180ms ease-out;
}

body.principal-modal-open {
  overflow: hidden;
}

.principal-student-record-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid #dbe4f0;
  border-radius: 50%;
  color: #0f172a;
  font-size: 1.1rem;
  font-weight: 900;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
  cursor: pointer;
}

.principal-student-record-close:hover,
.principal-student-record-close:focus-visible {
  color: #ffffff;
  background: #173b72;
  outline: none;
}

.principal-student-record-modal-headline {
  display: grid;
  gap: 5px;
  padding: 4px 54px 16px 0;
  border-bottom: 1px solid #dbe4f0;
}

.principal-student-record-modal-headline span {
  color: #52627a;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.principal-student-record-modal-headline strong {
  color: #072f67;
  font-size: clamp(1.45rem, 3vw, 2.05rem);
  line-height: 1.05;
}

.principal-student-record-modal-headline small {
  color: #64748b;
  font-size: 0.86rem;
  font-weight: 850;
}

.principal-student-record-modal-headline b {
  width: fit-content;
  margin-top: 7px;
  padding: 7px 11px;
  border: 1px solid rgba(23, 66, 138, 0.18);
  border-radius: 999px;
  color: #072f67;
  font-size: 0.76rem;
  font-weight: 950;
  background: linear-gradient(135deg, #eef5ff 0%, #ffffff 100%);
}

.principal-student-record-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 9px;
  margin-top: 16px;
}

.principal-student-record-summary small {
  display: grid;
  gap: 3px;
  min-height: 54px;
  padding: 10px 12px;
  border: 1px solid #dbe4f0;
  border-radius: 16px;
  color: #36527a;
  font-size: 0.76rem;
  font-weight: 850;
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.045);
}

.principal-student-metric-movement {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
  padding: 12px;
  border: 1px solid #cfe0f4;
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(238, 245, 255, 0.92) 0%, rgba(255, 255, 255, 0.96) 100%);
}

.principal-student-metric-movement > div {
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 10px;
  border-right: 1px solid #dbe4f0;
}

.principal-student-metric-movement > div span {
  color: #0f172a;
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.principal-student-metric-movement > div small {
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 800;
}

.principal-student-metric-movement-row {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 11px;
  border: 1px solid #e6edf7;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.045);
}

.principal-student-metric-movement-row span {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.principal-student-metric-movement-row strong {
  color: #072f67;
  font-size: 1.28rem;
  line-height: 1;
}

.principal-student-metric-movement-row small {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 800;
}

.principal-student-metric-movement-row b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin-top: 2px;
  padding: 4px 8px 4px 4px;
  border-radius: 999px;
  color: #36527a;
  font-size: 0.76rem;
  background: #e8f0fb;
}

.principal-student-metric-movement-row.is-up b {
  color: #1f6b20;
  background: #e8f7e8;
}

.principal-student-metric-movement-row.is-down b {
  color: #b32020;
  background: #fde8e8;
}

.principal-student-record-modal .principal-student-subject-report {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  padding: 14px;
  border: 1px solid #dbe4f0;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.76);
}

.principal-student-record-modal .principal-student-subject-report > span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #0f172a;
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.principal-student-record-modal .principal-student-subject-report > span::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #17428a;
  box-shadow: 0 0 0 5px rgba(23, 66, 138, 0.11);
}

.principal-student-record-modal .principal-student-subject-report-row {
  display: grid;
  grid-template-columns: minmax(86px, 0.72fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  padding: 9px 10px;
  border: 1px solid #eef2f7;
  border-radius: 14px;
  background: #ffffff;
}

.principal-student-record-modal .principal-student-subject-report-row strong {
  color: #0f172a;
  font-size: 0.84rem;
  font-weight: 950;
}

.principal-student-record-modal .principal-student-subject-report-row small {
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 850;
}

.principal-student-record-modal .principal-student-subject-report-row b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 76px;
  padding: 5px 9px 5px 4px;
  border-radius: 999px;
  color: #36527a;
  font-size: 0.78rem;
  text-align: center;
  background: #e8f0fb;
}

.principal-student-record-modal .principal-student-subject-report-row.is-up {
  border-color: rgba(46, 107, 15, 0.2);
}

.principal-student-record-modal .principal-student-subject-report-row.is-up b {
  color: #ffffff;
  background: #2e6b0f;
}

.principal-student-record-modal .principal-student-subject-report-row.is-down {
  border-color: rgba(179, 32, 32, 0.2);
}

.principal-student-record-modal .principal-student-subject-report-row.is-down b {
  color: #ffffff;
  background: #b32020;
}

@keyframes principalRecordModalIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.principal-student-merit-score {
  display: grid;
  justify-items: end;
  gap: 2px;
  text-align: right;
}

.principal-student-merit-score b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border-radius: 999px;
  color: #ffffff;
  font-size: 0.95rem;
  background: #173b72;
}

.principal-student-merit-score b .principal-trend-inline,
.principal-student-metric-movement-row b .principal-trend-inline,
.principal-student-subject-report-row b .principal-trend-inline {
  flex: 0 0 auto;
  margin-right: 0;
}

.principal-student-merit-score b.is-up {
  background: #2e6b0f;
}

.principal-student-merit-score b.is-down {
  background: #b32020;
}

.principal-student-merit-score b.is-flat {
  color: #36527a;
  background: #e8f0fb;
}

.principal-student-merit-score small {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 800;
}

.principal-trend-line-shell {
  display: grid;
  gap: 16px;
  padding: 20px 22px;
  border: 1px solid #dbe4f0;
}

.principal-trend-line-shell--focused {
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(23, 59, 114, 0.08), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.principal-trend-primary-panel {
  border-color: #c8d7ee;
  background: rgba(255, 255, 255, 0.94);
}

.principal-trend-mini {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-radius: 999px;
  color: #36527a;
  font-size: 0.8rem;
  font-weight: 900;
  background: #edf2f7;
}

.principal-trend-mini.is-up {
  color: #ffffff;
  background: #2e6b0f;
}

.principal-trend-mini.is-down {
  color: #ffffff;
  background: #b32020;
}

@media (max-width: 1100px) {
  .principal-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .principal-watch-feature-item.is-lead {
    grid-column: span 2;
  }

  .principal-academic-spotlight-grid {
    grid-template-columns: 1fr;
  }

  .principal-academic-spotlight-grid--single .principal-academic-spotlight-card {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .principal-academic-spotlight-grid--single .principal-academic-spotlight-card small {
    grid-column: 1 / -1;
  }

  .principal-filter-bar-redesign {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

}

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

  .principal-page-switch {
    justify-content: flex-start;
  }

  .principal-page-switch a {
    flex: 1 1 0;
  }

  .principal-summary-grid,
  .principal-engagement-feature-strip {
    grid-template-columns: 1fr;
  }

  .principal-reports-summary,
  .principal-reports-grid {
    grid-template-columns: 1fr;
  }

  .principal-report-card-head {
    display: grid;
  }

  .principal-report-actions,
  .principal-report-stream-actions {
    width: 100%;
  }

  .principal-report-stream-card {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .principal-report-view,
  .principal-report-mini-download,
  .principal-report-download,
  .principal-report-download-wide {
    width: 100%;
  }

  .principal-intelligence-report-controls,
  .principal-intelligence-report-controls label,
  .principal-intelligence-report-controls button {
    width: 100%;
  }

  .principal-intelligence-report-list {
    grid-template-columns: 1fr;
  }

  .principal-intelligence-report-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .principal-intelligence-report-row b,
  .principal-intelligence-report-row small {
    grid-column: 2;
    justify-self: start;
  }

  .principal-student-filter-actions {
    align-items: stretch;
  }

  .principal-student-merit-controls,
  .principal-student-merit-controls label,
  .principal-student-merit-controls button {
    width: 100%;
  }

  .principal-student-merit-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .principal-student-merit-score {
    grid-column: 1 / -1;
    justify-items: start;
    text-align: left;
  }

  .principal-student-record-modal {
    padding: 10px;
  }

  .principal-student-record-modal-panel {
    width: min(100%, 560px);
    max-height: calc(100vh - 20px);
    padding: 16px;
    border-radius: 20px;
  }

  .principal-student-record-modal-headline {
    padding-right: 44px;
  }

  .principal-student-record-summary {
    grid-template-columns: 1fr;
  }

  .principal-student-metric-movement {
    grid-template-columns: 1fr;
  }

  .principal-student-metric-movement > div {
    border-right: 0;
    border-bottom: 1px solid #dbe4f0;
  }

  .principal-student-record-modal .principal-student-subject-report {
    padding: 10px;
  }

  .principal-student-record-modal .principal-student-subject-report-row {
    grid-template-columns: 1fr auto;
  }

  .principal-student-record-modal .principal-student-subject-report-row small {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .principal-dashboard-group-head {
    align-items: start;
  }

  .principal-overview-visual-shell {
    grid-template-columns: 1fr;
  }

  .principal-overview-adoption-mini-grid {
    grid-template-columns: 1fr;
  }

  .principal-overview-grade-chart-wrap {
    min-height: 240px;
  }

  .principal-overview-grade-chart-wrap canvas {
    height: 240px !important;
  }

  .principal-watch-feature-list {
    grid-template-columns: 1fr;
  }

  .principal-filter-bar-redesign {
    grid-template-columns: 1fr;
  }

  .principal-overview-donut-wrap {
    min-height: 210px;
  }

  .principal-overview-donut-wrap canvas {
    height: 210px !important;
  }

  .principal-academic-spotlight-grid--single .principal-academic-spotlight-card {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .principal-academic-spotlight-grid--single .principal-academic-spotlight-card small {
    grid-column: auto;
  }

  .principal-watch-feature-item {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .principal-watch-feature-item.is-lead {
    grid-column: span 1;
  }

  .principal-student-grade-group summary {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .principal-student-stream-pie-panel {
    grid-template-columns: 1fr;
  }

  .principal-student-stream-donut {
    max-width: 180px;
  }

  .principal-student-breakdown-row {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .principal-student-records-modal {
    padding: 10px;
  }

  .principal-student-modal-panel {
    max-height: calc(100vh - 20px);
    border-radius: 18px;
  }

  .principal-student-modal-head {
    padding: 18px;
  }

  .principal-student-modal-tools {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .principal-student-modal-body {
    padding: 12px;
  }

  .principal-student-modal-footer {
    grid-template-columns: 1fr;
  }

  .principal-student-page-btn,
  .principal-student-page-btn.is-next {
    justify-self: stretch;
  }

  .principal-subject-movement-top {
    grid-template-columns: 1fr;
  }

  .principal-subject-change-row {
    width: 100%;
  }

  .principal-subject-change-list {
    grid-template-columns: 1fr;
  }

  .principal-subject-change-card {
    grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  }

  .principal-subject-change-card .principal-trend-glyph {
    display: none;
  }

  .principal-subject-change-card strong {
    grid-column: 1;
  }

  .principal-subject-change-card span,
  .principal-subject-change-card small {
    grid-column: 2;
  }

  .principal-trend-line-shell {
    padding: 16px;
  }
}

.student-exam-card-list {
  display: none;
}

.student-exam-card {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px;
  background: #fff;
}

.student-exam-card h4 {
  margin: 0 0 6px;
  font-size: 16px;
  color: #0f172a;
}

.student-exam-card-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.student-exam-card-head h4 {
  margin-bottom: 0;
}

.student-exam-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 9px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.student-exam-status.is-ready {
  background: #dcfce7;
  color: #166534;
}

.student-exam-kv {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  font-size: 13px;
  color: #475569;
}

.student-exam-kv strong {
  color: #0f172a;
}

.student-class-benchmark-label {
  display: block;
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.student-class-average-strip,
.student-class-context {
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1e3a8a;
}

.student-class-average-strip {
  display: grid;
  gap: 3px;
  margin-top: 10px;
  padding: 9px 10px;
  border-radius: 10px;
}

.student-class-average-strip span,
.student-class-context-kicker {
  color: #1d4ed8;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.student-class-average-strip strong {
  color: #0f172a;
  font-size: 0.94rem;
}

.student-class-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: -8px 0 18px;
  padding: 14px 16px;
  border-radius: 12px;
}

.student-class-context h3 {
  margin: 2px 0 3px;
  color: #0f172a;
  font-size: 1rem;
}

.student-class-context p {
  margin: 0;
  color: #475569;
  font-size: 0.88rem;
}

.student-class-context-value {
  flex: 0 0 auto;
  min-width: 96px;
  color: #1e3a8a;
  font-size: 1.6rem;
  font-weight: 900;
  text-align: right;
}

.analytics-kpi-suffix {
  color: #64748b;
  font-size: 0.72em;
  font-weight: 700;
}

.student-exam-actions {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.student-exam-actions .ghost-btn {
  width: 100%;
  text-align: center;
}

.student-exam-latest {
  background: #ecfdf5;
}

.student-exam-latest td {
  font-weight: 600;
}

.student-result-kpis {
  margin-bottom: 20px;
}

.student-result-analytics {
  margin-top: 16px;
}

.subject-progress-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.subject-graph-card {
  padding: 14px 16px;
  border: 1px solid #dbe7f5;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.06);
}

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

.subject-graph-title {
  font-weight: 700;
  margin: 0;
  color: #0f172a;
}

.subject-graph-subtitle {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 0.82rem;
}

.subject-graph-trend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.subject-graph-trend.up {
  background: #dcfce7;
  color: #166534;
}

.subject-graph-trend.down {
  background: #fee2e2;
  color: #b91c1c;
}

.subject-graph-trend.flat {
  background: #e2e8f0;
  color: #334155;
}

.subject-graph-frame {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 8px;
  align-items: stretch;
}

.subject-graph-y-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.subject-graph-wrap {
  position: relative;
  border-radius: 14px;
  padding: 8px 8px 4px;
  background: linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%);
  border: 1px solid #dbeafe;
  overflow: hidden;
}

.subject-graph-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}

.subject-graph-svg {
  width: auto;
  min-width: 100%;
  max-width: none;
  height: 164px;
  display: block;
}

.subject-graph-axis {
  stroke: #cbd5e1;
  stroke-width: 0.6;
}

.subject-graph-guide {
  stroke: #bfdbfe;
  stroke-width: 0.6;
  stroke-dasharray: 2 2;
}

.subject-graph-x-guide {
  stroke: #dbeafe;
  stroke-width: 0.5;
  stroke-dasharray: 1.5 3;
}

.subject-graph-y-tick {
  fill: #64748b;
  font-size: 10px;
  font-weight: 800;
  dominant-baseline: middle;
}

.subject-graph-area {
  opacity: 0.18;
}

.subject-graph-line {
  fill: none;
  stroke: #0f766e;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 5px 10px rgba(15, 118, 110, 0.18));
}

.subject-graph-focus-line {
  stroke: #0ea5e9;
  stroke-width: 1.2;
  stroke-dasharray: 3 2;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.subject-graph-point-hit {
  fill: transparent;
  cursor: pointer;
}

.subject-graph-point {
  fill: #0f766e;
  stroke: #ffffff;
  stroke-width: 2;
  transition: fill 0.18s ease;
}

.subject-graph-point.missing {
  fill: #cbd5e1;
}

.subject-graph-point.is-active {
  fill: #0284c7;
}

.subject-graph-point.missing.is-active {
  fill: #64748b;
}

.subject-graph-detail {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #dbeafe;
  color: #334155;
  font-size: 0.86rem;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.subject-graph-detail strong {
  color: #0f172a;
  margin-right: 6px;
}

.subject-graph-score-label {
  fill: #0f172a;
  font-size: 11px;
  font-weight: 900;
  text-anchor: middle;
  paint-order: stroke;
  stroke: #ffffff;
  stroke-width: 3px;
  stroke-linejoin: round;
}

.subject-graph-x-label {
  fill: #334155;
  font-size: 11px;
  font-weight: 800;
  text-anchor: middle;
}

.subject-graph-labels {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  margin-top: 10px;
  font-size: 11px;
  color: #475569;
}

.subject-graph-labels div {
  padding: 6px 8px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  text-align: center;
}

.student-subject-timeline-list {
  display: none;
}

.student-subject-timeline-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
}

.student-subject-timeline-card strong,
.student-subject-timeline-card span {
  display: block;
}

.student-subject-timeline-card span {
  color: #64748b;
  font-size: 0.86rem;
}

.student-subject-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  border-radius: 999px;
  background: #0f172a;
  color: #ffffff;
  font-weight: 800;
}

.student-subject-timeline-card .ghost-btn {
  grid-column: 1 / -1;
  width: 100%;
  justify-content: center;
}

.band-chart {
  display: grid;
  gap: 10px;
}

.band-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) minmax(160px, 4fr) 52px;
  align-items: center;
  gap: 10px;
}

.band-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.9rem;
  color: #1e293b;
}

.band-track {
  width: 100%;
  min-width: 0;
  height: 12px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

.band-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
}

.error-log-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.error-summary-card {
  border-width: 1px;
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.08);
}

.error-summary-count {
  font-size: 2rem;
  font-weight: 800;
  margin: 4px 0 8px;
}

.error-analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.error-analytics-panel {
  border-width: 1px;
}

.error-analytics-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.error-analytics-header h3 {
  margin: 0 0 4px;
}

.error-analytics-range-form {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.error-analytics-range-form label {
  width: auto;
  min-width: 180px;
}

.error-analytics-total {
  font-size: 0.9rem;
  font-weight: 800;
  color: #0f766e;
  background: #ecfeff;
  border: 1px solid #a5f3fc;
  border-radius: 999px;
  padding: 6px 10px;
  white-space: nowrap;
}

.error-line-chart {
  display: grid;
  gap: 10px;
  padding: 10px 6px 0;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.error-line-chart-svg {
  width: 100%;
  height: 260px;
  display: block;
  overflow: visible;
}

.error-line-chart-axis {
  stroke: #cbd5e1;
  stroke-width: 0.9;
}

.error-line-chart-tick {
  stroke: #cbd5e1;
  stroke-width: 0.8;
}

.error-line-chart-area {
  fill: rgba(249, 115, 22, 0.04);
}

.error-line-chart-path {
  fill: none;
  stroke: #ea580c;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.error-line-chart-point {
  fill: #ffffff;
  stroke: #dc2626;
  stroke-width: 0.75;
}

.error-line-chart-labels {
  position: relative;
  height: 28px;
}

.error-line-chart-label {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  text-align: center;
  min-width: 64px;
}

.error-line-chart-label span {
  font-size: 0.72rem;
  color: #64748b;
  white-space: nowrap;
}

.activity-page {
  display: grid;
  gap: 16px;
}

.activity-hero {
  background:
    linear-gradient(135deg, #ecfeff 0%, #f8fafc 42%, #fff7ed 100%);
}

.activity-live-chip {
  display: grid;
  gap: 2px;
  text-align: right;
}

.activity-live-chip small {
  color: #64748b;
  font-weight: 700;
}

.activity-filter-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr)) auto;
  gap: 12px;
  align-items: end;
}

.activity-filter-bar label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: #475569;
  font-size: 0.86rem;
  font-weight: 800;
}

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

.activity-filter-actions button,
.activity-filter-actions .ghost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
}

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

.activity-kpi-card,
.activity-never-card {
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  padding: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
  min-height: 120px;
  display: grid;
  align-content: center;
}

.activity-kpi-live {
  background: linear-gradient(135deg, #ecfdf5 0%, #f0fdfa 100%);
  border-color: #99f6e4;
}

.activity-kpi-card span,
.activity-never-card span {
  display: block;
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.activity-kpi-card strong,
.activity-never-card strong {
  display: block;
  color: #0f172a;
  font-size: 1.8rem;
  line-height: 1;
  margin: 8px 0 4px;
}

.activity-kpi-card small,
.activity-never-card small,
.activity-login-row small {
  color: #64748b;
  font-weight: 600;
}

.activity-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 16px;
  align-items: start;
}

.activity-panel {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

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

.activity-panel-head h3 {
  margin: 0;
}

.activity-panel-head > span {
  color: #0f766e;
  background: #ccfbf1;
  border: 1px solid #99f6e4;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.activity-bar-chart {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(46px, 1fr));
  gap: 8px;
  align-items: end;
  min-height: 240px;
}

.activity-line-chart {
  min-height: 240px;
}

.activity-line-chart svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.activity-line-guide {
  stroke: #dbe3ef;
  stroke-width: 1;
}

.activity-line-guide-label {
  fill: #94a3b8;
  font-size: 11px;
  font-weight: 700;
}

.activity-line-area {
  fill: rgba(14, 165, 233, 0.12);
}

.activity-line-path {
  fill: none;
  stroke: #0f766e;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.activity-line-point {
  fill: #ffffff;
  stroke: #0f766e;
  stroke-width: 2;
}

.activity-line-point-value,
.activity-line-point-label {
  fill: #475569;
  font-size: 11px;
  font-weight: 700;
  text-anchor: middle;
}

.activity-timezone-note {
  margin: -6px 0 10px;
  font-size: 0.86rem;
}

.activity-bar-col {
  display: grid;
  gap: 6px;
  align-items: end;
}

.activity-bar-value,
.activity-bar-label {
  text-align: center;
  color: #475569;
  font-size: 0.76rem;
  font-weight: 800;
}

.activity-bar-track {
  height: 170px;
  display: flex;
  align-items: end;
  border-radius: 10px;
  background: #e2e8f0;
  overflow: hidden;
}

.activity-bar-track span {
  display: block;
  width: 100%;
  height: var(--activity-bar-height, 4px);
  min-height: 4px;
  background: linear-gradient(180deg, #14b8a6 0%, #0f766e 100%);
  border-radius: 3px 3px 0 0;
}

.activity-page-list,
.activity-login-list {
  display: grid;
  gap: 12px;
}

.activity-page-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 10px;
  align-items: center;
  min-width: 0;
}

.activity-page-row span {
  min-width: 0;
  color: #0f172a;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.activity-page-row strong {
  color: #0f766e;
}

.activity-page-row div {
  grid-column: 1 / -1;
  height: 9px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}

.activity-page-row i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #0ea5e9);
  border-radius: 999px;
}

.activity-login-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
  min-width: 0;
}

.activity-login-row div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.activity-login-row strong,
.activity-login-row small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.activity-role-chip {
  background: #eef2ff;
  color: #3730a3;
  border-color: #c7d2fe;
}

.activity-role-chip-admin {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #bfdbfe;
}

.activity-role-chip-teacher {
  background: #f0fdf4;
  color: #15803d;
  border-color: #bbf7d0;
}

.activity-role-chip-student {
  background: #fff7ed;
  color: #c2410c;
  border-color: #fdba74;
}

.activity-never-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.activity-coverage-track {
  height: 8px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
  margin-top: 8px;
}

.activity-coverage-track i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #14b8a6, #0ea5e9);
  border-radius: 999px;
}

.activity-account-section {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #e2e8f0;
}

.activity-account-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.activity-account-head strong {
  color: #0f172a;
}

.activity-account-head small {
  color: #64748b;
}

.activity-note {
  margin: 12px 0 0;
}

.activity-never-panel {
  margin-top: 6px;
}

.activity-never-details {
  display: grid;
  gap: 12px;
}

.activity-never-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  padding: 12px 14px;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  color: #0f172a;
  font-weight: 700;
}

.activity-never-details > summary::-webkit-details-marker {
  display: none;
}

.activity-never-details[open] > summary {
  border-color: #bfdbfe;
  background: #eff6ff;
}

.activity-never-details > summary small {
  color: #64748b;
  font-weight: 700;
}

.teacher-coverage-page {
  display: grid;
  gap: 16px;
}

.teacher-coverage-hero {
  background: linear-gradient(135deg, #eef2ff 0%, #ecfeff 48%, #f0fdf4 100%);
}

.teacher-coverage-alert-card {
  background: linear-gradient(135deg, #fff7ed 0%, #f8fafc 50%, #eef2ff 100%);
}

.teacher-coverage-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.teacher-coverage-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.teacher-coverage-filters .tab-btn,
.teacher-coverage-tab-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.teacher-coverage-panel {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.error-severity-chart,
.error-list-chart {
  display: grid;
  gap: 12px;
}

.error-list-chart-scroll {
  max-height: 360px;
  overflow-y: auto;
  padding-right: 4px;
}

.error-severity-row,
.error-list-row {
  display: grid;
  gap: 8px;
}

.error-list-row-compact {
  gap: 0;
  padding: 8px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
}

.error-mini-pagination {
  margin-top: 12px;
  align-items: center;
}

.error-severity-row {
  grid-template-columns: minmax(0, 1.2fr) minmax(80px, 4fr) auto;
  align-items: center;
  min-width: 0;
}

.error-severity-meta,
.error-list-row-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.error-severity-meta {
  flex-wrap: wrap;
}

.error-severity-row > .muted-text {
  justify-self: end;
  white-space: nowrap;
}

.error-filter-link {
  color: #0f766e;
  font-weight: 700;
  text-decoration: none;
  word-break: break-word;
}

.error-filter-link:hover {
  text-decoration: underline;
}

.error-path-label {
  color: #0f172a;
  font-weight: 600;
  word-break: break-word;
}

.severity-critical {
  border-color: #fecaca;
  background: linear-gradient(180deg, #fff1f2 0%, #ffffff 100%);
}

.band-fill.severity-critical {
  background: #dc2626;
}

.severity-high {
  border-color: #fed7aa;
  background: linear-gradient(180deg, #fff7ed 0%, #ffffff 100%);
}

.band-fill.severity-high {
  background: #ea580c;
}

.severity-medium {
  border-color: #fde68a;
  background: linear-gradient(180deg, #fffbeb 0%, #ffffff 100%);
}

.band-fill.severity-medium {
  background: #ca8a04;
}

.severity-low {
  border-color: #bfdbfe;
  background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%);
}

.band-fill.severity-low {
  background: #2563eb;
}

.severity-priority-users {
  border-color: #bbf7d0;
  background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
}

.severity-background-noise {
  border-color: #dbeafe;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.error-filter-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  align-items: end;
}

.error-filter-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.error-filter-actions .ghost-btn {
  width: auto;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ghost-btn.is-active {
  border-color: #0f766e;
  color: #0f766e;
  background: #ecfeff;
  font-weight: 700;
}

.error-console {
  display: grid;
  gap: 16px;
}

.error-console-hero {
  background: linear-gradient(135deg, #fff7ed 0%, #f8fafc 46%, #ecfeff 100%);
}

.error-console-live {
  justify-self: end;
  align-self: center;
  min-width: 180px;
  padding: 14px 16px;
  border: 1px solid #fed7aa;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff7ed 0%, #ffffff 100%);
  box-shadow: 0 14px 28px rgba(154, 52, 18, 0.1);
  text-align: right;
}

.error-console-live span,
.error-severity-tile span,
.error-incident-meta-grid span {
  display: block;
  color: #64748b;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.error-console-live strong {
  display: block;
  margin: 4px 0;
  color: #9a3412;
  font-size: 2.1rem;
  line-height: 1;
}

.error-console-live small,
.error-incident-meta-grid small {
  color: #64748b;
  font-weight: 700;
}

.error-console-toolbar,
.error-console-panel {
  border: 1px solid #dbe3ef;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.error-console-toolbar {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: end;
  padding: 12px;
}

.error-console-tabs {
  display: inline-grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  padding: 4px;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  background: #f8fafc;
}

.error-console-tabs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 9px;
  color: #475569;
  font-weight: 800;
  text-decoration: none;
}

.error-console-tabs a.is-active {
  background: #0f766e;
  color: #ffffff;
  box-shadow: 0 10px 18px rgba(15, 118, 110, 0.18);
}

.error-console-filter {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 0.7fr)) minmax(220px, 1.4fr) minmax(140px, 0.8fr) auto;
  gap: 10px;
  align-items: end;
}

.error-console-filter label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.error-console-filter select,
.error-console-filter input {
  min-width: 0;
}

.error-console-filter-actions {
  display: flex;
  gap: 8px;
}

.error-console-filter-actions button,
.error-console-filter-actions .ghost-btn {
  min-width: 86px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.error-severity-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.error-severity-tile {
  min-height: 92px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 14px;
  border: 1px solid #dbe3ef;
  border-radius: 14px;
  color: #0f172a;
  text-decoration: none;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
}

.error-severity-tile strong {
  font-size: 2rem;
  line-height: 1;
}

.error-console-insight-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
  gap: 14px;
  align-items: stretch;
}

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

.error-console-panel {
  padding: 14px;
  min-width: 0;
}

.error-console-panel-head,
.error-incident-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.error-incident-panel-head {
  padding: 12px;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
}

.error-console-panel-head h3,
.error-incident-panel-head h3 {
  margin: 0 0 4px;
}

.error-incident-summary {
  min-width: 0;
}

.error-incident-panel-head .error-bulk-bar {
  margin: 0;
  padding: 0;
  justify-content: flex-end;
  align-items: flex-end;
  text-align: right;
}

.error-incident-panel-head .error-bulk-bar p {
  flex-basis: 100%;
  margin: 0;
}

.error-incident-panel-head .error-filter-actions {
  justify-content: flex-end;
}

.error-trend-panel .error-line-chart-svg {
  height: 220px;
}

.error-console-details {
  margin-top: 12px;
  border-top: 1px dashed #dbe3ef;
  padding-top: 10px;
}

.error-console-details summary {
  cursor: pointer;
  color: #0f766e;
  font-weight: 800;
}

.error-focus-ip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.error-focus-ip {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  background: #ffffff;
  color: #0f172a;
  text-decoration: none;
}

.error-focus-ip span {
  overflow-wrap: anywhere;
}

.error-incident-panel {
  padding: 16px;
}

.error-incident-groups {
  display: grid;
  gap: 18px;
}

.error-incident-list {
  display: grid;
  gap: 12px;
}

.error-incident-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #dbe3ef;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
}

.error-incident-card-head,
.error-incident-main,
.error-incident-badges {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.error-incident-card-head,
.error-incident-main {
  justify-content: space-between;
}

.error-incident-main h4 {
  margin: 0 0 5px;
  color: #0f172a;
  font-size: 1rem;
  line-height: 1.25;
}

.error-incident-id {
  color: #475569;
  font-weight: 800;
}

.error-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 800;
}

.error-incident-meta-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 0.8fr 1fr;
  gap: 10px;
}

.error-incident-meta-grid div {
  min-width: 0;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: rgba(248, 250, 252, 0.72);
}

.error-incident-meta-grid strong {
  display: block;
  margin-top: 4px;
  color: #0f172a;
  font-size: 0.92rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.error-log-modal-section {
  margin-top: 12px;
}

.error-empty-state {
  padding: 28px 12px;
  text-align: center;
}

.error-empty-state h3 {
  margin: 0 0 6px;
}

.error-console-pagination {
  margin-top: 14px;
}

.error-resolve-all-panel {
  width: min(460px, 100%);
  border-color: #fed7aa;
  background:
    linear-gradient(180deg, #fff7ed 0%, #fffdf8 58%, #ffffff 100%);
  text-align: left;
}

.error-resolve-all-panel h3 {
  color: #9a3412;
}

.error-resolve-all-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  margin-bottom: 10px;
  border-radius: 999px;
  border: 1px solid #fdba74;
  background: #ffedd5;
  color: #9a3412;
  font-weight: 900;
  font-size: 1.2rem;
}

.error-resolve-all-summary {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #fed7aa;
  border-radius: 12px;
  background: #ffffff;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.error-resolve-all-summary span {
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.error-resolve-all-summary strong {
  color: #9a3412;
  font-size: 1.4rem;
  line-height: 1;
}

@media (max-width: 980px) {
  .error-console-toolbar,
  .error-console-insight-grid,
  .error-hotspot-grid {
    grid-template-columns: 1fr;
  }

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

  .error-console-search,
  .error-console-filter-actions {
    grid-column: 1 / -1;
  }

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

@media (max-width: 640px) {
  .error-console-live {
    justify-self: stretch;
    text-align: left;
  }

  .error-console-filter,
  .error-severity-strip,
  .error-incident-meta-grid {
    grid-template-columns: 1fr;
  }

  .error-severity-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .error-severity-row .band-track {
    grid-column: 1 / -1;
  }

  .error-console-filter-actions,
  .error-console-filter-actions button,
  .error-console-filter-actions .ghost-btn {
    width: 100%;
  }

  .error-console-panel-head,
  .error-incident-panel-head,
  .error-incident-main,
  .error-incident-card-head {
    display: grid;
    grid-template-columns: 1fr;
  }

  .error-incident-panel-head .error-bulk-bar {
    justify-content: stretch;
    align-items: stretch;
    text-align: left;
  }

  .error-incident-panel-head .error-filter-actions {
    justify-content: stretch;
  }

  .error-incident-badges {
    flex-wrap: wrap;
  }

  .error-trend-panel .error-line-chart-svg {
    height: 190px;
  }
}

.error-bulk-bar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.error-group-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin: 18px 0 10px;
}

.severity-chip.severity-critical {
  color: #991b1b;
  background: #fee2e2;
  border-color: #fecaca;
}

.severity-chip.severity-high {
  color: #9a3412;
  background: #ffedd5;
  border-color: #fdba74;
}

.severity-chip.severity-medium {
  color: #854d0e;
  background: #fef3c7;
  border-color: #fcd34d;
}

.severity-chip.severity-low {
  color: #1d4ed8;
  background: #dbeafe;
  border-color: #93c5fd;
}

.severity-chip.severity-priority-users {
  color: #166534;
  background: #dcfce7;
  border-color: #86efac;
}

.severity-chip.severity-background-noise {
  color: #475569;
  background: #e2e8f0;
  border-color: #cbd5e1;
}

.error-log-table {
  min-width: 920px;
  table-layout: fixed;
}

.error-log-select-col {
  width: 90px;
}

.error-log-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.error-log-checkbox input {
  width: auto;
  margin: 0;
}

.error-log-title {
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 4px;
}

.error-log-open-btn {
  width: min(160px, 100%);
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #cbd5e1;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  color: #0f172a;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
  text-align: left;
}

.error-log-open-btn:hover {
  transform: translateY(-1px);
  border-color: #0f766e;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
}

.error-log-open-btn-label {
  font-weight: 800;
  font-size: 0.92rem;
  line-height: 1.1;
}

.error-log-open-btn-meta {
  font-size: 0.74rem;
  color: #64748b;
  line-height: 1.2;
}

.error-log-table th:nth-child(2),
.error-log-table td:nth-child(2) {
  width: 24%;
}

.error-log-table th:nth-child(3),
.error-log-table td:nth-child(3) {
  width: 25%;
}

.error-log-table th:nth-child(4),
.error-log-table td:nth-child(4) {
  width: 16%;
}

.error-log-table th:nth-child(5),
.error-log-table td:nth-child(5) {
  width: 12%;
}

.error-log-table th:last-child,
.error-log-table td:last-child {
  width: 170px;
  position: sticky;
  right: 0;
  z-index: 1;
  background: #fffdf9;
}

.error-log-table thead th:last-child {
  z-index: 2;
  background: #f8fafc;
}

.error-log-modal-panel {
  width: min(980px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  text-align: left;
}

.error-log-modal-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.error-log-close-btn {
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid #d7dde8;
  background: #ffffff;
  color: #475569;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, background-color 120ms ease;
}

.error-log-close-btn:hover {
  border-color: #94a3b8;
  color: #0f172a;
  background: #f8fafc;
}

.error-log-inspector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.error-log-panel {
  padding: 14px;
  border-radius: 14px;
  border: 1px solid #dbe3ec;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.error-log-panel h4 {
  margin: 0 0 10px;
  font-size: 0.98rem;
  color: #0f172a;
}

.error-log-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px 14px;
  margin: 0;
}

.error-log-meta div {
  min-width: 0;
}

.error-log-meta .full-width {
  grid-column: 1 / -1;
}

.error-log-meta dt {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 4px;
}

.error-log-meta dd {
  margin: 0;
  color: #0f172a;
  word-break: break-word;
}

.error-log-panel pre {
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  padding: 10px;
  border-radius: 10px;
  background: #0f172a;
  color: #f8fafc;
  overflow-x: auto;
}

.error-log-wrap {
  word-break: break-word;
}

.student-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.student-row-action-form {
  margin: 0;
}

.student-row-action {
  width: auto;
  min-width: 118px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.student-row-action:hover {
  transform: translateY(-1px);
}

.student-row-action-edit {
  background: linear-gradient(180deg, #ffffff 0%, #eef4ff 100%);
  color: #163b73;
  border-color: #bfd3f8;
  box-shadow: 0 10px 20px rgba(22, 59, 115, 0.08);
}

.student-row-action-edit:hover {
  border-color: #7aa2e8;
  box-shadow: 0 14px 24px rgba(22, 59, 115, 0.12);
}

.student-row-action-danger {
  background: linear-gradient(135deg, #c32035, #a51226);
  color: #fff;
  border-color: #9f1239;
  box-shadow: 0 10px 20px rgba(159, 18, 57, 0.16);
}

.student-row-action-danger:hover {
  filter: brightness(1.04);
  box-shadow: 0 14px 24px rgba(159, 18, 57, 0.22);
}

.exam-row-action {
  width: auto;
  min-width: 126px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid #bfd7cb;
  background: linear-gradient(180deg, #ffffff 0%, #ecfaf5 100%);
  color: #0f5c4d;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 20px rgba(15, 92, 77, 0.08);
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.exam-row-action:hover {
  transform: translateY(-1px);
  border-color: #63b89c;
  box-shadow: 0 14px 24px rgba(15, 92, 77, 0.12);
}

.exam-list-wrap {
  overflow-x: auto;
}

.exam-list-table {
  min-width: 820px;
}

.exam-list-table th:nth-child(2),
.exam-list-table td:nth-child(2),
.exam-list-table th:nth-child(3),
.exam-list-table td:nth-child(3),
.exam-list-table th:nth-child(5),
.exam-list-table td:nth-child(5) {
  white-space: nowrap;
  overflow-wrap: normal;
}

.exam-list-table th:nth-child(2),
.exam-list-table td:nth-child(2) {
  min-width: 112px;
}

.exam-list-table th:nth-child(3),
.exam-list-table td:nth-child(3) {
  min-width: 128px;
}

.exam-list-table th:nth-child(5),
.exam-list-table td:nth-child(5) {
  min-width: 132px;
}

.exam-list-title {
  font-weight: 800;
  color: #0f172a;
  line-height: 1.15;
}

.exam-list-meta {
  margin-top: 4px;
  color: #64748b;
  font-size: 0.82rem;
}

.exam-list-term {
  font-weight: 700;
  color: #163b73;
}

.exam-type-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #dbe3f1;
  background: #f8fbff;
  color: #163b73;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.exam-status-chip.exam-status-open {
  background: #dcfce7;
  color: #166534;
  border-color: #86efac;
}

.exam-status-chip.exam-status-draft {
  background: #ede9fe;
  color: #6d28d9;
  border-color: #c4b5fd;
}

.exam-status-chip.exam-status-closed {
  background: #fff7ed;
  color: #9a3412;
  border-color: #fdba74;
}

.exam-status-chip.exam-status-completed {
  background: #dbeafe;
  color: #1d4ed8;
  border-color: #93c5fd;
}

.exam-scope-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.exam-scope-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid #d9e5d2;
  background: linear-gradient(180deg, #f7fcf3 0%, #edf7e6 100%);
  color: #365314;
  font-size: 0.8rem;
  font-weight: 700;
}

.exam-scope-empty {
  color: #64748b;
  font-size: 0.84rem;
}

.band-exceed {
  background: linear-gradient(135deg, #16a34a, #15803d);
}

.band-meeting {
  background: linear-gradient(135deg, #0284c7, #0369a1);
}

.band-approaching {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.band-below {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}

.band-pct {
  text-align: right;
  font-weight: 600;
  color: #334155;
}

.exam-bands-form {
  gap: 14px;
}

.band-manager-hero {
  align-items: center;
}

.band-manager-current {
  display: grid;
  gap: 4px;
  min-width: 260px;
  padding: 14px 16px;
  border: 1px solid #c7d7ef;
  border-radius: 8px;
  background: #f8fbff;
}

.band-manager-current span,
.band-manager-current em,
.band-summary-card span,
.band-overall-card em {
  color: #64748b;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.band-manager-current strong {
  color: #0f172a;
  font-size: 1.05rem;
}

.band-manager-shell {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.band-manager-nav {
  position: sticky;
  top: 84px;
}

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

.band-manager-section-head h3,
.band-create-form h4 {
  margin: 0;
}

.band-scheme-list {
  display: grid;
  gap: 8px;
}

.band-scheme-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  color: #0f172a;
  text-decoration: none;
  background: #ffffff;
}

.band-scheme-pill.is-active {
  border-color: #0f766e;
  background: #ecfdf5;
  box-shadow: inset 4px 0 0 #0f766e;
}

.band-scheme-pill span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.band-scheme-pill small {
  overflow: hidden;
  color: #64748b;
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.band-scheme-pill em {
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 999px;
  color: #166534;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
  background: #dcfce7;
}

.band-create-form {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #e2e8f0;
}

.band-create-open {
  width: 100%;
  margin-top: 16px;
}

.band-create-modal-panel {
  display: grid;
  gap: 12px;
}

.band-create-modal-panel label,
.band-create-form label,
.band-inline-form label {
  display: grid;
  gap: 5px;
  color: #334155;
  font-size: 0.86rem;
  font-weight: 800;
}

.band-manager-main {
  display: grid;
  gap: 16px;
}

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

.band-summary-card,
.band-overall-card {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: #fffdf9;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

.band-summary-card strong {
  color: #0f172a;
  font-size: 1.35rem;
}

.band-manager-panel {
  overflow: hidden;
}

.band-inline-form {
  display: grid;
  grid-template-columns: minmax(190px, 2fr) minmax(120px, 1fr) minmax(130px, 1fr);
  gap: 12px;
  align-items: end;
}

.band-inline-form .checkbox-line {
  display: flex;
  gap: 8px;
  align-items: center;
  align-self: center;
}

.band-inline-form button {
  grid-column: 1 / -1;
}

.band-danger-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
  padding: 13px;
  border: 1px solid #fecaca;
  border-radius: 8px;
  background: #fff7f7;
}

.band-danger-zone > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.band-danger-zone strong {
  color: #991b1b;
}

.band-danger-zone span {
  color: #64748b;
  font-size: 0.88rem;
  line-height: 1.4;
}

.band-danger-zone form {
  flex: 0 0 auto;
}

.band-grade-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.band-grade-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 10px;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: #ffffff;
}

.band-grade-grid label span {
  white-space: nowrap;
}

.band-grade-grid label.is-elsewhere {
  border-color: #fecaca;
  background: #fff7f7;
}

.band-grade-grid small {
  margin-left: auto;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 800;
}

.band-grade-conflict-btn {
  margin-left: auto;
  padding: 4px 8px;
  border: 1px solid #fecaca;
  border-radius: 999px;
  color: #991b1b;
  font-size: 0.72rem;
  font-weight: 900;
  background: #fee2e2;
  cursor: pointer;
}

.band-conflict-summary {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  background: #fff7ed;
}

.band-conflict-summary span {
  color: #9a3412;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.band-conflict-summary strong {
  color: #7c2d12;
}

.band-delete-summary {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid #fecaca;
  border-radius: 8px;
  background: #fff1f2;
}

.band-delete-summary span {
  color: #991b1b;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.band-delete-summary strong {
  color: #7f1d1d;
}

.band-rule-add {
  display: grid;
  grid-template-columns: minmax(240px, 2fr) minmax(110px, 0.85fr) minmax(90px, 0.7fr) minmax(90px, 0.7fr) minmax(88px, 0.65fr);
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
}

.band-rule-add button {
  grid-column: 1 / -1;
  justify-self: flex-start;
}

.band-rules-table-wrap {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
}

.band-rules-table {
  min-width: 980px;
  table-layout: fixed;
}

.band-rules-table th {
  white-space: nowrap;
}

.band-rules-table td {
  padding-top: 10px;
  padding-bottom: 10px;
}

.band-form-control,
.band-rules-table input {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 8px 10px;
  border: 1px solid #d5deea;
  border-radius: 7px;
  background: #ffffff;
  color: #0f172a;
  box-sizing: border-box;
}

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

.band-form-control--alias {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.band-form-control--number,
.band-form-control--points {
  text-align: center;
}

.band-rules-table td {
  vertical-align: middle;
}

.band-rule-cell {
  background: #ffffff;
}

.band-range-inputs,
.band-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.band-range-inputs input {
  width: 100%;
}

.band-range-inputs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.band-range-inputs span,
.band-range-divider {
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.band-row-actions {
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 8px;
}

.band-row-actions .inline-btn {
  min-width: 72px;
}

.band-rule-cell--actions {
  white-space: nowrap;
}

.band-rules-col--alias {
  width: 10%;
}

.band-rules-col--name {
  width: 24%;
}

.band-rules-col--range {
  width: 22%;
}

.band-rules-col--points {
  width: 12%;
}

.band-rules-col--action {
  width: 18%;
}

.band-overall-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.band-overall-card strong {
  color: #0f766e;
  font-size: 1.3rem;
}

.band-overall-card span {
  color: #0f172a;
  font-weight: 800;
}

.band-archive-panel {
  border-color: #fed7aa;
  background: #fffaf2;
}

.band-archive-grid {
  display: grid;
  gap: 12px;
}

.band-archive-card {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid #fbd38d;
  border-radius: 8px;
  background: #ffffff;
}

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

.band-archive-head > div {
  display: grid;
  gap: 3px;
}

.band-archive-head strong {
  color: #0f172a;
}

.band-archive-head span {
  color: #64748b;
  font-size: 0.86rem;
}

.band-archive-head em {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 999px;
  color: #166534;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 900;
  background: #dcfce7;
}

.band-archive-rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}

.band-archive-rules div {
  display: grid;
  gap: 3px;
  padding: 9px;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  background: #f8fafc;
}

.band-archive-rules strong {
  color: #0f766e;
}

.band-archive-rules span {
  color: #0f172a;
  font-size: 0.86rem;
  font-weight: 800;
}

.band-archive-rules em {
  color: #64748b;
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 800;
}

.exam-bands-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

.exam-band-card {
  border: 1px solid #dbe4f0;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
  padding: 16px;
  height: 100%;
}

.exam-band-card--empty {
  color: #64748b;
  text-align: center;
}

.exam-band-card__range {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e2e8f0;
  color: #0f172a;
}

.exam-band-card__range span {
  font-size: 0.86rem;
  font-weight: 700;
  color: #475569;
}

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

.exam-band-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.exam-band-card label {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
  color: #334155;
  font-size: 0.92rem;
  font-weight: 600;
}

.exam-band-card input,
.exam-band-card textarea {
  width: 100%;
}

.merit-score-cell {
  min-width: 150px;
}

.merit-score-cell span {
  display: inline-block;
  min-width: 42px;
  font-weight: 600;
  color: #1e293b;
}

.merit-score-track {
  margin-top: 4px;
  height: 8px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

.merit-score-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
}

.trend-bars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  align-items: end;
  gap: 10px;
}

.trend-chart-wrap {
  overflow-x: auto;
}

.trend-chart-inner {
  min-width: 560px;
}

.trend-chart-svg {
  display: block;
  width: 100%;
  height: 220px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  border: 1px solid #dbe3ef;
  border-radius: 10px;
}

.trend-grid-line {
  stroke: #dbe3ef;
  stroke-width: 0.4;
}

.trend-axis-label {
  fill: #94a3b8;
  font-size: 2.8px;
  text-anchor: end;
}

.trend-bar-rect {
  fill: #7dd3fc;
  stroke: #0284c7;
  stroke-width: 0.3;
}

.trend-bar-rect.is-current {
  fill: #38bdf8;
  stroke: #0369a1;
  stroke-width: 0.5;
}

.trend-line-path {
  fill: none;
  stroke: #dc2626;
  stroke-width: 0.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trend-line-point {
  fill: #dc2626;
  stroke: #ffffff;
  stroke-width: 0.28;
}

.trend-chart-labels {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.trend-chart-label-col {
  text-align: center;
}

.trend-chart-label-col.is-current .trend-bar-value,
.trend-chart-label-col.is-current .trend-bar-label {
  color: #0f172a;
}

.trend-combo-wrap {
  overflow-x: auto;
}

.trend-combo-chart {
  position: relative;
  min-width: 560px;
  padding-top: 16px;
}

.trend-combo-bars {
  display: grid;
  align-items: end;
  gap: 10px;
  position: relative;
  z-index: 1;
}

.trend-combo-col {
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  background: #f8fbff;
  padding: 10px 8px;
  display: grid;
  gap: 6px;
}

.trend-combo-col.is-current {
  border-color: #0284c7;
  background: #f0f9ff;
  box-shadow: 0 0 0 1px rgba(2, 132, 199, 0.15) inset;
}

.trend-line-svg {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 40px;
  height: 140px;
  width: calc(100% - 16px);
  z-index: 2;
  pointer-events: none;
}

.trend-line-svg polyline {
  fill: none;
  stroke: #dc2626;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trend-line-svg circle {
  fill: #dc2626;
  stroke: #ffffff;
  stroke-width: 0.8;
}

.trend-combo-labels {
  display: grid;
  gap: 10px;
  margin-top: 8px;
  min-width: 560px;
}

.trend-combo-label-col {
  text-align: center;
}

.trend-combo-label-col.is-current .trend-bar-label {
  color: #0f172a;
}

.trend-bar-col {
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  background: #f8fbff;
  padding: 10px 8px;
  display: grid;
  gap: 6px;
}

.trend-bar-col.is-current {
  border-color: #0284c7;
  background: #f0f9ff;
  box-shadow: 0 0 0 1px rgba(2, 132, 199, 0.15) inset;
}

.trend-bar-value {
  text-align: center;
  font-weight: 700;
  color: #0f172a;
}

.trend-bar-track {
  height: 140px;
  border-radius: 8px;
  background: #e2e8f0;
  position: relative;
  overflow: hidden;
}

.trend-bar-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, #0ea5e9, #0369a1);
}

.trend-bar-label {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: #334155;
}

.trend-bar-meta {
  text-align: center;
  font-size: 0.76rem;
  color: #64748b;
}

.trend-bar-name {
  text-align: center;
  font-size: 0.72rem;
  color: #94a3b8;
  line-height: 1.2;
}

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

@keyframes lift {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .container {
    padding: 16px;
  }

  .card,
  .auth-box {
    padding: 15px;
    border-radius: 12px;
  }

  .grid,
  .grid-3 {
    grid-template-columns: 1fr;
  }

  .table-wrap {
    overflow: visible;
  }

  .registry-table:not(.score-table) {
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0;
  }

  .registry-table:not(.score-table) thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .registry-table:not(.score-table),
  .registry-table:not(.score-table) tbody,
  .registry-table:not(.score-table) tr,
  .registry-table:not(.score-table) td {
    display: block;
    width: 100%;
  }

  .registry-table:not(.score-table) tbody {
    display: grid;
    gap: 10px;
  }

  .registry-table:not(.score-table) tr {
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  }

  .registry-table:not(.score-table) td {
    display: grid;
    grid-template-columns: minmax(92px, 38%) minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    min-height: 34px;
    padding: 8px 0;
    border-bottom: 1px solid #edf2f7;
  }

  .admin-students-table th,
  .admin-students-table td {
    white-space: normal;
  }

  .registry-table:not(.score-table) td:last-child {
    border-bottom: 0;
  }

  .registry-table:not(.score-table) td::before {
    content: attr(data-label);
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .registry-table:not(.score-table) td[colspan] {
    display: block;
    text-align: center;
  }

  .registry-table:not(.score-table) td[colspan]::before,
  .registry-table:not(.score-table) td[data-label=""]::before {
    content: none;
  }

  .registry-table:not(.score-table) .inline-form,
  .registry-table:not(.score-table) .inline-delete-form {
    width: 100%;
  }

  .error-log-table {
    table-layout: auto;
  }

  .error-log-table th:last-child,
  .error-log-table td:last-child {
    position: static;
    width: auto;
    background: transparent;
  }

  .error-log-open-btn {
    width: 100%;
  }

  .tab-btn {
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
    text-align: center;
  }

  .tab-list,
  .teacher-coverage-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }

  .portal-hero {
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 10px 0 20px;
  }

  .portal-hero-copy h1 {
    font-size: 1.8rem;
    line-height: 1.12;
  }

  .portal-hero-panel {
    min-height: 0;
    padding: 14px;
  }

  .portal-logo-mark {
    min-height: 104px;
    padding: 12px;
  }

  .portal-school-logo {
    width: 92px;
    height: 92px;
  }

  .portal-stamp {
    padding: 14px;
  }

  .portal-grid,
  .portal-help {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .portal-card,
  .portal-help-card {
    padding: 14px;
  }

  .portal-card-title {
    font-size: 1rem;
  }

  .offline-panel {
    width: 100%;
    padding: 20px 16px;
  }

  .offline-logo-quote {
    padding: 14px;
    margin-top: 14px;
  }

  .offline-school-logo {
    width: 78px;
    height: 78px;
  }

  .offline-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .offline-actions .portal-pill,
  .offline-actions .portal-pill-ghost {
    width: 100%;
    justify-content: center;
  }

  .offline-tip {
    width: 100%;
  }

  .student-dashboard .registry-table th,
  .student-dashboard .registry-table td {
    padding: 8px;
    font-size: 0.85rem;
  }

  .student-dashboard .tab-btn {
    width: auto;
    text-align: center;
  }

  .student-dashboard .analytics-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .teacher-subject-chip {
    width: 100%;
    justify-content: center;
    border-radius: 16px;
    padding: 10px 12px;
  }

  .exam-alert-list li {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .exam-alert-cta {
    justify-self: start;
  }

  .error-bulk-bar,
  .error-group-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .error-filter-actions {
    width: 100%;
  }

  .activity-filter-bar,
  .activity-main-grid,
  .teacher-coverage-kpis,
  .report-scope-grid,
  .report-options-grid,
  .report-toggle-grid {
    grid-template-columns: 1fr;
  }

  .activity-filter-actions,
  .activity-filter-actions button,
  .activity-filter-actions .ghost-btn,
  .report-forms-actions,
  .report-forms-actions .ghost-btn,
  .report-forms-actions .primary-btn,
  .report-forms-download-actions,
  .report-forms-download-actions .ghost-btn {
    width: 100%;
  }

  .report-forms-action-card,
  .selected-student-item,
  .activity-panel-head,
  .error-bulk-bar,
  .error-group-heading,
  .admin-section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .report-forms-search,
  .report-forms-search-input {
    width: 100%;
    min-width: 0;
  }

  .report-scope-option,
  .report-toggle-row {
    align-items: flex-start;
  }

  .admin-page-hero {
    padding: 14px;
    border-radius: 12px;
  }

  .admin-page-meta,
  .admin-page-metrics,
  .admin-page-actions {
    width: 100%;
  }

  .admin-page-actions .ghost-btn,
  .admin-page-actions .primary-btn,
  .flow-actions .ghost-btn,
  .flow-actions button,
  .student-row-actions,
  .student-row-action,
  .student-row-action-form,
  .student-row-action-form button {
    width: 100%;
  }

  .admin-count-pill,
  .admin-state-pill {
    justify-content: flex-start;
  }

  .exam-command-hero .admin-page-actions {
    justify-content: stretch;
  }

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

  .exam-management-grid,
  .exam-admin-bottom-grid {
    grid-template-columns: 1fr;
  }

  .exam-actions-card > .grid {
    grid-template-columns: 1fr;
  }

  .exam-actions-card > .grid form {
    min-height: 0;
  }

  .exam-score-entry-card .grade-entry-grid,
  .exam-setup-card .grade-options,
  .grade-close-form .grade-options,
  .grade-reopen-form .grade-options {
    grid-template-columns: 1fr;
  }

  .error-severity-row,
  .error-list-row-head,
  .error-log-modal-header {
    grid-template-columns: 1fr;
    align-items: flex-start;
    flex-direction: column;
  }

  .activity-bar-chart {
    overflow-x: auto;
    grid-template-columns: repeat(12, minmax(48px, 1fr));
  }

  .activity-live-chip {
    text-align: left;
  }

  .activity-page {
    gap: 12px;
  }

  .activity-hero {
    padding: 14px;
  }

  .activity-filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 4px;
  }

  .activity-filter-bar label {
    font-size: 0.78rem;
    letter-spacing: 0.02em;
  }

  .activity-filter-bar select {
    min-height: 42px;
    padding: 9px 10px;
  }

  .activity-filter-actions {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .activity-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .activity-kpi-card,
  .activity-never-card {
    padding: 10px;
    border-radius: 10px;
  }

  .activity-kpi-card span,
  .activity-never-card span {
    font-size: 0.68rem;
  }

  .activity-kpi-card strong,
  .activity-never-card strong {
    font-size: 1.45rem;
    margin: 5px 0 2px;
  }

  .activity-kpi-card small,
  .activity-never-card small,
  .activity-login-row small {
    font-size: 0.78rem;
    line-height: 1.25;
  }

  .activity-kpi-live,
  .activity-kpi-selected {
    box-shadow: 0 10px 20px rgba(14, 165, 233, 0.1);
  }

  .activity-panel {
    padding: 14px;
  }

  .activity-panel-head {
    gap: 8px;
    margin-bottom: 10px;
  }

  .activity-panel-head > span {
    align-self: flex-start;
    white-space: normal;
  }

  .activity-timezone-note {
    margin: -2px 0 10px;
    font-size: 0.78rem;
  }

  .activity-bar-chart {
    overflow-x: visible;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
    min-height: 150px;
    padding-top: 2px;
  }

  .activity-window-1h .activity-bar-chart {
    overflow: visible;
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 6px;
  }

  .activity-window-24h .activity-bar-chart {
    overflow: visible;
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 6px;
  }

  .activity-window-30d .activity-bar-chart {
    overflow: visible;
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 6px;
  }

  .activity-window-1h .activity-bar-col,
  .activity-window-24h .activity-bar-col,
  .activity-window-30d .activity-bar-col {
    grid-template-columns: minmax(56px, 72px) minmax(0, 1fr) minmax(28px, auto);
    gap: 8px;
    align-items: center;
    padding: 7px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
  }

  .activity-window-1h .activity-bar-label,
  .activity-window-24h .activity-bar-label,
  .activity-window-30d .activity-bar-label {
    order: 1;
    text-align: left;
  }

  .activity-window-1h .activity-bar-track,
  .activity-window-24h .activity-bar-track,
  .activity-window-30d .activity-bar-track {
    order: 2;
    height: 10px;
    border-radius: 999px;
    align-items: stretch;
  }

  .activity-window-1h .activity-bar-track span,
  .activity-window-24h .activity-bar-track span,
  .activity-window-30d .activity-bar-track span {
    width: var(--activity-bar-width, 0%);
    height: 100%;
    min-height: 0;
    border-radius: 999px;
  }

  .activity-window-1h .activity-bar-value,
  .activity-window-24h .activity-bar-value,
  .activity-window-30d .activity-bar-value {
    order: 3;
    text-align: right;
    color: #0f766e;
  }

  .activity-bar-col {
    gap: 4px;
  }

  .activity-bar-track {
    height: 112px;
    border-radius: 999px;
  }

  .activity-bar-track span {
    border-radius: 999px 999px 0 0;
  }

  .activity-bar-value,
  .activity-bar-label {
    font-size: 0.68rem;
  }

  .activity-page-list,
  .activity-login-list {
    gap: 8px;
  }

  .activity-page-row,
  .activity-login-row {
    padding: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
  }

  .activity-login-row {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .activity-role-chip {
    width: fit-content;
  }

  .activity-never-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .error-filter-actions button,
  .error-filter-actions .ghost-btn {
    width: 100%;
  }

  .error-log-modal-header {
    width: 100%;
    flex-direction: column;
  }

  .error-log-open-btn {
    width: 100%;
    align-items: stretch;
  }

  .error-line-chart-svg {
    height: 210px;
  }

  .error-severity-row {
    grid-template-columns: 1fr;
  }

  .error-analytics-range-form {
    justify-content: stretch;
  }

  .error-analytics-range-form label {
    width: 100%;
  }

  .student-row-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .student-row-action,
  .student-row-action-form,
  .student-row-action-form .student-row-action,
  .exam-row-action {
    width: 100%;
    min-width: 0;
  }

  .exam-list-table {
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0 12px;
  }

  .exam-list-table thead {
    display: none;
  }

  .exam-list-table tbody,
  .exam-list-table tr,
  .exam-list-table td {
    display: block;
    width: 100%;
  }

  .exam-list-table tr {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
    overflow: hidden;
  }

  .exam-list-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #e8edf5;
  }

  .exam-list-table td:last-child {
    border-bottom: none;
  }

  .exam-list-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .exam-list-title {
    font-size: 1rem;
  }

  .exam-list-meta {
    font-size: 0.78rem;
  }

  .analytics-toolbar,
  .analytics-toolbar-actions,
  .analytics-batch-form,
  .analytics-pagination,
  .comment-modal__header,
  .comment-modal__footer {
    flex-direction: column;
    align-items: stretch;
  }

  .analytics-batch-select,
  .comment-modal__footer .ghost-btn,
  .comment-modal__footer .primary-btn {
    width: 100%;
  }

  .comment-modal__spacer {
    display: none;
  }

  .progress-modal__panel {
    margin-top: 56px;
    padding: 16px;
  }

  .progress-actions,
  .report-forms-download-actions {
    justify-content: stretch;
  }

  .progress-actions .ghost-btn,
  .report-forms-download-actions .ghost-btn {
    width: 100%;
  }

  .report-forms-search,
  .report-forms-actions,
  .admin-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .report-scope-grid,
  .report-options-grid,
  .report-toggle-grid {
    grid-template-columns: 1fr;
  }

  .report-forms-action-card {
    display: grid;
  }

  .report-forms-search-input,
  .report-forms-actions .ghost-btn,
  .report-forms-actions .primary-btn,
  .admin-actions .ghost-btn,
  .admin-actions .danger-btn {
    width: 100%;
    min-width: 0;
  }

  .selected-student-item {
    align-items: flex-start;
    flex-direction: column;
  }

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

  .portal-actions,
  .student-hero-metrics,
  .student-inline-actions,
  .student-page-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

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

  .portal-student-highlights {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .portal-pill,
  .student-inline-actions .ghost-btn,
  .student-page-actions .ghost-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .portal-mini-pill {
    width: 100%;
    min-height: 48px;
    padding: 10px 8px;
    line-height: 1.2;
    border-radius: 14px;
  }

  .portal-cta {
    align-self: stretch;
    text-align: center;
  }

  .student-snapshot-grid {
    grid-template-columns: 1fr;
  }

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

  .student-hero-metric {
    width: 100%;
  }

  .student-home-panel {
    padding: 15px;
    gap: 12px;
  }

  .student-home-head {
    flex-direction: column;
  }

  .student-home-admission {
    align-self: flex-start;
  }

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

  .student-profile-grid {
    grid-template-columns: 1fr;
  }

  .student-detail-row {
    flex-direction: column;
  }

  .student-timeline-item,
  .student-timeline-meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .student-subject-pill {
    align-items: flex-start;
    flex-direction: column;
  }

  .school-hero {
    grid-template-columns: 1fr;
  }

  .school-hero-chip {
    justify-self: start;
    width: 100%;
  }

  .school-profile-grid {
    grid-template-columns: 1fr;
  }

  .school-profile-grid > .card {
    overflow: visible;
  }

  .school-form-actions {
    flex-direction: column;
  }

  .school-form-actions button {
    width: 100%;
  }

  .band-manager-hero {
    align-items: stretch;
  }

  .band-manager-current {
    min-width: 0;
  }

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

  .band-manager-nav {
    position: static;
  }

  .band-summary-grid {
    grid-template-columns: 1fr;
  }

  .band-inline-form,
  .band-rule-add {
    grid-template-columns: 1fr;
  }

  .band-rules-table {
    min-width: 760px;
  }

  .band-row-actions {
    justify-content: flex-start;
  }

  .band-rules-col--alias,
  .band-rules-col--name,
  .band-rules-col--range,
  .band-rules-col--points,
  .band-rules-col--action {
    width: auto;
  }


  .nav {
    padding: 10px 14px;
    align-items: center;
    flex-direction: row;
    gap: 0;
    position: sticky;
  }

  .nav-head {
    width: 100%;
    justify-content: space-between;
  }

  .brand {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav-toggle {
    display: inline-flex;
    flex: 0 0 auto;
  }

  .menu a,
  .menu .menu-link {
    display: flex;
    justify-content: flex-start;
    margin: 0;
    width: 100%;
    border-radius: 10px;
    padding: 11px 12px;
    box-shadow: none;
  }

  .menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 10px;
    width: min(320px, calc(100vw - 20px));
    max-height: calc(100vh - 76px);
    overflow-y: auto;
    justify-content: flex-start;
    padding: 10px;
    background: rgba(255, 253, 249, 0.98);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.18);
    z-index: 40;
  }

  body.nav-open .menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .menu .inline-form {
    width: 100%;
  }

  .menu-section-label {
    width: 100%;
    padding: 12px 4px 4px;
    align-self: auto;
  }

  .flash-dialog-stack {
    top: 94px;
    right: 10px;
    width: calc(100vw - 20px);
  }

  .grade-preview-row {
    grid-template-columns: 1fr;
  }

  .confirm-modal-actions {
    justify-content: stretch;
  }

  .modal-btn {
    flex: 1;
  }

  .manage-row {
    grid-template-columns: 1fr;
  }

  .assignment-layout {
    grid-template-columns: 1fr;
  }

  .subject-group-actions {
    width: 100%;
  }

  .subject-group-actions .ghost-btn {
    flex: 1;
  }

  .guardian-grid {
    grid-template-columns: 1fr;
  }

  .flow-steps {
    gap: 8px;
  }

  .flow-arrow {
    display: none;
  }

  .flow-actions {
    justify-content: stretch;
    flex-wrap: wrap;
  }

  .flow-actions a,
  .flow-actions button {
    flex: 1 1 180px;
  }

  .class-student-tools,
  .class-export-panel {
    grid-template-columns: 1fr;
  }

  .class-export-options {
    justify-content: flex-start;
  }

  .class-export-btn {
    width: 100%;
  }

  .class-export-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .student-list-export-options {
    grid-template-columns: 1fr;
  }

  .student-export-picker-panel {
    position: static;
    width: 100%;
    max-height: 52vh;
    margin-top: 8px;
    grid-template-columns: 1fr;
    box-shadow: none;
  }

  .student-export-submit,
  .student-export-submit button {
    width: 100%;
  }

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

  .student-exams-table {
    display: none;
  }

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

  .student-class-context {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    margin-top: -6px;
  }

  .student-class-context-value {
    min-width: 0;
    text-align: left;
  }

  .subject-progress-grid {
    grid-template-columns: 1fr;
  }

  .subject-graph-card {
    padding: 12px;
  }

  .subject-graph-head {
    flex-direction: column;
  }

  .subject-graph-frame {
    grid-template-columns: 1fr;
  }

  .subject-graph-y-label {
    writing-mode: horizontal-tb;
    transform: none;
    justify-content: flex-start;
  }

  .student-subject-timeline-table {
    display: none;
  }

  .student-subject-timeline-list {
    display: grid;
    gap: 10px;
  }

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

  .exam-bands-list {
    gap: 14px;
    grid-template-columns: 1fr;
  }

  .exam-band-card {
    padding: 14px;
    border-radius: 16px;
  }

  .exam-band-card__range {
    flex-direction: column;
    align-items: flex-start;
  }

  .exam-band-card__numbers {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .exam-band-card__actions .inline-btn {
    flex: 1 1 140px;
  }

  .band-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .band-pct {
    text-align: left;
  }

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

  .trend-chart-inner {
    min-width: 520px;
  }

  .trend-combo-chart,
  .trend-combo-labels {
    min-width: 520px;
  }

  .entry-grid-tight {
    grid-template-columns: 1fr;
  }

  .exam-entry-hero,
  .exam-entry-section-head,
  .marks-entry-section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .exam-entry-hero-meta,
  .marks-entry-progress {
    justify-content: flex-start;
  }

  .component-max-form,
  .assessment-structure-form {
    display: grid;
    grid-template-columns: 1fr;
  }

  .component-max-field,
  .component-max-form .full-row { width: 100%; }

  .component-max-actions { min-height: 0; }

  .closed-exam-workspace-nav { grid-template-columns: 1fr 1fr; }

  .closed-exam-disclosure > summary {
    align-items: flex-start;
    min-height: 0;
  }

  .closed-exam-disclosure-action { padding-top: 2px; }

  .table-action-cell .inline-btn {
    min-width: 0;
  }

  .action-cell {
    display: grid;
    grid-template-columns: 1fr;
  }

  .action-cell .ghost-btn,
  .action-cell .danger-btn,
  .action-cell .inline-delete-form,
  .table-action-cell .ghost-btn,
  .table-action-cell .danger-btn,
  .table-action-cell .inline-btn,
  .registry-table .ghost-btn,
  .registry-table .danger-btn,
  .registry-table .inline-btn {
    width: 100%;
    min-width: 0;
  }

  .action-cell .inline-delete-form button,
  .table-action-cell .inline-delete-form button {
    width: 100%;
  }

  .teacher-action-cell {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .teacher-action-cell .teacher-action-btn,
  .teacher-action-cell .teacher-action-form,
  .teacher-action-cell .teacher-action-form button {
    width: 100%;
    min-width: 0;
  }

  .teacher-action-cell .teacher-action-form {
    grid-column: auto;
  }

  .teacher-edit-modal-header {
    align-items: flex-start;
  }

  .pwa-update-toast,
  .online-toast {
    left: 12px;
    right: 12px;
    max-width: none;
  }

  .pwa-update-toast {
    bottom: 12px;
  }

  .online-toast {
    bottom: 72px;
  }

  .chip-remove-btn {
    width: 40px;
    height: 40px;
  }

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

  .admin-edit-panel .grid button {
    grid-column: auto;
  }

  .user-role-grid {
    grid-template-columns: 1fr;
  }

  .teacher-hero,
  .teacher-home-nav,
  .teacher-home-alert,
  .teacher-home-grid,
  .teacher-profile-summary,
  .teacher-profile-layout,
  .teacher-landing-hero,
  .teacher-focus-card,
  .teacher-action-grid,
  .teacher-detail-strip,
  .teacher-dashboard-grid,
  .teacher-profile-row {
    grid-template-columns: 1fr;
  }

  .teacher-landing-hero,
  .teacher-home-hero,
  .teacher-home-alert,
  .teacher-profile-panel,
  .teacher-focus-card,
  .teacher-detail-panel {
    padding: 14px;
  }

  .coming-soon-head,
  .coming-soon-settings-head,
  .coming-soon-role-grid {
    flex-direction: column;
  }

  .coming-soon-feature-list,
  .coming-soon-settings-features {
    grid-template-columns: 1fr;
  }

  .teacher-home-card {
    min-height: 116px;
  }

  .teacher-home-nav-item {
    min-height: 68px;
  }

  .teacher-landing-stats {
    min-width: 0;
    grid-template-columns: 1fr;
  }

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

  .teacher-dashboard-metric {
    padding: 11px;
  }

  .teacher-dashboard-metric strong {
    font-size: 1.45rem;
  }

  .teacher-hero-actions {
    justify-content: stretch;
  }

  .teacher-hero-actions .primary-btn,
  .teacher-hero-actions .ghost-btn {
    width: 100%;
  }

  .teacher-profile {
    align-items: flex-start;
  }

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

  .teacher-section-head .ghost-btn {
    width: 100%;
  }

  .teacher-work-item,
  .teacher-assignment-row,
  .teacher-class-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .teacher-class-row .ghost-btn {
    width: 100%;
  }

  .score-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .score-table {
    min-width: 100%;
    width: 100%;
    table-layout: fixed;
  }

  .score-table th,
  .score-table td {
    padding: 8px;
    font-size: 0.86rem;
    word-wrap: break-word;
    white-space: normal;
  }

  .score-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
  }

  .score-table .score-cell {
    font-size: 0.98rem;
  }

  .score-subject-cell.is-component {
    padding-left: 14px;
  }

  .note-full {
    display: none;
  }

  .note-alias {
    display: inline;
  }
}

/* Mobile navigation drawer */
@media (max-width: 768px) {
  body.nav-open {
    overflow: hidden;
    touch-action: none;
  }

  .nav {
    z-index: 80;
    min-height: 64px;
    padding: 9px 13px;
    border-bottom-color: #d9e3ea;
    background: #ffffff;
    box-shadow: 0 8px 26px rgba(15, 42, 63, 0.08);
    backdrop-filter: none;
  }

  .nav-head {
    position: relative;
    z-index: 45;
  }

  .brand {
    color: #173f5f;
    font-size: 1.05rem;
    letter-spacing: 0.015em;
  }

  .nav-toggle {
    width: 44px;
    height: 44px;
    border: 1px solid #173f5f;
    border-radius: 14px;
    color: #ffffff;
    background: linear-gradient(145deg, #173f5f, #0f615e);
    box-shadow: 0 9px 20px rgba(23, 63, 95, 0.2);
  }

  .nav-toggle:focus-visible {
    outline: 3px solid rgba(15, 118, 110, 0.2);
    outline-offset: 2px;
  }

  .nav-toggle-line {
    width: 19px;
    background: #ffffff;
  }

  .nav-backdrop {
    position: fixed;
    /* Above .nav-head (45) so the open drawer's dim layer covers the school
       name bar too, instead of leaving it bright above the drawer. */
    z-index: 50;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    opacity: 0;
    visibility: hidden;
    background: rgba(7, 24, 38, 0.52);
    backdrop-filter: blur(3px);
    transition: opacity 220ms ease, visibility 220ms ease;
    pointer-events: none;
  }

  body.nav-open .nav-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .menu {
    position: fixed;
    /* Above the backdrop (50) and .nav-head (45): the drawer overlays the
       whole right edge, including the top bar / school name. */
    z-index: 60;
    inset: 0 0 0 auto;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
    width: min(72vw, 300px);
    max-height: none;
    padding: 0 12px calc(14px + env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 24px 0 0 24px;
    visibility: hidden;
    background:
      linear-gradient(180deg, #f4f8fa 0%, #ffffff 32%, #f7fafb 100%);
    box-shadow: -24px 0 56px rgba(7, 24, 38, 0.24);
    transform: translateX(104%);
    transition: transform 260ms cubic-bezier(0.22, 0.8, 0.24, 1), visibility 260ms ease;
  }

  body.nav-open .menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    visibility: visible;
    transform: translateX(0);
  }

  .mobile-menu-head {
    position: sticky;
    z-index: 2;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    margin: 0 -12px 8px;
    padding: calc(12px + env(safe-area-inset-top)) 58px 12px 16px;
    overflow: hidden;
    color: #ffffff;
    background:
      radial-gradient(circle at 88% 12%, rgba(94, 211, 194, 0.28), transparent 34%),
      linear-gradient(135deg, #102a43 0%, #173f5f 62%, #0f615e 118%);
    box-shadow: 0 10px 25px rgba(16, 42, 67, 0.15);
  }

  .mobile-menu-head::after {
    content: "";
    position: absolute;
    right: -30px;
    bottom: -48px;
    width: 130px;
    height: 130px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    pointer-events: none;
  }

  .mobile-menu-identity {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 4px;
    min-width: 0;
  }

  .mobile-menu-identity span {
    color: #a9c9d7;
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .mobile-menu-identity strong {
    overflow: hidden;
    color: #ffffff;
    font-size: 0.96rem;
    letter-spacing: -0.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-menu-close {
    position: absolute;
    top: calc(9px + env(safe-area-inset-top));
    right: 14px;
    z-index: 1;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    cursor: pointer;
  }

  .mobile-menu-close span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
  }

  .mobile-menu-close span:first-child {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .mobile-menu-close span:last-child {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  .mobile-menu-close:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.28);
    outline-offset: 2px;
  }

  .menu-section-label {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 100%;
    margin: 8px 0 2px;
    padding: 0 5px;
    color: #6b7f8f;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.13em;
  }

  .menu-section-label::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: #dce6eb;
  }

  .menu a,
  .menu .menu-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 42px;
    margin: 0;
    padding: 0 38px 0 14px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: #263e51;
    font-size: 0.86rem;
    font-weight: 750;
    line-height: 1.2;
    background: transparent;
    box-shadow: none;
    transform: none;
  }

  .menu a::after {
    content: "";
    position: absolute;
    right: 17px;
    width: 7px;
    height: 7px;
    border-top: 2px solid #9aabb7;
    border-right: 2px solid #9aabb7;
    transform: rotate(45deg);
  }

  .menu a:hover,
  .menu a:focus-visible {
    border-color: #d8e4e9;
    color: #173f5f;
    background: #eef4f6;
    transform: none;
  }

  .menu a:focus-visible,
  .menu .menu-link:focus-visible {
    outline: 3px solid rgba(15, 118, 110, 0.13);
    outline-offset: 1px;
  }

  .menu a.menu-active {
    border-color: #c9dfdf;
    color: #0b5e59;
    font-weight: 900;
    background: linear-gradient(90deg, #e3f3f0 0%, #f1f8f7 100%);
  }

  .menu a.menu-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 4px;
    border-radius: 0 999px 999px 0;
    background: #0f766e;
  }

  .menu a.menu-active::after {
    border-color: #0f766e;
  }

  .menu .inline-form {
    width: 100%;
    margin-top: auto;
    padding-top: 17px;
    border-top: 1px solid #dce6eb;
  }

  .menu .menu-link {
    justify-content: center;
    width: 100%;
    padding: 0 16px;
    border-color: #efd4d4;
    color: #9a2f2f;
    font-weight: 900;
    background: #fff4f4;
  }

  .menu .menu-link:hover,
  .menu .menu-link:focus-visible {
    border-color: #d99b9b;
    color: #7d2323;
    background: #ffeaea;
    transform: none;
  }
}

@media (max-width: 420px) {
  .menu {
    width: min(82vw, 290px);
    border-radius: 20px 0 0 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-backdrop,
  .menu {
    transition: none;
  }
}

/* Principal pages: shared visual language across cards, filters, and content panels. */
.principal-page {
  --principal-navy: #102a43;
  --principal-blue: #1f4b72;
  --principal-teal: #0f766e;
  --principal-teal-soft: #e6f5f2;
  --principal-amber: #d99a2b;
  --principal-ink: #172b3f;
  --principal-muted: #66788a;
  --principal-line: #dbe5eb;
  --principal-surface: #ffffff;
  --principal-canvas: #f4f7f8;
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding-bottom: 32px;
  gap: 22px;
  color: var(--principal-ink);
}

.principal-page .principal-summary-grid {
  gap: 14px;
}

.principal-page .principal-summary-card {
  position: relative;
  gap: 10px;
  min-height: 142px;
  padding: 20px 21px;
  overflow: hidden;
  border: 1px solid var(--principal-line);
  border-radius: 18px;
  background: var(--principal-surface);
  box-shadow: 0 12px 30px rgba(16, 42, 67, 0.065);
}

.principal-page .principal-summary-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: #79a8c5;
}

.principal-page .principal-summary-card.is-good::before {
  background: var(--principal-teal);
}

.principal-page .principal-summary-card.is-fair::before,
.principal-page .principal-summary-card.is-watch::before {
  background: var(--principal-amber);
}

.principal-page .principal-summary-head span {
  color: #506579;
  letter-spacing: 0.075em;
}

.principal-page .principal-summary-head i {
  color: #34556e;
  background: #edf4f7;
}

.principal-page .principal-summary-card strong {
  color: var(--principal-navy);
  font-size: clamp(1.9rem, 3vw, 2.25rem);
  letter-spacing: -0.025em;
}

.principal-page .principal-summary-card small {
  color: var(--principal-muted);
  line-height: 1.45;
}

.principal-page .card,
.principal-page .principal-panel,
.principal-page .principal-dashboard-group {
  border-color: var(--principal-line);
}

.principal-page .card,
.principal-page .principal-panel {
  border-radius: 20px;
  box-shadow: 0 12px 32px rgba(16, 42, 67, 0.06);
}

.principal-page .principal-section-head,
.principal-page .principal-dashboard-group-head,
.principal-page .principal-subject-panel-head {
  padding-bottom: 12px;
  border-bottom: 1px solid #e8eef2;
}

.principal-page .principal-section-head h3,
.principal-page .principal-dashboard-group-head h3,
.principal-page .principal-subject-panel-head h3 {
  color: var(--principal-navy);
  letter-spacing: -0.018em;
}

.principal-page .principal-dashboard-group {
  gap: 17px;
  margin-top: 2px;
  padding-top: 5px;
}

.principal-page .principal-dashboard-group-kicker {
  color: var(--principal-teal);
}

.principal-page .principal-filter-bar-redesign,
.principal-page .principal-reports-toolbar,
.principal-page .principal-subject-navigation {
  border: 1px solid var(--principal-line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 12px 30px rgba(16, 42, 67, 0.07);
}

.principal-page .principal-filter-bar-redesign {
  top: 10px;
  padding: 14px;
}

.principal-page .principal-filter-bar-redesign label > span,
.principal-page .principal-reports-filter label > span,
.principal-page .principal-subject-switcher > span {
  color: #536a7d;
  letter-spacing: 0.06em;
}

.principal-page .principal-filter-bar-redesign select,
.principal-page .principal-filter-bar-redesign input,
.principal-page .principal-reports-filter select,
.principal-page .principal-subject-switcher select {
  border-color: #cbd9e2;
  background-color: #f9fbfc;
}

.principal-page .principal-filter-bar-redesign select:focus,
.principal-page .principal-filter-bar-redesign input:focus,
.principal-page .principal-reports-filter select:focus,
.principal-page .principal-subject-switcher select:focus {
  border-color: var(--principal-teal);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

.principal-page .principal-filter-helper {
  margin: -12px 4px 0;
  color: #738596;
  font-size: 0.76rem;
}

.principal-page .button.primary,
.principal-page .ghost-btn:hover,
.principal-page .ghost-btn:focus-visible {
  border-color: var(--principal-blue);
  background: var(--principal-blue);
  color: #ffffff;
}

.principal-page .principal-academics-section-nav {
  border-color: var(--principal-line);
  box-shadow: 0 10px 26px rgba(16, 42, 67, 0.07);
}

.principal-page .principal-academics-section-nav a:hover,
.principal-page .principal-academics-section-nav a:focus-visible {
  color: var(--principal-teal);
  background: var(--principal-teal-soft);
}

.principal-subject-intelligence-page .principal-subject-navigation {
  top: 10px;
}

.principal-page > :not(script) {
  animation: principal-rise-in 440ms both cubic-bezier(0.2, 0.75, 0.25, 1);
}

.principal-page > :nth-child(2) { animation-delay: 45ms; }
.principal-page > :nth-child(3) { animation-delay: 80ms; }
.principal-page > :nth-child(4) { animation-delay: 115ms; }
.principal-page > :nth-child(5) { animation-delay: 150ms; }

@keyframes principal-rise-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 720px) {
  .principal-page {
    gap: 16px;
    padding-bottom: 20px;
  }

  .principal-page .principal-summary-card {
    min-height: 126px;
    padding: 17px 18px;
  }

  .principal-page .card,
  .principal-page .principal-panel {
    border-radius: 17px;
  }

  .principal-page .principal-section-head,
  .principal-page .principal-dashboard-group-head,
  .principal-page .principal-subject-panel-head {
    padding-bottom: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .principal-page > :not(script) {
    animation: none;
    transition: none;
  }
}

@media (max-width: 420px) {
  .container {
    padding: 12px;
  }

  .card,
  .auth-box,
  .admin-page-hero {
    padding: 12px;
  }

  .registry-table:not(.score-table) td {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .registry-table:not(.score-table) td::before {
    font-size: 0.68rem;
  }

  .activity-filter-bar,
  .activity-kpi-grid {
    grid-template-columns: 1fr;
  }

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

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

  .activity-bar-chart {
    gap: 5px;
  }

  .activity-bar-track {
    height: 96px;
  }

  .admin-page-meta span,
  .admin-page-metrics span,
  .admin-count-pill,
  .admin-state-pill,
  .activity-panel-head > span,
  .student-report-status-pill {
    width: 100%;
    justify-content: flex-start;
  }

  .confirm-modal {
    padding: 10px;
  }

  .confirm-modal-panel,
  .progress-modal__panel,
  .student-edit-panel,
  .error-log-modal-panel {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    padding: 14px;
  }

  .confirm-modal-actions,
  .progress-actions {
    flex-direction: column;
  }

  .confirm-modal-actions .ghost-btn,
  .confirm-modal-actions button,
  .progress-actions .ghost-btn,
  .progress-actions button,
  .modal-btn {
    width: 100%;
  }

  .teachers-directory-table {
    table-layout: auto;
  }

  .teacher-action-cell,
  .teacher-action-cell-inactive {
    grid-template-columns: 1fr;
  }

  .teacher-load-summary {
    align-items: flex-start;
  }

  .table-pagination {
    flex-direction: column;
    align-items: stretch;
  }

  .table-pagination-actions {
    width: 100%;
  }

  .table-pagination-actions .ghost-btn,
  .table-pagination-actions .is-disabled {
    width: 100%;
    text-align: center;
  }

  .teacher-subjects-panel {
    width: calc(100vw - 20px);
  }
}

.student-metrics-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-height: min(78vh, 860px);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #ffffff;
}

.grade-workflow-panel {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  background: #ffffff;
}

.grade-close-form .grade-options label,
.grade-reopen-form .grade-options label {
  align-items: flex-start;
  gap: 8px;
}

.grade-close-form .grade-options small,
.grade-reopen-form .grade-options small {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 0.76rem;
  font-weight: 700;
}

.grade-close-form .grade-options label.is-muted,
.grade-reopen-form .grade-options label.is-muted {
  opacity: 0.62;
}

.grade-reopen-form input[type="text"] {
  margin-top: 12px;
}

#student-metrics {
  scroll-margin-top: 88px;
}

.student-metrics-table {
  min-width: 980px;
  width: max-content;
  border-collapse: separate;
  border-spacing: 0;
}

.student-metrics-table th,
.student-metrics-table td {
  overflow-wrap: normal;
  white-space: nowrap;
  vertical-align: middle;
  padding: 7px 8px;
}

.student-metrics-table thead th {
  position: sticky;
  top: 0;
  z-index: 6;
  color: #0f172a;
  background: #f8fafc;
  box-shadow: inset 0 -1px 0 var(--line);
}

.student-metrics-table th:nth-child(1),
.student-metrics-table td:nth-child(1),
.student-metrics-table th:nth-child(2),
.student-metrics-table td:nth-child(2),
.student-metrics-table th:nth-child(3),
.student-metrics-table td:nth-child(3) {
  position: sticky;
  background: #ffffff;
}

.student-metrics-table th:nth-child(1),
.student-metrics-table td:nth-child(1) {
  left: 0;
  z-index: 5;
  min-width: 74px;
  max-width: 86px;
}

.student-metrics-table th:nth-child(2),
.student-metrics-table td:nth-child(2) {
  left: 74px;
  z-index: 5;
  min-width: 108px;
  max-width: 120px;
}

.student-metrics-table th:nth-child(3),
.student-metrics-table td:nth-child(3) {
  left: 182px;
  z-index: 5;
  min-width: 210px;
  max-width: 250px;
  box-shadow: 10px 0 18px rgba(15, 23, 42, 0.08);
}

.student-metrics-table thead th:nth-child(1),
.student-metrics-table thead th:nth-child(2),
.student-metrics-table thead th:nth-child(3) {
  z-index: 9;
  background: #eef6ff;
}

/* Merit table forces a white header (see .merit-analytics-table-card rule
   above); keep its frozen header cells navy so that white text stays legible
   instead of falling back to the light-blue frozen-column background. */
.merit-analytics-table-card .student-metrics-table thead th:nth-child(1),
.merit-analytics-table-card .student-metrics-table thead th:nth-child(2),
.merit-analytics-table-card .student-metrics-table thead th:nth-child(3) {
  background: var(--merit-navy);
}

.student-metrics-table .student-name-cell {
  min-width: 210px;
  white-space: normal;
}

.student-metrics-table .merit-tie-row.merit-tie-group-1 td {
  background: #fff8e6;
}

.student-metrics-table .merit-tie-row.merit-tie-group-1 td:nth-child(1),
.student-metrics-table .merit-tie-row.merit-tie-group-1 td:nth-child(2),
.student-metrics-table .merit-tie-row.merit-tie-group-1 td:nth-child(3) {
  background: #fff3cf;
}

.student-metrics-table .merit-tie-row.merit-tie-group-2 td {
  background: #eaf7ff;
}

.student-metrics-table .merit-tie-row.merit-tie-group-2 td:nth-child(1),
.student-metrics-table .merit-tie-row.merit-tie-group-2 td:nth-child(2),
.student-metrics-table .merit-tie-row.merit-tie-group-2 td:nth-child(3) {
  background: #d8efff;
}

.student-metrics-table .merit-tie-row.merit-tie-group-3 td {
  background: #edfdf4;
}

.student-metrics-table .merit-tie-row.merit-tie-group-3 td:nth-child(1),
.student-metrics-table .merit-tie-row.merit-tie-group-3 td:nth-child(2),
.student-metrics-table .merit-tie-row.merit-tie-group-3 td:nth-child(3) {
  background: #d9fbe8;
}

.student-metrics-table .merit-tie-row.merit-tie-group-4 td {
  background: #f5efff;
}

.student-metrics-table .merit-tie-row.merit-tie-group-4 td:nth-child(1),
.student-metrics-table .merit-tie-row.merit-tie-group-4 td:nth-child(2),
.student-metrics-table .merit-tie-row.merit-tie-group-4 td:nth-child(3) {
  background: #eadcff;
}

.merit-rank-chip,
.merit-tie-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 950;
}

.merit-rank-chip {
  min-width: 36px;
}

.merit-tie-badge {
  margin-left: 4px;
  min-width: 24px;
  padding: 2px 5px;
  color: #92400e;
  font-size: 0.68rem;
  background: #fde68a;
}

.student-metrics-table .student-report-cell,
.student-metrics-table .comment-status,
.student-metrics-table .merit-report-btn {
  white-space: nowrap;
}

@media (max-width: 768px) {
  .exam-command-overview {
    grid-template-columns: 1fr;
  }

  /* Merit / Subject Merit tables stay real, scrollable tables on mobile (they
     opt out of the shared .registry-table card-stack). The desktop version
     froze three identity columns at 74+108+210px, which alone overflow a phone.
     Here we keep the table + frozen columns but shrink them (and the cells) so
     the pinned columns leave room for the score data. */
  .student-metrics-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }

  .registry-table.student-metrics-table:not(.score-table) {
    display: table;
    width: max-content;
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0;
  }

  .registry-table.student-metrics-table:not(.score-table) thead {
    position: static;
    display: table-header-group;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  .registry-table.student-metrics-table:not(.score-table) tbody {
    display: table-row-group;
  }

  .registry-table.student-metrics-table:not(.score-table) tr {
    display: table-row;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .registry-table.student-metrics-table:not(.score-table) th,
  .registry-table.student-metrics-table:not(.score-table) td {
    display: table-cell;
    width: auto;
    min-height: 0;
    padding: 7px 8px;
    font-size: 0.8rem;
    border-bottom: 1px solid var(--line);
  }

  .registry-table.student-metrics-table:not(.score-table) td::before {
    content: none;
  }

  /* Phone-sized frozen identity columns (were 74 / 108 / 210). */
  .student-metrics-table th:nth-child(1),
  .student-metrics-table td:nth-child(1) {
    left: 0;
    min-width: 38px;
    max-width: 38px;
  }

  .student-metrics-table th:nth-child(2),
  .student-metrics-table td:nth-child(2) {
    left: 38px;
    min-width: 74px;
    max-width: 74px;
  }

  .student-metrics-table th:nth-child(3),
  .student-metrics-table td:nth-child(3) {
    left: 112px;
    min-width: 116px;
    max-width: 132px;
  }

  .student-metrics-table .student-name-cell {
    min-width: 116px;
    max-width: 132px;
    white-space: normal;
  }
}