:root {
  --navy-950: #171717;
  --navy-900: #1f1f1f;
  --navy-800: #2b2b2b;
  --navy-700: #3a3a3a;
  --blue-100: #E4F2F5;
  --blue-50: #F5F8FA;
  --teal-700: #516A91;
  --teal-600: #8FD6D3;
  --teal-100: #F5F8FA;
  --gold-500: #8FD6D3;
  --red-600: #dc2626;
  --red-100: #fee2e2;
  --green-700: #15803d;
  --green-100: #dcfce7;
  --amber-700: #516A91;
  --amber-100: #F5F8FA;
  --ink: #242424;
  --muted: #636C77;
  --line: #D9E4E8;
  --surface: #ffffff;
  --page: #F5F8FA;
  --shadow-sm: 0 2px 8px rgba(23, 23, 23, 0.08);
  --shadow-md: 0 18px 50px rgba(23, 23, 23, 0.18);
  --radius: 18px;
  --sidebar: 236px;
  color-scheme: light;
  --font-sans: "Inter", "Segoe UI Variable", "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-family: var(--font-sans);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; }
body { margin: 0; color: var(--ink); background: var(--page); }
body.app-loading { overflow: hidden; }
/* Document work runs on the local export service. Keep its progress feedback
   visible without covering the active worksheet or intercepting the next
   navigation/scroll frame. */
body.app-loading.export-operation { overflow: auto; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid rgba(143,214,211, .38);
  outline-offset: 2px;
}

.app-loader { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; overflow: hidden; color: #171717; background: rgba(245,243,237,.08); -webkit-backdrop-filter: blur(11px) saturate(.78); backdrop-filter: blur(11px) saturate(.78); opacity: 1; visibility: visible; transition: opacity .16s ease, visibility .16s ease; }
.app-loader.is-complete { opacity: 0; visibility: hidden; pointer-events: none; }
.app-loader-glow { position: absolute; width: min(72vw, 620px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(143,214,211,.16), rgba(143,214,211,.045) 42%, transparent 70%); filter: blur(10px); animation: loader-glow 2.1s ease-in-out infinite; }
.app-loader-content { position: relative; display: grid; justify-items: center; width: min(390px, calc(100% - 42px)); padding: clamp(26px, 5vw, 38px) clamp(24px, 5vw, 42px); border: 0; border-radius: 0; background: transparent; box-shadow: none; text-align: center; }
.app-loader-logo-wrap { position: relative; display: grid; width: clamp(126px, 18vw, 176px); aspect-ratio: 1; margin-bottom: 24px; place-items: center; }
.app-loader-logo-wrap img { position: relative; z-index: 2; width: 78%; height: 78%; object-fit: contain; border-radius: 50%; filter: drop-shadow(0 12px 24px rgba(0,0,0,.46)); animation: loader-logo-pulse 1.8s ease-in-out infinite; }
.app-loader-orbit { position: absolute; z-index: 1; inset: 0; border: 2px solid rgba(143,214,211,.2); border-top-color: #8FD6D3; border-right-color: #516A91; border-radius: 50%; box-shadow: 0 0 24px rgba(143,214,211,.18), inset 0 0 18px rgba(143,214,211,.08); animation: loader-orbit 1.55s linear infinite; }
.app-loader-orbit::after { content: ""; position: absolute; top: 6%; right: 9%; width: 8px; height: 8px; border-radius: 50%; background: #8FD6D3; box-shadow: 0 0 13px #8FD6D3; }
.app-loader-orbit-inner { inset: 10px; border-width: 1px; border-top-color: transparent; border-right-color: rgba(228,242,245,.62); border-bottom-color: rgba(81,106,145,.72); animation-direction: reverse; animation-duration: 2.25s; }
.app-loader-orbit-inner::after { top: auto; right: auto; bottom: 2%; left: 25%; width: 5px; height: 5px; }
.app-loader-brand { display: grid; gap: 3px; }
.app-loader-brand strong { color: #171717; font-size: clamp(27px, 5vw, 38px); line-height: 1; letter-spacing: -.035em; text-shadow: 0 2px 14px rgba(255,255,255,.9); }
.app-loader-brand span { color: #8FD6D3; font-size: 11px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; }
.app-loader p { margin: 19px 0 13px; color: #11192A; font-size: 11px; font-weight: 650; letter-spacing: .02em; text-shadow: 0 1px 10px rgba(255,255,255,.92); }
.app-loader-progress { width: min(220px, 70vw); height: 3px; overflow: hidden; border-radius: 999px; background: rgba(21,31,59,.18); box-shadow: 0 0 0 1px rgba(255,255,255,.44); }
.app-loader-progress span { display: block; width: 46%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, transparent, #8FD6D3 45%, #E4F2F5 70%, transparent); animation: loader-progress 1.25s ease-in-out infinite; }
.app-loader.fast-refresh .app-loader-glow { animation-duration: .85s; }
.app-loader.fast-refresh .app-loader-logo-wrap img { animation-duration: .72s; }
.app-loader.fast-refresh .app-loader-orbit { animation-duration: .68s; }
.app-loader.fast-refresh .app-loader-orbit-inner { animation-duration: .92s; }
.app-loader.fast-refresh .app-loader-progress span { animation-duration: .58s; }
@keyframes loader-orbit { to { transform: rotate(360deg); } }
@keyframes loader-logo-pulse { 0%,100% { transform: scale(.965); filter: drop-shadow(0 12px 24px rgba(0,0,0,.46)) brightness(.95); } 50% { transform: scale(1.025); filter: drop-shadow(0 14px 30px rgba(143,214,211,.22)) brightness(1.08); } }
@keyframes loader-glow { 0%,100% { transform: scale(.92); opacity: .72; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes loader-progress { 0% { transform: translateX(-120%); } 100% { transform: translateX(260%); } }
@media (prefers-reduced-motion: reduce) {
  .app-loader-glow, .app-loader-logo-wrap img, .app-loader-orbit, .app-loader-progress span { animation: none; }
  .app-loader-progress span { width: 100%; background: #8FD6D3; }
}

/* v226 — independent, zero-loading Grades 4–10 SF9 preview.
   The fixed A4 image is an immutable export of the official Excel template.
   AcadMates paints only live values in the SVG coordinate layer. */
.route-reports .sf9-authoritative-excel-preview.sf9-independent-local-preview {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 1684 / 1191 !important;
  overflow: hidden !important;
  background: #fff !important;
  border: 1px solid #D9E4E8 !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.13) !important;
}
.route-reports .sf9-independent-local-preview .sf9-exact-instant-template {
  z-index: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.route-reports .sf9-independent-local-preview .sf9-exact-live-delta-plane {
  z-index: 1 !important;
}

.launch-required { width: min(680px, calc(100% - 36px)); margin: 8vh auto; padding: clamp(28px, 6vw, 58px); border: 1px solid var(--line); border-radius: 30px; background: var(--surface); box-shadow: var(--shadow-md); text-align: center; }
.launch-required > img { width: 96px; height: 96px; object-fit: contain; margin-bottom: 16px; }
.launch-required h1 { margin: 10px 0 14px; font-size: clamp(30px, 5vw, 48px); line-height: 1.05; }
.launch-required > p { color: var(--muted); font-size: 18px; line-height: 1.6; }
.launch-instruction { display: flex; align-items: center; gap: 14px; padding: 14px 18px; margin: 12px 0; border-radius: 16px; background: var(--teal-100); text-align: left; }
.launch-instruction strong { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; background: var(--gold-500); color: var(--navy-950); }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon, .icon-button svg, .nav-item svg, .quick-action svg { width: 20px; height: 20px; fill: currentColor; }

.activation-screen { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); background: var(--surface); }
.activation-visual { position: relative; overflow: hidden; padding: 48px clamp(32px, 6vw, 92px); color: white; background:
  radial-gradient(circle at 82% 18%, rgba(228,242,245,.24) 0 10%, transparent 28%),
  radial-gradient(circle at 15% 84%, rgba(143,214,211,.18) 0 12%, transparent 32%),
  linear-gradient(140deg, var(--navy-950), var(--navy-800));
  display: flex; flex-direction: column; justify-content: space-between;
}
.activation-visual::after { content: ""; position: absolute; width: 460px; height: 460px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; right: -170px; bottom: -170px; box-shadow: 0 0 0 70px rgba(255,255,255,.025), 0 0 0 140px rgba(255,255,255,.018); }
.activation-copy { position: relative; z-index: 1; max-width: 680px; margin: auto 0; padding: 70px 0; }
.activation-copy h1 { font-size: clamp(42px, 5vw, 68px); line-height: 1.03; letter-spacing: -.045em; margin: 16px 0 24px; }
.activation-copy p { max-width: 590px; font-size: 19px; line-height: 1.7; color: #d7e8f0; }
.feature-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.feature-pills span { border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08); padding: 9px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.activation-card { align-self: center; width: min(430px, calc(100% - 48px)); margin: 48px auto; padding: 44px; border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow-md); }
.activation-card h2 { margin: 8px 0 10px; font-size: 30px; letter-spacing: -.03em; }
.activation-card > p { color: var(--muted); line-height: 1.6; margin-bottom: 28px; }
.activation-card label, .form-grid label, .field { display: grid; gap: 7px; margin-bottom: 18px; font-size: 13px; font-weight: 700; color: #3c5360; }
input, select, textarea { width: 100%; border: 1px solid #cbd9e0; border-radius: 11px; background: white; color: var(--ink); padding: 11px 12px; min-height: 43px; }
input:hover, select:hover, textarea:hover { border-color: #9eb3be; }
input:focus, select:focus, textarea:focus { border-color: var(--teal-600); box-shadow: 0 0 0 3px rgba(143,214,211,.18); outline: 0; }
.privacy-note { text-align: center; font-size: 12px; margin: 16px 0 0 !important; }
.eyebrow { display: inline-block; color: var(--teal-700); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; }
.eyebrow.light { color: #8FD6D3; }

.brand { display: flex; align-items: center; gap: 11px; min-height: 52px; }
.brand-logo { width: 42px; height: 42px; flex: 0 0 auto; object-fit: contain; }
.brand strong, .brand small { display: block; }
.brand strong { letter-spacing: -.02em; }
.brand small { margin-top: 1px; font-size: 10px; letter-spacing: .13em; text-transform: uppercase; opacity: .62; }
.brand-large .brand-logo { width: 54px; height: 54px; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); }
.sidebar { position: fixed; z-index: 30; inset: 0 auto 0 0; width: var(--sidebar); color: white; background: var(--navy-950); padding: 14px 9px; display: flex; flex-direction: column; box-shadow: 8px 0 26px rgba(8,41,64,.08); }
.sidebar .brand { padding: 0 10px 22px; border-bottom: 1px solid rgba(255,255,255,.09); }
.side-nav { display: grid; gap: 4px; margin-top: 20px; }
.nav-item { appearance: none; border: 0; width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 9px; border-radius: 11px; color: #b9cbd4; background: transparent; text-align: left; font-size: 13px; font-weight: 650; }
.nav-item:hover { color: white; background: rgba(255,255,255,.06); }
.nav-item.active { color: white; background: linear-gradient(90deg, rgba(143,214,211,.26), rgba(143,214,211,.08)); box-shadow: inset 3px 0 var(--gold-500); }
.nav-group { border-radius: 12px; }
.nav-group[open] { background: rgba(255,255,255,.025); }
.nav-group-summary { list-style: none; width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 11px; color: #b9cbd4; cursor: pointer; font-size: 13px; font-weight: 650; user-select: none; }
.nav-group-summary::-webkit-details-marker { display: none; }
.nav-group-summary:hover, .nav-group-summary.active { color: white; background: rgba(255,255,255,.06); }
.nav-group-summary svg { width: 18px; height: 18px; flex: 0 0 auto; }
.nav-group-summary > span:nth-child(2) { min-width: 0; flex: 1; }
.nav-group-arrow { margin-left: auto; color: #91aab6; font-size: 16px; line-height: 1; transition: transform .18s ease; }
.nav-group[open] .nav-group-arrow { transform: rotate(180deg); }
.nav-group-items { display: grid; gap: 3px; padding: 3px 0 7px 11px; }
.nav-subitem { position: relative; min-height: 38px; padding: 9px 10px; font-size: 11px; }
.nav-subitem::before { content: ""; position: absolute; left: -5px; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.1); }
.nav-subitem svg { width: 16px; height: 16px; }
.nav-subitem .nav-badge { margin-left: auto; font-size: 7px; }
.license-card { margin-top: auto; display: grid; grid-template-columns: auto 1fr; gap: 9px; align-items: center; padding: 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(255,255,255,.05); }
.license-card strong, .license-card small { display: block; }
.license-card strong { font-size: 12px; }
.license-card small { margin-top: 3px; color: #9eb5c1; font-size: 10px; }
.license-card .text-button { grid-column: 2; padding: 0; color: #8FD6D3; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #3ddc97; box-shadow: 0 0 0 4px rgba(61,220,151,.12); }
.user-card { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; margin-top: 12px; padding: 12px 8px 2px; }
.user-card strong, .user-card small { display: block; }
.user-card strong { font-size: 12px; }
.user-card small { color: #8da6b3; font-size: 10px; margin-top: 2px; }
.avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #d7f5f0; color: var(--navy-950); font-size: 11px; font-weight: 800; }

.main-shell { grid-column: 2; min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 20; min-height: 72px; display: flex; align-items: center; justify-content: flex-start; gap: 14px; padding: 10px clamp(18px, 3vw, 38px); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.95); backdrop-filter: blur(15px); }
.school-context { display: flex; align-items: center; gap: 10px; min-width: 0; text-align: left; }
.school-context-copy, .school-context strong, .school-context-copy > span { display: block; }
.school-context-logo { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; color: #171717; font-size: 14px; font-weight: 900; }
.school-context-logo img { width: 100%; height: 100%; object-fit: contain; }
.school-context-logo > span { width: 100%; height: 100%; display: grid; place-items: center; border: 1px solid #516A91; border-radius: 10px; background: var(--gold-500); }
.school-context strong { font-size: 14px; }
.school-context span { margin-top: 2px; color: var(--muted); font-size: 11px; }
.top-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.connection-badge { display: inline-flex; align-items: center; gap: 7px; color: var(--green-700); background: var(--green-100); padding: 7px 10px; border-radius: 999px; font-size: 11px; font-weight: 750; }
.connection-badge span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.connection-badge.online { color: var(--teal-700); background: var(--teal-100); }
.menu-button { display: none; }
.view { max-width: 1560px; margin: 0 auto; padding: 28px clamp(18px, 3vw, 38px) 70px; }

.page-heading { display: flex; justify-content: space-between; gap: 20px; align-items: flex-end; margin-bottom: 24px; }
.page-heading h1 { margin: 5px 0 0; font-size: clamp(25px, 3vw, 34px); letter-spacing: -.035em; }
.page-heading p { max-width: 650px; margin: 7px 0 0; color: var(--muted); line-height: 1.55; font-size: 13px; }
.heading-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.button { appearance: none; border: 1px solid transparent; display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 40px; border-radius: 10px; padding: 9px 14px; font-size: 12px; font-weight: 800; }
.button svg { width: 17px; height: 17px; fill: currentColor; }
.button.primary { color: #171717; background: var(--gold-500); box-shadow: 0 5px 14px rgba(81,106,145,.20); }
.button.primary:hover { background: #516A91; }
.button.secondary { color: var(--navy-900); background: white; border-color: #cbd9e0; }
.button.secondary:hover { border-color: var(--gold-500); background: var(--blue-50); }
.button.danger { color: var(--red-600); background: var(--red-100); }
.button.small { min-height: 32px; padding: 6px 10px; font-size: 11px; }
.button.wide { width: 100%; }
.text-button { appearance: none; border: 0; background: transparent; color: var(--teal-700); font-size: 11px; font-weight: 800; }
.icon-button { appearance: none; border: 0; background: transparent; color: var(--muted); display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; }
.icon-button:hover { background: var(--blue-100); color: var(--navy-900); }

.page-heading > div:first-child { min-width: 0; }
.heading-leading { display: flex; align-items: center; margin-bottom: 12px; }
.school-forms-back.icon-button { width: 44px; height: 44px; border: 1px solid #cbd9e0; border-radius: 12px; background: white; color: var(--navy-900); box-shadow: var(--shadow-sm); }
.school-forms-back.icon-button:hover { border-color: var(--gold-500); background: var(--blue-50); color: var(--navy-950); }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-bottom: 18px; }
.metric-card, .panel, .class-card, .roster-card, .report-card, .settings-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.metric-card { position: relative; overflow: hidden; padding: 20px; }
.metric-card::after { content: ""; position: absolute; width: 85px; height: 85px; border-radius: 50%; background: var(--blue-100); right: -28px; top: -30px; }
.metric-card .metric-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: var(--navy-950); background: var(--gold-500); margin-bottom: 18px; }
.metric-card .metric-icon svg { width: 18px; height: 18px; fill: currentColor; }
.metric-card strong { display: block; font-size: 28px; letter-spacing: -.04em; }
.metric-card p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.metric-card .trend { display: inline-block; color: var(--green-700); margin-top: 9px; font-size: 10px; font-weight: 800; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(280px,.8fr); gap: 18px; }
.panel { padding: 21px; min-width: 0; }
.panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.panel-header h2 { margin: 0; font-size: 16px; }
.panel-header p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.progress-list { display: grid; gap: 17px; }
.progress-row { display: grid; grid-template-columns: 145px minmax(90px, 1fr) 42px; align-items: center; gap: 12px; }
.progress-row strong { font-size: 11px; }
.progress-track { height: 8px; overflow: hidden; border-radius: 999px; background: #edf2f4; }
.progress-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--teal-600), #63c9bd); }
.progress-row span { text-align: right; color: var(--muted); font-size: 10px; font-weight: 700; }
.quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.quick-action { border: 1px solid var(--line); border-radius: 13px; background: var(--blue-50); min-height: 100px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 14px; color: var(--navy-900); font-weight: 750; text-align: left; font-size: 11px; }
.quick-action:hover { border-color: #afd2dd; background: #edf8fa; transform: translateY(-1px); }
.activity-list { display: grid; gap: 12px; }
.activity-item { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.activity-dot { width: 9px; height: 9px; border: 2px solid var(--teal-600); border-radius: 50%; }
.activity-item strong { display: block; font-size: 11px; }
.activity-item small { display: block; color: var(--muted); margin-top: 2px; font-size: 10px; }
.activity-item time { color: #8ca0aa; font-size: 9px; }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.search-box { position: relative; width: min(380px, 100%); }
.search-box svg { position: absolute; width: 17px; height: 17px; fill: var(--muted); left: 12px; top: 50%; transform: translateY(-50%); }
.search-box input { padding-left: 38px; }
.filter-row { display: flex; gap: 8px; }
.filter-row select { min-width: 125px; }

.table-shell { overflow: auto; border: 1px solid var(--line); border-radius: 15px; background: white; box-shadow: var(--shadow-sm); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 11px 13px; border-bottom: 1px solid #e7eef1; text-align: left; vertical-align: middle; font-size: 11px; }
th { position: sticky; top: 0; z-index: 2; color: #526b77; background: #f3f8fa; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #fbfdfe; }
td.numeric, th.numeric { text-align: center; font-variant-numeric: tabular-nums; }
.student-name { display: flex; align-items: center; gap: 9px; min-width: 165px; }
.student-name .avatar { width: 30px; height: 30px; flex: 0 0 auto; background: var(--blue-100); color: var(--navy-800); }
.student-name strong, .student-name small { display: block; }
.student-name strong { font-size: 11px; }
.student-name small { color: var(--muted); font-size: 9px; margin-top: 2px; }
.assignment-tags { display: flex; flex-wrap: wrap; gap: 4px; min-width: 150px; }
.tag { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 4px 8px; background: var(--blue-100); color: var(--navy-800); font-size: 9px; font-weight: 800; white-space: nowrap; }
.tag.green { background: var(--green-100); color: var(--green-700); }
.tag.amber { background: var(--amber-100); color: var(--amber-700); }
.tag.red { background: var(--red-100); color: var(--red-600); }
.empty-state { padding: 50px 20px; text-align: center; color: var(--muted); }

.form-card { max-width: 940px; padding: 25px; background: white; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
#school-form.form-card { width: 100%; max-width: none; box-sizing: border-box; }
.form-section { padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.form-section:last-child { padding-bottom: 0; margin-bottom: 0; border: 0; }
.form-section h2 { font-size: 16px; margin: 0 0 6px; }
.form-section > p { color: var(--muted); margin: 0 0 18px; font-size: 11px; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 16px; }
.form-grid .span-2 { grid-column: span 2; }
.signatory-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.signatory-editor { padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.72); }
.signatory-editor h3 { margin: 0 0 14px; font-size: 14px; }
.signatory-editor h3:empty { display: none; }
.signatory-editor label { display: grid; gap: 7px; margin-bottom: 12px; color: #3c5360; font-size: 12px; font-weight: 700; }
.signatory-editor label:last-child { margin-bottom: 0; }
.signatory-editor label small { display: inline; color: var(--muted); font-weight: 500; }
.signatory-editor input { width: 100%; }
.linked-signatory-value { min-height: 40px; display: flex; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(246,246,243,.92); color: var(--text); font-size: 13px; font-weight: 700; }
.sshs-linked-signatory > small { display: block; margin-top: -2px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.sf9-primary-signatories .signatory-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.output-signatory-setup { display: grid; gap: 18px; }
.output-signatory-setup .signatory-grid { width: 100%; }
.output-signatory-group { display: grid; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.output-signatory-group:first-of-type { padding-top: 0; border-top: 0; }
.output-signatory-group .section-heading { align-items: center; margin: 0; }
.output-signatory-group .section-heading h3 { margin: 0 0 4px; }
.output-signatory-group .section-heading p { margin: 0; }
.output-signatory-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.output-signatory-card-head > div { display: flex; align-items: center; gap: 5px; }
.output-signatory-card-head .icon-button.small { width: 32px; height: 32px; min-width: 32px; }
.form-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 22px; }
.school-logo-uploader { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; margin: 2px 0 20px; padding: 16px; border: 1px dashed #8FD6D3; border-radius: 14px; background: white; }
.school-logo-preview { width: 76px; height: 76px; display: grid; place-items: center; overflow: hidden; border-radius: 14px; color: #2F817B; background: transparent; font-size: 24px; font-weight: 900; border: 1px solid var(--line); }
.school-logo-preview img { width: 100%; height: 100%; object-fit: contain; }
.school-logo-copy strong, .school-logo-copy small { display: block; }
.school-logo-copy small { margin: 5px 0 12px; color: var(--muted); font-size: 10px; }
.school-logo-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.roster-picker { margin: 18px 0 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.roster-picker legend { padding: 0 7px; color: var(--ink); font-size: 12px; font-weight: 800; }
.roster-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; max-height: 230px; overflow: auto; }
.roster-options label { display: flex; align-items: center; gap: 9px; margin: 0; padding: 8px; border-radius: 9px; background: var(--blue-50); color: var(--ink); font-size: 10px; }
.roster-options input { width: 16px; min-height: 16px; margin: 0; }
.roster-options span, .roster-options small { display: block; }
.roster-options strong { font-size: 10px; }
.roster-options small { margin-top: 2px; color: var(--muted); font-size: 8px; }

.automation-note, .roster-auto-preview { display: grid; gap: 4px; margin-top: 14px; padding: 13px 15px; border: 1px solid #D9E4E8; border-radius: 12px; background: #E4F2F5; }
.automation-note strong, .roster-auto-preview strong { color: #2F817B; font-size: 11px; }
.automation-note span, .roster-auto-preview span { color: var(--muted); font-size: 9px; line-height: 1.45; }
.roster-section { margin-bottom: 30px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin: 0 0 13px; }
.section-heading h2 { margin: 3px 0 4px; font-size: 18px; }
.section-heading p { margin: 0; color: var(--muted); font-size: 10px; }
.subject-record-heading { margin-top: 4px; }
.roster-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.roster-card { padding: 18px; border-color: #8FD6D3; background: linear-gradient(145deg,#F5F8FA,#fff); }
.roster-card h3 { margin: 13px 0 5px; font-size: 16px; }
.roster-card p { margin: 0 0 15px; color: var(--ink); font-size: 11px; font-weight: 800; }
.roster-card > small { display: block; margin-top: 10px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.roster-card-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.class-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.class-card { padding: 18px; }
.class-card-header { display: flex; justify-content: space-between; gap: 10px; }
.class-card h3 { margin: 8px 0 4px; font-size: 15px; }
.class-card p { margin: 0; color: var(--muted); font-size: 10px; }
.class-meta { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin: 17px 0; }
.class-meta div { padding: 9px; border-radius: 9px; background: var(--blue-50); text-align: center; }
.class-meta strong, .class-meta small { display: block; }
.class-meta strong { font-size: 12px; }
.class-meta small { color: var(--muted); font-size: 8px; margin-top: 2px; }
.class-card-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding-top: 13px; }
.class-card-footer span { color: var(--muted); font-size: 9px; }

.gradebook-controls { display: grid; grid-template-columns: minmax(220px,1.3fr) repeat(2,minmax(100px,.5fr)); gap: 10px; margin-bottom: 14px; }
.gradebook-controls label { font-size: 10px; font-weight: 750; color: var(--muted); }
.gradebook-controls select { margin-top: 5px; }
.gradebook-wrap { overflow: auto; max-height: calc(100vh - 275px); border: 1px solid var(--line); border-radius: 15px; background: white; box-shadow: var(--shadow-sm); }
.gradebook { min-width: 2050px; }
.gradebook th { text-align: center; top: 0; }
.gradebook .group-head { color: white; background: var(--navy-800); border-right: 1px solid rgba(255,255,255,.2); }
.gradebook .group-head.performance { background: #505050; }
.gradebook .group-head.exam { color: #171717; background: var(--gold-500); }
.gradebook .sticky-col { position: sticky; left: 0; z-index: 3; min-width: 190px; background: white; box-shadow: 3px 0 7px rgba(8,41,64,.07); }
.gradebook thead .sticky-col { z-index: 5; background: #eef5f8; }
.gradebook .gradebook-gender-row td { height: 34px; color: #2F817B; background: #F5F8FA; border-bottom-color: #E4F2F5; font-size: 10px; letter-spacing: .05em; text-align: left; }
.gradebook .gradebook-gender-row .sticky-col { z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #E4F2F5; }
.gradebook .gradebook-gender-row small { color: #636C77; font-size: 8px; letter-spacing: 0; text-transform: none; }
.gradebook input { min-height: 32px; width: 54px; padding: 5px; border-radius: 7px; text-align: center; font-size: 10px; }
.gradebook td { text-align: center; padding: 7px; }
.gradebook td.result { font-weight: 800; font-variant-numeric: tabular-nums; background: #fafcfd; }
.gradebook td.term-grade { color: var(--green-700); background: #effcf4; font-size: 13px; }
.gradebook .descriptor-head, .gradebook td.descriptor { min-width: 112px; width: 112px; white-space: nowrap; }
.gradebook .hps-row th { top: 30px; background: #E4F2F5; }
.gradebook .subweight { min-width: 74px; background: #E4F2F5; }
.gradebook th .subweight { display: block; margin: -11px -13px; padding: 11px 8px; }
.gradebook .total-result { background: #F5F8FA; }
.gradebook-legend { display: flex; gap: 16px; flex-wrap: wrap; margin: 10px 2px 0; color: var(--muted); font-size: 9px; }

.smart-tools { display: grid; grid-template-columns: minmax(118px,.42fr) repeat(4,minmax(0,1fr)); gap: 9px; align-items: end; margin-bottom: 14px; padding: 14px; }
.smart-tools label { display: grid; gap: 5px; min-width: 0; color: var(--muted); font-size: 10px; font-weight: 750; }
.smart-tools select { min-height: 44px; }
.smart-tools .button { width: 100%; min-width: 0; min-height: 44px; padding: 8px 10px; white-space: nowrap; line-height: 1; font-size: 11px; }
.smart-tools .button svg { flex: 0 0 auto; }

/* Compact Grade Sheet action bar for both Elementary profiles. */
.route-smartsis .page-heading { align-items: center; gap: 14px; margin-bottom: 18px; }
.route-smartsis .page-heading > div:first-child { flex: 1 1 auto; }
.route-smartsis .heading-actions { flex: 0 0 auto; flex-wrap: nowrap; align-items: center; gap: 7px; }
.route-smartsis .heading-actions .smart-heading-button { min-height: 36px; padding: 7px 11px; border-radius: 9px; white-space: nowrap; font-size: 11px; }
.route-smartsis .heading-actions .smart-heading-button svg { width: 16px; height: 16px; }
.route-smartsis .heading-actions .sheet-wide-toggle { flex: 0 0 36px; width: 36px; height: 36px; border: 1px solid #cbd9e0; background: #fff; box-shadow: var(--shadow-sm); }

.subject-manager { margin-bottom: 14px; padding: 16px; }
.subject-manager-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
.subject-manager-head h2 { margin: 0 0 3px; font-size: 15px; }
.subject-manager-head p { margin: 0; color: var(--muted); font-size: 10px; }
.subject-order-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.subject-order-item { display: flex; align-items: center; gap: 9px; min-height: 45px; padding: 8px 10px; border: 1px solid #D9E4E8; border-radius: 10px; background: #fff; }
.subject-order-item.locked { background: #F5F8FA; }
.subject-order-item strong { min-width: 0; flex: 1; font-size: 10px; line-height: 1.25; }
.subject-position { display: grid; place-items: center; width: 25px; height: 25px; flex: 0 0 25px; border-radius: 7px; color: #11192A; background: var(--gold-500); font-size: 10px; font-weight: 900; }
.subject-order-actions { display: flex; align-items: center; gap: 4px; }
.subject-order-actions button { min-width: 26px; height: 27px; padding: 0 7px; border: 1px solid #D9E4E8; border-radius: 7px; color: var(--ink); background: #fff; font-size: 9px; font-weight: 800; }
.subject-order-actions button:disabled { opacity: .35; }
.required-subject { padding: 3px 6px; border-radius: 999px; color: #2F817B; background: var(--teal-100); font-size: 8px; font-weight: 800; }

.summary-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.summary-tabs { display: flex; gap: 5px; padding: 4px; width: fit-content; border-radius: 11px; background: #e8f0f3; }
.summary-tabs button { border: 0; background: transparent; border-radius: 8px; padding: 8px 13px; color: var(--muted); font-size: 10px; font-weight: 800; }
.summary-tabs button.active { color: #171717; background: var(--gold-500); box-shadow: var(--shadow-sm); }
.add-subject-button, .arrange-subject-button { min-height: 38px; }
.smart-sis-table-wrap { overflow: auto; max-height: calc(100vh - 330px); overscroll-behavior: contain; scrollbar-gutter: stable both-edges; }
.smart-sis-table { table-layout: fixed; }
.smart-sis-table col.sis-learner-column { width: 280px; }
.smart-sis-table col.sis-subject-column { width: 175px; }
.smart-sis-table col.sis-average-column { width: 120px; }
.smart-sis-table col.sis-general-average-column { width: 150px; }
.smart-sis-table col.sis-rank-column { width: 80px; }
.smart-sis-table col.sis-descriptor-column { width: 140px; }
.smart-sis-table col.sis-remarks-column { width: 180px; }
.smart-sis-table th { top: 0; z-index: 4; text-align: center; }
.smart-sis-table td { height: 58px; }
.smart-sis-table .sis-sticky-col { position: sticky; left: 0; z-index: 3; width: 280px; min-width: 280px; max-width: 280px; background: #fff; box-shadow: 4px 0 9px rgba(23,23,23,.08); }
.smart-sis-table thead .sis-sticky-col { z-index: 6; background: #eef5f8; }
.smart-sis-table .sis-group-row td { height: 34px; color: #2F817B; background: #F5F8FA; border-bottom-color: #E4F2F5; font-size: 10px; letter-spacing: .05em; }
.smart-sis-table .sis-group-row .sis-sticky-col { z-index: 5; background: #E4F2F5; }
.smart-sis-table .sis-group-row small { color: #636C77; font-size: 8px; letter-spacing: 0; text-transform: none; }
.smart-sis-table .sis-group-row .sis-sticky-col small { float: right; margin-top: 1px; }
.smart-sis-table tbody tr:hover .sis-sticky-col { background: #fbfdfe; }
.smart-sis-table tbody .sis-group-row:hover td, .smart-sis-table tbody .sis-group-row:hover .sis-sticky-col { background: #E4F2F5; }
.smart-sis-table .sis-mapeh-term-head { background: #E4F2F5; color: #254F5B; letter-spacing: .08em; }
.smart-sis-table .sis-mapeh-term-head small { display:inline-block; margin-top:2px; color:inherit; font-size:8px; letter-spacing:0; text-transform:none; }
.smart-sis-table .sis-mapeh-term-cell { background: rgba(101,202,232,.10); border-left: 2px solid #9BCED9; }
.grade-value { font-weight: 800; font-variant-numeric: tabular-nums; }
.grade-value.high { color: var(--green-700); }
.grade-value.low { color: var(--red-600); }

.sf9-controls { display: grid; grid-template-columns: minmax(180px,.85fr) minmax(200px,.95fr) minmax(480px,2.2fr); gap: 8px; align-items: end; padding: 10px 12px; margin-bottom: 7px; }
.sf9-controls label, .sf9-visibility-controls { display: grid; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 800; line-height: 1.15; }
.sf9-controls select { min-height: 34px; padding: 6px 10px; border-radius: 8px; font-size: 11px; font-weight: 700; }
.sf9-visibility-controls > div { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 5px; }
.sf9-visibility-toggle { display: flex; align-items: center; justify-content: center; min-height: 34px; padding: 6px 8px; border: 1px solid #cbd5da; border-radius: 8px; color: var(--muted); background: #fff; font-size: 10px; font-weight: 850; line-height: 1; white-space: nowrap; }
.sf9-visibility-toggle.active { color: #171717; border-color: #516A91; background: #F5F8FA; }
.sf9-reprint-note { margin: 0 0 8px; color: var(--muted); font-size: 8px; }
.report-preview-scroll { overflow: hidden; padding: 12px; border: 1px solid #D9E4E8; border-radius: 13px; background: #D9E4E8; box-shadow: inset 0 2px 10px rgba(0,0,0,.08); }
.sf9-exact-paper { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 52px; width: 1500px; min-height: 940px; margin: auto; padding: 26px 30px; color: #111; background: #fff; border: 1px solid #636C77; box-shadow: 0 18px 50px rgba(0,0,0,.16); font-family: "Times New Roman",Times,serif; zoom: var(--sf9-preview-scale, 1); }
.sf9-overlay-mode .sf9-side * { visibility: hidden !important; }
.sf9-overlay-mode .sf9-grade-ink { display: inline-block; visibility: hidden !important; color: #111 !important; background: #fff !important; }
.sf9-overlay-mode.sf9-layer-t1 .sf9-grade-t1,
.sf9-overlay-mode.sf9-layer-t2 .sf9-grade-t2,
.sf9-overlay-mode.sf9-layer-t3 .sf9-grade-t3,
.sf9-overlay-mode.sf9-layer-final .sf9-grade-final { visibility: visible !important; }
.sf9-display-options{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.sf9-display-options label{display:inline-flex;align-items:center;gap:8px;font-weight:700}
.sf9-display-options input{width:20px;height:20px;accent-color:#516A91}
.sf9-overlay-mode .sf9-grade-ink:empty { visibility: hidden !important; }
.sf9-exact-paper.sf9-paper-a5-front, .sf9-exact-paper.sf9-paper-a5-back { grid-template-columns: 1fr; width: 750px; }
.sf9-paper-a5-front .sf9-back, .sf9-paper-a5-back .sf9-front { display: none; }
.sf9-side { min-width: 0; font-size: 12px; line-height: 1.16; }
.sf9-side h2 { margin: 13px 0 6px; text-align: center; font-size: 16px; line-height: 1.05; }
.sf9-form-label { margin-bottom: -5px; font-size: 12px; font-style: italic; }
.sf9-official-header { display: grid; grid-template-columns: 68px 1fr 68px; gap: 8px; align-items: center; text-align: center; line-height: 1.08; }
.sf9-official-header img { width: 64px; height: 64px; object-fit: contain; }
.sf9-center { margin: 0 0 8px; text-align: center; }
.sf9-learner-lines { display: grid; grid-template-columns: auto 1.7fr auto .35fr auto .75fr; gap: 5px 9px; align-items: end; margin: 4px 0 13px; }
.sf9-learner-lines b { min-width: 0; padding: 0 4px 2px; border-bottom: 1px solid #111; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf9-parent-message { margin: 0 0 12px; font-size: 13px; }
.sf9-parent-message p { margin: 5px 0; }
.sf9-parent-message p:not(:first-child) { text-align: center; }
.sf9-exact-paper table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sf9-exact-paper th, .sf9-exact-paper td { position: static; padding: 3px; border: 1px solid #111; color: #111; background: transparent; text-align: center; vertical-align: middle; font-family: "Times New Roman",Times,serif; font-size: 11px; line-height: 1.08; }
.sf9-exact-paper tbody tr:hover td { background: transparent; }
.sf9-grades-table th:first-child { width: 45%; }
.sf9-grades-table th:last-child { width: 18%; }
.sf9-grades-table tbody tr { height: 35px; }
.sf9-grades-table .sf9-learning-area { padding-left: 4px; text-align: left; font-size: 12px; }
.sf9-grades-table .sf9-component-row .sf9-learning-area {
  padding-left: 24px;
  font-style: italic;
}
.sf9-sshs-grades-table .sf9-term-data,
.sf9-sshs-grades-table .sf9-final-grade-data { padding-right: 3px; text-align: center; font-style: normal; }
.sf9-sshs-grades-table .sf9-component-row .sf9-term-data,
.sf9-sshs-grades-table .sf9-component-row .sf9-final-grade-data { padding-right: 8px; text-align: right; font-style: italic; }
.sf9-sshs-grades-table .sf9-remarks-data { text-align: center; font-style: normal; }
.sf9-general-row { height: 30px!important; }
.sf9-general-row th:first-child { text-align: right; font-size: 13px; }
.sf9-descriptor-title { margin-top: 14px!important; text-align: left!important; }
.sf9-descriptor-table { width: 70%!important; margin: auto; }
.sf9-descriptor-table th, .sf9-descriptor-table td { padding: 2px 4px; border: 0; font-size: 11px; }
.sf9-attendance-table th, .sf9-attendance-table td { padding: 3px 2px; font-size: 9px; }
.sf9-attendance-table tbody tr, .sf9-attendance-table tbody td { height: 34px; }
.sf9-attendance-table th:first-child, .sf9-attendance-table td:first-child { width: 110px; text-align: left; font-size: 10px; white-space: nowrap; }
.sf9-attendance-input { width: 100%; min-width: 0; min-height: 22px; height: 22px; padding: 0; border: 0; border-radius: 0; outline: 0; color: #111; background: transparent; text-align: center; font: inherit; appearance: textfield; }
.sf9-attendance-input::-webkit-inner-spin-button { appearance: none; }

/* v1.0.3: grade-entry cells use direct typing. Remove number spinners while
   keeping numeric validation, selection, and keyboard navigation intact. */
input[data-score-student],
input[data-smartsis-grade-input],
input[data-sshs-manual-grade] {
  -moz-appearance: textfield;
  appearance: textfield;
  user-select: text;
  cursor: text;
}
input[data-score-student]::-webkit-inner-spin-button,
input[data-score-student]::-webkit-outer-spin-button,
input[data-smartsis-grade-input]::-webkit-inner-spin-button,
input[data-smartsis-grade-input]::-webkit-outer-spin-button,
input[data-sshs-manual-grade]::-webkit-inner-spin-button,
input[data-sshs-manual-grade]::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
}
.sf9-attendance-input:focus { background: #E4F2F5; box-shadow: inset 0 0 0 1px #516A91; }
.sf9-comments { border: 1px solid #111; }
.sf9-comments div { height: 66px; padding: 5px; border-bottom: 1px solid #111; font-size: 11px; }
.sf9-comments div:last-child { border-bottom: 0; }
.sf9-parent-signatures { display: grid; gap: 17px; margin: 21px 88px; }
.sf9-parent-signatures div { display: grid; grid-template-columns: 70px 1fr; gap: 12px; align-items: end; }
.sf9-parent-signatures span { border-bottom: 1px solid #111; }
.sf9-back > p { margin: 4px 0 10px; }
.sf9-transfer { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 7px 8px; align-items: end; }
.sf9-transfer i, .sf9-cancellation i, .sf9-cancel-signature i { min-height: 14px; border-bottom: 1px solid #111; }
.sf9-official-signatures { display: grid; grid-template-columns: repeat(2,1fr); gap: 100px; margin: 44px 28px 24px; text-align: center; }
.sf9-official-signatures div { display: grid; }
.sf9-official-signatures b { padding-bottom: 2px; border-bottom: 1px solid #111; }
.sf9-official-signatures span { padding-top: 3px; }
.sf9-cancellation { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 8px; margin: 30px 50px; align-items: end; }
.sf9-cancel-signature { display: grid; width: 220px; margin: 42px auto 0; text-align: center; }
.sf9-empty { display: grid; min-height: 500px; place-items: center; color: #555; font-family: Arial,sans-serif; }
.original-format-note { display: flex; align-items: center; gap: 8px; margin: -4px 0 14px; padding: 10px 12px; border-left: 4px solid var(--gold-500); border-radius: 8px; color: #636C77; background: #F5F8FA; font-size: 10px; }
.import-summary { margin: 0 0 14px; padding: 12px 14px; border: 1px solid #D9E4E8; border-radius: 11px; color: #11192A; background: #E4F2F5; font-size: 11px; }
.button.gold-outline { color: #516A91; background: #FFFFFF; border-color: #516A91; }
.button.gold-outline:hover { color: #171717; background: #F5F8FA; }

.settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-rows: 1fr; align-items: stretch; gap: 16px; }
.settings-card { display: flex; flex-direction: column; min-height: 310px; height: 100%; padding: 24px; overflow: hidden; }
.settings-card-head { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 13px; }
.settings-card-icon { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #E4F2F5; border-radius: 13px; color: #2F817B; background: #F5F8FA; }
.settings-card-icon svg { width: 20px; height: 20px; fill: currentColor; }
.settings-card h2 { margin: 5px 0 0; font-size: 16px; line-height: 1.2; }
.settings-card-copy { margin: 15px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.settings-card-footer { display: flex; align-items: center; gap: 18px; min-height: 42px; margin-top: auto; padding-top: 18px; border-top: 1px solid #F5F8FA; }
.settings-card-footer .button { min-width: 190px; justify-content: center; }
.settings-card-note { color: var(--muted); font-size: 10px; line-height: 1.5; }
.license-details { display: grid; gap: 9px; margin: 17px 0 18px; }
.license-details div { display: flex; justify-content: space-between; gap: 15px; color: var(--muted); font-size: 10px; }
.license-details strong { max-width: 62%; color: var(--ink); text-align: right; overflow-wrap: anywhere; }
.settings-data-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 17px 0 14px; }
.settings-data-summary div { padding: 11px 8px; border: 1px solid #E4F2F5; border-radius: 11px; background: #F5F8FA; text-align: center; }
.settings-data-summary strong, .settings-data-summary span { display: block; }
.settings-data-summary strong { color: #2F817B; font-size: 18px; }
.settings-data-summary span { margin-top: 2px; color: var(--muted); font-size: 9px; }
.settings-meta { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; color: var(--muted); font-size: 10px; }
.settings-meta strong { color: var(--ink); text-align: right; }
.settings-callout { display: grid; gap: 4px; margin: 17px 0 13px; padding: 12px 13px; border-left: 4px solid var(--gold-500); border-radius: 9px; color: #636C77; background: #E4F2F5; }
.settings-callout strong { color: #2F817B; font-size: 10px; }
.settings-callout span { font-size: 9px; line-height: 1.5; }
.settings-field { display: grid; gap: 7px; margin: 17px 0 13px; color: #334654; font-size: 10px; font-weight: 750; }
.settings-field select { width: 100%; min-height: 43px; padding: 0 12px; border: 1px solid #cbd9e0; border-radius: 11px; color: var(--ink); background: white; font-weight: 700; }
.backup-health { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 10px; padding: 12px; border: 1px solid #D9E4E8; border-radius: 11px; background: #F5F8FA; }
.backup-health-dot { width: 9px; height: 9px; margin-top: 4px; border-radius: 50%; background: #636C77; box-shadow: 0 0 0 4px rgba(143,139,128,.12); }
.backup-health strong, .backup-health span { display: block; }
.backup-health strong { color: #11192A; font-size: 10px; }
.backup-health span { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.backup-health.green { border-color: #bfe2d0; background: #f0fbf5; }
.backup-health.green .backup-health-dot { background: #2f9c6a; box-shadow: 0 0 0 4px rgba(47,156,106,.12); }
.backup-health.gold { border-color: #D9E4E8; background: #E4F2F5; }
.backup-health.gold .backup-health-dot { background: #2F817B; box-shadow: 0 0 0 4px rgba(47,129,123,.13); }
.settings-privacy-note { display: flex; align-items: center; gap: 11px; margin-top: 16px; padding: 14px 16px; border: 1px solid #E4F2F5; border-radius: 13px; color: #636C77; background: #F5F8FA; font-size: 10px; line-height: 1.5; }
.settings-privacy-note svg { width: 20px; height: 20px; flex: 0 0 auto; fill: #516A91; }
.settings-privacy-note strong { color: #11192A; }

.modal { position: fixed; z-index: 100; inset: 0; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(5,28,43,.48); backdrop-filter: blur(3px); }
.modal-panel { position: relative; width: min(620px, calc(100% - 30px)); max-height: calc(100vh - 50px); overflow: auto; margin: 25px auto; background: white; border-radius: 20px; box-shadow: var(--shadow-md); }
.modal-panel > header { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 18px 20px; border-bottom: 1px solid var(--line); background: white; }
.modal-panel h2 { margin: 0; font-size: 18px; }
#modal-content { padding: 20px; }
.toast { position: fixed; z-index: 130; left: 50%; bottom: 24px; transform: translate(-50%, 25px); opacity: 0; pointer-events: none; color: white; background: var(--navy-950); box-shadow: var(--shadow-md); padding: 11px 16px; border-radius: 10px; font-size: 11px; font-weight: 750; transition: .22s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.bottom-nav { display: none; }

@media (max-width: 1120px) {
  :root { --sidebar: 210px; }
  .route-smartsis .page-heading { align-items: flex-start; flex-direction: column; }
  .route-smartsis .heading-actions { flex-wrap: wrap; justify-content: flex-start; }
  .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .class-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .roster-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .smart-tools { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .smart-tools label:first-child { grid-column: span 2; }
  .subject-order-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .sf9-controls { grid-template-columns: 1fr 1fr; }
  .sf9-visibility-controls { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .activation-screen { grid-template-columns: 1fr; }
  .activation-visual { min-height: 360px; padding: 28px; }
  .activation-copy { padding: 45px 0 20px; }
  .activation-copy h1 { font-size: 40px; }
  .activation-card { margin: 28px auto 50px; }
  .app-shell { display: block; }
  .main-shell { padding-bottom: 68px; }
  .sidebar { transform: translateX(-105%); transition: transform .25s ease; width: min(252px, 86vw); }
  .sidebar.open { transform: translateX(0); }
  .sidebar.open::after { content: ""; position: fixed; inset: 0 0 0 100%; width: 100vw; background: rgba(5,28,43,.35); }
  .menu-button { display: grid; }
  .topbar { padding-inline: 14px; }
  .connection-badge { display: none; }
  .bottom-nav { position: fixed; z-index: 25; left: 0; right: 0; bottom: 0; min-height: 64px; display: grid; grid-template-columns: repeat(5,1fr); padding: 5px 6px calc(5px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(255,255,255,.96); backdrop-filter: blur(14px); }
  .bottom-nav .nav-item { justify-content: center; flex-direction: column; gap: 3px; padding: 5px; font-size: 8px; color: var(--muted); }
  .bottom-nav .nav-item.active { color: #171717; background: var(--gold-500); box-shadow: none; }
  .bottom-nav .nav-item svg { width: 19px; height: 19px; }
  .view { padding: 22px 15px 80px; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .heading-actions { justify-content: flex-start; }
  .form-grid, .settings-grid, .signatory-grid { grid-template-columns: 1fr; }
  .settings-grid { grid-auto-rows: auto; }
  .settings-card { min-height: 0; }
  .form-grid .span-2 { grid-column: auto; }
  .sf9-controls { grid-template-columns: 1fr 1fr; }
  .sf9-visibility-controls { grid-column: 1 / -1; }
  .smart-tools .button { width: 100%; }
  .subject-manager-head { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 560px) {
  .activation-visual { min-height: 330px; }
  .activation-copy h1 { font-size: 34px; }
  .activation-copy p { font-size: 15px; }
  .activation-card { width: calc(100% - 28px); padding: 26px 20px; }
  .school-context strong { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .school-context-logo { width: 36px; height: 36px; }
  .school-logo-uploader { grid-template-columns: 1fr; }
  .metric-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .metric-card { padding: 15px; }
  .metric-card strong { font-size: 23px; }
  .metric-card .metric-icon { margin-bottom: 12px; }
  .class-grid { grid-template-columns: 1fr; }
  .roster-grid { grid-template-columns: 1fr; }
  .toolbar { align-items: stretch; flex-direction: column; }
  .filter-row { display: grid; grid-template-columns: 1fr 1fr; }
  .gradebook-controls { grid-template-columns: 1fr 1fr; }
  .gradebook-controls label:first-child { grid-column: span 2; }
  .progress-row { grid-template-columns: 110px 1fr 35px; }
  .report-preview-scroll { overflow: hidden; }
  .sf9-controls { grid-template-columns: 1fr; }
  .sf9-visibility-controls { grid-column: auto; }
  .sf9-visibility-controls > div { grid-template-columns: repeat(5,minmax(86px,1fr)); overflow-x: auto; padding-bottom: 4px; }
  .roster-options, .smart-tools, .subject-order-list { grid-template-columns: 1fr; }
  .smart-tools label:first-child { grid-column: auto; }
  .summary-toolbar, .summary-tabs { width: 100%; }
  .summary-tabs button { flex: 1; }
  .add-subject-button, .arrange-subject-button { width: 100%; }
  .smart-sis-table-wrap { max-height: calc(100vh - 300px); }
}

.compliance-summary { display:grid; grid-template-columns:repeat(var(--compliance-columns,3),minmax(0,1fr)); gap:10px; margin-top:14px; }
.compliance-summary + .form-help { margin:14px 0 0; }
.compliance-summary>div,.compliance-status-grid>div { display:grid; align-content:center; gap:2px; min-height:68px; padding:10px 14px; border:1px solid var(--line); border-radius:12px; background:rgba(143,214,211,.08); }
.compliance-summary strong { font-size:1rem; line-height:1.15; white-space:nowrap; }
.compliance-summary span { color:var(--muted); font-size:.78rem; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.assessment-choice span,.remedial-grid label>span { color:var(--muted); font-size:10px; }
.assessment-choice { display:flex; align-items:center; gap:18px; margin-bottom:14px; padding:14px 18px; }
.assessment-choice>div { display:grid; gap:3px; margin-right:auto; }
.assessment-choice label,.checkbox-line { display:flex!important; flex-direction:row!important; align-items:center; gap:8px; font-weight:700; }
.assessment-choice input,.checkbox-line input { width:18px!important; height:18px; margin:0; }
.compliance-panel { margin:14px 0; padding:16px; font-size:10px; }
.compliance-panel .panel-header { margin-bottom:12px; }
.compliance-panel .panel-header h2 { font-size:14px; line-height:1.25; }
.compliance-panel .panel-header p { margin-top:3px; font-size:10px; line-height:1.4; }
.compliance-panel .tag { padding:3px 7px; font-size:8px; }
.compliance-status-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:12px 0; }
.compliance-status-grid strong { font-size:15px; line-height:1.2; }
.compliance-status-grid span { color:var(--muted); font-size:9px; line-height:1.3; }
.compliance-edit-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.compliance-panel fieldset { min-width:0; margin:0; padding:12px; border:1px solid var(--line); border-radius:12px; }
.compliance-panel legend { padding:0 6px; font-size:12px; font-weight:800; }
.compliance-panel .checkbox-line { gap:7px; margin-bottom:8px; font-size:10px; line-height:1.35; }
.compliance-panel .checkbox-line input { width:15px!important; height:15px; }
.compliance-panel fieldset>label:not(.checkbox-line) { display:grid; gap:5px; font-size:10px; }
.compliance-panel textarea { min-height:60px; padding:9px 10px; font-size:10px; resize:vertical; }
.compliance-panel .form-help { font-size:10px; line-height:1.45; }
.remedial-fieldset { margin-top:10px!important; }
.remedial-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.remedial-grid label { display:grid; gap:5px; font-size:10px; }
.compliance-warning { display:block; margin-top:4px; color:#2F817B; }
.settings-card-footer { flex-wrap:wrap; }
@media(max-width:620px){.settings-card-footer{gap:12px}.settings-card-footer .button{width:100%;min-width:0}}
@media(max-width:920px){.compliance-summary{display:flex;overflow-x:auto;gap:9px;padding-bottom:4px;scrollbar-width:thin}.compliance-summary>div{flex:0 0 190px;min-height:64px}.compliance-edit-grid,.remedial-grid{grid-template-columns:1fr}.compliance-status-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.assessment-choice{align-items:flex-start;flex-wrap:wrap}}

@media print {
  body { background: white; }
  .sidebar, .topbar, .bottom-nav, .page-heading, .sf9-controls, .sf9-reprint-note, .compliance-panel, .toast { display: none !important; }
  .app-shell, .main-shell, .view { display: block; padding: 0; margin: 0; max-width: none; }
  .report-preview-scroll { overflow: visible; }
  .sf9-exact-paper { width: 100%; min-width: 0; min-height: auto; padding: 0; gap: 4mm; border: 0; box-shadow: none; zoom: 1 !important; }
}

/* v35: keep only a single minimal gap between the two attendance-exception checks. */
.attendance-exception-fieldset .checkbox-line { margin-bottom: 0; }
.attendance-exception-fieldset .checkbox-line + .checkbox-line { margin-top: 1px; }
.attendance-exception-fieldset .checkbox-line + label:not(.checkbox-line) { margin-top: 10px; }


/* v38: School Forms and Teacher Quest */
.nav-item { position: relative; }
.nav-item .nav-badge { margin-left: auto; padding: 3px 6px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; color: #8FD6D3; background: rgba(143,214,211,.12); font-size: 7px; line-height: 1; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.teacher-quest-panel { grid-column: 1 / -1; overflow: hidden; background: linear-gradient(135deg, #fff 0%, #F5F8FA 62%, #F5F8FA 100%); }
.teacher-quest-body { display: grid; grid-template-columns: 92px minmax(0,1fr); gap: 20px; align-items: center; }
.quest-mascot { position: relative; display: grid; place-items: center; align-content: center; width: 82px; height: 82px; border: 2px solid #516A91; border-radius: 28px 28px 24px 24px; color: #242424; background: #E4F2F5; box-shadow: inset 0 -8px 0 rgba(81,106,145,.12); transform: rotate(-2deg); }
.quest-mascot::before,.quest-mascot::after { content:""; position:absolute; top:28px; width:7px; height:9px; border-radius:50%; background:#242424; }
.quest-mascot::before { left:22px; }.quest-mascot::after { right:22px; }
.quest-mascot span { position: absolute; top: 8px; right: 10px; color: #fff; font-size: 17px; }
.quest-mascot b { margin-top: 25px; font-size: 12px; }
.quest-main { min-width: 0; }
.quest-message { display: grid; gap: 4px; margin-bottom: 12px; }
.quest-message strong { font-size: 14px; }.quest-message span { color:var(--muted); font-size:11px; }
.quest-progress { height: 10px; overflow: hidden; margin-bottom: 14px; border-radius:999px; background:#F5F8FA; }
.quest-progress span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#516A91,#8FD6D3); transition:width .35s ease; }
.quest-badges { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:13px; }
.quest-badges span { display:grid; place-items:center; width:34px; height:34px; border:1px dashed #D9E4E8; border-radius:12px; filter:grayscale(1); opacity:.38; background:#fff; }
.quest-badges span.unlocked { border-style:solid; border-color:#8FD6D3; filter:none; opacity:1; background:#E4F2F5; box-shadow:0 3px 10px rgba(81,106,145,.12); }

.sf2-toolbar { display:flex; align-items:end; gap:18px; margin-bottom:16px; padding:14px 16px; }
.sf2-toolbar label { display:grid; gap:6px; min-width:190px; color:var(--muted); font-size:11px; font-weight:800; }
.sf2-toolbar select { min-height:38px; padding:8px 10px; }
.sf2-code-legend { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; margin-right:auto; color:var(--muted); font-size:11px; }
.sf2-code-legend strong { color:var(--ink); }.sf2-code-legend b { display:inline-grid; min-width:21px; place-items:center; padding:2px 5px; border:1px solid var(--line); border-radius:6px; color:var(--ink); background:#fff; }
.sf2-school-days { display:grid; gap:2px; min-width:100px; padding:8px 12px; border:1px solid #D9E4E8; border-radius:12px; background:#E4F2F5; text-align:center; }
.sf2-school-days span { color:var(--muted); font-size:9px; }.sf2-school-days strong { font-size:20px; }
.sf2-sheet-scroll { position:relative; isolation:isolate; overflow:auto; max-height:calc(100vh - 235px); border:1px solid var(--line); border-radius:16px; background:#d9d9d9; box-shadow:var(--shadow-sm); }
.sf2-sheet { width:1845px; min-height:930px; margin:14px; padding:0 20px 24px; color:#111; background:#fff; font-family:Arial, Helvetica, sans-serif; font-size:10px; page:sf2page; }
.sf2-title { text-align:center; }.sf2-title h2 { margin:0; font-size:19px; }.sf2-title p { margin:2px 0 12px; font-size:9px; font-style:italic; }
.sf2-meta { display:grid; grid-template-columns:95px 175px 95px 175px 150px 180px; align-items:center; justify-content:center; margin:0 auto 8px; }
.sf2-meta span { padding:4px 6px; text-align:right; }.sf2-meta strong { min-height:25px; padding:5px 8px; border:1px solid #222; font-weight:400; text-align:center; }
.sf2-meta .wide { grid-column:span 1; }
.sf2-register { width:100%; border-collapse:collapse; table-layout:fixed; }
 .sf2-register th,.sf2-register td { border:1px solid #222; padding:0; text-align:center; vertical-align:middle; background-clip:padding-box; }
.sf2-register th { height:22px; font-size:8px; font-weight:700; background:#fff; }
.sf2-register thead { position:sticky; top:0; z-index:30; transform:translateZ(0); }
.sf2-register thead tr:first-child th { height:34px; }
.sf2-register thead th { position:relative; z-index:21; background:#fff; }
.sf2-register .sf2-number { position:sticky; left:0; z-index:12; width:31px; min-width:31px; max-width:31px; background:#fff; }
.sf2-register .sf2-name { position:sticky; left:31px; z-index:12; width:260px; min-width:260px; max-width:260px; padding:3px 6px; text-align:left; background:#fff; box-shadow:4px 0 8px rgba(0,0,0,.1); }
.sf2-register thead .sf2-number,.sf2-register thead .sf2-name { z-index:32; background:#f8f8f8; }
.sf2-register thead .sf2-name { text-align:center; }
.sf2-register .sf2-day-cell,.sf2-register thead tr:nth-child(2) th,.sf2-register thead tr:nth-child(3) th:not(:last-child):not(:nth-last-child(2)) { width:30px; }
.sf2-register .sf2-total { width:46px; font-weight:700; }
.sf2-register .sf2-remarks { width:290px; min-width:290px; max-width:290px; padding:2px 5px; white-space:normal; overflow-wrap:anywhere; line-height:1.25; }
.sf2-register thead .sf2-remarks { font-size:7px; }
.sf2-register thead .sf2-remarks small { display:block; margin-top:2px; font-size:6.5px; font-weight:500; line-height:1.2; white-space:normal; }
.sf2-register tbody tr { height:26px; }.sf2-register tbody tr:hover:not(.sf2-group-total):not(.sf2-combined-total) { background:#F5F8FA; }
.sf2-register th.inactive,.sf2-day-cell.inactive { background:#f2f2f2; }
.sf2-mark { width:100%; height:25px; min-height:0; padding:0; border:0; border-radius:0; color:#111; background:transparent; font-size:11px; font-weight:800; text-transform:lowercase; }
.sf2-mark:hover,.sf2-mark:focus { background:#E4F2F5; outline:2px solid #516A91; outline-offset:-2px; }
.sf2-mark.mark-x { color:#a71919; background:#fff2f2; }
.sf2-mark.mark-h,.sf2-mark.mark-l,.sf2-mark.mark-c { color:#2F817B; background:#F5F8FA; font-size:13px; }
.sf2-remarks { display:table-cell; }
 .sf2-remarks select,.sf2-remarks input { width:100%; min-width:0; min-height:0; height:21px; padding:1px 4px; border:0; border-radius:0; font-size:8px; }
.sf2-remarks select { border-bottom:1px solid #bbb; text-overflow:ellipsis; }
.sf2-remark-fields { display:grid; grid-template-columns:48px minmax(0,1fr); gap:3px; margin-top:2px; }
 .sf2-group-total,.sf2-combined-total { font-weight:700; background:#f7f7f7; }
.sf2-group-total .sf2-number,.sf2-group-total .sf2-name { background:#f7f7f7; }
.sf2-combined-total { background:#E4F2F5; }
.sf2-combined-total .sf2-number,.sf2-combined-total .sf2-name { background:#E4F2F5; }
.sf2-lower { display:grid; grid-template-columns:1.45fr .9fr 1fr; gap:14px; margin-top:8px; }
.sf2-lower h3 { margin:0 0 6px; font-size:9px; }.sf2-lower p { margin:3px 0; font-size:8px; line-height:1.35; }
.sf2-guidelines,.sf2-codes { padding:6px 4px; }.sf2-codes { border:1px solid #222; }
.sf2-month-summary { display:grid; grid-template-columns:auto 1fr auto 52px; align-items:center; margin-bottom:4px; border:1px solid #222; }
.sf2-month-summary span,.sf2-month-summary strong { padding:5px 7px; border-right:1px solid #222; font-size:8px; }.sf2-month-summary strong:last-child { border-right:0; text-align:center; }
.sf2-summary-table { width:100%; border-collapse:collapse; table-layout:fixed; }.sf2-summary-table th,.sf2-summary-table td { border:1px solid #222; padding:5px 4px; font-size:7px; text-align:center; }.sf2-summary-table th:first-child { width:72%; }
.sf2-certify { margin-top:16px!important; font-style:italic; }.sf2-signature { display:grid; gap:2px; margin:20px 0 8px; text-align:center; }.sf2-signature strong { padding-bottom:2px; border-bottom:1px solid #222; }.sf2-signature span { font-size:7px; }
.sf2-day-picker { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; max-height:420px; overflow:auto; padding:4px; }
.sf2-day-choice { display:block; margin:0!important; }.sf2-day-choice input { position:absolute; opacity:0; pointer-events:none; }.sf2-day-choice span { display:grid; place-items:center; gap:2px; padding:10px 6px; border:1px solid var(--line); border-radius:11px; background:#fff; cursor:pointer; }.sf2-day-choice input:checked + span { border-color:#516A91; background:#E4F2F5; box-shadow:inset 0 0 0 1px #516A91; }.sf2-day-choice b { font-size:16px; }.sf2-day-choice small { color:var(--muted); font-size:9px; }

.coming-soon-card { max-width:820px; margin:30px auto; padding:42px; text-align:center; background:linear-gradient(145deg,#fff,#F5F8FA); }
.coming-soon-icon { display:grid; place-items:center; width:76px; height:76px; margin:0 auto 16px; border-radius:24px; color:#171717; background:#8FD6D3; box-shadow:0 8px 22px rgba(81,106,145,.15); }
.coming-soon-icon svg { width:34px; height:34px; fill:currentColor; }.coming-soon-card h2 { max-width:650px; margin:15px auto 12px; font-size:25px; }.coming-soon-card p { max-width:680px; margin:0 auto; color:var(--muted); line-height:1.7; }
.coming-soon-status { display:grid; gap:4px; max-width:520px; margin:25px auto 0; padding:14px; border:1px solid #D9E4E8; border-radius:14px; background:#E4F2F5; }.coming-soon-status span { color:var(--muted); font-size:10px; }

@media (max-width:900px) {
  .teacher-quest-body { grid-template-columns:72px minmax(0,1fr); }.quest-mascot { width:66px; height:66px; border-radius:22px; }.quest-mascot::before,.quest-mascot::after { top:23px; }.quest-mascot::before { left:18px; }.quest-mascot::after { right:18px; }
  .sf2-toolbar { align-items:stretch; flex-direction:column; }.sf2-toolbar label { min-width:0; }.sf2-school-days { align-self:flex-start; }
}
@media (max-width:560px) {
  .nav-item .nav-badge { display:none; }.teacher-quest-body { grid-template-columns:1fr; }.quest-mascot { display:none; }.sf2-day-picker { grid-template-columns:repeat(4,minmax(0,1fr)); }.coming-soon-card { padding:28px 20px; }
}

@page sf2page { size: A3 landscape; margin: 7mm; }
@media print {
  body.printing-sf2 .sidebar, body.printing-sf2 .topbar, body.printing-sf2 .bottom-nav, body.printing-sf2 .page-heading, body.printing-sf2 .sf2-toolbar, body.printing-sf2 .toast { display:none!important; }
  body.printing-sf2 .app-shell, body.printing-sf2 .main-shell, body.printing-sf2 .view { display:block; width:auto; max-width:none; margin:0; padding:0; }
  body.printing-sf2 .sf2-sheet-scroll { max-height:none; overflow:visible; border:0; box-shadow:none; background:#fff; }
  body.printing-sf2 .sf2-sheet { width:100%; min-height:0; margin:0; padding:0; font-size:8px; }
  body.printing-sf2 .sf2-mark { color:#111!important; background:transparent!important; }
  body.printing-sf2 .sf2-remarks select { appearance:none; border:0; }
  body.printing-sf2 .sf2-remarks input::placeholder { color:transparent; }
}

/* v43: streamlined SF2 encoding workspace. Exact Excel formatting is reserved for download and print output. */
.sf2-workspace-toolbar {
  display:grid;
  grid-template-columns:minmax(170px,.55fr) minmax(240px,.85fr) minmax(420px,1.7fr);
  gap:12px;
  align-items:center;
  margin-bottom:14px;
  padding:14px 16px;
}
.sf2-workspace-toolbar label {
  display:grid;
  gap:5px;
  color:var(--muted);
  font-size:10px;
  font-weight:750;
}
.sf2-workspace-toolbar select { min-height:40px; }
.sf2-workspace-class {
  display:grid;
  gap:3px;
  min-width:0;
  padding:3px 12px;
  border-left:1px solid var(--line);
}
.sf2-workspace-class span,.sf2-workspace-class small { color:var(--muted); font-size:9px; }
.sf2-workspace-class strong { overflow:hidden; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.sf2-workspace-toolbar .sf2-code-legend { margin:0; justify-content:flex-end; }
.sf2-metric-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-bottom:14px;
}
.sf2-metric-grid .metric-card { min-height:112px; padding:16px 18px; }
.sf2-metric-grid .metric-card > span { color:var(--muted); font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.sf2-metric-grid .metric-card > strong { display:block; margin:8px 0 3px; font-size:25px; }
.sf2-metric-grid .metric-card > small { color:var(--muted); font-size:9px; }
.sf2-workspace-scroll.sf2-sheet-scroll {
  position:relative;
  isolation:isolate;
  overflow:auto;
  max-height:calc(100vh - 360px);
  margin:0;
  border:1px solid var(--line);
  border-radius:15px;
  background:#fff;
  box-shadow:var(--shadow-sm);
  overscroll-behavior:contain;
  scrollbar-gutter:stable both-edges;
}
.sf2-workspace-table { table-layout:fixed; border-collapse:separate; border-spacing:0; }
.sf2-workspace-table col.sf2-app-learner-col { width:280px; }
.sf2-workspace-table col.sf2-app-day-col { width:48px; }
.sf2-workspace-table col.sf2-app-total-col { width:86px; }
.sf2-workspace-table col.sf2-app-remarks-col { width:300px; }
.sf2-workspace-table th,.sf2-workspace-table td {
  padding:7px 8px;
  border-right:1px solid #e7eef1;
  border-bottom:1px solid #e7eef1;
  text-align:center;
  vertical-align:middle;
  background:#fff;
}
.sf2-workspace-table thead th {
  position:sticky;
  top:0;
  z-index:5;
  height:58px;
  color:#526b77;
  background:#eef5f8;
  font-size:8px;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.sf2-workspace-table thead th:last-child { text-align:left; }
.sf2-workspace-table .sf2-app-sticky {
  position:sticky;
  left:0;
  z-index:4;
  width:280px;
  min-width:280px;
  max-width:280px;
  text-align:left;
  background:#fff;
  box-shadow:4px 0 9px rgba(23,23,23,.08);
}
.sf2-workspace-table thead .sf2-app-sticky { z-index:8; background:#eef5f8; }
.sf2-app-day-head span,.sf2-app-day-head small { display:block; text-align:center; }
.sf2-app-day-head span { color:var(--ink); font-size:12px; font-weight:900; }
.sf2-app-day-head small { margin-top:3px; color:var(--muted); font-size:7px; font-weight:700; }
.sf2-app-day-head.inactive { background:#f5f6f6; }
.sf2-app-day-head.inactive span,.sf2-app-day-head.inactive small { color:#aab5ba; }
.sf2-workspace-table tbody tr:not(.sf2-app-section-row):not(.sf2-app-total-row):not(.sf2-app-combined-row):hover td { background:#fbfdfe; }
.sf2-workspace-table tbody tr:not(.sf2-app-section-row):not(.sf2-app-total-row):not(.sf2-app-combined-row):hover .sf2-app-sticky { background:#fbfdfe; }
.sf2-app-learner { height:56px; }
.sf2-app-learner .student-name { min-width:0; }
.sf2-app-learner .student-name > div { min-width:0; }
.sf2-app-learner .student-name strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sf2-workspace-table .sf2-day-cell { padding:0; }
.sf2-workspace-table .sf2-day-cell.inactive { background:#f4f6f7; }
.sf2-workspace-table .sf2-mark {
  width:100%;
  height:55px;
  min-height:0;
  padding:0;
  border:0;
  border-radius:0;
  color:#172a35;
  background:transparent;
  font-size:12px;
  font-weight:900;
  text-transform:lowercase;
}
.sf2-workspace-table .sf2-mark:hover,.sf2-workspace-table .sf2-mark:focus {
  position:relative;
  z-index:1;
  background:#E4F2F5;
  outline:2px solid #516A91;
  outline-offset:-2px;
}
.sf2-workspace-table .sf2-mark.mark-x { color:#a71919; background:#fff2f2; }
.sf2-workspace-table .sf2-mark.mark-h,.sf2-workspace-table .sf2-mark.mark-l,.sf2-workspace-table .sf2-mark.mark-c { color:#2F817B; background:#F5F8FA; font-size:14px; }
.sf2-workspace-table .sf2-total { font-size:12px; font-weight:900; font-variant-numeric:tabular-nums; background:#fafcfd; }
.sf2-workspace-table .present-total { color:var(--green-700); background:#effcf4; }
.sf2-workspace-table .sf2-app-remarks { padding:7px; text-align:left; }
.sf2-workspace-table .sf2-app-remarks select,.sf2-workspace-table .sf2-app-remarks input {
  width:100%;
  min-width:0;
  height:30px;
  min-height:30px;
  padding:5px 7px;
  border:1px solid #dbe4e8;
  border-radius:7px;
  background:#fff;
  font-size:9px;
}
.sf2-workspace-table .sf2-app-remarks select { border-bottom:1px solid #dbe4e8; text-overflow:ellipsis; }
.sf2-workspace-table .sf2-remark-fields { grid-template-columns:58px minmax(0,1fr); gap:5px; margin-top:5px; }
.sf2-app-section-row td {
  height:36px;
  color:#2F817B;
  background:#F5F8FA;
  font-size:9px;
  font-weight:800;
  letter-spacing:.03em;
}
.sf2-app-section-row .sf2-app-sticky { z-index:6; background:#E4F2F5; }
.sf2-app-section-row .sf2-app-sticky strong,.sf2-app-section-row .sf2-app-sticky small { display:block; }
.sf2-app-section-row .sf2-app-sticky small { margin-top:2px; color:#636C77; font-size:8px; letter-spacing:0; }
.sf2-app-total-row td { color:#5e6670; background:#f7f9fa; font-size:9px; font-weight:800; font-variant-numeric:tabular-nums; }
.sf2-app-total-row .sf2-app-sticky { z-index:5; background:#f2f5f6; }
.sf2-app-total-row .sf2-app-sticky strong,.sf2-app-total-row .sf2-app-sticky small,.sf2-app-combined-row .sf2-app-sticky strong,.sf2-app-combined-row .sf2-app-sticky small { display:block; }
.sf2-app-total-row .sf2-app-sticky small,.sf2-app-combined-row .sf2-app-sticky small { margin-top:2px; color:var(--muted); font-size:8px; }
.sf2-app-combined-row td { color:#2F817B; background:#F5F8FA; font-size:10px; font-weight:900; font-variant-numeric:tabular-nums; }
.sf2-app-combined-row .sf2-app-sticky { z-index:5; background:#E4F2F5; }
.sf2-app-summary-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(300px,.7fr); gap:14px; margin-top:14px; }
.sf2-summary-panel,.sf2-help-panel { padding:17px; }
.sf2-summary-panel .panel-header,.sf2-help-panel .panel-header { margin-bottom:12px; }
.sf2-summary-panel .panel-header h2,.sf2-help-panel .panel-header h2 { margin:0 0 3px; font-size:14px; }
.sf2-summary-panel .panel-header p,.sf2-help-panel .panel-header p { margin:0; color:var(--muted); font-size:9px; }
.sf2-summary-row { display:grid; grid-template-columns:minmax(210px,1fr) 70px 70px 80px; align-items:center; min-height:33px; border-bottom:1px solid #edf1f3; font-size:9px; }
.sf2-summary-row > span { padding-right:10px; }
.sf2-summary-row > b,.sf2-summary-row > strong { text-align:center; font-variant-numeric:tabular-nums; }
.sf2-summary-row > strong { color:#2F817B; }
.sf2-summary-head { min-height:28px; color:var(--muted); background:#f5f8f9; font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.sf2-summary-head > * { padding:6px; }
.sf2-help-codes { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; }
.sf2-help-codes span { display:grid; place-items:center; gap:3px; min-height:66px; padding:8px 5px; border:1px solid var(--line); border-radius:10px; background:#fbfdfe; text-align:center; }
.sf2-help-codes b { display:grid; place-items:center; min-width:28px; min-height:25px; padding:3px 6px; border-radius:7px; color:#171717; background:#8FD6D3; font-size:12px; }
.sf2-help-codes small { color:var(--muted); font-size:8px; }
.sf2-help-panel .automation-note { margin-top:12px; }
@media (max-width:1120px) {
  .sf2-workspace-toolbar { grid-template-columns:1fr 1fr; }
  .sf2-workspace-toolbar .sf2-code-legend { grid-column:1/-1; justify-content:flex-start; }
  .sf2-metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sf2-app-summary-grid { grid-template-columns:1fr; }
}
@media (max-width:620px) {
  .sf2-workspace-toolbar { grid-template-columns:1fr; }
  .sf2-workspace-class { padding:8px 0 0; border-top:1px solid var(--line); border-left:0; }
  .sf2-workspace-toolbar .sf2-code-legend { grid-column:auto; }
  .sf2-metric-grid { grid-template-columns:1fr 1fr; }
  .sf2-summary-row { grid-template-columns:minmax(150px,1fr) 50px 50px 58px; }
  .sf2-help-codes { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* v45: widescreen spreadsheet workspaces for Gradebook, Grade Sheet, SF9, and SF2. */
.view.sheet-view {
  width: 100%;
  max-width: none;
  min-width: 0;
  padding-right: clamp(14px, 1.8vw, 30px);
  padding-left: clamp(14px, 1.8vw, 30px);
}
.view.sheet-view .page-heading { margin-bottom: 16px; }
.sheet-wide-toggle { white-space: nowrap; }

/* Each form owns its scrolling. The surrounding page and navigation remain stable. */
.route-gradebook .gradebook-wrap,
.route-smartsis .smart-sis-table-wrap,
.route-sf2 .sf2-workspace-scroll,
.route-reports .report-preview-scroll {
  width: 100%;
  min-width: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
  -webkit-overflow-scrolling: touch;
}
.route-gradebook .gradebook-wrap {
  height: clamp(430px, calc(100vh - 330px), 820px);
  max-height: none;
}
.route-smartsis .smart-sis-table-wrap {
  height: clamp(430px, calc(100vh - 310px), 820px);
  max-height: none;
}
.route-sf2 .sf2-workspace-scroll.sf2-sheet-scroll {
  height: clamp(430px, calc(100vh - 355px), 820px);
  max-height: none;
}
.route-reports .report-preview-scroll {
  height: clamp(520px, calc(100vh - 255px), 920px);
  max-height: none;
  overflow: auto;
}
.route-reports .sf9-exact-paper {
  margin: 0 auto;
  flex: 0 0 auto;
}

/* Wide-screen mode uses the full application window while retaining controls. */
body.sheet-wide { overflow: hidden; }
body.sheet-wide .app-shell { grid-template-columns: minmax(0, 1fr); }
body.sheet-wide .sidebar { display: none; }
body.sheet-wide .main-shell { grid-column: 1; height: 100vh; min-height: 0; overflow: hidden; }
body.sheet-wide .topbar { min-height: 58px; padding: 7px 18px; }
body.sheet-wide .view.sheet-view {
  height: calc(100vh - 58px);
  max-width: none;
  overflow: auto;
  padding: 14px 18px 18px;
}
body.sheet-wide .view.sheet-view .page-heading {
  align-items: center;
  margin-bottom: 10px;
}
body.sheet-wide .view.sheet-view .page-heading h1 { font-size: 24px; }
body.sheet-wide .view.sheet-view .page-heading p { display: none; }
body.sheet-wide .route-gradebook .gradebook-wrap,
body.sheet-wide .route-smartsis .smart-sis-table-wrap,
body.sheet-wide .route-sf2 .sf2-workspace-scroll.sf2-sheet-scroll,
body.sheet-wide .route-reports .report-preview-scroll {
  height: calc(100vh - 240px);
  max-height: none;
}
body.sheet-wide .route-gradebook .gradebook-wrap { height: calc(100vh - 250px); }
body.sheet-wide .route-smartsis .smart-sis-table-wrap { height: calc(100vh - 220px); }
body.sheet-wide .route-reports .report-preview-scroll { height: calc(100vh - 210px); }
body.sheet-wide .route-sf2 .sf2-workspace-scroll.sf2-sheet-scroll { height: calc(100vh - 275px); }

/* Keep the key row and learner column visible while moving around large sheets. */
.route-gradebook .gradebook thead th,
.route-smartsis .smart-sis-table thead th,
.route-sf2 .sf2-workspace-table thead th { position: sticky; top: 0; }
.route-gradebook .gradebook .sticky-col,
.route-smartsis .smart-sis-table .sis-sticky-col,
.route-sf2 .sf2-workspace-table .sf2-app-sticky { position: sticky; left: 0; }

@media (max-width: 820px) {
  .view.sheet-view { padding-inline: 12px; }
  .route-gradebook .gradebook-wrap,
  .route-smartsis .smart-sis-table-wrap,
  .route-sf2 .sf2-workspace-scroll.sf2-sheet-scroll,
  .route-reports .report-preview-scroll { height: calc(100vh - 300px); }
  body.sheet-wide .bottom-nav { display: none; }
  body.sheet-wide .main-shell { padding-bottom: 0; }
  body.sheet-wide .view.sheet-view { height: calc(100vh - 58px); padding: 10px; }
  body.sheet-wide .route-gradebook .gradebook-wrap,
  body.sheet-wide .route-smartsis .smart-sis-table-wrap,
  body.sheet-wide .route-sf2 .sf2-workspace-scroll.sf2-sheet-scroll,
  body.sheet-wide .route-reports .report-preview-scroll { height: calc(100vh - 235px); }
}


/* v47: compact full-screen controls, width-responsive SF9 preview, and editable teacher profile. */
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.sheet-wide-toggle { flex:0 0 auto; width:42px; height:42px; border:1px solid #cfd8dd; background:#fff; color:var(--navy-900); box-shadow:var(--shadow-sm); }
.sheet-wide-toggle:hover { border-color:#516A91; background:#E4F2F5; color:#171717; }
.sheet-wide-toggle svg { width:21px; height:21px; }
.heading-actions .sheet-wide-toggle { margin-left:1px; }

/* SF9 fits the available width while retaining its proportional height for normal page scrolling. */
.view.route-reports { width:100%; max-width:none; min-width:0; padding-right:clamp(12px,1.6vw,26px); padding-left:clamp(12px,1.6vw,26px); }
.route-reports .report-preview-scroll { display:flex; align-items:flex-start; justify-content:center; width:100%; height:auto; max-height:none; overflow-x:hidden; overflow-y:visible; scrollbar-gutter:auto; }
.route-reports .sf9-exact-paper { flex:0 0 auto; margin:0 auto; transform-origin:top center; }
body.sheet-wide .route-reports .report-preview-scroll { height:auto; }

.user-card { appearance:none; width:100%; border:0; color:white; background:transparent; text-align:left; cursor:pointer; border-radius:11px; grid-template-columns:auto minmax(0,1fr) auto; }
.user-card:hover { background:rgba(255,255,255,.06); }
.user-card:focus-visible { outline:2px solid var(--gold-500); outline-offset:2px; }
.user-card-edit { width:15px; height:15px; fill:#8da6b3; opacity:.78; }
.user-profile-avatar { overflow:hidden; padding:0; }
.user-profile-avatar img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.user-profile-avatar span { display:grid; width:100%; height:100%; place-items:center; }
.profile-photo-editor { display:grid; grid-template-columns:112px minmax(0,1fr); gap:18px; align-items:center; margin-bottom:22px; padding:16px; border:1px solid var(--line); border-radius:14px; background:#F5F8FA; }
.profile-photo-preview { width:112px; height:112px; overflow:hidden; display:grid; place-items:center; border:1px solid #8FD6D3; border-radius:50%; color:var(--navy-900); background:#d7f5f0; font-size:30px; font-weight:900; }
.profile-photo-preview img { width:100%; height:100%; object-fit:cover; }
.profile-photo-editor strong { display:block; margin-bottom:3px; font-size:13px; }
.profile-photo-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.profile-file-button { position:relative; overflow:hidden; cursor:pointer; }
.profile-file-button input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
@media (max-width:620px) { .profile-photo-editor { grid-template-columns:1fr; text-align:center; } .profile-photo-preview { margin:auto; } .profile-photo-actions { justify-content:center; } }


/* v48: compact SF2 action row, simplified sidebar, and balanced form spacing. */
/* The teacher profile now anchors the bottom of the sidebar after removing the Complete Suite card. */
.sidebar > .user-card { margin-top: auto; padding-top: 12px; }
.top-actions #install-button { padding: 7px 10px; border-radius: 9px; }

/* Keep all SF2 page actions—including the full-screen icon—on one compact row. */
.route-sf2 .page-heading { align-items: flex-start; flex-direction: column; gap: 16px; }
.route-sf2 .heading-actions {
  width: 100%;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  overflow-x: auto;
  padding: 1px 1px 4px;
  scrollbar-width: thin;
}
.route-sf2 .heading-actions .button { flex: 0 1 auto; min-width: 0; padding-inline: 12px; white-space: nowrap; }
.route-sf2 .heading-actions .sheet-wide-toggle { flex: 0 0 42px; margin-left: 0; }

/* Give the roster notice a clear visual break before the editable assessment weights. */
#class-form .roster-auto-preview { margin: 4px 0 28px; }
#class-form .form-actions { margin-top: 28px; }

/* Maintain a consistent page rhythm between headings and primary content. */
.view > .page-heading { margin-bottom: 28px; }

@media (max-width: 620px) {
  .route-sf2 .heading-actions { justify-content: flex-start; }
  .route-sf2 .heading-actions .button { padding-inline: 10px; }
}


/* v49: align the SF2 action controls with the main report title to reduce header height. */
.route-sf2 .page-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  column-gap: 22px;
  row-gap: 0;
  align-items: center;
  margin-bottom: 22px;
}
.route-sf2 .page-heading > div:first-child { display: contents; }
.route-sf2 .page-heading .eyebrow { grid-column: 1; grid-row: 1; }
.route-sf2 .page-heading h1 {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  margin-top: 5px;
}
.route-sf2 .page-heading p {
  grid-column: 1;
  grid-row: 3;
  max-width: 760px;
}
.route-sf2 .heading-actions {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  width: auto;
  margin: 0;
  padding: 0;
  overflow: visible;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

@media (max-width: 1120px) {
  .route-sf2 .page-heading {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 14px;
  }
  .route-sf2 .page-heading h1 { font-size: clamp(24px, 3vw, 30px); }
  .route-sf2 .heading-actions { gap: 7px; }
  .route-sf2 .heading-actions .button { padding-inline: 10px; }
}

@media (max-width: 900px) {
  .route-sf2 .page-heading {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 13px;
  }
  .route-sf2 .page-heading > div:first-child { display: block; }
  .route-sf2 .heading-actions {
    width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 3px;
  }
}

/* v50 update controls and guided tour */
.top-actions{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
.top-action-button{position:relative;min-height:32px;padding:6px 9px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font-family:inherit;font-size:.72rem;line-height:1;font-weight:750;cursor:pointer;white-space:nowrap}
.top-action-button:hover{border-color:var(--gold);background:var(--gold-soft)}
.top-refresh-button{width:34px;min-width:34px;padding:6px;display:inline-grid;place-items:center;flex:0 0 34px}.top-refresh-button svg{width:17px;height:17px;fill:currentColor}.top-refresh-button.is-refreshing svg{animation:academates-refresh-spin .7s linear infinite}@keyframes academates-refresh-spin{to{transform:rotate(360deg)}}
.key-stage-button{border-color:rgba(81,106,145,.52);background:var(--gold-soft);color:#151F3B}
.key-stage-license-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 0}
.key-stage-license-card{display:grid;gap:9px;padding:15px;border:1px solid var(--line);border-radius:14px;background:#fff}
.key-stage-license-card.current{border-color:var(--gold);box-shadow:0 0 0 2px rgba(143,214,211,.16)}
.key-stage-license-card h3,.key-stage-license-card p{margin:0}.key-stage-license-card p{color:var(--muted);font-size:.86rem}
.key-stage-license-status{font-size:.72rem;font-weight:850;text-transform:uppercase;letter-spacing:.06em;color:#2F817B}
@media(max-width:680px){.key-stage-license-grid{grid-template-columns:1fr}}
.update-dot{position:absolute;right:5px;top:4px;width:11px;height:11px;border-radius:50%;background:#dc2626;box-shadow:0 0 0 3px #fff,0 0 10px rgba(220,38,38,.58)}.update-dot[hidden]{display:none!important}.top-action-button.has-update .update-dot{animation:academates-update-blink 2.8s ease-in-out infinite}@keyframes academates-update-blink{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.08);opacity:.28}}@media (prefers-reduced-motion:reduce){.top-action-button.has-update .update-dot{animation:none}}
.update-summary{display:grid;gap:14px}.update-version-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.update-version-chip{padding:7px 10px;border-radius:999px;background:var(--gold-soft);font-weight:800}.update-changelog{margin:0;padding-left:22px;display:grid;gap:7px}.update-status-card{padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface-soft)}
.tour-overlay{position:fixed;inset:0;z-index:1000;background:rgba(13,20,32,.52);pointer-events:auto}.tour-highlight{position:fixed;z-index:1001;border:3px solid var(--gold);border-radius:16px;box-shadow:0 0 0 9999px rgba(13,20,32,.35),0 10px 30px rgba(0,0,0,.22);pointer-events:none;transition:all .25s ease}.tour-card{position:fixed;z-index:1002;width:min(360px,calc(100vw - 28px));padding:18px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:0 20px 60px rgba(0,0,0,.25)}.tour-card h3{margin:0 0 8px;font-size:1.15rem}.tour-card p{margin:0;color:var(--muted);line-height:1.5}.tour-progress{margin-top:12px;font-size:.82rem;color:var(--muted)}.tour-actions{display:flex;justify-content:space-between;gap:10px;margin-top:16px}.tour-actions-right{display:flex;gap:8px}.tour-skip,.tour-prev,.tour-next{border-radius:11px;padding:9px 12px;font:inherit;font-weight:750;cursor:pointer}.tour-skip,.tour-prev{border:1px solid var(--line);background:#fff}.tour-next{border:0;background:var(--gold);color:#171717}
@media(max-width:900px){.top-actions{gap:6px}.top-action-button{padding:6px 8px;font-size:.68rem}}
@media(max-width:620px){.top-actions{overflow-x:auto;max-width:62vw}.top-action-button{flex:0 0 auto}}

/* v53 advisory records and assessment analytics */
.record-controls,.analysis-controls{display:flex;gap:18px;align-items:end;flex-wrap:wrap;margin-bottom:22px}.record-controls label,.analysis-controls label{min-width:220px;flex:1}.individual-record,.grade-slip{max-width:1100px;margin-inline:auto;padding:30px}.record-header,.grade-slip-brand{display:flex;align-items:center;gap:20px;text-align:center;justify-content:center;border-bottom:2px solid var(--line);padding-bottom:18px}.record-header img,.grade-slip-brand img{width:76px;height:76px;object-fit:contain}.record-header h2,.grade-slip-brand h2{margin:4px 0}.record-identity{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:22px 0}.record-identity div{padding:14px;border:1px solid var(--line);border-radius:14px}.record-identity span{display:block;color:var(--muted);font-size:.78rem;text-transform:uppercase;font-weight:800}.record-table{width:100%;border-collapse:collapse}.record-table th,.record-table td{border:1px solid var(--line);padding:10px;text-align:center}.record-table td:first-child,.record-table th:first-child{text-align:left}.record-total{background:var(--gold-soft)}.record-signatures{display:grid;grid-template-columns:1fr 1fr;gap:80px;margin-top:56px;text-align:center}.record-signatures span{display:block;border-bottom:1px solid;padding-bottom:5px;font-weight:800}.record-signatures small{display:block;margin-top:5px}.grade-slip-info{display:flex;gap:24px;flex-wrap:wrap;margin:20px 0}.grade-slip-status{display:flex;justify-content:space-between;padding:16px 18px;background:var(--gold-soft);border-radius:14px;margin-top:16px}.analysis-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:20px}.analysis-scroll{max-height:calc(100vh - 390px);overflow:auto}.analysis-table{border-collapse:separate;border-spacing:0;min-width:max-content;width:100%}.analysis-table th,.analysis-table td{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:7px;text-align:center;min-width:46px}.analysis-table th{background:#F5F8FA;position:sticky;top:0;z-index:4}.analysis-table .sticky-col{position:sticky;left:0;z-index:5;min-width:260px;text-align:left;background:white}.analysis-table th.sticky-col{z-index:6;background:#F5F8FA}.analysis-table small{display:block;color:var(--muted)}.item-response{width:34px;height:34px;border:1px solid var(--line);border-radius:9px;background:white;font-weight:800}.item-response.correct{background:#e8f7eb;color:#18733a;border-color:#8fcca0}.item-response.incorrect{background:#fff0ef;color:#a8322d;border-color:#e3a29d}.analysis-summary-row th,.analysis-summary-row td{background:var(--gold-soft)}
@media(max-width:900px){.record-identity,.analysis-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.individual-record,.grade-slip{padding:18px}}@media(max-width:560px){.record-identity,.analysis-metrics{grid-template-columns:1fr}.record-signatures{gap:24px}.record-header,.grade-slip-brand{align-items:flex-start;text-align:left}}
@media print{body *{visibility:hidden}.printable-record,.printable-record *{visibility:visible}.printable-record{position:absolute;inset:0;width:100%;max-height:none!important;overflow:visible!important;border:0!important;box-shadow:none!important}.sidebar,.topbar,.bottom-nav,.page-heading,.record-controls,.analysis-controls,.analysis-metrics{display:none!important}}

/* v56 — School Forms landing page */
.school-forms-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.school-form-card {
  min-height: 230px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  color: var(--navy-900);
  cursor: pointer;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.school-form-card:hover {
  transform: translateY(-2px);
  border-color: rgba(143,214,211,.72);
  box-shadow: 0 14px 30px rgba(27,39,45,.08);
}
.school-form-card:focus-visible { outline: 3px solid rgba(143,214,211,.38); outline-offset: 2px; }
.school-form-card-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 14px;
  color: #2F817B;
  background: #F5F8FA;
}
.school-form-card-icon svg { width: 24px; height: 24px; }
.school-form-card-code { color: #516A91; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.school-form-card strong { margin-top: 7px; font-size: 17px; line-height: 1.28; }
.school-form-card > span:not(.school-form-card-icon):not(.school-form-card-code):not(.school-form-card-footer) { margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.school-form-card-footer { width: 100%; display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 18px; color: #2F817B; }
.school-form-card-footer em { font-size: 11px; font-style: normal; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.school-form-card-footer svg { width: 18px; height: 18px; }
.school-form-card.coming-soon { background: rgba(255,255,255,.68); }
.school-form-card.coming-soon .school-form-card-footer em { color: #2F817B; }
@media (max-width: 1100px) { .school-forms-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 680px) { .school-forms-grid { grid-template-columns: 1fr; } .school-form-card { min-height: 205px; } }

/* v57 School Forms navigation and two-up long-bond printing */
.school-forms-back{white-space:nowrap}
.print-copy-second{display:none}

@media print{
  @page{size:8.5in 13in portrait;margin:.28in}
  body *{visibility:hidden!important}
  .two-up-print-sheet,.two-up-print-sheet *{visibility:visible!important}
  .two-up-print-sheet{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:12.44in!important;
    display:grid!important;
    grid-template-rows:1fr 1fr!important;
    gap:.14in!important;
    overflow:hidden!important;
  }
  .two-up-print-sheet .print-copy{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    min-height:0!important;
    margin:0!important;
    padding:.18in .22in!important;
    border:1px solid #555!important;
    border-radius:0!important;
    box-shadow:none!important;
    overflow:hidden!important;
    break-inside:avoid!important;
  }
  .two-up-print-sheet .print-copy-second{border-top:1px dashed #777!important}
  .two-up-print-sheet .record-header,
  .two-up-print-sheet .grade-slip-brand{gap:10px!important;padding-bottom:7px!important}
  .two-up-print-sheet .record-header img,
  .two-up-print-sheet .grade-slip-brand img{width:42px!important;height:42px!important}
  .two-up-print-sheet .record-header h2,
  .two-up-print-sheet .grade-slip-brand h2{font-size:14px!important;margin:1px 0!important}
  .two-up-print-sheet .record-header p,
  .two-up-print-sheet .grade-slip-brand p,
  .two-up-print-sheet .record-header span,
  .two-up-print-sheet .grade-slip-brand strong{font-size:8px!important;margin:0!important}
  .two-up-print-sheet .record-identity{grid-template-columns:repeat(4,1fr)!important;gap:5px!important;margin:7px 0!important}
  .two-up-print-sheet .record-identity div{padding:5px!important;border-radius:4px!important}
  .two-up-print-sheet .record-identity span{font-size:6.5px!important}
  .two-up-print-sheet .record-identity strong{font-size:8px!important}
  .two-up-print-sheet .grade-slip-info{gap:8px!important;margin:7px 0!important;font-size:8px!important}
  .two-up-print-sheet .record-table th,
  .two-up-print-sheet .record-table td{padding:2px 4px!important;font-size:7.5px!important;line-height:1.15!important}
  .two-up-print-sheet .grade-slip-status{padding:5px 8px!important;margin-top:6px!important;border-radius:4px!important;font-size:8px!important}
  .two-up-print-sheet .record-signatures{gap:50px!important;margin-top:15px!important;font-size:8px!important}
  .two-up-print-sheet .record-signatures small{font-size:7px!important;margin-top:2px!important}
  .sidebar,.topbar,.bottom-nav,.page-heading,.record-controls,.analysis-controls,.analysis-metrics{display:none!important}
}

/* v185: authorized Special Features guide and modern advanced-workflow presentation. */
.route-specialfeatures {
  background:
    radial-gradient(circle at 92% 5%, rgba(143,214,211,.12), transparent 28%),
    linear-gradient(180deg, #F5F8FA 0, #F5F8FA 100%);
}
.special-features-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 22px;
  padding: 30px 34px;
  color: #fff;
  border: 1px solid rgba(143,214,211,.35);
  border-radius: 24px;
  background:
    radial-gradient(circle at 85% 15%, rgba(228,242,245,.22), transparent 25%),
    linear-gradient(135deg, #181817 0%, #11192A 58%, #2F817B 100%);
  box-shadow: 0 22px 50px rgba(20,20,18,.18);
}
.special-features-hero:after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -70px;
  bottom: -130px;
  border: 1px solid rgba(228,242,245,.28);
  border-radius: 50%;
  box-shadow: 0 0 0 28px rgba(228,242,245,.04), 0 0 0 58px rgba(228,242,245,.03);
}
.special-features-hero > div { position: relative; z-index: 1; }
.special-features-hero > div:first-child > span {
  display: block;
  margin-bottom: 8px;
  color: #8FD6D3;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .17em;
}
.special-features-hero h2 { margin: 0 0 8px; font-size: clamp(24px, 3vw, 38px); letter-spacing: -.035em; }
.special-features-hero p { max-width: 690px; margin: 0; color: #D9E4E8; line-height: 1.65; }
.special-features-hero-count {
  display: grid;
  min-width: 145px;
  justify-items: center;
  padding: 14px 18px;
  border: 1px solid rgba(228,242,245,.32);
  border-radius: 18px;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
}
.special-features-hero-count strong { color: #8FD6D3; font-size: 48px; line-height: 1; }
.special-features-hero-count span { margin-top: 6px; color: #F5F8FA; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.special-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.special-guide-card {
  position: relative;
  display: flex;
  min-height: 100%;
  flex-direction: column;
  padding: 22px;
  border: 1px solid #D9E4E8;
  border-radius: 22px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 30px rgba(21,31,59,.075);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.special-guide-card:hover { transform: translateY(-2px); border-color: rgba(81,106,145,.45); box-shadow: 0 18px 40px rgba(21,31,59,.11); }
.special-guide-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.special-guide-number {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: #11192A;
  border-radius: 14px;
  background: linear-gradient(135deg,#8FD6D3,#516A91);
  box-shadow: 0 7px 16px rgba(81,106,145,.22);
  font-size: 13px;
  font-weight: 950;
}
.special-guide-access {
  max-width: 70%;
  padding: 7px 10px;
  color: #2F817B;
  border: 1px solid #E4F2F5;
  border-radius: 999px;
  background: #F5F8FA;
  font-size: 10px;
  font-weight: 850;
  text-align: right;
}
.special-guide-card h2 { margin: 0 0 8px; color: #11192A; font-size: 20px; letter-spacing: -.02em; }
.special-guide-card > p { margin: 0 0 16px; color: #636C77; line-height: 1.55; }
.special-guide-steps { padding: 16px 16px 12px; border: 1px solid #F5F8FA; border-radius: 16px; background: #F5F8FA; }
.special-guide-steps > strong { color: #2F817B; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.special-guide-steps ol { margin: 10px 0 0; padding-left: 20px; color: #11192A; }
.special-guide-steps li { padding: 0 0 9px 5px; line-height: 1.47; }
.special-guide-steps li::marker { color: #516A91; font-weight: 900; }
.special-guide-result { margin: 14px 0 18px; padding-left: 14px; border-left: 3px solid #8FD6D3; }
.special-guide-result span { color: #2F817B; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .09em; }
.special-guide-result p { margin: 4px 0 0; color: #636C77; font-size: 12px; line-height: 1.52; }
.special-guide-launch { align-self: flex-start; margin-top: auto; }
.special-feature-safety {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  margin-top: 22px;
  padding: 20px 24px;
  color: #F5F8FA;
  border-radius: 20px;
  background: #11192A;
  box-shadow: 0 14px 30px rgba(20,20,18,.14);
}
.special-feature-safety > div:first-child { display: grid; width: 48px; height: 48px; place-items: center; color: #8FD6D3; border-radius: 15px; background: rgba(143,214,211,.13); }
.special-feature-safety .icon { width: 25px; height: 25px; }
.special-feature-safety strong { color: #8FD6D3; }
.special-feature-safety p { margin: 4px 0 0; color: #D9E4E8; line-height: 1.55; }

.special-feature-presentation .modal-backdrop { background: rgba(12,12,11,.68); backdrop-filter: blur(9px); }
.special-feature-presentation .modal-panel {
  width: min(900px, calc(100% - 28px));
  border: 1px solid rgba(143,214,211,.24);
  border-radius: 26px;
  background: #F5F8FA;
  box-shadow: 0 30px 90px rgba(0,0,0,.36);
}
.special-feature-presentation #modal-content { padding: 0; }
.special-feature-presentation .modal-panel > header {
  padding: 14px 20px;
  color: #F5F8FA;
  border-bottom-color: rgba(255,255,255,.08);
  background: #11192A;
}
.special-feature-presentation .modal-panel > header .icon-button { color: #8FD6D3; border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.06); }
.special-feature-modal { padding-bottom: 2px; }
.special-popup-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: center;
  padding: 26px 28px;
  color: #fff;
  background:
    radial-gradient(circle at 88% 10%, rgba(228,242,245,.2), transparent 24%),
    linear-gradient(135deg,#11192A,#2F817B);
}
.special-popup-icon { display: grid; width: 56px; height: 56px; place-items: center; color: #11192A; border-radius: 18px; background: linear-gradient(135deg,#E4F2F5,#516A91); box-shadow: 0 12px 26px rgba(0,0,0,.25); }
.special-popup-icon .icon { width: 29px; height: 29px; }
.special-popup-hero span { color: #8FD6D3; font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.special-popup-hero h3 { margin: 4px 0 5px; color: #fff; font-size: clamp(22px,3vw,31px); line-height: 1.12; letter-spacing: -.035em; }
.special-popup-hero p { margin: 0; color: #D9E4E8; line-height: 1.5; }
.special-popup-metrics { display: grid; grid-template-columns: repeat(auto-fit,minmax(120px,1fr)); gap: 10px; padding: 16px 20px 0; }
.special-popup-metrics article { position: relative; overflow: hidden; padding: 15px; border: 1px solid #F5F8FA; border-radius: 16px; background: #fff; box-shadow: 0 6px 18px rgba(21,31,59,.05); }
.special-popup-metrics article:before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: #516A91; }
.special-popup-metrics article.success:before { background: #2f9b69; }
.special-popup-metrics article.warning:before { background: #516A91; }
.special-popup-metrics article.danger:before { background: #cf4d4d; }
.special-popup-metrics strong { display: block; color: #11192A; font-size: 23px; line-height: 1.05; }
.special-popup-metrics span { display: block; margin-top: 5px; color: #636C77; font-size: 10px; font-weight: 850; text-transform: uppercase; letter-spacing: .06em; }
.special-popup-body { display: grid; gap: 14px; padding: 18px 20px; }
.special-popup-note { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; margin: 0 20px 18px; padding: 14px 16px; color: #D9E4E8; border: 1px solid rgba(143,214,211,.18); border-radius: 15px; background: #11192A; }
.special-popup-note .icon { width: 21px; height: 21px; color: #8FD6D3; }
.special-popup-note p { margin: 0; line-height: 1.48; }
.special-popup-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 0 20px 20px; }
.special-popup-body .special-popup-actions { padding: 2px 0 0; }
.special-popup-alert { display: grid; gap: 4px; padding: 15px 17px; border: 1px solid #D9E4E8; border-radius: 16px; background: #F5F8FA; }
.special-popup-alert strong { color: #2F817B; }
.special-popup-alert span { color: #636C77; font-size: 12px; line-height: 1.45; }
.special-popup-alert.success { border-color: #b9ddcb; background: #f0faf5; }
.special-popup-alert.success strong { color: #17633e; }
.special-popup-alert.warning { border-color: #E4F2F5; background: #F5F8FA; }
.special-popup-alert.danger { border-color: #ecc3c3; background: #fff3f3; }
.special-popup-alert.danger strong { color: #9d2f2f; }
.special-popup-records { display: grid; gap: 9px; }
.special-popup-records article {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  gap: 13px;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid #D9E4E8;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(21,31,59,.045);
}
.special-popup-record-index { display: grid; width: 38px; height: 38px; place-items: center; color: #2F817B; border-radius: 12px; background: #F5F8FA; font-size: 11px; font-weight: 900; }
.special-popup-records article > div:nth-child(2) { min-width: 0; }
.special-popup-records strong,.special-popup-records span,.special-popup-records small { display: block; }
.special-popup-records span { margin-top: 3px; color: #636C77; font-size: 12px; }
.special-popup-records small { margin-top: 3px; overflow: hidden; color: #636C77; text-overflow: ellipsis; white-space: nowrap; }
.intervention-records article.priority-critical { border-left: 4px solid #c94343; }
.intervention-records article.priority-high { border-left: 4px solid #8FD6D3; }
.intervention-records article.priority-watch { border-left: 4px solid #516A91; }
.intervention-records article.priority-stable { border-left: 4px solid #3a9d70; }
.special-popup-empty { display: grid; justify-items: center; gap: 6px; padding: 28px 20px; color: #636C77; border: 1px dashed #D9E4E8; border-radius: 18px; background: #F5F8FA; text-align: center; }
.special-popup-empty .icon { width: 30px; height: 30px; color: #516A91; }
.special-popup-empty strong { color: #11192A; }
.special-popup-empty.success { color: #397a5c; border-color: #b9d9c9; background: #f3faf6; }
.special-popup-insights { display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: 11px; }
.special-popup-insights article { padding: 16px; border: 1px solid #F5F8FA; border-radius: 16px; background: #fff; }
.special-popup-insights span { color: #516A91; font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.special-popup-insights strong { display: block; margin-top: 5px; color: #11192A; }
.special-popup-insights p { margin: 6px 0 0; color: #636C77; font-size: 12px; line-height: 1.48; }
.special-popup-issues { display: grid; gap: 8px; }
.special-feature-modal .validation-banner { margin: 0; border-radius: 15px; box-shadow: none; }
.special-feature-modal .confirmation-panel { margin: 0; border-radius: 15px; background: #fff; }
.special-popup-form { margin-top: 2px; padding: 16px; border: 1px solid #D9E4E8; border-radius: 17px; background: #fff; }
.special-popup-form-title { display: grid; gap: 2px; margin-top: 14px; }
.special-popup-form-title span { color: #516A91; font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; }
.special-popup-form-title strong { color: #11192A; font-size: 16px; }
.special-popup-role-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.special-popup-role-grid article { padding: 14px; border: 1px solid #F5F8FA; border-radius: 15px; background: #fff; }
.special-popup-role-grid strong,.special-popup-role-grid span { display: block; }
.special-popup-role-grid span { margin-top: 4px; color: #636C77; font-size: 11px; }
.special-popup-users { display: grid; gap: 9px; }
.special-popup-users article { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid #D9E4E8; border-radius: 16px; background: #fff; }
.special-popup-users article.inactive { opacity: .62; background: #F5F8FA; }
.special-popup-user-avatar { display: grid; width: 42px; height: 42px; place-items: center; color: #2F817B; border-radius: 14px; background: linear-gradient(135deg,#E4F2F5,#8FD6D3); font-weight: 900; }
.special-popup-users strong,.special-popup-users span,.special-popup-users small { display: block; }
.special-popup-users span { margin-top: 2px; color: #636C77; font-size: 11px; }
.special-popup-users small { margin-top: 2px; color: #636C77; }
.special-popup-report-list { display: grid; gap: 13px; }
.special-popup-report { overflow: hidden; border: 1px solid #D9E4E8; border-radius: 18px; background: #fff; }
.special-popup-report > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: #F5F8FA; }
.special-popup-report > header.warning { background: #F5F8FA; }
.special-popup-report > header.error { background: #fff0f0; }
.special-popup-report > header span,.special-popup-report > header strong { display: block; }
.special-popup-report > header span { color: #516A91; font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.special-popup-report > header strong { margin-top: 3px; color: #11192A; }
.special-popup-report > header b { padding: 6px 9px; color: #2F817B; border: 1px solid #8FD6D3; border-radius: 999px; background: #F5F8FA; font-size: 10px; }
.special-popup-report-stats { display: flex; flex-wrap: wrap; gap: 7px; padding: 11px 15px; border-top: 1px solid #F5F8FA; border-bottom: 1px solid #F5F8FA; }
.special-popup-report-stats span { padding: 5px 8px; color: #636C77; border-radius: 999px; background: #F5F8FA; font-size: 10px; font-weight: 800; }
.special-popup-report > .special-popup-issues { padding: 12px; }

@media (max-width: 760px) {
  .special-guide-grid { grid-template-columns: 1fr; }
  .special-features-hero { align-items: flex-start; padding: 24px; }
  .special-features-hero-count { min-width: 105px; }
  .special-popup-hero { grid-template-columns: 1fr; }
  .special-popup-icon { width: 48px; height: 48px; }
  .special-popup-records article,.special-popup-users article { grid-template-columns: auto minmax(0,1fr); }
  .special-popup-records article > button,.special-popup-users article > button { grid-column: 1/-1; width: 100%; }
}
@media (max-width: 520px) {
  .special-features-hero { display: grid; }
  .special-features-hero-count { justify-self: start; }
  .special-popup-role-grid { grid-template-columns: 1fr; }
  .special-popup-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .special-popup-actions { display: grid; }
  .special-popup-actions .button { width: 100%; }
}


/* v59: compact, consistent School Forms and Reports header layout. */
.page-heading.school-form-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  column-gap: 20px;
  row-gap: 2px;
  align-items: center;
  margin-bottom: 20px;
}
.page-heading.school-form-heading > div:first-child { display: contents; }
.page-heading.school-form-heading .heading-leading {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  margin: 0 0 6px;
}
.page-heading.school-form-heading .eyebrow {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  margin: 0 0 6px;
}
.page-heading.school-form-heading h1 {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  min-width: 0;
}
.page-heading.school-form-heading p {
  grid-column: 1;
  grid-row: 3;
  max-width: 790px;
  margin: 8px 0 0;
}
.page-heading.school-form-heading .heading-actions {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  width: auto;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
  justify-content: flex-end;
}
.page-heading.school-form-heading .school-forms-back.icon-button {
  width: 40px;
  height: 40px;
}

/* Override the older SF2-only layout so every form uses the same compact header. */
.route-sf2 .page-heading.school-form-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  column-gap: 20px;
  row-gap: 2px;
  align-items: center;
  margin-bottom: 20px;
}
.route-sf2 .page-heading.school-form-heading > div:first-child { display: contents; }
.route-sf2 .page-heading.school-form-heading .heading-actions {
  grid-column: 2;
  grid-row: 2;
  width: auto;
  overflow: visible;
  padding: 0;
  justify-content: flex-end;
}

@media (max-width: 1050px) {
  .page-heading.school-form-heading,
  .route-sf2 .page-heading.school-form-heading {
    column-gap: 12px;
  }
  .page-heading.school-form-heading h1 { font-size: clamp(24px, 3vw, 30px); }
  .page-heading.school-form-heading .heading-actions { gap: 7px; }
  .page-heading.school-form-heading .heading-actions .button { padding-inline: 10px; }
}

@media (max-width: 820px) {
  .page-heading.school-form-heading,
  .route-sf2 .page-heading.school-form-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto auto;
    align-items: start;
  }
  .page-heading.school-form-heading > div:first-child,
  .route-sf2 .page-heading.school-form-heading > div:first-child { display: contents; }
  .page-heading.school-form-heading .heading-leading { grid-column: 2; grid-row: 1; }
  .page-heading.school-form-heading .eyebrow { grid-column: 1; grid-row: 1; }
  .page-heading.school-form-heading h1 { grid-column: 1 / -1; grid-row: 2; }
  .page-heading.school-form-heading p { grid-column: 1 / -1; grid-row: 3; }
  .page-heading.school-form-heading .heading-actions,
  .route-sf2 .page-heading.school-form-heading .heading-actions {
    grid-column: 1 / -1;
    grid-row: 4;
    width: 100%;
    margin-top: 10px;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 3px;
  }
}

/* v60 exact two-up Grade Slip layout */
.grade-slip-landscape-sheet{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;max-width:1280px;margin:0 auto;background:#fff;border:1px solid #111;box-shadow:var(--shadow-sm);font-family:"Times New Roman",serif}
.grade-slip-exact{min-width:0;padding:34px 42px 26px;background:#fff;color:#000;border:0;border-radius:0;box-shadow:none}
.grade-slip-exact+ .grade-slip-exact{border-left:1px dashed #444}
.grade-slip-exact-header{display:grid;grid-template-columns:70px 1fr;align-items:center;gap:12px;text-align:center;margin:35px 0 26px}
.grade-slip-exact-header img{width:68px;height:68px;object-fit:contain}
.grade-slip-exact-header h2{margin:0;font-size:18px;line-height:1.05;text-transform:uppercase}
.grade-slip-exact-header p{margin:1px 0 21px;font-size:15px}
.grade-slip-exact-header h3{margin:0;font-size:25px;letter-spacing:.02em}
.grade-slip-lines{font-size:13px;margin-bottom:5px}
.grade-slip-lines>div,.grade-slip-lines .grade-section-line>div{display:grid;grid-template-columns:auto 1fr;align-items:end;gap:4px;margin:3px 0}
.grade-slip-lines span{display:block;text-align:center;border-bottom:1px solid #000;min-height:18px;font-weight:700;padding:0 4px}
.grade-slip-lines .grade-section-line{display:grid;grid-template-columns:1fr 1.15fr;gap:25px}
.grade-slip-exact-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:12px}
.grade-slip-exact-table th,.grade-slip-exact-table td{border:1.5px solid #000;padding:4px 3px;text-align:center;line-height:1.1;height:25px}
.grade-slip-exact-table th:first-child,.grade-slip-exact-table td:first-child{width:43%}
.grade-slip-exact-table th:nth-child(5),.grade-slip-exact-table td:nth-child(5){width:12%}
.grade-slip-exact-table th:nth-child(6),.grade-slip-exact-table td:nth-child(6){width:20%}
.grade-slip-exact-table .gs-subject{text-align:left;text-transform:uppercase;font-size:11px}
.grade-slip-exact-table .gs-final,.grade-slip-exact-table .gs-remark{font-weight:700}
.grade-slip-exact-table .failed{font-weight:800;text-transform:uppercase}
.grade-slip-exact-table .gs-term-average th{font-size:15px;background:#fff}
.grade-slip-exact-table .gs-term-average th:nth-last-child(-n+2){background:#c7c7c7}
.grade-slip-exact-table .gs-general-average th{font-size:13px}.grade-slip-exact-table .gs-general-average th:last-child{font-size:10px;white-space:nowrap;padding-left:1px;padding-right:1px;letter-spacing:0}
.grade-slip-exact-footer{text-align:center;margin-top:68px;font-size:13px}
.grade-slip-exact-footer strong{display:block;text-decoration:underline;text-transform:uppercase}
.grade-slip-exact-footer span{display:block;margin-top:3px}
@media(max-width:900px){.grade-slip-landscape-sheet{grid-template-columns:1fr}.grade-slip-exact+ .grade-slip-exact{border-left:0;border-top:1px dashed #444}.grade-slip-exact{padding:24px}}
@media print{
  @page{size:13in 8.5in;margin:.18in}
  .grade-slip-landscape-sheet,.grade-slip-landscape-sheet *{visibility:visible!important}
  .grade-slip-landscape-sheet{position:absolute!important;inset:0!important;width:12.64in!important;height:8.14in!important;display:grid!important;grid-template-columns:1fr 1fr!important;border:1px solid #000!important;box-shadow:none!important;overflow:hidden!important}
  .grade-slip-landscape-sheet .grade-slip-exact{display:block!important;padding:.42in .58in .2in!important;overflow:hidden!important}
  .grade-slip-landscape-sheet .grade-slip-exact-header{grid-template-columns:.66in 1fr!important;gap:.08in!important;margin:1.0in 0 .32in!important}
  .grade-slip-landscape-sheet .grade-slip-exact-header img{width:.62in!important;height:.62in!important}
  .grade-slip-landscape-sheet .grade-slip-exact-header h2{font-size:13pt!important}
  .grade-slip-landscape-sheet .grade-slip-exact-header p{font-size:10pt!important;margin:0 0 .20in!important}
  .grade-slip-landscape-sheet .grade-slip-exact-header h3{font-size:19pt!important}
  .grade-slip-landscape-sheet .grade-slip-lines{font-size:9pt!important}
  .grade-slip-landscape-sheet .grade-slip-exact-table{font-size:8.4pt!important}
  .grade-slip-landscape-sheet .grade-slip-exact-table th,.grade-slip-landscape-sheet .grade-slip-exact-table td{padding:2px!important;height:.23in!important}
  .grade-slip-landscape-sheet .gs-subject{font-size:7.8pt!important}
  .grade-slip-landscape-sheet .grade-slip-exact-footer{margin-top:.72in!important;font-size:9pt!important}
  .two-up-print-sheet:not(.grade-slip-landscape-sheet){display:none!important}
}

/* v61: raise and compact all School Forms and Reports headers. */
.view.route-sf2,
.view.route-reports,
.view.route-lir,
.view.route-gradeslip,
.view.route-itemanalysis,
.view.route-sf5,
.view.route-sf8,
.view.route-sf10 {
  padding-top: 10px;
}

.page-heading.school-form-heading,
.route-sf2 .page-heading.school-form-heading {
  grid-template-rows: 40px auto auto;
  row-gap: 0;
  margin-top: 0;
  margin-bottom: 16px;
  align-items: center;
}

.page-heading.school-form-heading .heading-leading {
  align-self: start;
  margin: 0;
}

.page-heading.school-form-heading .eyebrow {
  align-self: center;
  margin: 0;
}

.page-heading.school-form-heading h1 {
  margin: 1px 0 0;
  line-height: 1.08;
}

.page-heading.school-form-heading p {
  margin: 6px 0 0;
  line-height: 1.42;
}

.page-heading.school-form-heading .school-forms-back.icon-button {
  width: 38px;
  height: 38px;
}

@media (max-width: 820px) {
  .view.route-sf2,
  .view.route-reports,
  .view.route-lir,
  .view.route-gradeslip,
  .view.route-itemanalysis,
  .view.route-sf5,
  .view.route-sf8,
  .view.route-sf10 {
    padding-top: 8px;
  }

  .page-heading.school-form-heading,
  .route-sf2 .page-heading.school-form-heading {
    grid-template-rows: 38px auto auto auto;
    margin-bottom: 14px;
  }

  .page-heading.school-form-heading .eyebrow {
    align-self: center;
  }

  .page-heading.school-form-heading .heading-actions,
  .route-sf2 .page-heading.school-form-heading .heading-actions {
    margin-top: 8px;
  }
}

@media print{.grade-slip-landscape-sheet .gs-general-average th:last-child{font-size:7.5pt!important;white-space:nowrap!important;padding-left:1px!important;padding-right:1px!important}}

/* v64 Grade Slip PDF and promotion-status fit */
.grade-slip-exact-table col.gs-col-subject{width:41%}
.grade-slip-exact-table col.gs-col-term{width:7.5%}
.grade-slip-exact-table col.gs-col-final{width:12.5%}
.grade-slip-exact-table col.gs-col-remarks{width:24%}
.grade-slip-exact-table th:first-child,.grade-slip-exact-table td:first-child,.grade-slip-exact-table th:nth-child(5),.grade-slip-exact-table td:nth-child(5),.grade-slip-exact-table th:nth-child(6),.grade-slip-exact-table td:nth-child(6){width:auto}
.grade-slip-exact-table .gs-general-average th:last-child{font-size:9px;white-space:nowrap;padding-left:3px;padding-right:3px;overflow:visible}
@media print{.grade-slip-landscape-sheet .gs-general-average th:last-child{font-size:7.2pt!important;white-space:nowrap!important;padding-left:2px!important;padding-right:2px!important;letter-spacing:-.1pt!important}}

/* v65 Grade Slip balance and spacing */
.grade-slip-exact{padding:28px 34px 24px}
.grade-slip-exact-header{grid-template-columns:64px 1fr;gap:11px;margin:22px 0 22px}
.grade-slip-exact-header img{width:62px;height:62px}
.grade-slip-exact-header h2{font-size:17px;line-height:1.08}
.grade-slip-exact-header p{margin:2px 0 16px;font-size:13px}
.grade-slip-exact-header h3{font-size:23px;line-height:1.05}
.grade-slip-lines{font-size:12.5px;margin-bottom:7px}
.grade-slip-lines>div,.grade-slip-lines .grade-section-line>div{margin:4px 0}
.grade-slip-exact-table{font-size:11.5px}
.grade-slip-exact-table th,.grade-slip-exact-table td{padding:4px 3px;height:25px}
.grade-slip-exact-table .gs-subject{font-size:10.5px}
.grade-slip-exact-footer{margin-top:54px;font-size:12.5px}
.grade-slip-exact-table col.gs-col-subject{width:39%}
.grade-slip-exact-table col.gs-col-term{width:7.25%}
.grade-slip-exact-table col.gs-col-final{width:11.25%}
.grade-slip-exact-table col.gs-col-remarks{width:28%}
.grade-slip-exact-table .gs-general-average th:last-child{font-size:9px;white-space:nowrap;padding-left:2px;padding-right:2px;letter-spacing:-.1px}
@media print{
  .grade-slip-landscape-sheet .grade-slip-exact{padding:.34in .46in .18in!important}
  .grade-slip-landscape-sheet .grade-slip-exact-header{grid-template-columns:.60in 1fr!important;gap:.08in!important;margin:.46in 0 .25in!important}
  .grade-slip-landscape-sheet .grade-slip-exact-header img{width:.56in!important;height:.56in!important}
  .grade-slip-landscape-sheet .grade-slip-exact-header h2{font-size:12pt!important;line-height:1.05!important}
  .grade-slip-landscape-sheet .grade-slip-exact-header p{font-size:9pt!important;margin:.02in 0 .16in!important}
  .grade-slip-landscape-sheet .grade-slip-exact-header h3{font-size:18pt!important}
  .grade-slip-landscape-sheet .grade-slip-lines{font-size:8.5pt!important;margin-bottom:.06in!important}
  .grade-slip-landscape-sheet .grade-slip-exact-table{font-size:8.1pt!important}
  .grade-slip-landscape-sheet .grade-slip-exact-table th,.grade-slip-landscape-sheet .grade-slip-exact-table td{height:.22in!important;padding:2px!important}
  .grade-slip-landscape-sheet .gs-subject{font-size:7.5pt!important}
  .grade-slip-landscape-sheet .gs-general-average th:last-child{font-size:7.1pt!important;white-space:nowrap!important;padding-left:1px!important;padding-right:1px!important;letter-spacing:-.15pt!important}
  .grade-slip-landscape-sheet .grade-slip-exact-footer{margin-top:.58in!important;font-size:8.5pt!important}
}

/* AcadMates v67 — School Form 5 */
.sf5-toolbar { display: grid; grid-template-columns: minmax(220px, .9fr) minmax(230px, 1fr) minmax(250px, 1.15fr); gap: 20px; align-items: end; padding: 22px; margin-bottom: 22px; }
.sf5-toolbar label { display: grid; gap: 8px; font-size: 13px; font-weight: 750; color: var(--navy-900); }
.sf5-class-context { min-height: 66px; display: grid; align-content: center; gap: 3px; padding-left: 20px; border-left: 1px solid var(--line); }
.sf5-class-context span, .sf5-class-context small { color: var(--muted); font-size: 12px; }
.sf5-class-context strong { font-size: 16px; color: var(--ink); }
.sf5-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 22px; }
.sf5-record-panel { padding: 22px; margin-bottom: 22px; }
.sf5-table-shell { max-height: min(62vh, 720px); overflow: auto; border: 1px solid var(--line); border-radius: 14px; }
.sf5-table { width: 100%; min-width: 1120px; border-collapse: separate; border-spacing: 0; background: white; }
.sf5-table th, .sf5-table td { padding: 12px 13px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); vertical-align: middle; text-align: left; font-size: 13px; }
.sf5-table thead th { position: sticky; top: 0; z-index: 3; background: var(--navy-950); color: white; font-size: 12px; letter-spacing: .02em; }
.sf5-table th:first-child, .sf5-table td:first-child { width: 56px; min-width: 56px; max-width: 56px; text-align: center; }
.sf5-table th:nth-child(1), .sf5-table td:nth-child(1) { position: sticky; left: 0; z-index: 4; background: white; }
.sf5-table th:nth-child(2), .sf5-table td:nth-child(2) { position: sticky; left: 56px; z-index: 4; min-width: 250px; background: white; box-shadow: 8px 0 12px -12px rgba(8,41,64,.55); }
.sf5-table thead th:nth-child(1), .sf5-table thead th:nth-child(2) { z-index: 7; background: var(--navy-950); }
.sf5-table td:nth-child(2) strong, .sf5-table td:nth-child(2) small { display: block; }
.sf5-table td:nth-child(2) small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.sf5-table td:nth-child(4) { width: 120px; text-align: center; font-weight: 800; }
.sf5-table td:nth-child(5) { width: 155px; }
.sf5-table td:nth-child(6) { min-width: 230px; }
.sf5-table td:nth-child(7) { min-width: 245px; }
.sf5-table tr:last-child td { border-bottom: 0; }
.sf5-group-row th { position: sticky; top: 40px; left: 0; z-index: 6; padding: 8px 13px; background: var(--amber-100); color: #2F817B; font-size: 11px; letter-spacing: .12em; }
.sf5-action { display: inline-flex; align-items: center; justify-content: center; min-width: 104px; padding: 6px 9px; border-radius: 999px; background: var(--blue-100); color: var(--navy-900); font-size: 10px; font-weight: 850; letter-spacing: .04em; }
.sf5-action-promoted { background: var(--green-100); color: var(--green-700); }
.sf5-action-retained { background: var(--red-100); color: var(--red-600); }
.sf5-action-conditional, .sf5-action-for-review, .sf5-action-incomplete { background: var(--amber-100); color: #2F817B; }
.sf5-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 22px; }
.sf5-summary-panel { padding: 22px; }
.sf5-count-table { width: 100%; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; }
.sf5-count-table > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(58px, 70px) minmax(62px, 74px) minmax(58px, 70px); align-items: center; min-height: 42px; border-bottom: 1px solid var(--line); }
.sf5-count-table > div:last-child { border-bottom: 0; }
.sf5-count-table span, .sf5-count-table b, .sf5-count-table strong { min-width: 0; padding: 9px 10px; overflow-wrap: anywhere; }
.sf5-count-table b, .sf5-count-table strong { height: 100%; display: grid; place-items: center; border-left: 1px solid var(--line); }
.sf5-count-head { background: var(--blue-50); color: var(--navy-900); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .035em; }
.validation-banner { display: flex; align-items: flex-start; gap: 12px; padding: 14px 17px; margin-bottom: 20px; border: 1px solid var(--line); border-radius: 14px; }
.validation-banner strong, .validation-banner span { display: block; }
.validation-banner strong { min-width: max-content; }
.validation-banner.warning { background: #F5F8FA; border-color: #8FD6D3; }
.validation-banner.error { background: var(--red-100); border-color: #e6a6a6; color: var(--red-600); }
@media (max-width: 1120px) {
  .sf5-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf5-class-context { grid-column: 1 / -1; padding-left: 0; padding-top: 14px; border-left: 0; border-top: 1px solid var(--line); }
  .sf5-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf5-summary-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .sf5-toolbar, .sf5-metric-grid { grid-template-columns: 1fr; }
  .sf5-toolbar { gap: 14px; padding: 17px; }
  .sf5-count-table > div { grid-template-columns: minmax(0, 1fr) 50px 54px 50px; font-size: 11px; }
  .validation-banner { display: grid; }
}

/* AcadMates v71: unified back-button header placement and in-app print preview. */
.page-heading.school-form-heading,
.route-sf2 .page-heading.school-form-heading {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 40px auto auto;
  column-gap: 18px;
  row-gap: 0;
}
.page-heading.school-form-heading .heading-leading {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: start;
}
.page-heading.school-form-heading .heading-actions {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  align-self: center;
  gap: 10px;
}
.print-preview-open .modal-panel {
  width: min(1380px, calc(100% - 28px));
  height: calc(100vh - 28px);
  max-height: calc(100vh - 28px);
  margin: 14px auto;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}
.print-preview-open #modal-content {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  padding: 0;
}
.acadmates-print-workspace { min-height:0; display:grid; grid-template-columns:minmax(250px,300px) minmax(0,1fr); background:#dfe5eb; }
.acadmates-print-settings { min-height:0; padding:22px 18px; overflow:auto; border-right:1px solid var(--line); background:#fff; }
.acadmates-print-settings-title { margin:0 0 18px; color:var(--navy-950); font-size:24px; line-height:1.1; font-weight:850; }
.acadmates-print-setting { display:grid; gap:7px; margin-bottom:16px; color:var(--muted); font-size:12px; font-weight:750; }
.acadmates-print-setting select,.acadmates-print-setting input { width:100%; min-height:46px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--ink); font:inherit; font-size:13px; font-weight:700; }
.acadmates-print-setting-static { padding:12px 13px; border:1px solid var(--line); border-radius:12px; background:var(--surface-soft,#f7f9fb); }
.acadmates-print-setting-static strong { color:var(--ink); font-size:13px; }
.acadmates-print-device-note { margin:10px 0 0; color:var(--muted); font-size:11px; line-height:1.5; }
.in-app-print-preview { min-height:0; padding:16px; background:#cfd6dd; overflow:hidden; }
.in-app-print-frame { display:block; width:100%; height:100%; min-height:62vh; border:0; border-radius:10px; background:white; box-shadow:0 8px 28px rgba(16,28,48,.16); }
.print-preview-actions { margin:0; padding:12px 16px; border-top:1px solid var(--line); background:white; }
.print-preview-actions .button[disabled] { opacity:.58; cursor:not-allowed; }
@media (max-width: 900px) {
  .page-heading.school-form-heading .heading-actions { gap: 7px; }
  .print-preview-open .modal-panel { width:calc(100% - 12px); height:calc(100vh - 12px); margin:6px auto; border-radius:14px; }
  .acadmates-print-workspace { grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); }
  .acadmates-print-settings { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 12px; padding:12px; border-right:0; border-bottom:1px solid var(--line); }
  .acadmates-print-settings-title,.acadmates-print-device-note { grid-column:1/-1; margin:0; }
  .acadmates-print-setting { margin:0; }
  .in-app-print-preview { padding:8px; }
}

/* School Form 8 */
.sf8-toolbar { display:grid; grid-template-columns:repeat(3,minmax(220px,1fr)); gap:18px 20px; align-items:end; padding:22px; margin-bottom:22px; }
.sf8-toolbar label { display:grid; gap:8px; color:var(--navy-900); font-size:13px; font-weight:750; }
.sf8-class-context { min-height:66px; display:grid; align-content:center; gap:3px; padding-left:20px; border-left:1px solid var(--line); }
.sf8-class-context span,.sf8-class-context small { color:var(--muted); font-size:12px; }
.sf8-class-context strong { color:var(--ink); font-size:16px; }
.sf8-metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin-bottom:22px; }
.sf8-record-panel,.sf8-summary-panel { padding:22px; margin-bottom:22px; }
.sf8-table-shell { max-height:min(64vh,740px); overflow:auto; border:1px solid var(--line); border-radius:14px; }
.sf8-table { width:100%; min-width:1420px; border-collapse:separate; border-spacing:0; background:#fff; }
.sf8-table th,.sf8-table td { padding:10px 11px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); vertical-align:middle; text-align:left; font-size:12px; }
.sf8-table thead th { position:sticky; top:0; z-index:4; background:var(--navy-950); color:#fff; font-size:11px; letter-spacing:.025em; white-space:nowrap; }
.sf8-table th:first-child,.sf8-table td:first-child { width:52px; min-width:52px; max-width:52px; text-align:center; }
.sf8-table th:nth-child(1),.sf8-table td:nth-child(1) { position:sticky; left:0; z-index:5; background:#fff; }
.sf8-table th:nth-child(2),.sf8-table td:nth-child(2) { position:sticky; left:52px; z-index:5; min-width:250px; background:#fff; box-shadow:8px 0 12px -12px rgba(8,41,64,.55); }
.sf8-table thead th:nth-child(1),.sf8-table thead th:nth-child(2) { z-index:8; background:var(--navy-950); }
.sf8-table td:nth-child(2) strong,.sf8-table td:nth-child(2) small { display:block; }
.sf8-table td:nth-child(2) small { margin-top:3px; color:var(--muted); font-size:10px; }
.sf8-table td:nth-child(4),.sf8-table td:nth-child(5) { white-space:nowrap; }
.sf8-table td:nth-child(8),.sf8-table td:nth-child(9) { text-align:center; }
.sf8-table .tag { display:inline-flex; justify-content:center; min-width:88px; font-size:9px; white-space:nowrap; }
.sf8-table .tag.red { color:var(--red-600); background:var(--red-100); }
.sf8-table .tag.amber { color:#2F817B; background:var(--amber-100); }
.sf8-table .tag.green { color:var(--green-700); background:var(--green-100); }
.sf8-number-input { min-width:86px; width:86px; min-height:36px; padding:7px 8px; text-align:center; }
.sf8-remarks-input { min-width:190px; min-height:36px; padding:7px 9px; }
.sf8-group-row th { position:sticky; top:37px; left:0; z-index:7; padding:7px 12px; background:var(--amber-100); color:#2F817B; font-size:10px; letter-spacing:.13em; }
.sf8-summary-shell { overflow:auto; border:1px solid var(--line); border-radius:13px; }
.sf8-summary-table { width:100%; min-width:1050px; border-collapse:collapse; background:#fff; }
.sf8-summary-table th,.sf8-summary-table td { padding:10px 9px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); text-align:center; font-size:11px; }
.sf8-summary-table thead th { background:var(--blue-50); color:var(--navy-900); font-weight:800; }
.sf8-summary-table tbody th { text-align:left; }
.sf8-summary-table tr:last-child th,.sf8-summary-table tr:last-child td { border-bottom:0; font-weight:800; }
@media (max-width:1100px) {
  .sf8-toolbar { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sf8-class-context { grid-column:1/-1; padding-left:0; padding-top:14px; border-left:0; border-top:1px solid var(--line); }
  .sf8-metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:680px) {
  .sf8-toolbar,.sf8-metric-grid { grid-template-columns:1fr; }
  .sf8-toolbar { gap:14px; padding:17px; }
}

/* v83 — organized learner directory */
.student-directory-toolbar { margin-bottom: 16px; }
.student-directory-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:18px; }
.student-directory-summary article { display:grid; grid-template-columns:1fr auto; gap:4px 12px; align-items:center; padding:16px 18px; border:1px solid var(--line); border-radius:16px; background:white; box-shadow:var(--shadow-sm); }
.student-directory-summary span { color:var(--muted); font-size:10px; font-weight:750; text-transform:uppercase; letter-spacing:.05em; }
.student-directory-summary strong { grid-row:span 2; font-size:24px; font-variant-numeric:tabular-nums; }
.student-directory-summary small { color:var(--muted); font-size:10px; }
.student-directory-groups { display:grid; gap:22px; }
.student-directory-section { display:grid; gap:14px; }
.student-directory-section-heading { display:grid; grid-template-columns:auto 1fr auto; gap:13px; align-items:center; padding:4px 2px; }
.student-directory-section-heading h2 { margin:2px 0 3px; font-size:19px; }
.student-directory-section-heading p { margin:0; color:var(--muted); font-size:11px; }
.student-directory-section-icon { width:44px; height:44px; display:grid; place-items:center; border-radius:13px; background:var(--blue-100); color:var(--navy-900); }
.student-directory-section-icon svg { width:21px; height:21px; }
.student-directory-section-total { min-width:64px; text-align:right; }
.student-directory-section-total strong, .student-directory-section-total span { display:block; }
.student-directory-section-total strong { font-size:20px; }
.student-directory-section-total span { color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.06em; }
.student-roster-panel { padding:18px; border:1px solid var(--line); border-radius:18px; background:var(--surface); box-shadow:var(--shadow-sm); }
.student-roster-panel-header { display:flex; justify-content:space-between; gap:18px; align-items:center; margin-bottom:14px; }
.student-roster-title-line { display:flex; flex-wrap:wrap; align-items:center; gap:9px; }
.student-roster-title-line h3 { margin:0; font-size:15px; }
.student-roster-panel-header p { margin:5px 0 0; color:var(--muted); font-size:10px; }
.student-roster-count { min-width:64px; text-align:right; }
.student-roster-count strong, .student-roster-count span { display:block; }
.student-roster-count strong { font-size:20px; }
.student-roster-count span { color:var(--muted); font-size:9px; }
.student-sex-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-items:start; }
.student-sex-grid > .student-sex-panel.other { grid-column:1 / -1; }
.student-sex-panel { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:white; }
.student-sex-panel-header { padding:11px 13px; border-bottom:1px solid var(--line); background:#f8fbfc; }
.student-sex-panel-header > div { display:flex; align-items:center; gap:9px; }
.student-sex-panel-header h4 { margin:0; font-size:12px; }
.student-sex-panel-header small { display:block; margin-top:2px; color:var(--muted); font-size:9px; }
.student-sex-mark { width:28px; height:28px; display:grid; place-items:center; border-radius:9px; background:var(--blue-100); color:var(--navy-900); font-size:10px; font-weight:900; }
.student-sex-panel.female .student-sex-mark { background:#f8eaf2; color:#8a3f67; }
.student-sex-table-shell { max-height:390px; border:0; border-radius:0; box-shadow:none; }
.student-sex-table-shell th, .student-sex-table-shell td { padding:9px 10px; }
.student-sex-table-shell .student-name { min-width:185px; }
.student-group-empty { min-height:88px; display:grid; place-items:center; padding:18px; color:var(--muted); text-align:center; font-size:10px; }
.student-directory-empty { border:1px dashed var(--line); border-radius:15px; background:white; }
@media (max-width:1100px) {
  .student-sex-grid { grid-template-columns:1fr; }
  .student-sex-grid > .student-sex-panel.other { grid-column:auto; }
}
@media (max-width:760px) {
  .student-directory-summary { grid-template-columns:1fr; }
  .student-directory-section-heading { grid-template-columns:auto 1fr; }
  .student-directory-section-total { grid-column:2; text-align:left; display:flex; gap:6px; align-items:baseline; }
  .student-roster-panel { padding:13px; }
  .student-roster-panel-header { align-items:flex-start; }
  .student-directory-toolbar { align-items:stretch; }
}

/* v84 — unified Elementary grade-group configuration */
.curriculum-profile-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:16px; }
.curriculum-profile-card { position:relative; display:flex; align-items:flex-start; gap:13px; min-height:112px; padding:18px; border:1px solid var(--line); border-radius:16px; background:#fff; cursor:pointer; transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.curriculum-profile-card:hover { border-color:#516A91; transform:translateY(-1px); }
.curriculum-profile-card.selected, .curriculum-profile-card:has(input:checked) { border-color:var(--gold-500); box-shadow:0 0 0 3px rgba(143,214,211,.14); background:#FFFFFF; }
.curriculum-profile-card input { width:18px; height:18px; min-height:0; margin:2px 0 0; flex:0 0 auto; accent-color:#516A91; }
.curriculum-profile-card span { display:grid; gap:7px; }
.curriculum-profile-card strong { color:var(--navy-950); font-size:1rem; }
.curriculum-profile-card small { color:var(--muted); line-height:1.5; }
.mapeh-link-strip { display:flex; align-items:center; gap:14px; margin:0 0 18px; padding:13px 16px; border:1px solid #bddfd8; border-radius:14px; background:#f0faf7; color:#164f46; }
.mapeh-link-strip strong { white-space:nowrap; }
.mapeh-link-strip span { font-size:.86rem; line-height:1.45; }
@media (max-width:760px) { .curriculum-profile-grid { grid-template-columns:1fr; } .mapeh-link-strip { align-items:flex-start; flex-direction:column; gap:5px; } }
.mapeh-controls { display:grid; grid-template-columns:minmax(220px,1fr) minmax(180px,.55fr) minmax(180px,.45fr); gap:16px; align-items:end; margin-bottom:18px; }
.mapeh-progress { display:flex; align-items:center; justify-content:space-between; min-height:43px; padding:10px 14px; border:1px solid var(--line); border-radius:12px; background:#FFFFFF; }
.mapeh-progress span { color:var(--muted); font-size:.82rem; }
.mapeh-progress strong { color:var(--navy-950); font-size:1.15rem; }
.mapeh-component-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:18px; }
.mapeh-component-grid .panel { padding:20px; }
.mapeh-component-grid h2 { margin:7px 0 6px; font-size:1.15rem; }
.mapeh-component-grid p { min-height:42px; margin:0 0 14px; color:var(--muted); }
.mapeh-formula-card { background:#f0faf7; border-color:#bddfd8; }
.mapeh-table-wrap { max-height:calc(100vh - 410px); overflow:auto; }
.mapeh-summary-table { min-width:930px; width:100%; border-collapse:separate; border-spacing:0; }
.mapeh-summary-table th,.mapeh-summary-table td { padding:11px 13px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:white; }
.mapeh-summary-table th { position:sticky; top:0; z-index:4; background:#F5F8FA; text-align:center; }
.mapeh-summary-table .mapeh-sticky-col { position:sticky; left:0; z-index:5; min-width:290px; text-align:left; box-shadow:4px 0 8px rgba(26,50,65,.06); }
.mapeh-summary-table th.mapeh-sticky-col { z-index:6; background:#F5F8FA; }
.mapeh-summary-table .sis-group-row td { background:#eef5f6; }
/* Grades 4–10 MAPEH learner identity alignment: keep both the student name and
   the displayed LRN flush left in the live E-Class Record and MAPEH summary. */
.route-mapeh .mapeh-gradebook .student-name > div,
.route-mapeh .mapeh-gradebook .student-name strong,
.route-mapeh .mapeh-gradebook .student-name small,
.route-mapeh .mapeh-summary-table .student-name > div,
.route-mapeh .mapeh-summary-table .student-name strong,
.route-mapeh .mapeh-summary-table .student-name small { text-align:left; }
@media (max-width:900px) { .mapeh-controls,.mapeh-component-grid { grid-template-columns:1fr; } .mapeh-table-wrap { max-height:calc(100vh - 500px); } }

/* v86 license-routed curriculum */
.licensed-product-card { display:flex; align-items:flex-start; gap:16px; padding:18px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(135deg, var(--blue-50), white); }
.licensed-product-card h3 { margin:7px 0 5px; font-size:18px; }
.licensed-product-card p { margin:0; color:var(--muted); line-height:1.55; }

/* v88: compact Classes actions and separated MAPEH workspace */
.route-classes .heading-actions { flex-wrap: nowrap; align-items: center; }
.route-classes .heading-actions .button { white-space: nowrap; }
.mapeh-view-tabs { display:flex; gap:8px; margin:0 0 14px; padding:6px; overflow-x:auto; border:1px solid var(--line); border-radius:14px; background:#F5F8FA; }
.mapeh-view-tabs button { flex:1 0 210px; min-height:44px; padding:9px 14px; border:0; border-radius:10px; background:transparent; color:var(--muted); font-weight:800; cursor:pointer; white-space:nowrap; }
.mapeh-view-tabs button.active { background:#fff; color:var(--navy-950); box-shadow:0 4px 14px rgba(26,50,65,.10); }
.mapeh-component-record { min-width:0; }
.mapeh-record-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin:0 0 14px; }
.mapeh-record-heading h2 { margin:4px 0 5px; font-size:1.35rem; }
.mapeh-record-heading p { margin:0; color:var(--muted); font-size:.88rem; }
.mapeh-record-stat { min-width:130px; padding:10px 14px; text-align:center; border:1px solid var(--line); border-radius:12px; background:#fff; }
.mapeh-record-stat span { display:block; color:var(--muted); font-size:.74rem; }
.mapeh-record-stat strong { display:block; margin-top:2px; font-size:1.35rem; }
.mapeh-gradebook { min-width:2400px; }
.mapeh-summary-intro { margin-bottom:14px; padding:17px 20px; }
.mapeh-summary-intro h2 { margin:5px 0 5px; font-size:1.2rem; }
.mapeh-summary-intro p { margin:0; color:var(--muted); font-size:.86rem; line-height:1.45; }
.mapeh-all-terms-table { min-width:1600px; }
.mapeh-all-terms-table thead tr:first-child th:not(.mapeh-sticky-col) { background:#E4F2F5; }
.mapeh-average-cell { background:#F5F8FA !important; }
.mapeh-final-cell { background:#e8f7ef !important; }
.route-mapeh .gradebook-wrap { max-height:calc(100vh - 390px); }
@media (max-width:900px) {
  .route-classes .heading-actions { width:100%; overflow-x:auto; justify-content:flex-start; padding-bottom:3px; }
  .route-classes .heading-actions .button { flex:0 0 auto; }
  .mapeh-record-heading { align-items:flex-start; flex-direction:column; }
  .mapeh-record-stat { width:100%; }
  .route-mapeh .gradebook-wrap { max-height:calc(100vh - 480px); }
}


/* v90: compact MAPEH tabs, explanation, and one-line actions */
.route-mapeh .page-heading { gap: 14px; margin-bottom: 18px; }
.route-mapeh .page-heading h1 { font-size: clamp(23px, 2.4vw, 30px); }
.route-mapeh .page-heading p { margin-top: 5px; font-size: 12px; line-height: 1.4; }
.route-mapeh .heading-actions {
  flex-wrap: nowrap;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  max-width: 100%;
  padding-bottom: 2px;
}
.route-mapeh .heading-actions .mapeh-action-button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 8px 11px;
  gap: 6px;
  font-size: 11px;
  white-space: nowrap;
}
.route-mapeh .heading-actions .mapeh-action-button svg { width: 15px; height: 15px; }
.route-mapeh .heading-actions .sheet-wide-toggle { flex: 0 0 38px; width: 38px; height: 38px; margin-left: 0; }
.route-mapeh .mapeh-view-tabs { gap: 5px; padding: 5px; margin-bottom: 12px; }
.route-mapeh .mapeh-view-tabs button {
  flex: 1 0 175px;
  min-height: 38px;
  padding: 7px 10px;
  border-radius: 9px;
  font-size: 12px;
  line-height: 1.2;
}
.route-mapeh .mapeh-summary-intro { padding: 13px 16px; margin-bottom: 12px; }
.route-mapeh .mapeh-summary-intro .eyebrow { font-size: 10px; letter-spacing: .13em; }
.route-mapeh .mapeh-summary-intro h2 { margin: 4px 0; font-size: 1.04rem; }
.route-mapeh .mapeh-summary-intro p { font-size: .78rem; line-height: 1.4; }
@media (max-width: 760px) {
  .route-mapeh .page-heading { align-items: stretch; }
  .route-mapeh .heading-actions { width: 100%; justify-content: flex-start; }
  .route-mapeh .mapeh-view-tabs button { flex-basis: 160px; font-size: 11px; }
}

/* v104: preserve complete rounded MAPEH action buttons */
.route-mapeh .heading-actions {
  justify-content: flex-start;
  min-width: 0;
  padding: 3px 3px 6px;
  margin: -3px -3px -6px 0;
  scroll-padding-inline-start: 3px;
}
.route-mapeh .heading-actions .mapeh-action-button:first-child { margin-inline-start: 0; }

/* v91: Grade Sheet linked/manual grade sources */
.smart-sis-table th .sis-source-badge { display:block; width:max-content; max-width:100%; margin:5px auto 0; padding:2px 7px; border-radius:999px; font-size:8px; line-height:1.2; font-weight:800; letter-spacing:.02em; text-transform:none; white-space:nowrap; }
.sis-source-badge.linked, .sis-grade-source.linked { background:#e6f6eb; color:#26713c; }
.sis-source-badge.manual, .sis-grade-source.manual { background:#F5F8FA; color:#2F817B; }
.sis-source-badge.computed, .sis-grade-source.computed { background:#e8f1fb; color:#285b89; }
.sis-source-badge.mixed { background:#f0eafa; color:#644491; }
.sis-grade-source { display:block; width:max-content; margin:4px auto 0; padding:2px 6px; border-radius:999px; font-size:7px; line-height:1.15; font-weight:800; }
.smart-sis-table .sis-manual-grade-cell { padding:7px 10px; background:#F5F8FA; }
.smart-sis-table .sis-manual-grade-cell input { width:78px; max-width:100%; height:36px; margin:0 auto; padding:5px 7px; text-align:center; font:800 15px/1 var(--font-sans); border:1px solid #516A91; border-radius:9px; background:#fff; color:var(--navy-950); }
.smart-sis-table .sis-manual-grade-cell input:focus { outline:3px solid rgba(143,214,211,.2); border-color:var(--gold-600); }
.smart-sis-table .sis-manual-grade-cell small { display:block; margin-top:3px; color:#2F817B; font-size:7px; font-weight:800; }

/* v92: safe class and advisory deletion */
.class-card-inline-actions { display:flex; align-items:center; gap:12px; }
.text-button.danger-text { color:var(--red-600); }
.text-button.danger-text:hover { color:#861818; }
.confirmation-panel { display:grid; gap:8px; padding:20px; border:1px solid var(--line); border-radius:18px; background:var(--surface-soft); }
.confirmation-panel strong { font-size:20px; }
.confirmation-panel span { color:var(--muted); font-weight:700; }
.confirmation-panel p { margin:4px 0 0; color:var(--text); line-height:1.55; }
.danger-confirmation { border-color:#e8b9b9; background:#fff6f6; }
@media (max-width:720px) { .class-card-inline-actions { gap:8px; } .roster-card-actions .button { flex:1 1 auto; } }

/* v95: compact Grade 4–6 MAPEH class toolbar */
.route-mapeh .mapeh-controls {
  grid-template-columns:minmax(260px,1.45fr) minmax(120px,.42fr) auto minmax(270px,1fr);
  align-items:end;
  gap:10px;
  margin-bottom:12px;
  padding:12px 14px;
}
.route-mapeh .mapeh-controls > label {
  gap:4px;
  font-size:.72rem;
  line-height:1.1;
}
.route-mapeh .mapeh-controls select {
  min-height:40px;
  margin-top:0;
  padding:7px 34px 7px 11px;
  border-radius:10px;
  font-size:.82rem;
}
.route-mapeh .mapeh-progress {
  gap:8px;
  min-width:92px;
  min-height:40px;
  padding:7px 10px;
  border-radius:10px;
}
.route-mapeh .mapeh-progress span { font-size:.68rem; font-weight:700; }
.route-mapeh .mapeh-progress strong { font-size:1rem; }
.mapeh-connection {
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
  min-height:40px;
  padding:6px 7px 6px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
}
.mapeh-connection-dot {
  flex:0 0 8px;
  width:8px;
  height:8px;
  border-radius:999px;
  background:#2f8a4b;
  box-shadow:0 0 0 3px rgba(47,138,75,.12);
}
.mapeh-connection.manual .mapeh-connection-dot { background:#516A91; box-shadow:0 0 0 3px rgba(81,106,145,.14); }
.mapeh-connection.separate .mapeh-connection-dot { background:#357999; box-shadow:0 0 0 3px rgba(53,121,153,.14); }
.mapeh-connection-copy {
  display:grid;
  gap:1px;
  min-width:0;
  line-height:1.1;
}
.mapeh-connection-copy > span { color:var(--muted); font-size:.62rem; font-weight:700; }
.mapeh-connection-copy > strong {
  overflow:hidden;
  color:var(--navy-950);
  font-size:.78rem;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.mapeh-connection-copy > small { color:var(--muted); font-size:.62rem; line-height:1.2; }
.mapeh-connection .button {
  flex:0 0 auto;
  min-height:30px;
  margin-left:auto;
  padding:5px 9px;
  border-radius:8px;
  font-size:.68rem;
  white-space:nowrap;
}
.mapeh-connection .button svg { width:13px; height:13px; }
@media (max-width:1100px) {
  .route-mapeh .mapeh-controls { grid-template-columns:minmax(240px,1fr) minmax(120px,.38fr) auto; }
  .route-mapeh .mapeh-connection { grid-column:1 / -1; }
}
@media (max-width:700px) {
  .route-mapeh .mapeh-controls { grid-template-columns:1fr auto; padding:11px; }
  .route-mapeh .mapeh-controls > label:first-child { grid-column:1 / -1; }
  .route-mapeh .mapeh-connection { grid-column:1 / -1; }
}



/* Screen headers freeze as a single block: standard/SSHS/MAPEH have two rows,
   GMRC/Values has three. Natural row heights also support wrapped headings. */
@media screen {
  #app-shell .gradebook thead {
    position: sticky;
    top: 0;
    z-index: 30;
    background: #E4F2F5;
  }
  #app-shell .gradebook thead th {
    position: relative;
    top: auto !important;
  }
  #app-shell .gradebook thead th.sticky-col {
    position: sticky;
    left: 0;
    z-index: 35;
  }
}

@media screen {
  #app-shell .sidebar .sidebar-release {
    flex-shrink: 0;
    margin-top: auto;
    padding: 12px 4px 8px;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
  }
  #app-shell .sidebar-release .desktop-version {
    display: block;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
    color: #FFFFFF;
  }
  #app-shell .sidebar-release .sidebar-tagline {
    display: block;
    white-space: normal;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    color: #E4F2F5;
  }
  #app-shell .sidebar-release .sidebar-attribution {
    display: block;
    margin-top: 3px;
    font-size: 10px;
    line-height: 1.3;
    font-weight: 400;
    color: #9BAFCA;
  }
}
@media screen and (max-height: 700px) {
  #app-shell .sidebar .sidebar-release { padding-block: 5px; }
  #app-shell .sidebar-release .desktop-version { font-size: 16px; }
  #app-shell .sidebar-release .sidebar-tagline { margin-top: 3px; font-size: 11px; }
}

@media screen {
  #app-shell.sidebar-collapsed .sidebar .sidebar-release {
    display: block !important;
    margin: auto 0 6px;
    padding: 8px 0 0;
    text-align: center;
  }
  #app-shell.sidebar-collapsed .sidebar-release .desktop-version {
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0;
    white-space: nowrap;
  }
  #app-shell.sidebar-collapsed .sidebar-release .sidebar-tagline,
  #app-shell.sidebar-collapsed .sidebar-release .sidebar-attribution {
    display: none;
  }
}

/* v96: keep both Multi-Class Gradebook header rows frozen and perfectly aligned */
.gradebook {
  --gradebook-group-row-height: 42px;
  border-collapse: separate;
  border-spacing: 0;
}
.gradebook thead { position: relative; z-index: 20; }
.gradebook thead th {
  position: sticky;
  background-clip: padding-box;
}
.gradebook .gradebook-group-row .group-head {
  height: var(--gradebook-group-row-height);
  min-height: var(--gradebook-group-row-height);
  padding-top: 8px;
  padding-bottom: 8px;
  vertical-align: middle;
}
.gradebook .gradebook-group-row th {
  top: 0;
  z-index: 22;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.18);
}
.gradebook .gradebook-group-row th[rowspan="2"] {
  z-index: 24;
  border-bottom: 1px solid #D9E4E8;
  background: #eef5f8;
}
.route-gradebook .gradebook .hps-row th,
.route-mapeh .gradebook .hps-row th {
  top: var(--gradebook-group-row-height);
  z-index: 21;
  box-shadow: inset 0 -1px 0 #D9E4E8;
}
.gradebook thead .sticky-col {
  z-index: 25;
}
.gradebook tbody .sticky-col {
  z-index: 4;
}

/* Grade 4–6 SF9 follows the supplied Elementary School Form 9 proportions. */
.sf9-profile-g46 { gap: 78px; padding: 24px 28px; }
.sf9-profile-g46 .sf9-side { font-size: 11.5px; line-height: 1.12; }
.sf9-profile-g46 .sf9-side h2 { margin: 9px 0 5px; font-size: 15px; }
.sf9-profile-g46 .sf9-form-label { margin-bottom: -2px; font-size: 11px; }
.sf9-profile-g46 .sf9-official-header { grid-template-columns: 58px 1fr 58px; gap: 6px; font-size: 11px; }
.sf9-profile-g46 .sf9-official-header img { width: 54px; height: 54px; }
.sf9-profile-g46 .sf9-learner-lines { margin: 3px 0 9px; gap: 4px 8px; }
.sf9-profile-g46 .sf9-parent-message { margin-bottom: 7px; font-size: 12px; }
.sf9-profile-g46 .sf9-parent-message p { margin: 3px 0; }
.sf9-profile-g46 .sf9-grades-table tbody tr { height: 23px; }
.sf9-profile-g46 .sf9-grades-table th,
.sf9-profile-g46 .sf9-grades-table td { padding: 2px 3px; font-size: 10.5px; }
.sf9-profile-g46 .sf9-grades-table .sf9-learning-area { font-size: 11px; }
.sf9-profile-g46 .sf9-component-row .sf9-learning-area { padding-left: 12px; font-style: italic; }
.sf9-profile-g46 .sf9-general-row { height: 25px !important; }
.sf9-profile-g46 .sf9-descriptor-title { margin-top: 10px !important; }
.sf9-profile-g46 .sf9-descriptor-table th,
.sf9-profile-g46 .sf9-descriptor-table td { padding: 1px 4px; font-size: 10.5px; }
.sf9-profile-g46 .sf9-attendance-table tbody tr,
.sf9-profile-g46 .sf9-attendance-table tbody td { height: 31px; }
.sf9-profile-g46 .sf9-comments div { height: 62px; }
.sf9-profile-g46 .sf9-parent-signatures { gap: 15px; margin: 18px 80px; }
.sf9-profile-g46 .sf9-official-signatures { margin: 38px 28px 20px; }
.sf9-profile-g46 .sf9-cancellation { margin: 25px 50px; }
.sf9-profile-g46 .sf9-cancel-signature { margin-top: 34px; }


/* v105: two-line MAPEH description and scrollbar-free action layout */
.route-mapeh .page-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}
.route-mapeh .page-heading > div:first-child { width: 100%; }
.route-mapeh .page-heading p {
  max-width: none;
  margin-top: 5px;
  white-space: normal;
}
.route-mapeh .heading-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 38px;
  align-items: stretch;
  width: 100%;
  max-width: none;
  gap: 8px;
  overflow: visible;
  padding: 0;
  margin: 0;
  scrollbar-width: none;
}
.route-mapeh .heading-actions::-webkit-scrollbar { display: none; }
.route-mapeh .heading-actions .mapeh-action-button {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  justify-content: center;
  padding: 8px 10px;
  font-size: 11px;
}
.route-mapeh .heading-actions .sheet-wide-toggle {
  width: 38px;
  min-width: 38px;
  height: 42px;
  align-self: stretch;
}
@media (max-width: 760px) {
  .route-mapeh .heading-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .route-mapeh .heading-actions .sheet-wide-toggle {
    width: 100%;
    min-width: 0;
  }
}
@media (max-width: 460px) {
  .route-mapeh .heading-actions { grid-template-columns: 1fr; }
}

/* v106: compact MAPEH actions aligned with the description */
.route-mapeh .page-heading {
  display: grid;
  grid-template-columns: minmax(430px, 1fr) auto;
  align-items: end;
  column-gap: 24px;
  row-gap: 10px;
}
.route-mapeh .page-heading > div:first-child {
  width: auto;
  min-width: 0;
}
.route-mapeh .page-heading p {
  max-width: 650px;
}
.route-mapeh .heading-actions {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  width: auto;
  max-width: none;
  gap: 8px;
  overflow: visible;
  padding: 0;
  margin: 0 0 1px;
}
.route-mapeh .heading-actions .mapeh-action-button {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  min-height: 42px;
  padding: 8px 18px;
  white-space: nowrap;
}
.route-mapeh .heading-actions .mapeh-action-button:first-child { min-width: 190px; }
.route-mapeh .heading-actions .mapeh-action-button:nth-child(2) { min-width: 168px; }
.route-mapeh .heading-actions .mapeh-action-button:nth-child(3) { min-width: 142px; }
.route-mapeh .heading-actions .sheet-wide-toggle {
  flex: 0 0 42px;
  width: 42px;
  min-width: 42px;
  height: 42px;
}
@media (max-width: 1220px) {
  .route-mapeh .page-heading {
    grid-template-columns: minmax(0, 1fr);
  }
  .route-mapeh .heading-actions {
    justify-content: flex-start;
  }
}
@media (max-width: 760px) {
  .route-mapeh .heading-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .route-mapeh .heading-actions .mapeh-action-button,
  .route-mapeh .heading-actions .mapeh-action-button:first-child,
  .route-mapeh .heading-actions .mapeh-action-button:nth-child(2),
  .route-mapeh .heading-actions .mapeh-action-button:nth-child(3),
  .route-mapeh .heading-actions .sheet-wide-toggle {
    width: 100%;
    min-width: 0;
  }
}
@media (max-width: 460px) {
  .route-mapeh .heading-actions { grid-template-columns: 1fr; }
}


/* v110: compact single-row JHS MAPEH summary controls */
@media (min-width: 1280px) {
  .route-mapeh .mapeh-controls.mapeh-controls-jhs-summary {
    grid-template-columns:minmax(320px,1.45fr) minmax(104px,.38fr) minmax(230px,.9fr) minmax(94px,.32fr) minmax(320px,1.08fr);
    align-items:end;
    gap:8px;
    padding:10px 12px;
  }
  .route-mapeh .mapeh-controls.mapeh-controls-jhs-summary .mapeh-connection {
    grid-column:auto;
    min-height:40px;
  }
  .route-mapeh .mapeh-controls.mapeh-controls-jhs-summary .mapeh-connection-copy > small {
    display:none;
  }
  .route-mapeh .mapeh-controls.mapeh-controls-jhs-summary .mapeh-progress {
    min-width:94px;
  }
}
@media (min-width: 1101px) and (max-width: 1279px) {
  .route-mapeh .mapeh-controls.mapeh-controls-jhs-summary {
    grid-template-columns:minmax(280px,1.35fr) minmax(100px,.38fr) minmax(210px,.9fr) auto;
  }
  .route-mapeh .mapeh-controls.mapeh-controls-jhs-summary .mapeh-connection {
    grid-column:1 / -1;
  }
}


/* v111: exact JHS consolidated form, two-by-two JHS E-Class actions, and balanced SF9 actions */
.route-gradebook .heading-actions:has(.jhs-eclass-actions) {
  display: block;
  width: min(560px, 46vw);
}
.jhs-eclass-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}
.jhs-eclass-actions .button {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  justify-content: center;
  padding-inline: 14px;
  white-space: nowrap;
}
.route-reports .heading-actions:has(.sf9-heading-actions) { display: block; }
.sf9-heading-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.sf9-heading-actions .button {
  width: 100%;
  min-width: 138px;
  justify-content: center;
  padding-left: 18px;
  padding-right: 18px;
}
@media (max-width: 820px) {
  .route-gradebook .heading-actions:has(.jhs-eclass-actions) { width: 100%; }
  .jhs-eclass-actions { grid-template-columns: 1fr; }
  .sf9-heading-actions { grid-template-columns: 1fr; width: 100%; }
  .sf9-heading-actions .button { min-width: 0; }
}


/* v112: JHS E-Class Record actions in one equal-width row below the description. */
.route-gradebook .page-heading:has(.jhs-eclass-actions) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
.route-gradebook .page-heading:has(.jhs-eclass-actions) > div:first-child {
  width: 100%;
}
.route-gradebook .heading-actions:has(.jhs-eclass-actions) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: center;
  gap: 9px;
  width: 100%;
}
.route-gradebook .heading-actions:has(.jhs-eclass-actions) .sheet-wide-toggle {
  width: 42px;
  height: 42px;
  border: 1px solid #cbd9e0;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.jhs-eclass-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  width: 100%;
}
.jhs-eclass-actions .button {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 8px 12px;
  justify-content: center;
  white-space: nowrap;
}
@media (max-width: 1180px) {
  .jhs-eclass-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .route-gradebook .heading-actions:has(.jhs-eclass-actions) {
    grid-template-columns: minmax(0, 1fr) 40px;
  }
  .jhs-eclass-actions { grid-template-columns: 1fr; }
}

/* DO 015 compliance additions — v118 */
.compliance-note,
.compliance-blocker {
  border: 1px solid var(--line, #D9E4E8);
  border-radius: 16px;
  background: #F5F8FA;
  padding: 14px 16px;
}
.compliance-note strong,
.compliance-blocker h2 { color: #242424; }
.compliance-note span { color: #636C77; }
.compliance-note { display: grid; gap: 4px; margin: 0 0 14px; }
.custom-weight-warning { border-color: #8FD6D3; background: #F5F8FA; }
.values-domain-note { border-color: #b9c9d5; background: #f5fafc; }
.compliance-blocker { max-width: 920px; display: grid; gap: 10px; }
.compliance-blocker h2, .compliance-blocker p { margin: 0; }
.domain-tag {
  display: inline-flex;
  margin-left: .3rem;
  padding: .08rem .3rem;
  border-radius: 999px;
  font-size: .62rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .04em;
  vertical-align: middle;
  background: rgba(81,106,145, .12);
  color: var(--ink-muted);
}

.dashboard-advisory-switch { display:flex; justify-content:flex-end; margin-bottom:14px; padding:12px 14px; }
.dashboard-advisory-switch label { display:grid; gap:5px; width:min(420px,100%); color:var(--muted); font-size:11px; font-weight:800; }
.dashboard-advisory-switch label small { font-size:10px; font-weight:650; }
@media (max-width: 820px) { .dashboard-advisory-switch { justify-content:stretch; } .dashboard-advisory-switch label { width:100%; } }

/* AcadMates v120 — compact single-row selectors and action controls. */
:where(
  .gradebook-controls,
  .smart-tools,
  .summary-toolbar,
  .sf9-controls,
  .sf2-workspace-toolbar,
  .sf5-toolbar,
  .sf8-toolbar,
  .record-controls,
  .analysis-controls,
  .mapeh-controls,
  .toolbar,
  .filter-row,
  .student-directory-toolbar,
  .dashboard-advisory-switch
) {
  flex-wrap: nowrap !important;
  min-width: 0;
}

/* Top action buttons always retain their intended order. */
.heading-actions {
  flex-wrap: nowrap !important;
  align-items: center;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
  scrollbar-width: thin;
}
.heading-actions > .button,
.heading-actions > .icon-button,
.heading-actions .smart-heading-button {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 7px 11px;
  border-radius: 9px;
  font-size: 10px;
  white-space: nowrap;
}
.heading-actions .sheet-wide-toggle {
  flex: 0 0 36px !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
}

/* Advisory selectors keep a stable position and no longer add a second help line. */
.advisory-selector-field {
  flex: 1 0 210px !important;
  min-width: 190px !important;
  max-width: 310px;
}
.advisory-selector-field small { display: none !important; }

/* Shared compact field and button dimensions within control bars. */
:where(
  .gradebook-controls,
  .smart-tools,
  .sf9-controls,
  .sf2-workspace-toolbar,
  .sf5-toolbar,
  .sf8-toolbar,
  .record-controls,
  .analysis-controls,
  .mapeh-controls,
  .dashboard-advisory-switch
) label {
  gap: 3px !important;
  margin: 0;
  color: var(--muted);
  font-size: 9.5px !important;
  font-weight: 800;
  line-height: 1.15;
}
:where(
  .gradebook-controls,
  .smart-tools,
  .sf9-controls,
  .sf2-workspace-toolbar,
  .sf5-toolbar,
  .sf8-toolbar,
  .record-controls,
  .analysis-controls,
  .mapeh-controls,
  .dashboard-advisory-switch
) :is(select, input) {
  min-height: 34px !important;
  height: 34px;
  padding: 5px 9px !important;
  border-radius: 8px;
  font-size: 10px !important;
}
:where(
  .smart-tools,
  .summary-toolbar,
  .record-controls,
  .analysis-controls,
  .mapeh-controls,
  .toolbar,
  .student-directory-toolbar
) .button {
  flex: 0 0 auto;
  min-height: 34px !important;
  height: 34px;
  padding: 6px 10px !important;
  border-radius: 8px;
  font-size: 10px !important;
  line-height: 1;
  white-space: nowrap;
}

/* E-Class Record selector row. */
.gradebook-controls {
  display: flex !important;
  align-items: flex-end;
  gap: 7px !important;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 3px;
}
.gradebook-controls > label:first-child { flex: 1 0 300px; }
.gradebook-controls > label:nth-child(2) { flex: 0 0 105px; }
.gradebook-controls > label:nth-child(3) { flex: 0 0 115px; }

/* Grade Sheet: advisory, term, and four actions stay on one line. */
.smart-tools {
  display: flex !important;
  align-items: flex-end;
  gap: 7px !important;
  padding: 9px 10px !important;
  overflow-x: auto;
  overflow-y: hidden;
}
.smart-tools > label:not(.advisory-selector-field) { flex: 0 0 105px; min-width: 105px; }
.smart-tools > .button { flex: 1 0 145px; min-width: 145px; width: auto !important; }

.summary-toolbar {
  display: flex !important;
  align-items: center;
  gap: 7px !important;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 3px;
}
.summary-tabs {
  flex: 0 0 auto;
  width: auto !important;
  gap: 4px;
  padding: 3px;
}
.summary-tabs button {
  flex: 0 0 auto !important;
  padding: 7px 10px;
  white-space: nowrap;
}

/* SF9 selector row: advisory, learner, paper, and grade-layer buttons. */
.sf9-controls {
  display: flex !important;
  align-items: flex-end;
  gap: 7px !important;
  padding: 9px 10px !important;
  overflow-x: auto;
  overflow-y: hidden;
}
.sf9-controls .sf9-learner-control { flex: 1 0 220px; min-width: 210px; }
.sf9-controls .sf9-paper-control { flex: 0 0 175px; min-width: 165px; }
.sf9-visibility-controls {
  flex: 1 0 390px;
  min-width: 390px;
  gap: 3px !important;
}
.sf9-visibility-controls > div {
  display: flex !important;
  flex-wrap: nowrap;
  gap: 4px !important;
  overflow: visible !important;
  padding: 0 !important;
}
.sf9-visibility-toggle {
  flex: 1 1 0;
  min-width: 70px;
  min-height: 34px;
  padding: 5px 7px;
  white-space: nowrap;
  font-size: 9px;
}
.sf9-heading-actions {
  display: flex !important;
  flex-wrap: nowrap;
  gap: 7px;
}
.sf9-heading-actions .button { min-width: 0 !important; }

/* SF2: advisory, month, selected-class context, and quick codes remain aligned. */
.sf2-workspace-toolbar {
  display: flex !important;
  align-items: center;
  gap: 7px !important;
  padding: 9px 10px !important;
  overflow-x: auto;
  overflow-y: hidden;
}
.sf2-workspace-toolbar > label:not(.advisory-selector-field) { flex: 0 0 150px; min-width: 145px; }
.sf2-workspace-class {
  flex: 1 0 205px;
  min-width: 205px;
  min-height: 34px;
  padding: 1px 9px;
}
.sf2-workspace-toolbar .sf2-code-legend {
  flex: 1 0 365px;
  min-width: 365px;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  gap: 6px 9px;
  white-space: nowrap;
  font-size: 9px;
}
.sf2-code-legend b { min-width: 19px; padding: 1px 4px; }

/* SF5 and SF8 keep added advisory selectors from shifting the remaining fields. */
.sf5-toolbar,
.sf8-toolbar {
  display: flex !important;
  align-items: flex-end;
  gap: 7px !important;
  padding: 9px 10px !important;
  overflow-x: auto;
  overflow-y: hidden;
}
.sf5-toolbar > label:not(.advisory-selector-field) { flex: 0 0 220px; min-width: 210px; }
.sf5-class-context {
  flex: 1 0 280px;
  min-width: 260px;
  min-height: 42px;
  padding: 0 0 0 10px !important;
  border-top: 0 !important;
  border-left: 1px solid var(--line) !important;
}
.sf5-class-context :is(span, small) { font-size: 9px; }
.sf5-class-context strong { font-size: 12px; }

.sf8-toolbar > label:not(.advisory-selector-field) { flex: 1 0 175px; min-width: 165px; }
.sf8-toolbar > label:nth-of-type(2) { flex-basis: 145px; min-width: 145px; }
.sf8-class-context {
  flex: 1 0 205px;
  min-width: 195px;
  min-height: 42px;
  padding: 0 0 0 10px !important;
  border-top: 0 !important;
  border-left: 1px solid var(--line) !important;
}
.sf8-class-context :is(span, small) { font-size: 9px; }
.sf8-class-context strong { font-size: 12px; }

/* LIR, Grade Slip, and analytics selector bars. */
.record-controls,
.analysis-controls {
  display: flex !important;
  align-items: flex-end;
  gap: 7px !important;
  padding: 9px 10px !important;
  overflow-x: auto;
  overflow-y: hidden;
  margin-bottom: 14px !important;
}
.record-controls label,
.analysis-controls label {
  flex: 1 0 210px !important;
  min-width: 200px !important;
}
.record-controls .form-help {
  flex: 1 0 285px;
  min-width: 270px;
  margin: 0 0 2px;
  font-size: 9px;
  line-height: 1.3;
}

/* MAPEH controls, including the optional summary selector and link action. */
.route-mapeh .mapeh-controls,
.route-mapeh .mapeh-controls.mapeh-controls-jhs-summary {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: flex-end !important;
  gap: 7px !important;
  padding: 9px 10px !important;
  overflow-x: auto;
  overflow-y: hidden;
}
.route-mapeh .mapeh-controls > label:first-child { flex: 1 0 285px; min-width: 260px; grid-column: auto !important; }
.route-mapeh .mapeh-controls > label:nth-child(2) { flex: 0 0 100px; min-width: 95px; }
.route-mapeh .mapeh-controls > label:nth-child(3) { flex: 0 0 195px; min-width: 185px; }
.route-mapeh .mapeh-progress { flex: 0 0 82px; min-width: 82px !important; min-height: 34px; }
.route-mapeh .mapeh-connection {
  flex: 1 0 285px;
  min-width: 270px;
  min-height: 34px !important;
  grid-column: auto !important;
}
.route-mapeh .mapeh-connection-copy > small { display: none; }

/* JHS and MAPEH heading action groups never collapse into a second row. */
.route-gradebook .heading-actions:has(.jhs-eclass-actions) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 36px !important;
  gap: 7px !important;
  width: 100% !important;
}
.jhs-eclass-actions {
  display: flex !important;
  flex-wrap: nowrap;
  gap: 7px !important;
  overflow-x: auto;
  overflow-y: hidden;
}
.jhs-eclass-actions .button {
  flex: 1 0 135px;
  min-width: 135px !important;
  min-height: 36px !important;
  padding: 7px 9px !important;
  font-size: 9.5px;
}
.route-mapeh .heading-actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end;
  overflow-x: auto !important;
  width: auto !important;
}
.route-mapeh .heading-actions .mapeh-action-button,
.route-mapeh .heading-actions .mapeh-action-button:first-child,
.route-mapeh .heading-actions .mapeh-action-button:nth-child(2),
.route-mapeh .heading-actions .mapeh-action-button:nth-child(3) {
  flex: 0 0 auto;
  width: auto !important;
  min-width: 0 !important;
  min-height: 36px !important;
  padding: 7px 11px !important;
  font-size: 9.5px;
}
.route-mapeh .heading-actions .sheet-wide-toggle {
  flex: 0 0 36px !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
}

/* General search/filter bars remain one compact line. */
.toolbar,
.student-directory-toolbar {
  align-items: center !important;
  flex-direction: row !important;
  gap: 7px !important;
  overflow-x: auto;
  overflow-y: hidden;
}
.filter-row { flex-wrap: nowrap !important; }
.filter-row select { min-width: 110px; min-height: 34px; padding: 5px 8px; font-size: 10px; }
.student-name-format-toggle,
.sf9-remarks-language-toggle {
  width: auto !important;
  min-height: 34px;
  padding: 5px 10px;
  border: 1px solid var(--line, #D9E4E8);
  border-radius: 10px;
  background: #fff;
  white-space: nowrap;
  font-size: 10px;
}
.sf9-remarks-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.sf9-remarks-heading h3 { margin:0; }

.dashboard-advisory-switch {
  justify-content: flex-end !important;
  align-items: flex-end;
  padding: 9px 10px !important;
}
.dashboard-advisory-switch .advisory-selector-field { width: min(310px, 100%); }

/* Narrow screens preserve one row through horizontal scrolling instead of misplacing controls. */
@media (max-width: 820px) {
  .page-heading,
  .route-smartsis .page-heading,
  .route-mapeh .page-heading {
    align-items: stretch;
  }
  .heading-actions,
  .page-heading.school-form-heading .heading-actions,
  .route-sf2 .page-heading.school-form-heading .heading-actions,
  .route-mapeh .heading-actions {
    width: 100% !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
  }
  .dashboard-advisory-switch { justify-content: flex-start !important; }
}


/* AcadMates v121 — MAPEH selector cleanup and intrinsic-width E-Class actions. */
/* The learner total is already shown inside the active MAPEH record, so the toolbar no longer reserves a duplicate count slot. */
.route-mapeh .mapeh-controls,
.route-mapeh .mapeh-controls.mapeh-controls-jhs-summary {
  padding-bottom: 9px !important;
}
.route-mapeh .mapeh-controls > label:first-child {
  flex: 1 1 300px;
  min-width: 230px;
}
.route-mapeh .mapeh-controls > label:nth-child(2) {
  flex: 0 0 96px;
  min-width: 92px;
}
.route-mapeh .mapeh-controls > label:nth-child(3) {
  flex: 0 1 190px;
  min-width: 165px;
}
.route-mapeh .mapeh-connection {
  flex: 1 1 300px;
  min-width: 245px;
}

/* JHS E-Class actions use only the width required by their icon and label. */
.route-gradebook .heading-actions:has(.jhs-eclass-actions) {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  justify-content: flex-start;
  gap: 7px !important;
  width: 100% !important;
  max-width: 100%;
  overflow-x: visible !important;
  overflow-y: visible !important;
  padding-bottom: 0;
}
.jhs-eclass-actions {
  display: flex !important;
  grid-template-columns: none !important;
  flex: 0 1 auto;
  flex-wrap: nowrap !important;
  gap: 7px !important;
  width: auto !important;
  min-width: 0;
  overflow: visible !important;
}
.jhs-eclass-actions .button {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 36px !important;
  padding: 7px 11px !important;
  justify-content: center;
  white-space: nowrap;
}
.route-gradebook .heading-actions:has(.jhs-eclass-actions) .sheet-wide-toggle {
  flex: 0 0 36px !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
}

@media (max-width: 760px) {
  .route-gradebook .heading-actions:has(.jhs-eclass-actions) {
    flex-wrap: wrap !important;
  }
  .jhs-eclass-actions {
    flex-wrap: wrap !important;
  }
}

/* AcadMates v122 — intrinsic action widths, right-aligned E-Class actions, and scrollbar-free control rows. */

/* Action rows must size from their labels, never create their own horizontal scrollbar, and retain logical order. */
.heading-actions,
.route-sf2 .heading-actions,
.page-heading.school-form-heading .heading-actions,
.route-sf2 .page-heading.school-form-heading .heading-actions,
.route-mapeh .heading-actions,
.route-gradebook .heading-actions:has(.jhs-eclass-actions),
.jhs-eclass-actions,
.sf9-heading-actions {
  overflow-x: visible !important;
  overflow-y: visible !important;
  scrollbar-width: none;
}
.heading-actions::-webkit-scrollbar,
.jhs-eclass-actions::-webkit-scrollbar,
.sf9-heading-actions::-webkit-scrollbar { display: none; }

.heading-actions :is(.button, .icon-button),
.jhs-eclass-actions .button,
.sf9-heading-actions .button {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none;
  white-space: nowrap !important;
}
.heading-actions .button,
.jhs-eclass-actions .button,
.sf9-heading-actions .button {
  min-height: 36px !important;
  padding: 7px 10px !important;
  gap: 6px;
  border-radius: 9px;
  font-size: 10px !important;
  line-height: 1.1;
}

/* Classes page: reserve a complete full-width action row so the first roster button can never be clipped. */
.route-classes .page-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.route-classes .page-heading > div:first-child { min-width: 0; }
.route-classes .heading-actions {
  width: 100%;
  max-width: 100%;
  justify-content: flex-end;
  flex-wrap: nowrap !important;
  padding: 0;
}
.route-classes .heading-actions .button {
  padding-inline: 11px !important;
}

/* E-Class actions occupy the right side like the School Forms actions. */
.route-gradebook .page-heading {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) auto;
  grid-template-rows: auto auto auto;
  column-gap: 18px;
  row-gap: 0;
  align-items: center;
}
.route-gradebook .page-heading > div:first-child { display: contents; }
.route-gradebook .page-heading .eyebrow { grid-column: 1; grid-row: 1; }
.route-gradebook .page-heading h1 { grid-column: 1; grid-row: 2; min-width: 0; }
.route-gradebook .page-heading p { grid-column: 1; grid-row: 3; min-width: 0; }
.route-gradebook .heading-actions:has(.jhs-eclass-actions) {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  justify-self: end;
  justify-content: flex-end !important;
  width: auto !important;
  max-width: none;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap !important;
}
.route-gradebook .jhs-eclass-actions {
  flex: 0 0 auto;
  justify-content: flex-end;
  flex-wrap: nowrap !important;
  width: auto !important;
}
.route-gradebook .jhs-eclass-actions .button { padding-inline: 9px !important; }

/* SF9 action text remains on one line. */
.sf9-heading-actions {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap !important;
  gap: 7px;
  width: auto;
  min-width: max-content;
}
.sf9-heading-actions .button {
  display: inline-flex;
  min-width: max-content !important;
}

/* Remove horizontal control-bar scrolling. Fields share the available width and wrap only when genuinely necessary. */
:where(
  .gradebook-controls,
  .smart-tools,
  .summary-toolbar,
  .sf9-controls,
  .sf2-workspace-toolbar,
  .sf5-toolbar,
  .sf8-toolbar,
  .record-controls,
  .analysis-controls,
  .mapeh-controls,
  .toolbar,
  .student-directory-toolbar,
  .dashboard-advisory-switch
) {
  overflow-x: visible !important;
  overflow-y: visible !important;
  scrollbar-width: none;
  max-width: 100%;
}
:where(
  .gradebook-controls,
  .smart-tools,
  .summary-toolbar,
  .sf9-controls,
  .sf2-workspace-toolbar,
  .sf5-toolbar,
  .sf8-toolbar,
  .record-controls,
  .analysis-controls,
  .mapeh-controls,
  .toolbar,
  .student-directory-toolbar,
  .dashboard-advisory-switch
)::-webkit-scrollbar { display: none; }

:where(
  .gradebook-controls,
  .smart-tools,
  .sf9-controls,
  .sf2-workspace-toolbar,
  .sf5-toolbar,
  .sf8-toolbar,
  .record-controls,
  .analysis-controls,
  .mapeh-controls
) > * {
  min-width: 0 !important;
}

/* Intrinsic button sizing inside non-heading action rows. */
:where(.smart-tools, .summary-toolbar, .toolbar, .student-directory-toolbar, .record-controls, .analysis-controls, .mapeh-controls) .button {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: max-content !important;
  padding-inline: 10px !important;
  white-space: nowrap !important;
}

/* Selector bars compress proportionally instead of forcing a scrollbar. */
.gradebook-controls > label:first-child { flex: 1 1 300px; min-width: 180px !important; }
.gradebook-controls > label:nth-child(2) { flex: 0 1 110px; min-width: 88px !important; }
.gradebook-controls > label:nth-child(3) { flex: 0 1 125px; min-width: 100px !important; }
.gradebook-controls .gradebook-unlink-button { flex: 0 0 auto !important; min-width: max-content !important; }
.smart-tools > label:not(.advisory-selector-field) { flex: 0 1 120px; min-width: 90px !important; }
.smart-tools > .button { flex: 0 0 auto !important; min-width: max-content !important; }

.sf2-workspace-toolbar > label:not(.advisory-selector-field) { flex: 0.8 1 150px; min-width: 110px !important; }
.sf2-workspace-class { flex: 1 1 205px; min-width: 155px !important; }
.sf2-workspace-toolbar .sf2-code-legend { flex: 1.2 1 365px; min-width: 250px !important; }

.sf5-toolbar > label:not(.advisory-selector-field) { flex: 1 1 210px; min-width: 150px !important; }
.sf5-class-context { flex: 1 1 270px; min-width: 190px !important; }

.sf8-toolbar > .advisory-selector-field { flex: 1.25 1 230px !important; min-width: 175px !important; max-width: none; }
.sf8-toolbar > label:nth-of-type(2) { flex: 0.75 1 160px; min-width: 130px !important; }
.sf8-toolbar > label:nth-of-type(n+3) { flex: 1 1 190px; min-width: 145px !important; }
.sf8-class-context { flex: 1.1 1 225px; min-width: 175px !important; }

.sf9-controls .advisory-selector-field { flex: 1 1 220px !important; min-width: 170px !important; max-width: none; }
.sf9-controls .sf9-learner-control { flex: 1.1 1 220px; min-width: 170px; }
.sf9-controls .sf9-paper-control { flex: 0.8 1 175px; min-width: 140px; }
.sf9-visibility-controls { flex: 1.4 1 390px; min-width: 290px; }

.record-controls label,
.analysis-controls label { flex: 1 1 210px !important; min-width: 155px !important; }
.record-controls .form-help { flex: 1.2 1 285px; min-width: 210px; }

.route-mapeh .mapeh-controls > label:first-child { flex: 1.4 1 300px; min-width: 190px !important; }
.route-mapeh .mapeh-controls > label:nth-child(2) { flex: 0.6 1 105px; min-width: 82px !important; }
.route-mapeh .mapeh-controls > label:nth-child(3) { flex: 0.8 1 190px; min-width: 135px !important; }
.route-mapeh .mapeh-controls .mapeh-component-total { flex: 0 1 125px; min-width: 100px !important; }
.route-mapeh .mapeh-controls .mapeh-unlink-button { flex: 0 0 auto !important; min-width: max-content !important; }
.route-mapeh .mapeh-connection { flex: 1.3 1 300px; min-width: 200px !important; }

/* At narrower widths, wrapping replaces scrolling. Buttons remain compact and readable. */
@media (max-width: 1320px) {
  .route-gradebook .page-heading {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
  }
  .route-gradebook .page-heading .eyebrow,
  .route-gradebook .page-heading h1,
  .route-gradebook .page-heading p { grid-column: 1; }
  .route-gradebook .heading-actions:has(.jhs-eclass-actions) {
    grid-column: 1;
    grid-row: 4;
    justify-self: end;
    margin-top: 10px;
  }
}

@media (max-width: 1100px) {
  :where(
    .gradebook-controls,
    .smart-tools,
    .summary-toolbar,
    .sf9-controls,
    .sf2-workspace-toolbar,
    .sf5-toolbar,
    .sf8-toolbar,
    .record-controls,
    .analysis-controls,
    .mapeh-controls,
    .toolbar,
    .student-directory-toolbar
  ) {
    flex-wrap: wrap !important;
  }
  .route-classes .heading-actions,
  .route-gradebook .heading-actions:has(.jhs-eclass-actions),
  .route-gradebook .jhs-eclass-actions,
  .page-heading.school-form-heading .heading-actions,
  .route-sf2 .page-heading.school-form-heading .heading-actions,
  .sf9-heading-actions,
  .route-mapeh .heading-actions {
    flex-wrap: wrap !important;
  }
}

@media (max-width: 760px) {
  .route-classes .heading-actions,
  .route-gradebook .heading-actions:has(.jhs-eclass-actions),
  .page-heading.school-form-heading .heading-actions,
  .route-sf2 .page-heading.school-form-heading .heading-actions,
  .route-mapeh .heading-actions {
    width: 100% !important;
    justify-content: flex-end !important;
  }
  .route-gradebook .jhs-eclass-actions,
  .sf9-heading-actions { justify-content: flex-end; }
}

/* Final v122 specificity correction: override the older v112 E-Class flex-column header. */
.route-gradebook .page-heading:has(.jhs-eclass-actions) {
  display: grid !important;
  grid-template-columns: minmax(360px, 1fr) auto !important;
  grid-template-rows: auto auto auto !important;
  flex-direction: initial !important;
  align-items: center !important;
  column-gap: 18px !important;
  row-gap: 0 !important;
}
.route-gradebook .page-heading:has(.jhs-eclass-actions) > div:first-child {
  display: contents !important;
  width: auto !important;
}
.route-gradebook .page-heading:has(.jhs-eclass-actions) .eyebrow { grid-column: 1; grid-row: 1; }
.route-gradebook .page-heading:has(.jhs-eclass-actions) h1 { grid-column: 1; grid-row: 2; }
.route-gradebook .page-heading:has(.jhs-eclass-actions) p { grid-column: 1; grid-row: 3; }
.route-gradebook .page-heading:has(.jhs-eclass-actions) .heading-actions {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
}
@media (max-width: 1320px) {
  .route-gradebook .page-heading:has(.jhs-eclass-actions) {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto !important;
  }
  .route-gradebook .page-heading:has(.jhs-eclass-actions) .heading-actions {
    grid-column: 1;
    grid-row: 4;
    justify-self: end;
    margin-top: 10px;
  }
}


/* AcadMates v123 — full-width single-row E-Class actions directly below the heading copy. */
.route-gradebook .page-heading:has(.jhs-eclass-actions) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto auto !important;
  align-items: start !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
}
.route-gradebook .page-heading:has(.jhs-eclass-actions) > div:first-child {
  display: contents !important;
  width: auto !important;
}
.route-gradebook .page-heading:has(.jhs-eclass-actions) .eyebrow {
  grid-column: 1 !important;
  grid-row: 1 !important;
}
.route-gradebook .page-heading:has(.jhs-eclass-actions) h1 {
  grid-column: 1 !important;
  grid-row: 2 !important;
}
.route-gradebook .page-heading:has(.jhs-eclass-actions) p {
  grid-column: 1 !important;
  grid-row: 3 !important;
  max-width: none;
}
.route-gradebook .page-heading:has(.jhs-eclass-actions) .heading-actions {
  grid-column: 1 !important;
  grid-row: 4 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 38px !important;
  align-items: stretch !important;
  justify-self: stretch !important;
  width: 100% !important;
  max-width: none !important;
  gap: 8px !important;
  margin: 12px 0 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}
.route-gradebook .page-heading:has(.jhs-eclass-actions) .jhs-eclass-actions {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  gap: 8px !important;
  overflow: visible !important;
}
.route-gradebook .page-heading:has(.jhs-eclass-actions) .jhs-eclass-actions .button {
  display: inline-flex !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  padding: 8px clamp(8px, 1vw, 14px) !important;
  justify-content: center !important;
  font-size: clamp(9px, .76vw, 11px) !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}
.route-gradebook .page-heading:has(.jhs-eclass-actions) .jhs-eclass-actions .button svg {
  flex: 0 0 auto;
}
.route-gradebook .page-heading:has(.jhs-eclass-actions) .sheet-wide-toggle {
  align-self: stretch !important;
  width: 38px !important;
  min-width: 38px !important;
  height: 42px !important;
}
@media (max-width: 980px) {
  .route-gradebook .page-heading:has(.jhs-eclass-actions) .heading-actions {
    grid-template-columns: minmax(0, 1fr) 36px !important;
    gap: 6px !important;
  }
  .route-gradebook .page-heading:has(.jhs-eclass-actions) .jhs-eclass-actions {
    gap: 6px !important;
  }
  .route-gradebook .page-heading:has(.jhs-eclass-actions) .jhs-eclass-actions .button {
    padding-inline: 7px !important;
    font-size: 8.8px !important;
  }
  .route-gradebook .page-heading:has(.jhs-eclass-actions) .sheet-wide-toggle {
    width: 36px !important;
    min-width: 36px !important;
  }
}
@media (max-width: 720px) {
  .route-gradebook .page-heading:has(.jhs-eclass-actions) .heading-actions {
    grid-template-columns: minmax(0, 1fr) 36px !important;
  }
  .route-gradebook .page-heading:has(.jhs-eclass-actions) .jhs-eclass-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


/* AcadMates v124 — aligned Classes header and creation-order class cards. */
.route-classes .page-heading {
  display: grid !important;
  grid-template-columns: minmax(500px, 1fr) auto !important;
  align-items: end !important;
  column-gap: 24px !important;
  row-gap: 0 !important;
  margin-bottom: 24px !important;
}
.route-classes .page-heading > div:first-child {
  min-width: 0 !important;
}
.route-classes .page-heading p {
  max-width: none !important;
  margin-top: 7px !important;
  line-height: 1.55 !important;
  white-space: normal !important;
}
.route-classes .heading-actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
  align-items: center !important;
  align-self: end !important;
  justify-self: end !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 0 2px !important;
  padding: 0 !important;
  gap: 8px !important;
  overflow: visible !important;
}
.route-classes .heading-actions .button {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: max-content !important;
  min-height: 40px !important;
  padding: 8px 12px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.route-classes .roster-grid,
.route-classes .class-grid {
  grid-auto-flow: row !important;
  justify-content: start !important;
  align-items: start !important;
}
@media (max-width: 1220px) {
  .route-classes .page-heading {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 14px !important;
  }
  .route-classes .heading-actions {
    width: 100% !important;
    justify-self: stretch !important;
    justify-content: flex-end !important;
  }
}
@media (max-width: 760px) {
  .route-classes .heading-actions {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }
  .route-classes .heading-actions .button {
    min-width: 0 !important;
  }
}


/* AcadMates v126 — MAPEH starts blank until explicitly added as a subject class. */

/* Strengthened Senior High School module — isolated from Elementary/JHS */
.sshs-status-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.sshs-status-strip > div {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--border-color, #ddd);
  border-radius: 12px;
  background: rgba(255,255,255,.55);
}
.sshs-status-strip span { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; opacity: .7; }
.sshs-status-strip strong { font-size: 14px; }
.sshs-class-profile {
  display: grid;
  gap: 3px;
  margin: 12px 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(24, 92, 66, .07);
}
.sshs-class-profile strong { font-size: 13px; }
.sshs-class-profile span,.sshs-class-profile small { font-size: 11px; color: var(--muted-text, #666); }
.sshs-assessment-profile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 14px 0;
}
.sshs-assessment-profile > div { display: grid; gap: 4px; }
.sshs-assessment-profile p { margin: 0; }
.sshs-gradebook-controls { grid-template-columns: minmax(320px, 2fr) repeat(3, minmax(130px, .7fr)) max-content; }
.sshs-gradebook-controls .gradebook-link-button,
.sshs-gradebook-controls .gradebook-unlink-button { align-self: end; min-width: 92px !important; white-space: nowrap; }
/* SSHS Grade Sheet context controls fill the whole panel on desktop instead of
   leaving unused space to the right of the Track field. */
.route-smartsis .smart-tools:has(#active-advisory-roster) {
  grid-template-columns: minmax(320px, 2.2fr) minmax(170px, 1fr) minmax(190px, 1fr) minmax(250px, 1.35fr);
  width: 100%;
}
.sshs-grade-sheet-controls {
  display: grid !important;
  grid-template-columns: minmax(340px, 2.3fr) minmax(180px, 1fr) minmax(210px, 1.1fr) minmax(290px, 1.6fr) !important;
  width: 100%;
  gap: 12px !important;
  overflow: visible !important;
}
.sshs-grade-sheet-controls > label {
  flex: initial !important;
  min-width: 0 !important;
  width: auto;
}
.sshs-gradebook th,.sshs-gradebook td { min-width: 74px; }
.sshs-gradebook .sticky-col { min-width: 260px; }
.sshs-gradebook .student-name > div,
.sshs-gradebook .student-name strong,
.sshs-gradebook .student-name small { text-align: left; }
.sshs-grade-sheet-table th small,.sshs-grade-sheet-table td small { display: block; margin-top: 4px; font-size: 10px; font-weight: 500; opacity: .72; }
.sshs-curriculum-settings .compliance-summary { margin-top: 14px; }
@media (max-width: 980px) {
  .sshs-status-strip { grid-template-columns: 1fr; }
  .sshs-gradebook-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .route-smartsis .smart-tools:has(#active-advisory-roster) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sshs-grade-sheet-controls { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .sshs-assessment-profile { align-items: flex-start; flex-direction: column; }
}
@media print {
  .route-gradebook .sidebar,.route-gradebook .topbar,.route-gradebook .bottom-nav,
  .route-gradebook .gradebook-controls,
  .route-gradebook .heading-actions,.route-gradebook .sshs-assessment-profile .tag { display: none !important; }
  .route-gradebook .view { padding: 0 !important; }
}


/* AcadMates v133 — SSHS navigation and dashboard alignment */
.sshs-dashboard-metrics{margin-bottom:24px}.sshs-dashboard-grid{align-items:start}.sshs-workflow-panel{grid-column:span 2}.sshs-workflow-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.sshs-workflow-card{display:flex;min-width:0;min-height:150px;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:10px;padding:20px;border:1px solid var(--line);border-radius:22px;background:var(--surface);text-align:left;cursor:pointer;transition:.18s ease}.sshs-workflow-card:hover{transform:translateY(-2px);border-color:var(--gold-500);box-shadow:var(--shadow-soft)}.sshs-workflow-card>span{display:grid;width:42px;height:42px;place-items:center;border-radius:13px;background:var(--blue-100);color:var(--teal-700)}.sshs-workflow-card svg{width:22px;height:22px}.sshs-workflow-card strong{font-size:16px}.sshs-workflow-card small{color:var(--muted);line-height:1.45}.sshs-forms-panel{grid-column:span 2}.sshs-form-shortcuts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.sshs-form-shortcuts button{display:flex;min-width:0;flex-direction:column;gap:5px;padding:15px 12px;border:1px solid var(--line);border-radius:16px;background:var(--surface);text-align:left;cursor:pointer}.sshs-form-shortcuts button:hover{border-color:var(--gold-500)}.sshs-form-shortcuts b{color:var(--teal-700);font-size:13px;letter-spacing:.08em}.sshs-form-shortcuts span{font-size:13px}.sshs-protection-panel{grid-column:span 2}.sf10-data-preview{overflow:hidden}.template-required-notice{border-style:dashed}.template-required-notice strong{display:block;margin-bottom:6px}.template-required-notice p{margin:0;color:var(--muted)}
@media(max-width:1180px){.sshs-workflow-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sshs-form-shortcuts{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.sshs-workflow-panel,.sshs-forms-panel,.sshs-protection-panel{grid-column:1}.sshs-workflow-grid{grid-template-columns:1fr}.sshs-form-shortcuts{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* AcadMates v151 — compact SSHS Grade Sheet controls, communication average, and repaired Excel output. */
.sshs-grade-sheet-controls {
  grid-template-columns: minmax(320px, 2.2fr) minmax(150px, .8fr) minmax(160px, .85fr) minmax(230px, 1.2fr) max-content !important;
  align-items: end;
}
.sshs-grade-sheet-controls > .sshs-review-links-button {
  width: auto !important;
  min-width: max-content !important;
  min-height: 44px;
  align-self: end;
}
.sis-source-badge.average,
.sis-grade-source.average {
  background: #eee8ff;
  color: #5d438b;
}
.sshs-communication-average-cell {
  background: #faf8ff;
}
@media (max-width: 1120px) {
  .sshs-grade-sheet-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .sshs-grade-sheet-controls > .sshs-review-links-button {
    width: 100% !important;
  }
}
@media (max-width: 620px) {
  .sshs-grade-sheet-controls {
    grid-template-columns: 1fr !important;
  }
}

/* AcadMates v155 — balanced SSHS E-Class profile cards and exact summary workflow. */
.sshs-eclass-profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin: 14px 0;
}
.sshs-eclass-profile-grid.has-grade-source {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.sshs-eclass-profile-grid > .panel {
  min-width: 0;
  min-height: 118px;
  margin: 0;
  padding: 16px 18px;
}
.sshs-eclass-profile-grid .sshs-assessment-profile {
  align-items: center;
}
.sshs-eclass-profile-grid .eyebrow {
  font-size: 10px;
  letter-spacing: .08em;
}
.sshs-eclass-profile-grid strong {
  font-size: 16px;
  line-height: 1.25;
}
.sshs-eclass-profile-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.sshs-eclass-profile-grid .tag {
  flex: 0 0 auto;
  max-width: 170px;
  padding: 6px 10px;
  font-size: 10px;
  text-align: center;
}
.sshs-eclass-profile-grid .button {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 9px 14px;
  font-size: 12px;
  white-space: nowrap;
}
@media (max-width: 980px) {
  .sshs-eclass-profile-grid.has-grade-source { grid-template-columns: 1fr; }
  .sshs-eclass-profile-grid > .panel { min-height: auto; }
}
@media (max-width: 620px) {
  .sshs-eclass-profile-grid .sshs-assessment-profile { align-items: stretch; flex-direction: column; }
  .sshs-eclass-profile-grid .tag { max-width: none; align-self: flex-start; }
  .sshs-eclass-profile-grid .button { width: 100%; }
}

/* v157: exact attached SSHS SF9 screen preview and adaptive subject rows. */
.sf9-profile-sshs .sf9-form-label { margin: 0 0 4px; font-size: 12px; font-style: italic; font-weight: 400; letter-spacing: 0; }
.sf9-profile-sshs .sf9-official-header { margin-bottom: 5px; }
.sf9-profile-sshs .sf9-official-header > div { font-size: 11px; line-height: 1.06; }
.sf9-profile-sshs .sf9-learner-lines { margin-bottom: 4px; }
.sf9-track-line { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: end; margin: 0 0 11px; }
.sf9-track-line b { min-width: 0; padding: 0 5px 2px; border-bottom: 1px solid #111; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf9-sshs-grades-table tbody tr { height: 25px; }
.sf9-sshs-grades-table .sf9-subject-section-row { height: 19px; }
.sf9-sshs-grades-table .sf9-subject-section-row th { padding: 2px 5px; background: #f2f2f2; text-align: left; font-size: 10px; font-weight: 900; letter-spacing: .02em; }
.sf9-sshs-grades-table .sf9-component-row { height: 22px; }
.sf9-sshs-grades-table .sf9-component-row .sf9-learning-area { padding-left: 34px; font-size: 11px; font-style: italic; }
.sf9-sshs-grades-table .sf9-component-row .sf9-grade-ink { display: block; width: 100%; padding-right: 2px; text-align: right; font-style: italic; }
.sf9-sshs-grades-table .sf9-component-row .sf9-final-data:last-child { color: transparent; }
.sf9-sshs-grades-table .sf9-learning-area { overflow-wrap: anywhere; }
.sf9-profile-sshs .sf9-descriptor-title { margin-top: 8px !important; }
.sf9-profile-sshs .sf9-descriptor-table th,
.sf9-profile-sshs .sf9-descriptor-table td { font-size: 10px; }
.sf9-profile-sshs .sf9-comments div { height: 58px; }
.sf9-profile-sshs .sf9-parent-signatures { margin-top: 17px; margin-bottom: 17px; }
.sf9-profile-sshs .sf9-parent-signatures div { grid-template-columns: 82px 1fr; }
.sf9-profile-sshs .sf9-parent-signatures b { padding-right: 6px; text-align: right; }
@media (max-width: 820px) {
  .sf9-profile-sshs .sf9-track-line { margin-bottom: 8px; }
}

/* v158 SSHS advisory subject planning and editable Grade Sheet subjects */
.sshs-unit-editor {
  display: grid;
  grid-template-columns: minmax(180px, 1.5fr) repeat(4, minmax(90px, .65fr));
  gap: 12px;
  align-items: end;
  padding: 14px;
  border: 1px solid rgba(143,214,211, .34);
  border-radius: 16px;
  background: rgba(143,214,211, .055);
}
.sshs-unit-editor > div { align-self: center; }
.sshs-unit-editor > div strong,
.sshs-unit-editor > div small { display: block; }
.sshs-unit-editor > div small { margin-top: 4px; color: var(--muted); }
.sshs-unit-editor label { margin: 0; }
.sshs-unit-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.sshs-unit-summary span,
.sshs-unit-summary strong {
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--blue-50);
  font-size: .74rem;
  line-height: 1;
}
.sshs-unit-summary strong { color: var(--teal-700); background: rgba(143,214,211, .13); }
.sshs-grade-subject-heading {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 7px;
}
.sshs-grade-subject-heading > span { min-width: 0; }
.sshs-subject-edit {
  border: 1px solid rgba(143,214,211, .45);
  background: rgba(255,255,255,.9);
  color: var(--teal-700);
  border-radius: 999px;
  padding: 3px 7px;
  font: inherit;
  font-size: .67rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
}
.sshs-subject-edit:hover { background: var(--gold-500); color: #1f1f1f; }
.sshs-advisory-subject-planner {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid rgba(143,214,211, .36);
  border-radius: 18px;
  background: rgba(143,214,211, .045);
}
.sshs-subject-planner-heading {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 14px;
}
.sshs-subject-planner-heading strong,
.sshs-subject-planner-heading small { display: block; }
.sshs-subject-planner-heading small { margin-top: 4px; color: var(--muted); max-width: 680px; }
.sshs-subject-planner-heading > span {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(143,214,211, .15);
  color: var(--teal-700);
  font-size: .75rem;
  font-weight: 800;
}
.sshs-advisory-elective-list {
  max-height: 320px;
  overflow: auto;
  padding-right: 6px;
}
.sshs-advisory-subject-group { margin: 0 0 15px; }
.sshs-advisory-subject-group:last-child { margin-bottom: 0; }
.sshs-advisory-subject-group h4 {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: .75rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.sshs-advisory-subject {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin: 0 0 7px;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
}
.sshs-advisory-subject:hover { border-color: rgba(143,214,211, .55); }
.sshs-advisory-subject.required { background: rgba(143,214,211, .08); cursor: default; }
.sshs-advisory-subject input { margin: 0; width: 16px; height: 16px; }
.sshs-advisory-subject span strong,
.sshs-advisory-subject span small { display: block; }
.sshs-advisory-subject span strong { font-size: .86rem; }
.sshs-advisory-subject span small { margin-top: 2px; color: var(--muted); font-size: .72rem; }
.sshs-advisory-subject em {
  font-style: normal;
  color: var(--teal-700);
  font-size: .69rem;
  font-weight: 800;
}
.sshs-advisory-elective { grid-template-columns: minmax(0, 1fr) auto; cursor: default; }
.sshs-advisory-subject-main { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; cursor: pointer; }
.sshs-advisory-term-choices { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.sshs-advisory-term-choices label { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-raised, var(--surface)); font-size: .7rem; font-weight: 800; cursor: pointer; }
.sshs-advisory-term-choices input:disabled + * { opacity: .5; }
.sshs-term-not-offered { background: rgba(107,114,128,.1); }
.sshs-advisory-custom-group {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.sshs-advisory-custom-subject { border-style: dashed; }
.sshs-advisory-custom-subject-main {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.sshs-advisory-custom-subject-main span { min-width: 0; }
.sshs-advisory-custom-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-top: 9px;
}
.sshs-advisory-custom-add input {
  width: 100%;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
.sshs-advisory-custom-empty,
.sshs-advisory-custom-help {
  display: block;
  color: var(--muted);
  font-size: .72rem;
}
.sshs-advisory-custom-help { margin-top: 7px; }
@media (max-width: 900px) {
  .sshs-unit-editor { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sshs-unit-editor > div { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .sshs-unit-editor { grid-template-columns: 1fr; }
  .sshs-subject-planner-heading { flex-direction: column; }
  .sshs-advisory-subject { grid-template-columns: auto minmax(0, 1fr); }
  .sshs-advisory-subject em { grid-column: 2; }
  .sshs-advisory-elective { grid-template-columns: 1fr; }
  .sshs-advisory-term-choices { justify-content: flex-start; padding-left: 26px; }
  .sshs-advisory-custom-add { grid-template-columns: 1fr; }
}

/* v159 SSHS SF9 print, grade-layer, and formatting repair */


/* AcadMates v160 — compact SSHS subject units and advisory-isolated Grade Sheets. */
#class-form .sshs-unit-editor {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
  padding: 11px 12px;
  overflow: hidden;
}
#class-form .sshs-unit-editor-copy {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
#class-form .sshs-unit-editor-copy strong { font-size: 13px; }
#class-form .sshs-unit-editor-copy small {
  margin: 0;
  font-size: 9px;
  line-height: 1.3;
  text-align: right;
}
#class-form .sshs-unit-editor label {
  display: grid;
  min-width: 0;
  gap: 5px;
  font-size: 10px;
}
#class-form .sshs-unit-editor input {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 7px 9px;
  font-size: 13px;
}
.sshs-advisory-grade-sheet-switcher {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
  padding: 14px;
  overflow: hidden;
}
.sshs-advisory-grade-sheet-switcher-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.sshs-advisory-grade-sheet-switcher-heading h2 {
  margin: 2px 0 3px;
  font-size: 16px;
}
.sshs-advisory-grade-sheet-switcher-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.4;
}
.sshs-advisory-grade-sheet-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 9px;
}
.sshs-advisory-grade-sheet-tab {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  color: var(--ink);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.sshs-advisory-grade-sheet-tab:hover {
  border-color: var(--gold-500);
  box-shadow: var(--shadow-soft);
}
.sshs-advisory-grade-sheet-tab.active {
  border-color: #516A91;
  background: #F5F8FA;
  box-shadow: inset 0 0 0 1px rgba(81,106,145,.18);
}
.sshs-advisory-grade-sheet-tab span {
  color: #2F817B;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sshs-advisory-grade-sheet-tab strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sshs-advisory-grade-sheet-tab small {
  overflow: hidden;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sshs-grade-sheet-controls {
  grid-template-columns: minmax(150px, .8fr) minmax(150px, .8fr) minmax(190px, 1fr) max-content !important;
}
@media (max-width: 700px) {
  #class-form .sshs-unit-editor { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #class-form .sshs-unit-editor-copy { display: grid; }
  #class-form .sshs-unit-editor-copy small { text-align: left; }
  .sshs-advisory-grade-sheet-switcher-heading { align-items: stretch; flex-direction: column; }
  .sshs-advisory-grade-sheet-tabs { grid-template-columns: 1fr; }
}
@media (max-width: 1120px) {
  .sshs-grade-sheet-controls { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 620px) {
  .sshs-grade-sheet-controls { grid-template-columns: 1fr !important; }
}


/* AcadMates v161 — only SSHS communication component rows use italic, right-indented grades. */

/* AcadMates v163 — one-line SSHS Grade Sheet control and action bar. */
.sshs-grade-sheet-action-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 14px;
  padding: 10px 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.sshs-grade-sheet-action-row::-webkit-scrollbar { display: none; }
.sshs-grade-sheet-action-row > .sshs-grade-sheet-controls,
.sshs-grade-sheet-action-row > .summary-toolbar {
  display: contents !important;
}
.sshs-grade-sheet-action-row label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}
.sshs-grade-sheet-action-row label:nth-child(1) { flex: 0 1 150px; min-width: 118px; }
.sshs-grade-sheet-action-row label:nth-child(2) { flex: 0 1 140px; min-width: 112px; }
.sshs-grade-sheet-action-row label:nth-child(3) { flex: 1 1 230px; min-width: 170px; }
.sshs-grade-sheet-action-row select,
.sshs-grade-sheet-action-row input,
.sshs-grade-sheet-action-row .button {
  min-height: 42px;
}
.sshs-grade-sheet-action-row .sshs-review-links-button,
.sshs-grade-sheet-action-row .sshs-add-subject-button {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: max-content !important;
  padding-inline: 12px !important;
  white-space: nowrap;
}
.sshs-grade-sheet-action-row .summary-tabs {
  flex: 0 0 auto;
  align-self: end;
  width: auto !important;
  margin: 0;
}
.sshs-grade-sheet-action-row .summary-tabs button {
  min-height: 34px;
  padding: 7px 10px;
  white-space: nowrap;
}
@media (max-width: 1180px) {
  .sshs-grade-sheet-action-row {
    flex-wrap: wrap;
    overflow: visible;
  }
  .sshs-grade-sheet-action-row label:nth-child(3) { flex: 1 1 220px; }
}
@media (max-width: 720px) {
  .sshs-grade-sheet-action-row {
    align-items: stretch;
  }
  .sshs-grade-sheet-action-row label {
    flex: 1 1 calc(50% - 8px) !important;
    min-width: 145px !important;
  }
  .sshs-grade-sheet-action-row .summary-tabs {
    display: flex;
    flex: 1 1 100%;
  }
  .sshs-grade-sheet-action-row .summary-tabs button { flex: 1 1 0 !important; }
}

/* AcadMates v165 — edge-to-edge SSHS Grade Sheet toolbar groups. */
.sshs-grade-sheet-action-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(28px, 4vw, 88px);
  width: 100%;
  overflow: visible;
}
.sshs-grade-sheet-action-row > .sshs-grade-sheet-controls {
  display: grid !important;
  grid-template-columns: minmax(124px, 158px) minmax(138px, 1fr) minmax(190px, 1.35fr) max-content !important;
  align-items: end;
  gap: 8px;
  flex: 1 1 760px;
  min-width: 0;
  max-width: 1040px;
  margin: 0;
  padding: 0;
}
.sshs-grade-sheet-action-row > .summary-toolbar {
  display: flex !important;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 12px;
  flex: 0 0 auto;
  width: auto !important;
  margin: 0 !important;
  padding: 0;
  flex-wrap: nowrap;
}
.sshs-grade-sheet-action-row > .sshs-grade-sheet-controls > label,
.sshs-grade-sheet-action-row > .sshs-grade-sheet-controls > .sshs-review-links-button {
  width: 100%;
}
.sshs-grade-sheet-action-row > .sshs-grade-sheet-controls > .sshs-review-links-button {
  align-self: end;
}
.sshs-grade-sheet-action-row > .summary-toolbar .summary-tabs,
.sshs-grade-sheet-action-row > .summary-toolbar .sshs-add-subject-button {
  flex: 0 0 auto;
}
@media (max-width: 1380px) {
  .sshs-grade-sheet-action-row {
    flex-wrap: wrap;
    gap: 14px;
  }
  .sshs-grade-sheet-action-row > .sshs-grade-sheet-controls,
  .sshs-grade-sheet-action-row > .summary-toolbar {
    flex: 1 1 100%;
    max-width: none;
  }
  .sshs-grade-sheet-action-row > .summary-toolbar {
    justify-content: flex-end;
  }
}
@media (max-width: 820px) {
  .sshs-grade-sheet-action-row > .sshs-grade-sheet-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .sshs-grade-sheet-action-row > .summary-toolbar {
    justify-content: stretch;
    flex-wrap: wrap;
  }
  .sshs-grade-sheet-action-row > .summary-toolbar .summary-tabs {
    display: flex;
    flex: 1 1 100%;
  }
  .sshs-grade-sheet-action-row > .summary-toolbar .summary-tabs button {
    flex: 1 1 0 !important;
  }
  .sshs-grade-sheet-action-row > .summary-toolbar .sshs-add-subject-button {
    flex: 1 1 100% !important;
    justify-content: center;
  }
}
@media (max-width: 520px) {
  .sshs-grade-sheet-action-row > .sshs-grade-sheet-controls {
    grid-template-columns: 1fr !important;
  }
}

/* AcadMates v167 — evenly aligned SSHS Grade Sheet controls and readable component labels. */
@media (min-width: 1381px) {
  .sshs-grade-sheet-action-row {
    align-items: flex-end;
  }
  .sshs-grade-sheet-action-row > .sshs-grade-sheet-controls,
  .sshs-grade-sheet-action-row > .summary-toolbar {
    align-items: flex-end;
  }
  .sshs-grade-sheet-action-row select,
  .sshs-grade-sheet-action-row input,
  .sshs-grade-sheet-action-row .sshs-review-links-button,
  .sshs-grade-sheet-action-row .sshs-add-subject-button {
    box-sizing: border-box;
    height: 50px;
    min-height: 50px;
  }
  .sshs-grade-sheet-action-row .summary-tabs {
    display: flex;
    align-items: stretch;
    box-sizing: border-box;
    height: 50px;
    min-height: 50px;
    padding: 4px;
  }
  .sshs-grade-sheet-action-row .summary-tabs button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 42px;
    min-height: 42px;
    margin: 0;
  }
}
.sshs-grade-sheet-table th > small:first-of-type {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}
/* v167 alignment correction: remove inherited Smart Tools inner padding so all visible controls share one baseline. */
@media (min-width: 1381px) {
  .sshs-grade-sheet-action-row > .sshs-grade-sheet-controls {
    padding: 0 !important;
  }
}

/* AcadMates v172 — unified modern two-up Grade Slip for Elementary, JHS, and SSHS. */
.grade-slip-landscape-sheet {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  width: min(100%, 1360px);
  max-width: 1360px;
  margin: 0 auto;
  padding: 18px;
  background: #e8e8e5;
  border: 1px solid #D9E4E8;
  border-radius: 24px;
  box-shadow: var(--shadow-sm);
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}
.grade-slip-exact.grade-slip-print-copy {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 610px;
  flex-direction: column;
  overflow: hidden;
  padding: 22px 24px 20px;
  color: #171717;
  background: #fff;
  border: 1px solid #D9E4E8;
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(21,31,59, .08);
}
.grade-slip-exact + .grade-slip-exact { border-left: 1px solid #D9E4E8; }
.grade-slip-accent {
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: linear-gradient(90deg, #516A91, #8FD6D3 54%, #E4F2F5);
}
.grade-slip-exact-header {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 6px 0 14px;
  padding-bottom: 12px;
  text-align: left;
  border-bottom: 1px solid #D9E4E8;
}
.grade-slip-logo-frame {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border: 1px solid #D9E4E8;
  border-radius: 14px;
  background: #F5F8FA;
}
.grade-slip-exact-header img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}
.grade-slip-heading-copy { min-width: 0; }
.grade-slip-heading-copy > span {
  display: block;
  margin-bottom: 3px;
  color: #2F817B;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.grade-slip-exact-header h2 {
  margin: 0;
  overflow: hidden;
  color: #171717;
  font-size: 16px;
  line-height: 1.12;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.grade-slip-exact-header p {
  margin: 4px 0 0;
  color: #696966;
  font-size: 11px;
  font-weight: 650;
}
.grade-slip-identity {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(120px, .78fr) minmax(150px, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.grade-slip-identity > div {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid #D9E4E8;
  border-radius: 10px;
  background: #F5F8FA;
}
.grade-slip-identity span {
  display: block;
  margin-bottom: 3px;
  color: #636C77;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.grade-slip-identity strong {
  display: block;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.grade-slip-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 10px;
  color: #171717;
  background: #F5F8FA;
  border: 1px solid #D9E4E8;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
}
.grade-slip-section-title span {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .025em;
  text-transform: uppercase;
}
.grade-slip-section-title small {
  color: #516A91;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.grade-slip-exact-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 10px;
}
.grade-slip-exact-table col.gs-col-subject { width: 43%; }
.grade-slip-exact-table col.gs-col-term { width: 7.5%; }
.grade-slip-exact-table col.gs-col-final { width: 11.5%; }
.grade-slip-exact-table col.gs-col-remarks { width: 23%; }
.grade-slip-exact-table th,
.grade-slip-exact-table td {
  height: 25px;
  padding: 3px 4px;
  border: 1px solid #636C77;
  line-height: 1.12;
  text-align: center;
  vertical-align: middle;
}
.grade-slip-exact-table thead th {
  color: #222;
  background: #F5F8FA;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 8.5px;
  font-weight: 850;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.grade-slip-exact-table .gs-subject {
  overflow-wrap: anywhere;
  text-align: left;
  text-transform: none;
  font-size: 9.3px;
  font-weight: 600;
}
.grade-slip-exact-table .gs-final,
.grade-slip-exact-table .gs-remark { font-weight: 800; }
.grade-slip-exact-table .gs-remark { font-family: Arial, Helvetica, sans-serif; font-size: 8px; letter-spacing: .025em; }
.grade-slip-exact-table .failed { color: #8a1c1c; }
.grade-slip-exact-table .gs-general-average th {
  height: 29px;
  color: #171717;
  background: #F5F8FA;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.grade-slip-exact-table .gs-general-average th:nth-last-child(2) { font-size: 12px; }
.grade-slip-exact-table .gs-general-average th:last-child { padding-inline: 2px; font-size: 8px; white-space: nowrap; }
.grade-slip-exact-footer {
  display: flex;
  min-height: 62px;
  align-items: flex-end;
  justify-content: center;
  margin-top: auto;
  padding-top: 14px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  text-align: center;
}
.grade-slip-signature-line { width: min(72%, 260px); }
.grade-slip-exact-footer strong {
  display: block;
  padding: 0 8px 3px;
  border-bottom: 1px solid #171717;
  text-decoration: none;
  text-transform: uppercase;
}
.grade-slip-exact-footer span {
  display: block;
  margin-top: 3px;
  color: #636C77;
  font-size: 8.5px;
  font-weight: 700;
}
.grade-slip-density-compact .grade-slip-exact-table th,
.grade-slip-density-compact .grade-slip-exact-table td { height: 23px; padding-block: 2px; }
.grade-slip-density-compact .grade-slip-exact-table .gs-subject { font-size: 8.8px; }
.grade-slip-density-dense .grade-slip-exact-header { margin-bottom: 9px; padding-bottom: 9px; }
.grade-slip-density-dense .grade-slip-identity { margin-bottom: 8px; }
.grade-slip-density-dense .grade-slip-identity > div { padding-block: 6px; }
.grade-slip-density-dense .grade-slip-exact-table th,
.grade-slip-density-dense .grade-slip-exact-table td { height: 20px; padding: 1.5px 3px; }
.grade-slip-density-dense .grade-slip-exact-table .gs-subject { font-size: 8.1px; line-height: 1.04; }
.grade-slip-density-dense .grade-slip-exact-table .gs-remark { font-size: 7.2px; }
.grade-slip-density-dense .grade-slip-exact-footer { min-height: 48px; padding-top: 8px; }
@media (max-width: 980px) {
  .grade-slip-landscape-sheet { grid-template-columns: 1fr; }
  .grade-slip-exact + .grade-slip-exact { border-top: 1px solid #D9E4E8; }
}
@media print {
  @page { size: 13in 8.5in; margin: .24in; }
  .grade-slip-landscape-sheet,
  .grade-slip-landscape-sheet * { visibility: visible !important; }
  .grade-slip-landscape-sheet {
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .16in !important;
    width: 12.52in !important;
    height: 8.02in !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .grade-slip-landscape-sheet .grade-slip-exact.grade-slip-print-copy {
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 8.02in !important;
    margin: 0 !important;
    padding: .18in .20in .14in !important;
    overflow: hidden !important;
    border: .8pt solid #777 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    break-inside: avoid !important;
  }
  .grade-slip-landscape-sheet .grade-slip-accent { height: .045in !important; }
  .grade-slip-landscape-sheet .grade-slip-exact-header {
    grid-template-columns: .49in minmax(0, 1fr) !important;
    gap: .08in !important;
    margin: .02in 0 .09in !important;
    padding-bottom: .08in !important;
  }
  .grade-slip-landscape-sheet .grade-slip-logo-frame { width: .46in !important; height: .46in !important; border-radius: .07in !important; }
  .grade-slip-landscape-sheet .grade-slip-exact-header img { width: .39in !important; height: .39in !important; }
  .grade-slip-landscape-sheet .grade-slip-heading-copy > span { margin-bottom: .02in !important; font-size: 6.4pt !important; }
  .grade-slip-landscape-sheet .grade-slip-exact-header h2 { font-size: 10pt !important; }
  .grade-slip-landscape-sheet .grade-slip-exact-header p { margin-top: .02in !important; font-size: 6.8pt !important; }
  .grade-slip-landscape-sheet .grade-slip-identity { grid-template-columns: 1.45fr .78fr 1fr !important; gap: .05in !important; margin-bottom: .08in !important; }
  .grade-slip-landscape-sheet .grade-slip-identity > div { padding: .045in .06in !important; border-radius: .05in !important; }
  .grade-slip-landscape-sheet .grade-slip-identity span { margin-bottom: .01in !important; font-size: 5.2pt !important; }
  .grade-slip-landscape-sheet .grade-slip-identity strong { font-size: 6.8pt !important; }
  .grade-slip-landscape-sheet .grade-slip-section-title { padding: .04in .06in !important; border-radius: .05in .05in 0 0 !important; }
  .grade-slip-landscape-sheet .grade-slip-section-title span { font-size: 6.6pt !important; }
  .grade-slip-landscape-sheet .grade-slip-section-title small { font-size: 5.2pt !important; }
  .grade-slip-landscape-sheet .grade-slip-exact-table { font-size: 6.7pt !important; }
  .grade-slip-landscape-sheet .grade-slip-exact-table th,
  .grade-slip-landscape-sheet .grade-slip-exact-table td { height: .205in !important; padding: .015in .025in !important; }
  .grade-slip-landscape-sheet .grade-slip-exact-table thead th { font-size: 5.7pt !important; }
  .grade-slip-landscape-sheet .grade-slip-exact-table .gs-subject { font-size: 6.2pt !important; }
  .grade-slip-landscape-sheet .grade-slip-exact-table .gs-remark { font-size: 5.3pt !important; }
  .grade-slip-landscape-sheet .grade-slip-exact-table .gs-general-average th { height: .23in !important; font-size: 6pt !important; }
  .grade-slip-landscape-sheet .grade-slip-exact-table .gs-general-average th:nth-last-child(2) { font-size: 8pt !important; }
  .grade-slip-landscape-sheet .grade-slip-exact-table .gs-general-average th:last-child { font-size: 5.2pt !important; }
  .grade-slip-landscape-sheet .grade-slip-exact-footer { min-height: .47in !important; padding-top: .08in !important; font-size: 6.5pt !important; }
  .grade-slip-landscape-sheet .grade-slip-exact-footer span { font-size: 5.5pt !important; }
  .grade-slip-landscape-sheet .grade-slip-density-dense .grade-slip-exact-header { margin-bottom: .055in !important; padding-bottom: .055in !important; }
  .grade-slip-landscape-sheet .grade-slip-density-dense .grade-slip-identity { margin-bottom: .05in !important; }
  .grade-slip-landscape-sheet .grade-slip-density-dense .grade-slip-exact-table th,
  .grade-slip-landscape-sheet .grade-slip-density-dense .grade-slip-exact-table td { height: .176in !important; padding-block: .008in !important; }
  .two-up-print-sheet:not(.grade-slip-landscape-sheet) { display: none !important; }
}


/* AcadMates v173 — page-filling centered Grade Slip and SSHS SF9 subject structure. */
.grade-slip-landscape-sheet {
  aspect-ratio: 13 / 8.5;
  align-items: stretch;
  justify-content: center;
}
.grade-slip-exact.grade-slip-print-copy {
  height: 100%;
  min-height: 0;
}
.grade-slip-exact-table .gs-section-row th {
  height: 25px;
  padding: 3px 7px;
  color: #2b2a27;
  background: #F5F8FA;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 8.4px;
  font-weight: 900;
  letter-spacing: .055em;
  text-align: left;
  text-transform: uppercase;
}
.grade-slip-exact-table .gs-subject-row td { height: 38px; }
.grade-slip-exact-table .gs-component-row .gs-subject {
  padding-left: 20px;
  font-style: italic;
  font-weight: 500;
}
.grade-slip-exact-table .gs-component-row .gs-term-grade,
.grade-slip-exact-table .gs-component-row .gs-final {
  padding-right: 10px;
  font-style: italic;
  text-align: right;
}
.grade-slip-exact-table .gs-component-row .gs-remark { font-style: normal; }
.grade-slip-exact-table .gs-communication-average-row .gs-subject,
.grade-slip-exact-table .gs-communication-average-row .gs-final { font-weight: 800; }
.grade-slip-density-compact .grade-slip-exact-table .gs-subject-row td { height: 42px; }
.grade-slip-density-dense .grade-slip-exact-table .gs-subject-row td { height: 32px; }
.grade-slip-density-dense .grade-slip-exact-table .gs-section-row th { height: 21px; padding-block: 2px; }
@media print {
  .grade-slip-landscape-sheet {
    align-items: center !important;
    justify-content: center !important;
  }
  .grade-slip-landscape-sheet .grade-slip-exact.grade-slip-print-copy {
    height: 7.68in !important;
    align-self: center !important;
  }
  .grade-slip-landscape-sheet .grade-slip-exact-table .gs-subject-row td { height: .39in !important; }
  .grade-slip-landscape-sheet .grade-slip-exact-table .gs-section-row th {
    height: .245in !important;
    padding: .015in .05in !important;
    font-size: 5.6pt !important;
  }
  .grade-slip-landscape-sheet .grade-slip-density-compact .grade-slip-exact-table .gs-subject-row td { height: .375in !important; }
  .grade-slip-landscape-sheet .grade-slip-density-dense .grade-slip-exact-table .gs-subject-row td { height: .29in !important; }
  .grade-slip-landscape-sheet .grade-slip-density-dense .grade-slip-exact-table .gs-section-row th { height: .205in !important; }
  .grade-slip-landscape-sheet .grade-slip-exact-table .gs-component-row .gs-subject { padding-left: .14in !important; }
  .grade-slip-landscape-sheet .grade-slip-exact-table .gs-component-row .gs-term-grade,
  .grade-slip-landscape-sheet .grade-slip-exact-table .gs-component-row .gs-final { padding-right: .08in !important; }
}


/* AcadMates v174 — vertically scrollable in-system Grade Slip preview. */
.grade-slip-preview-scroll {
  width: 100%;
  height: clamp(360px, calc(100vh - 285px), 820px);
  max-height: 820px;
  overflow-x: auto;
  overflow-y: auto;
  padding: 8px 8px 28px;
  background: #F5F8FA;
  border: 1px solid #D9E4E8;
  border-radius: 20px;
  box-sizing: border-box;
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
  scroll-behavior: smooth;
}
.grade-slip-preview-scroll:focus-visible {
  outline: 3px solid rgba(81,106,145, .35);
  outline-offset: 2px;
}
.grade-slip-preview-scroll .grade-slip-landscape-sheet {
  min-width: min(1180px, 100%);
}
@media (max-width: 980px) {
  .grade-slip-preview-scroll {
    height: clamp(340px, calc(100vh - 255px), 720px);
    max-height: 720px;
    padding: 6px 6px 24px;
  }
  .grade-slip-preview-scroll .grade-slip-landscape-sheet {
    min-width: 0;
  }
}
@media print {
  .grade-slip-preview-scroll {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    scrollbar-gutter: auto !important;
  }
}


/* AcadMates v175 — full-depth Grade Slip preview scrolling. */
.grade-slip-preview-scroll {
  padding-bottom: 72px;
  scroll-padding-bottom: 72px;
}

/* AcadMates v1.2.50 / Build 363 — Grades 2–10 Grade Slip retains the same
   single-line command-bar language as SF9. Selection and visibility controls
   remain distinct, never overlap, and resize with the sidebar. */
.grade-slip-exact-controls {
  display: flex !important;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  min-width: 0;
  width: 100%;
  margin-bottom: 12px;
  padding: 9px 11px !important;
  overflow: hidden !important;
  box-sizing: border-box;
}
.route-gradeslip .grade-slip-exact-controls { width: 100%; max-width: none; }
.grade-slip-control-group {
  box-sizing: border-box;
  min-width: 0 !important;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.grade-slip-selection-group {
  display: grid;
  grid-template-columns: minmax(190px, 1.08fr) minmax(205px, 1.14fr) minmax(138px, .7fr);
  flex: 1.12 1 720px;
  min-width: 0 !important;
  gap: 8px;
}
.grade-slip-selection-group > label { min-width: 0; margin: 0; }
.grade-slip-selection-group .advisory-selector-field small { display: none; }
.grade-slip-selection-group label,
.grade-slip-paper-control {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.15;
}
.grade-slip-selection-group select { min-width: 0; width: 100%; }
.grade-slip-control-separator {
  flex: 0 0 1px;
  align-self: stretch;
  width: 1px;
  min-height: 42px;
  background: #d7e1e8;
}
.grade-slip-checkbox-group {
  display: flex;
  flex: 1 1 650px;
  align-items: center;
  justify-content: space-between;
  min-width: 0 !important;
  gap: 5px;
  white-space: nowrap;
}
.grade-slip-visibility-toggle {
  display: inline-flex !important;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 34px;
  margin: 0;
  padding: 5px 6px;
  border: 1px solid #cbd5da;
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-size: clamp(8px, .62vw, 10px);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
.grade-slip-visibility-toggle:has(input:checked) { color: #171717; border-color: #516A91; background: #F5F8FA; }
.grade-slip-visibility-toggle input { flex: 0 0 auto; width: 15px; height: 15px; margin: 0 4px 0 0; }
.grade-slip-visibility-toggle span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.grade-slip-output-note {
  flex: 0 0 104px;
  align-self: center;
  color: #596779;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
}
.grade-slip-fit-preview {
  display: grid;
  container-type: size;
  width: 100%;
  height: min(760px, max(300px, calc(100dvh - 338px)));
  min-height: 0;
  place-items: center;
  margin: 0;
  padding: 7px;
  overflow: hidden;
  background: #edf2f5;
  border: 1px solid #d7e1e8;
  border-radius: 18px;
  box-sizing: border-box;
}
.g2g10-grade-slip-preview { background: #edf2f5; }
.g2g10-grade-slip-sheet {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-self: center;
  justify-self: center;
  gap: 7px;
  width: min(100%, 141.428cqh);
  max-width: 100%;
  height: auto;
  max-height: 100%;
  min-width: 0;
  margin: 0 auto;
  padding: 7px;
  overflow: hidden;
  background: #fff;
  aspect-ratio: 297 / 210;
}
.g2g10-grade-slip-panel {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: clamp(9px, 1.1vw, 18px) clamp(10px, 1.16vw, 19px) clamp(7px, .82vw, 13px);
  overflow: hidden;
  color: #111;
  background: #fff;
  border: 2px solid #111;
  font-family: "Times New Roman", Times, serif;
  font-size: clamp(5px, .52vw, 10px);
  line-height: 1.1;
}
.gsl-template-header {
  display: grid;
  grid-template-columns: clamp(23px, 2.35vw, 42px) minmax(0, 1fr) clamp(23px, 2.35vw, 42px);
  align-items: center;
  gap: clamp(3px, .42vw, 8px);
  min-height: clamp(26px, 2.45vw, 44px);
  text-align: center;
}
.gsl-template-header img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}
.gsl-template-header div { display: grid; gap: 0; }
.gsl-template-header span { font-size: clamp(5px, .48vw, 8px); }
.gsl-template-header strong { font-size: clamp(5.5px, .54vw, 9px); font-weight: 400; text-transform: uppercase; }
.gsl-template-header small { font-size: clamp(5px, .48vw, 8px); }
.g2g10-grade-slip-panel > h2 {
  margin: clamp(4px, .5vw, 8px) 0 clamp(4px, .45vw, 7px);
  font-size: clamp(7px, .82vw, 13px);
  font-weight: 800;
  text-align: center;
}
.gsl-identity-grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto 34px auto 38px;
  row-gap: 2px;
  column-gap: 3px;
  align-items: end;
  padding: 2px 0;
  border: 0;
  font-size: clamp(5px, .48vw, 8px);
}
.gsl-identity-grid b {
  min-width: 0;
  min-height: 10px;
  overflow: hidden;
  border-bottom: 1px solid #333;
  font-size: inherit;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.gsl-identity-grid .gsl-wide { min-width: 90px; }
.gsl-identity-grid .gsl-lrn { grid-column: span 1; }
.gsl-track-row {
  min-height: 11px;
  padding: 2px 0;
  border: 0;
  font-size: clamp(5px, .48vw, 8px);
}
.g2g10-grade-slip-panel > h3,
.gsl-teacher-comments > h3 {
  margin: clamp(4px, .52vw, 8px) 0 clamp(3px, .32vw, 5px);
  padding: 0;
  color: #111;
  background: transparent;
  font-size: clamp(5.5px, .56vw, 9px);
  font-weight: 800;
  text-align: center;
}
.gsl-template-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: clamp(5px, .48vw, 8px);
}
.gsl-template-table th,
.gsl-template-table td {
  height: clamp(9px, .84vw, 15px);
  padding: 1px 2px;
  border: 1px solid #111;
  text-align: center;
  vertical-align: middle;
}
.gsl-template-table thead th { font-size: clamp(4.8px, .45vw, 7px); font-weight: 800; }
.gsl-col-area { width: 38.7%; }
.gsl-col-term { width: 8.7%; }
.gsl-col-final { width: 10.4%; }
.gsl-col-remarks { width: 24.8%; }
.g2g10-grade-slip-panel[data-grade-slip-template="g23"] .gsl-col-area { width: 36.4%; }
.g2g10-grade-slip-panel[data-grade-slip-template="g23"] .gsl-col-term { width: 9.4%; }
.g2g10-grade-slip-panel[data-grade-slip-template="g23"] .gsl-col-final { width: 8.8%; }
.g2g10-grade-slip-panel[data-grade-slip-template="g23"] .gsl-col-remarks { width: 26.6%; }
.gsl-learning-area { text-align: left; }
.gsl-learning-area { overflow-wrap: anywhere; font-weight: 400; }
.gsl-subject-remark { font-size: clamp(4.5px, .43vw, 6.5px); font-weight: 400; }
.gsl-general-average th { background: #fff; font-style: italic; font-weight: 800; text-align: right; }
.gsl-teacher-comments { margin-top: clamp(4px, .45vw, 7px); }
.gsl-teacher-comments > h3 { margin: 0 0 clamp(3px, .32vw, 5px); }
.gsl-comment {
  display: grid;
  grid-template-columns: 43px minmax(0, 1fr);
  min-height: clamp(16px, 1.62vw, 27px);
  border-inline: 1px solid #111;
  border-bottom: 1px solid #111;
}
.gsl-teacher-comments > h3 + .gsl-comment { border-top: 1px solid #111; }
.gsl-comment b { padding: 2px 3px; border-right: 1px solid #111; font-size: clamp(5px, .47vw, 7px); }
.gsl-comment p { margin: 0; padding: 2px 3px; overflow: hidden; font-size: clamp(4.8px, .45vw, 6.7px); line-height: 1.12; }
.gsl-adviser {
  display: grid;
  gap: 2px;
  width: 56%;
  margin: auto auto 0;
  padding-top: clamp(4px, .55vw, 8px);
  text-align: center;
}
.gsl-adviser strong { padding-bottom: 2px; border-bottom: 1px solid #111; font-size: clamp(5px, .48vw, 7px); text-transform: uppercase; }
.gsl-adviser span { font-size: clamp(4.7px, .45vw, 6.5px); text-transform: uppercase; }
.g2g10-grade-slip-panel[data-grade-slip-template="g410"] { padding: clamp(7px, .8vw, 13px) clamp(9px, 1vw, 17px) clamp(6px, .62vw, 10px); }
.g2g10-grade-slip-panel[data-grade-slip-template="g410"] .gsl-template-header { min-height: clamp(22px, 2vw, 36px); }
.g2g10-grade-slip-panel[data-grade-slip-template="g410"] .gsl-template-header img { width: 100%; height: auto; }
.g2g10-grade-slip-panel[data-grade-slip-template="g410"] .gsl-template-table th,
.g2g10-grade-slip-panel[data-grade-slip-template="g410"] .gsl-template-table td { height: clamp(7px, .62vw, 11px); font-size: clamp(4.6px, .44vw, 6.3px); }
.g2g10-grade-slip-panel[data-grade-slip-template="g410"] .gsl-comment { min-height: clamp(13px, 1.25vw, 20px); }
.g2g10-grade-slip-panel[data-grade-slip-template="g410"] .gsl-comment p { font-size: clamp(4.4px, .41vw, 6px); }
.g2g10-grade-slip-panel[data-grade-slip-template="g410"] .gsl-adviser { padding-top: 5px; }
@media (max-width: 980px) {
  .grade-slip-exact-controls { gap: 7px; padding: 8px !important; }
  .grade-slip-selection-group { grid-template-columns: minmax(168px, 1.08fr) minmax(178px, 1.14fr) minmax(118px, .7fr); gap: 6px; }
  .grade-slip-checkbox-group { gap: 3px; }
  .grade-slip-visibility-toggle { padding-inline: 4px; }
  .grade-slip-output-note { flex-basis: 84px; font-size: 8px; }
  .grade-slip-fit-preview { height: min(650px, max(280px, calc(100dvh - 318px))); }
}
.grade-slip-preview-scroll .grade-slip-landscape-sheet {
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  align-items: stretch;
  overflow: visible !important;
}
.grade-slip-preview-scroll .grade-slip-exact.grade-slip-print-copy {
  height: auto !important;
  min-height: 760px;
  overflow: visible !important;
}
.grade-slip-preview-scroll .grade-slip-exact-footer {
  flex: 0 0 auto;
}
.grade-slip-preview-scroll::after {
  content: "";
  display: block;
  width: 100%;
  height: 36px;
}
@media (max-width: 980px) {
  .grade-slip-preview-scroll {
    padding-bottom: 64px;
    scroll-padding-bottom: 64px;
  }
  .grade-slip-preview-scroll .grade-slip-exact.grade-slip-print-copy {
    min-height: 700px;
  }
}
@media print {
  .grade-slip-preview-scroll::after { display: none !important; }
  .grade-slip-preview-scroll .grade-slip-landscape-sheet {
    height: 8.02in !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
  }
  .grade-slip-preview-scroll .grade-slip-exact.grade-slip-print-copy {
    height: 7.68in !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
}

/* AcadMates v186 — isolated Teacher Toolkit foundation and classroom essentials. */
.route-teachertoolkit .page-heading { margin-bottom: 18px; }
.teacher-toolkit-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(320px,.65fr);
  gap: 28px;
  overflow: hidden;
  margin-bottom: 16px;
  padding: clamp(24px,4vw,40px);
  border: 1px solid #11192A;
  border-radius: 26px;
  color: #fff;
  background:
    radial-gradient(circle at 88% 12%, rgba(143,214,211,.2), transparent 32%),
    linear-gradient(135deg,#171717,#2b2b2b);
  box-shadow: 0 22px 54px rgba(23,23,23,.16);
}
.teacher-toolkit-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -105px;
  bottom: -155px;
  width: 310px;
  height: 310px;
  border: 1px solid rgba(143,214,211,.18);
  border-radius: 50%;
  box-shadow: 0 0 0 42px rgba(143,214,211,.03),0 0 0 84px rgba(143,214,211,.018);
}
.teacher-toolkit-hero .eyebrow { color: #8FD6D3; }
.teacher-toolkit-hero-copy h2 { max-width: 720px; margin: 8px 0 12px; font-size: clamp(25px,3.4vw,42px); line-height: 1.05; letter-spacing: -.04em; }
.teacher-toolkit-hero-copy p { max-width: 760px; margin: 0; color: #D9E4E8; font-size: 14px; line-height: 1.65; }
.teacher-toolkit-context {
  align-self: stretch;
  display: grid;
  align-content: center;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 19px;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
}
.teacher-toolkit-context > label { display: grid; gap: 7px; color: #8FD6D3; font-size: 11px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.teacher-toolkit-context select { border-color: rgba(255,255,255,.18); color: #11192A; background: #FFFFFF; font-size: 12px; font-weight: 750; text-transform: none; letter-spacing: 0; }
.teacher-toolkit-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.teacher-toolkit-metrics article { min-width: 0; padding: 12px 9px; border: 1px solid rgba(255,255,255,.1); border-radius: 13px; background: rgba(0,0,0,.16); text-align: center; }
.teacher-toolkit-metrics strong,.teacher-toolkit-metrics span { display: block; }
.teacher-toolkit-metrics strong { overflow: hidden; color: #8FD6D3; font-size: 18px; text-overflow: ellipsis; }
.teacher-toolkit-metrics span { margin-top: 4px; color: #D9E4E8; font-size: 9px; font-weight: 800; line-height: 1.25; text-transform: uppercase; }
.teacher-toolkit-tabs {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 8px;
  margin-bottom: 16px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: #F5F8FA;
}
.teacher-toolkit-tabs button {
  display: grid;
  gap: 3px;
  min-height: 58px;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: #636C77;
  background: transparent;
  text-align: left;
}
.teacher-toolkit-tabs button:hover { color: #2a2925; background: rgba(255,255,255,.7); }
.teacher-toolkit-tabs button.active { border-color: #8FD6D3; color: #11192A; background: #fff; box-shadow: 0 7px 20px rgba(23,23,23,.08),inset 0 -3px #8FD6D3; }
.teacher-toolkit-tabs strong { font-size: 13px; }
.teacher-toolkit-tabs span { font-size: 10px; font-weight: 650; }
.teacher-toolkit-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.toolkit-card,.toolkit-roadmap-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  gap: 16px;
  align-items: center;
  min-width: 0;
  min-height: 188px;
  padding: 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 21px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.toolkit-card::before,.toolkit-roadmap-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: #8FD6D3; }
.toolkit-card-icon { display: grid; width: 50px; height: 50px; place-items: center; border-radius: 15px; color: #11192A; background: linear-gradient(145deg,#E4F2F5,#8FD6D3); box-shadow: 0 9px 22px rgba(81,106,145,.18); }
.toolkit-card-icon svg { width: 24px; height: 24px; }
.toolkit-card-copy,.toolkit-roadmap-card > div:nth-child(2) { min-width: 0; }
.toolkit-card-copy > span,.toolkit-roadmap-card > div:nth-child(2) > span { color: #2F817B; font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.toolkit-card h2,.toolkit-roadmap-card h2 { margin: 5px 0 7px; font-size: 18px; line-height: 1.15; letter-spacing: -.025em; }
.toolkit-card p,.toolkit-roadmap-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.toolkit-card small,.toolkit-roadmap-card small { display: block; margin-top: 10px; color: #636C77; font-size: 10px; line-height: 1.45; }
.toolkit-card .button { align-self: end; white-space: nowrap; }
.teacher-toolkit-roadmap { display: grid; gap: 12px; }
.toolkit-roadmap-card { min-height: 135px; }
.toolkit-roadmap-card::before { background: #636C77; }
.toolkit-roadmap-card .toolkit-card-icon { color: #636C77; background: #F5F8FA; box-shadow: none; }
.toolkit-status-pill { align-self: start; padding: 7px 10px; border: 1px solid #D9E4E8; border-radius: 999px; color: #636C77; background: #F5F8FA; font-size: 9px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.teacher-toolkit-protection { display: flex; gap: 13px; align-items: flex-start; margin-top: 16px; padding: 16px 18px; border: 1px solid #8FD6D3; border-radius: 16px; color: #2F817B; background: #F5F8FA; }
.teacher-toolkit-protection svg { width: 22px; height: 22px; flex: 0 0 auto; color: #516A91; }
.teacher-toolkit-protection strong { font-size: 12px; }
.teacher-toolkit-protection p { margin: 4px 0 0; font-size: 11px; line-height: 1.55; }

.special-feature-presentation .toolkit-tool-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.special-feature-presentation .toolkit-segmented { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid #D9E4E8; border-radius: 13px; background: #F5F8FA; }
.special-feature-presentation .toolkit-segmented button { min-width: 125px; padding: 9px 13px; border: 0; border-radius: 9px; color: #636C77; background: transparent; font-size: 11px; font-weight: 850; }
.special-feature-presentation .toolkit-segmented button.active { color: #11192A; background: #fff; box-shadow: 0 4px 12px rgba(23,23,23,.09),inset 0 -2px #8FD6D3; }
.special-feature-presentation .toolkit-timer-shell { display: grid; justify-items: center; padding: 6px 0 2px; }
.special-feature-presentation .toolkit-timer-display { margin: 22px 0 2px; color: #11192A; font-size: clamp(66px,12vw,132px); font-weight: 900; font-variant-numeric: tabular-nums; line-height: .95; letter-spacing: -.075em; text-shadow: 0 5px 24px rgba(23,23,23,.08); }
.special-feature-presentation .toolkit-timer-display.is-finished { color: #a3362f; animation: toolkit-timer-finish .7s ease-in-out 2; }
.special-feature-presentation .toolkit-timer-state { color: #636C77; font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.special-feature-presentation .toolkit-timer-settings { display: grid; grid-template-columns: repeat(2,minmax(110px,150px)); gap: 10px; margin-top: 22px; }
.special-feature-presentation .toolkit-timer-settings label,.special-feature-presentation .toolkit-group-controls > label:first-child { display: grid; gap: 6px; color: #636C77; font-size: 10px; font-weight: 850; text-transform: uppercase; }
.special-feature-presentation .toolkit-timer-settings input { text-align: center; font-size: 18px; font-weight: 850; }
.toolkit-presentation-mode .modal-panel { width: calc(100vw - 20px); max-width: none; height: calc(100vh - 20px); max-height: none; }
.toolkit-presentation-mode #modal-content { display: grid; align-content: center; min-height: calc(100vh - 82px); }
.toolkit-presentation-mode .special-popup-hero,.toolkit-presentation-mode .special-popup-note { display: none; }
.toolkit-presentation-mode .toolkit-timer-display { font-size: clamp(96px,21vw,290px); }
.toolkit-presentation-mode .special-popup-body { padding: 20px; }
.special-feature-presentation .toolkit-picker-shell { display: grid; gap: 14px; }
.special-feature-presentation .toolkit-picker-result { display: grid; justify-items: center; min-height: 170px; align-content: center; padding: 24px; border: 1px dashed #D9E4E8; border-radius: 20px; background: linear-gradient(145deg,#F5F8FA,#fff); text-align: center; }
.special-feature-presentation .toolkit-picker-result.has-result { border-style: solid; border-color: #8FD6D3; background: radial-gradient(circle at top,#F5F8FA,#fff 62%); box-shadow: inset 0 0 0 3px rgba(143,214,211,.08); }
.special-feature-presentation .toolkit-picker-result span { color: #2F817B; font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.special-feature-presentation .toolkit-picker-result strong { margin-top: 7px; color: #11192A; font-size: clamp(27px,5vw,43px); line-height: 1.05; letter-spacing: -.04em; }
.special-feature-presentation .toolkit-picker-result p { margin: 8px 0 0; color: var(--muted); font-size: 11px; }
.special-feature-presentation .toolkit-check { display: flex; align-items: center; gap: 9px; margin: 0; color: #11192A; font-size: 11px; font-weight: 750; text-transform: none; }
.special-feature-presentation .toolkit-check input { width: 17px; min-height: 17px; height: 17px; margin: 0; padding: 0; accent-color: #516A91; }
.special-feature-presentation .toolkit-inline-notice { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 11px; color: #2F817B; background: #F5F8FA; font-size: 11px; font-weight: 750; }
.special-feature-presentation .toolkit-inline-notice svg { width: 18px; height: 18px; }
.special-feature-presentation .toolkit-recent { margin-top: 4px; padding-top: 15px; border-top: 1px solid #F5F8FA; }
.special-feature-presentation .toolkit-recent > div { display: flex; justify-content: space-between; gap: 12px; }
.special-feature-presentation .toolkit-recent > div span,.special-feature-presentation .toolkit-recent > p { color: var(--muted); font-size: 10px; }
.special-feature-presentation .toolkit-recent ol { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin: 11px 0 0; padding: 0; list-style: none; }
.special-feature-presentation .toolkit-recent li { display: flex; gap: 8px; align-items: center; padding: 9px 10px; border-radius: 10px; background: #F5F8FA; font-size: 10px; }
.special-feature-presentation .toolkit-recent li span { display: grid; width: 20px; height: 20px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #11192A; background: #8FD6D3; font-size: 9px; font-weight: 900; }
.special-feature-presentation .toolkit-group-controls { display: grid; grid-template-columns: minmax(130px,.34fr) minmax(260px,1fr); gap: 16px; align-items: end; }
.special-feature-presentation .toolkit-group-controls .toolkit-check { min-height: 43px; padding: 9px 12px; border: 1px solid #D9E4E8; border-radius: 11px; background: #F5F8FA; }
.special-feature-presentation .toolkit-generated-groups { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 10px; margin-top: 18px; }
.special-feature-presentation .toolkit-generated-groups article { overflow: hidden; border: 1px solid #D9E4E8; border-radius: 15px; background: #fff; box-shadow: 0 5px 16px rgba(23,23,23,.05); }
.special-feature-presentation .toolkit-generated-groups article > span { display: block; padding: 8px 12px; color: #2F817B; background: #E4F2F5; font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.special-feature-presentation .toolkit-generated-groups h4 { margin: 12px 13px 7px; }
.special-feature-presentation .toolkit-generated-groups ol { display: grid; gap: 5px; margin: 0; padding: 0 13px 14px 31px; color: #636C77; font-size: 10px; line-height: 1.45; }
.special-feature-presentation .toolkit-empty-state { display: grid; justify-items: center; gap: 7px; margin-top: 18px; padding: 30px; border: 1px dashed #D9E4E8; border-radius: 17px; color: #636C77; text-align: center; }
.special-feature-presentation .toolkit-empty-state svg { width: 27px; height: 27px; color: #516A91; }
.special-feature-presentation .toolkit-empty-state span { font-size: 10px; }
.special-feature-presentation .toolkit-scoreboard { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
.special-feature-presentation .toolkit-scoreboard article { position: relative; overflow: hidden; padding: 14px; border: 1px solid #D9E4E8; border-radius: 17px; background: #fff; box-shadow: 0 6px 17px rgba(23,23,23,.05); text-align: center; }
.special-feature-presentation .toolkit-scoreboard article.is-leading { border-color: #516A91; box-shadow: 0 0 0 3px rgba(143,214,211,.12),0 9px 22px rgba(23,23,23,.07); }
.special-feature-presentation .toolkit-team-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: #516A91; font-size: 8px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.special-feature-presentation .toolkit-icon-action { width: 24px; height: 24px; border: 1px solid #D9E4E8; border-radius: 7px; color: #8c514c; background: #fff; font-weight: 900; }
.special-feature-presentation .toolkit-team-name { min-height: 35px; margin: 5px 0 0; padding: 5px 8px; border-color: transparent; background: transparent; text-align: center; font-weight: 850; }
.special-feature-presentation .toolkit-team-name:hover,.special-feature-presentation .toolkit-team-name:focus { border-color: #8FD6D3; background: #F5F8FA; }
.special-feature-presentation .toolkit-team-points { display: block; margin: 6px 0 9px; color: #11192A; font-size: 48px; font-variant-numeric: tabular-nums; line-height: 1; }
.special-feature-presentation .toolkit-score-controls { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; }
.special-feature-presentation .toolkit-score-controls button { min-height: 32px; border: 1px solid #D9E4E8; border-radius: 8px; color: #636C77; background: #F5F8FA; font-size: 10px; font-weight: 900; }
.special-feature-presentation .toolkit-score-controls button:hover { border-color: #516A91; background: #F5F8FA; }
.special-feature-presentation .toolkit-team-members { margin-top: 10px; padding-top: 9px; border-top: 1px solid #F5F8FA; text-align: left; }
.special-feature-presentation .toolkit-team-members span { color: #636C77; font-size: 8px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.special-feature-presentation .toolkit-team-members p { margin: 4px 0 0; color: #636C77; font-size: 9px; line-height: 1.45; }
@keyframes toolkit-timer-finish { 50% { transform: scale(1.035); } }
@media (prefers-reduced-motion:reduce) { .special-feature-presentation .toolkit-timer-display.is-finished { animation: none; } }
@media (max-width:980px) {
  .teacher-toolkit-hero { grid-template-columns: 1fr; }
  .teacher-toolkit-grid { grid-template-columns: 1fr; }
}
@media (max-width:680px) {
  .teacher-toolkit-hero { padding: 22px 18px; border-radius: 21px; }
  .teacher-toolkit-tabs { grid-template-columns: 1fr; }
  .teacher-toolkit-tabs button { min-height: 48px; }
  .toolkit-card,.toolkit-roadmap-card { grid-template-columns: auto minmax(0,1fr); min-height: 0; padding: 17px; }
  .toolkit-card .button,.toolkit-card .toolkit-status-pill,.toolkit-roadmap-card .toolkit-status-pill { grid-column: 1 / -1; width: 100%; }
  .teacher-toolkit-metrics { grid-template-columns: 1fr; }
  .special-feature-presentation .toolkit-group-controls,.special-feature-presentation .toolkit-scoreboard { grid-template-columns: 1fr; }
  .special-feature-presentation .toolkit-recent ol { grid-template-columns: 1fr; }
  .special-feature-presentation .toolkit-segmented { width: 100%; }
  .special-feature-presentation .toolkit-segmented button { min-width: 0; }
}

/* AcadMates v187 — isolated Teacher Toolkit Game Center. */
.route-teachertoolkit .toolkit-game-intro {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 14px;
  padding: 17px 18px;
  border: 1px solid #11192A;
  border-radius: 17px;
  color: #F5F8FA;
  background: linear-gradient(135deg,#20201e,#11192A);
  box-shadow: 0 10px 28px rgba(23,23,23,.1);
}
.route-teachertoolkit .toolkit-game-intro > svg { width: 25px; height: 25px; flex: 0 0 auto; color: #8FD6D3; }
.route-teachertoolkit .toolkit-game-intro strong { color: #8FD6D3; font-size: 13px; }
.route-teachertoolkit .toolkit-game-intro p { margin: 4px 0 0; color: #D9E4E8; font-size: 11px; line-height: 1.55; }
.route-teachertoolkit .toolkit-game-card { min-height: 200px; }
.route-teachertoolkit .toolkit-game-next { display: flex; justify-content: space-between; gap: 14px; align-items: center; margin-top: 14px; padding: 14px 17px; border: 1px dashed #D9E4E8; border-radius: 14px; color: #636C77; background: #F5F8FA; }
.route-teachertoolkit .toolkit-game-next strong { color: #11192A; font-size: 11px; }
.route-teachertoolkit .toolkit-game-next span { font-size: 10px; text-align: right; }
.toolkit-game-presentation .toolkit-game-format { margin-bottom: 15px; padding: 14px 16px; border-left: 4px solid #8FD6D3; border-radius: 12px; color: #11192A; background: #F5F8FA; }
.toolkit-game-presentation .toolkit-game-format span { display: block; color: #2F817B; font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.toolkit-game-presentation .toolkit-game-format strong { display: block; margin-top: 4px; color: #11192A; font-size: 12px; }
.toolkit-game-presentation .toolkit-game-format p { margin: 6px 0 0; font-size: 10px; line-height: 1.5; }
.toolkit-game-presentation .toolkit-game-editor { display: grid; gap: 7px; color: #11192A; font-size: 11px; font-weight: 850; }
.toolkit-game-presentation .toolkit-game-editor textarea { min-height: 235px; resize: vertical; font-family: ui-monospace,SFMono-Regular,Consolas,monospace; font-size: 11px; line-height: 1.55; }
.toolkit-game-presentation .toolkit-game-setup-options { display: grid; grid-template-columns: 1fr minmax(160px,.4fr); gap: 12px; margin-bottom: 14px; }
.toolkit-game-presentation .toolkit-game-setup-options label { display: grid; gap: 6px; color: #636C77; font-size: 10px; font-weight: 850; }
.toolkit-game-presentation .toolkit-game-progress { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 16px; color: #2F817B; font-size: 10px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.toolkit-game-presentation .toolkit-game-progress strong { padding: 6px 9px; border-radius: 999px; color: #11192A; background: #8FD6D3; font-size: 10px; }
.toolkit-game-presentation .toolkit-quiz-card,.toolkit-game-presentation .toolkit-challenge-prompt,.toolkit-game-presentation .toolkit-spin-result { padding: clamp(20px,4vw,34px); border: 1px solid #D9E4E8; border-radius: 22px; background: radial-gradient(circle at 90% 0,#F5F8FA,#fff 46%); box-shadow: 0 12px 30px rgba(23,23,23,.07); }
.toolkit-game-presentation .toolkit-game-question { display: grid; min-height: 120px; place-items: center; padding: 18px; color: #11192A; font-size: clamp(24px,4vw,42px); font-weight: 850; line-height: 1.2; letter-spacing: -.035em; text-align: center; }
.toolkit-game-presentation .toolkit-game-answer { display: grid; gap: 5px; min-height: 68px; place-items: center; margin-top: 14px; padding: 13px 16px; border: 1px dashed #D9E4E8; border-radius: 14px; color: #636C77; background: #F5F8FA; text-align: center; }
.toolkit-game-presentation .toolkit-game-answer span { font-size: 8px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.toolkit-game-presentation .toolkit-game-answer strong { font-size: 12px; line-height: 1.45; }
.toolkit-game-presentation .toolkit-game-answer.is-revealed { border-style: solid; border-color: #8FD6D3; color: #11192A; background: #E4F2F5; box-shadow: inset 0 0 0 3px rgba(143,214,211,.1); }
.toolkit-game-presentation .toolkit-game-answer.is-revealed strong { font-size: clamp(18px,3vw,29px); }
.toolkit-game-presentation .toolkit-game-awards { margin-top: 15px; padding: 14px; border: 1px solid #D9E4E8; border-radius: 16px; background: #F5F8FA; }
.toolkit-game-presentation .toolkit-game-awards > div:first-child { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 9px; }
.toolkit-game-presentation .toolkit-game-awards > div:first-child strong { font-size: 11px; }
.toolkit-game-presentation .toolkit-game-awards > div:first-child span { color: #636C77; font-size: 9px; }
.toolkit-game-presentation .toolkit-game-awards > div:last-child { display: grid; grid-template-columns: repeat(auto-fit,minmax(130px,1fr)); gap: 7px; }
.toolkit-game-presentation .toolkit-game-awards button { display: flex; justify-content: space-between; gap: 8px; align-items: center; min-height: 39px; padding: 8px 10px; border: 1px solid #E4F2F5; border-radius: 10px; color: #636C77; background: #fff; font-size: 10px; font-weight: 800; }
.toolkit-game-presentation .toolkit-game-awards button:hover { border-color: #516A91; background: #E4F2F5; }
.toolkit-game-presentation .toolkit-game-awards button strong { color: #2F817B; }
.toolkit-game-presentation .toolkit-game-complete { display: grid; min-height: 260px; justify-items: center; align-content: center; gap: 8px; padding: 30px; border: 1px solid #8FD6D3; border-radius: 23px; color: #636C77; background: radial-gradient(circle at top,#E4F2F5,#fff 67%); text-align: center; }
.toolkit-game-presentation .toolkit-game-complete.compact { min-height: 0; margin-top: 15px; padding: 18px; }
.toolkit-game-presentation .toolkit-game-complete svg { width: 38px; height: 38px; color: #516A91; }
.toolkit-game-presentation .toolkit-game-complete span { color: #2F817B; font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.toolkit-game-presentation .toolkit-game-complete strong { font-size: clamp(23px,4vw,38px); letter-spacing: -.035em; }
.toolkit-game-presentation .toolkit-game-complete p { max-width: 520px; margin: 2px 0 0; color: #636C77; font-size: 11px; line-height: 1.55; }
.toolkit-game-presentation .toolkit-challenge-board { display: grid; grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); gap: 9px; align-items: start; }
.toolkit-game-presentation .toolkit-challenge-board section { display: grid; gap: 7px; padding: 10px; border: 1px solid #D9E4E8; border-radius: 15px; background: #F5F8FA; }
.toolkit-game-presentation .toolkit-challenge-board h4 { min-height: 42px; display: grid; place-items: center; margin: 0; padding: 8px; border-radius: 10px; color: #E4F2F5; background: #11192A; font-size: 11px; line-height: 1.25; text-align: center; }
.toolkit-game-presentation .toolkit-challenge-board button { min-height: 52px; border: 1px solid #8FD6D3; border-radius: 10px; color: #11192A; background: linear-gradient(145deg,#E4F2F5,#8FD6D3); font-size: 18px; font-weight: 900; box-shadow: 0 5px 12px rgba(81,106,145,.14); }
.toolkit-game-presentation .toolkit-challenge-board button:hover { transform: translateY(-1px); filter: brightness(1.035); }
.toolkit-game-presentation .toolkit-challenge-board button:disabled { color: #636C77; border-color: #D9E4E8; background: #F5F8FA; box-shadow: none; transform: none; }
.toolkit-game-presentation .toolkit-spin-ready { display: grid; min-height: 310px; justify-items: center; align-content: center; gap: 10px; text-align: center; }
.toolkit-game-presentation .toolkit-spin-ready > strong { font-size: 25px; }
.toolkit-game-presentation .toolkit-spin-ready > p { margin: 0; color: #636C77; font-size: 11px; }
.toolkit-game-presentation .toolkit-spin-wheel { display: grid; width: 145px; height: 145px; place-items: center; border: 11px solid #11192A; border-radius: 50%; color: #11192A; background: conic-gradient(#8FD6D3 0 25%,#E4F2F5 0 50%,#8FD6D3 0 75%,#E4F2F5 0); box-shadow: 0 15px 35px rgba(23,23,23,.16),inset 0 0 0 3px #fff; transform: rotate(-7deg); }
.toolkit-game-presentation .toolkit-spin-wheel svg { width: 34px; height: 34px; }
.toolkit-game-presentation .toolkit-spin-wheel span { max-width: 90px; margin-top: -24px; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.toolkit-game-presentation .toolkit-spin-participant { display: grid; justify-items: center; gap: 5px; margin-bottom: 8px; text-align: center; }
.toolkit-game-presentation .toolkit-spin-participant span { color: #2F817B; font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.toolkit-game-presentation .toolkit-spin-participant strong { color: #11192A; font-size: clamp(25px,4vw,40px); letter-spacing: -.035em; }
.toolkit-game-presentation .toolkit-match-status { margin-bottom: 12px; padding: 11px 13px; border-radius: 11px; color: #636C77; background: #F5F8FA; font-size: 10px; font-weight: 750; text-align: center; }
.toolkit-game-presentation .toolkit-match-status.success { color: #28623f; background: #e4f3e8; }
.toolkit-game-presentation .toolkit-match-status.warning { color: #2F817B; background: #F5F8FA; }
.toolkit-game-presentation .toolkit-match-board { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.toolkit-game-presentation .toolkit-match-board section { display: grid; align-content: start; gap: 7px; padding: 11px; border: 1px solid #D9E4E8; border-radius: 16px; background: #F5F8FA; }
.toolkit-game-presentation .toolkit-match-board h4 { margin: 0 0 4px; color: #636C77; font-size: 9px; letter-spacing: .09em; text-transform: uppercase; }
.toolkit-game-presentation .toolkit-match-board button { min-height: 44px; padding: 9px 11px; border: 1px solid #D9E4E8; border-radius: 10px; color: #11192A; background: #fff; font-size: 10px; font-weight: 800; line-height: 1.35; text-align: left; }
.toolkit-game-presentation .toolkit-match-board button:hover,.toolkit-game-presentation .toolkit-match-board button.selected { border-color: #516A91; background: #F5F8FA; box-shadow: 0 0 0 3px rgba(143,214,211,.12); }
.toolkit-game-presentation .toolkit-match-board button.matched { color: #28623f; border-color: #9dcaab; background: #e5f4e9; box-shadow: none; }
.toolkit-game-presentation .toolkit-bingo-call { display: grid; justify-items: center; gap: 5px; margin-bottom: 14px; padding: 15px; border: 1px solid #8FD6D3; border-radius: 16px; background: linear-gradient(145deg,#F5F8FA,#fff); text-align: center; }
.toolkit-game-presentation .toolkit-bingo-call span { color: #2F817B; font-size: 9px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.toolkit-game-presentation .toolkit-bingo-call strong { font-size: clamp(22px,4vw,38px); letter-spacing: -.03em; }
.toolkit-game-presentation .toolkit-bingo-call p { margin: 0; color: #636C77; font-size: 9px; }
.toolkit-game-presentation .toolkit-bingo-board { display: grid; grid-template-columns: repeat(var(--bingo-size),minmax(0,1fr)); gap: 6px; padding: 8px; border: 3px solid #2a2925; border-radius: 17px; background: #2a2925; }
.toolkit-game-presentation .toolkit-bingo-board > div { display: grid; min-width: 0; min-height: clamp(62px,10vw,112px); place-items: center; padding: 7px; border-radius: 8px; color: #11192A; background: #fff; font-size: clamp(8px,1.25vw,12px); font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; text-align: center; }
.toolkit-game-presentation .toolkit-bingo-board > div.called { color: #11192A; background: radial-gradient(circle,#E4F2F5,#8FD6D3); box-shadow: inset 0 0 0 3px rgba(255,255,255,.42); }
@media (max-width:680px) {
  .route-teachertoolkit .toolkit-game-next { align-items: flex-start; flex-direction: column; }
  .route-teachertoolkit .toolkit-game-next span { text-align: left; }
  .toolkit-game-presentation .toolkit-game-setup-options,.toolkit-game-presentation .toolkit-match-board { grid-template-columns: 1fr; }
  .toolkit-game-presentation .toolkit-game-question { min-height: 92px; padding: 12px; }
  .toolkit-game-presentation .toolkit-game-awards > div:first-child { align-items: flex-start; flex-direction: column; }
  .toolkit-game-presentation .toolkit-bingo-board > div { min-height: 52px; }
}

/* AcadMates v188 — isolated Teacher Toolkit Activity Builder. */
.route-teachertoolkit .toolkit-activity-intro {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 14px;
  padding: 17px 18px;
  border: 1px solid #11192A;
  border-radius: 17px;
  color: #F5F8FA;
  background: linear-gradient(135deg,#20201e,#11192A);
  box-shadow: 0 10px 28px rgba(23,23,23,.1);
}
.route-teachertoolkit .toolkit-activity-intro > svg { width: 25px; height: 25px; flex: 0 0 auto; color: #8FD6D3; }
.route-teachertoolkit .toolkit-activity-intro strong { color: #8FD6D3; font-size: 13px; }
.route-teachertoolkit .toolkit-activity-intro p { margin: 4px 0 0; color: #D9E4E8; font-size: 11px; line-height: 1.55; }
.route-teachertoolkit .toolkit-activity-card { min-height: 200px; }
.route-teachertoolkit .toolkit-activity-next { display: flex; justify-content: space-between; gap: 14px; align-items: center; margin-top: 14px; padding: 14px 17px; border: 1px dashed #D9E4E8; border-radius: 14px; color: #636C77; background: #F5F8FA; }
.route-teachertoolkit .toolkit-activity-next strong { color: #11192A; font-size: 11px; }
.route-teachertoolkit .toolkit-activity-next span { font-size: 10px; text-align: right; }
.toolkit-activity-presentation .toolkit-activity-library { display: grid; gap: 10px; }
.toolkit-activity-presentation .toolkit-activity-library > article {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  gap: 13px;
  align-items: center;
  padding: 14px;
  border: 1px solid #D9E4E8;
  border-radius: 16px;
  background: linear-gradient(145deg,#fff,#F5F8FA);
  box-shadow: 0 7px 20px rgba(23,23,23,.05);
}
.toolkit-activity-presentation .toolkit-activity-library-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; color: #11192A; background: linear-gradient(145deg,#E4F2F5,#8FD6D3); }
.toolkit-activity-presentation .toolkit-activity-library-icon svg { width: 20px; height: 20px; }
.toolkit-activity-presentation .toolkit-activity-library article span { color: #2F817B; font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.toolkit-activity-presentation .toolkit-activity-library h4 { margin: 3px 0 5px; font-size: 14px; }
.toolkit-activity-presentation .toolkit-activity-library p { margin: 0; color: #636C77; font-size: 10px; line-height: 1.45; }
.toolkit-activity-presentation .toolkit-activity-library small { display: block; margin-top: 6px; color: #636C77; font-size: 9px; }
.toolkit-activity-presentation .toolkit-activity-library-actions { display: grid; grid-template-columns: auto auto; gap: 6px; }
.toolkit-activity-presentation .toolkit-activity-library-actions .button:first-child { grid-column: 1 / -1; }
.toolkit-activity-presentation .toolkit-activity-format { margin-bottom: 15px; padding: 14px 16px; border-left: 4px solid #8FD6D3; border-radius: 12px; color: #11192A; background: #F5F8FA; }
.toolkit-activity-presentation .toolkit-activity-format span { display: block; color: #2F817B; font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.toolkit-activity-presentation .toolkit-activity-format strong { display: block; margin-top: 4px; color: #11192A; font-size: 12px; }
.toolkit-activity-presentation .toolkit-activity-format p { margin: 6px 0 0; font-size: 10px; line-height: 1.5; }
.toolkit-activity-presentation .toolkit-activity-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-bottom: 13px; }
.toolkit-activity-presentation .toolkit-activity-meta label,.toolkit-activity-presentation .toolkit-activity-stage-settings label,.toolkit-activity-presentation .toolkit-activity-editor,.toolkit-activity-presentation .toolkit-observation-note { display: grid; gap: 6px; color: #636C77; font-size: 10px; font-weight: 850; }
.toolkit-activity-presentation .toolkit-activity-meta .span-2 { grid-column: 1 / -1; }
.toolkit-activity-presentation .toolkit-activity-meta textarea { resize: vertical; }
.toolkit-activity-presentation .toolkit-activity-stage-settings { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 13px; }
.toolkit-activity-presentation .toolkit-activity-editor textarea { min-height: 235px; resize: vertical; font-family: ui-monospace,SFMono-Regular,Consolas,monospace; font-size: 11px; line-height: 1.55; }
.toolkit-activity-presentation .toolkit-activity-delete { padding: 18px; border: 1px solid #e5c5c1; border-radius: 15px; color: #653d38; background: #fff3f1; }
.toolkit-activity-presentation .toolkit-activity-delete strong { font-size: 12px; }
.toolkit-activity-presentation .toolkit-activity-delete p { margin: 6px 0 0; font-size: 10px; line-height: 1.55; }
.toolkit-activity-presentation .toolkit-activity-progress { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 14px; color: #2F817B; font-size: 10px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.toolkit-activity-presentation .toolkit-activity-progress strong { padding: 6px 9px; border-radius: 999px; color: #11192A; background: #8FD6D3; font-size: 10px; }
.toolkit-activity-presentation .toolkit-activity-focus,.toolkit-activity-presentation .toolkit-task-card {
  display: grid;
  min-height: 180px;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: clamp(22px,4vw,38px);
  border: 1px solid #D9E4E8;
  border-radius: 22px;
  background: radial-gradient(circle at 90% 0,#F5F8FA,#fff 48%);
  box-shadow: 0 12px 30px rgba(23,23,23,.07);
  text-align: center;
}
.toolkit-activity-presentation .toolkit-activity-focus > span,.toolkit-activity-presentation .toolkit-task-card > span { color: #2F817B; font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.toolkit-activity-presentation .toolkit-activity-focus > strong,.toolkit-activity-presentation .toolkit-task-card > strong { max-width: 850px; color: #11192A; font-size: clamp(24px,4vw,40px); line-height: 1.18; letter-spacing: -.035em; }
.toolkit-activity-presentation .toolkit-activity-focus > p { max-width: 680px; margin: 3px 0 0; color: #636C77; font-size: 11px; line-height: 1.5; }
.toolkit-activity-presentation .toolkit-activity-reveal { display: grid; gap: 5px; min-height: 70px; place-items: center; margin-top: 13px; padding: 13px 16px; border: 1px dashed #D9E4E8; border-radius: 14px; color: #636C77; background: #F5F8FA; text-align: center; }
.toolkit-activity-presentation .toolkit-activity-reveal span { font-size: 8px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.toolkit-activity-presentation .toolkit-activity-reveal strong { font-size: 11px; line-height: 1.45; }
.toolkit-activity-presentation .toolkit-activity-reveal.is-revealed { border-style: solid; border-color: #8FD6D3; color: #11192A; background: #E4F2F5; box-shadow: inset 0 0 0 3px rgba(143,214,211,.1); }
.toolkit-activity-presentation .toolkit-activity-reveal.is-revealed strong { font-size: clamp(16px,2.4vw,24px); }
.toolkit-activity-presentation .toolkit-tps-stages { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 13px; }
.toolkit-activity-presentation .toolkit-tps-stages article { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 10px; border: 1px solid #D9E4E8; border-radius: 12px; color: #636C77; background: #F5F8FA; }
.toolkit-activity-presentation .toolkit-tps-stages article > span { display: grid; width: 23px; height: 23px; place-items: center; border-radius: 50%; color: #636C77; background: #F5F8FA; font-size: 9px; font-weight: 900; }
.toolkit-activity-presentation .toolkit-tps-stages article > strong { font-size: 10px; }
.toolkit-activity-presentation .toolkit-tps-stages article > small { font-size: 8px; }
.toolkit-activity-presentation .toolkit-tps-stages article.active { color: #11192A; border-color: #516A91; background: #F5F8FA; box-shadow: 0 0 0 3px rgba(143,214,211,.11); }
.toolkit-activity-presentation .toolkit-tps-stages article.active > span,.toolkit-activity-presentation .toolkit-tps-stages article.complete > span { color: #11192A; background: #8FD6D3; }
.toolkit-activity-presentation .toolkit-rotation-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.toolkit-activity-presentation .toolkit-rotation-grid article { overflow: hidden; border: 1px solid #D9E4E8; border-radius: 16px; background: #fff; box-shadow: 0 6px 18px rgba(23,23,23,.05); }
.toolkit-activity-presentation .toolkit-rotation-grid article > div { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 10px 12px; color: #11192A; background: linear-gradient(135deg,#8FD6D3,#8FD6D3); }
.toolkit-activity-presentation .toolkit-rotation-grid article > div span { font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.toolkit-activity-presentation .toolkit-rotation-grid article > div strong { font-size: 10px; text-align: right; }
.toolkit-activity-presentation .toolkit-rotation-grid article > p { min-height: 54px; margin: 0; padding: 13px; color: #11192A; font-size: 11px; font-weight: 750; line-height: 1.5; }
.toolkit-activity-presentation .toolkit-rotation-grid article > small { display: block; margin: 0 13px 11px; padding: 9px; border-radius: 9px; color: #636C77; background: #E4F2F5; font-size: 9px; line-height: 1.45; }
.toolkit-activity-presentation .toolkit-rotation-grid article > footer { padding: 9px 12px; border-top: 1px solid #F5F8FA; color: #636C77; background: #F5F8FA; font-size: 8px; line-height: 1.4; }
.toolkit-activity-presentation .toolkit-observation-note { margin-top: 13px; padding: 12px; border: 1px solid #D9E4E8; border-radius: 13px; background: #F5F8FA; }
.toolkit-activity-presentation .toolkit-observation-note textarea { resize: vertical; font-size: 10px; line-height: 1.45; }
.toolkit-activity-presentation .toolkit-activity-complete { display: grid; min-height: 270px; justify-items: center; align-content: center; gap: 8px; padding: 30px; border: 1px solid #8FD6D3; border-radius: 23px; color: #636C77; background: radial-gradient(circle at top,#E4F2F5,#fff 67%); text-align: center; }
.toolkit-activity-presentation .toolkit-activity-complete svg { width: 40px; height: 40px; color: #516A91; }
.toolkit-activity-presentation .toolkit-activity-complete span { color: #2F817B; font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.toolkit-activity-presentation .toolkit-activity-complete strong { font-size: clamp(23px,4vw,38px); letter-spacing: -.035em; }
.toolkit-activity-presentation .toolkit-activity-complete p { max-width: 560px; margin: 2px 0 0; color: #636C77; font-size: 11px; line-height: 1.55; }
@media (max-width:760px) {
  .route-teachertoolkit .toolkit-activity-next { align-items: flex-start; flex-direction: column; }
  .route-teachertoolkit .toolkit-activity-next span { text-align: left; }
  .toolkit-activity-presentation .toolkit-activity-library > article { grid-template-columns: auto minmax(0,1fr); }
  .toolkit-activity-presentation .toolkit-activity-library-actions { grid-column: 1 / -1; grid-template-columns: repeat(3,1fr); }
  .toolkit-activity-presentation .toolkit-activity-library-actions .button:first-child { grid-column: auto; }
  .toolkit-activity-presentation .toolkit-activity-meta,.toolkit-activity-presentation .toolkit-activity-stage-settings,.toolkit-activity-presentation .toolkit-rotation-grid { grid-template-columns: 1fr; }
  .toolkit-activity-presentation .toolkit-tps-stages article { grid-template-columns: auto 1fr; }
  .toolkit-activity-presentation .toolkit-tps-stages article > small { grid-column: 2; }
}

/* AcadMates v189 — isolated Teacher Toolkit Rubrics and Feedback Center. */
.route-teachertoolkit .toolkit-rubric-center {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 18px 24px;
  align-items: center;
  margin-top: 16px;
  padding: 22px;
  border: 1px solid #11192A;
  border-radius: 22px;
  color: #F5F8FA;
  background: radial-gradient(circle at 92% 5%,rgba(143,214,211,.2),transparent 32%),linear-gradient(135deg,#1d1d1b,#11192A);
  box-shadow: 0 16px 38px rgba(23,23,23,.13);
}
.route-teachertoolkit .toolkit-rubric-center-copy { display: flex; gap: 14px; align-items: flex-start; }
.route-teachertoolkit .toolkit-rubric-center-copy > svg { width: 29px; height: 29px; flex: 0 0 auto; color: #8FD6D3; }
.route-teachertoolkit .toolkit-rubric-center-copy span { color: #8FD6D3; font-size: 9px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.route-teachertoolkit .toolkit-rubric-center-copy h2 { margin: 5px 0 7px; color: #fff; font-size: 19px; letter-spacing: -.025em; }
.route-teachertoolkit .toolkit-rubric-center-copy p { max-width: 740px; margin: 0; color: #D9E4E8; font-size: 11px; line-height: 1.55; }
.route-teachertoolkit .toolkit-rubric-center-metrics { display: grid; grid-template-columns: repeat(2,minmax(110px,1fr)); gap: 8px; }
.route-teachertoolkit .toolkit-rubric-center-metrics article { padding: 12px; border: 1px solid rgba(255,255,255,.11); border-radius: 13px; background: rgba(0,0,0,.17); text-align: center; }
.route-teachertoolkit .toolkit-rubric-center-metrics strong,.route-teachertoolkit .toolkit-rubric-center-metrics span { display: block; }
.route-teachertoolkit .toolkit-rubric-center-metrics strong { color: #8FD6D3; font-size: 21px; }
.route-teachertoolkit .toolkit-rubric-center-metrics span { margin-top: 4px; color: #D9E4E8; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.route-teachertoolkit .toolkit-rubric-center-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.route-teachertoolkit .toolkit-rubric-center-actions .button { display: inline-flex; gap: 7px; align-items: center; }
.route-teachertoolkit .toolkit-rubric-center-actions svg { width: 17px; height: 17px; }
.toolkit-rubric-presentation .toolkit-rubric-library,.toolkit-rubric-presentation .toolkit-feedback-library { display: grid; gap: 10px; }
.toolkit-rubric-presentation .toolkit-rubric-library > article,.toolkit-rubric-presentation .toolkit-feedback-library > article {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  gap: 13px;
  align-items: center;
  padding: 14px;
  border: 1px solid #D9E4E8;
  border-radius: 16px;
  background: linear-gradient(145deg,#fff,#F5F8FA);
  box-shadow: 0 7px 20px rgba(23,23,23,.05);
}
.toolkit-rubric-presentation .toolkit-rubric-library-icon { display: grid; width: 43px; height: 43px; place-items: center; border-radius: 12px; color: #11192A; background: linear-gradient(145deg,#E4F2F5,#8FD6D3); }
.toolkit-rubric-presentation .toolkit-rubric-library-icon svg { width: 21px; height: 21px; }
.toolkit-rubric-presentation .toolkit-rubric-library article > div:nth-child(2) > span,.toolkit-rubric-presentation .toolkit-feedback-library article > div:nth-child(2) > span { color: #2F817B; font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.toolkit-rubric-presentation .toolkit-rubric-library h4,.toolkit-rubric-presentation .toolkit-feedback-library h4 { margin: 3px 0 5px; font-size: 14px; }
.toolkit-rubric-presentation .toolkit-rubric-library p,.toolkit-rubric-presentation .toolkit-feedback-library p { margin: 0; color: #636C77; font-size: 10px; line-height: 1.45; }
.toolkit-rubric-presentation .toolkit-rubric-library small,.toolkit-rubric-presentation .toolkit-feedback-library small { display: block; margin-top: 6px; color: #636C77; font-size: 9px; line-height: 1.4; }
.toolkit-rubric-presentation .toolkit-rubric-library-actions { display: grid; grid-template-columns: auto auto; gap: 6px; }
.toolkit-rubric-presentation .toolkit-rubric-library-actions .button:first-child { grid-column: 1 / -1; }
.toolkit-rubric-presentation .toolkit-rubric-create-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-top: 13px; }
.toolkit-rubric-presentation .toolkit-rubric-create-grid > button { display: flex; gap: 11px; align-items: center; padding: 14px; border: 1px solid #8FD6D3; border-radius: 14px; color: #636C77; background: linear-gradient(145deg,#F5F8FA,#fff); text-align: left; }
.toolkit-rubric-presentation .toolkit-rubric-create-grid > button:hover { border-color: #516A91; box-shadow: 0 0 0 3px rgba(143,214,211,.11); }
.toolkit-rubric-presentation .toolkit-rubric-create-grid svg { width: 24px; height: 24px; flex: 0 0 auto; color: #516A91; }
.toolkit-rubric-presentation .toolkit-rubric-create-grid span,.toolkit-rubric-presentation .toolkit-rubric-create-grid strong,.toolkit-rubric-presentation .toolkit-rubric-create-grid small { display: block; }
.toolkit-rubric-presentation .toolkit-rubric-create-grid strong { font-size: 11px; }
.toolkit-rubric-presentation .toolkit-rubric-create-grid small { margin-top: 3px; color: #636C77; font-size: 9px; }
.toolkit-rubric-presentation .toolkit-rubric-format { margin-bottom: 15px; padding: 14px 16px; border-left: 4px solid #8FD6D3; border-radius: 12px; color: #11192A; background: #F5F8FA; }
.toolkit-rubric-presentation .toolkit-rubric-format span { display: block; color: #2F817B; font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.toolkit-rubric-presentation .toolkit-rubric-format strong { display: block; margin-top: 4px; color: #11192A; font-size: 12px; }
.toolkit-rubric-presentation .toolkit-rubric-format p { margin: 6px 0 0; font-size: 10px; line-height: 1.5; }
.toolkit-rubric-presentation .toolkit-rubric-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-bottom: 13px; }
.toolkit-rubric-presentation .toolkit-rubric-meta label,.toolkit-rubric-presentation .toolkit-rubric-editor,.toolkit-rubric-presentation .toolkit-feedback-context label,.toolkit-rubric-presentation .toolkit-rubric-rating-grid label,.toolkit-rubric-presentation .toolkit-feedback-notes label { display: grid; gap: 6px; color: #636C77; font-size: 10px; font-weight: 850; }
.toolkit-rubric-presentation .toolkit-rubric-meta .span-2 { grid-column: 1 / -1; }
.toolkit-rubric-presentation .toolkit-rubric-meta textarea,.toolkit-rubric-presentation .toolkit-feedback-notes textarea { resize: vertical; }
.toolkit-rubric-presentation .toolkit-rubric-editor textarea { min-height: 265px; resize: vertical; font-family: ui-monospace,SFMono-Regular,Consolas,monospace; font-size: 10px; line-height: 1.55; }
.toolkit-rubric-presentation .toolkit-rubric-delete { padding: 18px; border: 1px solid #e5c5c1; border-radius: 15px; color: #653d38; background: #fff3f1; }
.toolkit-rubric-presentation .toolkit-rubric-delete strong { font-size: 12px; }
.toolkit-rubric-presentation .toolkit-rubric-delete p { margin: 6px 0 0; font-size: 10px; line-height: 1.55; }
.toolkit-rubric-presentation .toolkit-feedback-context { display: grid; grid-template-columns: minmax(220px,.65fr) minmax(0,1fr); gap: 11px; align-items: stretch; margin-bottom: 13px; }
.toolkit-rubric-presentation .toolkit-feedback-context > div { display: grid; align-content: center; padding: 11px 13px; border: 1px solid #D9E4E8; border-radius: 12px; background: #F5F8FA; }
.toolkit-rubric-presentation .toolkit-feedback-context span { color: #2F817B; font-size: 8px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.toolkit-rubric-presentation .toolkit-feedback-context strong { margin-top: 3px; font-size: 11px; }
.toolkit-rubric-presentation .toolkit-feedback-context small { margin-top: 3px; color: #636C77; font-size: 9px; }
.toolkit-rubric-presentation .toolkit-rubric-rating-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.toolkit-rubric-presentation .toolkit-rubric-rating-grid article { padding: 13px; border: 1px solid #D9E4E8; border-radius: 15px; background: #fff; box-shadow: 0 5px 16px rgba(23,23,23,.045); }
.toolkit-rubric-presentation .toolkit-rubric-rating-grid article > div { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; margin-bottom: 9px; }
.toolkit-rubric-presentation .toolkit-rubric-rating-grid article > div span { padding: 4px 7px; border-radius: 999px; color: #2F817B; background: #E4F2F5; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.toolkit-rubric-presentation .toolkit-rubric-rating-grid article > div strong { font-size: 11px; line-height: 1.35; }
.toolkit-rubric-presentation .toolkit-rubric-rating-grid article > p { margin: 0 0 9px; color: #636C77; font-size: 9px; line-height: 1.45; }
.toolkit-rubric-presentation .toolkit-rubric-rating-grid select { font-size: 9px; }
.toolkit-rubric-presentation .toolkit-feedback-notes { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 13px; }
.toolkit-rubric-presentation .toolkit-feedback-notes textarea { min-height: 92px; font-size: 10px; line-height: 1.45; }
.toolkit-rubric-presentation .toolkit-feedback-band { display: grid; width: 78px; height: 50px; place-items: center; border-radius: 12px; color: #2F817B; background: #E4F2F5; text-align: center; }
.toolkit-rubric-presentation .toolkit-feedback-band span { font-size: 8px; font-weight: 900; line-height: 1.3; text-transform: uppercase; }
.toolkit-rubric-presentation .toolkit-feedback-band.mastered { color: #21553a; background: #dff0e4; }
.toolkit-rubric-presentation .toolkit-feedback-band.needs-support { color: #7d3b35; background: #f7e1de; }
.toolkit-rubric-presentation .toolkit-feedback-library-actions { display: grid; gap: 6px; }
.toolkit-rubric-presentation .toolkit-feedback-detail > header { display: grid; gap: 3px; padding: 17px; border: 1px solid #11192A; border-radius: 16px; color: #fff; background: linear-gradient(135deg,#232320,#11192A); }
.toolkit-rubric-presentation .toolkit-feedback-detail > header span { color: #8FD6D3; font-size: 8px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.toolkit-rubric-presentation .toolkit-feedback-detail > header strong { font-size: 21px; }
.toolkit-rubric-presentation .toolkit-feedback-detail > header small { color: #D9E4E8; font-size: 9px; }
.toolkit-rubric-presentation .toolkit-feedback-result { display: grid; justify-items: center; gap: 4px; margin: 12px 0; padding: 15px; border: 1px solid #8FD6D3; border-radius: 15px; background: radial-gradient(circle at top,#E4F2F5,#fff); text-align: center; }
.toolkit-rubric-presentation .toolkit-feedback-result span { color: #2F817B; font-size: 8px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.toolkit-rubric-presentation .toolkit-feedback-result strong { font-size: 25px; }
.toolkit-rubric-presentation .toolkit-feedback-result small { color: #636C77; font-size: 9px; }
.toolkit-rubric-presentation .toolkit-feedback-criteria { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.toolkit-rubric-presentation .toolkit-feedback-criteria article { padding: 12px; border: 1px solid #D9E4E8; border-radius: 13px; background: #F5F8FA; }
.toolkit-rubric-presentation .toolkit-feedback-criteria article > div { display: flex; justify-content: space-between; gap: 8px; }
.toolkit-rubric-presentation .toolkit-feedback-criteria strong { font-size: 10px; }
.toolkit-rubric-presentation .toolkit-feedback-criteria span { color: #2F817B; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.toolkit-rubric-presentation .toolkit-feedback-criteria p { margin: 6px 0 0; color: #636C77; font-size: 9px; line-height: 1.45; }
.toolkit-rubric-presentation .toolkit-feedback-detail > section,.toolkit-rubric-presentation .toolkit-feedback-message section { margin-top: 10px; padding: 13px; border: 1px solid #D9E4E8; border-radius: 13px; background: #fff; }
.toolkit-rubric-presentation .toolkit-feedback-detail section span { color: #2F817B; font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.toolkit-rubric-presentation .toolkit-feedback-detail section p { margin: 5px 0 0; color: #11192A; font-size: 10px; line-height: 1.55; }
.toolkit-rubric-presentation .toolkit-feedback-message { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
@media (max-width:760px) {
  .route-teachertoolkit .toolkit-rubric-center { grid-template-columns: 1fr; }
  .route-teachertoolkit .toolkit-rubric-center-metrics { grid-template-columns: repeat(2,1fr); }
  .route-teachertoolkit .toolkit-rubric-center-actions { grid-column: auto; }
  .toolkit-rubric-presentation .toolkit-rubric-library > article,.toolkit-rubric-presentation .toolkit-feedback-library > article { grid-template-columns: auto minmax(0,1fr); }
  .toolkit-rubric-presentation .toolkit-rubric-library-actions,.toolkit-rubric-presentation .toolkit-feedback-library-actions { grid-column: 1 / -1; grid-template-columns: repeat(3,1fr); }
  .toolkit-rubric-presentation .toolkit-rubric-library-actions .button:first-child { grid-column: auto; }
  .toolkit-rubric-presentation .toolkit-rubric-create-grid,.toolkit-rubric-presentation .toolkit-rubric-meta,.toolkit-rubric-presentation .toolkit-feedback-context,.toolkit-rubric-presentation .toolkit-rubric-rating-grid,.toolkit-rubric-presentation .toolkit-feedback-notes,.toolkit-rubric-presentation .toolkit-feedback-criteria,.toolkit-rubric-presentation .toolkit-feedback-message { grid-template-columns: 1fr; }
}

/* AcadMates v190 — isolated Teacher Toolkit Print, Export, and Activity History. */
.route-teachertoolkit .toolkit-output-center {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 18px 24px;
  align-items: center;
  margin-top: 16px;
  padding: 22px;
  border: 1px solid #8FD6D3;
  border-radius: 22px;
  background: radial-gradient(circle at 90% 0,rgba(143,214,211,.22),transparent 35%),linear-gradient(145deg,#F5F8FA,#F5F8FA);
  box-shadow: 0 16px 38px rgba(21,31,59,.1);
}
.route-teachertoolkit .toolkit-output-center-copy { display: flex; gap: 14px; align-items: flex-start; }
.route-teachertoolkit .toolkit-output-center-copy > svg { width: 29px; height: 29px; flex: 0 0 auto; color: #516A91; }
.route-teachertoolkit .toolkit-output-center-copy span { color: #2F817B; font-size: 9px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.route-teachertoolkit .toolkit-output-center-copy h2 { margin: 5px 0 7px; color: #11192A; font-size: 19px; letter-spacing: -.025em; }
.route-teachertoolkit .toolkit-output-center-copy p { max-width: 740px; margin: 0; color: #636C77; font-size: 11px; line-height: 1.55; }
.route-teachertoolkit .toolkit-output-center-metrics { display: grid; grid-template-columns: repeat(2,minmax(110px,1fr)); gap: 8px; }
.route-teachertoolkit .toolkit-output-center-metrics article { padding: 12px; border: 1px solid #E4F2F5; border-radius: 13px; background: rgba(255,255,255,.72); text-align: center; }
.route-teachertoolkit .toolkit-output-center-metrics strong,.route-teachertoolkit .toolkit-output-center-metrics span { display: block; }
.route-teachertoolkit .toolkit-output-center-metrics strong { color: #2F817B; font-size: 21px; }
.route-teachertoolkit .toolkit-output-center-metrics span { margin-top: 4px; color: #636C77; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.route-teachertoolkit .toolkit-output-center-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.route-teachertoolkit .toolkit-output-center-actions .button,.toolkit-output-presentation .toolkit-output-export-actions .button { display: inline-flex; gap: 7px; align-items: center; }
.route-teachertoolkit .toolkit-output-center-actions svg,.toolkit-output-presentation .toolkit-output-export-actions svg { width: 17px; height: 17px; }
.toolkit-output-presentation .toolkit-output-groups { display: grid; gap: 15px; }
.toolkit-output-presentation .toolkit-output-groups > section { padding: 15px; border: 1px solid #D9E4E8; border-radius: 17px; background: linear-gradient(145deg,#fff,#F5F8FA); box-shadow: 0 8px 22px rgba(21,31,59,.045); }
.toolkit-output-presentation .toolkit-output-groups > section > header { display: flex; justify-content: space-between; gap: 12px; align-items: end; padding: 0 2px 10px; border-bottom: 1px solid #D9E4E8; }
.toolkit-output-presentation .toolkit-output-groups > section > header span { color: #2F817B; font-size: 8px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.toolkit-output-presentation .toolkit-output-groups > section > header h3 { margin: 0; color: #636C77; font-size: 14px; }
.toolkit-output-presentation .toolkit-output-resource-list { display: grid; gap: 9px; margin-top: 10px; }
.toolkit-output-presentation .toolkit-output-resource {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid #D9E4E8;
  border-radius: 14px;
  background: #fff;
}
.toolkit-output-presentation .toolkit-output-resource-icon,.toolkit-output-presentation .toolkit-history-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  color: #11192A;
  background: linear-gradient(145deg,#E4F2F5,#8FD6D3);
  box-shadow: inset 0 0 0 1px rgba(81,106,145,.12);
}
.toolkit-output-presentation .toolkit-output-resource-icon svg,.toolkit-output-presentation .toolkit-history-icon svg { width: 21px; height: 21px; }
.toolkit-output-presentation .toolkit-output-resource > div:nth-child(2) > span { color: #2F817B; font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.toolkit-output-presentation .toolkit-output-resource h4 { margin: 3px 0 4px; font-size: 12px; }
.toolkit-output-presentation .toolkit-output-resource p { margin: 0; color: #636C77; font-size: 9px; line-height: 1.45; }
.toolkit-output-presentation .toolkit-output-resource-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.toolkit-output-presentation .toolkit-output-export-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; padding-top: 11px; border-top: 1px solid #D9E4E8; }
.toolkit-output-presentation .toolkit-output-empty { display: grid; justify-items: center; gap: 5px; padding: 18px; border: 1px dashed #D9E4E8; border-radius: 14px; color: #636C77; background: #F5F8FA; text-align: center; }
.toolkit-output-presentation .toolkit-output-empty svg { width: 25px; height: 25px; color: #516A91; }
.toolkit-output-presentation .toolkit-output-empty strong { color: #11192A; font-size: 11px; }
.toolkit-output-presentation .toolkit-output-empty span { max-width: 520px; font-size: 9px; line-height: 1.45; }
.toolkit-output-presentation .toolkit-history-list { display: grid; gap: 9px; max-height: 53vh; overflow: auto; padding-right: 4px; }
.toolkit-output-presentation .toolkit-history-list > article {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px;
  border: 1px solid #D9E4E8;
  border-radius: 15px;
  background: linear-gradient(145deg,#fff,#F5F8FA);
}
.toolkit-output-presentation .toolkit-history-list > article.kind-activity-completed { border-color: #b9d8c4; background: linear-gradient(145deg,#fff,#eef8f1); }
.toolkit-output-presentation .toolkit-history-list > article.kind-export-created { border-color: #c9d5e5; background: linear-gradient(145deg,#fff,#f0f5fb); }
.toolkit-output-presentation .toolkit-history-list > article > div:nth-child(2) > span { color: #2F817B; font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.toolkit-output-presentation .toolkit-history-list h4 { margin: 3px 0 4px; font-size: 12px; }
.toolkit-output-presentation .toolkit-history-list p { margin: 0; color: #636C77; font-size: 9px; line-height: 1.45; }
.toolkit-output-presentation .toolkit-history-list time { color: #636C77; font-size: 8px; font-weight: 750; white-space: nowrap; }
@media (max-width:760px) {
  .route-teachertoolkit .toolkit-output-center { grid-template-columns: 1fr; }
  .route-teachertoolkit .toolkit-output-center-metrics { grid-template-columns: repeat(2,1fr); }
  .route-teachertoolkit .toolkit-output-center-actions { grid-column: auto; }
  .toolkit-output-presentation .toolkit-output-resource,.toolkit-output-presentation .toolkit-history-list > article { grid-template-columns: auto minmax(0,1fr); }
  .toolkit-output-presentation .toolkit-output-resource-actions,.toolkit-output-presentation .toolkit-history-list time { grid-column: 1 / -1; }
  .toolkit-output-presentation .toolkit-output-resource-actions { justify-content: stretch; }
  .toolkit-output-presentation .toolkit-output-resource-actions .button { flex: 1; }
}

/* AcadMates v191 — isolated Teacher Toolkit Game Center expansion. */
@media (min-width:761px) {
  .route-teachertoolkit .teacher-toolkit-grid { align-items: stretch; }
  .route-teachertoolkit .teacher-toolkit-grid > .toolkit-game-card { height: 218px; min-height: 218px; }
}
.toolkit-game-presentation .toolkit-puzzle-stage,.toolkit-game-presentation .toolkit-truefalse-stage,.toolkit-game-presentation .toolkit-race-stage {
  padding: clamp(20px,4vw,34px);
  border: 1px solid #D9E4E8;
  border-radius: 22px;
  background: radial-gradient(circle at 90% 0,#F5F8FA,#fff 46%);
  box-shadow: 0 12px 30px rgba(23,23,23,.07);
}
.toolkit-game-presentation .toolkit-puzzle-clue { display: grid; justify-items: center; gap: 8px; min-height: 105px; place-content: center; padding: 18px; text-align: center; }
.toolkit-game-presentation .toolkit-puzzle-clue span { color: #2F817B; font-size: 9px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.toolkit-game-presentation .toolkit-puzzle-clue strong { color: #11192A; font-size: clamp(23px,3.6vw,40px); line-height: 1.2; letter-spacing: -.03em; }
.toolkit-game-presentation .toolkit-puzzle-answer { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-height: 82px; align-items: center; padding: 14px; border: 1px solid #E4F2F5; border-radius: 17px; background: #fff; }
.toolkit-game-presentation .toolkit-puzzle-answer > span { display: grid; width: 37px; height: 45px; place-items: center; border-bottom: 3px solid #8FD6D3; color: #11192A; font-size: 23px; font-weight: 900; }
.toolkit-game-presentation .toolkit-puzzle-answer > span.separator { width: 17px; border-bottom: 0; }
.toolkit-game-presentation .toolkit-puzzle-hint { display: grid; gap: 4px; margin-top: 12px; padding: 12px 14px; border: 1px dashed #D9E4E8; border-radius: 13px; color: #636C77; background: #F5F8FA; }
.toolkit-game-presentation .toolkit-puzzle-hint.is-visible { border-style: solid; border-color: #8FD6D3; color: #2F817B; background: #F5F8FA; }
.toolkit-game-presentation .toolkit-puzzle-hint span { color: #2F817B; font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.toolkit-game-presentation .toolkit-puzzle-hint strong { font-size: 11px; line-height: 1.45; }
.toolkit-game-presentation .toolkit-truefalse-choices { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin: 12px 0; }
.toolkit-game-presentation .toolkit-truefalse-choices article { display: flex; gap: 12px; align-items: center; justify-content: center; min-height: 88px; padding: 14px; border: 2px solid #D9E4E8; border-radius: 17px; color: #11192A; background: #fff; transition: opacity .2s,border-color .2s,background .2s; }
.toolkit-game-presentation .toolkit-truefalse-choices article span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; color: #fff; background: #11192A; font-size: 17px; font-weight: 900; }
.toolkit-game-presentation .toolkit-truefalse-choices article strong { font-size: 18px; letter-spacing: .04em; }
.toolkit-game-presentation .toolkit-truefalse-choices article.correct { border-color: #4f9b68; color: #1f5b36; background: #e8f5ec; box-shadow: 0 0 0 4px rgba(79,155,104,.1); }
.toolkit-game-presentation .toolkit-truefalse-choices article.correct span { background: #43865a; }
.toolkit-game-presentation .toolkit-truefalse-choices article.dimmed { opacity: .42; }
.toolkit-game-presentation .toolkit-race-stage { overflow: hidden; background: radial-gradient(circle at 92% 0,rgba(143,214,211,.28),transparent 37%),linear-gradient(145deg,#252521,#11192A); }
.toolkit-game-presentation .toolkit-race-banner { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 14px; align-items: center; color: #fff; }
.toolkit-game-presentation .toolkit-race-banner span { padding: 7px 10px; border-radius: 999px; color: #11192A; background: #8FD6D3; font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.toolkit-game-presentation .toolkit-race-banner strong { font-size: clamp(18px,3vw,28px); }
.toolkit-game-presentation .toolkit-race-banner b { color: #8FD6D3; font-size: 15px; }
.toolkit-game-presentation .toolkit-race-challenge { display: grid; min-height: 150px; place-items: center; padding: 25px 16px; color: #fff; font-size: clamp(24px,4vw,42px); font-weight: 850; line-height: 1.2; text-align: center; }
.toolkit-game-presentation .toolkit-race-stage .toolkit-game-answer { border-color: rgba(255,255,255,.13); background: rgba(255,255,255,.08); }
.toolkit-game-presentation .toolkit-race-stage .toolkit-game-answer span { color: #8FD6D3; }
.toolkit-game-presentation .toolkit-race-stage .toolkit-game-answer strong { color: #fff; }
@media (max-width:760px) {
  .toolkit-game-presentation .toolkit-truefalse-choices { grid-template-columns: 1fr; }
  .toolkit-game-presentation .toolkit-race-banner { grid-template-columns: 1fr auto; }
  .toolkit-game-presentation .toolkit-race-banner strong { grid-column: 1 / -1; grid-row: 1; }
  .toolkit-game-presentation .toolkit-race-banner span { grid-row: 2; justify-self: start; }
  .toolkit-game-presentation .toolkit-race-banner b { grid-row: 2; }
  .toolkit-game-presentation .toolkit-puzzle-answer > span { width: 31px; height: 38px; font-size: 19px; }
}

/* AcadMates v192 — isolated Teacher Toolkit Activity Builder expansion. */
@media (min-width:761px) {
  .route-teachertoolkit .teacher-toolkit-grid > .toolkit-activity-card { height: 218px; min-height: 218px; }
}
.toolkit-activity-presentation .toolkit-jigsaw-stages {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 9px;
  margin-bottom: 12px;
}
.toolkit-activity-presentation .toolkit-jigsaw-stages article {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid #D9E4E8;
  border-radius: 13px;
  color: #636C77;
  background: #F5F8FA;
}
.toolkit-activity-presentation .toolkit-jigsaw-stages article > span {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  color: #636C77;
  background: #F5F8FA;
  font-size: 9px;
  font-weight: 900;
}
.toolkit-activity-presentation .toolkit-jigsaw-stages article > strong { font-size: 10px; }
.toolkit-activity-presentation .toolkit-jigsaw-stages article.active {
  border-color: #516A91;
  color: #11192A;
  background: #F5F8FA;
  box-shadow: 0 0 0 3px rgba(143,214,211,.1);
}
.toolkit-activity-presentation .toolkit-jigsaw-stages article.active > span,.toolkit-activity-presentation .toolkit-jigsaw-stages article.complete > span {
  color: #11192A;
  background: #8FD6D3;
}
.toolkit-activity-presentation .toolkit-jigsaw-stage-note {
  display: grid;
  gap: 5px;
  margin-bottom: 12px;
  padding: 14px 16px;
  border-left: 4px solid #8FD6D3;
  border-radius: 12px;
  color: #636C77;
  background: linear-gradient(135deg,#F5F8FA,#F5F8FA);
}
.toolkit-activity-presentation .toolkit-jigsaw-stage-note span {
  color: #2F817B;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.toolkit-activity-presentation .toolkit-jigsaw-stage-note strong { font-size: 11px; line-height: 1.5; }
.toolkit-activity-presentation .toolkit-jigsaw-grid,.toolkit-activity-presentation .toolkit-jigsaw-synthesis {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
}
.toolkit-activity-presentation .toolkit-jigsaw-grid article,.toolkit-activity-presentation .toolkit-jigsaw-synthesis article {
  overflow: hidden;
  border: 1px solid #D9E4E8;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 7px 20px rgba(23,23,23,.05);
}
.toolkit-activity-presentation .toolkit-jigsaw-grid article > header {
  display: grid;
  gap: 3px;
  padding: 11px 13px;
  color: #11192A;
  background: linear-gradient(135deg,#8FD6D3,#8FD6D3);
}
.toolkit-activity-presentation .toolkit-jigsaw-grid article > header span,.toolkit-activity-presentation .toolkit-jigsaw-synthesis article > span {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.toolkit-activity-presentation .toolkit-jigsaw-grid article > header strong { font-size: 11px; }
.toolkit-activity-presentation .toolkit-jigsaw-grid article > p {
  min-height: 52px;
  margin: 0;
  padding: 13px;
  color: #11192A;
  font-size: 10px;
  font-weight: 720;
  line-height: 1.5;
}
.toolkit-activity-presentation .toolkit-jigsaw-grid article > footer {
  padding: 10px 13px;
  border-top: 1px solid #E4F2F5;
  color: #636C77;
  background: #F5F8FA;
  font-size: 8px;
  line-height: 1.45;
}
.toolkit-activity-presentation .toolkit-jigsaw-grid.home article > div {
  display: grid;
  gap: 6px;
  padding: 0 13px 13px;
}
.toolkit-activity-presentation .toolkit-jigsaw-grid.home article > div > span {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 9px;
  color: #636C77;
  background: #F5F8FA;
}
.toolkit-activity-presentation .toolkit-jigsaw-grid.home article > div b { font-size: 9px; }
.toolkit-activity-presentation .toolkit-jigsaw-grid.home article > div small { color: #2F817B; font-size: 8px; text-align: right; }
.toolkit-activity-presentation .toolkit-jigsaw-synthesis article {
  display: grid;
  gap: 6px;
  padding: 16px;
  border-top: 4px solid #8FD6D3;
  background: radial-gradient(circle at 100% 0,#E4F2F5,#fff 52%);
}
.toolkit-activity-presentation .toolkit-jigsaw-synthesis article > span { color: #2F817B; }
.toolkit-activity-presentation .toolkit-jigsaw-synthesis article > strong { color: #11192A; font-size: 14px; }
.toolkit-activity-presentation .toolkit-jigsaw-synthesis article > p { margin: 0; color: #636C77; font-size: 10px; line-height: 1.5; }
@media (max-width:760px) {
  .toolkit-activity-presentation .toolkit-jigsaw-stages,.toolkit-activity-presentation .toolkit-jigsaw-grid,.toolkit-activity-presentation .toolkit-jigsaw-synthesis { grid-template-columns: 1fr; }
}

/* v200 desktop shell and activation experience */
:root { --desktop-titlebar-height: 34px; --app-navy: #121212; --app-navy-2: #1a1a1a; --app-gold: #8FD6D3; }
body { padding-top: var(--desktop-titlebar-height); background: #f4f6fa; }
.desktop-titlebar { position: fixed; z-index: 1200; inset: 0 0 auto 0; height: var(--desktop-titlebar-height); display: flex; align-items: center; padding: 0 140px 0 14px; color: #fff; background: #141414; -webkit-app-region: drag; user-select: none; }
.desktop-titlebar-brand { display: flex; align-items: center; gap: 0; min-width: 0; }
.desktop-titlebar-brand img { display: none; }
.desktop-titlebar-brand strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 800; letter-spacing: .02em; }
.desktop-titlebar-brand span { color: #b7c2d2; font-size: 11px; font-weight: 600; }
.app-loader { inset: var(--desktop-titlebar-height) 0 0; }
.activation-screen { position: relative; min-height: calc(100vh - var(--desktop-titlebar-height)); display: grid; place-items: center; overflow: hidden; padding: 46px 24px; background:
  radial-gradient(circle at 50% 15%, rgba(219,228,243,.72), transparent 30%),
  linear-gradient(135deg, #f8f9fc 0%, #eef2f8 52%, #fafbfc 100%); }
.activation-screen::before, .activation-screen::after { content: ""; position: absolute; width: 54px; height: 54px; opacity: .48; background-image: radial-gradient(circle, #cbd3df 1.8px, transparent 2px); background-size: 16px 16px; }
.activation-screen::before { top: 44px; left: 40px; }
.activation-screen::after { right: 54px; bottom: 48px; }
.activation-background-mark { position: absolute; width: 410px; height: 410px; border: 1px solid rgba(98,117,148,.14); border-radius: 50%; pointer-events: none; }
.activation-background-mark::before { content: ""; position: absolute; inset: 52px; border: 1px solid rgba(98,117,148,.1); border-radius: inherit; }
.activation-background-mark-left { left: -260px; bottom: -230px; }
.activation-background-mark-right { right: -280px; top: 310px; }
.activation-card { position: relative; z-index: 2; align-self: auto; width: min(760px, calc(100vw - 48px)); margin: 0; padding: 30px clamp(38px, 6vw, 72px) 34px; border: 1px solid rgba(211,217,228,.9); border-radius: 24px; background: rgba(255,255,255,.96); box-shadow: 0 22px 60px rgba(19,39,70,.14); }
.activation-logo { display: block; width: 128px; height: 128px; margin: 0 auto 12px; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(0,0,0,.16)); }
.activation-heading { text-align: center; }
.activation-mode-label { display: inline-flex; align-items: center; min-height: 24px; margin-bottom: 7px; padding: 4px 10px; border-radius: 999px; color: #2F817B; background: #E3F4F0; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.activation-heading h1 { margin: 0; color: #081d43; font-size: clamp(27px, 3vw, 37px); line-height: 1.15; letter-spacing: -.03em; }
.activation-heading p { margin: 10px 0 26px; color: #667085; font-size: 15px; }
.activation-field { display: grid !important; grid-template-columns: 52px minmax(0,1fr); align-items: center; gap: 12px !important; min-height: 72px; margin: 0 0 14px !important; padding: 8px 16px 8px 10px; border: 1px solid #d7deea; border-radius: 13px; background: #fff; color: #0b234a !important; transition: border-color .16s ease, box-shadow .16s ease; }
.activation-field:focus-within { border-color: #516A91; box-shadow: 0 0 0 3px rgba(143,214,211,.15); }
.activation-field-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; color: #08265c; background: #f0f4fa; }
.activation-field-icon svg { width: 20px; height: 20px; fill: currentColor; }
.activation-field-copy { display: grid; gap: 2px; min-width: 0; }
.activation-field-copy strong { font-size: 12px; font-weight: 750; }
.activation-field input { min-height: 28px; padding: 0; border: 0; border-radius: 0; background: transparent; color: #1f2a44; font-size: 17px; box-shadow: none; }
.activation-field input:hover, .activation-field input:focus { border: 0; box-shadow: none; outline: 0; }
.activation-field input::placeholder { color: #8a94a8; opacity: 1; }
.activation-submit { width: 100%; min-height: 60px; display: flex; align-items: center; justify-content: center; gap: 11px; margin-top: 20px; border: 0; border-radius: 12px; color: white; background: linear-gradient(135deg, #061f4d, #082d68); box-shadow: 0 10px 24px rgba(5,34,80,.2); font-size: 18px; font-weight: 800; }
.activation-submit:hover { filter: brightness(1.08); transform: translateY(-1px); }
.activation-submit:active { transform: translateY(0); }
.activation-submit svg { width: 23px; height: 23px; fill: var(--app-gold); }
.activation-note { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 20px 0 0 !important; color: #7b8699 !important; font-size: 13px; text-align: center; }
.activation-note svg { width: 22px; height: 22px; flex: 0 0 auto; fill: #94a3b8; }
.app-shell { min-height: calc(100vh - var(--desktop-titlebar-height)); }
.sidebar { top: var(--desktop-titlebar-height); }
@media (max-width: 820px) {
  .activation-screen { grid-template-columns: 1fr; padding: 28px 18px; }
  .activation-card { width: min(650px, calc(100vw - 36px)); margin: 0; padding: 26px 28px 30px; }
  .activation-logo { width: 108px; height: 108px; }
}
@media (max-width: 560px) {
  .desktop-titlebar { padding-left: 10px; padding-right: 132px; }
  .desktop-titlebar-brand strong { font-size: 12px; }
  .activation-card { width: calc(100vw - 24px); padding: 22px 16px 25px; border-radius: 19px; }
  .activation-logo { width: 90px; height: 90px; }
  .activation-heading h1 { font-size: 25px; }
  .activation-heading p { font-size: 13px; }
  .activation-field { grid-template-columns: 44px minmax(0,1fr); min-height: 66px; padding-inline: 8px 12px; }
  .activation-field-icon { width: 38px; height: 38px; }
  .activation-field input { font-size: 15px; }
  .activation-submit { min-height: 54px; font-size: 16px; }
}


/* v201.1 responsive activation-card centering and compact fit */
.activation-screen {
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  justify-content: center;
  justify-items: center;
  min-height: calc(100dvh - var(--desktop-titlebar-height));
  width: 100%;
  padding: clamp(14px, 2.4vh, 24px) 18px;
  overflow: auto;
}
.activation-card {
  width: min(640px, calc(100vw - 36px));
  max-width: 640px;
  margin: 0 auto;
  padding: 20px clamp(28px, 4vw, 46px) 22px;
  border-radius: 22px;
}
.activation-logo {
  width: 94px;
  height: 94px;
  margin: 0 auto 7px;
}
.activation-mode-label {
  min-height: 20px;
  margin-bottom: 5px;
  padding: 3px 9px;
  font-size: 8px;
}
.activation-heading h1 {
  font-size: clamp(25px, 2.35vw, 31px);
  line-height: 1.12;
}
.activation-heading p {
  margin: 7px 0 18px;
  font-size: 14px;
}
.activation-field {
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 10px !important;
  min-height: 62px;
  margin-bottom: 10px !important;
  padding: 6px 14px 6px 8px;
  border-radius: 12px;
}
.activation-field-icon {
  width: 38px;
  height: 38px;
}
.activation-field-icon svg {
  width: 18px;
  height: 18px;
}
.activation-field-copy strong {
  font-size: 11px;
}
.activation-field input {
  min-height: 24px;
  font-size: 16px;
}
.activation-submit {
  min-height: 54px;
  margin-top: 14px;
  font-size: 17px;
}
.activation-submit svg {
  width: 21px;
  height: 21px;
}
.activation-note {
  margin-top: 14px !important;
  font-size: 12.5px;
}
.activation-note svg {
  width: 20px;
  height: 20px;
}
.activation-background-mark-right { top: 230px; }

@media (max-height: 700px) and (min-width: 561px) {
  .activation-screen { padding-block: 8px; }
  .activation-card { width: min(600px, calc(100vw - 32px)); padding: 14px 34px 16px; }
  .activation-logo { width: 72px; height: 72px; margin-bottom: 4px; }
  .activation-mode-label { min-height: 18px; margin-bottom: 3px; padding: 2px 8px; }
  .activation-heading h1 { font-size: 26px; }
  .activation-heading p { margin: 4px 0 12px; font-size: 13px; }
  .activation-field { min-height: 56px; margin-bottom: 8px !important; }
  .activation-submit { min-height: 50px; margin-top: 10px; font-size: 16px; }
  .activation-note { margin-top: 10px !important; font-size: 12px; }
}

@media (max-width: 560px) {
  .activation-screen { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .activation-card { width: calc(100vw - 24px); max-width: 520px; padding: 18px 14px 20px; }
  .activation-logo { width: 78px; height: 78px; }
  .activation-heading h1 { font-size: 24px; }
  .activation-heading p { margin-bottom: 14px; }
  .activation-field { grid-template-columns: 42px minmax(0, 1fr); min-height: 58px; padding-inline: 7px 11px; }
  .activation-field-icon { width: 36px; height: 36px; }
  .activation-field input { font-size: 15px; }
  .activation-submit { min-height: 52px; font-size: 16px; }
}


/* v1.0.0 fixed activation viewport: no page movement or scrollbars */
html,
body {
  width: 100%;
  height: 100%;
}

body.activation-active {
  overflow: hidden !important;
  overscroll-behavior: none;
}

body.activation-active .activation-screen {
  position: fixed;
  inset: var(--desktop-titlebar-height) 0 0 0;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: clamp(8px, 1.8vh, 16px);
  overflow: hidden !important;
  overscroll-behavior: none;
}

body.activation-active .activation-card {
  width: min(590px, calc(100vw - 28px));
  max-width: 590px;
  max-height: calc(100dvh - var(--desktop-titlebar-height) - 16px);
  margin: 0;
  padding: clamp(12px, 2vh, 18px) clamp(22px, 3.6vw, 38px) clamp(14px, 2vh, 18px);
  border-radius: 20px;
  overflow: hidden;
}

body.activation-active .activation-logo {
  width: clamp(64px, 10vh, 82px);
  height: clamp(64px, 10vh, 82px);
  margin: 0 auto 4px;
}

body.activation-active .activation-mode-label {
  min-height: 18px;
  margin-bottom: 3px;
  padding: 2px 8px;
  font-size: 8px;
}

body.activation-active .activation-heading h1 {
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.08;
}

body.activation-active .activation-heading p {
  margin: 5px 0 clamp(10px, 1.6vh, 15px);
  font-size: clamp(12px, 1.35vw, 14px);
  line-height: 1.35;
}

body.activation-active .activation-field {
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 9px !important;
  min-height: clamp(52px, 7.2vh, 58px);
  margin-bottom: clamp(7px, 1.1vh, 9px) !important;
  padding: 5px 12px 5px 7px;
  border-radius: 11px;
}

body.activation-active .activation-field-icon {
  width: 35px;
  height: 35px;
}

body.activation-active .activation-field-icon svg {
  width: 17px;
  height: 17px;
}

body.activation-active .activation-field-copy strong {
  font-size: 10.5px;
}

body.activation-active .activation-field input {
  min-height: 22px;
  font-size: clamp(14px, 1.5vw, 16px);
}

body.activation-active .activation-submit {
  min-height: clamp(46px, 6.5vh, 52px);
  margin-top: clamp(7px, 1.2vh, 11px);
  border-radius: 11px;
  font-size: clamp(15px, 1.7vw, 17px);
}

body.activation-active .activation-submit svg {
  width: 20px;
  height: 20px;
}

body.activation-active .activation-note {
  margin-top: clamp(7px, 1.2vh, 11px) !important;
  font-size: clamp(11px, 1.2vw, 12px);
  line-height: 1.3;
}

body.activation-active .activation-note svg {
  width: 18px;
  height: 18px;
}

@media (max-height: 650px) {
  body.activation-active .activation-screen { padding: 6px; }
  body.activation-active .activation-card {
    width: min(560px, calc(100vw - 20px));
    max-width: 560px;
    max-height: calc(100dvh - var(--desktop-titlebar-height) - 12px);
    padding: 8px 28px 10px;
  }
  body.activation-active .activation-logo { width: 56px; height: 56px; margin-bottom: 2px; }
  body.activation-active .activation-mode-label { min-height: 16px; margin-bottom: 2px; padding: 1px 7px; }
  body.activation-active .activation-heading h1 { font-size: 21px; }
  body.activation-active .activation-heading p { margin: 3px 0 8px; font-size: 12px; }
  body.activation-active .activation-field { min-height: 48px; margin-bottom: 6px !important; }
  body.activation-active .activation-submit { min-height: 44px; margin-top: 6px; font-size: 15px; }
  body.activation-active .activation-note { margin-top: 6px !important; font-size: 10.5px; }
}

@media (max-width: 560px) {
  body.activation-active .activation-screen { padding: 7px; }
  body.activation-active .activation-card {
    width: calc(100vw - 14px);
    max-width: 500px;
    padding-inline: 14px;
  }
  body.activation-active .activation-heading h1 { font-size: 21px; }
  body.activation-active .activation-field { grid-template-columns: 38px minmax(0, 1fr); }
  body.activation-active .activation-field-icon { width: 33px; height: 33px; }
}

/* Official installer and native automatic updater */
.system-update-card .native-update-status{display:grid;gap:5px;align-content:start}
.native-update-status>strong{font-size:14px;color:var(--ink)}
.native-update-status>span{font-size:12px;line-height:1.45;color:var(--muted)}
.native-update-status.green{border-color:rgba(26,127,82,.25);background:rgba(233,248,240,.72)}
.native-update-status.gold{border-color:rgba(81,106,145,.32);background:var(--gold-soft)}
.native-update-status.red{border-color:rgba(176,48,48,.25);background:rgba(255,240,240,.75)}
.native-update-progress{height:9px;border-radius:999px;background:rgba(7,24,47,.12);overflow:hidden;margin-top:8px}
.native-update-progress>span{display:block;height:100%;min-width:0;border-radius:inherit;background:linear-gradient(90deg,#0a2344,#516A91);transition:width .2s ease}
.system-update-card .settings-card-footer .button{min-width:150px}

/* v1.0.1 real update: fixed school header and balanced Settings & Backup cards */
@media screen {
  body:not(.activation-active) {
    overflow: hidden;
    overscroll-behavior: none;
  }

  #app-shell.app-shell {
    height: calc(100dvh - var(--desktop-titlebar-height));
    min-height: 0;
    overflow: hidden;
  }

  #app-shell .main-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  #app-shell .topbar {
    position: relative;
    top: auto;
    z-index: 80;
    flex: 0 0 auto;
    width: 100%;
    box-shadow: 0 3px 14px rgba(7, 24, 47, .08);
  }

  #app-shell .view {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
  }

  body.sheet-wide #app-shell .main-shell {
    height: 100%;
  }

  body.sheet-wide #app-shell .view.sheet-view {
    height: auto;
    flex: 1 1 auto;
  }

  .settings-grid-balanced {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    align-items: stretch;
  }

  .settings-grid-balanced .settings-card {
    min-height: 340px;
    height: 100%;
  }

  .settings-grid-balanced .settings-card-footer {
    min-height: 62px;
  }

  .settings-grid-balanced .settings-card-footer .button {
    flex: 1 1 180px;
    min-width: 0;
  }

  .settings-protection-callout {
    margin-bottom: 14px;
  }

  .native-update-notes {
    margin: 13px 0 3px;
    padding: 11px 13px;
    border: 1px solid #E4F2F5;
    border-radius: 11px;
    background: #F5F8FA;
  }

  .native-update-notes > strong {
    display: block;
    margin-bottom: 8px;
    color: var(--ink);
    font-size: 16px;
    line-height: 1.3;
  }

  .native-update-notes ul {
    display: grid;
    gap: 7px;
    margin: 0;
    padding-left: 22px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.55;
  }
}

@media screen and (max-width: 820px) {
  #app-shell.app-shell {
    height: calc(100dvh - var(--desktop-titlebar-height));
  }

  #app-shell .main-shell {
    height: 100%;
    padding-bottom: 68px;
  }

  .settings-grid-balanced {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .settings-grid-balanced .settings-card {
    min-height: 0;
  }
}

/* v1.0.3 update: compact dark-gray title bar with version-only text and balanced modal spacing */
.desktop-titlebar-brand {
  gap: 0;
}
.desktop-titlebar-brand .desktop-version {
  color: #eef2f7;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .035em;
}

/* Keep every standard popup evenly spaced below the desktop title bar. */
.modal {
  inset: var(--desktop-titlebar-height) 0 0;
  overflow: hidden;
}
.modal-panel {
  max-height: calc(100% - 48px);
  margin: 24px auto;
}

/* Full-size previews and presentation tools also respect equal top/bottom gaps. */
.print-preview-open .modal-panel {
  height: calc(100% - 28px);
  max-height: calc(100% - 28px);
  margin: 14px auto;
}
.toolkit-presentation-mode .modal-panel {
  height: calc(100% - 20px);
  max-height: calc(100% - 20px);
  margin: 10px auto;
}

@media (max-height: 700px), (max-width: 820px) {
  .modal-panel {
    width: min(620px, calc(100% - 24px));
    max-height: calc(100% - 24px);
    margin: 12px auto;
    border-radius: 16px;
  }
  .print-preview-open .modal-panel {
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    max-height: calc(100% - 12px);
    margin: 6px auto;
  }
  .toolkit-presentation-mode .modal-panel {
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    max-height: calc(100% - 12px);
    margin: 6px auto;
  }
}

/* AcadMates Windows v1.1.0 — manual cross-device Cloud Sync foundation */
.cloud-sync-top-button { position: relative; }
.cloud-sync-top-button.is-connected { border-color: rgba(54, 130, 85, .28); }
.cloud-sync-top-button.is-busy { cursor: wait; }
.cloud-sync-dot { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: #2F817B; box-shadow: 0 0 0 3px rgba(47,129,123,.16); }
.cloud-sync-card { position: relative; overflow: hidden; }
.cloud-sync-card::after { content: ""; position: absolute; width: 150px; height: 150px; right: -72px; bottom: -78px; border-radius: 50%; background: radial-gradient(circle, rgba(143,214,211,.16), transparent 70%); pointer-events: none; }
.cloud-sync-details { position: relative; z-index: 1; }
.cloud-account-intro { display: grid; gap: 5px; margin-bottom: 14px; padding: 13px 14px; border: 1px solid #E4F2F5; border-radius: 14px; background: #F5F8FA; }
.cloud-account-intro strong { color: #11192A; font-size: 14px; }
.cloud-account-intro span { color: #636C77; font-size: 12px; line-height: 1.45; }
.cloud-conflict-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin: 14px 0; }
.cloud-conflict-grid article { display: grid; gap: 6px; min-width: 0; padding: 14px; border: 1px solid #E4F2F5; border-radius: 14px; background: #fff; }
.cloud-conflict-grid article span { color: #2F817B; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.cloud-conflict-grid article strong { color: #11192A; font-size: 14px; line-height: 1.3; }
.cloud-conflict-grid article small { color: #636C77; font-size: 11px; line-height: 1.4; }
@media (max-width: 680px) { .cloud-conflict-grid { grid-template-columns: 1fr; } }

/* Account-bound license and cross-device restore */
.activation-actions{display:grid;gap:10px;width:100%}.activation-restore{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:48px;border:1px solid rgba(143,214,211,.55);border-radius:12px;background:rgba(255,255,255,.72);color:#11192A;font-weight:800;cursor:pointer}.activation-restore:hover{background:#F5F8FA}.activation-restore svg{width:18px;height:18px;fill:currentColor}.activation-submit:disabled,.activation-restore:disabled{opacity:.58;cursor:wait}

/* v1.0.3 — approved Gmail license recovery overlay. Cloud Sync stays in Settings. */
.license-recovery-flow {
  position: fixed;
  inset: var(--desktop-titlebar-height) 0 0;
  z-index: 1400;
  display: grid;
  place-items: center;
  padding: 18px;
}
.license-recovery-flow[hidden], .license-recovery-panel[hidden] { display: none !important; }
.license-recovery-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9,18,39,.45);
  backdrop-filter: blur(4px);
}
.license-recovery-panel {
  position: relative;
  z-index: 1;
  width: min(620px, 100%);
  max-height: calc(100vh - var(--desktop-titlebar-height) - 36px);
  overflow: auto;
  padding: 26px 28px;
  border: 1px solid rgba(255,255,255,.86);
  border-radius: 24px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 26px 76px rgba(8,24,54,.30);
}
.license-recovery-heading {
  display: grid;
  grid-template-columns: 52px minmax(0,1fr);
  gap: 14px;
  align-items: start;
  margin-bottom: 20px;
}
.license-recovery-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(145deg,#09285e,#17498e);
  box-shadow: 0 10px 24px rgba(9,40,94,.22);
}
.license-recovery-icon svg { width: 24px; height: 24px; fill: currentColor; }
.license-recovery-kicker {
  display: block;
  margin-bottom: 5px;
  color: #2F817B;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.license-recovery-heading h2, .license-recovery-success h2 { margin: 0; color: #10234d; font-size: 28px; line-height: 1.12; }
.license-recovery-heading p, .license-recovery-success > p { margin: 7px 0 0; color: #68738a; font-size: 14px; line-height: 1.5; }
.license-recovery-field { display: grid; gap: 8px; color: #2d3a55; font-size: 13px; }
.license-recovery-field input {
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid #d7deea;
  border-radius: 12px;
  background: #fff;
  color: #17233d;
  font: inherit;
  font-size: 15px;
  outline: 0;
}
.license-recovery-field input:focus, .license-recovery-code-boxes input:focus { border-color: #516A91; box-shadow: 0 0 0 3px rgba(143,214,211,.15); }
.license-recovery-error { min-height: 20px; margin: 9px 0 0; color: #b42318; font-size: 12px; line-height: 1.4; }
.license-recovery-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.license-recovery-button { min-height: 48px; padding: 10px 18px; border-radius: 11px; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.license-recovery-button.primary { border: 0; color: #fff; background: linear-gradient(135deg,#061f4d,#082d68); box-shadow: 0 8px 18px rgba(5,34,80,.18); }
.license-recovery-button.secondary { border: 1px solid #ccd5e4; color: #253858; background: #fff; }
.license-recovery-button:disabled { opacity: .48; cursor: not-allowed; }
.license-recovery-button.full { width: 100%; }
.license-recovery-code-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; color: #344054; font-size: 13px; }
.license-recovery-code-label span { padding: 5px 10px; border-radius: 999px; color: #2F817B; background: #E3F4F0; font-weight: 800; }
.license-recovery-code-boxes { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 9px; }
.license-recovery-code-boxes input { min-width: 0; height: 58px; padding: 0; border: 1px solid #d7deea; border-radius: 11px; background: #fff; color: #081d43; font-size: 25px; font-weight: 800; text-align: center; outline: 0; }
.license-recovery-list { display: grid; gap: 4px; }
.license-recovery-select-all, .license-recovery-item { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 11px 12px; border-radius: 13px; cursor: pointer; }
.license-recovery-select-all { min-height: 64px; margin-bottom: 7px; border: 1px solid #dfe5ef; background: #f7f9fc; }
.license-recovery-select-all.selected { border-color: #9fb1d4; background: #f2f6ff; }
.license-recovery-item { min-height: 74px; border: 1px solid transparent; border-bottom-color: #e5e9f0; }
.license-recovery-item.selected { border-color: #8FD6D3; background: #F5F8FA; }
.license-recovery-select-all input, .license-recovery-item input { width: 21px; height: 21px; accent-color: #08265c; }
.license-recovery-select-all > span, .license-recovery-item > span { display: grid; gap: 3px; min-width: 0; }
.license-recovery-select-all strong { color: #17233d; font-size: 14px; }
.license-recovery-item strong { color: #17233d; font-size: 15px; }
.license-recovery-select-all small, .license-recovery-item small { overflow-wrap: anywhere; color: #7b8699; font-size: 11px; }
.license-recovery-select-all em, .license-recovery-item em { padding: 5px 9px; border-radius: 999px; font-size: 11px; font-style: normal; font-weight: 800; }
.license-recovery-select-all em { min-width: 38px; color: #17335f; background: #e8eef9; text-align: center; }
.license-recovery-item em { color: #19603b; background: #e9f8f0; }
.license-recovery-success { text-align: center; }
.license-recovery-success-icon { display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 12px; border-radius: 50%; color: #19603b; background: #e9f8f0; }
.license-recovery-success-icon svg { width: 30px; height: 30px; fill: currentColor; }
.license-recovery-summary { display: grid; grid-template-columns: 145px minmax(0,1fr); gap: 9px 13px; margin-top: 18px; padding: 15px 0; border-top: 1px solid #e5e9f0; border-bottom: 1px solid #e5e9f0; color: #344054; font-size: 13px; text-align: left; }
.license-recovery-summary span { overflow-wrap: anywhere; color: #667085; }
.license-recovery-restored-list { display: grid; gap: 6px; }
.license-recovery-restored-list span { display: block; padding: 6px 9px; border-radius: 9px; color: #17335f; background: #f3f6fb; font-weight: 700; }
@media (max-width: 700px) {
  .license-recovery-flow { padding: 9px; }
  .license-recovery-panel { width: 100%; padding: 19px 16px; border-radius: 18px; }
  .license-recovery-heading { grid-template-columns: 42px minmax(0,1fr); gap: 10px; }
  .license-recovery-icon { width: 42px; height: 42px; }
  .license-recovery-code-boxes { gap: 5px; }
  .license-recovery-code-boxes input { height: 52px; font-size: 22px; }
  .license-recovery-actions { display: grid; grid-template-columns: 1fr; }
  .license-recovery-button { width: 100%; }
  .license-recovery-summary { grid-template-columns: 1fr; gap: 4px; }
}


/* AcadMates App v1.3.0 — compact equal Settings cards and desktop manual cloud transfer. */
@media screen {
  .settings-grid-balanced { grid-auto-rows: minmax(0, auto); align-items: stretch; }
  .settings-grid-balanced .settings-card { min-height: 292px; height: 100%; padding: 20px; }
  .settings-grid-balanced .settings-card-copy { margin-top: 12px; }
  .settings-grid-balanced .settings-card-footer { min-height: 54px; padding-top: 14px; gap: 10px; }
  .settings-grid-balanced .settings-card-footer .button { min-height: 42px; }
  .cloud-sync-modal { display: grid; gap: 14px; max-width: 620px; }
  .cloud-account-intro { display: grid; gap: 5px; padding: 12px 14px; border: 1px solid #E4F2F5; border-radius: 13px; background: #F5F8FA; }
  .cloud-account-intro span { color: var(--muted); font-size: 11px; line-height: 1.45; }
  .cloud-sync-account-form { display: grid; gap: 12px; }
  .cloud-sync-account-form label { display: grid; gap: 6px; }
  .cloud-sync-field-title { font-size: 11px; font-weight: 800; color: var(--ink); }
  .cloud-sync-password-actions { margin-top: 2px; }
  .cloud-manual-guide { margin-top: 12px; }
}
@media screen and (max-width: 900px) {
  .settings-grid-balanced .settings-card { min-height: 0; }
}


/* AcadMates App v1.3.5 — exact Windows icon, automatic MAPEH Grade Sheet average, and Settings note cleanup. */
@media screen {
  .settings-grid-balanced .settings-card { min-height: 270px; }
}


/* AcadMates Windows v1.3.6 — spacious Grade Sheet subject arranger */
.subject-order-modal .modal-panel {
  width: min(1160px, calc(100% - 40px));
  max-width: none;
  overflow-x: hidden;
}
.subject-order-modal #modal-content { padding: 24px 28px 28px; overflow-x: hidden; }
.subject-order-modal .subject-order-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.subject-order-modal .subject-order-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  grid-template-areas:
    "position name actions"
    "position status actions";
  align-items: center;
  column-gap: 12px;
  row-gap: 6px;
  min-height: 78px;
  padding: 12px 14px;
}
.subject-order-modal .subject-position { grid-area: position; width: 34px; height: 34px; flex-basis: 34px; font-size: 12px; }
.subject-order-modal .subject-order-item strong {
  grid-area: name;
  min-width: 0;
  font-size: 14px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.subject-order-modal .required-subject {
  grid-area: status;
  justify-self: start;
  max-width: 100%;
  padding: 5px 9px;
  border-radius: 9px;
  font-size: 10px;
  line-height: 1.25;
  white-space: normal;
}
.subject-order-modal .subject-order-actions {
  grid-area: actions;
  flex-wrap: nowrap;
  justify-content: flex-end;
}
.subject-order-modal .subject-order-actions button {
  min-width: 38px;
  height: 36px;
  padding-inline: 11px;
  font-size: 11px;
  white-space: nowrap;
}
.print-preview-help { margin: 10px 2px 0; }
@media (max-width: 900px) {
  .subject-order-modal .modal-panel { width: calc(100% - 24px); }
  .subject-order-modal #modal-content { padding: 18px; }
  .subject-order-modal .subject-order-list { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .subject-order-modal .subject-order-item {
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-areas:
      "position name"
      "position status"
      "actions actions";
  }
  .subject-order-modal .subject-order-actions { justify-content: flex-start; flex-wrap: wrap; }
}


/* AcadMates Windows v1.3.7 — sheet/form-only maximize mode with persistent school identity. */
.sheet-wide-exit { display: none; }
@media screen {
  body.sheet-wide #app-shell .topbar {
    display: flex !important;
    min-height: 62px;
    padding: 8px clamp(14px, 2vw, 24px);
  }
  body.sheet-wide #app-shell .topbar .menu-button,
  body.sheet-wide #app-shell .topbar .top-actions { display: none !important; }
  body.sheet-wide #app-shell .topbar .school-context {
    display: flex !important;
    min-width: 0;
    max-width: calc(100% - 58px);
  }
  body.sheet-wide #app-shell .topbar .school-context-logo { width: 44px; height: 44px; }
  body.sheet-wide #app-shell .topbar .school-context-copy { min-width: 0; }
  body.sheet-wide #app-shell .topbar #context-school {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body.sheet-wide #sheet-wide-exit {
    display: grid !important;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    margin-left: auto;
    border: 1px solid #cbd9e0;
    background: #fff;
    color: var(--navy-900);
    box-shadow: var(--shadow-sm);
  }
  body.sheet-wide #sheet-wide-exit:hover { border-color: var(--gold-500); background: var(--gold-soft); }
  body.sheet-wide #sheet-wide-exit svg { width: 21px; height: 21px; }

  body.sheet-wide #app-shell .view.sheet-view {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    min-height: 0;
    padding: 10px;
    overflow: hidden;
  }
  body.sheet-wide #app-shell .view.sheet-view > * { display: none !important; }

  body.sheet-wide #app-shell .view.sheet-view.route-gradebook > .gradebook-wrap,
  body.sheet-wide #app-shell .view.sheet-view.route-smartsis > .smart-sis-table-wrap,
  body.sheet-wide #app-shell .view.sheet-view.route-mapeh > .mapeh-component-record,
  body.sheet-wide #app-shell .view.sheet-view.route-mapeh > .mapeh-table-wrap,
  body.sheet-wide #app-shell .view.sheet-view.route-sf2 > .sf2-workspace-scroll,
  body.sheet-wide #app-shell .view.sheet-view.route-sf5 > .sf5-record-panel,
  body.sheet-wide #app-shell .view.sheet-view.route-sf8 > .sf8-record-panel,
  body.sheet-wide #app-shell .view.sheet-view.route-sf10 > .sf10-data-preview,
  body.sheet-wide #app-shell .view.sheet-view.route-gradeslip > .grade-slip-preview-scroll,
  body.sheet-wide #app-shell .view.sheet-view.route-itemanalysis > .analysis-scroll,
  body.sheet-wide #app-shell .view.sheet-view > .empty-state,
  body.sheet-wide #app-shell .view.sheet-view > .compliance-blocker {
    display: block !important;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 0;
    max-width: none;
    max-height: none;
    margin: 0;
  }

  body.sheet-wide #app-shell .view.sheet-view.route-gradebook > .gradebook-wrap,
  body.sheet-wide #app-shell .view.sheet-view.route-smartsis > .smart-sis-table-wrap,
  body.sheet-wide #app-shell .view.sheet-view.route-mapeh > .mapeh-table-wrap,
  body.sheet-wide #app-shell .view.sheet-view.route-sf2 > .sf2-workspace-scroll,
  body.sheet-wide #app-shell .view.sheet-view.route-itemanalysis > .analysis-scroll {
    height: 100% !important;
    overflow: auto;
    border-radius: 12px;
  }

  body.sheet-wide #app-shell .view.sheet-view.route-mapeh > .mapeh-component-record {
    display: flex !important;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }
  body.sheet-wide .route-mapeh .mapeh-component-record > .mapeh-record-heading,
  body.sheet-wide .route-mapeh .mapeh-component-record > .gradebook-legend { display: none !important; }
  body.sheet-wide .route-mapeh .mapeh-component-record > .gradebook-wrap {
    flex: 1 1 auto;
    height: auto !important;
    min-height: 0;
    max-height: none;
    margin: 0;
    overflow: auto;
  }

  body.sheet-wide #app-shell .view.sheet-view.route-sf5 > .sf5-record-panel,
  body.sheet-wide #app-shell .view.sheet-view.route-sf8 > .sf8-record-panel,
  body.sheet-wide #app-shell .view.sheet-view.route-sf10 > .sf10-data-preview {
    display: flex !important;
    flex-direction: column;
    height: 100%;
    padding: 10px;
    overflow: hidden;
  }
  body.sheet-wide .route-sf5 .sf5-record-panel > .panel-header,
  body.sheet-wide .route-sf8 .sf8-record-panel > .panel-header { display: none !important; }
  body.sheet-wide .route-sf5 .sf5-record-panel > .sf5-table-shell,
  body.sheet-wide .route-sf8 .sf8-record-panel > .sf8-table-shell,
  body.sheet-wide .route-sf10 .sf10-data-preview > .table-shell {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: auto;
  }

  body.sheet-wide #app-shell .view.sheet-view.route-gradeslip > .grade-slip-preview-scroll {
    height: 100%;
    overflow: auto;
    padding: 8px;
  }
  body.sheet-wide .route-gradeslip .grade-slip-landscape-sheet { margin: 0 auto; }

  body.sheet-wide #app-shell .view.sheet-view > .empty-state,
  body.sheet-wide #app-shell .view.sheet-view > .compliance-blocker {
    align-content: center;
    overflow: auto;
  }
}

@media screen and (max-width: 620px) {
  body.sheet-wide #app-shell .topbar { min-height: 58px; padding: 7px 10px; }
  body.sheet-wide #app-shell .topbar .school-context-logo { width: 40px; height: 40px; }
  body.sheet-wide #app-shell .topbar #context-school { font-size: 12px; }
  body.sheet-wide #app-shell .topbar #context-year { font-size: 10px; }
  body.sheet-wide #sheet-wide-exit { flex-basis: 38px; width: 38px; height: 38px; }
  body.sheet-wide #app-shell .view.sheet-view { padding: 6px; }
}

/* v1.3.8: editable SF9 district line and learner-specific term remarks. */
.sf9-controls input {
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
}
.sf9-controls .sf9-district-control {
  flex: 1 1 235px;
  min-width: 190px;
}
.sf9-comments .sf9-comment-entry {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 4px;
  align-content: start;
  overflow: hidden;
}
.sf9-comments .sf9-comment-entry b {
  font-size: 10px;
  line-height: 1;
}
.sf9-comments .sf9-comment-entry p {
  margin: 0;
  overflow: hidden;
  font-size: 10px;
  line-height: 1.18;
  white-space: normal;
}
.sf9-comments .sf9-comment-editor select {
  width: 100%;
  min-width: 0;
  height: 37px;
  padding: 4px 7px;
  border: 1px solid #b7b7b7;
  border-radius: 5px;
  color: #111;
  background: #fff;
  font-family: Arial, sans-serif;
  font-size: 9px;
  line-height: 1.1;
  text-overflow: ellipsis;
}
.sf9-comments .sf9-comment-editor select:focus {
  border-color: #516A91;
  outline: 2px solid rgba(143,214,211, .25);
}
.sf9-official-header [data-sf9-district-line] {
  font-weight: 400;
}
@media (max-width: 1100px) {
  .sf9-controls .sf9-district-control { flex-basis: 210px; min-width: 165px; }
}


/* v1.3.9: compact SF9 controls, readable term remarks, preserved form layers. */
.route-reports .sf9-controls {
  display: grid !important;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.08fr) minmax(0, .78fr) minmax(0, 1.9fr) !important;
  align-items: end !important;
  gap: 8px !important;
  overflow: visible !important;
}
.route-reports .sf9-controls > * {
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  flex: none !important;
}
.route-reports .sf9-controls .advisory-selector-field small { display: none; }
.route-reports .sf9-visibility-controls > div {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
}
.route-reports .sf9-visibility-toggle {
  min-width: 0 !important;
  width: 100%;
  padding-inline: 7px;
  white-space: nowrap;
}
.sf9-overlay-mode .sf9-side * { visibility: hidden !important; }
.sf9-overlay-mode .sf9-grade-ink {
  display: inline-block;
  visibility: hidden !important;
  color: inherit !important;
  background: transparent !important;
}
.sf9-overlay-mode.sf9-layer-t1 .sf9-grade-t1,
.sf9-overlay-mode.sf9-layer-t2 .sf9-grade-t2,
.sf9-overlay-mode.sf9-layer-t3 .sf9-grade-t3,
.sf9-overlay-mode.sf9-layer-final .sf9-grade-final { visibility: visible !important; }
.sf9-comments .sf9-comment-entry {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 4px;
  overflow: hidden;
}
.sf9-comments .sf9-comment-entry b {
  display: block;
  width: 100%;
  font-size: 10.5px;
  line-height: 1.05;
  flex: 0 0 auto;
}
.sf9-comments .sf9-comment-entry p {
  display: block;
  width: 100%;
  margin: 0;
  font-size: 10.5px;
  line-height: 1.2;
  white-space: normal;
  clear: both;
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  padding: 3px 18px 0;
  text-align: center;
  font-weight: 400 !important;
}
.sf9-comments .sf9-comment-editor select {
  display: block;
  width: 100%;
  min-width: 0;
  height: 39px;
  padding: 5px 8px;
  font-size: 14px;
  line-height: 1.15;
  font-weight: 400 !important;
  font-weight: 600;
  text-overflow: ellipsis;
}
.sf9-school-logo-placeholder {
  display: inline-block;
  width: 54px;
  height: 54px;
}

/* v1.4.20: keep the shared workspace identity slightly closer to the left
   edge at every key stage without changing any sheet or print layout. */
@media screen {
  #app-shell .topbar {
    padding-left: 8px;
    column-gap: 10px;
  }
}
@media (max-width: 1220px) {
  .route-reports .sf9-controls {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, .8fr) !important;
  }
  .route-reports .sf9-visibility-controls { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .route-reports .sf9-controls { grid-template-columns: 1fr !important; }
  .route-reports .sf9-visibility-controls { grid-column: auto; }
  .route-reports .sf9-visibility-controls > div { grid-template-columns: repeat(5, minmax(76px, 1fr)); overflow-x: auto; }
}

/* v1.3.9: AcadMates branding is never substituted inside a school-logo slot. */
.school-form-logo-placeholder { display: inline-block; width: 100%; height: 100%; }

/* v1.0.3: grade-entry cells remain visibly and physically editable while
   background saves and targeted calculations finish. */
input[data-entry-context]:not(:disabled) {
  pointer-events: auto !important;
  touch-action: manipulation;
  caret-color: currentColor;
  cursor: text;
}
input[data-entry-context].grade-entry-error {
  border-color: #c62828 !important;
  background: #fff4f4 !important;
  box-shadow: inset 0 0 0 1px rgba(198, 40, 40, .18);
}

/* v1.0.13: keep every Grades 2-10 SF9 attendance-reprint option on one balanced line. */
.route-reports .sf9-attendance-reprint-controls {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  min-width: 0;
  width: 100%;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.route-reports .sf9-attendance-reprint-controls > span {
  white-space: nowrap;
}
.route-reports .sf9-attendance-reprint-controls > div {
  display: grid;
  grid-template-columns: repeat(13, minmax(46px, 1fr));
  align-items: stretch;
  gap: 6px;
  width: 100%;
  min-width: 690px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 1px 3px;
  scrollbar-width: thin;
}
.route-reports .sf9-attendance-month-button {
  width: 100%;
  min-width: 0;
  min-height: 32px;
  padding: 5px 4px;
  border: 1px solid rgba(81,106,145,.48);
  border-radius: 8px;
  background: rgba(255,255,255,.82);
  color: var(--text);
  font: inherit;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .02em;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
}
.route-reports .sf9-attendance-action-button {
  min-width: 0;
  padding-inline: 6px;
}
.route-reports .sf9-attendance-month-button:hover,
.route-reports .sf9-attendance-month-button:focus-visible {
  border-color: #516A91;
  outline: 2px solid rgba(143,214,211,.2);
  background: #F5F8FA;
}

/* v1.0.25 — Grades 4–10 SF9 exact official Excel-layout preview */
.sf9-live-data-editor {
  margin: 12px 0 14px;
  padding: 0;
  overflow: hidden;
}
.sf9-live-data-editor > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 16px;
  cursor: pointer;
  list-style: none;
  border-bottom: 1px solid #E4F2F5;
  background: #F5F8FA;
}
.sf9-live-data-editor > summary::-webkit-details-marker { display: none; }
.sf9-live-data-editor > summary strong { color: #11192A; font-size: 11px; }
.sf9-live-data-editor > summary span { color: var(--muted); font-size: 9px; text-align: right; }
.sf9-live-editor-grid { display: grid; gap: 14px; padding: 14px; }
.sf9-live-editor-grid h3 { margin: 0 0 8px; font-size: 11px; }
.route-reports .sf9-editor-attendance-table {
  width: 100%;
  min-width: 940px;
  table-layout: fixed;
  border-collapse: collapse;
  background: #fff;
}
.route-reports .sf9-editor-attendance-table col.sf9-editor-label-column { width: 184px; }
.route-reports .sf9-editor-attendance-table col.sf9-editor-value-column { width: 63px; }
.route-reports .sf9-editor-attendance-table th,
.route-reports .sf9-editor-attendance-table td {
  box-sizing: border-box;
  padding: 0 !important;
  text-align: center !important;
  vertical-align: middle !important;
}
.route-reports .sf9-editor-attendance-table th:first-child,
.route-reports .sf9-editor-attendance-table td:first-child {
  width: auto;
  padding: 0 10px !important;
  text-align: left !important;
}
.route-reports .sf9-editor-attendance-table .sf9-attendance-input {
  display: block;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  text-align: center !important;
}
.sf9-live-remarks .sf9-comments { background: #fff; }
.sf9-live-remarks .sf9-comments div { height: auto; min-height: 58px; }
.sf9-live-remarks-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 12px 14px 14px;
  overflow-x: auto;
}
.sf9-live-remarks-row .sf9-comments {
  display: grid;
  grid-template-columns: repeat(3, minmax(230px, 1fr));
  flex: 1 0 760px;
  min-width: 760px;
  border: 0;
  background: #fff;
}
.sf9-live-remarks-row .sf9-comment-entry {
  min-width: 0;
  min-height: 74px;
  height: auto;
  border-bottom: 0;
}
.sf9-live-remarks-row .sf9-remarks-language-toggle {
  flex: 0 0 auto;
  align-self: center;
  min-height: 44px;
}
.sf9-excel-preview-scroll {
  /* v1.0.26: the complete official page fits inside the visible preview
     workspace. The embedded PDF uses page-fit, so the preview itself never
     needs horizontal or vertical scrolling and no portion is cropped. */
  height: clamp(430px, 62vh, 760px);
  min-height: 0;
  padding: 10px;
  overflow: hidden !important;
  background: #e8e8e6;
}
.sf9-excel-preview-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 1500px);
  height: 100%;
  min-height: 0;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #D9E4E8;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(0,0,0,.14);
}
.sf9-excel-preview-shell.sf9-excel-paper-a5-front,
.sf9-excel-preview-shell.sf9-excel-paper-a5-back {
  width: min(100%, 760px);
  min-height: 0;
}
.sf9-exact-preview-frame {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  overflow: hidden;
  background: #fff;
}
.sf9-exact-preview-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 42px;
  padding: 9px 14px;
  border-bottom: 1px solid #F5F8FA;
  color: #636C77;
  background: #F5F8FA;
  font-size: 9px;
  text-align: center;
}
.sf9-exact-preview-status svg { width: 15px; height: 15px; fill: currentColor; }
.sf9-exact-preview-status strong { color: #11192A; }
.sf9-exact-preview-status span { color: var(--muted); }
.sf9-exact-preview-status.loading svg { animation: sf9-preview-spin 1s linear infinite; }
.sf9-exact-preview-status.ready { border-bottom-color: #cfe5d8; background: #f2fbf6; }
.sf9-exact-preview-status.error { border-bottom-color: #efc8c8; color: #8e3333; background: #fff4f4; }
@keyframes sf9-preview-spin { to { transform: rotate(360deg); } }
@media (max-width: 1080px) {
  .sf9-live-editor-grid { grid-template-columns: 1fr; }
  .sf9-excel-preview-scroll { height: clamp(400px, 56vh, 680px); }
}

/* v1.0.27: large, readable, no-scroll exact SF9 preview.
   The PDF remains page-fit (no crop), but the viewport now uses much more of
   the application screen. The visible loading/status strip is removed. */
.route-reports .sf9-excel-preview-scroll {
  height: clamp(650px, 78vh, 980px);
  min-height: 650px;
  padding: 6px;
  overflow: hidden !important;
}
.route-reports .sf9-excel-preview-shell,
.route-reports .sf9-excel-preview-shell.sf9-excel-paper-a5-front,
.route-reports .sf9-excel-preview-shell.sf9-excel-paper-a5-back {
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 0;
  margin: 0;
}
.route-reports .sf9-exact-preview-status.loading,
.route-reports .sf9-exact-preview-status.ready {
  display: none !important;
  min-height: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.route-reports .sf9-exact-preview-frame {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
body.sheet-wide .route-reports .sf9-excel-preview-scroll {
  height: calc(100vh - 150px);
  min-height: 650px;
}
@media (max-height: 820px) {
  .route-reports .sf9-excel-preview-scroll {
    height: 72vh;
    min-height: 520px;
  }
  body.sheet-wide .route-reports .sf9-excel-preview-scroll {
    height: calc(100vh - 118px);
    min-height: 520px;
  }
}
@media (max-width: 1080px) {
  .route-reports .sf9-excel-preview-scroll {
    height: clamp(560px, 72vh, 820px);
    min-height: 560px;
  }
}
/* v1.0.27 follow-up: prevent wheel/mouse interaction inside the embedded PDF
   so the preview itself cannot scroll. Errors remain visible outside the PDF. */
.route-reports .sf9-exact-preview-frame { pointer-events: none; }
.route-reports .sf9-exact-preview-status.error {
  display: flex !important;
  min-height: 42px !important;
  height: auto !important;
  padding: 9px 14px !important;
  border-bottom: 1px solid #efc8c8 !important;
}

/* v1.0.27 real-time SF9 follow-up
   Keep the exact Excel PDF iframe mounted. While Excel prepares a changed
   learner/paper/remark/attendance view, show an immediate live SF9 mirror in
   the same viewport. There is no loading blank and no inner scrolling. */
.route-reports .sf9-excel-preview-shell { position: relative; }
.route-reports .sf9-exact-preview-frame {
  position: relative;
  z-index: 1;
}
.route-reports .sf9-live-instant-stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  background: #e8e8e6;
  transition: opacity 80ms ease;
}
.route-reports .sf9-excel-preview-shell.sf9-live-syncing .sf9-live-instant-stage {
  visibility: visible;
  opacity: 1;
}
.route-reports .sf9-live-instant-paper {
  flex: 0 0 auto;
  margin: 0;
  transform-origin: center center;
  box-shadow: 0 8px 28px rgba(0,0,0,.13);
  pointer-events: none;
}
.route-reports .sf9-exact-preview-status { position: relative; z-index: 4; }

/* v1.0.28 official-live SF9 fix
   Grades 4-10 now use a permanent live replica of the supplied official Excel
   template. The preview never swaps to the legacy HTML form and never waits
   for Excel/PDF generation; exact workbook/PDF generation remains Download /
   Print only. */
.route-reports .sf9-live-official-stage,
.route-reports .sf9-excel-preview-shell.sf9-live-official-ready .sf9-live-instant-stage,
.route-reports .sf9-excel-preview-shell.sf9-live-syncing .sf9-live-instant-stage {
  visibility: visible !important;
  opacity: 1 !important;
}
.route-reports .sf9-live-official-stage {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  overflow: hidden;
  pointer-events: none;
  background: #e8e8e6;
  transition: none !important;
}
.route-reports .sf9-live-official-stage .sf9-official-live-paper {
  pointer-events: none;
}
.sf9-official-live-paper {
  box-sizing: border-box;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 62px;
  width: 1500px;
  min-height: 940px;
  padding: 28px 30px 22px;
  border: 1px solid #111;
  background: #fff;
  color: #111;
  font-family: "Times New Roman", Times, serif;
}
.sf9-official-live-paper.sf9-paper-a5-front,
.sf9-official-live-paper.sf9-paper-a5-back {
  grid-template-columns: 1fr;
  width: 750px;
  gap: 0;
}
.sf9-official-live-side {
  min-width: 0;
  color: #111;
  font-size: 12px;
  line-height: 1.12;
  font-family: "Times New Roman", Times, serif;
}
.sf9-official-live-side h2 {
  margin: 10px 0 6px;
  text-align: center;
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
}
.sf9-official-live-header-block {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 100px;
  align-items: center;
  min-height: 205px;
  margin: 0 0 4px;
}
.sf9-official-live-header-text {
  text-align: center;
  font-size: 13px;
  line-height: 1.15;
}
.sf9-official-live-header-text strong { display: block; font-weight: 700; }
.sf9-official-live-header-gap { height: 12px; }
.sf9-official-live-header-gap.small { height: 8px; }
.sf9-official-live-school-logo,
.sf9-official-live-logo-placeholder {
  justify-self: center;
  width: 92px;
  height: 92px;
}
.sf9-official-live-school-logo { object-fit: contain; }
.sf9-official-live-logo-placeholder {
  display: grid;
  place-items: center;
  border: 1px solid #c9c9c9;
  border-radius: 50%;
  color: #222;
  background: #f5f5f5;
  text-align: center;
  font-size: 16px;
  font-style: italic;
  line-height: 1.1;
}
.sf9-official-live-learner-grid {
  display: grid;
  grid-template-columns: auto minmax(0, 3fr) auto minmax(55px, .7fr) auto minmax(90px, 1.1fr);
  gap: 6px 8px;
  align-items: end;
  margin: 4px 2px 14px;
  font-size: 13px;
}
.sf9-official-live-learner-grid b {
  min-height: 18px;
  padding: 0 4px 2px;
  border-bottom: 1px solid #777;
  text-align: left;
  font-weight: 400;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.sf9-official-live-learner-grid .sf9-official-live-track {
  grid-column: 2 / 4;
}
.sf9-official-live-parent-message {
  margin: 10px 2px 24px;
  font-size: 13px;
}
.sf9-official-live-parent-message p { margin: 5px 0; }
.sf9-official-live-parent-message p:not(:first-child) { text-align: center; }
.sf9-official-live-top-signatures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  margin: 0 0 14px;
  text-align: center;
}
.sf9-official-live-top-signatures div { display: grid; }
.sf9-official-live-top-signatures b {
  min-height: 19px;
  border-bottom: 1px solid #999;
  font-size: 11px;
  font-weight: 600;
}
.sf9-official-live-top-signatures span { padding-top: 3px; font-size: 12px; }
.sf9-official-live-paper table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-family: "Times New Roman", Times, serif;
}
.sf9-official-live-grades th,
.sf9-official-live-grades td {
  height: 25px;
  padding: 2px 3px;
  border: 1px solid #444;
  text-align: center;
  vertical-align: middle;
  font-size: 11px;
  line-height: 1.05;
}
.sf9-official-live-grades thead tr:first-child th { height: 32px; font-size: 12px; }
.sf9-official-live-grades thead th:first-child { width: 38%; }
.sf9-official-live-grades thead th:nth-last-child(2) { width: 9%; }
.sf9-official-live-grades thead th:last-child { width: 27%; }
.sf9-official-live-grades .sf9-official-live-learning {
  padding-left: 4px;
  text-align: left;
  font-size: 12px;
}
.sf9-official-live-grades .sf9-official-live-component .sf9-official-live-learning {
  padding-left: 4px;
  font-style: italic;
}
.sf9-official-live-grades .sf9-official-live-final-remark {
  text-align: center;
  vertical-align: middle;
  font-size: 10px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.sf9-official-live-general th {
  height: 29px;
  text-align: right !important;
  font-size: 13px !important;
  font-style: italic;
}
.sf9-official-live-general td { font-weight: 700; }
.sf9-official-live-descriptor-title {
  margin: 16px 0 4px 2px;
  font-size: 12px;
  font-weight: 700;
}
.sf9-official-live-descriptors { width: 78% !important; margin: 0 auto; }
.sf9-official-live-descriptors th,
.sf9-official-live-descriptors td {
  padding: 1px 8px;
  border: 0 !important;
  text-align: center;
  font-size: 11px;
  line-height: 1.05;
}
.sf9-official-live-attendance { margin-top: 2px; }
.sf9-official-live-attendance th,
.sf9-official-live-attendance td {
  height: 27px;
  padding: 1px 2px;
  border: 1px solid #444;
  text-align: center;
  vertical-align: middle;
  font-size: 10px;
  line-height: 1.05;
}
.sf9-official-live-attendance th:first-child { width: 18%; }
.sf9-official-live-attendance tbody th { font-size: 10px; font-weight: 700; }
.sf9-official-live-remarks {
  border: 1px solid #555;
  border-bottom: 0;
}
.sf9-official-live-remark-box {
  display: grid;
  grid-template-columns: 62px 1fr;
  min-height: 95px;
  border-bottom: 1px solid #555;
}
.sf9-official-live-remark-box b {
  padding: 5px 3px;
  font-size: 11px;
  text-align: left;
  align-self: start;
}
.sf9-official-live-remark-box span {
  display: grid;
  min-width: 0;
  padding: 7px 10px;
  place-items: center;
  text-align: center;
  vertical-align: middle;
  font-size: 11px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.sf9-official-live-parent-title { margin-top: 26px !important; }
.sf9-official-live-parent-lines {
  display: grid;
  gap: 18px;
  margin: 17px 145px 30px;
}
.sf9-official-live-parent-lines div {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 4px;
  align-items: end;
}
.sf9-official-live-parent-lines b { font-size: 11px; }
.sf9-official-live-parent-lines span { border-bottom: 1px solid #777; }
.sf9-official-live-certificate {
  margin: 18px 2px 44px;
  text-align: left;
  font-size: 12px;
}
.sf9-official-live-transfer-lines {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 21px 38px;
  margin: 0 4px;
}
.sf9-official-live-transfer-lines > div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px;
  align-items: end;
}
.sf9-official-live-transfer-lines .full { grid-column: 1 / -1; width: 48%; }
.sf9-official-live-transfer-lines i,
.sf9-official-live-adviser-signature i,
.sf9-official-live-head-signature i,
.sf9-official-live-cancel i,
.sf9-official-live-cancel-head i { border-bottom: 1px solid #777; }
.sf9-official-live-adviser-signature {
  display: grid;
  width: 45%;
  margin: 0 0 34px auto;
  text-align: center;
}
.sf9-official-live-adviser-signature i { height: 46px; }
.sf9-official-live-adviser-signature b,
.sf9-official-live-head-signature b,
.sf9-official-live-cancel-head b { padding-top: 2px; font-size: 11px; }
.sf9-official-live-adviser-signature span,
.sf9-official-live-head-signature span,
.sf9-official-live-cancel-head span { font-size: 11px; }
.sf9-official-live-head-signature {
  display: grid;
  width: 48%;
  margin: 0 auto 24px 0;
  text-align: center;
}
.sf9-official-live-head-signature i { height: 42px; }
.sf9-official-live-cancel {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  gap: 7px;
  margin: 10px 2px 25px;
  align-items: end;
}
.sf9-official-live-cancel-head {
  display: grid;
  width: 48%;
  margin: 0 auto 0 0;
  text-align: center;
}
.sf9-official-live-cancel-head i { height: 23px; }
.sf9-official-live-empty { display: grid; min-height: 700px; place-items: center; }

/* The old PDF handoff is intentionally not part of the live preview anymore.
   Print/Download still call the exact official Excel exporters. */
.route-reports .sf9-exact-preview-frame,
.route-reports .sf9-exact-preview-status { display: none !important; }
.sf9-official-live-paper.sf9-paper-a4 { width: 1500px; }
.sf9-official-live-paper.sf9-paper-letter { width: 1380px; }
.sf9-official-live-paper.sf9-paper-folio { width: 1620px; }

/* v196 — true official-template live SF9.
   The permanent preview is the pre-rendered official Excel template itself.
   Dynamic values are a transparent coordinate overlay, so no legacy/approximate
   SF9 DOM is ever visible and ordinary edits never start Excel/PDF rendering. */
.route-reports .sf9-template-live-paper {
  position: relative;
  display: block !important;
  flex: 0 0 auto;
  margin: 0;
  padding: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% 100%;
  color: #111;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0,0,0,.13);
  font-family: "Times New Roman", Times, serif;
  zoom: var(--sf9-preview-scale, 1);
}
.route-reports .sf9-template-live-paper.sf9-paper-a4 {
  width: 1500px;
  aspect-ratio: 2901 / 1911;
  background-image: url("assets/sf9-live/sf9-a4.png");
}
.route-reports .sf9-template-live-paper.sf9-paper-letter {
  width: 1500px;
  aspect-ratio: 2901 / 1911;
  background-image: url("assets/sf9-live/sf9-letter.png");
}
.route-reports .sf9-template-live-paper.sf9-paper-folio {
  width: 1620px;
  aspect-ratio: 3122 / 1911;
  background-image: url("assets/sf9-live/sf9-folio.png");
}
.route-reports .sf9-template-live-paper.sf9-paper-a5-front {
  width: 750px;
  aspect-ratio: 1402 / 1911;
  background-image: url("assets/sf9-live/sf9-a5-front.png");
}
.route-reports .sf9-template-live-paper.sf9-paper-a5-back {
  width: 750px;
  aspect-ratio: 1380 / 1911;
  background-image: url("assets/sf9-live/sf9-a5-back.png");
}
.sf9-template-coordinate-plane {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  font-family: "Times New Roman", Times, serif;
  color: #111;
}
/* A5 uses a cropped official side image, while the overlay retains the full
   two-side coordinate system. */
.sf9-template-live-paper.sf9-paper-a5-front .sf9-template-coordinate-plane {
  width: 202.84%;
  left: 0;
  right: auto;
}
.sf9-template-live-paper.sf9-paper-a5-back .sf9-template-coordinate-plane {
  width: 206.19%;
  left: -106.19%;
  right: auto;
}
.sf9-tpl-header {
  position: absolute;
  left: 12.0%;
  top: 7.8%;
  width: 22.0%;
  height: 15.0%;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: .25%;
  background: #fff;
  text-align: center;
  line-height: 1.08;
  font-size: 13px;
}
.sf9-tpl-header > * { display: block; max-width: 100%; }
.sf9-tpl-header .sf9-tpl-division,
.sf9-tpl-header .sf9-tpl-school-name,
.sf9-tpl-header .sf9-tpl-report-title { font-weight: 700; }
.sf9-tpl-header .sf9-tpl-school-name { margin-top: 5px; }
.sf9-tpl-school-logo {
  position: absolute;
  left: 35.0%;
  top: 3.2%;
  width: 7.5%;
  height: 11.5%;
  display: grid;
  place-items: center;
  background: #fff;
}
.sf9-tpl-school-logo img { width: 100%; height: 100%; object-fit: contain; }
.sf9-tpl-learner-name,
.sf9-tpl-learner-age,
.sf9-tpl-learner-sex,
.sf9-tpl-learner-lrn,
.sf9-tpl-learner-grade,
.sf9-tpl-learner-section,
.sf9-tpl-school-head-top,
.sf9-tpl-adviser-top,
.sf9-tpl-adviser-transfer,
.sf9-tpl-school-head-transfer,
.sf9-tpl-school-head-cancel {
  position: absolute;
  display: grid;
  align-items: end;
  min-height: 1.35%;
  padding: 0 3px 1px;
  background: #fff;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sf9-tpl-learner-name { left: 6.4%; top: 22.35%; width: 19.4%; }
.sf9-tpl-learner-age { left: 28.1%; top: 22.35%; width: 4.8%; text-align: center; }
.sf9-tpl-learner-sex { left: 37.7%; top: 22.35%; width: 6.8%; text-align: center; }
.sf9-tpl-learner-lrn { left: 6.4%; top: 24.55%; width: 19.4%; }
.sf9-tpl-learner-grade { left: 28.1%; top: 24.55%; width: 4.8%; text-align: center; }
.sf9-tpl-learner-section { left: 37.7%; top: 24.55%; width: 6.8%; text-align: center; }
.sf9-tpl-school-head-top { left: 5.3%; top: 40.6%; width: 16.8%; justify-items: center; font-size: 11px; font-weight: 600; }
.sf9-tpl-adviser-top { left: 27.2%; top: 40.6%; width: 17.5%; justify-items: center; font-size: 11px; font-weight: 600; }
.sf9-tpl-subject-row {
  --sf9-row-step: 2.300%;
  position: absolute;
  left: 0;
  top: calc(51.10% + (var(--sf9-row) * var(--sf9-row-step)));
  width: 100%;
  height: var(--sf9-row-step);
  font-size: 13px;
  line-height: 1;
}
.sf9-tpl-subject-row > span {
  position: absolute;
  top: 0;
  height: 100%;
  display: grid;
  align-items: center;
  justify-items: center;
  background: transparent;
}
.sf9-tpl-subject-name {
  left: 1.95%;
  width: 16.0%;
  justify-items: start !important;
  padding-left: 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.sf9-tpl-subject-row.is-component .sf9-tpl-subject-name { font-style: italic; font-size: 12px; }
.sf9-tpl-t1 { left: 18.05%; width: 3.75%; }
.sf9-tpl-t2 { left: 21.80%; width: 3.55%; }
.sf9-tpl-t3 { left: 25.35%; width: 3.65%; }
.sf9-tpl-final { left: 29.00%; width: 4.10%; }
.sf9-tpl-final-remark {
  left: 33.10%;
  width: 13.35%;
  padding: 1px 5px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.05;
  white-space: normal;
  overflow-wrap: anywhere;
}
.sf9-tpl-grade { font-size: 14px; font-weight: 500; }
.sf9-tpl-general-average,
.sf9-tpl-general-remark {
  position: absolute;
  top: 83.55%;
  height: 2.6%;
  display: grid;
  place-items: center;
  background: #fff;
  font-size: 14px;
  font-weight: 700;
}
.sf9-tpl-general-average { left: 29.0%; width: 4.1%; }
.sf9-tpl-general-remark { left: 33.10%; width: 13.35%; font-size: 11px; text-align: center; padding: 0 4px; }
.sf9-tpl-attendance-values { position: absolute; inset: 0; }
.sf9-tpl-att-cell,
.sf9-tpl-att-total {
  position: absolute;
  width: 3.12%;
  height: 2.75%;
  display: grid;
  place-items: center;
  font-size: 11px;
  line-height: 1;
  text-align: center;
  background: transparent;
}
.sf9-tpl-att-cell { left: calc(58.70% + (var(--sf9-col) * 3.12%)); }
.sf9-tpl-att-total { left: 93.02%; width: 6.9%; }
.sf9-tpl-att-class { top: 5.25%; }
.sf9-tpl-att-present { top: 8.48%; }
.sf9-tpl-att-absent { top: 11.72%; }
.sf9-tpl-teacher-remark {
  position: absolute;
  left: 53.0%;
  width: 46.2%;
  height: 6.6%;
  display: grid;
  place-items: center;
  padding: 6px 12px;
  text-align: center;
  font-size: 12px;
  line-height: 1.22;
  overflow: hidden;
  overflow-wrap: anywhere;
  background: transparent;
}
.sf9-tpl-teacher-remark-t1 { top: 19.15%; }
.sf9-tpl-teacher-remark-t2 { top: 25.95%; }
.sf9-tpl-teacher-remark-t3 { top: 32.75%; }
.sf9-tpl-adviser-transfer { left: 80.4%; top: 75.2%; width: 17.3%; justify-items: center; font-size: 11px; }
.sf9-tpl-school-head-transfer { left: 53.0%; top: 84.45%; width: 21.5%; justify-items: center; font-size: 11px; }
.sf9-tpl-school-head-cancel { left: 53.0%; top: 95.85%; width: 21.5%; justify-items: center; font-size: 11px; }
.sf9-template-live-empty { display: grid; min-height: 700px; place-items: center; background: #fff; }
/* No old/approximate form can show underneath this layer. */
.route-reports .sf9-live-official-stage { background: #e8e8e6 !important; }
.route-reports .sf9-template-live-paper { opacity: 1 !important; visibility: visible !important; transition: none !important; }

/* v198 — Excel-geometry SF9 live preview.
   The blank form remains the rasterized official workbook. The canvas removes
   or inserts the same worksheet row band used by the exporter, and all live
   values are anchored to the actual rendered Excel cell boundaries instead of
   approximate percentages. */
.route-reports .sf9-template-live-paper {
  width: var(--sf9-native-width, 2901px) !important;
  height: var(--sf9-native-height, 1911px) !important;
  aspect-ratio: auto !important;
  background-size: 100% auto !important;
  background-position: 0 0 !important;
}
.route-reports .sf9-template-live-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
}
.route-reports .sf9-template-live-canvas.ready { opacity: 1; }
.route-reports .sf9-template-coordinate-plane { z-index: 1; }

/* Native rendered coordinates for A4/Letter. */
.route-reports .sf9-template-live-paper.sf9-paper-a4,
.route-reports .sf9-template-live-paper.sf9-paper-letter {
  --sf9-head-left: 55px;
  --sf9-head-width: 589px;
  --sf9-adviser-left: 746px;
  --sf9-adviser-width: 550px;
  --sf9-subject-left: 55px;
  --sf9-subject-width: 467px;
  --sf9-t1-left: 534px;
  --sf9-t1-width: 110px;
  --sf9-t2-left: 644px;
  --sf9-t2-width: 102px;
  --sf9-t3-left: 746px;
  --sf9-t3-width: 109px;
  --sf9-final-left: 855px;
  --sf9-final-width: 110px;
  --sf9-final-remark-left: 965px;
  --sf9-final-remark-width: 331px;
  --sf9-att-first-left: 1734px;
  --sf9-att-step: 91.18px;
  --sf9-att-width: 91.18px;
  --sf9-att-total-left: 2737px;
  --sf9-att-total-width: 163px;
  --sf9-teacher-remark-left: 1734px;
  --sf9-teacher-remark-width: 1003px;
  --sf9-adviser-transfer-left: 2281px;
  --sf9-adviser-transfer-width: 619px;
  --sf9-head-transfer-left: 1535px;
  --sf9-head-transfer-width: 655px;
}
/* Native rendered coordinates for Folio/Long. */
.route-reports .sf9-template-live-paper.sf9-paper-folio {
  --sf9-head-left: 58px;
  --sf9-head-width: 591px;
  --sf9-adviser-left: 764px;
  --sf9-adviser-width: 664px;
  --sf9-subject-left: 58px;
  --sf9-subject-width: 503px;
  --sf9-t1-left: 561px;
  --sf9-t1-width: 88px;
  --sf9-t2-left: 649px;
  --sf9-t2-width: 115px;
  --sf9-t3-left: 764px;
  --sf9-t3-width: 115px;
  --sf9-final-left: 879px;
  --sf9-final-width: 127px;
  --sf9-final-remark-left: 1006px;
  --sf9-final-remark-width: 422px;
  --sf9-att-first-left: 1812px;
  --sf9-att-step: 103.18px;
  --sf9-att-width: 103.18px;
  --sf9-att-total-left: 2947px;
  --sf9-att-total-width: 174px;
  --sf9-teacher-remark-left: 1812px;
  --sf9-teacher-remark-width: 1135px;
  --sf9-adviser-transfer-left: 2431px;
  --sf9-adviser-transfer-width: 690px;
  --sf9-head-transfer-left: 1613px;
  --sf9-head-transfer-width: 714px;
}
/* The A5 coordinate plane is the complete two-side workbook even though the
   paper viewport crops to one side. */
.route-reports .sf9-template-live-paper.sf9-paper-a5-front,
.route-reports .sf9-template-live-paper.sf9-paper-a5-back {
  --sf9-head-left: 54px;
  --sf9-head-width: 590px;
  --sf9-adviser-left: 746px;
  --sf9-adviser-width: 634px;
  --sf9-subject-left: 54px;
  --sf9-subject-width: 458px;
  --sf9-t1-left: 534px;
  --sf9-t1-width: 110px;
  --sf9-t2-left: 644px;
  --sf9-t2-width: 102px;
  --sf9-t3-left: 746px;
  --sf9-t3-width: 109px;
  --sf9-final-left: 855px;
  --sf9-final-width: 140px;
  --sf9-final-remark-left: 995px;
  --sf9-final-remark-width: 385px;
  --sf9-att-first-left: 1752px;
  --sf9-att-step: 85.55px;
  --sf9-att-width: 85.55px;
  --sf9-att-total-left: 2693px;
  --sf9-att-total-width: 151px;
  --sf9-teacher-remark-left: 1752px;
  --sf9-teacher-remark-width: 941px;
  --sf9-adviser-transfer-left: 2265px;
  --sf9-adviser-transfer-width: 579px;
  --sf9-head-transfer-left: 1565px;
  --sf9-head-transfer-width: 615px;
}

/* Fixed rows before the Learning Areas block never move when unused subject
   rows are hidden. Do not scale their Y positions against the shorter page. */
.sf9-tpl-header {
  top: 149px !important;
  height: 287px !important;
  background: transparent !important;
}
.sf9-tpl-school-logo { top: 61px !important; height: 220px !important; }
.sf9-tpl-learner-name,
.sf9-tpl-learner-age,
.sf9-tpl-learner-sex { top: 427px !important; background: transparent !important; }
.sf9-tpl-learner-lrn,
.sf9-tpl-learner-grade,
.sf9-tpl-learner-section { top: 469px !important; background: transparent !important; }
.sf9-tpl-school-head-top,
.sf9-tpl-adviser-top,
.sf9-tpl-adviser-transfer,
.sf9-tpl-school-head-transfer,
.sf9-tpl-school-head-cancel { background: transparent !important; }
.sf9-tpl-school-head-top {
  left: var(--sf9-head-left) !important;
  top: 765px !important;
  width: var(--sf9-head-width) !important;
  height: 30px !important;
  padding: 0 4px 5px !important;
  place-items: end center !important;
}
.sf9-tpl-adviser-top {
  left: var(--sf9-adviser-left) !important;
  top: 765px !important;
  width: var(--sf9-adviser-width) !important;
  height: 30px !important;
  padding: 0 4px 5px !important;
  place-items: end center !important;
}

/* Exact Learning Areas body: row 32 begins at y=985 and every standard
   official row is 51 raster pixels high (25.5 Excel points). */
.sf9-tpl-subject-row {
  --sf9-row-step: 51px !important;
  top: calc(985px + (var(--sf9-row) * 51px)) !important;
  height: 51px !important;
}
.sf9-tpl-subject-name {
  left: var(--sf9-subject-left) !important;
  width: var(--sf9-subject-width) !important;
  padding: 0 8px !important;
}
.sf9-tpl-t1 { left: var(--sf9-t1-left) !important; width: var(--sf9-t1-width) !important; }
.sf9-tpl-t2 { left: var(--sf9-t2-left) !important; width: var(--sf9-t2-width) !important; }
.sf9-tpl-t3 { left: var(--sf9-t3-left) !important; width: var(--sf9-t3-width) !important; }
.sf9-tpl-final { left: var(--sf9-final-left) !important; width: var(--sf9-final-width) !important; }
.sf9-tpl-final-remark {
  left: var(--sf9-final-remark-left) !important;
  width: var(--sf9-final-remark-width) !important;
  padding: 2px 8px !important;
}
.sf9-tpl-general-average,
.sf9-tpl-general-remark {
  top: calc(1597px + var(--sf9-row-delta-px, 0px)) !important;
  height: 63px !important;
  background: transparent !important;
}
.sf9-tpl-general-average { left: var(--sf9-final-left) !important; width: var(--sf9-final-width) !important; }
.sf9-tpl-general-remark { left: var(--sf9-final-remark-left) !important; width: var(--sf9-final-remark-width) !important; }

/* Exact attendance cells (S:AC + AD total) and the centered remark area used
   by the official exporter after splitting the Term label from the remark. */
.sf9-tpl-att-cell,
.sf9-tpl-att-total { height: 63px !important; }
.sf9-tpl-att-cell {
  left: calc(var(--sf9-att-first-left) + (var(--sf9-col) * var(--sf9-att-step))) !important;
  width: var(--sf9-att-width) !important;
}
.sf9-tpl-att-total { left: var(--sf9-att-total-left) !important; width: var(--sf9-att-total-width) !important; }
.sf9-tpl-att-class { top: 98px !important; }
.sf9-tpl-att-present { top: 161px !important; }
.sf9-tpl-att-absent { top: 224px !important; height: 62px !important; }
.sf9-tpl-teacher-remark {
  left: var(--sf9-teacher-remark-left) !important;
  width: var(--sf9-teacher-remark-width) !important;
  padding: 8px 14px !important;
  background: transparent !important;
}
.sf9-tpl-teacher-remark-t1 { top: 365px !important; height: 131px !important; }
.sf9-tpl-teacher-remark-t2 { top: 496px !important; height: 129px !important; }
.sf9-tpl-teacher-remark-t3 { top: 625px !important; height: 124px !important; }

/* Signatory ranges are the same merged cells used by the Excel exporter. */
.sf9-tpl-adviser-transfer {
  left: var(--sf9-adviser-transfer-left) !important;
  top: 1400px !important;
  width: var(--sf9-adviser-transfer-width) !important;
  height: 42px !important;
  padding: 0 4px 7px !important;
  place-items: end center !important;
}
.sf9-tpl-school-head-transfer {
  left: var(--sf9-head-transfer-left) !important;
  top: calc(1595px + var(--sf9-row-delta-px, 0px)) !important;
  width: var(--sf9-head-transfer-width) !important;
  height: 31px !important;
  padding: 0 4px 5px !important;
  place-items: end center !important;
}
.sf9-tpl-school-head-cancel {
  left: var(--sf9-head-transfer-left) !important;
  top: calc(1818px + var(--sf9-row-delta-px, 0px)) !important;
  width: var(--sf9-head-transfer-width) !important;
  height: 31px !important;
  padding: 0 4px 5px !important;
  place-items: end center !important;
}


/* v199 — width-first, uncropped SF9 preview.
   The official form always fills the usable card width. Height is derived from
   the selected paper's real aspect/row-adjusted height; the preview itself has
   no vertical or horizontal scrolling and never clips the official page. */
.route-reports .sf9-excel-preview-scroll {
  height: auto !important;
  min-height: 0 !important;
  padding: 4px !important;
  overflow: visible !important;
}
.route-reports .sf9-excel-preview-shell,
.route-reports .sf9-excel-preview-shell.sf9-excel-paper-a5-front,
.route-reports .sf9-excel-preview-shell.sf9-excel-paper-a5-back {
  width: 100% !important;
  max-width: none !important;
  height: auto;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  background: #e8e8e6;
}
.route-reports .sf9-live-official-stage {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto;
  min-height: 0 !important;
  box-sizing: border-box;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 4px !important;
  overflow: visible !important;
}
.route-reports .sf9-template-live-paper {
  flex: 0 0 auto !important;
  transform-origin: top center !important;
  margin: 0 !important;
}
body.sheet-wide .route-reports .sf9-excel-preview-scroll {
  height: auto !important;
  min-height: 0 !important;
}
@media (max-height: 820px) {
  .route-reports .sf9-excel-preview-scroll,
  body.sheet-wide .route-reports .sf9-excel-preview-scroll { height: auto !important; min-height: 0 !important; }
}
@media (max-width: 1080px) {
  .route-reports .sf9-excel-preview-scroll { height: auto !important; min-height: 0 !important; }
}


/* v201 — viewport-safe complete SF9 preview for Grades 4-10.
   Preserve the native official Excel-template geometry and transform the whole
   page inside a measured box. This avoids CSS zoom rounding/cropping and makes
   both the far-right edge and the complete bottom visible at every desktop
   width while leaving all existing SF9 overlay coordinates untouched. */
.route-reports .sf9-excel-preview-scroll {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}
.route-reports .sf9-excel-preview-shell,
.route-reports .sf9-excel-preview-shell.sf9-excel-paper-a5-front,
.route-reports .sf9-excel-preview-shell.sf9-excel-paper-a5-back {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}
.route-reports .sf9-live-official-stage {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  overflow: visible !important;
}
.route-reports .sf9-template-live-paper {
  position: absolute !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  zoom: 1 !important;
  transform-origin: top left !important;
  will-change: transform;
}
body.sheet-wide .route-reports .sf9-excel-preview-scroll,
body.sheet-wide .route-reports .sf9-excel-preview-shell,
body.sheet-wide .route-reports .sf9-live-official-stage {
  max-width: 100% !important;
  overflow: visible !important;
}

/* v202 / public v1.0.29 — EXACT EXCEL SF9 PREVIEW, SCROLLABLE BY DESIGN.
   The background files are direct raster renders of the official Grades 4-10
   Excel templates. Never resize/reflow the form to fit the viewport; if the
   screen is smaller, scroll the card so every original edge remains present. */
.route-reports .sf9-excel-preview-scroll {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: calc(100vh - 150px) !important;
  min-height: 420px !important;
  overflow: auto !important;
  padding: 10px !important;
  box-sizing: border-box !important;
  scrollbar-gutter: stable both-edges;
  overscroll-behavior: contain;
  background: #dededb !important;
}
.route-reports .sf9-excel-preview-shell,
.route-reports .sf9-live-official-stage {
  position: relative !important;
  display: block !important;
  max-width: none !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
}
.route-reports .sf9-template-live-paper {
  position: absolute !important;
  margin: 0 !important;
  transform: none !important;
  transform-origin: top left !important;
  zoom: 1 !important;
  overflow: hidden !important;
  background-size: 100% 100% !important;
  background-position: 0 0 !important;
  background-repeat: no-repeat !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.14) !important;
}
.route-reports .sf9-template-live-canvas { display: none !important; }
.route-reports .sf9-template-coordinate-plane.sf9-exact-coordinate-plane {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  font-family: "Bookman Old Style", "URW Bookman", "Bookman", serif !important;
  pointer-events: none !important;
}
.route-reports .sf9-exact-coordinate-plane .sf9-exact-box {
  position: absolute !important;
  left: var(--sf9-x) !important;
  top: var(--sf9-y) !important;
  width: var(--sf9-w) !important;
  height: var(--sf9-h) !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 4px !important;
  overflow: hidden !important;
  color: #111 !important;
  line-height: 1.05 !important;
  text-align: center !important;
  white-space: normal !important;
  text-overflow: clip !important;
}
.route-reports .sf9-exact-header { font-size: 24px !important; }
.route-reports .sf9-exact-header-bold { font-weight: 700 !important; }
.route-reports .sf9-exact-school-name { font-size: 22px !important; font-weight: 700 !important; }
.route-reports .sf9-exact-school-logo { background: #fff !important; padding: 2px !important; }
.route-reports .sf9-exact-school-logo img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
.route-reports .sf9-exact-learner { font-size: 24px !important; }
.route-reports .sf9-exact-left { justify-content: flex-start !important; text-align: left !important; }
.route-reports .sf9-exact-signatory { font-size: 20px !important; font-weight: 700 !important; align-items: flex-end !important; padding-bottom: 2px !important; }
.route-reports .sf9-exact-subject-name {
  background: #fff !important;
  justify-content: flex-start !important;
  text-align: left !important;
  font-size: 23px !important;
  padding-left: 3px !important;
}
.route-reports .sf9-exact-subject-name.is-component { font-style: italic !important; font-size: 22px !important; }
.route-reports .sf9-exact-grade { font-size: 23px !important; }
.route-reports .sf9-exact-final-grade { font-weight: 700 !important; }
.route-reports .sf9-exact-final-remark,
.route-reports .sf9-exact-general-remark { font-size: 19px !important; font-weight: 600 !important; overflow-wrap: anywhere !important; }
.route-reports .sf9-exact-general-average { font-size: 23px !important; font-weight: 700 !important; }
.route-reports .sf9-exact-attendance { font-size: 20px !important; }
.route-reports .sf9-exact-teacher-remark {
  font-size: 19px !important;
  line-height: 1.2 !important;
  padding: 8px 18px !important;
  overflow-wrap: anywhere !important;
}
/* A5 is one exact page at a time. The coordinate mapping is already page-local;
   never reuse the old 200% full-sheet coordinate plane. */
.route-reports .sf9-template-live-paper.sf9-paper-a5-front .sf9-template-coordinate-plane,
.route-reports .sf9-template-live-paper.sf9-paper-a5-back .sf9-template-coordinate-plane {
  width: 100% !important;
  left: 0 !important;
  right: auto !important;
}


/* v203 / public v1.0.29 — exact Excel SF9 FIT TO SCREEN.
   Preserve the official raster/page geometry and scale the entire two-page
   form as one unit. The screen controls only the uniform scale; nothing inside
   the Excel form is reflowed, cropped, or independently resized. */
.route-reports .sf9-excel-preview-scroll {
  width: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 6px !important;
  box-sizing: border-box !important;
  scrollbar-gutter: auto !important;
}
.route-reports .sf9-excel-preview-shell,
.route-reports .sf9-excel-preview-shell.sf9-excel-paper-a5-front,
.route-reports .sf9-excel-preview-shell.sf9-excel-paper-a5-back {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
}
.route-reports .sf9-live-official-stage {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.route-reports .sf9-template-live-paper {
  position: absolute !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  zoom: 1 !important;
  transform-origin: top left !important;
  overflow: hidden !important;
  background-size: 100% 100% !important;
  background-position: 0 0 !important;
  background-repeat: no-repeat !important;
}
/* Match the live overlay typography to the real Excel cells. The entire page
   is then uniformly scaled, so text stays proportional to the template. */
.route-reports .sf9-exact-header { font-size: 13px !important; line-height: 1.05 !important; }
.route-reports .sf9-exact-school-name { font-size: 13px !important; font-weight: 700 !important; }
.route-reports .sf9-exact-learner { font-size: 15px !important; white-space: nowrap !important; }
.route-reports .sf9-exact-signatory { font-size: 12px !important; font-weight: 700 !important; }
.route-reports .sf9-exact-subject-name {
  justify-content: flex-start !important;
  text-align: left !important;
  font-size: 14px !important;
  line-height: 1 !important;
  padding-left: 8px !important;
  padding-right: 4px !important;
  white-space: nowrap !important;
}
.route-reports .sf9-exact-subject-name.is-component {
  font-size: 12px !important;
  font-style: italic !important;
  padding-left: 18px !important;
}
.route-reports .sf9-exact-grade { font-size: 14px !important; line-height: 1 !important; }
.route-reports .sf9-exact-final-remark,
.route-reports .sf9-exact-general-remark { font-size: 11px !important; line-height: 1.05 !important; }
.route-reports .sf9-exact-general-average { font-size: 14px !important; }
.route-reports .sf9-exact-attendance { font-size: 10px !important; }
.route-reports .sf9-exact-teacher-remark {
  font-size: 11px !important;
  line-height: 1.1 !important;
  padding: 4px 10px !important;
}


/* v204 / public v1.0.29 — SF9 FIT-SCREEN SCALE CONFLICT FIX.
   A legacy v202 rule set transform:none!important, which overrode the computed
   fit-to-screen transform and left the native SF9 oversized inside a small
   viewport. The JS already writes --sf9-preview-scale; make that variable the
   final authoritative transform without changing any template geometry. */
.route-reports .sf9-template-live-paper {
  transform: scale(var(--sf9-preview-scale, 1)) !important;
  transform-origin: top left !important;
}


/* v205 / public v1.0.29 — LARGE WIDTH-FIT + LEFT-INDENT SUBJECTS ONLY.
   Keep the exact Excel raster/geometry unchanged. The JS sizes the whole form
   from available width; these declarations only reinforce the requested
   learning-area text alignment without touching grades or other cells. */
.route-reports .sf9-exact-subject-name {
  justify-content: flex-start !important;
  text-align: left !important;
  padding-left: 10px !important;
  padding-right: 4px !important;
}
.route-reports .sf9-exact-subject-name.is-component {
  padding-left: 20px !important;
}

/* v208 / public v1.0.29 — SF9 trailing-row + teacher-remark typography fix.
   IMPORTANT: the approved v205/v206 preview sizing is intentionally untouched.
   This only controls the live Excel-raster contents and text styling. */
.route-reports .sf9-template-live-canvas {
  display: block !important;
}
.route-reports .sf9-exact-coordinate-plane .sf9-exact-subject-name {
  justify-content: flex-start !important;
  text-align: left !important;
  padding-left: 10px !important;
  padding-right: 4px !important;
}
.route-reports .sf9-exact-coordinate-plane .sf9-exact-subject-name.is-component {
  justify-content: flex-start !important;
  text-align: left !important;
  padding-left: 20px !important;
}
.route-reports .sf9-exact-coordinate-plane .sf9-exact-teacher-remark {
  font-family: "Bookman Old Style", "URW Bookman", Bookman, serif !important;
  font-size: 12pt !important;
  line-height: 1.15 !important;
  padding: 5px 12px !important;
  overflow-wrap: anywhere !important;
}


/* v210 / public v1.0.29 — CLEAN SF9 DATA OVERLAY ONLY.
   Preview sizing is intentionally untouched. The raster background now contains
   only the fixed official Excel layout; dynamic Learning Areas and remarks are
   drawn once by AcadMates. */
.route-reports .sf9-exact-coordinate-plane .sf9-exact-subject-name {
  justify-content: flex-start !important;
  text-align: left !important;
  padding-left: 10px !important;
  padding-right: 4px !important;
  white-space: nowrap !important;
}
.route-reports .sf9-exact-coordinate-plane .sf9-exact-subject-name.is-component {
  padding-left: 20px !important;
}
.route-reports .sf9-exact-coordinate-plane .sf9-exact-teacher-remark {
  font-family: "Bookman Old Style", "URW Bookman", Bookman, serif !important;
  font-size: 12pt !important;
  line-height: 1.15 !important;
  padding: 5px 12px !important;
  overflow-wrap: anywhere !important;
}


/* v211 / public v1.0.29 — AUTHORITATIVE EXCEL-RENDERED SF9 PREVIEW.
   The visible Grades 4–10 SF9 preview is the PDF produced from the populated
   official Excel workbook itself. The old HTML/raster coordinate mirror is
   disabled completely so preview, Download, and Print share one source of truth. */
.route-reports .sf9-excel-preview-scroll {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 6px !important;
  box-sizing: border-box !important;
  background: #dededb !important;
}
.route-reports .sf9-authoritative-excel-preview {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  background: #fff !important;
  border: 1px solid #D9E4E8 !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.13) !important;
  aspect-ratio: 1684 / 1191;
}
.route-reports .sf9-authoritative-excel-preview.sf9-excel-paper-letter {
  aspect-ratio: 1584 / 1224;
}
.route-reports .sf9-authoritative-excel-preview.sf9-excel-paper-a5-front,
.route-reports .sf9-authoritative-excel-preview.sf9-excel-paper-a5-back {
  width: min(100%, 760px) !important;
  aspect-ratio: 840 / 1191;
}
.route-reports .sf9-authoritative-excel-preview .sf9-exact-preview-frame {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  border: 0 !important;
  background: #fff !important;
  pointer-events: none !important;
}
.route-reports .sf9-authoritative-excel-preview .sf9-exact-preview-status {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: none !important;
  place-items: center !important;
  padding: 16px !important;
  border: 0 !important;
  background: rgba(250,249,245,.92) !important;
  color: #636C77 !important;
  text-align: center !important;
}
.route-reports .sf9-authoritative-excel-preview .sf9-exact-preview-status.loading,
.route-reports .sf9-authoritative-excel-preview .sf9-exact-preview-status.error {
  display: grid !important;
}
.route-reports .sf9-authoritative-excel-preview .sf9-exact-preview-status.refreshing,
.route-reports .sf9-authoritative-excel-preview .sf9-exact-preview-status.ready {
  display: none !important;
}
/* The reconstructed live mirror is intentionally disabled. */
.route-reports .sf9-live-instant-stage,
.route-reports .sf9-live-official-stage,
.route-reports .sf9-template-live-paper,
.route-reports .sf9-template-live-canvas,
.route-reports .sf9-template-coordinate-plane {
  display: none !important;
}

/* v212 / public v1.0.30 — instant edit feedback over the authoritative PDF.
   The exact Excel-rendered PDF remains the normal and final preview. While a
   changed learner, paper, attendance value, or teacher remark is regenerating,
   the already-derived official-template mirror is shown for immediate visual
   feedback, then removed as soon as Chromium loads the new Excel PDF. */
.route-reports .sf9-authoritative-excel-preview.sf9-live-syncing .sf9-live-instant-stage {
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  visibility: visible !important;
  opacity: 1 !important;
  padding: 0 !important;
  background: #dededb !important;
  pointer-events: none !important;
}
.route-reports .sf9-authoritative-excel-preview.sf9-live-syncing .sf9-template-live-paper {
  display: block !important;
}
.route-reports .sf9-authoritative-excel-preview.sf9-live-syncing .sf9-template-live-canvas {
  display: block !important;
}
.route-reports .sf9-authoritative-excel-preview.sf9-live-syncing .sf9-template-coordinate-plane {
  display: block !important;
}

/* v213 — paper selection is one atomic visual transaction. Never expose the
   previous Excel PDF after the shell changes to a new paper aspect ratio. */
.route-reports .sf9-authoritative-excel-preview.sf9-paper-switching .sf9-exact-preview-frame {
  visibility: hidden !important;
}
.route-reports .sf9-authoritative-excel-preview.sf9-paper-switching .sf9-live-instant-stage {
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  visibility: visible !important;
  opacity: 1 !important;
  padding: 0 !important;
  background: #dededb !important;
  pointer-events: none !important;
}
.route-reports .sf9-authoritative-excel-preview.sf9-paper-switching .sf9-template-live-paper,
.route-reports .sf9-authoritative-excel-preview.sf9-paper-switching .sf9-template-live-canvas,
.route-reports .sf9-authoritative-excel-preview.sf9-paper-switching .sf9-template-coordinate-plane {
  display: block !important;
}

/* v214 — PERMANENT ZERO-LOADING SF9 PREVIEW.
   This is the only onscreen Grades 4–10 preview engine. It uses pre-rendered
   official Excel-template pages plus live values, so every action paints in
   the same event turn. No iframe, PDF request, loader, or preview swap exists. */
.route-reports .sf9-realtime-template-preview,
.route-reports .sf9-realtime-template-preview.sf9-excel-paper-a5-front,
.route-reports .sf9-realtime-template-preview.sf9-excel-paper-a5-back {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  aspect-ratio: auto !important;
  background: #dededb !important;
}
.route-reports .sf9-realtime-template-preview.sf9-excel-paper-a5-front,
.route-reports .sf9-realtime-template-preview.sf9-excel-paper-a5-back {
  width: min(100%, 760px) !important;
  margin-inline: auto !important;
}
.route-reports .sf9-realtime-template-preview .sf9-live-permanent {
  position: relative !important;
  inset: auto !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  visibility: visible !important;
  opacity: 1 !important;
  padding: 0 !important;
  background: #dededb !important;
  pointer-events: none !important;
}
.route-reports .sf9-realtime-template-preview .sf9-template-live-paper,
.route-reports .sf9-realtime-template-preview .sf9-template-live-canvas,
.route-reports .sf9-realtime-template-preview .sf9-template-coordinate-plane {
  display: block !important;
}

/* v215 — MOUNTED APPROVED-EXCEL SF9 PREVIEW.
   Every paper/side is an immutable raster export of the approved workbook and
   stays mounted for the lifetime of the SF9 screen. A paper change reveals an
   already-present surface; field edits replace only the transparent value
   plane. There is no PDF frame, canvas redraw, old-layout fallback, or loader. */
.route-reports .sf9-realtime-template-preview .sf9-mounted-excel-paper {
  position: absolute !important;
  display: none !important;
  width: var(--sf9-native-width) !important;
  height: var(--sf9-native-height) !important;
  overflow: hidden !important;
  background: #fff !important;
  transition: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.route-reports .sf9-realtime-template-preview .sf9-mounted-excel-paper.is-active {
  display: block !important;
}
.route-reports .sf9-realtime-template-preview .sf9-approved-excel-template-image {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: fill !important;
  user-select: none !important;
  pointer-events: none !important;
}
.route-reports .sf9-realtime-template-preview .sf9-mounted-excel-paper .sf9-template-coordinate-plane {
  z-index: 1 !important;
}

/* v221 — instant first paint from the frozen A4 Excel-template export.
   The local image prevents a blank first-open state; the authoritative
   populated-Excel PDF then replaces it atomically. No HTML form is shown. */
.route-reports .sf9-authoritative-excel-preview .sf9-exact-instant-template {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: fill !important;
  background: #fff !important;
  user-select: none !important;
  pointer-events: none !important;
}
.route-reports .sf9-authoritative-excel-preview .sf9-exact-preview-frame {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  background: #fff !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: none !important;
  pointer-events: none !important;
}
.route-reports .sf9-authoritative-excel-preview .sf9-exact-preview-frame.is-active[src] {
  z-index: 2 !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.route-reports .sf9-authoritative-excel-preview .sf9-exact-preview-frame.is-loading-excel {
  z-index: 1 !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
.route-reports .sf9-authoritative-excel-preview .sf9-exact-preview-status,
.route-reports .sf9-authoritative-excel-preview .sf9-exact-preview-status.refreshing,
.route-reports .sf9-authoritative-excel-preview .sf9-exact-preview-status.ready {
  display: none !important;
}
.route-reports .sf9-authoritative-excel-preview .sf9-exact-preview-status.error {
  display: grid !important;
  background: #fff !important;
}
.route-reports .sf9-authoritative-excel-preview .sf9-live-instant-stage,
.route-reports .sf9-authoritative-excel-preview .sf9-mounted-excel-paper,
.route-reports .sf9-authoritative-excel-preview .sf9-template-live-paper,
.route-reports .sf9-authoritative-excel-preview .sf9-template-live-canvas,
.route-reports .sf9-authoritative-excel-preview .sf9-template-coordinate-plane {
  display: none !important;
}

/* v217 — frozen Excel format with immediate live SF9 values.
   This transparent SVG contains data only; all borders, labels, spacing,
   typography geometry, logos, and page formatting remain the active Excel PDF. */
.route-reports .sf9-authoritative-excel-preview .sf9-exact-live-delta-plane {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
.route-reports .sf9-authoritative-excel-preview .sf9-exact-live-delta-plane[hidden] {
  display: none !important;
}
.route-reports .sf9-authoritative-excel-preview .sf9-exact-live-delta-plane > svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}
.route-reports .sf9-authoritative-excel-preview .sf9-live-delta-value {
  box-sizing: border-box !important;
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  color: #111 !important;
  background: transparent !important;
  font-family: "Bookman Old Style", "URW Bookman", Bookman, serif !important;
  text-align: center !important;
}
.route-reports .sf9-authoritative-excel-preview .sf9-live-delta-remark .sf9-live-delta-value {
  contain: strict !important;
  max-width: 100% !important;
  max-height: 100% !important;
  padding: 4px 16px !important;
  font-size: 17px !important;
  line-height: 1.15 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}
.route-reports .sf9-authoritative-excel-preview .sf9-live-delta-remark.is-medium .sf9-live-delta-value {
  font-size: 14px !important;
  line-height: 1.12 !important;
}
.route-reports .sf9-authoritative-excel-preview .sf9-live-delta-remark.is-long .sf9-live-delta-value {
  padding-inline: 12px !important;
  font-size: 12px !important;
  line-height: 1.08 !important;
}
.route-reports .sf9-authoritative-excel-preview .sf9-live-delta-attendance .sf9-live-delta-value {
  padding: 0 2px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.route-reports .sf9-authoritative-excel-preview .sf9-live-delta-learner .sf9-live-delta-value {
  padding: 0 4px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.route-reports .sf9-sshs-authoritative-preview .sf9-live-delta-track .sf9-live-delta-value {
  align-items: center !important;
  padding: 1px 4px !important;
  line-height: 1.05 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
.route-reports .sf9-sshs-authoritative-preview .sf9-live-delta-track-border {
  stroke: #111 !important;
  stroke-width: 1 !important;
  vector-effect: non-scaling-stroke;
}
.route-reports .sf9-authoritative-excel-preview .sf9-live-delta-left .sf9-live-delta-value {
  justify-content: flex-start !important;
  text-align: left !important;
}
.route-reports .sf9-authoritative-excel-preview .sf9-live-delta-grade .sf9-live-delta-value,
.route-reports .sf9-authoritative-excel-preview .sf9-live-delta-general .sf9-live-delta-value {
  padding: 0 3px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.route-reports .sf9-authoritative-excel-preview .sf9-live-delta-final-remark .sf9-live-delta-value,
.route-reports .sf9-authoritative-excel-preview .sf9-live-delta-general .sf9-live-delta-value {
  font-size: 12px !important;
  font-weight: 700 !important;
}
.route-reports .sf9-authoritative-excel-preview .sf9-live-delta-header .sf9-live-delta-value {
  padding: 0 4px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.route-reports .sf9-authoritative-excel-preview .sf9-live-delta-subject .sf9-live-delta-value {
  padding: 0 7px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.route-reports .sf9-authoritative-excel-preview .sf9-live-delta-signatory .sf9-live-delta-value {
  padding: 0 4px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.route-reports .sf9-authoritative-excel-preview .sf9-live-delta-bold .sf9-live-delta-value {
  font-weight: 700 !important;
}
.route-reports .sf9-authoritative-excel-preview .sf9-exact-preview-status.error {
  z-index: 4 !important;
}
.route-reports .sf9-authoritative-excel-preview .sf9-exact-loading-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 6 !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  background: rgba(42, 42, 42, .12) !important;
  -webkit-backdrop-filter: blur(8px) saturate(.72) !important;
  backdrop-filter: blur(8px) saturate(.72) !important;
  pointer-events: none !important;
}
.route-reports .sf9-authoritative-excel-preview .sf9-exact-loading-overlay[hidden] {
  display: none !important;
}
.route-reports .sf9-authoritative-excel-preview .sf9-exact-loading-content {
  display: grid !important;
  width: min(390px, 46%) !important;
  justify-items: center !important;
  gap: 16px !important;
}
.route-reports .sf9-authoritative-excel-preview .sf9-exact-loading-message {
  color: #11192A !important;
  font-size: clamp(12px, 1.05vw, 16px) !important;
  font-weight: 400 !important;
  letter-spacing: .015em !important;
  text-align: center !important;
  text-shadow: 0 1px 12px rgba(255,255,255,.98) !important;
}
.route-reports .sf9-authoritative-excel-preview .sf9-exact-loading-line {
  width: 100% !important;
  height: 5px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: #151F3B !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 0 1px rgba(255, 255, 255, .14) !important;
}
.route-reports .sf9-authoritative-excel-preview .sf9-exact-loading-line > span {
  display: block !important;
  width: 42% !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #516A91, #8FD6D3 52%, #8FD6D3) !important;
  box-shadow: 0 0 10px rgba(143,214,211, .55) !important;
  animation: sf9-aqua-line-loading .82s ease-in-out infinite !important;
}
@keyframes sf9-aqua-line-loading {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(248%); }
}
@media (prefers-reduced-motion: reduce) {
  .route-reports .sf9-authoritative-excel-preview .sf9-exact-loading-line > span {
    width: 100% !important;
    animation: none !important;
  }
}

/* v228 final authority — frozen, independent, exact-cell Grades 4–10 SF9 preview. */
.route-reports .sf9-authoritative-excel-preview.sf9-independent-local-preview {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 1684 / 1191 !important;
  overflow: hidden !important;
  background: #fff !important;
  border: 1px solid #D9E4E8 !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.13) !important;
}
.route-reports .sf9-independent-local-preview .sf9-exact-instant-template {
  z-index: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.route-reports .sf9-independent-local-preview .sf9-exact-live-delta-plane {
  z-index: 1 !important;
  display: block !important;
}
.route-reports .sf9-independent-local-preview .sf9-exact-live-delta-plane[hidden] {
  display: none !important;
}
.output-signatory-editor input[readonly] { background: rgba(236,235,228,.78); color: #52636d; cursor: not-allowed; }
.output-signatory-editor.linked-adviser-signatory { box-shadow: inset 0 0 0 1px rgba(143,214,211,.18); }

/* v1.0.41: compact two-row SF9 command panel. Keep the three display
   switches together and use the remaining width for attendance reprint. */
.route-reports .sf9-controls {
  grid-template-columns: minmax(210px, .92fr) minmax(250px, 1.08fr) minmax(220px, .82fr) minmax(520px, 1.95fr) !important;
  row-gap: 10px !important;
  column-gap: 10px !important;
  padding: 12px 14px !important;
}
.route-reports .sf9-display-options {
  grid-column: 1 / 3;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  min-width: 0;
}
.route-reports .sf9-display-options label {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  min-width: 0;
  min-height: 34px;
  margin: 0;
  padding: 5px 8px;
  border: 1px solid rgba(81,106,145,.24);
  border-radius: 8px;
  background: rgba(255,255,255,.6);
  white-space: nowrap;
}
.route-reports .sf9-display-options input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
}
.route-reports .sf9-attendance-reprint-controls {
  grid-column: 3 / -1;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 8px;
  width: 100%;
  min-width: 0;
}
.route-reports .sf9-attendance-reprint-controls > div {
  grid-template-columns: repeat(13, minmax(38px, 1fr));
  gap: 5px;
  min-width: 0;
  overflow: visible;
  padding: 0;
}
.route-reports .sf9-attendance-month-button {
  min-height: 34px;
}
@media (max-width: 1220px) {
  .route-reports .sf9-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .route-reports .sf9-visibility-controls,
  .route-reports .sf9-display-options,
  .route-reports .sf9-attendance-reprint-controls {
    grid-column: 1 / -1;
  }
}
@media (max-width: 760px) {
  .route-reports .sf9-controls { grid-template-columns: 1fr !important; }
  .route-reports .sf9-display-options { grid-template-columns: 1fr; }
  .route-reports .sf9-attendance-reprint-controls { grid-template-columns: 1fr; row-gap: 6px; }
  .route-reports .sf9-attendance-reprint-controls > div {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* v1.0.42: compact SF9 command panel with no horizontal clipping.
   Grade reprint is action-only; attendance months are multi-select. */
.route-reports .sf9-controls {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  grid-template-columns: minmax(165px,.85fr) minmax(220px,1.05fr) minmax(190px,.8fr) minmax(360px,1.55fr) !important;
  gap: 10px !important;
  overflow: hidden !important;
}
.route-reports .sf9-controls > * { min-width: 0 !important; }
.route-reports .sf9-visibility-controls > div {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.route-reports .sf9-display-options {
  grid-column: 1 / 3 !important;
  grid-template-columns: minmax(130px,.55fr) minmax(300px,1.45fr) !important;
  gap: 8px !important;
}
.route-reports .sf9-display-options .sf9-report-data-toggle { white-space: normal !important; }
.route-reports .sf9-attendance-reprint-controls {
  grid-column: 3 / -1 !important;
  display: grid !important;
  grid-template-columns: max-content minmax(0,1fr) max-content !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}
.route-reports .sf9-attendance-month-grid {
  display: grid !important;
  grid-template-columns: repeat(11, minmax(34px,1fr)) !important;
  gap: 4px !important;
  min-width: 0 !important;
}
.route-reports .sf9-attendance-month-button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 34px !important;
  padding: 5px 4px !important;
  border: 1px solid rgba(81,106,145,.45) !important;
  border-radius: 8px !important;
  background: #fff !important;
  font-size: 9px !important;
  font-weight: 850 !important;
}
.route-reports .sf9-attendance-month-button.active {
  color: #171717 !important;
  border-color: #516A91 !important;
  background: #F5F8FA !important;
  box-shadow: inset 0 0 0 1px rgba(143,214,211,.18) !important;
}
.route-reports .sf9-attendance-print-selected {
  min-height: 34px !important;
  padding: 6px 12px !important;
  border: 1px solid #516A91 !important;
  border-radius: 8px !important;
  background: #8FD6D3 !important;
  color: #171717 !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}
@media (max-width: 1500px) {
  .route-reports .sf9-controls { grid-template-columns: repeat(2,minmax(0,1fr)) !important; overflow: visible !important; }
  .route-reports .sf9-visibility-controls,
  .route-reports .sf9-display-options,
  .route-reports .sf9-attendance-reprint-controls { grid-column: 1 / -1 !important; }
}
@media (max-width: 900px) {
  .route-reports .sf9-controls { grid-template-columns: 1fr !important; }
  .route-reports .sf9-display-options { grid-template-columns: 1fr !important; }
  .route-reports .sf9-attendance-reprint-controls { grid-template-columns: 1fr !important; }
  .route-reports .sf9-attendance-month-grid { grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
  .route-reports .sf9-attendance-print-selected { width: 100% !important; }
}


/* v1.0.42b: final compact SF9 panel layout — three safe rows, no right-edge clipping. */
.route-reports .sf9-controls {
  display: grid !important;
  grid-template-columns: minmax(190px,.9fr) minmax(250px,1.15fr) minmax(230px,1fr) !important;
  gap: 10px 12px !important;
  align-items: end !important;
  overflow: visible !important;
  padding: 14px 16px !important;
}
.route-reports .sf9-controls > * { min-width: 0 !important; max-width: 100% !important; }
.route-reports .sf9-visibility-controls {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: max-content minmax(0,1fr) !important;
  gap: 10px !important;
  align-items: center !important;
}
.route-reports .sf9-visibility-controls > div {
  display: grid !important;
  grid-template-columns: repeat(4,minmax(90px,1fr)) !important;
  gap: 8px !important;
  min-width: 0 !important;
}
.route-reports .sf9-visibility-toggle { width: 100% !important; min-width: 0 !important; }
.route-reports .sf9-display-options {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: minmax(120px,.35fr) minmax(320px,1.65fr) !important;
  gap: 8px 12px !important;
  min-width: 0 !important;
}
.route-reports .sf9-display-options > label { min-width: 0 !important; }
.route-reports .sf9-attendance-reprint-controls {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: max-content minmax(0,1fr) max-content !important;
  gap: 8px 10px !important;
  align-items: center !important;
  min-width: 0 !important;
}
.route-reports .sf9-attendance-month-grid {
  display: grid !important;
  grid-template-columns: repeat(11,minmax(42px,1fr)) !important;
  gap: 5px !important;
  min-width: 0 !important;
}
@media (max-width: 1280px) {
  .route-reports .sf9-controls { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .route-reports .sf9-paper-control,
  .route-reports .sf9-visibility-controls,
  .route-reports .sf9-display-options,
  .route-reports .sf9-attendance-reprint-controls { grid-column: 1 / -1 !important; }
  .route-reports .sf9-attendance-month-grid { grid-template-columns: repeat(6,minmax(0,1fr)) !important; }
}
@media (max-width: 760px) {
  .route-reports .sf9-controls { grid-template-columns: 1fr !important; }
  .route-reports .sf9-display-options,
  .route-reports .sf9-visibility-controls,
  .route-reports .sf9-attendance-reprint-controls { grid-template-columns: 1fr !important; }
  .route-reports .sf9-visibility-controls > div { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .route-reports .sf9-attendance-month-grid { grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
  .route-reports .sf9-attendance-print-selected { width: 100% !important; }
}

/* v1.0.43: E-Class learner identity alignment, SF9 inline guidance, and linked signatories. */
.route-gradebook .gradebook tbody .sticky-col {
  text-align: left !important;
}
.route-gradebook .gradebook tbody .student-name {
  justify-content: flex-start !important;
  text-align: left !important;
}
.route-gradebook .gradebook tbody .student-name > div,
.route-gradebook .gradebook tbody .student-name strong,
.route-gradebook .gradebook tbody .student-name small {
  text-align: left !important;
}

/* Keep the approved SF9 panel geometry, but use the previously empty space
   beside the visibility switches for readable reprint guidance. */
.route-reports .sf9-display-options {
  grid-template-columns: minmax(120px,.35fr) minmax(330px,.95fr) minmax(430px,1.7fr) !important;
  align-items: center !important;
}
.route-reports .sf9-inline-help {
  margin: 0 !important;
  padding: 9px 12px !important;
  min-width: 0 !important;
  border-left: 3px solid #8FD6D3;
  border-radius: 8px;
  background: #F5F8FA;
  color: #636C77;
  font-size: 13px !important;
  font-weight: 650;
  line-height: 1.45;
  text-align: left;
}
.route-reports .sf9-inline-help strong {
  color: #11192A;
  font-weight: 900;
}

.output-signatory-editor.linked-primary-signatory input[readonly] {
  background: #F5F8FA;
  cursor: default;
}
.linked-primary-signatory-note {
  display: block;
  margin-top: 5px;
  color: #636C77;
  font-size: 11px;
  line-height: 1.35;
}

@media (max-width: 1380px) {
  .route-reports .sf9-display-options {
    grid-template-columns: minmax(120px,.35fr) minmax(320px,1.1fr) !important;
  }
  .route-reports .sf9-inline-help {
    grid-column: 1 / -1 !important;
    font-size: 12.5px !important;
  }
}
@media (max-width: 760px) {
  .route-reports .sf9-display-options {
    grid-template-columns: 1fr !important;
  }
  .route-reports .sf9-inline-help {
    grid-column: auto !important;
    font-size: 12px !important;
  }
}

/* v1.0.44: SF9 grade reprint buttons and visibility switches share one compact row. */
.route-reports .sf9-grade-command-row {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
}
.route-reports .sf9-grade-command-row > div {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(78px, .72fr)) minmax(118px, .78fr) minmax(300px, 1.9fr) !important;
  align-items: stretch !important;
  gap: 7px !important;
  min-width: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
}
.route-reports .sf9-grade-command-row .sf9-visibility-toggle {
  min-height: 40px !important;
  padding: 7px 8px !important;
  font-size: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
}
.route-reports .sf9-grade-command-row .sf9-inline-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  min-width: 0 !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 7px 9px !important;
  border: 1px solid rgba(81,106,145,.28) !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.72) !important;
  color: var(--muted) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}
.route-reports .sf9-grade-command-row .sf9-inline-toggle input {
  flex: 0 0 auto !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
}
.route-reports .sf9-grade-command-row .sf9-inline-toggle span {
  min-width: 0 !important;
}
.route-reports .sf9-display-options,
.route-reports .sf9-inline-help {
  display: none !important;
}
@media (max-width: 1420px) {
  .route-reports .sf9-grade-command-row > div {
    grid-template-columns: repeat(4, minmax(72px, .65fr)) minmax(105px, .7fr) minmax(250px, 1.65fr) !important;
    gap: 6px !important;
  }
  .route-reports .sf9-grade-command-row .sf9-visibility-toggle,
  .route-reports .sf9-grade-command-row .sf9-inline-toggle {
    font-size: 9.5px !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
  }
}
@media (max-width: 1120px) {
  .route-reports .sf9-grade-command-row {
    grid-template-columns: 1fr !important;
  }
  .route-reports .sf9-grade-command-row > div {
    grid-template-columns: repeat(4, minmax(72px,1fr)) minmax(110px,1fr) minmax(250px,2fr) !important;
  }
}
@media (max-width: 760px) {
  .route-reports .sf9-grade-command-row > div {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
  .route-reports .sf9-grade-command-row .sf9-report-data-toggle {
    grid-column: 1 / -1 !important;
  }
}

/* v1.0.45 SSHS official SF9: non-applicable term cells mirror the gray cells
   in the uploaded Grade 11/12 Academic/TechPro templates. Grades 2-10 are not
   affected because this class is emitted only by sshsReportPaper(). */
.sf9-sshs-grades-table td.sf9-sshs-not-applicable {
  background: #b7b7b7;
}


/* v1.0.47: SSHS exact Excel-raster preview uses the same JHS live overlay
   typography, with official SSHS communication-component indentation retained. */
.route-reports .sf9-sshs-authoritative-preview .sf9-live-delta-subject.sshs-live-component .sf9-live-delta-value {
  font-style: italic !important;
  padding-left: 20px !important;
}
.route-reports .sf9-sshs-authoritative-preview .sf9-live-delta-grade.sshs-live-component .sf9-live-delta-value {
  font-style: italic !important;
  justify-content: flex-end !important;
  padding-right: 10px !important;
}
.route-reports .sf9-sshs-authoritative-preview .sf9-live-delta-title .sf9-live-delta-value {
  font-size: 10.5px !important;
  font-weight: 400 !important;
}

/* v1.0.51: preserve the approved SF9 navigation design while tightening only
   the requested desktop geometry. The three selectors stay on one line, the
   grade-data command is compact, attendance reprint stays on one line, and the
   SSHS exact-Excel preview gets the same balanced outer breathing room as JHS. */
@media (min-width: 981px) {
  .route-reports .sf9-controls {
    grid-template-columns: minmax(210px,.92fr) minmax(270px,1.14fr) minmax(235px,.98fr) !important;
    gap: 8px 10px !important;
    align-items: end !important;
  }
  .route-reports .sf9-controls > .advisory-selector-field {
    grid-column: 1 !important;
    min-width: 0 !important;
  }
  .route-reports .sf9-controls > .sf9-learner-control {
    grid-column: 2 !important;
    min-width: 0 !important;
  }
  .route-reports .sf9-controls > .sf9-paper-control {
    grid-column: 3 !important;
    min-width: 0 !important;
  }
  .route-reports .sf9-grade-command-row {
    grid-column: 1 / -1 !important;
    grid-template-columns: max-content minmax(0,1fr) !important;
    gap: 7px !important;
  }
  .route-reports .sf9-grade-command-row > span {
    font-size: 9px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }
  .route-reports .sf9-grade-command-row > div {
    grid-template-columns: repeat(4,minmax(64px,88px)) minmax(96px,112px) minmax(245px,1fr) !important;
    gap: 5px !important;
    justify-content: stretch !important;
  }
  .route-reports .sf9-grade-command-row .sf9-visibility-toggle,
  .route-reports .sf9-grade-command-row .sf9-inline-toggle {
    min-height: 34px !important;
    padding: 5px 6px !important;
    font-size: 9px !important;
    border-radius: 7px !important;
  }
  .route-reports .sf9-grade-command-row .sf9-inline-toggle input {
    width: 16px !important;
    height: 16px !important;
  }
  .route-reports .sf9-attendance-reprint-controls {
    grid-column: 1 / -1 !important;
    grid-template-columns: max-content minmax(0,1fr) max-content !important;
    gap: 6px 8px !important;
    align-items: center !important;
  }
  .route-reports .sf9-attendance-reprint-controls > span {
    white-space: nowrap !important;
  }
  .route-reports .sf9-attendance-month-grid {
    grid-template-columns: repeat(11,minmax(36px,1fr)) !important;
    gap: 4px !important;
  }
  .route-reports .sf9-attendance-month-button,
  .route-reports .sf9-attendance-print-selected {
    min-height: 32px !important;
  }
  .route-reports .sf9-attendance-month-button {
    padding: 4px 3px !important;
    font-size: 8.8px !important;
  }
  .route-reports .sf9-attendance-print-selected {
    padding: 5px 10px !important;
    font-size: 9.5px !important;
  }
}

/* SSHS only: keep the exact Excel sheet centered with the same visible gray
   margin around the paper that users already see in the approved JHS preview. */
.route-reports .sf9-excel-preview-scroll:has(.sf9-sshs-authoritative-preview) {
  padding: 14px 18px 18px !important;
  background: #dededb !important;
}
.route-reports .sf9-excel-preview-scroll:has(.sf9-sshs-authoritative-preview) .sf9-sshs-authoritative-preview {
  margin: 0 auto !important;
}

@media (max-width: 980px) {
  .route-reports .sf9-excel-preview-scroll:has(.sf9-sshs-authoritative-preview) {
    padding: 10px !important;
  }
}

/* v1.0.50 SSHS SF9: all four exact official Excel A4 rasters stay mounted.
   Grade/Track switching only changes visibility, so the preview never enters
   a blank image-replacement state while another template decodes. */
.route-reports .sf9-sshs-authoritative-preview .sf9-sshs-template-raster {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: none !important;
}
.route-reports .sf9-sshs-authoritative-preview .sf9-sshs-template-raster.is-active {
  opacity: 1 !important;
  visibility: visible !important;
}

/* v1.0.51 SSHS SF9: the official Excel raster keeps the cell/border geometry,
   while the live Grade Sheet subject title replaces the template's generic
   Academic/TechPro elective placeholder text inside that same box. */
.route-reports .sf9-sshs-authoritative-preview .sf9-live-delta-subject .sf9-live-delta-value {
  background: #fff !important;
}

/* v1.0.54: School Setup is authoritative for every SF9 signatory title.
   The live layer clears the fixed template title before drawing the current
   designation so Adviser/Principal/etc. never overlap the previous label. */
.route-reports .sf9-authoritative-excel-preview .sf9-live-delta-title .sf9-live-delta-value {
  font-size: 10.5px !important;
  font-weight: 400 !important;
}


/* v1.0.55: SSHS Learning Area titles remain inside their official cells.
   Long Grade Sheet subject names wrap and scale instead of crowding or clipping.
   Generated Excel row heights expand independently from this preview fit. */
.route-reports .sf9-sshs-authoritative-preview .sf9-live-delta-subject .sf9-live-delta-value {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  line-height: 1.05 !important;
  padding-top: 1px !important;
  padding-bottom: 1px !important;
}
.route-reports .sf9-sshs-authoritative-preview .sf9-live-delta-subject.sshs-subject-fit-medium .sf9-live-delta-value {
  font-size: 11.5px !important;
  line-height: 1.02 !important;
}
.route-reports .sf9-sshs-authoritative-preview .sf9-live-delta-subject.sshs-subject-fit-long .sf9-live-delta-value {
  font-size: 9.8px !important;
  line-height: 1 !important;
}


/* v1.0.67 / build 266 — SF9 TEACHER'S REMARKS TYPOGRAPHY ONLY.
   All key stages use one 12pt wrapped remark size. No grade, attendance,
   paper geometry, margins, or other SF9 cell styling is changed here. */
.route-reports .sf9-exact-teacher-remark,
.route-reports .sf9-authoritative-excel-preview .sf9-live-delta-remark .sf9-live-delta-value,
.route-reports .sf9-authoritative-excel-preview .sf9-live-delta-remark.is-medium .sf9-live-delta-value,
.route-reports .sf9-authoritative-excel-preview .sf9-live-delta-remark.is-long .sf9-live-delta-value {
  font-size: 12pt !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* v1.0.73: keep the independent SF9 report-data controls on one horizontal
   line and add the dedicated Final Grades visibility checkbox in the same
   navigation-panel slot. */
.route-reports .sf9-grade-command-row .sf9-report-data-toggle-group {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  min-width: 0 !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 7px 9px !important;
  border: 1px solid rgba(81,106,145,.28) !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.72) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: thin;
}
.route-reports .sf9-grade-command-row .sf9-report-data-toggle-group .sf9-inline-toggle {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  min-width: max-content !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  white-space: nowrap !important;
}
.route-reports .sf9-grade-command-row .sf9-report-data-toggle-group .sf9-inline-toggle span {
  white-space: nowrap !important;
}
@media (min-width: 981px) {
  .route-reports .sf9-grade-command-row .sf9-report-data-toggle-group {
    min-height: 34px !important;
    padding: 5px 7px !important;
    gap: 8px !important;
  }
  .route-reports .sf9-grade-command-row > div {
    grid-template-columns: repeat(4,minmax(64px,88px)) minmax(96px,112px) minmax(360px,1fr) !important;
  }
}
@media (max-width: 760px) {
  .route-reports .sf9-grade-command-row .sf9-report-data-toggle-group {
    grid-column: 1 / -1 !important;
  }
}

/* v1.0.74 / Build 273: proportionally space the four independent SF9
   report-data checkboxes across their shared navigation-panel slot. The
   controls remain on one line and their behavior is unchanged. */
.route-reports .sf9-grade-command-row .sf9-report-data-toggle-group {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-template-columns: repeat(4, max-content) !important;
  align-items: center !important;
  justify-content: space-evenly !important;
  column-gap: 16px !important;
}
.route-reports .sf9-grade-command-row .sf9-report-data-toggle-group .sf9-inline-toggle {
  justify-content: center !important;
  width: max-content !important;
}
@media (max-width: 1180px) {
  .route-reports .sf9-grade-command-row .sf9-report-data-toggle-group {
    justify-content: start !important;
    column-gap: 18px !important;
  }
}

/* v1.0.76 / Build 275: final palette, spacing, and SF9 command authority.
   This affects app chrome and editor controls only; official form previews and
   exported Department of Education workbook geometry remain untouched. */
@media screen {
  #app-shell .view {
    padding-top: 14px !important;
  }

  .route-reports .sf9-grade-command-row,
  .route-reports .sf9-attendance-reprint-controls,
  .route-reports .sf9-live-remarks-row,
  .route-reports .sf9-inline-help {
    border-color: rgba(81, 106, 145, .26) !important;
    background: rgba(245, 248, 250, .82) !important;
  }

  .route-reports .sf9-attendance-month-button {
    border-color: rgba(81, 106, 145, .42) !important;
    color: #151F3B !important;
    background: rgba(255, 255, 255, .9) !important;
  }

  .route-reports .sf9-attendance-month-button:hover,
  .route-reports .sf9-attendance-month-button:focus-visible,
  .route-reports .sf9-attendance-month-button.active {
    border-color: #516A91 !important;
    color: #151F3B !important;
    background: #E4F2F5 !important;
    box-shadow: 0 0 0 3px rgba(143, 214, 211, .2) !important;
  }

  .route-reports .sf9-attendance-print-selected {
    border-color: #516A91 !important;
    color: #FFFFFF !important;
    background: #516A91 !important;
    box-shadow: 0 8px 18px rgba(21, 31, 59, .16) !important;
  }

  .route-reports .sf9-attendance-print-selected:hover,
  .route-reports .sf9-attendance-print-selected:focus-visible {
    border-color: #151F3B !important;
    background: #151F3B !important;
  }
}

/* Build 407: route-local SSHS SF9 spinner removed. All loading feedback uses the shared branded #app-loader. */

/* v1.1.3 Build 306 — legacy exact-form CSS retained only for compatibility; active G4-10 Final Grades view uses the standard AcadMates smart-sis table style. */
.final-grades-exact-screen {
  width: min(100%, 1180px);
  margin: 0 auto;
  padding: 26px 30px 30px;
  background: #fff;
  color: #111;
  border: 1px solid #777;
  border-radius: 2px;
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
  overflow-x: auto;
}
.final-grades-exact-screen h2 {
  margin: 0 0 28px;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  line-height: 1.15;
  font-weight: 700;
  color: #111;
  letter-spacing: 0;
}
.final-grades-template-meta {
  display: grid;
  align-items: stretch;
  border-top: 1px solid #111;
  border-left: 1px solid #111;
}
.final-grades-template-meta > div {
  min-height: 34px;
  display: grid;
  grid-template-columns: minmax(105px, auto) 1fr;
  align-items: center;
  border-right: 1px solid #111;
  border-bottom: 1px solid #111;
  font-size: 12px;
}
.final-grades-template-meta strong {
  padding: 7px 8px;
  font-size: 11px;
  line-height: 1.15;
  font-weight: 700;
  white-space: nowrap;
}
.final-grades-template-meta span {
  min-height: 100%;
  display: flex;
  align-items: center;
  padding: 7px 10px;
  border-left: 1px solid #111;
  font-size: 12px;
  line-height: 1.15;
}
.final-grades-template-meta-top { grid-template-columns: 1fr 1fr; }
.final-grades-template-meta-school { grid-template-columns: 1.55fr 0.8fr 0.9fr; border-top: 0; }
.final-grades-template-meta-school .school-name span { justify-content: center; text-align: center; }
.final-grades-template-meta-class { grid-template-columns: 1.3fr 0.75fr 1.15fr 0.75fr; border-top: 0; margin-bottom: 0; }
.final-grades-table-wrap { width: 100%; overflow-x: auto; }
.final-grades-exact-table {
  width: 100%;
  min-width: 930px;
  border-collapse: collapse;
  table-layout: fixed;
  font-family: Arial, Helvetica, sans-serif;
  color: #111;
  background: #fff;
}
.final-grades-exact-table th,
.final-grades-exact-table td {
  height: 29px;
  padding: 4px 6px;
  border: 1px solid #111;
  font-size: 11px;
  line-height: 1.1;
  text-align: center;
  vertical-align: middle;
  background: #fff;
  color: #111;
}
.final-grades-exact-table thead th {
  height: 42px;
  font-weight: 700;
  white-space: normal;
}
.final-grades-exact-table th:nth-child(1),
.final-grades-exact-table td:nth-child(1) { width: 42px; }
.final-grades-exact-table th:nth-child(2),
.final-grades-exact-table td:nth-child(2) { width: 34%; }
.final-grades-exact-table th:nth-child(n+3),
.final-grades-exact-table td:nth-child(n+3) { width: 11%; }
.final-grades-exact-table .final-grades-name { text-align: left; padding-left: 10px; }
.final-grades-exact-table .final-grades-gender-row td {
  height: 25px;
  padding: 4px 8px;
  text-align: left;
  font-weight: 700;
  background: #ccc;
}
.final-grades-signatories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
  margin-top: 30px;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  color: #111;
}
.final-grades-signatories > div { display: flex; min-height: 80px; flex-direction: column; justify-content: flex-end; }
.final-grades-signatories span { margin-bottom: 24px; text-align: left; font-size: 11px; }
.final-grades-signatories strong { padding: 0 6px 3px; border-bottom: 1px solid #111; font-size: 11px; font-weight: 700; }
.final-grades-signatories small { margin-top: 3px; font-size: 10px; color: #111; }
body.dark-mode .final-grades-exact-screen,
body.dark-mode .final-grades-exact-screen * { color: #111; }
body.dark-mode .final-grades-exact-screen,
body.dark-mode .final-grades-exact-table,
body.dark-mode .final-grades-exact-table th,
body.dark-mode .final-grades-exact-table td { background: #fff; }
body.dark-mode .final-grades-exact-table .final-grades-gender-row td { background: #ccc; }
@media (max-width: 900px) {
  .final-grades-exact-screen { padding: 20px 16px; }
  .final-grades-template-meta-top,
  .final-grades-template-meta-school,
  .final-grades-template-meta-class { min-width: 930px; }
  .final-grades-signatories { min-width: 930px; }
}

/* v1.1.8 Build 311 — G4-10 Final Grades live table fills the available
   AcadMates workspace while retaining horizontal scrolling on narrow screens. */
.route-smartsis .final-grades-system-wrap { width: 100%; max-width: none; }
.route-smartsis .final-grades-system-table { width: 100% !important; max-width: none; }

/* AcadMates v1.2.16 — readable destructive warning and advisory subject planner. */
@media screen {
  .clear-app-data-modal .modal-panel {
    width: min(760px, calc(100% - 34px));
    max-width: none;
  }
  .clear-app-data-document {
    display: grid;
    gap: 18px;
  }
  .clear-app-data-warning {
    width: 100%;
    box-sizing: border-box;
    padding: 18px 20px;
    border: 1px solid #e6a6a6;
    border-radius: 16px;
    background: var(--red-100);
    color: var(--red-600);
    overflow: hidden;
  }
  .clear-app-data-warning strong {
    display: block;
    min-width: 0;
    margin: 0 0 10px;
    font-size: 17px;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }
  .clear-app-data-warning p {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0 0 9px;
    line-height: 1.55;
    overflow-wrap: anywhere;
    white-space: normal;
  }
  .clear-app-data-warning p:last-child { margin-bottom: 0; }
  .clear-app-data-preserved {
    display: grid;
    gap: 10px;
  }
  .clear-app-data-preserved p { margin: 0; line-height: 1.55; }
  .clear-app-data-confirmation { display: grid; gap: 8px; }

  .advisory-subject-modal .modal-panel {
    width: min(1080px, calc(100% - 40px));
    max-width: none;
    overflow-x: hidden;
  }
  .advisory-subject-modal #modal-content { padding: 24px 28px 28px; }
  .advisory-subject-planner {
    grid-column: 1 / -1;
    display: grid;
    gap: 18px;
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface-soft, #F8FAFB);
  }
  .advisory-subject-planner-head,
  .advisory-additional-subjects-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
  }
  .advisory-subject-planner-head h3,
  .advisory-additional-subjects-head h4 { margin: 3px 0 5px; }
  .advisory-subject-planner-head p,
  .advisory-additional-subjects-head p {
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
  }
  .advisory-subject-slot-list,
  .advisory-additional-subject-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .advisory-subject-slot,
  .advisory-additional-subject-slot {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px !important;
    min-width: 0;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: white;
  }
  .advisory-subject-slot > span,
  .advisory-additional-subject-slot > span {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    grid-template-areas:
      "number title"
      "number help";
    column-gap: 9px;
    min-width: 0;
  }
  .advisory-subject-slot > span b,
  .advisory-additional-subject-slot > span b {
    grid-area: number;
    display: grid;
    place-items: center;
    align-self: start;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: var(--blue-100);
    color: var(--navy-900);
    font-size: 11px;
  }
  .advisory-subject-slot > span strong,
  .advisory-additional-subject-slot > span strong {
    grid-area: title;
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.3;
  }
  .advisory-subject-slot > span small,
  .advisory-additional-subject-slot > span small {
    grid-area: help;
    margin-top: 2px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.3;
  }
  .advisory-subject-slot input,
  .advisory-additional-subject-slot input { width: 100%; min-width: 0; }
  .advisory-subject-slot.mapeh-slot { border-style: dashed; }
  .advisory-additional-subjects {
    display: grid;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
  }
}
@media (max-width: 760px) {
  .advisory-subject-modal .modal-panel { width: calc(100% - 20px); }
  .advisory-subject-modal #modal-content { padding: 18px; }
  .advisory-subject-slot-list,
  .advisory-additional-subject-list { grid-template-columns: 1fr; }
  .advisory-subject-planner-head,
  .advisory-additional-subjects-head { display: grid; }
}

/* AcadMates v1.2.16 / Build 329 — Grade Sheet toolbar uses the extra canvas
   created by the collapsed desktop sidebar instead of leaving controls packed
   against the left edge. This is presentation-only: control order/behavior and
   Grade Sheet calculations/exports remain unchanged. */
@media screen and (min-width: 1181px) {
  #app-shell.sidebar-collapsed .route-smartsis .smart-tools:has([data-download-grade-template]) {
    display: grid !important;
    grid-template-columns:
      minmax(270px, 1.55fr)
      minmax(112px, .58fr)
      minmax(165px, .95fr)
      minmax(165px, .95fr)
      minmax(215px, 1.18fr)
      minmax(205px, 1.10fr);
    align-items: end;
    width: 100%;
    gap: 10px !important;
    overflow: visible !important;
  }
  #app-shell.sidebar-collapsed .route-smartsis .smart-tools:has([data-download-grade-template]) > .advisory-selector-field {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: initial !important;
  }
  #app-shell.sidebar-collapsed .route-smartsis .smart-tools:has([data-download-grade-template]) > label:not(.advisory-selector-field) {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: initial !important;
  }
  #app-shell.sidebar-collapsed .route-smartsis .smart-tools:has([data-download-grade-template]) > .button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: initial !important;
    padding-inline: 12px !important;
  }
}

/* On narrower desktop windows a collapsed sidebar still gains space, but the
   six controls wrap into two balanced rows rather than overflowing. */
@media screen and (min-width: 901px) and (max-width: 1180px) {
  #app-shell.sidebar-collapsed .route-smartsis .smart-tools:has([data-download-grade-template]) {
    display: grid !important;
    grid-template-columns: minmax(220px, 1.7fr) minmax(105px, .65fr) repeat(2, minmax(155px, 1fr));
    width: 100%;
    gap: 9px !important;
    overflow: visible !important;
  }
  #app-shell.sidebar-collapsed .route-smartsis .smart-tools:has([data-download-grade-template]) > .advisory-selector-field {
    min-width: 0 !important;
    max-width: none !important;
  }
  #app-shell.sidebar-collapsed .route-smartsis .smart-tools:has([data-download-grade-template]) > .button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

/* AcadMates v1.2.18 — SSHS-only JHS-style Grade Sheet navigation + compact inline assessment profile. */
.route-smartsis .sshs-jhs-grade-sheet-nav {
  display: grid !important;
  grid-template-columns: minmax(280px, 1.7fr) minmax(120px, .55fr) minmax(170px, .8fr) minmax(170px, .9fr) minmax(250px, 1.15fr) minmax(190px, .9fr) !important;
  align-items: end;
  gap: 10px;
  width: 100%;
  margin-bottom: 14px;
}
.route-smartsis .sshs-jhs-grade-sheet-nav > .advisory-selector-field {
  min-width: 0 !important;
  max-width: none !important;
  width: 100%;
}
.route-smartsis .sshs-jhs-grade-sheet-nav > label {
  min-width: 0 !important;
  width: 100%;
}
.route-smartsis .sshs-jhs-grade-sheet-nav > .button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px;
  justify-content: center;
}
.route-smartsis .sshs-jhs-grade-sheet-nav .sshs-nav-summary-tabs {
  display: flex;
  width: 100% !important;
  min-width: 0;
  margin: 0;
  align-self: end;
  min-height: 44px;
}
.route-smartsis .sshs-jhs-grade-sheet-nav .sshs-nav-summary-tabs button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 36px;
  padding-inline: 8px;
  white-space: nowrap;
}
.route-gradebook .sshs-gradebook-controls {
  display: grid !important;
  grid-template-columns: minmax(300px, 2fr) minmax(112px, .55fr) minmax(145px, .7fr) minmax(88px, .4fr) minmax(285px, 1.45fr) max-content !important;
  align-items: end;
  gap: 10px;
}
.route-gradebook .sshs-inline-assessment-field {
  min-width: 0;
}
.route-gradebook .sshs-inline-assessment-field > span {
  display: block;
}
.route-gradebook .sshs-inline-assessment {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 44px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface, #fff);
  overflow: hidden;
}
.route-gradebook .sshs-inline-assessment strong,
.route-gradebook .sshs-inline-assessment small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.route-gradebook .sshs-inline-assessment strong {
  font-size: 11px;
  color: var(--text);
}
.route-gradebook .sshs-inline-assessment small {
  font-size: 9px;
  color: var(--muted);
}
@media screen and (max-width: 1500px) {
  .route-smartsis .sshs-jhs-grade-sheet-nav {
    grid-template-columns: minmax(260px, 1.7fr) minmax(120px, .55fr) minmax(160px, .8fr) minmax(160px, .9fr) minmax(235px, 1.15fr) minmax(180px, .9fr) !important;
  }
  .route-gradebook .sshs-gradebook-controls {
    grid-template-columns: minmax(280px, 1.8fr) minmax(110px, .55fr) minmax(135px, .7fr) minmax(82px, .4fr) minmax(245px, 1.25fr) max-content !important;
  }
}
@media screen and (max-width: 1180px) {
  .route-smartsis .sshs-jhs-grade-sheet-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .route-smartsis .sshs-jhs-grade-sheet-nav > .advisory-selector-field,
  .route-smartsis .sshs-jhs-grade-sheet-nav > .sshs-nav-summary-tabs {
    grid-column: span 2;
  }
  .route-gradebook .sshs-gradebook-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .route-gradebook .sshs-gradebook-controls > label:first-child,
  .route-gradebook .sshs-gradebook-controls > .sshs-inline-assessment-field {
    grid-column: span 2;
  }
  .route-gradebook .sshs-gradebook-controls .gradebook-link-button,
  .route-gradebook .sshs-gradebook-controls .gradebook-unlink-button {
    width: 100% !important;
  }
}
@media screen and (max-width: 620px) {
  .route-smartsis .sshs-jhs-grade-sheet-nav,
  .route-gradebook .sshs-gradebook-controls {
    grid-template-columns: 1fr !important;
  }
  .route-smartsis .sshs-jhs-grade-sheet-nav > .advisory-selector-field,
  .route-smartsis .sshs-jhs-grade-sheet-nav > .sshs-nav-summary-tabs,
  .route-gradebook .sshs-gradebook-controls > label:first-child,
  .route-gradebook .sshs-gradebook-controls > .sshs-inline-assessment-field {
    grid-column: auto;
  }
}

/* AcadMates v1.2.20 / Build 333 — SSHS-only responsive Grade Sheet navigation.
   The panel is border-box sized to the live content canvas, so collapsing or
   expanding the desktop sidebar changes the grid width without pushing the last
   action outside the panel. minmax(0, …) removes intrinsic-content overflow. */
.route-smartsis .sshs-jhs-grade-sheet-nav {
  box-sizing: border-box !important;
  inline-size: 100% !important;
  max-inline-size: 100% !important;
  min-inline-size: 0 !important;
  overflow: visible !important;
  grid-template-columns:
    minmax(0, 1.78fr)
    minmax(0, .72fr)
    minmax(0, 1.02fr)
    minmax(0, 1.13fr)
    minmax(0, 1.48fr)
    minmax(0, 1.22fr) !important;
}
.route-smartsis .sshs-jhs-grade-sheet-nav > * {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
.route-smartsis .sshs-jhs-grade-sheet-nav > .button {
  width: 100% !important;
  min-width: 0 !important;
}
#app-shell.sidebar-collapsed .route-smartsis .sshs-jhs-grade-sheet-nav {
  inline-size: 100% !important;
  max-inline-size: 100% !important;
  grid-template-columns:
    minmax(0, 1.88fr)
    minmax(0, .68fr)
    minmax(0, .96fr)
    minmax(0, 1.13fr)
    minmax(0, 1.50fr)
    minmax(0, 1.24fr) !important;
}
/* With the full sidebar visible, medium desktop widths wrap cleanly rather than
   clipping the Add subject offering control beyond the right panel edge. */
@media screen and (min-width: 1181px) and (max-width: 1450px) {
  #app-shell:not(.sidebar-collapsed) .route-smartsis .sshs-jhs-grade-sheet-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  #app-shell:not(.sidebar-collapsed) .route-smartsis .sshs-jhs-grade-sheet-nav > .advisory-selector-field {
    grid-column: span 2;
  }
}

/* AcadMates v1.2.21 / Build 334 — SSHS-only single-line Grade Sheet navigation.
   Desktop keeps all six navigation controls on one balanced row in both full
   and collapsed sidebar states. Controls shrink proportionally instead of
   wrapping; tablet/mobile retain the existing responsive fallback. */
@media screen and (min-width: 900px) {
  .route-smartsis .sshs-jhs-grade-sheet-nav,
  #app-shell.sidebar-collapsed .route-smartsis .sshs-jhs-grade-sheet-nav,
  #app-shell:not(.sidebar-collapsed) .route-smartsis .sshs-jhs-grade-sheet-nav {
    display: grid !important;
    grid-template-columns:
      minmax(0, 1.70fr)
      minmax(0, .62fr)
      minmax(0, .84fr)
      minmax(0, 1.03fr)
      minmax(0, 1.34fr)
      minmax(0, 1.12fr) !important;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    align-items: end;
    gap: clamp(6px, .55vw, 10px) !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    overflow: visible !important;
  }
  .route-smartsis .sshs-jhs-grade-sheet-nav > .advisory-selector-field,
  .route-smartsis .sshs-jhs-grade-sheet-nav > label,
  .route-smartsis .sshs-jhs-grade-sheet-nav > .button,
  .route-smartsis .sshs-jhs-grade-sheet-nav > .summary-tabs {
    grid-column: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .route-smartsis .sshs-jhs-grade-sheet-nav select,
  .route-smartsis .sshs-jhs-grade-sheet-nav input,
  .route-smartsis .sshs-jhs-grade-sheet-nav > .button,
  .route-smartsis .sshs-jhs-grade-sheet-nav .summary-tabs {
    min-height: 48px !important;
    height: 48px !important;
  }
  .route-smartsis .sshs-jhs-grade-sheet-nav > .button,
  .route-smartsis .sshs-jhs-grade-sheet-nav .summary-tabs button {
    padding-inline: clamp(6px, .7vw, 12px) !important;
    font-size: clamp(10px, .72vw, 13px) !important;
    line-height: 1.1;
    white-space: nowrap;
  }
  .route-smartsis .sshs-jhs-grade-sheet-nav .summary-tabs {
    display: flex !important;
    align-items: stretch;
    padding: 4px !important;
  }
  .route-smartsis .sshs-jhs-grade-sheet-nav .summary-tabs button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
  }
  .route-smartsis .sshs-jhs-grade-sheet-nav .sshs-add-subject-button,
  .route-smartsis .sshs-jhs-grade-sheet-nav .sshs-review-links-button {
    justify-content: center;
  }
}

/* AcadMates v1.2.34 / Build 347 — Grade Sheet rounded 3D navigation.
   Every key stage keeps its existing control sequence and measurements.  The
   main panel gains a clearly rounded, raised card; only the lower Grade Sheet
   navigation/action strip is intentionally background-free. */
.route-smartsis .g2to10-grade-sheet-toolbar,
.route-smartsis .sshs-grade-sheet-toolbar {
  border: 1px solid var(--brand-border) !important;
  border-radius: 22px !important;
  background: #FFFFFF !important;
  box-shadow:
    0 14px 30px rgba(21,31,59,.12),
    0 3px 8px rgba(21,31,59,.07),
    inset 0 1px 0 rgba(255,255,255,.94) !important;
  overflow: visible !important;
}
.route-smartsis .g2to10-grade-sheet-toolbar select,
.route-smartsis .g2to10-grade-sheet-toolbar > .button,
.route-smartsis .sshs-grade-sheet-toolbar select,
.route-smartsis .sshs-grade-sheet-toolbar input,
.route-smartsis .sshs-grade-sheet-toolbar > .button {
  border-radius: 14px !important;
  box-shadow:
    0 3px 0 rgba(21,31,59,.08),
    0 8px 17px rgba(21,31,59,.09),
    inset 0 1px 0 rgba(255,255,255,.84) !important;
}
.route-smartsis .g2to10-grade-sheet-toolbar > .button:disabled,
.route-smartsis .sshs-grade-sheet-toolbar > .button:disabled {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5) !important;
}
.route-smartsis .g2to10-grade-sheet-summary-toolbar,
.route-smartsis .sshs-grade-sheet-summary-toolbar {
  margin-bottom: 14px;
  padding: 0 0 3px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

@media screen and (min-width: 900px) and (max-width: 1120px) {
  .route-smartsis .sshs-jhs-grade-sheet-nav,
  #app-shell.sidebar-collapsed .route-smartsis .sshs-jhs-grade-sheet-nav,
  #app-shell:not(.sidebar-collapsed) .route-smartsis .sshs-jhs-grade-sheet-nav {
    grid-template-columns:
      minmax(0, 1.52fr)
      minmax(0, .60fr)
      minmax(0, .78fr)
      minmax(0, 1.02fr)
      minmax(0, 1.28fr)
      minmax(0, 1.06fr) !important;
    gap: 6px !important;
  }
  .route-smartsis .sshs-jhs-grade-sheet-nav > .button,
  .route-smartsis .sshs-jhs-grade-sheet-nav .summary-tabs button,
  .route-smartsis .sshs-jhs-grade-sheet-nav select,
  .route-smartsis .sshs-jhs-grade-sheet-nav input {
    font-size: 10px !important;
  }
}

/* AcadMates v1.2.34 / Build 347 — Grade Sheet secondary-strip correction.
   Keep the white main Grade Sheet navigation card. Remove only the long
   enclosing strip behind the Term/Final Grades and subject-action row. */
.route-smartsis .g2to10-grade-sheet-summary-toolbar {
  margin-bottom: 14px;
  padding: 0 0 3px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.route-smartsis .g2to10-grade-sheet-toolbar select,
.route-smartsis .g2to10-grade-sheet-toolbar > .button,
.route-smartsis .g2to10-grade-sheet-summary-toolbar > .button {
  box-shadow: var(--shadow-sm);
}
.route-smartsis .g2to10-grade-sheet-toolbar > .button:disabled,
.route-smartsis .g2to10-grade-sheet-summary-toolbar > .button:disabled {
  box-shadow: none;
}
.route-smartsis .g2to10-grade-sheet-toolbar > .button,
.route-smartsis .g2to10-grade-sheet-summary-toolbar > .button {
  transform: translateZ(0);
}

/* The SSHS controls use the same card, sequence, column proportions, heights,
   and lower summary row as the JHS Grade Sheet reference. */
.route-smartsis .sshs-grade-sheet-toolbar {
  margin-bottom: 14px;
}
.route-smartsis .sshs-grade-sheet-toolbar .sshs-track-display {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.route-smartsis .sshs-grade-sheet-summary-toolbar {
  margin-bottom: 14px;
}
@media screen and (min-width: 1181px) {
  .route-smartsis .sshs-grade-sheet-toolbar {
    display: grid !important;
    grid-template-columns:
      minmax(270px, 1.55fr)
      minmax(112px, .58fr)
      minmax(165px, .95fr)
      minmax(165px, .95fr)
      minmax(215px, 1.18fr)
      minmax(205px, 1.10fr);
    align-items: end;
    width: 100%;
    gap: 10px !important;
    overflow: visible !important;
  }
  .route-smartsis .sshs-grade-sheet-toolbar > .advisory-selector-field,
  .route-smartsis .sshs-grade-sheet-toolbar > label,
  .route-smartsis .sshs-grade-sheet-toolbar > .button {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: initial !important;
  }
  .route-smartsis .sshs-grade-sheet-toolbar > .button {
    padding-inline: 12px !important;
  }
}
@media screen and (min-width: 901px) and (max-width: 1180px) {
  .route-smartsis .sshs-grade-sheet-toolbar {
    display: grid !important;
    grid-template-columns: minmax(220px, 1.7fr) minmax(105px, .65fr) repeat(2, minmax(155px, 1fr));
    width: 100%;
    gap: 9px !important;
    overflow: visible !important;
  }
  .route-smartsis .sshs-grade-sheet-toolbar > .advisory-selector-field,
  .route-smartsis .sshs-grade-sheet-toolbar > .button {
    min-width: 0 !important;
    max-width: none !important;
  }
  .route-smartsis .sshs-grade-sheet-toolbar > .button {
    width: 100% !important;
  }
}

/* AcadMates v1.2.34 / Build 347 — SSHS Grade Sheet one-line navigation.
   Keep all six JHS-style controls on the same desktop row. The grid uses only
   the live content canvas, so it contracts with the expanded sidebar and
   rebalances immediately when that sidebar is collapsed. */
@media screen and (min-width: 900px) {
  .route-smartsis .sshs-grade-sheet-toolbar,
  #app-shell.sidebar-collapsed .route-smartsis .sshs-grade-sheet-toolbar,
  #app-shell:not(.sidebar-collapsed) .route-smartsis .sshs-grade-sheet-toolbar {
    display: grid !important;
    grid-template-columns:
      minmax(0, 1.68fr)
      minmax(0, .74fr)
      minmax(0, .93fr)
      minmax(0, 1.12fr)
      minmax(0, 1.35fr)
      minmax(0, 1.35fr) !important;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    align-items: end;
    gap: clamp(6px, .55vw, 10px) !important;
    box-sizing: border-box !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    overflow: visible !important;
  }
  .route-smartsis .sshs-grade-sheet-toolbar > .advisory-selector-field,
  .route-smartsis .sshs-grade-sheet-toolbar > label,
  .route-smartsis .sshs-grade-sheet-toolbar > .button {
    grid-column: auto !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .route-smartsis .sshs-grade-sheet-toolbar select,
  .route-smartsis .sshs-grade-sheet-toolbar input,
  .route-smartsis .sshs-grade-sheet-toolbar > .button {
    min-height: 48px !important;
    height: 48px !important;
  }
  .route-smartsis .sshs-grade-sheet-toolbar > .button {
    justify-content: center;
    padding-inline: clamp(5px, .58vw, 12px) !important;
    font-size: clamp(8px, .70vw, 13px) !important;
    letter-spacing: -.01em;
    line-height: 1.1;
    white-space: nowrap;
  }
}

/* AcadMates v1.2.51 / Build 364 — Grade Slip exact-template navigation and preview.
   The command panel is intentionally split into two balanced rows so six
   visibility controls never collide with the learner/paper selectors. */
.route-gradeslip .grade-slip-exact-controls {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 9px !important;
  width: 100% !important;
  max-width: none !important;
  padding: 10px 12px !important;
  overflow: visible !important;
}
.route-gradeslip .grade-slip-selection-group {
  display: grid !important;
  grid-template-columns: minmax(210px, 1.05fr) minmax(230px, 1.12fr) minmax(170px, .72fr) !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
}
.route-gradeslip .grade-slip-selection-group > label,
.route-gradeslip .grade-slip-selection-group > .advisory-selector-field {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
}
.route-gradeslip .grade-slip-selection-group select {
  width: 100% !important;
  min-width: 0 !important;
}
.route-gradeslip .grade-slip-options-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(132px, auto);
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding-top: 8px;
  border-top: 1px solid #d7e1e8;
}
.route-gradeslip .grade-slip-control-separator { display: none !important; }
.route-gradeslip .grade-slip-checkbox-group {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: stretch !important;
  gap: 7px !important;
  width: 100% !important;
  min-width: 0 !important;
  white-space: normal !important;
}
.route-gradeslip .grade-slip-visibility-toggle {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 40px !important;
  padding: 7px 8px !important;
  border-radius: 10px !important;
  font-size: clamp(9px, .66vw, 11px) !important;
  line-height: 1.12 !important;
  overflow: hidden;
}
.route-gradeslip .grade-slip-visibility-toggle span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.route-gradeslip .grade-slip-output-note {
  display: grid;
  flex: none !important;
  width: auto !important;
  min-width: 132px;
  justify-items: end;
  align-self: center;
  color: #526172;
  font-size: 10px !important;
  line-height: 1.25 !important;
  text-align: right;
  white-space: nowrap;
}
.route-gradeslip .grade-slip-output-note b { color: #27364a; font-size: 10px; }
.route-gradeslip .grade-slip-output-note small { color: #718094; font-size: 9px; font-weight: 700; }

/* The screen preview is the PDF rendered by Microsoft Excel from the exact
   workbook. No HTML table is redrawn here, so cell sizes, borders, fonts,
   logos, merges and pagination stay the same as the Excel template. */
.route-gradeslip .grade-slip-fit-preview.g2g10-grade-slip-preview {
  display: grid !important;
  width: 100% !important;
  height: min(780px, max(360px, calc(100dvh - 395px))) !important;
  min-height: 360px !important;
  place-items: center !important;
  padding: 10px !important;
  overflow: hidden !important;
  background: #edf2f5 !important;
}
.route-gradeslip .grade-slip-excel-preview-shell {
  position: relative;
  width: min(100%, calc((100dvh - 420px) * 1.41421356));
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 297 / 210;
  overflow: hidden;
  background: #fff;
  border: 1px solid #d2dbe2;
  box-shadow: 0 14px 32px rgba(27, 43, 68, .12);
}
.route-gradeslip .grade-slip-fit-preview[data-paper-size="short"] .grade-slip-excel-preview-shell {
  aspect-ratio: 11 / 8.5;
  width: min(100%, calc((100dvh - 420px) * 1.29411765));
}
.route-gradeslip .grade-slip-exact-preview-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  background: #fff;
  overflow: hidden;
  transition: opacity .12s ease;
}
.route-gradeslip .grade-slip-exact-preview-frame.is-ready { opacity: 1; }
.route-gradeslip .grade-slip-exact-preview-status {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  color: #526172;
  background: #fff;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}
.route-gradeslip .grade-slip-exact-preview-status span {
  display: block;
  max-width: 620px;
  margin-top: 6px;
  color: #7b8794;
  font-weight: 600;
}
.route-gradeslip .grade-slip-exact-preview-status[hidden] { display: none !important; }

@media screen and (max-width: 1180px) {
  .route-gradeslip .grade-slip-checkbox-group { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .route-gradeslip .grade-slip-output-note { align-self: stretch; align-content: center; }
  .route-gradeslip .grade-slip-fit-preview.g2g10-grade-slip-preview { height: min(690px, max(330px, calc(100dvh - 440px))) !important; }
}
@media screen and (max-width: 760px) {
  .route-gradeslip .grade-slip-selection-group { grid-template-columns: 1fr !important; }
  .route-gradeslip .grade-slip-options-row { grid-template-columns: 1fr; }
  .route-gradeslip .grade-slip-checkbox-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .route-gradeslip .grade-slip-output-note { justify-items: start; text-align: left; }
  .route-gradeslip .grade-slip-fit-preview.g2g10-grade-slip-preview { height: 420px !important; min-height: 300px !important; }
}

/* AcadMates v1.2.52 / Build 365 — instant fixed-A4 Grade Slip preview.
   The in-system preview is a live DOM mirror of the approved Excel geometry,
   so learner/grade/visibility changes appear immediately with no PDF/Excel
   preview rendering step. Paper size remains an output-only setting. */
@media screen {
  #app-shell .view.route-gradeslip.grade-slip-live-preview {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    padding-bottom: 10px !important;
    overflow: hidden !important;
  }
  .route-gradeslip.grade-slip-live-preview > .page-heading,
  .route-gradeslip.grade-slip-live-preview > .grade-slip-exact-controls {
    flex: 0 0 auto !important;
  }
  .route-gradeslip.grade-slip-live-preview > .page-heading.school-form-heading {
    margin-bottom: 10px !important;
  }
  .route-gradeslip.grade-slip-live-preview .grade-slip-exact-controls {
    gap: 7px !important;
    margin-bottom: 8px !important;
    padding: 8px 10px !important;
  }
  .route-gradeslip.grade-slip-live-preview .grade-slip-selection-group {
    grid-template-columns: minmax(190px, 1.08fr) minmax(220px, 1.18fr) minmax(150px, .68fr) !important;
    gap: 8px !important;
  }
  .route-gradeslip.grade-slip-live-preview .grade-slip-options-row {
    display: block !important;
    min-width: 0 !important;
    padding-top: 7px !important;
  }
  .route-gradeslip.grade-slip-live-preview .grade-slip-checkbox-group {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }
  .route-gradeslip.grade-slip-live-preview .grade-slip-visibility-toggle {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 7px 10px !important;
    overflow: hidden !important;
    font-size: clamp(9px, .72vw, 12px) !important;
  }
  .route-gradeslip.grade-slip-live-preview .grade-slip-visibility-toggle span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .route-gradeslip.grade-slip-live-preview .grade-slip-output-note {
    display: none !important;
  }
  .route-gradeslip.grade-slip-live-preview .grade-slip-fit-preview.g2g10-grade-slip-preview {
    container-type: size;
    display: grid !important;
    flex: 1 1 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 4px !important;
    overflow: hidden !important;
    border-radius: 14px !important;
    background: #edf2f5 !important;
  }
  .route-gradeslip.grade-slip-live-preview .g2g10-grade-slip-sheet {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-self: center !important;
    justify-self: center !important;
    gap: 8px !important;
    width: min(calc(100% - 2px), 141.428cqh) !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 5px !important;
    overflow: hidden !important;
    aspect-ratio: 297 / 210 !important;
    background: #fff !important;
    border: 1px solid #cbd6dd !important;
    box-shadow: 0 10px 26px rgba(27, 43, 68, .11) !important;
  }
  .route-gradeslip.grade-slip-live-preview .g2g10-grade-slip-panel {
    height: 100% !important;
    min-height: 0 !important;
  }
  .route-gradeslip.grade-slip-live-preview .grade-slip-empty-copy {
    background: #fff !important;
  }
  /* Never let A5 or Short alter the in-app preview geometry. */
  .route-gradeslip.grade-slip-live-preview .grade-slip-fit-preview[data-preview-paper-size="a4"] .g2g10-grade-slip-sheet {
    aspect-ratio: 297 / 210 !important;
  }
}

@media screen and (max-width: 1180px) {
  .route-gradeslip.grade-slip-live-preview .grade-slip-checkbox-group {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }
  .route-gradeslip.grade-slip-live-preview .grade-slip-visibility-toggle {
    padding-inline: 5px !important;
    font-size: clamp(8px, .72vw, 10px) !important;
  }
}

/* AcadMates v1.2.53 / Build 366 — Grade Slip SF9-style width-fit preview.
   The preview always keeps the fixed A4 landscape layout, fills the available
   content width from left to right, and derives its height from that width.
   There is no internal preview scrollbar and no width/height crop. */
@media screen {
  #app-shell .view.route-gradeslip.grade-slip-live-preview {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  .route-gradeslip.grade-slip-live-preview .grade-slip-fit-preview.g2g10-grade-slip-preview {
    display: block !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 6px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }
  .route-gradeslip.grade-slip-live-preview .g2g10-grade-slip-sheet {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 6px !important;
    overflow: hidden !important;
    aspect-ratio: 297 / 210 !important;
  }
}

/* AcadMates v1.2.54 / Build 367 — Grade Slip exact Excel-raster preview.
   Same preview method as SF9: the immutable A4 image is exported from the
   official Excel Grade Slip template and AcadMates paints only live values in
   a transparent SVG layer. The whole Grade Slip route scrolls to the true
   bottom; there is no nested preview scrollbar and no cropped lower edge. */
@media screen {
  #app-shell .view.route-gradeslip.grade-slip-live-preview {
    display: block !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-bottom: 140px !important;
    scroll-padding-bottom: 140px !important;
    box-sizing: border-box !important;
    scrollbar-gutter: stable !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .route-gradeslip.grade-slip-live-preview .grade-slip-fit-preview.g2g10-grade-slip-preview {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 6px 6px 72px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    background: #edf2f5 !important;
    border-radius: 14px !important;
  }

  .route-gradeslip .grade-slip-authoritative-excel-preview {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1754 / 1241 !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    background: #fff !important;
    border: 1px solid #d4dde4 !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(27,43,68,.13) !important;
  }

  .route-gradeslip .grade-slip-exact-instant-template {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: fill !important;
    background: #fff !important;
    user-select: none !important;
    pointer-events: none !important;
  }

  .route-gradeslip .grade-slip-exact-live-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  .route-gradeslip .grade-slip-live-value {
    box-sizing: border-box !important;
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 3px !important;
    overflow: hidden !important;
    color: #000 !important;
    background: transparent !important;
    font-family: "Bookman Old Style", "URW Bookman", Bookman, serif !important;
    font-size: var(--grade-slip-live-font-size, 15px) !important;
    font-weight: 400 !important;
    line-height: 1.04 !important;
    text-align: center !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
  }

  .route-gradeslip .grade-slip-live-school-name {
    font-family: "Georgia Pro Black", Georgia, "Times New Roman", serif !important;
    font-size: 17.5px !important;
    font-weight: 900 !important;
  }
  .route-gradeslip .grade-slip-live-school-year { font-size: 17.5px !important; }
  .route-gradeslip .grade-slip-live-learner-name { font-size: var(--grade-slip-live-font-size, 15px) !important; }
  .route-gradeslip .grade-slip-live-lrn,
  .route-gradeslip .grade-slip-live-section,
  .route-gradeslip .grade-slip-live-number { font-size: 15px !important; }
  .route-gradeslip .grade-slip-live-subject {
    justify-content: flex-start !important;
    padding-left: 3px !important;
    font-size: 15px !important;
    text-align: left !important;
  }
  .route-gradeslip .grade-slip-live-grade { font-size: 15px !important; }
  .route-gradeslip .grade-slip-live-final,
  .route-gradeslip .grade-slip-live-general-average { font-weight: 700 !important; }
  .route-gradeslip .grade-slip-live-remark {
    font-family: "Bookman Old Style", "URW Bookman", Bookman, serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
  }
  .route-gradeslip .grade-slip-live-comment-label {
    justify-content: flex-start !important;
    padding-left: 0 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-align: left !important;
  }
  .route-gradeslip .grade-slip-live-comment {
    padding: 2px 8px !important;
    font-size: 15px !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  .route-gradeslip .grade-slip-live-adviser {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
  }
  .route-gradeslip .grade-slip-live-adviser-title {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
  }
}


/* v1.2.66 / Build 379: Grades 2-3 SF9 A4 browser-print fallback.
   Match the approved Excel Page Setup: 0.7 cm on all four outer edges.
   The exact Windows exporter writes the equivalent OOXML inch values and
   uses 0.8 cm for header/footer margins. */
@media print {
  @page academates-g23-sf9-a4 { size: A4 landscape; margin: 0.7cm; }
  .route-reports .sf9-exact-paper.sf9-profile-g23.sf9-paper-a4 {
    page: academates-g23-sf9-a4;
  }

  /* Reprint preview fallback: hide the pre-printed form ink and reveal only
     the target grade values. The production Excel/PDF path performs the same
     operation at native workbook-cell level for physical alignment. */
  .route-reports .sf9-exact-paper.sf9-overlay-mode .sf9-side * {
    visibility: hidden !important;
  }
  .route-reports .sf9-exact-paper.sf9-overlay-mode.sf9-layer-t1 .sf9-grade-t1,
  .route-reports .sf9-exact-paper.sf9-overlay-mode.sf9-layer-t2 .sf9-grade-t2,
  .route-reports .sf9-exact-paper.sf9-overlay-mode.sf9-layer-t3 .sf9-grade-t3,
  .route-reports .sf9-exact-paper.sf9-overlay-mode.sf9-layer-final .sf9-grade-final {
    visibility: visible !important;
  }
}