:root {
  color-scheme: light;
  --ink: #17202c;
  --muted: #607083;
  --line: #d9e1ea;
  --surface: #f5f7fa;
  --panel: #ffffff;
  --brand-blue: #144f96;
  --brand-blue-dark: #0d3f7d;
  --brand-orange: #f37612;
  --brand-orange-dark: #d95e00;
  --accent: #144f96;
  --accent-dark: #0d3f7d;
  --blue: #144f96;
  --gold: #f37612;
  --red: #9f3d3d;
  --green-soft: #eaf2fb;
  --blue-soft: #e7eef8;
  --gold-soft: #fff0e2;
  --shadow: 0 18px 45px rgba(20, 31, 44, 0.12);
  --reader-scale: 100%;
  --motion-fast: 180ms;
  --motion-medium: 420ms;
  --motion-slow: 900ms;
  --motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

body[data-theme="dark"] {
  color-scheme: dark;
  --ink: #edf3f7;
  --muted: #a8b5c2;
  --line: #334251;
  --surface: #111820;
  --panel: #1a2430;
  --accent: #55b9a9;
  --accent-dark: #86d4c8;
  --blue: #8ebbea;
  --gold: #e3b46d;
  --red: #e48787;
  --green-soft: #193931;
  --blue-soft: #1a3048;
  --gold-soft: #3c2e19;
  --shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
}

body[data-high-contrast="true"] {
  --ink: #050505;
  --muted: #1d1d1d;
  --line: #050505;
  --surface: #ffffff;
  --panel: #ffffff;
  --accent: #005f46;
  --accent-dark: #003d2d;
  --blue: #003d7a;
  --gold: #694000;
}

body[data-theme="dark"][data-high-contrast="true"] {
  --ink: #ffffff;
  --muted: #f2f2f2;
  --line: #ffffff;
  --surface: #000000;
  --panel: #101010;
  --accent: #8fffe3;
  --accent-dark: #c6fff2;
  --blue: #a8d7ff;
  --gold: #ffd990;
}

body[data-dyslexia-font="true"] {
  font-family: "Comic Sans MS", "Trebuchet MS", Verdana, ui-sans-serif, system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(180deg, #ffffff 0, #f7f9fc 44%, #edf3f9 100%);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

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

button,
a,
.file-picker,
.file-action {
  cursor: pointer;
}

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

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(250px, 1fr) auto minmax(220px, 1fr);
  align-items: center;
  gap: 18px;
  min-height: 88px;
  padding: 18px 6.5vw 14px;
  border-top: 14px solid var(--brand-blue);
  border-bottom: 1px solid rgba(16, 43, 84, 0.16);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 10px 28px rgba(14, 42, 78, 0.13);
  backdrop-filter: blur(10px);
  animation: headerDrop var(--motion-medium) var(--motion-ease) both;
}

.brand {
  display: inline-grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: min(100%, 420px);
}

.brand-mark {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--brand-blue) 18%, var(--line));
  overflow: hidden;
  position: relative;
  box-shadow: 0 8px 18px rgba(15, 61, 118, 0.18);
}

.brand-mark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.brand strong {
  color: var(--brand-blue);
  font-size: 1.36rem;
  line-height: 1.05;
}

.brand strong::first-letter {
  color: var(--brand-orange);
}

.brand strong,
.brand small,
.home-panel span,
.user-card span {
  display: block;
}

.brand small,
.hint,
.lead,
.resource-card p,
.user-card span,
.meta-row,
.session-box,
.log-list span {
  color: var(--muted);
}

.main-nav,
.session-box,
.hero-actions,
.section-heading,
.filter-row,
.card-actions,
.user-actions,
.form-actions,
.rich-tools,
.recent-strip {
  display: flex;
  align-items: center;
}

.main-nav {
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.main-nav a {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border-radius: 0;
  border-bottom: 3px solid transparent;
  font-weight: 900;
  color: #101936;
  transition:
    border-color var(--motion-fast) ease,
    color var(--motion-fast) ease,
    transform var(--motion-fast) ease;
}

.main-nav a.active,
.main-nav a:hover {
  background: transparent;
  border-bottom-color: var(--brand-blue);
  color: var(--brand-blue);
}

.main-nav a:hover {
  transform: translateY(-1px);
}

.session-box {
  justify-content: flex-end;
  gap: 10px;
  font-weight: 700;
}

.install-btn {
  white-space: nowrap;
}

.install-status {
  max-width: 680px;
  margin-top: 12px;
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  color: var(--muted);
  font-weight: 800;
}

.view {
  display: none;
  padding: 28px;
  scroll-margin-top: 104px;
}

.view.active {
  display: block;
  animation: viewEnter var(--motion-medium) var(--motion-ease) both;
}

/* Route isolation: a portal layout must never override the router's inactive view. */
body[data-route="home"] main > .view:not(#home),
#teacher-dashboard.teacher-portal-mode:not(.active),
#teacher-dashboard.hod-module-mode:not(.active) {
  display: none !important;
}

.home-view {
  max-width: none;
  margin: 0 auto;
  min-height: calc(100vh - 88px);
  padding: 0 6.5vw 0;
  background:
    linear-gradient(180deg, #ffffff 0, #f8fbff 46%, #eef4fa 100%);
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}

.home-view.active {
  animation: viewEnter var(--motion-medium) var(--motion-ease) both;
}

.home-view::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 190px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(20, 79, 150, 0.08));
}

.home-hero,
.feature-grid,
.home-identity-band,
.home-section-heading,
.home-live-stats,
.home-dynamic-grid,
.home-search-section,
.home-gallery-section,
.home-download-section,
.home-contact-section,
.site-footer,
.capability-strip {
  max-width: 1320px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.home-hero {
  min-height: min(500px, calc(100vh - 130px));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  gap: 22px 32px;
  align-items: center;
  padding: 46px 0 0;
  background:
    linear-gradient(90deg, rgba(11, 40, 40, 0.78) 0 40%, rgba(20, 79, 150, 0.42) 66%, rgba(255, 255, 255, 0.10) 100%),
    url("images/home-hero-3.jpg");
  background-size: cover;
  background-position: center;
  box-shadow: 0 18px 46px rgba(16, 43, 84, 0.18);
  border-radius: 0 0 8px 8px;
  overflow: visible;
}

.home-copy h1 {
  max-width: 820px;
  color: #ffffff;
  font-size: clamp(2.4rem, 4.2vw, 4.8rem);
  line-height: 1.02;
  letter-spacing: 0;
  text-shadow: 0 4px 14px rgba(0, 0, 0, 0.26);
}

.home-copy {
  width: min(820px, 100%);
  padding: 0 0 56px 6.5vw;
}

.home-copy > *,
.hero-actions,
.school-profile-card,
.home-identity-band article {
  animation: fadeUp var(--motion-slow) var(--motion-ease) both;
}

.home-copy .eyebrow {
  animation-delay: 70ms;
}

.home-copy h1 {
  animation-delay: 140ms;
}

.home-copy .lead {
  animation-delay: 210ms;
}

.hero-actions {
  animation-delay: 280ms;
}

.home-quick-profile {
  max-width: 640px;
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.home-role-panel {
  max-width: 760px;
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.home-role-chip {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.92);
  color: #0f2848;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
}

.home-role-chip.active {
  background: var(--brand-orange);
  color: #ffffff;
}

.home-quick-profile div {
  min-height: 72px;
  border-left: 4px solid var(--brand-orange);
  border-radius: 8px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.13);
}

.home-quick-profile span,
.home-identity-band span,
.school-profile-card dt {
  color: var(--accent-dark);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-quick-profile strong {
  display: block;
  margin-top: 6px;
  overflow-wrap: anywhere;
}

.agency-proprietor-block {
  display: block;
}

.agency-proprietor-block .agency-value {
  display: block;
  color: inherit;
  font-size: inherit;
  font-weight: 900;
  letter-spacing: normal;
  line-height: 1.35;
  text-transform: none;
  overflow-wrap: anywhere;
}

.agency-proprietor-block .agency-sub-label {
  display: block;
  margin-top: 8px;
  color: var(--accent-dark);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.home-side-card .agency-proprietor-block .agency-sub-label {
  color: #1fe0c2;
}

.home-side-card .agency-proprietor-block .agency-value,
.home-side-footer .agency-proprietor-block .agency-value {
  color: rgba(255, 255, 255, 0.9);
}

.lead {
  max-width: 700px;
  margin-top: 18px;
  font-size: 1.15rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.94);
  font-weight: 800;
}

.eyebrow {
  margin-bottom: 8px;
  color: var(--brand-orange);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-actions {
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.home-panel,
.stats-grid,
.mini-stats,
.resource-grid,
.user-list,
.log-list {
  display: grid;
  gap: 12px;
}

.home-panel {
  grid-template-columns: repeat(2, 1fr);
}

.home-showcase {
  align-self: stretch;
  display: none;
  align-content: center;
  gap: 14px;
  padding: 34px 5.5vw 74px 0;
}

.school-profile-card {
  padding: 22px;
  background: rgba(255, 255, 255, 0.93);
  backdrop-filter: blur(4px);
}

.school-profile-card h2 {
  max-width: 620px;
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  line-height: 1.18;
}

.school-profile-card .school-purpose-list {
  display: grid;
  gap: 14px;
  margin-top: 12px;
}

.school-purpose-item {
  border-left: 4px solid var(--brand-orange);
  border-radius: 6px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--blue-soft) 40%, var(--panel));
}

.school-purpose-item h2 {
  margin: 0;
  color: var(--brand-blue);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.school-purpose-item p {
  margin: 7px 0 0;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.55;
}

.school-core-values {
  margin-top: 18px;
  border: 1px solid color-mix(in srgb, var(--brand-orange) 38%, var(--line));
  border-radius: 10px;
  padding: 18px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand-orange) 8%, transparent), transparent 55%),
    color-mix(in srgb, var(--blue-soft) 28%, var(--panel));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffffff 55%, transparent);
}

.school-profile-card .school-core-values-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 15px;
  color: var(--brand-orange);
}

.school-core-values-heading h2 {
  margin: 0;
  color: var(--brand-blue);
  font-family: Georgia, Cambria, "Times New Roman", serif;
  font-size: clamp(1.25rem, 2.4vw, 1.65rem);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}

.school-core-values-heading span {
  font-size: 1.05rem;
}

.school-core-values-list {
  counter-reset: core-value;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.school-core-values-list li {
  counter-increment: core-value;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 50px;
  border: 1px solid color-mix(in srgb, var(--brand-blue) 20%, var(--line));
  border-radius: 8px;
  padding: 8px 11px;
  background: color-mix(in srgb, #ffffff 90%, var(--blue-soft));
  color: var(--ink);
  font-family: Cambria, Georgia, "Times New Roman", serif;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.3;
}

.school-core-values-list li::before {
  content: counter(core-value);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand-blue);
  color: #ffffff;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 0.84rem;
  font-weight: 900;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--brand-blue) 28%, transparent);
}

@media (max-width: 620px) {
  .school-core-values {
    padding: 14px;
  }

  .school-core-values-list {
    grid-template-columns: 1fr;
  }
}

.school-profile-card dl {
  display: grid;
  gap: 12px;
  margin: 20px 0 0;
}

.school-profile-card div {
  display: grid;
  gap: 4px;
}

.school-profile-card dd {
  margin: 0;
  color: var(--ink);
  font-weight: 900;
  overflow-wrap: anywhere;
}

.home-panel div,
.school-profile-card,
.home-quick-profile div,
.home-identity-band article,
.feature-grid article,
.auth-card,
.side-panel,
.content-panel,
.resource-card,
.user-card,
.stat-card,
.chart-card,
.log-list article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 10px 28px rgba(20, 31, 44, 0.07);
  transition:
    transform var(--motion-medium) var(--motion-ease),
    border-color var(--motion-fast) ease,
    box-shadow var(--motion-medium) var(--motion-ease),
    background var(--motion-fast) ease;
}

.hero-ribbon {
  grid-column: 1 / -1;
  width: min(86%, 980px);
  margin: 0 auto -44px;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 14px 32px rgba(16, 43, 84, 0.22);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  z-index: 3;
}

.hero-ribbon article {
  min-height: 92px;
  display: grid;
  grid-template-columns: 70px 1fr;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  border-right: 1px solid var(--line);
}

.hero-ribbon article:last-child {
  border-right: 0;
}

.hero-ribbon strong {
  color: #111834;
  font-size: 1.2rem;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.ribbon-icon {
  width: 58px;
  height: 58px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--brand-blue);
  color: #ffffff;
  box-shadow: inset -7px -7px 0 rgba(255, 255, 255, 0.13);
  font-weight: 1000;
  position: relative;
  overflow: hidden;
  animation: iconFloat 4.8s ease-in-out infinite;
}

.ribbon-icon::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 2px solid rgba(255, 255, 255, 0.42);
  border-radius: 6px;
  animation: iconOrbit 3.8s linear infinite;
}

.home-section-heading {
  margin-top: 76px;
  display: grid;
  grid-template-columns: minmax(80px, 1fr) auto minmax(80px, 1fr);
  gap: 18px;
  align-items: center;
  text-align: center;
}

.home-section-heading div {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(20, 79, 150, 0.42), transparent);
}

.home-section-heading h2 {
  color: var(--brand-blue);
  font-size: clamp(1.55rem, 2.7vw, 2.4rem);
  line-height: 1.1;
}

.home-section-heading p,
.home-section-heading span {
  grid-column: 1 / -1;
}

.home-section-heading p {
  color: #101936;
  font-size: 1.28rem;
  font-weight: 800;
}

.home-section-heading span {
  color: #26344c;
  font-weight: 700;
}

.home-panel div,
.home-identity-band article,
.stat-card,
.chart-card {
  min-height: 108px;
  padding: 18px;
  display: grid;
  align-content: center;
  animation: cardEnter var(--motion-medium) var(--motion-ease) both;
  animation-delay: calc(var(--motion-index, 0) * 55ms);
}

.home-panel strong,
.home-identity-band p,
.stat-card strong,
.chart-card strong {
  font-size: 2.2rem;
}

.home-identity-band {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(150px, 0.75fr));
  gap: 12px;
  margin-top: 26px;
  margin-bottom: 22px;
}

.home-identity-band article {
  min-height: 116px;
  box-shadow: 0 10px 24px rgba(16, 43, 84, 0.10);
}

.home-identity-band p {
  margin-top: 8px;
  color: #111834;
  font-size: clamp(0.98rem, 1.35vw, 1.2rem);
  line-height: 1.25;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.home-live-stats {
  margin-top: 18px;
}

.home-dynamic-grid {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.home-status-grid {
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.95fr);
  align-items: start;
}

.home-status-card {
  grid-row: span 2;
  min-height: auto;
}

.home-status-card .home-live-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  max-width: none;
  justify-self: stretch;
  margin: 0 0 6px;
}

.home-status-card .stat-card {
  min-height: 86px;
  padding: 12px 12px 12px 58px;
  align-content: center;
}

.home-status-card .stat-card strong {
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  line-height: 1;
}

.home-status-card .stat-card span {
  margin-top: 6px;
  font-size: 0.76rem;
  line-height: 1.25;
}

.home-status-card .home-live-stats .stat-card::before {
  width: 34px;
  height: 34px;
  left: 12px;
  border-radius: 10px;
}

.home-status-card .home-role-panel {
  max-width: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.home-status-card .home-role-chip {
  min-height: 34px;
  justify-content: center;
  padding: 0 10px;
  font-size: 0.78rem;
  text-align: center;
}

.home-status-card .hint {
  margin: 2px 0 0;
  font-weight: 800;
}

.home-dynamic-card,
.home-search-section,
.home-gallery-section,
.home-download-section,
.home-contact-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 10px 28px rgba(20, 31, 44, 0.07);
}

.home-dynamic-card {
  min-height: 250px;
  padding: 18px;
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
  position: relative;
  overflow: hidden;
}

.home-dynamic-card::before {
  content: "";
  width: 74px;
  height: 74px;
  position: absolute;
  right: 16px;
  top: 16px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 34% 35%, rgba(255, 255, 255, 0.95) 0 11%, transparent 12%),
    linear-gradient(135deg, rgba(20, 79, 150, 0.18), rgba(243, 118, 18, 0.18));
  opacity: 0.72;
  animation: dashboardIconPulse 5.4s ease-in-out infinite;
}

.home-dynamic-card::after {
  content: "";
  width: 40px;
  height: 8px;
  position: absolute;
  right: 33px;
  top: 49px;
  border-radius: 999px;
  background: var(--brand-orange);
  box-shadow: 0 15px 0 rgba(20, 79, 150, 0.72), 0 -15px 0 rgba(18, 130, 86, 0.72);
  animation: dashboardBars 3.6s ease-in-out infinite;
}

.home-dynamic-card > * {
  position: relative;
  z-index: 1;
}

.home-dynamic-card .thread-card {
  box-shadow: none;
}

.home-dynamic-card .thread-list {
  min-width: 0;
}

.icon-heading {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  justify-content: start;
  align-items: center;
  gap: 12px;
}

.icon-heading h2,
.icon-heading h3,
.icon-heading .eyebrow {
  overflow-wrap: anywhere;
}

.section-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-blue) 88%, #ffffff), var(--brand-orange));
  box-shadow: 0 12px 24px rgba(20, 79, 150, 0.18);
  animation: iconFloat 4.8s ease-in-out infinite;
}

.section-icon::before,
.section-icon::after {
  content: "";
  position: absolute;
}

.icon-status::before {
  left: 11px;
  bottom: 11px;
  width: 6px;
  height: 17px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 10px -8px 0 #ffffff, 20px -2px 0 #ffffff;
}

.icon-status::after {
  left: 10px;
  right: 10px;
  bottom: 8px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
}

.icon-notice::before {
  width: 22px;
  height: 20px;
  border: 3px solid #ffffff;
  border-bottom-width: 5px;
  border-radius: 16px 16px 9px 9px;
  top: 11px;
}

.icon-notice::after {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #ffffff;
  bottom: 10px;
  box-shadow: 0 -24px 0 -2px rgba(255, 255, 255, 0.85);
}

.icon-calendar::before {
  width: 27px;
  height: 25px;
  border: 3px solid #ffffff;
  border-radius: 7px;
  top: 12px;
}

.icon-calendar::after {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #ffffff;
  left: 15px;
  top: 23px;
  box-shadow: 9px 0 0 #ffffff, 18px 0 0 #ffffff, 0 9px 0 #ffffff, 9px 9px 0 #ffffff, 18px 9px 0 #ffffff;
}

.icon-search::before {
  width: 18px;
  height: 18px;
  border: 4px solid #ffffff;
  border-radius: 999px;
  left: 11px;
  top: 10px;
}

.icon-search::after {
  width: 17px;
  height: 4px;
  border-radius: 999px;
  background: #ffffff;
  right: 10px;
  bottom: 12px;
  transform: rotate(45deg);
}

.icon-actions::before {
  width: 25px;
  height: 4px;
  border-radius: 999px;
  background: #ffffff;
  left: 11px;
  top: 22px;
  box-shadow: 0 -10px 0 rgba(255, 255, 255, 0.72), 0 10px 0 rgba(255, 255, 255, 0.72);
}

.icon-actions::after {
  width: 12px;
  height: 12px;
  border-top: 4px solid #ffffff;
  border-right: 4px solid #ffffff;
  right: 11px;
  top: 17px;
  transform: rotate(45deg);
}

.icon-activity::before {
  left: 9px;
  right: 9px;
  top: 24px;
  height: 4px;
  border-radius: 999px;
  background: #ffffff;
}

.icon-activity::after {
  width: 8px;
  height: 22px;
  left: 19px;
  top: 13px;
  border-left: 4px solid #ffffff;
  border-top: 4px solid #ffffff;
  border-right: 4px solid #ffffff;
  transform: skewX(-18deg);
}

.icon-health::before {
  width: 25px;
  height: 29px;
  top: 9px;
  border-radius: 14px 14px 18px 18px;
  background: rgba(255, 255, 255, 0.9);
  clip-path: polygon(50% 0, 90% 12%, 86% 62%, 50% 100%, 14% 62%, 10% 12%);
}

.icon-health::after {
  width: 16px;
  height: 8px;
  border-left: 4px solid var(--brand-blue);
  border-bottom: 4px solid var(--brand-blue);
  transform: rotate(-45deg);
  top: 21px;
}

.icon-gallery::before {
  width: 27px;
  height: 22px;
  border: 3px solid #ffffff;
  border-radius: 7px;
}

.icon-gallery::after {
  width: 24px;
  height: 13px;
  bottom: 12px;
  background: #ffffff;
  clip-path: polygon(0 100%, 32% 42%, 47% 70%, 66% 28%, 100% 100%);
}

.icon-download::before {
  width: 6px;
  height: 22px;
  border-radius: 999px;
  background: #ffffff;
  top: 9px;
}

.icon-download::after {
  width: 18px;
  height: 18px;
  border-right: 5px solid #ffffff;
  border-bottom: 5px solid #ffffff;
  transform: rotate(45deg);
  top: 17px;
}

.icon-contact::before {
  width: 21px;
  height: 27px;
  border-radius: 16px 16px 16px 2px;
  background: #ffffff;
  transform: rotate(-45deg);
}

.icon-contact::after {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--brand-blue);
  top: 17px;
}

.home-live-stats .stat-card,
.home-dynamic-card .thread-card,
.home-download-card,
.home-contact-card {
  position: relative;
  overflow: hidden;
}

.home-live-stats .stat-card {
  padding-left: 76px;
}

.home-live-stats .stat-card::before {
  content: "";
  width: 44px;
  height: 44px;
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 14px;
  background:
    linear-gradient(90deg, transparent 47%, rgba(255, 255, 255, 0.82) 48% 52%, transparent 53%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(20, 79, 150, 0.24));
  border: 2px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  animation: statIconBob 4.1s ease-in-out infinite;
}

.home-live-stats .stat-card::after,
.home-dynamic-card .thread-card::after,
.home-download-card::after,
.home-contact-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 0 42%, rgba(255, 255, 255, 0.36) 50%, transparent 58% 100%);
  transform: translateX(-120%);
  animation: dashboardSheen 7s ease-in-out infinite;
  animation-delay: calc(var(--motion-index, 0) * 160ms);
}

.home-role-chip {
  position: relative;
  overflow: hidden;
}

.home-role-chip::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 999px;
  margin-right: 8px;
  background: var(--brand-orange);
  box-shadow: 0 0 0 0 rgba(243, 118, 18, 0.42);
  animation: rolePing 2.6s ease-out infinite;
}

.home-search-section,
.home-gallery-section,
.home-download-section,
.home-contact-section {
  margin-top: 22px;
  padding: 20px;
}

.home-search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  margin-bottom: 14px;
}

.home-gallery {
  overflow: hidden;
  border-radius: 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000000 6%, #000000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000000 6%, #000000 94%, transparent);
}

.home-gallery-track {
  display: flex;
  width: max-content;
  gap: 14px;
  animation: gallerySlide 48s linear infinite;
}

.home-gallery:hover .home-gallery-track {
  animation-play-state: paused;
}

.home-gallery-card {
  width: min(360px, 78vw);
  min-height: 210px;
  flex: 0 0 min(360px, 78vw);
  border-radius: 8px;
  overflow: hidden;
  padding: 18px;
  display: grid;
  align-content: end;
  position: relative;
  color: #ffffff;
  background:
    linear-gradient(180deg, rgba(9, 25, 45, 0.10), rgba(9, 25, 45, 0.78)),
    var(--gallery-image);
  background-size: cover;
  background-position: var(--gallery-focus, center);
}

.home-gallery-card span {
  width: 48px;
  height: 4px;
  border-radius: 999px;
  background: var(--brand-orange);
  margin-bottom: 12px;
}

.home-gallery-card strong {
  font-size: 1.25rem;
}

.home-gallery-card p {
  margin-top: 7px;
  font-weight: 800;
}

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

.home-download-card {
  min-height: 176px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  display: grid;
  align-content: start;
  gap: 8px;
  background:
    linear-gradient(180deg, rgba(20, 79, 150, 0.06), rgba(255, 255, 255, 0.94));
  box-shadow: 0 8px 18px rgba(20, 31, 44, 0.06);
}

.home-download-card::before,
.home-contact-card::before,
.feature-grid article::before {
  content: "";
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: block;
  background:
    radial-gradient(circle at 50% 25%, rgba(255, 255, 255, 0.9) 0 13%, transparent 14%),
    linear-gradient(135deg, var(--brand-blue), var(--brand-orange));
  box-shadow: 0 12px 22px rgba(20, 79, 150, 0.16);
  animation: iconFloat 4.4s ease-in-out infinite;
}

.home-download-card strong {
  color: #101936;
  font-size: 1.05rem;
  overflow-wrap: anywhere;
}

.home-download-card p,
.home-download-card small {
  color: var(--muted);
  font-weight: 800;
  line-height: 1.42;
}

.home-download-card .card-actions {
  align-self: end;
  margin-top: 4px;
}

.download-format {
  width: fit-content;
  min-height: 26px;
  border-radius: 999px;
  padding: 5px 10px;
  display: inline-flex;
  align-items: center;
  background: rgba(243, 118, 18, 0.12);
  color: #9d4308;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

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

.home-contact-card {
  min-height: 160px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  display: grid;
  align-content: start;
  gap: 8px;
  background: linear-gradient(180deg, rgba(20, 79, 150, 0.06), rgba(255, 255, 255, 0.88));
}

.home-contact-card span {
  color: var(--accent-dark);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-contact-card strong {
  color: #111834;
  font-size: 1.05rem;
  overflow-wrap: anywhere;
}

.home-contact-card p {
  color: var(--muted);
  font-weight: 700;
  line-height: 1.45;
}

.site-footer {
  margin-top: 22px;
  border-radius: 8px 8px 0 0;
  padding: 20px 24px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: 18px;
  align-items: center;
  background: #0f2848;
  color: #ffffff;
  box-shadow: 0 -10px 30px rgba(16, 43, 84, 0.12);
  position: relative;
  overflow: hidden;
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.10), transparent);
  transform: translateX(-100%);
  animation: footerSweep 8s ease-in-out infinite;
}

.site-footer > * {
  position: relative;
  z-index: 1;
}

.footer-marquee {
  grid-column: 1 / -1;
  display: flex;
  width: max-content;
  gap: 24px;
  padding-bottom: 10px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  animation: footerMarquee 56s linear infinite;
}

.footer-marquee span {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.footer-marquee span::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--brand-orange);
  box-shadow: 0 0 0 5px rgba(243, 118, 18, 0.15);
}

.footer-headteacher-card {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  justify-items: center;
  justify-self: center;
  width: min(720px, 100%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 18px;
  padding: 12px 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05)),
    rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.18);
  text-align: center;
}

.footer-headteacher-card img {
  width: 92px;
  height: 92px;
  border: 3px solid rgba(245, 203, 71, 0.95);
  border-radius: 999px;
  display: block;
  object-fit: cover;
  object-position: center 34%;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
}

.site-footer .footer-headteacher-card .footer-headteacher-kicker {
  margin: 0 0 4px;
  color: #f5cb47;
  font-size: 0.72rem;
  font-weight: 1000;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.site-footer .footer-headteacher-card strong {
  color: #ffffff;
  font-size: clamp(1.2rem, 2vw, 1.72rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.site-footer .footer-headteacher-card p {
  margin: 6px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.92rem;
  font-weight: 760;
  line-height: 1.45;
}

.site-footer strong,
.site-footer span {
  display: block;
}

.site-footer strong {
  font-size: 1rem;
}

.site-footer span {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 700;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.footer-links a {
  color: #ffffff;
  font-weight: 900;
  text-decoration: none;
}

@media (max-width: 760px) {
  .footer-headteacher-card {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px 12px;
  }

  .footer-headteacher-card img {
    width: 74px;
    height: 74px;
  }
}

@keyframes gallerySlide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.home-hero[data-hero-mode="urgent"] {
  background:
    linear-gradient(90deg, rgba(93, 19, 19, 0.84) 0 42%, rgba(20, 79, 150, 0.38) 68%, rgba(255, 255, 255, 0.08) 100%),
    url("images/home-hero-2.jpg");
  background-size: cover;
  background-position: center;
}

.home-hero[data-hero-mode="exam"] {
  background:
    linear-gradient(90deg, rgba(12, 58, 58, 0.82) 0 42%, rgba(15, 62, 119, 0.48) 68%, rgba(255, 255, 255, 0.08) 100%),
    url("images/home-hero-1.jpg");
  background-size: cover;
  background-position: center;
}

.home-hero[data-hero-mode="admissions"] {
  background:
    linear-gradient(90deg, rgba(20, 79, 150, 0.82) 0 42%, rgba(243, 118, 18, 0.32) 70%, rgba(255, 255, 255, 0.08) 100%),
    url("images/home-hero-3.jpg");
  background-size: cover;
  background-position: center;
}

.home-panel div:nth-child(1),
.feature-grid article:nth-child(1),
.stats-grid > *:nth-child(1),
.resource-grid > *:nth-child(1),
.user-list > *:nth-child(1),
.log-list > *:nth-child(1) {
  --motion-index: 0;
}

.home-panel div:nth-child(2),
.feature-grid article:nth-child(2),
.stats-grid > *:nth-child(2),
.resource-grid > *:nth-child(2),
.user-list > *:nth-child(2),
.log-list > *:nth-child(2) {
  --motion-index: 1;
}

.home-panel div:nth-child(3),
.feature-grid article:nth-child(3),
.stats-grid > *:nth-child(3),
.resource-grid > *:nth-child(3),
.user-list > *:nth-child(3),
.log-list > *:nth-child(3) {
  --motion-index: 2;
}

.home-panel div:nth-child(4),
.feature-grid article:nth-child(4),
.stats-grid > *:nth-child(4),
.resource-grid > *:nth-child(4),
.user-list > *:nth-child(4),
.log-list > *:nth-child(4) {
  --motion-index: 3;
}

.resource-grid > *:nth-child(5),
.user-list > *:nth-child(5),
.log-list > *:nth-child(5) {
  --motion-index: 4;
}

.resource-grid > *:nth-child(6),
.user-list > *:nth-child(6),
.log-list > *:nth-child(6) {
  --motion-index: 5;
}

.home-panel div:hover,
.school-profile-card:hover,
.home-quick-profile div:hover,
.home-identity-band article:hover,
.feature-grid article:hover,
.resource-card:hover,
.user-card:hover,
.stat-card:hover,
.chart-card:hover,
.log-list article:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 36%, var(--line));
  box-shadow: var(--shadow);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 22px;
}

.feature-grid article {
  padding: 0 0 16px;
  overflow: hidden;
  animation: cardEnter var(--motion-medium) var(--motion-ease) both;
  animation-delay: calc(var(--motion-index, 0) * 70ms + 360ms);
  position: relative;
}

.feature-grid article::before {
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 2;
}

.feature-media {
  min-height: 150px;
  display: block;
  background:
    linear-gradient(180deg, rgba(20, 79, 150, 0.05), rgba(20, 79, 150, 0.10)),
    url("images/home-hero-1.jpg");
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}

.feature-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  transform: translateX(-110%);
  animation: dashboardSheen 6.4s ease-in-out infinite;
}

.feature-grid article:nth-child(2) .feature-media {
  background-image:
    linear-gradient(180deg, rgba(243, 118, 18, 0.04), rgba(20, 79, 150, 0.16)),
    url("images/home-hero-2.jpg");
}

.feature-grid article:nth-child(3) .feature-media {
  background-image:
    linear-gradient(180deg, rgba(20, 79, 150, 0.05), rgba(20, 79, 150, 0.28)),
    url("images/home-hero-3.jpg");
}

.feature-grid h2 {
  margin: 16px 18px 8px;
  color: #101936;
  font-size: 1.35rem;
}

.feature-grid p {
  min-height: 74px;
  margin: 0 18px 14px;
  color: var(--muted);
  line-height: 1.5;
}

.feature-link {
  min-height: 38px;
  width: fit-content;
  margin: 0 18px 0 auto;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  padding: 0 18px;
  background: var(--brand-blue);
  color: #ffffff;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(20, 79, 150, 0.22);
}

.capability-strip {
  margin: 28px auto 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(20, 79, 150, 0.15);
  box-shadow: 0 16px 34px rgba(16, 43, 84, 0.14);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
}

.capability-strip article {
  min-height: 74px;
  padding: 16px 22px;
  display: grid;
  align-content: center;
  border-right: 1px solid var(--line);
}

.capability-strip article:last-child {
  border-right: 0;
}

.capability-strip strong {
  color: #101936;
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.capability-strip span {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
}

.public-application-section {
  width: min(1120px, 100%);
  margin: 28px auto 0;
  padding: 24px;
  border: 1px solid rgba(20, 79, 150, 0.14);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

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

.public-application-form .wide-field,
.public-application-form label:nth-last-of-type(-n + 2),
.public-application-form button,
.public-application-section .thread-list {
  grid-column: 1 / -1;
}

.public-application-form button {
  justify-self: start;
}

.auth-view {
  min-height: 100vh;
  place-items: stretch;
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 4vw, 58px);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.74) 42%, rgba(40, 0, 70, 0.24) 100%),
    radial-gradient(circle at 5% 2%, rgba(214, 153, 14, 0.44), transparent 24%),
    radial-gradient(circle at 92% 88%, rgba(69, 0, 107, 0.68), transparent 34%),
    url("images/home-hero-1.jpg") center / cover no-repeat;
}

.auth-view.active {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, 520px);
  gap: clamp(28px, 5vw, 84px);
  align-items: center;
}

.auth-view::before,
.auth-view::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.auth-view::before {
  inset: -20% 54% auto -18%;
  height: 52vh;
  border-radius: 0 0 100% 0;
  background:
    linear-gradient(135deg, rgba(64, 0, 95, 0.96), rgba(42, 0, 80, 0.88)),
    linear-gradient(110deg, transparent 74%, #d6960e 75%, #f7d585 78%, transparent 79%);
  transform: rotate(-6deg);
}

.auth-view::after {
  right: -12vw;
  bottom: -18vh;
  width: min(62vw, 860px);
  height: min(62vw, 860px);
  border: clamp(18px, 2vw, 34px) solid rgba(214, 150, 14, 0.9);
  border-left-color: rgba(65, 0, 96, 0.96);
  border-bottom-color: rgba(65, 0, 96, 0.96);
  border-radius: 50%;
  transform: rotate(-24deg);
  opacity: 0.94;
}

body[data-route$="-login"] .site-header {
  display: none;
}

body[data-route$="-login"] main {
  min-height: 100vh;
}

.auth-showcase,
.auth-card {
  position: relative;
  z-index: 1;
}

.auth-showcase {
  min-height: min(720px, calc(100vh - 96px));
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 16px;
  text-align: center;
  color: #33005c;
  padding: clamp(16px, 4vw, 58px);
}

.auth-showcase-logo {
  width: clamp(132px, 18vw, 230px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.auth-showcase-logo img,
.auth-card-brand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 16px 24px rgba(48, 0, 82, 0.22));
}

.auth-welcome {
  margin: 0;
  color: #4b006d;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: 0;
}

.auth-showcase h2 {
  margin: 0;
  font-size: clamp(3.2rem, 8vw, 7.2rem);
  line-height: 0.86;
  text-transform: uppercase;
  color: #3a0063;
  text-shadow: 0 10px 28px rgba(255, 255, 255, 0.82);
}

.auth-showcase h2 span {
  display: block;
  color: #c78604;
  font-size: 0.68em;
}

.auth-showcase > strong {
  display: inline-block;
  border-top: 2px solid rgba(75, 0, 109, 0.58);
  padding-top: 12px;
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  text-transform: uppercase;
  color: #2e0056;
}

.auth-showcase-icons {
  display: grid;
  grid-template-columns: repeat(4, minmax(74px, 1fr));
  gap: 14px;
  width: min(100%, 560px);
  margin-top: 10px;
}

.auth-showcase-icons span {
  display: grid;
  justify-items: center;
  gap: 7px;
  color: #2e0056;
  font-weight: 1000;
  text-transform: uppercase;
  font-size: 0.82rem;
}

.auth-showcase-icons i {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #3f006f;
  color: #f6cf62;
  font-style: normal;
  box-shadow: 0 12px 22px rgba(54, 0, 90, 0.28);
}

.auth-showcase-icons i::before {
  font-weight: 1000;
  font-size: 1.2rem;
}

.auth-icon-learn::before { content: "L"; }
.auth-icon-manage::before { content: "M"; }
.auth-icon-connect::before { content: "C"; }
.auth-icon-excel::before { content: "E"; }

.auth-showcase blockquote {
  margin: 18px 0 0;
  color: #421062;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.3rem, 2.2vw, 2rem);
  font-style: italic;
  line-height: 1.18;
}

.auth-showcase small {
  display: block;
  color: #2c004f;
  font-weight: 900;
}

.auth-card {
  width: min(520px, 100%);
  max-height: calc(100vh - clamp(48px, 8vw, 116px));
  padding: clamp(24px, 3vw, 42px);
  display: grid;
  gap: 18px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 30px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.82)),
    rgba(255, 255, 255, 0.88);
  box-shadow: 0 26px 70px rgba(41, 0, 76, 0.24);
  backdrop-filter: blur(18px);
  overflow: auto;
  animation: scaleFade var(--motion-medium) var(--motion-ease) both;
}

.auth-card h1 {
  color: #3f006f;
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
}

.auth-card-brand {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 8px;
}

.auth-card-brand img {
  width: 96px;
  height: 96px;
}

.auth-card-brand .eyebrow {
  color: #c98505;
}

.auth-card-brand span {
  color: #281242;
  font-weight: 800;
  max-width: 360px;
}

.auth-card-brand::after {
  content: "";
  width: 94px;
  height: 3px;
  margin-top: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #4b0077, #d6960e);
}

.auth-card .stacked-form {
  gap: 14px;
}

.auth-card .stacked-form + .stacked-form {
  border-top: 1px solid rgba(74, 0, 111, 0.16);
  padding-top: 18px;
}

.auth-card label {
  color: #3a1c55;
}

.auth-card .text-field {
  min-height: 58px;
  border: 1px solid rgba(75, 0, 109, 0.34);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.76);
  color: #2b0d40;
  padding: 12px 14px;
  font-size: 1rem;
}

.auth-card .text-field:focus {
  border-color: #5b007f;
  box-shadow: 0 0 0 4px rgba(91, 0, 127, 0.15);
}

.auth-card .primary-btn {
  min-height: 58px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #4b0077, #65008f 58%, #3a005e);
  color: #ffffff;
  box-shadow: 0 16px 30px rgba(74, 0, 110, 0.24);
}

.auth-card .secondary-btn {
  min-height: 54px;
  border: 2px solid #4b0077;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
  color: #371057;
}

.auth-card .hint {
  margin: 0;
  padding: 9px 11px;
  border-radius: 8px;
  background: rgba(75, 0, 119, 0.06);
  color: #3d2454;
  font-size: 0.82rem;
}

.auth-help-links {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid rgba(74, 0, 111, 0.14);
}

.auth-help-links a {
  color: #3f006f;
  font-weight: 900;
}

.parent-signup-toggle {
  width: 100%;
  min-height: 50px;
  border: 1px dashed rgba(75, 0, 109, 0.44);
  border-radius: 12px;
  background: rgba(75, 0, 119, 0.06);
  color: #3f006f;
  font-weight: 950;
}

.parent-signup-form[hidden] {
  display: none !important;
}

.parent-signup-form.parent-signup-open {
  display: grid;
}

@media (max-width: 980px) {
  .auth-view.active {
    grid-template-columns: 1fr;
    align-content: start;
    padding: 22px;
  }

  .auth-showcase {
    min-height: auto;
    padding: 18px 0 0;
  }

  .auth-showcase-logo {
    width: 110px;
  }

  .auth-showcase h2 {
    font-size: clamp(2.45rem, 12vw, 4.4rem);
  }

  .auth-showcase-icons,
  .auth-showcase blockquote,
  .auth-showcase small {
    display: none;
  }

  .auth-card {
    justify-self: center;
    max-height: none;
    border-radius: 22px;
  }
}

@media (max-width: 560px) {
  .auth-view.active {
    padding: 14px;
  }

  .auth-card {
    padding: 20px;
  }

  .auth-card-brand img {
    width: 78px;
    height: 78px;
  }
}

label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-weight: 800;
  font-size: 0.9rem;
}

.text-field {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  padding: 9px 11px;
  transition:
    border-color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease,
    transform var(--motion-fast) ease;
}

.text-field:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  outline: none;
}

textarea.text-field {
  resize: vertical;
}

.primary-btn,
.secondary-btn,
.ghost-btn,
.icon-btn,
.recent-chip,
.rich-tools button {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  transition:
    transform var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease,
    background var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    color var(--motion-fast) ease;
}

.primary-btn {
  border-color: var(--brand-blue);
  background: var(--brand-blue);
  color: #fff;
}

.primary-btn:hover {
  background: var(--brand-blue-dark);
}

.primary-btn:hover,
.secondary-btn:hover,
.ghost-btn:hover,
.icon-btn:hover,
.recent-chip:hover,
.rich-tools button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(20, 31, 44, 0.12);
}

.primary-btn:active,
.secondary-btn:active,
.ghost-btn:active,
.icon-btn:active,
.recent-chip:active,
.rich-tools button:active {
  transform: translateY(0) scale(0.98);
}

.secondary-btn {
  background: var(--blue-soft);
  border-color: color-mix(in srgb, var(--brand-blue) 35%, var(--line));
  color: var(--brand-blue);
}

.priority-important {
  border-color: color-mix(in srgb, var(--gold) 50%, var(--line));
  background: color-mix(in srgb, var(--gold-soft) 70%, var(--panel));
}

.priority-urgent {
  border-color: color-mix(in srgb, var(--red) 48%, var(--line));
  background: color-mix(in srgb, var(--red) 9%, var(--panel));
  color: var(--red);
}

.home-copy .secondary-btn {
  border-color: var(--brand-orange);
  background: var(--brand-orange);
  color: #ffffff;
}

.home-copy .secondary-btn:hover {
  background: var(--brand-orange-dark);
}

.home-copy .ghost-btn {
  border-color: rgba(255, 255, 255, 0.52);
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

.ghost-btn {
  min-height: 36px;
  color: var(--muted);
}

.icon-btn {
  width: 42px;
  padding: 0;
}

.menu-btn {
  display: none;
}

.danger-outline {
  width: 100%;
  border-color: color-mix(in srgb, var(--red) 35%, var(--line));
  background: color-mix(in srgb, var(--red) 10%, var(--panel));
  color: var(--red);
}

.hidden {
  display: none !important;
}

.dashboard-view {
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 20px;
}

.dashboard-view.active {
  display: grid;
}

#staff-dashboard.headteacher-executive-mode {
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 0;
  background: #f5f8fc;
}

#staff-dashboard.headteacher-executive-mode .side-panel {
  background: linear-gradient(180deg, #082f4f 0%, #06253f 100%);
  border-radius: 0;
  color: #fff;
  min-height: calc(100vh - 72px);
}

#staff-dashboard.headteacher-executive-mode .side-panel .eyebrow,
#staff-dashboard.headteacher-executive-mode .side-panel .hint,
#staff-dashboard.headteacher-executive-mode .side-panel p {
  color: rgba(255, 255, 255, 0.78);
}

#staff-dashboard.headteacher-executive-mode .content-panel {
  padding: 22px 24px;
}

#staff-dashboard.headteacher-executive-mode > .content-panel > .section-heading {
  align-items: center;
  border-bottom: 1px solid var(--line);
  margin: -22px -24px 18px;
  padding: 18px 24px;
  background: var(--panel);
}

#staff-dashboard.deputy-operational-mode {
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 0;
  background: #f5f8fc;
}

#staff-dashboard.deputy-operational-mode .side-panel {
  background: linear-gradient(180deg, #052c51 0%, #041f39 100%);
  border-radius: 0;
  color: #fff;
  min-height: calc(100vh - 72px);
}

#staff-dashboard.deputy-operational-mode .side-panel .eyebrow,
#staff-dashboard.deputy-operational-mode .side-panel .hint,
#staff-dashboard.deputy-operational-mode .side-panel p {
  color: rgba(255, 255, 255, 0.78);
}

#staff-dashboard.deputy-operational-mode .content-panel {
  padding: 22px 24px;
}

#staff-dashboard.deputy-operational-mode > .content-panel > .section-heading {
  align-items: center;
  border-bottom: 1px solid var(--line);
  margin: -22px -24px 18px;
  padding: 18px 24px;
  background: var(--panel);
}

#staff-dashboard.matron-operational-mode {
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 0;
  background: #f7f9fd;
}

#staff-dashboard.matron-operational-mode .side-panel {
  background: linear-gradient(180deg, #071a3e 0%, #08264f 48%, #061833 100%);
  border-radius: 0;
  color: #ffffff;
  min-height: calc(100vh - 72px);
  position: sticky;
  top: 0;
}

#staff-dashboard.matron-operational-mode .side-panel .eyebrow,
#staff-dashboard.matron-operational-mode .side-panel .hint,
#staff-dashboard.matron-operational-mode .side-panel p {
  color: rgba(255, 255, 255, 0.78);
}

#staff-dashboard.matron-operational-mode .side-panel h1 {
  color: #ff4f8b;
}

#staff-dashboard.matron-operational-mode .content-panel {
  padding: 22px 26px;
}

#staff-dashboard.matron-operational-mode > .content-panel > .section-heading {
  align-items: center;
  border-bottom: 1px solid var(--line);
  margin: -22px -26px 18px;
  padding: 18px 26px;
  background: #ffffff;
}

#staff-dashboard.matron-operational-mode > .content-panel > .section-heading h1 {
  color: #101a3d;
}

.matron-profile-card {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.07);
  display: grid;
  gap: 6px;
}

.matron-profile-card strong {
  color: #ffffff;
}

.matron-sidebar-menu {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.matron-sidebar-menu div {
  display: grid;
  gap: 4px;
}

.matron-sidebar-menu p {
  margin: 0 0 4px;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 900;
}

.matron-sidebar-menu button {
  color: #eef6ff;
  text-decoration: none;
  min-height: 34px;
  display: flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: 8px;
  font-weight: 800;
  border: 0;
  background: transparent;
  text-align: left;
  width: 100%;
  cursor: pointer;
}

.matron-sidebar-menu button:hover,
.matron-sidebar-menu button:focus {
  background: linear-gradient(90deg, #ff3f7f, #ff6b99);
  color: #ffffff;
}

.matron-module {
  display: grid;
  gap: 18px;
}

.matron-topbar {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px;
  box-shadow: var(--shadow);
}

.matron-topbar h2 {
  margin: 0 0 4px;
  color: #101a3d;
}

.matron-topbar span {
  color: var(--muted);
  font-weight: 700;
}

.matron-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}

.matron-kpi {
  min-height: 118px;
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: center;
  gap: 12px;
  border: 1px solid #f0b6cc;
  border-radius: 8px;
  padding: 16px;
  background: linear-gradient(135deg, #fff6fa, #ffffff);
}

.matron-kpi.success {
  border-color: #8bd5ab;
  background: linear-gradient(135deg, #f1fff7, #ffffff);
}

.matron-kpi.warning {
  border-color: #f4bf72;
  background: linear-gradient(135deg, #fff8ec, #ffffff);
}

.matron-kpi.danger {
  border-color: #f19aad;
  background: linear-gradient(135deg, #fff1f4, #ffffff);
}

.matron-kpi.info {
  border-color: #95bdf4;
  background: linear-gradient(135deg, #f3f8ff, #ffffff);
}

.matron-kpi strong {
  display: block;
  color: #ff3f7f;
  font-size: 1.5rem;
}

.matron-kpi span {
  display: block;
  color: #101a3d;
  font-weight: 900;
}

.matron-kpi p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.matron-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  color: #ffffff;
  background: linear-gradient(135deg, #ff3f7f, #c51459);
  font-weight: 1000;
  box-shadow: 0 10px 22px rgba(197, 20, 89, 0.18);
  flex: 0 0 auto;
}

.matron-icon-present,
.matron-icon-dorm {
  background: linear-gradient(135deg, #18b46b, #0a804a);
}

.matron-icon-leave,
.matron-icon-maintenance,
.matron-icon-inventory {
  background: linear-gradient(135deg, #ff941f, #d35f00);
}

.matron-icon-sick,
.matron-icon-bed {
  background: linear-gradient(135deg, #2077d8, #1050a8);
}

.matron-icon-incident {
  background: linear-gradient(135deg, #8a43d1, #5c22a6);
}

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

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

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

.matron-panel-heading > div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.matron-panel-heading .matron-icon {
  width: 32px;
  height: 32px;
  font-size: 0.82rem;
}

.matron-bar {
  width: 78px;
  height: 8px;
  background: #e8eef7;
  border-radius: 999px;
  display: inline-flex;
  overflow: hidden;
  margin-right: 8px;
  vertical-align: middle;
}

.matron-bar i {
  display: block;
  background: #18b46b;
  border-radius: inherit;
}

.matron-donut-card {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 12px;
  align-items: center;
}

.matron-donut {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  align-content: center;
  background: conic-gradient(#1db96f 0 74%, #ff8a1f 74% 86%, #2077d8 86% 100%);
  color: #101a3d;
  position: relative;
}

.matron-donut::after {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  background: #ffffff;
}

.matron-donut strong,
.matron-donut span {
  position: relative;
  z-index: 1;
}

.matron-donut strong {
  font-size: 1.8rem;
}

.matron-donut-card p,
.matron-alert-list p,
.matron-feed-row {
  margin: 0;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.matron-alert-list {
  display: grid;
  gap: 0;
}

.matron-alert-list p {
  display: grid;
  gap: 3px;
}

.matron-alert-list span,
.matron-feed-row span {
  color: var(--muted);
  font-size: 0.82rem;
}

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

.matron-quick-actions button {
  border: 1px solid #d8e2ef;
  border-radius: 8px;
  min-height: 78px;
  background: #ffffff;
  color: #101a3d;
  font-weight: 900;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 6px;
}

.matron-quick-actions .matron-icon {
  width: 30px;
  height: 30px;
  font-size: 0.75rem;
}

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

.matron-inventory-mini span {
  min-height: 88px;
  border: 1px solid #d8e2ef;
  border-radius: 8px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  background: #f8fbff;
}

.matron-inventory-mini strong {
  font-size: 1.4rem;
  color: #ff3f7f;
}

.matron-inventory-mini em {
  font-style: normal;
  color: var(--muted);
  font-size: 0.78rem;
}

.matron-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}

.matron-form-card {
  background: #ffffff;
  border-radius: 10px;
}

.matron-report-panel {
  display: grid;
  gap: 12px;
}

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

.matron-report-grid article {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  display: grid;
  gap: 10px;
  background: #ffffff;
}

.side-panel {
  align-self: start;
  padding: 20px;
  animation: panelSlideIn var(--motion-medium) var(--motion-ease) both;
}

.side-panel h1 {
  margin-bottom: 18px;
  font-size: 1.55rem;
}

.stacked-form,
.backup-actions,
.compact-form {
  display: grid;
  gap: 14px;
}

.compact-form {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.attendance-register-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--blue-soft) 42%, var(--panel));
}

.attendance-register-toolbar .eyebrow {
  margin-bottom: 4px;
}

.attendance-register-toolbar .backup-actions {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0;
}

.attendance-register-roster {
  min-width: 0;
}

.attendance-register-table-wrap {
  max-height: min(54vh, 580px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.attendance-register-table {
  min-width: 760px;
  margin: 0;
}

.attendance-register-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--panel);
}

.attendance-register-table .text-field {
  min-width: 130px;
}

.attendance-register-table td:last-child .text-field {
  min-width: 190px;
}

@media (max-width: 720px) {
  .attendance-register-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .attendance-register-toolbar .backup-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}

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

.admin-tool-search {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.admin-category-actions {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 10px 0 12px;
}

.admin-category-actions .ghost-btn {
  min-height: 36px;
  padding: 0.55rem 0.7rem;
}

.admin-tool-results {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.admin-tool-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 88%, var(--surface));
  margin-bottom: 12px;
  overflow: hidden;
}

.admin-tool-group[hidden] {
  display: none;
}

.admin-tool-group summary {
  cursor: pointer;
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  color: var(--ink);
  font-weight: 1000;
  list-style-position: inside;
}

.admin-tool-group summary small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.45;
}

.admin-main-tool-group summary {
  border-left: 4px solid var(--accent);
}

.admin-tool-group[open] summary {
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--green-soft) 50%, var(--panel));
}

.module-option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  padding: 12px 14px 4px;
}

.module-option-grid .ghost-btn {
  justify-content: center;
  min-height: 38px;
  white-space: normal;
}

.tool-group-body {
  padding: 0 14px 14px;
}

.tool-group-body > .stacked-form:first-child {
  margin-top: 14px;
}

.admin-tool-result-card {
  display: grid;
  gap: 6px;
}

.admin-tool-result-card .ghost-btn {
  justify-self: start;
  min-height: 34px;
  padding: 0.5rem 0.8rem;
}

.compact-empty {
  padding: 10px 12px;
}

.admin-search-highlight {
  animation: adminSearchFlash 1.6s ease;
  outline: 3px solid color-mix(in srgb, var(--brand-orange) 70%, transparent);
  outline-offset: 3px;
}

.check-row {
  align-items: center;
  display: flex;
  gap: 0.55rem;
  font-weight: 800;
}

.check-row input {
  accent-color: var(--accent);
  block-size: 1rem;
  inline-size: 1rem;
}

.report-card-profile {
  border: 1px solid rgba(20, 79, 150, 0.16);
  border-radius: 8px;
  margin: 0.75rem 0;
  padding: 0.75rem;
}

.document-verify-code {
  margin-top: 0.8rem;
}

.file-picker {
  min-height: 78px;
  border: 1px dashed #9aabba;
  border-radius: 8px;
  padding: 14px;
  background: color-mix(in srgb, var(--panel) 80%, var(--surface));
  align-content: center;
  transition:
    border-color var(--motion-fast) ease,
    background var(--motion-fast) ease,
    transform var(--motion-fast) ease;
}

.file-picker:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--green-soft) 72%, var(--panel));
  transform: translateY(-2px);
}

.file-picker input,
.file-action input {
  display: none;
}

.file-picker span {
  color: var(--ink);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.rich-tools {
  gap: 8px;
}

.rich-tools button {
  width: 44px;
  min-height: 36px;
  padding: 0;
}

.quiz-box {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  display: grid;
  gap: 10px;
}

.quiz-box legend {
  color: var(--muted);
  font-weight: 900;
}

.quiz-builder {
  display: grid;
  gap: 12px;
}

.quiz-question-block,
.note-preview,
.storage-card,
.quiz-question-view {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 86%, var(--surface));
  padding: 12px;
}

.quiz-question-block {
  display: grid;
  gap: 10px;
}

.note-preview {
  line-height: 1.6;
  color: var(--ink);
}

.content-panel {
  min-width: 0;
  padding: 18px;
  animation: contentRise var(--motion-medium) var(--motion-ease) both;
}

.section-heading {
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.section-heading h2 {
  font-size: 1.7rem;
}

.filter-row {
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.single-pupil-toolbar {
  align-items: flex-end;
  background: color-mix(in srgb, var(--blue-soft) 42%, var(--panel));
  border: 1px solid var(--line);
  border-radius: 8px;
  justify-content: flex-start;
  margin: 0 0 14px;
  padding: 10px;
}

.single-pupil-toolbar label {
  color: var(--muted);
  display: grid;
  flex: 1 1 260px;
  font-size: 0.82rem;
  font-weight: 900;
  gap: 6px;
  max-width: 460px;
}

.search-field {
  max-width: 320px;
}

.stats-grid {
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  margin-bottom: 16px;
}

.mini-stats {
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 16px;
}

.mini-stats div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--panel);
}

.mini-stats strong,
.mini-stats span {
  display: block;
}

.mini-stats span,
.stat-card span,
.chart-card span {
  color: var(--muted);
  font-weight: 800;
}

.resource-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.resource-card {
  min-height: 310px;
  padding: 14px;
  display: grid;
  gap: 12px;
  align-content: space-between;
  animation: cardEnter var(--motion-medium) var(--motion-ease) both;
  animation-delay: calc(var(--motion-index, 0) * 55ms);
}

.cover-block {
  min-height: 112px;
  border-radius: 8px;
  background-color: var(--green-soft);
  background-size: cover;
  background-position: center;
  padding: 10px;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  position: relative;
}

.cover-block::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transform: translateX(-120%);
  animation: coverSweep 6.5s ease-in-out infinite;
}

.resource-card h3 {
  font-size: 1.08rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.resource-card p {
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.type-pill,
.count-pill,
.role-pill,
.status-pill {
  width: fit-content;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 10px;
  background: var(--green-soft);
  color: var(--accent-dark);
  font-size: 0.78rem;
  font-weight: 900;
}

.type-pdf {
  background: var(--blue-soft);
  color: var(--blue);
}

.type-pdf-notes,
.type-word,
.type-worksheet {
  background: var(--blue-soft);
  color: var(--blue);
}

.type-powerpoint,
.type-marking-key {
  background: #ffe7d6;
  color: #a84605;
}

.type-image {
  background: var(--gold-soft);
  color: var(--gold);
}

.type-image-chart,
.type-past-paper {
  background: var(--gold-soft);
  color: var(--gold);
}

.type-video {
  background: #f0e9f8;
  color: #5d4382;
}

.type-audio {
  background: var(--green-soft);
  color: var(--accent-dark);
}

.file-preview-message {
  display: grid;
  gap: 12px;
  place-items: start;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 700;
}

.lesson-plan-summary {
  border-left: 3px solid var(--accent);
  padding-left: 10px;
  display: grid;
  gap: 4px;
  font-size: 0.9rem;
}

.lesson-plan-summary p {
  margin: 0;
}

.card-actions,
.form-actions {
  gap: 8px;
  flex-wrap: wrap;
}

.card-actions button {
  flex: 1 1 110px;
}

.recent-strip {
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.recent-chip {
  min-height: 34px;
  font-size: 0.85rem;
}

.learner-panel {
  margin-bottom: 16px;
}

.insight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.teacher-module-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

.teacher-module-menu button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
  background: var(--panel);
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 800;
  cursor: pointer;
}

.teacher-module-menu button:hover,
.teacher-module-menu button.active {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 72%, var(--panel));
}

.teacher-nav-badge {
  margin-left: auto;
  border-radius: 999px;
  background: var(--gold);
  color: #111827;
  padding: 2px 8px;
  font-size: 0.72rem;
  font-weight: 950;
}

#teacher-dashboard.teacher-portal-mode {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: calc(100vh - 88px);
  padding: 0;
  background: #f7faff;
}

#teacher-dashboard.teacher-portal-mode > .side-panel {
  position: sticky;
  top: 0;
  min-height: 100vh;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 196, 0, 0.2), transparent 18%),
    linear-gradient(180deg, #062150 0%, #073a78 52%, #031a3f 100%);
  color: #ffffff;
  box-shadow: none;
  padding: 20px 14px;
}

#teacher-dashboard.teacher-portal-mode > .content-panel {
  border: 0;
  border-radius: 0;
  background: #f7faff;
  box-shadow: none;
  padding: 26px;
}

#teacher-dashboard.teacher-portal-mode > .content-panel > .section-heading {
  align-items: center;
  border: 1px solid rgba(17, 45, 93, 0.08);
  border-radius: 8px;
  background: #ffffff;
  padding: 14px;
}

#teacher-dashboard.teacher-portal-mode > .content-panel > .section-heading h2 {
  font-size: 1.15rem;
}

#teacher-dashboard.teacher-portal-mode > .content-panel > .section-heading .filter-row {
  flex: 1 1 420px;
}

#teacher-dashboard.teacher-portal-mode .teacher-portal-brand {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  padding: 0 4px 18px;
  margin-bottom: 16px;
}

.teacher-portal-brand img {
  width: 64px;
  height: 74px;
  object-fit: contain;
}

.teacher-portal-brand strong,
.teacher-portal-brand span {
  display: block;
}

.teacher-portal-brand strong {
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.15;
}

.teacher-portal-brand span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.78rem;
  margin-top: 4px;
}

.teacher-sidebar-title {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  margin: 12px 8px 8px;
  text-transform: uppercase;
}

#teacher-dashboard.teacher-portal-mode .teacher-module-menu {
  display: grid;
  gap: 6px;
  margin: 0;
}

#teacher-dashboard.teacher-portal-mode .teacher-module-menu button {
  justify-content: flex-start;
  width: 100%;
  min-height: 44px;
  border-color: transparent;
  border-radius: 8px;
  background: transparent;
  color: #ffffff;
  padding: 9px 12px;
}

#teacher-dashboard.teacher-portal-mode .teacher-module-menu button:hover,
#teacher-dashboard.teacher-portal-mode .teacher-module-menu button.active {
  background: linear-gradient(135deg, #1f75ff, #0757bf);
  border-color: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.teacher-portal-app-card {
  margin: 20px 4px 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  padding: 14px;
  display: grid;
  gap: 8px;
}

.teacher-portal-app-card strong,
.teacher-portal-app-card span {
  display: block;
}

.teacher-portal-app-card span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.9rem;
}

#teacher-dashboard.teacher-portal-mode #teacherCommandPanel {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

#teacher-dashboard.teacher-portal-mode #teacherCommandPanel > .section-heading {
  display: none;
}

.teacher-portal-home {
  display: grid;
  gap: 18px;
}

.teacher-portal-welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.teacher-portal-welcome p,
.teacher-portal-welcome h3,
.teacher-portal-welcome span {
  margin: 0;
}

.teacher-portal-welcome h3 {
  font-size: clamp(1.45rem, 2.3vw, 2.1rem);
}

.teacher-portal-welcome span {
  color: var(--muted);
  display: block;
  margin-top: 4px;
}

.teacher-portal-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 14px;
}

.teacher-portal-kpi,
.teacher-portal-card {
  border: 1px solid rgba(17, 45, 93, 0.1);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(13, 42, 86, 0.07);
}

.teacher-portal-kpi {
  min-height: 112px;
  display: grid;
  grid-template-columns: 62px 1fr;
  align-items: center;
  gap: 12px;
  color: #0c1f46;
  cursor: pointer;
  padding: 14px;
  text-align: left;
}

.teacher-portal-kpi small,
.teacher-portal-kpi strong,
.teacher-portal-kpi em {
  display: block;
  font-style: normal;
}

.teacher-portal-kpi strong {
  font-size: 1.9rem;
  margin: 5px 0;
}

.teacher-portal-kpi em {
  color: #0757bf;
  font-size: 0.86rem;
  font-weight: 850;
}

.teacher-kpi-icon {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: #eef3ff;
  color: #0757bf;
}

.teacher-kpi-icon::before {
  font-weight: 950;
  font-size: 1.55rem;
}

.teacher-kpi-classes::before { content: "CLS"; font-size: 0.9rem; }
.teacher-kpi-students::before { content: "STD"; font-size: 0.9rem; }
.teacher-kpi-lessons::before { content: "OK"; font-size: 0.95rem; }
.teacher-kpi-pending::before { content: "PEN"; font-size: 0.85rem; }
.teacher-kpi-score::before { content: "%"; }

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

.teacher-portal-card {
  padding: 16px;
  min-width: 0;
}

.teacher-portal-schedule,
.teacher-class-overview {
  grid-column: span 5;
}

.teacher-portal-announcements,
.teacher-pending-tasks,
.teacher-recent-materials {
  grid-column: span 4;
}

.teacher-profile-summary {
  grid-column: span 3;
}

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

.teacher-card-heading h3 {
  margin: 0;
  font-size: 1.05rem;
}

.teacher-card-heading button,
.teacher-class-overview td button,
.teacher-material-row button {
  border: 0;
  background: transparent;
  color: #0757bf;
  cursor: pointer;
  font-weight: 900;
}

.teacher-schedule-row,
.teacher-announcement-row,
.teacher-material-row,
.teacher-task-row {
  display: grid;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(17, 45, 93, 0.08);
  padding: 10px 0;
}

.teacher-schedule-row {
  grid-template-columns: 70px 1fr auto;
}

.teacher-schedule-row time,
.teacher-schedule-row b,
.teacher-material-row p,
.teacher-announcement-row p {
  color: var(--muted);
}

.teacher-schedule-row b {
  border-radius: 999px;
  background: #eef4ff;
  padding: 5px 10px;
  font-size: 0.76rem;
}

.teacher-announcement-row,
.teacher-material-row,
.teacher-task-row {
  grid-template-columns: 42px 1fr auto;
}

.teacher-notice-icon,
.teacher-task-row span,
.teacher-file-badge {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #edf4ff;
  color: #0757bf;
  font-size: 0.72rem;
  font-weight: 950;
}

.teacher-notice-icon::before {
  content: "!";
}

.teacher-task-row {
  width: 100%;
  border-width: 0 0 1px;
  background: transparent;
  color: #0c1f46;
  cursor: pointer;
  text-align: left;
}

.teacher-task-row b {
  color: #0c4fb3;
}

.teacher-alert-text {
  border-radius: 8px;
  background: #fff4e0;
  color: #925300;
  font-weight: 850;
  padding: 10px;
}

.teacher-profile-banner {
  margin: -16px -16px 14px;
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 12px;
  align-items: center;
  background: linear-gradient(135deg, #092761, #0757bf);
  color: #ffffff;
  padding: 18px;
  border-radius: 8px 8px 0 0;
}

.teacher-profile-banner h3,
.teacher-profile-banner p {
  margin: 0;
}

.teacher-profile-banner span {
  display: inline-block;
  margin-top: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  padding: 4px 8px;
  font-weight: 850;
}

.teacher-profile-avatar {
  width: 70px;
  height: 70px;
  border: 3px solid rgba(255, 255, 255, 0.75);
}

.teacher-class-overview table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.teacher-class-overview th,
.teacher-class-overview td {
  border-bottom: 1px solid rgba(17, 45, 93, 0.08);
  padding: 9px 8px;
  text-align: left;
}

.teacher-class-overview th {
  background: #f4f7fc;
  color: #1d355f;
  font-size: 0.78rem;
  text-transform: uppercase;
}

@media (max-width: 1180px) {
  #teacher-dashboard.teacher-portal-mode {
    grid-template-columns: 230px minmax(0, 1fr);
  }

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

  .teacher-portal-schedule,
  .teacher-portal-announcements,
  .teacher-profile-summary,
  .teacher-class-overview,
  .teacher-pending-tasks,
  .teacher-recent-materials {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  #teacher-dashboard.teacher-portal-mode {
    grid-template-columns: 1fr;
  }

  #teacher-dashboard.teacher-portal-mode > .side-panel {
    position: relative;
    min-height: auto;
  }

  .teacher-portal-welcome,
  .study-reader-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .teacher-portal-kpis,
  .study-reader-layout {
    grid-template-columns: 1fr;
  }

  .study-file-preview iframe {
    min-height: 420px;
  }
}

.teacher-allocation-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
  overflow: hidden;
  padding: 16px;
}

.headteacher-profile-card,
.headteacher-year-card,
.headteacher-help-card {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.06);
  display: grid;
  gap: 8px;
}

.headteacher-profile-card {
  grid-template-columns: 54px 1fr;
  align-items: center;
}

.headteacher-avatar {
  inline-size: 54px;
  block-size: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #0fc29a, #1f75d6);
  color: #fff;
  font-weight: 1000;
}

.headteacher-side-nav {
  display: grid;
  gap: 8px;
  margin: 14px 0;
}

.headteacher-side-nav button {
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: transparent;
  color: #fff;
  font-weight: 900;
  text-align: start;
  cursor: pointer;
}

.headteacher-side-nav button:hover,
.headteacher-side-nav button:focus-visible {
  background: rgba(20, 191, 158, 0.24);
  outline: none;
}

.headteacher-side-nav button.active {
  background: linear-gradient(135deg, rgba(20, 191, 158, 0.95), rgba(31, 117, 214, 0.72));
  box-shadow: inset 4px 0 0 #ffc94d, 0 12px 24px rgba(0, 0, 0, 0.16);
}

.headteacher-side-nav span {
  inline-size: 30px;
  block-size: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.12);
  font-size: 0.72rem;
}

.headteacher-side-nav b {
  min-inline-size: 24px;
  min-block-size: 24px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: #f24d55;
  color: #fff;
  font-size: 0.78rem;
}

.headteacher-year-card,
.headteacher-help-card {
  text-align: center;
}

.headteacher-year-card strong {
  color: #fff;
  font-size: 1.6rem;
}

.headteacher-exec-shell {
  display: grid;
  gap: 16px;
}

.headteacher-section-hidden {
  display: none !important;
}

.headteacher-topbar,
.headteacher-top-controls,
.headteacher-panel-heading,
.headteacher-attendance-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

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

.headteacher-search {
  flex: 1 1 520px;
  max-inline-size: 560px;
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.headteacher-top-controls {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.headteacher-kpi-grid,
.headteacher-dashboard-grid,
.headteacher-mini-grid,
.headteacher-report-grid,
.headteacher-quick-grid,
.headteacher-finance-grid,
.headteacher-academic-grid {
  display: grid;
  gap: 14px;
}

.headteacher-kpi-grid {
  grid-template-columns: repeat(5, minmax(150px, 1fr));
}

.headteacher-kpi-card,
.headteacher-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 10px 28px rgba(15, 41, 66, 0.08);
}

.headteacher-kpi-card {
  min-height: 112px;
  padding: 16px;
  display: grid;
  grid-template-columns: 46px 1fr 74px;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  position: relative;
}

.headteacher-kpi-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transform: translateX(-120%);
  animation: coverSweep 7s var(--motion-ease) infinite;
}

.headteacher-icon,
.headteacher-row-icon {
  inline-size: 42px;
  block-size: 42px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--blue-soft);
  color: var(--blue);
  font-weight: 1000;
}

.headteacher-kpi-card.ht-good .headteacher-icon,
.headteacher-alert.ht-good .headteacher-dot {
  background: #dff8ee;
  color: #008767;
}

.headteacher-kpi-card.ht-warn .headteacher-icon,
.headteacher-alert.ht-warn .headteacher-dot {
  background: #fff0d2;
  color: #b35b00;
}

.headteacher-kpi-card.ht-danger .headteacher-icon,
.headteacher-alert.ht-danger .headteacher-dot {
  background: #ffe1e1;
  color: #bd3038;
}

.headteacher-kpi-card p,
.headteacher-kpi-card strong,
.headteacher-kpi-card span,
.headteacher-panel p,
.headteacher-panel strong,
.headteacher-panel span {
  overflow-wrap: anywhere;
}

.headteacher-kpi-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
}

.headteacher-kpi-card strong {
  display: block;
  margin: 3px 0;
  font-size: 1.45rem;
}

.headteacher-kpi-card span:not(.headteacher-icon):not(.headteacher-sparkline) {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.headteacher-sparkline {
  block-size: 42px;
  display: flex;
  align-items: end;
  gap: 5px;
}

.headteacher-sparkline i {
  inline-size: 8px;
  border-radius: 999px;
  background: var(--blue);
  animation: pulseIcon 1.8s ease-in-out infinite;
}

.headteacher-sparkline i:nth-child(1) { block-size: 32%; }
.headteacher-sparkline i:nth-child(2) { block-size: 58%; animation-delay: 160ms; }
.headteacher-sparkline i:nth-child(3) { block-size: 44%; animation-delay: 320ms; }
.headteacher-sparkline i:nth-child(4) { block-size: 76%; animation-delay: 480ms; }
.headteacher-sparkline.ht-good i { background: #00a67e; }
.headteacher-sparkline.ht-warn i { background: #f59e0b; }
.headteacher-sparkline.ht-danger i { background: #ef4444; }

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

.headteacher-panel {
  padding: 16px;
  display: grid;
  gap: 14px;
}

.ht-span-3 { grid-column: span 3; }
.ht-span-4 { grid-column: span 4; }
.ht-span-5 { grid-column: span 5; }

.headteacher-panel-heading {
  justify-content: space-between;
  align-items: start;
  gap: 10px;
}

.headteacher-panel-heading h3 {
  margin: 2px 0 0;
  font-size: 1rem;
}

.headteacher-approval-list,
.headteacher-alert-list,
.headteacher-mini-list {
  display: grid;
  gap: 10px;
}

.headteacher-approval-row,
.headteacher-alert,
.headteacher-event {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 10px;
  padding: 9px 0;
}

.headteacher-approval-row {
  grid-template-columns: 42px 1fr auto;
  align-items: center;
}

.headteacher-approval-row.needs-action .headteacher-row-icon {
  background: var(--gold-soft);
  color: var(--gold);
}

.headteacher-approval-row p,
.headteacher-alert p,
.headteacher-event p,
.headteacher-mini-list p,
.headteacher-mini-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.headteacher-admission-cards {
  display: grid;
  gap: 10px;
}

.headteacher-academic-grid {
  grid-template-columns: 170px minmax(0, 1fr);
}

.headteacher-side-metrics {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface);
  display: grid;
  gap: 10px;
}

.headteacher-side-metrics p,
.headteacher-pipeline p {
  margin: 0;
  display: grid;
  gap: 3px;
}

.headteacher-side-metrics span,
.headteacher-pipeline span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.headteacher-bar-chart {
  display: grid;
  gap: 10px;
  align-content: center;
}

.headteacher-bar-chart p {
  display: grid;
  grid-template-columns: 90px 1fr 42px 32px;
  gap: 8px;
  align-items: center;
  margin: 0;
}

.headteacher-bar-chart i {
  display: block;
  block-size: 10px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, #13b394 var(--value), #e8eef5 var(--value));
}

.headteacher-bar-chart em {
  color: var(--muted);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
}

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

.headteacher-mini-grid article,
.headteacher-report-grid article {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: color-mix(in srgb, var(--surface) 74%, var(--panel));
}

.headteacher-mini-grid article > strong {
  display: block;
  margin-bottom: 6px;
}

.headteacher-donut-card {
  flex: 1 1 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 12px;
  align-items: center;
  background: color-mix(in srgb, var(--surface) 70%, var(--panel));
}

.headteacher-donut {
  inline-size: 76px;
  block-size: 76px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(#10a37f var(--percent), #e8eef5 var(--percent));
}

.headteacher-donut b {
  inline-size: 52px;
  block-size: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--panel);
  font-size: 0.85rem;
}

.headteacher-donut-card.ht-warn .headteacher-donut {
  background: conic-gradient(#f59e0b var(--percent), #e8eef5 var(--percent));
}

.headteacher-donut-card.ht-danger .headteacher-donut {
  background: conic-gradient(#ef4444 var(--percent), #e8eef5 var(--percent));
}

.headteacher-finance-grid {
  grid-template-columns: 170px 1fr;
}

.headteacher-week-chart {
  min-height: 180px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  align-items: end;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, transparent 0 24%, color-mix(in srgb, var(--line) 45%, transparent) 24% 25%, transparent 25% 49%, color-mix(in srgb, var(--line) 45%, transparent) 49% 50%, transparent 50% 74%, color-mix(in srgb, var(--line) 45%, transparent) 74% 75%, transparent 75%);
}

.headteacher-week-chart span {
  min-height: var(--value);
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #2378e7, #13b394);
  display: grid;
  align-items: end;
  justify-items: center;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 900;
  padding: 5px;
}

.headteacher-alert {
  grid-template-columns: 34px 1fr;
  align-items: start;
}

.headteacher-dot {
  inline-size: 28px;
  block-size: 28px;
  border-radius: 50%;
  margin-top: 2px;
  background: var(--blue-soft);
}

.headteacher-event {
  grid-template-columns: 52px 1fr;
  align-items: center;
}

.headteacher-event > span {
  border: 1px solid var(--line);
  border-radius: 8px;
  min-block-size: 46px;
  display: grid;
  place-items: center;
  color: var(--accent);
  font-weight: 1000;
}

.headteacher-event.overdue > span {
  border-color: color-mix(in srgb, var(--red) 48%, var(--line));
  color: var(--red);
}

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

.headteacher-quick-grid button {
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 70px;
  padding: 10px;
  display: grid;
  gap: 6px;
  place-items: center;
  background: color-mix(in srgb, var(--blue-soft) 58%, var(--panel));
  color: var(--ink);
  font-weight: 900;
  cursor: pointer;
}

.headteacher-quick-grid button:hover,
.headteacher-report-grid article:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.headteacher-quick-grid span {
  inline-size: 32px;
  block-size: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--panel);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 1000;
}

.headteacher-report-grid article {
  display: grid;
  gap: 6px;
  min-height: 82px;
  transition: transform var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease);
}

.headteacher-report-grid span,
.headteacher-mini-list span,
.headteacher-mini-grid span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.headteacher-pipeline {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.headteacher-pipeline p {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px;
  background: var(--surface);
  text-align: center;
}

.headteacher-pipeline strong {
  font-size: 1.15rem;
}

.hod-shell {
  display: grid;
  gap: 16px;
}

.hod-topbar,
.hod-top-controls,
.hod-panel-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

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

.hod-search {
  flex: 1 1 520px;
  max-inline-size: 560px;
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.hod-top-controls {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.hod-kpi-grid,
.hod-grid,
.hod-mini-grid,
.hod-report-grid,
.hod-quick-grid {
  display: grid;
  gap: 14px;
}

.hod-kpi-grid {
  grid-template-columns: repeat(6, minmax(138px, 1fr));
}

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

.hod-kpi-card,
.hod-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 10px 28px rgba(15, 41, 66, 0.08);
  min-width: 0;
}

.hod-kpi-card {
  min-height: 106px;
  padding: 14px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 50px;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}

.hod-icon {
  inline-size: 40px;
  block-size: 40px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 1000;
  flex: 0 0 auto;
}

.hod-kpi-card p,
.hod-kpi-card strong,
.hod-kpi-card span,
.hod-panel p,
.hod-panel strong,
.hod-panel span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.hod-kpi-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.hod-kpi-card strong {
  display: block;
  margin: 3px 0;
  font-size: 1.3rem;
}

.hod-kpi-card span:not(.hod-icon):not(.hod-spark) {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
}

.hod-spark {
  block-size: 34px;
  display: flex;
  align-items: end;
  gap: 4px;
}

.hod-spark i {
  inline-size: 7px;
  border-radius: 999px;
  background: var(--accent);
  animation: pulseIcon 1.9s ease-in-out infinite;
}

.hod-spark i:nth-child(1) { block-size: 35%; }
.hod-spark i:nth-child(2) { block-size: 52%; animation-delay: 120ms; }
.hod-spark i:nth-child(3) { block-size: 42%; animation-delay: 240ms; }
.hod-spark i:nth-child(4) { block-size: 74%; animation-delay: 360ms; }

.hod-good .hod-icon,
.hod-alert.hod-good span:first-child {
  background: #dff8ee;
  color: #008767;
}

.hod-warn .hod-icon,
.hod-alert.hod-warn span:first-child {
  background: #fff0d2;
  color: #b35b00;
}

.hod-danger .hod-icon,
.hod-alert.hod-danger span:first-child {
  background: #ffe1e1;
  color: #bd3038;
}

.hod-panel {
  padding: 16px;
  display: grid;
  gap: 14px;
}

.hod-span-3 { grid-column: span 3; }
.hod-span-4 { grid-column: span 4; }
.hod-span-5 { grid-column: span 5; }

.hod-panel-heading {
  justify-content: space-between;
  align-items: start;
}

.hod-panel-heading h3 {
  margin: 2px 0 0;
  font-size: 1rem;
}

.hod-bar-chart {
  display: grid;
  gap: 10px;
}

.hod-bar-chart p {
  display: grid;
  grid-template-columns: minmax(92px, 1fr) minmax(110px, 2fr) 42px 86px;
  gap: 8px;
  align-items: center;
  margin: 0;
}

.hod-bar-chart i {
  display: block;
  block-size: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #13b394 var(--value), #e8eef5 var(--value));
}

.hod-bar-chart b,
.hod-bar-chart em {
  font-size: 0.75rem;
  font-style: normal;
}

.hod-status-list {
  display: grid;
  gap: 8px;
}

.hod-status-list p {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.hod-status-list span:first-child,
.hod-alert span:first-child {
  inline-size: 30px;
  block-size: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 0.68rem;
  font-weight: 1000;
}

.hod-status-list.compact p {
  padding: 5px 0;
}

.hod-donut-card,
.hod-monitor-layout {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.hod-donut {
  inline-size: 78px;
  block-size: 78px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(#10a37f var(--percent), #e8eef5 var(--percent));
  color: var(--ink);
  text-align: center;
}

.hod-donut.danger {
  background: conic-gradient(#ef4444 var(--percent), #f59e0b var(--percent), #e8eef5);
}

.hod-donut b {
  inline-size: 54px;
  block-size: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--panel);
  font-size: 0.86rem;
}

.hod-donut small {
  display: none;
}

.hod-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.hod-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 0.84rem;
}

.hod-table th,
.hod-table td {
  border-bottom: 1px solid var(--line);
  padding: 10px;
  text-align: left;
}

.hod-table th {
  background: color-mix(in srgb, var(--blue-soft) 68%, var(--panel));
  color: var(--ink);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.hod-table tr:nth-child(even) td {
  background: color-mix(in srgb, var(--surface) 62%, var(--panel));
}

.hod-table td span {
  border-radius: 999px;
  display: inline-grid;
  min-height: 24px;
  align-items: center;
  padding: 0 9px;
  background: #edf2f7;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
}

.hod-table td span.good {
  background: #dff8ee;
  color: #008767;
}

.hod-table td span.danger {
  background: #ffe1e1;
  color: #bd3038;
}

.hod-table td span.warn-low {
  background: #fff0d2;
  color: #b35b00;
}

.hod-mini-list,
.hod-event-list {
  display: grid;
  gap: 10px;
}

.hod-mini-list article,
.hod-event-list article,
.hod-alert {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 4px;
  padding: 8px 0;
}

.hod-mini-list article p,
.hod-event-list article p,
.hod-alert p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.hod-status-uncovered span,
.hod-status-missed span {
  color: #bd3038;
}

.hod-event-list article {
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
}

.hod-event-list article > span {
  border: 1px solid var(--line);
  border-radius: 8px;
  min-block-size: 44px;
  display: grid;
  place-items: center;
  color: var(--accent);
  font-weight: 1000;
}

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

.hod-mini-grid article,
.hod-report-grid article {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: color-mix(in srgb, var(--surface) 74%, var(--panel));
}

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

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

.hod-quick-grid button {
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 72px;
  padding: 10px;
  display: grid;
  gap: 6px;
  place-items: center;
  background: color-mix(in srgb, var(--blue-soft) 58%, var(--panel));
  color: var(--ink);
  font-weight: 900;
  cursor: pointer;
  min-width: 0;
}

.hod-quick-grid button:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.hod-quick-grid span {
  inline-size: 32px;
  block-size: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--panel);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 1000;
}

@media (max-width: 1180px) {
  .hod-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hod-span-3,
  .hod-span-4,
  .hod-span-5 {
    grid-column: span 6;
  }
}

@media (max-width: 760px) {
  .hod-inventory-section-form .form-grid {
    grid-template-columns: 1fr;
  }

  .inventory-action-grid {
    min-width: 0;
  }

  .hod-topbar,
  .hod-panel-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .hod-kpi-grid,
  .hod-grid,
  .hod-mini-grid,
  .hod-report-grid,
  .hod-quick-grid {
    grid-template-columns: 1fr;
  }

  .hod-span-3,
  .hod-span-4,
  .hod-span-5 {
    grid-column: 1 / -1;
  }

  .hod-kpi-card,
  .hod-donut-card,
  .hod-monitor-layout,
  .hod-bar-chart p {
    grid-template-columns: 1fr;
  }

  .hod-spark {
    display: none;
  }
}

#teacher-dashboard.hod-module-mode {
  display: block;
  padding: 0;
  background: #f4f7f5;
}

#teacher-dashboard.hod-module-mode > .side-panel,
#teacher-dashboard.hod-module-mode .content-panel > .section-heading,
#teacher-dashboard.hod-module-mode .teacher-module-menu,
#teacher-dashboard.hod-module-mode #teacherCommandPanel,
#teacher-dashboard.hod-module-mode #teacherAnnouncementPanel,
#teacher-dashboard.hod-module-mode #teacherNotificationPanel,
#teacher-dashboard.hod-module-mode #teacherStats,
#teacher-dashboard.hod-module-mode .content-panel > .insight-panel:not(#hodCommandPanel),
#teacher-dashboard.hod-module-mode .content-panel > .resource-grid,
#teacher-dashboard.hod-module-mode .content-panel > .insight-grid {
  display: none !important;
}

#teacher-dashboard.hod-module-mode .content-panel {
  padding: 0;
  max-width: none;
}

#teacher-dashboard.hod-module-mode #hodCommandPanel {
  display: block !important;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#teacher-dashboard.hod-module-mode #hodCommandPanel.hidden {
  display: none !important;
}

.hod-preview-app {
  --hod-green: #145a32;
  --hod-green-2: #1e7a46;
  --hod-green-soft: #eaf5ee;
  --hod-gold: #d6a514;
  --hod-ink: #1f2937;
  --hod-muted: #6b7280;
  --hod-line: #e5e7eb;
  --hod-page: #f4f7f5;
  --hod-danger: #c0392b;
  --hod-warning: #d97706;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  color: var(--hod-ink);
  background: var(--hod-page);
}

.hod-preview-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 20px 16px;
  color: #fff;
  background: linear-gradient(180deg, #0f4c2a 0%, #123d27 100%);
}

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

.hod-preview-brand {
  padding: 6px 8px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  margin-bottom: 16px;
}

.hod-preview-brand img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  border-radius: 14px;
  background: #fff;
  border: 2px solid var(--hod-gold);
  padding: 4px;
}

.hod-preview-brand strong,
.hod-preview-role-card strong {
  display: block;
  line-height: 1.25;
}

.hod-preview-brand small,
.hod-preview-role-card small,
.hod-preview-role-card em,
.hod-preview-sidebar-footer span {
  display: block;
  color: #d8eadf;
  font-size: 0.78rem;
  font-style: normal;
}

.hod-preview-role-card {
  margin: 12px 4px 18px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.09);
}

.hod-preview-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: var(--hod-gold);
  color: #153e27;
  font-weight: 1000;
}

.hod-preview-nav-title {
  margin: 18px 10px 8px;
  color: #a9c9b6;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hod-preview-nav-btn {
  width: 100%;
  margin: 3px 0;
  padding: 11px 12px;
  border: 0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #eaf5ee;
  background: transparent;
  text-align: left;
  font-weight: 850;
}

.hod-preview-nav-btn:hover,
.hod-preview-nav-btn.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
}

.hod-preview-nav-icon {
  width: 25px;
  height: 25px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 1000;
}

.hod-preview-nav-btn b {
  margin-left: auto;
  min-width: 23px;
  min-height: 23px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--hod-green);
  font-size: 0.68rem;
}

.hod-preview-sidebar-footer {
  margin-top: 24px;
  padding: 14px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: grid;
  gap: 6px;
}

.hod-preview-main {
  min-width: 0;
}

.hod-preview-topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--hod-line);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
}

.hod-preview-menu-btn {
  display: none;
  border: 0;
  border-radius: 12px;
  width: 46px;
  height: 40px;
  background: var(--hod-green-soft);
  color: var(--hod-green);
  font-size: 0.66rem;
  font-weight: 1000;
}

.hod-preview-title {
  display: grid;
  min-width: 190px;
}

.hod-preview-title strong {
  font-size: 1.1rem;
}

.hod-preview-title span,
.hod-preview-term {
  color: var(--hod-muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.hod-preview-search {
  position: relative;
  flex: 1;
  max-width: 560px;
}

.hod-preview-search input,
.hod-preview-toolbar input,
.hod-preview-toolbar select,
.hod-preview-form input,
.hod-preview-form select,
.hod-preview-form textarea {
  width: 100%;
  border: 1px solid var(--hod-line);
  border-radius: 12px;
  padding: 11px 14px;
  background: #fff;
  color: var(--hod-ink);
}

.hod-preview-search input {
  padding-right: 68px;
}

.hod-preview-search span {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--hod-muted);
  font-size: 0.72rem;
  font-weight: 900;
}

.hod-preview-online {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border-radius: 999px;
  background: #eaf8ef;
  color: #17643a;
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}

.hod-preview-online::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
}

.hod-preview-icon-btn {
  position: relative;
  width: 42px;
  height: 42px;
  border: 1px solid var(--hod-line);
  border-radius: 12px;
  background: #fff;
  color: var(--hod-green);
  font-size: 0.72rem;
  font-weight: 1000;
}

.hod-preview-icon-btn span {
  position: absolute;
  top: -7px;
  right: -5px;
  min-width: 20px;
  min-height: 20px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--hod-danger);
  color: #fff;
  font-size: 0.65rem;
}

.hod-preview-content {
  padding: 26px;
  max-width: 1600px;
  margin: 0 auto;
}

.hod-preview-section {
  display: none;
}

.hod-preview-section.active {
  display: block;
}

.hod-preview-hero,
.hod-preview-section-header,
.hod-preview-panel-header,
.hod-preview-toolbar,
.hod-preview-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.hod-preview-hero,
.hod-preview-section-header {
  align-items: flex-start;
  margin-bottom: 20px;
}

.hod-preview-hero h1,
.hod-preview-section-header h1 {
  margin: 2px 0 7px;
  color: #10213f;
  font-size: clamp(1.75rem, 3vw, 2.55rem);
  line-height: 1.08;
}

.hod-preview-hero p,
.hod-preview-section-header p {
  max-width: 760px;
  margin: 0;
  color: var(--hod-muted);
}

.hod-preview-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hod-preview-btn,
.hod-preview-small-btn {
  border: 0;
  border-radius: 12px;
  padding: 11px 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 900;
  cursor: pointer;
}

.hod-preview-btn.primary,
.hod-preview-small-btn {
  background: var(--hod-green);
  color: #fff;
}

.hod-preview-btn.secondary,
.hod-preview-small-btn.ghost {
  border: 1px solid var(--hod-line);
  background: #fff;
  color: var(--hod-ink);
}

.hod-preview-small-btn {
  margin: 2px;
  padding: 7px 9px;
  border-radius: 9px;
  font-size: 0.75rem;
}

.hod-preview-link {
  border: 0;
  background: transparent;
  color: var(--hod-green);
  font-size: 0.78rem;
  font-weight: 1000;
  cursor: pointer;
}

.hod-preview-kpi-grid,
.hod-preview-dashboard-grid,
.hod-preview-report-grid,
.hod-preview-quick-grid {
  display: grid;
  gap: 16px;
}

.hod-preview-kpi-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 18px;
}

.hod-preview-kpi-grid.compact {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
}

.hod-preview-dashboard-grid {
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.85fr);
}

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

.hod-preview-kpi,
.hod-preview-panel,
.hod-preview-report-card {
  border: 1px solid var(--hod-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(16, 60, 35, 0.08);
}

.hod-preview-kpi {
  min-height: 120px;
  padding: 18px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
}

.hod-preview-kpi-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--hod-green-soft);
  color: var(--hod-green);
  font-size: 0.78rem;
  font-weight: 1000;
}

.hod-preview-kpi p,
.hod-preview-kpi strong,
.hod-preview-kpi small,
.hod-preview-panel h2,
.hod-preview-panel p,
.hod-preview-table td,
.hod-preview-table th {
  min-width: 0;
  overflow-wrap: anywhere;
}

.hod-preview-kpi p {
  margin: 0;
  color: var(--hod-muted);
  font-size: 0.78rem;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hod-preview-kpi strong {
  display: block;
  margin: 5px 0;
  color: #10213f;
  font-size: 1.8rem;
}

.hod-preview-kpi small {
  color: var(--hod-muted);
  font-weight: 800;
}

.hod-preview-warning .hod-preview-kpi-icon {
  background: #fff5dc;
  color: var(--hod-warning);
}

.hod-preview-danger .hod-preview-kpi-icon {
  background: #ffe9e7;
  color: var(--hod-danger);
}

.hod-preview-panel,
.hod-preview-report-card {
  padding: 18px;
  min-width: 0;
}

.hod-preview-panel-header {
  align-items: flex-start;
  margin-bottom: 14px;
}

.hod-preview-panel-header h2 {
  margin: 0;
  color: #10213f;
  font-size: 1.06rem;
}

.hod-preview-panel-header span {
  color: var(--hod-muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.hod-preview-quick-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hod-preview-quick {
  min-height: 112px;
  border: 1px solid var(--hod-line);
  border-radius: 14px;
  padding: 14px;
  display: grid;
  gap: 7px;
  align-content: start;
  background: #fbfcfb;
  color: var(--hod-ink);
  text-align: left;
  cursor: pointer;
}

.hod-preview-quick:hover {
  border-color: #a4cbb2;
  background: #f3faf5;
}

.hod-preview-quick span {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--hod-green-soft);
  color: var(--hod-green);
  font-size: 0.72rem;
  font-weight: 1000;
}

.hod-preview-quick strong {
  color: #10213f;
  font-size: 0.88rem;
}

.hod-preview-quick small {
  color: var(--hod-muted);
  line-height: 1.35;
}

.hod-preview-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--hod-line);
  border-radius: 12px;
}

.hod-preview-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}

.hod-preview-table th,
.hod-preview-table td {
  border-bottom: 1px solid var(--hod-line);
  padding: 12px 10px;
  text-align: left;
  font-size: 0.82rem;
}

.hod-preview-table th {
  background: #fafafa;
  color: var(--hod-muted);
  font-size: 0.68rem;
  font-weight: 1000;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hod-preview-table tr:hover td {
  background: #fbfdfb;
}

.hod-preview-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 4px 9px;
  background: #edf2f7;
  color: var(--hod-muted);
  font-size: 0.72rem;
  font-weight: 1000;
  white-space: nowrap;
}

.hod-preview-status.good {
  background: #dff8ee;
  color: #047857;
}

.hod-preview-status.warning {
  background: #fff5dc;
  color: var(--hod-warning);
}

.hod-preview-status.danger {
  background: #ffe7e3;
  color: var(--hod-danger);
}

.hod-preview-activity-list,
.hod-preview-alert-list,
.hod-preview-upcoming,
.hod-preview-mini-list,
.hod-preview-bars {
  display: grid;
  gap: 10px;
}

.hod-preview-activity-list p,
.hod-preview-alert-list p,
.hod-preview-upcoming p,
.hod-preview-mini-list p,
.hod-preview-bars p {
  margin: 0;
  display: grid;
  gap: 4px;
  padding: 9px 0;
  border-bottom: 1px solid var(--hod-line);
}

.hod-preview-activity-list p {
  grid-template-columns: minmax(0, 1fr) auto;
}

.hod-preview-activity-list span,
.hod-preview-activity-list em,
.hod-preview-upcoming em,
.hod-preview-mini-list span,
.hod-preview-alert-list em {
  color: var(--hod-muted);
  font-size: 0.76rem;
  font-style: normal;
}

.hod-preview-activity-list em {
  grid-row: span 2;
  align-self: center;
}

.hod-preview-bars p {
  grid-template-columns: minmax(110px, 1fr) minmax(130px, 2fr) 40px 70px;
  align-items: center;
}

.hod-preview-bars i {
  display: block;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--hod-green-2) var(--value), #e8eef5 var(--value));
}

.hod-preview-bars b,
.hod-preview-bars em {
  font-size: 0.76rem;
}

.hod-preview-condition-wrap {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.hod-preview-donut {
  width: 145px;
  height: 145px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(#1f8a4c 0 var(--good), var(--hod-gold) var(--good) var(--fair), #d97706 var(--fair) var(--repair), #c0392b var(--repair) 100%);
}

.hod-preview-donut span {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  text-align: center;
}

.hod-preview-donut strong {
  font-size: 1.4rem;
}

.hod-preview-donut small {
  color: var(--hod-muted);
  font-weight: 900;
}

.hod-preview-legend {
  display: grid;
  gap: 9px;
}

.hod-preview-legend p {
  margin: 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.hod-preview-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--hod-muted);
}

.hod-preview-legend i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.hod-preview-legend i.good { background: #1f8a4c; }
.hod-preview-legend i.fair { background: var(--hod-gold); }
.hod-preview-legend i.repair { background: #d97706; }
.hod-preview-legend i.critical { background: #c0392b; }

.hod-preview-alert-list p {
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
}

.hod-preview-alert-list p span {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: #fff5dc;
  color: var(--hod-warning);
  font-weight: 1000;
}

.hod-preview-alert-list p.danger span {
  background: #ffe7e3;
  color: var(--hod-danger);
}

.hod-preview-alert-list p em {
  grid-column: 2;
}

.hod-preview-upcoming p {
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
}

.hod-preview-upcoming p span {
  min-height: 44px;
  border: 1px solid var(--hod-line);
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--hod-green);
  font-weight: 1000;
}

.hod-preview-mini-list p {
  grid-template-columns: 70px minmax(0, 1fr);
  align-items: center;
}

.hod-preview-mini-list strong {
  color: var(--hod-green);
  font-size: 1.6rem;
}

.hod-preview-toolbar {
  margin-bottom: 16px;
  flex-wrap: wrap;
  align-items: end;
}

.hod-preview-toolbar label {
  flex: 1 1 220px;
  display: grid;
  gap: 6px;
  color: var(--hod-muted);
  font-size: 0.76rem;
  font-weight: 1000;
}

.hod-preview-report-card {
  min-height: 130px;
  display: grid;
  gap: 8px;
  align-content: start;
}

.hod-preview-report-card strong {
  color: #10213f;
}

.hod-preview-report-card span {
  color: var(--hod-muted);
  font-weight: 850;
}

.hod-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  place-items: center;
  padding: 24px;
  background: rgba(15, 36, 25, 0.52);
}

.hod-preview-modal.open {
  display: grid;
}

.hod-preview-modal-card {
  width: min(920px, 100%);
  max-height: min(90vh, 860px);
  overflow: auto;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.22);
}

.hod-preview-modal-header {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 18px 20px;
  border-bottom: 1px solid var(--hod-line);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  background: #fff;
}

.hod-preview-modal-header h2 {
  margin: 2px 0 4px;
  color: #10213f;
}

.hod-preview-modal-header span {
  color: var(--hod-muted);
  font-weight: 900;
}

.hod-preview-modal-header button {
  border: 1px solid var(--hod-line);
  border-radius: 12px;
  padding: 9px 12px;
  background: #fff;
  color: var(--hod-ink);
  font-weight: 900;
}

.hod-preview-form {
  padding: 20px;
}

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

.hod-preview-form label {
  display: grid;
  gap: 7px;
  color: var(--hod-muted);
  font-size: 0.78rem;
  font-weight: 1000;
}

.hod-preview-form textarea {
  min-height: 92px;
  resize: vertical;
}

.hod-preview-form-actions {
  margin-top: 18px;
  justify-content: flex-end;
}

.hod-preview-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 70;
  max-width: 360px;
  border-radius: 14px;
  padding: 13px 16px;
  background: #123d27;
  color: #fff;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.22);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  font-weight: 850;
}

.hod-preview-toast.show {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1180px) {
  .hod-preview-app {
    grid-template-columns: 1fr;
  }

  .hod-preview-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(310px, 86vw);
    z-index: 40;
    transform: translateX(-105%);
    transition: transform 180ms ease;
  }

  .hod-preview-sidebar.open {
    transform: translateX(0);
  }

  .hod-preview-menu-btn {
    display: inline-grid;
    place-items: center;
  }

  .hod-preview-dashboard-grid,
  .hod-preview-report-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .hod-preview-content {
    padding: 18px;
  }

  .hod-preview-topbar,
  .hod-preview-hero,
  .hod-preview-section-header {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .hod-preview-search {
    order: 5;
    flex-basis: 100%;
    max-width: none;
  }

  .hod-preview-kpi-grid,
  .hod-preview-kpi-grid.compact,
  .hod-preview-quick-grid,
  .hod-preview-form-grid {
    grid-template-columns: 1fr;
  }

  .hod-preview-condition-wrap,
  .hod-preview-bars p,
  .hod-preview-activity-list p,
  .hod-preview-upcoming p {
    grid-template-columns: 1fr;
  }
}

@page secretaryAlumniLandscape {
  size: A4 landscape;
  margin: 8mm;
}

@media print {
  body[data-print-mode="secretary-alumni-register"] .print-selection {
    page: secretaryAlumniLandscape;
  }

  body[data-print-mode="secretary-alumni-register"] .document-table {
    font-size: 7pt;
  }

  body[data-print-mode="secretary-alumni-register"] .document-table th,
  body[data-print-mode="secretary-alumni-register"] .document-table td {
    padding: 3px;
    vertical-align: top;
    overflow-wrap: anywhere;
  }

  body[data-print-mode="secretary-alumni-register"] img {
    display: none !important;
  }

  #teacher-dashboard.hod-module-mode .hod-preview-sidebar,
  #teacher-dashboard.hod-module-mode .hod-preview-topbar,
  #teacher-dashboard.hod-module-mode .hod-preview-modal,
  #teacher-dashboard.hod-module-mode .hod-preview-toast {
    display: none !important;
  }

  #teacher-dashboard.hod-module-mode,
  #teacher-dashboard.hod-module-mode .hod-preview-app,
  #teacher-dashboard.hod-module-mode .hod-preview-content {
    display: block;
    padding: 0;
    background: #fff;
  }
}

.home-dashboard-view .home-side-nav a,
.home-dashboard-view .home-portal-card,
.home-dashboard-view .home-dashboard-card,
.home-dashboard-view .home-dynamic-card,
.home-dashboard-view .home-achievement-card,
.home-dashboard-view .home-role-chip,
.home-dashboard-view .home-top-user,
.home-dashboard-view .thread-card,
.home-dashboard-view .stat-card,
.headteacher-quick-grid button,
.deputy-quick-grid button,
.hod-quick-grid button {
  min-width: 0;
  overflow-wrap: anywhere;
}

.home-dashboard-view .home-nav-icon,
.home-dashboard-view .portal-icon,
.home-dashboard-view .section-icon,
.home-dashboard-view .achievement-icon,
.home-dashboard-view .home-hero-feature-icon,
.home-dashboard-view .home-alert-bell,
.home-dashboard-view .home-alert-mail,
.headteacher-icon,
.deputy-icon,
.hod-icon {
  flex: 0 0 auto;
}

.home-dashboard-view .home-portal-card,
.home-dashboard-view .home-side-nav a,
.home-dashboard-view .home-quick-profile div,
.home-dashboard-view .home-hero-feature,
.home-dashboard-view .section-heading,
.home-dashboard-view .icon-heading {
  align-items: center;
}

.home-dashboard-view .home-portal-card > *,
.home-dashboard-view .home-dashboard-card > *,
.home-dashboard-view .home-dynamic-card > *,
.home-dashboard-view .home-side-nav a > *,
.home-dashboard-view .home-top-user > * {
  min-width: 0;
}

.deputy-profile-card,
.deputy-help-card {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.06);
  display: grid;
  gap: 8px;
}

.deputy-profile-card {
  grid-template-columns: 54px 1fr;
  align-items: center;
}

.deputy-avatar {
  inline-size: 54px;
  block-size: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #0f9fe8, #0fc29a);
  color: #fff;
  font-weight: 1000;
}

.deputy-side-nav {
  display: grid;
  gap: 8px;
  margin: 14px 0;
}

.deputy-side-nav button {
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: transparent;
  color: #fff;
  font-weight: 900;
  text-align: start;
  cursor: pointer;
}

.deputy-side-nav button:hover,
.deputy-side-nav button:focus-visible {
  background: rgba(29, 116, 226, 0.3);
  outline: none;
}

.deputy-side-nav button.active {
  background: linear-gradient(135deg, rgba(29, 116, 226, 0.96), rgba(15, 194, 154, 0.74));
  box-shadow: inset 4px 0 0 #ffc94d, 0 12px 24px rgba(0, 0, 0, 0.16);
}

.deputy-side-nav span {
  inline-size: 30px;
  block-size: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.12);
  font-size: 0.72rem;
}

.deputy-side-nav b {
  min-inline-size: 24px;
  min-block-size: 24px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: #f24d55;
  color: #fff;
  font-size: 0.78rem;
}

.deputy-help-card {
  text-align: center;
}

.deputy-shell {
  display: grid;
  gap: 16px;
}

.deputy-section-hidden {
  display: none !important;
}

.deputy-topbar,
.deputy-top-controls,
.deputy-panel-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

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

.deputy-search {
  flex: 1 1 520px;
  max-inline-size: 560px;
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.deputy-top-controls {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.deputy-kpi-grid,
.deputy-grid,
.deputy-mini-grid,
.deputy-report-grid,
.deputy-quick-grid {
  display: grid;
  gap: 14px;
}

.deputy-kpi-grid {
  grid-template-columns: repeat(6, minmax(140px, 1fr));
}

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

.deputy-kpi-card,
.deputy-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 10px 28px rgba(15, 41, 66, 0.08);
}

.deputy-kpi-card {
  min-height: 106px;
  padding: 14px;
  display: grid;
  grid-template-columns: 44px 1fr 56px;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}

.deputy-icon,
.deputy-row-icon {
  inline-size: 40px;
  block-size: 40px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--blue-soft);
  color: var(--blue);
  font-weight: 1000;
}

.deputy-kpi-card p,
.deputy-kpi-card strong,
.deputy-kpi-card span,
.deputy-panel p,
.deputy-panel strong,
.deputy-panel span {
  overflow-wrap: anywhere;
}

.deputy-kpi-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.deputy-kpi-card strong {
  display: block;
  margin: 3px 0;
  font-size: 1.35rem;
}

.deputy-kpi-card span:not(.deputy-icon):not(.deputy-spark) {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
}

.deputy-spark {
  block-size: 34px;
  display: flex;
  align-items: end;
  gap: 4px;
}

.deputy-spark i {
  inline-size: 7px;
  border-radius: 999px;
  background: var(--accent);
  animation: pulseIcon 1.9s ease-in-out infinite;
}

.deputy-spark i:nth-child(1) { block-size: 35%; }
.deputy-spark i:nth-child(2) { block-size: 52%; animation-delay: 120ms; }
.deputy-spark i:nth-child(3) { block-size: 42%; animation-delay: 240ms; }
.deputy-spark i:nth-child(4) { block-size: 74%; animation-delay: 360ms; }

.deputy-good .deputy-icon,
.deputy-alert.deputy-good span:first-child {
  background: #dff8ee;
  color: #008767;
}

.deputy-warn .deputy-icon,
.deputy-alert.deputy-warn span:first-child {
  background: #fff0d2;
  color: #b35b00;
}

.deputy-danger .deputy-icon,
.deputy-alert.deputy-danger span:first-child {
  background: #ffe1e1;
  color: #bd3038;
}

.deputy-panel {
  padding: 16px;
  display: grid;
  gap: 14px;
}

.deputy-span-3 { grid-column: span 3; }
.deputy-span-4 { grid-column: span 4; }
.deputy-span-5 { grid-column: span 5; }

.deputy-panel-heading {
  justify-content: space-between;
  align-items: start;
}

.deputy-panel-heading h3 {
  margin: 2px 0 0;
  font-size: 1rem;
}

.deputy-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.deputy-inline-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 70%, var(--panel));
}

.deputy-inline-form label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.deputy-inline-form .wide-field {
  grid-column: 1 / -1;
}

.deputy-inline-form button {
  align-self: end;
}

.deputy-select-line {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.deputy-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.deputy-table th,
.deputy-table td {
  border-bottom: 1px solid var(--line);
  padding: 10px;
  text-align: left;
}

.deputy-table th {
  background: color-mix(in srgb, var(--blue-soft) 68%, var(--panel));
  color: var(--ink);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.deputy-table tr:nth-child(even) td {
  background: color-mix(in srgb, var(--surface) 62%, var(--panel));
}

.deputy-table td span,
.deputy-status-conducted td span,
.deputy-status-covered td span,
.deputy-status-in-progress td span,
.deputy-status-uncovered td span,
.deputy-status-not-conducted td span,
.deputy-status-scheduled td span {
  border-radius: 999px;
  display: inline-grid;
  min-height: 24px;
  align-items: center;
  padding: 0 9px;
  font-size: 0.72rem;
  font-weight: 900;
}

.deputy-status-conducted td span,
.deputy-status-covered td span {
  background: #dff8ee;
  color: #008767;
}

.deputy-status-in-progress td span {
  background: var(--blue-soft);
  color: var(--blue);
}

.deputy-status-uncovered td span,
.deputy-status-not-conducted td span {
  background: #ffe1e1;
  color: #bd3038;
}

.deputy-status-scheduled td span {
  background: #edf2f7;
  color: var(--muted);
}

.deputy-monitor-layout {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.deputy-monitor-layout.compact {
  grid-template-columns: 126px minmax(0, 1fr);
}

.deputy-donut {
  inline-size: 130px;
  block-size: 130px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(#10a37f var(--percent), #e8eef5 var(--percent));
  position: relative;
}

.deputy-donut.small {
  inline-size: 74px;
  block-size: 74px;
}

.deputy-donut.danger {
  background: conic-gradient(#ef4444 var(--percent), #f59e0b var(--percent), #e8eef5);
}

.deputy-donut b,
.deputy-donut small {
  position: relative;
  z-index: 1;
}

.deputy-donut b {
  inline-size: 84px;
  block-size: 84px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--panel);
  font-size: 1.25rem;
}

.deputy-donut.small b {
  inline-size: 52px;
  block-size: 52px;
  font-size: 0.82rem;
}

.deputy-donut small {
  position: absolute;
  inset-block-end: 35px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
}

.deputy-mini-list,
.deputy-approval-list,
.deputy-alert-list,
.deputy-event-list {
  display: grid;
  gap: 10px;
}

.deputy-mini-list p,
.deputy-approval-row p,
.deputy-alert p,
.deputy-event-list p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.deputy-mini-list p {
  display: grid;
  gap: 3px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}

.deputy-mini-list span,
.deputy-approval-row span,
.deputy-alert em {
  color: var(--muted);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 800;
}

.deputy-warning-line,
.deputy-success-line {
  border-radius: 8px;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.deputy-warning-line {
  background: #ffe1e1;
  color: #9f1d27;
}

.deputy-success-line {
  background: #dff8ee;
  color: #00745c;
}

.deputy-approval-row,
.deputy-alert,
.deputy-event-list article {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 10px;
  padding: 9px 0;
}

.deputy-approval-row {
  grid-template-columns: 42px 1fr auto;
  align-items: center;
}

.deputy-approval-row.needs-action .deputy-row-icon {
  background: var(--gold-soft);
  color: var(--gold);
}

.deputy-pass-queue {
  display: grid;
  gap: 8px;
}

.deputy-request-groups {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.deputy-request-group {
  border: 1px solid #dbe5f0;
  border-radius: 8px;
  background: #f8fbff;
  overflow: hidden;
}

.deputy-request-group summary {
  min-height: 44px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--brand-blue);
  font-weight: 1000;
  cursor: pointer;
}

.deputy-request-group summary span {
  min-width: 28px;
  min-height: 28px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: #fff0d8;
  color: #9a4f00;
  font-size: 0.78rem;
}

.deputy-request-group > .thread-list,
.deputy-inventory-monitor {
  padding: 12px;
}

.deputy-resource-risk td {
  background: #fff8ed;
}

.deputy-attendance-tabs {
  display: grid;
  gap: 10px;
}

.deputy-attendance-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 10px;
  align-items: center;
  background: color-mix(in srgb, var(--surface) 68%, var(--panel));
}

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

.deputy-mini-grid article {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: color-mix(in srgb, var(--surface) 72%, var(--panel));
}

.deputy-alert {
  grid-template-columns: 30px 1fr;
}

.deputy-alert span:first-child {
  inline-size: 26px;
  block-size: 26px;
  border-radius: 50%;
  background: var(--blue-soft);
}

.deputy-event-list article {
  grid-template-columns: 48px 1fr;
  align-items: center;
}

.deputy-event-list article > span {
  border: 1px solid var(--line);
  border-radius: 8px;
  min-block-size: 44px;
  display: grid;
  place-items: center;
  color: var(--accent);
  font-weight: 1000;
}

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

.deputy-quick-grid button,
.deputy-report-grid button {
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 72px;
  padding: 10px;
  display: grid;
  gap: 6px;
  place-items: center;
  background: color-mix(in srgb, var(--blue-soft) 52%, var(--panel));
  color: var(--ink);
  font-weight: 900;
  cursor: pointer;
}

.deputy-quick-grid button:hover,
.deputy-report-grid button:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.deputy-quick-grid span {
  inline-size: 32px;
  block-size: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--panel);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 1000;
}

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

.deputy-report-grid span {
  color: var(--muted);
  font-size: 0.78rem;
}

.ht-good {
  border-color: color-mix(in srgb, #10a37f 35%, var(--line)) !important;
}

.ht-warn {
  border-color: color-mix(in srgb, #f59e0b 40%, var(--line)) !important;
}

.ht-danger {
  border-color: color-mix(in srgb, #ef4444 42%, var(--line)) !important;
}

.teacher-allocation-table {
  border-collapse: collapse;
  inline-size: 100%;
  min-width: 760px;
}

.teacher-allocation-table th {
  background: var(--brand-blue);
  color: #fff;
  font-size: 0.76rem;
  letter-spacing: 0;
  padding: 12px;
  text-transform: uppercase;
}

.teacher-allocation-table td {
  border-bottom: 1px solid color-mix(in srgb, var(--line) 62%, transparent);
  padding: 12px;
  text-align: center;
}

.teacher-allocation-table td:first-child,
.teacher-allocation-table td:nth-child(2) {
  text-align: left;
}

.teacher-allocation-table .active-allocation-row td {
  background: color-mix(in srgb, var(--brand-orange) 10%, var(--panel));
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--brand-orange) 45%, transparent);
}

.teacher-enter-mark-btn,
.teacher-allocation-download {
  background: var(--brand-blue);
  border: 0;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  font-weight: 900;
  min-height: 34px;
  padding: 0.45rem 0.9rem;
}

.teacher-enter-mark-btn {
  background: color-mix(in srgb, var(--brand-blue) 92%, var(--brand-orange));
}

.teacher-allocation-download:hover,
.teacher-enter-mark-btn:hover {
  background: var(--brand-orange);
}

.teacher-preview-table {
  min-width: 720px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.teacher-result-workspace {
  margin-top: 16px;
}

.teacher-result-entry-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.teacher-result-entry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-blue) 10%, var(--panel)), var(--panel));
}

.teacher-result-entry-header h3 {
  margin: 0;
  color: var(--brand-blue);
}

.teacher-result-meta-grid,
.teacher-result-summary-grid,
.teacher-result-toolbar,
.teacher-result-bulk-tools,
.teacher-result-analysis-strip {
  display: grid;
  gap: 10px;
  padding: 12px 16px;
}

.teacher-result-meta-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  background: color-mix(in srgb, var(--blue-soft) 52%, var(--panel));
}

.teacher-result-meta-grid span,
.teacher-result-analysis-strip span {
  min-width: 0;
}

.teacher-result-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.teacher-result-summary-grid span {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface);
}

.teacher-result-summary-grid b {
  display: block;
  color: var(--brand-blue);
  font-size: 1.35rem;
}

.teacher-result-summary-grid em {
  display: block;
  color: var(--muted);
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 800;
}

.teacher-result-validation {
  margin: 0 16px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.teacher-result-validation ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

.teacher-result-validation.ok {
  border-color: color-mix(in srgb, #1f7a4f 34%, var(--line));
  background: color-mix(in srgb, #1f7a4f 8%, var(--panel));
}

.teacher-result-validation.warning {
  border-color: color-mix(in srgb, var(--brand-orange) 42%, var(--line));
  background: color-mix(in srgb, var(--brand-orange) 10%, var(--panel));
}

.teacher-result-validation.danger {
  border-color: color-mix(in srgb, var(--red) 42%, var(--line));
  background: color-mix(in srgb, var(--red) 8%, var(--panel));
}

.teacher-result-test-selector {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(240px, 1fr) minmax(260px, 1.2fr);
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--brand-orange) 8%, var(--panel));
}

.teacher-result-test-selector p {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}

.teacher-result-assessment-history {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.teacher-result-assessment-history span {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--panel);
  min-width: 96px;
}

.teacher-result-assessment-history span.active {
  border-color: var(--brand-blue);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--brand-blue) 14%, transparent);
}

.teacher-result-assessment-history b,
.teacher-result-assessment-history em {
  display: block;
}

.teacher-result-assessment-history b {
  color: var(--brand-blue);
  font-size: 0.82rem;
}

.teacher-result-assessment-history em {
  color: var(--muted);
  font-size: 0.72rem;
  font-style: normal;
}

.teacher-result-toolbar {
  grid-template-columns: minmax(220px, 1.2fr) minmax(180px, 0.8fr) auto;
  align-items: end;
}

.teacher-result-show-count {
  align-self: center;
  color: var(--muted);
  font-weight: 800;
}

.teacher-result-bulk-tools {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 72%, var(--panel));
}

.teacher-result-table-wrap {
  max-height: 62vh;
  overflow: auto;
  padding: 0 16px 16px;
}

.teacher-result-entry-table {
  width: 100%;
  min-width: 1120px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.88rem;
}

.teacher-result-entry-table th,
.teacher-result-entry-table td {
  border-bottom: 1px solid var(--line);
  padding: 10px;
  vertical-align: middle;
}

.teacher-result-entry-table thead th {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--brand-blue);
  color: #fff;
  text-align: left;
}

.teacher-result-entry-table thead small {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  opacity: 0.8;
}

.teacher-result-entry-table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--surface) 48%, var(--panel));
}

.teacher-result-entry-table tbody tr:focus-within td {
  background: color-mix(in srgb, var(--brand-orange) 9%, var(--panel));
}

.teacher-result-select-col {
  width: 48px;
  min-width: 48px;
  text-align: center;
}

.teacher-result-serial-col {
  width: 58px;
  min-width: 58px;
}

.teacher-result-surname-col {
  width: 180px;
  min-width: 150px;
}

.teacher-result-first-name-col {
  width: 220px;
  min-width: 180px;
}

.teacher-result-surname-col strong,
.teacher-result-first-name-col strong {
  display: block;
  color: var(--ink);
  font-weight: 800;
  line-height: 1.35;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

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

.result-cell-stack {
  display: grid;
  gap: 6px;
  min-width: 132px;
}

.teacher-result-score-input,
.teacher-result-status-select,
.teacher-result-comment-field {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  min-height: 34px;
  padding: 7px 8px;
}

.teacher-result-comment-field {
  min-width: 180px;
  resize: vertical;
}

.teacher-result-score-input:focus,
.teacher-result-status-select:focus,
.teacher-result-comment-field:focus {
  outline: 3px solid color-mix(in srgb, var(--brand-blue) 22%, transparent);
  border-color: var(--brand-blue);
}

.teacher-result-score-input.result-cell-saved {
  border-color: #1f7a4f;
  background: color-mix(in srgb, #1f7a4f 7%, var(--panel));
}

.teacher-result-score-input.result-cell-incomplete {
  border-color: var(--brand-orange);
  background: color-mix(in srgb, var(--brand-orange) 10%, var(--panel));
}

.teacher-result-score-input.result-cell-invalid {
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 10%, var(--panel));
}

.teacher-result-score-input.result-cell-coded {
  border-color: color-mix(in srgb, var(--muted) 42%, var(--line));
  background: color-mix(in srgb, var(--muted) 12%, var(--panel));
  color: var(--muted);
  font-weight: 900;
}

.teacher-result-stage-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  padding: 0 10px;
  background: color-mix(in srgb, var(--brand-blue) 12%, var(--panel));
  color: var(--brand-blue);
  font-size: 0.76rem;
  font-weight: 900;
  white-space: nowrap;
}

.row-action-menu {
  position: relative;
}

.row-action-menu summary {
  list-style: none;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 999px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--brand-blue);
  font-weight: 900;
  background: var(--panel);
}

.row-action-menu summary::-webkit-details-marker {
  display: none;
}

.row-action-menu div {
  position: absolute;
  right: 0;
  top: 38px;
  z-index: 8;
  width: 230px;
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.row-action-menu button {
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  padding: 8px;
  text-align: left;
}

.row-action-menu button:hover {
  background: color-mix(in srgb, var(--blue-soft) 60%, var(--panel));
}

.teacher-result-analysis-strip {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.teacher-confirmation-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 16px;
  font-weight: 800;
}

.teacher-result-action-bar {
  position: sticky;
  bottom: 0;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 94%, var(--brand-blue));
  box-shadow: 0 -10px 28px rgba(20, 31, 44, 0.1);
}

.teacher-result-action-bar > span {
  font-weight: 900;
  color: var(--brand-blue);
}

.teacher-result-action-bar div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.legacy-result-form {
  margin-top: 12px;
}

@media (max-width: 760px) {
  .teacher-result-entry-header,
  .teacher-result-action-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .teacher-result-toolbar {
    grid-template-columns: 1fr;
  }

  .teacher-result-test-selector {
    grid-template-columns: 1fr;
  }

  .teacher-result-assessment-history {
    justify-content: flex-start;
  }

  .teacher-result-table-wrap {
    padding: 0 8px 12px;
  }

  .teacher-result-entry-table {
    min-width: 940px;
    font-size: 0.82rem;
  }

  .teacher-result-entry-table th,
  .teacher-result-entry-table td {
    padding: 9px 6px;
  }

  .teacher-result-select-col {
    width: 34px;
    min-width: 34px;
  }

  .teacher-result-serial-col {
    width: 40px;
    min-width: 40px;
  }

  .teacher-result-surname-col {
    width: 112px;
    min-width: 112px;
  }

  .teacher-result-first-name-col {
    width: 150px;
    min-width: 150px;
  }
}

#teacher-dashboard.teacher-collapsed-mode .side-panel > form,
#teacher-dashboard.teacher-collapsed-mode .content-panel > .insight-panel,
#teacher-dashboard.teacher-collapsed-mode .content-panel > .resource-grid,
#teacher-dashboard.teacher-collapsed-mode .content-panel > .insight-grid > .insight-panel,
#teacher-dashboard.teacher-collapsed-mode #teacherStats {
  display: none;
}

#teacher-dashboard.teacher-collapsed-mode .content-panel > .insight-panel.teacher-panel-active,
#teacher-dashboard.teacher-collapsed-mode .content-panel > .insight-grid > .insight-panel.teacher-panel-active,
#teacher-dashboard.teacher-collapsed-mode .teacher-panel-active {
  display: block;
}

#teacher-dashboard.teacher-collapsed-mode .side-panel > form.teacher-panel-active,
#teacher-dashboard.teacher-collapsed-mode #teacherStats.teacher-panel-active,
#teacher-dashboard.teacher-collapsed-mode #teacherResourceList.teacher-panel-active {
  display: grid;
}

.teacher-test-cover-pages-panel {
  grid-column: 1 / -1;
}

.test-cover-page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.test-cover-page-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.test-cover-page-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 62px;
  border-radius: 7px;
  background: #1f5ea8;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.test-cover-page-copy h4,
.test-cover-page-copy p {
  margin: 0;
}

.test-cover-page-copy p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.88rem;
}

.test-cover-page-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
}

.test-cover-page-actions a {
  flex: 1;
  text-align: center;
  text-decoration: none;
}

@media (max-width: 560px) {
  .test-cover-page-grid {
    grid-template-columns: 1fr;
  }
}

.insight-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 16px;
  box-shadow: 0 10px 28px rgba(20, 31, 44, 0.07);
}

.wide-panel {
  grid-column: 1 / -1;
}

.compact-heading {
  align-items: flex-start;
  margin-bottom: 12px;
}

.compact-heading h3 {
  font-size: 1.08rem;
  line-height: 1.25;
}

.application-start-panel {
  display: grid;
  gap: 10px;
  max-width: 680px;
  margin-top: 4px;
}

.application-start-panel p {
  margin: 0;
  color: var(--muted);
}

.application-start-panel .primary-btn {
  justify-self: start;
}

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

.advancement-panel {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, var(--panel)), var(--panel) 54%),
    var(--panel);
}

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

.advancement-grid .thread-card {
  min-height: 142px;
}

.thread-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 88%, var(--surface));
  padding: 12px;
  display: grid;
  gap: 8px;
}

.warning-card {
  border-color: color-mix(in srgb, var(--red) 45%, var(--line));
  background: color-mix(in srgb, var(--red) 8%, var(--panel));
}

.success-card {
  border-color: color-mix(in srgb, var(--green) 42%, var(--line));
  background: color-mix(in srgb, var(--green-soft) 68%, var(--panel));
}

.application-progress-card {
  --application-progress-color: #08783e;
  --application-progress-soft: color-mix(in srgb, var(--green-soft) 72%, var(--panel));
  margin-top: 4px;
  border: 1px solid color-mix(in srgb, var(--application-progress-color) 26%, var(--line));
  border-radius: 16px;
  background: linear-gradient(135deg, var(--application-progress-soft), color-mix(in srgb, var(--blue-soft) 38%, var(--panel)));
  padding: 16px;
  overflow: hidden;
}

.application-progress-rejected {
  --application-progress-color: var(--red);
  --application-progress-soft: color-mix(in srgb, var(--red) 9%, var(--panel));
}

.application-progress-attention {
  --application-progress-color: var(--gold);
  --application-progress-soft: color-mix(in srgb, var(--gold-soft) 65%, var(--panel));
}

.application-progress-summary {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.application-progress-icon {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--application-progress-color);
  color: #fff !important;
  font-size: 2.25rem;
  font-weight: 700 !important;
  line-height: 1;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--application-progress-color) 28%, transparent);
}

.application-progress-kicker {
  display: block;
  margin-bottom: 3px;
  color: var(--application-progress-color) !important;
  font-size: 0.72rem;
  font-weight: 950 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.application-progress-summary strong {
  display: block;
  color: var(--ink);
  font-size: 1.12rem;
}

.application-progress-summary p {
  margin: 4px 0 8px;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.application-progress-summary code {
  display: inline-flex;
  max-width: 100%;
  border-radius: 7px;
  background: #062b5b;
  color: #fff;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 950;
  letter-spacing: 0.05em;
  overflow-wrap: anywhere;
}

.application-progress-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.application-progress-step {
  position: relative;
  min-width: 0;
  padding: 28px 7px 0;
  text-align: center;
}

.application-progress-step:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 8px;
  right: 50%;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 82%, var(--muted));
}

.application-progress-step.complete:not(:first-child)::before,
.application-progress-step.current:not(:first-child)::before,
.application-progress-step.attention:not(:first-child)::before,
.application-progress-step.rejected:not(:first-child)::before {
  background: var(--application-progress-color);
}

.application-progress-dot {
  position: absolute;
  z-index: 1;
  top: 0;
  left: calc(50% - 10px);
  width: 20px;
  height: 20px;
  border: 4px solid var(--panel);
  border-radius: 50%;
  background: color-mix(in srgb, var(--line) 70%, var(--muted));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--line) 80%, transparent);
}

.application-progress-step.complete .application-progress-dot,
.application-progress-step.current .application-progress-dot,
.application-progress-step.attention .application-progress-dot,
.application-progress-step.rejected .application-progress-dot {
  background: var(--application-progress-color);
}

.application-progress-step.current .application-progress-dot,
.application-progress-step.attention .application-progress-dot {
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--application-progress-color) 18%, transparent);
}

.application-progress-step strong {
  display: block;
  color: var(--ink);
  font-size: 0.76rem;
  line-height: 1.25;
}

.application-progress-step small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.66rem;
  line-height: 1.25;
}

@media (max-width: 700px) {
  .application-progress-card {
    padding: 14px;
  }

  .application-progress-summary {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 12px;
  }

  .application-progress-icon {
    width: 52px;
    height: 52px;
    font-size: 1.7rem;
  }

  .application-progress-steps {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 15px;
  }

  .application-progress-step {
    min-height: 54px;
    padding: 2px 0 10px 42px;
    text-align: left;
  }

  .application-progress-step:not(:first-child)::before {
    top: -34px;
    right: auto;
    left: 9px;
    width: 4px;
    height: 52px;
  }

  .application-progress-dot {
    top: 0;
    left: 0;
  }
}

.announcement-card {
  border-left: 4px solid var(--accent);
}

.priority-border-important {
  border-left-color: var(--gold);
}

.priority-border-urgent {
  border-left-color: var(--red);
}

.thread-card strong,
.thread-card p,
.thread-card span {
  overflow-wrap: anywhere;
}

.thread-card span,
.profile-facts span {
  color: var(--muted);
  font-weight: 800;
}

body[data-route="pupil-dashboard"] .site-header {
  display: none;
}

body[data-route="pupil-dashboard"] main {
  min-height: 100vh;
}

#pupil-dashboard.pupil-layout {
  --learner-navy: #071a3e;
  --learner-navy-2: #082a5c;
  --learner-purple: #4b0077;
  --learner-purple-dark: #270047;
  --learner-gold: #d6960e;
  --learner-blue: #0f63d8;
  --learner-line: #e4e8f1;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 0;
  min-height: 100vh;
  padding: 0;
  background:
    radial-gradient(circle at 84% 12%, rgba(214, 150, 14, 0.11), transparent 30%),
    linear-gradient(180deg, #fbfcff 0%, #f6f8fc 52%, #f9f6ff 100%);
}

#pupil-dashboard.pupil-layout .learner-side-panel {
  position: sticky;
  top: 0;
  align-self: start;
  min-height: 100vh;
  max-height: 100vh;
  overflow: auto;
  padding: 22px 16px;
  color: #ffffff;
  background:
    radial-gradient(circle at 18% 0%, rgba(214, 150, 14, 0.28), transparent 28%),
    linear-gradient(180deg, #071a3e 0%, #09265a 48%, #240042 100%);
  box-shadow: 18px 0 44px rgba(10, 25, 62, 0.18);
}

.learner-sidebar-brand {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 22px;
}

.learner-sidebar-brand img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.28));
}

.learner-sidebar-brand strong,
.learner-sidebar-brand span {
  display: block;
  line-height: 1.1;
}

.learner-sidebar-brand strong {
  font-size: 1.02rem;
  font-weight: 1000;
}

.learner-sidebar-brand span {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.83rem;
  font-weight: 800;
}

.learner-side-nav {
  display: grid;
  gap: 7px;
  margin-bottom: 18px;
}

.learner-side-nav a,
.learner-side-nav button,
.learner-control-group summary,
.learner-logout-link {
  min-height: 44px;
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 850;
}

.learner-side-nav a,
.learner-side-nav button {
  padding: 0 12px;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.learner-side-nav a:first-child,
.learner-side-nav button:first-child,
.learner-side-nav a:hover,
.learner-side-nav button:hover,
.learner-control-group[open] > summary {
  background: linear-gradient(135deg, var(--learner-blue), #0756bf);
  color: #ffffff;
  box-shadow: 0 12px 24px rgba(7, 77, 183, 0.24);
}

.learner-nav-icon,
.learner-summary-icon,
.learner-item-icon {
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  font-style: normal;
  font-weight: 1000;
}

.learner-nav-icon {
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, 0.12);
}

.learner-nav-icon::before {
  font-size: 0.82rem;
}

.nav-dashboard::before { content: "H"; }
.nav-profile::before { content: "P"; }
.nav-courses::before { content: "C"; }
.nav-assignments::before { content: "A"; }
.nav-grades::before { content: "G"; }
.nav-timetable::before { content: "T"; }
.nav-attendance::before { content: "R"; }
.nav-messages::before { content: "M"; }
.nav-library::before { content: "L"; }
.nav-exams::before { content: "E"; }
.nav-resources::before { content: "F"; }
.nav-clubs::before { content: "S"; }
.nav-settings::before { content: "Z"; }
.nav-logout::before { content: "X"; }

.learner-control-group {
  margin: 10px 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.learner-control-group summary {
  cursor: pointer;
  padding: 0 12px;
  list-style: none;
}

.learner-control-group summary::-webkit-details-marker {
  display: none;
}

.learner-control-group > :not(summary) {
  margin: 0 12px 14px;
}

.learner-control-group .compact-form,
.learner-control-group .stacked-form {
  border-top-color: rgba(255, 255, 255, 0.16);
}

.learner-control-group label,
.learner-control-group .eyebrow,
.learner-control-group .hint {
  color: rgba(255, 255, 255, 0.86);
}

.learner-control-group .text-field {
  border-color: rgba(255, 255, 255, 0.20);
  background: rgba(255, 255, 255, 0.92);
  color: #1d1231;
}

.learner-popup-overlay[hidden] {
  display: none;
}

.learner-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(9, 8, 30, 0.56);
  backdrop-filter: blur(8px);
}

.learner-popup-panel {
  width: min(1060px, 100%);
  max-width: calc(100vw - 32px);
  max-height: min(calc(100dvh - 32px), 860px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 30px 80px rgba(5, 12, 45, 0.34);
  overflow: hidden;
}

.movable-modal {
  translate: var(--modal-drag-x, 0px) var(--modal-drag-y, 0px);
}

.movable-modal-handle {
  cursor: move;
  touch-action: none;
  user-select: none;
}

.movable-modal.modal-is-dragging {
  transition: none !important;
  user-select: none;
}

.learner-popup-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--learner-line);
  background: linear-gradient(135deg, #ffffff, #f7f2ff);
}

.learner-popup-header h2 {
  margin: 2px 0 0;
  color: #16002b;
  font-size: clamp(1.25rem, 2vw, 1.8rem);
}

.learner-popup-body {
  display: grid;
  gap: 16px;
  min-height: 0;
  padding: 20px;
  overflow: auto;
  overscroll-behavior: contain;
}

.learner-assignment-workspace {
  width: 100%;
}

.learner-assignment-groups,
.learner-assignment-list {
  display: grid;
  gap: 14px;
}

.learner-assignment-subject {
  border: 1px solid var(--learner-line);
  border-radius: 14px;
  background: #f9f7fc;
  overflow: hidden;
}

.learner-assignment-subject > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--learner-purple), var(--learner-purple-light));
}

.learner-assignment-subject h3,
.learner-assignment-subject header span,
.learner-assignment-item p {
  margin: 0;
}

.learner-assignment-list {
  padding: 14px;
}

.learner-assignment-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--learner-line);
  border-radius: 12px;
  background: #ffffff;
  padding: 14px;
}

.learner-assignment-item strong,
.learner-assignment-item span {
  display: block;
}

.learner-assignment-item p {
  padding: 5px 0;
  color: #4d4560;
}

.learner-assignment-item span {
  color: #6d647e;
  font-size: 0.88rem;
}

.learner-assignment-actions {
  display: grid;
  justify-items: end;
  gap: 9px;
}

.learner-popup-body > .learner-dashboard-card,
.learner-popup-body > .insight-panel,
.learner-popup-body > .resource-grid,
.learner-popup-body > .recent-strip,
.learner-popup-body > .thread-list,
.learner-popup-body > .stacked-form,
.learner-popup-body > .compact-form,
.learner-popup-body > form,
.learner-popup-body > label,
.learner-popup-body > .mini-stats {
  margin: 0;
}

.learner-popup-body > .resource-grid,
.learner-popup-body > .recent-strip {
  width: 100%;
}

.learner-popup-body > .learner-dashboard-card {
  grid-column: auto;
  min-height: auto;
  width: 100%;
}

.learner-popup-body > label,
.learner-popup-body .stacked-form label,
.learner-popup-body .compact-form label {
  color: #231936;
}

body.learner-popup-active {
  overflow: hidden;
}

.learner-logout-link {
  margin-top: 22px;
  padding: 0 12px;
  width: 100%;
  border: 0;
  background: rgba(255, 255, 255, 0.08);
  text-align: left;
}

#pupil-dashboard .learner-main-panel {
  min-width: 0;
  padding: 0 24px 28px;
  background: transparent;
}

#pupil-dashboard .learner-main-panel > .section-heading,
#pupil-dashboard .learner-main-panel > .announcement-panel,
#pupil-dashboard .learner-main-panel > .learner-panel,
#pupil-dashboard .learner-main-panel > .recent-strip,
#pupil-dashboard .learner-main-panel > .resource-grid,
#pupil-dashboard .learner-main-panel > .insight-grid {
  display: none;
}

#learnerOverview > .learner-assignment-workspace {
  display: none;
}

.learner-managed-profile-fields {
  display: grid;
  gap: 0.75rem;
  padding: 0.9rem;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

.learner-managed-profile-fields .hint {
  margin: 0;
}

.learner-managed-profile-fields .text-field:disabled,
.learner-managed-profile-fields .text-field[readonly] {
  cursor: not-allowed;
  opacity: 0.82;
  background: color-mix(in srgb, var(--line) 35%, var(--surface));
}

.learner-topbar {
  position: sticky;
  top: 0;
  z-index: 4;
  min-height: 76px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  margin: 0 -24px 22px;
  padding: 14px 28px;
  border-bottom: 1px solid var(--learner-line);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
}

.learner-menu-button {
  min-height: 42px;
  border: 0;
  border-radius: 10px;
  padding: 0 12px;
  background: rgba(75, 0, 119, 0.08);
  color: var(--learner-purple);
  font-weight: 1000;
}

.learner-topbar > strong {
  color: #091b42;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
}

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

.learner-alert-icon,
.learner-mail-icon {
  min-width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #fff;
  color: var(--learner-purple);
  font-size: 0.78rem;
  font-weight: 1000;
  box-shadow: 0 8px 18px rgba(24, 20, 52, 0.11);
  position: relative;
}

.learner-alert-icon::before,
.learner-mail-icon::before {
  position: absolute;
  inset: auto auto -8px 50%;
  transform: translateX(-50%);
  color: #d82727;
  font-size: 0.68rem;
}

.learner-alert-icon::before { content: "Notice"; }
.learner-mail-icon::before { content: "Mail"; }

.learner-top-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(75, 0, 119, 0.15);
}

.learner-top-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.learner-topbar-actions div strong,
.learner-topbar-actions div span {
  display: block;
}

.learner-topbar-actions div span {
  margin-top: 2px;
  color: #667085;
  font-size: 0.84rem;
  font-weight: 800;
}

.learner-dashboard-shell {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 22px;
}

.learner-welcome-card,
.learner-dashboard-card,
.learner-summary-card {
  border: 1px solid var(--learner-line);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 14px 36px rgba(24, 20, 52, 0.08);
  overflow: hidden;
}

.learner-welcome-card {
  grid-column: span 5;
  min-height: 212px;
  display: grid;
  grid-template-columns: 1fr 180px;
  align-items: center;
  gap: 18px;
  padding: 28px 28px;
  color: #ffffff;
  background:
    radial-gradient(circle at 86% 22%, rgba(255, 255, 255, 0.22), transparent 20%),
    linear-gradient(135deg, #075fdb, #0742aa 56%, #4b0077);
}

.learner-welcome-card p {
  font-size: 1.05rem;
  font-weight: 800;
}

.learner-welcome-card h2 {
  margin: 8px 0 14px;
  font-size: clamp(2rem, 3.2vw, 3rem);
  line-height: 1;
}

.learner-welcome-card span {
  display: block;
  max-width: 360px;
  font-weight: 760;
  line-height: 1.65;
}

.learner-hero-illustration {
  min-height: 154px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 35%, #f9bf77 0 22%, transparent 23%),
    linear-gradient(#201334 0 0) 50% 52% / 84px 58px no-repeat,
    linear-gradient(#ffffff 0 0) 66% 78% / 92px 14px no-repeat,
    linear-gradient(135deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.08));
  position: relative;
}

.learner-hero-illustration::before {
  content: "";
  position: absolute;
  left: 36px;
  right: 28px;
  bottom: 24px;
  height: 16px;
  border-radius: 999px;
  background: #d6960e;
}

.learner-summary-grid {
  grid-column: span 7;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.learner-summary-card {
  min-height: 212px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 10px;
  text-align: center;
  padding: 18px;
  color: #091b42;
  font: inherit;
  cursor: pointer;
}

.learner-summary-card strong {
  font-size: clamp(1.85rem, 3vw, 2.7rem);
  color: #071a3e;
}

.learner-summary-card small {
  color: #1b1930;
  font-weight: 850;
}

.learner-summary-card em {
  color: #0756bf;
  font-size: 0.85rem;
  font-style: normal;
  font-weight: 900;
}

.learner-summary-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(75, 0, 119, 0.10), rgba(75, 0, 119, 0.20));
  color: var(--learner-purple);
}

.learner-summary-card.courses .learner-summary-icon::before { content: "C"; }
.learner-summary-card.assignments .learner-summary-icon::before { content: "A"; }
.learner-summary-card.exams .learner-summary-icon::before { content: "E"; }
.learner-summary-card.average .learner-summary-icon::before { content: "%"; }
.learner-summary-card.wallet .learner-summary-icon::before { content: "K"; }
.learner-summary-card.support .learner-summary-icon::before { content: "?"; }

.learner-summary-card.assignments {
  background: linear-gradient(135deg, #ffffff, #f2fff8);
}

.learner-summary-card.exams {
  background: linear-gradient(135deg, #ffffff, #fff8e9);
}

.learner-summary-card.average {
  background: linear-gradient(135deg, #ffffff, #f7f0ff);
}

.learner-dashboard-card {
  grid-column: span 4;
  min-height: 288px;
  padding: 18px;
}

.learner-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.learner-card-title h3 {
  color: #071a3e;
  font-size: 1.05rem;
}

.learner-card-title a,
.learner-card-title button,
.learner-card-title span {
  color: #0756bf;
  font-size: 0.82rem;
  font-weight: 900;
}

.learner-card-title button {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.learner-list {
  display: grid;
  gap: 8px;
}

.learner-list-row {
  display: grid;
  grid-template-columns: minmax(72px, auto) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 46px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #fbfcff;
  border: 1px solid #edf0f7;
}

.learner-list-row time,
.learner-list-row b {
  color: #071a3e;
  font-size: 0.78rem;
  font-weight: 900;
}

.learner-list-row span {
  min-width: 0;
}

.learner-list-row strong,
.learner-list-row small {
  display: block;
  overflow-wrap: anywhere;
}

.learner-list-row small {
  margin-top: 2px;
  color: #667085;
  font-weight: 750;
}

.learner-list-row > b {
  border-radius: 7px;
  padding: 5px 8px;
  background: #eef5ff;
  color: #0756bf;
}

.learner-item-icon {
  width: 40px;
  height: 40px;
  background: #eef5ff;
  color: #0756bf;
}

.learner-item-icon::before { content: "I"; }
.learner-item-icon.exam::before { content: "E"; }
.learner-item-icon.urgent::before { content: "!"; }
.learner-item-icon.notice::before { content: "N"; }
.learner-item-icon.homework::before { content: "H"; }

.learner-progress-row {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 18px;
  align-items: center;
}

.learner-donut {
  width: 164px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  background:
    radial-gradient(circle at center, #ffffff 0 52%, transparent 53%),
    conic-gradient(#19a86b var(--value), #f0f2f5 0);
}

.learner-donut strong,
.learner-donut span {
  grid-area: 1 / 1;
}

.learner-donut strong {
  transform: translateY(-8px);
  color: #101625;
  font-size: 1.65rem;
}

.learner-donut span {
  transform: translateY(18px);
  color: #667085;
  font-size: 0.72rem;
  font-weight: 850;
}

.learner-legend {
  display: grid;
  gap: 10px;
}

.learner-legend span {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 8px;
  align-items: center;
  color: #344054;
  font-size: 0.84rem;
}

.learner-legend i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--legend);
}

.learner-attendance-rate {
  display: block;
  color: #18a86b;
  font-size: 2.2rem;
  line-height: 1;
}

.learner-attendance-bar {
  height: 16px;
  margin: 18px 0;
  border-radius: 999px;
  background: #d6d9df;
  overflow: hidden;
}

.learner-attendance-bar i {
  display: block;
  width: var(--attendance);
  height: 100%;
  border-radius: inherit;
  background: repeating-linear-gradient(135deg, #18a86b 0 10px, #24bf7e 10px 20px);
}

.learner-attendance-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.learner-attendance-grid span,
.learner-attendance-grid b {
  display: block;
  text-align: center;
}

.learner-attendance-grid span {
  color: #667085;
  font-size: 0.82rem;
  font-weight: 800;
}

.learner-attendance-grid b {
  margin-bottom: 6px;
  color: #091b42;
  font-size: 1.3rem;
}

.learner-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  text-align: center;
}

.learner-calendar-grid b,
.learner-calendar-grid span {
  min-height: 32px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 0.82rem;
}

.learner-calendar-grid b {
  color: #667085;
}

.learner-calendar-grid span {
  color: #101625;
  font-weight: 750;
}

.learner-calendar-grid span.active {
  background: linear-gradient(135deg, #075fdb, #4b0077);
  color: #ffffff;
  box-shadow: 0 10px 20px rgba(75, 0, 119, 0.18);
}

#pupil-dashboard .learner-main-panel > .section-heading {
  margin-top: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--learner-line);
}

.timetable-dashboard-grid {
  display: grid;
  gap: 14px;
}

.timetable-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: color-mix(in srgb, var(--panel) 92%, var(--surface));
}

.compact-gate-forms {
  align-items: start;
}

.gate-pass-print-title {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  border: 2px solid #0f3d2e;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 14px 0;
  background: #f5fff9;
  color: #10231c;
}

.gate-pass-print-title strong {
  font-size: 1.05rem;
}

.gate-pass-table th {
  width: 18%;
}

.gate-pass-signatures {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 18px;
  margin-top: 24px;
  font-weight: 800;
  color: #111827;
}

.timetable-app {
  position: fixed;
  inset: 0;
  z-index: 70;
  padding: 28px;
  background: #e9eef6;
  overflow: auto;
}

.timetable-app.is-hidden {
  display: none;
}

.timetable-app.fullscreen-mode {
  padding: 0;
}

.timetable-app-shell {
  min-height: min(900px, calc(100vh - 56px));
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  max-width: 1480px;
  margin: 0 auto;
  border: 1px solid #cfd8e6;
  border-radius: 10px;
  overflow: hidden;
  background: #f8fafc;
  box-shadow: 0 18px 38px rgb(15 23 42 / 18%);
}

.fullscreen-mode .timetable-app-shell {
  min-height: 100vh;
  max-width: none;
  border-radius: 0;
}

.timetable-app-sidebar {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 18px;
  padding: 22px 16px;
  color: #ffffff;
  background: #2f4b78;
}

.timetable-app-brand,
.timetable-app-user {
  display: flex;
  gap: 12px;
  align-items: center;
}

.timetable-app-brand small,
.timetable-app-user small {
  display: block;
  color: #d8e2f3;
  font-weight: 800;
}

.timetable-app-icon {
  display: inline-grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 8px;
  background: #eff6ff;
  color: #174077;
  font-weight: 1000;
}

.timetable-app-nav {
  display: grid;
  gap: 8px;
}

.timetable-app-nav button {
  min-height: 42px;
  border: 0;
  border-radius: 6px;
  padding: 8px 12px;
  color: #e5edf8;
  background: transparent;
  text-align: left;
  font-weight: 900;
  cursor: pointer;
}

.timetable-app-nav button.active,
.timetable-app-nav button:hover {
  color: #10213d;
  background: #ffffff;
}

.timetable-app-main {
  display: grid;
  grid-template-rows: auto auto auto auto 1fr;
  min-width: 0;
}

.timetable-app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 28px;
  border-bottom: 1px solid #d5deec;
  background: #f8fafc;
}

.timetable-app-header h2 {
  margin: 0;
  color: #273b60;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
}

.timetable-app-header-actions,
.timetable-module-actions,
.timetable-module-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.timetable-module-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
  padding: 22px 28px 10px;
}

.timetable-module-card {
  min-height: 88px;
  display: grid;
  align-content: center;
  gap: 4px;
  border-radius: 8px;
  padding: 16px;
  color: #ffffff;
  box-shadow: inset -28px 0 0 rgb(255 255 255 / 9%);
}

.timetable-module-card strong {
  font-size: 2.4rem;
  line-height: 1;
}

.timetable-module-card span {
  font-weight: 900;
}

.timetable-module-card.blue { background: #256be6; }
.timetable-module-card.green { background: #56bd41; }
.timetable-module-card.red { background: #ef382f; }
.timetable-module-card.orange { background: #ff8218; }

.timetable-module-toolbar,
.timetable-module-actions {
  padding: 10px 28px;
  border-bottom: 1px solid #dbe3ef;
}

.timetable-module-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
  min-height: 0;
  padding: 18px 24px 24px;
}

.timetable-module-content {
  min-width: 0;
  display: grid;
  gap: 16px;
}

.timetable-correction-panel,
.timetable-module-panel {
  border: 1px solid #d6deeb;
  border-radius: 8px;
  background: #ffffff;
  padding: 16px;
  box-shadow: 0 8px 20px rgb(15 23 42 / 5%);
}

.timetable-correction-panel {
  align-self: start;
  position: sticky;
  top: 16px;
  display: grid;
  gap: 10px;
}

.timetable-correction-panel h3,
.timetable-module-panel h3 {
  margin: 0 0 8px;
  color: #17233f;
}

.timetable-overview-grid,
.timetable-module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.timetable-module-panel p {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid #e2e8f0;
}

.timetable-module-panel p:last-child {
  border-bottom: 0;
}

.timetable-module-panel p span {
  color: #31466f;
}

.timetable-analytics-panel {
  grid-column: span 2;
}

.timetable-mini-chart {
  height: 150px;
  display: flex;
  align-items: end;
  gap: 18px;
  padding: 18px;
  border-bottom: 1px solid #e2e8f0;
  background: linear-gradient(to top, #edf3fb 1px, transparent 1px) 0 0 / 100% 30px;
}

.timetable-mini-chart i {
  width: 28px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(#4b8cf0, #1f65d6);
}

.timetable-conflict-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

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

.timetable-heat-table td {
  text-align: center;
  font-weight: 900;
}

.timetable-heat-table .heat-hot {
  color: #7f1d1d;
  background: #fecaca;
}

.soft-warning-card {
  border-color: color-mix(in srgb, var(--gold) 48%, var(--line));
  background: color-mix(in srgb, var(--gold-soft) 60%, var(--panel));
}

.muted-card {
  opacity: 0.72;
}

.danger-text strong {
  color: #ef382f;
}

.correction-alert {
  border-radius: 8px;
  padding: 10px;
  font-weight: 800;
}

.correction-alert.hard {
  color: #7f1d1d;
  background: #fee2e2;
}

.correction-alert.soft {
  color: #854d0e;
  background: #fef3c7;
}

.full-width {
  width: 100%;
}

.timetable-stats-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.table-scroll {
  width: 100%;
  overflow-x: auto;
}

.timetable-grid-table {
  min-width: 760px;
}

.timetable-grid-table th {
  white-space: nowrap;
}

.timetable-grid-table th small {
  display: block;
  margin-top: 4px;
  color: #475569;
  font-size: 0.74rem;
}

.timetable-cell-item {
  display: grid;
  gap: 2px;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--timetable-subject-color, #114c8d) 28%, transparent);
  border-left: 4px solid var(--timetable-subject-color, #114c8d);
  border-radius: 6px;
  background: #eff6ff;
}

.timetable-cell-item + .timetable-cell-item {
  border-top: 1px dashed #cbd5e1;
  margin-top: 4px;
  padding-top: 6px;
}

.timetable-cell-item strong {
  color: #114c8d;
}

.timetable-cell-item.draggable {
  cursor: grab;
}

.timetable-cell-item.dragging {
  opacity: 0.55;
}

.timetable-cell-item.locked {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.timetable-cell-item.selected {
  box-shadow: 0 0 0 2px #f97316;
}

.timetable-cell-item.has-hard-conflict {
  background: #fee2e2;
  border-color: #ef4444;
}

.timetable-cell-item.has-soft-warning {
  background: #fff7ed;
  border-color: #f97316;
}

.timetable-cell-item small {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 800;
}

.timetable-cell-actions {
  gap: 4px;
  margin-top: 4px;
}

.timetable-cell-actions button {
  min-height: 28px;
  padding: 4px 7px;
  font-size: 0.72rem;
}

.timetable-drop-target {
  min-width: 118px;
  transition: background 0.18s ease, box-shadow 0.18s ease;
}

.timetable-drop-target.drag-over {
  background: #fff7ed;
  box-shadow: inset 0 0 0 2px #f97316;
}

.timetable-break-cell {
  min-width: 92px;
  text-align: center;
  background: #e0f2fe;
  color: #075985;
  vertical-align: middle;
}

.timetable-break-label {
  display: inline-grid;
  min-height: 48px;
  place-items: center;
  color: #075985;
  font-size: 0.82rem;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (max-width: 980px) {
  .timetable-app {
    padding: 0;
  }

  .timetable-app-shell,
  .timetable-module-layout {
    grid-template-columns: 1fr;
  }

  .timetable-app-sidebar {
    grid-template-rows: auto auto;
  }

  .timetable-app-user {
    display: none;
  }

  .timetable-app-nav {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }

  .timetable-correction-panel {
    position: static;
  }

  .timetable-analytics-panel {
    grid-column: auto;
  }
}

.timetable-empty-slot {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.timetable-print-page {
  display: grid;
  gap: 14px;
}

.timetable-print-meta {
  border: 1px solid #cbd5e1;
  padding: 10px;
}

.timetable-signature-row {
  margin-top: 24px;
  break-inside: avoid;
}

.invigilation-sample-table {
  min-width: 980px;
  border: 2px solid #111827;
  font-size: 0.84rem;
  text-transform: uppercase;
}

.invigilation-sample-table th,
.invigilation-sample-table td {
  border-color: #111827;
  padding: 4px 5px;
  line-height: 1.25;
}

.invigilation-sample-table th {
  background: #ffffff;
  color: #111827;
  font-weight: 1000;
}

.invigilation-sample-table .invigilation-school-row th {
  background: #b94d4d;
  color: #111827;
  font-size: 0.9rem;
  text-align: center;
  letter-spacing: 0.04em;
}

.invigilation-sample-table .invigilation-title-row th {
  background: #e9b6b6;
  color: #111827;
  font-size: 0.86rem;
  text-align: center;
  letter-spacing: 0.06em;
}

.invigilation-sample-table .invigilation-session-start td,
.invigilation-sample-table .invigilation-day-start td {
  border-top: 6px solid #c55757;
}

.audit-toolbar {
  justify-content: flex-start;
  margin-bottom: 10px;
}

.reply-box {
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 10px;
  background: color-mix(in srgb, var(--green-soft) 62%, var(--panel));
}

.pending-reply {
  border-left-color: var(--gold);
  background: color-mix(in srgb, var(--gold-soft) 62%, var(--panel));
  color: var(--muted);
  font-weight: 800;
}

.passport-preview,
.passport-mini,
.passport-large {
  display: grid;
  place-items: center;
  border: 2px solid color-mix(in srgb, var(--accent) 36%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, var(--panel)), color-mix(in srgb, var(--blue) 12%, var(--panel)));
  background-size: cover;
  background-position: center;
  color: var(--accent-dark);
  font-weight: 900;
  overflow: hidden;
}

.passport-preview {
  width: 112px;
  aspect-ratio: 1;
  border-radius: 8px;
  font-size: 1.6rem;
}

.passport-mini {
  width: 58px;
  height: 58px;
  border-radius: 8px;
  flex: 0 0 auto;
}

.passport-large {
  width: min(132px, 34vw);
  aspect-ratio: 1;
  border-radius: 8px;
  font-size: 2rem;
  flex: 0 0 auto;
}

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

.profile-row > div:last-child,
.profile-facts {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.profile-card {
  align-content: start;
}

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

.badge-grid,
.diagnostic-take {
  display: grid;
  gap: 10px;
}

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

.exam-card-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(430px, 1fr));
  gap: 18px;
  align-items: start;
}

.exam-card {
  width: min(100%, 560px);
  min-height: 350px;
  border: 3px solid #0d6a3a;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
  color: #1a261d;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-rows: auto 44px 1fr;
  position: relative;
}

.exam-card-header {
  display: grid;
  grid-template-columns: 74px 1fr 74px;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #d6e6dc;
  text-align: center;
}

.exam-card-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.exam-card-header span,
.exam-card-header strong,
.exam-card-header em {
  display: block;
}

.exam-card-header span {
  color: #16233a;
  font-weight: 1000;
  font-size: 0.88rem;
}

.exam-card-header strong {
  color: #9b6423;
  font-size: 1.38rem;
  line-height: 1.05;
  text-transform: uppercase;
}

.exam-card-header em {
  color: #1d2b23;
  font-family: Georgia, "Times New Roman", serif;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.exam-card-band {
  display: grid;
  place-items: center;
  background: #086238;
  color: #d6574d;
  font-weight: 1000;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.exam-card-body {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 150px;
  gap: 16px;
  align-items: end;
  padding: 18px 18px 16px;
}

.exam-card-watermark {
  position: absolute;
  left: 50%;
  bottom: 28px;
  width: 140px;
  transform: translateX(-50%);
  opacity: 0.18;
  pointer-events: none;
}

.exam-card-watermark img {
  width: 100%;
  display: block;
}

.exam-card-fields {
  display: grid;
  gap: 10px;
  position: relative;
  z-index: 1;
}

.exam-card-fields p {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 8px;
  align-items: baseline;
  color: #17472e;
  font-size: 1.08rem;
  font-weight: 900;
}

.exam-card-fields span {
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.exam-card-fields strong {
  color: #1d2b23;
  overflow-wrap: anywhere;
}

.signature-line strong {
  letter-spacing: 0.05em;
}

.exam-card-verification {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
}

.exam-card-verification .verify-code {
  margin: 0;
}

.exam-card-verification .official-mark-slot {
  min-width: 120px;
  min-height: 58px;
  font-size: 0.78rem;
}

.exam-card-verification .official-mark-slot img {
  max-width: 118px;
  max-height: 34px;
}

.exam-card-photo {
  width: 150px;
  height: 178px;
  display: grid;
  place-items: center;
  border: 3px solid #0d6a3a;
  border-radius: 4px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--green-soft) 72%, #fff), #fff);
  background-size: cover;
  background-position: center;
  color: #0d6a3a;
  font-weight: 1000;
  font-size: 2rem;
  z-index: 1;
}

.exam-card-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.id-card-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px;
  align-items: start;
}

.student-id-card {
  width: min(100%, 420px);
  min-height: 292px;
  border: 2px solid #114c8d;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  color: #111827;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-rows: 8px auto 1fr auto;
}

.student-id-topline {
  background: linear-gradient(90deg, #114c8d, #0b7a45 55%, #f6c84c);
}

.student-id-header {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid #dbe7f4;
}

.student-id-logo {
  width: 54px;
  height: 54px;
  object-fit: contain;
}

.student-id-header span,
.student-id-header strong,
.student-id-header em {
  display: block;
  overflow-wrap: anywhere;
}

.student-id-header span {
  color: #114c8d;
  font-weight: 1000;
  text-transform: uppercase;
  line-height: 1.1;
}

.student-id-header strong {
  color: #0b7a45;
  font-size: 0.95rem;
}

.student-id-header em {
  color: var(--muted);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 800;
}

.student-id-body {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px;
}

.student-id-media {
  display: grid;
  gap: 8px;
}

.student-id-photo {
  width: 108px;
  height: 132px;
  display: grid;
  place-items: center;
  border: 2px solid #0b7a45;
  border-radius: 4px;
  background: #eef7f1;
  color: #0b7a45;
  font-weight: 1000;
  font-size: 1.6rem;
  overflow: hidden;
}

.student-id-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.student-id-details {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.student-id-details p {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 8px;
  font-size: 0.82rem;
  line-height: 1.25;
}

.student-id-details span {
  color: #114c8d;
  font-weight: 1000;
}

.student-id-details strong {
  overflow-wrap: anywhere;
}

.student-id-status-note strong {
  color: var(--red);
}

.verify-code {
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 5px;
  display: grid;
  gap: 4px;
  justify-items: center;
  background: #fff;
  color: #111827;
  font-size: 0.62rem;
  font-weight: 1000;
}

.verify-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  width: 42px;
  height: 42px;
}

.verify-grid i {
  display: block;
  background: #fff;
  border: 1px solid #e5e7eb;
}

.verify-grid i.active {
  background: #111827;
  border-color: #111827;
}

.student-id-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  background: #f5f8fc;
  border-top: 1px solid #dbe7f4;
  color: #314155;
  font-size: 0.78rem;
  font-weight: 900;
}

.document-list {
  display: grid;
  gap: 18px;
}

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

.template-toggle-grid label {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  gap: 8px;
  align-items: center;
  background: #f8fbff;
  font-weight: 800;
}

.document-template-card {
  gap: 10px;
}

.template-mini-preview {
  border: 1px solid #d8e2ef;
  border-left: 5px solid var(--template-accent, #114c8d);
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
  display: grid;
  gap: 6px;
  max-height: 150px;
  overflow: hidden;
}

.template-mini-preview strong,
.template-mini-preview b {
  color: var(--template-accent, #114c8d);
}

.template-mini-preview p {
  margin: 0;
  color: #475569;
  font-size: 0.82rem;
  line-height: 1.35;
}

.template-mini-header {
  display: flex;
  gap: 8px;
  align-items: center;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0;
}

.template-mini-header span {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--template-accent, #114c8d);
}

.document-sheet {
  width: min(100%, 820px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: #111827;
  box-shadow: var(--shadow);
  padding: 22px;
  display: grid;
  gap: 16px;
}

.document-template-sheet {
  border-top: 8px solid var(--template-accent, #114c8d);
}

.template-layout-a4-landscape,
.template-layout-certificate-landscape {
  width: min(100%, 1120px);
}

.template-layout-receipt-slip {
  width: min(100%, 560px);
}

.template-layout-id-card {
  width: min(100%, 420px);
  min-height: 250px;
}

.template-header-compact .document-header {
  grid-template-columns: 52px 1fr 52px;
  padding-bottom: 8px;
}

.template-header-certificate .document-header {
  border-bottom-color: var(--template-accent, #114c8d);
}

.template-header-table .document-header {
  border-bottom: 3px double var(--template-accent, #114c8d);
}

.document-header {
  display: grid;
  grid-template-columns: 72px 1fr 72px;
  gap: 14px;
  align-items: center;
  text-align: center;
  border-bottom: 2px solid #0b7a45;
  padding-bottom: 12px;
}

.document-header img {
  width: 68px;
  height: 68px;
  object-fit: contain;
}

.document-header span,
.document-header strong,
.document-header em {
  display: block;
}

.document-header span {
  color: #314155;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.78rem;
}

.document-header strong {
  color: #114c8d;
  font-size: 1.35rem;
  line-height: 1.05;
  text-transform: uppercase;
}

.document-header em {
  color: #0b7a45;
  font-style: normal;
  font-weight: 1000;
  font-size: 1rem;
}

.document-template-header {
  border-bottom-color: var(--template-accent, #114c8d);
}

.document-template-logo-spacer {
  min-height: 54px;
}

.document-template-content {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.document-template-main {
  display: grid;
  gap: 14px;
}

.document-template-photo {
  width: 104px;
  height: 124px;
  border: 2px solid var(--template-accent, #114c8d);
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--template-accent, #114c8d);
  font-weight: 1000;
  background: #f8fbff;
  overflow: hidden;
}

.document-template-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.document-template-certificate-title {
  text-align: center;
  color: var(--template-accent, #114c8d);
  text-transform: uppercase;
  font-weight: 1000;
  font-size: 1.2rem;
}

.document-template-footer {
  border-top: 1px solid #d8e2ef;
  padding-top: 10px;
}

.document-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px;
  font-weight: 800;
}

.document-meta-grid span {
  overflow-wrap: anywhere;
}

.document-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.document-table th,
.document-table td {
  border: 1px solid #cbd5e1;
  padding: 8px;
  text-align: left;
  vertical-align: top;
}

.document-table th {
  background: #eef5ff;
  color: #114c8d;
}

.standard-report-card {
  width: min(100%, 1120px);
  border: 2px solid #0b7a45;
  border-top: 8px solid #114c8d;
  padding: 14px;
  gap: 10px;
  font-size: 0.82rem;
}

.standard-report-header {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.8fr) 94px;
  gap: 12px;
  align-items: stretch;
  border-bottom: 2px solid #0b7a45;
  padding-bottom: 8px;
}

.standard-report-school {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.standard-report-school img {
  width: 70px;
  height: 70px;
  object-fit: contain;
}

.standard-report-school span,
.standard-report-school strong,
.standard-report-school em,
.standard-report-school small,
.standard-report-title b,
.standard-report-title span {
  display: block;
}

.standard-report-school span {
  color: #334155;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.standard-report-school strong {
  color: #114c8d;
  font-size: 1.05rem;
  line-height: 1.08;
  text-transform: uppercase;
}

.standard-report-school em {
  color: #0b7a45;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 900;
}

.standard-report-school small {
  color: #475569;
  font-size: 0.68rem;
  font-weight: 700;
}

.standard-report-title {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 8px 10px;
  background: #f8fbff;
}

.standard-report-title b {
  color: #0b7a45;
  font-size: 1rem;
  text-transform: uppercase;
}

.standard-report-title span {
  color: #1f2937;
  font-size: 0.7rem;
  font-weight: 800;
  margin-top: 2px;
}

.standard-report-photo {
  border: 2px solid #114c8d;
  border-radius: 8px;
  background: #eef5ff;
  color: #114c8d;
  display: grid;
  min-height: 94px;
  overflow: hidden;
  place-items: center;
  font-weight: 1000;
}

.standard-report-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.standard-report-band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid #b8c7d8;
  background: #f8fafc;
}

.standard-report-band span {
  border-right: 1px solid #d7e0eb;
  border-bottom: 1px solid #d7e0eb;
  color: #10233f;
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 6px 8px;
}

.standard-report-band b {
  color: #0b7a45;
  display: block;
  font-size: 0.62rem;
  text-transform: uppercase;
}

.standard-report-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 10px;
  align-items: start;
}

.standard-report-body {
  min-width: 0;
}

.standard-report-body h3 {
  color: #114c8d;
  font-size: 0.9rem;
  margin: 0 0 6px;
  text-transform: uppercase;
}

.standard-performance-table {
  font-size: 0.76rem;
}

.standard-performance-table th,
.standard-performance-table td {
  padding: 5px 6px;
}

.standard-performance-table th {
  background: #114c8d;
  color: #fff;
}

.standard-report-side {
  display: grid;
  gap: 8px;
}

.standard-report-side section,
.standard-report-comments section {
  border: 1px solid #d2dbe7;
  border-radius: 8px;
  background: #fff;
  padding: 8px;
}

.standard-report-side h4,
.standard-report-comments h4 {
  color: #0b7a45;
  font-size: 0.72rem;
  margin: 0 0 6px;
  text-transform: uppercase;
}

.standard-report-side p {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding: 3px 0;
  border-bottom: 1px solid #edf2f7;
}

.standard-report-side p:last-child {
  border-bottom: 0;
}

.standard-report-side span,
.standard-report-side small {
  color: #475569;
  font-weight: 700;
}

.standard-report-side b {
  color: #10233f;
}

.standard-report-comments {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

.standard-report-comments p,
.standard-report-note {
  margin: 0;
}

.standard-report-note {
  font-size: 0.74rem;
}

@media (max-width: 860px) {
  .standard-report-header,
  .standard-report-main,
  .standard-report-comments {
    grid-template-columns: 1fr;
  }

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

.clearance-table td:last-child {
  min-width: 130px;
}

.document-signature-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  font-weight: 900;
}

.official-signature-row {
  align-items: end;
}

.official-mark-slot {
  min-width: 150px;
  min-height: 76px;
  border-top: 1px solid #1f2937;
  padding-top: 8px;
  display: grid;
  gap: 4px;
  align-content: end;
  color: #1f2937;
}

.official-mark-slot b,
.official-mark-slot em {
  display: block;
}

.official-mark-slot em {
  color: #64748b;
  font-size: 0.78rem;
  font-style: normal;
}

.official-mark-slot img {
  max-width: 150px;
  max-height: 48px;
  object-fit: contain;
  object-position: left bottom;
}

.official-paper-body {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  margin: 14px 0 18px;
  padding: 14px;
  line-height: 1.65;
  white-space: normal;
}

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

.official-mark-card {
  min-height: 150px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  display: grid;
  gap: 8px;
  align-content: start;
  background: #ffffff;
}

.official-mark-preview {
  min-height: 72px;
  border: 1px dashed #b9c7d9;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
  background: #f8fbff;
}

.official-mark-preview img {
  max-width: 100%;
  max-height: 68px;
  object-fit: contain;
}

.receipt-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  border: 1px solid #d8e0ea;
  border-radius: 8px;
  padding: 12px;
  background: #f8fbff;
}

.receipt-grid span {
  overflow-wrap: anywhere;
}

.document-note {
  border-left: 4px solid #0b7a45;
  background: #f4fbf6;
  padding: 10px 12px;
  font-weight: 800;
}

.certificate-document {
  text-align: center;
}

.certificate-border {
  border: 5px double #d6a12a;
  border-radius: 8px;
  padding: 24px;
  display: grid;
  gap: 14px;
}

.certificate-seal img {
  width: 96px;
  height: 96px;
  object-fit: contain;
}

.certificate-kicker {
  color: #314155;
  font-weight: 900;
  text-transform: uppercase;
}

.certificate-document h2 {
  color: #0b7a45;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.35rem;
  overflow-wrap: anywhere;
}

.sms-export-output {
  min-height: 180px;
  margin-top: 12px;
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.88rem;
}

.badge-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--gold-soft) 70%, var(--panel));
  padding: 12px;
  display: grid;
  gap: 5px;
}

.badge-card strong,
.badge-card span {
  overflow-wrap: anywhere;
}

.path-item {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 88%, var(--surface));
  color: var(--ink);
  padding: 12px;
  text-align: left;
  display: grid;
  gap: 5px;
}

.path-item strong,
.path-item span {
  overflow-wrap: anywhere;
}

.path-item span,
.quiz-feedback {
  color: var(--muted);
  font-weight: 800;
}

.empty-message {
  min-height: 220px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  text-align: center;
  padding: 20px;
}

.user-list {
  margin-bottom: 18px;
}

.class-list-group {
  display: grid;
  gap: 10px;
  margin-bottom: 20px;
}

.class-list-group > h3 {
  margin: 0;
  color: var(--green-dark);
}

.pupil-register-list {
  display: grid;
  gap: 12px;
}

.pupil-register-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
}

.pupil-register-card strong,
.pupil-register-card span {
  overflow-wrap: anywhere;
}

.pupil-register-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 14px;
  color: var(--muted);
  font-weight: 800;
}

.status-attention {
  border-color: color-mix(in srgb, var(--red) 45%, var(--line));
  background: color-mix(in srgb, var(--red) 8%, var(--panel));
}

.warning-status {
  background: color-mix(in srgb, var(--red) 12%, var(--panel));
  color: var(--red);
}

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

.user-card strong,
.user-card span {
  overflow-wrap: anywhere;
}

.user-actions {
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.inactive {
  opacity: 0.58;
}

.admin-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
  gap: 18px;
}

.admin-columns h3 {
  margin: 8px 0 10px;
}

.bar {
  height: 8px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
  margin-top: 8px;
}

.bar i {
  display: block;
  height: 100%;
  background: var(--accent);
  animation: barGrow var(--motion-slow) var(--motion-ease) both;
  transform-origin: left center;
}

.log-list article {
  padding: 12px;
}

.log-list strong,
.log-list span {
  display: block;
}

.viewer-dialog {
  width: min(960px, calc(100vw - 26px));
  max-height: calc(100dvh - 24px);
  margin: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow);
  padding: 0;
}

.viewer-dialog[open] {
  animation: scaleFade var(--motion-medium) var(--motion-ease) both;
}

.viewer-dialog::backdrop {
  background: rgba(18, 28, 40, 0.42);
  animation: backdropFade var(--motion-medium) ease both;
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  padding: 18px;
  border-bottom: 1px solid var(--line);
}

.dialog-header h2 {
  overflow-wrap: anywhere;
}

.viewer-body {
  padding: 18px;
  overflow: auto;
  max-height: calc(100dvh - 150px);
  overscroll-behavior: contain;
}

.form-dialog {
  width: min(680px, calc(100vw - 26px));
}

.form-dialog > form {
  max-height: calc(100dvh - 24px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.dashboard-form-managed:not(.dashboard-form-dialog-active) {
  display: none !important;
}

.dashboard-form-launcher {
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue-soft) 45%, var(--panel)), var(--panel));
  box-shadow: 0 12px 30px rgba(20, 31, 44, 0.08);
  margin: 0 0 16px;
  padding: 14px;
}

.dashboard-form-launcher-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.dashboard-form-launcher-heading h3,
.dashboard-form-launcher-heading p {
  margin: 0;
}

.dashboard-form-launcher-heading span {
  color: var(--muted);
  font-weight: 850;
  font-size: 0.88rem;
}

.dashboard-form-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.dashboard-form-group {
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 92%, #ffffff);
  padding: 10px;
  display: grid;
  gap: 8px;
}

.dashboard-form-group strong {
  color: var(--ink);
  font-size: 0.88rem;
}

.dashboard-form-group div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.dashboard-form-group button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--brand-blue);
  cursor: pointer;
  font-weight: 850;
  min-height: 34px;
  padding: 7px 10px;
  text-align: left;
}

.dashboard-form-group button:hover,
.dashboard-form-group button.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 74%, #ffffff);
  color: var(--accent);
}

.dashboard-form-dialog {
  width: min(920px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
}

.dashboard-form-dialog-body {
  max-height: calc(100dvh - 130px);
}

.dashboard-form-dialog-active {
  display: grid !important;
  gap: 14px;
}

.dashboard-tool-dialog-active {
  display: block !important;
  width: 100%;
  min-width: 0;
  margin: 0;
}

#dashboardFormBody > #teacherStats.dashboard-tool-dialog-active,
#dashboardFormBody > .stats-grid.dashboard-tool-dialog-active,
#dashboardFormBody > .resource-grid.dashboard-tool-dialog-active,
#dashboardFormBody > .insight-grid.dashboard-tool-dialog-active {
  display: grid !important;
}

#teacher-dashboard.teacher-tool-popup-mode.teacher-collapsed-mode .teacher-panel-active {
  display: none !important;
}

.dashboard-form-dialog.dashboard-tool-dialog {
  width: min(1100px, calc(100vw - 24px));
}

.teacher-context-form-launcher {
  width: 100%;
  min-height: 58px;
  border: 1px solid color-mix(in srgb, var(--brand-blue) 34%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--blue-soft) 58%, var(--panel));
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 0;
  padding: 10px 12px;
  text-align: left;
}

.teacher-context-form-launcher:hover,
.teacher-context-form-launcher.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 68%, var(--panel));
}

.teacher-context-form-launcher span,
.teacher-context-form-launcher strong,
.teacher-context-form-launcher small {
  display: block;
}

.teacher-context-form-launcher small {
  color: var(--muted);
  margin-top: 3px;
}

.teacher-context-form-launcher b {
  border-radius: 999px;
  background: var(--brand-blue);
  color: #ffffff;
  flex: 0 0 auto;
  font-size: 0.82rem;
  padding: 6px 10px;
}

.teacher-context-form-launcher[hidden] {
  display: none !important;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 18px 18px;
  border-top: 1px solid var(--line);
}

.pilot-dialog-message {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--blue-soft) 42%, var(--panel));
  padding: 12px;
  margin-bottom: 14px;
}

.pilot-dialog-message p {
  margin: 0 0 6px;
}

.pilot-dialog-message p:last-child {
  margin-bottom: 0;
}

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

.pilot-dialog-field,
.pilot-dialog-check {
  display: grid;
  gap: 6px;
  font-weight: 800;
}

.pilot-dialog-check {
  grid-template-columns: auto 1fr;
  align-items: center;
}

.pilot-dialog-field.wide-field,
.pilot-dialog-check.wide-field {
  grid-column: 1 / -1;
}

.pilot-dialog-field input,
.pilot-dialog-field select,
.pilot-dialog-field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  padding: 10px 12px;
  font: inherit;
}

.pilot-dialog-field textarea {
  resize: vertical;
}

.form-error {
  color: var(--red);
  font-weight: 900;
  margin: 12px 0 0;
}

.danger-btn {
  background: var(--red) !important;
  border-color: var(--red) !important;
  color: #ffffff !important;
}

.igss-system-notification,
.igss-system-toast {
  --notification-color: var(--brand-blue);
  --notification-soft: color-mix(in srgb, var(--brand-blue) 13%, var(--panel));
}

.igss-notification-success {
  --notification-color: #15875c;
  --notification-soft: color-mix(in srgb, #24a66f 13%, var(--panel));
}

.igss-notification-warning {
  --notification-color: #b66a00;
  --notification-soft: color-mix(in srgb, #e09a24 15%, var(--panel));
}

.igss-notification-error {
  --notification-color: #c33c4b;
  --notification-soft: color-mix(in srgb, #dc5261 13%, var(--panel));
}

.igss-system-notification {
  width: min(540px, calc(100vw - 28px));
  max-width: 540px;
  border: 0;
  border-radius: 20px;
  background: transparent;
  color: var(--ink);
  padding: 0;
  overflow: visible;
  box-shadow: 0 30px 80px rgba(8, 25, 51, 0.32);
}

.igss-system-notification::backdrop {
  background: rgba(10, 26, 51, 0.58);
  backdrop-filter: blur(5px);
}

.igss-system-notification-fallback {
  position: fixed;
  inset: 50% auto auto 50%;
  z-index: 20000;
  transform: translate(-50%, -50%);
}

.igss-system-notification-card {
  display: grid;
  justify-items: center;
  gap: 14px;
  border: 1px solid color-mix(in srgb, var(--notification-color) 28%, var(--line));
  border-radius: 20px;
  background: var(--panel);
  padding: 36px 34px 30px;
  text-align: center;
}

.igss-notification-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 3px solid var(--notification-color);
  border-radius: 50%;
  background: var(--notification-soft);
  color: var(--notification-color);
  font-size: 1.35rem;
  font-weight: 950;
  line-height: 1;
}

.igss-notification-icon-large {
  width: 70px;
  height: 70px;
  border-width: 5px;
  font-size: 2.35rem;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--notification-color) 22%, transparent);
}

.igss-system-notification h2 {
  margin: 2px 0 0;
  color: var(--ink);
  font-size: clamp(1.55rem, 4vw, 2rem);
  line-height: 1.1;
}

.igss-system-notification p {
  max-width: 44ch;
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
  white-space: pre-line;
}

.igss-system-notification-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 8px;
}

.igss-system-notification-actions button {
  min-width: 132px;
}

.igss-system-notification-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: -2px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.igss-system-notification-links a {
  color: var(--brand-blue);
  font-weight: 800;
  text-decoration: none;
}

.igss-system-notification-links a:hover,
.igss-system-notification-links a:focus-visible {
  text-decoration: underline;
}

.igss-system-notification-actions .primary-btn {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
}

.igss-notification-error .igss-system-notification-actions .primary-btn {
  background: var(--notification-color);
  border-color: var(--notification-color);
}

.igss-system-toast-stack {
  position: fixed;
  z-index: 19000;
  top: max(18px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  display: grid;
  gap: 10px;
  width: min(390px, calc(100vw - 28px));
  pointer-events: none;
}

.igss-system-toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--notification-color) 28%, var(--line));
  border-left: 5px solid var(--notification-color);
  border-radius: 14px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 18px 50px rgba(8, 25, 51, 0.24);
  opacity: 0;
  padding: 15px 16px;
  transform: translateX(28px);
  transition: opacity 180ms ease, transform 220ms ease;
}

.igss-system-toast.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.igss-system-toast.is-leaving {
  opacity: 0;
  transform: translateX(28px);
}

.igss-system-toast-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.igss-system-toast-copy strong {
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.2;
}

.igss-system-toast-copy > span {
  color: var(--muted);
  font-size: 0.91rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
  white-space: pre-line;
}

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

  .igss-system-notification-card {
    padding: 30px 20px 24px;
  }

  .igss-system-notification-actions {
    flex-direction: column-reverse;
  }

  .igss-system-notification-actions button {
    width: 100%;
  }

  .igss-system-toast-stack {
    top: max(10px, env(safe-area-inset-top));
    right: 10px;
    width: calc(100vw - 20px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .igss-system-toast {
    transition: none;
  }
}

.viewer-body iframe,
.viewer-body video,
.viewer-body img {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.viewer-body iframe {
  height: min(72vh, 760px);
}

.viewer-body img {
  max-height: 72vh;
  object-fit: contain;
}

.viewer-body video {
  max-height: 72vh;
}

.learning-support {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--green-soft) 62%, var(--panel));
  padding: 14px;
  margin-bottom: 14px;
  display: grid;
  gap: 10px;
}

.learning-support strong,
.learning-support span {
  display: block;
}

.learning-support span {
  color: var(--muted);
  font-weight: 800;
}

.study-viewer-dialog {
  width: min(1540px, calc(100vw - 24px));
  height: calc(100vh - 24px);
  max-height: none;
}

.viewer-window-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.viewer-window-actions .ghost-btn {
  min-height: 38px;
}

.study-viewer-dialog.viewer-maximized {
  width: 100vw;
  max-width: none;
  height: 100vh;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: 0;
}

.study-viewer-dialog.viewer-maximized .viewer-body {
  height: calc(100vh - 108px);
}

.study-viewer-dialog.viewer-minimized {
  position: fixed;
  inset: auto 14px 14px auto;
  width: min(520px, calc(100vw - 28px));
  height: auto;
  max-height: none;
  margin: 0;
}

.study-viewer-dialog.viewer-minimized .dialog-header {
  border-bottom: 0;
}

.study-viewer-dialog.viewer-minimized .viewer-body {
  display: none;
}

.study-viewer-dialog.viewer-minimized #viewerMeta {
  display: none;
}

.study-viewer-dialog .viewer-body {
  height: calc(100vh - 132px);
  max-height: none;
  display: grid;
  align-content: start;
  gap: 14px;
}

.study-reader-toolbox {
  border: 1px solid var(--line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--panel) 94%, var(--accent-soft));
  overflow: clip;
}

.study-reader-toolbox > summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  cursor: pointer;
  color: var(--ink);
  font-weight: 850;
  list-style: none;
}

.study-reader-toolbox > summary::-webkit-details-marker {
  display: none;
}

.study-reader-toolbox > summary::after {
  content: "+";
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--accent);
  font-size: 1.2rem;
}

.study-reader-toolbox[open] > summary::after {
  content: "−";
}

.study-reader-toolbox > summary span,
.study-reader-toolbox > summary small {
  display: block;
}

.study-reader-toolbox > summary small {
  margin-left: auto;
  color: var(--muted);
  font-weight: 650;
}

.study-reader-toolbox > .learning-support,
.study-reader-toolbox > .study-reader-toolbar,
.study-reader-toolbox > .note-view,
.study-reader-toolbox > .quiz-view {
  margin: 0;
  border-width: 1px 0 0;
  border-radius: 0;
}

@media (max-width: 640px) {
  .study-viewer-dialog .dialog-header {
    align-items: stretch;
    flex-direction: column;
  }

  .viewer-window-actions {
    justify-content: flex-start;
  }

  .study-viewer-dialog.viewer-minimized {
    inset: auto 8px 8px 8px;
    width: auto;
  }
}

@media print {
  .global-powered-footer { display: none !important; }
}

.learner-recovery-dialog {
  width: min(1180px, 96vw);
}

.learner-recovery-summary {
  display: grid;
  grid-template-columns: minmax(150px, 220px) 1fr;
  gap: 18px;
  align-items: center;
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid #cfe0d4;
  border-radius: 16px;
  background: linear-gradient(135deg, #f2faf5, #fff9e7);
}

.learner-recovery-summary > div {
  display: grid;
  gap: 2px;
}

.learner-recovery-summary strong {
  color: #075f34;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1;
}

.learner-recovery-summary span,
.learner-recovery-table small {
  display: block;
  color: #5f6e65;
  font-size: .82rem;
}

.learner-recovery-summary p {
  margin: 0;
}

.learner-recovery-table td {
  vertical-align: top;
}

.learner-recovery-table .primary-btn {
  white-space: nowrap;
}

@media (max-width: 700px) {
  .learner-recovery-summary {
    grid-template-columns: 1fr;
  }
}

.study-reader-toolbar {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, #ffffff 92%, var(--accent-soft));
  box-shadow: 0 8px 22px rgba(20, 31, 44, 0.08);
  padding: 10px;
}

.study-reader-toolbar strong,
.study-reader-toolbar span {
  display: block;
}

.study-reader-toolbar span {
  color: var(--muted);
  font-size: 0.86rem;
}

.study-reader-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.study-reader-actions .secondary-btn.active {
  background: var(--gold);
  border-color: var(--gold);
  color: #111827;
}

.highlight-swatch {
  width: 34px;
  height: 34px;
  border: 2px solid transparent;
  border-radius: 50%;
  background: var(--swatch);
  cursor: pointer;
}

.highlight-swatch.active {
  border-color: #0c1f46;
  box-shadow: 0 0 0 3px rgba(20, 79, 150, 0.15);
}

.study-reader-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

.study-file-preview {
  min-width: 0;
}

.study-file-preview iframe {
  height: calc(100dvh - 230px);
  min-height: 520px;
}

.study-viewer-dialog.viewer-maximized .study-file-preview iframe {
  height: calc(100dvh - 190px);
}

.study-highlight-surface {
  line-height: 1.72;
  font-size: var(--reader-scale);
}

.study-highlight {
  border-radius: 4px;
  box-decoration-break: clone;
  padding: 0 2px;
}

.study-viewer-open {
  overflow: hidden;
}

.quiz-feedback {
  min-height: 28px;
  border-radius: 8px;
  padding: 8px;
  background: color-mix(in srgb, var(--panel) 70%, var(--surface));
}

.correct-feedback {
  color: var(--accent-dark);
  background: var(--green-soft);
}

.needs-feedback {
  color: var(--red);
  background: color-mix(in srgb, var(--red) 9%, var(--panel));
}

.print-root {
  display: none;
}

.print-selection {
  background: #fff;
  color: #111827;
}

.print-selection-heading {
  display: none;
}

.igss-class-list-document {
  color: #303030;
  font-family: Arial, Helvetica, sans-serif;
}

.igss-class-list-page {
  display: flex;
  min-height: 277mm;
  flex-direction: column;
  background: #fff;
}

.igss-class-list-top-line {
  height: 1.5px;
  margin-bottom: 4mm;
  background: #008000;
}

.igss-class-list-header {
  display: grid;
  grid-template-columns: 28mm minmax(0, 1fr) 28mm;
  align-items: center;
  gap: 4mm;
  min-height: 30mm;
  text-align: center;
}

.igss-class-list-header img {
  width: 26mm;
  height: 26mm;
  object-fit: contain;
}

.igss-class-list-header span,
.igss-class-list-header strong {
  display: block;
}

.igss-class-list-header span {
  margin-bottom: 4mm;
  color: #008000;
  font-size: 14pt;
  font-weight: 900;
}

.igss-class-list-header strong {
  color: #333;
  font-size: 16pt;
  line-height: 1.15;
  text-transform: uppercase;
}

.igss-class-list-page > h1 {
  margin: 1.5mm auto 0;
  width: 72%;
  border: 1.5px solid #008000;
  border-radius: 3mm;
  padding: 3mm 4mm;
  color: #006400;
  background: #f5fbf5;
  font-size: 13.5pt;
  line-height: 1.1;
  text-align: center;
}

.igss-class-list-meta,
.igss-class-list-totals {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2mm;
  border: 1px solid #008000;
  border-top: 0;
  min-height: 7mm;
  padding: 1mm 3mm;
  font-size: 9pt;
  text-align: center;
}

.igss-class-list-meta {
  margin-top: .8mm;
  color: #4a4a4a;
  background: #fafafa;
}

.igss-class-list-meta b {
  font-weight: 600;
}

.igss-class-list-meta i,
.igss-class-list-totals i {
  font-style: normal;
}

.igss-class-list-totals {
  color: #006400;
  background: #f7fcf7;
  font-weight: 900;
}

.igss-class-list-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6mm;
  align-items: start;
  margin-top: 1mm;
}

.igss-class-list-columns.single-column {
  grid-template-columns: minmax(0, 1fr);
}

.igss-class-list-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 7.6pt;
}

.igss-class-list-table th,
.igss-class-list-table td {
  height: 5.65mm;
  border: .65px solid #222;
  padding: .8mm 1.3mm;
  overflow: hidden;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.igss-class-list-table th {
  border-color: #008000;
  color: #fff;
  background: #008000;
  font-size: 8pt;
  font-weight: 900;
  text-align: center;
}

.igss-class-list-table th:nth-child(1),
.igss-class-list-table td:nth-child(1) {
  width: 8%;
  text-align: center;
}

.igss-class-list-table th:nth-child(2),
.igss-class-list-table td:nth-child(2) {
  width: 38%;
}

.igss-class-list-table th:nth-child(3),
.igss-class-list-table td:nth-child(3) {
  width: 44%;
}

.igss-class-list-table th:nth-child(4),
.igss-class-list-table td:nth-child(4) {
  width: 10%;
  text-align: center;
}

.igss-class-list-empty-row td {
  color: #6b7280;
  text-align: center !important;
}

.igss-class-list-footer {
  margin-top: auto;
  border-top: 1px solid #008000;
  padding-top: 2mm;
  color: #666;
  font-size: 8pt;
}

.igss-class-list-footer > div {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 4mm;
}

.igss-class-list-footer > div span:nth-child(2) {
  text-align: center;
}

.igss-class-list-footer > div span:last-child {
  text-align: right;
}

.igss-class-list-footer small {
  display: block;
  margin-top: 1mm;
  color: #008000;
  font-size: 7pt;
  font-style: italic;
  text-align: center;
}

@page timetableLandscape {
  size: A4 landscape;
  margin: 8mm;
}

@page igssClassList {
  size: A4 portrait;
  margin: 8mm;
}

@page standardReportLandscape {
  size: A4 landscape;
  margin: 7mm;
}

@media print {
  body[data-print-active="true"] {
    background: #fff !important;
  }

  body[data-print-active="true"] > :not(.print-root) {
    display: none !important;
  }

  body[data-print-active="true"] .print-root {
    display: block !important;
    background: #fff !important;
    color: #111827 !important;
    padding: 0 !important;
  }

  body[data-print-active="true"] .print-selection {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body[data-print-active="true"] .print-selection-heading {
    display: block !important;
    margin: 0 0 8mm;
    color: #111827;
    font-size: 15pt;
    font-weight: 900;
    text-align: center;
  }

  body[data-print-mode="igss-class-list"] .print-selection-heading {
    display: none !important;
  }

  body[data-print-mode="igss-class-list"] .print-selection {
    page: igssClassList;
  }

  body[data-print-mode="igss-class-list"] .igss-class-list-page {
    width: 194mm;
    max-width: 194mm;
    min-height: 277mm;
    break-after: page;
    page-break-after: always;
  }

  body[data-print-mode="igss-class-list"] .igss-class-list-page:last-child {
    break-after: auto;
    page-break-after: auto;
  }

  body[data-print-mode="igss-class-list"] .igss-class-list-header,
  body[data-print-mode="igss-class-list"] .igss-class-list-meta,
  body[data-print-mode="igss-class-list"] .igss-class-list-totals,
  body[data-print-mode="igss-class-list"] .igss-class-list-columns,
  body[data-print-mode="igss-class-list"] .igss-class-list-footer {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  body[data-print-active="true"] .print-root .insight-panel,
  body[data-print-active="true"] .print-root .storage-panel {
    background: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  body[data-print-active="true"] .print-root .section-heading,
  body[data-print-active="true"] .print-root .filter-row,
  body[data-print-active="true"] .print-root .card-actions,
  body[data-print-active="true"] .print-root form,
  body[data-print-active="true"] .print-root button,
  body[data-print-active="true"] .print-root textarea,
  body[data-print-active="true"] .print-root input,
  body[data-print-active="true"] .print-root select {
    display: none !important;
  }

  body[data-print-mode="learner-exit-pass"] .print-selection {
    max-width: 190mm;
    margin: 0 auto !important;
  }

  body[data-print-mode="learner-exit-pass"] .learner-exit-pass-print {
    color: #111827 !important;
    background: #fff !important;
  }

  body[data-print-mode="learner-exit-pass"] .gate-pass-print-title,
  body[data-print-mode="learner-exit-pass"] .gate-pass-table,
  body[data-print-mode="learner-exit-pass"] .gate-pass-signatures {
    break-inside: avoid;
  }

  body[data-print-mode="document-template"] .print-selection {
    display: grid !important;
    justify-items: center;
  }

  body[data-print-mode="document-template"] .document-sheet {
    box-shadow: none !important;
    break-inside: avoid;
  }

  body[data-print-mode="document-template"] .template-layout-a4-landscape,
  body[data-print-mode="document-template"] .template-layout-certificate-landscape {
    width: 277mm;
    max-width: 277mm;
  }

  body[data-print-mode="document-template"] .template-layout-id-card {
    width: 86mm;
    min-height: 54mm;
  }

  body[data-print-mode="document-template"] .template-layout-receipt-slip {
    width: 130mm;
  }

  body[data-print-mode^="timetable-"] .print-root {
    width: 277mm;
    max-width: 277mm;
  }

  body[data-print-mode^="timetable-"] .print-selection {
    page: timetableLandscape;
  }

  body[data-print-mode^="timetable-"] .table-scroll {
    overflow: visible !important;
  }

  body[data-print-mode^="timetable-"] .timetable-print-page {
    gap: 6mm;
  }

  body[data-print-mode^="timetable-"] .timetable-grid-table {
    min-width: 0;
    table-layout: fixed;
    font-size: 8.5pt;
  }

  body[data-print-mode^="timetable-masterTimetableGrid"] .timetable-grid-table,
  body[data-print-mode^="timetable-classTimetableGrid"] .timetable-grid-table,
  body[data-print-mode^="timetable-teacherTimetableGrid"] .timetable-grid-table,
  body[data-print-mode^="timetable-roomTimetableGrid"] .timetable-grid-table {
    border: 2px solid #111827;
  }

  body[data-print-mode^="timetable-"] .document-table th,
  body[data-print-mode^="timetable-"] .document-table td {
    padding: 4px;
  }

  body[data-print-mode^="timetable-"] .thread-card {
    border: 0;
    padding: 0;
    box-shadow: none;
    background: #fff;
  }

  body[data-print-mode="parent-reports"] .site-header,
  body[data-print-mode="parent-reports"] .side-panel,
  body[data-print-mode="parent-reports"] .admin-columns,
  body[data-print-mode="parent-reports"] .storage-panel:not(:has(#parentReportList)),
  body[data-print-mode="parent-reports"] #adminStats,
  body[data-print-mode="parent-reports"] #announcementList,
  body[data-print-mode="parent-reports"] #reportList,
  body[data-print-mode="parent-reports"] .section-heading:has(+ #adminStats) {
    display: none !important;
  }

  body[data-print-mode="parent-reports"] .view,
  body[data-print-mode="parent-reports"] .dashboard-view.active,
  body[data-print-mode="parent-reports"] .content-panel {
    display: block !important;
    padding: 0 !important;
  }

  body[data-print-mode="parent-reports"] .parent-report-card {
    break-inside: avoid;
    box-shadow: none;
  }

  body[data-print-mode="portfolio"] .site-header,
  body[data-print-mode="portfolio"] .side-panel,
  body[data-print-mode="portfolio"] #learningPathPanel,
  body[data-print-mode="portfolio"] #offlineSearchPanel,
  body[data-print-mode="portfolio"] #learnerProfileCard,
  body[data-print-mode="portfolio"] #remedialPanel,
  body[data-print-mode="portfolio"] #diagnosticPanel,
  body[data-print-mode="portfolio"] #studyCoachPanel,
  body[data-print-mode="portfolio"] #summaryPanel,
  body[data-print-mode="portfolio"] #readingAssistantPanel,
  body[data-print-mode="portfolio"] #careerPanel,
  body[data-print-mode="portfolio"] #weeklyGoalPanel,
  body[data-print-mode="portfolio"] #selfAssessmentPanel,
  body[data-print-mode="portfolio"] #readingLogPanel,
  body[data-print-mode="portfolio"] #learnerSupportPlanPanel,
  body[data-print-mode="portfolio"] #helpQueuePanel,
  body[data-print-mode="portfolio"] #classroomPanel,
  body[data-print-mode="portfolio"] #badgePanel,
  body[data-print-mode="portfolio"] #recentList,
  body[data-print-mode="portfolio"] #pupilResourceList,
  body[data-print-mode="portfolio"] .insight-grid section:not(:has(#portfolioList)) {
    display: none !important;
  }

  body[data-print-mode="portfolio"] .view,
  body[data-print-mode="portfolio"] .dashboard-view.active,
  body[data-print-mode="portfolio"] .content-panel,
  body[data-print-mode="portfolio"] .insight-grid,
  body[data-print-mode="portfolio"] .insight-grid section:has(#portfolioList) {
    display: block !important;
    padding: 0 !important;
  }

  body[data-print-mode="exam-cards"] .site-header,
  body[data-print-mode="exam-cards"] .side-panel,
  body[data-print-mode="exam-cards"] .admin-columns,
  body[data-print-mode="exam-cards"] .content-panel > .section-heading,
  body[data-print-mode="exam-cards"] .storage-panel:not(.exam-card-panel),
  body[data-print-mode="exam-cards"] #adminStats,
  body[data-print-mode="exam-cards"] #announcementList,
  body[data-print-mode="exam-cards"] #reportList,
  body[data-print-mode="exam-cards"] .exam-card-panel > .section-heading {
    display: none !important;
  }

  body[data-print-mode="exam-cards"] .view,
  body[data-print-mode="exam-cards"] .dashboard-view.active,
  body[data-print-mode="exam-cards"] .content-panel,
  body[data-print-mode="exam-cards"] .exam-card-panel {
    display: block !important;
    padding: 0 !important;
    background: #fff !important;
  }

  body[data-print-mode="exam-cards"] .exam-card-list {
    display: grid !important;
    grid-template-columns: repeat(2, 130mm);
    gap: 8mm;
    align-items: start;
  }

  body[data-print-mode="exam-cards"] .exam-card {
    width: 130mm;
    min-height: 82mm;
    box-shadow: none;
    break-inside: avoid;
  }

  body[data-print-mode="exam-cards"] .exam-card-header {
    grid-template-columns: 18mm 1fr 18mm;
    padding: 3mm 4mm;
  }

  body[data-print-mode="exam-cards"] .exam-card-logo {
    width: 17mm;
    height: 17mm;
  }

  body[data-print-mode="exam-cards"] .exam-card-header strong {
    font-size: 14pt;
  }

  body[data-print-mode="exam-cards"] .exam-card-body {
    grid-template-columns: 1fr 34mm;
    padding: 4mm;
  }

  body[data-print-mode="exam-cards"] .exam-card-photo {
    width: 34mm;
    height: 41mm;
  }

  body[data-print-mode="student-ids"] .site-header,
  body[data-print-mode="student-ids"] .side-panel,
  body[data-print-mode="student-ids"] .admin-columns,
  body[data-print-mode="student-ids"] .content-panel > .section-heading,
  body[data-print-mode="student-ids"] .storage-panel:not(.student-id-panel),
  body[data-print-mode="student-ids"] #adminStats,
  body[data-print-mode="student-ids"] #announcementList,
  body[data-print-mode="student-ids"] #reportList,
  body[data-print-mode="student-ids"] .student-id-panel > .section-heading,
  body[data-print-mode="result-slips"] .site-header,
  body[data-print-mode="result-slips"] .side-panel,
  body[data-print-mode="result-slips"] .admin-columns,
  body[data-print-mode="result-slips"] .content-panel > .section-heading,
  body[data-print-mode="result-slips"] .storage-panel:not(.result-slip-panel),
  body[data-print-mode="result-slips"] #adminStats,
  body[data-print-mode="result-slips"] #announcementList,
  body[data-print-mode="result-slips"] #reportList,
  body[data-print-mode="result-slips"] .result-slip-panel > .section-heading,
  body[data-print-mode="certificates"] .site-header,
  body[data-print-mode="certificates"] .side-panel,
  body[data-print-mode="certificates"] .admin-columns,
  body[data-print-mode="certificates"] .content-panel > .section-heading,
  body[data-print-mode="certificates"] .storage-panel:not(.certificate-panel),
  body[data-print-mode="certificates"] #adminStats,
  body[data-print-mode="certificates"] #announcementList,
  body[data-print-mode="certificates"] #reportList,
  body[data-print-mode="certificates"] .certificate-panel > .section-heading,
  body[data-print-mode="clearance"] .site-header,
  body[data-print-mode="clearance"] .side-panel,
  body[data-print-mode="clearance"] .admin-columns,
  body[data-print-mode="clearance"] .content-panel > .section-heading,
  body[data-print-mode="clearance"] .storage-panel:not(.clearance-panel),
  body[data-print-mode="clearance"] #adminStats,
  body[data-print-mode="clearance"] #announcementList,
  body[data-print-mode="clearance"] #reportList,
  body[data-print-mode="clearance"] .clearance-panel > .section-heading,
  body[data-print-mode="fee-receipts"] .site-header,
  body[data-print-mode="fee-receipts"] .side-panel,
  body[data-print-mode="fee-receipts"] .admin-columns,
  body[data-print-mode="fee-receipts"] .content-panel > .section-heading,
  body[data-print-mode="fee-receipts"] .storage-panel:not(.fee-receipt-panel),
  body[data-print-mode="fee-receipts"] #adminStats,
  body[data-print-mode="fee-receipts"] #announcementList,
  body[data-print-mode="fee-receipts"] #reportList,
  body[data-print-mode="fee-receipts"] .fee-receipt-panel > .section-heading,
  body[data-print-mode="custom-report"] .site-header,
  body[data-print-mode="custom-report"] .side-panel,
  body[data-print-mode="custom-report"] .admin-columns,
  body[data-print-mode="custom-report"] .content-panel > .section-heading,
  body[data-print-mode="custom-report"] .storage-panel:not(.custom-report-panel),
  body[data-print-mode="custom-report"] #adminStats,
  body[data-print-mode="custom-report"] #announcementList,
  body[data-print-mode="custom-report"] #reportList,
  body[data-print-mode="custom-report"] .custom-report-panel > .section-heading {
    display: none !important;
  }

  body[data-print-mode="student-ids"] .view,
  body[data-print-mode="student-ids"] .dashboard-view.active,
  body[data-print-mode="student-ids"] .content-panel,
  body[data-print-mode="student-ids"] .student-id-panel,
  body[data-print-mode="result-slips"] .view,
  body[data-print-mode="result-slips"] .dashboard-view.active,
  body[data-print-mode="result-slips"] .content-panel,
  body[data-print-mode="result-slips"] .result-slip-panel,
  body[data-print-mode="certificates"] .view,
  body[data-print-mode="certificates"] .dashboard-view.active,
  body[data-print-mode="certificates"] .content-panel,
  body[data-print-mode="certificates"] .certificate-panel,
  body[data-print-mode="clearance"] .view,
  body[data-print-mode="clearance"] .dashboard-view.active,
  body[data-print-mode="clearance"] .content-panel,
  body[data-print-mode="clearance"] .clearance-panel,
  body[data-print-mode="fee-receipts"] .view,
  body[data-print-mode="fee-receipts"] .dashboard-view.active,
  body[data-print-mode="fee-receipts"] .content-panel,
  body[data-print-mode="fee-receipts"] .fee-receipt-panel,
  body[data-print-mode="custom-report"] .view,
  body[data-print-mode="custom-report"] .dashboard-view.active,
  body[data-print-mode="custom-report"] .content-panel,
  body[data-print-mode="custom-report"] .custom-report-panel {
    display: block !important;
    padding: 0 !important;
    background: #fff !important;
  }

  body[data-print-mode="student-ids"] .id-card-list {
    display: grid !important;
    grid-template-columns: repeat(2, 86mm);
    gap: 6mm;
  }

  body[data-print-mode="student-ids"] .student-id-card {
    width: 86mm;
    min-height: 61mm;
    box-shadow: none;
    break-inside: avoid;
  }

  body[data-print-mode="student-ids"] .student-id-header {
    grid-template-columns: 13mm 1fr;
    padding: 2mm 3mm;
  }

  body[data-print-mode="student-ids"] .student-id-logo {
    width: 12mm;
    height: 12mm;
  }

  body[data-print-mode="student-ids"] .student-id-body {
    grid-template-columns: 24mm 1fr;
    gap: 3mm;
    padding: 2.5mm 3mm;
  }

  body[data-print-mode="student-ids"] .student-id-photo {
    width: 24mm;
    height: 30mm;
  }

  body[data-print-mode="student-ids"] .verify-grid {
    width: 15mm;
    height: 15mm;
  }

  body[data-print-mode="student-ids"] .verify-code {
    font-size: 5pt;
    padding: 1mm;
  }

  body[data-print-mode="student-ids"] .student-id-details p {
    grid-template-columns: 25mm 1fr;
    font-size: 6.6pt;
  }

  body[data-print-mode="student-ids"] .student-id-footer {
    font-size: 6.5pt;
    padding: 2mm 3mm;
  }

  body[data-print-mode="result-slips"] .document-list,
  body[data-print-mode="certificates"] .document-list,
  body[data-print-mode="clearance"] .document-list,
  body[data-print-mode="fee-receipts"] .document-list,
  body[data-print-mode="custom-report"] .document-list {
    display: grid !important;
    gap: 0;
  }

  body[data-print-mode="result-slips"] .document-sheet,
  body[data-print-mode="certificates"] .document-sheet,
  body[data-print-mode="clearance"] .document-sheet,
  body[data-print-mode="fee-receipts"] .document-sheet,
  body[data-print-mode="custom-report"] .document-sheet {
    width: 190mm;
    min-height: 260mm;
    box-shadow: none;
    border-radius: 0;
    break-after: page;
    page-break-after: always;
  }

  body[data-print-mode="result-slips"] .standard-report-card {
    page: standardReportLandscape;
    width: 283mm;
    min-height: 196mm;
    padding: 5mm;
    gap: 3mm;
    border-radius: 0;
    font-size: 8.4pt;
  }

  body[data-print-mode="result-slips"] .standard-report-header {
    grid-template-columns: 1.35fr 0.78fr 25mm;
    gap: 3mm;
  }

  body[data-print-mode="result-slips"] .standard-report-main {
    grid-template-columns: 1fr 68mm;
    gap: 3mm;
  }

  body[data-print-mode="result-slips"] .standard-performance-table {
    font-size: 7.6pt;
  }

  body[data-print-mode="result-slips"] .standard-performance-table th,
  body[data-print-mode="result-slips"] .standard-performance-table td {
    padding: 1.4mm 1.6mm;
  }

  body[data-print-mode="result-slips"] .document-sheet:last-child,
  body[data-print-mode="certificates"] .document-sheet:last-child,
  body[data-print-mode="clearance"] .document-sheet:last-child,
  body[data-print-mode="fee-receipts"] .document-sheet:last-child,
  body[data-print-mode="custom-report"] .document-sheet:last-child {
    break-after: auto;
    page-break-after: auto;
  }
}

.wallet-workspace-group,
.wallet-section {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
}

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

.wallet-id-grid {
  margin-top: 12px;
}

.wallet-id-grid span {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 82%, var(--green-soft));
  min-width: 0;
}

.wallet-id-grid b {
  color: var(--muted);
  font-size: 0.78rem;
}

.wallet-identity-card .verify-code {
  margin-top: 12px;
}

.wallet-form .checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 800;
}

.wallet-form .checkbox-row input {
  width: auto;
  margin-top: 3px;
}

.payroll-worker-slip-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--panel);
}

.payroll-worker-slip-group summary {
  cursor: pointer;
  font-weight: 900;
}

.note-view {
  white-space: pre-wrap;
  line-height: 1.7;
  font-size: var(--reader-scale);
}

.note-view h3 {
  margin: 12px 0 6px;
}

.note-view li {
  margin-left: 20px;
}

.quiz-view {
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
  display: grid;
  gap: 10px;
}

.choice-row {
  grid-template-columns: auto 1fr;
  align-items: center;
  color: var(--ink);
  font-weight: 700;
}

.storage-panel {
  margin-bottom: 16px;
}

.hod-inventory-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 16px;
}

.hod-inventory-menu button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 84%, var(--surface));
  color: var(--muted);
  padding: 0 12px;
  font-weight: 900;
  transition:
    background var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    color var(--motion-fast) ease,
    transform var(--motion-fast) ease;
}

.hod-inventory-menu button:hover,
.hod-inventory-menu button.active {
  border-color: color-mix(in srgb, var(--brand-blue) 45%, var(--line));
  background: var(--brand-blue);
  color: #fff;
  transform: translateY(-1px);
}

.hod-inventory-form {
  margin-bottom: 16px;
}

.hod-inventory-section-form .form-section {
  margin-bottom: 18px;
  padding: 18px;
  border: 1px solid #d9e1e8;
  border-radius: 10px;
  background: #ffffff;
}

.hod-inventory-section-form .form-section h3 {
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--brand-blue);
  color: var(--ink);
  font-size: 1rem;
}

.hod-inventory-section-form .form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 14px 18px;
}

.hod-inventory-section-form .form-grid label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: var(--ink);
  font-weight: 800;
}

.inventory-action-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 320px;
}

.inventory-action-grid .ghost-btn {
  min-height: 30px;
  padding: 0 8px;
  font-size: 0.78rem;
}

.inventory-lab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.inventory-lab-cell {
  min-height: 74px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #eef4ff;
  color: var(--ink);
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 10px;
  text-align: center;
  font-weight: 900;
}

.inventory-lab-cell span {
  color: var(--muted);
  font-size: 0.76rem;
}

.inventory-lab-cell.good {
  border-color: color-mix(in srgb, #0d9f62 52%, var(--line));
  background: #eefaf3;
}

.inventory-lab-cell.warn {
  border-color: color-mix(in srgb, var(--brand-orange) 52%, var(--line));
  background: #fff8e8;
}

.inventory-lab-cell.repair {
  border-color: color-mix(in srgb, #f97316 55%, var(--line));
  background: #fff3e8;
}

.inventory-lab-cell.danger {
  border-color: color-mix(in srgb, var(--red) 55%, var(--line));
  background: #fff1f1;
}

.inventory-lab-cell.muted {
  background: #f1f3f6;
}

#hodInventoryPanel .stats-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

#hodInventoryPanel .storage-card {
  min-height: 108px;
  display: grid;
  align-content: start;
  gap: 5px;
}

#hodInventoryPanel .storage-card em {
  color: var(--muted);
  font-style: normal;
  font-weight: 800;
  line-height: 1.35;
}

#hodInventoryPanel .storage-card.warning {
  border-color: color-mix(in srgb, var(--brand-orange) 52%, var(--line));
  background: color-mix(in srgb, var(--gold-soft) 58%, var(--panel));
}

#hodInventoryPanel .document-table {
  min-width: 980px;
}

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

.storage-card strong,
.storage-card span {
  display: block;
  overflow-wrap: anywhere;
}

.storage-card strong {
  font-size: 1.25rem;
}

.storage-card span {
  color: var(--muted);
  font-weight: 800;
}

.wide-storage {
  grid-column: 1 / -1;
}

.warning {
  border-color: color-mix(in srgb, var(--red) 45%, var(--line));
}

@keyframes headerDrop {
  from {
    opacity: 0;
    transform: translateY(-14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes viewEnter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleFade {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes panelSlideIn {
  from {
    opacity: 0;
    transform: translateX(-16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes contentRise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes markSheen {
  0%,
  62% {
    transform: translateX(-160%) rotate(8deg);
  }
  78%,
  100% {
    transform: translateX(160%) rotate(8deg);
  }
}

@keyframes backgroundDrift {
  from {
    background-position: center, 48% 50%;
  }
  to {
    background-position: center, 54% 48%;
  }
}

@keyframes heroLightSweep {
  from {
    transform: translateX(-8%);
  }
  to {
    transform: translateX(8%);
  }
}

@keyframes coverSweep {
  0%,
  58% {
    transform: translateX(-120%);
  }
  76%,
  100% {
    transform: translateX(120%);
  }
}

@keyframes barGrow {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes backdropFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes iconFloat {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-7px) rotate(2deg);
  }
}

@keyframes iconOrbit {
  from {
    transform: rotate(0deg) scale(0.86);
  }
  to {
    transform: rotate(360deg) scale(0.86);
  }
}

@keyframes dashboardIconPulse {
  0%,
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 0.58;
  }
  50% {
    transform: scale(1.08) rotate(5deg);
    opacity: 0.92;
  }
}

@keyframes dashboardBars {
  0%,
  100% {
    transform: translateX(0) scaleX(0.72);
  }
  50% {
    transform: translateX(-8px) scaleX(1);
  }
}

@keyframes statIconBob {
  0%,
  100% {
    transform: translateY(-50%) rotate(0deg);
  }
  50% {
    transform: translateY(calc(-50% - 6px)) rotate(-3deg);
  }
}

@keyframes dashboardSheen {
  0%,
  54% {
    transform: translateX(-120%);
  }
  76%,
  100% {
    transform: translateX(120%);
  }
}

@keyframes rolePing {
  0% {
    box-shadow: 0 0 0 0 rgba(243, 118, 18, 0.42);
  }
  70%,
  100% {
    box-shadow: 0 0 0 10px rgba(243, 118, 18, 0);
  }
}

@keyframes adminSearchFlash {
  0% {
    background: color-mix(in srgb, var(--brand-orange) 16%, var(--panel));
    box-shadow: 0 0 0 0 rgba(243, 118, 18, 0.28);
  }
  70% {
    background: color-mix(in srgb, var(--brand-orange) 8%, var(--panel));
    box-shadow: 0 0 0 12px rgba(243, 118, 18, 0);
  }
  100% {
    background: var(--panel);
    box-shadow: none;
  }
}

@keyframes footerMarquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes footerSweep {
  0%,
  58% {
    transform: translateX(-100%);
  }
  78%,
  100% {
    transform: translateX(100%);
  }
}

@media (max-width: 980px) {
  .site-header {
    grid-template-columns: 1fr;
  }

  .main-nav,
  .session-box {
    justify-content: flex-start;
  }

  .menu-btn {
    display: inline-flex;
  }

  .main-nav {
    display: none;
  }

  .main-nav.open {
    display: flex;
  }

  .home-hero,
  .home-showcase,
  .feature-grid,
  .home-dynamic-grid,
  .home-download-grid,
  .home-contact-grid,
  .official-mark-grid,
  .site-footer,
  .public-application-form,
  .dashboard-view.active,
  .admin-columns {
    grid-template-columns: 1fr;
  }

  .home-status-card {
    grid-row: auto;
  }

  .home-status-card .home-live-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer {
    text-align: center;
  }

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

  .home-hero {
    background-position: center;
  }

  .home-copy,
  .home-showcase {
    padding-left: 28px;
    padding-right: 28px;
  }

  .home-showcase {
    padding-top: 0;
  }

  .hero-ribbon {
    width: calc(100% - 32px);
    grid-template-columns: 1fr;
    margin-bottom: -38px;
  }

  .hero-ribbon article {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .hero-ribbon article:last-child {
    border-bottom: 0;
  }

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

  .home-hero {
    min-height: auto;
    padding-top: 32px;
  }

  .home-section-heading {
    margin-top: 78px;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .home-section-heading div {
    display: none;
  }

  .capability-strip {
    border-radius: 18px;
    grid-template-columns: repeat(2, 1fr);
  }

  .capability-strip article:nth-child(2) {
    border-right: 0;
  }

  .capability-strip article {
    border-bottom: 1px solid var(--line);
  }

  .capability-strip article:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

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

  .storage-grid {
    grid-template-columns: 1fr;
  }

  #staff-dashboard.headteacher-executive-mode,
  #staff-dashboard.deputy-operational-mode,
  #staff-dashboard.matron-operational-mode {
    grid-template-columns: 1fr;
  }

  #staff-dashboard.headteacher-executive-mode .side-panel,
  #staff-dashboard.deputy-operational-mode .side-panel,
  #staff-dashboard.matron-operational-mode .side-panel {
    min-height: auto;
    position: relative;
  }

  #pupil-dashboard.pupil-layout {
    grid-template-columns: 1fr;
  }

  #pupil-dashboard.pupil-layout .learner-side-panel {
    position: relative;
    min-height: auto;
    max-height: none;
    border-radius: 0 0 18px 18px;
  }

  #pupil-dashboard:not(.learner-menu-open) .learner-side-nav,
  #pupil-dashboard:not(.learner-menu-open) .learner-control-group,
  #pupil-dashboard:not(.learner-menu-open) .learner-logout-link {
    display: none;
  }

  .learner-sidebar-brand {
    margin-bottom: 0;
  }

  #pupil-dashboard .learner-main-panel {
    padding: 0 16px 24px;
  }

  .learner-topbar {
    margin-inline: -16px;
    grid-template-columns: auto 1fr;
  }

  .learner-topbar-actions {
    grid-column: 1 / -1;
    justify-content: space-between;
  }

  .learner-dashboard-shell,
  .learner-summary-grid,
  .learner-welcome-card,
  .learner-dashboard-card {
    grid-column: 1 / -1;
  }

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

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

  .learner-welcome-card {
    grid-template-columns: 1fr;
  }

  .learner-hero-illustration {
    display: none;
  }

  .deputy-kpi-grid,
  .deputy-grid,
  .deputy-mini-grid,
  .deputy-quick-grid,
  .deputy-report-grid,
  .deputy-inline-form {
    grid-template-columns: 1fr;
  }

  .deputy-span-3,
  .deputy-span-4,
  .deputy-span-5 {
    grid-column: span 1;
  }

  .deputy-topbar,
  .deputy-panel-heading,
  .deputy-warning-line,
  .deputy-success-line {
    align-items: stretch;
    flex-direction: column;
  }

  .matron-dashboard-grid,
  .matron-form-grid,
  .matron-report-grid,
  .matron-donut-card,
  .matron-topbar {
    grid-template-columns: 1fr;
  }

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

  .matron-topbar,
  .matron-panel-heading {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }

  .home-view {
    background-size: cover;
  }
}

@media (max-width: 560px) {
  .view,
  .site-header {
    padding: 16px;
  }

  .learner-summary-grid,
  .learner-progress-row,
  .learner-attendance-grid {
    grid-template-columns: 1fr;
  }

  .learner-summary-card {
    min-height: 150px;
  }

  .learner-popup-overlay {
    padding: 10px;
  }

  .learner-popup-panel {
    max-height: 94vh;
    border-radius: 14px;
  }

  .learner-popup-header {
    align-items: flex-start;
    padding: 14px;
  }

  .learner-popup-body {
    padding: 14px;
  }

  .learner-assignment-item {
    grid-template-columns: 1fr;
  }

  .learner-assignment-actions {
    justify-items: stretch;
  }

  .learner-list-row {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .learner-topbar {
    align-items: start;
  }

  .site-header {
    border-top-width: 10px;
  }

  .home-view {
    padding: 0 14px 18px;
  }

  .home-panel,
  .home-quick-profile,
  .home-identity-band,
  .home-dynamic-grid,
  .home-download-grid,
  .home-contact-grid,
  .official-mark-grid,
  .capability-strip,
  .stats-grid,
  .mini-stats {
    grid-template-columns: 1fr;
  }

  .home-role-panel {
    display: grid;
  }

  .home-role-chip {
    justify-content: center;
  }

  .home-status-card .home-live-stats,
  .home-status-card .home-role-panel {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .home-status-card .stat-card {
    width: 100%;
    justify-self: stretch;
  }

  .deputy-kpi-card,
  .deputy-profile-card,
  .deputy-monitor-layout,
  .deputy-monitor-layout.compact,
  .deputy-attendance-card,
  .deputy-approval-row,
  .deputy-event-list article {
    grid-template-columns: 1fr;
  }

  .deputy-donut,
  .deputy-donut.small {
    justify-self: center;
  }

  .home-hero {
    padding-top: 20px;
    border-radius: 0 0 8px 8px;
  }

  .home-copy,
  .home-showcase {
    padding-left: 18px;
    padding-right: 18px;
  }

  .home-copy {
    padding-bottom: 18px;
  }

  .home-showcase {
    padding-bottom: 58px;
  }

  .home-quick-profile {
    display: none;
  }

  .hero-ribbon {
    width: calc(100% - 20px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: -24px;
  }

  .hero-ribbon article {
    min-height: 96px;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 8px;
    padding: 10px 6px;
    text-align: center;
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  .hero-ribbon article:last-child {
    border-right: 0;
  }

  .ribbon-icon {
    width: 38px;
    height: 38px;
    font-size: 0.78rem;
  }

  .hero-ribbon strong {
    font-size: 0.82rem;
    line-height: 1.12;
  }

  .home-copy h1 {
    font-size: clamp(2rem, 11.4vw, 2.95rem);
  }

  .lead {
    font-size: 1rem;
    line-height: 1.42;
  }

  .home-section-heading {
    margin-top: 34px;
  }

  .school-profile-card {
    padding: 18px;
  }

  .feature-media {
    min-height: 132px;
  }

  .capability-strip article {
    border-right: 0;
  }

  .capability-strip article:nth-last-child(2) {
    border-bottom: 1px solid var(--line);
  }

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

  .filter-row {
    justify-content: stretch;
  }

  .user-card {
    grid-template-columns: 1fr;
  }

  .user-actions {
    justify-content: stretch;
  }
}

/* Dashboard-style public home page */
body[data-route="home"] {
  background: #e9eef5;
}

body[data-route="home"] .site-header {
  display: none;
}

body[data-route="home"] .view {
  scroll-margin-top: 0;
}

.home-dashboard-view {
  min-height: 100vh;
  padding: 0;
  background: #e9eef5;
}

.home-dashboard-view::before {
  display: none;
}

.home-dashboard-view .home-hero,
.home-dashboard-view .home-dynamic-grid,
.home-dashboard-view .home-search-section,
.home-dashboard-view .home-gallery-section,
.home-dashboard-view .home-download-section,
.home-dashboard-view .home-contact-section,
.home-dashboard-view .site-footer {
  max-width: none;
}

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

.home-school-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto auto auto;
  gap: 18px;
  padding: 24px 20px;
  overflow-y: auto;
  background:
    linear-gradient(180deg, rgba(4, 37, 45, 0.98), rgba(0, 71, 78, 0.97)),
    radial-gradient(circle at 20% 0, rgba(0, 178, 154, 0.22), transparent 34%);
  color: #ffffff;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.home-side-brand {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.home-side-logo {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

.home-side-logo img,
.home-top-user img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.home-side-brand strong {
  display: block;
  font-size: 0.96rem;
  line-height: 1.18;
  letter-spacing: 0;
}

.home-side-brand small {
  display: block;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
  line-height: 1.3;
}

.home-side-nav {
  display: grid;
  gap: 8px;
  align-content: start;
  margin-top: 12px;
}

.home-side-nav a {
  min-height: 54px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border-radius: 8px;
  padding: 0 14px;
  color: rgba(255, 255, 255, 0.88);
  font-weight: 900;
  transition: background var(--motion-fast) ease, transform var(--motion-fast) ease, color var(--motion-fast) ease;
}

.home-side-nav a.active,
.home-side-nav a:hover {
  color: #ffffff;
  background: linear-gradient(135deg, #08a68f, #0c8f7c);
  transform: translateX(4px);
}

.home-nav-icon,
.portal-icon,
.home-hero-feature-icon,
.achievement-icon,
.home-alert-bell,
.home-alert-mail {
  position: relative;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
}

.home-nav-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.13);
}

.home-nav-icon::before,
.home-nav-icon::after,
.portal-icon::before,
.portal-icon::after,
.home-alert-bell::before,
.home-alert-mail::before,
.home-alert-mail::after {
  content: "";
  position: absolute;
}

.icon-home::before {
  width: 15px;
  height: 13px;
  bottom: 6px;
  border-radius: 2px;
  border: 2px solid currentColor;
}

.icon-home::after {
  width: 15px;
  height: 15px;
  top: 6px;
  border-left: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
}

.icon-parent::before,
.icon-student::before,
.icon-teacher::before,
.icon-staff::before,
.icon-admin::before {
  width: 10px;
  height: 10px;
  top: 6px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: -7px 8px 0 -3px currentColor, 7px 8px 0 -3px currentColor;
}

.icon-parent::after,
.icon-student::after,
.icon-teacher::after,
.icon-staff::after,
.icon-admin::after {
  width: 22px;
  height: 9px;
  bottom: 5px;
  border: 2px solid currentColor;
  border-radius: 12px 12px 4px 4px;
}

.home-side-card,
.home-side-footer {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.13);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.home-side-card span,
.home-side-footer span {
  display: block;
  color: #1fe0c2;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-side-card p,
.home-side-footer strong {
  display: block;
  margin-top: 7px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 800;
  line-height: 1.45;
}

.home-side-card.compact p {
  font-size: 0.9rem;
}

.home-side-footer {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.home-dashboard-main {
  min-width: 0;
  padding: 0 22px 0;
  background: #f6f8fb;
}

.home-dashboard-topbar {
  position: sticky;
  top: 0;
  z-index: 8;
  min-height: 82px;
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(260px, 360px) auto;
  align-items: center;
  gap: 16px;
  padding: 14px 10px 14px 20px;
  border-bottom: 1px solid #dde6ef;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
}

.home-top-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
}

.home-top-nav a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  border-bottom: 3px solid transparent;
  color: #0d1c38;
  font-size: 0.92rem;
  font-weight: 900;
}

.home-top-nav a:hover,
.home-top-nav a.active {
  color: #008c7b;
  border-bottom-color: #00ad96;
}

.home-top-search {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 8px;
}

.home-top-search .text-field {
  min-height: 46px;
  border-radius: 8px;
  background: #ffffff;
}

.home-top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}

.home-alert-bell,
.home-alert-mail {
  width: 34px;
  height: 34px;
  color: #10284a;
  overflow: visible;
}

.home-alert-bell::before {
  width: 18px;
  height: 20px;
  top: 5px;
  border: 2px solid currentColor;
  border-bottom-width: 4px;
  border-radius: 12px 12px 6px 6px;
  animation: bellRing 3.6s ease-in-out infinite;
}

.home-alert-bell::after,
.home-alert-mail::after {
  content: attr(data-count);
  position: absolute;
  right: -2px;
  top: -3px;
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #f44336;
  color: #ffffff;
  font-size: 0.66rem;
  font-weight: 1000;
}

.home-alert-mail::before {
  width: 24px;
  height: 16px;
  top: 9px;
  border: 2px solid currentColor;
  border-radius: 4px;
}

.home-alert-mail::after {
  background: #009b8d;
}

.home-top-user {
  min-width: 180px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border-left: 1px solid #dde6ef;
  padding-left: 14px;
  color: #0d1c38;
  font-weight: 900;
}

.home-top-user img {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #dde6ef;
}

.home-dashboard-hero {
  min-height: 430px;
  display: grid;
  grid-template-columns: minmax(360px, 0.82fr) minmax(440px, 1.18fr);
  grid-template-rows: 1fr;
  gap: 0;
  align-items: stretch;
  margin: 0 0 18px;
  padding: 0;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
  background: linear-gradient(135deg, #002e35, #052b3f);
  box-shadow: 0 18px 38px rgba(18, 42, 68, 0.18);
}

.home-emergency-banner {
  margin: 12px 0;
  border: 1px solid #a9ccef;
  border-left: 6px solid #0b5cab;
  border-radius: 8px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  background: #eef6ff;
  color: #06427f;
  box-shadow: 0 10px 24px rgba(11, 92, 171, 0.1);
}

.home-emergency-banner[hidden] {
  display: none;
}

.home-emergency-banner strong,
.home-emergency-banner span {
  overflow-wrap: anywhere;
}

.home-emergency-banner a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  padding: 0 12px;
  background: #ffffff;
  color: #06427f;
  font-weight: 900;
}

.home-important-notice-details {
  display: none;
}

.important-notice-detail-card {
  width: min(760px, 100%);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #c9def3;
  border-left: 6px solid #0b5cab;
  border-radius: 16px;
  padding: clamp(20px, 4vw, 34px);
  background: linear-gradient(145deg, #ffffff 0%, #eef6ff 100%);
  color: #132b4a;
  box-shadow: 0 16px 36px rgba(11, 92, 171, 0.12);
}

.important-notice-kicker {
  margin: 0 0 7px;
  color: #0b5cab;
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.important-notice-detail-card h2 {
  margin: 0;
  color: #0a1931;
  font-size: clamp(1.35rem, 4vw, 2rem);
  line-height: 1.18;
}

.important-notice-message {
  margin: 16px 0 0;
  color: #2f3d4f;
  font-size: 1rem;
  line-height: 1.7;
}

.important-notice-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0 0;
}

.important-notice-facts > div {
  min-width: 0;
  border: 1px solid #d4e4f4;
  border-radius: 12px;
  padding: 13px;
  background: #ffffff;
}

.important-notice-facts dt {
  color: #0b5cab;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.important-notice-facts dd {
  margin: 5px 0 0;
  color: #0a1931;
  font-weight: 850;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.important-notice-closing {
  margin: 18px 0 0;
  border-radius: 11px;
  padding: 13px 15px;
  background: #fff8df;
  color: #4f4936;
  font-style: italic;
  line-height: 1.55;
}

.important-notice-detail-card footer {
  margin-top: 16px;
  color: #607086;
  font-size: 0.78rem;
  font-weight: 750;
}

.home-dashboard-view .home-hero[data-hero-mode="urgent"],
.home-dashboard-view .home-hero[data-hero-mode="exam"],
.home-dashboard-view .home-hero[data-hero-mode="admissions"] {
  background: linear-gradient(135deg, #002e35, #052b3f);
}

.home-dashboard-hero .home-copy {
  width: 100%;
  min-width: 0;
  display: grid;
  align-content: center;
  padding: 44px clamp(24px, 4vw, 54px);
  position: relative;
  z-index: 2;
}

.home-dashboard-hero .home-copy::after {
  content: "";
  position: absolute;
  right: -70px;
  top: 0;
  bottom: 0;
  width: 150px;
  background: linear-gradient(100deg, #052b3f 0 42%, rgba(5, 43, 63, 0) 72%);
  pointer-events: none;
}

.home-dashboard-hero .home-copy > * {
  position: relative;
  z-index: 1;
}

.home-dashboard-hero .eyebrow {
  color: #18d4b8;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
}

.home-dashboard-hero .home-copy h1 {
  max-width: 720px;
  color: #ffffff;
  font-size: clamp(2.45rem, 4.4vw, 4.7rem);
  line-height: 1.05;
  letter-spacing: 0;
  text-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.home-dashboard-hero .lead {
  max-width: 610px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 1.05rem;
  font-weight: 700;
}

.home-dashboard-hero .home-quick-profile {
  max-width: 560px;
}

.home-hero-media {
  position: relative;
  min-height: 430px;
  overflow: hidden;
}

.home-hero-picture {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 25, 39, 0.03), rgba(5, 25, 39, 0.08)),
    url("images/home-hero-3.jpg");
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  animation: heroPictureMove 16s ease-in-out infinite alternate;
}

.home-hero-picture::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.18), transparent 18%),
    linear-gradient(90deg, rgba(0, 46, 53, 0.12), rgba(0, 0, 0, 0));
}

.home-hero-feature {
  position: absolute;
  right: 28px;
  bottom: 28px;
  width: min(380px, calc(100% - 56px));
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  padding: 16px;
  background: rgba(1, 37, 44, 0.84);
  color: #ffffff;
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24);
}

.home-hero-feature-icon {
  width: 52px;
  height: 52px;
  border: 2px solid rgba(255, 255, 255, 0.78);
  border-radius: 999px;
}

.home-hero-feature-icon::before {
  content: "";
  width: 30px;
  height: 18px;
  position: absolute;
  left: 10px;
  top: 14px;
  border: 2px solid currentColor;
  border-radius: 3px;
  transform: skewY(-16deg);
}

.home-hero-feature strong,
.home-hero-feature p {
  overflow-wrap: anywhere;
}

.home-hero-feature p {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.86rem;
  line-height: 1.42;
}

.home-hero-dots {
  position: absolute;
  right: 40px;
  bottom: 14px;
  display: flex;
  gap: 7px;
}

.home-hero-dots span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.52);
  animation: dotPulse 3s ease-in-out infinite;
}

.home-hero-dots span:nth-child(2) {
  animation-delay: 0.35s;
}

.home-hero-dots span:nth-child(3) {
  animation-delay: 0.7s;
}

.home-hero-dots span:nth-child(4) {
  animation-delay: 1.05s;
}

.home-portal-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
}

.home-portal-card {
  min-height: 112px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 6px 14px;
  align-content: start;
  border: 1px solid #dde6ef;
  border-radius: 8px;
  padding: 16px;
  background: #ffffff;
  color: #10223e;
  box-shadow: 0 10px 22px rgba(27, 47, 70, 0.06);
  transition: transform var(--motion-medium) var(--motion-ease), box-shadow var(--motion-medium) var(--motion-ease), border-color var(--motion-fast) ease;
}

.home-portal-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 173, 150, 0.52);
  box-shadow: 0 18px 34px rgba(27, 47, 70, 0.12);
}

.portal-icon {
  grid-row: 1 / span 2;
  width: 54px;
  height: 54px;
  border-radius: 12px;
  background: #e8fbf7;
  color: #009b8d;
  animation: iconFloat 4.6s ease-in-out infinite;
}

.portal-parent {
  background: #f0e9ff;
  color: #7b4ee7;
}

.portal-book {
  background: #e8f3ff;
  color: #1976d2;
}

.portal-calendar {
  background: #fff1d8;
  color: #e18400;
}

.portal-finance {
  background: #e9f7e9;
  color: #2e9e43;
}

.portal-icon::before {
  width: 24px;
  height: 24px;
  border: 3px solid currentColor;
  border-radius: 7px;
}

.portal-icon::after {
  width: 16px;
  height: 4px;
  border-radius: 999px;
  background: currentColor;
  bottom: 13px;
}

.home-portal-card strong {
  font-size: 0.98rem;
  overflow-wrap: anywhere;
}

.home-portal-card p {
  grid-column: 2;
  color: #526179;
  font-size: 0.8rem;
  font-weight: 750;
  line-height: 1.45;
}

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

.home-advanced-grid .home-dashboard-card {
  min-height: 250px;
}

.home-countdown-card {
  grid-column: span 2;
}

.home-countdown-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
}

.home-countdown-cardlet {
  min-height: 126px;
  border: 1px solid #dde6ef;
  border-radius: 8px;
  padding: 12px;
  display: grid;
  gap: 4px;
  align-content: start;
  background: #f8fbff;
}

.home-countdown-cardlet strong {
  color: var(--brand-blue);
  font-size: 2rem;
  line-height: 1;
}

.home-countdown-cardlet span,
.home-countdown-cardlet small {
  color: var(--muted);
  font-weight: 800;
}

.home-countdown-cardlet p {
  color: var(--ink);
  font-weight: 900;
  line-height: 1.25;
}

.home-countdown-cardlet.soon {
  border-color: color-mix(in srgb, var(--brand-orange) 45%, #dde6ef);
  background: #fff8ed;
}

.home-countdown-cardlet.urgent {
  border-color: color-mix(in srgb, var(--red) 45%, #dde6ef);
  background: color-mix(in srgb, var(--red) 8%, #ffffff);
}

.home-help-card,
.home-visitor-card {
  grid-column: span 2;
}

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

.home-visitor-card .compact-form label:nth-last-of-type(1),
.home-visitor-card .compact-form button {
  grid-column: 1 / -1;
}

.home-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr) minmax(290px, 0.82fr);
  gap: 16px;
  align-items: start;
}

.home-dashboard-card,
.home-achievement-card,
.home-school-profile-section > * {
  border: 1px solid #dde6ef;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(27, 47, 70, 0.06);
}

.home-dashboard-card {
  min-width: 0;
  padding: 20px;
}

.home-overview-card {
  grid-row: span 2;
}

.home-dashboard-card .section-heading a {
  color: #008c7b;
  font-size: 0.8rem;
  font-weight: 900;
}

.home-resource-pulse {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.home-resource-pulse div {
  min-height: 116px;
  display: grid;
  align-content: center;
  justify-items: center;
  border-radius: 8px;
  background: linear-gradient(180deg, #f8fbff, #f1f5f9);
  position: relative;
  overflow: hidden;
}

.home-resource-pulse div:nth-child(2) {
  background: linear-gradient(180deg, #f5f0ff, #f8f7ff);
}

.home-resource-pulse div:nth-child(3) {
  background: linear-gradient(180deg, #eef7ff, #f7fbff);
}

.home-resource-pulse div:nth-child(4) {
  background: linear-gradient(180deg, #fff6e8, #fffaf2);
}

.home-resource-pulse div::before {
  content: "";
  width: 42px;
  height: 42px;
  margin-bottom: 10px;
  border-radius: 12px;
  background: linear-gradient(135deg, #00a98f, #144f96);
  animation: statIconBob 4s ease-in-out infinite;
}

.home-resource-pulse strong {
  color: #10223e;
  font-size: 1.9rem;
  line-height: 1;
}

.home-resource-pulse span {
  margin-top: 8px;
  color: #526179;
  font-size: 0.78rem;
  font-weight: 900;
  text-align: center;
}

.home-dashboard-view .home-live-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 16px;
}

.home-dashboard-view .home-live-stats .stat-card {
  min-height: 78px;
  padding: 12px 12px 12px 58px;
}

.home-dashboard-view .home-live-stats .stat-card strong {
  font-size: 1.5rem;
}

.home-dashboard-view .home-live-stats .stat-card span {
  font-size: 0.72rem;
}

.home-dashboard-view .home-role-panel {
  max-width: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.home-dashboard-view .home-role-chip {
  justify-content: center;
  border: 1px solid #dde6ef;
  background: #f8fbff;
  color: #10223e;
  box-shadow: none;
  text-align: center;
}

.home-event-list .thread-card,
.home-announcement-list .thread-card,
.home-quick-list .thread-card,
.home-dashboard-view .home-dynamic-card .thread-card {
  border: 0;
  border-bottom: 1px solid #e6edf4;
  border-radius: 0;
  padding: 12px 0;
  box-shadow: none;
}

.home-event-list .thread-card:last-child,
.home-announcement-list .thread-card:last-child,
.home-quick-list .thread-card:last-child {
  border-bottom: 0;
}

.home-achievement-card {
  min-height: 150px;
  grid-column: 1 / 2;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 22px;
  background:
    radial-gradient(circle at 80% 0, rgba(0, 173, 150, 0.16), transparent 30%),
    linear-gradient(135deg, #052b3f, #00343c);
  color: #ffffff;
}

.achievement-icon {
  width: 58px;
  height: 58px;
  border-radius: 999px;
  border: 2px solid #ffc83d;
  color: #ffc83d;
  animation: iconFloat 4.5s ease-in-out infinite;
}

.achievement-icon::before {
  content: "";
  width: 28px;
  height: 22px;
  position: absolute;
  top: 14px;
  border: 3px solid currentColor;
  border-top: 0;
  border-radius: 0 0 12px 12px;
}

.achievement-icon::after {
  content: "";
  width: 20px;
  height: 5px;
  position: absolute;
  bottom: 12px;
  border-radius: 999px;
  background: currentColor;
}

.home-achievement-card p {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.76);
}

.home-achievement-card .ghost-btn {
  border-color: rgba(255, 255, 255, 0.38);
  color: #ffffff;
  white-space: nowrap;
}

.home-school-profile-section {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
  gap: 16px;
  margin-top: 16px;
}

.home-school-profile-section .school-profile-card,
.home-school-profile-section .home-search-section {
  margin: 0;
  padding: 20px;
}

.home-school-profile-section .school-profile-card h2 {
  color: #10223e;
}

.home-dashboard-view .home-ops-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 16px;
}

.home-dashboard-view .home-public-records {
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  margin-top: 16px;
}

.home-achievement-wall {
  overflow: hidden;
}

.home-achievement-track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: gallerySlide 38s linear infinite;
}

.home-achievement-wall:hover .home-achievement-track {
  animation-play-state: paused;
}

.home-achievement-track .thread-card {
  width: min(310px, 70vw);
  min-height: 150px;
  border: 1px solid #dde6ef;
  border-radius: 8px;
  padding: 14px;
  background: #ffffff;
}

.home-search-group p {
  margin-top: 6px;
  line-height: 1.45;
}

.icon-help::before {
  width: 22px;
  height: 22px;
  border: 4px solid #ffffff;
  border-radius: 999px;
  left: 13px;
  top: 10px;
}

.icon-help::after {
  content: "?";
  left: 20px;
  top: 11px;
  color: #ffffff;
  font-weight: 1000;
}

.icon-visitor::before {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #ffffff;
  top: 9px;
}

.icon-visitor::after {
  width: 30px;
  height: 16px;
  border-radius: 18px 18px 6px 6px;
  background: #ffffff;
  bottom: 9px;
}

.icon-achievement::before {
  width: 28px;
  height: 20px;
  border: 4px solid #ffffff;
  border-top: 0;
  border-radius: 0 0 12px 12px;
  top: 13px;
}

.icon-achievement::after {
  width: 18px;
  height: 4px;
  border-radius: 999px;
  background: #ffffff;
  bottom: 11px;
}

.icon-news::before {
  width: 26px;
  height: 28px;
  border: 3px solid #ffffff;
  border-radius: 6px;
  top: 10px;
}

.icon-news::after {
  width: 16px;
  height: 3px;
  border-radius: 999px;
  background: #ffffff;
  top: 19px;
  box-shadow: 0 7px 0 #ffffff, 0 14px 0 #ffffff;
}

.home-dashboard-view .home-gallery-section,
.home-dashboard-view .home-download-section,
.home-dashboard-view .home-contact-section {
  margin-top: 16px;
  padding: 20px;
  background: #ffffff;
}

.home-dashboard-view .home-download-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.home-dashboard-view .home-contact-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.home-dashboard-view .site-footer {
  margin-top: 16px;
  grid-template-columns: minmax(260px, 1fr) minmax(220px, auto) auto auto;
  background: linear-gradient(135deg, #002e35, #052b3f);
}

.footer-quote {
  color: rgba(255, 255, 255, 0.84);
  font-weight: 800;
  line-height: 1.5;
}

.footer-quote span {
  display: inline;
  color: #18d4b8;
}

.footer-social {
  display: flex;
  gap: 8px;
}

.footer-social a {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 1000;
}

.footer-social a svg {
  width: 19px;
  height: 19px;
  display: block;
  fill: currentColor;
}

.footer-social a.is-disabled {
  opacity: 0.5;
}

.home-image-admin-card {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.home-image-thumb {
  width: 86px;
  height: 64px;
  border: 1px solid #dde6ef;
  border-radius: 8px;
  background: #eef4fb center / cover no-repeat;
}

@keyframes heroPictureMove {
  from {
    transform: scale(1.02) translateX(0);
  }
  to {
    transform: scale(1.08) translateX(-16px);
  }
}

@keyframes bellRing {
  0%,
  78%,
  100% {
    transform: rotate(0);
  }
  82% {
    transform: rotate(12deg);
  }
  86% {
    transform: rotate(-10deg);
  }
  90% {
    transform: rotate(7deg);
  }
}

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

@media (max-width: 1260px) {
  .home-dashboard-shell {
    grid-template-columns: 248px minmax(0, 1fr);
  }

  .home-dashboard-topbar {
    grid-template-columns: 1fr minmax(240px, 320px);
  }

  .home-top-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .home-portal-cards,
  .home-dashboard-view .home-download-grid,
  .home-dashboard-view .home-contact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-dashboard-grid {
    grid-template-columns: minmax(0, 1fr) minmax(310px, 0.9fr);
  }

  .home-notice-card,
  .home-quick-card {
    grid-column: auto;
  }
}

@media (max-width: 980px) {
  body[data-route="home"] .site-header {
    display: none;
  }

  .home-dashboard-shell,
  .home-dashboard-hero,
  .home-advanced-grid,
  .home-school-profile-section,
  .home-dashboard-grid,
  .home-dashboard-view .home-ops-grid,
  .home-dashboard-view .home-public-records {
    grid-template-columns: 1fr;
  }

  .home-countdown-card,
  .home-help-card,
  .home-visitor-card {
    grid-column: 1 / -1;
  }

  .home-school-sidebar {
    position: relative;
    height: auto;
    grid-template-rows: auto;
  }

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

  .home-dashboard-main {
    padding: 0 14px;
  }

  .home-dashboard-topbar {
    position: relative;
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .home-dashboard-hero .home-copy::after {
    display: none;
  }

  .home-hero-media {
    min-height: 320px;
  }

  .home-overview-card,
  .home-achievement-card {
    grid-column: auto;
  }

  .home-achievement-card {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .home-achievement-card .ghost-btn {
    grid-column: 1 / -1;
    width: fit-content;
  }
}

@media (max-width: 640px) {
  .home-dashboard-main {
    padding: 0 10px;
  }

  .home-side-brand,
  .home-side-nav,
  .home-portal-cards,
  .home-advanced-grid,
  .home-visitor-card .compact-form,
  .home-resource-pulse,
  .home-dashboard-view .home-live-stats,
  .home-dashboard-view .home-public-records,
  .home-dashboard-view .home-download-grid,
  .home-dashboard-view .home-contact-grid,
  .home-dashboard-view .site-footer,
  .home-image-admin-card {
    grid-template-columns: 1fr;
  }

  .home-emergency-banner {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .home-countdown-card,
  .home-help-card,
  .home-visitor-card,
  .home-visitor-card .compact-form label:nth-last-of-type(1),
  .home-visitor-card .compact-form button {
    grid-column: 1 / -1;
  }

  .home-top-nav {
    gap: 10px;
  }

  .home-top-nav a {
    font-size: 0.84rem;
  }

  .home-dashboard-hero .home-copy {
    padding: 28px 18px;
  }

  .home-dashboard-hero .home-copy h1 {
    font-size: clamp(2.1rem, 13vw, 3rem);
  }

  .home-hero-feature {
    left: 14px;
    right: 14px;
    bottom: 18px;
    width: auto;
  }

  .home-portal-card {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .home-dashboard-card,
  .home-school-profile-section .school-profile-card,
  .home-school-profile-section .home-search-section,
  .home-dashboard-view .home-gallery-section,
  .home-dashboard-view .home-download-section,
  .home-dashboard-view .home-contact-section {
    padding: 16px;
  }

  .footer-social,
  .footer-links {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero-picture,
  .home-gallery-track,
  .footer-marquee,
  .home-alert-bell::before,
  .home-hero-dots span,
  .home-achievement-track,
  .home-dashboard-view .site-footer::before,
  .home-dashboard-view .site-footer::after {
    animation: none !important;
  }
}

/* Production SmartCampus home template */
body[data-route="home"] .site-header {
  display: none;
}

body[data-route="home"] main {
  min-height: 100vh;
}

.home-dashboard-view {
  background: #12001f;
  color: #201033;
}

.home-dashboard-view .home-dashboard-shell {
  display: block;
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 28%, rgba(91, 0, 121, 0.42), transparent 26%),
    linear-gradient(180deg, #1d0034 0, #ffffff 58%, #f4f1f8 100%);
}

.home-dashboard-view .home-dashboard-main {
  padding: 0;
  background: transparent;
}

.home-dashboard-view .home-school-sidebar {
  position: absolute;
  z-index: 14;
  top: 78px;
  left: clamp(22px, 3.5vw, 68px);
  width: clamp(250px, 22vw, 430px);
  height: auto;
  display: block;
  padding: 0;
  overflow: visible;
  background: none;
  border: 0;
  color: #ffffff;
}

.home-dashboard-view .home-side-brand {
  display: block;
  width: 100%;
}

.home-dashboard-view .home-side-logo {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 28px 42px rgba(43, 0, 74, 0.42));
}

.home-dashboard-view .home-side-logo img {
  object-fit: contain;
}

.home-search-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
}

.home-search-icon {
  position: relative;
  width: 18px;
  height: 18px;
  display: inline-block;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.home-search-icon::after {
  content: "";
  position: absolute;
  right: -7px;
  bottom: -5px;
  width: 9px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform: rotate(45deg);
  transform-origin: left center;
}

.home-dashboard-view .home-side-brand > span,
.home-dashboard-view .home-side-nav,
.home-dashboard-view .home-side-card,
.home-dashboard-view .home-side-footer,
.home-dashboard-view .home-top-search,
.home-dashboard-view .home-top-actions {
  display: none;
}

.home-dashboard-view .home-dashboard-topbar {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 18;
  min-height: 88px;
  grid-template-columns: 1fr;
  padding: 0 clamp(22px, 5vw, 86px);
  border: 0;
  background:
    linear-gradient(90deg, rgba(37, 0, 68, 0.98), rgba(22, 0, 45, 0.98) 74%, rgba(37, 0, 68, 0.92));
  color: #ffffff;
  overflow: hidden;
}

.home-dashboard-view .home-dashboard-topbar::before {
  content: "";
  position: absolute;
  right: 13%;
  top: -40px;
  width: 220px;
  height: 150px;
  border-radius: 0 0 90px 90px;
  background: linear-gradient(135deg, transparent 34%, #d59a08 35%, #f5cb47 48%, transparent 49%);
  transform: rotate(-8deg);
}

.home-dashboard-view .home-dashboard-topbar::after {
  content: "IN THE LIGHT OF CHRIST, WE EXCEL";
  position: absolute;
  right: clamp(22px, 4vw, 70px);
  top: 28px;
  color: #ffffff;
  font-weight: 1000;
  letter-spacing: 0;
  text-align: right;
}

.home-dashboard-view .home-dashboard-topbar::after {
  color: #ffffff;
}

.home-dashboard-view .home-top-nav {
  position: relative;
  z-index: 2;
  justify-content: center;
  gap: clamp(18px, 4vw, 58px);
  padding-right: min(28vw, 430px);
}

.home-dashboard-view .home-top-nav a {
  min-height: 88px;
  border-bottom: 3px solid transparent;
  color: rgba(255, 255, 255, 0.94);
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
  font-weight: 1000;
}

.home-dashboard-view .home-top-nav a:first-child,
.home-dashboard-view .home-top-nav a:hover {
  color: #ffffff;
  border-bottom-color: #d59a08;
}

.home-dashboard-view .home-top-nav a::before {
  content: "";
  width: 26px;
  height: 26px;
  margin-right: 10px;
  display: inline-grid;
  place-items: center;
  border: 2px solid currentColor;
  border-radius: 7px;
}

.home-dashboard-view .home-top-nav a[data-home-scroll="home"]::before {
  border-radius: 3px 3px 8px 8px;
  transform: rotate(45deg) scale(0.78);
}

.home-dashboard-view .home-top-nav a[data-home-scroll="about-igss"]::before {
  content: "i";
  border-radius: 50%;
  font-style: italic;
  font-weight: 1000;
}

.home-dashboard-view .home-top-nav a[data-home-scroll="home-events"]::before {
  border-radius: 4px;
  box-shadow: inset 0 7px 0 currentColor;
}

.home-dashboard-view .home-top-nav a[data-home-scroll="home-gallery-section"]::before {
  border-radius: 4px;
  background: linear-gradient(135deg, transparent 58%, currentColor 59% 66%, transparent 67%);
}

.home-dashboard-view .home-top-nav a[data-home-scroll="home-contact-section"]::before {
  border-radius: 50% 50% 50% 8px;
  transform: rotate(-28deg);
}

.home-dashboard-view .home-emergency-banner {
  position: relative;
  z-index: 12;
  width: min(1180px, calc(100% - 32px));
  margin: 96px auto -88px;
  background: rgba(255, 255, 255, 0.9);
}

.home-dashboard-view .home-emergency-banner[hidden] {
  display: none;
}

.home-dashboard-view .home-dashboard-hero {
  position: relative;
  min-height: clamp(620px, 78vh, 820px);
  display: grid;
  grid-template-columns: minmax(300px, 0.47fr) minmax(360px, 0.53fr);
  align-items: center;
  gap: clamp(16px, 4vw, 70px);
  margin: 0;
  padding: 126px clamp(28px, 6vw, 112px) 136px;
  overflow: hidden;
  background: #efe6d7;
  border-radius: 0;
  isolation: isolate;
}

.home-dashboard-view .home-dashboard-hero::before {
  content: "";
  position: absolute;
  inset: 86px auto auto -120px;
  width: 52vw;
  min-width: 430px;
  height: 42vw;
  min-height: 430px;
  border: 24px solid rgba(70, 0, 105, 0.93);
  border-right-color: transparent;
  border-bottom-color: #d59a08;
  border-radius: 50%;
  transform: rotate(-20deg);
  z-index: 1;
  pointer-events: none;
}

.home-dashboard-view .home-dashboard-hero::after {
  content: "";
  position: absolute;
  inset: auto -120px -160px auto;
  width: 42vw;
  min-width: 420px;
  height: 42vw;
  min-height: 420px;
  border: 30px solid #d59a08;
  border-left-color: rgba(70, 0, 105, 0.96);
  border-bottom-color: rgba(70, 0, 105, 0.96);
  border-radius: 50%;
  transform: rotate(-28deg);
  z-index: 3;
  pointer-events: none;
}

.home-dashboard-view .home-hero-media {
  position: absolute;
  inset: 88px 0 0 0;
  min-height: 0;
  z-index: 0;
  overflow: hidden;
}

.home-dashboard-view .home-hero-picture {
  position: absolute;
  inset: 0;
  min-height: 100%;
  border-radius: 0;
  background-position: var(--home-image-focus, center right);
  background-size: cover;
  filter: saturate(1.05) contrast(1.03);
  animation: heroPictureMove 16s ease-in-out infinite alternate;
}

.home-dashboard-view .home-hero-picture::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.78) 34%, rgba(255, 255, 255, 0.08) 66%, rgba(255, 255, 255, 0.08) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0) 52%, rgba(255, 247, 224, 0.9) 100%);
}

.home-dashboard-view .home-hero-feature {
  position: absolute;
  right: clamp(22px, 5vw, 86px);
  bottom: 132px;
  z-index: 4;
  width: min(420px, 32vw);
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 8px;
  background: rgba(34, 0, 57, 0.72);
  color: #ffffff;
  backdrop-filter: blur(10px);
}

.home-dashboard-view .home-hero-dots {
  position: absolute;
  right: clamp(120px, 13vw, 240px);
  bottom: 112px;
  z-index: 4;
}

.home-dashboard-view .home-copy {
  position: relative;
  z-index: 8;
  grid-column: 1 / span 2;
  width: min(820px, 58vw);
  margin-left: clamp(390px, 31vw, 570px);
  padding: clamp(10px, 1.3vw, 20px) clamp(16px, 2vw, 30px);
  color: #2b004b;
  isolation: isolate;
}

.home-dashboard-view .home-copy::before {
  content: "";
  position: absolute;
  inset: -16px -20px;
  z-index: -1;
  border-radius: 28px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.76) 68%, rgba(255, 255, 255, 0.24));
  box-shadow: 0 24px 70px rgba(45, 0, 77, 0.14);
  backdrop-filter: blur(2px);
}

.home-dashboard-view .home-copy::after {
  display: none;
}

.home-dashboard-view .home-copy .eyebrow {
  margin: 0 0 8px;
  color: #2b004b;
  font-weight: 1000;
  text-transform: uppercase;
}

.home-dashboard-view .home-smart-title {
  margin: 0;
  color: #35005c;
  font-size: clamp(4rem, 9vw, 8.6rem);
  line-height: 0.82;
  text-transform: uppercase;
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.86);
  text-shadow:
    0 4px 0 rgba(213, 154, 8, 0.72),
    0 14px 28px rgba(255, 255, 255, 0.94),
    0 18px 34px rgba(43, 0, 74, 0.22);
}

.home-dashboard-view .home-smart-title span {
  display: block;
  color: #d29a08;
  font-size: 0.58em;
  -webkit-text-stroke: 1.2px rgba(255, 255, 255, 0.78);
  text-shadow:
    0 3px 0 rgba(55, 0, 92, 0.48),
    0 12px 24px rgba(255, 255, 255, 0.92);
}

.home-dashboard-view .home-dashboard-hero .lead {
  max-width: 640px;
  margin-top: 8px;
  border-top: 3px solid rgba(55, 0, 92, 0.78);
  padding-top: 10px;
  color: #270340;
  font-weight: 1000;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
}

.home-dashboard-view .home-smart-pills {
  width: fit-content;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin: 18px auto 0;
  padding: 10px 22px;
  border-radius: 999px;
  background: #37005f;
  color: #ffffff;
  font-weight: 1000;
  text-transform: uppercase;
}

.home-dashboard-view .home-smart-pills span:not(:last-child)::after {
  content: "";
  width: 7px;
  height: 7px;
  display: inline-block;
  margin-left: 12px;
  border-radius: 999px;
  background: #d59a08;
  vertical-align: middle;
}

.home-dashboard-view .home-scripture {
  margin: 24px auto 0;
  color: #2d004d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.45rem, 2.3vw, 2.15rem);
  font-style: italic;
  text-align: center;
  line-height: 1.18;
}

.home-dashboard-view .hero-actions {
  justify-content: center;
  margin-top: 18px;
}

.home-dashboard-view .home-quick-profile {
  justify-content: center;
}

.home-dashboard-view .home-portal-cards {
  position: relative;
  z-index: 10;
  width: min(1820px, calc(100% - clamp(34px, 8vw, 140px)));
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0;
  margin: -94px auto 0;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 18px 46px rgba(31, 0, 56, 0.22);
  backdrop-filter: blur(12px);
}

.home-dashboard-view .home-portal-card {
  min-height: 172px;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 1fr;
  justify-items: center;
  text-align: center;
  gap: 7px;
  border: 0;
  border-right: 1px solid rgba(63, 43, 82, 0.16);
  border-radius: 0;
  padding: 20px 12px;
  background: transparent;
  color: #210038;
  box-shadow: none;
}

.home-dashboard-view .home-portal-card:last-child {
  border-right: 0;
}

.home-dashboard-view .home-portal-card:hover {
  transform: translateY(-3px);
  background: rgba(74, 0, 105, 0.06);
}

.home-dashboard-view .portal-icon {
  grid-row: auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #44006e;
  color: #ffffff;
}

.home-dashboard-view .portal-icon::before {
  color: currentColor;
}

.home-dashboard-view .portal-icon::after {
  color: currentColor;
}

.home-dashboard-view .portal-book::before,
.home-dashboard-view .portal-library::before {
  width: 30px;
  height: 24px;
  border: 3px solid currentColor;
  border-radius: 6px;
  background: linear-gradient(90deg, transparent 47%, currentColor 48% 52%, transparent 53%);
}

.home-dashboard-view .portal-book::after,
.home-dashboard-view .portal-library::after {
  width: 20px;
  height: 3px;
  bottom: 17px;
  border-radius: 999px;
  background: currentColor;
}

.home-dashboard-view .portal-student::before {
  width: 15px;
  height: 15px;
  top: 15px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: -15px 8px 0 -3px currentColor, 15px 8px 0 -3px currentColor;
}

.home-dashboard-view .portal-student::after {
  width: 34px;
  height: 18px;
  bottom: 14px;
  border-radius: 18px 18px 8px 8px;
  background: currentColor;
}

.home-dashboard-view .portal-finance::before {
  width: 30px;
  height: 23px;
  border: 3px solid currentColor;
  border-radius: 7px;
}

.home-dashboard-view .portal-finance::after {
  width: 10px;
  height: 10px;
  right: 16px;
  border: 3px solid currentColor;
  border-radius: 50%;
}

.home-dashboard-view .portal-hostel::before {
  width: 34px;
  height: 18px;
  bottom: 17px;
  border: 3px solid currentColor;
  border-top-left-radius: 10px;
}

.home-dashboard-view .portal-hostel::after {
  width: 10px;
  height: 10px;
  left: 16px;
  top: 22px;
  border-radius: 3px;
  background: currentColor;
}

.home-dashboard-view .portal-uniform::before {
  width: 31px;
  height: 29px;
  background: currentColor;
  clip-path: polygon(21% 0, 39% 13%, 50% 16%, 61% 13%, 79% 0, 100% 26%, 78% 42%, 78% 100%, 22% 100%, 22% 42%, 0 26%);
}

.home-dashboard-view .portal-uniform::after {
  width: 10px;
  height: 12px;
  top: 18px;
  border-radius: 0 0 8px 8px;
  background: rgba(255, 255, 255, 0.82);
}

.home-dashboard-view .portal-parent::before {
  width: 32px;
  height: 23px;
  border: 3px solid currentColor;
  border-radius: 8px;
}

.home-dashboard-view .portal-parent::after {
  width: 12px;
  height: 12px;
  right: 15px;
  bottom: 14px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.home-dashboard-view .portal-calendar::before {
  width: 7px;
  height: 25px;
  bottom: 16px;
  border-radius: 3px 3px 0 0;
  background: currentColor;
  box-shadow: 11px -7px 0 currentColor, 22px -13px 0 currentColor;
}

.home-dashboard-view .portal-calendar::after {
  width: 34px;
  height: 3px;
  bottom: 14px;
  border-radius: 999px;
  background: currentColor;
}

.home-dashboard-view .portal-student,
.home-dashboard-view .portal-hostel,
.home-dashboard-view .portal-uniform,
.home-dashboard-view .portal-calendar {
  background: #c98505;
}

.home-dashboard-view .home-portal-card strong {
  text-transform: uppercase;
  color: #1f0738;
  font-size: 0.9rem;
}

.home-dashboard-view .home-portal-card p {
  grid-column: auto;
  color: #2b2440;
  font-size: 0.78rem;
  line-height: 1.22;
}

.home-assurance-strip {
  position: relative;
  z-index: 9;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(280px, 0.9fr);
  gap: 0;
  align-items: stretch;
  padding-left: clamp(20px, 4vw, 80px);
  background: linear-gradient(90deg, #2b004b 0%, #25003f 70%, #c98505 70%, #e1a411 100%);
  color: #ffffff;
  overflow: hidden;
}

.home-assurance-strip article {
  min-height: 96px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-content: center;
  gap: 6px 14px;
  padding: 16px 26px;
  border-right: 1px solid rgba(255, 255, 255, 0.22);
}

.home-assurance-strip article p,
.home-assurance-strip article strong {
  margin: 0;
}

.home-assurance-strip article p {
  grid-column: 2;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 750;
}

.assurance-icon {
  position: relative;
  grid-row: 1 / span 2;
  width: 46px;
  height: 46px;
  border: 2px solid currentColor;
  border-radius: 12px;
  display: grid;
  place-items: center;
}

.assurance-icon::before,
.assurance-icon::after {
  content: "";
  position: absolute;
  display: block;
}

.assurance-icon.integrated::before {
  width: 22px;
  height: 22px;
  border: 3px solid currentColor;
  border-radius: 6px;
}

.assurance-icon.integrated::after {
  width: 24px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor, 0 0 0 0 currentColor;
}

.assurance-icon.smart::before {
  width: 20px;
  height: 20px;
  top: 9px;
  border: 3px solid currentColor;
  border-radius: 50% 50% 44% 44%;
}

.assurance-icon.smart::after {
  width: 16px;
  height: 9px;
  bottom: 8px;
  border-top: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
}

.assurance-icon.secure::before {
  width: 24px;
  height: 28px;
  top: 8px;
  background: currentColor;
  clip-path: polygon(50% 0, 88% 14%, 82% 70%, 50% 100%, 18% 70%, 12% 14%);
}

.assurance-icon.secure::after {
  width: 9px;
  height: 16px;
  top: 14px;
  border-right: 3px solid #2b004b;
  border-bottom: 3px solid #2b004b;
  transform: rotate(42deg);
}

.assurance-icon.accessible::before {
  width: 21px;
  height: 30px;
  top: 7px;
  border: 3px solid currentColor;
  border-radius: 6px;
}

.assurance-icon.accessible::after {
  width: 5px;
  height: 5px;
  bottom: 11px;
  border-radius: 50%;
  background: currentColor;
}

.home-assurance-strip .assurance-callout {
  grid-template-columns: 1fr;
  color: #2b004b;
  border-right: 0;
  padding-left: 38px;
}

.home-assurance-strip .assurance-callout p {
  grid-column: auto;
  color: #2b004b;
}

.home-dashboard-view .home-advanced-grid,
.home-dashboard-view .home-dashboard-grid,
.home-dashboard-view .home-school-profile-section,
.home-dashboard-view .home-dynamic-grid,
.home-dashboard-view .home-gallery-section,
.home-dashboard-view .home-download-section,
.home-dashboard-view .home-contact-section {
  width: min(1500px, calc(100% - 36px));
  margin-left: auto;
  margin-right: auto;
}

.home-dashboard-view .home-advanced-grid {
  margin-top: 26px;
}

@media (max-width: 1500px) {
  .home-dashboard-view .home-portal-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .home-dashboard-view .home-portal-card:nth-child(4n) {
    border-right: 0;
  }

  .home-assurance-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-left: 0;
    background: #2b004b;
  }

  .home-assurance-strip .assurance-callout {
    grid-column: 1 / -1;
    background: #d99f0b;
  }
}

@media (max-width: 1100px) {
  .home-dashboard-view .home-dashboard-topbar {
    position: relative;
    min-height: auto;
    padding: 14px 18px;
  }

  .home-dashboard-view .home-dashboard-topbar::before,
  .home-dashboard-view .home-dashboard-topbar::after {
    display: none;
  }

  .home-dashboard-view .home-top-nav {
    justify-content: center;
    padding-right: 0;
    gap: 14px;
  }

  .home-dashboard-view .home-top-nav a {
    min-height: 44px;
  }

  .home-dashboard-view .home-school-sidebar {
    top: 88px;
    width: 172px;
  }

  .home-dashboard-view .home-dashboard-hero {
    min-height: 640px;
    grid-template-columns: 1fr;
    padding-top: 96px;
  }

  .home-dashboard-view .home-hero-media {
    inset: 0;
  }

  .home-dashboard-view .home-copy {
    width: min(760px, calc(100vw - 270px));
    margin-left: 230px;
  }
}

@media (max-width: 760px) {
  .home-dashboard-view .home-school-sidebar {
    position: relative;
    top: auto;
    left: auto;
    width: 138px;
    margin: 18px auto 0;
  }

  .home-dashboard-view .home-dashboard-hero {
    min-height: 610px;
    padding: 44px 18px 124px;
  }

  .home-dashboard-view .home-dashboard-hero::before,
  .home-dashboard-view .home-dashboard-hero::after {
    display: none;
  }

  .home-dashboard-view .home-copy {
    width: 100%;
    margin-left: 0;
    text-align: center;
    padding: 8px 10px;
  }

  .home-dashboard-view .home-copy::before {
    inset: -10px;
    background: rgba(255, 255, 255, 0.84);
  }

  .home-dashboard-view .home-smart-title {
    font-size: clamp(3rem, 18vw, 4.8rem);
  }

  .home-dashboard-view .home-dashboard-hero .lead {
    margin-left: auto;
    margin-right: auto;
    font-size: 0.85rem;
  }

  .home-dashboard-view .home-hero-feature {
    display: none;
  }

  .home-dashboard-view .home-portal-cards {
    width: calc(100% - 24px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: -88px;
  }

  .home-dashboard-view .home-portal-card {
    min-height: 150px;
    border-right: 1px solid rgba(63, 43, 82, 0.16);
    padding: 15px 10px;
  }

  .home-dashboard-view .home-portal-card:nth-child(2n) {
    border-right: 0;
  }

  .home-assurance-strip {
    grid-template-columns: 1fr;
  }

  .home-assurance-strip article {
    min-height: 78px;
  }
}

.production-readiness-panel {
  border-top: 4px solid var(--accent);
}

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

.quality-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  vertical-align: middle;
}

.quality-ok {
  color: #075f3f;
  background: #d7f8e8;
  border: 1px solid #93e2bd;
}

.quality-warn {
  color: #8a1c13;
  background: #ffe1dd;
  border: 1px solid #ffaaa0;
}

.production-readiness-panel .thread-card strong {
  line-height: 1.35;
}

.payroll-workspace-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.95fr) minmax(320px, 1.05fr);
  gap: 16px;
  align-items: start;
}

.payroll-worker-form .wide-field {
  grid-column: 1 / -1;
}

.payroll-monthly-form .wide-field {
  grid-column: 1 / -1;
}

.payroll-worker-panel,
.payroll-workspace-group .thread-list {
  min-width: 0;
}

.section-heading-row,
.payroll-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.payroll-toolbar {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin: 12px 0;
}

.payroll-toolbar .secondary-btn,
.payroll-toolbar .ghost-btn {
  align-self: end;
}

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

.payroll-history-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.existing-worker-documents {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.worker-document-list {
  display: grid;
  gap: 8px;
}

.worker-document-chip {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #fff;
}

.worker-document-chip strong {
  color: #0f2f5f;
}

.worker-document-chip span,
.worker-document-chip em {
  color: #475569;
  font-size: 0.86rem;
}

.worker-document-chip em {
  font-style: normal;
}

.document-title-block {
  display: grid;
  gap: 4px;
  text-align: center;
}

.document-title-block h2 {
  margin: 0;
  color: #0f2f5f;
}

.document-title-block p {
  margin: 0;
  color: #475569;
}

.payroll-meta-table th,
.payroll-pay-table th {
  width: 25%;
  background: #eff6ff;
  color: #0f2f5f;
}

.payroll-meta-table td,
.payroll-pay-table td {
  background: #fff;
}

.amount-cell {
  text-align: right;
  white-space: nowrap;
}

.payslip-net-row td {
  background: #ecfdf5;
  font-weight: 800;
  color: #065f46;
}

.payslip-net-banner {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  border: 1px solid #10b981;
  border-radius: 8px;
  padding: 14px 16px;
  background: #ecfdf5;
  color: #065f46;
}

.payslip-net-banner span {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.payslip-net-banner strong {
  font-size: 1.35rem;
}

.worker-contract-attachments {
  display: grid;
  gap: 8px;
}

.worker-contract-attachments h3 {
  margin: 0;
  color: #0f2f5f;
}

.payroll-attachment-table th {
  background: #f1f5f9;
}

.epayslip-document {
  width: min(100%, 820px);
  gap: 8px;
  padding: 22px 28px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.9rem;
  color: #111;
}

.epayslip-school-header {
  display: grid;
  align-items: center;
  justify-content: center;
  justify-items: center;
  gap: 6px;
  text-align: center;
  border-bottom: 2px solid #d1d5db;
  padding-bottom: 8px;
}

.epayslip-school-header img {
  width: 58px;
  height: 58px;
  object-fit: contain;
}

.epayslip-school-header h2 {
  margin: 0;
  font-size: 1.25rem;
  letter-spacing: 0;
  font-weight: 900;
}

.epayslip-school-header p {
  margin: 2px 0 0;
  color: #374151;
  font-size: 0.82rem;
  font-weight: 800;
}

.epayslip-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.86rem;
}

.epayslip-table th,
.epayslip-table td {
  border: 2px solid #222;
  padding: 5px 7px;
  overflow-wrap: anywhere;
  line-height: 1.18;
}

.epayslip-table th {
  background: #7f7f7f;
  color: #fff;
  font-weight: 900;
  text-align: center;
}

.epayslip-period-table td,
.epayslip-id-table td {
  text-align: center;
  font-weight: 900;
}

.epayslip-worker-table td:nth-child(3),
.epayslip-worker-table td:nth-child(4),
.epayslip-lines-table td:nth-child(4),
.epayslip-lines-table td:nth-child(5),
.epayslip-lines-table td:nth-child(6) {
  text-align: right;
}

.epayslip-lines-table th:nth-child(1) {
  width: 10%;
}

.epayslip-lines-table th:nth-child(2) {
  width: 28%;
}

.epayslip-lines-table th:nth-child(3) {
  width: 9%;
}

.epayslip-total-row td,
.epayslip-net-row td {
  font-weight: 900;
}

.epayslip-total-row td:first-child,
.epayslip-net-row td:first-child {
  text-align: center;
}

.epayslip-footer-note {
  display: grid;
  gap: 2px;
  justify-items: center;
  text-align: center;
  margin-top: 10px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.88rem;
}

.epayslip-footer-note strong,
.epayslip-footer-note span {
  font-weight: 900;
}

@media print {
  body[data-print-mode="worker-payslip"] .print-selection-heading {
    display: none !important;
  }

  body[data-print-mode="worker-contract"] .document-sheet,
  body[data-print-mode="worker-payslip"] .document-sheet {
    width: 190mm;
    min-height: 260mm;
    box-shadow: none;
    border-radius: 0;
    break-after: page;
    page-break-after: always;
  }

  body[data-print-mode="worker-payslip"] .epayslip-document {
    width: 190mm;
    min-height: auto;
    padding: 8mm 10mm;
    border: 0;
    gap: 6px;
  }

  body[data-print-mode="worker-payslip"] .epayslip-table {
    font-size: 8.8pt;
  }

  body[data-print-mode="worker-payslip"] .epayslip-table th,
  body[data-print-mode="worker-payslip"] .epayslip-table td {
    padding: 3pt 4.5pt;
    border-width: 1.3pt;
  }

  body[data-print-mode="worker-payslip"] .epayslip-school-header img {
    width: 15mm;
    height: 15mm;
  }

  body[data-print-mode="worker-payslip"] .epayslip-school-header h2 {
    font-size: 15pt;
  }

  body[data-print-mode="worker-contract"] .document-sheet:last-child,
  body[data-print-mode="worker-payslip"] .document-sheet:last-child {
    break-after: auto;
    page-break-after: auto;
  }
}

@media (max-width: 780px) {
  .production-grid {
    grid-template-columns: 1fr;
  }

  .production-readiness-panel .thread-card,
  .advancement-panel .thread-card {
    min-width: 0;
  }

  .form-actions {
    align-items: stretch;
  }

  .form-actions > button,
  .form-actions > .secondary-btn,
  .form-actions > .ghost-btn {
    width: 100%;
  }

  .payroll-workspace-grid,
  .section-heading-row {
    grid-template-columns: 1fr;
  }
}

.reporting-uniform-workspace-group .thread-card {
  min-width: 0;
}

.reporting-uniform-nav {
  flex-wrap: wrap;
  gap: 8px;
}

.reporting-uniform-toolbar {
  align-items: end;
  margin-bottom: 14px;
}

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

.compact-number-input {
  max-width: 96px;
}

.success-row {
  background: rgba(16, 185, 129, 0.08);
}

.warning-row {
  background: rgba(245, 158, 11, 0.1);
}

.danger-row {
  background: rgba(239, 68, 68, 0.1);
}

.reporting-receipt-form .data-table th,
.reporting-receipt-form .data-table td {
  vertical-align: middle;
}

#staff-dashboard.assistant-accountant-mode {
  grid-template-columns: 1fr;
  gap: 0;
  max-width: none;
  padding: 0;
  background: #f7f4fb;
}

#staff-dashboard.assistant-accountant-mode > .side-panel,
#staff-dashboard.assistant-accountant-mode > .content-panel > .section-heading,
#staff-dashboard.assistant-accountant-mode #staffActivityPanel,
#staff-dashboard.assistant-accountant-mode #staffGatePanel,
#staff-dashboard.assistant-accountant-mode #staffStats {
  display: none !important;
}

#staff-dashboard.assistant-accountant-mode > .content-panel {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#staff-dashboard.assistant-accountant-mode #staffWorkPanel {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#staff-dashboard.assistant-accountant-mode #staffWorkPanel > .section-heading {
  display: none;
}

#staff-dashboard.assistant-accountant-mode #staffWorkList {
  display: block;
}

.assistant-accountant-workspace {
  position: relative;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: calc(100vh - 72px);
  overflow: hidden;
  background: #f8f5fd;
  color: #1f0b3a;
}

.assistant-accountant-sidebar {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: calc(100vh - 72px);
  padding: 22px 18px;
  background:
    radial-gradient(circle at -30% 35%, rgba(213, 154, 8, 0.18), transparent 32%),
    linear-gradient(180deg, #260043 0%, #3b0664 46%, #16002a 100%);
  color: #ffffff;
}

.assistant-accountant-brand {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
  text-align: center;
}

.assistant-accountant-brand img {
  width: min(150px, 78%);
  justify-self: center;
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.22));
}

.assistant-accountant-brand strong {
  color: #ffffff;
  font-size: 1.05rem;
  text-transform: uppercase;
}

.assistant-accountant-brand span,
.assistant-accountant-sidebar section p,
.assistant-accountant-help span {
  color: rgba(255, 255, 255, 0.76);
}

.assistant-accountant-sidebar section {
  display: grid;
  gap: 6px;
}

.assistant-accountant-sidebar section p {
  margin: 8px 0 2px;
  font-size: 0.75rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.assistant-menu-button {
  width: 100%;
  min-height: 42px;
  justify-content: flex-start;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  padding: 0 12px;
  font-weight: 900;
  text-align: left;
}

.assistant-menu-button:hover,
.assistant-menu-button.active {
  border-color: rgba(255, 255, 255, 0.18);
  background: linear-gradient(90deg, #d39a08, #9f7000);
  color: #ffffff;
  transform: translateX(2px);
}

.assistant-accountant-help {
  display: grid;
  gap: 5px;
  margin-top: 20px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.06);
}

.assistant-accountant-main {
  min-width: 0;
  display: grid;
  gap: 16px;
  align-content: start;
  padding: 0 28px 22px;
  overflow: auto;
}

.assistant-accountant-topbar {
  position: sticky;
  top: 0;
  z-index: 8;
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) minmax(260px, 360px) auto;
  gap: 18px;
  align-items: center;
  margin: 0 -28px;
  padding: 16px 28px;
  border-bottom: 1px solid rgba(68, 0, 110, 0.12);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
}

.assistant-menu-toggle {
  min-height: 42px;
  border: 0;
  background: transparent;
  color: #3b0664;
  font-weight: 1000;
}

.assistant-accountant-topbar h2 {
  margin: 0;
  color: #3b0664;
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  line-height: 1;
  text-transform: uppercase;
}

.assistant-accountant-topbar h2 span {
  color: #c48905;
}

.assistant-accountant-topbar p,
.assistant-top-meta span,
.assistant-welcome-row p {
  margin: 0;
  color: #59466e;
}

.assistant-search {
  display: grid;
  gap: 4px;
  color: #59466e;
  font-size: 0.75rem;
  font-weight: 900;
}

.assistant-top-meta {
  display: grid;
  justify-items: end;
  gap: 4px;
  color: #2a0645;
}

.assistant-welcome-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: end;
  padding-top: 12px;
}

.assistant-welcome-row h2 {
  margin: 0;
  color: #220038;
  font-size: clamp(1.35rem, 2vw, 1.85rem);
}

.assistant-welcome-row > strong {
  color: #3b0664;
  text-align: right;
}

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

.assistant-stat-card,
.assistant-card {
  border: 1px solid rgba(68, 0, 110, 0.14);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 14px 32px rgba(31, 0, 56, 0.07);
}

.assistant-stat-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 124px;
  padding: 18px;
}

.assistant-stat-card p,
.assistant-stat-card span {
  margin: 0;
  color: #59466e;
  font-size: 0.8rem;
}

.assistant-stat-card p {
  color: #220038;
  font-weight: 1000;
  text-transform: uppercase;
}

.assistant-stat-card strong {
  display: block;
  margin: 5px 0;
  color: #260043;
  font-size: clamp(1.35rem, 2vw, 2rem);
}

.assistant-stat-icon,
.assistant-mini-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(135deg, #5c108f, #320057);
  color: #ffffff;
}

.assistant-stat-icon {
  width: 58px;
  height: 58px;
}

.assistant-mini-icon {
  width: 42px;
  height: 42px;
  border-radius: 8px;
}

.assistant-stat-icon::before,
.assistant-mini-icon::before {
  font-weight: 1000;
}

.assistant-stat-icon.wallet::before,
.assistant-stat-icon.balance::before,
.assistant-mini-icon.stock::before { content: "K"; }
.assistant-stat-icon.deposit::before { content: "D"; }
.assistant-stat-icon.withdrawal::before { content: "W"; }
.assistant-stat-icon.requirements::before { content: "R"; }
.assistant-stat-icon.uniform::before { content: "U"; }
.assistant-stat-icon.receipt::before { content: "P"; }
.assistant-stat-icon.club::before { content: "C"; }
.assistant-mini-icon.books::before { content: "B"; }
.assistant-mini-icon.stationery::before { content: "S"; }
.assistant-mini-icon.uniforms::before { content: "U"; }
.assistant-mini-icon.items::before { content: "I"; }

.assistant-stat-icon.deposit,
.assistant-stat-icon.requirements,
.assistant-mini-icon.books {
  background: linear-gradient(135deg, #e0480a, #f1a20a);
}

.assistant-stat-icon.withdrawal,
.assistant-mini-icon.items {
  background: linear-gradient(135deg, #1642c2, #3920a2);
}

.assistant-stat-icon.balance,
.assistant-mini-icon.stationery {
  background: linear-gradient(135deg, #267c16, #0b9b65);
}

.assistant-stat-icon.club {
  background: linear-gradient(135deg, #8a4a00, #d39b08);
}

.assistant-dashboard-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1.05fr;
  gap: 16px;
  align-items: start;
}

.assistant-card {
  min-width: 0;
  padding: 16px;
}

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

.assistant-card-title h3 {
  margin: 0;
  color: #260043;
  font-size: 1rem;
  text-transform: uppercase;
}

.assistant-chart-card {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 16px;
}

.assistant-chart-card .assistant-card-title {
  grid-column: 1 / -1;
}

.assistant-donut {
  width: 172px;
  height: 172px;
  display: grid;
  place-items: center;
  justify-self: center;
  border-radius: 50%;
  background: conic-gradient(#5b0c9e 0 var(--donut-a), #159447 var(--donut-a) 68%, #f27a1a 68% 84%, #1976d2 84% 100%);
  position: relative;
}

.assistant-donut.pink {
  background: conic-gradient(#d82670 0 var(--donut-a), #f27a1a var(--donut-a) 63%, #f4b400 63% 82%, #159447 82% 100%);
}

.assistant-donut::after {
  content: "";
  position: absolute;
  inset: 42px;
  border-radius: 50%;
  background: #ffffff;
}

.assistant-donut strong,
.assistant-donut span {
  position: relative;
  z-index: 1;
  display: block;
  text-align: center;
}

.assistant-donut strong {
  color: #260043;
}

.assistant-donut span {
  margin-top: 24px;
  color: #59466e;
  font-size: 0.76rem;
  text-transform: uppercase;
}

.assistant-progress-list,
.assistant-list,
.assistant-requirement-list,
.assistant-modal-list {
  display: grid;
  gap: 9px;
}

.assistant-progress-list span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #2a0645;
}

.assistant-progress-list i {
  width: 11px;
  height: 11px;
  align-self: center;
  border-radius: 50%;
  background: var(--dot-color, #5b0c9e);
}

.assistant-list button,
.assistant-requirement-list button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(68, 0, 110, 0.1);
  background: transparent;
  padding: 8px 0;
  color: #220038;
  text-align: left;
}

.assistant-list button:hover,
.assistant-requirement-list button:hover {
  background: rgba(92, 16, 143, 0.05);
}

.assistant-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eadcf6;
  color: #3b0664;
  font-weight: 1000;
}

.assistant-list strong,
.assistant-requirement-list strong {
  display: block;
}

.assistant-list small,
.assistant-requirement-list small {
  display: block;
  color: #675578;
}

.assistant-requirement-list button {
  grid-template-columns: auto minmax(0, 1fr) minmax(80px, 1fr) auto;
}

.assistant-requirement-list i {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #5b0c9e var(--bar-width), #e8e0ef var(--bar-width));
}

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

.assistant-quick-grid button {
  min-height: 118px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 10px;
  border: 1px solid rgba(68, 0, 110, 0.14);
  border-radius: 8px;
  background: #ffffff;
  color: #320057;
  font-weight: 900;
}

.assistant-reminder-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  border-radius: 8px;
  padding: 18px;
  background: linear-gradient(135deg, #4c057a, #6f18a9);
  color: #ffffff;
}

.assistant-reminder-card p,
.assistant-reminder-card strong {
  margin: 0;
  color: #ffffff;
}

.assistant-accountant-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  color: #3b0664;
  font-weight: 900;
}

.success-text { color: #087a3d; }
.danger-text { color: #d03414; }
.low-chip {
  border-radius: 999px;
  padding: 4px 8px;
  background: #ffe1df;
  color: #d03414;
  font-size: 0.75rem;
}

.assistant-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(24, 0, 42, 0.62);
  backdrop-filter: blur(6px);
}

.assistant-modal-panel {
  width: min(1100px, 96vw);
  max-height: min(86vh, 880px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 28px 74px rgba(16, 0, 31, 0.32);
}

.assistant-modal-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(68, 0, 110, 0.12);
  background: #faf7ff;
}

.assistant-modal-panel h2 {
  margin: 0;
  color: #260043;
}

.assistant-modal-content {
  min-height: 0;
  overflow: auto;
  display: grid;
  gap: 14px;
  padding: 18px 20px 22px;
}

.assistant-real-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid rgba(68, 0, 110, 0.12);
  border-radius: 8px;
  padding: 14px;
  background: #fbf9ff;
}

.assistant-real-form .wide-field {
  grid-column: 1 / -1;
}

.assistant-modal-list .thread-card {
  min-width: 0;
}

.assistant-slip-preview-actions {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  padding-bottom: 8px;
  background: #ffffff;
}

.assistant-slip-preview {
  display: grid;
  justify-items: center;
  overflow: auto;
  padding: 10px;
  border-radius: 8px;
  background: #f2edf8;
}

.assistant-slip-preview .document-sheet {
  width: min(100%, 820px);
  margin: 0;
  box-shadow: 0 12px 32px rgba(31, 0, 56, 0.1);
}

@media (max-width: 900px) {
  .two-column-grid {
    grid-template-columns: 1fr;
  }

  .reporting-uniform-toolbar {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .assistant-accountant-workspace {
    grid-template-columns: 1fr;
  }

  .assistant-accountant-sidebar {
    min-height: auto;
  }

  .assistant-accountant-topbar,
  .assistant-stat-grid,
  .assistant-dashboard-grid,
  .assistant-chart-card,
  .assistant-real-form {
    grid-template-columns: 1fr;
  }

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

  .assistant-modal-backdrop {
    padding: 12px;
  }
}

.dashboard-feedback-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1200;
  max-width: min(320px, calc(100vw - 32px));
  padding: 12px 16px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, #3c0a68, #d59a08);
  box-shadow: 0 14px 30px rgba(31, 0, 56, 0.22);
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
}

.dashboard-feedback-btn:hover,
.dashboard-feedback-btn:focus-visible {
  transform: translateY(-1px);
  outline: 2px solid rgba(213, 154, 8, 0.35);
  outline-offset: 3px;
}

.dashboard-feedback-btn[hidden] {
  display: none;
}

.learner-menu-close {
  display: none;
}

@media (max-width: 700px) {
  .dashboard-feedback-btn {
    right: 12px;
    bottom: 12px;
    padding: 10px 12px;
    font-size: 0.82rem;
  }
}

#admin-dashboard.admin-exec-mode {
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  background: #edf4f6;
}

#admin-dashboard.admin-exec-mode > .side-panel {
  background: linear-gradient(180deg, #124764 0%, #176e74 52%, #1b7f71 100%);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #ffffff;
  min-height: calc(100vh - 72px);
  padding: 20px;
  position: sticky;
  top: 72px;
  z-index: 5;
}

#admin-dashboard.admin-exec-mode > .content-panel {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

#admin-dashboard.admin-exec-mode .side-panel > :not(#adminExecutiveSidebar):not(.admin-main-tool-group) {
  display: none !important;
}

#admin-dashboard.admin-exec-mode .side-panel > .admin-main-tool-group {
  display: none;
}

#admin-dashboard.admin-exec-mode.admin-tool-focus-mode .side-panel > .admin-main-tool-group[open] {
  display: block;
  max-height: 46vh;
  overflow: auto;
  background: #ffffff;
  color: #17324a;
  border-color: rgba(255, 255, 255, 0.26);
  box-shadow: 0 18px 38px rgba(5, 31, 48, 0.24);
}

#admin-dashboard.admin-exec-mode.admin-tool-focus-mode .side-panel > .admin-main-tool-group[open] summary {
  color: #17324a;
}

.admin-exec-sidebar {
  display: grid;
  gap: 18px;
}

.admin-exec-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.48);
}

.admin-exec-brand img {
  width: 68px;
  height: 68px;
  object-fit: contain;
  border-radius: 18px;
  background: #ffffff;
  padding: 8px;
}

.admin-exec-brand strong {
  display: block;
  font-size: 1.85rem;
  line-height: 1;
  letter-spacing: 0;
}

.admin-exec-brand span,
.admin-exec-user-card small,
.admin-exec-db-card span {
  color: rgba(255, 255, 255, 0.78);
}

.admin-exec-user-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 12px;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.admin-exec-user-card > span,
.admin-exec-profile strong {
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #f7c552;
  color: #16324a;
  font-weight: 1000;
}

.admin-exec-user-card > span {
  width: 44px;
  height: 44px;
}

.admin-exec-user-card i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #63e6a6;
}

.admin-exec-nav {
  display: grid;
  gap: 12px;
}

.admin-exec-nav section {
  display: grid;
  gap: 7px;
}

.admin-exec-nav p,
.admin-exec-db-card small {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.73rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
}

.admin-exec-nav button {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  border: 0;
  border-radius: 10px;
  padding: 10px;
  color: rgba(255, 255, 255, 0.92);
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.admin-exec-nav button.active,
.admin-exec-nav button:hover,
.admin-exec-nav button:focus-visible {
  background: #ffffff;
  color: #12706b;
  outline: 0;
}

.admin-exec-nav button span,
.admin-exec-top-actions button,
.admin-exec-stat-row article > span,
.admin-action-card span,
.admin-module-grid button > span,
.admin-quick-grid button > span {
  display: grid;
  place-items: center;
  border-radius: 8px;
  min-width: 32px;
  min-height: 32px;
  background: rgba(255, 255, 255, 0.18);
  color: inherit;
  font-weight: 1000;
  font-size: 0.78rem;
}

.admin-exec-nav button em {
  min-width: 28px;
  border-radius: 999px;
  padding: 4px 7px;
  background: rgba(255, 255, 255, 0.18);
  color: inherit;
  font-style: normal;
  text-align: center;
  font-size: 0.74rem;
  font-weight: 1000;
}

.admin-exec-db-card {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.44);
}

.admin-executive-home {
  display: grid;
  gap: 24px;
  padding: 20px 28px 28px;
}

.admin-exec-topbar {
  display: grid;
  grid-template-columns: minmax(230px, auto) minmax(360px, 640px) auto;
  gap: 24px;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid #d7e2e8;
}

.admin-exec-topbar h2 {
  margin: 0;
  color: #17324a;
  font-size: 1.9rem;
}

.admin-command-search {
  position: relative;
  display: grid;
}

.admin-command-search > span {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  border: 2px solid #7891a4;
  border-radius: 999px;
  z-index: 1;
}

.admin-command-search > span::after {
  content: "";
  position: absolute;
  right: -6px;
  bottom: -5px;
  width: 9px;
  height: 2px;
  border-radius: 999px;
  background: #7891a4;
  transform: rotate(45deg);
}

.admin-command-search input {
  min-height: 48px;
  padding-left: 42px;
  background: #f8fbfd;
  border-color: #cfdae3;
  border-radius: 14px;
}

.admin-exec-search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  display: grid;
  gap: 8px;
  max-height: 360px;
  overflow: auto;
  padding: 10px;
  border: 1px solid #d5e0e8;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(18, 46, 68, 0.2);
  z-index: 20;
}

.admin-exec-search-results[hidden] {
  display: none;
}

.admin-exec-search-results button {
  display: grid;
  gap: 3px;
  border: 1px solid #e0e9ef;
  border-radius: 10px;
  background: #f8fbfd;
  padding: 10px;
  text-align: left;
  cursor: pointer;
}

.admin-exec-search-results em {
  color: #12706b;
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 900;
}

.admin-exec-top-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
}

.admin-exec-top-actions > span {
  display: grid;
  gap: 2px;
  min-width: 112px;
  padding: 10px 14px;
  border: 1px solid #d7e2e8;
  border-radius: 14px;
  color: #607689;
  background: #ffffff;
}

.admin-exec-top-actions > span b {
  color: #17324a;
}

.admin-exec-top-actions button {
  position: relative;
  border: 1px solid #d7e2e8;
  background: #ffffff;
  color: #17324a;
  cursor: pointer;
}

.admin-exec-top-actions button b {
  position: absolute;
  top: -8px;
  right: -8px;
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #e75b4d;
  color: #ffffff;
  font-size: 0.7rem;
}

.admin-exec-profile {
  display: grid;
  grid-template-columns: 42px auto;
  gap: 10px;
  align-items: center;
}

.admin-exec-profile strong {
  width: 42px;
  height: 42px;
}

.admin-exec-profile span {
  display: grid;
  color: #17324a;
  font-weight: 900;
}

.admin-exec-profile small {
  color: #607689;
  font-weight: 700;
}

.admin-exec-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 540px;
  gap: 20px;
}

.admin-exec-hero {
  min-height: 210px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 24px;
  align-items: center;
  padding: 32px;
  border-radius: 0 0 22px 22px;
  background:
    linear-gradient(120deg, rgba(18, 72, 98, 0.96), rgba(18, 88, 105, 0.92)),
    url("images/school-logo.png") center right 18% / 260px auto no-repeat;
  color: #ffffff;
}

.admin-exec-hero p {
  margin: 0 0 10px;
  color: #ffdc69;
  font-size: 0.77rem;
  font-weight: 1000;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-exec-hero h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3rem);
}

.admin-exec-hero span {
  display: block;
  max-width: 720px;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.86);
}

.admin-exec-hero div div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.admin-readiness-ring {
  width: 152px;
  height: 152px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  border-radius: 999px;
  background:
    radial-gradient(circle at center, #195369 0 58%, transparent 59%),
    conic-gradient(#5be2a5 calc(var(--ready) * 1%), rgba(255, 255, 255, 0.25) 0);
  text-align: center;
}

.admin-readiness-ring strong {
  font-size: 2.15rem;
}

.admin-readiness-ring span,
.admin-readiness-ring small {
  font-size: 0.72rem;
}

.admin-alert-stack {
  display: grid;
  gap: 12px;
}

.admin-alert-stack button {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 70px;
  border: 1px solid #d7e2e8;
  border-radius: 16px;
  background: #ffffff;
  padding: 12px;
  text-align: left;
  cursor: pointer;
}

.admin-alert-stack span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #d98000;
  background: #fff1d7;
  font-weight: 1000;
}

.admin-alert-stack small {
  display: block;
  margin-top: 4px;
  color: #607689;
}

.admin-alert-stack em {
  color: #12706b;
  font-style: normal;
  font-weight: 1000;
}

.admin-exec-stat-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
}

.admin-exec-stat-row article {
  display: grid;
  gap: 8px;
  min-height: 120px;
  padding: 18px;
  border: 1px solid #d7e2e8;
  border-radius: 18px;
  background: #ffffff;
}

.admin-exec-stat-row strong {
  color: #17324a;
  font-size: 1.8rem;
}

.admin-exec-stat-row small,
.admin-exec-stat-row em {
  color: #607689;
  font-style: normal;
}

.admin-exec-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid #d7e2e8;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 14px 32px rgba(20, 48, 68, 0.06);
}

.admin-module-health {
  grid-column: 1 / span 1;
}

.admin-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
}

.admin-card-head h3 {
  margin: 0;
  color: #17324a;
}

.admin-card-head button {
  border: 0;
  background: #eef8f5;
  color: #12706b;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 900;
  cursor: pointer;
}

.admin-donut-summary {
  width: 150px;
  height: 150px;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 999px;
  background: conic-gradient(#147c72 0 36%, #276f9a 36% 62%, #f7c552 62% 82%, #7a65d8 82% 94%, #9db6c5 94% 100%);
  color: #17324a;
  box-shadow: inset 0 0 0 34px #ffffff;
}

.admin-donut-summary strong {
  font-size: 2rem;
}

.admin-user-distribution {
  grid-template-columns: 170px minmax(0, 1fr);
  align-items: center;
}

.admin-user-distribution .admin-card-head {
  grid-column: 1 / -1;
}

.admin-distribution-bars {
  display: grid;
  gap: 9px;
}

.admin-distribution-bars p {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) 32px;
  gap: 10px;
  align-items: center;
  margin: 0;
  color: #415a70;
  font-size: 0.84rem;
}

.admin-distribution-bars i {
  height: 9px;
  border-radius: 999px;
  background: #e8f0f4;
  overflow: hidden;
}

.admin-distribution-bars b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #147c72;
}

.admin-workflow-row,
.admin-action-card,
.admin-module-grid button,
.admin-quick-grid button {
  display: grid;
  gap: 5px;
  border: 1px solid #d7e2e8;
  border-radius: 14px;
  background: #f9fcfd;
  padding: 12px;
  color: #17324a;
  text-align: left;
  cursor: pointer;
}

.admin-workflow-row {
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
}

.admin-workflow-row > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: #e5f6ef;
  color: #12706b;
  font-weight: 1000;
}

.admin-workflow-row small {
  grid-column: 2 / 3;
  color: #607689;
}

.admin-workflow-row em {
  grid-row: 1 / span 2;
  grid-column: 3 / 4;
  color: #d99014;
  font-style: normal;
  font-weight: 900;
}

.admin-quick-grid,
.admin-module-grid,
.admin-workspace-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

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

.admin-module-grid button,
.admin-quick-grid button {
  min-height: 84px;
}

.admin-module-grid small,
.admin-quick-grid small,
.admin-action-card small {
  color: #607689;
}

.admin-module-grid em {
  justify-self: start;
  color: #12706b;
  font-style: normal;
  font-weight: 1000;
}

.admin-activity-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid #e1eaf0;
}

.admin-activity-row span {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #147c72;
}

.admin-activity-row small {
  color: #607689;
}

.admin-workspace-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  padding: 26px;
  border-radius: 0 0 22px 22px;
  background: linear-gradient(120deg, #124862, #16776f);
  color: #ffffff;
}

.admin-workspace-intro h1 {
  margin: 0;
  font-size: clamp(1.8rem, 3vw, 2.55rem);
}

.admin-workspace-intro span {
  color: rgba(255, 255, 255, 0.84);
}

.admin-workspace-intro > strong {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 24px;
  background: #f7c552;
  color: #17324a;
  font-size: 2rem;
}

.admin-workspace-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-workspace-tabs button {
  border: 1px solid #d7e2e8;
  border-radius: 999px;
  background: #ffffff;
  color: #17324a;
  padding: 10px 14px;
  font-weight: 900;
  cursor: pointer;
}

.admin-workspace-tabs button.active,
.admin-workspace-tabs button:hover,
.admin-workspace-tabs button:focus-visible {
  border-color: #12706b;
  background: #12706b;
  color: #ffffff;
  outline: 0;
}

.admin-workspace-actions {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.admin-action-card {
  min-height: 104px;
}

#admin-dashboard .admin-workspace-panel[hidden] {
  display: none !important;
}

#admin-dashboard.admin-exec-mode .admin-workspace-panel:not([hidden]) {
  margin: 0 28px 20px;
}

#admin-dashboard.admin-exec-mode .admin-search-highlight {
  outline: 3px solid rgba(247, 197, 82, 0.88);
  outline-offset: 4px;
}

@media (max-width: 1300px) {
  #admin-dashboard.admin-exec-mode {
    grid-template-columns: 260px minmax(0, 1fr);
  }

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

  .admin-exec-stat-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .admin-exec-top-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 920px) {
  #admin-dashboard.admin-exec-mode {
    grid-template-columns: 1fr;
  }

  #admin-dashboard.admin-exec-mode > .side-panel {
    position: static;
    min-height: auto;
  }

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

  .admin-exec-nav p {
    grid-column: 1 / -1;
  }

  .admin-exec-hero,
  .admin-user-distribution {
    grid-template-columns: 1fr;
  }

  .admin-exec-stat-row,
  .admin-module-grid,
  .admin-quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .admin-executive-home {
    padding: 16px;
  }

  .admin-exec-stat-row,
  .admin-module-grid,
  .admin-quick-grid,
  .admin-workspace-actions,
  .admin-distribution-bars p {
    grid-template-columns: 1fr;
  }

  .admin-exec-hero {
    padding: 22px;
  }

  .admin-workflow-row {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .admin-workflow-row em {
    grid-column: 2;
    grid-row: auto;
  }
}

/* IGSS HD public homepage */
body[data-route="home"] {
  background: #f3f7fc;
}

body[data-route="home"] .site-header {
  display: none;
}

.igss-home-v2.home-dashboard-view {
  min-height: 100vh;
  padding: 0;
  background: #f3f7fc;
  color: #0c1b35;
}

.igss-home-v2 .home-dashboard-shell {
  display: block;
  min-height: 100vh;
  background: #f3f7fc;
}

.igss-home-v2 .home-school-sidebar {
  display: none;
}

.igss-home-v2 .home-dashboard-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 22px;
  background: #f3f7fc;
}

.igss-home-v2 .home-dashboard-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: 92px;
  display: grid;
  grid-template-columns: 260px 148px minmax(380px, 1fr) 210px auto;
  align-items: center;
  gap: 12px;
  margin: 0 -22px;
  padding: 12px 22px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(90deg, #061d43, #052557 58%, #061b3e);
  box-shadow: 0 16px 36px rgba(1, 19, 45, 0.22);
  color: #ffffff;
  overflow: visible;
}

.igss-home-v2 .home-dashboard-topbar::before,
.igss-home-v2 .home-dashboard-topbar::after {
  display: none;
}

.igss-home-brand {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: #ffffff;
}

.igss-home-brand img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.24));
}

.igss-home-brand strong {
  display: block;
  color: #ffffff;
  font-size: 1.08rem;
  line-height: 1.02;
  letter-spacing: 0;
}

.igss-home-brand small {
  display: block;
  margin-top: 4px;
  color: #ffd24c;
  font-size: 0.74rem;
  font-weight: 900;
}

.igss-home-product {
  min-height: 58px;
  display: grid;
  align-content: center;
  padding-left: 18px;
  border-left: 1px solid rgba(255, 255, 255, 0.28);
}

.igss-home-product strong {
  color: #ffffff;
  font-size: 2rem;
  line-height: 0.95;
  letter-spacing: 0;
}

.igss-home-product span {
  color: #ffc928;
  font-weight: 1000;
}

.igss-home-v2 .home-top-nav {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: clamp(12px, 1.2vw, 20px);
  padding: 0;
}

.igss-home-v2 .home-top-nav a {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  border-bottom: 3px solid transparent;
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.9rem;
  font-weight: 950;
  white-space: nowrap;
}

.igss-home-v2 .home-top-nav a:first-child,
.igss-home-v2 .home-top-nav a:hover {
  color: #ffffff;
  border-bottom-color: #ffc928;
}

.igss-home-v2 .home-top-nav a::before {
  display: none;
}

.igss-home-v2 .home-top-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: center;
  gap: 0;
  min-width: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.igss-home-v2 .home-top-search .text-field {
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #ffffff;
}

.igss-home-v2 .home-top-search .text-field::placeholder {
  color: rgba(255, 255, 255, 0.74);
}

.igss-home-v2 .home-search-btn {
  width: 42px;
  height: 42px;
  color: #ffffff;
  background: transparent;
}

.igss-home-v2 .home-top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.igss-language-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #ffffff;
  font-weight: 900;
  white-space: nowrap;
}

.igss-language-pill::before,
.igss-sun-btn::before,
.igss-moon-btn::before {
  content: "";
  display: block;
}

.igss-language-pill::before {
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.igss-sun-btn,
.igss-moon-btn {
  color: #ffc928;
  background: transparent;
}

.igss-sun-btn::before {
  width: 20px;
  height: 20px;
  border: 3px solid currentColor;
  border-radius: 50%;
  box-shadow: 0 -10px 0 -7px currentColor, 0 10px 0 -7px currentColor, 10px 0 0 -7px currentColor, -10px 0 0 -7px currentColor;
}

.igss-moon-btn::before {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: inset -6px 0 0 currentColor;
}

.igss-home-v2 .install-btn {
  min-height: 44px;
  border-radius: 8px;
  background: #ffc928;
  color: #081d3f;
  box-shadow: none;
}

.igss-notice-status-row {
  order: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin-top: 12px;
}

.igss-home-v2 .home-emergency-banner {
  min-height: 42px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin: 0;
  border: 1px solid #dbe5f1;
  border-radius: 9px;
  padding: 6px 12px 6px 0;
  background: #ffffff;
  color: #0d2448;
  box-shadow: 0 8px 20px rgba(15, 45, 82, 0.08);
}

.igss-home-v2 .home-emergency-banner[hidden] {
  display: grid;
}

.igss-home-v2 .home-emergency-banner strong {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  padding: 0 18px;
  background: #0b5cab;
  color: #ffffff;
  font-size: 0.78rem;
  text-transform: uppercase;
}

.igss-home-v2 .home-emergency-banner strong::before {
  content: "";
  width: 16px;
  height: 16px;
  margin-right: 8px;
  background: currentColor;
  clip-path: polygon(0 38%, 32% 38%, 66% 12%, 66% 88%, 32% 62%, 0 62%);
}

.igss-home-v2 .home-emergency-banner span {
  color: #0d2448;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.igss-home-v2 .home-emergency-banner a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  border-radius: 7px;
  padding: 0 12px;
  background: #f4f8ff;
  color: #0159c7;
  font-weight: 950;
}

.igss-home-status-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.igss-home-status-pills span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #dbe5f1;
  border-radius: 9px;
  padding: 0 12px;
  background: #ffffff;
  color: #0d2448;
  font-size: 0.78rem;
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(15, 45, 82, 0.06);
}

.igss-home-status-pills span::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.igss-home-status-pills .online::before {
  background: #0ead55;
  box-shadow: 0 0 0 4px rgba(14, 173, 85, 0.12);
}

.igss-home-status-pills .offline::before {
  background: #ff2d2d;
  box-shadow: 0 0 0 4px rgba(255, 45, 45, 0.12);
}

.igss-home-v2 .home-dashboard-hero {
  order: 3;
  position: relative;
  min-height: clamp(270px, 25vw, 310px);
  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(340px, 1.1fr);
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #092b5d;
  box-shadow: 0 18px 42px rgba(9, 32, 68, 0.16);
}

.igss-home-v2 .home-dashboard-hero::before,
.igss-home-v2 .home-dashboard-hero::after {
  display: none;
}

.igss-home-v2 .home-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  min-height: 100%;
  overflow: hidden;
}

.igss-home-v2 .home-hero-picture {
  position: absolute;
  inset: 0;
  min-height: 100%;
  background-image: url("images/home-hero-2.jpg");
  background-size: cover;
  background-position: center;
  filter: saturate(1.05) contrast(1.04);
  animation: heroPictureMove 18s ease-in-out infinite alternate;
  transition: opacity 0.45s ease;
}

.igss-home-v2 .home-hero-watermark {
  position: absolute;
  right: clamp(18px, 2.5vw, 38px);
  bottom: clamp(18px, 2.5vw, 34px);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  opacity: 0.62;
  color: #fff;
  font-size: clamp(0.72rem, 1.15vw, 1rem);
  font-weight: 1000;
  letter-spacing: 0.1em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

.igss-home-v2 .home-hero-watermark img {
  width: clamp(42px, 5vw, 68px);
  height: clamp(42px, 5vw, 68px);
  object-fit: contain;
  opacity: 0.78;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.55));
}

.igss-home-v2 .home-hero-picture::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4, 22, 51, 0.98) 0%, rgba(5, 29, 65, 0.88) 34%, rgba(5, 29, 65, 0.16) 70%, rgba(255, 255, 255, 0.28) 100%),
    linear-gradient(180deg, rgba(6, 29, 67, 0.08), rgba(6, 29, 67, 0.18));
}

.igss-home-v2 .home-copy {
  position: relative;
  z-index: 2;
  width: min(920px, 72%);
  margin: 0;
  display: grid;
  align-content: center;
  padding: 28px 50px;
  color: #ffffff;
}

.igss-home-v2 .home-copy::before,
.igss-home-v2 .home-copy::after {
  display: none;
}

.igss-home-v2 .home-copy .eyebrow {
  margin: 0 0 10px;
  color: #ffc928;
  font-size: 0.88rem;
  font-weight: 1000;
  letter-spacing: 0;
  text-transform: uppercase;
}

.igss-home-v2 .home-smart-title {
  max-width: 900px;
  margin: 0;
  color: #ffffff;
  font-size: clamp(2.1rem, 3.35vw, 3rem);
  line-height: 1.05;
  letter-spacing: 0;
  text-transform: none;
  -webkit-text-stroke: 0;
  text-shadow: 0 14px 26px rgba(0, 0, 0, 0.24);
}

.igss-home-v2 .home-dashboard-hero .home-smart-title {
  max-width: none;
  font-size: clamp(2.25rem, 3.1vw, 3.15rem);
  line-height: 1.04;
}

.igss-home-v2 .home-smart-title span {
  display: inline;
  color: inherit;
  font-size: inherit;
  -webkit-text-stroke: 0;
  text-shadow: none;
}

.igss-home-v2 .home-dashboard-hero .lead {
  max-width: 720px;
  margin-top: 14px;
  border: 0;
  padding: 0;
  color: rgba(255, 255, 255, 0.95);
  font-size: 1.08rem;
  font-weight: 780;
  line-height: 1.45;
  text-align: left;
  text-transform: none;
}

.igss-home-v2 .home-smart-pills,
.igss-home-v2 .home-scripture {
  display: none;
}

.igss-home-v2 .hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 14px;
  margin-top: 22px;
}

.igss-home-v2 .hero-actions .primary-btn,
.igss-home-v2 .hero-actions .secondary-btn {
  min-height: 48px;
  border-radius: 8px;
  padding: 0 22px;
  font-weight: 1000;
  text-transform: uppercase;
}

.igss-home-v2 .hero-actions .primary-btn {
  background: #ffc928;
  color: #071f45;
}

.igss-home-v2 .hero-actions .secondary-btn {
  border: 1px solid rgba(255, 255, 255, 0.76);
  background: rgba(5, 29, 65, 0.42);
  color: #ffffff;
}

.igss-home-v2 .home-quick-profile,
.igss-home-v2 #homeHeroStatus {
  display: none;
}

.igss-home-v2 .home-hero-feature {
  position: absolute;
  z-index: 3;
  right: clamp(34px, 6vw, 78px);
  top: 50%;
  bottom: auto;
  width: min(250px, 22vw);
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 8px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: #061d43;
  text-align: center;
  box-shadow: none;
  backdrop-filter: none;
}

.igss-home-v2 .home-hero-feature-logo {
  width: clamp(118px, 12vw, 168px);
  height: clamp(118px, 12vw, 168px);
  display: grid;
  place-items: center;
  animation: iconFloat 5s ease-in-out infinite;
  filter: drop-shadow(0 16px 18px rgba(0, 0, 0, 0.22));
}

.igss-home-v2 .home-hero-feature-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.igss-home-v2 .home-hero-feature strong,
.igss-home-v2 .home-hero-feature p {
  display: block;
  margin: 0;
  color: #071f45;
  font-weight: 1000;
  text-shadow: 0 2px 10px rgba(255, 255, 255, 0.72);
}

.igss-home-v2 .home-hero-feature p {
  color: #071f45;
  font-size: 0.9rem;
  font-style: italic;
}

.igss-home-v2 .home-hero-feature-icon {
  display: none;
}

.igss-home-v2 .home-hero-dots {
  right: 42px;
  bottom: 24px;
  z-index: 4;
}

.igss-home-v2 .home-portal-cards {
  order: 4;
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
  margin: 6px 0 0;
  border: 1px solid #dce7f2;
  border-radius: 14px;
  padding: 44px 10px 10px;
  overflow: visible;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(17, 43, 76, 0.08);
}

.igss-portal-heading {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  min-width: min(420px, calc(100% - 40px));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0;
  color: #005cc8;
  font-size: 1.12rem;
  font-weight: 1000;
  text-align: center;
  text-transform: uppercase;
  background: #f3f7fc;
}

.igss-portal-heading::before,
.igss-portal-heading::after {
  content: "";
  width: 64px;
  height: 2px;
  background: #9eb9df;
}

.igss-home-v2 .home-portal-card {
  min-height: 190px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 1fr auto auto;
  justify-items: center;
  gap: 8px;
  border: 0;
  border-radius: 8px;
  padding: 14px 16px 12px;
  color: #ffffff;
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 14px 26px rgba(14, 36, 69, 0.14);
  transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
}

.igss-home-v2 .home-portal-card:hover {
  transform: translateY(-5px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), 0 18px 34px rgba(14, 36, 69, 0.22);
  filter: saturate(1.08);
}

.igss-home-v2 .portal-card-learner {
  background: linear-gradient(160deg, #0d9d48, #087d3a);
}

.igss-home-v2 .portal-card-parent {
  background: linear-gradient(160deg, #086cd6, #034b9d);
}

.igss-home-v2 .portal-card-teacher {
  background: linear-gradient(160deg, #7141db, #4a2dab);
}

.igss-home-v2 .portal-card-staff {
  background: linear-gradient(160deg, #18b9b4, #088f97);
}

.igss-home-v2 .portal-card-management {
  background: linear-gradient(160deg, #ff7b16, #e45e06);
}

.igss-home-v2 .portal-card-admin {
  background: linear-gradient(160deg, #082f66, #051f47);
}

.igss-home-v2 .portal-icon {
  grid-row: auto;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #ffffff;
  color: currentColor;
  animation: iconFloat 4.8s ease-in-out infinite;
}

.igss-home-v2 .home-portal-card .portal-icon {
  color: inherit;
}

.igss-home-v2 .portal-icon::before,
.igss-home-v2 .portal-icon::after {
  color: currentColor;
  background-color: currentColor;
}

.igss-home-v2 .portal-card-learner .portal-icon {
  color: #0b9146;
}

.igss-home-v2 .portal-card-parent .portal-icon {
  color: #075cc6;
}

.igss-home-v2 .portal-card-teacher .portal-icon {
  color: #5d39c2;
}

.igss-home-v2 .portal-card-staff .portal-icon {
  color: #06999a;
}

.igss-home-v2 .portal-card-management .portal-icon {
  color: #f16d0a;
}

.igss-home-v2 .portal-card-admin .portal-icon {
  color: #062554;
}

.igss-home-v2 .portal-teacher::before,
.igss-home-v2 .portal-staff::before,
.igss-home-v2 .portal-admin::before,
.igss-home-v2 .portal-lock::before {
  width: 28px;
  height: 22px;
  border: 3px solid currentColor;
  border-radius: 6px;
  background: transparent;
}

.igss-home-v2 .portal-teacher::after,
.igss-home-v2 .portal-staff::after {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: currentColor;
  top: 14px;
  box-shadow: 0 15px 0 -3px currentColor;
}

.igss-home-v2 .portal-admin::before {
  width: 32px;
  height: 34px;
  background: currentColor;
  clip-path: polygon(50% 0, 88% 14%, 82% 70%, 50% 100%, 18% 70%, 12% 14%);
  border: 0;
}

.igss-home-v2 .portal-admin::after {
  width: 9px;
  height: 16px;
  border-right: 3px solid #ffffff;
  border-bottom: 3px solid #ffffff;
  background: transparent;
  transform: rotate(42deg);
}

.igss-home-v2 .portal-lock::before {
  width: 28px;
  height: 22px;
  top: 28px;
  border-radius: 5px;
  background: currentColor;
}

.igss-home-v2 .portal-lock::after {
  width: 20px;
  height: 18px;
  top: 14px;
  border: 3px solid currentColor;
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: transparent;
}

.igss-home-v2 .home-portal-card strong {
  color: #ffffff;
  font-size: 1rem;
  line-height: 1.1;
  text-transform: uppercase;
}

.igss-home-v2 .home-portal-card p {
  grid-column: auto;
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.3;
}

.igss-home-v2 .home-portal-card b {
  min-width: 150px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  padding: 0 14px;
  background: #ffffff;
  color: #064a9d;
  font-size: 0.82rem;
  text-transform: uppercase;
}

.igss-home-v2 .home-portal-card small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 850;
}

.igss-home-v2 .home-portal-card small::before {
  content: "";
  width: 8px;
  height: 8px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: #15c06f;
}

.igss-home-v2 .portal-card-admin small::before {
  background: #ff2d2d;
}

.igss-home-v2 .home-assurance-strip {
  order: 5;
  display: grid;
  grid-template-columns: 118px repeat(10, minmax(94px, 1fr));
  gap: 10px;
  align-items: center;
  min-height: 78px;
  border: 1px solid #dce7f2;
  border-radius: 10px;
  padding: 12px 14px;
  background: #ffffff;
  color: #0d2448;
  box-shadow: 0 12px 28px rgba(17, 43, 76, 0.08);
  overflow-x: auto;
}

.igss-home-v2 .home-assurance-strip h2 {
  margin: 0;
  color: #071f45;
  font-size: 1.05rem;
  line-height: 1.08;
  text-transform: uppercase;
}

.igss-home-v2 .home-assurance-strip a {
  min-height: 54px;
  display: grid;
  grid-template-columns: 42px minmax(72px, 1fr);
  align-items: center;
  gap: 8px;
  border-right: 1px solid #dce7f2;
  padding-right: 10px;
  color: #0d2448;
}

.igss-home-v2 .home-assurance-strip a:last-child {
  border-right: 0;
}

.igss-home-v2 .home-assurance-strip strong {
  color: #0d2448;
  font-size: 0.72rem;
  line-height: 1.18;
}

.igss-home-v2 .home-assurance-strip .assurance-icon {
  width: 42px;
  height: 42px;
  border: 1px solid #9fd6bb;
  border-radius: 9px;
  color: #0d9d48;
  background: #f3fbf6;
  animation: iconFloat 5s ease-in-out infinite;
}

.igss-home-v2 .home-assurance-strip a:nth-of-type(2n) .assurance-icon {
  border-color: #9cc3f3;
  color: #086cd6;
  background: #f2f7ff;
}

.igss-home-v2 .home-assurance-strip a:nth-of-type(3n) .assurance-icon {
  border-color: #d8c0ff;
  color: #7141db;
  background: #f7f2ff;
}

.igss-home-v2 .home-dashboard-grid {
  order: 6;
  grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
  gap: 16px;
}

.igss-home-v2 .home-overview-card,
.igss-home-v2 .home-achievement-card,
.igss-home-v2 .home-quick-card {
  display: none;
}

.igss-home-v2 .home-dashboard-card,
.igss-home-v2 .home-dynamic-card,
.igss-home-v2 .home-gallery-section,
.igss-home-v2 .home-download-section,
.igss-home-v2 .home-contact-section,
.igss-home-v2 .home-school-profile-section > * {
  border: 1px solid #dce7f2;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(17, 43, 76, 0.07);
}

.igss-home-v2 .home-dashboard-card {
  min-height: 230px;
  padding: 18px;
}

.igss-home-v2 .compact-heading {
  margin-bottom: 12px;
}

.igss-home-v2 .compact-heading .eyebrow {
  display: none;
}

.igss-home-v2 .compact-heading h2 {
  color: #071f45;
  font-size: 1rem;
  line-height: 1.2;
}

.igss-home-v2 .thread-card {
  border: 0;
  border-bottom: 1px solid #e3ebf4;
  border-radius: 0;
  padding: 10px 0;
  background: transparent;
  box-shadow: none;
}

.igss-home-v2 .thread-card:last-child {
  border-bottom: 0;
}

.igss-home-v2 .thread-card strong {
  color: #0d2448;
}

.igss-home-v2 .thread-card p,
.igss-home-v2 .thread-card span {
  color: #54647c;
}

.igss-home-v2 .igss-status-list {
  display: grid;
  gap: 0;
}

.igss-home-v2 .igss-status-list p {
  min-height: 38px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 0;
  border-bottom: 1px solid #e3ebf4;
  color: #54647c;
  font-weight: 800;
}

.igss-home-v2 .igss-status-list p:last-child {
  border-bottom: 0;
}

.igss-home-v2 .igss-status-list strong {
  color: #0d2448;
}

.igss-home-v2 .igss-status-list .status-online {
  color: #0a8b43;
}

.igss-home-v2 .igss-status-list .status-offline {
  color: #e11d26;
}

.igss-home-v2 .home-ops-grid {
  order: 7;
}

.igss-home-v2 .home-contact-section {
  order: 8;
}

.igss-home-v2 .home-advanced-grid {
  order: 9;
}

.igss-home-v2 .home-school-profile-section {
  order: 10;
}

.igss-home-v2 .home-public-records {
  order: 11;
}

.igss-home-v2 .home-gallery-section {
  order: 12;
}

.igss-home-v2 .home-download-section {
  order: 13;
}

.igss-home-v2 .home-advanced-grid,
.igss-home-v2 .home-dashboard-grid,
.igss-home-v2 .home-school-profile-section,
.igss-home-v2 .home-ops-grid,
.igss-home-v2 .home-public-records,
.igss-home-v2 .home-download-section,
.igss-home-v2 .home-contact-section {
  display: none;
}

.igss-home-v2 .home-gallery-section {
  order: 6;
  display: block;
}

.home-popup-open {
  overflow: hidden;
}

.igss-home-v2 .home-popup-overlay[hidden] {
  display: none;
}

.igss-home-v2 .home-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
}

.igss-home-v2 .home-popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 18, 42, 0.72);
  backdrop-filter: blur(8px);
}

.igss-home-v2 .home-popup-panel {
  position: relative;
  width: min(1120px, calc(100vw - 36px));
  max-height: calc(100vh - 40px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 18px;
  background: #f6f9fd;
  box-shadow: 0 30px 90px rgba(1, 12, 31, 0.42);
  overflow: hidden;
}

.igss-home-v2 .home-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px;
  border-bottom: 1px solid #dce7f2;
  background: linear-gradient(90deg, #061d43, #052557);
  color: #ffffff;
}

.igss-home-v2 .home-popup-header .eyebrow,
.igss-home-v2 .home-popup-header h2 {
  margin: 0;
  color: #ffffff;
}

.igss-home-v2 .home-popup-header .eyebrow {
  display: block;
  color: #ffc928;
  font-size: 0.72rem;
}

.igss-home-v2 .home-popup-header h2 {
  margin-top: 4px;
  font-size: 1.28rem;
  letter-spacing: 0;
}

.igss-home-v2 #homePopupClose {
  width: auto;
  min-width: 84px;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 10px;
  padding: 0 14px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  font-weight: 900;
}

.igss-home-v2 .home-popup-content {
  min-height: 0;
  overflow: auto;
  padding: 20px;
}

.igss-home-v2 .home-popup-content .home-popup-active-section {
  display: block !important;
  width: 100%;
  margin: 0;
}

.igss-home-v2 .home-popup-content .home-popup-active-section.home-dashboard-grid,
.igss-home-v2 .home-popup-content .home-popup-active-section.home-advanced-grid,
.igss-home-v2 .home-popup-content .home-popup-active-section.home-school-profile-section,
.igss-home-v2 .home-popup-content .home-popup-active-section.home-ops-grid,
.igss-home-v2 .home-popup-content .home-popup-active-section.home-public-records {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 16px;
}

.igss-home-v2 .home-popup-content .home-dashboard-card,
.igss-home-v2 .home-popup-content .home-dynamic-card,
.igss-home-v2 .home-popup-content .home-download-section,
.igss-home-v2 .home-popup-content .home-contact-section,
.igss-home-v2 .home-popup-content .school-profile-card,
.igss-home-v2 .home-popup-content .home-search-section {
  box-shadow: 0 10px 26px rgba(17, 43, 76, 0.08);
}

.igss-home-v2 .home-popup-content .home-download-grid,
.igss-home-v2 .home-popup-content .home-contact-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.igss-home-v2 .site-footer {
  order: 7;
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto auto;
  align-items: center;
  gap: 20px;
  margin: 0 -28px;
  padding: 14px 28px;
  border-radius: 0;
  background: linear-gradient(90deg, #061d43, #052557);
  color: #ffffff;
}

.igss-home-v2 .footer-headteacher-card {
  grid-column: 1 / -1;
  display: grid;
  width: min(720px, 100%);
  justify-self: center;
  margin-bottom: 4px;
}

.igss-home-v2 .site-footer .footer-marquee,
.igss-home-v2 .site-footer .footer-quote,
.igss-home-v2 .site-footer > div:not(.footer-social) {
  display: none;
}

.igss-home-v2 .footer-links {
  display: flex;
  gap: 34px;
}

.igss-home-v2 .footer-links a,
.igss-home-v2 #footerYear {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.82rem;
  font-weight: 760;
}

.igss-home-v2 .footer-social a {
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
}

.igss-home-v2 .site-footer::before {
  content: "\00a9  2026 Ibenga Girls Secondary School. All rights reserved.";
  color: #ffffff;
  font-size: 0.82rem;
}

.igss-home-v2 .site-footer::after {
  content: "Powered by IGSS SmartCampus";
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.82rem;
  font-weight: 850;
  animation: footerPulse 5s ease-in-out infinite;
}

@keyframes footerPulse {
  0%,
  100% {
    opacity: 0.72;
  }

  50% {
    opacity: 1;
  }
}

@media (max-width: 1500px) {
  .igss-home-v2 .home-dashboard-topbar {
    grid-template-columns: minmax(260px, 1.05fr) 160px minmax(360px, 1.4fr) minmax(200px, 0.8fr) auto;
    gap: 14px;
  }

  .igss-home-v2 .home-portal-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .igss-home-v2 .home-assurance-strip {
    grid-template-columns: 118px repeat(5, minmax(140px, 1fr));
  }
}

@media (max-width: 1180px) {
  .igss-home-v2 .home-dashboard-topbar {
    position: relative;
    grid-template-columns: minmax(240px, 1fr) auto;
  }

  .igss-home-v2 .igss-home-product,
  .igss-home-v2 .home-top-nav,
  .igss-home-v2 .home-top-search,
  .igss-home-v2 .home-top-actions {
    grid-column: 1 / -1;
  }

  .igss-home-v2 .home-top-nav {
    justify-content: flex-start;
    overflow-x: auto;
  }

  .igss-notice-status-row {
    grid-template-columns: 1fr;
  }

  .igss-home-status-pills {
    justify-content: flex-start;
  }

  .igss-home-v2 .home-dashboard-hero {
    min-height: 420px;
    grid-template-columns: 1fr;
  }

  .igss-home-v2 .home-copy {
    width: min(760px, 78%);
  }

  .igss-home-v2 .home-hero-feature {
    right: 30px;
    width: 180px;
  }
}

@media (max-width: 820px) {
  .igss-home-v2 .home-dashboard-main {
    padding: 0 14px;
  }

  .igss-home-v2 .home-dashboard-topbar,
  .igss-home-v2 .site-footer {
    margin-left: -14px;
    margin-right: -14px;
  }

  .igss-home-v2 .home-dashboard-topbar {
    padding: 12px 14px;
  }

  .igss-home-brand {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .igss-home-brand img {
    width: 54px;
    height: 54px;
  }

  .igss-home-product {
    padding-left: 0;
    border-left: 0;
  }

  .igss-home-v2 .home-dashboard-hero {
    min-height: 520px;
  }

  .igss-home-v2 .home-copy {
    width: 100%;
    padding: 34px 24px 150px;
  }

  .igss-home-v2 .home-dashboard-hero .lead {
    max-width: 100%;
  }

  .igss-home-v2 .home-hero-feature {
    top: auto;
    right: 22px;
    bottom: 26px;
    transform: none;
    width: 150px;
  }

  .igss-home-v2 .home-portal-cards,
  .igss-home-v2 .home-dashboard-grid,
  .igss-home-v2 .home-advanced-grid,
  .igss-home-v2 .home-school-profile-section,
  .igss-home-v2 .home-ops-grid,
  .igss-home-v2 .home-public-records,
  .igss-home-v2 .home-download-grid,
  .igss-home-v2 .home-contact-grid {
    grid-template-columns: 1fr;
  }

  .igss-home-v2 .home-assurance-strip {
    grid-template-columns: 1fr;
    overflow-x: visible;
  }

  .igss-home-v2 .home-assurance-strip a {
    border-right: 0;
    border-bottom: 1px solid #dce7f2;
  }

  .igss-home-v2 .site-footer {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .igss-home-v2 .footer-links,
  .igss-home-v2 .footer-social {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .igss-home-v2 .home-hero-picture,
  .igss-home-v2 .portal-icon,
  .igss-home-v2 .assurance-icon,
  .igss-home-v2 .home-hero-feature-logo,
  .igss-home-v2 .site-footer::after {
    animation: none !important;
  }
}

.rich-elibrary-workspace {
  display: grid;
  gap: 18px;
}

.rich-elibrary-grid,
.rich-library-mini-grid,
.learner-elibrary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.rich-library-panel {
  background: #ffffff;
  border: 1px solid #d9e5ef;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 12px 28px rgba(15, 42, 78, 0.06);
}

.rich-library-form .wide-field {
  grid-column: 1 / -1;
}

.rich-library-resource-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.rich-library-card .cover-block,
.learner-elibrary-overview .cover-block {
  min-height: 120px;
}

.resource-grid > .learner-elibrary-overview {
  grid-column: 1 / -1;
}

.learner-elibrary-overview {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid #d7e2ef;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(48, 18, 84, 0.08), rgba(211, 149, 20, 0.08)),
    #ffffff;
  box-shadow: 0 12px 30px rgba(21, 40, 73, 0.08);
}

.learner-library-section {
  min-height: 180px;
}

.learner-library-section p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.compact-actions {
  margin: 8px 0 12px;
}

@media (max-width: 900px) {
  .rich-elibrary-grid,
  .rich-library-mini-grid,
  .learner-elibrary-grid {
    grid-template-columns: 1fr;
  }
}

.learner-companion-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 12px 0 18px;
}

.learner-companion-stats article {
  background: #ffffff;
  border: 1px solid rgba(13, 52, 104, 0.12);
  border-radius: 8px;
  padding: 14px;
  box-shadow: 0 10px 24px rgba(15, 35, 70, 0.06);
}

.learner-companion-stats strong {
  display: block;
  color: #061f4d;
  font-size: 1.35rem;
  line-height: 1.1;
}

.learner-companion-stats span,
.learner-companion-stats small {
  display: block;
  color: #40516f;
  font-size: 0.84rem;
}

.learner-companion-grid,
.learner-warning-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.learner-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.learner-help-types {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 16px;
}

.learner-help-types button {
  border: 1px solid rgba(21, 77, 154, 0.22);
  border-radius: 999px;
  background: #f8fbff;
  color: #06245b;
  padding: 9px 13px;
  font-weight: 700;
  cursor: pointer;
}

.learner-help-types button:hover,
.learner-help-types button:focus-visible {
  border-color: #d49b00;
  box-shadow: 0 0 0 3px rgba(212, 155, 0, 0.16);
}

.learner-practice-grid {
  margin-top: 14px;
}

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

.parent-support-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  margin: 10px 0;
}

.parent-support-strip span {
  border: 1px solid rgba(12, 90, 120, 0.14);
  border-radius: 8px;
  background: #f8fbff;
  color: #102b58;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 8px 10px;
}

/* Responsive hardening layer: phones, tablets, compact laptops */
html {
  -webkit-text-size-adjust: 100%;
}

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

input,
select,
textarea,
button {
  max-width: 100%;
}

.content-panel,
.side-panel,
.insight-panel,
.thread-card,
.learner-dashboard-card,
.home-dashboard-card,
.home-portal-card,
.admin-tool-item {
  min-width: 0;
}

.table-scroll,
.report-table-scroll,
.timetable-grid-scroll,
.payroll-table-scroll,
.official-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media screen and (max-width: 1180px) {
  body:not([data-print-mode]) .dashboard-view.active,
  body:not([data-print-mode]) #staff-dashboard.headteacher-executive-mode,
  body:not([data-print-mode]) #staff-dashboard.deputy-operational-mode,
  body:not([data-print-mode]) #staff-dashboard.matron-operational-mode,
  body:not([data-print-mode]) #teacher-dashboard.teacher-portal-mode {
    grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
    gap: 14px;
  }

  body:not([data-print-mode]) .content-panel,
  body:not([data-print-mode]) #teacher-dashboard.teacher-portal-mode > .content-panel,
  body:not([data-print-mode]) #staff-dashboard.headteacher-executive-mode .content-panel,
  body:not([data-print-mode]) #staff-dashboard.deputy-operational-mode .content-panel,
  body:not([data-print-mode]) #staff-dashboard.matron-operational-mode .content-panel {
    padding: clamp(14px, 2vw, 22px);
  }

  body:not([data-print-mode]) .stats-grid,
  body:not([data-print-mode]) .compact-stats,
  body:not([data-print-mode]) .home-live-stats,
  body:not([data-print-mode]) .admin-module-grid,
  body:not([data-print-mode]) .admin-action-card-grid,
  body:not([data-print-mode]) .insight-grid,
  body:not([data-print-mode]) .resource-grid,
  body:not([data-print-mode]) .home-dashboard-grid,
  body:not([data-print-mode]) .home-portal-cards,
  body:not([data-print-mode]) .home-advanced-grid,
  body:not([data-print-mode]) .home-download-grid,
  body:not([data-print-mode]) .home-contact-grid,
  body:not([data-print-mode]) .hod-preview-kpi-grid,
  body:not([data-print-mode]) .hod-preview-report-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)) !important;
  }

  body:not([data-print-mode]) .hod-preview-dashboard-grid,
  body:not([data-print-mode]) .home-school-profile-section,
  body:not([data-print-mode]) .home-public-records,
  body:not([data-print-mode]) .home-ops-grid,
  body:not([data-print-mode]) .timetable-dashboard-grid {
    grid-template-columns: 1fr !important;
  }
}

@media screen and (max-width: 920px) {
  body:not([data-print-mode]) .site-header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 10px 12px;
  }

  body:not([data-print-mode]) .brand {
    min-width: 0;
  }

  body:not([data-print-mode]) .brand strong,
  body:not([data-print-mode]) .brand small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body:not([data-print-mode]) .dashboard-view.active,
  body:not([data-print-mode]) #teacher-dashboard.teacher-portal-mode,
  body:not([data-print-mode]) #pupil-dashboard.pupil-layout,
  body:not([data-print-mode]) #staff-dashboard.headteacher-executive-mode,
  body:not([data-print-mode]) #staff-dashboard.deputy-operational-mode,
  body:not([data-print-mode]) #staff-dashboard.matron-operational-mode {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 12px;
    padding: 0;
  }

  body:not([data-print-mode]) .side-panel,
  body:not([data-print-mode]) #teacher-dashboard.teacher-portal-mode > .side-panel,
  body:not([data-print-mode]) #pupil-dashboard.pupil-layout .learner-side-panel,
  body:not([data-print-mode]) #staff-dashboard.headteacher-executive-mode .side-panel,
  body:not([data-print-mode]) #staff-dashboard.deputy-operational-mode .side-panel,
  body:not([data-print-mode]) #staff-dashboard.matron-operational-mode .side-panel {
    position: static !important;
    top: auto !important;
    width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    border-radius: 0 0 16px 16px;
    padding: 14px;
    overflow: visible;
  }

  body:not([data-print-mode]) .teacher-module-menu,
  body:not([data-print-mode]) .learner-side-nav,
  body:not([data-print-mode]) .matron-sidebar-menu,
  body:not([data-print-mode]) .home-top-nav,
  body:not([data-print-mode]) .admin-exec-sidebar,
  body:not([data-print-mode]) .admin-exec-tabs {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: 4px;
  }

  body:not([data-print-mode]) .teacher-module-menu button,
  body:not([data-print-mode]) .learner-side-nav button,
  body:not([data-print-mode]) .matron-sidebar-menu button,
  body:not([data-print-mode]) .home-top-nav a,
  body:not([data-print-mode]) .admin-exec-sidebar button,
  body:not([data-print-mode]) .admin-exec-tabs button {
    flex: 0 0 auto;
    width: auto;
    min-width: max-content;
    scroll-snap-align: start;
  }

  body:not([data-print-mode]) .section-heading,
  body:not([data-print-mode]) .compact-heading,
  body:not([data-print-mode]) .headteacher-panel-heading,
  body:not([data-print-mode]) .hod-preview-hero,
  body:not([data-print-mode]) .hod-preview-section-header,
  body:not([data-print-mode]) .hod-preview-panel-header {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
  }

  body:not([data-print-mode]) .filter-row,
  body:not([data-print-mode]) .audit-toolbar,
  body:not([data-print-mode]) .card-actions,
  body:not([data-print-mode]) .form-actions,
  body:not([data-print-mode]) .dialog-actions,
  body:not([data-print-mode]) .viewer-window-actions {
    flex-wrap: wrap;
  }

  body:not([data-print-mode]) .home-dashboard-view .home-dashboard-topbar {
    position: relative;
    min-height: auto;
  }

  body:not([data-print-mode]) .home-dashboard-view .home-dashboard-shell,
  body:not([data-print-mode]) .home-dashboard-view .home-dashboard-main {
    min-width: 0;
  }
}

@media screen and (max-width: 760px) {
  body:not([data-print-mode]) {
    overflow-x: hidden;
  }

  body:not([data-print-mode]) main,
  body:not([data-print-mode]) .view.active,
  body:not([data-print-mode]) .content-panel,
  body:not([data-print-mode]) .side-panel,
  body:not([data-print-mode]) .home-dashboard-main {
    width: 100%;
    max-width: 100vw;
  }

  body:not([data-print-mode]) .content-panel,
  body:not([data-print-mode]) #teacher-dashboard.teacher-portal-mode > .content-panel,
  body:not([data-print-mode]) #staff-dashboard.headteacher-executive-mode .content-panel,
  body:not([data-print-mode]) #staff-dashboard.deputy-operational-mode .content-panel,
  body:not([data-print-mode]) #staff-dashboard.matron-operational-mode .content-panel {
    padding: 12px;
  }

  body:not([data-print-mode]) .stacked-form,
  body:not([data-print-mode]) .compact-form,
  body:not([data-print-mode]) .rich-library-form,
  body:not([data-print-mode]) .home-visitor-card .compact-form,
  body:not([data-print-mode]) .teacher-result-entry-controls,
  body:not([data-print-mode]) .admin-exec-search,
  body:not([data-print-mode]) .single-pupil-toolbar,
  body:not([data-print-mode]) .timetable-toolbar,
  body:not([data-print-mode]) .wallet-toolbar {
    grid-template-columns: 1fr !important;
  }

  body:not([data-print-mode]) .stacked-form label,
  body:not([data-print-mode]) .compact-form label,
  body:not([data-print-mode]) .wide-field,
  body:not([data-print-mode]) .dialog-body label {
    grid-column: 1 / -1 !important;
  }

  body:not([data-print-mode]) .text-field,
  body:not([data-print-mode]) input,
  body:not([data-print-mode]) select,
  body:not([data-print-mode]) textarea {
    width: 100%;
    min-width: 0;
    font-size: 16px;
  }

  body:not([data-print-mode]) .primary-btn,
  body:not([data-print-mode]) .secondary-btn,
  body:not([data-print-mode]) .ghost-btn,
  body:not([data-print-mode]) .danger-outline,
  body:not([data-print-mode]) .card-actions button,
  body:not([data-print-mode]) .form-actions button,
  body:not([data-print-mode]) .dialog-actions button {
    min-height: 42px;
  }

  body:not([data-print-mode]) .stats-grid,
  body:not([data-print-mode]) .resource-grid,
  body:not([data-print-mode]) .insight-grid,
  body:not([data-print-mode]) .thread-list,
  body:not([data-print-mode]) .learner-dashboard-shell,
  body:not([data-print-mode]) .learner-companion-grid,
  body:not([data-print-mode]) .learner-warning-grid,
  body:not([data-print-mode]) .learner-life-grid,
  body:not([data-print-mode]) .rich-elibrary-grid,
  body:not([data-print-mode]) .rich-library-mini-grid,
  body:not([data-print-mode]) .learner-elibrary-grid {
    grid-template-columns: 1fr !important;
  }

  body:not([data-print-mode]) .thread-card,
  body:not([data-print-mode]) .learner-dashboard-card,
  body:not([data-print-mode]) .home-dashboard-card,
  body:not([data-print-mode]) .insight-panel,
  body:not([data-print-mode]) .rich-library-panel {
    overflow-wrap: anywhere;
  }

  body:not([data-print-mode]) .viewer-dialog,
  body:not([data-print-mode]) .form-dialog,
  body:not([data-print-mode]) .study-viewer-dialog,
  body:not([data-print-mode]) .learner-popup-panel,
  body:not([data-print-mode]) .home-popup-panel,
  body:not([data-print-mode]) .dashboard-form-dialog {
    width: min(96vw, 760px) !important;
    max-width: 96vw !important;
    max-height: 92dvh !important;
    margin: auto;
  }

  body:not([data-print-mode]) .form-dialog > form,
  body:not([data-print-mode]) .dialog-body,
  body:not([data-print-mode]) .viewer-body,
  body:not([data-print-mode]) .learner-popup-body,
  body:not([data-print-mode]) .home-popup-content,
  body:not([data-print-mode]) .dashboard-form-dialog-body {
    max-height: calc(92dvh - 110px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  body:not([data-print-mode]) .dialog-header,
  body:not([data-print-mode]) .learner-popup-header,
  body:not([data-print-mode]) .home-popup-header {
    align-items: flex-start;
    gap: 10px;
  }

  body:not([data-print-mode]) .viewer-body iframe,
  body:not([data-print-mode]) .viewer-body video,
  body:not([data-print-mode]) .study-file-preview iframe {
    min-height: 64dvh;
  }

  body:not([data-print-mode]) .table-scroll,
  body:not([data-print-mode]) .thread-list:has(table),
  body:not([data-print-mode]) .content-panel:has(table) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  body:not([data-print-mode]) .document-table,
  body:not([data-print-mode]) .official-table,
  body:not([data-print-mode]) .epayslip-table,
  body:not([data-print-mode]) .payroll-attachment-table {
    min-width: 640px;
  }

  body:not([data-print-mode]) .site-footer {
    grid-template-columns: 1fr !important;
    text-align: center;
  }

  body:not([data-print-mode]) .footer-links,
  body:not([data-print-mode]) .footer-social {
    justify-content: center !important;
  }
}

@media screen and (max-width: 520px) {
  body:not([data-print-mode]) .site-header {
    grid-template-columns: 1fr auto;
  }

  body:not([data-print-mode]) .brand-mark {
    width: 48px;
    height: 48px;
  }

  body:not([data-print-mode]) h1,
  body:not([data-print-mode]) .home-smart-title {
    font-size: clamp(1.65rem, 10vw, 2.25rem);
    line-height: 1.05;
  }

  body:not([data-print-mode]) h2 {
    font-size: clamp(1.15rem, 6vw, 1.55rem);
  }

  body:not([data-print-mode]) .home-copy {
    padding-left: 16px;
    padding-right: 16px;
  }

  body:not([data-print-mode]) .home-quick-profile,
  body:not([data-print-mode]) .home-smart-pills,
  body:not([data-print-mode]) .hero-actions,
  body:not([data-print-mode]) .recent-strip,
  body:not([data-print-mode]) .learner-help-types,
  body:not([data-print-mode]) .footer-links,
  body:not([data-print-mode]) .footer-social {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  body:not([data-print-mode]) .home-smart-pills span,
  body:not([data-print-mode]) .hero-actions a,
  body:not([data-print-mode]) .recent-chip,
  body:not([data-print-mode]) .learner-help-types button,
  body:not([data-print-mode]) .footer-links a {
    justify-content: center;
    width: 100%;
  }

  body:not([data-print-mode]) .section-heading,
  body:not([data-print-mode]) .compact-heading,
  body:not([data-print-mode]) .card-actions,
  body:not([data-print-mode]) .form-actions,
  body:not([data-print-mode]) .dialog-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  body:not([data-print-mode]) .section-heading > *,
  body:not([data-print-mode]) .compact-heading > *,
  body:not([data-print-mode]) .card-actions > *,
  body:not([data-print-mode]) .form-actions > *,
  body:not([data-print-mode]) .dialog-actions > * {
    min-width: 0;
  }

  body:not([data-print-mode]) .footer-headteacher-card {
    width: 100%;
  }

  body:not([data-print-mode]) .footer-headteacher-card img {
    width: 74px;
    height: 74px;
  }
}

/* Targeted phone fix for the public home page screenshots */
@media screen and (max-width: 640px) {
  body:not([data-print-mode]) .igss-home-v2,
  body:not([data-print-mode]) .igss-home-v2 .home-dashboard-shell,
  body:not([data-print-mode]) .igss-home-v2 .home-dashboard-main {
    width: 100%;
    max-width: 100vw;
    min-width: 0;
    overflow-x: hidden;
  }

  body:not([data-print-mode]) .igss-home-v2 .home-dashboard-main {
    gap: 12px;
    padding: 0 12px;
  }

  body:not([data-print-mode]) .igss-home-v2 .home-dashboard-topbar {
    position: relative;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px;
    width: auto;
    min-height: 0;
    margin: 0 -12px;
    padding: 14px 12px 16px;
    overflow: hidden;
  }

  body:not([data-print-mode]) .igss-home-v2 .igss-home-brand {
    grid-template-columns: 54px minmax(0, 1fr);
    width: 100%;
  }

  body:not([data-print-mode]) .igss-home-v2 .igss-home-brand strong,
  body:not([data-print-mode]) .igss-home-v2 .igss-home-brand small,
  body:not([data-print-mode]) .igss-home-v2 .igss-home-product strong,
  body:not([data-print-mode]) .igss-home-v2 .igss-home-product span {
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
  }

  body:not([data-print-mode]) .igss-home-v2 .igss-home-product {
    min-height: 0;
    padding-left: 0;
    border-left: 0;
  }

  body:not([data-print-mode]) .igss-home-v2 .igss-home-product strong {
    font-size: clamp(1.55rem, 11vw, 2.2rem);
    line-height: 0.9;
  }

  body:not([data-print-mode]) .igss-home-v2 .home-top-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    overflow: visible;
    padding-bottom: 0;
    scroll-snap-type: none;
  }

  body:not([data-print-mode]) .igss-home-v2 .home-top-nav a {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    padding: 8px 6px;
    background: rgba(255, 255, 255, 0.09);
    text-align: center;
    white-space: normal;
    line-height: 1.18;
  }

  body:not([data-print-mode]) .igss-home-v2 .home-top-nav a:first-child,
  body:not([data-print-mode]) .igss-home-v2 .home-top-nav a:hover {
    background: rgba(255, 201, 40, 0.18);
    box-shadow: inset 0 -3px 0 #ffc928;
  }

  body:not([data-print-mode]) .igss-home-v2 .home-top-search {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 54px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    border-radius: 18px;
  }

  body:not([data-print-mode]) .igss-home-v2 .home-top-search .text-field {
    min-width: 0;
    min-height: 54px;
    border-radius: 18px 0 0 18px;
  }

  body:not([data-print-mode]) .igss-home-v2 .home-search-btn {
    width: 54px;
    height: 54px;
    border-radius: 14px;
  }

  body:not([data-print-mode]) .igss-home-v2 .home-top-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 46px 46px minmax(112px, auto);
    gap: 8px;
    width: 100%;
    min-width: 0;
    justify-content: stretch;
  }

  body:not([data-print-mode]) .igss-home-v2 .igss-language-pill,
  body:not([data-print-mode]) .igss-home-v2 .install-btn {
    width: 100%;
    min-width: 0;
    justify-content: center;
    white-space: normal;
  }

  body:not([data-print-mode]) .igss-home-v2 .igss-sun-btn,
  body:not([data-print-mode]) .igss-home-v2 .igss-moon-btn {
    width: 46px;
    min-width: 0;
  }

  body:not([data-print-mode]) .igss-notice-status-row {
    grid-template-columns: 1fr !important;
    gap: 10px;
    margin-top: 0;
  }

  body:not([data-print-mode]) .igss-home-v2 .home-emergency-banner {
    grid-template-columns: 1fr !important;
    gap: 10px;
    width: 100%;
    min-width: 0;
    padding: 12px;
    text-align: center;
  }

  body:not([data-print-mode]) .igss-home-v2 .home-emergency-banner strong,
  body:not([data-print-mode]) .igss-home-v2 .home-emergency-banner span,
  body:not([data-print-mode]) .igss-home-v2 .home-emergency-banner a {
    width: 100%;
    min-width: 0;
    justify-content: center;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
  }

  body:not([data-print-mode]) .igss-home-v2 .home-emergency-banner strong {
    padding: 8px 12px;
  }

  body:not([data-print-mode]) .igss-home-v2 .home-emergency-banner span {
    display: block;
    max-width: 100%;
    font-size: 0.95rem;
  }

  body:not([data-print-mode]) .igss-home-v2 .home-emergency-banner a {
    min-height: 40px;
  }

  body:not([data-print-mode]) .igss-home-status-pills {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  body:not([data-print-mode]) .igss-home-status-pills span {
    justify-content: center;
  }

  body:not([data-print-mode]) .igss-home-v2 .home-dashboard-hero {
    display: grid !important;
    grid-template-columns: 1fr !important;
    min-height: 0;
    margin: 0;
    overflow: hidden;
  }

  body:not([data-print-mode]) .igss-home-v2 .home-hero-media {
    position: relative;
    inset: auto;
    min-height: 220px;
    height: min(44vh, 360px);
    height: min(44dvh, 360px);
    order: 1;
  }

  body:not([data-print-mode]) .igss-home-v2 .home-hero-picture {
    animation: none;
    background-position: center top;
  }

  body:not([data-print-mode]) .igss-home-v2 .home-hero-picture::after {
    background: linear-gradient(180deg, rgba(4, 22, 51, 0.12), rgba(4, 22, 51, 0.58));
  }

  body:not([data-print-mode]) .igss-home-v2 .home-copy {
    order: 2;
    width: 100%;
    padding: 18px;
    background: linear-gradient(135deg, #061d43, #08306b);
  }

  body:not([data-print-mode]) .igss-home-v2 .home-dashboard-hero .home-smart-title {
    font-size: clamp(1.75rem, 9vw, 2.35rem);
  }

  body:not([data-print-mode]) .igss-home-v2 .home-dashboard-hero .lead {
    font-size: 1rem;
    line-height: 1.45;
  }

  body:not([data-print-mode]) .igss-home-v2 .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    gap: 10px;
  }

  body:not([data-print-mode]) .igss-home-v2 .hero-actions .primary-btn,
  body:not([data-print-mode]) .igss-home-v2 .hero-actions .secondary-btn {
    width: 100%;
    justify-content: center;
  }

  body:not([data-print-mode]) .igss-home-v2 .home-hero-feature {
    position: relative;
    inset: auto;
    order: 3;
    width: 100%;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    justify-items: start;
    align-items: center;
    gap: 12px;
    transform: none;
    border-top: 1px solid rgba(8, 31, 69, 0.12);
    padding: 12px 16px;
    background: #ffffff;
    text-align: left;
  }

  body:not([data-print-mode]) .igss-home-v2 .home-hero-feature-logo {
    width: 58px;
    height: 58px;
    animation: none;
    grid-row: 1 / span 2;
  }

  body:not([data-print-mode]) .igss-home-v2 .home-hero-feature strong,
  body:not([data-print-mode]) .igss-home-v2 .home-hero-feature p {
    grid-column: 2;
    text-align: left;
  }

  body:not([data-print-mode]) .igss-home-v2 .home-hero-dots {
    display: none;
  }

  body:not([data-print-mode]) .igss-home-v2 .home-portal-cards,
  body:not([data-print-mode]) .igss-home-v2 .home-dashboard-grid,
  body:not([data-print-mode]) .igss-home-v2 .home-advanced-grid,
  body:not([data-print-mode]) .igss-home-v2 .home-school-profile-section,
  body:not([data-print-mode]) .igss-home-v2 .home-ops-grid,
  body:not([data-print-mode]) .igss-home-v2 .home-public-records,
  body:not([data-print-mode]) .igss-home-v2 .home-download-grid,
  body:not([data-print-mode]) .igss-home-v2 .home-contact-grid {
    grid-template-columns: 1fr !important;
    width: 100%;
    min-width: 0;
  }

  body:not([data-print-mode]) .igss-home-v2 .home-portal-cards {
    margin-top: 4px;
    padding: 48px 10px 10px;
  }

  body:not([data-print-mode]) .igss-home-v2 .igss-portal-heading {
    width: calc(100% - 24px);
    min-width: 0;
    gap: 8px;
    font-size: 0.96rem;
  }

  body:not([data-print-mode]) .igss-home-v2 .igss-portal-heading::before,
  body:not([data-print-mode]) .igss-home-v2 .igss-portal-heading::after {
    width: 34px;
  }

  body:not([data-print-mode]) .igss-home-v2 .home-dashboard-card,
  body:not([data-print-mode]) .igss-home-v2 .home-dynamic-card,
  body:not([data-print-mode]) .igss-home-v2 .home-portal-card,
  body:not([data-print-mode]) .igss-home-v2 .thread-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  body:not([data-print-mode]) .igss-home-v2 .home-event-list .thread-card,
  body:not([data-print-mode]) .igss-home-v2 .home-announcement-list .thread-card,
  body:not([data-print-mode]) .igss-home-v2 .home-dynamic-card .thread-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    text-align: left;
  }

  body:not([data-print-mode]) .igss-home-v2 .home-event-list .thread-card a,
  body:not([data-print-mode]) .igss-home-v2 .home-announcement-list .thread-card a,
  body:not([data-print-mode]) .igss-home-v2 .home-dynamic-card .thread-card a {
    width: 100%;
    justify-content: center;
  }
}

@media screen and (max-width: 380px) {
  body:not([data-print-mode]) .igss-home-v2 .home-top-nav {
    grid-template-columns: 1fr;
  }

  body:not([data-print-mode]) .igss-home-v2 .home-top-actions {
    grid-template-columns: minmax(0, 1fr) 46px 46px;
  }

  body:not([data-print-mode]) .igss-home-v2 .install-btn {
    grid-column: 1 / -1;
  }
}

/* Portal login popups and mobile dashboard tool visibility */
.igss-home-v2 .home-popup-content .auth-view.home-popup-active-section {
  min-height: 0;
  display: grid !important;
  place-items: center;
  padding: 0;
  overflow: visible;
  background: transparent;
}

.igss-home-v2 .home-popup-content .auth-view.home-popup-active-section::before,
.igss-home-v2 .home-popup-content .auth-view.home-popup-active-section::after,
.igss-home-v2 .home-popup-content .auth-view.home-popup-active-section .auth-showcase,
.igss-home-v2 .home-popup-content .auth-view.home-popup-active-section .auth-help-links {
  display: none !important;
}

.igss-home-v2 .home-popup-content .auth-view.home-popup-active-section .auth-card {
  width: min(520px, 100%);
  max-height: none;
  justify-self: center;
  margin: 0 auto;
}

@media screen and (max-width: 820px) {
  body:not([data-print-mode]) #teacher-dashboard.teacher-portal-mode {
    grid-template-columns: 1fr !important;
  }

  body:not([data-print-mode]) #teacher-dashboard.teacher-portal-mode > .side-panel {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    border-radius: 0 0 18px 18px;
    padding: 14px;
  }

  body:not([data-print-mode]) #teacher-dashboard.teacher-portal-mode .teacher-portal-brand {
    grid-template-columns: 54px minmax(0, 1fr);
    margin-bottom: 10px;
    padding-bottom: 12px;
  }

  body:not([data-print-mode]) #teacher-dashboard.teacher-portal-mode .teacher-portal-brand img {
    width: 54px;
    height: 58px;
  }

  body:not([data-print-mode]) #teacher-dashboard.teacher-portal-mode .teacher-sidebar-title {
    display: block !important;
    margin: 10px 4px;
  }

  body:not([data-print-mode]) #teacher-dashboard.teacher-portal-mode .teacher-sidebar-title::after {
    content: " - choose a tool below";
    color: rgba(255, 255, 255, 0.92);
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
  }

  body:not([data-print-mode]) #teacher-dashboard.teacher-portal-mode .teacher-module-menu {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
    width: 100%;
    overflow: visible !important;
    padding: 0;
  }

  body:not([data-print-mode]) #teacher-dashboard.teacher-portal-mode .teacher-module-menu button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px;
    display: inline-flex !important;
    justify-content: center !important;
    text-align: center;
    white-space: normal;
    line-height: 1.16;
    padding: 8px 10px;
  }

  body:not([data-print-mode]) #teacher-dashboard.teacher-portal-mode .teacher-module-menu button[hidden],
  body:not([data-print-mode]) #teacher-dashboard.teacher-portal-mode .teacher-module-menu button.hidden,
  body:not([data-print-mode]) #teacher-dashboard.teacher-portal-mode .teacher-module-menu button[aria-hidden="true"] {
    display: none !important;
  }

  body:not([data-print-mode]) #teacher-dashboard.teacher-portal-mode .teacher-nav-badge {
    margin-left: 6px;
  }

  body:not([data-print-mode]) #teacher-dashboard.teacher-portal-mode .teacher-portal-app-card {
    margin-top: 12px;
  }

  body:not([data-print-mode]) #pupil-dashboard.pupil-layout {
    grid-template-columns: 1fr !important;
  }

  body:not([data-print-mode]) #pupil-dashboard.pupil-layout .learner-side-panel {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    border-radius: 0 0 18px 18px;
    padding: 14px;
  }

  body:not([data-print-mode]) #pupil-dashboard.pupil-layout .learner-sidebar-brand {
    grid-template-columns: 52px minmax(0, 1fr);
    margin-bottom: 0;
  }

  body:not([data-print-mode]) #pupil-dashboard.pupil-layout .learner-sidebar-brand img {
    width: 52px;
    height: 52px;
  }

  body:not([data-print-mode]) #pupil-dashboard.pupil-layout .learner-menu-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 112px;
    min-height: 44px;
  }

  body:not([data-print-mode]) #pupil-dashboard:not(.learner-menu-open) .learner-side-nav,
  body:not([data-print-mode]) #pupil-dashboard:not(.learner-menu-open) .learner-control-group,
  body:not([data-print-mode]) #pupil-dashboard:not(.learner-menu-open) .learner-logout-link {
    display: none !important;
  }

  body:not([data-print-mode]) #pupil-dashboard.learner-menu-open .learner-side-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    margin: 12px 0;
    overflow: visible !important;
    padding: 0;
  }

  body:not([data-print-mode]) #pupil-dashboard.learner-menu-open .learner-side-nav a,
  body:not([data-print-mode]) #pupil-dashboard.learner-menu-open .learner-side-nav button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px;
    white-space: normal;
    line-height: 1.16;
  }

  body:not([data-print-mode]) #pupil-dashboard.learner-menu-open .learner-control-group,
  body:not([data-print-mode]) #pupil-dashboard.learner-menu-open .learner-logout-link {
    display: block !important;
  }

  body:not([data-print-mode]) #pupil-dashboard.learner-menu-open .learner-control-group summary {
    display: grid !important;
  }
}

@media screen and (max-width: 430px) {
  body:not([data-print-mode]) #teacher-dashboard.teacher-portal-mode .teacher-module-menu,
  body:not([data-print-mode]) #pupil-dashboard.learner-menu-open .learner-side-nav {
    grid-template-columns: 1fr !important;
  }
}

/* Phone-first full-screen forms, popups, and login cards */
@media screen and (max-width: 760px) {
  body:not([data-print-mode]) .viewer-dialog,
  body:not([data-print-mode]) .form-dialog,
  body:not([data-print-mode]) .dashboard-form-dialog {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  body:not([data-print-mode]) #teacher-dashboard.teacher-portal-mode > .content-panel {
    display: none !important;
  }

  body:not([data-print-mode]) #teacher-dashboard.teacher-portal-mode > .side-panel {
    order: -1;
  }

  body:not([data-print-mode]) #teacher-dashboard.teacher-portal-mode .teacher-portal-app-card {
    display: none !important;
  }

  body:not([data-print-mode]) .viewer-dialog[open],
  body:not([data-print-mode]) .dashboard-form-dialog[open] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
  }

  body:not([data-print-mode]) .form-dialog > form {
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
  }

  body:not([data-print-mode]) .dialog-header,
  body:not([data-print-mode]) .learner-popup-header,
  body:not([data-print-mode]) .home-popup-header {
    position: sticky;
    top: 0;
    z-index: 8;
    padding: 12px 14px;
    background: var(--panel);
  }

  body:not([data-print-mode]) .home-popup-header {
    background: linear-gradient(90deg, #061d43, #052557);
  }

  body:not([data-print-mode]) .learner-popup-header {
    background: linear-gradient(135deg, #ffffff, #f7f2ff);
  }

  body:not([data-print-mode]) .dialog-header h2,
  body:not([data-print-mode]) .learner-popup-header h2,
  body:not([data-print-mode]) .home-popup-header h2 {
    font-size: clamp(1.05rem, 5vw, 1.35rem);
    line-height: 1.15;
  }

  body:not([data-print-mode]) .viewer-body,
  body:not([data-print-mode]) .dialog-body,
  body:not([data-print-mode]) .dashboard-form-dialog-body {
    min-height: 0;
    height: 100%;
    max-height: none !important;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 14px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scroll-padding: 18px 18px 96px;
  }

  body:not([data-print-mode]) .viewer-body > *,
  body:not([data-print-mode]) .dialog-body > *,
  body:not([data-print-mode]) .dashboard-form-dialog-body > *,
  body:not([data-print-mode]) .learner-popup-body > *,
  body:not([data-print-mode]) .igss-home-v2 .home-popup-content > * {
    max-width: 100%;
    min-width: 0;
  }

  body:not([data-print-mode]) .viewer-body form,
  body:not([data-print-mode]) .dialog-body form,
  body:not([data-print-mode]) .dashboard-form-dialog-body form,
  body:not([data-print-mode]) .learner-popup-body form,
  body:not([data-print-mode]) .igss-home-v2 .home-popup-content form,
  body:not([data-print-mode]) .dashboard-tool-dialog-active form {
    min-height: 0;
    max-height: none !important;
    overflow: visible !important;
  }

  body:not([data-print-mode]) .dialog-actions {
    position: sticky;
    bottom: 0;
    z-index: 8;
    margin: 0;
    padding: 12px 14px;
    border-top: 1px solid var(--line);
    background: var(--panel);
  }

  body:not([data-print-mode]) .learner-popup-overlay,
  body:not([data-print-mode]) .igss-home-v2 .home-popup-overlay {
    place-items: stretch !important;
    padding: 0 !important;
  }

  body:not([data-print-mode]) .learner-popup-panel,
  body:not([data-print-mode]) .igss-home-v2 .home-popup-panel {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    border: 0 !important;
    border-radius: 0 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr);
  }

  body:not([data-print-mode]) .learner-popup-body,
  body:not([data-print-mode]) .igss-home-v2 .home-popup-content {
    min-height: 0;
    height: 100%;
    max-height: none !important;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 14px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scroll-padding: 18px 18px 96px;
  }

  body:not([data-print-mode]) .igss-home-v2 .home-popup-content .auth-view.home-popup-active-section {
    display: block !important;
    width: 100%;
    min-height: 100%;
    align-content: start;
    padding: 0;
    overflow: visible;
    background: transparent;
  }

  body:not([data-print-mode]) .igss-home-v2 .home-popup-content .auth-view.home-popup-active-section .auth-card {
    width: 100%;
    max-width: none;
    min-height: 100%;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    padding: 18px;
    overflow: visible;
  }

  body:not([data-print-mode])[data-route$="-login"] {
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
  }

  body:not([data-print-mode])[data-route$="-login"] main {
    width: 100vw;
    max-width: 100vw;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
  }

  body:not([data-print-mode])[data-route$="-login"] .auth-view.active {
    width: 100vw;
    max-width: 100vw;
    min-height: 100vh;
    min-height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    display: block !important;
    grid-template-columns: 1fr !important;
    align-content: start !important;
    place-items: start stretch !important;
    gap: 0;
    padding: 0 !important;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scroll-padding: 18px 18px 96px;
  }

  body:not([data-print-mode])[data-route$="-login"] .auth-showcase {
    display: none !important;
  }

  body:not([data-print-mode])[data-route$="-login"] .auth-card {
    width: 100%;
    max-width: none;
    min-height: 100vh;
    min-height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 18px;
    overflow: visible;
    align-content: start;
  }

  body:not([data-print-mode])[data-route$="-login"] .auth-card-brand img {
    width: 72px;
    height: 72px;
  }

  body:not([data-print-mode])[data-route$="-login"] .auth-card h1 {
    font-size: clamp(1.25rem, 7vw, 1.75rem);
  }

  body:not([data-print-mode])[data-route$="-login"] .auth-card .text-field,
  body:not([data-print-mode])[data-route$="-login"] .auth-card .primary-btn,
  body:not([data-print-mode])[data-route$="-login"] .auth-card .secondary-btn {
    min-height: 48px;
  }

  body:not([data-print-mode]) .dashboard-form-dialog-body > .dashboard-tool-dialog-active {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

/* Final mobile route isolation: inactive dashboards must never appear below the current portal. */
@media screen and (max-width: 920px) {
  body:not([data-print-mode]) #teacher-dashboard.teacher-portal-mode:not(.active),
  body:not([data-print-mode]) #teacher-dashboard.hod-module-mode:not(.active),
  body:not([data-print-mode]) #pupil-dashboard.pupil-layout:not(.active),
  body:not([data-print-mode]) #staff-dashboard.headteacher-executive-mode:not(.active),
  body:not([data-print-mode]) #staff-dashboard.deputy-operational-mode:not(.active),
  body:not([data-print-mode]) #staff-dashboard.matron-operational-mode:not(.active) {
    display: none !important;
  }

  body:not([data-print-mode]) #teacher-dashboard.teacher-portal-mode.active > .side-panel {
    margin-bottom: 0;
  }

  body:not([data-print-mode]) #teacher-dashboard.teacher-portal-mode.active > .side-panel::after {
    content: "";
    display: block;
    height: 0;
  }
}

/* Critical mobile override: every popup/dialog starts at the top and scrolls inside. */
@media screen and (max-width: 1024px) {
  body:not([data-print-mode]) .igss-home-v2 .home-popup-overlay,
  body:not([data-print-mode]) .learner-popup-overlay {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body:not([data-print-mode]) .igss-home-v2 .home-popup-panel,
  body:not([data-print-mode]) .learner-popup-panel,
  body:not([data-print-mode]) .viewer-dialog,
  body:not([data-print-mode]) .form-dialog,
  body:not([data-print-mode]) .dashboard-form-dialog {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    translate: none !important;
    transform: none !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  body:not([data-print-mode]) .form-dialog > form {
    width: 100% !important;
    min-width: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    overflow: hidden !important;
  }

  body:not([data-print-mode]) .home-popup-header,
  body:not([data-print-mode]) .learner-popup-header,
  body:not([data-print-mode]) .dialog-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    flex: 0 0 auto !important;
  }

  body:not([data-print-mode]) .igss-home-v2 .home-popup-content,
  body:not([data-print-mode]) .learner-popup-body,
  body:not([data-print-mode]) .viewer-body,
  body:not([data-print-mode]) .dialog-body,
  body:not([data-print-mode]) .dashboard-form-dialog-body {
    min-height: 0 !important;
    height: 100% !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    scroll-padding: 18px 18px 110px !important;
  }

  body:not([data-print-mode]) .igss-home-v2 .home-popup-content .auth-view.home-popup-active-section,
  body:not([data-print-mode]) .igss-home-v2 .home-popup-content .home-popup-active-section {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body:not([data-print-mode]) .igss-home-v2 .home-popup-content .auth-card,
  body:not([data-print-mode]) .dashboard-form-dialog-body > *,
  body:not([data-print-mode]) .learner-popup-body > *,
  body:not([data-print-mode]) .dialog-body > *,
  body:not([data-print-mode]) .viewer-body > * {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body:not([data-print-mode]) #formDialog.form-dialog {
    position: fixed !important;
    inset: 10px 10px auto 10px !important;
    top: 10px !important;
    right: 10px !important;
    bottom: auto !important;
    left: 10px !important;
    translate: none !important;
    transform: none !important;
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 20px) !important;
    margin: 0 !important;
    border: 1px solid var(--line) !important;
    border-radius: 16px !important;
    display: block !important;
    overflow: hidden !important;
  }

  body:not([data-print-mode]) #formDialog.form-dialog > form {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 20px) !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    overflow: hidden !important;
  }

  body:not([data-print-mode]) #formDialog .dialog-header {
    position: sticky !important;
    top: 0 !important;
    min-height: 0 !important;
    padding: 12px 14px !important;
  }

  body:not([data-print-mode]) #formDialog .dialog-body {
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 190px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 14px !important;
  }

  body:not([data-print-mode]) #formDialog .dialog-body:empty {
    display: none !important;
    padding: 0 !important;
  }

  body:not([data-print-mode]) #formDialog .dialog-actions {
    position: sticky !important;
    bottom: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 12px 14px !important;
  }
}

/* Closed surfaces must stay out of the layout. Mobile full-screen rules above
   style an open surface only and must never reveal an inactive dialog shell. */
body:not([data-print-mode]) #formDialog.form-dialog:not([open]),
body:not([data-print-mode]) dialog.viewer-dialog:not([open]),
body:not([data-print-mode]) dialog.form-dialog:not([open]),
body:not([data-print-mode]) dialog.dashboard-form-dialog:not([open]),
body:not([data-print-mode]) .igss-home-v2 .home-popup-overlay.hidden,
body:not([data-print-mode]) .igss-home-v2 .home-popup-overlay[hidden],
body:not([data-print-mode]) .learner-popup-overlay.hidden,
body:not([data-print-mode]) .learner-popup-overlay[hidden] {
  display: none !important;
}

/* Mobile account isolation: an open tools menu is the complete account view.
   Dashboard content returns only after the menu closes or a tool is selected. */
@media screen and (max-width: 920px) {
  body:not([data-print-mode]) #teacher-dashboard:not(.active),
  body:not([data-print-mode]) #pupil-dashboard:not(.active),
  body:not([data-print-mode]) #parent-dashboard:not(.active),
  body:not([data-print-mode]) #staff-dashboard:not(.active),
  body:not([data-print-mode]) #admin-dashboard:not(.active) {
    display: none !important;
  }

  body:not([data-print-mode]) #pupil-dashboard.learner-menu-open.active {
    display: block !important;
  }

  body:not([data-print-mode]) #pupil-dashboard.learner-menu-open > .learner-main-panel {
    display: none !important;
  }

  body:not([data-print-mode]) #pupil-dashboard.learner-menu-open .learner-menu-close:not([hidden]) {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    margin: 12px 0 4px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
  }

  body:not([data-print-mode]) #pupil-dashboard.learner-menu-open .learner-side-panel {
    min-height: 100vh !important;
    min-height: 100dvh !important;
    border-radius: 0 !important;
  }

  body.learner-tools-open:not([data-print-mode]) .dashboard-feedback-btn {
    display: none !important;
  }

body:not([data-print-mode]) #teacher-dashboard.teacher-portal-mode.active > .content-panel {
    display: none !important;
  }
}

/* Compact mobile public homepage. These elements are mobile-only so the
   established desktop homepage remains available on larger displays. */
.home-mobile-menu-btn,
.home-mobile-brand-name,
.home-mobile-quick-actions,
.home-mobile-headteacher,
.home-mobile-footer {
  display: none;
}

@media screen and (max-width: 760px) {
  html,
  body:not([data-print-mode]) {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body:not([data-print-mode]) #home.active {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    background: #ffffff !important;
  }

  body:not([data-print-mode]) #home.active .home-dashboard-shell {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
  }

  body:not([data-print-mode]) #home.active .home-school-sidebar {
    display: none !important;
  }

  body:not([data-print-mode]) #home.active .home-dashboard-main {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: #ffffff !important;
  }

  body:not([data-print-mode]) #home.active .home-dashboard-main > * {
    display: none !important;
  }

  body:not([data-print-mode]) #home.active .home-dashboard-main > .home-dashboard-topbar {
    order: 1;
    position: sticky !important;
    inset: auto !important;
    top: 0 !important;
    z-index: 500 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 72px !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    transform: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: 0 5px 16px rgba(3, 28, 61, 0.18) !important;
    overflow: visible !important;
    background: #07376d !important;
  }

  body:not([data-print-mode]) #home.active .home-dashboard-topbar::before,
  body:not([data-print-mode]) #home.active .home-dashboard-topbar::after {
    display: none !important;
    content: none !important;
  }

  body:not([data-print-mode]) #home.active .igss-home-brand {
    position: static !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    color: #ffffff !important;
    text-decoration: none !important;
  }

  body:not([data-print-mode]) #home.active .igss-home-brand > img {
    display: block !important;
    width: 46px !important;
    height: 46px !important;
    max-width: 46px !important;
    object-fit: contain !important;
    border-radius: 50% !important;
    background: #ffffff !important;
  }

  body:not([data-print-mode]) #home.active .igss-home-brand > span,
  body:not([data-print-mode]) #home.active .igss-home-product,
  body:not([data-print-mode]) #home.active .home-top-search,
  body:not([data-print-mode]) #home.active .home-top-actions {
    display: none !important;
  }

  body:not([data-print-mode]) #home.active .home-mobile-brand-name {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    color: #ffffff !important;
    font-size: clamp(1.05rem, 5vw, 1.38rem) !important;
    font-weight: 900 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.02em !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body:not([data-print-mode]) #home.active .home-mobile-menu-btn {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: 11px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #f7bd25 !important;
    font: inherit !important;
    font-size: 2rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    cursor: pointer !important;
  }

  body:not([data-print-mode]) #home.active .home-top-nav {
    position: absolute !important;
    inset: 100% 0 auto 0 !important;
    z-index: 510 !important;
    display: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 8px 14px 14px !important;
    transform: none !important;
    border: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 0 0 16px 16px !important;
    box-shadow: 0 14px 25px rgba(3, 28, 61, 0.25) !important;
    background: #07376d !important;
  }

  body:not([data-print-mode]) #home.active .home-top-nav.mobile-open {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 3px !important;
  }

  body:not([data-print-mode]) #home.active .home-top-nav a {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 13px 12px !important;
    border: 0 !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    text-align: left !important;
    text-decoration: none !important;
  }

  body:not([data-print-mode]) #home.active .home-top-nav a:hover,
  body:not([data-print-mode]) #home.active .home-top-nav a:focus-visible {
    background: rgba(247, 189, 37, 0.18) !important;
    color: #ffd86e !important;
  }

  body:not([data-print-mode]) #home.active .home-dashboard-main > .home-dashboard-hero {
    order: 2;
    position: relative !important;
    inset: auto !important;
    z-index: 1 !important;
    display: block !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
    margin: 16px 14px 0 !important;
    padding: 0 !important;
    transform: none !important;
    border: 0 !important;
    border-radius: 17px !important;
    box-shadow: 0 8px 22px rgba(7, 42, 83, 0.18) !important;
    overflow: hidden !important;
    background: #dfe8f1 !important;
  }

  body:not([data-print-mode]) #home.active .home-dashboard-hero::before,
  body:not([data-print-mode]) #home.active .home-dashboard-hero::after,
  body:not([data-print-mode]) #home.active .home-hero-media::before,
  body:not([data-print-mode]) #home.active .home-hero-media::after,
  body:not([data-print-mode]) #home.active .home-hero-picture::after {
    display: none !important;
    content: none !important;
  }

  body:not([data-print-mode]) #home.active .home-hero-media {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    border: 0 !important;
    border-radius: inherit !important;
    overflow: hidden !important;
  }

  body:not([data-print-mode]) #home.active .home-hero-picture {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }

  body:not([data-print-mode]) #home.active .home-copy,
  body:not([data-print-mode]) #home.active .home-hero-feature {
    display: none !important;
  }

  body:not([data-print-mode]) #home.active .home-hero-dots {
    position: absolute !important;
    right: 13px !important;
    bottom: 11px !important;
    left: auto !important;
    z-index: 3 !important;
    display: flex !important;
    gap: 6px !important;
    margin: 0 !important;
    transform: none !important;
  }

  body:not([data-print-mode]) #home.active .home-hero-dots[hidden] {
    display: none !important;
  }

  body:not([data-print-mode]) #home.active .home-hero-dots span {
    display: block !important;
    width: 8px !important;
    height: 8px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.82) !important;
  }

  body:not([data-print-mode]) #home.active .home-hero-dots span.active {
    background: #f7bd25 !important;
  }

  body:not([data-print-mode]) #home.active .home-hero-watermark {
    right: 12px !important;
    bottom: 28px !important;
    z-index: 4 !important;
    gap: 6px !important;
    opacity: 0.68 !important;
    font-size: 0.62rem !important;
  }

  body:not([data-print-mode]) #home.active .home-hero-watermark img {
    width: 34px !important;
    height: 34px !important;
  }

  body:not([data-print-mode]) #home.active .home-dashboard-main > .igss-notice-status-row {
    order: 3;
    display: block !important;
    width: auto !important;
    margin: 10px 14px 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  body:not([data-print-mode]) #home.active .igss-home-status-pills {
    display: none !important;
  }

  body:not([data-print-mode]) #home.active .home-emergency-banner {
    position: static !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 1px 10px !important;
    width: 100% !important;
    min-height: 76px !important;
    margin: 0 !important;
    padding: 13px 15px !important;
    transform: none !important;
    border: 0 !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 15px rgba(11, 92, 171, 0.24) !important;
    overflow: hidden !important;
    background: #0b5cab !important;
    color: #ffffff !important;
  }

  body:not([data-print-mode]) #home.active .home-emergency-banner[hidden] {
    display: none !important;
  }

  body:not([data-print-mode]) #home.active .home-emergency-banner::before {
    content: "!" !important;
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    color: #0b5cab !important;
    font-size: 1.35rem !important;
    font-weight: 1000 !important;
  }

  body:not([data-print-mode]) #home.active .home-emergency-banner strong,
  body:not([data-print-mode]) #home.active .home-emergency-banner span {
    grid-column: 2 !important;
    color: #ffffff !important;
    overflow-wrap: anywhere !important;
  }

  body:not([data-print-mode]) #home.active .home-emergency-banner strong {
    font-size: 0.76rem !important;
    line-height: 1.1 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
  }

  body:not([data-print-mode]) #home.active .home-emergency-banner strong::before,
  body:not([data-print-mode]) #home.active .home-emergency-banner strong::after {
    display: none !important;
    content: none !important;
  }

  body:not([data-print-mode]) #home.active .home-emergency-banner span {
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    line-height: 1.28 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden !important;
  }

  body:not([data-print-mode]) #home.active .home-emergency-banner a {
    grid-column: 3 !important;
    grid-row: 1 / 3 !important;
    align-self: center !important;
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 34px !important;
    justify-content: center !important;
    border-radius: 9px !important;
    padding: 0 10px !important;
    background: #ffffff !important;
    color: #0b5cab !important;
    font-size: 0.72rem !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  body:not([data-print-mode]) .important-notice-detail-card {
    border-left-width: 5px;
    border-radius: 13px;
    padding: 20px 17px;
  }

  body:not([data-print-mode]) .important-notice-facts {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  body:not([data-print-mode]) #home.active .home-dashboard-main > .home-mobile-quick-actions {
    order: 4;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: auto !important;
    margin: 11px 14px 0 !important;
    padding: 0 !important;
  }

  body:not([data-print-mode]) #home.active .home-mobile-quick-actions a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    min-height: 88px !important;
    margin: 0 !important;
    padding: 10px 5px !important;
    border: 0 !important;
    border-radius: 13px !important;
    box-shadow: 0 6px 15px rgba(165, 115, 0, 0.18) !important;
    background: #f7bd25 !important;
    color: #092f5f !important;
    text-align: center !important;
    text-decoration: none !important;
  }

  body:not([data-print-mode]) #home.active .home-mobile-action-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 30px !important;
    height: 30px !important;
    color: #092f5f !important;
    font-size: 1.35rem !important;
    font-weight: 1000 !important;
    line-height: 1 !important;
  }

  body:not([data-print-mode]) #home.active .home-mobile-action-icon.home-mobile-kwacha {
    width: 30px !important;
    border-radius: 50% !important;
    background: #092f5f !important;
    color: #f7bd25 !important;
    font-size: 1.05rem !important;
  }

  body:not([data-print-mode]) #home.active .home-mobile-quick-actions strong {
    color: #092f5f !important;
    font-size: clamp(0.69rem, 3.3vw, 0.88rem) !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    overflow-wrap: anywhere !important;
  }

  body:not([data-print-mode]) #home.active .home-dashboard-main > .home-portal-cards {
    order: 5;
    position: static !important;
    inset: auto !important;
    z-index: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 9px !important;
    width: auto !important;
    max-width: none !important;
    margin: 24px 14px 0 !important;
    padding: 0 0 6px !important;
    transform: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    background: transparent !important;
  }

  body:not([data-print-mode]) #home.active .home-portal-cards .igss-portal-heading {
    grid-column: 1 / -1 !important;
    display: block !important;
    width: 100% !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    color: #082e5b !important;
    font-size: 1.55rem !important;
    font-weight: 1000 !important;
    line-height: 1.1 !important;
    text-align: left !important;
  }

  body:not([data-print-mode]) #home.active .home-portal-cards .portal-card-management {
    display: none !important;
  }

  body:not([data-print-mode]) #home.active .home-portal-card.portal-card-learner,
  body:not([data-print-mode]) #home.active .home-portal-card.portal-card-parent,
  body:not([data-print-mode]) #home.active .home-portal-card.portal-card-teacher,
  body:not([data-print-mode]) #home.active .home-portal-card.portal-card-staff,
  body:not([data-print-mode]) #home.active .home-portal-card.portal-card-admin {
    position: static !important;
    inset: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    min-width: 0 !important;
    min-height: 190px !important;
    margin: 0 !important;
    padding: 13px 6px 10px !important;
    transform: none !important;
    border: 1px solid #e1e7ee !important;
    border-top: 4px solid #e3a908 !important;
    border-radius: 13px !important;
    box-shadow: 0 7px 19px rgba(6, 39, 78, 0.12) !important;
    overflow: hidden !important;
    background: #ffffff !important;
    color: #092f5f !important;
    text-align: center !important;
    text-decoration: none !important;
  }

  body:not([data-print-mode]) #home.active .home-portal-card .portal-icon {
    position: static !important;
    display: inline-flex !important;
    width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    transform: none !important;
    border: 0 !important;
    border-radius: 50% !important;
    background-color: #ffe8a2 !important;
    color: #c58d00 !important;
  }

  body:not([data-print-mode]) #home.active .home-portal-card > strong {
    color: #082e5b !important;
    font-size: clamp(0.8rem, 3.6vw, 1rem) !important;
    font-weight: 1000 !important;
    line-height: 1.1 !important;
    overflow-wrap: anywhere !important;
  }

  body:not([data-print-mode]) #home.active .home-portal-card > p {
    display: block !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
    color: #586576 !important;
    font-size: clamp(0.62rem, 2.7vw, 0.76rem) !important;
    font-weight: 650 !important;
    line-height: 1.3 !important;
    overflow-wrap: anywhere !important;
  }

  body:not([data-print-mode]) #home.active .home-portal-card > b {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 7px 4px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: #0a4f93 !important;
    color: #ffffff !important;
    font-size: clamp(0.62rem, 2.7vw, 0.75rem) !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
  }

  body:not([data-print-mode]) #home.active .home-portal-card > small {
    display: none !important;
  }

  body:not([data-print-mode]) #home.active .home-dashboard-main > .home-mobile-headteacher {
    order: 6;
    display: grid !important;
    grid-template-columns: 66px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    width: auto !important;
    margin: 23px 14px 0 !important;
    padding: 11px !important;
    border: 1px solid #dce5ee !important;
    border-radius: 14px !important;
    box-shadow: 0 5px 15px rgba(6, 39, 78, 0.09) !important;
    background: #f7f9fc !important;
    color: #082e5b !important;
  }

  body:not([data-print-mode]) #home.active .home-mobile-headteacher img {
    display: block !important;
    width: 66px !important;
    height: 66px !important;
    object-fit: cover !important;
    object-position: center top !important;
    border-radius: 11px !important;
  }

  body:not([data-print-mode]) #home.active .home-mobile-headteacher div {
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
  }

  body:not([data-print-mode]) #home.active .home-mobile-headteacher strong {
    color: #082e5b !important;
    font-size: 0.98rem !important;
    font-weight: 1000 !important;
  }

  body:not([data-print-mode]) #home.active .home-mobile-headteacher span {
    color: #a16e00 !important;
    font-size: 0.76rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
  }

  body:not([data-print-mode]) #home.active .home-mobile-headteacher q {
    color: #586576 !important;
    font-size: 0.78rem !important;
    font-style: italic !important;
    line-height: 1.25 !important;
  }

  body:not([data-print-mode]) #home.active .home-dashboard-main > .home-mobile-footer {
    order: 7;
    display: grid !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 22px 0 0 !important;
    padding: 20px 15px calc(22px + env(safe-area-inset-bottom)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #eef2f6 !important;
    color: #173a61 !important;
    text-align: center !important;
  }

  body:not([data-print-mode]) #home.active .home-mobile-footer nav {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px 18px !important;
  }

  body:not([data-print-mode]) #home.active .home-mobile-footer nav a {
    color: #0a4f93 !important;
    font-size: 0.85rem !important;
    font-weight: 900 !important;
    text-decoration: none !important;
  }

  body:not([data-print-mode]) #home.active .home-mobile-footer nav a.is-disabled {
    color: #6b7786 !important;
  }

  body:not([data-print-mode]) #home.active .home-mobile-footer p {
    margin: 0 !important;
    color: #173a61 !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
    overflow-wrap: anywhere !important;
  }

  body:not([data-print-mode]) #home.active .home-mobile-footer p a {
    color: #0a4f93 !important;
    text-decoration: none !important;
  }

  body:not([data-print-mode]) #home.active .home-dashboard-main > .home-popup-overlay:not([hidden]) {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2000 !important;
    display: flex !important;
  }

  body:not([data-print-mode]) #home.active .home-dashboard-main > .home-popup-overlay[hidden] {
    display: none !important;
  }
}

@media screen and (max-width: 360px) {
  body:not([data-print-mode]) #home.active .home-dashboard-main > .home-dashboard-topbar {
    padding-inline: 10px !important;
  }

  body:not([data-print-mode]) #home.active .igss-home-brand {
    grid-template-columns: 40px minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  body:not([data-print-mode]) #home.active .igss-home-brand > img {
    width: 40px !important;
    height: 40px !important;
  }

  body:not([data-print-mode]) #home.active .home-mobile-menu-btn {
    width: 44px !important;
    height: 44px !important;
  }

  body:not([data-print-mode]) #home.active .home-dashboard-main > .home-mobile-quick-actions,
  body:not([data-print-mode]) #home.active .home-dashboard-main > .home-portal-cards {
    gap: 6px !important;
    margin-inline: 10px !important;
  }

  body:not([data-print-mode]) #home.active .home-portal-card.portal-card-learner,
  body:not([data-print-mode]) #home.active .home-portal-card.portal-card-parent,
  body:not([data-print-mode]) #home.active .home-portal-card.portal-card-teacher,
  body:not([data-print-mode]) #home.active .home-portal-card.portal-card-staff,
  body:not([data-print-mode]) #home.active .home-portal-card.portal-card-admin {
    padding-inline: 4px !important;
  }
}

/* Branded database activity indicator. It appears only for portal entry,
   authentication, and explicit central-database saves. */
.database-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.database-loading-overlay[hidden] {
  display: none !important;
}

.database-loading-card {
  display: grid;
  justify-items: center;
  gap: 12px;
  width: min(190px, 70vw);
  margin: 0;
  padding: 18px 16px 15px;
  border: 1px solid rgba(13, 109, 61, 0.24);
  border-radius: 20px;
  box-shadow: 0 16px 42px rgba(8, 83, 45, 0.18);
  background: #ffffff;
  color: #0b6b3a;
  text-align: center;
}

.database-loading-spinner {
  position: relative;
  display: grid;
  place-items: center;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: #ffffff;
}

.database-loading-spinner::before {
  content: "";
  position: absolute;
  inset: 2px;
  border: 4px solid #f2c230;
  border-top-color: transparent;
  border-right-color: #0b6b3a;
  border-radius: 50%;
  animation: igssDatabaseSpin 0.9s linear infinite;
}

.database-loading-spinner::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(13, 109, 61, 0.12);
  border-radius: 50%;
}

.database-loading-brand {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 1px;
  line-height: 1;
}

.database-loading-brand strong {
  color: #d8a700;
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.database-loading-brand span {
  color: #0b6b3a;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.database-loading-card p {
  margin: 0;
  color: #0b6b3a;
  font-size: 0.8rem;
  font-weight: 850;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

body.database-loading-active {
  cursor: progress;
}

body.authentication-loading {
  overflow: hidden;
}

body.authentication-loading .database-loading-overlay {
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@keyframes igssDatabaseSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .database-loading-spinner::before {
    animation-duration: 1.8s;
  }
}

/* The public phone homepage uses the school's yellow, green, and white
   identity. Red remains reserved for the Important Notice only. */
@media screen and (max-width: 760px) {
  body:not([data-print-mode]) #home.active .home-dashboard-main > .home-dashboard-topbar {
    background: #0b6b3a !important;
    box-shadow: 0 5px 16px rgba(7, 85, 44, 0.2) !important;
  }

  body:not([data-print-mode]) #home.active .home-mobile-menu-btn {
    border-color: rgba(255, 255, 255, 0.55) !important;
    background: rgba(255, 255, 255, 0.12) !important;
    color: #f4c533 !important;
  }

  body:not([data-print-mode]) #home.active .home-top-nav {
    border-top-color: rgba(255, 255, 255, 0.22) !important;
    box-shadow: 0 14px 25px rgba(7, 85, 44, 0.24) !important;
    background: #0b6b3a !important;
  }

  body:not([data-print-mode]) #home.active .home-top-nav a {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
  }

  body:not([data-print-mode]) #home.active .home-top-nav a:hover,
  body:not([data-print-mode]) #home.active .home-top-nav a:focus-visible,
  body:not([data-print-mode]) #home.active .home-top-nav a.active {
    background: #ffffff !important;
    color: #0b6b3a !important;
    box-shadow: inset 0 -3px 0 #f4c533 !important;
  }

  body:not([data-print-mode]) #home.active .home-dashboard-main > .home-dashboard-hero {
    box-shadow: 0 8px 22px rgba(7, 85, 44, 0.18) !important;
  }

  body:not([data-print-mode]) #home.active .home-mobile-quick-actions a {
    box-shadow: 0 6px 15px rgba(164, 121, 0, 0.18) !important;
    background: #f4c533 !important;
    color: #125c35 !important;
  }

  body:not([data-print-mode]) #home.active .home-mobile-action-icon,
  body:not([data-print-mode]) #home.active .home-mobile-quick-actions strong {
    color: #125c35 !important;
  }

  body:not([data-print-mode]) #home.active .home-mobile-action-icon.home-mobile-kwacha {
    background: #0b6b3a !important;
    color: #f4c533 !important;
  }

  body:not([data-print-mode]) #home.active .home-portal-cards .igss-portal-heading,
  body:not([data-print-mode]) #home.active .home-portal-card > strong {
    color: #0b6b3a !important;
  }

  body:not([data-print-mode]) #home.active .home-portal-card.portal-card-learner,
  body:not([data-print-mode]) #home.active .home-portal-card.portal-card-parent,
  body:not([data-print-mode]) #home.active .home-portal-card.portal-card-teacher,
  body:not([data-print-mode]) #home.active .home-portal-card.portal-card-staff,
  body:not([data-print-mode]) #home.active .home-portal-card.portal-card-admin {
    border-color: #e7ebdf !important;
    border-top-color: #f4c533 !important;
    box-shadow: 0 7px 19px rgba(7, 85, 44, 0.12) !important;
    background: #ffffff !important;
    color: #0b6b3a !important;
  }

  body:not([data-print-mode]) #home.active .home-portal-card .portal-icon {
    background-color: #fff2b8 !important;
    color: #0b6b3a !important;
  }

  body:not([data-print-mode]) #home.active .home-portal-card > p {
    color: #476653 !important;
  }

  body:not([data-print-mode]) #home.active .home-portal-card > b {
    background: #0b6b3a !important;
    color: #ffffff !important;
  }

  body:not([data-print-mode]) #home.active .home-dashboard-main > .home-mobile-headteacher {
    border-color: #d9e9dd !important;
    box-shadow: 0 5px 15px rgba(7, 85, 44, 0.1) !important;
    background: #ffffff !important;
    color: #0b6b3a !important;
  }

  body:not([data-print-mode]) #home.active .home-mobile-headteacher strong {
    color: #0b6b3a !important;
  }

  body:not([data-print-mode]) #home.active .home-mobile-headteacher span {
    color: #b48600 !important;
  }

  body:not([data-print-mode]) #home.active .home-mobile-headteacher q {
    color: #476653 !important;
  }

  body:not([data-print-mode]) #home.active .home-dashboard-main > .home-mobile-footer {
    border-top: 4px solid #f4c533 !important;
    background: #f4fbf6 !important;
    color: #0b6b3a !important;
  }

  body:not([data-print-mode]) #home.active .home-mobile-footer nav a,
  body:not([data-print-mode]) #home.active .home-mobile-footer p,
  body:not([data-print-mode]) #home.active .home-mobile-footer p a {
    color: #0b6b3a !important;
  }
}
.application-photo-preview {
  width: 112px;
  height: 136px;
  margin: 0 auto 14px;
  border: 2px solid var(--primary, #08783e);
  border-radius: 10px;
  background: #f2f6f3;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #52645a;
  font-size: 0.78rem;
  text-align: center;
}

.application-photo-preview img,
.application-print-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.application-photo-missing {
  border-style: dashed;
}

.application-print-form {
  max-width: 780px;
  margin: 0 auto;
}

.application-print-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px;
  gap: 18px;
  align-items: center;
}

.application-print-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.application-print-columns section {
  min-width: 0;
}

.application-print-summary {
  margin-top: 10px;
}

.application-print-summary p {
  margin: 4px 0;
}

.application-print-photo {
  width: 140px;
  height: 170px;
  margin: 0 auto 16px;
  border: 2px solid #08783e;
  border-radius: 8px;
  display: grid;
  place-items: center;
  overflow: hidden;
  text-align: center;
  color: #52645a;
}

.application-print-form h2,
.application-print-number {
  text-align: center;
}

@page learnerApplication {
  size: A4 portrait;
  margin: 7mm;
}

@page acceptanceLetter {
  size: A4 portrait;
  margin: 10mm;
}

@media print {
  body[data-print-mode="learner-application"] .print-selection {
    page: learnerApplication;
  }

  body[data-print-mode="learner-application"] .print-selection-heading,
  body[data-print-mode="acceptance-letter"] .print-selection-heading {
    display: none !important;
  }

  body[data-print-mode="learner-application"] .document-header {
    grid-template-columns: 16mm 1fr 16mm;
    gap: 3mm;
    padding-bottom: 2mm;
  }

  body[data-print-mode="learner-application"] .document-header img {
    width: 15mm;
    height: 15mm;
  }

  body[data-print-mode="learner-application"] .document-header strong {
    font-size: 12pt;
  }

  body[data-print-mode="learner-application"] .document-header span,
  body[data-print-mode="learner-application"] .document-header em {
    font-size: 7pt;
  }

  body[data-print-mode="learner-application"] .application-print-form {
    width: 100%;
    max-width: none;
    height: 273mm;
    overflow: hidden;
    font-size: 7.4pt;
    line-height: 1.15;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  body[data-print-mode="learner-application"] .application-print-intro {
    grid-template-columns: minmax(0, 1fr) 22mm;
    gap: 3mm;
    margin: 2mm 0;
  }

  body[data-print-mode="learner-application"] .application-print-photo {
    width: 20mm;
    height: 25mm;
    margin: 0;
    border-width: 1px;
    border-radius: 2mm;
    font-size: 6pt;
  }

  body[data-print-mode="learner-application"] .application-print-form h2 {
    margin: 0 0 1mm;
    font-size: 11pt;
  }

  body[data-print-mode="learner-application"] .application-print-form h3 {
    margin: 1.5mm 0 1mm;
    font-size: 8.5pt;
  }

  body[data-print-mode="learner-application"] .application-print-number,
  body[data-print-mode="learner-application"] .application-print-summary p {
    margin: 0.8mm 0;
  }

  body[data-print-mode="learner-application"] .application-print-columns {
    gap: 3mm;
  }

  body[data-print-mode="learner-application"] .document-table {
    table-layout: fixed;
  }

  body[data-print-mode="learner-application"] .document-table th,
  body[data-print-mode="learner-application"] .document-table td {
    padding: 1.15mm 1.4mm;
    overflow-wrap: anywhere;
  }

  body[data-print-mode="learner-application"] .document-table th {
    width: 39%;
  }

  body[data-print-mode="learner-application"] .official-signature-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3mm;
    margin-top: 2mm;
  }

  body[data-print-mode="learner-application"] .official-mark-slot {
    min-width: 0;
    min-height: 18mm;
    padding-top: 1mm;
    font-size: 6.5pt;
  }

  body[data-print-mode="acceptance-letter"] .print-selection {
    page: acceptanceLetter;
  }

  body[data-print-mode="acceptance-letter"] .document-sheet {
    width: 190mm;
    min-height: 0;
    max-height: 277mm;
    margin: 0 auto;
    padding: 8mm 10mm;
    overflow: hidden;
    box-shadow: none;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  body[data-print-mode="acceptance-letter"] .document-table th,
  body[data-print-mode="acceptance-letter"] .document-table td {
    padding: 5px 7px;
  }
}

.secretary-work-nav {
  position: sticky;
  top: 8px;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  padding: 10px;
  border: 1px solid #d8e5dc;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
}

.secretary-work-nav button {
  border: 0;
  padding: 8px 12px;
  border-radius: 999px;
  background: #e9f5ed;
  color: #08783e;
  font-weight: 700;
  cursor: pointer;
}

.secretary-work-nav button:hover,
.secretary-work-nav button:focus-visible {
  background: #08783e;
  color: #fff;
}

.secretary-work-help { margin: 0 0 12px; }

.secretary-work-dialog,
.secretary-learner-dialog {
  width: min(1080px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  padding: 0;
  border: 0;
  border-radius: 16px;
  box-shadow: 0 22px 70px rgba(0, 0, 0, .28);
  background: var(--surface, #fff);
  color: inherit;
}

.secretary-work-dialog::backdrop,
.secretary-learner-dialog::backdrop { background: rgba(8, 28, 18, .64); }

.secretary-dialog-header {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #d8e5dc;
  background: var(--surface, #fff);
}

.secretary-dialog-header h2 { margin: 0; }
.secretary-dialog-body { padding: 16px; overflow: auto; }
.secretary-dialog-body .secretary-work-section { margin-bottom: 0; }

.admin-allocation-dialog { width: min(1180px, calc(100vw - 28px)); }
.admin-allocation-toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.admin-allocation-groups { display: grid; gap: 16px; margin-top: 16px; }
.admin-allocation-department { padding: 16px; border: 1px solid #d8e5dc; border-radius: 16px; background: #f7fbf8; }
.admin-allocation-department-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.admin-allocation-department-head h3, .admin-allocation-department-head p { margin: 0; }
.admin-allocation-department-head p { margin-top: 4px; color: var(--muted, #607066); }
.admin-allocation-teacher { margin-top: 10px; background: #fff; }
.admin-allocation-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid #e5eee8; }
.admin-allocation-row .card-actions { margin: 0; }
.results-monitor-dialog { width: min(1440px, calc(100vw - 24px)); }
.results-monitor-overview { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(240px, 2fr) auto; align-items: center; gap: 12px; padding: 16px; border-radius: 16px; color: #fff; background: linear-gradient(135deg, #08783e, #07552e); }
.results-monitor-overview div:first-child { display: grid; gap: 4px; }
.results-monitor-overview p { margin: 0; }
.results-monitor-progress { height: 14px; overflow: hidden; border-radius: 999px; background: rgba(20, 80, 50, .16); }
.results-monitor-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f4c430, #20b26b); transition: width .25s ease; }
.results-monitor-overview .results-monitor-progress { background: rgba(255,255,255,.24); }
.results-monitor-overview .secondary-btn { background: #fff; color: #07552e; }
.results-monitor-filters { display: grid; grid-template-columns: repeat(7, minmax(130px, 1fr)); gap: 10px; margin: 16px 0; }
.results-monitor-filters label { display: grid; gap: 5px; font-weight: 750; }
.results-monitor-table-wrap { overflow: auto; border: 1px solid #d8e5dc; border-radius: 14px; }
.results-monitor-table { min-width: 1120px; margin: 0; }
.results-monitor-table td { vertical-align: middle; }
.results-monitor-table .card-actions { flex-wrap: nowrap; margin: 0; }
.results-monitor-status { display: inline-flex; padding: 5px 9px; border-radius: 999px; font-size: .78rem; font-weight: 800; white-space: nowrap; }
.results-monitor-status.status-done { color: #075f34; background: #dff5e8; }
.results-monitor-status.status-in-progress { color: #6d5100; background: #fff1bd; }
.results-monitor-status.status-not-started, .results-monitor-status.status-late { color: #9c1d1d; background: #ffe1e1; }
.results-monitor-locked { display: block; margin-top: 5px; color: #8a3b0b; font-weight: 800; }
.results-monitor-alert-card { border-left: 5px solid #f4c430; }
.results-monitor-alert-card > p { color: var(--muted, #607066); }
.results-monitor-alert-card .results-monitor-progress { margin: 12px 0 8px; }
.admin-learner-information-dialog,
.admin-result-correction-dialog { width: min(1240px, calc(100vw - 24px)); }
.learner-correction-intro { padding: 14px 16px; border-left: 5px solid #08783e; border-radius: 12px; background: #eef8f1; }
.learner-correction-intro strong { display: block; color: #07552e; font-size: 1.05rem; }
.learner-correction-intro p { margin: 5px 0 0; color: #455c4e; }
.learner-correction-filters { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
.result-correction-filters { grid-template-columns: repeat(3, minmax(160px, 1fr)); }
.learner-correction-form-grid { display: grid; grid-template-columns: repeat(4, minmax(170px, 1fr)); gap: 12px; }
.learner-correction-form-grid label { display: grid; gap: 6px; }
.result-correction-queue { margin-top: 22px; padding-top: 16px; border-top: 1px solid #d8e5dc; }
.result-correction-queue h3 { margin-top: 0; }
@media (max-width: 680px) {
  .admin-allocation-department-head, .admin-allocation-row { align-items: stretch; flex-direction: column; }
  .admin-allocation-row .card-actions button { flex: 1; }
  .results-monitor-overview { grid-template-columns: 1fr; }
  .results-monitor-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .learner-correction-form-grid,
  .result-correction-filters { grid-template-columns: 1fr; }
}
@media (min-width: 681px) and (max-width: 1100px) {
  .results-monitor-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .learner-correction-form-grid { grid-template-columns: repeat(2, minmax(170px, 1fr)); }
}

.teacher-marks-period-dialog {
  width: min(700px, calc(100vw - 28px));
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: var(--surface, #fff);
  color: inherit;
  box-shadow: 0 24px 80px rgba(20, 35, 50, .28);
}

.teacher-marks-period-dialog::backdrop { background: rgba(20, 35, 50, .62); }

.teacher-marks-period-form {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  padding: clamp(24px, 5vw, 52px);
}

.teacher-marks-period-form > div,
.teacher-marks-period-submit { grid-column: 1 / -1; }
.teacher-marks-period-form h2 { margin: 4px 0 8px; font-size: clamp(1.65rem, 4vw, 2.45rem); line-height: 1.15; }
.teacher-marks-period-form label { display: grid; gap: 8px; font-weight: 800; }
.teacher-marks-period-form select { min-height: 54px; font-size: 1.05rem; }
.teacher-marks-period-submit { min-height: 52px; font-size: 1.05rem; }
.teacher-marks-period-close { position: absolute; top: 14px; right: 14px; }

.hod-assignment-chip-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.hod-assignment-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border-radius: 999px;
  background: #e9f5ed;
  color: #075f34;
  font-weight: 700;
}
.hod-assignment-chip button {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #a32929;
  cursor: pointer;
  font-weight: 900;
}

@media (max-width: 560px) {
  .teacher-marks-period-form { grid-template-columns: 1fr; padding: 26px 18px 20px; }
  .teacher-marks-period-form > div,
  .teacher-marks-period-submit { grid-column: auto; }
}

.secretary-work-section {
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid #d8e5dc;
  border-radius: 14px;
  background: var(--surface, #fff);
}

.secretary-class-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin: 14px 0;
}

.secretary-class-card {
  margin: 0;
}

.secretary-learner-summary {
  display: grid;
  gap: 4px;
}

.secretary-learner-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 18px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #d8e5dc;
}

.secretary-learner-details p {
  margin: 0;
}

@media (max-width: 640px) {
  .secretary-work-section {
    padding: 12px;
  }

  .secretary-work-nav {
    position: static;
  }
}
.alumni-registration-view {
  min-height: 100vh;
  padding: clamp(1rem, 3vw, 3rem);
  background: linear-gradient(145deg, #eef8f1, #f8fbf4 45%, #fff7d8);
}

/* Public parent e-results service */
.public-results-view {
  min-height: 100vh;
  padding: clamp(1rem, 3vw, 2.5rem);
  background:
    radial-gradient(circle at 10% 0%, rgba(255, 203, 5, .18), transparent 28rem),
    linear-gradient(145deg, #edf7f1 0%, #f7f9fc 58%, #eef4fb 100%);
  color: #1b2b3b;
}

.public-results-shell {
  width: min(980px, 100%);
  margin: 0 auto;
}

.public-results-back {
  display: inline-flex;
  margin-bottom: 1rem;
  color: #0b7043;
  font-weight: 800;
  text-decoration: none;
}

.public-results-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(120deg, #052d55, #086b43 68%, #0b7d49);
  box-shadow: 0 18px 45px rgba(17, 45, 69, .16);
}

.public-results-brand img {
  width: 76px;
  height: 76px;
  object-fit: contain;
  filter: drop-shadow(0 6px 9px rgba(0, 0, 0, .2));
}

.public-results-brand span,
.public-results-brand p { margin: 0; }
.public-results-brand span { color: #ffd441; font-size: .75rem; font-weight: 900; letter-spacing: .12em; }
.public-results-brand h1 { margin: .2rem 0; font-size: clamp(1.35rem, 4vw, 2.2rem); }
.public-results-brand p { font-weight: 800; }

.public-results-intro,
.public-results-instructions,
.public-results-lookup {
  border: 1px solid rgba(31, 65, 87, .08);
  border-radius: 28px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 18px 48px rgba(31, 65, 87, .11);
}

.public-results-intro {
  padding: clamp(1.35rem, 4vw, 2.25rem);
  margin-bottom: 1rem;
  color: #fff;
  background: linear-gradient(135deg, #076f43, #105d8c);
}

.public-results-intro .eyebrow { color: #ffe175; }
.public-results-intro h2 { margin: .35rem 0 .65rem; font-size: clamp(1.6rem, 4vw, 2.4rem); }
.public-results-intro p:last-child { max-width: 760px; margin: 0; font-size: 1.02rem; line-height: 1.65; }

.public-results-instructions { padding: clamp(1.25rem, 4vw, 2.5rem); }
.public-results-instruction-title { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.25rem; }
.public-results-instruction-title > span {
  display: grid;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 16px;
  color: #087144;
  background: #e7f6ee;
  font-size: 1.3rem;
  font-weight: 900;
}
.public-results-instruction-title h2 { max-width: 620px; margin: .15rem 0 0; text-transform: uppercase; font-size: clamp(1.45rem, 4vw, 2.15rem); line-height: 1.12; }
.public-results-instructions ol { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.public-results-instructions li { display: grid; grid-template-columns: 44px 1fr; gap: .8rem; align-items: center; padding: .85rem 1rem; border-radius: 16px; background: #f5f7f9; }
.public-results-instructions li > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; color: #fff; background: #087d49; font-weight: 900; box-shadow: 0 8px 18px rgba(8, 125, 73, .2); }
.public-results-instructions li p { margin: 0; line-height: 1.45; }
.public-results-security { margin: 1.4rem 0; padding: 1rem; border-top: 1px dashed #cbd6dd; border-bottom: 1px dashed #cbd6dd; color: #52616d; font-weight: 700; }
.public-results-proceed,
.public-results-check { width: 100%; min-height: 58px; border-radius: 16px; font-size: 1.05rem; }

.public-results-lookup { margin-top: 1.25rem; overflow: hidden; }
.public-results-lookup[hidden] { display: none; }
.public-results-lookup > header { padding: 1.4rem 1.5rem; text-align: center; color: #0d5738; background: linear-gradient(135deg, #ddf3e7, #eaf6ef); }
.public-results-lookup > header h2 { margin: .2rem 0 .45rem; font-size: clamp(1.45rem, 4vw, 2rem); }
.public-results-lookup > header p:last-child { margin: 0; }
.public-results-form { display: grid; gap: 1rem; padding: clamp(1.25rem, 4vw, 2.2rem); }
.public-results-form label { display: grid; gap: .55rem; color: #17324a; font-size: .86rem; font-weight: 900; letter-spacing: .04em; }
.public-results-form .text-field { min-height: 54px; border: 1px solid #cbd7df; border-radius: 14px; background: #fff; font-size: 1rem; }
.public-results-status { min-height: 1.5rem; margin: 0 1.5rem 1.5rem; padding: .85rem 1rem; border-radius: 12px; color: #52616d; background: #f3f6f8; }
.public-results-status:empty { display: none; }
.public-results-status.is-loading { color: #20577d; background: #eaf4fb; }
.public-results-status.is-ready { color: #0d6c43; background: #eaf8f0; }
.public-results-status.is-success { color: #0d6c43; background: #e4f7ec; }
.public-results-status.is-warning { color: #7b5700; background: #fff4cf; }
.public-results-status.is-error { color: #9a2532; background: #fdecef; }
.public-results-status a { color: inherit; font-weight: 900; }
.public-results-footer,
.global-powered-footer { padding: 1.15rem; text-align: center; color: #fff; background: #052d55; font-weight: 900; letter-spacing: .04em; }
.public-results-footer { margin-top: 1.25rem; border-radius: 18px; }
.global-powered-footer { margin-top: 2rem; }
body[data-route="home"] .global-powered-footer,
body[data-route="e-child-results"] .global-powered-footer,
body[data-route="alumni-registration"] .global-powered-footer { display: none; }
.site-footer .footer-powered { display: block; flex-basis: 100%; text-align: center; color: #ffe16a; }

@media (max-width: 640px) {
  .public-results-view { padding: .65rem; }
  .public-results-brand { border-radius: 18px; }
  .public-results-brand img { width: 58px; height: 58px; }
  .public-results-brand span { font-size: .62rem; }
  .public-results-intro,
  .public-results-instructions,
  .public-results-lookup { border-radius: 20px; }
  .public-results-instructions li { grid-template-columns: 36px 1fr; padding: .75rem; }
  .public-results-instructions li > span { width: 32px; height: 32px; }
  .public-results-form { padding: 1rem; }
  .public-results-status { margin: 0 1rem 1rem; }
}

.alumni-registration-shell { max-width: 920px; margin: 0 auto; }
.alumni-back-link { display: inline-flex; margin-bottom: 1rem; color: #086b38; font-weight: 800; text-decoration: none; }
.alumni-registration-card { overflow: hidden; background: #fff; border: 1px solid #dce9df; border-radius: 24px; box-shadow: 0 22px 60px rgba(9, 73, 40, .13); }
.alumni-registration-header { padding: clamp(1.5rem, 4vw, 3rem); text-align: center; color: #fff; background: linear-gradient(135deg, #056b38, #0a8b49); }
.alumni-registration-header img { width: 112px; height: 126px; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(0,0,0,.22)); }
.alumni-registration-header p { margin: .7rem 0 .2rem; font-weight: 900; letter-spacing: .08em; }
.alumni-registration-header h1 { margin: 0; font-size: clamp(1.8rem, 5vw, 3rem); text-transform: uppercase; }
.alumni-registration-header strong { display: block; margin-top: .6rem; color: #ffe56d; font-style: italic; }
.alumni-public-form { display: grid; gap: 1rem; padding: clamp(1rem, 4vw, 2.5rem); }
.alumni-form-section { border: 1px solid #cfe0d4; border-radius: 16px; background: #fbfdfb; overflow: hidden; }
.alumni-form-section summary { cursor: pointer; padding: 1rem 1.15rem; color: #124d2f; font-size: 1.05rem; font-weight: 900; list-style-position: inside; }
.alumni-form-section summary span { display: inline-block; margin-right: .55rem; padding: .3rem .55rem; border-radius: 8px; color: #fff; background: #08783e; text-transform: uppercase; font-size: .78rem; letter-spacing: .04em; }
.alumni-form-section[open] summary { border-bottom: 1px solid #dce9df; background: #f0f8f2; }
.alumni-section-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding: 1.15rem; }
.alumni-section-fields > label, .alumni-section-fields fieldset { display: grid; gap: .45rem; font-weight: 700; }
.alumni-section-fields fieldset { grid-column: 1 / -1; padding: 1rem; border: 1px solid #d4e3d8; border-radius: 12px; }
.alumni-section-fields fieldset label { display: flex; align-items: center; gap: .55rem; font-weight: 600; }
.alumni-section-fields textarea, .alumni-photo-upload, .alumni-section-fields > label:has(textarea) { grid-column: 1 / -1; }
.alumni-photo-upload { padding: 1rem; border: 2px dashed #9fc7ac; border-radius: 12px; background: #f4faf6; }
.alumni-submit-btn { min-height: 52px; font-size: 1.05rem; }
.alumni-submit-status { min-height: 1.5rem; margin: 0; color: #0a6335; text-align: center; }
@media (max-width: 640px) {
  .alumni-registration-view { padding: .65rem; }
  .alumni-registration-card { border-radius: 18px; }
  .alumni-section-fields { grid-template-columns: 1fr; }
  .alumni-section-fields > * { grid-column: 1 !important; }
}
.secretary-alumni-toolbar { display: flex; align-items: end; gap: 1rem; flex-wrap: wrap; margin: 1rem 0; }
.secretary-alumni-toolbar label { display: grid; gap: .4rem; min-width: 220px; font-weight: 800; }
.secretary-alumni-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.secretary-alumni-row > div { min-width: 0; }
.secretary-alumni-profile { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 1.25rem; }
.secretary-alumni-photo { width: 150px; height: 180px; border: 1px solid #bed6c5; border-radius: 16px; background: #e8f4eb center/cover no-repeat; display: grid; place-items: center; color: #08783e; font-size: 2.2rem; font-weight: 900; }
.secretary-alumni-profile-title { align-self: center; }
.secretary-alumni-profile-title h2 { margin: .2rem 0; }
.secretary-alumni-details { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 0; }
.secretary-alumni-details div { padding: .8rem; border: 1px solid #dbe8de; border-radius: 12px; background: #f8fbf8; }
.secretary-alumni-details .wide { grid-column: 1 / -1; }
.secretary-alumni-details dt { color: #557065; font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.secretary-alumni-details dd { margin: .25rem 0 0; white-space: pre-wrap; }
@media (max-width: 640px) {
  .secretary-alumni-row, .secretary-alumni-profile { grid-template-columns: 1fr; display: grid; }
  .secretary-alumni-details { grid-template-columns: 1fr; }
  .secretary-alumni-details > div { grid-column: 1 !important; }
  .secretary-alumni-photo { width: 120px; height: 145px; }
}

.class-management-panel {
  display: grid;
  gap: 1.25rem;
}

.class-management-selector {
  display: grid;
  gap: .35rem;
  min-width: min(260px, 100%);
  color: #214638;
  font-weight: 800;
}

.class-management-privilege-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: .9rem;
}

.class-management-privilege {
  display: grid;
  align-content: start;
  gap: .65rem;
  min-height: 190px;
  padding: 1rem;
  border: 1px solid #d6e6db;
  border-radius: 16px;
  background: linear-gradient(145deg, #fff, #f2f8f4);
  box-shadow: 0 8px 20px rgba(17, 87, 51, .07);
}

.class-management-privilege strong { color: #076a38; font-size: 1.02rem; }
.class-management-privilege p { margin: 0; color: #53685e; line-height: 1.48; }
.class-management-privilege button { align-self: end; justify-self: start; margin-top: auto; }

.class-management-section {
  display: grid;
  gap: .9rem;
  padding: clamp(.8rem, 2vw, 1.25rem);
  border: 1px solid #d5e3da;
  border-radius: 18px;
  background: #fff;
  scroll-margin-top: 1rem;
}

.class-management-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.class-management-heading h3,
.class-management-heading p { margin: 0; }

.class-management-period-filter {
  display: grid;
  grid-template-columns: repeat(3, minmax(170px, 1fr));
  gap: .8rem;
  padding: .9rem;
  border: 1px solid #cfe0d5;
  border-radius: 14px;
  background: #f4f9f6;
}

.class-management-period-filter label,
.class-management-learner-picker,
.class-report-comment-workspace label {
  display: grid;
  gap: .35rem;
  color: #214638;
  font-weight: 800;
}

.class-management-period-label,
.class-report-summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .8rem 1rem;
  border-left: 5px solid #0a6d3c;
  border-radius: 10px;
  background: #eef7f1;
  color: #214638;
}

.class-report-comment-workspace {
  display: grid;
  gap: .9rem;
  padding: 1rem;
  border: 1px solid #d4e2d8;
  border-radius: 16px;
  background: linear-gradient(145deg, #ffffff, #f5faf7);
}

.class-report-comment-preview {
  display: grid;
  gap: .3rem;
  padding: .9rem 1rem;
  border: 1px solid #e2c760;
  border-radius: 12px;
  background: #fff9df;
  color: #3d4a43;
}

.class-report-comment-preview small { color: #71601b; font-weight: 800; }
.class-report-comment-workspace .primary-btn { justify-self: start; }
.class-report-comment-workspace .saved-note { margin: 0; color: #496459; font-weight: 700; }

.class-report-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  color: #52675d;
  font-size: .9rem;
}

.class-report-official-preview,
.class-report-history {
  border: 1px solid #d4e2d8;
  border-radius: 16px;
  background: #f8fbf9;
}

.class-report-official-preview > summary {
  cursor: pointer;
  padding: 1rem;
  color: #076a38;
  font-weight: 850;
}

.class-report-official-sheet {
  overflow: auto;
  padding: 0 1rem 1rem;
}

.class-report-history { padding: 1rem; }
.class-report-history h4 { margin: 0; color: #214638; }
.class-report-history td:nth-child(4) { min-width: 300px; white-space: normal; }

.class-management-table small { color: #60736a; }
.class-management-table td { vertical-align: top; }

.class-management-profile { max-width: 320px; }
.class-management-profile summary { cursor: pointer; color: #076a38; font-weight: 800; }
.class-management-profile p { margin: .4rem 0; font-size: .86rem; }

.class-management-tracking-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: .85rem;
}

.class-management-track {
  display: grid;
  gap: .5rem;
  padding: 1rem;
  border: 1px solid #dbe7df;
  border-left: 5px solid #bb3e3e;
  border-radius: 14px;
  background: #fff;
}

.class-management-track.progress { border-left-color: #c68b16; }
.class-management-track.complete { border-left-color: #16814a; }
.class-management-track p,
.class-management-track span { margin: 0; color: #596c62; }

.class-management-progress {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8eeea;
}

.class-management-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0a6d3c, #e2b52d);
}

@media (max-width: 700px) {
  .class-management-selector { width: 100%; }
  .class-management-privilege-grid,
  .class-management-tracking-grid { grid-template-columns: 1fr; }
  .class-management-period-filter { grid-template-columns: 1fr; }
  .class-management-heading { align-items: stretch; }
  .class-management-heading .backup-actions { width: 100%; }
}

/* Published test analysis */
.test-analysis-sheet {
  --analysis-navy: #0d2f5f;
  --analysis-gold: #e3b51f;
  --analysis-ink: #13233a;
  display: grid;
  gap: .8rem;
  min-width: 0;
  padding: clamp(.75rem, 2vw, 1.4rem);
  border: 2px solid var(--analysis-navy);
  border-radius: 18px;
  background: #fff;
  color: var(--analysis-ink);
  box-shadow: 0 18px 42px rgba(13, 47, 95, .12);
}

.test-analysis-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding-bottom: .8rem;
  border-bottom: 4px solid var(--analysis-gold);
}

.test-analysis-header h2,
.test-analysis-header h3,
.test-analysis-header p { margin: 0; }
.test-analysis-header h2 { color: var(--analysis-navy); font-size: clamp(1.2rem, 2.2vw, 2rem); letter-spacing: .02em; }
.test-analysis-header h3 { margin-top: .2rem; color: #7b1118; font-size: clamp(1rem, 1.7vw, 1.5rem); }
.test-analysis-header p { margin-top: .28rem; font-size: .88rem; font-weight: 700; }
.test-analysis-period { color: var(--analysis-navy); text-transform: uppercase; }

.test-analysis-logos { display: flex; align-items: center; gap: .65rem; flex: 0 0 auto; }
.test-analysis-logos img { width: 68px; height: 68px; object-fit: contain; }
.test-analysis-logos img:last-child { border-radius: 14px; }

.test-analysis-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem;
}

.test-analysis-meta span {
  padding: .55rem .7rem;
  border: 1px solid #c9d5e4;
  border-radius: 9px;
  background: #f4f7fb;
  color: var(--analysis-navy);
  font-size: .76rem;
  font-weight: 800;
  text-align: center;
}

.test-analysis-scroll {
  max-width: 100%;
  border: 1px solid #8fa0b5;
  border-radius: 9px;
  background: #fff;
}

.test-analysis-table {
  width: 100%;
  min-width: 1900px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: .66rem;
}

.test-analysis-table th,
.test-analysis-table td {
  min-width: 38px;
  padding: .35rem .25rem;
  border: 1px solid #65768c;
  text-align: center;
  white-space: nowrap;
}

.test-analysis-table thead tr:first-child th {
  color: #fff;
  background: var(--analysis-navy);
  font-weight: 900;
}

.test-analysis-table thead tr:nth-child(2) th {
  color: #12213a;
  background: #f7d85e;
  font-weight: 900;
}

.test-analysis-table thead th:nth-child(2),
.test-analysis-table tbody th { width: 220px; min-width: 220px; text-align: left; }
.test-analysis-table tbody th { color: var(--analysis-navy); background: #eef3f8; }
.test-analysis-table tbody tr:nth-child(even) td { background: #f8fafc; }
.test-analysis-table .test-analysis-male { color: #77859a; background: #f2f4f7; }

.test-analysis-footer {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.test-analysis-footer p { margin: 0 0 .5rem; line-height: 1.45; }
.test-analysis-key { width: 100%; border-collapse: collapse; font-size: .76rem; }
.test-analysis-key th,
.test-analysis-key td { padding: .3rem .45rem; border: 1px solid #687b91; text-align: center; }
.test-analysis-key th { color: #fff; background: var(--analysis-navy); }

.test-analysis-brand-footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: .6rem;
  border-top: 2px solid var(--analysis-gold);
  color: var(--analysis-navy);
  font-size: .78rem;
}

@media (max-width: 800px) {
  .test-analysis-header { align-items: flex-start; }
  .test-analysis-logos img { width: 52px; height: 52px; }
  .test-analysis-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .test-analysis-footer { grid-template-columns: 1fr; }
  .test-analysis-key { max-width: 300px; }
  .test-analysis-brand-footer { display: grid; }
}

@page testAnalysisLandscape {
  size: A3 landscape;
  margin: 7mm;
}

@media print {
  body[data-print-mode="test-analysis"] .print-selection {
    page: testAnalysisLandscape;
    width: 406mm;
    max-width: 406mm;
    margin: 0;
    padding: 0;
  }

  body[data-print-mode="test-analysis"] .print-selection-heading { display: none !important; }
  body[data-print-mode="test-analysis"] .test-analysis-sheet {
    gap: 2.2mm;
    padding: 3.5mm;
    border: 1.2pt solid #0d2f5f;
    border-radius: 0;
    box-shadow: none;
  }
  body[data-print-mode="test-analysis"] .test-analysis-header { gap: 5mm; padding-bottom: 2mm; border-bottom-width: 2pt; }
  body[data-print-mode="test-analysis"] .test-analysis-header h2 { font-size: 15pt; }
  body[data-print-mode="test-analysis"] .test-analysis-header h3 { font-size: 11pt; }
  body[data-print-mode="test-analysis"] .test-analysis-header p { margin-top: 1mm; font-size: 7pt; }
  body[data-print-mode="test-analysis"] .test-analysis-logos img { width: 16mm; height: 16mm; }
  body[data-print-mode="test-analysis"] .test-analysis-meta { gap: 1.5mm; }
  body[data-print-mode="test-analysis"] .test-analysis-meta span { padding: 1.2mm; border-radius: 0; font-size: 6.5pt; }
  body[data-print-mode="test-analysis"] .test-analysis-scroll { overflow: visible; border: 0; border-radius: 0; }
  body[data-print-mode="test-analysis"] .test-analysis-table { min-width: 0; width: 100%; font-size: 5.2pt; }
  body[data-print-mode="test-analysis"] .test-analysis-table th,
  body[data-print-mode="test-analysis"] .test-analysis-table td { min-width: 0; padding: .7mm .45mm; border-width: .55pt; }
  body[data-print-mode="test-analysis"] .test-analysis-table thead th:nth-child(2),
  body[data-print-mode="test-analysis"] .test-analysis-table tbody th { width: 37mm; min-width: 37mm; }
  body[data-print-mode="test-analysis"] .test-analysis-footer { grid-template-columns: 38mm 1fr; gap: 4mm; font-size: 6.5pt; }
  body[data-print-mode="test-analysis"] .test-analysis-footer p { margin: 0 0 1.2mm; line-height: 1.28; }
  body[data-print-mode="test-analysis"] .test-analysis-key { font-size: 5.6pt; }
  body[data-print-mode="test-analysis"] .test-analysis-key th,
  body[data-print-mode="test-analysis"] .test-analysis-key td { padding: .45mm; }
  body[data-print-mode="test-analysis"] .test-analysis-brand-footer { padding-top: 1.5mm; font-size: 6.5pt; }
}